/* =============================================================
 * Estoque › Rastreio de peças (Pablo, 04/11/2026). Desenhado por assets/js/estoque-rastreio-pecas-ui.js em #rasApp.
 * Só tokens da pele 2026 (portal-2026.css); as cores de estado têm passo próprio no escuro, com texto >= 4,5:1 sobre o fundo
 * do estado nos dois temas (os mesmos valores da Gestão do Faturamento) e sempre com ícone ou texto, nunca só cor.
 * Mesas: a tabela tem 19 colunas, as 11 que respondem "para quem foi e por quanto" cabem a 1366 px, e o resto rola de lado dentro
 * do quadro, com o CPF da peça fixo à esquerda. Na vertical há um rolador só, o da página: o cabeçalho é uma tabela à parte, sticky
 * na página, que rola de lado junto com o corpo (data-rola); o paginador fica preso ao pé. Até 760 px cada linha vira um cartão, com
 * o rótulo vindo do data-l da célula: a página nunca rola de lado.
 * ============================================================= */
:root{
  --ras-atencao-ink:#8f5300; --ras-atencao-bg:#fff4e3; --ras-atencao-line:#f0d6a8;
  --ras-critico-ink:#b03030; --ras-critico-bg:#fdeeee; --ras-critico-line:#f0c9c9;
  /* a barra do módulo e a de abas do portal, fixas por cima de tudo, e as abas desta tela logo abaixo delas */
  --ras-topo:calc(var(--topbar-height,71px) + 38px);
  --ras-topo-cab:calc(var(--ras-topo) + 44px);
}
:root[data-theme="dark"]{
  --ras-atencao-ink:#f0b454; --ras-atencao-bg:rgba(240,180,84,.14); --ras-atencao-line:rgba(240,180,84,.42);
  --ras-critico-ink:#ff8a8a; --ras-critico-bg:rgba(255,107,107,.14); --ras-critico-line:rgba(255,107,107,.45);
}

#rasApp{ min-width:0; }
.ras{ display:flex; flex-direction:column; gap:10px; min-width:0; padding:2px 2px 28px; font-family:var(--font-body); color:var(--ink); }
.ras *{ box-sizing:border-box; }
.ras svg{ flex:none; }
.ras-painel{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.ras-painel[hidden]{ display:none; }
.ras [hidden]{ display:none !important; }
.ras-mono{ font-variant-numeric:tabular-nums; font-size:12.5px; font-weight:600; white-space:nowrap; }
.ras-so-cel{ display:none !important; }

/* ---------- abas fixas ---------- */
/* top: a barra do módulo e a de abas do portal ficam fixas por cima; faixa inteira e opaca, para o que rola passar por baixo */
.ras-abas{ position:sticky; top:var(--ras-topo); z-index:6; display:flex; gap:4px; padding:4px; background:var(--panel); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-soft); max-width:100%; }
.ras-abas button{ height:34px; padding:0 16px; border:0; border-radius:9px; background:transparent; color:var(--ink-2); font:inherit; font-size:13.5px; font-weight:700; cursor:pointer; white-space:nowrap; }
.ras-abas button:hover{ background:var(--hover); color:var(--ink); }
.ras-abas button[aria-selected="true"]{ background:var(--brand-strong); color:var(--on-accent); }

