/* TelesDiag — estilo "Data-Dense Dashboard" + "Minimalism & Swiss" (ui-ux-pro-max)
   Paleta: clínica veterinária (teal confiável + laranja de destaque), neutros slate. Fonte: Inter. */
:root {
  --fundo: #f6f8fa; --cartao: #ffffff; --texto: #0f172a; --suave: #475569; --fraco: #64748b; --borda: #e2e8f0; --borda-forte: #cbd5e1;
  --marca: #0f766e; --marca-hover: #115e59; --marca-2: #f0fdfa; --marca-3: #ccfbf1; --destaque: #c2410c;
  --ok: #15803d; --ok-f: #ecfdf3; --perigo: #b91c1c; --perigo-f: #fef2f2; --aviso: #a16207; --aviso-f: #fefce8;
  --receber: #fffbeb; --receber30: #ffedd5; --receber60: #fed7aa; --calote: #fecaca; --revisar: #fef08a; --cinza-f: #f1f5f9;
  --lateral: #0b3b37; --lateral-texto: #ccfbf1; --lateral-ativo: #115e59;
  --raio: 10px; --raio-p: 8px;
  --sombra: 0 1px 2px rgba(15, 23, 42, .05);
  --sombra-2: 0 10px 30px rgba(15, 23, 42, .18);
  --fonte: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --larg-lateral: 232px;
}

  :root[data-tema="escuro"] {
    --fundo: #0b1120; --cartao: #111827; --texto: #e5e7eb; --suave: #9ca3af; --fraco: #8b95a5; --borda: #1f2937; --borda-forte: #334155;
    --marca: #2dd4bf; --marca-hover: #5eead4; --marca-2: #0f2a2a; --marca-3: #134e4a; --destaque: #fb923c;
    --ok: #4ade80; --ok-f: #052e16; --perigo: #f87171; --perigo-f: #3b0d0d; --aviso: #facc15; --aviso-f: #2e2706;
    --receber: #2b2410; --receber30: #3a2410; --receber60: #4a2a0c; --calote: #4c1414; --revisar: #3d3608; --cinza-f: #1a2230;
    --lateral: #08201e; --lateral-texto: #99f6e4; --lateral-ativo: #134e4a;
    --sombra: none;
  }


* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fundo); color: var(--texto); font: 14px/1.5 var(--fonte); -webkit-font-smoothing: antialiased; }
body { font-feature-settings: 'cv11', 'ss01'; }
a { color: var(--marca); }
.carregando { padding: 40px; text-align: center; color: var(--suave); }
.ic { display: inline-flex; width: 18px; height: 18px; flex: none; vertical-align: -4px; }
.ic svg { width: 100%; height: 100%; }
:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ------------------------------------------------ estrutura: menu lateral (PC) / barra inferior (celular) */
.casca { display: grid; grid-template-columns: var(--larg-lateral) minmax(0, 1fr); min-height: 100vh; }
.lateral { position: sticky; top: 0; height: 100vh; background: var(--lateral); color: var(--lateral-texto); display: flex; flex-direction: column; padding: 16px 12px; overflow-y: auto; }
.lateral .marca { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 16px; color: #fff; padding: 4px 12px 16px; letter-spacing: -.01em; }
.lateral .marca img { width: 30px; height: 30px; border-radius: 8px; }
.lateral nav { display: flex; flex-direction: column; gap: 2px; }
.lateral nav a { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: var(--raio-p); color: var(--lateral-texto); text-decoration: none; font-weight: 600; opacity: .86; transition: background-color .15s, opacity .15s; }
.lateral nav a:hover { background: rgba(255, 255, 255, .06); opacity: 1; }
.lateral nav a.ativo { background: var(--lateral-ativo); color: #fff; opacity: 1; }
.lateral .rodape { margin-top: auto; border-top: 1px solid rgba(255, 255, 255, .1); padding: 12px 8px 0; font-size: 13px; }
.lateral .rodape .nome { color: #fff; font-weight: 600; padding: 0 8px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lateral .rodape button { width: 100%; justify-content: flex-start; background: transparent; border: 0; color: var(--lateral-texto); min-height: 36px; padding: 8px; }
.lateral .rodape button:hover { background: rgba(255, 255, 255, .06); }

.conteudo { min-width: 0; display: flex; flex-direction: column; }
main { width: 100%; max-width: 1760px; padding: 24px 32px 40px; }
.topo-cel, .nav-cel { display: none; }

h1 { font-size: 20px; line-height: 1.3; margin: 0; letter-spacing: -.01em; font-weight: 700; }
h2 { font-size: 16px; margin: 24px 0 12px; font-weight: 700; color: var(--texto); }
.cabecalho { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 12px; margin-bottom: 16px; }
.cabecalho .esp { flex: 1; }

/* ------------------------------------------------ componentes */
.cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); padding: 16px 16px; min-width: 0; }
.grade { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); }
.grade.kpis { grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); }
.kpi { container-type: inline-size; padding: 12px 16px; }
.kpi .rotulo { color: var(--suave); font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* o valor encolhe junto com o cartão: nunca estoura a largura */
.kpi .valor { font-size: clamp(15px, 11.5cqi, 24px); font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }
.kpi.neg .valor { color: var(--perigo); }
.kpi.destaque { border-left: 3px solid var(--marca); }

.barra { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.barra .esp { flex: 1; }
input, select, textarea, button { font: inherit; color: inherit; }
input, select, textarea { background: var(--cartao); border: 1px solid var(--borda-forte); border-radius: var(--raio-p); padding: 8px 12px; min-height: 38px; max-width: 100%; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--marca); outline-offset: -1px; border-color: transparent; }
button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--borda-forte); background: var(--cartao); border-radius: var(--raio-p); padding: 8px 16px; min-height: 38px; cursor: pointer; font-weight: 600; transition: background-color .15s, border-color .15s; }
button:hover { background: var(--cinza-f); }
button.pri { background: var(--marca); color: #fff; border-color: var(--marca); }
button.pri:hover { background: var(--marca-hover); }
 html[data-tema="escuro"] button.pri { color: #042f2e; } 
button:disabled { opacity: .55; cursor: default; }
button.peq { min-height: 30px; padding: 4px 8px; font-size: 13px; }
button.icone { padding: 4px; min-height: 28px; min-width: 28px; border-color: transparent; background: transparent; color: var(--fraco); }
button.icone:hover { color: var(--marca); background: var(--marca-2); }
button.perigo-txt { color: var(--perigo); }

.tabela-wrap { overflow: auto; background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); max-height: calc(100vh - 220px); }
table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; }
th, td { padding: 8px 12px; border-bottom: 1px solid var(--borda); text-align: left; vertical-align: middle; white-space: nowrap; }
th { background: var(--cinza-f); color: var(--suave); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; position: sticky; top: 0; z-index: 1; }
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.quebra { white-space: normal; min-width: 180px; }
tr.clicavel { cursor: pointer; }
td.acoes-linha { white-space: nowrap; }
td.acoes-linha button { min-height: 28px; padding: 2px 12px; font-size: 13px; }
tbody tr:hover td { box-shadow: inset 0 0 0 9999px rgba(15, 118, 110, .06); }
tfoot td { font-weight: 700; background: var(--cinza-f); position: sticky; bottom: 0; }

/* cores das linhas, iguais às da planilha */
tr.st-receber td { background: var(--receber); }
tr.st-calote td { background: var(--calote); }
tr.st-cortesia td { color: var(--fraco); background: var(--cinza-f); }
tr.st-conferido td { background: var(--ok-f); }
tr.st-revisar td { background: var(--revisar); }

