/**
 * ORAC UI — componentes e tokens do design system.
 *
 * CSS puro, sem build e sem Tailwind: carregado em TODA pagina, inclusive
 * nas que nao usam Tailwind (login, portal). E aqui que vivem spinners,
 * toasts, modais, skeletons e as animacoes.
 *
 * As utilidades do Tailwind ficam em orac.css, carregado a parte.
 */
/* ==================================================================
   ORAC — design system
   A cor de marca vem do banco (company_settings.primary_color) e e
   injetada por partials/theme.php como --brand / --brand-rgb.
   ================================================================== */


    :root {
        --ui-bg: #f6f7fb;
        --ui-panel: #ffffff;
        --ui-panel-alt: #fbfcfe;
        --ui-text: #0f172a;
        --ui-muted: #64748b;
        --ui-border: #e6e9f0;
        --ui-ring: rgba(15, 23, 42, 0.06);

        --ui-success: #16a34a;
        --ui-danger: #dc2626;
        --ui-warning: #d97706;
        --ui-info: #2563eb;

        --ui-radius: 16px;
        --ui-radius-sm: 10px;
        --ui-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
        --ui-shadow-lg: 0 24px 60px rgba(15, 23, 42, 0.12);

        --ui-ease: cubic-bezier(0.16, 1, 0.3, 1);
        --ui-fast: 140ms;
        --ui-normal: 240ms;
    }

    * {
        box-sizing: border-box;
    }

    html {
        -webkit-text-size-adjust: 100%;
    }

    body {
        margin: 0;
        font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
        background: var(--ui-bg);
        color: var(--ui-text);
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
    }

    /* Respeita quem pediu menos animacao no sistema operacional. */
    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
    }

    :focus-visible {
        outline: 2px solid var(--brand, #ef4444);
        outline-offset: 2px;
    }

    .orac-no-scroll {
        overflow: hidden;
    }
}

/* ==================================================================
   Animacoes
   ================================================================== */

@keyframes orac-spin { to { transform: rotate(360deg); } }

@keyframes orac-shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}

