/* ==============================================================================
   FACILITY.CSS — fonte única dos tokens "Facility Slim" e do botão de ação.
   ==============================================================================
   Era o :root de templates/base.html — saiu de lá pra que os templates
   standalone (que não estendem base.html: recibo, voucher, tarifarios,
   nova_reserva, etc.) também enxerguem var(--fs-*). Sem isto, var() não
   resolve fora de base.html -- já produziu bug em produção (etiqueta branca
   no branco em tarifarios.html).

   NÃO colocar aqui seletor de elemento (body, h1, table, etc.): este
   arquivo é carregado por templates com layout próprio (standalone), e uma
   regra de elemento vazaria pra dentro deles. Cromo (navbar, alerts) fica
   inline em base.html, onde é de fato usado.
   ============================================================================== */
:root {
    /* Cores neutras -- o "Náutico Ampliado" (fundo areia, 2026-09-10) foi
       revertido no mesmo dia: dono testou em produção e não gostou do tom
       quente, preferiu o cinza-azulado de antes. Nomes de token preservados
       (é só o valor voltando); os componentes/tokens de módulo criados
       junto (--fs-mod-*, .fs-card/.fs-kpi) continuam, não usados ainda. */
    --fs-color-bg: #f1f5f9;
    --fs-color-surface: #ffffff;
    --fs-color-border: #e2e8f0;
    --fs-color-border-strong: #cbd5e1;
    --fs-color-hover-bg: #f8fafc;
    --fs-color-text: #1e293b;
    --fs-color-text-subtle: #475569;
    /* FP-85 (04/10/2026): o cinza dos subtítulos era #64748b -- 4,76:1 sobre o
       branco, mas 4,2 a 4,4:1 sobre os fundos claros do sistema (o fundo da
       tela, os selos azul, amarelo e verde), abaixo do mínimo de 4,5:1. Um
       tom mais escuro dá 4,57:1 no pior deles. Vale também para o
       --fs-color-text-faint e o --fs-color-neutro, que têm o mesmo valor. */
    --fs-color-text-muted: #5f6e84;
    /* R-105: era #94a3b8 (contraste 2,5:1 sobre fundo branco, abaixo do
       mínimo de 4,5:1 da WCAG). Dono respondeu (pergunta 9 do roteiro da
       Fase 4): escurecer. Fica idêntico a --fs-color-text-muted (~4,76:1)
       de propósito -- são papéis semânticos diferentes que hoje têm o
       mesmo valor; usado em ~114 lugares + ~89 literais em <style> de
       templates (troca em bloco no mesmo commit, ver R-105 no relatório). */
    --fs-color-text-faint: #5f6e84;

    /* Cores de marca / destaque */
    --fs-color-primary: #2563eb;
    --fs-color-primary-strong: #1d4ed8;
    /* FP-85: era #3b82f6 (3,7:1 como texto sobre o branco). Fica igual ao
       --fs-color-primary (5,2:1); o papel continua sendo outro. */
    --fs-color-primary-soft: #2563eb;

    /* Cor de ação -- "Azul Náutico", aprovada pelo dono em 2026-09-08
       (Fase 3 do plano de refatoração). Vale no admin e no portal
       (--pt-gold*, em base_portal.html). */
    --fs-color-acao: #1b5e73;
    --fs-color-acao-strong: #164a5b;
    --fs-color-acao-bg: #e6f0f4;

    /* Acento -- o dourado sobrevive SÓ sobre fundo escuro (navbar ônix do
       portal) e em preenchimento com texto escuro. Como texto sobre branco
       dá 1,9:1 de contraste; não usar assim. */
    --fs-color-acento: #d8b463;
    --fs-color-acento-strong: #bf9a4b;
    --fs-color-acento-light: #e8c468;

    /* Nomes legados: 154 usos de var(--fs-color-gold*) no repositório.
       Ficam como apelido da cor de ação -- renomear seria churn de
       centenas de linhas sem efeito na tela. Código novo escreve
       --fs-color-acao/-acao-strong/-acao-bg diretamente. */
    --fs-color-gold: var(--fs-color-acao);
    --fs-color-gold-strong: var(--fs-color-acao-strong);
    --fs-color-gold-bg: var(--fs-color-acao-bg);
    --fs-color-purple: #7c3aed;
    --fs-color-purple-strong: #6d28d9;
    --fs-color-purple-bg: #f5f3ff;
    --fs-color-purple-text: #6d28d9;
    --fs-color-purple-border: #ddd6fe;

    /* Cinza neutro (Manutenção) — sem tom de sucesso/aviso/perigo, mas
       precisa das mesmas variantes forte/clara pros preenchimentos
       de status em Governança/Mapa Diário */
    --fs-color-neutro: #5f6e84;
    --fs-color-neutro-strong: #475569;
    --fs-color-neutro-bg: #f1f5f9;
    --fs-color-neutro-text: #475569;
    --fs-color-neutro-border: #cbd5e1;

    /* Estado: sucesso / aviso / perigo / info */
    /* FP-85: o verde era #2f8f6b (4,0:1 como texto sobre o branco e como
       fundo de letra branca; 3,5:1 sobre o verde claro dos selos). O tom mais
       escuro dá 5,2:1 e 4,6:1. O "strong" (o do passar o mouse) desce junto,
       para continuar mais escuro que o normal. */
    --fs-color-success: #277a5b;
    --fs-color-success-strong: #05775a;
    --fs-color-success-bg: #e5f4ee;
    --fs-color-success-text: #065f46;
    --fs-color-success-border: #a7f3d0;
    --fs-color-success-bg-strong: #dcfce7;
    --fs-color-success-text-strong: #16a34a;
    /* Variante "alt" — outro trio de verde claro (badge/alert) que domina quase
       metade dos 46 templates, empatado em uso com o success-bg/-border/-text acima */
    --fs-color-success-bg-alt: #f0fdf4;
    --fs-color-success-border-alt: #bbf7d0;
    --fs-color-success-text-alt: #15803d;

    --fs-color-warning: #c08a2e;
    --fs-color-warning-strong: #d97706;
    --fs-color-warning-bg: #faf0dc;
    --fs-color-warning-text: #92400e;
    --fs-color-warning-border: #fde68a;
    --fs-color-warning-bg-strong: #fef3c7;
    --fs-color-warning-text-strong: #b25209;   /* FP-85: era #b45309, 4,44:1 sobre o amarelo do selo */

    /* FP-85: o vermelho era #ef4444 (3,8:1 como texto sobre o branco e como
       fundo de letra branca; 3,4:1 sobre o rosado dos selos). O tom mais
       escuro dá 5,1:1 e 4,7:1. O "strong" (o do passar o mouse) desce junto. */
    --fs-color-danger: #d62323;
    --fs-color-danger-strong: #b91c1c;
    --fs-color-danger-bg: #fef2f2;
    --fs-color-danger-text: #991b1b;
    --fs-color-danger-border: #fecaca;
    --fs-color-danger-surface: #fff1f2;
    --fs-color-danger-bg-strong: #fee2e2;
    --fs-color-danger-text-strong: #b91c1c;
    --fs-color-danger-border-strong: #fecdd3;

    --fs-color-info: #2563eb;   /* FP-85: era #3b82f6, 3,4:1 sobre o azul claro do selo */
    --fs-color-info-bg: #eff6ff;
    --fs-color-info-text: #1e40af;
    --fs-color-info-border: #bfdbfe;

    /* Sky — tom de "info" mais claro/saturado, usado em botões outline (ex.: btn-outline-info) */
    --fs-color-sky: #0284c7;
    --fs-color-sky-bg: #f0f9ff;
    --fs-color-sky-border: #bae6fd;

    /* Métricas padrão dos botões/controles "Slim" */
    --fs-control-height: 32px;
    --fs-radius: 4px;
    /* R-107: 11px cravado estava abaixo do legível em botões/pills do menu
       (usado também por .btn-nav-sair e .user-info-text em base.html).
       Subir 1px alarga um pouco a barra do menu -- por isso esta mudança
       entra no mesmo commit do R-101 (dropdowns), e a largura da barra foi
       remedida a 1366/1536px depois das duas mudanças juntas. */
    --fs-font-size: 12px;

    /* Escala tipográfica — pontos onde 11px cravado não basta mais
       (número de apartamento, nome de hóspede, título de página) */
    --fs-fs-eyebrow: 10px;
    --fs-fs-sm: 11px;
    --fs-fs-base: 13px;
    --fs-fs-lg: 15px;
    --fs-fs-xl: 18px;
    --fs-fs-2xl: 24px;

    /* Raio maior para os cartões do Mapa Diário/Governança — controles
       continuam em --fs-radius. 12px desde o redesenho de 2026-09-09
       (era 10px) -- ver plano_ux_mapa_diario_governanca na memória. */
    --fs-radius-card: 12px;

    /* Papéis semânticos da paleta reduzida (Mapa Diário / Governança):
       apontam pros tokens de cor que já existem, não criam cor nova */
    --fs-tom-ok: var(--fs-color-success);
    --fs-tom-marca: var(--fs-color-gold);
    --fs-tom-atencao: var(--fs-color-warning);
    --fs-tom-critico: var(--fs-color-danger);
    --fs-tom-neutro: var(--fs-color-text-subtle);
    --fs-tom-inativo: var(--fs-color-text-faint);
    --fs-tom-naoperturbe: var(--fs-color-purple);

    /* Acento por módulo -- tarja lateral de 4px dos cards ".fs-card--mod"
       (Náutico Ampliado, Fase 0/1). Financeiro precisa de par -text porque
       o tom de preenchimento (#bf8f3f, 2,86:1) não serve como cor de texto. */
    --fs-mod-reserva: var(--fs-color-acao);
    --fs-mod-financeiro: #bf8f3f;
    --fs-mod-financeiro-text: #8a6420;
    --fs-mod-governanca: var(--fs-color-success);
    --fs-mod-hospede: var(--fs-color-info);
    --fs-mod-manutencao: var(--fs-color-neutro);
    --fs-mod-admin: var(--fs-color-purple);
}

