/* Ritus Recovery · Commander Center
   DLS: estrutura e comportamento da referência Clay (pílulas, bordas finas, sem sombra,
   tipografia com peso) + identidade da Ritus medida no manual (MIV 2025):
   cobre #9D7257 · bege #CDCAC5 · petróleo #224B5B · sálvia #7C8D74 · grafite #1E1E1E.
   Regra: nenhum hexadecimal fora deste bloco de tokens. Nenhum font-size fora da escala. */

:root {
  /* Marca (fonte: Manual de Identidade Visual Ritus 2025, contagem de área nas 15 páginas) */
  --marca-cobre: #9D7257;
  --marca-bege: #CDCAC5;
  --marca-petroleo: #224B5B;
  --marca-salvia: #7C8D74;
  --marca-grafite: #1E1E1E;

  /* Superfícies e texto (claro) */
  --fundo: #FFFFFF;
  --superficie: #F6F5F3;
  --superficie-2: #EDEBE8;
  --borda: #E1DED9;
  --borda-forte: #CDCAC5;
  --borda-campo: #D5D2CC;
  --texto: #1E1E1E;
  --texto-2: #57534E;
  --texto-3: #8A857E;
  --destaque: #84603F;          /* cobre escurecido: 5,4:1 sobre branco (texto e links) */
  --destaque-suave: #F3ECE6;
  --primario: #1E1E1E;          /* botão principal: pílula grafite (padrão Clay) */
  --primario-texto: #FFFFFF;
  --selecionado: #224B5B;
  --selecionado-suave: #E6EEF0;
  --ok: #4D6446;
  --ok-suave: #EAEFE7;
  --atencao: #8A5A14;
  --atencao-suave: #F7EEDD;
  --perigo: #9B2F2F;
  --perigo-suave: #F6E5E3;
  --foco: #224B5B;
  --sobreposicao: rgba(30, 30, 30, 0.42);

  /* Cores de profissional na agenda (nomes de token, nunca hexadecimal no banco) */
  --prof-cobre: #9D7257;
  --prof-petroleo: #224B5B;
  --prof-salvia: #7C8D74;
  --prof-areia: #B9A58F;
  --prof-grafite: #57534E;

  /* Tipografia: escala fechada de 8 degraus */
  --fonte: 'Montserrat', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fonte-titulo: 'Cormorant Garamond', Georgia, serif;
  --t-1: 11px;
  --t-2: 12px;
  --t-3: 13px;
  --t-4: 14px;
  --t-5: 16px;
  --t-6: 20px;
  --t-7: 28px;
  --t-8: 40px;

  /* Espaço (base 4) */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 20px; --e-6: 24px; --e-8: 32px; --e-10: 40px; --e-12: 48px;

  /* Raios (Clay) */
  --r-chip: 4px;
  --r-campo: 8px;
  --r-cartao: 12px;
  --r-painel: 20px;
  --r-pilula: 999px;

  --menu-largura: 232px;
  /* Gráficos: paleta categórica validada (dataviz validate_palette: claro e escuro, todas as checagens) */
  --serie-1: #B5642E; --serie-2: #0E83A8; --serie-3: #4E9A4E; --serie-4: #A84D86; --serie-5: #B88A12; --serie-6: #6A6FC4;
  /* Sequencial (mapa de calor): um só matiz, cobre, do claro ao escuro */
  --calor-0: #F6F3EF; --calor-1: #F1DFCF; --calor-2: #E2BC9C; --calor-3: #CB9066; --calor-4: #A9653A; --calor-5: #7A4421;
  --grade-grafico: #ECE9E4;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fundo: #161616; --superficie: #1F1F1E; --superficie-2: #292826; --borda: #34322F; --borda-forte: #47443F; --borda-campo: #4A4742;
    --texto: #F2F0ED; --texto-2: #C4BFB8; --texto-3: #8F8A83; --destaque: #C9A288; --destaque-suave: #2C241E;
    --primario: #F2F0ED; --primario-texto: #161616; --selecionado: #8FB3C0; --selecionado-suave: #1C2A2F;
    --ok: #A6BB9E; --ok-suave: #222A20; --atencao: #E0B46B; --atencao-suave: #2E2617; --perigo: #E39A92; --perigo-suave: #321F1D;
    --foco: #8FB3C0; --sobreposicao: rgba(0, 0, 0, 0.6);
    --prof-cobre: #C9A288; --prof-petroleo: #8FB3C0; --prof-salvia: #A6BB9E; --prof-areia: #CDBBA5; --prof-grafite: #B5B0A9;
    --serie-1: #B5642E; --serie-2: #0E83A8; --serie-3: #4E9A4E; --serie-4: #A84D86; --serie-5: #B88A12; --serie-6: #6A6FC4;
    --calor-0: #222120; --calor-1: #3B2A1F; --calor-2: #5C3B25; --calor-3: #86542F; --calor-4: #B5733F; --calor-5: #E3A676;
    --grade-grafico: #2C2A27;
    color-scheme: dark;
  }
}
:root[data-tema="escuro"] {
  --fundo: #161616; --superficie: #1F1F1E; --superficie-2: #292826; --borda: #34322F; --borda-forte: #47443F; --borda-campo: #4A4742;
  --texto: #F2F0ED; --texto-2: #C4BFB8; --texto-3: #8F8A83; --destaque: #C9A288; --destaque-suave: #2C241E;
  --primario: #F2F0ED; --primario-texto: #161616; --selecionado: #8FB3C0; --selecionado-suave: #1C2A2F;
  --ok: #A6BB9E; --ok-suave: #222A20; --atencao: #E0B46B; --atencao-suave: #2E2617; --perigo: #E39A92; --perigo-suave: #321F1D;
  --foco: #8FB3C0; --sobreposicao: rgba(0, 0, 0, 0.6);
  --prof-cobre: #C9A288; --prof-petroleo: #8FB3C0; --prof-salvia: #A6BB9E; --prof-areia: #CDBBA5; --prof-grafite: #B5B0A9;
  --serie-1: #B5642E; --serie-2: #0E83A8; --serie-3: #4E9A4E; --serie-4: #A84D86; --serie-5: #B88A12; --serie-6: #6A6FC4;
  --calor-0: #222120; --calor-1: #3B2A1F; --calor-2: #5C3B25; --calor-3: #86542F; --calor-4: #B5733F; --calor-5: #E3A676;
  --grade-grafico: #2C2A27;
  color-scheme: dark;
}