@keyframes orac-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.45; }
}



    /* -------------------------------------------------------------- *
     * Spinner
     * -------------------------------------------------------------- */

    .orac-spinner {
        display: inline-block;
        flex: none;
        border-radius: 50%;
        border-style: solid;
        border-color: currentColor;
        border-right-color: transparent;
        animation: orac-spin 640ms linear infinite;
        vertical-align: -0.125em;
    }

    .orac-spinner--sm { width: 14px; height: 14px; border-width: 2px; }
    .orac-spinner--md { width: 22px; height: 22px; border-width: 2.5px; }
    .orac-spinner--lg { width: 34px; height: 34px; border-width: 3px; }

    /* -------------------------------------------------------------- *
     * Overlay de carregamento
     * -------------------------------------------------------------- */

    .orac-loading {
        position: absolute;
        inset: 0;
        z-index: 20;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12px;
        background: rgba(255, 255, 255, 0.78);
        backdrop-filter: blur(2px);
        color: var(--brand, #ef4444);
        border-radius: inherit;
        opacity: 0;
        transition: opacity var(--ui-normal) var(--ui-ease);
    }

    .orac-loading.is-visible { opacity: 1; }

    .orac-loading__text {
        margin: 0;
        font-size: 13px;
        font-weight: 600;
        color: var(--ui-muted);
    }

    /* -------------------------------------------------------------- *
     * Skeleton
     * -------------------------------------------------------------- */

    .orac-skeleton {
        display: block;
        width: 100%;
        height: 12px;
        border-radius: 6px;
        background: #eef1f6;
        background-image: linear-gradient(90deg, #eef1f6 0px, #f7f9fc 200px, #eef1f6 400px);
        background-size: 800px 100%;
        animation: orac-shimmer 1.4s linear infinite;
    }

    .orac-skeleton-row td { padding: 14px 16px; }

    /* -------------------------------------------------------------- *
     * Toasts
     * -------------------------------------------------------------- */

    .orac-toasts {
        position: fixed;
        z-index: 9999;
        top: 16px;
        right: 16px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        max-width: min(380px, calc(100vw - 32px));
        pointer-events: none;
    }

    .orac-toast {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 13px 14px;
        border-radius: var(--ui-radius-sm);
        background: var(--ui-panel);
        border: 1px solid var(--ui-border);
        border-left: 4px solid var(--ui-info);
        box-shadow: var(--ui-shadow-lg);
        font-size: 14px;
        font-weight: 600;
        color: var(--ui-text);
        pointer-events: auto;
        opacity: 0;
        transform: translateX(16px) scale(0.98);
        transition: opacity var(--ui-normal) var(--ui-ease),
                    transform var(--ui-normal) var(--ui-ease);
    }

    .orac-toast.is-visible {
        opacity: 1;
        transform: translateX(0) scale(1);
    }

    .orac-toast__icon { width: 18px; height: 18px; flex: none; margin-top: 1px; }
    .orac-toast__text { flex: 1; line-height: 1.45; }

    .orac-toast__close {
        flex: none;
        border: 0;
        background: transparent;
        cursor: pointer;
        font-size: 20px;
        line-height: 1;
        color: var(--ui-muted);
        padding: 0 2px;
        transition: color var(--ui-fast) var(--ui-ease);
    }

    .orac-toast__close:hover { color: var(--ui-text); }

    .orac-toast--success { border-left-color: var(--ui-success); }
    .orac-toast--success .orac-toast__icon { color: var(--ui-success); }
    .orac-toast--error   { border-left-color: var(--ui-danger); }
    .orac-toast--error   .orac-toast__icon { color: var(--ui-danger); }
    .orac-toast--warning { border-left-color: var(--ui-warning); }
    .orac-toast--warning .orac-toast__icon { color: var(--ui-warning); }
    .orac-toast--info    { border-left-color: var(--ui-info); }
    .orac-toast--info    .orac-toast__icon { color: var(--ui-info); }

    @media (max-width: 640px) {
        .orac-toasts {
            top: auto;
            bottom: 16px;
            left: 16px;
            right: 16px;
            max-width: none;
        }
        .orac-toast { transform: translateY(16px) scale(0.98); }
        .orac-toast.is-visible { transform: translateY(0) scale(1); }
    }

    /* -------------------------------------------------------------- *
     * Modal
     * -------------------------------------------------------------- */

    .orac-modal-backdrop {
        position: fixed;
        inset: 0;
        z-index: 9000;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        background: rgba(15, 23, 42, 0.45);
        backdrop-filter: blur(3px);
        opacity: 0;
        transition: opacity var(--ui-normal) var(--ui-ease);
        overflow-y: auto;
    }

    .orac-modal-backdrop.is-visible { opacity: 1; }

    .orac-modal {
        width: 100%;
        background: var(--ui-panel);
        border-radius: var(--ui-radius);
        box-shadow: var(--ui-shadow-lg);
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - 40px);
        transform: translateY(12px) scale(0.97);
        transition: transform var(--ui-normal) var(--ui-ease);
    }

    .orac-modal-backdrop.is-visible .orac-modal {
        transform: translateY(0) scale(1);
    }

    .orac-modal--sm { max-width: 420px; }
    .orac-modal--md { max-width: 620px; }
    .orac-modal--lg { max-width: 880px; }
    .orac-modal--xl { max-width: 1140px; }

    .orac-modal__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 18px 20px;
        border-bottom: 1px solid var(--ui-border);
    }

    .orac-modal__title {
        margin: 0;
        font-size: 17px;
        font-weight: 800;
        letter-spacing: -0.01em;
    }

    .orac-modal__close {
        border: 0;
        background: transparent;
        font-size: 26px;
        line-height: 1;
        color: var(--ui-muted);
        cursor: pointer;
        padding: 0 4px;
        border-radius: 8px;
        transition: color var(--ui-fast) var(--ui-ease),
                    background var(--ui-fast) var(--ui-ease);
    }

    .orac-modal__close:hover {
        color: var(--ui-text);
        background: var(--ui-bg);
    }

    .orac-modal__body {
        padding: 20px;
        overflow-y: auto;
        flex: 1;
    }

    .orac-modal__foot {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        padding: 16px 20px;
        border-top: 1px solid var(--ui-border);
        background: var(--ui-panel-alt);
        border-radius: 0 0 var(--ui-radius) var(--ui-radius);
    }

    .orac-confirm__text {
        margin: 0;
        font-size: 15px;
        line-height: 1.55;
        color: var(--ui-text);
    }

    @media (max-width: 640px) {
        .orac-modal-backdrop { padding: 0; align-items: flex-end; }
        .orac-modal {
            max-width: none;
            border-radius: var(--ui-radius) var(--ui-radius) 0 0;
            max-height: 92vh;
            transform: translateY(100%);
        }
        .orac-modal__foot { border-radius: 0; }
    }

    /* -------------------------------------------------------------- *
     * Botoes
     * -------------------------------------------------------------- */

    .orac-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 10px 16px;
        border-radius: var(--ui-radius-sm);
        border: 1px solid transparent;
        font-family: inherit;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.2;
        cursor: pointer;
        white-space: nowrap;
        transition: background var(--ui-fast) var(--ui-ease),
                    border-color var(--ui-fast) var(--ui-ease),
                    color var(--ui-fast) var(--ui-ease),
                    transform var(--ui-fast) var(--ui-ease),
                    box-shadow var(--ui-fast) var(--ui-ease);
    }

    .orac-btn:active:not(:disabled) { transform: translateY(1px); }

    .orac-btn:disabled,
    .orac-btn.is-busy {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
    }

    .orac-btn--primary {
        background: var(--brand, #ef4444);
        color: #fff;
        box-shadow: 0 6px 16px rgba(var(--brand-rgb, 239, 68, 68), 0.25);
    }

    .orac-btn--primary:hover:not(:disabled) {
        background: var(--brand-600, #dc2626);
        box-shadow: 0 8px 22px rgba(var(--brand-rgb, 239, 68, 68), 0.32);
    }

    .orac-btn--ghost {
        background: transparent;
        border-color: var(--ui-border);
        color: var(--ui-text);
    }

    .orac-btn--ghost:hover:not(:disabled) {
        background: var(--ui-bg);
        border-color: #cfd6e2;
    }

    .orac-btn--danger {
        background: var(--ui-danger);
        color: #fff;
        box-shadow: 0 6px 16px rgba(220, 38, 38, 0.25);
    }

    .orac-btn--danger:hover:not(:disabled) { background: #b91c1c; }

    .orac-btn--sm { padding: 7px 12px; font-size: 13px; }
    .orac-btn--block { width: 100%; }

    /* -------------------------------------------------------------- *
     * Estado vazio
     * -------------------------------------------------------------- */

    .orac-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 48px 20px;
        text-align: center;
    }

    .orac-empty__icon { font-size: 34px; line-height: 1; opacity: 0.65; }

    .orac-empty__title {
        margin: 6px 0 0;
        font-size: 15px;
        font-weight: 700;
        color: var(--ui-text);
    }

    .orac-empty__text {
        margin: 0;
        font-size: 13.5px;
        color: var(--ui-muted);
        max-width: 40ch;
        line-height: 1.5;
    }

    /* -------------------------------------------------------------- *
     * Revelacao ao rolar
     * -------------------------------------------------------------- */

    [data-orac-reveal] {
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 420ms var(--ui-ease), transform 420ms var(--ui-ease);
    }

    [data-orac-reveal].is-revealed {
        opacity: 1;
        transform: none;