/* Complementos do sistema: estilos usados pelas telas dinâmicas, sobre o layout base (styles.css). */

/* mensagens */
.flashes{display:grid;gap:10px;margin-bottom:18px}
.flash{padding:12px 16px;border:1px solid var(--line);border-left:4px solid var(--info);background:var(--surface);font-size:13px;font-weight:600}
.flash.ok{border-left-color:var(--good)}
.flash.erro{border-left-color:var(--bad)}

/* topo */
.topbar form.search{margin-left:auto}
.topbar .user form{margin:0}
.crumbs a{color:var(--muted)}
.user-meta b,.user-meta small{display:block}

/* botões complementares */
.btn.danger{background:var(--bad);color:#fff}
.btn.ghost.danger{background:none;color:var(--bad);border-color:var(--bad)}
.btn.sm.ghost{background:var(--surface)}
.btn[disabled]{opacity:.5;cursor:default;transform:none}
.link{color:var(--em);font-weight:800}
.link:hover{text-decoration:underline}
.inline-form{display:inline}
.row-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}

/* login */
.public{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr;background:var(--bg)}
.public-art{position:relative;color:#fff;background:url('../assets/hero-pintura.webp') center/cover;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(28px,5vw,64px)}
.public-art:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#030c2af5 0%,#030c2ac9 60%,#030c2a80 100%)}
.public-art>*{position:relative}
.public-art img{width:150px}
.public-art h1{font-size:clamp(30px,3.6vw,50px);margin:14px 0}
.public-art h1 em{color:var(--yellow)}
.public-art p{color:#dce2ed;max-width:460px;margin:0}
.public-panel{display:flex;align-items:center;justify-content:center;padding:clamp(24px,5vw,64px)}
.public-card{width:min(420px,100%)}
.public-card h2{font-size:28px;margin:6px 0 6px}
.public-card .lead{color:var(--muted);margin:0 0 22px}
.public-card .fld{margin-bottom:14px}
.public-card .btn{width:100%;margin-top:6px}
.public-error{max-width:520px;margin:12vh auto;padding:0 20px;text-align:left}
.public-error .code{font:800 72px/1 var(--display);color:var(--em)}

/* filtros e listagens */
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;padding:14px 18px;border-bottom:1px solid var(--line)}
.filters .fld{min-width:140px}
.filters .fld.grow{flex:1;min-width:220px}
.filters .fld input,.filters .fld select{min-height:38px;padding:7px 10px}
.filters-actions{display:flex;gap:8px}
th a{color:inherit;white-space:nowrap}
th a.sorted{color:var(--ink)}
th a.sorted:after{content:"";display:inline-block;margin-left:6px;border:4px solid transparent;border-bottom:5px solid currentColor;border-top:0}
th a.sorted.desc:after{border:4px solid transparent;border-top:5px solid currentColor;border-bottom:0}
td a.first-link{font-weight:800}
td a.first-link:hover{color:var(--em)}
td.muted,.muted{color:var(--muted)}
td.wrap{white-space:normal;min-width:200px}
tr.row-cancelled td{opacity:.55;text-decoration:line-through}
.pager a.pg{display:grid;place-items:center}
.pager a.disabled{opacity:.4;pointer-events:none}
.empty{padding:36px 18px;text-align:center;color:var(--muted)}
.empty b{display:block;color:var(--ink);margin-bottom:4px;font-family:var(--display)}
.table-foot td{font-weight:800;background:var(--surface-2)}

/* formulários */
.fld .err{color:var(--bad);font-size:11px;font-weight:700;text-transform:none;letter-spacing:0}
.fld.has-error input,.fld.has-error select,.fld.has-error textarea{border-color:var(--bad)}
.fld .hint{font-size:11px;font-weight:500;text-transform:none;letter-spacing:0;color:var(--muted)}
.form-grid.cols3{margin-bottom:0}
.form-grid.cols4{grid-template-columns:repeat(4,minmax(0,1fr))}
.check-row{display:flex;gap:10px;align-items:center;font-size:13px;font-weight:600}
.form-section{margin:26px 0 14px;padding-top:16px;border-top:1px solid var(--line)}
.form-section:first-child{margin-top:0;padding-top:0;border:0}
.form-section h3{font-size:15px}
.error-list{margin:0 0 16px;padding:12px 16px 12px 32px;border:1px solid var(--bad);color:var(--bad);font-size:13px}

/* detalhes */
.dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px 24px;margin:0}
.dl div small{display:block;color:var(--muted);margin-bottom:2px}
.dl div b{font-size:14px;overflow-wrap:anywhere}
.dl .wide{grid-column:1/-1}
.panel-head.split-head{align-items:flex-start}
.note{font-size:12px;color:var(--muted);margin:6px 0 0}