/* ───────── Base ───────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: hidden; overflow-x: clip; }
body {
  margin: 0; background: var(--fundo); color: var(--texto);
  font-family: var(--fonte); font-size: var(--t-4); line-height: 1.5; -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: var(--destaque); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.numero { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mudo { color: var(--texto-2); }
.fraco { color: var(--texto-3); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ───────── Estrutura ───────── */
.app { display: grid; grid-template-columns: var(--menu-largura) minmax(0, 1fr); min-height: 100vh; }
.menu {
  position: sticky; top: 0; height: 100vh; overflow-y: auto; border-right: 1px solid var(--borda);
  padding: var(--e-6) var(--e-4); display: flex; flex-direction: column; gap: var(--e-6); background: var(--fundo);
}
.menu .marca img { width: 148px; height: auto; display: block; }
.menu .marca .tema-escuro { display: none; }
:root[data-tema="escuro"] .menu .marca .tema-claro { display: none; }
:root[data-tema="escuro"] .menu .marca .tema-escuro { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .menu .marca .tema-claro { display: none; }
  :root:not([data-tema="claro"]) .menu .marca .tema-escuro { display: block; }
}
.menu .marca small { display: block; margin-top: var(--e-2); color: var(--texto-3); font-size: var(--t-2); }
.menu nav { display: flex; flex-direction: column; gap: 2px; }
.menu .grupo { margin-top: var(--e-4); font-size: var(--t-2); color: var(--texto-3); padding: 0 var(--e-3) var(--e-1); }
.menu a.item {
  display: flex; align-items: center; gap: var(--e-3); padding: 9px var(--e-3); border-radius: var(--r-campo);
  color: var(--texto-2); font-weight: 500; min-height: 38px;
}
.menu a.item i { font-size: var(--t-6); }
.menu a.item:hover { background: var(--superficie); text-decoration: none; color: var(--texto); }
.menu a.item.ativo { background: var(--superficie-2); color: var(--texto); }
.menu a.item.ativo i { color: var(--destaque); }
.menu a.item .contador { margin-left: auto; font-size: var(--t-2); background: var(--atencao-suave); color: var(--atencao); border-radius: var(--r-pilula); padding: 0 8px; }
.menu .futuro { display: flex; align-items: center; gap: var(--e-3); padding: 9px var(--e-3); color: var(--texto-3); }
.menu .futuro span { margin-left: auto; font-size: var(--t-1); border: 1px solid var(--borda); border-radius: var(--r-pilula); padding: 0 8px; }
.menu .rodape { margin-top: auto; border-top: 1px solid var(--borda); padding-top: var(--e-4); display: grid; gap: var(--e-2); }
.menu .rodape .quem { font-size: var(--t-3); font-weight: 600; }
.menu .rodape .quem small { display: block; font-weight: 400; color: var(--texto-3); }

.topo-movel { display: none; }
.conteudo { padding: var(--e-8) var(--e-10) var(--e-12); min-width: 0; max-width: 1280px; width: 100%; }

.cabecalho { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--e-4); margin-bottom: var(--e-8); }
.cabecalho h1 { font-family: var(--fonte-titulo); font-size: var(--t-8); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; }
.cabecalho p { color: var(--texto-2); margin-top: var(--e-2); max-width: 64ch; }
.cabecalho .acoes { display: flex; flex-wrap: wrap; gap: var(--e-2); }

