:root{ --laranja:#E87722; --terra:#B85518; --texto:#4A3728; --bege:#F5EFE0; --creme:#E8DCC4; --vermelho:#C0392B; --verde:#2E7D46; }
*{ box-sizing:border-box; }
body{ font-family:'Inter',Arial,Helvetica,sans-serif; color:var(--texto); background:#fff; margin:0; }
header{ background:var(--laranja); color:#fff; padding:14px 24px; display:flex; align-items:center; gap:12px; }
header h1{ font-size:18px; margin:0; }
main{ max-width:980px; margin:24px auto; padding:0 16px; }
a.btn,button{ background:var(--terra); color:#fff; border:0; padding:8px 14px; border-radius:6px; text-decoration:none; font-size:14px; cursor:pointer; }
a.btn:hover,button:hover{ background:#9a4513; }
table{ width:100%; border-collapse:collapse; margin-top:12px; }
th{ background:var(--laranja); color:#fff; text-align:left; padding:8px; font-size:13px; }
td{ border:1px solid var(--creme); padding:8px; font-size:13px; }
tr:nth-child(even) td{ background:var(--bege); }
.kpi{ background:var(--bege); border-radius:8px; padding:12px 16px; margin:6px 0; }
.kpi b{ color:var(--terra); }
.neg{ color:var(--vermelho); font-weight:bold; }
.brand{ color:inherit; text-decoration:none; }
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-top:16px; }
.card{ display:flex; flex-direction:column; gap:8px; background:#fff; border:1px solid var(--creme); border-radius:12px; padding:16px 18px; text-decoration:none; color:var(--texto); }
.card:hover{ border-color:var(--laranja); }
.card-ico{ width:40px; height:40px; border-radius:10px; background:var(--bege); display:flex; align-items:center; justify-content:center; color:var(--laranja); }
.card-tit{ font-weight:bold; color:var(--terra); font-size:15px; }
.card-desc{ font-size:13px; line-height:1.5; flex:1; }
.card-cta{ font-size:13px; color:var(--laranja); font-weight:bold; }
.card-misc{ padding:0; }
.card-misc:hover{ border-color:var(--laranja); }
.card-misc .card-body{ display:flex; flex-direction:column; gap:8px; text-decoration:none;
  color:inherit; padding:16px 18px; }
.card-extras{ display:flex; flex-wrap:wrap; gap:6px 14px; padding:10px 18px; margin-top:-8px;
  border-top:1px solid var(--creme); }
.card-extras a{ font-size:12.5px; color:var(--terra); text-decoration:none; font-weight:600; }
.card-extras a:hover{ color:var(--laranja); text-decoration:underline; }

/* ---- Seções agregadas (cliente/vendedor) na tela de detalhe ---- */
.ag-card{ border:1px solid var(--creme); border-radius:8px; overflow:hidden; margin-top:18px; }
.ag-h{ background:var(--laranja); color:#fff; font-weight:bold; padding:8px 11px; }
.ag-cap{ background:var(--bege); color:#7a5c3f; font-style:italic; font-size:12px; padding:5px 11px; border-bottom:1px solid var(--creme); }
.ag-hdr,.ag-sum{ display:grid; grid-template-columns:3fr 1.2fr 1fr; gap:8px; align-items:center; padding:6px 11px; }
.ag-hdr{ background:var(--bege); color:var(--terra); font-size:11px; font-weight:bold; }
.ag-hdr .r,.ag-sum .r{ text-align:right; font-variant-numeric:tabular-nums; }
.ag-item{ border-top:1px solid var(--creme); }
.ag-sum{ cursor:pointer; font-size:13px; list-style:none; }
.ag-sum::-webkit-details-marker{ display:none; }
.ag-item[data-empty] .ag-sum{ cursor:default; }
.ag-nome::before{ content:"\25B8"; color:var(--laranja); font-weight:bold; margin-right:6px; }
.ag-item[open] .ag-nome::before{ content:"\25BE"; }
.ag-item[data-empty] .ag-nome::before{ content:""; margin-right:0; }
.ag-drill{ margin:0 0 6px; }
.ag-drill th{ background:var(--terra); font-size:11px; padding:5px 8px; }
.ag-drill td{ font-size:12px; padding:5px 8px; }
.ag-vazio{ padding:10px 11px; color:#7a5c3f; }

/* ---- Badges (semáforo de margem e status) e alertas ---- */
.badge{ display:inline-block; padding:2px 8px; border-radius:10px; font-size:11px; font-weight:bold; }
.badge-verde,.badge-vigente,.badge-aprovada{ background:#1E7A34; color:#fff; }
.badge-amarelo{ background:#B7791F; color:#fff; }
.badge-vermelho,.badge-rejeitada{ background:var(--vermelho); color:#fff; }
.badge-pendente,.badge-encerrada{ background:#8A8A8A; color:#fff; }
.badge-rascunho{ background:var(--bege); color:var(--terra); border:1px solid var(--creme); }
.badge-ok{ background:#1E7A34; color:#fff; }
.badge-alerta{ background:#B7791F; color:#fff; }
.badge-erro{ background:var(--vermelho); color:#fff; }
.badge-alta{ background:var(--vermelho); color:#fff; }
.badge-media{ background:#B7791F; color:#fff; }
.conf-marca{ font-size:12px; font-weight:700; margin-left:4px; cursor:default; }
.conf-marca.diverg{ color:#B7791F; }
.conf-marca.pend{ color:#8A8A8A; }
.conf-fotos{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.conf-thumb img{ height:80px; width:auto; border-radius:6px; border:1px solid var(--creme); display:block; }
.conf-thumb-mini{ display:inline-block; vertical-align:middle; margin-left:6px; line-height:0; }
.conf-thumb-mini img{ height:34px; width:34px; object-fit:cover; border-radius:6px; border:1px solid var(--creme); }
.alerta{ color:var(--vermelho); font-weight:bold; font-size:13px; }

/* ---- Tabela larga (relatório): rolagem horizontal + números à direita ---- */
.tabela-scroll{ overflow-x:auto; margin-top:12px; }
.tabela-scroll table{ margin-top:0; }
/* Matriz de acessos: container com rolagem nos 2 eixos + altura maxima, para o
   cabecalho sticky (.tab-congela) grudar DENTRO dele (rolagem de pagina nao gruda
   quando ha ancestral com overflow). Da cabecalho-fixo + rolagem horizontal sem
   quebrar o layout em telas menores. */
.matriz-scroll{ overflow:auto; max-height:72vh; margin-top:12px; }
.matriz-scroll table{ margin-top:0; }
th.num,td.num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
td.suave{ color:#7a5c3f; }
.acoes-export{ display:flex; align-items:center; gap:14px; margin-top:14px; }
.acoes-export .sec{ font-size:13px; }

/* ---- Inter self-hosted ---- */
@font-face{ font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('/static/fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('/static/fonts/inter-latin-600-normal.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap; src:url('/static/fonts/inter-latin-700-normal.woff2') format('woff2'); }

/* ---- Login (página standalone, split) ---- */
.login-wrap{ display:flex; min-height:100vh; }
.login-brand{ flex:0 0 42%; background:var(--laranja); color:#fff; padding:40px 36px; display:flex; flex-direction:column; justify-content:space-between; }
.login-brand img{ width:200px; max-width:72%; height:auto; }
.login-tagline{ font-size:26px; font-weight:700; line-height:1.25; }
.login-sub{ font-size:13px; opacity:.92; margin-top:12px; }
.login-foot{ font-size:12px; opacity:.85; }
.login-panel{ flex:1; background:#fff; display:flex; flex-direction:column; justify-content:center; padding:48px 44px; }
.login-over{ font-size:13px; font-weight:600; letter-spacing:.5px; color:#9b8a7a; }
.login-panel h1{ font-size:28px; font-weight:700; color:var(--texto); margin:6px 0 10px; }
.login-dom{ font-size:15px; color:#6b5847; margin:0 0 24px; line-height:1.5; max-width:380px; }
.login-dom b{ color:var(--terra); }
.btn-google{ display:flex; align-items:center; justify-content:center; gap:10px; background:var(--terra); color:#fff; border:0; min-height:48px; padding:0 18px; border-radius:8px; font-size:15px; font-weight:600; text-decoration:none; cursor:pointer; width:100%; max-width:360px; }
.btn-google:hover{ background:#9a4513; }
.btn-google:focus-visible{ outline:3px solid #f3b07a; outline-offset:2px; }
.g-badge{ background:#fff; border-radius:4px; padding:3px; display:inline-flex; }
.login-note{ font-size:12px; color:#9b8a7a; margin-top:14px; max-width:360px; }
.login-alert{ display:flex; gap:10px; align-items:flex-start; background:#FBEAEA; border:1px solid #E9A8A3; border-radius:8px; padding:11px 13px; margin:0 0 20px; max-width:360px; }
.login-alert svg{ flex:none; margin-top:1px; }
.login-alert span{ font-size:14px; color:#7a1f1c; line-height:1.45; }
.login-dev{ display:inline-block; margin-top:18px; font-size:13px; color:var(--terra); }
@media (max-width:720px){
  .login-wrap{ flex-direction:column; }
  .login-brand{ flex:none; padding:24px; }
  .login-brand img{ width:160px; }
  .login-tagline{ font-size:20px; }
  .login-panel{ padding:28px 24px; }
}
.btn-danger{ background:var(--vermelho); color:#fff; border:0; padding:8px 14px; border-radius:6px; font-size:14px; cursor:pointer; }
.dono{ color:var(--terra); font-weight:600; white-space:nowrap; }
.nav-hub{ margin-left:auto; color:#fff; text-decoration:none; font-size:13px; border:1px solid rgba(255,255,255,.6); padding:5px 10px; border-radius:6px; }
.nav-hub:hover{ background:rgba(255,255,255,.15); }

/* ---- Bloco do usuário logado (canto direito do header) ---- */
.header-right{ margin-left:auto; display:flex; align-items:center; gap:12px; }
.header-right .nav-hub{ margin-left:0; }
.userbox{ position:relative; }
.userbox-btn{ display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.15); color:#fff; border:1px solid rgba(255,255,255,.35); padding:4px 10px 4px 4px; border-radius:20px; font-size:13px; line-height:1; cursor:pointer; }
.userbox-btn:hover{ background:rgba(255,255,255,.25); }
.userbox-ava{ width:28px; height:28px; border-radius:50%; background:#fff; color:var(--terra); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; flex:none; }
.userbox-ava.lg{ width:36px; height:36px; font-size:14px; background:var(--laranja); color:#fff; }
.userbox-nome{ font-weight:600; max-width:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.userbox-chev{ flex:none; opacity:.85; transition:transform .15s; }
.userbox-btn[aria-expanded="true"] .userbox-chev{ transform:rotate(180deg); }
.userbox-menu{ position:absolute; top:calc(100% + 8px); right:0; width:250px; background:#fff; color:var(--texto); border:1px solid var(--creme); border-radius:12px; box-shadow:0 8px 24px rgba(74,55,40,.18); overflow:hidden; z-index:50; }
.userbox-menu[hidden]{ display:none; }
.userbox-id{ display:flex; align-items:center; gap:10px; padding:14px 16px; background:var(--bege); }
.userbox-id-txt{ min-width:0; }
.userbox-id-txt b{ display:block; font-size:14px; color:var(--texto); }
.userbox-id-txt span{ display:block; font-size:12px; color:#8a7a68; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.userbox-role{ padding:8px 16px; border-top:1px solid var(--creme); }
.userbox-badge{ display:inline-block; font-size:11px; font-weight:700; color:var(--terra); background:var(--pessego,#F5B872); padding:2px 9px; border-radius:10px; text-transform:uppercase; letter-spacing:.3px; }
.userbox-sair{ display:flex; align-items:center; gap:10px; padding:12px 16px; border-top:1px solid var(--creme); color:var(--vermelho); text-decoration:none; font-size:14px; }
.userbox-sair:hover{ background:#fdf1ef; }
@media (max-width:560px){
  .userbox-nome{ display:none; }
  .userbox-btn{ padding:4px; }
}

/* ---- Inputs base (cosmético; sem width p/ não quebrar filtros inline) ---- */
input[type=text],input[type=date],input[type=number],input[list],select,textarea{
  font-family:inherit; font-size:14px; color:var(--texto); background:#fff;
  border:1px solid var(--creme); border-radius:8px; padding:8px 10px; }
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--laranja);
  box-shadow:0 0 0 3px rgba(232,119,34,.18); }

/* ---- Select padronizado (seta propria; nativo por baixo — teclado e leitor de tela) ---- */
select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23B85518' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center;
  padding-right:30px; cursor:pointer; line-height:1.35; }
select:disabled,select[readonly]{
  background-color:var(--bege); color:#8a7a68; cursor:default;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%238a7a68' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
select:invalid{ color:#8a7a68; }                 /* placeholder '— selecione —' nao parece escolha */
select option{ color:var(--texto); }
select[multiple],select[size]{ background-image:none; padding-right:10px; cursor:default; }
@media (max-width:640px){ select{ font-size:16px; } }

/* ---- Formulário moderno ---- */
.form-card{ background:#fff; border:1px solid var(--creme); border-radius:12px;
  padding:20px 22px; margin-top:16px; max-width:640px; }
.form-grid{ display:grid; gap:14px; }
.campo{ display:flex; flex-direction:column; gap:5px; }
.campo>.campo-lbl{ font-size:13px; font-weight:600; color:var(--terra); }
.campo .dica{ font-size:12px; color:#7a5c3f; }
.campo input,.campo select,.campo textarea{ width:100%; }
.campo-un{ font-size:13px; color:var(--terra); font-weight:600; }
.total-box{ background:var(--bege); border-radius:8px; padding:10px 14px; font-size:15px; }
.total-box b{ color:var(--terra); }
.form-acoes{ display:flex; gap:10px; flex-wrap:wrap; margin-top:4px; }

/* ---- Toolbar e botões secundários ---- */
.toolbar{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:14px 0; }
.btn-secondary{ background:#fff; color:var(--terra); border:1px solid var(--creme);
  padding:8px 14px; border-radius:6px; font-size:14px; text-decoration:none; cursor:pointer;
  display:inline-block; }
.btn-secondary:hover{ border-color:var(--laranja); background:var(--bege); }

/* ---- Chips de KPI ---- */
.chips{ display:flex; gap:10px; flex-wrap:wrap; margin:12px 0; }
.chip{ background:var(--bege); border-radius:20px; padding:6px 14px; font-size:13px; }
.chip b{ color:var(--terra); }

/* ---- Filtros em cartão ---- */
.filtros{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; background:#fff;
  border:1px solid var(--creme); border-radius:12px; padding:14px 16px; margin-top:12px; }

/* ---- Recebimento: telas de doca (mobile/tablet) — tudo escopado em .rcb ---- */
.rcb .prog{ background:var(--bege); border-radius:10px; padding:9px 13px; margin:12px 0; font-size:14px; }
.rcb .prog b{ color:var(--terra); } .rcb .prog .neg{ color:var(--vermelho); }
.rcb h3.grp{ background:var(--bege); color:var(--terra); font-size:14px; font-weight:700; padding:8px 12px; border-radius:8px; margin:16px 0 8px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:6px; }
.rcb h3.grp span{ background:var(--creme); color:var(--terra); border-radius:12px; padding:1px 9px; font-size:12px; }
.rcb h3.grp .grp-entrega{ margin-left:auto; font-size:12px; padding:4px 10px; }
.rcb .cards-rcb{ display:flex; flex-direction:column; gap:10px; }
.rcb .rcard{ display:flex; align-items:center; gap:10px; border:1px solid var(--creme); border-radius:12px; padding:13px 14px; background:#fff; text-decoration:none; color:var(--texto); }
.rcb a.rcard[href]:hover{ border-color:var(--laranja); }
.rcb a.rcard[href]::after{ content:"\203A"; color:var(--terra); font-size:22px; font-weight:700; flex:none; margin-left:2px; }
.rcb .rcard.done{ background:#fbfaf6; }
.rcb .rcard-main{ flex:1; min-width:0; }
.rcb .rcard-prod{ font-weight:700; font-size:15px; line-height:1.25; }
.rcb .rcard-meta{ font-size:13px; color:#7a5c3f; margin-top:3px; } .rcb .rcard-meta b{ color:var(--terra); }
.rcb .rcard-lref{ font-size:11px; color:#7a5c3f; margin-top:2px; }
.rcb .pillb{ display:inline-block; padding:5px 12px; border-radius:20px; font-size:12.5px; font-weight:700; white-space:nowrap; flex:none; }
.rcb .p-pend{ background:#6F6F6F; color:#fff; } .rcb .p-ok{ background:#1E7A34; color:#fff; }
.rcb .p-falta{ background:var(--vermelho); color:#fff; } .rcb .p-amarelo{ background:#976211; color:#fff; }
/* formulário de conferência */
.rcb .rcb-sec{ font-size:12px; font-weight:700; letter-spacing:.4px; color:var(--terra); text-transform:uppercase; border-bottom:1px solid var(--creme); padding-bottom:4px; margin:8px 0 2px; }
.rcb .cam-lbl{ display:block; border:1.5px dashed #E8B98A; background:#FBF3E9; color:var(--terra); border-radius:11px; padding:14px; text-align:center; font-weight:700; font-size:14px; cursor:pointer; }
.rcb .cam-lbl input{ position:absolute; width:1px; height:1px; opacity:0; }
.rcb .cam-lbl:focus-within{ border-color:var(--laranja); box-shadow:0 0 0 3px rgba(232,119,34,.18); }
.rcb #rcb-liq{ background:#eaf3ec; border:1px solid #bcdcc4; border-radius:11px; padding:12px 14px; margin:6px 0; }
.rcb .liq-r{ display:flex; justify-content:space-between; align-items:baseline; }
.rcb .liq-big{ font-size:22px; font-weight:800; color:#1E7A34; }
.rcb .liq-dif{ font-size:14px; font-weight:700; margin-top:5px; color:#1E7A34; }
.rcb .liq-dif.neg{ color:var(--vermelho); }
.rcb .savebar{ position:sticky; bottom:0; background:#fff; border-top:1px solid var(--creme); padding:11px 0; margin-top:16px; display:flex; gap:10px; }
.rcb .savebar button{ flex:1; padding:14px; font-size:16px; border-radius:10px; }
.rcb .savebar .sb-alt{ background:#fff; color:var(--terra); border:1px solid var(--creme); }
.rcb .savebar .sb-alt:hover{ background:var(--bege); }
.rcb-item{border:1px solid var(--creme);border-radius:8px;padding:12px;margin:12px 0}
.rcb-item.has-err{border-color:var(--vermelho)}
.rcb-item.is-ne{opacity:.55}
.rcb-item.is-ne .rcb-pesa,.rcb-item.is-ne .rcb-mais{pointer-events:none;filter:grayscale(1)}
.rcb-item-hd{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;margin-bottom:6px}
.rcb-item-prev{color:#555;font-size:.9em}
.rcb-item-err{color:var(--vermelho);font-weight:600;margin:4px 0}
.rcb-ne{display:block;margin:6px 0}
.rcb-mais>summary{cursor:pointer;color:var(--terra);margin-top:8px}
.rcb .rcb-fotos-atuais,.rcb .rcb-tray{ display:flex; flex-wrap:wrap; gap:8px; margin:8px 0; }
.rcb .rcb-thumb{ position:relative; width:72px; height:72px; border-radius:8px; overflow:hidden; border:1px solid var(--creme); display:inline-block; }
.rcb .rcb-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.rcb .rcb-thumb-x{ position:absolute; top:2px; right:2px; width:22px; height:22px; padding:0; border:none; border-radius:50%; background:rgba(0,0,0,.6); color:#fff; font-size:13px; line-height:22px; cursor:pointer; }
.rcb .rcb-semfoto{ display:block; margin:6px 0; }   /* mesmo visual do .rcb-ne (flag) */
.rcb .rcb-semfoto-lbl:not(:empty){ font-size:13px; color:var(--vermelho); font-weight:700; margin-top:4px; }
.rcb .rcb-motivo-dlg{ border:none; border-radius:12px; padding:18px; max-width:340px; }
.rcb .rcb-motivo-dlg::backdrop{ background:rgba(0,0,0,.4); }
.rcb .rcb-motivo-op{ display:block; padding:8px 4px; font-size:15px; }
.rcb .rcb-motivo-outro{ width:100%; margin:6px 0 12px; }
.rcb .rcb-motivo-dlg menu{ display:flex; gap:10px; padding:0; margin:0; }
.rcb .rcb-motivo-dlg menu button{ flex:1; padding:12px; border-radius:10px; }
.rcb .rcb-motivo-ok{ background:var(--terra); color:#fff; border:none; }
.rcb-mais-flat{ margin-top:8px; }
/* base responsiva mobile — só dentro de .rcb (nada fora de /recebimento muda) */
@media (max-width:640px){
  .rcb input,.rcb select,.rcb textarea{ font-size:16px; }   /* mata o auto-zoom do iOS */
  .rcb .btn,.rcb button,.rcb .btn-secondary{ min-height:44px; }
  .rcb table{ display:block; overflow-x:auto; }
}
/* tablet/desktop — cartões 2 por linha */
@media (min-width:641px){
  .rcb .cards-rcb{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
}
/* /compras — linguagem visual do modulo (cards, tabela em colunas, R$/kg, Delta) */
/* .presets saiu em 2026-07-30: o relatorio passou a usar .f-periodo, comum com a lista. */
.chip a{ color:var(--laranja); text-decoration:none; }
.chip a.ativo{ color:var(--terra); font-weight:700; text-decoration:underline; }
.cmp-search{ position:relative; flex:1; min-width:220px; }
.cmp-search input{ width:100%; padding:9px 12px; border:1px solid var(--creme); border-radius:9px;
  font-size:14px; }
.cmp-search input:focus{ outline:none; border-color:var(--laranja); }
.up{ color:var(--vermelho); } .down{ color:var(--verde); }
.dia-band{ display:flex; justify-content:space-between; align-items:baseline;
  background:linear-gradient(90deg,var(--bege),transparent); border-left:4px solid var(--laranja);
  padding:7px 12px; border-radius:6px; margin:14px 0 8px; }
.dia-band .d{ font-weight:800; font-size:15px; color:var(--terra); }
.dia-band .liq b{ color:var(--terra); }
details.forn{ background:#fff; border:1px solid var(--creme); border-radius:11px; margin:0 0 10px;
  box-shadow:0 1px 2px rgba(74,55,40,.05); overflow:hidden; }
details.forn>summary{ list-style:none; cursor:pointer; padding:11px 14px; display:flex;
  align-items:center; gap:10px; }
details.forn>summary::-webkit-details-marker{ display:none; }
.forn .chev{ width:20px; height:20px; flex:none; border-radius:6px; background:var(--bege);
  color:var(--laranja); font-weight:800; display:flex; align-items:center; justify-content:center; }
details.forn>summary .chev::before{ content:"+"; }
details.forn[open]>summary .chev::before{ content:"\2212"; }
.forn .fnome{ font-weight:700; font-size:14.5px; }
.forn .fmeta{ margin-left:auto; text-align:right; font-size:12px; color:#8a7358;
  font-variant-numeric:tabular-nums; white-space:nowrap; }
.forn .fmeta .liq{ font-weight:800; color:var(--terra); font-size:14px; }
.forn .fmeta .abate{ color:var(--vermelho); }
table.prod{ width:100%; border-collapse:collapse; font-size:13px; }
table.prod thead th{ font-size:10.5px; text-transform:uppercase; letter-spacing:.4px; color:#8a7358;
  font-weight:700; text-align:right; padding:6px 14px; border-top:1px solid var(--creme);
  background:#FCFAF5; }
table.prod thead th.l{ text-align:left; }
table.prod td{ padding:9px 14px; border-top:1px solid var(--creme); text-align:right;
  font-variant-numeric:tabular-nums; }
table.prod td.l{ text-align:left; }
/* Produto absorve a largura que sobra; as colunas numericas nunca quebram — sem isso o
   layout automatico reparte por conteudo e o nome do produto quebra em 3-4 linhas. Fora do
   mobile, onde a tabela vira cartao (linhas com data-label) e nowrap so atrapalharia. */
@media (min-width:641px){
  table.prod th.l:first-child, table.prod td.l:first-child{ width:100%; }
  table.prod thead th:not(.l), table.prod td:not(.l){ white-space:nowrap; }
  /* Cada fornecedor e uma <table> propria: sem largura declarada cada uma dimensiona pelas
     SUAS celulas e as colunas nao alinham entre os grupos. `table-layout:fixed` + largura nos
     <th> (a primeira linha e quem manda nesse modo) alinha todos os blocos. Produto fica sem
     largura — e a unica coluna livre, entao recebe todo o resto. Escopado em `.dia` p/ nao
     pegar as outras `table.prod` do hub (tabelas, matriz de acessos). */
  .cmp .dia table.prod{ table-layout:fixed; }
  /* anula o width:100% de cima: em layout fixo ele somaria >100% com as colunas em px e o
     navegador encolheria todas proporcionalmente. Aqui Produto e a coluna livre. */
  .cmp .dia table.prod th.l:first-child, .cmp .dia table.prod td.l:first-child{ width:auto; }
  .cmp .dia table.prod th.c-comp{ width:120px; }
  .cmp .dia table.prod th.c-qtd{ width:96px; }
  .cmp .dia table.prod th.c-preco{ width:152px; }
  .cmp .dia table.prod th.c-delta{ width:104px; }
  .cmp .dia table.prod th.c-total{ width:132px; }
}
table.prod tr:hover td{ background:#FCFAF5; }
.pnome{ font-weight:600; } .pcod{ color:#8a7358; font-size:11px; }
.pcomp{ display:inline-block; font-size:11px; color:var(--terra); background:var(--bege);
  border-radius:9px; padding:1px 8px; }
.rskg{ font-weight:800; font-size:14.5px; } .rskg .u{ font-weight:600; font-size:11px; color:#8a7358; }
.rsun{ font-weight:700; color:#6b7280; }
.delta{ font-weight:700; font-size:12.5px; white-space:nowrap; }
table.prod td.fora{ color:var(--terra); font-weight:700; }
.mrg-dev{ margin-left:6px; color:var(--terra); font-weight:700; font-size:12px; white-space:nowrap; }
.margem-aplicada{ margin:4px 0 2px; color:var(--texto); font-size:13.5px; }
.margem-aplicada .fora-resumo{ color:var(--terra); font-weight:600; }
.warn{ color:var(--laranja); font-weight:800; cursor:help; }
tr.dev td, tr.ne td{ color:#b0a084; }
tr.dev .pnome, tr.ne .pnome{ text-decoration:line-through; }
.badge-dev{ background:var(--creme); color:var(--terra); font-size:10px; font-weight:700;
  border-radius:9px; padding:1px 7px; }
.info { color: #2A6F97; }

/* filtro de faixa (chips toggle) + barra de itens — camada neutra (tabelas) */
.itens-barra{ align-items:center; }
.itens-visiveis{ color:#7a5c3f; font-size:13px; margin-left:auto; white-space:nowrap; }
.chip-faixa{ color:var(--terra); border:1px solid transparent; cursor:pointer; font-weight:600; }
.chip-faixa:hover{ background:#fff; border-color:var(--laranja); }
.chip-faixa.ativo{ background:#fff; border-color:var(--laranja); }
.chip-faixa[disabled]{ opacity:.45; cursor:default; background:var(--bege); border-color:transparent; }
.chip-faixa::before{ content:""; display:inline-block; width:8px; height:8px; border-radius:50%;
  margin-right:6px; vertical-align:middle; background:#8A8A8A; }
.chip-faixa[data-faixa="todas"]::before{ display:none; }
.chip-faixa.f-verde::before{ background:#1E7A34; }
.chip-faixa.f-amarelo::before{ background:#B7791F; }
.chip-faixa.f-vermelho::before{ background:var(--vermelho); }
.chip-faixa.f-pendente::before{ background:#8A8A8A; }
.legenda-faixa{ display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:#8a7358; margin:2px 0 12px; }
.legenda-faixa .dot{ display:inline-block; width:8px; height:8px; border-radius:50%; vertical-align:middle; margin-right:3px; }
.legenda-faixa .dot.f-verde{ background:#1E7A34; }
.legenda-faixa .dot.f-amarelo{ background:#B7791F; }
.legenda-faixa .dot.f-vermelho{ background:var(--vermelho); }
.legenda-faixa .dot.f-pendente{ background:#8A8A8A; }
/* linha com custo atual acima do congelado (defasagem) — realce ambar (detalhe/precos-cliente) */
tr.defasado td{ background:#FBEED9; }
/* col-vermelho/col-amarelo: ancoras semanticas/de teste na lista (cor e inline no <strong>) */

/* recalculo ao vivo da margem no editor (Fatia 4) */
.nao-salvo{ background:var(--creme); color:var(--terra); border:1px solid #d9c48f; border-radius:8px; padding:9px 13px; margin:8px 0; font-size:13px; font-weight:600; }
td.recalc-alterado{ background:#FFF3D6 !important; }

/* ---- /compras no celular — responsivo, escopado em .cmp (nada fora de /compras muda) ---- */
@media (max-width:640px){
  /* toque + anti-zoom do iOS (regra da busca vence por especificidade, não por ordem no arquivo) */
  .cmp input, .cmp select, .cmp textarea{ font-size:16px; }
  .cmp .cmp-search input{ font-size:16px; }
  .cmp button, .cmp .btn, .cmp .btn-secondary{ min-height:44px; }
  /* filtros/busca empilham em largura cheia */
  .cmp .filtros{ padding:12px; }
  .cmp .filtros>*{ flex-basis:100%; }
  .cmp .cmp-search{ min-width:0; }

  /* nova: tabela de linhas -> cards empilhados (DOM intacto) */
  .cmp #linhas thead{ display:none; }
  .cmp #linhas, .cmp #linhas tbody, .cmp #linhas tr, .cmp #linhas td{ display:block; width:100%; }
  .cmp #linhas tr.linha{ border:1px solid var(--creme); border-radius:12px; background:#fff;
    padding:10px 12px; margin:0 0 12px; }
  .cmp #linhas tr.linha.alerta{ border-color:var(--vermelho); }
  .cmp #linhas td{ border:0; background:transparent; padding:6px 0; }
  .cmp #linhas td[data-label]::before{ content:attr(data-label); display:block; font-size:12px;
    font-weight:600; color:var(--terra); margin-bottom:3px; }
  .cmp #linhas td.acao{ display:flex; justify-content:flex-end; }
  .cmp #linhas td.acao .rm{ min-width:44px; }

  /* nova: barra de ação fixa no rodapé */
  .cmp .form-acoes{ position:sticky; bottom:0; z-index:5; background:#fff;
    border-top:1px solid var(--creme); padding:11px 0 12px; margin-top:12px; }
  .cmp .form-acoes button{ flex:1; }

  /* lista agrupada: summary quebra linha (fmeta não transborda) */
  .cmp details.forn>summary{ flex-wrap:wrap; }
  .cmp .forn .fmeta{ margin-left:0; width:100%; white-space:normal; text-align:left; }

  /* lista agrupada: linha de produto -> card empilhado — ver bloco combinado
     "Tabela 'prod' -> cartões empilhados" (.cmp/.pnl/.est), mais abaixo neste arquivo. */

  /* lista plana: rola dentro do container; a página não rola lateral */
  .cmp .tabela-scroll table{ min-width:720px; }
}

/* ---- Typeahead próprio do lançamento (/compras/nova) — escopo .cmp ---- */
.cmp .cmp-ta{ position:relative; }
.cmp .cmp-dd{ position:absolute; z-index:30; left:0; right:0; top:100%; margin-top:3px;
  background:#fff; border:1px solid var(--creme); border-radius:9px;
  box-shadow:0 8px 24px rgba(0,0,0,.13); max-height:288px; overflow-y:auto; }
.cmp .cmp-dd-op{ display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  padding:9px 12px; cursor:pointer; }
.cmp .cmp-dd-op:hover, .cmp .cmp-dd-op.sel{ background:var(--bege); }
.cmp .cmp-op-l{ font-weight:600; color:var(--texto); }
.cmp .cmp-op-s{ font-size:12px; color:#7a5c3f; flex:none; }
.cmp .cmp-dd-msg{ padding:9px 12px; color:#7a5c3f; font-size:13px; }
.cmp .cmp-dd-act{ padding:10px 12px; cursor:pointer; color:var(--terra); font-weight:700;
  border-top:1px solid var(--creme); }
.cmp .cmp-dd-act:hover{ background:var(--bege); }

/* ---- /compras/nova: form largo + 2 colunas no PC (escopo .cmp) ---- */
.cmp .form-card{ max-width:900px; }
/* .campo{display:flex} (autor) vence o [hidden] do navegador (UA) -> um .campo
   marcado hidden apareceria mesmo assim. Restaura o esconder do atributo. */
.cmp .campo[hidden]{ display:none; }
/* a regra base .campo input{width:100%} tambem pega o checkbox -> esticava e jogava
   o texto do label pra linha de baixo. Devolve o checkbox ao tamanho natural (inline). */
.cmp .campo input[type=checkbox]{ width:auto; }
.cmp #forn_novo{ background:var(--bege); border:1px solid var(--creme); border-radius:10px;
  padding:12px 14px; gap:10px; }
.cmp #forn_novo .fn-acoes{ display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  margin:8px 0 0; }
/* tabela de produtos: layout fixo p/ caber no card; Qtd/Valor em caixas menores.
   NAO usar overflow:hidden nas celulas: cortaria o dropdown do typeahead de produto
   (.cmp-dd fica absoluto ABAIXO do input, fora do content-box da celula). O
   table-layout:fixed + box-sizing:border-box + input width:100% ja seguram a largura. */
.cmp #linhas{ table-layout:fixed; }
.cmp #linhas .c-qtd{ width:120px; }
.cmp #linhas .c-vu{ width:150px; }
.cmp #linhas .c-tot{ width:96px; }
.cmp #linhas .c-rm{ width:56px; }
.cmp #linhas input{ width:100%; }
.cmp .obs-compra{ margin-top:12px; }
@media (min-width:721px){
  .cmp .form-grid{ grid-template-columns:1fr 1fr; }
  .cmp #forn_novo{ grid-column:1 / -1; }        /* painel de CNPJ ocupa a largura toda */
}

/* ---- /compras/nova no celular: painel CNPJ confortável (escopo .cmp) ---- */
@media (max-width:640px){
  .cmp .form-card{ padding:16px; }
  .cmp #forn_novo .fn-acoes button{ flex:1 1 auto; min-height:44px; }
  .cmp #forn_novo .fn-acoes .dica{ flex-basis:100%; }
}

/* ---- Histórico de recebimentos: tabela -> cartões (tablet/celular) ----
   Escopo total em `.rcb table.hist`. Desktop (>1024px) fica igual (tabela).
   Tablet (641–1024px): grade de 2 cartões. Celular (≤640px): 1 por linha.
   A linha de cabeçalho (tr.hd) só existe na tabela desktop; some no cartão. */
@media (max-width:1024px){
  .rcb table.hist{ display:block; margin-top:14px; }
  .rcb table.hist tr.hd{ display:none; }
  .rcb table.hist tbody{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .rcb table.hist tr{
    display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 12px;
    border:1px solid var(--creme); border-radius:12px; background:#fff;
    padding:13px 15px; box-shadow:0 1px 2px rgba(74,55,40,.05); }
  .rcb table.hist tr:nth-child(even) td{ background:transparent; }   /* mata o zebra da base */
  .rcb table.hist td{ border:0; padding:0; font-size:13px; }

  /* Produto = título do cartão (+ Data alinhada à direita) */
  .rcb table.hist td.c-prod{ order:1; flex:1 1 auto; min-width:0; font-weight:700;
    font-size:15px; line-height:1.25; color:var(--terra); }
  .rcb table.hist td.c-data{ order:2; flex:0 0 auto; margin-left:auto; font-size:12px;
    color:#8a7358; font-variant-numeric:tabular-nums; white-space:nowrap; }
  .rcb table.hist td.c-forn{ order:3; flex:1 1 100%; font-size:12.5px; color:#7a5c3f;
    margin-bottom:6px; }
  .rcb table.hist td.c-forn::before{ content:"por "; color:#a08a6f; }

  /* Métricas: Qtd / Peso / Dif — faixa de 3 colunas, rótulo em cima */
  .rcb table.hist td.c-num{ order:4; flex:1 1 0; min-width:70px; padding:7px 0;
    border-top:1px solid var(--creme); font-variant-numeric:tabular-nums; color:var(--texto); }
  .rcb table.hist td.c-num::before{ content:attr(data-label); display:block; font-size:10px;
    text-transform:uppercase; letter-spacing:.4px; color:#8a7358; font-weight:700;
    margin-bottom:2px; }
  .rcb table.hist td.c-num .v{ font-weight:700; font-size:14px; }
  .rcb table.hist td.c-num .v.neg-dif{ color:var(--vermelho); }

  /* Status + Verificação + Abrir */
  .rcb table.hist td.c-status{ order:7; flex:1 1 100%; padding-top:9px;
    display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
  .rcb table.hist td.c-verif{ order:8; flex:1 1 60%; padding-top:5px;
    display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .rcb table.hist td.c-verif form{ display:inline; }
  .rcb table.hist td.c-abrir{ order:9; flex:0 0 auto; margin-left:auto; padding-top:5px;
    align-self:center; }
  .rcb table.hist td.c-abrir a{ color:var(--laranja); font-weight:700; text-decoration:none;
    white-space:nowrap; }
  .rcb table.hist td.c-abrir a::after{ content:" \203A"; }
}
/* Celular: 1 cartão por linha + alvo de toque */
@media (max-width:640px){
  .rcb table.hist tbody{ grid-template-columns:1fr; }
  .rcb table.hist td.c-verif .btn-secondary{ min-height:40px; }
}

/* ---- Tabelas (editor + detalhe): cabeçalho (1ª linha) fixo ao rolar a página ----
   O <thead> gruda no topo da viewport enquanto a lista de produtos passa. NÃO pode
   haver ancestral com overflow (quebraria o sticky de rolagem de página), por isso a
   tabela fica no fluxo, sem wrapper de scroll. O th já tem fundo opaco (#FCFAF5). */
table.prod.tab-congela thead th{ position:sticky; top:0; z-index:3;
  box-shadow:inset 0 -1px 0 var(--creme); }

/* ---- Editor de tabelas: caixa de adicionar produto (typeahead próprio, padrão /compras) ---- */
.itens-add{ display:flex; gap:10px; align-items:flex-start; flex-wrap:wrap; margin:10px 0 4px; }
.itens-add .cmp-ta{ flex:1 1 320px; min-width:240px; }
.itens-add .cmp-ta-in{ width:100%; }
.itens-add .dica{ display:block; font-size:12px; color:#7a5c3f; margin-top:3px; }

/* ---- /tabelas: chips de status, busca, modal de revalidar, toast ---- */
.chip-status{ color:var(--terra); border:1px solid transparent; cursor:pointer; font-weight:600; }
.chip-status:hover{ background:#fff; border-color:var(--laranja); }
.chip-status.ativo{ background:#fff; border-color:var(--laranja); }
.tbl #tab-busca{ padding-right:30px; }
.tbl-limpar{ position:absolute; right:6px; top:50%; transform:translateY(-50%); background:transparent;
  color:var(--terra); border:0; font-size:18px; line-height:1; padding:0 6px; cursor:pointer; }
.tbl-limpar:hover{ background:transparent; color:var(--laranja); }
.tbl .acoes{ display:flex; gap:8px; white-space:nowrap; }
.vazio{ background:var(--bege); border-radius:8px; padding:12px 16px; margin:12px 0; color:var(--texto); }
dialog.dlg{ border:0; border-radius:12px; padding:0; width:92%; max-width:420px;
  box-shadow:0 10px 40px rgba(0,0,0,.25); color:var(--texto); }
dialog.dlg::backdrop{ background:rgba(0,0,0,.45); }
.dlg-corpo{ padding:20px 22px; }
.dlg-corpo h3{ margin:0 0 8px; color:var(--terra); }
.dlg-tabela{ margin:2px 0; }
.dlg-label{ display:block; margin:12px 0 0; font-size:14px; }
.dlg-label input{ display:block; margin-top:4px; padding:9px 12px; border:1px solid var(--creme);
  border-radius:9px; font-size:15px; width:100%; box-sizing:border-box; }
.dlg-erro{ color:var(--vermelho); font-size:13px; margin:8px 0 0; }
.dlg-resumo{ font-size:15px; margin:6px 0 14px; }
.dlg-acoes{ display:flex; gap:10px; justify-content:flex-end; margin-top:16px; }
.toast{ position:fixed; left:50%; top:16px; transform:translateX(-50%); z-index:1000;
  padding:12px 18px; border-radius:9px; font-size:14px; font-weight:600; color:#fff;
  box-shadow:0 6px 20px rgba(0,0,0,.2); max-width:90%; }
.toast-ok{ background:var(--verde); }
.toast-erro{ background:var(--vermelho); }

/* ---- editor de tabelas: cabecalho, acoes, selo, modal (escopado, sem tocar componentes globais) ---- */
.tbl-cab{ display:flex; flex-wrap:wrap; gap:14px 18px; align-items:flex-end; margin:12px 0; }
.tbl-cab label{ font-size:12px; color:var(--terra); font-weight:600; }
.tbl-cab input, .tbl-cab select{ padding:8px 10px; border:1px solid var(--creme); border-radius:8px; font-size:14px; }
.tbl-cab select{ padding-right:30px; }
.tbl-cab .c-nome{ flex:1 1 240px; }
.tbl-cab .c-nome input{ width:100%; }
.tbl-acoes{ display:flex; flex-wrap:wrap; gap:10px; margin:6px 0 18px; }
.tbl-selo{ display:inline-block; font-size:10px; font-weight:700; color:var(--terra);
  background:var(--bege); border:1px solid var(--creme); border-radius:8px; padding:1px 6px;
  margin-left:4px; cursor:help; white-space:nowrap; }
.tbl-modal{ border:0; border-radius:14px; padding:22px 24px; max-width:440px; width:calc(100% - 32px);
  box-shadow:0 12px 40px rgba(74,55,40,.28); color:var(--texto); }
.tbl-modal::backdrop{ background:rgba(74,55,40,.45); }
.tbl-modal-msg{ margin:0 0 16px; font-size:15px; }
.tbl-modal-acoes{ display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end; }
@media (max-width:520px){ .tbl-modal-acoes{ flex-direction:column; } .tbl-modal-acoes button{ width:100%; } }

/* --- Variação de preço na /compras/nova --- */
.cmp .cmp-ref { font-size: 12px; margin-top: 4px; line-height: 1.35; }
.cmp .cmp-ref.cmp-ok { color: #2e7d32; }
.cmp .cmp-ref.cmp-alerta { color: var(--terra); }
.cmp .cmp-ref.cmp-confirma { color: var(--terra); font-weight: bold; }
.cmp .cmp-ref.cmp-critico { color: var(--vermelho); font-weight: bold; }

.cmp-fallback { border: 1px solid var(--vermelho); border-radius: 10px; padding: 12px; margin: 12px 0;
  background: #fff6f4; }
.cmp-fb-item { padding: 8px 0; border-top: 1px solid var(--creme); }
.cmp-fb-item.cmp-critico { color: var(--vermelho); }

.cmp-modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center;
  justify-content: center; background: rgba(0,0,0,.45); padding: 16px; }
.cmp-modal[hidden] { display: none; }
.cmp-modal-box { background: #fff; border-radius: 14px; padding: 18px; width: 100%; max-width: 560px;
  max-height: 85vh; overflow-y: auto; box-shadow: 0 10px 40px rgba(0,0,0,.25); }
.cmp-modal-box h3 { margin: 0 0 10px; }
.cmp-modal-acoes { display: flex; gap: 10px; margin-top: 14px; }
.cmp-modal-acoes button { flex: 1; min-height: 44px; }
.cmp-modal .cmp-fb-item select, .cmp-modal .cmp-fb-item input { width: 100%; margin-top: 6px; }

@media (max-width: 640px) {
  .cmp-modal { align-items: flex-end; padding: 0; }          /* bottom-sheet no celular */
  .cmp-modal-box { max-width: 100%; max-height: 92vh; border-radius: 14px 14px 0 0;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); }
}

/* ---- histórico de alterações da compra (timeline, mobile-friendly) ---- */
.hist-compra{ margin:1.25rem 0; }
.hist-timeline{ list-style:none; margin:0; padding:0; border-left:2px solid var(--creme); }
.hist-item{ position:relative; padding:.5rem 0 .5rem 1rem; }
.hist-item summary{ cursor:pointer; line-height:1.4; }
.hist-quando{ color:var(--texto); opacity:.65; font-variant-numeric:tabular-nums; }
.hist-selo{ display:inline-block; font-size:.75rem; padding:.05rem .4rem; border-radius:.6rem;
  background:var(--bege); color:var(--terra); margin-left:.25rem; }
.hist-detalhe{ margin:.35rem 0 .25rem; font-size:.92rem; }
.hist-detalhe ul{ margin:.25rem 0; padding-left:1.1rem; }
.hist-de{ color:var(--vermelho); }
.hist-para{ color:var(--verde); }
.hist-meta{ color:var(--texto); opacity:.65; font-size:.85rem; margin:.25rem 0 0; }
@media(max-width:640px){ .hist-item{ padding-left:.75rem; } .hist-detalhe{ font-size:.9rem; } }

/* ---- /compras/relatorio: abas do painel (escopo .cmp) ---- */
.rel-cab{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; }
.rel-cab h2{ margin:0; }
.cmp-periodo{ font-size:12px; margin-top:2px; }
.cmp-periodo.up{ color:var(--terra); }
.cmp-periodo.down{ color:#2E7D32; }   /* gastar menos que o periodo anterior e bom */
.rel-contexto{ font-size:13px; color:#5f5e5a; margin:10px 0 4px; }
.cmp table td.num, .cmp table th.num{ text-align:right; font-variant-numeric:tabular-nums; }
/* host do typeahead: nunca cortar a lista suspensa (app/CLAUDE.md) */
details.f-mais, .f-grid, .f-campo{ overflow:visible; }
.rel-tabs{ display:flex; flex-wrap:wrap; gap:4px; border-bottom:2px solid var(--creme); margin:16px 0; }
.rel-tab{ background:none; border:none; padding:8px 14px; cursor:pointer; color:#5f5e5a;
         border-bottom:2px solid transparent; margin-bottom:-2px; font-size:14px; }
.rel-tab.ativo{ color:var(--laranja); border-bottom-color:var(--laranja); font-weight:bold; }
.rel-kpis{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px; margin:12px 0; }
.rel-card{ border:1px solid var(--creme); border-radius:10px; padding:10px 12px; }
.rel-card-l{ display:block; font-size:11px; color:#8a877e; margin-bottom:4px; }
.rel-card b{ font-size:18px; }
.rel-card.fin b{ color:var(--laranja); }
@media (max-width:480px){ .rel-kpis{ grid-template-columns:1fr 1fr; } }
.rel-paginacao{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:12px; }
.rel-paginacao a{ padding:4px 10px; border:1px solid var(--creme); border-radius:6px; }
.rel-paginacao a.ativo{ background:var(--terra); color:#fff; border-color:var(--terra); }

/* compras — nav do modulo (Fatia 1: navegacao/voltar/botoes) */
.subnav-bar{ display:flex; align-items:center; gap:10px; margin:14px 0; }
.subnav-bar .btn{ flex:none; }
.subnav{ display:flex; align-items:center; gap:8px; overflow-x:auto; flex-wrap:nowrap;
  flex:1 1 auto; min-width:0; padding:2px 4px 2px 0; scrollbar-width:none; -ms-overflow-style:none; }
.subnav::-webkit-scrollbar{ display:none; }
.subnav-item{ flex:none; display:inline-block; color:var(--terra); border:1px solid transparent;
  border-radius:6px; padding:7px 12px; font-size:14px; font-weight:600; text-decoration:none;
  white-space:nowrap; }
.subnav-item:hover{ background:#fff; border-color:var(--laranja); }
.subnav-item.ativo{ background:#fff; border-color:var(--laranja); }
.subnav .btn-secondary{ flex:none; white-space:nowrap; }
.voltar-compras{ margin:0 0 10px; }
@media (max-width:640px){
  .subnav-item, .subnav .btn-secondary{ min-height:44px; display:inline-flex; align-items:center; }
}

/* ---- Painel de produto (tabelas + compras): cards/avisos/par de valores/grafico
   com eixos, escopado em .pnl (mesmo padrao de .cmp/.rcb) ---- */
.pnl-sub{ font-size:14px; color:var(--terra); margin:18px 0 4px; }
.pnl-aviso{ border-radius:10px; padding:10px 14px; font-size:13px; margin:10px 0;
  border:1px solid var(--creme); background:var(--bege); }
.pnl-aviso.atencao{ background:#FBF2E2; border-color:#B7791F; color:#7a5511; }
.pnl-aviso.alerta{ background:#FBEAE7; border-color:var(--vermelho); color:var(--vermelho);
  font-weight:bold; }
.pnl-par{ display:inline-flex; align-items:baseline; gap:6px; white-space:nowrap; }
.pnl-par b{ color:var(--terra); }
.pnl-par .u{ color:#7a5c3f; font-size:12px; }
.pnl-par-kg{ font-size:12px; color:#7a5c3f; }
.pnl-grafico-wrap{ margin-top:14px; }
.pnl-grafico text{ font-size:10px; fill:#7a5c3f; font-family:'Inter',Arial,sans-serif; }
.pnl-grafico .eixo{ stroke:var(--creme); stroke-width:1; }
.pnl-grafico .linha{ fill:none; stroke:var(--laranja); stroke-width:2; }
.pnl-grafico circle{ fill:var(--terra); cursor:default; }

/* ---- Tabela "prod" -> cartões empilhados no celular: técnica compartilhada por /compras
   (.cmp), painel de produto de /tabelas (.pnl) e /estoque (.est) — era 3 cópias byte-a-byte,
   uma por namespace; um só lugar agora (a versão dentro de .cmp, mais abaixo, foi removida). */
@media (max-width:640px){
  .cmp table.prod thead, .pnl table.prod thead, .est table.prod thead{ display:none; }
  .cmp table.prod, .cmp table.prod tbody, .cmp table.prod tr, .cmp table.prod td,
  .pnl table.prod, .pnl table.prod tbody, .pnl table.prod tr, .pnl table.prod td,
  .est table.prod, .est table.prod tbody, .est table.prod tr, .est table.prod td{
    display:block; width:100%; }
  .cmp table.prod tr, .pnl table.prod tr, .est table.prod tr{
    border-top:1px solid var(--creme); padding:10px 14px; }
  .cmp table.prod td, .pnl table.prod td, .est table.prod td{
    border:0; text-align:left; padding:3px 0; }
  .cmp table.prod td[data-label]::before, .pnl table.prod td[data-label]::before,
  .est table.prod td[data-label]::before{ content:attr(data-label) " · "; font-weight:600;
    color:var(--terra); }
  .cmp table.prod td[data-label]:empty::before, .pnl table.prod td[data-label]:empty::before,
  .est table.prod td[data-label]:empty::before{ content:""; }
  .cmp table.prod td.l:first-child, .pnl table.prod td.l:first-child,
  .est table.prod td.l:first-child{ font-size:14.5px; padding-bottom:5px; }
}

/* ---- Estoque (/estoque): catálogo de contagem, escopo .est ----
   Tabela -> cartões já vem do bloco combinado acima; aqui só o que é específico de .est:
   dimmed de item inativo + toque/anti-zoom do filtro (mesma receita do /compras — ver .cmp
   no bloco de /compras no celular, mais acima neste arquivo — é a landing page do módulo,
   já que /estoque redireciona pra cá). */
.est tr.inativo{ opacity:.6; }
@media (max-width:640px){
  .est input, .est select, .est textarea{ font-size:16px; }
  .est button, .est .btn, .est .btn-secondary{ min-height:44px; }
  .est .filtros{ padding:12px; }
  .est .filtros>*{ flex-basis:100%; }
}

/* Fila de aprovação — badge de notificação na aba, filtros e barra de lote */
.nav-badge{ display:inline-block; min-width:18px; padding:0 6px; margin-left:4px;
  background:#B85518; color:#fff; border-radius:10px; font-size:11px; font-weight:700;
  line-height:18px; text-align:center; vertical-align:middle; }
.filtro-fila{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:12px 0;
  padding:12px; background:var(--bege); border-radius:10px; }
.filtro-fila input, .filtro-fila select{ padding:8px 10px; border:1px solid var(--creme);
  border-radius:8px; font-size:14px; background-color:#fff; }
.filtro-fila select{ padding-right:30px; }
.filtro-fila input[type=text]{ min-width:180px; }
.filtro-fila label{ font-size:13px; color:var(--terra); }
.lote-bar{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:12px 0;
  padding:10px 12px; background:var(--creme); border-radius:10px; }
.lote-sel{ display:inline-flex; gap:6px; align-items:center; font-size:13px; color:var(--terra); }
.lote-bloq{ color:#8A8A8A; font-style:italic; font-size:13px; }
.vazio{ padding:16px; color:#8A8A8A; background:var(--bege); border-radius:10px; }
.fila-acoes{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
/* item da fila em card, no padrão do hub */
.fila-item{ border:1px solid var(--creme); border-radius:12px; background:#fff; padding:14px 16px;
  margin:10px 0; }
.fila-item.alerta{ border-color:#E3B778; box-shadow:0 0 0 1px #E3B778 inset; }
.fila-item-top{ display:flex; justify-content:space-between; align-items:center; gap:10px;
  flex-wrap:wrap; margin-bottom:6px; }
.fila-item-id{ padding:4px 10px; font-size:13px; }
.fila-item-prod{ margin:2px 0; }
.fila-item-prod .pcod{ color:#8a7358; font-size:12.5px; }
.fila-item-obs{ margin:2px 0; color:#7a5c3f; }
.lote-sel{ display:inline-flex; gap:6px; align-items:center; font-size:13px; color:var(--terra); }
.lote-sel-off{ color:#8A8A8A; font-style:italic; }
.fila-comp{ width:100%; border-collapse:collapse; margin:10px 0 2px; font-size:14px; }
.fila-comp th{ background:var(--laranja); color:#fff; text-align:left; font-size:11px;
  text-transform:uppercase; letter-spacing:.3px; font-weight:700; padding:6px 10px; }
.fila-comp td{ padding:8px 10px; vertical-align:top; border-bottom:1px solid var(--bege); }
.fila-comp td small{ display:block; color:#7a5c3f; font-size:12px; margin-top:2px; }
.fila-comp .var-alerta{ color:var(--vermelho); font-weight:700; }
@media (max-width:640px){
  .fila-comp thead{ display:none; }
  .fila-comp, .fila-comp tbody, .fila-comp tr, .fila-comp td{ display:block; width:100%; }
  .fila-comp tr{ border:1px solid var(--creme); border-radius:10px; margin-bottom:8px; overflow:hidden; }
  .fila-comp td{ display:flex; justify-content:space-between; gap:12px; align-items:baseline;
    border-bottom:1px solid var(--bege); }
  .fila-comp td::before{ content:attr(data-label); font-size:11px; font-weight:700;
    text-transform:uppercase; letter-spacing:.3px; color:var(--terra); }
  .fila-comp td small{ text-align:right; }
  .fila-item-top{ flex-direction:column; align-items:flex-start; }
  .fila-acoes .btn, .fila-acoes .btn-secondary{ flex:1; min-height:44px; }
}
.dm-resumo{ font-weight:600; color:var(--terra); margin:0 0 4px; }
.cmp-modal .campo{ margin-top:12px; }
.cmp-modal .campo[hidden]{ display:none; }   /* .campo{display:flex} venceria o [hidden] do UA */
.cmp-modal textarea{ width:100%; padding:8px 10px; border:1px solid var(--creme); border-radius:8px;
  font-family:inherit; font-size:14px; }
@media (max-width:640px){
  .filtro-fila{ flex-direction:column; align-items:stretch; }
  .filtro-fila input, .filtro-fila select{ width:100%; font-size:16px; }
}

/* ---- Nova tabela: blocos de campos agrupados (Identificacao/Regras/Vigencia) ---- */
.tbl-novo-grid{ display:grid; gap:22px; grid-template-columns:1fr; }
@media (min-width:721px){
  .tbl-novo-grid{ grid-template-columns:repeat(3, 1fr); }
}
.campo-grupo{ display:flex; flex-direction:column; gap:12px; }
.campo-grupo-tit{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.4px;
  color:var(--terra); margin:0 0 2px; border-bottom:1px solid var(--creme); padding-bottom:4px; }

/* ---- Nova tabela: seletor de clientes (typeahead + chips removiveis) ---- */
.cli-novo{ margin-top:18px; }
.cli-novo .cmp-ta{ max-width:560px; }
.cli-novo .cmp-ta-in{ width:100%; }
.cli-novo .chips{ margin-top:10px; }
.cli-novo .chip{ display:inline-flex; align-items:center; gap:6px; }
.cli-novo .chip-rm{ background:transparent; color:var(--terra); border:0; border-radius:50%;
  width:20px; height:20px; padding:0; font-size:14px; line-height:1; cursor:pointer; }
.cli-novo .chip-rm:hover{ background:var(--creme); }
@media (max-width:640px){ .cli-novo .chip-rm{ min-height:0; } }

/* ---- Area de clientes (edicao + visao de tabela vigente) ---- */
.tbl-clientes .cli-add{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:10px; }
.tbl-clientes .cli-add .cmp-ta{ flex:1 1 260px; min-width:220px; }
.tbl-clientes .cli-add .cmp-ta-in{ width:100%; }
.cli-list{ list-style:none; margin:10px 0; padding:0; display:flex; flex-direction:column; gap:8px; }
.cli-item{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;
  border:1px solid var(--creme); border-radius:10px; padding:10px 14px; background:#fff; }
.cli-item-info{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.cli-item-nome{ font-weight:600; }
.cli-item-acoes{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
@media (max-width:640px){
  .tbl-clientes .cli-add{ flex-direction:column; align-items:stretch; }
  .tbl-clientes .cli-add button{ width:100%; }
  .cli-item{ flex-direction:column; align-items:stretch; }
  .cli-item-acoes{ justify-content:flex-end; }
}

/* ---- Cabecalho de categoria (agrupamento visual, recolhivel) ---- */
tr.cat-header td{ background:var(--laranja); color:#fff; font-weight:700; font-size:12.5px;
  text-transform:uppercase; letter-spacing:.4px; padding:8px 14px; cursor:pointer; border-top:0; }
tr.cat-header td:hover{ background:var(--terra); }
tr.cat-header td::before{ content:"▾ "; }
tr.cat-header.recolhido td::before{ content:"▸ "; }

/* ---- Usuários e Acessos: badges de papel + último login em 2 linhas ---- */
.badge-papel-admin{ background:var(--terra); color:#fff; }
.badge-papel-gestor{ background:var(--bege); color:var(--terra); border:1px solid var(--creme); }
.badge-papel-operador{ background:#EEE; color:#555; }
.ua-login{ display:flex; flex-direction:column; line-height:1.3; }
.ua-login-h{ font-size:11px; color:#8a7358; }
.ua-acessos summary{ cursor:pointer; list-style:none; }
.ua-acessos summary::-webkit-details-marker{ display:none; }
.ua-acessos-resto{ margin-top:4px; font-size:12px; color:#7a5c3f; }
.ua-acoes{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; white-space:nowrap; }
.ua-acoes .btn-secondary, .ua-acoes .btn-danger, .ua-acoes button{ padding:5px 10px; font-size:12.5px; }

/* ---- Usuários e Acessos no celular/tablet — escopo .ua (nada fora muda) ---- */
@media (max-width:768px){
  .ua .filtros{ flex-direction:column; align-items:stretch; }
  .ua .filtros>*{ width:100%; }
  .ua .filtros #ua-limpar, .ua .filtros a.btn{ width:100%; text-align:center; }
  .ua input, .ua select, .ua button, .ua .btn, .ua .btn-secondary{ font-size:16px; min-height:44px; }

  .ua #ua-tabela thead{ display:none; }
  .ua #ua-tabela, .ua #ua-tabela tbody, .ua #ua-tabela tr, .ua #ua-tabela td{ display:block; width:100%; }
  .ua #ua-tabela tr{ border:1px solid var(--creme); border-radius:12px; background:#fff;
    padding:12px 14px; margin:0 0 12px; }
  .ua #ua-tabela td{ border:0; padding:5px 0; text-align:left; }
  .ua #ua-tabela td[data-label]::before{ content:attr(data-label); display:block; font-size:11px;
    font-weight:700; text-transform:uppercase; letter-spacing:.3px; color:var(--terra); margin-bottom:2px; }
  .ua #ua-tabela td.ua-acoes{ display:flex; }
  .ua #ua-tabela td.ua-acoes::before{ display:none; }
  .ua #ua-tabela td.ua-login{ display:flex; }
}

/* ---- Matriz de acessos: aproveita mais largura só nesta página ---- */
main.ua-larga{ max-width:1400px; }

/* ---- Lista de compras: 1100px ----
   Medido, não chutado: com o nome do produto absorvendo a largura que sobra, 1040px já zera a
   quebra de linha em nomes de 44 caracteres; 1100 dá folga para ~10 caracteres a mais. NÃO usar
   os 1400 da matriz — lá são dezenas de colunas, aqui são seis, e o olho viaja demais. */
main.cmp-larga{ max-width:1100px; }

/* ---- Matriz: coluna Usuário fixa + cabeçalho fixo (2 eixos dentro de .matriz-scroll) ----
   Escopado em .matriz-scroll (só ua_matriz.html) — table.prod.tab-congela também é usada em
   tabelas_detalhe.html/tabelas_editar.html, que não têm esse wrapper e não podem herdar isto. */
.matriz-scroll{ min-width:0; }              /* impede a tabela de esticar o pai e vazar a página */
.matriz-scroll table.prod.tab-congela td:first-child,
.matriz-scroll table.prod.tab-congela th:first-child{
  position:sticky; left:0; z-index:2; background:#fff;
  box-shadow:2px 0 4px rgba(74,55,40,.08);
}
.matriz-scroll table.prod.tab-congela thead th:first-child{ z-index:4; background:var(--laranja); }
.matriz-scroll table.prod.tab-congela thead th{ text-align:center; white-space:normal; }
.matriz-scroll table.prod.tab-congela thead th:first-child{ text-align:left; }
.matriz-scroll table.prod.tab-congela tr:nth-child(even) td:first-child{ background:var(--bege); }

.ua-alterado{ margin-left:6px; }   /* reaproveita .tbl-selo já existente para o texto */
td.ua-cel-alterada{ background:#FFF3D6 !important; }  /* mesmo tom de recalc-alterado */

.ua-barra-acoes{ position:sticky; bottom:0; background:#fff; border-top:1px solid var(--creme);
  padding:11px 0; margin-top:12px; display:flex; justify-content:space-between; align-items:center;
  gap:12px; flex-wrap:wrap; }
@media (max-width:640px){
  .ua-barra-acoes{ flex-direction:column; align-items:stretch; }
  .ua-barra-acoes .form-acoes{ width:100%; }
  .ua-barra-acoes .form-acoes button{ flex:1; min-height:44px; }
}

/* ---- Matriz: accordion por usuário no mobile (Task 11) ----
   Escopado em .matriz-scroll (só ua_matriz.html) — table.prod.tab-congela também é usada em
   tabelas_detalhe.html/tabelas_editar.html, que não têm esse wrapper e não podem herdar isto. */
@media (max-width:768px){
  main.ua-larga, main.cmp-larga{ max-width:980px; }   /* mobile não precisa do container largo */
  .matriz-scroll{ overflow:visible; max-height:none; }
  .matriz-scroll table.prod.tab-congela thead{ display:none; }
  .matriz-scroll table.prod.tab-congela, .matriz-scroll table.prod.tab-congela tbody{ display:block; width:100%; }
  .matriz-scroll table.prod.tab-congela tr{ display:block; border:1px solid var(--creme); border-radius:12px;
    background:#fff; margin:0 0 10px; overflow:hidden; }
  .matriz-scroll table.prod.tab-congela td{ display:none; border:0; position:static; box-shadow:none; }
  .matriz-scroll table.prod.tab-congela td:first-child{ display:flex; align-items:center; justify-content:space-between;
    padding:12px 14px; font-weight:700; cursor:pointer; background:var(--bege);
    position:static; box-shadow:none; }
  .matriz-scroll table.prod.tab-congela td:first-child::after{ content:"\25BE"; color:var(--terra); }
  .matriz-scroll table.prod.tab-congela tr.ua-aberta td:first-child::after{ content:"\25B4"; }
  .matriz-scroll table.prod.tab-congela tr.ua-aberta td{ display:block; padding:8px 14px; border-top:1px solid var(--creme); }
  .matriz-scroll table.prod.tab-congela tr.ua-aberta td:first-child{ border-top:0; }
  .matriz-scroll table.prod.tab-congela td[data-mod]::before{ content:attr(data-mod) ": "; font-weight:600; color:var(--terra); }
}

/* ---- Campo de data (campo-data.js): mascara + calendario popup pt-BR ----
   NAO usar overflow:hidden no wrapper: cortaria o popup (mesmo motivo do
   dropdown do typeahead, ver .cmp-dd acima). */
.campo-data-wrap{ position:relative; display:inline-flex; align-items:center; gap:6px; max-width:100%; }
.campo-data-wrap .campo-data{ flex:1; min-width:0; }
.campo-data-btn{ flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; padding:0; background:#fff; color:var(--terra);
  border:1px solid var(--creme); border-radius:8px; cursor:pointer; }
.campo-data-btn:hover{ background:var(--bege); border-color:var(--laranja); color:var(--laranja); }
.campo-data-btn:focus{ outline:none; border-color:var(--laranja); box-shadow:0 0 0 3px rgba(232,119,34,.18); }

.campo-data-pop{ position:absolute; z-index:40; top:100%; left:0; margin-top:4px;
  background:#fff; border:1px solid var(--creme); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.16);
  padding:10px; width:312px; max-width:calc(100vw - 24px); }
.cdp-head{ display:flex; align-items:center; justify-content:space-between; gap:6px; margin-bottom:6px; }
.cdp-label{ font-size:13px; font-weight:700; color:var(--terra); text-transform:capitalize; }
.cdp-prev,.cdp-next{ width:32px; height:32px; padding:0; display:inline-flex; align-items:center;
  justify-content:center; background:#fff; color:var(--terra); border:1px solid var(--creme);
  border-radius:8px; cursor:pointer; font-size:18px; line-height:1; }
.cdp-prev:hover,.cdp-next:hover{ background:var(--bege); border-color:var(--laranja); color:var(--laranja); }
.cdp-prev:focus,.cdp-next:focus{ outline:none; border-color:var(--laranja); box-shadow:0 0 0 3px rgba(232,119,34,.18); }
.cdp-dow{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); text-align:center; font-size:11px;
  font-weight:700; color:#7a5c3f; margin-bottom:2px; }
.cdp-grid{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:2px; }
.cdp-blank{ min-height:40px; }
.cdp-day{ min-height:40px; display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid transparent; border-radius:8px; font-size:13px; color:var(--texto);
  cursor:pointer; }
.cdp-day:hover{ background:var(--bege); border-color:var(--creme); }
.cdp-day:focus{ outline:none; border-color:var(--laranja); box-shadow:0 0 0 3px rgba(232,119,34,.18); }
.cdp-day.cdp-hoje{ font-weight:700; color:var(--terra); border-color:var(--terra); }
.cdp-day.cdp-sel{ background:var(--terra); color:#fff; border-color:var(--terra); }
.cdp-day.cdp-sel:hover{ background:var(--terra); }
@media (max-width:480px){
  .campo-data-pop{ width:min(312px, calc(100vw - 24px)); }
}

/* Preços de mercado */
.market-nav{ margin:14px 0; }
.market h2{ margin-bottom:2px; }
.market-sub{ color:#666; margin-top:0; }
.market-filtros label{ display:flex; flex-direction:column; font-size:12px; gap:2px; }
.market-busca-wrap{ position:relative; min-width:260px; }
.market-sug{ position:absolute; z-index:20; left:0; right:0; top:100%; margin:0; padding:0;
  list-style:none; background:#fff; border:1px solid var(--creme); border-radius:0 0 8px 8px;
  max-height:280px; overflow:auto; box-shadow:0 6px 18px rgba(0,0,0,.12); }
.market-sug li{ padding:8px 10px; cursor:pointer; font-size:13px; }
.market-sug li:hover,.market-sug li:focus{ background:var(--bege); outline:none; }
.market-head{ background:var(--bege); border-radius:8px; padding:10px 14px; margin:10px 0; }
.market-resumo{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin:12px 0; }
.market-kpi{ background:#fff; border:1px solid var(--creme); border-radius:10px; padding:10px 12px; }
.market-kpi span{ display:block; font-size:12px; color:#666; }
.market-kpi b{ color:var(--terra); font-size:16px; }
.market-count{ font-size:13px; color:#666; }
.market-hist td.num{ text-align:right; white-space:nowrap; }
.market-pend{ color:#B7791F; font-weight:600; }
.market-det{ font-size:12.5px; padding:6px 0; }
.market-cards{ display:none; }
.market-pag{ display:flex; gap:14px; align-items:center; margin-top:12px; }
@media (max-width:720px){
  .market-filtros{ flex-direction:column; align-items:stretch; }
  .market-filtros label,.market-busca-wrap{ width:100%; min-width:0; }
  .market-hist{ display:none; }
  .market-cards{ display:flex; flex-direction:column; gap:10px; }
  .market-card{ background:#fff; border:1px solid var(--creme); border-radius:10px; padding:12px 14px; font-size:13px; }
  .market-card .mc-top{ font-weight:600; color:var(--terra); margin-bottom:4px; }
}

/* Linha alvo do #compra-<id>: quem volta do detalhe cai na propria linha, e sem marca nenhuma
   fica caçando qual era (linhas do mesmo dia/produto sao quase iguais). So CSS — sem JS. */
tr:target > td{ background:var(--creme); }

/* ---- Breadcrumb do fluxo do comprador normal (/compras) ---- */
.mig{ margin:4px 0 12px; }
.mig ol{ list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:6px;
         margin:0; padding:0; font-size:13px; }
.mig li+li::before{ content:"›"; margin-right:6px; color:var(--terra); opacity:.6; }
.mig a{ color:var(--terra); text-decoration:none; font-weight:600;
        display:inline-flex; align-items:center; }
.mig a:hover, .mig a:focus-visible{ color:var(--laranja); text-decoration:underline; }
.mig [aria-current="page"]{ color:var(--texto); }
@media (max-width:480px){
  /* compacto no celular: itens do meio encurtam, o atual nunca trunca */
  .mig ol{ font-size:12.5px; gap:4px; }
  .mig li:not(:first-child):not(:last-child) a{ max-width:8ch; overflow:hidden;
                                                text-overflow:ellipsis; white-space:nowrap; }
  /* alvo de toque so no celular: no desktop um link de 13px com 44px de altura deixaria a
     faixa do breadcrumb com o triplo da altura util (texto flutuando no vazio) */
  .mig a{ min-height:44px; }
}

/* ---- Lista de compras: hierarquia, filtros e preço (2026-07-30) ---- */
.cmp-hero{ display:flex; flex-wrap:wrap; gap:16px; align-items:stretch; margin:14px 0; }
.hero-money{ flex:1 1 320px; background:var(--bege); border:1px solid var(--creme);
  border-radius:12px; padding:14px 18px; }
.hero-money .rot{ font-size:12px; font-weight:700; color:var(--terra);
  text-transform:uppercase; letter-spacing:.4px; }
.hero-money .val{ font-size:30px; font-weight:800; color:var(--terra); line-height:1.15;
  margin-top:2px; font-variant-numeric:tabular-nums; }
.hero-money .det{ display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:8px; font-size:13px; }
.hero-money .det span{ color:#7a5c3f; }
.hero-money .det b{ font-variant-numeric:tabular-nums; }
.hero-money:not(:has(.det)){ align-self:flex-start; }
.hero-alertas{ flex:1 1 260px; display:flex; flex-direction:column; gap:8px;
  justify-content:center; }
.alerta-pill{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:#fff; border:1px solid var(--creme); border-radius:10px; padding:9px 14px;
  text-decoration:none; color:var(--texto); font-size:14px; min-height:44px; }
.alerta-pill:hover{ border-color:var(--laranja); background:var(--bege); }
.alerta-pill b{ font-size:16px; color:var(--terra); font-variant-numeric:tabular-nums; }
.alerta-pill.zero{ opacity:.5; }
.alerta-pill.zero b{ color:#8a7a68; }
.alerta-pill.urgente{ border-left:3px solid var(--vermelho); }

.cmp-filtros{ background:#fff; border:1px solid var(--creme); border-radius:12px;
  padding:14px 16px; margin:14px 0; }
.f-linha{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.f-periodo{ display:flex; flex-wrap:wrap; gap:6px; }
.f-periodo button{ background:#fff; color:var(--terra); border:1px solid var(--creme);
  border-radius:999px; padding:7px 14px; font-size:13px; font-weight:600; cursor:pointer;
  min-height:44px; }
.f-periodo button:hover{ border-color:var(--laranja); background:var(--bege); }
.f-periodo button[aria-pressed="true"]{ background:var(--terra); color:#fff;
  border-color:var(--terra); }
.f-busca{ flex:1 1 240px; min-width:180px; }
.f-busca input{ width:100%; }
.f-datas{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:10px;
  padding-top:10px; border-top:1px dashed var(--creme); }
.f-datas[hidden]{ display:none; }
.f-datas .lbl{ font-size:13px; font-weight:600; color:var(--terra); }
details.f-mais{ margin-top:10px; padding-top:10px; border-top:1px dashed var(--creme); }
details.f-mais>summary{ cursor:pointer; font-size:13px; font-weight:600; color:var(--terra);
  list-style:none; display:flex; align-items:center; gap:6px; min-height:44px; }
details.f-mais>summary::-webkit-details-marker{ display:none; }
details.f-mais>summary::after{ content:"▾"; font-size:11px; transition:transform .15s; }
details.f-mais[open]>summary::after{ transform:rotate(180deg); }
details.f-mais>summary .conta{ background:var(--terra); color:#fff; border-radius:999px;
  font-size:11px; padding:1px 8px; font-weight:700; }
.f-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px;
  margin-top:12px; }
.f-campo{ display:flex; flex-direction:column; gap:4px; }
.f-campo label{ font-size:12px; font-weight:600; color:var(--terra); }
.f-campo select{ width:100%; }
.f-acoes{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }

.f-ativos{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:12px 0; }
.f-ativos .rot{ font-size:12px; color:#7a5c3f; }
.tag-filtro{ display:inline-flex; align-items:center; gap:7px; background:var(--bege);
  border:1px solid var(--creme); border-radius:999px; padding:5px 6px 5px 12px;
  font-size:13px; color:var(--texto); }
.tag-filtro a{ display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%; background:#fff; color:var(--terra);
  text-decoration:none; font-size:13px; line-height:1; }
.tag-filtro a:hover{ background:var(--vermelho); color:#fff; }
.f-ativos .limpar{ font-size:13px; color:var(--terra); }

.lista-cab{ display:flex; flex-wrap:wrap; gap:12px; align-items:center;
  justify-content:space-between; margin:18px 0 10px; }
.lista-cab .conta{ font-size:14px; color:#7a5c3f; }
.lista-cab .conta b{ color:var(--texto); }
.seg{ display:inline-flex; background:var(--bege); border:1px solid var(--creme);
  border-radius:10px; padding:3px; gap:3px; }
.seg a{ padding:7px 16px; border-radius:8px; font-size:13px; font-weight:600;
  color:var(--terra); text-decoration:none; min-height:38px; display:flex; align-items:center; }
.seg a[aria-current="true"]{ background:#fff; color:var(--texto);
  box-shadow:0 1px 3px rgba(74,55,40,.14); }

.dia-band{ position:sticky; top:0; z-index:5; background-color:#fff; }

.preco-par{ display:flex; flex-direction:column; align-items:flex-end; line-height:1.25; }
.preco-cx{ font-size:12px; color:#7a5c3f; font-variant-numeric:tabular-nums; }
.preco-cx b{ font-weight:600; color:var(--texto); }

@media (max-width:640px){
  .hero-money .val{ font-size:26px; }
  .f-periodo{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
  .f-periodo button{ padding:7px 4px; font-size:12px; }
  .f-periodo button.wide{ grid-column:span 4; }
  .lista-cab .seg{ width:100%; }
  .lista-cab .seg a{ flex:1; justify-content:center; }
  .preco-par{ align-items:flex-start; }
}

.tbl-modal-tit{ margin:0 0 8px; font-size:16px; color:var(--terra); }