/* ------------------------------------------------------------------------------
 *
 *  # Custom CSS
 *
 * ---------------------------------------------------------------------------- */

/* ------------------------------------------------------------------------------
 *  # Tabela de Ocupação — design tokens (redesign F0)
 *
 *  Namespace isolado (--occ-* / --st-*). O tema escuro engata no atributo
 *  [data-color-theme="dark"] que js/app/navbar.js seta no <html> (botão #xn-theme-toggle,
 *  persistido em localStorage['xn-theme']). O demo_configurator.js do Limitless FOI
 *  REMOVIDO do head.html — o autoTheme() dele desfazia essa escolha.
 * ---------------------------------------------------------------------------- */
:root {
    --occ-bg: #f4f7f9;
    --occ-surface: #ffffff;
    --occ-surface-2: #f8fafc;
    --occ-ink: #0f172a;
    --occ-ink-soft: #64748b;
    --occ-ink-faint: #94a3b8;
    --occ-line: rgba(15, 23, 42, .06);

    /* Campo desabilitado. NAO da para derivar de --occ-surface: no escuro a
       superficie da pagina e mais escura que a do campo (o desabilitado afunda,
       que e o certo), mas no claro ela e BRANCA -- mais clara que o campo, e o
       desabilitado subiria em vez de afundar. Por isso o tom e proprio de cada
       tema. Ver app/campo.css. */
    --occ-field-off: #eef2f7;
    --occ-line-strong: rgba(15, 23, 42, .12);
    --occ-weekend: rgba(15, 23, 42, .035);
    /* tint neutro do fim de semana */
    --occ-accent: #1ca7a7;
    /* Carsoft Teal */
    --occ-accent-soft: rgba(28, 167, 167, .12);
    --occ-warn: #f59e0b;
    --occ-warn-soft: rgba(245, 158, 11, .12);
    --occ-danger: #ef4444;
    --occ-danger-soft: rgba(239, 68, 68, .12);
    /*  Vermelho de TEXTO, separado do de preenchimento (2026-08-27). Medido: #ef4444
     *  sobre branco da 3,76:1 e sobre --occ-surface-2 da 3,60 -- os dois REPROVAM o
     *  minimo de 4,5:1 da WCAG AA para texto normal. #dc2626 da 4,83 e 4,62.
     *  O tom de preenchimento nao muda: em fundo e borda o contraste exigido e outro
     *  (3:1, componente de interface), e #ef4444 e a cor da marca para isso. */
    --occ-danger-ink: #dc2626;
    --occ-glass-bg: rgba(255, 255, 255, .75);
    --occ-glass-bd: rgba(255, 255, 255, .6);
    --occ-glass-blur: blur(16px) saturate(160%);
    --occ-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03), 0 12px 24px -8px rgba(0, 0, 0, 0.08);
    --occ-radius: 16px;
    --occ-radius-sm: 10px;
    --occ-row-h: 36px;
    --occ-ease: cubic-bezier(0.25, 0.8, 0.25, 1);
    --occ-dur: .25s;

    /* Escala de espacamento — base 4px. Ate aqui o espacamento era literal ou
       utilitario Bootstrap; sem escala nomeada nao ha ritmo entre as telas. */
    --occ-space-1: 4px;
    --occ-space-2: 8px;
    --occ-space-3: 12px;
    --occ-space-4: 16px;
    --occ-space-5: 24px;
    --occ-space-6: 32px;
    --occ-space-7: 48px;

    /* Tipografia — o namespace --occ-* nao tinha nenhum token de texto; os
       tamanhos viviam repetidos em estadia.css, check-in.css e grade-reservas.css.
       Rampa em px: 11 / 12 / 13 / 14 / 15 / 17. */
    --occ-fs-micro: .6875rem;
    /* 11px — eyebrow, contador, micro-rotulo de coluna */
    --occ-fs-xs: .75rem;
    /* 12px — rotulo de campo, mensagem de erro */
    --occ-fs-sm: .8125rem;
    /* 13px — hint de secao, celula de tabela, filtros */
    --occ-fs-base: .875rem;
    /* 14px — valor digitado (igual ao --body-font-size do Bootstrap) */
    --occ-fs-md: .9375rem;
    /* 15px — titulo de secao, identidade do registro */
    --occ-fs-lg: 1.0625rem;
    /* 17px — titulo de pagina */
    --occ-fw-medium: 500;
    --occ-fw-semibold: 600;
    --occ-fw-bold: 700;
    --occ-lh-tight: 1.35;
    --occ-lh-base: 1.5;
    --occ-ls-eyebrow: .08em;
    --occ-ls-label: .01em;

    /* Metricas de formulario. 36px casa com o --occ-row-h ja usado. */
    --occ-field-h: 36px;
    --occ-field-h-sm: 30px;
    /* filtros inline do <thead> */
    --occ-radius-xs: 8px;
    /* degrau que faltava abaixo de --occ-radius-sm (10px) */

    /* Sombras. --occ-shadow-lg CORRIGE BUG EXISTENTE: e consumido em
       overrides.css:209 (.occ-confirm-box) e extrato.css:16 (#extrato-hub) e
       nunca foi declarado — hoje os dois caem em box-shadow invalido. */
    --occ-shadow-sm: 0 1px 2px rgba(15, 23, 42, .05), 0 1px 3px rgba(15, 23, 42, .04);
    --occ-shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, .06), 0 24px 48px -12px rgba(15, 23, 42, .14);

    /* status — trio: -on (indicador/borda solido) + -soft (fill translucido ~14%) */
    --st-reserva: #0ea5e9;
    --st-reserva-soft: rgba(14, 165, 233, .16);
    /* Ocean Blue */
    --st-prepaga: #8b5cf6;
    --st-prepaga-soft: rgba(139, 92, 246, .16);
    /* Vibrant Purple */
    --st-confirmada: #10b981;
    --st-confirmada-soft: rgba(16, 185, 129, .16);
    /* Emerald Green */
    --st-grupo: #f59e0b;
    --st-grupo-soft: rgba(245, 158, 11, .16);
    /* Amber */
    --st-early: #84cc16;
    --st-early-soft: rgba(132, 204, 22, .16);
    /* Lime */
    --st-checkin: #ec4899;
    --st-checkin-soft: rgba(236, 72, 153, .16);
    /* Pink */
    --st-checkout: #64748b;
    --st-checkout-soft: rgba(100, 116, 139, .16);
    /* Slate */
    --st-late: #f43f5e;
    --st-late-soft: rgba(244, 63, 94, .16);
    /* Rose */
    --st-grupopre: #d946ef;
    --st-grupopre-soft: rgba(217, 70, 239, .16);
    /* Fuchsia */
    --st-deadline: #ef4444;
    --st-deadline-soft: rgba(239, 68, 68, .16);
    /* Red */
    --st-interditado: #a8a29e;
    --st-interditado-soft: rgba(168, 162, 158, .16);
    /* Warm Gray */
    --st-bloqueado: #708090;
    --st-bloqueado-soft: rgba(112, 128, 144, .16);
    /* Slate Gray */

    /* No-show (Fase 6) — mesmo par -on/-soft dos status acima */
    --st-noshow: #dc2626;
    --st-noshow-soft: rgba(220, 38, 38, .16);
    /* Red */

    /* Flags de reserva (Fase 3) — namespace próprio: podem aparecer sobre QUALQUER
       status acima, não são um status à parte. */
    --fl-guaranteed: #3b82f6;
    --fl-guaranteed-soft: rgba(59, 130, 246, .16);
    /* Blue — garantida */
    --fl-expired: #ef4444;
    --fl-expired-soft: rgba(239, 68, 68, .16);
    /* Red — deadline vencido */
    --fl-latecheckout: #0d9488;
    --fl-latecheckout-soft: rgba(13, 148, 136, .16);
    /* Teal — late checkout concedido */
}

