:root{--bg:#f2f6f2;--surface:#fff;--surface2:#f7faf7;--text:#15241b;--muted:#5b6f63;--border:#d8e3da;--prim:#1f7a4a;--prim2:#14532d;--prim-t:#fff;--gold:#f4c542;--ok:#1f7a45;--warn:#a86a00;--bad:#b42318;--info:#1d5fa8;--radius:14px;--sombra:0 1px 2px rgba(20,60,35,.06),0 8px 24px rgba(20,60,35,.06)}
@media (prefers-color-scheme:dark){:root:not([data-theme]){--bg:#0e1812;--surface:#15231b;--surface2:#1a2b21;--text:#e6efe9;--muted:#9bb0a3;--border:#2a3d31;--prim:#52b788;--prim2:#0f3d22;--prim-t:#0c1a12;--ok:#52b788;--warn:#e0a84a;--bad:#f08a80;--info:#7db4ee;--sombra:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25)}}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
button,input,select,textarea{font:inherit;color:inherit}
h1{font-size:1.45rem;margin:0}h2{font-size:1.05rem;margin:0 0 12px}h3{font-size:.8rem;margin:20px 0 8px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.sub{color:var(--muted);font-size:.86rem}.espaco{flex:1}.hidden{display:none!important}.mono{font-family:ui-monospace,Consolas,monospace}
.ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Login ---------- */
.entrada{min-height:100vh;display:grid;grid-template-columns:1.05fr 1fr}
@media(max-width:900px){.entrada{grid-template-columns:1fr}.entrada-marca{display:none}}
.entrada-marca{background:var(--prim2);color:#fff;padding:52px 56px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.entrada-marca::before{content:"";position:absolute;right:-140px;top:-140px;width:520px;height:520px;border-radius:50%;background:rgba(255,255,255,.05)}
.entrada-marca::after{content:"";position:absolute;left:-120px;bottom:-180px;width:440px;height:440px;border-radius:50%;background:rgba(0,0,0,.14)}
.entrada-marca>*{position:relative;z-index:1}
.logo-linha{display:flex;align-items:center;gap:14px}.logo-linha img{width:52px;height:52px}.logo-linha b{font-size:1.35rem;letter-spacing:.2px}.logo-linha small{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#a9d6b8;margin-top:2px}
.entrada-marca h2{font-size:2.1rem;line-height:1.15;margin:0 0 14px;max-width:420px}.entrada-marca p{color:#cfe8d7;max-width:420px;margin:0}
.entrada-marca ul{list-style:none;padding:0;margin:30px 0 0;display:grid;gap:14px}.entrada-marca li{display:flex;gap:12px;align-items:center;color:#e1f1e6}
.entrada-marca li .ic{background:rgba(255,255,255,.12);padding:8px;width:38px;height:38px;border-radius:10px;stroke:#f4c542}
.entrada-pe{font-size:.8rem;color:#a9d6b8}
.entrada-form{display:flex;align-items:center;justify-content:center;padding:32px 20px}
.cx-login{width:100%;max-width:400px}
.cx-login .mini-logo{display:none;align-items:center;gap:10px;margin-bottom:22px}.cx-login .mini-logo img{width:40px;height:40px}.cx-login .mini-logo b{font-size:1.2rem}
@media(max-width:900px){.cx-login .mini-logo{display:flex}}
.passos-login{display:flex;gap:10px;margin:18px 0 22px}.passo{flex:1;height:5px;border-radius:5px;background:var(--border)}.passo.on{background:var(--prim)}
.rot-passo{font-size:.78rem;color:var(--muted);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.campo{margin-bottom:14px}.campo label{display:block;font-size:.83rem;font-weight:600;margin-bottom:5px}
.campo .linha-input{position:relative}.campo .linha-input button{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:var(--prim);font-size:.82rem;font-weight:600;cursor:pointer;padding:4px 6px}
input,select,textarea{width:100%;padding:11px 13px;border:1.5px solid var(--border);border-radius:10px;background:var(--surface);transition:border-color .15s,box-shadow .15s}
textarea{resize:vertical;min-height:70px}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--prim);box-shadow:0 0 0 3px color-mix(in srgb,var(--prim) 22%,transparent)}
.codigo{font:700 1.9rem ui-monospace,Consolas,monospace;letter-spacing:.5em;text-align:center;padding:14px 8px 14px 18px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 15px;border-radius:10px;border:1.5px solid var(--border);background:var(--surface);cursor:pointer;font-weight:600;transition:background .15s,border-color .15s,transform .05s}
.btn:hover{border-color:var(--prim)}.btn:active{transform:translateY(1px)}
.btn.prim{background:var(--prim);color:var(--prim-t);border-color:var(--prim)}.btn.prim:hover{filter:brightness(1.07)}
.btn.perigo{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 55%,transparent)}.btn.perigo:hover{background:color-mix(in srgb,var(--bad) 10%,transparent)}
.btn.peq{padding:5px 10px;font-size:.84rem;border-radius:8px}.btn.grande{width:100%;padding:13px}.btn:disabled{opacity:.6;cursor:wait}
.btn .gira{width:15px;height:15px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:gira .7s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.tremer{animation:tremer .35s}@keyframes tremer{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
.msg{padding:11px 13px;border-radius:10px;margin-top:12px;font-size:.9rem;white-space:pre-wrap;border:1px solid transparent}
.msg.ok{background:color-mix(in srgb,var(--ok) 13%,transparent);border-color:color-mix(in srgb,var(--ok) 30%,transparent)}.msg.erro{background:color-mix(in srgb,var(--bad) 13%,transparent);border-color:color-mix(in srgb,var(--bad) 30%,transparent)}.msg.aviso{background:color-mix(in srgb,var(--warn) 15%,transparent);border-color:color-mix(in srgb,var(--warn) 30%,transparent)}.msg.info{background:color-mix(in srgb,var(--info) 12%,transparent);border-color:color-mix(in srgb,var(--info) 28%,transparent)}
.nota-seg{display:flex;gap:8px;align-items:flex-start;margin-top:22px;font-size:.8rem;color:var(--muted)}.nota-seg .ic{width:16px;height:16px;margin-top:2px;stroke:var(--prim)}

/* ---------- Estrutura ---------- */
.app{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100vh}
@media(max-width:900px){.app{grid-template-columns:1fr}.lateral{position:fixed;inset:0 auto 0 0;width:250px;transform:translateX(-100%);transition:transform .2s;z-index:40}.lateral.aberta{transform:none}.fundo-menu{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:39}}
.lateral{background:var(--prim2);color:#d4ecdc;display:flex;flex-direction:column;padding:16px 12px;position:sticky;top:0;height:100vh}
.lateral .logo-linha{padding:6px 8px 18px;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:12px}.lateral .logo-linha img{width:38px;height:38px}.lateral .logo-linha b{font-size:1rem;color:#fff}.lateral .logo-linha small{font-size:.62rem}
.lateral nav{display:grid;gap:3px}.lateral nav button{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:transparent;border:0;color:#cfe5d6;padding:10px 12px;border-radius:10px;cursor:pointer;font-weight:550;position:relative}
.lateral nav button:hover{background:rgba(255,255,255,.08);color:#fff}.lateral nav button.ativo{background:rgba(255,255,255,.14);color:#fff}.lateral nav button.ativo::before{content:"";position:absolute;left:-12px;top:9px;bottom:9px;width:4px;border-radius:0 4px 4px 0;background:var(--gold)}
.lateral .cont{margin-left:auto;background:var(--gold);color:#14532d;border-radius:99px;font-size:.72rem;font-weight:800;padding:1px 8px}
.lateral .rodape{margin-top:auto;padding:12px 8px 4px;border-top:1px solid rgba(255,255,255,.1);font-size:.8rem}.lateral .rodape b{color:#fff;display:block}.lateral .rodape .btn{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#fff;width:100%;margin-top:10px}
.barra-topo{display:none;align-items:center;gap:12px;padding:10px 14px;background:var(--prim2);color:#fff;position:sticky;top:0;z-index:30}.barra-topo button{background:transparent;border:0;color:#fff;font-size:1.4rem;cursor:pointer}
@media(max-width:900px){.barra-topo{display:flex}}
main{padding:26px 28px 70px;max-width:1180px;width:100%}
@media(max-width:700px){main{padding:18px 14px 60px}}
.cab{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px}.cab p{margin:2px 0 0;color:var(--muted);font-size:.88rem}

/* ---------- Componentes ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;margin-bottom:16px;box-shadow:var(--sombra)}
.grade{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin-bottom:16px}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:15px 16px;box-shadow:var(--sombra);border-top:4px solid var(--prim)}
.kpi b{display:block;font-size:1.85rem;line-height:1.1}.kpi span{color:var(--muted);font-size:.82rem}.kpi.alerta{border-top-color:var(--gold)}.kpi.ruim{border-top-color:var(--bad)}.kpi.ruim b{color:var(--bad)}.kpi.info{border-top-color:var(--info)}
.duas{display:grid;grid-template-columns:1.6fr 1fr;gap:16px}@media(max-width:980px){.duas{grid-template-columns:1fr}}
.grade2{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media(max-width:640px){.grade2{grid-template-columns:1fr}}
.linha{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:10px 9px;border-bottom:1px solid var(--border);vertical-align:middle}
th{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);white-space:nowrap}th.ord{cursor:pointer;user-select:none}th.ord:hover{color:var(--prim)}
tbody tr:hover td{background:var(--surface2)}.rolavel{overflow-x:auto}
.pill{display:inline-block;padding:1px 9px;border-radius:99px;font-size:.75rem;font-weight:700;border:1px solid currentColor;white-space:nowrap}.pill.ok{color:var(--ok)}.pill.aviso{color:var(--warn)}.pill.ruim{color:var(--bad)}.pill.neutro{color:var(--muted)}.pill.info{color:var(--info)}
.barra{height:9px;border-radius:6px;background:var(--border);overflow:hidden;margin-top:8px}.barra i{display:block;height:100%;background:var(--prim);border-radius:6px}.barra.alto i{background:var(--bad)}.barra.medio i{background:var(--gold)}
.funil{display:grid;gap:8px}.funil div{display:flex;align-items:center;gap:10px}.funil .rot{width:118px;font-size:.84rem;color:var(--muted)}.funil .tr{flex:1;height:26px;background:var(--surface2);border-radius:7px;overflow:hidden;position:relative}.funil .tr i{display:block;height:100%;background:var(--prim);border-radius:7px;min-width:3px}.funil .n{width:34px;text-align:right;font-weight:800}
.alerta-item{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--border);font-size:.9rem}.alerta-item:last-child{border:0}.alerta-item .pt{width:10px;height:10px;border-radius:50%;margin-top:6px;flex:none;background:var(--info)}.alerta-item.aviso .pt{background:var(--gold)}.alerta-item.erro .pt{background:var(--bad)}
.tempo{list-style:none;margin:0;padding:0}.tempo li{display:flex;gap:10px;padding:7px 0;border-bottom:1px solid var(--border);font-size:.87rem}.tempo li:last-child{border:0}.tempo time{color:var(--muted);white-space:nowrap;font-size:.78rem;min-width:84px}
svg.graf{width:100%;height:auto;display:block}svg.graf text{fill:var(--muted);font-size:10px}
.leg{display:flex;gap:16px;font-size:.8rem;color:var(--muted);margin-top:6px}.leg i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px}
.vazio{text-align:center;padding:26px 10px;color:var(--muted)}
.kv{display:grid;grid-template-columns:130px 1fr;gap:6px 12px;font-size:.9rem;margin:0}.kv dt{color:var(--muted)}.kv dd{margin:0;word-break:break-word}
.secreto{background:var(--surface2);border:1px dashed var(--border);padding:11px;border-radius:10px;margin-top:10px}
.abas{display:flex;gap:4px;border-bottom:1px solid var(--border);margin:14px 0 14px;overflow-x:auto}.abas button{background:transparent;border:0;padding:8px 13px;cursor:pointer;color:var(--muted);font-weight:600;border-bottom:2px solid transparent;white-space:nowrap}.abas button.ativo{color:var(--prim);border-bottom-color:var(--prim)}
.fundo{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:flex-start;justify-content:center;padding:28px 12px;overflow:auto;z-index:60}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;width:100%;max-width:700px;box-shadow:0 24px 60px rgba(0,0,0,.3)}.modal.estreito{max-width:460px}
.modal pre{background:var(--surface2);padding:11px;border-radius:9px;max-height:320px;overflow:auto;font-size:.78rem;white-space:pre-wrap;word-break:break-all}
.toasts{position:fixed;right:16px;bottom:16px;display:grid;gap:8px;z-index:90}.toast{background:#14532d;color:#fff;padding:11px 16px;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.3);font-size:.9rem;max-width:340px;animation:entra .2s}.toast.erro{background:#8f1d12}@keyframes entra{from{opacity:0;transform:translateY(8px)}}
.esq{text-align:left}.dir{text-align:right}
@media(max-width:700px){.esc{display:none}}

a.btn{text-decoration:none;color:inherit}a.btn.prim{color:var(--prim-t)}

/* Login: logo centralizada no topo, formulário abaixo */
.entrada{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;grid-template-columns:none}
.entrada-form{padding:48px 20px 32px}
.cx-login .mini-logo{display:flex!important;flex-direction:column;justify-content:center;gap:10px;margin-bottom:26px;text-align:center}.cx-login .mini-logo img{width:72px;height:72px}.cx-login .mini-logo b{font-size:1.5rem}

/* Login: fundo verde, logo no topo, formulário em cartão */
.entrada{background:var(--prim2);min-height:100vh}
.entrada-form{width:100%;flex-direction:column;justify-content:flex-start;gap:26px}
.logo-topo{display:flex;flex-direction:column;align-items:center;gap:8px;color:#fff;text-align:center}.logo-topo img{width:76px;height:76px}.logo-topo b{font-size:1.6rem;letter-spacing:.3px}.logo-topo small{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:#a9d6b8}
.cx-login{background:var(--surface);padding:28px 26px;border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.28)}

/* Temas (botão "Tema"): escuro, terra, oceano, contraste, grafite, noite */
:root[data-theme="escuro"]{--bg:#0e1812;--surface:#15231b;--surface2:#1a2b21;--text:#e6efe9;--muted:#9bb0a3;--border:#2a3d31;--prim:#52b788;--prim2:#0f3d22;--prim-t:#0c1a12;--ok:#52b788;--warn:#e0a84a;--bad:#f08a80;--info:#7db4ee;--sombra:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25)}
:root[data-theme="terra"]{--bg:#f4ede4;--surface:#fffdf9;--surface2:#f8f1e8;--text:#2b2118;--muted:#6a5744;--border:#e4d7c6;--prim:#a8601f;--prim2:#3b2410;--prim-t:#fff;--sombra:0 1px 2px rgba(59,36,16,.07),0 8px 24px rgba(59,36,16,.08)}
:root[data-theme="oceano"]{--bg:#e6eff7;--surface:#fff;--surface2:#f1f6fb;--text:#10202e;--muted:#44596b;--border:#d2e0ee;--prim:#1b6fb5;--prim2:#0a2a47;--prim-t:#fff;--sombra:0 1px 2px rgba(10,42,71,.07),0 8px 24px rgba(10,42,71,.08)}
:root[data-theme="contraste"]{--bg:#fff;--surface:#fff;--surface2:#f0f0f0;--text:#000;--muted:#1a1a1a;--border:#595959;--prim:#00591f;--prim2:#000;--prim-t:#fff;--ok:#00591f;--warn:#6b3d00;--bad:#a30000;--info:#003f8a;--sombra:0 0 0 1px #000}
:root[data-theme="grafite"]{--bg:#121416;--surface:#1b1e21;--surface2:#212529;--text:#e8eaed;--muted:#b0b6bd;--border:#2d3237;--prim:#4fcf7a;--prim2:#0b0d0f;--prim-t:#062012;--ok:#4fcf7a;--warn:#e0a84a;--bad:#f08a80;--info:#7db4ee;--sombra:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35)}
:root[data-theme="noite"]{--bg:#0b1320;--surface:#121d2e;--surface2:#172437;--text:#e3ecf7;--muted:#a6b8cf;--border:#223249;--prim:#5aa9f0;--prim2:#060d17;--prim-t:#061423;--ok:#52b788;--warn:#e0a84a;--bad:#f08a80;--info:#7db4ee;--sombra:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35)}
:root[data-theme="grafite"],:root[data-theme="noite"],:root[data-theme="escuro"]{color-scheme:dark}
.tema-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.tema-op{display:flex;flex-direction:column;gap:6px;padding:8px;border:2px solid var(--border);border-radius:10px;background:var(--surface);cursor:pointer;text-align:left}
.tema-op[aria-pressed="true"]{border-color:var(--prim)}
.tema-op .pv{display:flex;height:30px;border-radius:6px;overflow:hidden;border:1px solid rgba(128,128,128,.35)}.tema-op .pv i{flex:1}