.etq { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--cinza-f); color: var(--suave); white-space: nowrap; }
.etq.ok { background: var(--ok-f); color: var(--ok); }
.etq.perigo { background: var(--perigo-f); color: var(--perigo); }
.etq.aviso { background: var(--aviso-f); color: var(--aviso); }
.marca-ok { color: var(--ok); }
.alerta { display: flex; gap: 12px; align-items: flex-start; border-radius: var(--raio); padding: 12px 16px; margin-bottom: 12px; background: var(--aviso-f); color: var(--aviso); border: 1px solid color-mix(in srgb, currentColor 25%, transparent); }
.alerta .ic { margin-top: 2px; }
.alerta.perigo { background: var(--perigo-f); color: var(--perigo); }
.alerta.ok { background: var(--ok-f); color: var(--ok); }
.suave { color: var(--suave); }
.pequeno { font-size: 13px; }

.login { max-width: 380px; margin: 12vh auto 0; padding: 0 16px; }
.login h1 { text-align: center; color: var(--marca); font-size: 26px; margin-bottom: 4px; }
.login form { display: grid; gap: 12px; }
.login input { width: 100%; min-height: 44px; }
.login button { min-height: 44px; }

.form { display: grid; gap: 12px 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.form label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: var(--suave); }
.form label.inteiro { grid-column: 1 / -1; }
.form input, .form select, .form textarea { width: 100%; color: var(--texto); font-size: 14px; }
.acoes { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }

dialog { border: 0; border-radius: 14px; padding: 0; width: min(760px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); background: var(--cartao); color: var(--texto); box-shadow: var(--sombra-2); }
dialog[open] { display: flex; flex-direction: column; }
dialog::backdrop { background: rgba(2, 6, 23, .5); }
dialog .cab { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; border-bottom: 1px solid var(--borda); font-weight: 700; font-size: 16px; flex: none; }
dialog .cab .titulo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
dialog .cab .fechar { border: 0; background: transparent; min-width: 40px; min-height: 40px; padding: 8px; color: var(--suave); border-radius: 50%; }
dialog .cab .fechar:hover { background: var(--cinza-f); color: var(--texto); }
dialog .cab .fechar .ic { width: 22px; height: 22px; }
dialog .rodape-dlg { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--borda); background: var(--cartao); flex: none; border-radius: 0 0 14px 14px; }
dialog .corpo { padding: 16px 16px; overflow: auto; flex: 1; min-height: 0; }

.aviso-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: #0f172a; color: #fff; padding: 12px 16px; border-radius: 10px; z-index: 50; box-shadow: var(--sombra-2); max-width: calc(100vw - 32px); }
.aviso-toast.erro { background: var(--perigo); }

.grafico { width: 100%; height: 220px; display: block; }
.abas-int { display: flex; gap: 4px; margin-bottom: 16px; flex-wrap: wrap; border-bottom: 1px solid var(--borda); }
.abas-int button { border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--suave); padding: 8px 12px; }
.abas-int button.ativo { color: var(--marca); border-bottom-color: var(--marca); }