/* Rampa "grafite quente" (2026-08-11). O dark anterior era a familia slate do
   Tailwind (#111827, hue 221, sat 39%) e tinha DOIS defeitos:

   1. matiz. O fundo da pagina nunca veio daqui — vinha do --body-bg do Limitless
      (#202125, sat 7%). Duas paletas na mesma tela: cinza na pagina, azul no card.
   2. elevacao invertida. #111827 e mais ESCURO que #202125, entao o card afundava
      em vez de subir. Em dark mode a camada mais proxima do olho e a mais clara.

   Agora a rampa e continua e neutra-quente (hue ~20, sat 4%), subindo
   bg -> surface -> surface-2, e --occ-bg finalmente alimenta o --body-bg (ate
   aqui ele era declarado e nunca consumido por regra nenhuma). */
[data-color-theme="dark"] {
    --occ-bg: #1b1917;
    --occ-surface: #232120;
    --occ-surface-2: #2d2a28;
    --occ-ink: #f5f3f1;
    --occ-ink-soft: #a8a29e;
    /* #475569 dava 2.34:1 sobre a superficie antiga — reprovava WCAG AA (alvo 3:1)
       no placeholder de busca e no traco de celula vazia. Agora 4.53:1. */
    --occ-ink-faint: #8f877f;
    --occ-line: rgba(255, 255, 255, .07);
    --occ-field-off: #232120;
    --occ-line-strong: rgba(255, 255, 255, .14);
    --occ-weekend: rgba(255, 255, 255, .055);
    /* tint neutro do fim de semana — subiu junto com a superficie, senao some */
    --occ-accent: #3cd0d0;
    --occ-accent-soft: rgba(60, 208, 208, .16);
    --occ-warn: #fbbf24;
    --occ-warn-soft: rgba(251, 191, 36, .18);
    --occ-danger: #f87171;
    --occ-danger-soft: rgba(248, 113, 113, .18);
    /*  No escuro o proprio vermelho ja da 5,8:1 sobre --occ-surface -- nao precisa de
     *  um tom a parte para texto. */
    --occ-danger-ink: #f87171;
    /* a navbar flutua sobre a PAGINA, entao o vidro deriva de --occ-bg, nao da superficie */
    --occ-glass-bg: rgba(27, 25, 23, .72);
    --occ-glass-bd: rgba(255, 255, 255, .09);
    /* sombras aliviadas: com a superficie mais clara que a pagina, o peso antigo
       (.4/.6) lia como sujeira em volta do card em vez de elevacao */
    --occ-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.28), 0 18px 34px -12px rgba(0, 0, 0, 0.45);
    /* espelho escuro APENAS das sombras — espacamento, tipografia e metrica nao
       mudam com o tema */
    --occ-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
    --occ-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .3), 0 24px 48px -12px rgba(0, 0, 0, .5);

    /* --------------------------------------------------------------------------
       Base do Limitless amarrada a esta rampa.

       NAO editar bootstrap_limitless.css: e vendor (Limitless 4.x), compartilhado,
       e o xenios-authentication tem copia propria. tokens.css carrega DEPOIS dele
       (head.html), entao redeclarar aqui ganha no empate de especificidade.

       So --body-bg mora aqui: e a UNICA variavel de superficie que o Limitless
       declara na raiz (bootstrap_limitless.css:60). Todas as outras ele declara
       por componente, em seletor descendente — ver o bloco logo abaixo.
       -------------------------------------------------------------------------- */
    --body-bg: var(--occ-bg);

    --st-reserva: #38bdf8;
    --st-reserva-soft: rgba(56, 189, 248, .22);
    --st-prepaga: #a78bfa;
    --st-prepaga-soft: rgba(167, 139, 250, .22);
    --st-confirmada: #34d399;
    --st-confirmada-soft: rgba(52, 211, 153, .22);
    --st-grupo: #fbbf24;
    --st-grupo-soft: rgba(251, 191, 36, .22);
    --st-early: #a3e635;
    --st-early-soft: rgba(163, 230, 53, .22);
    --st-checkin: #f472b6;
    --st-checkin-soft: rgba(244, 114, 182, .22);
    /* Slate clareado: sobre a superficie NOVA (mais clara), #94a3b8 caia para
       4.18:1 dentro do fill -soft e reprovava AA na pill de 12px/600. Agora 4.76:1.
       Vale para os dois status cinzas — checkout e bloqueado. */
    --st-checkout: #a1aebf;
    --st-checkout-soft: rgba(148, 163, 184, .22);
    --st-late: #fb7185;
    --st-late-soft: rgba(251, 113, 133, .22);
    --st-grupopre: #e879f9;
    --st-grupopre-soft: rgba(232, 121, 249, .22);
    --st-deadline: #f87171;
    --st-deadline-soft: rgba(248, 113, 113, .22);
    --st-interditado: #d6d3d1;
    --st-interditado-soft: rgba(214, 211, 209, .22);
    --st-bloqueado: #a1aebf;
    --st-bloqueado-soft: rgba(148, 163, 184, .22);

    --st-noshow: #f87171;
    --st-noshow-soft: rgba(248, 113, 113, .22);

    --fl-guaranteed: #60a5fa;
    --fl-guaranteed-soft: rgba(96, 165, 250, .22);
    --fl-expired: #f87171;
    --fl-expired-soft: rgba(248, 113, 113, .22);
    --fl-latecheckout: #2dd4bf;
    --fl-latecheckout-soft: rgba(45, 212, 191, .22);
}

