/* ==========================================================================
   As superfícies do Xenios

   Três, e só três. Toda caixa que segura conteúdo no sistema é uma delas.

   ── Por que este arquivo passou a existir (2026-09-09) ──────────────────
   Medindo as folhas de `assets/css/app`, havia **32 regras** definindo uma
   superfície (fundo + raio/borda), espalhadas por **11 arquivos**, com 21
   assinaturas visuais distintas. Boa parte dessas 21 era a mesma superfície
   escrita de novo: SETE nomes para a caixa interna, TRÊS para o painel, DOIS
   para o cartão de destaque — todos com valores idênticos, confirmados no
   navegador e não na leitura do CSS.

   A causa é a mesma do campo (ver `campo.css`): não havia onde pegar a
   superfície, então cada tela escrevia a sua. Duas consequências apareceram
   sozinhas:

     · `.occ-guest-card` existia em check-in.css E em estadia.css, com fundos
       DIFERENTES. estadia.css carrega depois: o check-in perdia, em silêncio,
       nas duas telas. (Corrigido — a família da estadia virou
       `.occ-stay-guest-card`.)
     · `.occ-stay-meta-card` estava copiada byte a byte em estadia.css e
       extrato.css.

   ── A regra de convivência ──────────────────────────────────────────────
   Cada grupo abaixo começa pelo nome Xenios e lista, em seguida, os nomes que
   as telas já usam. Os nomes antigos foram mantidos com a forma EXATA do
   seletor original — `.cad-premium .cad-surface` e não `.cad-surface` — para
   que a especificidade não mude e nenhuma regra de tela que hoje vence passe a
   perder. Tela nova usa o nome Xenios; as antigas migram quando forem mexidas.

   O que fica no arquivo da tela: posicionamento, respiro, `:hover`, conteúdo.
   O que sai: fundo, borda, raio e sombra — a identidade.
   ========================================================================== */

/* ── 1. O painel ─────────────────────────────────────────────────────────
   A superfície de primeiro nível: o formulário, o quadro, o bloco que assenta
   direto sobre o fundo da página. Borda de vidro e sombra, porque ela flutua.

   Usada por: ficha de cadastro, quadro do borderô, conferência de caixa. */
.xn-superficie,
.cad-premium .cad-surface,
.cad-premium .card,
.reconciliation-panel {
    background: var(--occ-surface);
    border: 1px solid var(--occ-glass-bd);
    border-radius: var(--occ-radius);
    box-shadow: var(--occ-shadow);
    color: var(--occ-ink);
}

/* ── 2. A caixa interna ──────────────────────────────────────────────────
   O que mora DENTRO de um painel: um endereço, um acompanhante, um hóspede,
   um par rótulo/valor. Sobe um degrau de superfície para se destacar do painel
   que a contém, e usa o raio pequeno e o filete fino — sem sombra, porque ela
   não flutua: está encaixada.

   Eram sete nomes. Note que quatro deles dizem "card" e três dizem coisas
   diferentes; nenhum dizia que era a mesma peça. */
.xn-superficie--interna,
.cad-premium .cad-address-card,
.occ-guest-card,
.occ-stay-meta-card,
.occ-modal-card,
.occ-acompanhante-card,
.occ-checkbox-card {
    background: var(--occ-surface-2);
    border: 1px solid var(--occ-line);
    border-radius: var(--occ-radius-sm);
}

/* NAO entra aqui: `.occ-stay-guest-card`, a ficha de hospede da estadia. Ela fica em
   `--occ-surface` de proposito -- o cabecalho dela e que usa `--occ-surface-2`, e
   igualar os dois apagaria a distincao entre a faixa e o corpo do cartao. Mesma
   familia do `.rack-card`: caixa que se assenta SOBRE conteudo, e nao dentro de um
   painel. Se um dia forem tres ou mais, viram a quarta superficie deste arquivo. */

/* ── 3. O cartão de destaque ─────────────────────────────────────────────
   O painel com vidro: gradiente sutil e desfoque atrás. Reservado ao que se lê
   de relance e não se lê duas vezes — total de caixa, ocupação do dia.

   Não é enfeite de tela cheia: se tudo brilha, nada brilha. Hoje são os quatro
   totais do borderô e os cartões do dashboard. */
.xn-superficie--destaque,
.bordero-metric-card,
.dash-premium .card {
    background: linear-gradient(135deg, var(--occ-glass-bg) 0%, var(--occ-surface) 100%);
    -webkit-backdrop-filter: var(--occ-glass-blur);
    backdrop-filter: var(--occ-glass-blur);
    border: 1px solid var(--occ-glass-bd);
    border-radius: var(--occ-radius);
    box-shadow: var(--occ-shadow);
    color: var(--occ-ink);
}