/* Clínica — casco de aplicação sobre o design system da Verticci (tokens --v-*).
   Cor, tipo e espaçamento vêm do bundle; aqui só layout e as peças do domínio.
   Hierarquia por escala e campo de tom, não por moldura: fio fino é exceção. */

html { overflow-x: clip; }
body { background: var(--v-canvas); min-block-size: 100svh; }
.v-logo-mascara { inline-size: auto; align-self: flex-start; }

/* ------------------------------------------------------------------ entrada */
.entrada { min-block-size: 100svh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.entrada__marca { display: flex; flex-direction: column; justify-content: space-between; gap: var(--v-espaco-8); padding: var(--v-espaco-12); background: var(--v-canvas); color: var(--v-texto); }
.entrada__tese { font-family: var(--v-fonte-display); font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem); font-weight: var(--v-peso-semibold); letter-spacing: var(--v-ls-display); line-height: var(--v-lh-display); max-inline-size: 18ch; }
.entrada__tese span { color: var(--v-acento-texto); }
.entrada__apoio { color: var(--v-texto-suave); max-inline-size: 44ch; margin-block-start: var(--v-espaco-5); }
.entrada__form { display: flex; align-items: center; justify-content: center; padding: var(--v-espaco-10) var(--v-espaco-6); }
.entrada__form form { inline-size: min(24rem, 100%); display: flex; flex-direction: column; gap: var(--v-espaco-5); }
.entrada__form h1 { font-family: var(--v-fonte-display); font-size: var(--v-fs-h3); font-weight: var(--v-peso-semibold); letter-spacing: var(--v-ls-titulo); }
.botoes-equipe { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: var(--v-espaco-3); }
.botoes-equipe [aria-pressed='true'] { border-color: var(--v-acento); box-shadow: inset 0 0 0 1px var(--v-acento); }

.campo { display: flex; flex-direction: column; gap: var(--v-espaco-1); min-inline-size: 0; }
.campo label { font-size: var(--v-fs-legenda); color: var(--v-texto-suave); font-weight: var(--v-peso-medium); }
.campo .v-input { inline-size: 100%; }
.dica { font-size: var(--v-fs-micro); color: var(--v-texto-sutil); }

/* ------------------------------------------------------------------ casco */
.casco { min-block-size: 100svh; display: flex; flex-direction: column; }
.barra-topo {
  display: flex; align-items: center; gap: var(--v-espaco-6);
  padding: var(--v-espaco-3) var(--v-espaco-6);
  background: var(--v-superficie); position: sticky; inset-block-start: 0; z-index: var(--v-z-fixo);
}
.marca-topo { display: flex; align-items: center; gap: var(--v-espaco-3); text-decoration: none; color: inherit; }
.marca-topo span { font-family: var(--v-fonte-display); font-weight: var(--v-peso-semibold); letter-spacing: var(--v-ls-titulo); }
.nav { display: flex; gap: var(--v-espaco-1); flex: 1; flex-wrap: wrap; }
.nav a {
  padding: var(--v-espaco-2) var(--v-espaco-3); border-radius: var(--v-raio-sm);
  color: var(--v-texto-suave); text-decoration: none; font-size: var(--v-fs-corpo-p);
}
.nav a:hover { background: var(--v-canvas-rebaixado); color: var(--v-texto); }
.nav a[aria-current='page'] { background: var(--v-acento-suave); color: var(--v-acento-texto); font-weight: var(--v-peso-medium); }
.conta { display: flex; align-items: center; gap: var(--v-espaco-3); }

.principal { inline-size: min(84rem, 100%); margin-inline: auto; padding: var(--v-espaco-8) var(--v-espaco-6) var(--v-espaco-16); display: flex; flex-direction: column; gap: var(--v-espaco-6); flex: 1; }
.cabeca { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--v-espaco-6); flex-wrap: wrap; }
.cabeca h1 { font-family: var(--v-fonte-display); font-size: var(--v-fs-h2); font-weight: var(--v-peso-semibold); letter-spacing: var(--v-ls-titulo); }
.linha { color: var(--v-texto-suave); max-inline-size: 60ch; margin-block-start: var(--v-espaco-1); }
.cabeca__acoes { display: flex; align-items: end; gap: var(--v-espaco-3); }
.comp { display: flex; flex-direction: column; gap: var(--v-espaco-1); }
.comp span { font-size: var(--v-fs-legenda); color: var(--v-texto-suave); }

