/* Saldo Clínico v3: camada TEMPLATE. Componentes comuns a todas as peças.
   Só tokens (var(--*)). Nada de cor, fonte ou espaço solto aqui. */
@import url('../styles.css');

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-body);font-size:var(--text-body);line-height:var(--leading-body);font-weight:var(--weight-body);text-rendering:optimizeLegibility}
h1,h2,h3{font-family:var(--font-heading);font-weight:var(--weight-heading);letter-spacing:var(--tracking-heading);margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:var(--text-link)}
.num{font-family:var(--font-numbers);font-weight:var(--weight-numbers);font-variant-numeric:tabular-nums}

/* logo inline (classes do logo-inline.svg.txt) */
.logo{display:block;height:var(--space-7);width:auto}
.fx-a{fill:var(--fecho-barra)}
.fx-b{fill:var(--fecho-bloco)}
.fx-w{fill:var(--text-body)}
.on-dark .fx-a,.on-dark .fx-w{fill:var(--fecho-barra-on-dark)}

/* rótulo em mono (sobretítulo, legenda de número) */
.label{font-family:var(--font-numbers);font-weight:var(--weight-numbers);font-size:var(--text-label);line-height:var(--leading-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted)}
.on-dark .label{color:var(--text-on-primary-muted)}

/* O FECHO como régua: barra longa, vão, bloco âmbar. É o divisor de toda peça. */
.fecho-rule{display:grid;grid-template-columns:1fr var(--space-3) var(--space-8);height:var(--space-2)}
.fecho-rule::before{content:"";background:var(--fecho-barra)}
.fecho-rule::after{content:"";grid-column:3;background:var(--fecho-bloco)}
.on-dark .fecho-rule::before{background:var(--fecho-barra-on-dark)}

/* O FECHO como marca grande (sinal de igual com o bloco), escala com font-size */
.fecho-big{display:grid;grid-template-columns:11fr 2.5fr 6.5fr;grid-template-rows:5.5fr 3fr 5.5fr;width:5em;height:3.5em}
.fecho-big i{grid-column:1 / 4;grid-row:1;background:var(--fecho-barra)}
.fecho-big s{grid-column:1;grid-row:3;background:var(--fecho-barra)}
.fecho-big b{grid-column:3;grid-row:3;background:var(--fecho-bloco)}
.on-dark .fecho-big i,.on-dark .fecho-big s{background:var(--fecho-barra-on-dark)}
/* tamanhos fixos do fecho grande (rodada 2: 3 peças tinham tamanho improvisado → regra do template) */
.fecho-big.fx-s{font-size:var(--space-2)}   /* 40×28: assinatura de e-mail, rodapé */
.fecho-big.fx-m{font-size:var(--space-5)}   /* 120×84: anúncio, card */
.fecho-big.fx-l{font-size:var(--space-6)}   /* 160×112: post, capa */
.fecho-big.fx-xl{font-size:var(--space-7)}  /* 240×168: OG, abertura de vídeo */

/* barra de dados no estilo fecho: total (barra), glosa (vão tracejado), recuperável (bloco âmbar) */
.bar{display:flex;height:var(--space-4);gap:var(--space-1)}
.bar .pago{background:var(--fecho-barra)}
.bar .vao{border:var(--rule) dashed var(--border-strong);display:flex;justify-content:flex-start}
.bar .vao .rec{background:var(--fecho-bloco);height:100%}

.btn{display:inline-block;background:var(--action-primary);color:var(--text-on-primary);padding:var(--space-4) var(--space-5);border-radius:var(--radius-md);text-decoration:none;font-weight:var(--weight-strong);font-family:var(--font-body);font-size:var(--text-body);line-height:var(--leading-body);border:0;transition:background var(--duration-fast) var(--ease)}
.btn:hover{background:var(--action-primary-hover)}
.btn:focus-visible{outline:var(--space-1) solid var(--fecho-bloco);outline-offset:var(--space-1)}
.on-dark .btn{background:var(--color-surface);color:var(--color-primary)}

