:root{
--bg:#f0f1f5; --sup:#fff; --sup2:#f7f8fa; --sup3:#fafbfc;
--bd:#d9dce2; --bd2:#eceef2;
--tx:#1c2436; --tx2:#475569; --tf:#64748b; --tf2:#5f6b7a;
--pri:#5e9f1e; --pri-esc:#4d8418; --pri-sol:#436e15; --pri-sol-h:#35590f;
--pri-fr:#eef6e4; --pri-bd:#cfe6b3;
--ok-bg:#e7f4e4; --ok-tx:#2f6d1d; --ok-bd:#c9e4bd;
--am-bg:#fdf1dc; --am-tx:#7a4e05; --am-bd:#f2ddb6;
--vm-bg:#fdeaea; --vm-tx:#a02323; --vm-bd:#f5cccc;
--az-bg:#e8eefc; --az-tx:#2b4d9e; --az-bd:#ccd9f5;
--cz-bg:#eef0f4; --cz-tx:#475569; --cz-bd:#dde1e8;
--anel:#6ea63a;
--r:8px; --rp:6px;
--som:0 1px 2px rgba(16,24,40,.06);
--som2:0 1px 3px rgba(16,24,40,.10), 0 1px 2px rgba(16,24,40,.06);
--som3:0 8px 24px rgba(16,24,40,.10), 0 2px 6px rgba(16,24,40,.06);
--fonte:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--sobre-pri:#fff; --sobre-pri-2:#e2f0d2; --pri-tx:#3d6613; --av-bg:#dfeacd; --av-bd:#cbe0b0; --ic:#8a94a4; --ic2:#b6bdc9; --bd-forte:#c5cad3; --sup-press:#eef0f4; --foco:rgba(94,159,30,.16); --rolagem:rgba(15,23,42,.14); --veu:rgba(16,24,40,.44); --vm-forte:#c8362f; --vm-tx2:#8a2020; --am-forte:#d59a2a; --am-tx2:#6b4405; --am-fundo:#fffaf1; --az-forte:#7d93c4; --az-tx2:#33437a; --ok-tx2:#2a5f1a; --graf:#b3d68c; --graf-h:#9ccb6c; --graf-linha:#97a5b4; --login-bg:#e4eedb; --mer-sub:#dcecca; --mer-feito:#fbfefa; --mer-realce:rgba(255,255,255,.18); --pri-noite:#2f5410;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){color-scheme:dark;--bg:#0e1116;--sup:#161a21;--sup2:#1c212a;--sup3:#181c24;--bd:#2b313c;--bd2:#232833;--tx:#e7eaf0;--tx2:#b8c0cd;--tf:#8f99aa;--tf2:#98a2b3;--pri:#7cc242;--pri-esc:#8fd151;--pri-sol:#46791a;--pri-sol-h:#55901f;--pri-fr:#1e2a15;--pri-bd:#3a5423;--ok-bg:#15261a;--ok-tx:#94d6a0;--ok-bd:#28452f;--am-bg:#2a2112;--am-tx:#f0c274;--am-bd:#4d3b17;--vm-bg:#2d1618;--vm-tx:#f29c9c;--vm-bd:#532628;--az-bg:#15203a;--az-tx:#a2baf0;--az-bd:#2a3a66;--cz-bg:#1f242d;--cz-tx:#b8c0cd;--cz-bd:#2e3541;--anel:#8fd151;--som:0 1px 2px rgba(0,0,0,.45);--som2:0 1px 3px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4);--som3:0 8px 24px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.4);--sobre-pri:#fff;--sobre-pri-2:#d8edc2;--pri-tx:#a8d974;--av-bg:#243119;--av-bd:#3a5423;--ic:#7f899a;--ic2:#5e6778;--bd-forte:#3b4351;--sup-press:#232933;--foco:rgba(124,194,66,.28);--rolagem:rgba(0,0,0,.55);--veu:rgba(0,0,0,.62);--vm-forte:#e25757;--vm-tx2:#f6b3b3;--am-forte:#e3a83d;--am-tx2:#f4cf88;--am-fundo:#261f12;--az-forte:#8ca4da;--az-tx2:#b8caf3;--ok-tx2:#a2ddad;--graf:#5e8f33;--graf-h:#76a94a;--graf-linha:#6c7789;--login-bg:#131a11;--pri-noite:#27450d;--mer-sub:#cfe3b8;--mer-feito:#17201a;--mer-realce:rgba(255,255,255,.18);}}
:root[data-theme="dark"]{color-scheme:dark;--bg:#0e1116;--sup:#161a21;--sup2:#1c212a;--sup3:#181c24;--bd:#2b313c;--bd2:#232833;--tx:#e7eaf0;--tx2:#b8c0cd;--tf:#8f99aa;--tf2:#98a2b3;--pri:#7cc242;--pri-esc:#8fd151;--pri-sol:#46791a;--pri-sol-h:#55901f;--pri-fr:#1e2a15;--pri-bd:#3a5423;--ok-bg:#15261a;--ok-tx:#94d6a0;--ok-bd:#28452f;--am-bg:#2a2112;--am-tx:#f0c274;--am-bd:#4d3b17;--vm-bg:#2d1618;--vm-tx:#f29c9c;--vm-bd:#532628;--az-bg:#15203a;--az-tx:#a2baf0;--az-bd:#2a3a66;--cz-bg:#1f242d;--cz-tx:#b8c0cd;--cz-bd:#2e3541;--anel:#8fd151;--som:0 1px 2px rgba(0,0,0,.45);--som2:0 1px 3px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4);--som3:0 8px 24px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.4);--sobre-pri:#fff;--sobre-pri-2:#d8edc2;--pri-tx:#a8d974;--av-bg:#243119;--av-bd:#3a5423;--ic:#7f899a;--ic2:#5e6778;--bd-forte:#3b4351;--sup-press:#232933;--foco:rgba(124,194,66,.28);--rolagem:rgba(0,0,0,.55);--veu:rgba(0,0,0,.62);--vm-forte:#e25757;--vm-tx2:#f6b3b3;--am-forte:#e3a83d;--am-tx2:#f4cf88;--am-fundo:#261f12;--az-forte:#8ca4da;--az-tx2:#b8caf3;--ok-tx2:#a2ddad;--graf:#5e8f33;--graf-h:#76a94a;--graf-linha:#6c7789;--login-bg:#131a11;--pri-noite:#27450d;--mer-sub:#cfe3b8;--mer-feito:#17201a;--mer-realce:rgba(255,255,255,.18);}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg)}
.pg{font:14px/1.5 var(--fonte);color:var(--tx);-webkit-font-smoothing:antialiased}
:where(.pg) :where(h1,h2,h3,h4,p,figure){margin:0}
:where(.pg) :where(ul){margin:0;padding:0;list-style:none}
:where(.pg) :where(a){color:inherit;text-decoration:none}
:where(.pg) :where(button,input,select,textarea){font:inherit;color:inherit}
.pg :focus-visible{outline:2px solid var(--anel);outline-offset:2px;border-radius:var(--rp)}
.pg .num,.pg .tab td.num,.pg .tab th.num{font-variant-numeric:tabular-nums}
.pg .tabnum{font-variant-numeric:tabular-nums}
/* ── esqueleto: lateral 240 + topo compacto ───────────────────────────────────────── */
.app{display:flex;align-items:flex-start;min-height:calc(100vh - 34px)}
.lateral{flex:0 0 240px;width:240px;background:var(--sup);border-right:1px solid var(--bd);
position:sticky;top:0;max-height:100vh;display:flex;flex-direction:column;overflow:auto}
.marca{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--bd2)}
/* O quadrado da marca cai na mesma regra dos botões sólidos: verde chapado com texto
branco em cima usa --pri-sol. O verde da marca (--pri) só dá 3,25:1 com o "n" branco,
e AA pede 4,5 — em --pri-sol dá 6,0:1. O --pri continua sendo o verde de identidade
(item ativo do menu, barra do mês corrente, chave ligada, anel de foco). */
.marca-q{width:30px;height:30px;border-radius:8px;background:var(--pri-sol);color:var(--sobre-pri);display:grid;
place-items:center;font-weight:800;font-size:16px;letter-spacing:-.04em;flex:none;
box-shadow:inset 0 -1px 0 rgba(0,0,0,.12)}
.marca-n{font-weight:700;font-size:15px;letter-spacing:-.02em;line-height:1.15}
.marca-s{font-size:11px;color:var(--tf);line-height:1.2;margin-top:1px}
.nav{padding:10px 10px 4px;flex:1}
.nav-g{padding:12px 8px 5px;font-size:10.5px;font-weight:700;letter-spacing:.07em;
text-transform:uppercase;color:var(--tf2)}
.nav-g:first-child{padding-top:4px}
.nav-i{display:flex;align-items:center;gap:9px;height:34px;padding:0 9px;border-radius:var(--rp);
color:var(--tx2);font-weight:500;margin-bottom:1px;transition:background .12s,color .12s}
.nav-i svg{flex:none;color:var(--ic);transition:color .12s}
.nav-i:hover{background:var(--sup2);color:var(--tx)}
.nav-i:hover svg{color:var(--tx2)}
.nav-i.on{background:var(--pri-fr);color:var(--pri-tx);font-weight:600;box-shadow:inset 2px 0 0 var(--pri)}
.nav-i.on svg{color:var(--pri-esc)}
.nav-i.off{color:var(--tf);cursor:default}
.nav-i.off svg{color:var(--ic2)}
.nav-selo{margin-left:auto;min-width:19px;height:19px;padding:0 5px;border-radius:99px;
background:var(--cz-bg);color:var(--cz-tx);font-size:11px;font-weight:700;display:grid;
place-items:center;font-variant-numeric:tabular-nums}
.nav-i.on .nav-selo{background:var(--sup);color:var(--pri-sol)}
.nav-selo.q{background:var(--am-bg);color:var(--am-tx)}
.lat-pe{border-top:1px solid var(--bd2);padding:10px;background:var(--sup3)}
.lat-user{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:var(--rp)}
.lat-user:hover{background:var(--sup2)}
.av{width:30px;height:30px;border-radius:99px;background:var(--av-bg);color:var(--pri-tx);display:grid;
place-items:center;font-weight:700;font-size:13px;flex:none;border:1px solid var(--av-bd)}
.ident{min-width:0}
.ident b{font-size:13px;font-weight:600;display:block;line-height:1.25}
.ident i{font-style:normal;font-size:11.5px;color:var(--tf);line-height:1.25;display:block}
/* max-width:100% é o que faz a rolagem da .tab-cx valer: sem ele uma tabela larga empurra
a coluna inteira e quem rola é a PÁGINA, não a tabela. */
.principal{flex:1;min-width:0;max-width:100%;display:flex;flex-direction:column}
.topo{height:52px;background:var(--sup);border-bottom:1px solid var(--bd);display:flex;
align-items:center;gap:14px;padding:0 20px;position:sticky;top:0;z-index:30}
.trilha{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--tf);min-width:0}
.trilha b{color:var(--tx);font-weight:600}
.trilha svg{color:var(--ic2);flex:none}
.topo-dir{margin-left:auto;display:flex;align-items:center;gap:12px}
.topo-data{font-size:12.5px;color:var(--tf);white-space:nowrap}
.icobtn{width:34px;height:34px;border-radius:var(--rp);border:1px solid transparent;background:none;
display:grid;place-items:center;color:var(--tf);cursor:pointer;position:relative}
.icobtn:hover{background:var(--sup2);border-color:var(--bd);color:var(--tx)}
.pt{position:absolute;top:6px;right:7px;width:7px;height:7px;border-radius:99px;background:var(--vm-forte);
border:1.5px solid var(--sup)}
.topo-sep{width:1px;height:24px;background:var(--bd)}
.topo-user{display:flex;align-items:center;gap:9px}
.conteudo{padding:20px;max-width:1460px;width:100%}
/* ── cabeçalho de página ──────────────────────────────────────────────────────────── */
.cab{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.cab h1{font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.cab p{font-size:13px;color:var(--tf2);margin-top:3px}
.cab-acoes{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
/* ── botões ───────────────────────────────────────────────────────────────────────── */
.bt{height:36px;padding:0 13px;border-radius:var(--rp);border:1px solid var(--bd);background:var(--sup);
color:var(--tx);font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:7px;
cursor:pointer;white-space:nowrap;box-shadow:var(--som);transition:background .12s,border-color .12s}
.bt svg{color:var(--tf)}
.bt:hover{background:var(--sup2);border-color:var(--bd-forte)}
.bt:active{background:var(--sup-press)}
.bt-p{background:var(--pri-sol);border-color:var(--pri-sol);color:var(--sobre-pri);box-shadow:var(--som2)}
.bt-p svg{color:var(--sobre-pri-2)}
.bt-p:hover{background:var(--pri-sol-h);border-color:var(--pri-sol-h)}
.bt-f{border-color:transparent;background:none;box-shadow:none;color:var(--tx2)}
.bt-f:hover{background:var(--sup2);border-color:var(--bd)}
.bt-pq{height:30px;padding:0 10px;font-size:12.5px}
.bt-g{height:44px;padding:0 18px;font-size:14px}
.bt[disabled]{opacity:.55;cursor:not-allowed}
/* ── cartões ──────────────────────────────────────────────────────────────────────── */
.ct{background:var(--sup);border:1px solid var(--bd);border-radius:var(--r);box-shadow:var(--som)}
.ct-cab{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--bd2)}
.ct-cab h2{font-size:14px;font-weight:650;letter-spacing:-.01em}
/* Título que leva a algum lugar. A seta é o que diz isso antes do passar do mouse — sem
ela, um título sublinhado no hover é descoberta por acidente. */
.ct-tit{display:inline-flex;align-items:center;gap:5px}
/* No painel, cada cartão tem a altura do que ele tem a dizer. Esticados até a altura do
maior da fileira, uma pergunta sem resposta virava 300px de branco. */
.pnl .grade-auto{align-items:start}
/* Matriz e lista de textos ocupam a fileira inteira: espremidas em 360px, as colunas de
contagem saíam da tela e a tabela rolava de lado escondendo o que interessa. */
.pnl .pnl-largo{grid-column:1/-1}
.ct-tit svg{color:var(--tf);transition:transform .12s}
.ct-tit:hover{color:var(--pri-sol);text-decoration:underline;text-underline-offset:3px}
.ct-tit:hover svg{color:var(--pri-sol);transform:translateX(2px)}
.ct-cab .sub{font-size:12px;color:var(--tf)}
.ct-cab .dir{margin-left:auto;display:flex;gap:7px;align-items:center}
.ct-corpo{padding:14px}
.ct-pe{padding:10px 14px;border-top:1px solid var(--bd2);background:var(--sup3);
border-radius:0 0 var(--r) var(--r);display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--tf)}
/* ── distintivos ──────────────────────────────────────────────────────────────────── */
.se{display:inline-flex;align-items:center;gap:5px;height:21px;padding:0 8px;border-radius:99px;
font-size:11.5px;font-weight:600;line-height:1;white-space:nowrap;border:1px solid transparent}
.se::before{content:"";width:6px;height:6px;border-radius:99px;background:currentColor;opacity:.75}
.se.sd::before{display:none}
.se-ok{background:var(--ok-bg);color:var(--ok-tx);border-color:var(--ok-bd)}
.se-am{background:var(--am-bg);color:var(--am-tx);border-color:var(--am-bd)}
.se-vm{background:var(--vm-bg);color:var(--vm-tx);border-color:var(--vm-bd)}
.se-az{background:var(--az-bg);color:var(--az-tx);border-color:var(--az-bd)}
.se-cz{background:var(--cz-bg);color:var(--cz-tx);border-color:var(--cz-bd)}
.se-vd{background:var(--pri-fr);color:var(--pri-tx);border-color:var(--pri-bd)}
/* ── formulário ───────────────────────────────────────────────────────────────────── */
.campo{display:flex;flex-direction:column;gap:5px;min-width:0}
.campo>label,.rot{font-size:12px;font-weight:600;color:var(--tx2)}
.ent{width:100%;padding:0 11px;border:1px solid var(--bd);border-radius:var(--rp);
background:var(--sup);font-size:13.5px;transition:border-color .12s,box-shadow .12s}
/* A altura fixa é dos campos de UMA linha. Ela estava em .ent e valia para a textarea
também: um rows="5" virava uma fresta de 36px com um texto de cinco linhas rolando lá
dentro. Quatro módulos já tinham reescrito a regra por conta própria — quando o mesmo
remendo aparece quatro vezes, o defeito é da regra de baixo. */
input.ent,select.ent{height:36px}
textarea.ent{min-height:74px;padding:9px 11px;line-height:1.5;resize:vertical}
.ent::placeholder{color:var(--tf)}
.ent:hover{border-color:var(--bd-forte)}
/* O seletor de arquivo: um label com cara de botão comandando um input escondido, porque o
botão nativo traz o rótulo no idioma do navegador ("Choose File" numa tela em português) e
nenhum CSS troca esse texto. O nome do arquivo fica ao lado — é o que se precisa conferir. */
.arq-nome{margin-left:10px}
.ent:focus{outline:none;border-color:var(--pri);box-shadow:0 0 0 3px var(--foco)}
.ent[readonly]{background:var(--sup2);color:var(--tx2)}
select.ent{appearance:none;padding-right:30px;cursor:pointer;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 8px center;background-size:15px}
.busca-cx{position:relative;flex:1;min-width:180px}
.busca-cx svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--tf);pointer-events:none}
.busca-cx .ent{padding-left:32px}
.ajuda{font-size:11.5px;color:var(--tf)}
.vazio-cp{font-size:12px;color:var(--tf2);font-style:italic}
.chave{display:inline-flex;align-items:center;gap:9px;cursor:pointer;user-select:none}
.chave input{position:absolute;opacity:0;width:0;height:0}
.chave-tr{width:38px;height:22px;border-radius:99px;background:var(--bd-forte);position:relative;
transition:background .15s;flex:none}
.chave-tr::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:99px;
background:var(--sobre-pri);box-shadow:0 1px 2px rgba(16,24,40,.3);transition:transform .15s}
.chave input:checked+.chave-tr{background:var(--pri)}
.chave input:checked+.chave-tr::after{transform:translateX(16px)}
.chave input:focus-visible+.chave-tr{outline:2px solid var(--anel);outline-offset:2px}
.chave b{font-size:13px;font-weight:600}
.chave i{font-style:normal;font-size:12px;color:var(--tf)}
.opts{display:flex;flex-wrap:wrap;gap:7px}
/* Marca redonda quando a escolha é EXCLUSIVA. O quadrado com tique diz "marque quantos
quiser"; num par à vista/a prazo isso é mentira, e a pessoa tenta marcar os dois. */
.op:has(input[type=radio]) .op-mk{border-radius:50%}
.op:has(input[type=radio]) .op-mk svg{display:none}
.op:has(input[type=radio]:checked) .op-mk{background:var(--sup);border-color:var(--pri);
box-shadow:inset 0 0 0 3.5px var(--pri)}
/* A conferência do total da nota: soma dos itens × o que está no papel. */
.nf-conf{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;margin-top:10px;
padding:11px 13px;border:1px solid var(--bd);border-radius:9px;background:var(--sup2);font-size:13px}
.nf-conf b{font-variant-numeric:tabular-nums;margin-left:6px}
.nf-dif{margin-left:auto;font-weight:650;font-size:12.5px;padding:3px 9px;border-radius:99px}
.nf-dif.ok{background:var(--ok-bg);color:var(--ok-tx)}
.nf-dif.ruim{background:var(--vm-bg);color:var(--vm-tx)}
.nf-dif.mudo{background:transparent;color:var(--tf);font-weight:500}
/* O envio de anexo: o seletor de arquivo do navegador é feio em todo lugar, e o único
jeito de trocá-lo é escondê-lo atrás de um rótulo que já parece botão do kit. */
.anx{display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.anx input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.anx .anx-rot{flex:1;min-width:190px}
.anx-nomes{font-size:12.5px;color:var(--tf);flex-basis:100%}
/* Os itens do arquivo da nota que ainda não têm produto nosso — um cartão por item. */
.pend{border:1px solid var(--bd);border-radius:10px;padding:11px 12px;margin-bottom:9px;background:var(--sup)}
.pend-cab{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-bottom:9px}
.pend-cab b{font-size:13.5px;font-weight:650;color:var(--tx)}
.pend-cab .sub{font-size:12px}
.pend-qtd{margin-left:auto;font-size:12.5px;color:var(--tx2);font-variant-numeric:tabular-nums;white-space:nowrap}
.pend-lin{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.pend-lin select.ent{flex:1 1 220px;min-width:0}
.pend-fator{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--tx2);white-space:nowrap}
.pend-fator input.ent{width:78px;height:32px;text-align:right}
.pend-acoes{display:flex;gap:7px;justify-content:flex-end;margin-top:9px}
.op{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 11px;border:1px solid var(--bd);
border-radius:99px;font-size:13px;cursor:pointer;background:var(--sup);transition:.12s}
.op input{position:absolute;opacity:0;width:0;height:0}
.op:hover{background:var(--sup2)}
.op:has(input:checked){background:var(--pri-fr);border-color:var(--pri-bd);color:var(--pri-tx);font-weight:600}
.op:has(input:focus-visible){outline:2px solid var(--anel);outline-offset:2px}
.op-mk{width:14px;height:14px;border:1.5px solid var(--bd-forte);border-radius:4px;flex:none;display:grid;
place-items:center;background:var(--sup)}
.op:has(input:checked) .op-mk{background:var(--pri);border-color:var(--pri)}
.op-mk svg{opacity:0;color:var(--sobre-pri)}
.op:has(input:checked) .op-mk svg{opacity:1}
.fichas{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.fi{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 6px 0 10px;border-radius:99px;
background:var(--sup2);border:1px solid var(--bd);font-size:12.5px;font-weight:500}
.fi button{width:18px;height:18px;border:0;background:none;padding:0;border-radius:99px;color:var(--tf);
display:grid;place-items:center;cursor:pointer}
.fi button:hover{background:var(--vm-bg);color:var(--vm-tx)}
/* ── lista que cresce (merendeiras, telefones) ────────────────────────────────────── */
.lista{display:flex;flex-direction:column;gap:8px}
.lista:empty{display:none}
.lista-lin{display:grid;grid-template-columns:1fr 180px 34px;gap:8px;align-items:center}
.lista-lin .bt-x{width:34px;height:36px;padding:0;display:grid;place-items:center;border:1px solid var(--bd);
border-radius:var(--rp);background:var(--sup);color:var(--tf);cursor:pointer;flex:none}
.lista-lin .bt-x:hover{background:var(--vm-bg);border-color:var(--vm-bd);color:var(--vm-tx)}
.lista-vazia{font-size:12.5px;color:var(--tf);padding:9px 11px;border:1px dashed var(--bd);
border-radius:var(--rp);background:var(--sup2)}
@media (max-width:560px){ .lista-lin{grid-template-columns:1fr 34px} .lista-lin .ent:nth-child(2){grid-column:1} }
/* Os botões de uma linha de tabela, juntos e sem quebrar. Soltos, o "excluir" caía para a
linha de baixo e ficava embaixo do lápis da pergunta seguinte. */
.acoes-linha{display:flex;gap:4px;align-items:center;flex-wrap:nowrap}
.acoes-linha form{display:inline-flex}
/* ── formulário: uma pergunta por cartão ──────────────────────────────────────────────
É o desenho dos formulários da web que todo mundo já respondeu — Google Forms, Microsoft
Forms — com as nossas cores. Quarenta e duas perguntas empilhadas numa caixa só viram uma
parede de campos: quem preenche perde o lugar e quem revisa não sabe em que parte da
visita está. Cada pergunta num cartão resolve isso, e é o único desenho que a merendeira
e a nutricionista já conhecem de outro lugar.
A coluna estreita AQUI é de propósito, e não briga com a regra de ocupar a largura toda:
uma linha de 1400px com um "Sim/Não" perdido na ponta direita é ilegível. Tela de
CADASTRO continua largura cheia; questionário se lê em coluna. */
.fm{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
/* O cartão de abertura, com a faixa de cor no topo — é o que diz, antes de ler, "isto é um
formulário para responder", e não mais uma tela do sistema. */
.fm-cab{background:var(--sup);border:1px solid var(--bd);border-radius:var(--r);
box-shadow:var(--som);overflow:hidden}
.fm-cab::before{content:"";display:block;height:9px;background:var(--pri-sol)}
.fm-cab-in{padding:19px 24px}
.fm-cab h2{font-size:23px;font-weight:700;letter-spacing:-.02em;line-height:1.25}
.fm-cab .desc{font-size:13.5px;color:var(--tf2);margin-top:6px;line-height:1.5}
.fm-cab-pe{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
margin-top:15px;padding-top:13px;border-top:1px solid var(--bd2)}
.fm-cab-pe .un{min-width:0}
.fm-cab-pe .un b{display:block;font-size:14px;font-weight:650;line-height:1.3}
.fm-cab-pe .un i{font-style:normal;font-size:12px;color:var(--tf);display:block;margin-top:1px}
.fm-cab-pe .dir{margin-left:auto;display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.fm-nota-obr{font-size:12px;color:var(--vm-tx);font-weight:600;white-space:nowrap}
/* ── o cartão de uma pergunta ──────────────────────────────────────────────────────── */
.fm-q{position:relative;background:var(--sup);border:1px solid var(--bd);border-radius:var(--r);
box-shadow:var(--som);padding:17px 22px}
/* A barra colorida na esquerda: "você está aqui" numa página de quarenta cartões iguais. */
.fm-q::before{content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:3px;
border-radius:var(--r) 0 0 var(--r);background:transparent;transition:background .12s}
.fm-q:focus-within{border-color:var(--pri-bd);box-shadow:var(--som2)}
.q-cab{display:flex;gap:11px;align-items:flex-start}
.q-num{width:23px;height:23px;flex:none;border-radius:50%;display:grid;place-items:center;
background:var(--cz-bg);color:var(--tf);font-size:11.5px;font-weight:700;margin-top:1px;
font-variant-numeric:tabular-nums;transition:background .12s,color .12s}
/* Respondida: o número fica verde. É como se acha o que ainda falta numa lista de 42 sem
ter de reler pergunta por pergunta. */
.fm-q[data-feita] .q-num{background:var(--pri-fr);color:var(--pri-sol);
box-shadow:inset 0 0 0 1px var(--pri-bd)}
.q-tit{min-width:0;flex:1}
.q-tit>label{display:block;font-size:15px;font-weight:600;color:var(--tx);line-height:1.4;
letter-spacing:-.005em}
.q-tit .ajuda{display:block;margin-top:3px;line-height:1.45}
.q-corpo{margin:12px 0 0 34px}
.obr{color:var(--vm-tx);font-weight:800}
/* O campo de número e o de data não ganham nada com 700px de largura — ficam piores: o olho
perde a ligação entre o rótulo e o valor. */
.fm-q .campo-lado .ent,.fm-q input[type=date].ent{max-width:200px}
/* Nome de merendeira não precisa de 700px de campo, e um campo desse tamanho ainda promete
uma resposta longa que a pergunta não quer. A textarea continua inteira. */
.fm-q input.ent{max-width:440px}
.fm-q .mtz{border-color:var(--bd2)}
@media (max-width:560px){ .fm-q{padding:15px 15px} .q-corpo{margin-left:0} }
/* A pergunta que só apareceu por causa de uma resposta anterior. Sem a tarja, quem revisa
não entende por que o formulário de uma escola tem dez campos a mais que o de outra. */
.q-cond::before{background:var(--am-bd)}
.q-cond .q-num{background:var(--am-bg);color:var(--am-tx)}
.q-marca{display:inline-flex;align-items:center;gap:5px;margin-top:5px;font-size:11px;
font-weight:600;color:var(--am-tx)}
/* Depois das duas de cima: quem está respondendo AGORA manda na cor da barra. */
.fm-q:focus-within::before{background:var(--pri)}
/* ── o cabeçalho de um bloco ───────────────────────────────────────────────────────────
No papel a visita é dividida em partes, e é assim que a nutricionista fala delas ("o de
armazenamento ficou não conforme"). */
.fm-sec{background:var(--pri-fr);border:1px solid var(--pri-bd);border-radius:var(--r);
padding:14px 22px;margin-top:6px}
.fm-sec:first-child{margin-top:0}
.fm-sec .n{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
color:var(--pri-sol);display:block}
.fm-sec h3{font-size:17px;font-weight:700;letter-spacing:-.015em;margin-top:2px;line-height:1.3}
.fm-sec .c{font-size:12.5px;color:var(--tx2);margin-top:2px;display:block}
/* ── as opções ─────────────────────────────────────────────────────────────────────────
Em coluna, uma linha por opção, com a linha inteira valendo como alvo. Em pastilha lado a
lado, "Sim" e "Não" ficam a 4px um do outro — no celular é o que faz marcar o errado. */
.fm-q .opts{flex-direction:column;gap:1px;align-items:stretch}
.fm-q .op{height:auto;min-height:40px;padding:8px 11px;border-radius:var(--rp);
border-color:transparent;background:none;box-shadow:none;justify-content:flex-start;
font-size:14px;font-weight:500;line-height:1.4}
.fm-q .op:hover{background:var(--sup2)}
.fm-q .op:has(input:checked){background:var(--pri-fr);border-color:var(--pri-bd);
color:var(--tx);font-weight:600}
.fm-q .op-mk{width:18px;height:18px;border-width:2px;border-radius:5px}
/* Bola é escolher uma; quadrado é poder marcar várias. O formato diz isso ANTES do toque. */
.fm-q .op:has(input[type=radio]) .op-mk{border-radius:50%}
.fm-q .op:has(input[type=radio]) .op-mk svg{display:none}
.fm-q .op:has(input[type=radio]:checked) .op-mk{background:var(--pri-sol);
border-color:var(--pri-sol);box-shadow:inset 0 0 0 3px var(--sup)}
/* ── o construtor: o mesmo cartão, com os comandos no rodapé ───────────────────────────
Quem monta vê o que a merendeira vai ver. O campo é desenhado igual e só não recebe toque
— sem isto, o construtor seria uma tabela DESCREVENDO o formulário, e a diferença entre a
descrição e a coisa é onde mora o erro que só aparece com a folha na mão. */
.fm-q-mont .q-corpo{pointer-events:none}
.fm-q-mont .q-corpo .ent{background:var(--sup3)}
.q-tipo{flex:none;align-self:flex-start;font-size:10.5px;font-weight:700;letter-spacing:.04em;
text-transform:uppercase;color:var(--tf2);background:var(--sup2);border:1px solid var(--bd2);
border-radius:99px;padding:3px 9px;white-space:nowrap}
.q-pe{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px;padding-top:11px;
border-top:1px solid var(--bd2)}
.q-regras{display:flex;gap:5px;flex-wrap:wrap;min-width:0}
.q-regras:empty{display:none}
.q-pe .acoes-linha{margin-left:auto}
/* As três perguntas que o painel lê pelo id não têm botão de excluir — um botão que sempre
recusa é pior que botão nenhum. O cadeado diz por quê. */
.q-trava{display:grid;place-items:center;width:30px;height:30px;border-radius:var(--rp);
color:var(--tf);background:var(--sup2);border:1px dashed var(--bd)}
/* A que está aberta na gaveta de edição. */
.fm-q-sel{border-color:var(--pri);box-shadow:0 0 0 3px var(--foco)}
.fm-q-sel::before{background:var(--pri)}
.fm-sec-mont{padding-bottom:11px}
.fm-sec-mont .q-pe{border-top-color:var(--pri-bd)}
/* Acrescentar pergunta: uma faixa tracejada no fim da coluna, do tamanho de um cartão. Um
botão pequenininho no cabeçalho some numa página de quarenta cartões. */
.fm-mais{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
min-height:52px;border:1.5px dashed var(--bd);border-radius:var(--r);background:var(--sup2);
color:var(--tx2);font-size:14px;font-weight:600;cursor:pointer;transition:.12s}
.fm-mais:hover{border-color:var(--pri);background:var(--pri-fr);color:var(--pri-sol)}
.fm-mais svg{color:inherit}
/* O cabeçalho editável: os campos do formulário dentro do cartão de capa. */
.fm-cab-in>form>.campo,.fm-cab-in>form>.grade2{margin-bottom:12px}
.fm-cab-in>form>.campo:last-child,.fm-cab-in>form>.grade2:last-child{margin-bottom:0}
/* ── o progresso ───────────────────────────────────────────────────────────────────────
Fica no rodapé, junto do botão de enviar, e responde a única pergunta de quem está no
meio de quarenta e duas: falta muito? */
/* Opções empilhadas fora do formulário de perguntas — lista de jornadas, de turnos. Em
pastilha lado a lado, uma lista de sete some no embrulho das linhas. */
.opts-col{flex-direction:column;align-items:stretch;gap:2px}
.opts-col .op{justify-content:flex-start;height:auto;min-height:38px;padding:7px 11px}
.fm-prog{display:flex;align-items:center;gap:9px;min-width:180px;font-size:12.5px;color:var(--tf)}
/* O trilho em --cz-bg (#eef0f4) sumia contra o fundo da barra da cozinha (#f0f1f5):
sobrava o "0 de 11" solto e nenhuma barra. */
.fm-prog .bar{flex:1;min-width:70px;height:6px;border-radius:99px;background:var(--bd);
overflow:hidden}
.fm-prog .bar i{display:block;height:100%;width:0;background:var(--pri);border-radius:99px;
transition:width .18s}
.fm-prog b{font-weight:700;color:var(--tx2);white-space:nowrap;font-variant-numeric:tabular-nums}
/* ── na cozinha ────────────────────────────────────────────────────────────────────────
O mesmo desenho, com o dedo em mente. 16px de fonte no campo não é escolha de estilo:
abaixo disso o iPhone dá zoom ao focar, a tela salta e a pessoa perde o lugar. */
.cz .fm{gap:10px}
.cz .fm-q{padding:15px 14px;border-radius:12px}
.cz .q-corpo{margin-left:0}
.cz .q-tit>label{font-size:1rem}
.cz .fm-q .ent{min-height:48px;font-size:16px}
.cz .fm-q textarea.ent{min-height:84px;padding-top:11px}
.cz .fm-q .op{min-height:48px;font-size:1rem}
.cz .fm-cab{border-radius:12px}
.cz .fm-cab-in{padding:15px}
.cz .fm-cab h2{font-size:1.2rem}
.cz .fm-sec{padding:13px 14px;border-radius:12px}
.cz-pe-fixo .fm-prog{margin-bottom:10px}
/* ── matriz de avaliação (o checklist da nutricionista) ───────────────────────────────
Uma linha por afirmação, as mesmas colunas em todas. Rola de lado no celular em vez de
espremer as colunas até o rótulo virar duas letras. */
.mtz{overflow-x:auto;border:1px solid var(--bd);border-radius:var(--r);background:var(--sup)}
.mtz table{border-collapse:collapse;width:100%;min-width:320px}
.mtz th,.mtz td{padding:11px 12px;border-bottom:1px solid var(--bd2);font-size:13.5px;text-align:center}
.mtz th{background:var(--sup2);font-size:10.5px;font-weight:700;letter-spacing:.05em;
text-transform:uppercase;color:var(--tf2);white-space:nowrap;min-width:96px}
.mtz tbody td:first-child,.mtz thead th:first-child{text-align:left;width:100%;min-width:190px;
line-height:1.4}
.mtz tbody tr:nth-child(even){background:var(--sup3)}
.mtz tbody tr:last-child td{border-bottom:0}
.mtz tbody tr:hover{background:var(--pri-fr)}
/* A célula inteira é o alvo: numa matriz de sete linhas, mirar um círculo de 18px com o
dedo é o que faz marcar a linha de baixo sem perceber. */
.mtz label{display:flex;align-items:center;justify-content:center;cursor:pointer;
margin:-11px -12px;padding:11px 12px}
.mtz input[type=radio]{width:19px;height:19px;accent-color:var(--pri);cursor:pointer}
.mtz input[type=checkbox]{width:18px;height:18px;accent-color:var(--pri);cursor:pointer}
/* A matriz de permissão: a coluna da tela precisa de largura para o nome e a explicação
caberem em duas linhas; as quatro colunas de ação são estreitas e iguais. */
/* ── a permissão por NÍVEL ──────────────────────────────────────────────────────────────
Uma linha por tela, uma lista suspensa por linha. Quatro caixas × quinze telas eram
sessenta marcadores numa gaveta de 480px: cabia, mas ninguém lia. */
.nvl{display:flex;flex-direction:column;gap:1px}
.nvl-g{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
color:var(--tf2);padding:14px 2px 5px}
.nvl-g:first-child{padding-top:2px}
.nvl-i{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:7px 9px;
border-radius:var(--rp);transition:background .12s}
.nvl-i:hover{background:var(--sup2)}
.nvl-nome{flex:1;min-width:130px}
.nvl-nome b{display:block;font-size:13.5px;font-weight:600;line-height:1.3}
.nvl-nome span{display:block;font-size:11px;color:var(--tf);line-height:1.3;margin-top:1px}
.nvl-sel{width:132px;flex:none}
/* O botão do ajuste fino: um ícone só, com nome para quem usa leitor de tela. */
.nvl-chave{flex:none;display:grid;place-items:center;width:30px;height:30px;cursor:pointer;
border:1px solid transparent;border-radius:var(--rp);color:var(--tf)}
.nvl-chave:hover{background:var(--sup);border-color:var(--bd);color:var(--tx)}
.nvl-chave input{position:absolute;opacity:0;width:0;height:0}
.nvl-chave:has(input:checked){background:var(--am-bg);border-color:var(--am-bd);color:var(--am-tx)}
.nvl-chave:has(input:focus-visible){outline:2px solid var(--anel);outline-offset:1px}
/* As quatro caixas só aparecem quando alguém pede — e aí a lista suspensa se apaga, porque
quem manda naquela linha passou a ser o ajuste fino. */
.nvl-fino{display:none;width:100%;gap:5px;flex-wrap:wrap;padding:2px 0 2px 2px}
.nvl-i:has(.nvl-chave input:checked){background:var(--am-bg)}
.nvl-i:has(.nvl-chave input:checked) .nvl-fino{display:flex}
.nvl-i:has(.nvl-chave input:checked) .nvl-sel{opacity:.4;pointer-events:none}
.nvl-fino .op{height:28px;font-size:12px;background:var(--sup)}
.nvl-fixa{font-size:12.5px;color:var(--tf);flex:none;width:132px;text-align:center}
/* A matriz mora dentro da gaveta lateral, que tem ~480px úteis. Com as medidas da matriz
comum a coluna EXCLUIR saía da borda — e é a coluna que alguém abre esta tela para ver.
Aperta-se aqui, não na gaveta: alargar a gaveta desalinharia esta tela de todas as outras. */
.mtz-perm tbody td:first-child,.mtz-perm thead th:first-child{min-width:150px;line-height:1.35}
.mtz-perm th:not(:first-child){min-width:60px}
.mtz-perm th,.mtz-perm td{padding:8px 5px;font-size:12.5px}
.mtz-perm th{font-size:10px;letter-spacing:.03em}
.mtz-perm .sub{font-size:11px;line-height:1.3;display:block;margin-top:1px}
.mtz-cx{width:100%}
.mtz-perm label{margin:-8px -5px;padding:8px 5px}
.mtz tbody tr:has(input:checked) td:first-child{font-weight:600}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ── campo com botão colado (CNPJ + Buscar, link + Copiar) ────────────────────────── */
.campo-lado{display:flex;gap:8px;align-items:center}
.campo-lado .bt{flex:none}
/* ── painel que abre sem ser gaveta: o escolhedor de uma lista grande ──────────────── */
.painel{display:none;border:1px solid var(--bd);border-radius:var(--r);background:var(--sup);margin-top:10px}
.painel[data-aberta]{display:block}
.painel-cab{display:flex;gap:6px;flex-wrap:wrap;align-items:center;padding:10px;
border-bottom:1px solid var(--bd);background:var(--sup2);border-radius:var(--r) var(--r) 0 0}
.painel-busca{display:none;padding:9px 10px;border-bottom:1px solid var(--bd)}
.painel-busca[data-aberta]{display:block}
.painel-lista{max-height:300px;overflow:auto;padding:4px 10px 8px}
.painel-pe{display:flex;justify-content:flex-end;gap:8px;padding:9px 10px;border-top:1px solid var(--bd)}
.esc-g{margin:9px 0 3px;font-size:10.5px;font-weight:700;letter-spacing:.07em;
text-transform:uppercase;color:var(--tf2)}
.esc-i{display:flex;align-items:center;gap:9px;padding:7px 5px;border-radius:var(--rp);
cursor:pointer;font-size:13.5px}
.esc-i:hover{background:var(--sup2)}
.esc-i input{width:17px;height:17px;flex:none;accent-color:var(--pri)}
.esc-i .cod{margin-left:auto;font-size:11.5px;color:var(--tf)}
.esc-i.apagada{color:var(--tf)}
.esc-i i{font-style:normal;font-size:11.5px;color:var(--tf)}
/* Linha com DOIS controles: marcar e eleger a principal. O rótulo do meio é quem cresce. */
.esc-tx{display:flex;align-items:center;gap:9px;flex:1;min-width:0;cursor:pointer}
.esc-pri{display:inline-flex;align-items:center;gap:5px;flex:none;font-size:11.5px;
color:var(--tf);cursor:pointer;white-space:nowrap}
.esc-pri input{width:15px;height:15px;accent-color:var(--pri)}
.esc-i:has(.esc-pri input:checked){background:var(--pri-fr)}
.esc-i:has(.esc-pri input:checked) .esc-pri{color:var(--pri-sol);font-weight:700}
/* ── a mesma caixa em dois modos: as escolhidas, ou o catálogo para escolher ─────────
Fechada mostra só o que está marcado, cada um na sua linha. Aberta (no "Adicionar")
mostra tudo, com busca e o atalho de marcar. Uma caixa só, e não duas listas: duas
listas com as MESMAS caixas de marcar postariam o valor duas vezes. */
.escl{border:1px solid var(--bd);border-radius:var(--r);background:var(--sup)}
.escl-cab{display:none;gap:6px;flex-wrap:wrap;align-items:center;padding:10px;
border-bottom:1px solid var(--bd);background:var(--sup2);border-radius:var(--r) var(--r) 0 0}
.escl-lista{padding:4px 10px 8px}
.escl-pe{display:none;justify-content:flex-end;padding:9px 10px;border-top:1px solid var(--bd)}
.escl[data-aberta] .escl-cab,.escl[data-aberta] .escl-pe{display:flex}
.escl[data-aberta] .escl-lista{max-height:300px;overflow:auto}
/* Fechada: some o que não foi marcado — e some inteira quando não há nada marcado, para o
vazio ser a frase de ajuda mais o botão, sem uma moldura oca no meio. */
.escl:not([data-aberta]) .esc-i:not(:has(input[type=checkbox]:checked)){display:none}
.escl:not([data-aberta]):not(:has(input[type=checkbox]:checked)){display:none}
.escl:not([data-aberta]) .escl-so-aberto{display:none}
/* ── cartão de acesso: o link e o QR de uma unidade ───────────────────────────────────
Empilhado, e não lado a lado: isto mora na gaveta, que tem 420px. Em duas colunas o
endereço ficava numa caixinha de 160px, cortado no meio — e o endereço é justamente o
que se precisa LER para conferir se é o da unidade certa. */
.acesso{display:flex;flex-direction:column;gap:14px}
.acesso-qr{width:210px;align-self:center;padding:11px;background:#fff;border:1px solid var(--bd);
border-radius:var(--r);box-shadow:var(--som)}
.acesso-qr svg{display:block;width:100%;height:auto}
.acesso-lado{display:flex;flex-direction:column;gap:12px}
.acesso-link{display:flex;gap:8px}
.acesso-link .ent{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px}
.acesso-link .bt{flex:none}
/* ── tabela ───────────────────────────────────────────────────────────────────────── */
/* A sombra que denuncia a coluna escondida.
A caixa rola de lado desde sempre, mas em silêncio: numa tabela de nove colunas a última
— que costuma ser a AÇÃO, como o botão do comprovante — simplesmente não estava lá, e
nada dizia que bastava arrastar. O degradê à direita aparece só enquanto há o que rolar,
porque é preso ao fundo com background-attachment:local. */
.tab-cx{
overflow:auto; border-radius:0 0 var(--r) var(--r);
background:
linear-gradient(to right, var(--sup) 30%, transparent),
linear-gradient(to left, var(--sup) 30%, transparent) 100% 0,
linear-gradient(to right, var(--rolagem), transparent 14px),
linear-gradient(to left, var(--rolagem), transparent 14px) 100% 0;
background-repeat:no-repeat;
background-size:36px 100%, 36px 100%, 14px 100%, 14px 100%;
background-attachment:local, local, scroll, scroll;
}
.tab{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
.tab th{position:sticky;top:0;z-index:2;background:var(--sup3);text-align:left;font-size:11px;
font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--tf2);padding:9px 14px;
border-bottom:1px solid var(--bd);white-space:nowrap}
.tab td{padding:10px 14px;border-bottom:1px solid var(--bd2);vertical-align:middle}
.tab th.centro,.tab td.centro{text-align:center}
/* Ganha de .tab .num (à direita) por especificidade, não por ordem — são duas classes mais
o elemento contra duas classes. Cabeçalho e célula andam juntos, e o número fica embaixo
do rótulo em vez de pendurado na borda direita de uma coluna larga. */
.tab th.num.centro,.tab td.num.centro{text-align:center}
.tab td.num.centro .cel-link{text-align:center}
.tab tbody tr:last-child td{border-bottom:0}
.tab tbody tr{transition:background .1s}
.tab tbody tr:hover{background:var(--sup2)}
.tab tbody tr.sel{background:var(--pri-fr)}
/* Link que cobre a célula inteira: a linha toda vira alvo de clique sem embrulhar o