/* CotaFácil — interface. Sem fontes/CDN externos (CSP 'self'). Sem dependência de grid/gap para layout principal. */
:root{
  --bg:#f8fafc;--card:#fff;--tx:#0f172a;--mut:#64748b;--bd:#e2e8f0;--soft:#f1f5f9;
  --side:#fff;--side-tx:#475569;--side-on:#f1f5f9;--side-bd:#e2e8f0;--side-mut:#94a3b8;
  --pri:#0f766e;--pri-d:#0b5f59;--pri-s:#e1f3f0;--acc:#2dd4bf;
  --ok:#2f9e44;--ok-s:#e6f6ea;--warn:#e67700;--warn-s:#fff4e0;--err:#e03131;--err-s:#fdecec;--info:#1c7ed6;--info-s:#e7f1fc;
  --sh:0 1px 2px rgba(15,23,42,.04);--r:14px;
}
/* Tema: segue o sistema; o botão do menu grava a escolha (data-tema="claro" | "escuro" em <html>, ver static/tema.js) */
:root{color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-tema="claro"]){
  --bg:#0b1220;--card:#111a2b;--tx:#e8edf5;--mut:#94a3b8;--bd:#1e293b;--soft:#162033;
  --side:#0d1626;--side-tx:#a5b1c5;--side-on:#162033;--side-bd:#1e293b;--side-mut:#64748b;
  --pri:#14b8a6;--pri-d:#0f9f8f;--pri-s:#0f2b2b;--ok-s:#17321f;--warn-s:#3a2a10;--err-s:#3a1a1a;--info-s:#15283d;--sh:none;color-scheme:dark}}
:root[data-tema="escuro"]{
  --bg:#0b1220;--card:#111a2b;--tx:#e8edf5;--mut:#94a3b8;--bd:#1e293b;--soft:#162033;
  --side:#0d1626;--side-tx:#a5b1c5;--side-on:#162033;--side-bd:#1e293b;--side-mut:#64748b;
  --pri:#14b8a6;--pri-d:#0f9f8f;--pri-s:#0f2b2b;--ok-s:#17321f;--warn-s:#3a2a10;--err-s:#3a1a1a;--info-s:#15283d;--sh:none;color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font:14.5px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--tx);-webkit-font-smoothing:antialiased}
a{color:var(--pri);text-decoration:none}a:hover{text-decoration:underline}
h1,h2,h3{margin:0}h2{font-size:1.02rem;font-weight:650;margin-bottom:.8rem}h3{font-size:.95rem;font-weight:650}
code{background:var(--soft);padding:.1rem .35rem;border-radius:5px;font-size:.88em}
[hidden]{display:none!important}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:18px;height:18px;vertical-align:-3px;flex:none}.ic.lg{width:26px;height:26px}.ic.sm{width:15px;height:15px}

/* ---------- layout ---------- */
.app{display:flex;min-height:100vh}
.side{border-right:1px solid var(--side-bd);width:244px;flex:none;background:var(--side);color:var(--side-tx);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;padding:1rem .8rem}
.brand{display:flex;align-items:center;color:var(--tx);font-size:1.2rem;letter-spacing:-.02em;padding:.3rem .6rem 1.2rem}
.brand .ic{color:var(--pri)}.wm{font-weight:500}.wm b{font-weight:800;color:var(--pri)}
.brand .ic{margin-right:.55rem}
.nav-sec{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--side-mut);padding:1rem .7rem .35rem}
.nav{display:flex;align-items:center;color:var(--side-tx);padding:.55rem .7rem;border-radius:9px;margin-bottom:2px}
.nav .ic{margin-right:.7rem;opacity:.85}.nav:hover{background:var(--side-on);color:var(--tx);text-decoration:none}
.nav.on{background:var(--pri-s);color:var(--pri);font-weight:600}.nav.on .ic{opacity:1}
.grow{flex:1}
.userbox{border-top:1px solid var(--side-bd);padding-top:.8rem;font-size:.85rem}
.user{display:flex;align-items:center;margin-bottom:.6rem}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--pri);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;margin-right:.6rem;flex:none}
.user b{display:block;color:var(--tx);line-height:1.2}.user span{font-size:.75rem;color:var(--side-mut)}
.ulinks{display:flex;flex-wrap:wrap}.ulinks form{display:inline;margin:0}
.ulink{background:none;border:0;color:var(--side-tx);font:inherit;font-size:.82rem;cursor:pointer;padding:.25rem .5rem .25rem 0;margin:0}
.ulink:hover{color:var(--pri);text-decoration:underline;background:none}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.top{display:flex;align-items:center;padding:.9rem 1.6rem;background:var(--card);border-bottom:1px solid var(--bd);min-height:62px}
.top h1{font-size:1.2rem;font-weight:700}
.top .sub{color:var(--mut);font-size:.85rem;margin-left:.8rem}
.top .acoes{margin-left:auto;display:flex;align-items:center;flex-wrap:wrap}.top .acoes>*{margin-left:.5rem}
.icon-btn{display:none;background:none;border:0;color:var(--tx);padding:.3rem;margin-right:.6rem;cursor:pointer}
.content{padding:1.4rem 1.6rem 3rem;max-width:1400px;width:100%}
.anon{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.5rem}
.anon-box{width:100%;max-width:420px}
.anon-brand{display:flex;align-items:center;justify-content:center;font-size:1.9rem;letter-spacing:-.03em;margin-bottom:1.4rem}
.anon-brand .ic{color:var(--pri);margin-right:.6rem;width:40px;height:40px}.anon-brand .wm b{font-weight:800;color:var(--pri)}

