:root{
  /* Paleta institucional LB Consultoria — verde + azul-marinho + dourado */
  --bg:#F3F6F2; --surface:#FFFFFF; --surface-2:#F6F9F4;
  --ink:#16233A; --ink-soft:#414B5C; --muted:#6B7787;
  --line:#E6EAF1; --line-strong:#D3DAE6;
  --primary:#1E3A5F; --primary-soft:#2C4A72; --primary-deep:#14294A;
  --green:#4D9E3A; --green-dark:#3A7D2C; --green-tint:#E8F4E2; --green-bright:#8FD478;
  --accent:#4D9E3A; --gold:#B98A2F; --gold-tint:#F7EFDD;
  --s1:#3A7D2C; --s2:#2C5282; --s3:#B98A2F;
  --bio:#4D9E3A; --movel:#2C5282; --fixa:#B98A2F;
  --danger:#C0392B; --warn-bg:#FDF4E1; --warn-line:#ECD7A3;
  --radius:12px; --shadow:0 1px 2px rgba(20,41,74,.05),0 6px 20px rgba(20,41,74,.06);
}
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--ink);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
.tnum{font-variant-numeric:tabular-nums}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px 80px}

/* ---------- cabeçalho ---------- */
header.app{background:linear-gradient(118deg,#1E3A5F 0%,#163050 55%,#14294A 100%);color:#EAF0F7;border-bottom:3px solid var(--green);position:relative}
header.app::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:3px;background:linear-gradient(90deg,var(--green) 0%,var(--green-bright) 45%,var(--gold) 100%);opacity:.85}
header.app .inner{max-width:1200px;margin:0 auto;padding:24px 20px 22px;display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;position:relative;z-index:1}
header.app .eyebrow{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#9FB3CC;font-weight:600;margin:0 0 6px}
header.app h1{font-size:26px;font-weight:800;margin:0;letter-spacing:.04em;line-height:1.15;color:#fff}
header.app h1 .prod{color:var(--green-bright)}
header.app p.sub{margin:8px 0 0;font-size:13px;color:#B6C6DC;max-width:620px}
header.app .badge-col{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
header.app .scope-badge{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:9px;padding:8px 12px;font-size:12px;color:#C7D5E8;text-align:right}
header.app .scope-badge strong{color:#fff;display:block;font-size:13px}
header.app .brand-block{min-width:0}
header.app .app-logo{display:block;height:40px;width:auto;max-width:260px;background:#fff;padding:6px 12px;border-radius:9px;margin:0 0 12px;box-shadow:0 2px 10px rgba(0,0,0,.2)}
.login-card .login-logo{display:block;height:46px;width:auto;max-width:220px;margin:0 auto 18px}

.save-status{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:#B6C6DC;font-weight:600}
.save-status .dot{width:8px;height:8px;border-radius:50%;background:#6CC254;transition:background .2s}
.save-status[data-state="saving"] .dot{background:#E0A94F;animation:savepulse 1s ease-in-out infinite}
.save-status[data-state="error"] .dot{background:#EF8A8A;animation:savepulse .7s ease-in-out infinite}
.save-status[data-state="error"]{color:#F3C9C9}
@keyframes savepulse{0%,100%{opacity:1}50%{opacity:.35}}

/* minmax(0,1fr) e não 1fr: "1fr" equivale a minmax(auto,1fr), e o auto impede o item de
   encolher abaixo da largura mínima do conteúdo. Bastava um <select> com opção longa para
   o card inteiro passar de 1600px e a página ganhar rolagem horizontal no celular. */
.grid{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin-top:22px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);min-width:0}
.card .body,.card .head{min-width:0}
.card .head{padding:15px 18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.card .head h2{font-size:14px;font-weight:700;margin:0;letter-spacing:-.01em;display:flex;align-items:center;gap:9px}
.card .head .num{background:var(--primary);color:#fff;width:23px;height:23px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;box-shadow:0 1px 3px rgba(30,58,95,.3)}
.card .body{padding:18px}

.config-row{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-end}
.field{display:flex;flex-direction:column;gap:5px}
/* .rotulo é título de seção, não rótulo de campo: mesma aparência do label, mas sem
   fingir para o leitor de tela que existe um campo associado. */
.field label,.field .rotulo{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft)}
/* max-width:100% para o campo nunca ser mais largo que o card que o contém: um <select>
   com opção longa media 476px e arrastava a página toda com ele. */
.field input,.field select{font:inherit;padding:9px 11px;border:1px solid var(--line-strong);border-radius:8px;background:#fff;color:var(--ink);min-width:140px;max-width:100%;transition:border-color .12s,box-shadow .12s}
.field input:focus,.field select:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(77,158,58,.18)}
.field.small input,.field.small select{min-width:108px}

button{font:inherit;cursor:pointer;border:none;border-radius:8px;padding:9px 15px;font-weight:600;transition:filter .12s,background .12s,box-shadow .12s}
button:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.btn-primary{background:var(--green);color:#fff;box-shadow:0 1px 2px rgba(58,125,44,.35)}.btn-primary:hover{background:var(--green-dark)}
.btn-ghost{background:#fff;color:var(--primary);border:1px solid var(--line-strong)}.btn-ghost:hover{background:var(--green-tint);border-color:var(--green);color:var(--green-dark)}
.btn-danger{background:#fff;color:var(--danger);border:1px solid #E7C3BE}.btn-danger:hover{background:#FBEEEC}
.btn-sm{padding:6px 10px;font-size:12px}
.btn-row{display:flex;gap:10px;flex-wrap:wrap}
.toggle-set{display:flex;gap:6px;flex-wrap:wrap}
.toggle{font-size:12px;padding:5px 11px;border-radius:20px;border:1px solid var(--line-strong);background:#fff;color:var(--ink-soft);cursor:pointer;font-weight:600;display:inline-flex;align-items:center;gap:6px}
.toggle .dot{width:9px;height:9px;border-radius:50%}
.toggle.on{background:var(--green-tint);color:var(--ink);border-color:var(--green)}
.toggle.off{opacity:.5}

/* Diz de quantos anos os cartões falam. Sem isso, ver 113 t na tela e 68 t no relatório
   parece divergência de cálculo, quando é diferença de recorte. */
.escopo-periodo{margin:22px 0 10px;font-size:12.5px;color:var(--ink-soft);
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--primary-soft);
  border-radius:9px;padding:9px 13px;line-height:1.5}
.escopo-periodo strong{color:var(--ink)}
.kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:13px}
@media(max-width:1100px){.kpis{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.kpis{grid-template-columns:repeat(2,1fr)}}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:15px 15px 13px;box-shadow:var(--shadow)}
.kpi .lbl{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 8px}
.kpi .val{font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1}
.kpi .unit{font-size:12px;font-weight:600;color:var(--ink-soft);margin-left:3px}
.kpi .foot{font-size:11.5px;color:var(--ink-soft);margin-top:7px}
.kpi.total{border-left:4px solid var(--primary)} .kpi.total .val{color:var(--primary)}
.kpi.s1{border-left:4px solid var(--s1)} .kpi.s1 .val{color:var(--s1)}
.kpi.s2{border-left:4px solid var(--s2)} .kpi.s2 .val{color:var(--s2)}
.kpi.s3{border-left:4px solid var(--s3)} .kpi.s3 .val{color:var(--s3)}
.kpi.bio{border-left:4px solid var(--bio)} .kpi.bio .val{color:var(--bio)}
.kpi.ref{border-left:4px solid var(--primary-soft)} .kpi.ref .val{color:var(--primary-soft)}

/* Nove colunas: descrição, filial, mês, escopo, categoria, fonte, tipo, quantidade,
   unidade e o botão. Estava como atributo style no HTML, o que impedia qualquer media
   query de reorganizar o formulário no celular: estilo inline vence a folha de estilo. */
/* Nove colunas: descrição, filial, mês, escopo, categoria, fonte, tipo, quantidade,
   unidade e o botão. Estava como atributo style no HTML, o que impedia qualquer media
   query de reorganizar o formulário no celular: estilo inline vence a folha de estilo.
   minmax(0,Xfr) porque "Xfr" sozinho tem mínimo automático e respeita o min-width dos
   campos: a soma passava de 1200px e o formulário estourava o card já num notebook. */
.entry-grid{display:grid;gap:11px;align-items:end;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.8fr) minmax(0,1fr) minmax(0,.8fr)
    minmax(0,1.3fr) minmax(0,.7fr) minmax(0,.6fr) minmax(0,.8fr) auto}
.entry-grid .field{min-width:0}
.entry-grid .field input,.entry-grid .field select{min-width:0}
@media(max-width:1000px){.entry-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

table{width:100%;border-collapse:collapse;font-size:13px}
thead th{text-align:left;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);font-weight:600;padding:10px 9px;border-bottom:2px solid var(--line-strong);white-space:nowrap}
thead th.r,tbody td.r{text-align:right}
tbody td{padding:9px 9px;border-bottom:1px solid var(--line);vertical-align:middle}
/* th em tbody é usado como cabeçalho de LINHA (scope=row), para o leitor de tela saber a
   que combustível cada célula pertence. Visualmente tem de parecer uma célula comum. */
tbody th{padding:9px 9px;border-bottom:1px solid var(--line);vertical-align:middle;
  text-align:left;font-weight:400;font-size:inherit;color:inherit;text-transform:none;letter-spacing:normal}
tbody tr:hover{background:var(--surface-2)}
/* legenda da tabela: existe para o leitor de tela, não precisa ocupar espaço na tela */
table caption{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
tfoot td{padding:11px 9px;font-weight:700;border-top:2px solid var(--line-strong)}
.tbl-scroll{overflow-x:auto}
.pill{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:600}
.pill.mov{background:#E4EDF6;color:#2C5282}.pill.fix{background:#F5ECD6;color:#7A5A1C}
.pill.e1{background:#E8F4E2;color:#3A7D2C}.pill.e2{background:#E4EDF6;color:#24507D}.pill.e3{background:#F5ECD6;color:#7A5A1C}
.icon-btn{background:none;border:none;color:var(--ink-soft);cursor:pointer;font-size:15px;padding:3px 6px;border-radius:6px;line-height:1}
.icon-btn:hover{background:#F0E6E4;color:var(--danger)}
/* comprovante do lançamento: apagado quando não há anexo, verde e sólido quando há */
.evid-btn{background:none;border:1px solid transparent;color:var(--muted);cursor:pointer;font-size:13px;
  padding:3px 8px;border-radius:20px;line-height:1.4;font-weight:600;opacity:.55;white-space:nowrap}
.evid-btn:hover{background:var(--green-tint);border-color:var(--green);color:var(--green-dark);opacity:1}
.evid-btn.tem{background:var(--green-tint);border-color:var(--green);color:var(--green-dark);opacity:1}

table.factors input{width:88px;font:inherit;padding:5px 6px;border:1px solid var(--line);border-radius:6px;text-align:right;font-variant-numeric:tabular-nums}
table.factors input.name{width:150px;text-align:left}
table.factors input.frac{width:60px}
table.factors select{font:inherit;padding:4px 6px;border:1px solid var(--line);border-radius:6px}
table.factors input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 2px rgba(77,158,58,.2)}
table.factors td,table.factors tbody th{padding:6px 6px}
table.factors thead th{font-size:10px}
table.factors th.grp-foss{background:#EEF2F8;color:#3A4A5E;text-align:center;border-bottom:1px solid var(--line)}
table.factors th.grp-bio{background:#E8F4E2;color:#2F5C1F;text-align:center;border-bottom:1px solid var(--line)}
table.factors td.sep-bio{border-left:2px solid #CBE0BF}
table.factors th.sep-bio{border-left:2px solid #CBE0BF}

.split{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:820px){.split{grid-template-columns:1fr}}
.bar-row{display:grid;grid-template-columns:150px 1fr 120px;align-items:center;gap:10px;margin-bottom:10px}
.bar-row .lbl{font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-track{background:var(--line);border-radius:6px;height:18px;overflow:hidden}
.bar-fill{height:100%;border-radius:6px;transition:width .35s ease}
.bar-row .v{font-size:12px;text-align:right;color:var(--ink-soft);font-variant-numeric:tabular-nums}

.chart-box{width:100%;overflow-x:auto}
svg.chart{display:block;width:100%;height:auto;min-width:520px}
.chart-empty{text-align:center;color:var(--ink-soft);padding:30px 10px;font-size:13px}

.note{background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:8px;padding:12px 14px;font-size:12.5px;color:#6E561A;line-height:1.55}
.note strong{color:#5A4710}
.info{background:#EEF2F8;border:1px solid #D5E0EE;border-radius:8px;padding:12px 14px;font-size:12.5px;color:#264A6E;line-height:1.55}
.note-box{background:#FBFCFE;border:1px solid var(--line);border-left:3px solid var(--primary);border-radius:8px;padding:13px 15px;font-size:12.5px;line-height:1.65;color:var(--ink);white-space:pre-wrap}
.ok{background:var(--green-tint);border:1px solid #C3E0B6;border-radius:8px;padding:12px 14px;font-size:12.5px;color:#2C6019;line-height:1.55}
.muted{color:var(--ink-soft);font-size:12.5px}
details.acc{border:1px solid var(--line);border-radius:8px;margin-top:14px;background:#FBFCFE}
details.acc summary{padding:11px 14px;font-weight:600;cursor:pointer;font-size:13px;list-style:none;display:flex;justify-content:space-between;align-items:center}
details.acc summary::-webkit-details-marker{display:none}
details.acc summary::after{content:"\25BE";color:var(--ink-soft);transition:transform .2s}
details.acc[open] summary::after{transform:rotate(180deg)}
details.acc .acc-body{padding:0 14px 16px}
.empty{text-align:center;padding:34px 16px;color:var(--ink-soft)}
.empty .big{font-size:15px;font-weight:600;color:var(--ink);margin-bottom:4px}
.section-label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 12px}
.sub-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:16px;flex-wrap:wrap}
.sub-tab{padding:8px 14px;font-size:13px;font-weight:600;color:var(--ink-soft);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .12s}
.sub-tab:hover{color:var(--primary)}
.sub-tab.active{color:var(--primary);border-bottom-color:var(--green)}
footer.meta{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);font-size:11.5px;color:var(--ink-soft);line-height:1.6}

/* ---------- login ---------- */
.login-body{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;
  background:radial-gradient(90% 85% at 88% 100%,rgba(77,158,58,.20),transparent 58%),
             linear-gradient(158deg,#1E3A5F 0%,#163050 55%,#122340 100%)}
.login-card{background:var(--surface);border-radius:16px;box-shadow:0 18px 50px rgba(10,22,44,.4);padding:34px 30px;width:100%;max-width:400px;border-top:4px solid var(--green)}
.login-card .eyebrow{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--green-dark);font-weight:700;margin:0 0 8px}
.login-card h1{font-size:24px;font-weight:800;margin:0 0 6px;letter-spacing:.02em;color:var(--ink)}
.login-sub{font-size:13px;color:var(--ink-soft);margin:0 0 22px;line-height:1.5}
.login-card form{display:flex;flex-direction:column;gap:15px}
.login-card .field input{min-width:0;width:100%}
.login-hint{margin:18px 0 0;text-align:center}

/* ---------- barra de usuário / empresa ---------- */
.userbar{background:var(--primary-soft);color:#EAF0F7;border-bottom:1px solid rgba(255,255,255,.12)}
.userbar .inner{max-width:1200px;margin:0 auto;padding:10px 20px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.userbar .empresa-pick{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.userbar .empresa-pick label{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#B6C6DC;font-weight:600}
.userbar select{font:inherit;font-size:13px;padding:6px 10px;border-radius:7px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.1);color:#fff;font-weight:600;min-width:200px}
.userbar select option{color:#16233A}
.userbar .who{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px}
.userbar .who .uname{font-weight:700;color:#fff}
.role-badge{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:3px 9px;border-radius:20px;background:rgba(255,255,255,.15);color:#EAF0F7}
.role-badge.admin{background:var(--gold);color:#fff}
.role-badge.consultor{background:#2C5282;color:#fff}
.role-badge.cliente{background:var(--green);color:#fff}
.role-badge.filial{background:rgba(255,255,255,.18);color:#fff;border:1px solid rgba(255,255,255,.3);text-transform:none;letter-spacing:0}
.role-badge.verificador{background:#6B46C1;color:#fff}

/* verificador: faixa de aviso e ocultação dos controles de escrita */
.aviso-leitura{margin-top:22px;padding:12px 16px;border-radius:10px;background:#F3EDFF;border:1px solid #D6C7F5;color:#452C7A;font-size:13px;line-height:1.55}
body.somente-leitura .card.admin-only,
body.somente-leitura .entry-section form,
body.somente-leitura #btnTravar,
body.somente-leitura [data-destravar],
body.somente-leitura .btn-danger{display:none !important}
body.somente-leitura input:not([type=search]),
body.somente-leitura select,
body.somente-leitura textarea{pointer-events:none;background:#F7F8FA;color:#5A6472}
.userbar .btn-logout{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.25);padding:6px 13px;font-size:12.5px}
.userbar .btn-logout:hover{background:rgba(255,255,255,.22)}

/* ---------- painel de administração ---------- */
.admin-only{display:none}
body.is-admin .admin-only{display:block}
.card.admin .head h2 .num{background:var(--gold)}

/* Recolher o painel de administração. Fecha a cada carregamento de propósito: a lista de
   empresas clientes não deve aparecer quando a tela é aberta para uma demonstração. */
.btn-recolher{margin-left:auto;display:inline-flex;align-items:center;gap:6px;background:#fff;
  border:1px solid var(--line);color:var(--ink);border-radius:8px;padding:6px 12px;
  font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.btn-recolher:hover{background:#F3F5F8;border-color:#C9D2DE}
.btn-recolher:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.btn-recolher .seta{font-size:10px;transition:transform .15s}
.card:not(.recolhido) > .head > .btn-recolher .seta{transform:rotate(90deg)}
.card.admin.recolhido .head{border-bottom:none}
.status-pill{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:600}
.status-pill.ativo{background:var(--green-tint);color:#2C6019}
.status-pill.inativo{background:#F5ECD6;color:#7A5A1C}
.status-pill.prospecto{background:#E4EDF6;color:#24507D}
.status-pill.bloqueado{background:#FBEEEC;color:#A02617}
.admin-actions{display:flex;gap:6px;flex-wrap:wrap}
.link-btn{background:none;border:none;color:var(--primary);cursor:pointer;font-size:12.5px;font-weight:600;padding:3px 6px;border-radius:6px;text-decoration:underline}
.link-btn:hover{background:var(--green-tint)}
.link-btn.danger{color:var(--danger)}

/* ---------- modal ---------- */
.modal-back{position:fixed;inset:0;background:rgba(14,26,48,.55);display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;z-index:50;overflow-y:auto}
.modal{background:var(--surface);border-radius:14px;box-shadow:0 18px 55px rgba(10,22,44,.35);width:100%;max-width:560px;border-top:4px solid var(--green)}
.modal .m-head{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.modal .m-head h3{margin:0;font-size:16px;font-weight:700}
.modal .m-body{padding:20px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.modal .m-body .full{grid-column:1/-1}
.modal .m-foot{padding:14px 20px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px}
.modal .field input,.modal .field select,.modal .field textarea{width:100%;min-width:0}
.modal .field textarea{font:inherit;padding:9px 11px;border:1px solid var(--line-strong);border-radius:8px;resize:vertical;min-height:60px}
.modal .field textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(77,158,58,.18)}
.modal-err{grid-column:1/-1}
@media(max-width:560px){.modal .m-body{grid-template-columns:1fr}}

/* estado de carregamento inicial (evita piscar o app antes da checagem de login) */
body.booting .wrap,body.booting .userbar{visibility:hidden}

/* ================= CELULAR =================
   Duas faixas: tablet/celular grande (≤700px) e celular estreito (≤480px). A regra é uma
   só: nada de rolagem horizontal no corpo da página. Tabela larga rola dentro do próprio
   quadro, nunca arrastando a página. Testado a 360, 390 e 420px. */
@media(max-width:700px){
  .wrap{padding:0 14px 60px}
  header.app .inner{padding:18px 14px 16px;align-items:flex-start}
  header.app h1{font-size:22px}
  header.app p.sub{font-size:12.5px}
  header.app .badge-col{align-items:flex-start}
  header.app .scope-badge{text-align:left}
  .userbar .inner{padding:9px 14px;gap:10px}
  .userbar select{min-width:0;width:100%}
  .userbar .empresa-pick{flex:1 1 100%}
  .card .head,.card .body{padding-left:14px;padding-right:14px}
  /* rótulo do card acima do botão, para o botão não comprimir o título */
  .card .head{align-items:flex-start}
  .config-row{flex-direction:column;align-items:stretch;gap:13px}
  .config-row .field,.field.small{width:100%}
  /* .field.small tem especificidade maior que .field, então precisa ser citada aqui:
     senão o min-width:108px dela sobrevive e a grade volta a estourar. */
  .field input,.field select,
  .field.small input,.field.small select,
  .entry-grid .field input,.entry-grid .field select{min-width:0;width:100%}
  .entry-grid .field{min-width:0}
  .entry-grid{grid-template-columns:1fr 1fr;gap:10px}
  .split{grid-template-columns:minmax(0,1fr)}
  /* barra de proporção: rótulo em cima, barra e valor embaixo */
  .bar-row{grid-template-columns:1fr auto;gap:4px 8px}
  .bar-row .lbl{grid-column:1/-1;white-space:normal}
  .sub-tabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
  .sub-tab{white-space:nowrap}
  .modal-back{padding:16px 10px}
}

@media(max-width:480px){
  .kpis{grid-template-columns:minmax(0,1fr);gap:10px}
  .entry-grid{grid-template-columns:minmax(0,1fr)}
  .grid{gap:14px}
  header.app h1{font-size:20px}
  header.app .app-logo{height:34px}
  .card .head h2{font-size:13.5px}
  /* alvos de toque: um ✕ de 21px é pequeno demais para o dedo */
  .icon-btn{padding:8px 10px;font-size:17px}
  .link-btn{padding:7px 8px}
  .btn-sm{padding:8px 12px}
  .toggle{padding:7px 13px}
  /* a tabela larga ganha um aviso de que rola para o lado */
  .tbl-scroll{position:relative}
  .tbl-scroll::after{content:"";position:absolute;top:0;right:0;bottom:0;width:22px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.92));pointer-events:none}
}

/* Foco visível em tudo que recebe teclado. Sem isto, quem navega por Tab não sabe onde
   está, o que é falha de acessibilidade tão grave quanto a falta de rótulo. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--green);outline-offset:2px}
.sub-tab:focus-visible{outline:2px solid var(--green);outline-offset:-2px}

/* Atalho para saltar direto ao conteúdo, primeiro item do Tab. */
.pular-para-conteudo{position:absolute;left:-9999px;top:0;z-index:100;background:var(--green);
  color:#fff;padding:10px 16px;border-radius:0 0 8px 0;font-weight:700;font-size:13px;text-decoration:none}
.pular-para-conteudo:focus{left:0}

/* Quem prefere menos animação não deve receber transição nenhuma. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}

@media print{
  header.app{background:#fff;color:#000;border-bottom:2px solid #000}
  header.app::after{display:none}
  header.app .eyebrow,header.app h1,header.app h1 .prod,header.app p.sub{color:#000}
  .btn-row,.entry-section,.config-actions,.icon-btn,details.acc summary::after,.sub-tabs,.save-status,.userbar,.card.admin{display:none!important}
  .card{box-shadow:none;border:1px solid #ccc;break-inside:avoid}
  .tab-pane{display:block!important}
  body{background:#fff}
}