.draft{font-family:var(--font-numbers);font-size:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted);border:var(--rule) solid var(--border-default);border-radius:var(--radius-sm);padding:var(--space-1) var(--space-2)}
.fonte{font-size:var(--text-small);line-height:var(--leading-small);color:var(--text-muted)}
/* inversão: sempre vence o fundo/cor que a peça der ao mesmo elemento (rodada 2: perdeu em 2 peças) */
.on-dark{background:var(--surface-ink) !important;color:var(--text-on-primary) !important}
.on-dark .fonte{color:var(--text-on-primary-muted)}
.ruled > * + *{border-top:var(--rule) solid var(--border-default)}
.on-dark .ruled > * + *{border-top-color:var(--text-on-primary-muted)}

/* ===================== v3: componentes novos (derivados.json B11) ===================== */
/* botões: primário, secundário, texto; estados por classe (para documentar) e por pseudo-classe (uso real) */
.btn.sec{background:var(--surface-page);color:var(--color-primary);outline:var(--rule) solid var(--color-primary);outline-offset:calc(var(--rule) * -1)}
.btn.sec:hover,.btn.sec.is-hover{background:var(--surface-tint)}
.btn.txt{background:transparent;color:var(--color-primary);padding-left:0;padding-right:0;text-decoration:underline;text-underline-offset:var(--space-1)}
.btn.is-hover{background:var(--action-primary-hover)}
.btn.is-focus{outline:var(--space-1) solid var(--fecho-bloco);outline-offset:var(--space-1)}
.btn:active,.btn.is-active{transform:translateY(var(--rule))}
.btn[disabled],.btn.is-disabled{background:var(--surface-band);color:var(--text-muted);outline:var(--rule) solid var(--border-default);outline-offset:calc(var(--rule) * -1);cursor:not-allowed}
.btn.sm{padding:var(--space-2) var(--space-4);font-size:var(--text-small);line-height:var(--leading-small)}

/* campo */
.field{display:grid;gap:var(--space-1)}
.field label{font-weight:var(--weight-strong);font-size:var(--text-small);line-height:var(--leading-small)}
.field .in{font-family:var(--font-body);font-size:var(--text-body);line-height:var(--leading-body);color:var(--text-body);background:var(--surface-card);border:var(--rule) solid var(--text-muted);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4)}
.field .in.is-focus{outline:var(--space-1) solid var(--fecho-bloco);outline-offset:0;border-color:var(--color-ink)}
.field .ajuda{font-size:var(--text-small);line-height:var(--leading-small);color:var(--text-muted)}
.field.erro .in{border-color:var(--color-danger);outline:var(--rule) solid var(--color-danger);outline-offset:0}
.field.erro .ajuda{color:var(--color-danger)}

/* card */
.card{background:var(--surface-card);border:var(--rule) solid var(--border-default);border-radius:var(--radius-lg);padding:var(--space-5)}

/* tabela de glosas: números em mono, alinhados à direita, régua de demonstrativo */
table.glosas{width:100%;border-collapse:collapse;font-size:var(--text-small);line-height:var(--leading-small)}
table.glosas th{font-family:var(--font-numbers);font-weight:var(--weight-numbers);font-size:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted);text-align:left;padding:var(--space-2) var(--space-2) var(--space-2) 0;border-bottom:var(--rule) solid var(--border-strong)}
table.glosas td{padding:var(--space-2) var(--space-2) var(--space-2) 0;border-bottom:var(--rule) solid var(--border-default);vertical-align:middle}
table.glosas .r{padding-right:var(--space-4);text-align:right;font-family:var(--font-numbers);font-variant-numeric:tabular-nums}
table.glosas tfoot td{border-bottom:0;border-top:var(--rule) solid var(--border-strong);font-weight:var(--weight-strong)}