/* ------------------------------------------------------------------ peças */
.cartao { background: var(--v-superficie); border-radius: var(--v-raio-lg); padding: var(--v-espaco-6); display: flex; flex-direction: column; gap: var(--v-espaco-4); }
.cartao__t { font-family: var(--v-fonte-display); font-size: var(--v-fs-h4); font-weight: var(--v-peso-semibold); display: flex; align-items: center; gap: var(--v-espaco-3); }
.cartao--critico { background: var(--v-critico-suave); }
.cartao--atencao { background: var(--v-atencao-suave); }

.grade-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: var(--v-espaco-5); align-items: start; }
.grade-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--v-espaco-5); }
.grade-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--v-espaco-3); }
.grade-ind { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--v-espaco-4); }

.rot { font-size: var(--v-fs-legenda); color: var(--v-texto-suave); }
.gr { font-family: var(--v-fonte-display); font-size: var(--v-fs-h3); font-weight: var(--v-peso-semibold); font-variant-numeric: tabular-nums; }
.duplo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--v-espaco-5); }
.vazio { color: var(--v-texto-sutil); }
.criterio { color: var(--v-texto); font-weight: var(--v-peso-medium); }
.nota { font-size: var(--v-fs-corpo-p); color: var(--v-texto-suave); border-inline-start: var(--v-traco-grosso) solid var(--v-acento); padding-inline-start: var(--v-espaco-3); }
.formula { font-size: var(--v-fs-legenda); color: var(--v-texto-sutil); }
.contador { background: var(--v-canvas-rebaixado); border-radius: var(--v-raio-total); padding: 0 var(--v-espaco-2); font-size: var(--v-fs-legenda); color: var(--v-texto-suave); }
.falta { color: var(--v-atencao); }
.tudo-certo { background: var(--v-sucesso-suave); border-radius: var(--v-raio-md); padding: var(--v-espaco-4) var(--v-espaco-5); }
.rodape-pendencia { font-size: var(--v-fs-corpo-p); color: var(--v-texto-suave); }

/* indicadores ------------------------------------------------------ */
.kpi { background: var(--v-superficie); border-radius: var(--v-raio-md); padding: var(--v-espaco-4) var(--v-espaco-5); display: flex; flex-direction: column; gap: var(--v-espaco-1); }
.kpi__r { font-size: var(--v-fs-legenda); color: var(--v-texto-suave); }
.kpi__v { font-family: var(--v-fonte-display); font-size: var(--v-fs-h3); font-weight: var(--v-peso-semibold); font-variant-numeric: tabular-nums; line-height: 1.1; }
.kpi__m { font-size: var(--v-fs-micro); color: var(--v-texto-sutil); }
.kpi--ok { background: var(--v-sucesso-suave); }
.kpi--atencao { background: var(--v-atencao-suave); }
.kpi--fora { background: var(--v-critico-suave); }

.ind { background: var(--v-superficie); border-radius: var(--v-raio-md); padding: var(--v-espaco-5); display: flex; flex-direction: column; gap: var(--v-espaco-1); }
.ind header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--v-espaco-3); }
.ind h3 { font-size: var(--v-fs-corpo); font-weight: var(--v-peso-semibold); }
.ind .per { font-size: var(--v-fs-micro); color: var(--v-texto-sutil); }
.ind__v { font-family: var(--v-fonte-display); font-size: var(--v-fs-h2); font-weight: var(--v-peso-semibold); font-variant-numeric: tabular-nums; line-height: 1.05; }
.ind__m { font-size: var(--v-fs-legenda); color: var(--v-texto-suave); }
.ind__alt { font-size: var(--v-fs-legenda); color: var(--v-texto-suave); }
.ind--ok .ind__v { color: var(--v-sucesso); }
.ind--atencao .ind__v { color: var(--v-atencao); }
.ind--fora .ind__v { color: var(--v-critico); }

