@font-face { font-family:"Montserrat"; font-weight:700; font-display:swap; src:url(fontes/montserrat-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family:"Montserrat"; font-weight:800; font-display:swap; src:url(fontes/montserrat-latin-800-normal.woff2) format("woff2"); }
@font-face { font-family:"IBM Plex Sans"; font-weight:400; font-display:swap; src:url(fontes/ibm-plex-sans-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family:"IBM Plex Sans"; font-weight:500; font-display:swap; src:url(fontes/ibm-plex-sans-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family:"IBM Plex Sans"; font-weight:600; font-display:swap; src:url(fontes/ibm-plex-sans-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family:"IBM Plex Mono"; font-weight:400; font-display:swap; src:url(fontes/ibm-plex-mono-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family:"IBM Plex Mono"; font-weight:500; font-display:swap; src:url(fontes/ibm-plex-mono-latin-500-normal.woff2) format("woff2"); }

/* Marca Carcará Lab: grafite #282828, laranja #E06A35, areia #F5F1EA, noite #141414 */
:root {
  --fundo:#F5F1EA; --superficie:#FFFFFF; --realce:#FBF8F3; --texto:#282828; --suave:#6B655C; --linha:#E2DCD1;
  --acento:#E06A35; --acento-texto:#B4501F; --sobre-acento:#1A1109; --acento-suave:#FBE9DF;
  --lateral:#141414; --lateral-texto:#D9D3C8; --lateral-ativo:#262626;
  --sobe:#1E7A45; --sobe-fundo:#E3F3EA; --desce:#B3321F; --desce-fundo:#FBE5E0; --neutro-fundo:#EEE9DF;
  --org:#A39C91; --sombra:0 1px 2px rgba(40,40,40,.06), 0 6px 20px rgba(40,40,40,.05);
  --titulos:"Montserrat", system-ui, sans-serif; --corpo:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --mono:"IBM Plex Mono", ui-monospace, Menlo, monospace;
}
:root[data-tema="claro"] { color-scheme:light; }
:root[data-tema="escuro"] {
  --fundo:#0E0E0E; --superficie:#1B1B1B; --realce:#222; --texto:#EFEAE0; --suave:#A39C91; --linha:#2E2E2E;
    --acento:#F07C47; --acento-texto:#F59A6F; --acento-suave:#2D1B12; --lateral:#0A0A0A; --lateral-ativo:#1E1E1E;
    --sobe:#5BD08A; --sobe-fundo:#16301F; --desce:#FF8F7E; --desce-fundo:#3A1B16; --neutro-fundo:#262626; --org:#6B655C; --sombra:0 1px 2px rgba(0,0,0,.4); color-scheme:dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) { --fundo:#0E0E0E; --superficie:#1B1B1B; --realce:#222; --texto:#EFEAE0; --suave:#A39C91; --linha:#2E2E2E;
    --acento:#F07C47; --acento-texto:#F59A6F; --acento-suave:#2D1B12; --lateral:#0A0A0A; --lateral-ativo:#1E1E1E;
    --sobe:#5BD08A; --sobe-fundo:#16301F; --desce:#FF8F7E; --desce-fundo:#3A1B16; --neutro-fundo:#262626; --org:#6B655C; --sombra:0 1px 2px rgba(0,0,0,.4); color-scheme:dark; }
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--fundo); color:var(--texto); font:15px/1.55 var(--corpo); -webkit-font-smoothing:antialiased; }
h1, h2, h3 { font-family:var(--titulos); line-height:1.2; margin:0; letter-spacing:-.01em; }
h1 { font-size:1.65rem; font-weight:800; } h2 { font-size:1rem; font-weight:700; }
a { color:var(--acento-texto); } small, .suave { color:var(--suave); }
.mono { font-family:var(--mono); } .sobre { font:500 .72rem/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--suave); margin:0 0 8px; }
.ico { width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

/* Estrutura com menu lateral */
.app { display:grid; grid-template-columns:240px 1fr; min-height:100vh; }
.lateral { background:var(--lateral); color:var(--lateral-texto); padding:22px 14px; display:flex; flex-direction:column; gap:22px; position:sticky; top:0; height:100vh; }
.lateral .marca { display:flex; align-items:center; gap:10px; padding:0 8px; text-decoration:none; color:#fff; }
.lateral .marca img { width:34px; height:34px; }
.lateral .marca b { font:800 1.15rem var(--titulos); letter-spacing:-.01em; } .lateral .marca span { display:block; font:400 .68rem var(--mono); color:#8f897e; letter-spacing:.06em; text-transform:uppercase; }
.lateral nav { display:flex; flex-direction:column; gap:2px; }
.lateral nav a { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:8px; color:var(--lateral-texto); text-decoration:none; font-weight:500; }
.lateral nav a:hover { background:var(--lateral-ativo); color:#fff; }
.lateral nav a[aria-current="page"] { background:var(--lateral-ativo); color:#fff; box-shadow:inset 3px 0 0 var(--acento); }
.lateral .usuario { margin-top:auto; border-top:1px solid #2a2a2a; padding:14px 8px 0; font-size:.85rem; }
.lateral .usuario a.perfil { display:flex; align-items:center; gap:10px; color:inherit; text-decoration:none; margin-bottom:6px; border-radius:8px; } .lateral .usuario a.perfil:hover b, .lateral .usuario a.perfil[aria-current="page"] b { color:var(--acento); }
.avatar { width:34px; height:34px; border-radius:50%; flex:none; object-fit:cover; display:grid; place-items:center; background:var(--acento); color:var(--sobre-acento); font:800 .95rem var(--titulos); }
.lateral .usuario b { display:block; color:#fff; font-weight:500; } .lateral .usuario small { color:#8f897e; }
.lateral button.sair { background:none; color:#b9b3a8; padding:6px 0 0; display:flex; gap:8px; align-items:center; font-size:.85rem; border-radius:0; } .lateral button.sair:hover { color:#fff; }
.conteudo { min-width:0; padding:28px clamp(16px,3vw,40px) 56px; max-width:1240px; width:100%; }

/* Cabeçalho de página */
.cabeca { display:flex; flex-wrap:wrap; gap:12px 20px; justify-content:space-between; align-items:flex-end; margin:0 0 20px; }
.cabeca .acoes-cabeca { display:flex; gap:10px; flex-wrap:wrap; }
.meses { display:inline-flex; align-items:center; gap:4px; background:var(--superficie); border:1px solid var(--linha); border-radius:999px; padding:4px; margin:0 0 20px; box-shadow:var(--sombra); }
.meses a, .meses span.v { padding:6px 14px; border-radius:999px; text-decoration:none; color:var(--suave); font-size:.85rem; }
.meses a:hover { background:var(--realce); color:var(--texto); } .meses strong { padding:6px 16px; font:700 .88rem var(--titulos); }
.meses .fim { opacity:.35; pointer-events:none; }

/* Cartões, KPIs, destaque */
.cartao { background:var(--superficie); border:1px solid var(--linha); border-radius:14px; padding:20px; margin:0 0 18px; box-shadow:var(--sombra); min-width:0; }
.cartao > h2 { margin-bottom:14px; display:flex; justify-content:space-between; align-items:baseline; gap:10px; } .cartao > h2 small { font:400 .78rem var(--corpo); }
.destaque { border-left:4px solid var(--acento); background:var(--superficie); border-radius:6px 14px 14px 6px; padding:16px 20px; margin:0 0 18px; font-size:1.02rem; line-height:1.6; box-shadow:var(--sombra); border-top:1px solid var(--linha); border-right:1px solid var(--linha); border-bottom:1px solid var(--linha); }
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin:0 0 18px; }
.kpi { background:var(--superficie); border:1px solid var(--linha); border-radius:14px; padding:16px 18px; box-shadow:var(--sombra); }
.kpi .rotulo { font:500 .7rem/1.2 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--suave); }
.kpi strong { display:block; font:800 2rem/1.15 var(--titulos); margin:8px 0 6px; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.kpi small { display:block; font-size:.8rem; min-height:1.3em; }
.kpi.principal { background:var(--lateral); border-color:var(--lateral); color:#fff; } .kpi.principal .rotulo, .kpi.principal small { color:#b9b3a8; }
.chip { display:inline-block; padding:2px 9px; border-radius:999px; font:500 .76rem var(--mono); white-space:nowrap; }
.chip.sobe { background:var(--sobe-fundo); color:var(--sobe); } .chip.desce { background:var(--desce-fundo); color:var(--desce); } .chip.neutro { background:var(--neutro-fundo); color:var(--suave); }
.kpi.principal .chip.neutro { background:#2a2a2a; color:#b9b3a8; } .kpi.principal .chip.sobe { background:#16301F; color:#5BD08A; } .kpi.principal .chip.desce { background:#3A1B16; color:#FF8F7E; }
.grade2 { display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:18px; } .grade2 > .cartao { margin:0 0 18px; }
.duas { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:18px; } .duas > .cartao { margin:0 0 18px; }

/* Gráficos */
.grafico { width:100%; height:auto; display:block; overflow:visible; }
.grafico .grade { stroke:var(--linha); stroke-width:1; } .grafico .eixo { fill:var(--suave); font:400 11px var(--mono); }
.grafico .pag { fill:var(--acento); } .grafico .org { fill:var(--org); } .grafico .vazio { fill:var(--linha); }
.grafico .col:not(.atual) .pag { opacity:.62; } .grafico .col:not(.atual) .org { opacity:.7; }
.grafico .valor { fill:var(--texto); font:700 14px var(--titulos); } .grafico .mes { fill:var(--suave); font:500 12px var(--mono); } .grafico .atual .mes { fill:var(--texto); font-weight:500; }
.grafico .cpl { fill:var(--suave); font:400 11px var(--mono); }
.legenda { display:flex; flex-wrap:wrap; gap:6px 16px; font-size:.8rem; color:var(--suave); margin:10px 0 0; } .legenda i { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; vertical-align:-1px; }
.barra { display:grid; grid-template-columns:minmax(84px,34%) 1fr 64px; gap:10px; align-items:center; margin:9px 0; font-size:.9rem; }
.barra span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .barra b { text-align:right; font:500 .85rem var(--mono); } .barra b small { font-weight:400; }
.trilho { background:var(--neutro-fundo); border-radius:6px; height:10px; } .trilho i { display:block; height:100%; border-radius:6px; background:var(--acento); min-width:3px; }

/* Tabelas */
table { width:100%; border-collapse:collapse; font-size:.9rem; } th, td { text-align:left; padding:10px 10px; border-bottom:1px solid var(--linha); vertical-align:middle; }
th { font:500 .7rem var(--mono); letter-spacing:.07em; text-transform:uppercase; color:var(--suave); white-space:nowrap; } tbody tr:hover { background:var(--realce); } tr:last-child td { border-bottom:0; }
.num { text-align:right; font-variant-numeric:tabular-nums; } td.num { font-family:var(--mono); font-size:.86rem; } tfoot td { font-weight:600; border-top:2px solid var(--linha); background:var(--realce); }
.rolar { overflow-x:auto; margin:0 -4px; padding:0 4px; } .corta { max-width:230px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
td a.nome { color:var(--texto); font-weight:600; text-decoration:none; } td a.nome:hover { color:var(--acento-texto); text-decoration:underline; }
.mini { display:block; background:var(--neutro-fundo); height:6px; border-radius:4px; margin-top:6px; width:100%; } .mini i { display:block; height:100%; background:var(--acento); border-radius:4px; }
.atencao { list-style:none; margin:0; padding:0; } .atencao li { display:flex; gap:10px; align-items:baseline; padding:9px 0; border-bottom:1px solid var(--linha); } .atencao li:last-child { border-bottom:0; }
.atencao .tag { font:500 .68rem var(--mono); text-transform:uppercase; letter-spacing:.06em; background:var(--acento-suave); color:var(--acento-texto); padding:2px 8px; border-radius:999px; white-space:nowrap; }
.vazio-msg { color:var(--suave); padding:18px 0; text-align:center; }

/* Formulários e botões */
label { display:block; font-size:.82rem; color:var(--suave); font-weight:500; } label input, label select, label textarea { display:block; width:100%; margin-top:6px; }
input, select, textarea { font:inherit; color:var(--texto); background:var(--superficie); border:1px solid var(--linha); border-radius:9px; padding:9px 12px; transition:border-color .15s, box-shadow .15s; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline:2px solid var(--acento); outline-offset:1px; border-color:var(--acento); }
button, .botao { font:600 .88rem var(--corpo); background:var(--acento); color:var(--sobre-acento); border:0; border-radius:9px; padding:10px 18px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:8px; transition:filter .15s; }
button:hover, .botao:hover { filter:brightness(1.07); } .botao.sec, button.sec { background:var(--superficie); color:var(--texto); border:1px solid var(--linha); box-shadow:var(--sombra); }
button.perigo { background:none; color:var(--desce); padding:0; text-decoration:underline; font-weight:500; }
.linha { display:flex; flex-wrap:wrap; gap:14px; align-items:end; } .linha label { flex:1 1 170px; } .linha.filtros label { flex:1 1 140px; }
.grade { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; } .larga { grid-column:1/-1; }
.marca-check { display:flex; align-items:center; gap:8px; color:var(--texto); } .marca-check input { width:auto; margin:0; accent-color:var(--acento); }
input.moeda { text-align:right; font-family:var(--mono); min-width:110px; }
.aviso { padding:12px 16px; border-radius:10px; border:1px solid var(--linha); background:var(--superficie); margin:0 0 18px; } .aviso.ok { border-color:var(--sobe); background:var(--sobe-fundo); color:var(--sobe); } .aviso.erro { border-color:var(--desce); background:var(--desce-fundo); color:var(--desce); }
code { font-family:var(--mono); font-size:.85rem; word-break:break-all; }
.link-novo { background:var(--realce); border:1px dashed var(--acento); border-radius:10px; padding:12px 14px; margin:0 0 14px; }

/* Entrada (login) e relatório do cliente */
.simples { background:var(--fundo); }
.entrada { min-height:100vh; display:grid; grid-template-columns:1.1fr 1fr; }
.entrada .faixa { background:var(--lateral); color:#fff; padding:clamp(28px,6vw,72px); display:flex; flex-direction:column; justify-content:space-between; gap:40px; position:relative; overflow:hidden; }
.entrada .faixa::after { content:""; position:absolute; right:-120px; bottom:-120px; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle at 30% 30%, rgba(224,106,53,.55), rgba(224,106,53,0) 68%); }
.assinatura { display:inline-flex; align-items:center; gap:12px; color:#fff; text-decoration:none; } .assinatura b { font:800 1.3rem var(--titulos); letter-spacing:-.01em; } .assinatura span { font-weight:700; color:var(--acento); } .assinatura.grande img { width:64px; height:64px; } .assinatura.grande b { font-size:1.9rem; }
.entrada .faixa .assinatura img { max-width:none; } .entrada .faixa p { font:800 clamp(1.5rem,3vw,2.2rem)/1.2 var(--titulos); max-width:16ch; margin:0; z-index:1; } .entrada .faixa small { color:#8f897e; font-family:var(--mono); letter-spacing:.06em; z-index:1; }
.entrada .formulario { display:flex; align-items:center; justify-content:center; padding:32px 20px; } .entrada .formulario .caixa { width:100%; max-width:380px; } .entrada h1 { margin:0 0 6px; } .entrada form { display:grid; gap:14px; margin-top:20px; } .entrada button { justify-content:center; padding:12px; }
.pagina-erro { max-width:420px; margin:14vh auto; text-align:center; padding:0 20px; } .pagina-erro h1 { font-size:4rem; color:var(--acento); }
.topo-publico { background:var(--lateral); color:#fff; } .topo-publico .in { max-width:1100px; margin:0 auto; padding:22px clamp(16px,3vw,40px); display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.topo-publico .assinatura img { width:36px; height:36px; } .topo-publico .quem { text-align:right; } .topo-publico .quem small { color:#8f897e; font-family:var(--mono); text-transform:uppercase; letter-spacing:.07em; font-size:.68rem; }
.topo-publico .quem b { display:block; font:800 1.25rem var(--titulos); }
.publico { max-width:1100px; margin:0 auto; padding:28px clamp(16px,3vw,40px) 40px; } .rodape { text-align:center; margin:30px 0 10px; font-size:.82rem; color:var(--suave); }

.opcoes { display:flex; flex-wrap:wrap; gap:10px 22px; margin:12px 0 16px; } .opcoes label { display:flex; align-items:center; gap:8px; color:var(--texto); font-size:.9rem; } .opcoes input { width:auto; margin:0; accent-color:var(--acento); }
.conta-foto { display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-bottom:18px; } .conta-foto .avatar { width:72px; height:72px; font-size:1.8rem; }
.grade-conta { display:grid; gap:18px; max-width:640px; } .grade-conta form { display:grid; gap:14px; } .grade-conta .acoes { display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
@media (max-width:900px) {
  .app { grid-template-columns:1fr; }
  .lateral { position:static; height:auto; flex-direction:row; flex-wrap:wrap; align-items:center; padding:10px 12px; gap:8px 14px; }
  .lateral nav { flex-direction:row; overflow-x:auto; flex:1 1 100%; order:3; } .lateral nav a { padding:8px 12px; white-space:nowrap; }
  .lateral .usuario { margin:0 0 0 auto; border:0; padding:0; display:flex; align-items:center; gap:12px; } .lateral .usuario small { display:none; }
  .lateral .marca span { display:none; }
  .grade2 { grid-template-columns:1fr; } .entrada { grid-template-columns:1fr; } .entrada .faixa { padding:28px; gap:24px; } .entrada .faixa::after { display:none; }
  .kpi strong { font-size:1.7rem; }
}
@media print {
  @page { margin:14mm; }
  .lateral, .meses, .semprint, .acoes-cabeca, .topo-publico .quem small { display:none !important; }
  .app { display:block; } .conteudo, .publico { padding:0; max-width:none; } body { background:#fff; color:#000; font-size:12px; }
  .cartao, .kpi, .destaque { box-shadow:none; break-inside:avoid; border-color:#ccc; background:#fff; } .kpi.principal { background:#f1ede6; color:#000; border-color:#ccc; } .kpi.principal .rotulo, .kpi.principal small { color:#555; }
  .topo-publico { background:#fff; color:#000; border-bottom:2px solid #E06A35; } .topo-publico .assinatura { color:#000; } .topo-publico .assinatura img { content:url(carcara-lab-icone.svg); } .rodape { color:#555; }
  .grade2 { grid-template-columns:3fr 2fr; }
}
pre.codigo { background:var(--realce); border:1px solid var(--linha); border-radius:10px; padding:14px; overflow-x:auto; font:400 .82rem/1.5 var(--mono); margin:8px 0 0; }