@media (max-width: 960px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .menu { position: fixed; inset: 0 auto 0 0; width: min(300px, 86vw); z-index: 40; transform: translateX(-100%); transition: transform .2s ease; }
  .app.menu-aberto .menu { transform: none; }
  .app.menu-aberto::after { content: ''; position: fixed; inset: 0; background: var(--sobreposicao); z-index: 30; }
  .topo-movel {
    display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); position: sticky; top: 0; z-index: 20;
    padding: var(--e-3) var(--e-4); background: var(--fundo); border-bottom: 1px solid var(--borda);
  }
  .topo-movel img { height: 30px; width: auto; }
  .conteudo { padding: var(--e-5) var(--e-4) var(--e-10); }
  .cabecalho { margin-bottom: var(--e-5); }
  .cabecalho h1 { font-size: var(--t-7); }
}

/* ───────── Botões (pílulas, padrão Clay) ───────── */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2); min-height: 38px;
  padding: 8px 16px; border-radius: var(--r-pilula); border: 1px solid var(--borda-forte); background: var(--fundo);
  font-size: var(--t-4); font-weight: 500; cursor: pointer; white-space: nowrap; text-decoration: none; color: var(--texto);
}
.botao:hover { background: var(--superficie); text-decoration: none; }
.botao i { font-size: var(--t-5); }
.botao.principal { background: var(--primario); color: var(--primario-texto); border-color: var(--primario); }
.botao.principal:hover { opacity: .88; background: var(--primario); }
.botao.perigo { color: var(--perigo); border-color: var(--perigo); }
.botao.fantasma { border-color: transparent; background: transparent; }
.botao.fantasma:hover { background: var(--superficie); }
.botao.pequeno { min-height: 34px; padding: 4px 12px; font-size: var(--t-3); }
.botao.icone { width: 38px; padding: 0; }
.botao.icone.pequeno { width: 34px; }
.botao[disabled] { opacity: .45; cursor: not-allowed; }
.botao.whatsapp i { color: var(--ok); }

/* ───────── Abas (tab pill) ───────── */
.abas { display: flex; flex-wrap: wrap; gap: var(--e-1); padding: 3px; border: 1px solid var(--borda); border-radius: var(--r-cartao); width: fit-content; max-width: 100%; }
.abas > * { flex: 0 0 auto; }
.abas button { border: 0; background: transparent; border-radius: var(--r-pilula); padding: 6px 14px; font-size: var(--t-3); font-weight: 500; cursor: pointer; color: var(--texto-2); min-height: 34px; }
.abas button.ativa { background: var(--primario); color: var(--primario-texto); }

/* ───────── Cartões e blocos ───────── */
.grade { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.grade.duas { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.cartao { border: 1px solid var(--borda); border-radius: var(--r-cartao); padding: var(--e-5); background: var(--fundo); min-width: 0; }
.cartao.suave { background: var(--superficie); border-color: transparent; }
.painel { border: 1px solid var(--borda); border-radius: var(--r-painel); padding: var(--e-6); min-width: 0; }
.bloco { margin-top: var(--e-8); }
.bloco > h2, .titulo-bloco { font-size: var(--t-6); font-weight: 600; margin-bottom: var(--e-4); display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-3); flex-wrap: wrap; }
.titulo-bloco small, .bloco > h2 small { font-size: var(--t-3); font-weight: 400; color: var(--texto-3); }

.kpi { display: grid; gap: var(--e-1); }
.kpi .rotulo { font-size: var(--t-3); color: var(--texto-2); }
.kpi .valor { font-size: var(--t-7); font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.15; overflow-wrap: anywhere; }
.kpi .nota { font-size: var(--t-2); color: var(--texto-3); }

/* ───────── Chips de status ───────── */
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--r-chip); font-size: var(--t-2); font-weight: 500; background: var(--superficie-2); color: var(--texto-2); white-space: nowrap; }
.chip.ok { background: var(--ok-suave); color: var(--ok); }
.chip.atencao { background: var(--atencao-suave); color: var(--atencao); }
.chip.perigo { background: var(--perigo-suave); color: var(--perigo); }
.chip.marca { background: var(--destaque-suave); color: var(--destaque); }
.chip.info { background: var(--selecionado-suave); color: var(--selecionado); }

/* ───────── Estados de honestidade ───────── */
.estado { display: inline-flex; align-items: center; gap: 4px; color: var(--texto-3); font-size: var(--t-3); }
.estado-vazio { display: grid; gap: var(--e-1); padding: var(--e-8) var(--e-4); text-align: center; color: var(--texto-2); border: 1px dashed var(--borda-forte); border-radius: var(--r-cartao); }
.estado-vazio span { font-size: var(--t-3); color: var(--texto-3); }
.selo-parcial { white-space: nowrap; margin-left: 6px; font-size: var(--t-1); padding: 1px 6px; border-radius: var(--r-chip); background: var(--atencao-suave); color: var(--atencao); vertical-align: middle; }
.bloco-naolido { border: 1px dashed var(--atencao); background: var(--atencao-suave); border-radius: var(--r-cartao); padding: var(--e-5); }
.bloco-naolido h3 { font-size: var(--t-5); margin-bottom: var(--e-2); }
.bloco-naolido .o-que-fazer { margin-top: var(--e-2); font-weight: 500; }
.ressalva { display: flex; gap: var(--e-3); align-items: flex-start; padding: var(--e-3) var(--e-4); border-radius: var(--r-cartao); background: var(--superficie); color: var(--texto-2); font-size: var(--t-3); margin-bottom: var(--e-4); }
.ressalva i { font-size: var(--t-6); color: var(--destaque); flex: 0 0 auto; }
.ressalva.atencao { background: var(--atencao-suave); color: var(--atencao); }
.ressalva.atencao i { color: var(--atencao); }