/* matriz de acessos */
.matrix-wrap{overflow:auto;max-height:70vh;border:1px solid var(--line);background:var(--surface)}
table.matrix{border-collapse:separate;border-spacing:0;min-width:100%}
table.matrix th,table.matrix td{white-space:normal}
table.matrix thead th{position:sticky;top:0;z-index:3;text-align:center;vertical-align:bottom;min-width:120px}
table.matrix thead th:first-child{left:0;z-index:4;text-align:left;min-width:280px}
table.matrix tbody th{position:sticky;left:0;z-index:2;background:var(--surface);text-transform:none;letter-spacing:0;font-size:13px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line)}
table.matrix td{text-align:center;padding:10px}
table.matrix tr.module-row th{background:var(--navy);color:#fff;font-size:10px;text-transform:uppercase;letter-spacing:.12em;padding:10px 16px}
[data-theme=dark] table.matrix tr.module-row th{background:var(--blue)}
table.matrix tr.screen-row th{background:var(--surface-2);font-weight:800;font-size:12px}
table.matrix tr.screen-row td{background:var(--surface-2)}
table.matrix .col-admin{background:var(--surface-2)}
.tag-new{display:inline-block;margin-left:8px;padding:1px 7px;background:var(--yellow);color:#111;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.col-tools{display:flex;gap:6px;justify-content:center;margin-top:6px}
.col-tools button{border:1px solid var(--line);background:var(--surface);font-size:9px;padding:2px 6px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.perm-yes{font-weight:800;color:var(--good)}
.perm-no{color:var(--muted)}
.sticky-actions{position:sticky;bottom:0;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--yellow);margin-top:-1px}

/* conciliação e fluxo */
.match{font-size:12px;color:var(--muted)}
.match b{color:var(--ink)}
.cand-list{list-style:none;margin:0;padding:0;border:1px solid var(--line)}
.cand-list li{display:flex;gap:12px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line)}
.cand-list li:last-child{border:0}
.cand-list label{display:flex;gap:12px;align-items:center;flex:1;cursor:pointer}
.cand-list .amount{margin-left:auto;font-weight:800;white-space:nowrap}
.cand-list .exact{border-left:3px solid var(--yellow)}
.sum-box{display:flex;justify-content:space-between;gap:12px;padding:14px 16px;background:var(--surface-2);border:1px solid var(--line);margin:14px 0;font-weight:800}
.sum-box.ok{border-color:var(--good);color:var(--good)}
.sum-box.off{border-color:var(--bad);color:var(--bad)}
.pos{color:var(--good)}
.neg{color:var(--bad)}
.bars.tall{height:280px}
.bar.s0.out{background:var(--yellow)}
.legend i.out{background:var(--yellow)}
.bar.ghost{opacity:.45}
.flow-note{padding:12px 18px;font-size:12px;color:var(--muted);border-top:1px solid var(--line)}
.search-section{margin-bottom:18px}
.search-section .panel-head{padding:16px 18px;margin:0;border-bottom:1px solid var(--line)}
.count{background:var(--navy);color:#fff;font-size:10px;font-weight:800;padding:2px 8px}
[data-theme=dark] .count{background:var(--yellow);color:#111}

@media(max-width:980px){
  .public{grid-template-columns:1fr}
  .public-art{min-height:240px}
  .form-grid.cols4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .topbar form.search{display:none}
}
@media(max-width:600px){.form-grid.cols4{grid-template-columns:1fr}}

/* indicadores */
.kpi b{font-size:clamp(18px,1.7vw,23px);white-space:nowrap}
.kpi b.pos{color:var(--good)}.kpi b.neg{color:var(--bad)}
.bar em{font-size:10px;white-space:nowrap}

/* NF-e */
.item-card{border:1px solid var(--line);background:var(--surface-2);padding:16px 18px;margin-bottom:14px}
.item-head{display:flex;gap:14px;align-items:flex-end;margin-bottom:14px;flex-wrap:wrap;padding-bottom:12px;border-bottom:1px solid var(--line)}
.item-head b{font:800 14px var(--display);padding-bottom:10px}
.item-pick{flex:1;min-width:240px;max-width:420px}
.item-card .item-subtotal{margin-left:auto;font-size:12px;color:var(--muted);padding-bottom:10px;white-space:nowrap}
/* grade do item: 6 colunas, cada campo ocupa a largura do seu conteúdo (span-1 a span-6) */
.item-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px 14px;align-items:start}
.item-grid .span-2{grid-column:span 2}.item-grid .span-3{grid-column:span 3}.item-grid .span-4{grid-column:span 4}.item-grid .span-6{grid-column:1/-1}
.item-grid .fld input,.item-grid .fld select{background:var(--surface)}
.item-more{margin-top:14px;border-top:1px dashed var(--line);padding-top:10px}
.item-more>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;font-size:10px;text-transform:uppercase;letter-spacing:.13em;font-weight:800;color:var(--head);padding:4px 0 10px;user-select:none}
.item-more>summary::-webkit-details-marker{display:none}
.item-more>summary:before{content:"";width:0;height:0;border:5px solid transparent;border-left:6px solid currentColor;border-right:0;transition:transform .15s}
.item-more[open]>summary:before{transform:rotate(90deg)}
.item-more>summary:hover{color:var(--ink)}
@media(max-width:1100px){.item-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.item-grid .span-4{grid-column:1/-1}}
@media(max-width:700px){.item-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.item-grid .span-2,.item-grid .span-3,.item-grid .span-4{grid-column:1/-1}
  .item-pick{max-width:none;min-width:100%}.item-card .item-subtotal{margin-left:0}}
.item-card .item-subtotal b{font:800 13px var(--display);color:var(--ink);margin:0;padding:0}
.grid-title{grid-column:1/-1;font-size:9px;text-transform:uppercase;letter-spacing:.13em;font-weight:800;color:var(--head);padding-top:6px;border-top:1px dashed var(--line);margin-top:4px}
.grid-title:first-child{border-top:0;padding-top:0;margin-top:0}
.fld[hidden]{display:none}
.live-total{margin-left:auto;font-size:12px;color:var(--muted)}
.live-total b{font:800 15px var(--display);color:var(--ink);letter-spacing:-.02em}
.live-total.ok b{color:var(--good)}.live-total.off b{color:var(--bad)}
.inst-tools{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;padding:12px 14px;margin-bottom:14px;border:1px dashed var(--line);background:var(--surface-2)}
.inst-tools .fld{min-width:160px}
.inst-row{display:flex;gap:14px;align-items:flex-end;margin-bottom:10px;flex-wrap:wrap}
.inst-row .fld{min-width:200px}
.inst-row .inst-number{font:800 12px var(--display);color:var(--muted);padding-bottom:12px;min-width:70px}
.key-box{font-family:Consolas,monospace;font-size:12px;overflow-wrap:anywhere}
.event-form{margin-top:14px}
.flash.info{border-left-color:var(--info)}

/* listas de totais: o valor nunca quebra entre "R$" e o número */
.lines li b{white-space:nowrap;text-align:right}
.lines li span{min-width:0}

/* modal de confirmação e aviso (substitui confirm/alert do navegador) */
.modal-wrap{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:16px}
.modal-wrap[hidden]{display:none}
.modal-bg{position:absolute;inset:0;background:#030c2a99;opacity:0;transition:opacity .18s}
.modal{position:relative;width:min(480px,100%);background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--yellow);
  box-shadow:0 24px 60px #030c2a55;padding:24px 24px 20px;transform:translateY(10px) scale(.98);opacity:0;transition:transform .18s,opacity .18s}
.modal.danger{border-top-color:var(--bad)}
.modal-wrap.open .modal-bg{opacity:1}
.modal-wrap.open .modal{transform:none;opacity:1}
.modal-head small{color:var(--muted)}
.modal.danger .modal-head small{color:var(--bad)}
.modal-head h3{font-size:22px;margin-top:6px}
.modal-text{margin:14px 0 22px;color:var(--ink);font-size:14px;line-height:1.55;white-space:pre-line}
.modal-foot{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.modal-foot .btn{min-width:120px}
body.modal-open{overflow:hidden}
@media(max-width:600px){.modal-foot .btn{flex:1}}
@media(prefers-reduced-motion:reduce){.modal,.modal-bg{transition:none}}

/* NF-e: destinatário digitado (4 colunas; o nome e o logradouro ocupam 2) */
.dest-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 16px;align-items:start}
.dest-grid .span-2{grid-column:span 2}
@media(max-width:1100px){.dest-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.dest-grid{grid-template-columns:1fr}.dest-grid .span-2{grid-column:auto}}

/* cadastro de parceiros: CEP com busca e validação ao digitar */
.cep-box{display:flex;gap:8px;align-items:stretch}
.cep-box input{flex:1;min-width:0}
.cep-box .btn.sm{min-height:42px}
.fld .hint.ok{color:var(--good);font-weight:700}
.fld .hint.bad{color:var(--bad);font-weight:700}
.fld .hint.busy{color:var(--info);font-weight:700}
.fld.filled input{border-color:var(--good)}
.fld.is-valid input{border-color:var(--good)}