.reversa { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: var(--v-espaco-4); background: var(--v-canvas-rebaixado); border-radius: var(--v-raio-md); padding: var(--v-espaco-4) var(--v-espaco-5); }

/* trilha ----------------------------------------------------------- */
.trilha { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--v-espaco-2); }
.trilha__p { display: flex; gap: var(--v-espaco-3); padding: var(--v-espaco-4); border-radius: var(--v-raio-md); background: var(--v-superficie); }
.trilha__p small { display: block; font-size: var(--v-fs-micro); color: var(--v-texto-sutil); margin-block-start: var(--v-espaco-1); }
.trilha__n { inline-size: 1.5rem; block-size: 1.5rem; flex: none; border-radius: var(--v-raio-total); display: grid; place-items: center; font-size: var(--v-fs-micro); background: var(--v-canvas-rebaixado); color: var(--v-texto-suave); }
.trilha__p.ok { background: var(--v-sucesso-suave); }
.trilha__p.ok .trilha__n { background: var(--v-sucesso); color: var(--v-texto-invertido); }
.trilha__p.agora { background: var(--v-acento-suave); }
.trilha__p.agora .trilha__n { background: var(--v-acento); color: var(--v-acento-contraste); }
.trilha__p.depois { opacity: .62; }
.trilha-leitura { padding-inline-start: var(--v-espaco-5); display: flex; flex-direction: column; gap: var(--v-espaco-1); }

/* alertas ---------------------------------------------------------- */
.alertas { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: var(--v-espaco-2); }
.alerta { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--v-espaco-3); padding: var(--v-espaco-2) var(--v-espaco-4); border-radius: var(--v-raio-sm); font-size: var(--v-fs-corpo-p); }
.alerta a { color: inherit; font-size: var(--v-fs-legenda); }
.alerta--critico { background: var(--v-critico-suave); }
.alerta--atencao { background: var(--v-atencao-suave); }

/* funil ------------------------------------------------------------ */
.funil { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--v-espaco-2); }
.funil__e { background: var(--v-canvas-rebaixado); border-radius: var(--v-raio-md); padding: var(--v-espaco-3); display: flex; flex-direction: column; gap: var(--v-espaco-1); font-size: var(--v-fs-legenda); color: var(--v-texto-suave); }
.funil__n { font-family: var(--v-fonte-display); font-size: var(--v-fs-h3); color: var(--v-texto); font-weight: var(--v-peso-semibold); }

.mini { display: flex; flex-direction: column; gap: var(--v-espaco-1); }
.mini li { list-style: none; display: flex; justify-content: space-between; gap: var(--v-espaco-4); font-size: var(--v-fs-corpo-p); color: var(--v-texto-suave); padding-block: var(--v-espaco-1); }
.mini strong { color: var(--v-texto); font-variant-numeric: tabular-nums; }
.lista-simples { display: flex; flex-direction: column; gap: var(--v-espaco-1); padding-inline-start: var(--v-espaco-4); color: var(--v-texto-suave); font-size: var(--v-fs-corpo-p); }
.acoes { display: flex; flex-direction: column; gap: var(--v-espaco-3); }
.acoes li { list-style: none; }
.acoes small { display: block; color: var(--v-texto-suave); font-size: var(--v-fs-legenda); }
.pauta { padding-inline-start: var(--v-espaco-5); display: flex; flex-direction: column; gap: var(--v-espaco-2); color: var(--v-texto-suave); }

.barra { block-size: .5rem; border-radius: var(--v-raio-total); background: var(--v-canvas-rebaixado); overflow: hidden; }
.barra span { display: block; block-size: 100%; background: var(--v-acento); }