/* ------------------------------------------------------------------------------
 *  Superficies do Limitless, por componente.
 *
 *  POR QUE NAO ESTAO NO BLOCO ACIMA: exceto --body-bg, o Limitless declara cada
 *  variavel de superficie num seletor DESCENDENTE, e o mais forte da lista dele e
 *  `[data-color-theme=dark] .modal:not([data-color-theme])` — especificidade
 *  (0,3,0). Uma declaracao na raiz e (0,1,0) e perde, mesmo vindo depois: a
 *  variavel e simplesmente redeclarada dentro do componente.
 *
 *  Medido: com a versao na raiz, `.modal-content` continuava em rgb(44,45,51)
 *  (#2c2d33, o cinza FRIO do tema) no meio de uma pagina grafite quente. As telas
 *  sob `.cad-premium` mascaravam o problema porque pintam os elementos direto com
 *  var(--occ-*), sem passar por essas variaveis.
 *
 *  Por isso o seletor abaixo espelha o do vendor e soma o `html` para desempatar
 *  em (0,3,1). `.sidebar` do Limitless nao entra: nenhum template usa.
 * ---------------------------------------------------------------------------- */
html[data-color-theme="dark"] .card:not([data-color-theme])       { --card-bg: var(--occ-surface); }
html[data-color-theme="dark"] .modal:not([data-color-theme])      { --modal-bg: var(--occ-surface); }
html[data-color-theme="dark"] .offcanvas:not([data-color-theme])  { --offcanvas-bg: var(--occ-surface); }
html[data-color-theme="dark"] .pagination:not([data-color-theme]) {
    --pagination-bg: var(--occ-surface);
    --pagination-disabled-bg: var(--occ-surface);
}
html[data-color-theme="dark"] .nav-tabs:not(.nav-tabs-underline):not(.nav-tabs-overline):not(.nav-tabs-solid):not([data-color-theme]) {
    --nav-tabs-link-active-bg: var(--occ-surface);
}
html[data-color-theme="dark"] .form-control:not([data-color-theme]) {
    --input-bg: var(--occ-surface-2);
    --input-focus-bg: var(--occ-surface-2);
}
html[data-color-theme="dark"] .form-select:not([data-color-theme])      { --form-select-bg: var(--occ-surface-2); }
html[data-color-theme="dark"] .form-check-input:not([data-color-theme]) { --form-check-input-bg: var(--occ-surface-2); }

