/* Identidade visual Cavallieri — fonte Mangueira + ajustes de marca */
@font-face { font-family: 'Mangueira'; src: url('../fonts/mang-light.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Mangueira'; src: url('../fonts/mang-regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Mangueira'; src: url('../fonts/mang-medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Mangueira'; src: url('../fonts/mang-semibold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Mangueira'; src: url('../fonts/mang-bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }

body, button, input, select, textarea {
    font-family: 'Mangueira', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Grafismo de ondas da marca como acento decorativo */
.graf-canto {
    position: fixed;
    right: -40px;
    bottom: -40px;
    width: 340px;
    opacity: .18;
    pointer-events: none;
    user-select: none;
}

/* ══════════════════════════════════════════════════════════════════
   TEMA ESCURO — sobrepõe as classes do Tailwind (CDN) em vez de
   marcar `dark:` em centenas de elementos. Seletor com [data-tema]
   tem especificidade maior que a classe utilitária, então vence.
   O azul-aço da marca NÃO muda (é a identidade); o que vira são as
   superfícies e os textos. Texto que era azul-escuro precisa CLAREAR,
   senão some no fundo escuro.
   ══════════════════════════════════════════════════════════════════ */
html[data-tema="dark"] {
    --cav-bg: #0f172a;
    --cav-surface: #1e293b;
    --cav-surface-2: #273449;
    --cav-border: #334155;
    --cav-text: #e2e8f0;
    --cav-muted: #94a3b8;
    --cav-brand-fg: #9DBBD4;
    color-scheme: dark;
}

/* superfícies */
html[data-tema="dark"] body,
html[data-tema="dark"] .bg-slate-100,
html[data-tema="dark"] .bg-slate-50      { background-color: var(--cav-bg) !important; }
html[data-tema="dark"] .bg-white         { background-color: var(--cav-surface) !important; }
html[data-tema="dark"] .bg-\[\#E8EDF2\]  { background-color: var(--cav-surface-2) !important; }

/* textos */
html[data-tema="dark"] .text-slate-800,
html[data-tema="dark"] .text-slate-700   { color: var(--cav-text) !important; }
html[data-tema="dark"] .text-slate-600,
html[data-tema="dark"] .text-slate-500   { color: var(--cav-muted) !important; }
html[data-tema="dark"] .text-slate-400,
html[data-tema="dark"] .text-slate-300   { color: #7d8da3 !important; }
html[data-tema="dark"] .text-\[\#33506B\],
html[data-tema="dark"] .text-\[\#4C6D8B\]{ color: var(--cav-brand-fg) !important; }

/* bordas e divisórias */
html[data-tema="dark"] .border-slate-50,
html[data-tema="dark"] .border-slate-100,
html[data-tema="dark"] .border-slate-200,
html[data-tema="dark"] .border-slate-300 { border-color: var(--cav-border) !important; }
html[data-tema="dark"] .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--cav-border) !important; }

/* avisos (verde/vermelho/âmbar claros ficariam ofuscantes no escuro) */
html[data-tema="dark"] .bg-emerald-50 { background-color: rgba(16,185,129,.14) !important; }
html[data-tema="dark"] .bg-red-50     { background-color: rgba(239,68,68,.14)  !important; }
html[data-tema="dark"] .bg-amber-50   { background-color: rgba(245,158,11,.14) !important; }

/* campos de formulário */
html[data-tema="dark"] input,
html[data-tema="dark"] select,
html[data-tema="dark"] textarea {
    background-color: var(--cav-surface-2) !important;
    border-color: var(--cav-border) !important;
    color: var(--cav-text) !important;
}
html[data-tema="dark"] input::placeholder,
html[data-tema="dark"] textarea::placeholder { color: var(--cav-muted) !important; }

/* botão da luazinha (fica sobre o azul da marca no login, e sobre
   superfície clara nas demais telas → dois estilos) */
.cav-tema-btn {
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 9999px;
    border: 1px solid rgba(100,116,139,.35);
    background: transparent;
    color: #4C6D8B;
    font-size: 16px; line-height: 1; cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.cav-tema-btn:hover { background: rgba(100,116,139,.12); }
html[data-tema="dark"] .cav-tema-btn { color: var(--cav-brand-fg); border-color: var(--cav-border); }
.cav-tema-btn.sobre-azul { color: #FFFFFF; border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.12); }
.cav-tema-btn.sobre-azul:hover { background: rgba(255,255,255,.25); }

/* ── Tema escuro: ATENDIMENTO ─────────────────────────────────────
   O painel do WhatsApp usa gray-* além de slate-*, e tem CSS próprio
   do chat (css/style.css) com cores cravadas. Cobrimos aqui pra não
   mexer no style.css, que é do layout do chat e é sensível. */
html[data-tema="dark"] .bg-gray-50,
html[data-tema="dark"] .bg-gray-100      { background-color: var(--cav-surface-2) !important; }
html[data-tema="dark"] .bg-gray-200      { background-color: var(--cav-border) !important; }
html[data-tema="dark"] .text-gray-700,
html[data-tema="dark"] .text-gray-800,
html[data-tema="dark"] .text-gray-900    { color: var(--cav-text) !important; }
html[data-tema="dark"] .text-gray-500,
html[data-tema="dark"] .text-gray-600    { color: var(--cav-muted) !important; }
html[data-tema="dark"] .text-gray-300,
html[data-tema="dark"] .text-gray-400    { color: #7d8da3 !important; }
html[data-tema="dark"] .border-gray-100,
html[data-tema="dark"] .border-gray-200,
html[data-tema="dark"] .border-gray-300  { border-color: var(--cav-border) !important; }

/* fundo do chat e da lista (style.css crava #f0f2f5 / #ffffff) */
html[data-tema="dark"] body,
html[data-tema="dark"] html               { background-color: var(--cav-bg) !important; }
html[data-tema="dark"] #chat-box          { background-color: var(--cav-bg) !important; }
html[data-tema="dark"] .app-shell         { background-color: var(--cav-bg) !important; }

/* balões do chat: recebido = .bg-white (já vira superfície acima);
   enviado = .bg-[#DCE7F0] (azul clarinho) -> no escuro, azul da marca
   rebaixado, pra continuar dando pra distinguir quem falou. */
html[data-tema="dark"] .bg-\[\#DCE7F0\] { background-color: #2c4257 !important; color: var(--cav-text) !important; }
html[data-tema="dark"] #chat-box .bg-white { color: var(--cav-text) !important; }