/* Kit comum do console (09/10): a fonte, os tokens claro/escuro (movidos de atendimento.css SEM mudar valor) e os
 * componentes c-*. NENHUMA cor fora dos dois blocos de tokens — os testes de navegador reprovam.
 * Os tokens vieram de /home/jimmy/production/minhaimob/web/app.css (versão de 06/10); mudou lá? Traga para cá.
 * Tema: claro em :root, escuro em :root[data-tema="escuro"] (localStorage "hiato:tema"). */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/static/fonts/PlusJakartaSans-wght.woff2") format("woff2");   /* OFL: web/fonts/PlusJakartaSans-OFL.txt */
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --bg: #f7f9fb;
  --bg2: #ffffff;
  --bg3: #f2f4f6;
  --line: #e4e7ec;
  --fg: #191c1e;
  --muted: #5a6673;
  --teal: #148461;
  --teal-dark: #117a5c;
  --btn-fg: #ffffff;
  --btn-hover: #0d6a4f;
  --acao: #c51f2b;
  --acao-hover: #a61621;
  --acao-fg: #ffffff;
  --acao-texto: #c51f2b;
  --mod-carteira: #2563eb;    --mod-carteira-s: #e8effd;
  --mod-rede: #148461;        --mod-rede-s: #e4f7ef;
  --mod-marketing: #c026d3;   --mod-marketing-s: #fae8fc;
  --mod-clientes: #ea580c;    --mod-clientes-s: #fdede3;
  --mod-atendimento: #0891b2; --mod-atendimento-s: #e0f4f8;
  --mod-contratos: #4f46e5;   --mod-contratos-s: #ebeafd;
  --mod-gestao: #475467;      --mod-gestao-s: #eef0f3;
  --atencao-s: #fdf3de;
  --atencao-borda: #f6dfae;
  --sombra-card: 0 14px 30px -18px rgba(17, 24, 39, .32);
  --veu-folha: rgba(17, 24, 39, .45);
  --sombra-folha: 0 24px 48px -12px rgba(17, 24, 39, .35);
  --amber: #b45309;
  --red: #dc2626;
  --green: #047857;
  --radius: 10px;
  --radius-sm: 8px;
  --sombra-1: 0 1px 3px rgba(0, 0, 0, .06);
  /* A pilha de fontes do SISTEMA (o "system-ui" do DS) escrita por extenso: o genérico `system-ui` cai numa
     serifa no Chromium do Linux sem GTK (medido no runner headless deste repo), e a foto da tela mentia. */
  --fonte-texto: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell,
                 "Helvetica Neue", Arial, "Liberation Sans", sans-serif;
  --fonte-titulo: "Plus Jakarta Sans", var(--fonte-texto);

  /* deste console */
  --at-mod-texto: #0e7490;      /* o ciano do módulo Atendimento como TEXTO (o #0891b2 dá 3,7:1 no branco) */
  --at-ok-fg: #047857;          /* sobre --mod-rede-s: 4,9:1 */
  --at-aviso-fg: #92400e;       /* sobre --atencao-s: 6,4:1 (o #b45309 dava 4,56, no limite) */
  --at-info-fg: #1d4ed8;        /* sobre --mod-carteira-s: 5,8:1 (o #2563eb dava 4,48) */
  --at-crm-fg: #a21caf;         /* sobre --mod-marketing-s: 5,4:1 */
  --at-teste-fg: #4338ca;       /* sobre --mod-contratos-s: 6,7:1 */
  --at-quente-s: #fff0ef;
  --at-quente-fg: #a61621;      /* 6,9:1 */
  --at-perigo-s: #fdecec;
  --at-perigo-borda: #f5c2c2;
  --at-perigo-fg: #a61621;      /* 6,7:1 */
  --at-lido: #0369a1;           /* ✓✓ lido: 5,2:1 sobre a bolha da Maysa */
  --at-bolha-mudo: #5a6673;
  --at-ponto-ok: #16a34a;
  --at-ponto-off: #dc2626;
  --at-ponto-aviso: #d97706;
  --at-ponto-nada: #98a2b3;
  --at-anel-1: #c9a24a;         /* o aro dourado/marinho do avatar da Maysa (mesma arte do widget) */
  --at-anel-2: #1e3a8a;
  --at-sombra-topo: 0 1px 8px rgba(0, 0, 0, .06);
  --at-sombra-aba: 0 1px 2px rgba(16, 24, 40, .1);
  --at-sombra-gaveta: 2px 0 18px rgba(17, 24, 39, .25);
  color-scheme: light;

  /* do kit comum (gráficos da Visão) */
  --c-barra: #148461;
  --c-barra-s: #cfe9df;
  --c-grade: #eef0f3;
}

