/* acuris.css — estilo do extrato de repasse (portado de docs/acuris-extrato-repasse-nalisson-sem25.fonte.html)
Régua de espaço px: 2 4 8 12 16 24 32 48 64 96 128 192
Régua de tipo pt: 8.5 10 12 15 19 24 32 (piso de corpo 12pt)
Mobile-first: a base é o celular (390 px). A folha A4 entra no bloco
"screen and min-width 230mm, print" — nunca em max-width puro,
porque a impressão em A4 tem 210mm de largura e dispararia o breakpoint. */
/* Fontes Archivo e IBM Plex Mono: carregadas pelo em base.html. */
:root{
--ac-marinho:#162a4e; --ac-azul:#0152cb; --ac-nevoa:#9db3e0; --ac-ambar:#ffb600;
--ac-fundo:#edf0f9; --ac-superficie:#f6f8fe; --ac-tinta:#111826;
--ac-texto:#4a5468; --ac-rotulo:#6c727e; --ac-borda:#d4dbe6;
--ac-serie-neutra:#b3bed6; --ac-sobre-ambar:#3d2a00; --ac-claro:#c3d0ea;
--ac-papel:#e2e7f2; --ac-branco:#ffffff;
--ac-ok:#1f7a4d; --ac-ok-fundo:#e6f4ec;
--ac-erro:#a8321e; --ac-erro-fundo:#fbe9e5;
--ac-elev-2:0 1px 2px rgba(22,42,78,.06), 0 8px 24px -16px rgba(22,42,78,.28);
}
@page{size:A4;margin:0}
body{margin:0;background:var(--ac-fundo);color:var(--ac-tinta);
font-family:Archivo,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
/* ---------- folha (base = celular, fluida) ---------- */
.folha{width:100%;margin:0 auto 16px;background:var(--ac-branco);
padding:24px 16px 24px;display:flex;flex-direction:column;box-shadow:var(--ac-elev-2)}
.folha .mono{font-family:'IBM Plex Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}
.folha .rotulo{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:8.5pt;line-height:1.4;
letter-spacing:.22em;text-transform:uppercase;color:var(--ac-rotulo);margin:0}
.folha h1{margin:0;font-size:24pt;line-height:1.3;font-weight:600;font-stretch:110%;
letter-spacing:-.014em;color:var(--ac-marinho);overflow-wrap:anywhere}
.folha h2{margin:0;font-size:19pt;line-height:1.3;font-weight:600;font-stretch:110%;
letter-spacing:-.014em;color:var(--ac-marinho)}
.folha h3{margin:0;font-size:15pt;line-height:1.45;font-weight:600;color:var(--ac-marinho)}
.folha h4{margin:0;font-size:12pt;line-height:1.6;font-weight:600;color:var(--ac-marinho)}
.folha p{margin:0;font-size:12pt;line-height:1.6;color:var(--ac-texto);max-width:150mm;text-wrap:pretty}
.folha p.apoio{font-size:10pt;line-height:1.6;color:var(--ac-rotulo)}
.folha strong{font-weight:600;color:var(--ac-marinho)}
.corpo{display:flex;flex-direction:column;gap:16px;flex:1;padding-top:24px}
.secao{display:flex;align-items:baseline;gap:12px}
.secao .n{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:8.5pt;line-height:1.4;
letter-spacing:.26em;color:var(--ac-azul)}
.secao .t{margin:0;font-size:10pt;line-height:1.6;font-weight:600;letter-spacing:.26em;
text-transform:uppercase;color:var(--ac-rotulo)}
/* topo e rodapé de folha */
.cab{display:flex;justify-content:space-between;align-items:center;gap:12px;
padding-bottom:12px;border-bottom:1px solid var(--ac-borda)}
.folha .marca{display:flex;align-items:baseline;gap:8px}
.folha .marca span{font-size:10pt;line-height:1.6;font-weight:500;font-stretch:118%;
letter-spacing:.2em;color:var(--ac-marinho);padding-left:.2em}
.rod{padding-top:12px;margin-top:24px;border-top:1px solid var(--ac-borda);display:flex;justify-content:space-between;gap:12px}
.rod span{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:8.5pt;line-height:1.4;
letter-spacing:.18em;color:var(--ac-rotulo)}
/* ---------- herói ---------- */
.heroi{background:var(--ac-marinho);border-radius:18px;padding:24px;
display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.heroi .rotulo{color:var(--ac-nevoa)}
/* âmbar: um elemento por tela — só a cifra do herói */
/* clamp + nowrap: 'R$ 71.225,74' cabe em 390px sem quebrar em duas linhas */
.heroi .cifra{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:clamp(22pt,7.4vw,32pt);white-space:nowrap;line-height:1.12;
letter-spacing:-.014em;color:var(--ac-ambar);margin:12px 0 0;font-variant-numeric:tabular-nums;max-width:none}
.heroi .quando{font-size:12pt;line-height:1.6;color:var(--ac-claro);margin:16px 0 0}
.heroi .quando b{color:var(--ac-branco);font-weight:600}
.folha .selo{text-align:left;flex:none}
.folha .selo .rotulo{color:var(--ac-nevoa)}
.folha .selo .v{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:19pt;line-height:1.3;
color:var(--ac-branco);margin:8px 0 0}
.folha .selo .v.retido{display:inline-block;border:1px solid var(--ac-nevoa);border-radius:9px;
padding:2px 12px;font-size:12pt;letter-spacing:.18em;text-transform:uppercase}
.selos{display:flex;gap:24px;flex-wrap:wrap}
/* ---------- conta ---------- */
.conta{border:1px solid var(--ac-borda);border-radius:16px;overflow:hidden}
.conta .l{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
padding:12px 16px;border-bottom:1px solid var(--ac-fundo)}
.conta .l:last-child{border-bottom:none}
.conta .l.tot{background:var(--ac-superficie)}
.conta .k{font-size:12pt;line-height:1.6;color:var(--ac-texto);min-width:0}
.conta .l.tot .k{font-weight:600;color:var(--ac-marinho)}
.conta .v{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:15pt;line-height:1.45;
color:var(--ac-marinho);font-variant-numeric:tabular-nums;white-space:nowrap}
.conta .v.neg{color:var(--ac-rotulo)}
.conta .sub{display:block;font-size:10pt;line-height:1.6;color:var(--ac-rotulo);margin-top:4px}
/* Grupo depois do Total: a planilha anota, mas nao entra na conta do medico. */
.conta.fora{margin-top:12px;border-style:dashed;background:transparent}
.conta.fora .l.cab{background:var(--ac-superficie)}
.conta.fora .l.cab .k{font-weight:600;color:var(--ac-marinho)}
.conta.fora .l.cab .v{font-family:inherit;font-size:10pt;color:var(--ac-rotulo)}
.conta.fora .v{color:var(--ac-rotulo)}
/* ---------- cartões de número ---------- */
.numeros{display:grid;grid-template-columns:1fr;gap:16px}
.folha .num{background:var(--ac-superficie);border:1px solid var(--ac-borda);border-radius:16px;padding:16px}
.folha .num .v{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:24pt;line-height:1.3;
color:var(--ac-marinho);margin:12px 0 0;font-variant-numeric:tabular-nums}
.folha .num .c{font-size:10pt;line-height:1.6;color:var(--ac-texto);margin:4px 0 0}
/* ---------- cartão de procedimento ---------- */
.proc{border:1px solid var(--ac-borda);border-radius:16px;overflow:hidden;break-inside:avoid}
.proc-cab{background:var(--ac-superficie);border-bottom:1px solid var(--ac-borda);
padding:12px 16px;display:flex;flex-direction:column;gap:8px}
.proc-cab .dir{text-align:left;flex:none}
.proc-cab .id{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:8.5pt;line-height:1.4;
letter-spacing:.18em;text-transform:uppercase;color:var(--ac-rotulo);max-width:none}
.proc-cab .pac{font-size:15pt;line-height:1.45;font-weight:600;color:var(--ac-marinho);margin:4px 0 0}
.proc-corpo{padding:16px;display:flex;flex-direction:column;gap:12px}
.tuss{display:flex;gap:12px;align-items:baseline}
.tuss .c{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10pt;line-height:1.6;
color:var(--ac-azul);white-space:nowrap;flex:none}
.tuss .d{font-size:12pt;line-height:1.6;color:var(--ac-texto)}
.tuss.so-desc .d{margin-left:0}
/* cadeia de valores (base: empilhada) */
.cadeia{display:flex;flex-direction:column;gap:0;border:1px solid var(--ac-borda);border-radius:10px;overflow:hidden}
.cadeia .p{flex:1;padding:8px 12px;border-bottom:1px solid var(--ac-fundo)}
.cadeia .p:last-child{border-bottom:none;background:var(--ac-superficie)}
.cadeia .k{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:8.5pt;line-height:1.4;
letter-spacing:.18em;text-transform:uppercase;color:var(--ac-rotulo)}
.cadeia .v{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12pt;line-height:1.6;
color:var(--ac-marinho);margin-top:4px;font-variant-numeric:tabular-nums}
.cadeia .v.neg{color:var(--ac-rotulo)}
/* barra de rateio */
.barra{display:flex;height:12px;border-radius:9px;overflow:hidden;background:var(--ac-fundo)}
.barra i{display:block;height:100%}
.legenda{display:flex;flex-wrap:wrap;gap:16px;margin-top:12px}
.legenda span{display:flex;align-items:center;gap:8px;font-size:10pt;line-height:1.6;color:var(--ac-texto)}
.legenda i{width:8px;height:8px;border-radius:9px;display:inline-block;flex:none}
.legenda b{font-family:'IBM Plex Mono',ui-monospace,monospace;font-weight:400;color:var(--ac-marinho)}
.legenda span.eu{color:var(--ac-marinho);font-weight:600}
.legenda span.eu b{color:var(--ac-azul)}
.minha{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;
background:var(--ac-superficie);border-radius:10px;padding:12px 16px}
.minha .k{font-size:12pt;line-height:1.6;color:var(--ac-texto)}
.minha .v{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:19pt;line-height:1.3;
color:var(--ac-azul);font-variant-numeric:tabular-nums;white-space:nowrap}
/* ---------- aviso ---------- */
/* No extrato o aviso usa névoa: o âmbar da tela já está na cifra do herói. */
.folha .aviso{border-left:4px solid var(--ac-nevoa);padding:8px 0 8px 24px}
.folha .aviso p{font-size:12pt;line-height:1.6;max-width:150mm}
.folha .aviso.calma{border-left-color:var(--ac-nevoa)}
.folha .aviso.calma p{font-size:10pt;color:var(--ac-rotulo)}
.folha .aviso ul{margin:0;padding-left:16px}
.folha .aviso li{font-size:10pt;line-height:1.6;color:var(--ac-rotulo)}
.painel{background:var(--ac-superficie);border:1px solid var(--ac-borda);
border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:12px}
/* ---------- fecho ---------- */
.fecho{background:var(--ac-marinho);border-radius:18px;padding:24px;display:flex;
flex-direction:column;gap:12px}
.fecho h3{color:var(--ac-branco)}
.fecho p{color:var(--ac-claro)}
.fecho .rotulo{color:var(--ac-nevoa)}
.assina{display:flex;align-items:center;gap:12px;margin-top:8px}
.assina i{height:2px;width:32px;background:var(--ac-nevoa);display:inline-block}
.assina span{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:8.5pt;line-height:1.4;
letter-spacing:.2em;text-transform:uppercase;color:var(--ac-nevoa)}
/* ---------- selo de conferência (modo admin) ---------- */
/* Todas as classes genéricas (.rotulo, .selo, .num, .aviso, .botao, .critica, .marca, .mono)
são escopadas em .folha para não vazar para o resto do site (app.css tem homônimas). */
.conf{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;border-radius:9px;
padding:4px 12px;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:8.5pt;line-height:1.6;
letter-spacing:.12em;text-transform:uppercase}
.conf b{font-weight:500}
.conf.confirmado{background:var(--ac-ok-fundo);color:var(--ac-ok)}
.conf.divergente{background:var(--ac-erro-fundo);color:var(--ac-erro)}
.conf.sem_papel{background:var(--ac-fundo);color:var(--ac-rotulo)}
.conf-nota{font-size:10pt;color:var(--ac-rotulo);margin:4px 0 0}
/* ---------- críticas ---------- */
.criticas{display:flex;flex-direction:column;gap:8px}
.folha .critica{border:1px solid var(--ac-borda);border-radius:10px;padding:12px 16px;display:flex;flex-direction:column;gap:4px}
.folha .critica .meta{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:8.5pt;line-height:1.4;
letter-spacing:.18em;text-transform:uppercase;color:var(--ac-rotulo)}
.folha .critica .meta .st{color:var(--ac-azul)}
.folha .critica .meta .st.fechada{color:var(--ac-ok)}
.folha .critica .texto{font-size:12pt;line-height:1.6;color:var(--ac-tinta)}
.folha .critica .resposta{border-left:3px solid var(--ac-azul);padding:4px 0 4px 12px;margin-top:4px}
.folha .critica .resposta .texto{color:var(--ac-marinho)}
/* formulário de crítica dentro de — funciona sem JS */
details.criticar{border:1px dashed var(--ac-borda);border-radius:10px;padding:0}
details.criticar summary{list-style:none;cursor:pointer;min-height:44px;display:flex;align-items:center;
padding:8px 16px;font-size:12pt;line-height:1.6;font-weight:600;color:var(--ac-azul)}
details.criticar summary::-webkit-details-marker{display:none}
details.criticar summary::before{content:'+';font-family:'IBM Plex Mono',ui-monospace,monospace;
width:24px;flex:none;color:var(--ac-azul)}
details.criticar[open] summary::before{content:'−'}
details.criticar form{padding:0 16px 16px;display:flex;flex-direction:column;gap:12px}
.campo{display:flex;flex-direction:column;gap:4px}
.campo label{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:8.5pt;line-height:1.4;
letter-spacing:.18em;text-transform:uppercase;color:var(--ac-rotulo)}
.campo textarea,.campo input{font:inherit;font-size:12pt;line-height:1.6;color:var(--ac-tinta);
border:1px solid var(--ac-borda);border-radius:10px;padding:8px 12px;min-height:44px;background:var(--ac-branco);width:100%}
.campo textarea{min-height:96px;resize:vertical}
.campo input.mono{font-family:'IBM Plex Mono',ui-monospace,monospace}
.campo .dica{font-size:10pt;line-height:1.6;color:var(--ac-rotulo)}
/* ---------- botões (toque ≥ 44 px) ---------- */
.folha .botao{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;
padding:8px 24px;border-radius:12px;border:1px solid var(--ac-azul);background:var(--ac-azul);
color:var(--ac-branco);font:inherit;font-size:12pt;line-height:1.6;font-weight:600;cursor:pointer;
text-decoration:none;width:100%}
.folha .botao:hover{background:var(--ac-marinho);border-color:var(--ac-marinho)}
.folha .botao.claro{background:var(--ac-branco);color:var(--ac-azul)}
.folha .botao.claro:hover{background:var(--ac-superficie);color:var(--ac-marinho)}
.acoes{display:flex;flex-direction:column;gap:12px}
.acoes form{margin:0}
.fecho details.criticar{border-color:var(--ac-nevoa)}
.fecho details.criticar summary{color:var(--ac-branco)}
.fecho details.criticar summary::before{color:var(--ac-nevoa)}
.fecho .campo label{color:var(--ac-nevoa)}
.fecho .campo .dica{color:var(--ac-claro)}
.fecho .botao.claro{background:var(--ac-branco);color:var(--ac-marinho);border-color:var(--ac-branco)}
.fecho .botao.claro:hover{background:var(--ac-claro)}
/* estado do repasse (aceito, contestado) */
.estado{display:inline-block;border-radius:9px;padding:2px 12px;font-family:'IBM Plex Mono',ui-monospace,monospace;
font-size:8.5pt;line-height:1.6;letter-spacing:.18em;text-transform:uppercase;
background:var(--ac-fundo);color:var(--ac-rotulo)}
.estado.aceito{background:var(--ac-ok-fundo);color:var(--ac-ok)}
.estado.contestado{background:var(--ac-erro-fundo);color:var(--ac-erro)}
/* erro de validacao junto do formulario de critica (a ancora pula o flash do topo) */
.erro-campo{margin:0 0 12px;padding:10px 12px;border-radius:10px;font-size:11pt;line-height:1.5;
background:var(--ac-erro-fundo);color:var(--ac-erro);border:1px solid var(--ac-erro)}
/* ---------- folha A4: tela larga OU impressão ---------- */
@media screen and (min-width:230mm), print{
.folha{width:210mm;min-height:297mm;margin:0 auto 24px;padding:48px 48px 32px}
.heroi{flex-direction:row;justify-content:space-between;align-items:flex-end;gap:32px;padding:32px}
.heroi .cifra{font-size:32pt}
.folha .selo{text-align:right}
.selos{justify-content:flex-end}
.numeros{grid-template-columns:repeat(3,1fr)}
.proc-cab{flex-direction:row;justify-content:space-between;align-items:baseline;gap:24px}
.proc-cab .dir{text-align:right}
.cadeia{flex-direction:row}
.cadeia .p{border-bottom:none;border-right:1px solid var(--ac-fundo)}
.cadeia .p:last-child{border-right:none}
.conta .l{gap:24px}
.minha{gap:24px}
.acoes{flex-direction:row}
.folha .botao{width:auto}
}
/* ---------- impressão A4 ---------- */
@media print{
body{background:var(--ac-branco)}
/* min-height:0 e nao 297mm: com a folha forcada a uma pagina cheia, um bloco que
passava de 297mm empurrava so o rodape para uma pagina quase vazia (Carolina).
Sem min-height a folha ocupa o que precisa, e o page-break-after garante que cada
folha comece numa pagina nova. */
.folha{margin:0;box-shadow:none;min-height:0;padding:26px 32px 12px;
page-break-after:always;break-after:page}
.folha:last-of-type{page-break-after:auto;break-after:auto}
.corpo{padding-top:12px;gap:10px}
.cab{padding-bottom:8px}
.heroi{padding:24px}
.proc{break-inside:avoid;page-break-inside:avoid}
.numeros,.heroi,.fecho{break-inside:avoid;page-break-inside:avoid}
/* a conta pode partir entre linhas: assim a sobra de uma folha longa é meia conta
cheia, e nao um bloco solto de tres linhas numa pagina quase vazia */
.conta{break-inside:auto;page-break-inside:auto}
.conta .l,.painel tr{break-inside:avoid;page-break-inside:avoid}
.heroi{padding:16px;gap:12px}
.heroi .cifra{font-size:26pt}
.folha h1{font-size:21pt}
/* linhas da conta e cartoes de numero mais justos: e o que faz a folha do herói
caber numa pagina so mesmo quando a conta tem muitas linhas (Alexandre) */
.conta .l{padding:8px 14px}
.conta .sub{margin-top:2px}
.folha .num{padding:10px}
.folha .num .v{font-size:21pt;margin-top:8px}
.numeros{gap:12px}
/* o rodape da folha nunca fica sozinho: vem junto do bloco que o precede */
.rod{break-before:avoid;page-break-before:avoid;margin-top:10px;padding-top:8px}
details.criticar,.acoes,.so-tela{display:none !important}
}