/* ───────── Tabelas: sem rolagem lateral; cabem na largura e viram cartões em telas menores ───────── */
.tabela-envolve { border: 1px solid var(--borda); border-radius: var(--r-cartao); overflow: hidden; max-width: 100%; container-type: inline-size; }
table.tabela { width: 100%; border-collapse: collapse; font-size: var(--t-3); }
.tabela th { text-align: left; font-weight: 500; color: var(--texto-3); padding: 10px var(--e-3); border-bottom: 1px solid var(--borda); background: var(--superficie); }
.tabela td { padding: 12px var(--e-3); border-bottom: 1px solid var(--borda); vertical-align: top; overflow-wrap: break-word; }
.tabela th:first-child, .tabela td:first-child { padding-left: var(--e-4); }
.tabela th:last-child, .tabela td:last-child { padding-right: var(--e-4); }
.tabela tr:last-child td { border-bottom: 0; }
.tabela tr.clicavel { cursor: pointer; }
.tabela tr.clicavel:hover td { background: var(--superficie); }
.tabela .dir { text-align: right; }
.tabela th button.ordenar { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; font: inherit; color: inherit; border-radius: var(--r-chip); }
.tabela th button.ordenar:hover, .tabela th button.ordenar.ativo { color: var(--texto); }
.tabela th button.ordenar:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.tabela th button.ordenar i { font-size: var(--t-2); opacity: .7; }
.tabela th.dir button.ordenar { flex-direction: row-reverse; }
.tabela td.dir { font-variant-numeric: tabular-nums; overflow-wrap: normal; }
.tabela .botao { text-align: center; }
.tabela .chip { white-space: normal; }
.tabela td > .botao + .botao, .tabela td > .botao + a, .tabela td > a + .botao { margin-top: var(--e-1); }
.tabela td:has(> .botao) > .botao { display: flex; width: 100%; justify-content: center; }
@container (max-width: 820px) {
  .tabela thead { display: none; }
  .tabela, .tabela tbody, .tabela tr, .tabela td { display: block; width: 100%; }
  .tabela tr { padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--borda); }
  .tabela tr:last-child { border-bottom: 0; }
  .tabela td, .tabela th:first-child, .tabela td:first-child, .tabela th:last-child, .tabela td:last-child { border: 0; padding: 3px 0; }
  .tabela td { position: relative; text-align: left; overflow-wrap: anywhere; }
  .tabela td:not(:first-child) { padding-left: 132px; }
  .tabela td::before { content: attr(data-label); position: absolute; left: 0; top: 5px; width: 120px; color: var(--texto-3); font-size: var(--t-2); line-height: 1.3; }
  .tabela td:first-child { font-weight: 600; font-size: var(--t-4); padding-bottom: var(--e-1); }
  .tabela td:first-child::before, .tabela td[data-label=""]::before { content: none; }
  .tabela td[data-label=""] { padding-left: 0; }
  .tabela td.dir { text-align: left; }
  .tabela td[data-label=""]:has(> .botao) { display: flex; flex-wrap: wrap; gap: var(--e-2); padding-top: var(--e-2); padding-left: 0; }
  .tabela td:has(> .botao) > .botao { display: inline-flex; width: auto; margin: 0; }
  .tabela td:empty { display: none; }
}