:root[data-tema="escuro"] {
  --bg: #0e1116;
  --bg2: #161b22;
  --bg3: #1c232c;
  --line: #2a323d;
  --fg: #e6edf3;
  --muted: #8b949e;
  --teal: #34d399;
  --teal-dark: #0d9488;
  --btn-fg: #04231f;
  --btn-hover: #2dd4bf;
  --acao: #d6343e;
  --acao-hover: #c51f2b;
  --acao-fg: #ffffff;
  --acao-texto: #f0616a;
  --mod-carteira: #7aa7ff;    --mod-carteira-s: #1a2740;
  --mod-rede: #34d399;        --mod-rede-s: #12302a;
  --mod-marketing: #e879f9;   --mod-marketing-s: #35183a;
  --mod-clientes: #fb923c;    --mod-clientes-s: #3a2214;
  --mod-atendimento: #22d3ee; --mod-atendimento-s: #10303a;
  --mod-contratos: #a5b4fc;   --mod-contratos-s: #232447;
  --mod-gestao: #b4bcc8;      --mod-gestao-s: #252b34;
  --atencao-s: #3a2c10;
  --atencao-borda: #5c4516;
  --sombra-card: 0 14px 30px -18px rgba(0, 0, 0, .7);
  --veu-folha: rgba(0, 0, 0, .6);
  --sombra-folha: 0 24px 48px -12px rgba(0, 0, 0, .75);
  --amber: #f59e0b;
  --red: #f87171;
  --green: #34d399;
  --sombra-1: 0 1px 3px rgba(0, 0, 0, .5);

  --at-mod-texto: #22d3ee;
  --at-ok-fg: #34d399;
  --at-aviso-fg: #fbbf24;
  --at-info-fg: #7aa7ff;
  --at-crm-fg: #e879f9;
  --at-teste-fg: #a5b4fc;
  --at-quente-s: #3a1f22;
  --at-quente-fg: #ff9aa1;
  --at-perigo-s: #3a1416;
  --at-perigo-borda: #6b2125;
  --at-perigo-fg: #fda4ab;
  --at-lido: #38bdf8;
  --at-bolha-mudo: #9aa4ae;
  --at-ponto-ok: #34d399;
  --at-ponto-off: #f87171;
  --at-ponto-aviso: #fbbf24;
  --at-ponto-nada: #6b7280;
  --at-anel-1: #c9a24a;
  --at-anel-2: #3b5bdb;
  --at-sombra-topo: 0 1px 8px rgba(0, 0, 0, .4);
  --at-sombra-aba: 0 1px 2px rgba(0, 0, 0, .5);
  --at-sombra-gaveta: 2px 0 18px rgba(0, 0, 0, .6);
  color-scheme: dark;

  --c-barra: #34d399;
  --c-barra-s: #1d3b33;
  --c-grade: #222a33;
}

/* ── base das páginas do kit (o Atendimento NÃO usa body.c-pagina) ── */
body.c-pagina, body.c-pagina *, body.c-pagina *::before, body.c-pagina *::after { box-sizing: border-box; }
body.c-pagina { margin: 0; background: var(--bg); color: var(--fg); font: 14px/1.45 var(--fonte-texto); }
.c-pagina h1, .c-pagina h2, .c-pagina h3, .c-pagina h4 { font-family: var(--fonte-titulo); margin: 0; text-wrap: balance; }
.c-pagina :focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
/* :where() zera a especificidade: sem isso esta base (0,1,1) vencia o .c-btn (0,1,0) e o texto do botão verde herdava a
   cor escura da página (2,6:1 — achado do teste de contraste do Laboratório, 09/10) */