/* painel: gráfico e tabela lado a lado em telas largas */
.empilhado { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
.tabela-wrap.sem-limite { max-height: none; }
table.tabela-cheia th, table.tabela-cheia td { padding-left: 16px; padding-right: 16px; }

/* ------------------------------------------------ tablet e celular */
@media (max-width: 1023px) {
  .casca { display: block; }
  .lateral { display: none; }
  .topo-cel { display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 20; background: var(--lateral); color: #fff; padding: 12px 16px; padding-top: max(12px, env(safe-area-inset-top)); }
  .topo-cel .marca { font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 8px; }
  .topo-cel .marca img { width: 26px; height: 26px; border-radius: 7px; }
  .topo-cel .esp { flex: 1; }
  .topo-cel button { background: transparent; border: 0; color: #fff; min-height: 44px; min-width: 44px; padding: 8px; }
  .nav-cel { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--cartao); border-top: 1px solid var(--borda); padding-bottom: env(safe-area-inset-bottom); }
  .nav-cel a, .nav-cel button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; font-size: 12px; font-weight: 600; color: var(--fraco); text-decoration: none; background: transparent; border: 0; border-radius: 0; padding: 4px; }
  .nav-cel .ic { width: 22px; height: 22px; }
  .nav-cel a.ativo { color: var(--marca); }
  main { padding: 16px 16px 88px; }
  .tabela-wrap { max-height: none; }
  .gaveta { position: fixed; inset: 0; z-index: 30; background: rgba(2, 6, 23, .5); display: flex; justify-content: flex-end; }
  .gaveta .painel-gaveta { width: min(300px, 86vw); height: 100%; background: var(--lateral); color: var(--lateral-texto); padding: 16px 12px; padding-top: max(16px, env(safe-area-inset-top)); display: flex; flex-direction: column; overflow-y: auto; }
  .gaveta nav { display: flex; flex-direction: column; gap: 2px; }
  .gaveta nav a, .gaveta button { display: flex; align-items: center; gap: 12px; padding: 12px; min-height: 48px; border-radius: var(--raio-p); color: var(--lateral-texto); text-decoration: none; font-weight: 600; background: transparent; border: 0; justify-content: flex-start; width: 100%; }
  .gaveta nav a.ativo { background: var(--lateral-ativo); color: #fff; }
  .gaveta .nome { color: #fff; font-weight: 600; padding: 8px 12px 16px; }
  input, select, button { min-height: 44px; }
  button.peq, button.icone { min-height: 36px; min-width: 36px; }
  .esconde-cel { display: none; }
}
@media (max-width: 640px) {
  h1 { font-size: 20px; }
  .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kpi { padding: 12px 12px; }
  .cartao { padding: 12px; }
  th, td { padding: 8px; }
  dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; margin: 0; }
  dialog { max-height: 100dvh; }
  dialog .cab, dialog .rodape-dlg { border-radius: 0; }
  dialog .rodape-dlg { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
}
@media print {
  .lateral, .topo-cel, .nav-cel, .barra button { display: none !important; }
  .casca { display: block; }
  .tabela-wrap { max-height: none; overflow: visible; }
}

/* cartões que funcionam como abas (A receber) */
button.kpi-aba { display: block; text-align: left; width: 100%; font-weight: 400; cursor: pointer; border: 1px solid var(--borda); }
button.kpi-aba:hover { border-color: var(--marca); background: var(--cartao); }
button.kpi-aba.ativo { border-color: var(--marca); box-shadow: inset 0 0 0 1px var(--marca); background: var(--marca-2); }
button.kpi-aba.ativo .rotulo { color: var(--marca); font-weight: 600; }
.secao-form { grid-column: 1 / -1; font-weight: 700; color: var(--texto); font-size: 13px; border-top: 1px solid var(--borda); padding-top: 12px; margin-top: 4px; }
td.acoes-linha a { text-decoration: none; }

/* selos de contagem no menu e linha "N itens" */
.selo { margin-left: auto; min-width: 22px; padding: 2px 8px; border-radius: 999px; background: var(--destaque); color: #fff; font-size: 12px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; line-height: 18px; }
.nav-cel a { position: relative; }
.nav-cel .selo { position: absolute; top: 4px; left: calc(50% + 6px); margin: 0; font-size: 12px; min-width: 18px; padding: 0 4px; line-height: 16px; }
.contagem { margin: 0 0 8px; color: var(--suave); font-size: 13px; }
.contagem b { color: var(--texto); font-variant-numeric: tabular-nums; }
.barra .contagem { margin: 0; }
.abas-int .qtd { color: var(--fraco); font-weight: 600; }

/* seletor de mês ‹ Outubro 2026 › */
.seletor-mes { display: inline-flex; align-items: center; gap: 4px; background: var(--cartao); border: 1px solid var(--borda-forte); border-radius: var(--raio-p); padding: 2px; }
.seletor-mes select { border: 0; min-height: 34px; font-weight: 600; padding: 4px 8px; background: transparent; }
.seletor-mes select:focus { outline-offset: 0; }
.seletor-mes .seta { min-width: 34px; min-height: 34px; }
.seletor-mes .seta .ic { width: 20px; height: 20px; }

/* abas de meses (A receber / Notas a emitir) */
.abas-meses { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 16px; scrollbar-width: thin; }
.abas-meses button { flex: none; display: grid; grid-template-columns: auto auto; column-gap: 8px; align-items: baseline; text-align: left; padding: 8px 12px; min-width: 120px; border: 1px solid var(--borda); background: var(--cartao); border-radius: var(--raio); }
.abas-meses button .nome { font-weight: 700; }
.abas-meses button .n { justify-self: end; font-size: 12px; font-weight: 700; background: var(--cinza-f); color: var(--suave); border-radius: 999px; padding: 0 8px; }
.abas-meses button .v { grid-column: 1 / -1; font-size: 13px; color: var(--suave); font-variant-numeric: tabular-nums; font-weight: 600; }
.abas-meses button.ativo { border-color: var(--marca); background: var(--marca-2); box-shadow: inset 0 0 0 1px var(--marca); }
.abas-meses button.ativo .nome { color: var(--marca); }
.abas-meses button.ativo .n { background: var(--marca); color: #fff; }

/* aviso do painel com botões */
.alerta.com-acoes { align-items: center; }
.alerta.com-acoes .texto { flex: 1; }
.alerta.com-acoes a { text-decoration: none; }
.alerta.com-acoes button.icone { color: inherit; }

/* central de alertas */
.grupo-alerta { margin-bottom: 16px; border-left: 4px solid var(--borda-forte); }
.grupo-alerta.g-alta { border-left-color: var(--perigo); }
.grupo-alerta.g-media { border-left-color: var(--aviso); }
.grupo-alerta.g-baixa { border-left-color: var(--marca); }
.grupo-alerta .cab-grupo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.grupo-alerta .cab-grupo h2 { margin: 0; }
.grupo-alerta .cab-grupo .esp { flex: 1; }
.grupo-alerta .explica { margin: 8px 0 0; color: var(--suave); font-size: 13px; }
.grupo-alerta .explica b { color: var(--texto); }
.lista-alertas { margin-top: 12px; border-top: 1px solid var(--borda); }
.item-alerta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--borda); }
.item-alerta:last-child { border-bottom: 0; }
.item-alerta .info { flex: 1; min-width: 220px; display: flex; flex-direction: column; }
.item-alerta .acoes-item { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.item-alerta .acoes-item a { text-decoration: none; }
.item-alerta .acoes-item button, .item-alerta .acoes-item select { min-height: 32px; padding: 4px 12px; font-size: 13px; }
.item-alerta button.manter { color: var(--suave); }
a.link-kpi { text-decoration: none; color: inherit; }
a.link-kpi:hover { border-color: var(--marca); }
a.link-kpi .rotulo { white-space: normal; line-height: 1.3; min-height: 2.6em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* abas de clínicas (A receber) */
.rotulo-abas { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--fraco); margin: 4px 0 8px; }
.abas-clinicas { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.abas-clinicas button { gap: 8px; padding: 8px 12px; min-height: 36px; border-radius: 999px; font-weight: 600; }
.abas-clinicas button .n { font-size: 12px; font-weight: 700; background: var(--cinza-f); color: var(--suave); border-radius: 999px; padding: 0 8px; }
.abas-clinicas button .v { font-size: 12px; font-weight: 600; color: var(--suave); font-variant-numeric: tabular-nums; }
.abas-clinicas button.ativo { background: var(--marca); border-color: var(--marca); color: #fff; }
.abas-clinicas button.ativo .n { background: rgba(255,255,255,.25); color: #fff; }
.abas-clinicas button.ativo .v { color: rgba(255,255,255,.85); }

/* barra de filtros (Exames) */
.filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; padding: 12px; background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); }
.filtros input[type=search] { flex: 1 1 220px; }
.filtros select { flex: 0 1 auto; max-width: 220px; }
.filtros select.filtro-ativo { border-color: var(--marca); background: var(--marca-2); color: var(--marca); font-weight: 600; }
.filtros .chk { display: inline-flex; align-items: center; gap: 4px; color: var(--suave); }
.filtros .chk input { min-height: auto; }
@media (max-width: 640px) { .filtros select { flex: 1 1 45%; max-width: none; } }

/* cabeçalhos de tabela ordenáveis */
th.ordenavel { cursor: pointer; user-select: none; }
th.ordenavel:hover { color: var(--marca); }
th.ordem-ativa { color: var(--marca); }

/* exames pagos juntos */
.etq.grupo { background: #ede9fe; color: #6d28d9; }
.etq.grupo .ic { width: 13px; height: 13px; vertical-align: -2px; }
 html[data-tema="escuro"] .etq.grupo { background: #2e1065; color: #c4b5fd; } 

/* uma cor por status, igual em todas as telas */
:root { --receber: #fef3c7; --calote: #fee2e2; }
 :root[data-tema="escuro"] { --receber: #3a2e0a; --calote: #3f1414; } 
.legenda { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; font-size: 13px; color: var(--suave); }
.legenda .leg { display: inline-flex; align-items: center; gap: 8px; }
.legenda .amostra { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--borda-forte); background: var(--cartao); display: inline-block; }
.legenda .amostra.st-conferido { background: var(--ok-f); }
.legenda .amostra.st-receber { background: var(--receber); }
.legenda .amostra.st-calote { background: var(--calote); }
.legenda .amostra.st-cortesia { background: var(--cinza-f); }
.legenda .amostra.st-revisar { background: var(--revisar); }
td.acoes-linha { white-space: nowrap; }
td.acoes-linha > * + * { margin-left: 8px; }
td.acoes-linha select.sel-status { min-height: 28px; padding: 2px 8px; font-size: 13px; width: auto; }

/* agenda (Google) */
.dia-agenda { margin-bottom: 16px; }
.cab-dia { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 16px 0 8px; }
.cab-dia h2 { margin: 0; }
.cab-dia .esp { flex: 1; }
.cartao.evento { margin-bottom: 8px; }
.cartao.evento.importado { opacity: .65; }
.cab-evento { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cab-evento input[type=checkbox] { width: 20px; height: 20px; min-height: auto; }
.cab-evento .titulo-ev { flex: 1; min-width: 200px; }
.campos-ev { margin-top: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); }
.valor-fixo { padding: 8px 0; color: var(--texto); font-weight: 600; }

/* ================================================================ celular */
.so-celular { display: none; }
.area-filtros { display: contents; }
@media (max-width: 640px) {
  .so-celular { display: inline-flex; }
  /* 7) explicações recolhidas (botão "?" no topo) */
  .ajuda { display: none; }
  body.mostrar-ajuda .ajuda { display: block; }
  /* 3) botão principal flutuante */
  button.fab { position: fixed; right: 14px; bottom: calc(68px + env(safe-area-inset-bottom)); z-index: 25; border-radius: 999px; padding: 12px 16px; min-height: 48px; box-shadow: 0 8px 24px rgba(15, 118, 110, .35); }
  /* 4) totais numa faixa que rola para o lado */
  .grade { display: flex !important; overflow-x: auto; gap: 8px; padding-bottom: 4px; scroll-snap-type: x proximity; }
  .grade > * { flex: 0 0 auto; min-width: 138px; max-width: 70vw; scroll-snap-align: start; }
  .grade .kpi .valor { font-size: 16px; }
  /* 2) filtros recolhidos */
  .filtros { padding: 8px; }
  .filtros .area-filtros { display: none; }
  .filtros.aberto .area-filtros { display: contents; }
  .filtros input[type=search] { flex: 1 1 60%; }
  .filtros .btn-filtros.filtro-ativo { border-color: var(--marca); color: var(--marca); background: var(--marca-2); }
  /* 1) tabelas viram cartões */
  .tabela-wrap { border: 0; background: transparent; box-shadow: none; overflow: visible; max-height: none; }
  table.cartoes-cel, table.cartoes-cel tbody, table.cartoes-cel tfoot { display: block; }
  table.cartoes-cel thead { display: none; }
  table.cartoes-cel tr { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px 12px; margin-bottom: 8px; box-shadow: var(--sombra); position: relative; }
  table.cartoes-cel tbody tr:hover td { box-shadow: none; }
  table.cartoes-cel tr td { display: block; border: 0; padding: 2px 0; white-space: normal; background: transparent !important; min-width: 0; text-align: left !important; }
  table.cartoes-cel tr td::before { content: attr(data-rotulo); display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--fraco); }
  table.cartoes-cel tr td.vazia, table.cartoes-cel tr td[data-rotulo="#"] { display: none; }
  table.cartoes-cel tr td[data-rotulo=""]::before, table.cartoes-cel tr td.acoes-linha::before { display: none; }
  table.cartoes-cel tr td.acoes-linha { grid-column: 1 / -1; order: 99; display: flex; flex-wrap: wrap; gap: 8px; padding-top: 8px; border-top: 1px solid var(--borda); margin-top: 4px; }
  table.cartoes-cel tr td.acoes-linha:empty { display: none; }
  table.cartoes-cel tr td.quebra { grid-column: 1 / -1; }
  table.cartoes-cel tr td:has(> input[type=checkbox]) { position: absolute; top: 8px; right: 10px; padding: 0; }
  table.cartoes-cel tr td:has(> input[type=checkbox])::before { display: none; }
  table.cartoes-cel tr td input[type=checkbox] { width: 22px; height: 22px; min-height: auto; }
  /* cor do status como faixa lateral do cartão */
  table.cartoes-cel tr { border-left-width: 5px; }
  table.cartoes-cel tr.st-receber { border-left-color: #f59e0b; background: var(--receber); }
  table.cartoes-cel tr.st-calote { border-left-color: #ef4444; background: var(--calote); }
  table.cartoes-cel tr.st-cortesia { border-left-color: #94a3b8; background: var(--cinza-f); }
  table.cartoes-cel tr.st-conferido { border-left-color: #22c55e; background: var(--ok-f); }
  table.cartoes-cel tr.st-revisar { border-left-color: #eab308; background: var(--revisar); }
  table.cartoes-cel tfoot tr { background: var(--cinza-f); }
  table.cartoes-cel tfoot td { position: static; }
  /* 5) barra de seleção fixa embaixo */
  .barra-lote { position: fixed; left: 8px; right: 8px; bottom: calc(62px + env(safe-area-inset-bottom)); z-index: 26; box-shadow: 0 -6px 24px rgba(15, 23, 42, .18); max-height: 45vh; overflow: auto; }
  .barra-lote .barra { gap: 8px; }
  .barra-lote button, .barra-lote select, .barra-lote input { min-height: 38px; font-size: 13px; }
  /* 6) formulário em etapas */
  .nav-etapas { display: grid; gap: 8px; margin-bottom: 4px; }
  .nav-etapas .pontos { display: flex; gap: 8px; }
  .nav-etapas .pontos span { flex: 1; height: 4px; border-radius: 4px; background: var(--borda-forte); }
  .nav-etapas .pontos span.ativo { background: var(--marca); }
  .nav-etapas .botoes { display: flex; gap: 8px; justify-content: space-between; }
  .nav-etapas .botoes button { flex: 1; }
  .topo-cel button { font-weight: 700; font-size: 20px; }
}
@media (max-width: 640px) {
  table.cartoes-cel tr td[data-rotulo="Paciente"], table.cartoes-cel tr td[data-rotulo="Animal"] { order: -3; font-weight: 700; font-size: 16px; }
  table.cartoes-cel tr td[data-rotulo="Tutor"], table.cartoes-cel tr td[data-rotulo="Tutor (nome completo)"] { order: -2; font-weight: 600; }
  table.cartoes-cel tr td[data-rotulo="Valor"], table.cartoes-cel tr td[data-rotulo="Valor pago"] { font-weight: 700; }
}

/* exames pagos juntos: cor do grupo na borda da linha e no selo */
.etq.grupo { background: color-mix(in srgb, var(--cor-grupo, #7c3aed) 14%, transparent); color: var(--cor-grupo, #6d28d9); }
tr.em-grupo td:first-child { box-shadow: inset 5px 0 0 var(--cor-grupo); }
tr.em-grupo.grupo-destaque td { box-shadow: inset 0 0 0 9999px color-mix(in srgb, var(--cor-grupo) 12%, transparent); }
tr.em-grupo.grupo-destaque td:first-child { box-shadow: inset 5px 0 0 var(--cor-grupo), inset 0 0 0 9999px color-mix(in srgb, var(--cor-grupo) 12%, transparent); }
@media (max-width: 640px) { table.cartoes-cel tr.em-grupo { outline: 2px solid var(--cor-grupo); outline-offset: -2px; } }

/* logo Dra Monique Teles */
.logo { display: block; }
.logo svg { display: block; width: 100%; height: auto; }
.logo-login { width: min(280px, 72vw); margin: 0 auto 8px; }
/* fundo transparente: a borda das letras usa a cor do fundo da página */
.logo-login svg text { stroke: var(--fundo); }
.logo-menu { width: 160px; }
/* no menu escuro o logo fica claro, sem fundo */
.logo-menu svg g { stroke: #99f6e4; }
.logo-menu svg path[fill="#111"] { fill: #ffffff; }
.logo-menu svg text { fill: #fbcfe8; stroke: var(--lateral); }
.lateral .marca.marca-logo { justify-content: center; padding: 4px 12px 16px; }

.topo-cel .marca img.logo-cel { width: 34px; height: 34px; border-radius: 50%; background: #fff; padding: 2px; object-fit: cover; object-position: 50% 30%; }


  html[data-tema="escuro"] .logo-login svg g { stroke: #94a3b8; }
  html[data-tema="escuro"] .logo-login svg path[fill="#111"] { fill: #e5e7eb; }
  html[data-tema="escuro"] .logo-login svg text { fill: #fbcfe8; }


/* fechamento do mês */
.meses-fech { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.mes-fech .cab-mes { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.mes-fech .cab-mes .esp { flex: 1; }
.mes-fech.fechado { background: var(--cinza-f); }
.lista-pend { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 4px; font-size: 13px; }
.lista-pend li { display: flex; align-items: center; gap: 8px; }
.lista-pend li.pend { color: var(--aviso); }
.lista-pend li.ok { color: var(--ok); }
.lista-pend li.info { color: var(--suave); }
.lista-pend .ic { width: 15px; height: 15px; }
/* conferência pelo extrato */
.item-extrato { margin-bottom: 12px; }
.cab-extrato { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.valor-extrato { font-size: 20px; font-variant-numeric: tabular-nums; }
.desc-extrato { flex: 1; min-width: 160px; }
.sugestoes { display: grid; gap: 8px; margin: 12px 0 8px; }
.sugestao { display: flex; gap: 12px; align-items: flex-start; padding: 8px 12px; border: 1px solid var(--borda); border-radius: var(--raio-p); cursor: pointer; }
.sugestao input { min-height: auto; margin-top: 4px; }
.sugestao.escolhida { border-color: var(--marca); background: var(--marca-2); }
.sugestao .etq { margin: 4px 8px 0 0; }
.item-extrato input[type=search] { width: 100%; }

/* leitura de comprovante */
.comp-leitura { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 16px; align-items: start; }
.comp-leitura img { width: 100%; border: 1px solid var(--borda); border-radius: var(--raio-p); max-height: 60vh; object-fit: contain; background: #fff; }
@media (max-width: 640px) { .comp-leitura { grid-template-columns: 1fr; } .comp-leitura img { max-height: 35vh; } }

/* busca em cada tela */
.oculto-busca { display: none !important; }
.busca-tela { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 8px 12px; background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio-p, 8px); }
.busca-tela[hidden] { display: none; }
.busca-tela .ic { color: var(--suave); flex: none; }
.busca-tela input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; padding: 8px 0; box-shadow: none; }
.busca-tela .info-busca { white-space: nowrap; }

/* painel: mês a mês em cartões */
.grade-meses { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.cartao-mes { display: flex; flex-direction: column; gap: 4px; color: inherit; text-decoration: none; padding: 16px; transition: border-color .15s, box-shadow .15s; }
.cartao-mes:hover { border-color: var(--marca); box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.cartao-mes.atual { border-color: var(--marca); border-width: 2px; }
.cartao-mes.vazio { opacity: .6; }
.cab-mes { display: flex; align-items: center; gap: 8px; }
.cab-mes .esp { flex: 1; }
.saldo-mes { display: flex; align-items: baseline; justify-content: space-between; margin: 8px 0 4px; }
.saldo-mes strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.saldo-mes.neg strong { color: var(--perigo); }
.linha-mes { display: flex; justify-content: space-between; font-size: 14px; }
.linha-mes b { font-weight: 600; font-variant-numeric: tabular-nums; }
.linha-mes.pos b { color: var(--ok); }
.linha-mes.neg b { color: var(--perigo); }
.pe-mes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--borda); }
.pe-mes .pequeno { margin-left: auto; }

/* agenda: dispensados */
.evento.dispensado { opacity: .65; padding-top: 8px; padding-bottom: 8px; }

/* guia */
.indice-guia { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; }
.indice-guia a { padding: 4px 12px; border: 1px solid var(--borda); border-radius: 999px; font-size: 13px; text-decoration: none; color: inherit; background: var(--cartao); }
.indice-guia a:hover { border-color: var(--marca); }
.secao-guia { margin-bottom: 12px; padding: 0; scroll-margin-top: 16px; }
.secao-guia > summary { display: flex; gap: 12px; align-items: center; padding: 16px 16px; cursor: pointer; list-style: none; }
.secao-guia > summary::-webkit-details-marker { display: none; }
.secao-guia > summary::after { content: '▸'; margin-left: auto; color: var(--suave); transition: transform .15s; }
.secao-guia[open] > summary::after { transform: rotate(90deg); }
.ic-guia { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: color-mix(in srgb, var(--marca) 12%, transparent); color: var(--marca); }
.tit-guia { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.corpo-guia { padding: 0 16px 16px 64px; }
.corpo-guia h3 { font-size: 14px; margin: 12px 0 8px; }
.corpo-guia ol, .corpo-guia ul { margin: 0; padding-left: 24px; display: grid; gap: 8px; line-height: 1.5; }
.dicas-guia li::marker { content: '💡 '; }
@media (max-width: 640px) { .corpo-guia { padding-left: 16px; } .grade-meses { grid-template-columns: 1fr 1fr; gap: 8px; } .cartao-mes { padding: 12px; } .saldo-mes strong { font-size: 16px; } }
@media (max-width: 380px) { .grade-meses { grid-template-columns: 1fr; } }

/* painel: comparativo e gráficos */
:root { --g-receita: #0d9488; --g-despesa: #ea580c; --g-saldo: #1e3a8a; --g-anterior: #94a3b8; --g-boa: #15803d; --g-ruim: #b91c1c; }
.comparativo { margin: 0 0 16px; }
.comparativo .barra { margin-bottom: 12px; }
.comp-kpis { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.kpi.comp .var { font-size: 13px; margin-top: 4px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi.comp .var .suave { font-weight: 400; }
.kpi.comp .var.pequena { font-size: 12px; margin-top: 2px; }
.var.boa { color: var(--g-boa); } .var.ruim { color: var(--g-ruim); } .var.neutra { color: var(--suave); }
.neg-txt { color: var(--perigo); }
.resumo-comp { margin: 12px 0 0; }
.grade-graficos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 16px 0 24px; }
.bloco-grafico { min-width: 0; }
.bloco-grafico.largo { grid-column: 1 / -1; }
.bloco-grafico h3 { margin: 0 0 2px; font-size: 16px; }
.bloco-grafico > p.pequeno { margin: 0 0 8px; }
.graf { position: relative; width: 100%; min-height: 220px; }
.graf .grafico { width: 100%; height: 220px; overflow: visible; }
.grade-linha { stroke: var(--borda); stroke-width: 1; }
.eixo-zero { stroke: var(--borda-forte); stroke-width: 1; }
.rot-eixo { font-size: 12px; fill: var(--suave); font-variant-numeric: tabular-nums; }
.rot-eixo.futuro { opacity: .45; }
.realce-graf { fill: var(--texto); opacity: .05; }
.graf .ponto { stroke: var(--cartao); stroke-width: 2; }
.dica-graf { position: absolute; top: 4px; width: 180px; padding: 8px 12px; background: var(--cartao); border: 1px solid var(--borda); border-radius: 8px; box-shadow: 0 4px 16px rgba(15,23,42,.12); font-size: 13px; pointer-events: none; z-index: 2; }
.dica-graf[hidden] { display: none; }
.linha-dica { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.linha-dica b { margin-left: auto; font-variant-numeric: tabular-nums; }
.legenda-graf { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: var(--suave); margin-bottom: 8px; }
.legenda-graf span { display: inline-flex; align-items: center; gap: 8px; }
.leg-barra { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.leg-linha { display: inline-block; width: 16px; border-top: 2px solid; }
.leg-linha.trac { border-top-style: dashed; }
.cab-bloco { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.cab-bloco h3 { flex: 1; }
.abas-mini { display: inline-flex; border: 1px solid var(--borda); border-radius: 8px; overflow: hidden; }
.abas-mini button { border: 0; border-radius: 0; padding: 4px 12px; font-size: 13px; background: transparent; min-height: 0; }
.abas-mini button.ativo { background: var(--marca); color: #fff; }
.barras-h { display: grid; gap: 12px; }
.rot-bh { display: flex; align-items: baseline; gap: 8px; font-size: 13px; }
.rot-bh > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rot-bh b { font-variant-numeric: tabular-nums; }
.rot-bh .pct-bh { width: 34px; text-align: right; font-size: 12px; }
.rot-bh .var { font-size: 12px; font-weight: 600; white-space: nowrap; }
.trilho-bh { height: 8px; background: var(--fundo); border-radius: 4px; margin-top: 4px; overflow: hidden; }
.barra-bh { height: 100%; background: var(--g-receita); border-radius: 4px; }
@media (max-width: 900px) { .grade-graficos { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .comp-kpis { grid-template-columns: 1fr 1fr; gap: 8px; } .kpi.comp .var .suave { display: none; } }

/* ================================================= design profissional (mesmas cores) */
html { color-scheme: light; }
html[data-tema="escuro"] { color-scheme: dark; }
html[data-tema="escuro"] button.pri { color: #042f2e; }
html[data-tema="escuro"] { --g-receita: #2dd4bf; --g-despesa: #fb923c; --g-saldo: #93c5fd; --g-anterior: #64748b; --g-boa: #4ade80; --g-ruim: #f87171; }

/* títulos com a tipografia do logo */
h1 { font-family: 'Dosis', var(--fonte); font-weight: 600; font-size: 26px; letter-spacing: .01em; }
.login h1 { font-family: 'Dosis', var(--fonte); }

/* ---------- menu lateral agrupado e recolhível */
.lateral nav { gap: 0; }
.grupo-menu { display: flex; flex-direction: column; gap: 2px; padding: 4px 0 8px; }
.grupo-menu + .grupo-menu { border-top: 1px solid rgba(255, 255, 255, .07); padding-top: 8px; }
.tit-grupo { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--lateral-texto); opacity: .5; padding: 4px 12px 4px; }
.linha-ferramentas { display: flex; gap: 8px; margin: 0 0 12px; }
.btn-buscar { flex: 1; display: flex; align-items: center; gap: 12px; justify-content: flex-start; min-height: 36px; padding: 8px 12px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); color: var(--lateral-texto); border-radius: var(--raio-p); font-weight: 600; }
.btn-buscar:hover { background: rgba(255, 255, 255, .12); }
.btn-buscar kbd { margin-left: auto; white-space: nowrap; font: 600 12px var(--fonte); padding: 2px 8px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, .2); opacity: .75; }
.btn-recolher { min-height: 36px; width: 36px; padding: 0; display: grid; place-items: center; background: transparent; border: 1px solid rgba(255, 255, 255, .1); color: var(--lateral-texto); border-radius: var(--raio-p); }
.btn-recolher:hover { background: rgba(255, 255, 255, .08); }
.lateral .rodape .btn-tema, .gaveta .btn-tema { width: 100%; display: flex; align-items: center; gap: 12px; justify-content: flex-start; background: transparent; border: 0; color: var(--lateral-texto); min-height: 36px; padding: 8px; }
.lateral .rodape button { display: flex; align-items: center; gap: 12px; }
.lateral { transition: width .2s; }
.casca { transition: grid-template-columns .2s; }
body.menu-recolhido { --larg-lateral: 72px; }
body.menu-recolhido .lateral { padding: 16px 12px; }
body.menu-recolhido .lateral .rot-menu, body.menu-recolhido .lateral .tit-grupo, body.menu-recolhido .lateral .rodape .nome, body.menu-recolhido .btn-tema span:last-child { display: none; }
body.menu-recolhido .lateral .marca-logo { padding: 0 0 12px; justify-content: center; }
body.menu-recolhido .lateral .marca-logo .logo-menu { width: 46px; }
body.menu-recolhido .linha-ferramentas { flex-direction: column; align-items: center; }
body.menu-recolhido .btn-buscar { justify-content: center; width: 44px; flex: none; padding: 0; }
body.menu-recolhido .lateral nav a, body.menu-recolhido .lateral .rodape button { justify-content: center; padding: 12px 0; position: relative; }
body.menu-recolhido .lateral nav a .selo { position: absolute; top: 2px; right: 2px; min-width: 16px; padding: 0 4px; font-size: 12px; line-height: 15px; margin: 0; }
body.menu-recolhido .grupo-menu + .grupo-menu { padding-top: 8px; }

/* ---------- barra de carregamento e esqueleto */
body::before { content: ''; position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 100; background: var(--marca); opacity: 0; transition: opacity .2s; }
body.ocupado::before { opacity: 1; animation: carga 1.2s ease-in-out infinite; }
@keyframes carga { 0% { left: 0; width: 0; } 50% { left: 20%; width: 50%; } 100% { left: 100%; width: 0; } }
.esqueleto-tela { display: grid; gap: 12px; margin-top: 16px; }
.esq-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 8px; }
.esq { border-radius: var(--raio-p); background: linear-gradient(90deg, var(--cinza-f) 25%, var(--borda) 50%, var(--cinza-f) 75%); background-size: 200% 100%; animation: brilho 1.3s linear infinite; }
.esq-bloco { height: 72px; border-radius: var(--raio); }
.esq-linha { height: 18px; }
@keyframes brilho { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---------- tela vazia */
.vazio-estado { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 40px 16px; border: 1px dashed var(--borda-forte); border-radius: var(--raio); background: var(--cartao); color: var(--suave); }
.vazio-estado p { margin: 0; max-width: 46ch; }
.ic-vazio { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--marca-2); color: var(--marca); }
.ic-vazio .ic { width: 22px; height: 22px; }

/* ---------- cabeçalho fixo das telas */
.cab-fixo { position: sticky; top: 0; z-index: 12; background: var(--fundo); margin: -24px -32px 12px; padding: 16px 32px 12px; border-bottom: 1px solid transparent; }
.cab-fixo > * { margin-bottom: 8px; }
.cab-fixo > :last-child { margin-bottom: 0; }
.cab-fixo > h1 { margin-bottom: 12px; }
.cab-fixo .busca-tela { margin: 0; }
@supports (animation-timeline: scroll()) {
  .cab-fixo { animation: sombra-cab linear both; animation-timeline: scroll(); animation-range: 0 40px; }
  @keyframes sombra-cab { to { border-bottom-color: var(--borda); box-shadow: 0 6px 16px -12px rgba(15, 23, 42, .35); } }
}

/* ---------- tabelas mais limpas */
.tabela-wrap { border-radius: 12px; }
th, td { padding: 12px 12px; }
th { font-size: 12px; letter-spacing: .06em; background: var(--cartao); border-bottom: 1px solid var(--borda-forte); }
tbody tr:nth-child(even):not([class*="st-"]) td { background: color-mix(in srgb, var(--cinza-f) 45%, transparent); }
tbody tr:hover td { box-shadow: inset 0 0 0 9999px color-mix(in srgb, var(--marca) 7%, transparent); }
td { font-variant-numeric: tabular-nums; }
tfoot td { background: var(--cinza-f); font-weight: 700; border-top: 1px solid var(--borda-forte); }
@media (hover: hover) and (pointer: fine) and (min-width: 641px) {
  tbody tr td.acoes-linha > * { opacity: .45; transition: opacity .15s; }
  tbody tr:hover td.acoes-linha > *, tbody tr:focus-within td.acoes-linha > * { opacity: 1; }
}

/* ---------- selos e ícones padronizados */
.etq { height: 22px; padding: 0 8px; gap: 4px; font-size: 12px; font-weight: 600; line-height: 1; border: 1px solid transparent; vertical-align: middle; }
.etq .ic { width: 13px; height: 13px; vertical-align: 0; }
.etq.ok { border-color: color-mix(in srgb, var(--ok) 25%, transparent); }
.etq.perigo { border-color: color-mix(in srgb, var(--perigo) 25%, transparent); }
.etq.aviso { border-color: color-mix(in srgb, var(--aviso) 25%, transparent); }
.etq.st::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.marca-ok { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ok-f); color: var(--ok); }
.marca-ok .ic { width: 14px; height: 14px; vertical-align: 0; }
.ic { width: 18px; height: 18px; }
button .ic { width: 16px; height: 16px; vertical-align: -3px; }

/* ---------- confirmações e avisos */
.dlg-confirma { width: min(440px, calc(100vw - 32px)); }
.confirma { display: flex; gap: 16px; align-items: flex-start; }
.confirma p { margin: 4px 0 0; line-height: 1.55; }
.ic-confirma { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--marca-2); color: var(--marca); }
.ic-confirma.perigo { background: var(--perigo-f); color: var(--perigo); }
button.perigo-cheio { background: var(--perigo); border-color: var(--perigo); color: #fff; }
button.perigo-cheio:hover { filter: brightness(1.08); }
.aviso-toast { display: flex; align-items: center; gap: 16px; border-radius: 12px; padding: 12px 12px 12px 16px; animation: entra-toast .2s ease-out; }
.aviso-toast.erro { background: var(--perigo); }
.acao-toast { background: transparent; border: 1px solid rgba(255, 255, 255, .35); color: #fff; min-height: 30px; padding: 2px 12px; font-weight: 600; }
.acao-toast:hover { background: rgba(255, 255, 255, .12); }
@keyframes entra-toast { from { opacity: 0; transform: translate(-50%, 8px); } }
html[data-tema="escuro"] .aviso-toast:not(.erro) { background: #e5e7eb; color: #0f172a; }
html[data-tema="escuro"] .aviso-toast:not(.erro) .acao-toast { color: #0f172a; border-color: rgba(15, 23, 42, .3); }

/* ---------- busca rápida (Ctrl+K) */
.dlg-busca { width: min(640px, calc(100vw - 24px)); }
.dlg-busca .corpo input[type=search] { width: 100%; min-height: 46px; font-size: 16px; }
.res-busca { margin-top: 12px; max-height: 60vh; overflow: auto; }
.grupo-busca + .grupo-busca { margin-top: 8px; }
.tit-busca { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--suave); padding: 8px 4px; }
.item-busca { display: flex; width: 100%; align-items: center; gap: 12px; text-align: left; justify-content: flex-start; padding: 8px 12px; background: transparent; border: 0; border-radius: var(--raio-p); min-height: 44px; font-weight: 400; }
.item-busca.ativo { background: var(--marca-2); }
.ic-busca { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--cinza-f); color: var(--marca); }
.txt-busca { display: flex; flex-direction: column; min-width: 0; }
.txt-busca > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- tela de login */
.login { max-width: none; min-height: 100vh; margin: 0; padding: 24px 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: radial-gradient(1200px 600px at 50% -10%, color-mix(in srgb, var(--marca) 35%, var(--lateral)) 0%, var(--lateral) 60%); }
.login > .logo-login { width: min(260px, 70vw); filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .25)); }
.login > p.suave { color: var(--lateral-texto); opacity: .85; margin: 0 0 8px; }
.login > .cartao { width: min(380px, 100%); padding: 24px; border-radius: 16px; box-shadow: 0 20px 50px rgba(0, 0, 0, .3); border: 0; }
.login > .alerta { max-width: 420px; }

/* ---------- celular */
@media (max-width: 640px) {
  h1 { font-size: 20px; }
  th, td { padding: 8px 12px; }
  .gaveta .tit-grupo { color: var(--lateral-texto); }
  .gaveta .grupo-menu + .grupo-menu { border-top: 1px solid rgba(255, 255, 255, .08); }
  .gaveta nav { display: block; }
}
@media (min-width: 1024px) and (max-width: 1200px) { body:not(.menu-recolhido) { --larg-lateral: 210px; } }
@media (max-width: 1023px) { .cab-fixo { top: var(--alt-topo, 64px); margin: -16px -16px 12px; padding: 12px 16px 8px; } }
/* login sobre fundo escuro: logo claro como no menu */
.login .logo-login svg g { stroke: #99f6e4; }
.login .logo-login svg path[fill="#111"] { fill: #ffffff; }
.login .logo-login svg text { fill: #fbcfe8; stroke: var(--lateral); }
.topo-cel .marca { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.topo-cel button { min-width: 40px; }

/* PJ x PF e impostos */
.grade.kpis-rel { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); margin-bottom: 12px; }
.config-imposto { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.config-imposto input { width: 90px; }
td .neg-txt, .neg-txt { color: var(--perigo); }
.pos-txt { color: var(--ok); }

/* ficha da clínica, lixeira e histórico do animal */
dialog.dlg-largo { width: min(1040px, calc(100vw - 24px)); }
.ficha h3 { font-size: 16px; margin: 16px 0 8px; }
.ficha .tabela-wrap { max-height: none; }
.lista-contatos { margin: 0; padding-left: 16px; display: grid; gap: 4px; font-size: 13px; }
.hist-animal { border: 1px solid var(--borda); border-radius: var(--raio-p); padding: 8px 12px; margin-bottom: 8px; background: var(--cartao); }
.hist-animal > summary { cursor: pointer; }
.linha-tempo { list-style: none; margin: 12px 0 2px; padding: 0 0 0 16px; border-left: 2px solid var(--borda-forte); display: grid; gap: 12px; }
.linha-tempo li { position: relative; display: grid; grid-template-columns: 86px 1fr; gap: 8px; padding: 4px 8px; border-radius: 6px; }
.linha-tempo li:hover { background: var(--marca-2); }
.linha-tempo li::before { content: ''; position: absolute; left: -21px; top: 10px; width: 10px; height: 10px; border-radius: 50%; background: var(--marca); border: 2px solid var(--cartao); }
.linha-tempo .dt { font-variant-numeric: tabular-nums; color: var(--suave); font-size: 13px; padding-top: 2px; }
@media (max-width: 640px) { .linha-tempo li { grid-template-columns: 1fr; gap: 0; } }

/* agenda: abas e calendário */
.abas-visao button { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; }
.titulo-cal { min-width: 170px; text-align: center; font-variant-numeric: tabular-nums; }
.cal { display: grid; gap: 12px; margin-top: 12px; }
.cal-semana { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-dia { grid-template-columns: 1fr; }
.dia-cal { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); padding: 8px; min-height: 140px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dia-cal.hoje { border-color: var(--marca); box-shadow: inset 0 3px 0 var(--marca); }
.cab-dia-cal { display: flex; flex-direction: column; gap: 0; padding: 2px 4px 8px; border-bottom: 1px solid var(--borda); }
.cal-semana .cab-dia-cal { cursor: pointer; }
.cal-dia .cab-dia-cal { flex-direction: row; justify-content: space-between; align-items: baseline; }
.ev-cal { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px; align-items: start; width: 100%; text-align: left; justify-content: stretch;
  padding: 8px 8px; border-radius: 8px; border: 1px solid var(--borda); border-left: 3px solid var(--borda-forte); background: var(--cartao); font-weight: 400; min-height: 0; font-size: 13px; }
.ev-cal:hover { border-color: var(--marca); }
.ev-cal .hora-cal { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--suave); }
.ev-cal .txt-cal { display: flex; flex-direction: column; min-width: 0; }
.ev-cal .txt-cal > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-cal .etq { grid-column: 2; justify-self: start; }
.cal-semana .ev-cal .etq { display: none; }
.ev-cal.st-pago { border-left-color: var(--ok); }
.ev-cal.st-receber { border-left-color: #f59e0b; background: var(--receber); }
.ev-cal.st-calote { border-left-color: var(--perigo); background: var(--calote); }
.ev-cal.st-cortesia { border-left-color: #94a3b8; background: var(--cinza-f); }
.ev-cal.ev-pendente { border-style: dashed; border-left-style: solid; border-left-color: var(--marca); background: transparent; color: var(--suave); }
.cal-dia .ev-cal { font-size: 14px; grid-template-columns: 56px minmax(0, 1fr) auto; }
.cal-dia .ev-cal .etq { grid-column: 3; grid-row: 1; }
.vazio-dia { margin: 4px; }
@media (max-width: 1100px) { .cal-semana { grid-template-columns: 1fr; } .cal-semana .dia-cal { min-height: 0; } .cal-semana .cab-dia-cal { flex-direction: row; justify-content: space-between; } }

/* ================================================= ajustes visuais (tipografia, cores e cartões) */
:root { --fundo: #f5f6f5; --cinza-f: #f1f3f2; --sombra: none; }
body { font-variant-numeric: tabular-nums; }

/* títulos: fonte do logo no título da tela e nas seções */
h1 { font-family: 'Dosis', var(--fonte); font-weight: 600; font-size: 26px; line-height: 1.2; letter-spacing: .005em; }
h2 { font-family: 'Dosis', var(--fonte); font-weight: 600; font-size: 20px; line-height: 1.25; letter-spacing: .005em; display: flex; align-items: center; gap: 8px; }
h3 { font-family: var(--fonte); font-weight: 600; font-size: 16px; }
h2 > .ic-titulo { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--marca-2); color: var(--marca); flex: none; }
h2 > .ic-titulo .ic { width: 16px; height: 16px; }
.cab-grupo h2, .cab-bloco h2 { font-size: 16px; }

/* negrito com regra: valores 700, nomes e rótulos 600 */
td.num, .valor, .valor-extrato, .saldo-mes strong, .linha-mes b, .rot-bh b, .linha-dica b { font-weight: 700; }
td b, .item-alerta .info b, .txt-cal b { font-weight: 600; }

/* itálico só para observações, dicas e comentários */
.obs, .ajuda, p.ajuda, .vazio-dia, .explica, .desc-extrato, .pct-bh, .lista-contatos .suave, td.quebra.pequeno { font-style: italic; }
.explica b, .ajuda b { font-style: normal; }

/* sublinhado só em links de texto */
a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
a:hover { text-decoration-color: currentColor; }
.lateral a, .gaveta a, .nav-cel a, a.cartao, a.cartao-mes, .indice-guia a, a:has(> button), .abas-meses a, .abas a, a.etq, .cab-dia-cal a { text-decoration: none; }

/* linhas da tabela: fundo branco + faixa colorida à esquerda */
tr.st-receber td, tr.st-calote td, tr.st-conferido td, tr.st-revisar td { background: transparent; }
tr.st-cortesia td { background: transparent; color: var(--fraco); }
tbody tr[class*="st-"] > td:first-child { box-shadow: inset 3px 0 0 var(--faixa, transparent); }
tr.st-receber { --faixa: #f59e0b; } tr.st-calote { --faixa: var(--perigo); } tr.st-cortesia { --faixa: #94a3b8; }
tr.st-conferido { --faixa: var(--ok); } tr.st-revisar { --faixa: #eab308; }
tr.st-revisar td { background: color-mix(in srgb, var(--revisar) 35%, transparent); }
tbody tr:hover td { box-shadow: inset 0 0 0 9999px color-mix(in srgb, var(--marca) 6%, transparent); }
tbody tr[class*="st-"]:hover > td:first-child { box-shadow: inset 3px 0 0 var(--faixa, transparent), inset 0 0 0 9999px color-mix(in srgb, var(--marca) 6%, transparent); }
.legenda .amostra { background: var(--cartao) !important; box-shadow: inset 3px 0 0 var(--faixa, var(--borda-forte)); border: 1px solid var(--borda); }
.legenda .amostra.st-receber { --faixa: #f59e0b; } .legenda .amostra.st-calote { --faixa: var(--perigo); } .legenda .amostra.st-cortesia { --faixa: #94a3b8; }
.legenda .amostra.st-conferido { --faixa: var(--ok); } .legenda .amostra.st-revisar { --faixa: #eab308; }
@media (max-width: 640px) {
  table.cartoes-cel tr.st-receber, table.cartoes-cel tr.st-calote, table.cartoes-cel tr.st-cortesia, table.cartoes-cel tr.st-conferido { background: var(--cartao); }
  table.cartoes-cel tr.st-revisar { background: color-mix(in srgb, var(--revisar) 35%, var(--cartao)); }
  tbody tr[class*="st-"] > td:first-child { box-shadow: none; }
}
.ev-cal.st-receber, .ev-cal.st-calote, .ev-cal.st-cortesia { background: var(--cartao); }

/* cor só onde importa: avisos com texto escuro, cor no ícone e na borda */
.alerta { color: var(--texto); border-left-width: 3px; }
.alerta > .ic { color: var(--aviso); }
.alerta.perigo > .ic { color: var(--perigo); }
.alerta.ok > .ic { color: var(--ok); }

/* cartões e sombras em dois níveis: cartões só com borda; janelas, menus e avisos com sombra */
.cartao, .tabela-wrap, .kpi { box-shadow: none; }
a.cartao:hover, .cartao.clicavel:hover, button.kpi-aba:hover { box-shadow: 0 4px 14px -6px rgba(15, 23, 42, .18); }
dialog, .aviso-toast, .painel-gaveta, .res-busca-flutuante, .dica-graf { box-shadow: var(--sombra-2); }

/* cartões de indicador */
.kpi { position: relative; padding: 16px; }
.kpi .rotulo { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--fraco); padding-right: 40px; }
.kpi .valor { margin-top: 8px; }
.kpi .ic-kpi { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--marca-2); color: var(--marca); }
.kpi .ic-kpi .ic { width: 16px; height: 16px; }
.kpi.neg .ic-kpi { background: var(--perigo-f); color: var(--perigo); }
.kpi .var { font-size: 12px; font-weight: 600; margin-top: 4px; }
.kpi .var .suave { font-weight: 400; }
.kpi.destaque { border-left: 3px solid var(--marca); }

/* números alinhados */
.valor, td, .rot-bh, .linha-mes, .saldo-mes, .kpi, .selo, .etq, .dt { font-variant-numeric: tabular-nums; }
.alerta.perigo, .alerta.ok { color: var(--texto); }
.grade.kpis { grid-template-columns: repeat(auto-fit, minmax(min(100%, 184px), 1fr)); }
.kpi .rotulo { white-space: normal; overflow: visible; line-height: 1.3; padding-right: 36px; min-height: 16px; }
/* cartões do mês a mês: sem texto vazando */
.cab-mes { flex-wrap: wrap; row-gap: 4px; }
.cab-mes .pequeno, .cab-mes b, .linha-mes span, .linha-mes b, .saldo-mes span { white-space: nowrap; }
.linha-mes, .saldo-mes { gap: 8px; }
.linha-mes b, .saldo-mes strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pe-mes .etq { max-width: 100%; }
@media (max-width: 640px) { .grade-meses { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } }

/* edição rápida, filtros salvos, CPF, duplicados e comparação de clínicas */
td.editavel { cursor: pointer; }
@media (hover: hover) { td.editavel:hover { outline: 1px dashed var(--borda-forte); outline-offset: -4px; } }
td.editavel input, td.editavel select { min-height: 32px; padding: 2px 8px; font-size: 13px; }
.filtros-salvos { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chip-filtro { display: inline-flex; align-items: center; border: 1px solid var(--borda); border-radius: 999px; background: var(--cartao); overflow: hidden; }
.chip-filtro button { border: 0; border-radius: 0; background: transparent; min-height: 30px; padding: 2px 10px; font-size: 13px; display: inline-flex; gap: 4px; align-items: center; }
.chip-filtro button.x { padding: 2px 8px; color: var(--fraco); border-left: 1px solid var(--borda); }
.chip-filtro button:hover { background: var(--marca-2); }
.dica-cpf { display: block; font-size: 12px; min-height: 16px; margin-top: 2px; color: var(--fraco); }
.dica-cpf.ruim { color: var(--perigo); } .dica-cpf.aviso { color: var(--aviso); } .dica-cpf.boa { color: var(--ok); }
.grupo-dup { margin-bottom: 12px; }
.item-dup { display: flex !important; flex-direction: row !important; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--borda); }
.item-dup:first-of-type { border-top: 0; }
.txt-dup { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.manter-dup { white-space: nowrap; font-size: 13px; color: var(--suave); }
.mini-barra { height: 4px; background: var(--fundo); border-radius: 2px; margin-top: 4px; overflow: hidden; max-width: 160px; }
.mini-barra span { display: block; height: 100%; background: var(--g-receita); }

/* modo discreto e tempo real */
.btn-discreto[aria-pressed="true"] { background: rgba(255, 255, 255, .16); }
.topo-cel .btn-discreto { background: transparent; border: 0; color: #fff; min-height: 44px; min-width: 40px; padding: 8px; }
body.discreto input[name="valor"], body.discreto input[name="valor_parcial"], body.discreto td.editavel input { filter: blur(5px); }
body.discreto input[name="valor"]:focus, body.discreto input[name="valor_parcial"]:focus, body.discreto td.editavel input:focus { filter: none; }
.aviso-rt { margin-bottom: 12px; }