/* ───────── Formulários ───────── */
.form { display: grid; gap: var(--e-4); }
.linha-form { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.campo { display: grid; gap: 6px; min-width: 0; }
.campo > label, .campo > .rotulo { font-size: var(--t-3); font-weight: 500; color: var(--texto-2); }
.campo .obrig { color: var(--destaque); }
.campo .ajuda { font-size: var(--t-2); color: var(--texto-3); }
.campo .erro-campo { font-size: var(--t-2); color: var(--perigo); }
input.entrada, select.entrada, textarea.entrada {
  width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid var(--borda-campo); border-radius: var(--r-campo);
  background: var(--fundo); font-size: var(--t-4);
}
textarea.entrada { min-height: 84px; resize: vertical; }
.entrada:focus { outline: 2px solid var(--foco); outline-offset: 0; border-color: transparent; }
.entrada[aria-invalid="true"] { border-color: var(--perigo); }
.prefixo { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; border: 1px solid var(--borda-campo); border-radius: var(--r-campo); overflow: hidden; }
.prefixo > span { padding: 0 10px; color: var(--texto-3); background: var(--superficie); align-self: stretch; display: grid; place-items: center; font-size: var(--t-3); }
.prefixo > input { border: 0; border-radius: 0; }
.opcoes { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.opcao { position: relative; }
.opcao input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.opcao span { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 14px; border: 1px solid var(--borda-campo); border-radius: var(--r-pilula); font-size: var(--t-3); font-weight: 500; cursor: pointer; }
.opcao input:checked + span { background: var(--primario); color: var(--primario-texto); border-color: var(--primario); }
.opcao input:focus-visible + span { outline: 2px solid var(--foco); outline-offset: 2px; }
.opcao input:disabled + span { opacity: .45; cursor: not-allowed; }
.alternar { display: flex; align-items: center; gap: var(--e-3); cursor: pointer; font-weight: 500; min-height: 34px; }
.alternar input { width: 18px; height: 18px; accent-color: var(--selecionado); }
.busca { position: relative; }
.busca i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--texto-3); }
.busca input { padding-left: 36px; }
.filtros { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; margin-bottom: var(--e-4); }
.filtros > .busca { flex: 1 1 240px; }

/* ───────── Modal ───────── */
.janela-fundo { position: fixed; inset: 0; background: var(--sobreposicao); z-index: 60; display: grid; place-items: center; padding: var(--e-4); overflow-y: auto; }
.janela { background: var(--fundo); border-radius: var(--r-painel); width: min(640px, 100%); max-height: calc(100vh - 32px); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.janela.largo { width: min(860px, 100%); }
.janela header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e-4); padding: var(--e-6) var(--e-6) var(--e-3); }
.janela header h2 { font-size: var(--t-6); }
.janela header p { color: var(--texto-2); font-size: var(--t-3); margin-top: 2px; }
.janela .corpo { padding: var(--e-2) var(--e-6) var(--e-4); overflow-y: auto; }
.janela footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--e-2); padding: var(--e-4) var(--e-6) var(--e-6); border-top: 1px solid var(--borda); }
.janela .erro-geral { margin-top: var(--e-3); padding: var(--e-3) var(--e-4); border-radius: var(--r-campo); background: var(--perigo-suave); color: var(--perigo); font-size: var(--t-3); }
.janela .erro-geral ul { margin: var(--e-1) 0 0; padding-left: var(--e-5); }
@media (max-width: 600px) {
  .janela-fundo { padding: 0; place-items: end stretch; }
  .janela, .janela.largo { width: 100%; border-radius: var(--r-painel) var(--r-painel) 0 0; max-height: 94vh; }
  .janela header, .janela .corpo, .janela footer { padding-left: var(--e-4); padding-right: var(--e-4); }
  .janela footer .botao { flex: 1 1 auto; }
}

/* ───────── Aviso (toast) ───────── */
.avisos { position: fixed; bottom: var(--e-6); left: 50%; transform: translateX(-50%); display: grid; gap: var(--e-2); z-index: 80; width: max-content; max-width: calc(100vw - 32px); }
.aviso { background: var(--primario); color: var(--primario-texto); padding: 10px 18px; border-radius: var(--r-pilula); font-size: var(--t-3); font-weight: 500; }
.aviso.erro { background: var(--perigo); color: var(--primario-texto); }

/* ───────── Lista de itens (linhas) ───────── */
.lista { display: grid; border: 1px solid var(--borda); border-radius: var(--r-cartao); }
.lista > * { padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--borda); min-width: 0; }
.lista > *:last-child { border-bottom: 0; }
.linha { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e-3); align-items: center; }
.linha .titulo { font-weight: 600; overflow-wrap: anywhere; }
.linha .sub { font-size: var(--t-3); color: var(--texto-2); overflow-wrap: anywhere; }
.linha .acoes { display: flex; gap: var(--e-1); flex-wrap: wrap; justify-content: flex-end; }

