/* ==============================================================================
   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;
    --fs-color-text-muted: #64748b;
    --fs-color-text-faint: #94a3b8;

    /* Cores de marca / destaque */
    --fs-color-primary: #2563eb;
    --fs-color-primary-strong: #1d4ed8;
    --fs-color-primary-soft: #3b82f6;

    /* 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: #64748b;
    --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 */
    --fs-color-success: #2f8f6b;
    --fs-color-success-strong: #059669;
    --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: #b45309;

    --fs-color-danger: #ef4444;
    --fs-color-danger-strong: #dc2626;
    --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: #3b82f6;
    --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;
    --fs-font-size: 11px;

    /* 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; }

/* ==============================================================================
   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));
}

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