/* ==============================================================================
   BOTÃO DE AÇÃO — fonte única. Antes existiam 36 definições locais (uma por
   template) com 4 sabores de hover divergentes; esta é a canônica, e os
   templates deixam de redefinir a própria cópia (Fase 3, item 6).
   Apelidos agrupados aqui porque eram cópias idênticas com nome próprio.
   ============================================================================== */
.btn-gold, .cot-btn-gold, .os-btn-gold, .alm-btn-gold, .btn-gold-lote {
    background-color: var(--fs-color-gold);
    color: #fff;
    border: none;
    height: var(--fs-control-height);
    padding: 0 16px;
    border-radius: var(--fs-radius);
    font-size: var(--fs-font-size);
    font-weight: 700;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .2s ease;
}
.btn-gold:hover, .cot-btn-gold:hover, .os-btn-gold:hover,
.alm-btn-gold:hover, .btn-gold-lote:hover {
    background-color: var(--fs-color-gold-strong);
    color: #fff;
}
.btn-gold:focus-visible {
    outline: 2px solid var(--fs-color-gold-strong);
    outline-offset: 2px;
}
.btn-gold:disabled, .btn-gold[disabled] {
    opacity: .55;
    cursor: not-allowed;
}

.text-gold { color: var(--fs-color-gold) !important; }

