/* CRM33 Comercial — tokens. Material visual do CRM atual (Fusion, vazado,
 * cantos 12px) com primária terracota e seleção pêssego. Toda cor de tela sai
 * daqui; estados (oficial, pendente, falha, rascunho) nunca usam a cor de tema. */
@font-face {
  font-family: "Geist";
  src: url("../fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light;
  --font: "Geist", "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;

  /* Fundo da unidade (foto ou mesh) aparece entre os painéis */
  --fundo-img: url("../fundos/sakura-1.webp");
  --fundo-cor: #e9e2dc;

  /* Superfícies */
  --surface: #ffffff;
  --surface-soft: #faf7f5;
  --surface-muted: #f1ece8;
  --ink: #1d1a18;
  --ink-soft: #5f5853;
  --ink-faint: #8d8580;
  --line: #e6dfda;
  --line-strong: #cfc5be;

  /* Tema (personalizável por unidade e por usuário) */
  --accent: #c2562c;
  --accent-hover: #a94820;
  --accent-ink: #ffffff;
  --accent-soft: #fbe6da; /* seleção pêssego */
  --accent-softer: #fdf3ed;

  /* Estados — independentes do tema */
  --ok: #2f8a5e;      --ok-soft: #e2f5eb;      /* oficial HubMed */
  --warn: #b07514;    --warn-soft: #fbf0dc;    /* pendente */
  --danger: #b4403f;  --danger-soft: #fae8e7;  /* falha */
  --draft: #6d6a67;   --draft-soft: #efedeb;   /* rascunho local */
  --info: #2f6f8c;    --info-soft: #e1eff5;
  --on-danger: #ffffff; /* texto sobre --danger cheio (selo de contagem) */
  --seg-ativo: #3949ab; /* botão ativo do controle segmentado */

  /* Chat (bolhas no padrão WhatsApp do CRM atual) */
  --bubble-in: #ffffff;
  --bubble-out: #fde9dc;
  --bubble-note: #fff6cf;
  --thread-bg: #ebe2db; /* fundo da conversa um tom abaixo das bolhas (pedido de 07/11/2026) */
  --ack-read: #2f8ac2;

  /* Geometria */
  --gap: 8px;
  --edge: 8px;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 6px;
  --radius-pill: 999px;
  --rail-w: 64px;
  --topbar-h: 52px;
  --row-h: 64px;
  --table-row-h: 40px;
  --control-h: 32px;
  --control-h-sm: 28px;

  /* Tipografia: quatro tamanhos, dois pesos */
  --fs-1: 12px;
  --fs-2: 13px;
  --fs-3: 14px;
  --fs-4: 16px;
  --fw-1: 400;
  --fw-2: 560;

  --shadow-sm: 0 1px 1px rgba(40, 24, 14, 0.04);
  --shadow: 0 12px 32px rgba(40, 24, 14, 0.14);
  --dur: 150ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --fundo-cor: #15110f;
  --surface: #1c1816;
  --surface-soft: #231e1b;
  --surface-muted: #2c2522;
  --ink: #f3ece7;
  --ink-soft: #b9aea7;
  --ink-faint: #9d918a;
  --line: #3a312c;
  --line-strong: #4e433d;
  --accent: #e9875c;
  --accent-hover: #f39d77;
  --accent-ink: #1c1311;
  --accent-soft: #4a2b1e;
  --accent-softer: #33221a;
  --ok: #7fd8a9;    --ok-soft: #1b3326;
  --warn: #e7bb6a;  --warn-soft: #3a2d14;
  --danger: #ee9a96; --danger-soft: #3f2322;
  --draft: #b2aca7; --draft-soft: #2e2a27;
  --info: #8cc6df;  --info-soft: #1a2f39;
  --on-danger: #1c1311;
  --seg-ativo: #aab4ff;
  --bubble-in: #262019;
  --bubble-out: #4a2b1e;
  --bubble-note: #3d3516;
  --thread-bg: #181412;
  --ack-read: #6fc0f0;
  --shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

/* Paleta HubMed (padrão do Moderno; Aparência > Tema > Paleta): mesmo layout e componentes, cores do
 * sistema HubMed (Design System Hubmed v1.0, as mesmas da skin HubMed em tema-hubmed.css): indigo
 * #3949ab na ação, hover #303f9f, seleção #e8eaf6. Texto e linhas na escala slate, ajustados para AA:
 * ink-soft #475569, ink-faint #5b6676.
 * Estados (--ok, --warn, --danger, --draft, --info, --ack-read, --bubble-note) não mudam.
 * O bloco escuro repete todas as chaves do claro com seletor mais específico (sem vazar cascata). */
:root[data-tema="hubmed"] {
  /* Foto padrão fria (Serra) no lugar da Sakura rosa. O fundo padrão da unidade não cobre esta paleta (aplicarFundo); a escolha pessoal continua valendo (estilo inline) */
  --fundo-img: url("../fundos/serra-1.webp");
  --fundo-cor: #e2e8f0;
  --surface: #ffffff;
  --surface-soft: #f8fafc;
  --surface-muted: #f1f5f9;
  --ink: #0f172a;
  --ink-soft: #475569;
  --ink-faint: #5b6676;
  --line: #e2e8f0;
  --line-strong: #8793a5;
  --accent: #3949ab;
  --accent-hover: #303f9f;
  --accent-ink: #ffffff;
  --accent-soft: #e8eaf6;
  --accent-softer: #f3f4fb;
  --bubble-in: #ffffff;
  --bubble-out: #eceffb;
  --thread-bg: #dde3ec; /* antes #f1f5f9: quase a cor das bolhas */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
}
:root[data-tema="hubmed"][data-theme="dark"] {
  --fundo-cor: #0f172a;
  --surface: #1e293b;
  --surface-soft: #182235;
  --surface-muted: #334155;
  --ink: #f1f5f9;
  --ink-soft: #cbd5e1;
  --ink-faint: #a5b1c2;
  --line: #334155;
  --line-strong: #64748b;
  --accent: #9fa8da;
  --accent-hover: #c5cae9;
  --accent-ink: #0f172a;
  --accent-soft: #283266;
  --accent-softer: #1e2448;
  --bubble-in: #263244;
  --bubble-out: #283266;
  --thread-bg: #111827;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

/* Paleta 33 Maringá (padrão do Moderno desde o design system 90, docs/design-system-crm33.md): as cores VIVAS do
 * CRM 33 Maringá antigo, as que aparecem de fato em 33doctor.lagoo.com.br/crm (css/tokens.css de lá: o bloco
 * `html:not([data-accent])` vence o petróleo-base): verde-água #1F7F86 na ação, hover #196A70, seleção #DCF3F4,
 * superfícies frias #FFFFFF/#F5F8FA/#E8EDF0, tinta #121A20/#4A5A64; escuro com ação #6DC8CE, fundo #0C1014 e
 * linhas #33424C/#465864; estados do antigo (ok #2F8A5E, aviso #A87218, falha #B04048). */
:root[data-tema="petroleo"] {
  --fundo-img: url("../fundos/serra-1.webp");
  --fundo-cor: #eef1f4;
  --surface: #ffffff;
  --surface-soft: #f5f8fa;
  --surface-muted: #e8edf0;
  --ink: #121a20;
  --ink-soft: #4a5a64;
  --ink-faint: #5f6f79;
  --line: #d3dde3;
  --line-strong: #a8b8c2;
  --accent: #1f7f86;
  --accent-hover: #196a70;
  --accent-ink: #ffffff;
  --accent-soft: #dcf3f4;
  --accent-softer: #eef9fa;
  --ok: #2f8a5e;      --ok-soft: #e2f5eb;
  --warn: #a87218;    --warn-soft: #fbf0dc;
  --danger: #b04048;  --danger-soft: #f9e8e9;
  --info: #2f6f9c;    --info-soft: #e1edf7;
  --seg-ativo: #1f7f86;
  --ack-read: #1f7f86;
  --bubble-in: #ffffff;
  --bubble-out: #e0f4f2;
  --thread-bg: #e2e9ed;
  --shadow-sm: 0 1px 2px rgba(16, 36, 44, 0.06);
  --shadow: 0 12px 32px rgba(16, 36, 44, 0.14);
}
:root[data-tema="petroleo"][data-theme="dark"] {
  --fundo-cor: #0c1014;
  --surface: #141a20;
  --surface-soft: #1a222a;
  --surface-muted: #232c35;
  --ink: #eef4f7;
  --ink-soft: #a3b8c2;
  --ink-faint: #8fa3ad;
  --line: #33424c;
  --line-strong: #465864;
  --accent: #6dc8ce;
  --accent-hover: #8ad6da;
  --accent-ink: #0c1a1c;
  --accent-soft: #163034;
  --accent-softer: #12262a;
  --ok: #7fe8b8;    --ok-soft: #1a3226;
  --warn: #e0ba72;  --warn-soft: #362c16;
  --danger: #e89aa0; --danger-soft: #3e2428;
  --info: #8cc0e6;  --info-soft: #182c3a;
  --seg-ativo: #6dc8ce;
  --ack-read: #6dc8ce;
  --bubble-in: #1a222a;
  --bubble-out: #1a3430;
  --thread-bg: #11181e;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

/* ---------- Design system 90 (docs/design-system-crm33.md) ----------
 * Elevação em 4 níveis, brilho de borda superior (volume sem contorno), superfícies tonais, cor de propósito
 * (IA), cores de etapa do funil (as do CRM 33 Maringá antigo) e escalas de ícone/controle/espaço.
 * Vale nas três paletas e nos dois temas. Os tokens existem também no HubMed (toast, escalas), mas os componentes
 * novos que os usam vão sob :root:not([data-visual]): o HubMed renderiza como na main. */
:root {
  --elev-0: none;
  --elev-1: 0 1px 2px rgba(16, 36, 44, 0.07), 0 1px 1px rgba(16, 36, 44, 0.04);
  --elev-2: 0 1px 2px rgba(16, 36, 44, 0.06), 0 6px 16px -6px rgba(16, 36, 44, 0.18);
  --elev-3: 0 2px 6px rgba(16, 36, 44, 0.08), 0 16px 32px -12px rgba(16, 36, 44, 0.28);
  --elev-4: 0 4px 12px rgba(16, 36, 44, 0.10), 0 28px 64px -16px rgba(16, 36, 44, 0.40);
  --brilho: inset 0 1px 0 rgba(255, 255, 255, 0.75);
  --brilho-forte: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -1px 0 rgba(0, 0, 0, 0.10);
  --textura: linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface-soft) 65%, var(--surface)) 100%);
  --tonal: color-mix(in srgb, var(--ink) 5%, var(--surface));
  --tonal-hover: color-mix(in srgb, var(--ink) 9%, var(--surface));
  --tonal-forte: color-mix(in srgb, var(--ink) 13%, var(--surface));
  --anel-foco: 0 0 0 3px color-mix(in srgb, var(--accent) 32%, transparent);
  --ia: #6d5bd0;      --ia-soft: #eeebfb;
  /* Tintas de texto com contraste AA (>= 4,5:1 sobre branco, --*-soft e superfície translúcida do Vidro): o
   * --ok/--warn puros servem a ponto, ícone e fundo; texto usa estas. Acento ativo em texto: --accent-texto. */
  --ok-ink: color-mix(in srgb, var(--ok) 70%, var(--ink));
  --warn-ink: color-mix(in srgb, var(--warn) 70%, var(--ink));
  --accent-texto: color-mix(in srgb, var(--accent) 82%, var(--ink));
  /* Etapas do funil (forte = ponto, trilho, texto; suave = fundo do selo). Fallback quando o banco não traz cor. */
  /* forte: tinta dos selos do antigo (layout.css:2546-2554); suave: semente do banco do antigo (crm_db_cadastros.py:101-109) */
  --et-orcar: #2563a8;         --et-orcar-suave: #d6e8f7;
  --et-agendar: #1f7a55;       --et-agendar-suave: #c8e6d9;
  --et-receber: #4a55b0;       --et-receber-suave: #d4def2;
  --et-finalizou: #3d7a2a;     --et-finalizou-suave: #d9ead3;
  --et-recuperar: #b5541c;     --et-recuperar-suave: #fce4d6;
  --et-nao-finalizou: #b0383a; --et-nao-finalizou-suave: #f5d0c5;
  --et-neutra: #5f7480;        --et-neutra-suave: #e3e9ec;
  /* Escalas */
  --ico-sm: 14px; --ico: 16px; --ico-md: 18px; --ico-lg: 20px; --ico-xl: 22px;
  --medalhao: 32px; --medalhao-sm: 26px;
  --control-h-lg: 36px; --control-h-xs: 24px;
  --ds-gap-1: 4px; --ds-gap-2: 6px; --ds-gap-3: 8px; --ds-gap-4: 12px; --ds-gap-5: 16px;
  --radius-lg: 16px;
  /* Divisor de tabela densa (1 px, nunca em volta de caixa) e véu atrás de modal */
  --line-hair: color-mix(in srgb, var(--line) 72%, transparent);
  --scrim: rgba(12, 22, 28, 0.42);
  /* Aviso (toast): fundo escuro por estado; o ponto de cor vem de --toast-ponto */
  --toast-bg: #2a211c; --toast-ink: #fbf4ef; --toast-acao: #ffd2b9;
  --toast-ok: #1f4d36; --toast-danger: #6e2422;
}
/* Linha forte do HubMed no Moderno: cinza claro de verdade (antes #8793a5, cinza-chumbo). Só o Moderno. */
:root[data-tema="hubmed"]:not([data-visual]) { --line-strong: #cfd6e2; }
:root[data-tema="hubmed"][data-theme="dark"]:not([data-visual]) { --line-strong: #475569; }
:root[data-theme="dark"] {
  --scrim: rgba(0, 0, 0, 0.6);
  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --elev-2: 0 1px 2px rgba(0, 0, 0, 0.35), 0 6px 16px -6px rgba(0, 0, 0, 0.55);
  --elev-3: 0 2px 6px rgba(0, 0, 0, 0.4), 0 16px 32px -12px rgba(0, 0, 0, 0.6);
  --elev-4: 0 4px 12px rgba(0, 0, 0, 0.45), 0 28px 64px -16px rgba(0, 0, 0, 0.7);
  --brilho: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --tonal: color-mix(in srgb, var(--ink) 7%, var(--surface));
  --tonal-hover: color-mix(in srgb, var(--ink) 12%, var(--surface));
  --tonal-forte: color-mix(in srgb, var(--ink) 17%, var(--surface));
  --ia: #b3a6f5;      --ia-soft: #2a2546;
  --et-orcar: #8ab8e6;         --et-orcar-suave: #1c2f45;
  --et-agendar: #7fd8a9;       --et-agendar-suave: #183428;
  --et-receber: #aab2f0;       --et-receber-suave: #24284a;
  --et-finalizou: #a9d27a;     --et-finalizou-suave: #24331a;
  --et-recuperar: #f0a46e;     --et-recuperar-suave: #3d2716;
  --et-nao-finalizou: #ee9a96; --et-nao-finalizou-suave: #3f2322;
  --et-neutra: #a3b4bb;        --et-neutra-suave: #243038;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; }
}
:root[data-motion="off"] { --dur: 0ms; }