/* ---------- componentes ---------- */
.card{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);box-shadow:var(--sh);padding:1.15rem 1.3rem;margin-bottom:1.1rem}
.card.flush{padding:0;overflow:hidden}.card .cab{display:flex;align-items:center;margin-bottom:.8rem}.card .cab h2{margin:0}.card .cab .dir{margin-left:auto}
.row{display:flex;flex-wrap:wrap;margin:0 -.55rem}.row>.col{flex:1 1 320px;padding:0 .55rem;min-width:0}
.mut{color:var(--mut)}.peq{font-size:.82rem}.dir{margin-left:auto}.gap>*{margin-right:.5rem}
.btn,button{display:inline-flex;align-items:center;justify-content:center;background:var(--pri);color:#fff;border:1px solid var(--pri);border-radius:9px;padding:.5rem 1rem;font:inherit;font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover,button:hover{background:var(--pri-d);border-color:var(--pri-d);text-decoration:none;color:#fff}
.btn .ic,button .ic{margin-right:.45rem}
.btn.sec,button.sec{background:var(--card);color:var(--tx);border-color:var(--bd)}.btn.sec:hover,button.sec:hover{background:var(--soft);color:var(--tx);border-color:var(--mut)}
.btn.bom,button.bom{background:var(--ok);border-color:var(--ok)}.btn.ruim,button.ruim{background:var(--err);border-color:var(--err)}
.btn.xs,button.xs{padding:.28rem .65rem;font-size:.82rem;border-radius:7px}
.btn.grande,button.grande{padding:.75rem 1.4rem;font-size:1rem}
button[disabled]{opacity:.55;cursor:wait}
input[type=text],input[type=password],input[type=email],input[type=number],input[type=search],select{width:100%;padding:.55rem .7rem;border:1px solid var(--bd);border-radius:9px;font:inherit;background:var(--card);color:var(--tx)}
input:focus,select:focus{outline:2px solid var(--pri-s);border-color:var(--pri)}
label.f{display:block;font-size:.8rem;font-weight:600;color:var(--mut);margin-bottom:.9rem}label.f>input,label.f>select{margin-top:.3rem;font-weight:400}
.linha{display:flex;flex-wrap:wrap;align-items:flex-end;margin:0 -.4rem}.linha>*{margin:0 .4rem .6rem}.linha label.f{margin-bottom:0}
.chk{display:flex;align-items:center;font-size:.9rem}.chk input{margin-right:.5rem}

/* avisos (toasts) */
.toasts{position:fixed;top:14px;right:14px;z-index:50;width:min(400px,calc(100vw - 28px))}
.toast{display:flex;align-items:flex-start;background:var(--card);border:1px solid var(--bd);border-left:4px solid var(--info);border-radius:10px;padding:.7rem .9rem;margin-bottom:.5rem;box-shadow:0 8px 24px rgba(0,0,0,.14)}
.toast.ok{border-left-color:var(--ok)}.toast.erro{border-left-color:var(--err)}
.toast .ic{margin-right:.6rem;margin-top:2px}.toast.ok .ic{color:var(--ok)}.toast.erro .ic{color:var(--err)}
.toast .t{flex:1}.toast .x{background:none;border:0;color:var(--mut);padding:0 0 0 .5rem;cursor:pointer}.toast .x:hover{background:none;color:var(--tx)}

/* KPIs */
.kpis{display:flex;flex-wrap:wrap;margin:0 -.45rem 1rem}
.kpi{flex:1 1 0;min-width:150px;margin:0 .45rem .9rem;background:var(--card);border:1px solid var(--bd);border-radius:var(--r);padding:.85rem 1rem;box-shadow:var(--sh);border-top:3px solid var(--bd)}
.kpi b{display:block;font-size:1.55rem;line-height:1.2;font-weight:750;white-space:nowrap}.kpi b.mn{font-size:1.2rem;padding-top:.25rem}.kpi span{color:var(--mut);font-size:.78rem}
.kpi.ok{border-top-color:var(--ok)}.kpi.ok b{color:var(--ok)}.kpi.am{border-top-color:var(--warn)}.kpi.am b{color:var(--warn)}
.kpi.er{border-top-color:var(--err)}.kpi.er b{color:var(--err)}.kpi.pri{border-top-color:var(--pri)}

/* tabelas */
.tabela{overflow:auto;max-height:68vh}
table{width:100%;border-collapse:collapse;font-size:.88rem}
th,td{padding:.6rem .8rem;border-bottom:1px solid var(--bd);text-align:left;vertical-align:top}
th{background:var(--soft);font-weight:650;font-size:.76rem;text-transform:uppercase;letter-spacing:.03em;color:var(--mut);position:sticky;top:0;z-index:1}
tbody tr:hover td{background:var(--soft)}td.n,th.n{text-align:right;white-space:nowrap}
tr.acima td{background:var(--err-s)}tr.mut td{color:var(--mut)}
.vazio{padding:2rem;text-align:center;color:var(--mut)}

/* chips / status */
.chip{display:inline-block;padding:.12rem .6rem;border-radius:99px;font-size:.74rem;font-weight:650;background:var(--soft);color:var(--mut);white-space:nowrap}
.chip.COTADO,.chip.ok{background:var(--ok-s);color:var(--ok)}.chip.REVISAR,.chip.warn{background:var(--warn-s);color:var(--warn)}
.chip.SEM_OFERTA,.chip.err{background:var(--err-s);color:var(--err)}.chip.JA_PREENCHIDO,.chip.info{background:var(--info-s);color:var(--info)}
.filtros{display:flex;flex-wrap:wrap;align-items:center;padding:.8rem 1rem;border-bottom:1px solid var(--bd)}
.filtros .busca{flex:1 1 240px;max-width:380px;margin-right:.8rem}
.fchip{background:var(--card);color:var(--tx);border:1px solid var(--bd);border-radius:99px;padding:.25rem .8rem;font-size:.82rem;font-weight:600;margin:.15rem .3rem .15rem 0}
.fchip:hover{background:var(--soft);color:var(--tx);border-color:var(--bd)}.fchip.on{background:var(--pri);color:#fff;border-color:var(--pri)}
.fchip small{opacity:.75;margin-left:.3rem;font-weight:500}

/* barra empilhada (SVG) */
.barra{display:block;width:100%;height:10px;border-radius:99px;overflow:hidden;background:var(--soft)}
.b-ok{fill:var(--ok)}.b-rev{fill:var(--warn)}.b-sem{fill:var(--err)}.b-man{fill:var(--info)}
.legenda{display:flex;flex-wrap:wrap;font-size:.78rem;color:var(--mut);margin-top:.35rem}.legenda span{margin-right:.9rem}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:.3rem}.dot.d-ok{background:var(--ok)}.dot.d-rev{background:var(--warn)}.dot.d-sem{background:var(--err)}.dot.d-man{background:var(--info)}

/* upload (arrastar e soltar) */
.dropzone{display:block;border:2px dashed var(--bd);border-radius:var(--r);padding:1.6rem 1rem;text-align:center;cursor:pointer;background:var(--soft);transition:border-color .15s,background .15s}
.dropzone:hover,.dropzone.sobre{border-color:var(--pri);background:var(--pri-s)}
.dropzone .ic{width:34px;height:34px;color:var(--pri);margin-bottom:.3rem}
.dropzone b{display:block}.dropzone small{color:var(--mut)}.dropzone input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.dropzone .arq{display:none;margin-top:.6rem;font-weight:650;color:var(--ok)}.dropzone.tem .arq{display:block}.dropzone.tem{border-style:solid;border-color:var(--ok)}

/* passos */
.passos{display:flex;margin-bottom:1.2rem}
.passo{display:flex;align-items:center;color:var(--mut);margin-right:1.4rem;font-weight:600;font-size:.88rem}
.passo i{width:26px;height:26px;border-radius:50%;background:var(--soft);border:1px solid var(--bd);display:flex;align-items:center;justify-content:center;font-style:normal;margin-right:.5rem;font-size:.8rem}
.passo.on{color:var(--tx)}.passo.on i{background:var(--pri);border-color:var(--pri);color:#fff}.passo.ok i{background:var(--ok);border-color:var(--ok);color:#fff}

/* opções (radio cards) */
.opcoes{display:flex;flex-wrap:wrap;margin:0 -.4rem}.opcao{flex:1 1 260px;margin:0 .4rem .7rem;border:1px solid var(--bd);border-radius:10px;padding:.8rem .9rem;cursor:pointer;display:block;background:var(--card)}
.opcao input{margin-right:.5rem}.opcao b{display:inline}.opcao small{display:block;color:var(--mut);margin:.2rem 0 0 1.4rem}
.opcao:hover{border-color:var(--mut)}

/* revisão */
.rev{border:1px solid var(--warn);background:var(--warn-s);border-radius:10px;padding:.8rem 1rem;margin-bottom:.7rem}
.alt{display:flex;flex-wrap:wrap;align-items:center;margin-top:.5rem;padding-top:.5rem;border-top:1px dashed var(--bd)}.alt .d{flex:1 1 300px;margin-right:.8rem}
.aviso{background:var(--warn-s);border:1px solid var(--warn);border-radius:10px;padding:.65rem .9rem;margin:.6rem 0}
.passos-lista{margin:0;padding-left:1.1rem}.passos-lista li{margin-bottom:.5rem}
.hero{display:flex;flex-wrap:wrap;margin:0 -.5rem 1rem}.hero a{flex:1 1 300px;margin:0 .5rem .8rem;display:flex;align-items:center;background:var(--card);border:1px solid var(--bd);border-radius:var(--r);padding:1rem 1.2rem;box-shadow:var(--sh);color:var(--tx)}
.hero a:hover{border-color:var(--pri);text-decoration:none}.hero .ic{width:30px;height:30px;color:var(--pri);margin-right:1rem}.hero b{display:block;font-size:1rem}.hero span{color:var(--mut);font-size:.84rem}
.carregando{position:fixed;inset:0;background:rgba(15,18,27,.55);z-index:60;display:none;align-items:center;justify-content:center;color:#fff;font-weight:650;flex-direction:column}
.carregando.on{display:flex}.spin{width:42px;height:42px;border:4px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:g 0.8s linear infinite;margin-bottom:.8rem}
@keyframes g{to{transform:rotate(360deg)}}

@media (max-width:860px){
  .side{position:fixed;left:-260px;z-index:40;transition:left .2s;height:100%}.side.aberto{left:0;box-shadow:0 0 40px rgba(15,23,42,.25)}
  .icon-btn{display:inline-block}.content{padding:1rem}.top{padding:.7rem 1rem}.top .sub{display:none}
}
.icon-btn:hover{background:none;color:var(--pri);border:0}
.card.flush .cab{padding:1rem 1.2rem .2rem}.card.flush .vazio{padding:1.6rem}.pad{padding:.2rem 1.2rem .9rem;margin:0}
h3.topo{margin:1rem 0 .6rem}
.cresce{flex:1 1 260px}.fix{margin-bottom:.9rem}input.mini{width:90px}input.mini.larga{width:150px}

/* esqueci minha senha */
.esqueci{margin-left:.8rem;font-size:.88rem}
.msg-ok{display:flex;align-items:flex-start;margin-bottom:1.2rem}.msg-ok .ic{width:30px;height:30px;color:var(--ok);margin:.15rem .8rem 0 0}.msg-ok.erro .ic{color:var(--err)}
.msg-ok h2{margin-bottom:.3rem}.msg-ok p{margin:.2rem 0}
.diag{margin:.4rem 0 .8rem;padding:0;list-style:none}.diag li{margin-bottom:.45rem;font-size:.88rem}.diag .chip{margin-right:.5rem}
input.mini.email{width:240px}
input.codigo{font-size:1.4rem;letter-spacing:.35rem;text-align:center;font-weight:700}

/* botão de tema */
.tema-btn{display:inline-flex;align-items:center}.tema-btn .ic{margin-right:.35rem}
.tema-topo{position:fixed;top:12px;right:14px;z-index:5}
.tema-topo .tema-btn{background:var(--card);color:var(--tx);border:1px solid var(--bd);border-radius:99px;padding:.35rem .8rem;font-size:.82rem;font-weight:600}
.tema-topo .tema-btn:hover{background:var(--soft);color:var(--tx);border-color:var(--bd)}
.ver{font-size:.72rem;color:var(--side-mut);margin-bottom:.5rem}

/* licença */
.faixa-lic{display:flex;align-items:center;border-radius:10px;padding:.6rem .9rem;margin-bottom:1rem;border:1px solid var(--warn);background:var(--warn-s)}
.faixa-lic .ic{margin-right:.6rem;color:var(--warn)}.faixa-lic.ruim{border-color:var(--err);background:var(--err-s)}.faixa-lic.ruim .ic{color:var(--err)}
textarea{width:100%;padding:.55rem .7rem;border:1px solid var(--bd);border-radius:9px;font:inherit;background:var(--card);color:var(--tx);margin-top:.3rem}
textarea:focus{outline:2px solid var(--pri-s);border-color:var(--pri)}
.codigo-lic{font-family:ui-monospace,Consolas,monospace;font-size:.8rem;word-break:break-all}
code.id-inst{font-size:1rem;font-weight:700;letter-spacing:.05em}
.sinc{display:flex;align-items:center;flex-wrap:wrap;border-top:1px solid var(--bd);margin-top:1.1rem;padding-top:.9rem}.sinc>div{flex:1 1 280px;margin-right:1rem}
.id-grande{font-size:1.25rem;text-align:center;margin:1rem 0}.id-grande code{padding:.4rem .8rem;letter-spacing:.04em}
.faixa-lic.info-gerenciado{border-color:var(--pri);background:var(--pri-s)}.faixa-lic.info-gerenciado .ic{color:var(--pri)}
.compras{display:flex;flex-wrap:wrap;margin:0 -.3rem}
.compra{flex:1 1 150px;margin:.3rem;border:1px solid var(--bd);border-radius:10px;padding:.75rem .8rem;display:flex;flex-direction:column}
.compra b{font-size:.92rem}.compra .preco{font-size:1.3rem;font-weight:750;margin:.15rem 0}.compra .preco small{font-size:.8rem;font-weight:500;color:var(--mut)}
.compra button{margin-top:.6rem;align-self:flex-start}.card.destaque-compra{border-color:var(--pri);box-shadow:0 0 0 1px var(--pri-s)}
.card.compra-cta{display:flex;align-items:center;flex-wrap:wrap}.card.compra-cta>div{flex:1 1 260px}.card.compra-cta h2{margin-bottom:.2rem}