/* ============================================================
MODAL DE CONFERENCIA DE RECEBIMENTO NF-e
Markup em parciais/recebimento.html, carregado sob demanda por
js/compras.js -> rbModalConferencia(). Este arquivo carrega no
load do painel (o no painel.html), entao o modal ja nasce
estilizado quando o parcial entra no DOM.
TUDO aqui esta escopado em #rbModal. Dois motivos:
1. .modal / .modal-header / .modal-body / .modal-footer ja existem
em css/modais.css com OUTRO significado (21 usos no painel);
2. css/base.css estiliza table/th/td por seletor de ELEMENTO, e
sem o escopo essas regras vazariam para dentro do modal.
O #rbModal (id) ganha dos dois por especificidade, em qualquer ordem
de . Ainda assim este arquivo vai por ULTIMO no .
============================================================ */
#rbModal{
/* zera o que css/modais.css aplica em .modal e monta o overlay */
--rb-blue:#1a3c7d; --rb-ink:#1f2733; --rb-muted:#6a7688; --rb-line:#dde3ec;
--rb-field:#f3f5f8; --rb-chip:#f4f7fb; --rb-blue-soft:#e9f0fb;
--rb-good:#1f7a3d; --rb-good-bg:#e7f4ec; --rb-warn:#b26a00; --rb-warn-bg:#fdf3e3;
--rb-bad:#c0392b; --rb-bad-bg:#fbe9e7;
display:none; position:fixed; inset:0; z-index:1060; overflow:auto; padding:18px;
background:rgba(18,30,55,.55); width:auto; max-width:none; max-height:none;
border-radius:0; box-shadow:none;
color:var(--rb-ink); font-size:13px; line-height:1.5;
}
#rbModal.show{ display:block; }
#rbModal *{ box-sizing:border-box; }
#rbModal .modal-dialog{ max-width:min(1480px, 100%); margin:0 auto; }
#rbModal .modal-content{ background:#fff; border:1px solid var(--rb-line); border-radius:12px;
overflow:hidden; box-shadow:0 10px 40px rgba(20,40,80,.16); }
/* ---------- cabecalho ---------- */
#rbModal .modal-header{ background:var(--rb-blue); color:#fff; padding:13px 18px; border:0;
border-radius:0; display:flex; align-items:center; gap:12px; }
#rbModal .modal-title{ font-size:16px; font-weight:700; margin:0; color:#fff; }
#rbModal .rb-stpill{ font-size:11px; font-weight:700; background:rgba(255,255,255,.2);
border-radius:999px; padding:3px 10px; text-transform:none; letter-spacing:0; }
#rbModal .rb-x{ margin-left:auto; background:none; border:none; color:#fff; font-size:13px;
font-weight:600; cursor:pointer; padding:4px 2px; }
/* ---------- corpo: main + rail ---------- */
#rbModal .modal-body{ padding:0; display:grid; grid-template-columns:minmax(0,1fr) 210px; }
@media(max-width:860px){ #rbModal .modal-body{ grid-template-columns:1fr; } }
#rbModal .rb-main{ padding:16px 18px; min-width:0; }
/* fornecedor + dados da NF */
#rbModal .rb-forn{ display:flex; gap:12px; align-items:flex-start; margin-bottom:12px; }
#rbModal .rb-av{ width:52px; height:52px; border-radius:9px; background:#2f9e5e; color:#fff;
font-weight:800; font-size:18px; display:flex; align-items:center; justify-content:center; flex:none; }
#rbModal .rb-grid{ display:grid; gap:8px 12px; flex:1; grid-template-columns:2fr 1.2fr 1fr .6fr; }
#rbModal .rb-grid5{ display:grid; gap:8px 12px; grid-template-columns:repeat(5,1fr); }
@media(max-width:720px){ #rbModal .rb-grid,#rbModal .rb-grid5{ grid-template-columns:1fr 1fr; } }
#rbModal .rb-fld{ display:flex; flex-direction:column; gap:2px; }
#rbModal .rb-fld label{ font-size:9.5px; color:var(--rb-muted); text-transform:uppercase;
letter-spacing:.03em; margin:0; }
#rbModal .rb-fld .rb-val{ background:var(--rb-field); border:1px solid var(--rb-line);
border-radius:6px; padding:6px 9px; font-size:12.5px; min-height:30px; font-weight:500; }
#rbModal .rb-mono,#rbModal .rb-val.rb-mono{ font-family:ui-monospace,Consolas,"IBM Plex Mono",monospace; }
#rbModal .rb-fornok{ color:var(--rb-good); font-size:12px; font-weight:700; }
#rbModal .rb-dadosnf{ font-size:11px; color:var(--rb-muted); font-weight:600; margin:6px 0 4px; }
/* ---------- abas (nav-tabs do Bootstrap) ---------- */
#rbModal .nav-tabs{ display:flex; gap:2px; list-style:none; margin:6px 0 0; padding:0;
border-bottom:2px solid var(--rb-line); overflow-x:auto; background:none; }
#rbModal .nav-item{ margin:0; }
#rbModal .nav-link{ font-family:inherit; font-size:12.5px; font-weight:600; cursor:pointer;
background:none; border:none; color:var(--rb-muted); padding:9px 13px;
border-bottom:3px solid transparent; margin-bottom:-2px; white-space:nowrap; }
#rbModal .nav-link.active{ color:var(--rb-blue); border-color:var(--rb-blue); background:none; }
#rbModal .tab-pane{ display:none; padding:14px 2px; }
#rbModal .tab-pane.active{ display:block; }
#rbModal .rb-b{ font-size:9px; font-weight:700; background:var(--rb-bad-bg); color:var(--rb-bad);
border-radius:999px; padding:0 5px; margin-left:4px; text-transform:none; }
/* ---------- tabelas (sobrescreve table/th/td de css/base.css) ---------- */
#rbModal .table{ width:100%; border-collapse:collapse; background:none; border-radius:0;
box-shadow:none; margin:0; }
#rbModal .table th,#rbModal .table td{ text-align:left; font-size:12px; padding:8px 9px;
border-bottom:1px solid var(--rb-line); vertical-align:middle; position:static; letter-spacing:0; }
#rbModal .table th{ font-size:9.5px; letter-spacing:.03em; text-transform:uppercase;
color:var(--rb-muted); font-weight:600; background:var(--rb-chip); border-bottom:1px solid var(--rb-line); }
#rbModal .table tr:hover td{ background:transparent; }
#rbModal .table .n{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
#rbModal .table tr.rb-sel td{ background:#f1f6fd; }
#rbModal .rb-scroll{ overflow-x:auto; }
/* aba Itens: larguras das colunas que tem controle ou texto longo */
#rbModal .rb-col-cat{ width:190px; }
#rbModal .rb-col-cat .form-select{ width:100%; }
#rbModal .rb-col-conf{ min-width:300px; }
#rbModal .rb-aloc{ padding:4px 0; }
#rbModal .rb-aloc + .rb-aloc{ border-top:1px dashed var(--rb-line); }
#rbModal .rb-aloc .badge{ white-space:nowrap; }
#rbModal .rb-aloc-d{ font-size:10.5px; color:var(--rb-muted); margin-top:3px; line-height:1.45; }
/* caixa fiscal: uma linha por imposto, com o seletor de credito a direita */
#rbModal .rb-impl{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
#rbModal .rb-impl .rb-cred{ margin-left:auto; display:flex; align-items:center; gap:6px;
font-size:11px; color:var(--rb-muted); font-weight:600; }
#rbModal .rb-impl .form-select{ width:130px; }
/* ---------- controles ---------- */
#rbModal .rb-hint{ font-size:11.5px; color:var(--rb-muted); margin-bottom:10px; }
#rbModal .form-select,#rbModal .form-control{ font-family:inherit; font-size:12px; padding:4px 7px;
border:1px solid var(--rb-blue); border-radius:6px; background:#fff; color:var(--rb-ink);
min-width:0; max-width:100%; }
#rbModal .form-select:focus,#rbModal .form-control:focus{ outline:none; box-shadow:0 0 0 2px var(--rb-blue-soft); }
#rbModal .rb-plain{ border-color:var(--rb-line); }
#rbModal .btn{ font-family:inherit; font-size:12.5px; font-weight:600; cursor:pointer;
border-radius:7px; padding:8px 13px; border:1.5px solid var(--rb-line); background:#fff;
color:var(--rb-ink); transition:none; }
#rbModal .btn-sm{ font-size:11.5px; padding:6px 10px; }
#rbModal .rb-tgl{ font-family:inherit; font-size:10.5px; font-weight:700; border-radius:5px;
padding:3px 10px; cursor:pointer; border:1px solid var(--rb-line); background:#fff; }
#rbModal .rb-tgl.on{ color:var(--rb-good); background:var(--rb-good-bg); border-color:#b7ddc6; }
#rbModal .rb-tgl.off{ color:var(--rb-bad); background:var(--rb-bad-bg); border-color:#eec2bb; }
#rbModal .rb-pen{ background:none; border:none; cursor:pointer; font-size:12px; padding:0 2px; }
#rbModal .rb-assoc{ color:var(--rb-good); font-weight:600; font-size:11.5px; }
#rbModal .badge{ display:inline-block; font-size:10px; font-weight:700; border-radius:5px;
padding:2px 7px; text-transform:none; letter-spacing:0; }
#rbModal .badge.ok{ color:var(--rb-good); background:var(--rb-good-bg); }
#rbModal .badge.w{ color:var(--rb-warn); background:var(--rb-warn-bg); }
#rbModal .badge.bad{ color:var(--rb-bad); background:var(--rb-bad-bg); }
#rbModal .badge.cat{ font-size:10.5px; font-weight:600; background:var(--rb-chip);
border:1px solid var(--rb-line); color:var(--rb-ink); padding:2px 8px; }
#rbModal .rb-acts{ display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 2px; font-size:12px; }
#rbModal .rb-acts a{ color:var(--rb-blue); font-weight:600; cursor:pointer; text-decoration:none; }
#rbModal .rb-acts a:hover{ text-decoration:underline; }
#rbModal .rb-box{ border:1px solid var(--rb-line); border-radius:9px; padding:11px 13px;
background:var(--rb-chip); margin-top:12px; }
#rbModal .rb-box.div{ border-color:#e3a79e; }
#rbModal .rb-boxtit{ font-size:10.5px; font-weight:700; color:var(--rb-muted);
text-transform:uppercase; letter-spacing:.05em; margin-bottom:6px; }
#rbModal .rb-param{ font-size:11px; color:var(--rb-muted); background:var(--rb-blue-soft);
border-radius:6px; padding:6px 9px; margin-bottom:9px; }
#rbModal .rb-imp{ display:grid; grid-template-columns:1fr 1fr; gap:9px 18px; font-size:12.5px; }
@media(max-width:720px){ #rbModal .rb-imp{ grid-template-columns:1fr; } }
#rbModal .rb-alerta{ background:var(--rb-bad-bg); border:1px solid #e3a79e; color:var(--rb-bad);
border-radius:8px; padding:9px 12px; font-size:12.5px; margin-top:9px; }
#rbModal .rb-okbox{ background:var(--rb-good-bg); border:1px solid #b7ddc6; border-radius:9px;
padding:11px 13px; font-size:13px; margin-top:12px; }
#rbModal .rb-vazio{ border:1px dashed var(--rb-line); border-radius:9px; padding:22px;
text-align:center; color:var(--rb-muted); font-size:12px; }
/* lotes */
#rbModal .rb-lote{ border:1px solid var(--rb-line); border-radius:9px; padding:11px 13px; }
#rbModal .rb-lh{ display:flex; gap:8px; align-items:center; font-weight:600; font-size:13px; margin-bottom:8px; }
#rbModal .rb-falta{ font-size:10px; font-weight:700; color:var(--rb-bad); background:var(--rb-bad-bg);
border-radius:5px; padding:2px 7px; margin-left:auto; }
#rbModal .rb-loteform{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
#rbModal .rb-loteform input{ font-family:inherit; font-size:12px; padding:6px 8px;
border:1px solid var(--rb-line); border-radius:6px; }
/* ---------- rail lateral ---------- */
#rbModal .rb-rail{ border-left:1px solid var(--rb-line); background:#fafbfd; padding:12px 10px;
display:flex; flex-direction:column; gap:2px; }
#rbModal .rb-rail button{ font-family:inherit; font-size:12.5px; font-weight:600; text-align:left;
cursor:pointer; background:none; border:none; color:var(--rb-ink); padding:9px 10px;
border-radius:8px; display:flex; gap:9px; align-items:center; }
#rbModal .rb-rail button:hover{ background:#fff; }
#rbModal .rb-rail button.rb-prim{ background:#2f9e5e; color:#fff; justify-content:center; margin-bottom:6px; }
#rbModal .rb-rail button.rb-prim[disabled]{ opacity:.45; cursor:not-allowed; }
#rbModal .rb-rail .ic{ font-size:15px; width:18px; text-align:center; }
#rbModal .rb-rail hr{ border:none; border-top:1px solid var(--rb-line); margin:6px 4px; }
/* ---------- rodape ---------- */
#rbModal .modal-footer{ border-top:1px solid var(--rb-line); background:var(--rb-warn-bg);
padding:9px 18px; display:flex; gap:14px; align-items:center; justify-content:flex-start;
flex-wrap:wrap; font-size:11.5px; }
#rbModal .rb-cc{ color:var(--rb-warn); font-weight:600; }
#rbModal .rb-chave{ font-family:ui-monospace,Consolas,"IBM Plex Mono",monospace; color:var(--rb-muted); }
/* ============================================================
2. OVERLAY DE DOCUMENTO — DANFE / XML abertos pelo rail do modal
A DANFE e montada do que ja esta em memoria e o XML vem da rota; os dois
aparecem aqui, em tela cheia.
z-index 1070 para cobrir o #rbModal (1060). A DANFE imita papel — cor fixa,
Arial — de proposito: e a unica parte do painel que nao deve seguir o tema.
============================================================ */
#rbDocOvl{ position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:1070;
overflow:auto; padding:26px; }
#rbDocOvl[hidden]{ display:none !important; }
#rbDocOvl *{ box-sizing:border-box; }
#rbDocBody{ max-width:660px; margin:0 auto; font-size:14px; }
#rbDocOvl .btn{ font-family:inherit; font-size:13px; font-weight:600; cursor:pointer;
border-radius:8px; padding:9px 15px; border:1.5px solid #d9e0ea; background:#fff; color:#1a2230; }
#rbDocBody .rb-danfe{ background:#fff; color:#111; border:1px solid #333; border-radius:4px;
padding:10px; font-family:Arial,Helvetica,sans-serif; font-size:14px;
box-shadow:0 6px 22px rgba(20,40,80,.10); }
#rbDocBody .rb-danfe .ribbon{ background:#fdf3e3; color:#8a5a12; border:1px dashed #d9b877;
border-radius:5px; padding:5px 7px; font-size:11px; text-align:center;
margin-bottom:7px; font-weight:600; }
#rbDocBody .rb-danfe .dh{ display:flex; align-items:center; gap:6px; border-bottom:1px solid #333;
padding-bottom:6px; margin-bottom:6px; }
#rbDocBody .rb-danfe .dh b{ font-size:17px; }
#rbDocBody .rb-danfe .dh span{ font-size:10px; color:#555; }
#rbDocBody .rb-danfe .dh .ent{ margin-left:auto; border:1px solid #333; border-radius:3px;
padding:1px 6px; font-weight:700; color:#111; }
#rbDocBody .rb-danfe .drow{ display:flex; gap:10px; margin-bottom:6px; }
#rbDocBody .rb-danfe .drow small{ display:block; color:#666; font-size:9px; }
#rbDocBody .rb-danfe .drow b{ font-size:12px; }
#rbDocBody .rb-danfe .chave{ border:1px solid #333; border-radius:3px; padding:5px;
margin-bottom:6px; text-align:center; }
#rbDocBody .rb-danfe .chave small{ color:#666; font-size:9px; }
#rbDocBody .rb-danfe .mono{ font-family:ui-monospace,Consolas,monospace; font-size:12px; }
#rbDocBody .rb-danfe .barcode{ height:26px; margin:4px 0;
background:repeating-linear-gradient(90deg,#111 0 1px,#fff 1px 2px,#111 2px 4px,#fff 4px 7px,#111 7px 8px,#fff 8px 11px); }
#rbDocBody .rb-danfe .dbox{ border:1px solid #333; border-radius:3px; padding:5px; margin-bottom:6px; }
#rbDocBody .rb-danfe .dbox small{ color:#666; font-size:9px; display:block; letter-spacing:.04em; }
#rbDocBody .rb-danfe .dbox b{ font-size:12px; }
#rbDocBody .rb-danfe table{ width:100%; border-collapse:collapse; margin-bottom:6px;
background:none; box-shadow:none; border-radius:0; }
#rbDocBody .rb-danfe th,#rbDocBody .rb-danfe td{ border:1px solid #999; padding:2px 4px;
font-size:12px; text-align:left; color:#111; position:static; text-transform:none; letter-spacing:0; }
#rbDocBody .rb-danfe th{ background:#eee; }