:where(.c-pagina) button { font: inherit; color: inherit; }
/* a Plus Jakarta tem o espaço entre palavras estreito ("o do ar" lia "odoar"): o mesmo respiro do Atendimento */
.c-btn, .c-seg button, .c-aba, .c-nav-item, .c-pill, .c-sec, .c-marca { word-spacing: .14em; }
/* `hidden` vence qualquer display de componente (.c-btn é inline-flex e escondia nada) */
.c-pagina [hidden] { display: none !important; }

/* ── topo ── */
.c-topo { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap;
  padding: 8px 16px; padding-top: calc(8px + env(safe-area-inset-top, 0px)); background: var(--bg2);
  border-bottom: 1px solid var(--line); box-shadow: var(--at-sombra-topo); }
.c-marca { display: flex; align-items: center; gap: 8px; font-family: var(--fonte-titulo); font-weight: 800; font-size: 15px; }
.c-marca img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; object-position: center 22%; }
.c-nav { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; min-width: 0; flex: 1 1 auto; }
.c-nav-item { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: var(--radius-sm);
  color: var(--muted); font: 600 13.5px var(--fonte-titulo); text-decoration: none; white-space: nowrap; }
.c-nav-item:hover { background: var(--bg3); color: var(--fg); }
.c-nav-item[aria-current="page"] { background: var(--mod-atendimento-s); color: var(--at-mod-texto); }
.c-ico { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round;
  stroke-linejoin: round; vertical-align: -3px; flex: none; }
.c-topo-dir { display: flex; align-items: center; gap: 8px; margin-left: auto; color: var(--muted); font-size: 13px; }

/* ── botões e controles ── */
.c-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--radius-sm);
  border: 1px solid transparent; background: var(--teal); color: var(--btn-fg); font: 700 13.5px var(--fonte-titulo);
  cursor: pointer; text-decoration: none; }
.c-btn:hover { background: var(--btn-hover); }
.c-btn.fantasma { background: var(--bg2); color: var(--fg); border-color: var(--line); }
.c-btn.fantasma:hover { background: var(--bg3); }
.c-btn.peq { padding: 5px 10px; font-size: 12.5px; }
.c-btn:disabled { opacity: .55; cursor: not-allowed; }
.c-seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--bg3); border: 1px solid var(--line);
  border-radius: var(--radius-sm); }
.c-seg button { border: 0; background: transparent; padding: 6px 12px; border-radius: 6px; cursor: pointer;
  font: 600 13px var(--fonte-titulo); color: var(--muted); }
.c-seg button[aria-pressed="true"] { background: var(--bg2); color: var(--fg); box-shadow: var(--at-sombra-aba); }
.c-pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; white-space: nowrap;
  font-size: 11.5px; font-weight: 700; background: var(--bg3); color: var(--muted); }
.c-pill.perigo { background: var(--at-perigo-s); color: var(--at-perigo-fg); }
.c-pill.info { background: var(--mod-carteira-s); color: var(--at-info-fg); }
.c-pill.ok { background: var(--mod-rede-s); color: var(--at-ok-fg); }
.c-pill.aviso { background: var(--atencao-s); color: var(--at-aviso-fg); }
.c-sec { margin: 0 0 10px; font: 700 12px var(--fonte-titulo); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.c-vazio { padding: 14px 16px; border: 1px dashed var(--line); border-radius: var(--radius); color: var(--muted); }
.c-toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  z-index: 90; max-width: min(520px, calc(100vw - 32px)); padding: 10px 16px; border-radius: var(--radius-sm);
  background: var(--fg); color: var(--bg); font-weight: 600; box-shadow: var(--sombra-folha); }
.c-toast.erro { background: var(--at-perigo-s); color: var(--at-perigo-fg); border: 1px solid var(--at-perigo-borda); }
@media (pointer: coarse) { .c-btn, .c-seg button, .c-nav-item { min-height: 44px; } }
@media (max-width: 640px) { .c-topo-dir .c-usuario { display: none; } }

