/* Marca Flua (FluaCare) — telas do funcionário e prontuário.
   Fonte: docs/FLUA-MARCA.md, spec docs/superpowers/specs/2026-10-18-redesign-flua-design.md e
   design/fluacare.figcraft (página "Sistema FluaCare"). Carregado ANTES do CSS de cada página, só nas páginas com
   <html data-surface="flua">. As variáveis antigas de cada página apontam para cá.

   Regra de cor: só cores da Flua. Estado = ícone + texto; o texto é sempre --fl-txt. Vermelho, laranja e amarelo
   nunca como cor de texto em fundo claro (4,1 / 2,7 / 2,2:1). */
/* html[data-surface] e nao :root: brand-vars.css (carregado antes) redefine --brand-* em :root e venceria. */
html[data-surface="flua"] {
    /* Marca */
    --flua-navy: #0B2C45;
    --flua-red: #F0283C;
    --flua-orange: #FD7444;
    --flua-yellow: #FF960E;
    --flua-white: #FFFFFF;
    --flua-beige: #F9F0DF;
    --flua-light-blue: #CCEEF0;
    --flua-gradient: linear-gradient(90deg, #F0283C 0%, #FD7444 50%, #FF960E 100%);

    /* Tema (claro). O escuro redefine estes no fim do arquivo. */
    --fl-bg: #FBFAF7;            /* fundo da página */
    --fl-surf: #FFFFFF;          /* card, modal, campo */
    --fl-surf2: #CCEEF0;         /* superfície suave (azul claro) */
    --fl-side: #FFFFFF;
    --fl-head: #F4F1EA;          /* cabeçalho de tabela */
    --fl-txt: #0B2C45;
    --fl-muted: #55697A;         /* 5,7:1 no branco */
    --fl-border: rgba(11, 44, 69, 0.15);
    --fl-lb: #CCEEF0;
    --fl-beige: #F9F0DF;
    --fl-readonly: #EEF1F3;
    --fl-on-txt: #FFFFFF;        /* texto sobre fundo --fl-txt */
    --fl-backdrop: rgba(11, 44, 69, 0.6);
    --fl-ok-bg: #CCEEF0;  --fl-ok-ic: #0B2C45;
    --fl-err-bg: #FDE5E8; --fl-err-ic: #F0283C;
    --fl-warn-bg: #FFE9E1; --fl-warn-ic: #FD7444;
    --fl-err-line: transparent; --fl-warn-line: transparent;

    --fl-font: "Alan Sans", Arial, sans-serif;
    --fl-radius-card: 16px;
    --fl-radius-modal: 24px;
    --fl-shadow: 0 16px 40px rgba(11, 44, 69, 0.16);

    /* Kit (nomes semânticos) */
    --color-bg: var(--fl-surf);
    --color-bg-page: var(--fl-bg);
    --color-text: var(--fl-txt);
    --text-muted: var(--fl-muted);
    --border: var(--fl-border);
    --font-family: var(--fl-font);
    --radius-pill: 999px;
    --radius-card: 16px;
    --radius-modal: 24px;

    /* Variáveis antigas, remapeadas (medico.css, dashboard.css, login.css, brand-vars.css…) */
    --brand-primary: #0B2C45;
    --brand-primary-dark: #071E30;
    --brand-primary-light: #183850;
    --brand-primary-rgb: 11, 44, 69;
    --brand-secondary: #0B2C45;
    --brand-secondary-dark: #071E30;
    --brand-secondary-light: #183850;
    --brand-secondary-rgb: 11, 44, 69;
    --brand-accent: #FD7444;
    --brand-sidebar-bg: #FFFFFF;
    --brand-text-on-primary: #FFFFFF;
    --brand-gradient: var(--flua-gradient);
    --brand-gradient-secondary: var(--flua-gradient);
    --primary-green: #0B2C45;
    --primary: #0B2C45;
    --primary-light: #183850;
    --primary-dark: #071E30;
    --secondary: #0B2C45;
    --accent: #FD7444;
    --success: #0B2C45;
    --success-color: #0B2C45;
    --error: #F0283C;
    --danger: #F0283C;
    --danger-color: #F0283C;
    --warning: #FD7444;
    --warning-color: #FD7444;
    --info: #0B2C45;
    --info-color: #0B2C45;
    --tasy-color: #0B2C45;
    --tasy-color-dark: #071E30;
    --gray-50: #FBFAF7;
    --gray-100: #F3F5F7;
    --gray-200: #E2E7EB;
    --gray-300: #C6D0D8;
    --gray-400: #8A99A6;
    --gray-500: #55697A;
    --gray-600: #3F5466;
    --gray-700: #2A4155;
    --gray-800: #183850;
    --gray-900: #0B2C45;
    --white: #FFFFFF;
}

html[data-surface="flua"] body {
    font-family: var(--fl-font);
    color: var(--fl-txt);
}

/* Alan Sans em todo texto da casca. O CSS legado fixa 'Poppins' em dezenas de regras; esta vence as que não usam
   !important. Ficam de fora: ícones Font Awesome, código e o CONTEÚDO dos editores (o médico escolhe a fonte na
   barra do editor e o documento impresso herda dela). */
html[data-surface="flua"] body *:not(.fa):not(.fas):not(.far):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(code):not(pre):not(kbd):not(samp):not([contenteditable="true"]):not([contenteditable="true"] *) {
    font-family: var(--fl-font);
}

/* ---------- componentes (mesmas medidas do FigCraft) ---------- */
.fl-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 40px; padding: 8px 16px; border-radius: 999px; border: 1.5px solid transparent;
    font: 500 14px/1.2 var(--fl-font); cursor: pointer; white-space: nowrap; text-decoration: none;
    transition: background-color .15s, border-color .15s, opacity .15s;
}
.fl-btn:disabled, .fl-btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }
.fl-btn:focus-visible { outline: 2px solid var(--fl-txt); outline-offset: 2px; }
.fl-btn--primary { background: var(--fl-txt); color: var(--fl-on-txt); }
.fl-btn--secondary { background: var(--fl-surf); color: var(--fl-txt); border-color: var(--fl-txt); }
.fl-btn--soft { background: var(--fl-lb); color: var(--fl-txt); }
.fl-btn--ghost { background: transparent; color: var(--fl-txt); }
.fl-btn--danger { background: var(--fl-surf); color: var(--fl-txt); border-color: var(--flua-red); }
.fl-btn--danger i { color: var(--flua-red); }
.fl-btn--accent { background: var(--flua-gradient); color: #0B2C45; }
.fl-btn--sm { min-height: 32px; padding: 6px 12px; font-size: 13px; gap: 6px; }

.fl-badge {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
    font: 500 12px/1.2 var(--fl-font); color: var(--fl-txt); white-space: nowrap; border: 1px solid transparent;
}
.fl-badge i { font-size: 11px; }
.fl-badge--ok { background: var(--fl-ok-bg); } .fl-badge--ok i { color: var(--fl-ok-ic); }
.fl-badge--erro { background: var(--fl-err-bg); border-color: var(--fl-err-line); } .fl-badge--erro i { color: var(--fl-err-ic); }
.fl-badge--alerta { background: var(--fl-warn-bg); border-color: var(--fl-warn-line); } .fl-badge--alerta i { color: var(--fl-warn-ic); }
.fl-badge--andamento { background: var(--fl-txt); color: var(--fl-on-txt); } .fl-badge--andamento i { color: var(--fl-on-txt); }
.fl-badge--neutro { background: var(--fl-beige); color: var(--fl-muted); } .fl-badge--neutro i { color: var(--fl-muted); }
.fl-badge--info { background: var(--fl-lb); }

.fl-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px;
    font: 500 12px/1.2 var(--fl-font); color: var(--fl-txt); background: var(--fl-lb); border: 1.5px solid transparent;
}
.fl-chip--beige { background: var(--fl-beige); }
.fl-chip--outline { background: var(--fl-surf); border-color: var(--fl-txt); }
.fl-chip--coral { background: var(--fl-surf); border-color: var(--flua-orange); }