/* ───────── Hoje: linha do tempo do dia ───────── */
.dia { display: grid; gap: var(--e-2); }
.horario { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: var(--e-4); align-items: center; padding: var(--e-3) var(--e-4); border: 1px solid var(--borda); border-radius: var(--r-cartao); }
.horario .hora { font-weight: 600; font-variant-numeric: tabular-nums; }
.horario .hora small { display: block; font-weight: 400; color: var(--texto-3); font-size: var(--t-2); }
.horario.realizado { background: var(--superficie); }
.horario.realizado .hora, .horario.realizado .titulo { color: var(--texto-2); }
@media (max-width: 600px) {
  .horario { grid-template-columns: 52px minmax(0, 1fr); }
  .horario .acoes { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ───────── Agenda ───────── */
.agenda-barra { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; justify-content: space-between; margin-bottom: var(--e-4); }
.agenda-barra .periodo { display: flex; align-items: center; gap: var(--e-2); }
.agenda-barra .periodo strong { font-size: var(--t-5); min-width: 0; }
.agenda-grade { border: 1px solid var(--borda); border-radius: var(--r-cartao); overflow: hidden; }
.agenda-tabela { display: grid; min-width: 0; }
.agenda-cab { display: grid; position: sticky; top: 0; background: var(--fundo); z-index: 2; border-bottom: 1px solid var(--borda); }
.agenda-cab > div { padding: var(--e-3); font-size: var(--t-3); font-weight: 600; border-left: 1px solid var(--borda); }
.agenda-cab > div:first-child { border-left: 0; }
.agenda-cab .hoje { color: var(--destaque); }
.agenda-corpo { display: grid; position: relative; }
.agenda-horas { position: relative; }
.agenda-horas span { position: absolute; right: 8px; font-size: var(--t-1); color: var(--texto-3); transform: translateY(-50%); font-variant-numeric: tabular-nums; }
.agenda-col { position: relative; border-left: 1px solid var(--borda); }
.agenda-col .fora { position: absolute; left: 0; right: 0; background: repeating-linear-gradient(-45deg, var(--superficie), var(--superficie) 6px, transparent 6px, transparent 12px); }
.agenda-col .linha-hora { position: absolute; left: 0; right: 0; border-top: 1px solid var(--borda); }
.agenda-col .vago { position: absolute; left: 0; right: 0; border: 0; background: transparent; cursor: pointer; }
.agenda-col .vago:hover { background: var(--destaque-suave); }
.evento {
  position: absolute; border-radius: var(--r-campo); padding: 4px 6px; font-size: var(--t-2); line-height: 1.3; overflow: hidden;
  border: 1px solid var(--borda-forte); border-left: 3px solid var(--cor-prof, var(--prof-cobre)); background: var(--fundo); cursor: pointer; text-align: left;
}
.evento strong { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.evento span { display: block; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.evento.realizado { background: var(--superficie); }
.evento.falta, .evento.cancelado { opacity: .55; text-decoration: line-through; }
.evento.bloqueio { background: var(--superficie-2); border-left-color: var(--texto-3); cursor: default; }
.agora { position: absolute; left: 0; right: 0; border-top: 2px solid var(--destaque); z-index: 1; pointer-events: none; }
.legenda { display: flex; flex-wrap: wrap; gap: var(--e-3); font-size: var(--t-2); color: var(--texto-2); margin-top: var(--e-3); }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda i.cor { width: 10px; height: 10px; border-radius: 2px; background: var(--cor-prof); display: inline-block; }
.agenda-lista { display: none; }
@media (max-width: 720px) {
  .agenda-grade { display: none; }
  .agenda-lista { display: grid; gap: var(--e-5); }
}

/* ───────── CRM: ficha do paciente ───────── */
.ficha-topo { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--e-6); align-items: center; margin-bottom: var(--e-8); }
.ficha-topo h1 { font-family: var(--fonte-titulo); font-size: var(--t-8); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.ficha-topo .meta { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); margin-top: var(--e-2); color: var(--texto-2); font-size: var(--t-3); }
.ficha-topo .meta span { display: inline-flex; align-items: center; gap: 4px; }
.ficha-topo .acoes { display: flex; flex-wrap: wrap; gap: var(--e-2); justify-content: flex-end; }
@media (max-width: 760px) {
  .ficha-topo { grid-template-columns: auto minmax(0, 1fr); gap: var(--e-4); }
  .ficha-topo .acoes { grid-column: 1 / -1; justify-content: flex-start; }
  .ficha-topo h1 { font-size: var(--t-7); }
}

/* O arco: o símbolo da marca virou o indicador de ritmo do cliente */
.arco { position: relative; width: 96px; height: 96px; flex: 0 0 auto; }
.arco svg { width: 100%; height: 100%; display: block; }
.arco .trilha { stroke: var(--borda); }
.arco .progresso { stroke: var(--marca-cobre); }
.arco.risco .progresso { stroke: var(--atencao); }
.arco.ok .progresso { stroke: var(--marca-salvia); }
.arco .centro { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.arco .centro strong { font-family: var(--fonte-titulo); font-size: var(--t-7); line-height: 1; }
.arco .centro small { font-size: var(--t-1); color: var(--texto-3); margin-top: -12px; }
@media (max-width: 760px) { .arco { width: 72px; height: 72px; } .arco .centro strong { font-size: var(--t-6); } }

.ficha-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: var(--e-8); align-items: start; }
@media (max-width: 1100px) { .ficha-grade { grid-template-columns: minmax(0, 1fr); } }

.timeline { position: relative; display: grid; gap: 0; }
.timeline .mes { font-size: var(--t-3); font-weight: 600; color: var(--texto-3); padding: var(--e-4) 0 var(--e-2) 28px; }
.evento-t { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e-3); padding: var(--e-3) 0 var(--e-3) 28px; border-left: 1px solid var(--borda); margin-left: 7px; }
.evento-t::before { content: ''; position: absolute; left: -6px; top: 18px; width: 11px; height: 11px; border-radius: 50%; background: var(--fundo); border: 2px solid var(--marca-cobre); }
.evento-t.venda::before { background: var(--marca-cobre); }
.evento-t.falta::before, .evento-t.cancelado::before { border-color: var(--texto-3); }
.evento-t.agendado::before, .evento-t.confirmado::before { border-style: dashed; border-color: var(--selecionado); }
.evento-t.nota::before { border-color: var(--marca-salvia); }
.evento-t .quando { font-size: var(--t-2); color: var(--texto-3); }
.evento-t .oque { font-weight: 600; overflow-wrap: anywhere; }
.evento-t .detalhe { font-size: var(--t-3); color: var(--texto-2); overflow-wrap: anywhere; }
.evento-t .valor { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.evento-t .valor small { display: block; font-weight: 400; color: var(--texto-3); font-size: var(--t-2); }

.barra-servico { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--e-3); font-size: var(--t-3); }
.barra-servico .trilho { grid-column: 1 / -1; height: 6px; border-radius: var(--r-pilula); background: var(--superficie-2); overflow: hidden; }
.barra-servico .trilho div { height: 100%; background: var(--marca-cobre); border-radius: var(--r-pilula); }

.nota-item { padding: var(--e-3) var(--e-4); border-radius: var(--r-cartao); background: var(--superficie); display: grid; gap: var(--e-1); }
.nota-item.alerta { background: var(--atencao-suave); }
.nota-item .cab { display: flex; justify-content: space-between; gap: var(--e-2); font-size: var(--t-2); color: var(--texto-3); }
.nota-item p { overflow-wrap: anywhere; white-space: pre-wrap; }

/* ───────── Finalizar atendimento ───────── */
.servico-fim { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e-3); align-items: center; padding: var(--e-3) var(--e-4); border: 1px solid var(--borda); border-radius: var(--r-cartao); }
.servico-fim select { max-width: 280px; }
@media (max-width: 600px) { .servico-fim { grid-template-columns: minmax(0, 1fr); } .servico-fim select { max-width: none; } }
.resumo-valor { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e-2) var(--e-4); padding: var(--e-4); border-radius: var(--r-cartao); background: var(--superficie); font-size: var(--t-4); }
.resumo-valor .total { font-weight: 600; font-size: var(--t-5); }
.resumo-valor .numero { text-align: right; }