/* tabelas ---------------------------------------------------------- */
.rolar { overflow-x: auto; }
.tab { inline-size: 100%; border-collapse: collapse; font-size: var(--v-fs-corpo-p); }
.tab th { text-align: start; font-size: var(--v-fs-legenda); color: var(--v-texto-suave); font-weight: var(--v-peso-medium); padding: var(--v-espaco-2) var(--v-espaco-3); }
.tab td { padding: var(--v-espaco-3); vertical-align: middle; }
.tab tbody tr:nth-child(odd) { background: var(--v-canvas-rebaixado); }
.tab td small { display: block; color: var(--v-texto-sutil); font-size: var(--v-fs-micro); }
.tab .num { text-align: end; font-variant-numeric: tabular-nums; }

.linha-form { display: flex; gap: var(--v-espaco-3); align-items: end; flex-wrap: wrap; }
.linha-form .campo { flex: 1 1 11rem; }

.marca { font-size: var(--v-fs-micro); padding: var(--v-espaco-1) var(--v-espaco-2); border-radius: var(--v-raio-sm); background: var(--v-canvas-rebaixado); color: var(--v-texto-suave); }
.marca--novo, .marca--aberto, .marca--agendada { background: var(--v-informacao-suave); color: var(--v-informacao); }
.marca--compareceu, .marca--fechado { background: var(--v-sucesso-suave); color: var(--v-sucesso); }
.marca--perdido, .marca--recusado, .marca--faltou { background: var(--v-critico-suave); color: var(--v-critico); }
.marca--contatado, .marca--agendado { background: var(--v-atencao-suave); color: var(--v-atencao); }

/* protocolo -------------------------------------------------------- */
.passos { display: flex; flex-direction: column; gap: var(--v-espaco-2); padding: 0; counter-reset: p; }
.passos li { list-style: none; }
.passos button { inline-size: 100%; text-align: start; background: var(--v-canvas-rebaixado); border: none; border-radius: var(--v-raio-md); padding: var(--v-espaco-3) var(--v-espaco-4); cursor: pointer; display: flex; flex-direction: column; gap: var(--v-espaco-1); color: inherit; font: inherit; }
.passos button:hover { background: var(--v-acento-suave); }
.passos small { color: var(--v-texto-suave); font-size: var(--v-fs-legenda); }
.passos .extra { color: var(--v-texto-sutil); }
.passos li.feito button { background: var(--v-sucesso-suave); }
.passos li.feito strong::before { content: '✓ '; color: var(--v-sucesso); }
.passos--leitura li { background: var(--v-canvas-rebaixado); border-radius: var(--v-raio-md); padding: var(--v-espaco-3) var(--v-espaco-4); }
.passos--leitura small { display: block; color: var(--v-texto-suave); font-size: var(--v-fs-legenda); }

/* preço ------------------------------------------------------------ */
.proc { background: var(--v-canvas-rebaixado); border-radius: var(--v-raio-md); padding: var(--v-espaco-4) var(--v-espaco-5); display: flex; flex-direction: column; gap: var(--v-espaco-3); }
.proc header { display: flex; align-items: center; justify-content: space-between; gap: var(--v-espaco-4); flex-wrap: wrap; }
.proc header small { display: block; color: var(--v-texto-suave); font-size: var(--v-fs-legenda); }
.proc__n { display: flex; align-items: baseline; gap: var(--v-espaco-2); font-variant-numeric: tabular-nums; }
.proc__n strong { font-family: var(--v-fonte-display); font-size: var(--v-fs-h4); }
.lucro { font-size: var(--v-fs-legenda); padding: var(--v-espaco-1) var(--v-espaco-2); border-radius: var(--v-raio-sm); }
.lucro.neg { background: var(--v-critico-suave); color: var(--v-critico); }
.lucro.pos { background: var(--v-sucesso-suave); color: var(--v-sucesso); }
.casc { display: flex; flex-direction: column; gap: var(--v-espaco-3); }