/* Texto secundário/terciário como classe (não inline) -- mesma cor dos
   tokens de texto apagado, mas agora pegável por regra de impressão que
   força texto pra preto (ex.: ficha_portaria.html). Cor inline no atributo
   style não é alcançada por esse tipo de regra (T-316/4.6a). */
.texto-secundario { color: var(--fs-color-text-muted) !important; }
.texto-terciario { color: var(--fs-color-text-faint) !important; }

/* ==============================================================================
   CARD CANÔNICO -- fonte única do card "Náutico Ampliado" (Fase 1). Antes de
   migrar um card local (.card-custom, .facility-card etc.) pra isto, ler o
   comentário: esses nomes têm definições divergentes espalhadas pelos
   templates -- não reutilizar o nome, compor com .fs-card por cima.
   ============================================================================== */
.fs-card {
    background: var(--fs-color-surface);
    border: 1px solid var(--fs-color-border);
    border-radius: var(--fs-radius-card);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .02);
}

/* Tarja lateral por módulo -- usar junto de um .mod-* (ex.: class="fs-card
   fs-card--mod mod-reserva"). Fallback pra --fs-color-border-strong evita
   que um card sem .mod-* perca a borda e desalinhe 4px dos vizinhos. */
.fs-card--mod {
    border-left: 4px solid var(--fs-mod, var(--fs-color-border-strong));
}
.mod-reserva    { --fs-mod: var(--fs-mod-reserva); }
.mod-financeiro { --fs-mod: var(--fs-mod-financeiro); }
.mod-governanca { --fs-mod: var(--fs-mod-governanca); }
.mod-hospede    { --fs-mod: var(--fs-mod-hospede); }
.mod-manutencao { --fs-mod: var(--fs-mod-manutencao); }
.mod-admin      { --fs-mod: var(--fs-mod-admin); }

/* Indicador (KPI) -- mesma ideia do .fs-card, com traço de 3px no topo em
   vez de tarja lateral. Exige position:relative no host (herdado daqui). */
.fs-kpi {
    position: relative;
    overflow: hidden;
    background: var(--fs-color-surface);
    border: 1px solid var(--fs-color-border);
    border-radius: var(--fs-radius-card);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .02);
}
.fs-kpi::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--fs-mod, var(--fs-color-border-strong));
}