/* ───────── Entrar ───────── */
.entrar { min-height: 100vh; display: grid; place-items: center; padding: var(--e-6); background: var(--superficie); }
.entrar .caixa { width: min(420px, 100%); background: var(--fundo); border-radius: var(--r-painel); padding: var(--e-10) var(--e-8); display: grid; gap: var(--e-6); text-align: center; justify-items: center; }
.entrar .caixa img { width: 96px; height: auto; }
.entrar h1 { font-family: var(--fonte-titulo); font-size: var(--t-8); font-weight: 600; line-height: 1; }
.entrar p { color: var(--texto-2); }
.entrar .erro { background: var(--perigo-suave); color: var(--perigo); padding: var(--e-3) var(--e-4); border-radius: var(--r-campo); font-size: var(--t-3); }
.carregando { padding: var(--e-12); text-align: center; color: var(--texto-3); }

/* utilidades de espaçamento usadas pelas telas */
.mt-2 { margin-top: var(--e-2); } .mt-4 { margin-top: var(--e-4); } .mt-6 { margin-top: var(--e-6); }
.pilha { display: grid; gap: var(--e-3); }
.pilha.larga { gap: var(--e-6); }
.entre { display: flex; justify-content: space-between; align-items: center; gap: var(--e-3); flex-wrap: wrap; }
@media (max-width: 600px) { .avisos { top: var(--e-4); bottom: auto; } }

/* Calendário de seleção de dias (bloqueio de agenda) */
.mini-cal { display: grid; gap: var(--e-2); border: 1px solid var(--borda); border-radius: var(--r-cartao); padding: var(--e-3); }
.mini-cal-grade { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--e-1); text-align: center; font-size: var(--t-3); }
.mini-cal-grade button { min-height: 36px; border: 1px solid transparent; border-radius: var(--r-campo); background: var(--superficie); cursor: pointer; font-variant-numeric: tabular-nums; }
.mini-cal-grade button:hover { border-color: var(--borda-forte); }
.mini-cal-grade button.marcado { background: var(--primario); color: var(--primario-texto); }