/* selos de classificação: a crença ("dizer o que não vale recorrer") vira componente */
.tag{display:inline-block;font-family:var(--font-numbers);font-weight:var(--weight-numbers);font-size:var(--text-label);line-height:var(--leading-label);letter-spacing:var(--tracking-label);text-transform:uppercase;padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);white-space:nowrap}
.tag.contestar{background:var(--color-primary);color:var(--color-surface)}
.tag.corrigir{color:var(--color-primary);outline:var(--rule) solid var(--color-primary);outline-offset:calc(var(--rule) * -1)}
.tag.encerrar{color:var(--text-muted);outline:var(--rule) dashed var(--text-muted);outline-offset:calc(var(--rule) * -1)}
/* selo de prazo: alerta só quando o prazo aperta (≠ âmbar) */
.prazo{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-numbers);font-weight:var(--weight-numbers);font-size:var(--text-label);line-height:var(--leading-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-body);white-space:nowrap}
.prazo::before{content:"";width:var(--space-2);height:var(--space-2);background:var(--color-success)}
.prazo.curto{color:var(--color-warning)}
.prazo.curto::before{background:var(--color-warning)}
.prazo.vencido{color:var(--color-danger)}
.prazo.vencido::before{background:var(--color-danger)}

/* recibo de êxito: controle depois de comprar */
.recibo{background:var(--surface-card);border:var(--rule) solid var(--border-default);border-radius:var(--radius-sm);padding:var(--space-5);font-family:var(--font-numbers);font-size:var(--text-small);line-height:var(--leading-small)}
.recibo .ln{display:flex;justify-content:space-between;gap:var(--space-4);padding:var(--space-2) 0;border-bottom:var(--rule) dashed var(--border-default)}
.recibo .ln.tot{border-bottom:0;font-weight:var(--weight-numbers);font-size:var(--text-body);color:var(--text-recovered)}

/* selo obrigatório em peça com valor de exemplo */
.ficticio{display:inline-block;font-family:var(--font-numbers);font-weight:var(--weight-numbers);font-size:var(--text-label);line-height:var(--leading-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-body);background:var(--surface-band);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm)}
.on-dark .ficticio{color:var(--color-ink);background:var(--color-primary-soft)}

/* gráfico barra-fecho com rótulos */
.grafico{display:grid;gap:var(--space-4)}
.grafico .row{display:grid;gap:var(--space-2)}
.grafico .row .top{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3);font-size:var(--text-small);line-height:var(--leading-small)}
.grafico .leg{display:flex;flex-wrap:wrap;gap:var(--space-4);font-size:var(--text-small);line-height:var(--leading-small);color:var(--text-muted)}
.grafico .leg span{display:inline-flex;align-items:center;gap:var(--space-2)}
.grafico .leg i{display:inline-block;width:var(--space-4);height:var(--space-3)}
.grafico .leg .k1{background:var(--fecho-barra)}
.grafico .leg .k2{border:var(--rule) dashed var(--border-strong)}
.grafico .leg .k3{background:var(--fecho-bloco)}

/* ===================== v3: modo campanha (só publicidade) ===================== */
/* fecho sangrado: o fecho gigante cortado pela borda da peça. --fs = tamanho-base (largura = 5×, altura = 3,5×) */
.peca{position:relative;overflow:hidden}
.fecho-sangrado{position:absolute;display:grid;grid-template-columns:11fr 2.5fr 6.5fr;grid-template-rows:5.5fr 3fr 5.5fr;width:calc(var(--fs) * 5);height:calc(var(--fs) * 3.5)}
.fecho-sangrado i{grid-column:1 / 4;grid-row:1;background:var(--fecho-barra)}
.fecho-sangrado s{grid-column:1;grid-row:3;background:var(--fecho-barra)}
.fecho-sangrado b{grid-column:3;grid-row:3;background:var(--fecho-bloco)}
.fecho-sangrado u{grid-column:2;grid-row:3;border:var(--rule) dashed var(--border-strong)}
.on-dark .fecho-sangrado i,.on-dark .fecho-sangrado s{background:var(--fecho-barra-on-dark)}
.on-dark .fecho-sangrado u{border-color:var(--text-on-primary-muted)}
.xl{font-family:var(--font-heading);font-weight:var(--weight-heading);letter-spacing:var(--tracking-heading);font-size:var(--text-display-xl);line-height:var(--leading-display-xl)}
.assina{display:flex;align-items:center;gap:var(--space-4)}
.assina .tg{font-size:var(--text-small);line-height:var(--leading-small)}
.on-dark .assina .tg{color:var(--text-on-primary-muted)}
@media (prefers-reduced-motion: reduce){.btn{transition:none}}