/* ==============================================================================
   TABELA-FS -- fonte única da tabela usada nas telas Facility (R-102/4.5b).
   8 templates (grupos_reserva, grupo_reserva, vistorias, consultas,
   pesquisa_perguntas, pesquisa_fila, pesquisa_resultados, vistoria_servicos)
   copiavam esta mesma regra em <style> local. Ela sozinha não resolve a
   rolagem em celular -- cada <table class="tabela-fs"> continua precisando
   estar dentro de um <div class="table-responsive"> (Bootstrap), senão a
   tabela larga estoura a largura da tela em vez de só rolar dentro de si
   mesma.
   ============================================================================== */
.tabela-fs { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabela-fs th {
    text-align: left; font-size: 11px; text-transform: uppercase;
    color: var(--fs-color-text-muted); border-bottom: 1px solid var(--fs-color-border);
    padding: 8px; font-weight: 700;
}
.tabela-fs td { padding: 8px; border-bottom: 1px solid var(--fs-color-border); }
.tabela-fs tr:hover td { background: var(--fs-color-hover-bg); }

/* V4-275 (onda 10): a pista de que a tabela continua para o lado. Quem põe e
   tira a linha é static/js/pista_de_rolagem.js, só na caixa que rola de fato.
   `sticky` + `left: 0`: fica parada enquanto a tabela anda. */
.pista-de-rolagem {
    position: sticky; left: 0; width: 100%; box-sizing: border-box;
    padding: 2px 8px; font-size: 11px; font-weight: 600; line-height: 1.6;
    text-align: right; white-space: nowrap;
    color: var(--fs-color-text-muted); background: var(--fs-color-hover-bg);
}

/* ==============================================================================
   CLASSES FANTASMAS (5.1c, T-227): usadas em template que não as define.
   Como cada <style> local só vale para o HTML da própria página, uma classe
   usada num template e definida só no <style> de OUTRO fica sem estilo
   nenhum -- não dá erro, só renderiza sem cor/borda. Corpo idêntico ao que
   já existia em nova_reserva.html (.alert-facility e as 3 irmãs de cor) e em
   lixeira.html (.badge-danger, a versão mais completa das duas que existiam
   -- a de relatorio_governanca.html não tinha padding/border-radius/
   font-size própria, contava com .badge-premium do lado pra isso).
   ============================================================================== */
.alert-facility {
    background-color: var(--fs-color-surface); border: 1px solid var(--fs-color-border); padding: 10px 14px;
    border-radius: 6px; font-size: 12px; font-weight: 500; display: flex; align-items: center; gap: 8px;
}
.alert-red { border-left: 4px solid #ef4444; color: #991b1b; background-color: #fef2f2; border-color: #fecaca;}
.alert-yellow { border-left: 4px solid #f59e0b; color: #92400e; background-color: #fffbeb; border-color: #fde68a;}
.alert-green { border-left: 4px solid #10b981; color: #065f46; background-color: #ecfdf5; border-color: #a7f3d0;}

.badge-danger { background-color: var(--fs-color-danger-bg); color: var(--fs-color-danger-strong); border: 1px solid var(--fs-color-danger-border); padding: 2px 6px; border-radius: 4px; font-size: 10px; font-weight: 600; }

/* A marca interna do hóspede (dono, 08/10/2026): a etiqueta "Atenção" / "Bloqueado"
   ao lado do nome -- lista de Hóspedes, busca da Nova Reserva e faixa do painel.
   Só tela interna: tests/test_hospede_marcado_nao_vaza.py procura esta classe
   nas páginas públicas, no portal e nas telas da camareira. */
.selo-hospede-marcado {
    display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 1px 7px; border-radius: 10px;
    font-size: 10px; font-weight: 700; text-transform: uppercase; white-space: nowrap;
    background: var(--fs-color-warning-bg); color: var(--fs-color-warning-strong); border: 1px solid var(--fs-color-warning-border);
}
.selo-hospede-marcado.bloqueado { background: var(--fs-color-danger-bg); color: var(--fs-color-danger); border-color: var(--fs-color-danger-border); }
.faixa-hospede-marcado { margin-bottom: 12px; }
.faixa-hospede-marcado .alert-facility + .alert-facility { margin-top: 6px; }

@media print {
    /* Fonte única de ".não aparece na impressão" (T-223) -- antes cada
       template que precisava disto escrevia sua própria cópia local desta
       regra (12+ cópias) e quem não copiava (ex.: conta_corrente_apartamentos)
       tinha a classe funcionando à toa. As cópias locais foram removidas dos
       templates; só esta fica. */
    .no-print, .nao-imprime, .pista-de-rolagem { display: none !important; }

    .fs-card, .fs-card--mod, .fs-kpi {
        border: none !important;
        box-shadow: none !important;
    }
    .fs-kpi::before {
        display: none !important;
    }
}