/* ---------- barra de filtros (sem cabeçalho de título) ---------- */
.ras-barra{ display:flex; flex-direction:column; gap:8px; padding:8px 12px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg,14px); box-shadow:var(--shadow-soft); min-width:0; }
.ras-barra-topo{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; min-width:0; }
.ras-periodo{ min-width:0; flex:1 1 auto; }
.ras-barra-fim{ display:flex; align-items:center; gap:8px; margin-left:auto; flex-wrap:wrap; justify-content:flex-end; }
.ras-campos{ display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); gap:8px 10px; min-width:0; }
.ras-campo{ display:flex; flex-direction:column; gap:3px; min-width:0; margin:0; }
.ras-campo > span{ font-size:12px; font-weight:700; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ras-campo input{ width:100%; height:36px; padding:0 10px; border:1px solid var(--line-2); border-radius:10px; background:var(--input); color:var(--ink); font:inherit; font-size:13px; min-width:0; }
.ras-campo input::placeholder{ color:var(--ink-3); }
.ras-campo input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.ras-campo--rec{ flex:1 1 320px; max-width:420px; }
.ras-campo > div{ min-width:0; }

.ras-btn{ display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 14px; border:1px solid var(--line-2); border-radius:999px; background:var(--panel); color:var(--ink); font:inherit; font-size:13px; font-weight:700; cursor:pointer; white-space:nowrap; text-decoration:none; }
.ras-btn svg{ width:15px; height:15px; }
.ras-btn:hover{ background:var(--accent-50); border-color:var(--accent-line); color:var(--accent-ink); }
.ras-btn[disabled]{ opacity:.6; cursor:progress; }
.ras-btn--leve{ border-color:transparent; background:transparent; color:var(--accent-ink); }
.ras-btn--excel{ background:var(--brand-strong); border-color:var(--brand-strong); color:var(--on-accent); }
.ras-btn--excel:hover{ background:var(--accent-deep); border-color:var(--accent-deep); color:var(--on-accent); }
.ras-btn--cheio{ grid-column:1 / -1; justify-content:center; width:100%; background:var(--brand-strong); border-color:var(--brand-strong); color:var(--on-accent); }
.ras-btn b{ min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:var(--brand-strong); color:var(--on-accent); font-size:12px; line-height:20px; text-align:center; }
.ras-btn:focus-visible, .ras-abas button:focus-visible, .ras-link:focus-visible, .ras-ord:focus-visible, .ras-kpi:focus-visible, .ras-sub button:focus-visible, .ras-rec-item:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ---------- KPIs em cartões ---------- */
.ras-kpis{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)) minmax(0,1.5fr) minmax(0,.8fr) repeat(2,minmax(0,1.1fr)); gap:10px; transition:opacity .15s; }
.ras-kpis.is-carregando{ opacity:.6; }
.ras-kpis--rec{ grid-template-columns:repeat(7,minmax(0,1fr)); }
.ras-kpi{ display:flex; flex-direction:column; gap:2px; min-width:0; padding:8px 12px; background:var(--panel); border:1px solid var(--line); border-radius:12px; text-align:left; font:inherit; color:inherit; }
button.ras-kpi{ cursor:pointer; }
button.ras-kpi:hover{ border-color:var(--accent-line); background:var(--accent-50); }
button.ras-kpi[aria-pressed="true"]{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.ras-kpi-l{ font-size:13px; font-weight:700; line-height:1.3; color:var(--ink-2); }
.ras-kpi-v{ font-size:24px; font-weight:800; line-height:1.15; letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.ras-kpi-s{ font-size:12.5px; font-weight:600; line-height:1.3; color:var(--ink-2); }
/* desdobramento do número: rótulo e valor legíveis, não frase */
.ras-kpi-d{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; font-size:13px; font-weight:600; line-height:1.3; color:var(--ink-2); }
.ras-kpi-d b{ font-size:15px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.ras-kpi.is-atencao{ background:var(--ras-atencao-bg); border-color:var(--ras-atencao-line); }
.ras-kpi.is-atencao .ras-kpi-v, .ras-kpi.is-atencao .ras-kpi-l, .ras-kpi.is-atencao .ras-kpi-s{ color:var(--ras-atencao-ink); }

/* ---------- faixas e notas ---------- */
.ras-avisos{ display:flex; flex-direction:column; gap:6px; }
.ras-avisos:empty{ display:none; }
.ras-faixa{ display:grid; grid-template-columns:16px minmax(0,1fr); gap:8px; align-items:start; padding:8px 12px; border-radius:10px; border:1px solid transparent; font-size:13px; font-weight:600; line-height:1.4; }
.ras-faixa > svg{ width:16px; height:16px; margin-top:1px; }
.ras-faixa.is-atencao{ background:var(--ras-atencao-bg); border-color:var(--ras-atencao-line); color:var(--ras-atencao-ink); }
.ras-faixa.is-info{ background:var(--accent-50); border-color:var(--accent-line); color:var(--ink); }
.ras-faixa.is-info > svg{ color:var(--accent-ink); }
.ras-dobra{ display:flex; flex-direction:column; gap:6px; }
.ras-dobra summary{ display:flex; align-items:center; gap:8px; padding:6px 12px; border:1px solid var(--ras-atencao-line); border-radius:10px; background:var(--ras-atencao-bg); color:var(--ras-atencao-ink); font-size:13px; font-weight:600; cursor:pointer; list-style-position:inside; }
.ras-dobra summary svg{ width:15px; height:15px; }
.ras-dobra .ras-faixa{ margin-top:6px; }
.ras-regra{ padding:0 2px; font-size:13px; color:var(--ink-2); }
.ras-regra summary{ cursor:pointer; font-weight:700; color:var(--accent-ink); width:max-content; max-width:100%; }
.ras-regra p{ margin:6px 0 0; line-height:1.45; color:var(--ink); max-width:110ch; }
.ras-nota{ margin:0; font-size:13px; line-height:1.4; color:var(--ink-2); }

/* ---------- selos ---------- */
.ras-selo{ display:inline-block; max-width:100%; padding:2px 8px; border-radius:10px; font-size:12px; font-weight:700; line-height:1.35; white-space:normal; }
.ras-selo.is-ok{ background:var(--good-soft); color:var(--good); }
.ras-selo.is-atencao{ background:var(--ras-atencao-bg); color:var(--ras-atencao-ink); }
.ras-selo.is-critico{ background:var(--ras-critico-bg); color:var(--ras-critico-ink); }
.ras-selo.is-neutro{ background:var(--chip); color:var(--ink-2); }

/* ---------- tabela ---------- */
.ras-lista{ min-width:0; transition:opacity .15s; }
.ras-lista.is-carregando{ opacity:.6; }
.ras-lista{ scroll-margin-top:calc(var(--ras-topo) + 52px); }
.ras-quadro{ min-width:0; background:var(--panel); border:1px solid var(--line); border-radius:12px 12px 0 0; }
.ras-quadro--rec{ border-radius:12px; }
/* a barra de rolar de lado mora aqui, sempre à vista; a do corpo ficaria no fim da lista */
.ras-cabfixo{ position:sticky; top:var(--ras-topo-cab); z-index:5; overflow-x:auto; overflow-y:hidden; background:var(--panel); border-radius:12px 12px 0 0; border-bottom:1px solid var(--line); scrollbar-width:thin; }
.ras .ras-tabwrap{ overflow-x:auto; overflow-y:hidden; scrollbar-width:none; min-width:0; }
.ras .ras-tabwrap::-webkit-scrollbar{ display:none; }
.ras-tab{ width:max(100%, var(--ras-w)); table-layout:fixed; border-collapse:separate; border-spacing:0; margin:0; font-size:13px; font-variant-numeric:tabular-nums; }
.ras-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
/* bordas com !important: o portal-2026-dark.css (gerado) põe borda em todo td/th do tema escuro */
.ras-tab th{ padding:8px 10px; border:0 !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; box-shadow:none; font-size:12px; font-weight:700; color:var(--ink-2); text-align:left; white-space:nowrap; text-transform:none; letter-spacing:0; }
.ras-tab td{ padding:7px 10px; border:0 !important; border-bottom:1px solid var(--line-soft) !important; color:var(--ink); vertical-align:middle; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; background:var(--panel); }
.ras-tab tbody tr:last-child td{ border-bottom:0 !important; }
.ras-tab tbody tr:hover td{ background:var(--accent-50); }
.ras-tab .r{ text-align:right; }
.ras-tab td.ras-c-sit{ white-space:normal; }
.ras-tab td.ras-c-mais{ display:none; }
.ras-tab th.ras-c-cpf, .ras-tab td.ras-c-cpf{ position:sticky; left:0; z-index:1; box-shadow:1px 0 0 var(--line-soft) !important; }
/* fundo opaco com este seletor: o do portal para .page table thead th tem !important e é translúcido, e o que rola de lado vazaria.
   O título do CPF fica por cima dos outros: sem isto eles passam por cima dele ao rolar de lado */
.page .ras-quadro table.ras-tab thead th{ position:static; background:var(--panel) !important; }
.page .ras-quadro table.ras-tab thead th.ras-c-cpf{ position:sticky; left:0; z-index:4; }
/* o CPF fixo fica sempre opaco: o que rola de lado passa por baixo dele, também na linha com o mouse em cima */
.ras-tab tbody tr td.ras-c-cpf, .ras-tab tbody tr:hover td.ras-c-cpf{ background:var(--panel) !important; }
.ras-c-total{ font-weight:700; }
.ras-link{ all:unset; color:var(--accent-ink); font-weight:600; cursor:pointer; text-decoration:underline; text-decoration-color:var(--accent-line-2); text-underline-offset:3px; }
.ras-link:hover{ text-decoration-color:currentColor; }
/* depois de .ras-link: o all:unset dele apagaria o corte */
.ras-corta{ display:block; box-sizing:border-box; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ras-ord{ all:unset; display:inline-flex; align-items:center; gap:4px; cursor:pointer; font-weight:700; color:var(--ink-2); }
.ras-ord svg{ width:12px; height:12px; opacity:0; transform:rotate(180deg); }
.ras-ord:hover svg{ opacity:.5; }
.ras-ord.is-on{ color:var(--accent-ink); }
.ras-ord.is-on svg{ opacity:1; }
.ras-ord.is-asc svg{ transform:none; }
.ras-preco{ display:inline-flex; align-items:center; gap:5px; max-width:100%; color:var(--ink-2); font-size:12.5px; font-weight:600; white-space:normal; }
.ras-preco.is-sem{ color:var(--ras-atencao-ink); }
.ras-preco svg{ width:13px; height:13px; }
#rasPag.og-pag{ position:sticky; bottom:0; z-index:4; border-top:1px solid var(--line); border-top-left-radius:0; border-top-right-radius:0; }

/* ---------- vazio, erro, carregando ---------- */
.ras-vazio{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:40px 20px; background:var(--panel); border:1px solid var(--line); border-radius:12px; text-align:center; color:var(--ink-2); }
.ras-vazio > svg{ width:32px; height:32px; color:var(--accent-ink); }
.ras-vazio strong{ font-size:15px; color:var(--ink); }
.ras-vazio p{ margin:0; max-width:62ch; font-size:13.5px; line-height:1.45; }
.ras-vazio-acoes{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:4px; }
.ras-vazio--carregando{ font-size:13.5px; font-weight:600; }

/* ---------- ordenar no celular ---------- */
.ras-ordem{ align-items:center; gap:8px; font-size:12px; font-weight:700; color:var(--ink-2); }
.ras-ordem > div{ flex:1 1 auto; min-width:0; }

/* ---------- recebimento ---------- */
.ras-rec{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.ras-sec-t{ margin:0 0 6px; font-size:13px; font-weight:800; color:var(--ink-2); text-transform:none; letter-spacing:0; }
.ras-rec-lista ul{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:8px; }
.ras-rec-item{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:3px 10px; width:100%; padding:10px 12px; background:var(--panel); border:1px solid var(--line); border-radius:12px; font:inherit; color:var(--ink); text-align:left; cursor:pointer; }
.ras-rec-item:hover{ border-color:var(--accent-line); background:var(--accent-50); }
.ras-rec-item strong{ font-size:14px; font-weight:800; }
.ras-rec-forn{ grid-column:1 / -1; grid-row:2; font-size:13px; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ras-rec-ordem{ grid-column:1; grid-row:3; font-size:13px; font-weight:600; }
.ras-rec-item .ras-selo{ grid-column:2; grid-row:1; justify-self:end; }
.ras-rec-data{ grid-column:2; grid-row:3; font-size:12.5px; font-weight:600; color:var(--ink-2); }
.ras-rec-cab{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 16px; padding:10px 14px; background:var(--panel); border:1px solid var(--line); border-radius:12px; }
.ras-rec-id{ display:flex; flex-direction:column; min-width:0; }
.ras-rec-id strong{ font-size:16px; font-weight:800; line-height:1.25; }
.ras-rec-id span{ font-size:13px; color:var(--ink-2); }
.ras-rec-ord{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; }
.ras-rec-cab .ras-btn{ margin-left:auto; }
.ras-sub{ display:flex; gap:4px; border-bottom:1px solid var(--line); }
.ras-sub button{ height:36px; padding:0 12px; border:0; border-bottom:2px solid transparent; margin-bottom:-1px; background:transparent; color:var(--ink-2); font:inherit; font-size:13.5px; font-weight:700; cursor:pointer; white-space:nowrap; }
.ras-sub button b{ margin-left:4px; font-weight:700; color:var(--ink-3); }
.ras-sub button[aria-selected="true"]{ color:var(--accent-ink); border-bottom-color:var(--accent); }

/* ---------- telas menores: os filtros em mais linhas ---------- */
@media (max-width: 1240px){
  .ras-campos{ grid-template-columns:repeat(5,minmax(0,1fr)); }
}
@media (max-width: 1100px){
  .ras-kpis{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .ras-kpis--rec{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .ras-campos{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* ---------- celular: cartões, sem rolagem de lado ---------- */
@media (max-width: 760px){
  .ras-so-cel{ display:inline-flex !important; }
  .ras-ordem.ras-so-cel{ display:flex !important; grid-column:1 / -1; }
  .ras-abas{ top:calc(var(--topbar-height,56px) + 44px); }
  .ras-abas button{ flex:1 1 0; padding:0 8px; }
  .ras-barra-fim{ margin-left:0; width:100%; justify-content:flex-start; }
  .ras-btn--excel{ margin-left:auto; }
  .ras-campos{ display:none; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ras-campos.is-aberto{ display:grid; }
  .ras-campo--peca, .ras-campo--cpf, .ras-campo--cliente{ grid-column:1 / -1; }
  .ras-campo--rec{ max-width:none; }
  /* KPIs compactos: a primeira peça tem de aparecer na primeira tela, sem rolar */
  .ras-kpis, .ras-kpis--rec{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
  .ras-kpi{ padding:6px 9px; gap:0; }
  .ras-kpi-l{ font-size:12px; line-height:1.25; }
  .ras-kpi-v{ font-size:18px; }
  .ras-kpi-s, .ras-kpi-d{ display:none; }
  .ras-kpi-s--fixo{ display:block; font-size:12px; }
  .ras-kpi--valor{ grid-column:1 / -1; order:-1; flex-direction:row; flex-wrap:wrap; align-items:baseline; justify-content:space-between; column-gap:10px; }
  .ras-kpi--valor .ras-kpi-s{ display:block; flex-basis:100%; font-size:12px; }
  .ras-kpi--semcpf{ grid-column:span 2; }
  .ras-regra{ order:9; }

  /* um cartão só com a resposta; o resto em Mais detalhes */
  .ras-cabfixo{ display:none; }
  .ras-quadro{ border:0; background:transparent; border-radius:0; }
  .ras .ras-tabwrap{ overflow:visible; }
  .ras-tab{ display:block; width:100%; }
  .ras-tab colgroup{ display:none; }
  .ras-sr{ display:none; }
  .ras-tab tbody{ display:flex; flex-direction:column; gap:8px; }
  .ras-tab tr{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px 12px; padding:12px; background:var(--panel); border:1px solid var(--line); border-radius:12px; }
  .ras-tab td{ display:block; padding:0; border:0 !important; background:transparent !important; white-space:normal; overflow:visible; min-width:0; max-width:none; overflow-wrap:anywhere; text-align:left !important; font-size:13.5px; grid-column:span 3; }
  .ras-tab td::before{ content:attr(data-l); display:block; margin-bottom:1px; font-size:12px; font-weight:600; color:var(--ink-2); }
  .ras-tab tbody tr:hover td{ background:transparent !important; }
  /* a ordem do cartão: quem é, para quem, a NF com data e quantidade, quem levou e por quanto, e o motivo se o valor faltar */
  .ras-tab td.ras-c-cpf{ position:static; box-shadow:none; order:-9; }
  .ras-tab td.ras-c-sit{ order:-8; }
  .ras-tab td.ras-c-cli{ order:-7; }
  .ras-tab td.ras-c-nf{ order:-6; grid-column:span 2; }
  .ras-tab td.ras-c-saida{ order:-5; grid-column:span 3; }
  .ras-tab td.ras-c-qtd{ order:-4; grid-column:span 1; }
  .ras-tab td.ras-c-transp{ order:-3; grid-column:span 4; }
  .ras-tab td.ras-c-total{ order:-2; grid-column:span 2; }
  .ras-tab td.ras-c-preco{ order:-1; }
  .ras-tab td.ras-c-cli, .ras-tab td.ras-c-desc, .ras-tab td.ras-c-preco{ grid-column:1 / -1; }
  .ras-tab td.ras-c-total{ font-size:15px; }
  .ras-tab tr:not(.is-aberto) td.ras-cel-mais{ display:none; }
  .ras-tab td.ras-c-mais{ display:block; grid-column:1 / -1; order:20; }
  .ras-tab td.ras-c-mais::before{ content:none; }
  .ras-corta{ max-width:none; white-space:normal; overflow:visible; }
  .ras-preco{ align-items:flex-start; }

  .ras-rec-lista ul{ grid-template-columns:minmax(0,1fr); }
  .ras-rec-cab .ras-btn{ margin-left:0; }
  #rasPag.og-pag{ position:static; justify-content:center; }
}

@media (prefers-reduced-motion: reduce){
  .ras-kpis, .ras-lista{ transition:none; }
}