/* flutuantes ficam um degrau acima da superficie, como no Limitless original
   (#32333a sobre #2c2d33) */
html[data-color-theme="dark"] .dropdown-menu:not([data-color-theme]) { --dropdown-bg: var(--occ-surface-2); }
html[data-color-theme="dark"] .popover:not([data-color-theme])       { --popover-bg: var(--occ-surface-2); }
html[data-color-theme="dark"] .navbar:not([data-color-theme])        { --navbar-bg: var(--occ-surface-2); }

@media (prefers-reduced-motion: reduce) {

    .occ-evt,
    .occ-metric-card,
    .occ-chip {
        transition: none !important;
        transform: none !important;
    }

    /* Blinda também: anéis (arco/count-up), painel de ações e os lifts de hover. */
    .occ-ring-progress {
        transition: none !important;
    }

    .occ-panel {
        animation: none !important;
    }

    .occ-panel--below {
        animation: none !important;
    }

    .occ-evt:hover,
    .occ-metric-card:hover,
    .fc .fc-button:hover,
    .occ-panel-btn:hover,
    .occ-pop-close:hover {
        transform: none !important;
    }

    /* Gaveta retrátil do rodapé */
    .occ-footer-handle,
    .occ-footer-collapse {
        transition: none !important;
    }

    .occ-footer-handle:hover {
        transform: none !important;
    }
}

.border-gpt {
    --border-opacity: 1;
    border-color: rgba(var(--gpt-rgb), var(--border-opacity)) !important;
}

.bg-gpt {
    background-color: var(--gpt);
}

.h-100px {
    height: 100px !important;
}

.h-150px {
    height: 150px !important;
}

.h-200px {
    height: 200px !important;
}

.h-300px {
    height: 300px !important;
}