/* ───────── Gráficos ───────── */
.grafico { width: 100%; display: block; overflow: visible; }
.grafico text { font-family: var(--fonte); font-size: var(--t-1); fill: var(--texto-3); }
.grafico .rotulo-dado { fill: var(--texto-2); font-size: var(--t-2); }
.grafico .eixo { stroke: var(--borda-forte); stroke-width: 1; }
.grafico .grade { stroke: var(--grade-grafico); stroke-width: 1; }
.grafico .linha { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.grafico .alvo { fill: transparent; cursor: crosshair; }
.legenda-grafico { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); font-size: var(--t-2); color: var(--texto-2); margin-bottom: var(--e-3); }
.legenda-grafico span { display: inline-flex; align-items: center; gap: 6px; }
.legenda-grafico i { width: 12px; height: 3px; border-radius: 2px; display: inline-block; }
.barras-grupo { display: grid; gap: var(--e-4); }
.grupo-barra { display: grid; gap: 4px; }
.grupo-barra .nome { font-size: var(--t-3); font-weight: 500; overflow-wrap: anywhere; }
.linha-barra .mes { color: var(--texto-3); }
.linha-barra { display: grid; grid-template-columns: 48px minmax(0, 1fr) minmax(0, 170px); gap: var(--e-3); align-items: center; font-size: var(--t-2); color: var(--texto-2); }
.linha-barra .trilho { height: 10px; border-radius: 0 4px 4px 0; background: var(--superficie-2); overflow: hidden; }
.linha-barra .trilho > div { height: 100%; border-radius: 0 4px 4px 0; }
@media (max-width: 600px) { .linha-barra { grid-template-columns: 44px minmax(0, 1fr) auto; } }
.faixa { display: flex; gap: 2px; height: 28px; border-radius: var(--r-campo); overflow: hidden; }
.faixa > div { min-width: 3px; }
.spark { width: 100%; height: 32px; display: block; margin-top: var(--e-2); }
.barras { display: grid; gap: var(--e-3); }
.barra { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px var(--e-3); font-size: var(--t-3); }
.barra .nome { overflow-wrap: anywhere; }
.barra .val { font-variant-numeric: tabular-nums; text-align: right; color: var(--texto-2); }
.barra .val strong { color: var(--texto); }
.barra .trilho { grid-column: 1 / -1; height: 8px; border-radius: var(--r-pilula); background: var(--superficie-2); overflow: hidden; display: flex; gap: 2px; }
.barra .trilho > div { height: 100%; border-radius: 0 4px 4px 0; min-width: 0; }
.dica { position: fixed; z-index: 90; pointer-events: none; background: var(--primario); color: var(--primario-texto); padding: 6px 10px; border-radius: var(--r-campo); font-size: var(--t-2); max-width: calc(100vw - 32px); line-height: 1.4; }
.calor { border-collapse: separate; border-spacing: 2px; font-size: var(--t-2); width: 100%; }
.calor th { font-weight: 500; color: var(--texto-3); padding: 2px 4px; text-align: center; }
.calor th.dia { text-align: left; white-space: nowrap; }
.calor td { height: 30px; min-width: 0; border-radius: 4px; text-align: center; font-variant-numeric: tabular-nums; color: var(--texto); }
.calor td.q4, .calor td.q5 { color: var(--primario-texto); }
.calor-caixa { container-type: inline-size; }
.calor.vertical { display: none; }
@container (max-width: 600px) { .calor.horizontal { display: none; } .calor.vertical { display: table; } }
.calor-escala { display: flex; align-items: center; gap: 4px; font-size: var(--t-2); color: var(--texto-3); margin-top: var(--e-2); }
.calor-escala i { width: 18px; height: 10px; border-radius: 2px; display: inline-block; }
.var { font-size: var(--t-2); font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 2px; }
.var.sobe { color: var(--ok); }
.var.desce { color: var(--perigo); }
.comparacoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: var(--e-2); margin-top: var(--e-2); }
.comparacoes > div { font-size: var(--t-2); color: var(--texto-3); }
.periodo-barra { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; justify-content: space-between; margin-bottom: var(--e-5); }
.oportunidade { display: grid; gap: var(--e-3); padding: var(--e-4) var(--e-5); border: 1px solid var(--borda); border-radius: var(--r-cartao); }
.oportunidade .msg { background: var(--superficie); border-radius: var(--r-campo); padding: var(--e-3) var(--e-4); white-space: pre-wrap; font-size: var(--t-3); }
.oportunidade .msg.previa { margin: 0; color: var(--texto-2); }
.oportunidade .msg.previa span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.oportunidade button.chip { border: 0; cursor: pointer; font: inherit; font-size: var(--t-2); }
.oportunidade button.chip:hover { background: var(--borda); }
.oportunidade .msg[hidden] { display: none; }
.paginacao { display: flex; flex-wrap: wrap; gap: var(--e-1); align-items: center; justify-content: center; margin-top: var(--e-5); }
.paginacao .botao { min-width: 38px; justify-content: center; }
.oportunidade textarea.msg { width: 100%; border: 1px solid var(--borda-campo); min-height: 110px; resize: vertical; font: inherit; font-size: var(--t-3); color: var(--texto); }
@media print {
  .menu, .topo-movel, .periodo-barra .acoes, .abas, .botao, .avisos { display: none !important; }
  .app { grid-template-columns: minmax(0, 1fr); }
  .conteudo { padding: 0; max-width: none; }
  .cartao, .painel, .tabela-envolve { break-inside: avoid; }
  body { background: var(--fundo); }
  .tabela-envolve, .calor-caixa { container-type: normal; }
  .grafico { height: auto; }
  .filtros select { border: 0; }
}