.fl-card { background: var(--fl-surf); border: 1px solid var(--fl-border); border-radius: 16px; }

/* Estados de lista (vazio / carregando / erro) */
.fl-estado { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 36px 24px; text-align: center; }
.fl-estado__icone { width: 60px; height: 60px; border-radius: 999px; display: grid; place-items: center;
    background: var(--fl-beige); color: var(--fl-txt); font-size: 22px; }
.fl-estado--erro .fl-estado__icone { background: var(--fl-err-bg); color: var(--flua-red); }
.fl-estado--carregando .fl-estado__icone { background: var(--fl-lb); }
.fl-estado__titulo { font: 500 16px/1.3 var(--fl-font); color: var(--fl-txt); margin: 0; }
.fl-estado__texto { font: 400 14px/1.4 var(--fl-font); color: var(--fl-muted); margin: 0; }

/* Header em gradiente (casca das páginas internas) */
.fl-appbar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 68px;
    padding: 0 28px; background: var(--flua-gradient); color: #fff;
}
.fl-appbar__marca { display: flex; align-items: center; gap: 12px; color: #fff; font: 400 22px/1 var(--fl-font); }
.fl-appbar__marca img { height: 26px; width: auto; display: block; }
.fl-appbar__acoes { display: flex; align-items: center; gap: 8px; }
.fl-pill-branca {
    display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; border: 0;
    background: #fff; color: #0B2C45; font: 500 13px/1.2 var(--fl-font); cursor: pointer; position: relative;
}
.fl-ib-branco {
    width: 40px; height: 40px; border-radius: 999px; border: 0; background: #fff; color: #0B2C45;
    display: inline-grid; place-items: center; cursor: pointer; position: relative; font-size: 15px;
}
.fl-contador {
    position: absolute; top: -4px; right: -6px; min-width: 18px; height: 18px; padding: 0 6px; border-radius: 999px;
    background: var(--flua-red); color: #fff; font: 700 11px/18px var(--fl-font); text-align: center;
}
@media (max-width: 600px) {
    .fl-appbar { min-height: 56px; padding: 0 16px; }
    .fl-appbar__marca { font-size: 17px; gap: 8px; }
    .fl-appbar__marca img { height: 22px; }
}

/* ---------- tema escuro (derivado do azul escuro; medido: texto 11,8:1, secundário 6,6:1) ----------
   Todas as páginas ligam o escuro com html[data-theme="dark"]. */
html[data-surface="flua"][data-theme="dark"] {
    --fl-bg: #071E30;
    --fl-surf: #0F3352;
    --fl-surf2: #16405F;
    --fl-side: #0B2C45;
    --fl-head: #0B2C45;
    --fl-txt: #EAF6F7;
    --fl-muted: #A8BCC8;
    --fl-border: #2B4F6A;
    --fl-lb: #16405F;
    --fl-beige: #2A3D50;
    --fl-readonly: #13324D;
    --fl-on-txt: #0B2C45;
    --fl-backdrop: rgba(2, 11, 18, 0.6);
    --fl-ok-bg: #264965;  --fl-ok-ic: #CCEEF0;
    --fl-err-bg: #0F3352; --fl-err-line: #F0283C;
    --fl-warn-bg: #0F3352; --fl-warn-line: #FD7444;
}

/* ---------- Caixa de confirmação do sistema (Modal.* em js/modal.js, #custom-modal-overlay) ----------
   Design: página "Sistema FluaCare" → "Confirmação". Cancelar antes do principal; exclusão = type 'danger'. */
html[data-surface="flua"] .custom-modal-overlay { background: var(--fl-backdrop) !important; backdrop-filter: none !important; }
html[data-surface="flua"] .custom-modal {
    background: var(--fl-surf) !important; border-radius: 24px !important; box-shadow: var(--fl-shadow) !important;
    border: 0 !important; padding: 28px 28px 24px !important; text-align: left !important; max-width: 440px; width: calc(100% - 32px);
}
html[data-surface="flua"] .custom-modal.custom-modal-ampla { max-width: 1100px; }
html[data-surface="flua"] .custom-modal-icon {
    width: 52px !important; height: 52px !important; border-radius: 999px !important; margin: 0 0 12px !important;
    background: var(--fl-lb) !important; color: var(--fl-txt) !important; box-shadow: none !important;
    display: grid !important; place-items: center !important;
}
html[data-surface="flua"] .custom-modal-icon svg { width: 22px !important; height: 22px !important; color: inherit !important; stroke: currentColor !important; }
html[data-surface="flua"] :is(.custom-modal-icon-error, .custom-modal-icon-danger) { background: var(--fl-err-bg) !important; color: var(--flua-red) !important; }
html[data-surface="flua"] .custom-modal-icon-warning { background: var(--fl-warn-bg) !important; color: var(--flua-orange) !important; }
html[data-surface="flua"] .custom-modal-content { text-align: left !important; }
html[data-surface="flua"] .custom-modal-title { font: 500 19px/1.3 var(--fl-font) !important; color: var(--fl-txt) !important; margin: 0 0 8px !important; }
html[data-surface="flua"] .custom-modal-message { font: 400 15px/1.5 var(--fl-font) !important; color: var(--fl-muted) !important; }
html[data-surface="flua"] .custom-modal-message :is(b, strong) { color: var(--fl-txt) !important; }
html[data-surface="flua"] .custom-modal-input {
    height: 48px !important; border-radius: 999px !important; border: 1px solid var(--fl-border) !important;
    background: var(--fl-surf) !important; color: var(--fl-txt) !important; padding: 0 20px !important; font: 400 15px/1 var(--fl-font) !important;
}
html[data-surface="flua"] .custom-modal-actions { justify-content: flex-end !important; gap: 12px !important; margin-top: 20px !important; flex-direction: row !important; }
html[data-surface="flua"] .custom-modal-btn {
    min-height: 44px !important; padding: 10px 22px !important; border-radius: 999px !important; box-shadow: none !important;
    font: 500 15px/1.2 var(--fl-font) !important; transform: none !important; flex: 0 0 auto !important; width: auto !important;
    background-image: none !important;
}
html[data-surface="flua"] .custom-modal-btn-cancel { background: transparent !important; color: var(--fl-txt) !important; border: 0 !important; }
html[data-surface="flua"] .custom-modal-btn-confirm { background: var(--fl-txt) !important; color: var(--fl-on-txt) !important; border: 0 !important; }
html[data-surface="flua"] .custom-modal-btn-danger {
    background: var(--fl-surf) !important; color: var(--fl-txt) !important; border: 1.5px solid var(--flua-red) !important;
}
html[data-surface="flua"] .custom-modal-btn:focus-visible { outline: 2px solid var(--fl-txt) !important; outline-offset: 2px; }
@media (max-width: 600px) {
    html[data-surface="flua"] .custom-modal-overlay { align-items: flex-end !important; }
    html[data-surface="flua"] .custom-modal { width: 100%; max-width: none; border-radius: 24px 24px 0 0 !important; padding: 24px 20px 28px !important; }
    html[data-surface="flua"] .custom-modal-actions { flex-direction: column !important; }
    html[data-surface="flua"] .custom-modal-btn { width: 100% !important; }
}
/* Escuro: o fundo de erro é a própria superfície; o círculo do ícone ganha contorno para aparecer */
html[data-surface="flua"][data-theme="dark"] :is(.custom-modal-icon-error, .custom-modal-icon-danger) { border: 1.5px solid var(--flua-red) !important; }
html[data-surface="flua"][data-theme="dark"] .custom-modal-icon-warning { border: 1.5px solid var(--flua-orange) !important; }
/* Cancelar sempre antes do principal também em Modal.prompt/select/date (que ainda montam o OK primeiro) */
html[data-surface="flua"] .custom-modal-btn-cancel { order: -1 !important; }
/* Foco: só o contorno do focus-visible (o modal.css somava um box-shadow e ficava contorno duplo) */
html[data-surface="flua"] .custom-modal-btn:focus { box-shadow: none !important; outline: none; }
html[data-surface="flua"] .custom-modal-btn:focus-visible { outline: 2px solid var(--fl-txt) !important; outline-offset: 2px; }