/* ── formulário (só nas páginas do kit) ── */
.c-pagina input[type=text], .c-pagina input[type=search], .c-pagina input:not([type]), .c-pagina textarea,
.c-pagina select { width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg2); color: var(--fg); font: 14px/1.45 var(--fonte-texto); }
.c-pagina textarea { resize: vertical; }
.c-pagina input:focus, .c-pagina textarea:focus, .c-pagina select:focus { outline: 2px solid var(--teal); outline-offset: 0; border-color: var(--teal); }
.c-campo { display: grid; gap: 5px; }
.c-campo label { font-weight: 600; font-size: 13px; }
.c-campo small { color: var(--muted); font-size: 12px; }
@media (pointer: coarse) { .c-pagina input, .c-pagina select, .c-pagina textarea { font-size: 16px; } .c-pagina input, .c-pagina select { min-height: 44px; } }

/* ── abas ── */
.c-abas { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.c-aba { flex: none; padding: 10px 12px; border: 0; border-bottom: 2px solid transparent; background: transparent;
  color: var(--muted); font: 600 13.5px var(--fonte-titulo); cursor: pointer; white-space: nowrap; }
.c-aba[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--teal); }
@media (pointer: coarse) { .c-aba { min-height: 44px; } }

/* ── interruptor ── */
.c-sw { position: relative; flex: none; width: 40px; height: 24px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--line); }
.c-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--bg2); box-shadow: var(--sombra-1); transition: left .15s; }
.c-sw[aria-checked="true"] { background: var(--teal); }
.c-sw[aria-checked="true"]::after { left: 19px; }
@media (pointer: coarse) { .c-sw { width: 48px; height: 44px; background: transparent; }
  .c-sw::before { content: ""; position: absolute; left: 4px; top: 10px; width: 40px; height: 24px; border-radius: 999px; background: var(--line); }
  .c-sw[aria-checked="true"]::before { background: var(--teal); }
  .c-sw::after { top: 13px; left: 7px; } .c-sw[aria-checked="true"]::after { left: 23px; } }

/* ── barra de salvar ── */
.c-barra-salvar { position: sticky; bottom: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center;
  gap: 10px; flex-wrap: wrap; padding: 10px 18px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--atencao-borda); background: var(--atencao-s); }
.c-barra-salvar > span { color: var(--at-aviso-fg); font-weight: 700; font-size: 13px; }
.c-barra-salvar > div { display: flex; gap: 8px; }

/* ── diálogo ── */
.c-veu { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: var(--veu-folha); }
.c-dialogo { display: grid; gap: 12px; width: min(640px, 100%); max-height: 88vh; max-height: 88dvh; overflow: auto;
  padding: 20px; border-radius: 14px; background: var(--bg2); color: var(--fg); box-shadow: var(--sombra-folha); }
.c-dialogo h2 { font-size: 17px; font-weight: 800; }
.c-dialogo-corpo { display: grid; gap: 12px; }
.c-dialogo-corpo p { margin: 0; color: var(--muted); font-size: 13px; }
.c-dialogo-erro { margin: 0; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--at-perigo-s); color: var(--at-perigo-fg); font-weight: 600; font-size: 13px; }
.c-dialogo-pe { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.c-alerta { padding: 10px 12px; border: 1px solid var(--at-perigo-borda); border-radius: var(--radius-sm);
  background: var(--at-perigo-s); color: var(--at-perigo-fg); font-weight: 600; font-size: 13px; }
.c-btn.perigo { background: var(--at-perigo-s); color: var(--at-perigo-fg); border-color: var(--at-perigo-borda); }
.c-btn.perigo:hover { background: var(--at-perigo-borda); }
.c-diff { max-height: 320px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-sm);
  font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.c-diff div { padding: 2px 10px; white-space: pre-wrap; overflow-wrap: anywhere; }
.c-diff .mais { background: var(--mod-rede-s); color: var(--at-ok-fg); }
.c-diff .menos { background: var(--at-perigo-s); color: var(--at-perigo-fg); text-decoration: line-through; }
.c-diff .ctx { color: var(--muted); }