/* campanhas -------------------------------------------------------- */
.ano { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--v-espaco-3); }
.mes { background: var(--v-canvas-rebaixado); border-radius: var(--v-raio-md); padding: var(--v-espaco-3) var(--v-espaco-4); display: flex; flex-direction: column; gap: var(--v-espaco-2); }
.mes--vazio { opacity: .55; }
.mes__n { font-size: var(--v-fs-legenda); color: var(--v-texto-suave); }
.camp { display: flex; flex-direction: column; gap: var(--v-espaco-1); background: var(--v-superficie); border-radius: var(--v-raio-sm); padding: var(--v-espaco-3); }
.camp small { font-size: var(--v-fs-micro); color: var(--v-texto-suave); }
.camp .oferta { color: var(--v-atencao); }
.camp--no_ar { box-shadow: inset 3px 0 0 var(--v-acento); }
.sem { font-size: var(--v-fs-micro); color: var(--v-texto-sutil); }

.gates { display: flex; flex-direction: column; gap: var(--v-espaco-2); }
.gate { list-style: none; display: flex; gap: var(--v-espaco-3); align-items: center; padding: var(--v-espaco-2) var(--v-espaco-3); border-radius: var(--v-raio-sm); }
.gate__m { inline-size: 1.25rem; text-align: center; font-weight: var(--v-peso-semibold); }
.gate--ok { background: var(--v-sucesso-suave); }
.gate--falta { background: var(--v-critico-suave); }
.gate--manual { background: var(--v-canvas-rebaixado); }
.gate small { color: var(--v-texto-sutil); }

/* abas ------------------------------------------------------------- */
.abas { display: flex; gap: var(--v-espaco-2); flex-wrap: wrap; }
.abas button { background: var(--v-superficie); border: none; border-radius: var(--v-raio-md); padding: var(--v-espaco-3) var(--v-espaco-4); cursor: pointer; color: var(--v-texto-suave); font: inherit; display: flex; gap: var(--v-espaco-2); align-items: center; }
.abas button[aria-selected='true'] { background: var(--v-acento-suave); color: var(--v-acento-texto); font-weight: var(--v-peso-medium); }

/* método ----------------------------------------------------------- */
.params { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: var(--v-espaco-3); }
.param { display: flex; gap: var(--v-espaco-4); align-items: center; justify-content: space-between; background: var(--v-canvas-rebaixado); border-radius: var(--v-raio-md); padding: var(--v-espaco-3) var(--v-espaco-4); }
.param--conf { background: var(--v-atencao-suave); }
.param__r { font-weight: var(--v-peso-medium); }
.param__f { font-size: var(--v-fs-micro); color: var(--v-texto-suave); margin-block-start: var(--v-espaco-1); }
.param__v { background: var(--v-superficie); border: none; border-radius: var(--v-raio-sm); padding: var(--v-espaco-2) var(--v-espaco-3); cursor: pointer; font: inherit; font-family: var(--v-fonte-display); font-weight: var(--v-peso-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; color: inherit; display: flex; flex-direction: column; align-items: center; }
.param__v:hover { background: var(--v-acento-suave); }
.param__v .conf { font-family: var(--v-fonte-texto); font-size: var(--v-fs-micro); font-weight: var(--v-peso-regular); color: var(--v-atencao); }

/* toast ------------------------------------------------------------ */
.toast { position: fixed; inset-block-end: var(--v-espaco-6); inset-inline-end: var(--v-espaco-6); max-inline-size: 26rem; padding: var(--v-espaco-4) var(--v-espaco-5); border-radius: var(--v-raio-md); background: var(--v-superficie-alta); box-shadow: var(--v-sombra-lg); z-index: var(--v-z-toast); }
.toast--erro { box-shadow: inset 3px 0 0 var(--v-critico), var(--v-sombra-lg); }
.toast--ok { box-shadow: inset 3px 0 0 var(--v-sucesso), var(--v-sombra-lg); }

@media (max-width: 900px) {
  .entrada { grid-template-columns: minmax(0, 1fr); }
  .entrada__marca { padding: var(--v-espaco-8) var(--v-espaco-5); }
  .barra-topo { flex-wrap: wrap; gap: var(--v-espaco-3); padding-inline: var(--v-espaco-4); }
  .marca-topo { flex: 1; }
  .nav { order: 3; flex-basis: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .nav a { white-space: nowrap; }
  .principal { padding-inline: var(--v-espaco-4); }
  .duplo { grid-template-columns: 1fr; }
  .funil { grid-template-columns: repeat(2, 1fr); }
}