:root{
    --bg:#0d1117;
    --card:#161b22;
    --txt:#f0f6fc;
    --ok:#1f883d;
    --warn:#b54708;
    --err:#d1242f;
    --muted:#8b949e;
    --accent:#2563eb;
    --orange:#f97316;
    --line:#243145;
  }

  html,body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--txt);
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 16px;
  }

  .wrap {
    display:flex;
    flex-direction:column;
    gap:16px;
    padding:20px;
    max-width:1500px;
    width:100%;
    min-width:0;
    margin:0 auto;
    overflow-x:clip;
  }
  .header { display: flex; gap: 12px; align-items: center; justify-content: space-between; position: sticky; top: 0; background: var(--bg); padding: 12px 0; z-index: 5; }
  h1 { font-size: 24px; margin: 0; }

  .card {
    background:var(--card);
    border-radius:16px;
    padding:16px;
    border:1px solid #1e293b;
    width:100%;
    max-width:100%;
    min-width:0;
    overflow:hidden;
  }
  .toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

  .taskbar{
    display:flex;gap:12px;align-items:center;flex-wrap:wrap;
    background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;
  }
  .taskbar .pill{display:inline-flex;gap:6px;align-items:center;background:var(--bg-elevated);border:1px solid var(--line);border-radius:99px;padding:6px 10px;font-size:13px;color:var(--txt)}
  .primary{background:var(--accent);border:none;color:#fff;border-radius:10px;padding:10px 14px;font-size:14px;cursor:pointer}
  .primary:disabled{opacity:.6;cursor:not-allowed}
  select.team{min-width:120px;font-size:15px;padding:8px;border-radius:10px;border:1px solid var(--line);background:var(--input);color:var(--txt)}

  .grid { display: grid; gap: 12px; }
  .grid.cargas {
    grid-template-columns:minmax(0,1fr);
    width:100%;
    max-width:100%;
    min-width:0;
  }

  .row {
    display:grid;
    /* Grade fluida: nunca ultrapassa a largura útil do card. */
    grid-template-columns:
      54px
      minmax(130px,1.15fr)
      minmax(135px,1.20fr)
      minmax(125px,1fr)
      minmax(145px,1.18fr)
      minmax(105px,.82fr)
      minmax(120px,1fr);
    gap:10px;
    align-items:center;
    width:100%;
    max-width:100%;
    min-width:0;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:12px;
    padding:12px;
  }
  .row > * { min-width:0; max-width:100%; }
  .row.header > div { white-space:normal; overflow-wrap:anywhere; }

  .row.header {
    background: var(--bg-elevated);
    border: 1px solid var(--line);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.3px;
  }

  .row.data{
    transition:background-color .18s ease,border-color .18s ease;position:relative;overflow:hidden;border-width:2px;
    background:linear-gradient(90deg,
      color-mix(in srgb,var(--stage-color,#64748b) 31%,var(--card)) 0%,
      color-mix(in srgb,var(--stage-color,#64748b) 17%,var(--card)) 58%,
      color-mix(in srgb,var(--stage-color,#64748b) 9%,var(--card)) 100%)!important
  }
  .row.data::before{content:"";position:absolute;left:0;top:0;bottom:0;width:8px;background:var(--stage-color,#64748b);box-shadow:0 0 18px var(--stage-color,#64748b)}
  .row.data.estagio-aguardando{--stage-color:#94a3b8;border-color:rgba(148,163,184,.65)}
  .row.data.estagio-direcionada{--stage-color:#a78bfa;border-color:rgba(167,139,250,.72)}
  .row.data.estagio-em_separacao{--stage-color:#fb923c;border-color:rgba(251,146,60,.78)}
  .row.data.estagio-separacao_finalizada{--stage-color:#2dd4bf;border-color:rgba(45,212,191,.72)}
  .row.data.estagio-em_conferencia{--stage-color:#60a5fa;border-color:rgba(96,165,250,.75)}
  .row.data.estagio-divergencia{--stage-color:#facc15;border-color:rgba(250,204,21,.95)}
  .row.data .badge[class*="status-"]{
    color:#fff!important;background:color-mix(in srgb,var(--stage-color) 72%,#111827)!important;
    border:2px solid color-mix(in srgb,var(--stage-color) 88%,#fff)!important;font-weight:950;
    padding:7px 12px;box-shadow:0 0 16px color-mix(in srgb,var(--stage-color) 52%,transparent)
  }
  .row.data.estagio-divergencia .badge[class*="status-"]{color:#17140a!important}
  .stage-filter{min-width:245px!important}
  .stage-legend{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:0 2px}
  .stage-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:99px;padding:5px 9px;font-size:12px;color:var(--muted);background:var(--card)}
  .stage-chip::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--chip-color)}
  .stage-chip.aguardando{--chip-color:#94a3b8}.stage-chip.direcionada{--chip-color:#a78bfa}
  .stage-chip.em-separacao{--chip-color:#fb923c}.stage-chip.separacao-finalizada{--chip-color:#2dd4bf}
  .stage-chip.em-conferencia{--chip-color:#60a5fa}.stage-chip.divergencia{--chip-color:#facc15}

  .carga { display: inline-flex; align-items: center; gap: 8px; }
  .link-carga { background: none; border: none; color: var(--orange); font: inherit; font-weight: 800; cursor: pointer; padding: 0; text-align: left; font-size: 20px; }
  .link-carga:hover { text-decoration: underline; }

  .kpi { font-size: 13px; color: var(--muted); }
  .kpi b { color: var(--txt); font-size: 15px; }

  .badge { display:inline-flex;gap:6px;align-items:center;border:1px solid var(--line);border-radius:99px;padding:4px 10px;font-size:13px }
  .status-ok { color: var(--ok); }
  .status-warn { color: var(--warn); }
  .status-plain { color: var(--txt); }

  .link { color: #93c5fd; text-decoration: none; font-weight: 500; }
  .link:hover { text-decoration: underline; }

  .secondary{background:var(--bg-elevated);border:1px solid var(--line);color:var(--txt);border-radius:12px;padding:10px 14px;font-size:16px;cursor:pointer}
  .btn-voltar-lista{margin-top:8px;background:rgba(148,163,184,.10);border:1px solid #94a3b8;color:#e2e8f0;border-radius:9px;padding:7px 10px;font-size:12px;font-weight:800;cursor:pointer}
  .btn-voltar-lista:hover{background:rgba(148,163,184,.20)}
  .btn-voltar-lista:disabled{opacity:.55;cursor:not-allowed}
  .btn-paletes{background:rgba(249,115,22,.14);border:1px solid var(--orange);color:#fdba74;border-radius:10px;padding:9px 11px;font-size:13px;font-weight:900;cursor:pointer;width:100%}
  .btn-paletes:hover{background:rgba(249,115,22,.24)}
  .paletes-resumo{display:block;margin-top:6px;color:#fdba74;font-size:12px;font-weight:800}
  .palete-local{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-weight:900;color:#93c5fd}
  @media(max-width:1180px){
    .row{
      grid-template-columns:
        48px
        minmax(110px,1.10fr)
        minmax(115px,1.12fr)
        minmax(105px,1fr)
        minmax(120px,1.12fr)
        minmax(90px,.78fr)
        minmax(105px,.95fr);
      gap:8px;
      padding:10px;
    }
    .wrap{padding:12px}
    .link-carga{font-size:18px}
    .kpi{font-size:12px}
    .kpi b{font-size:13px}
    .badge{font-size:12px;padding:4px 7px}
    .btn-paletes{font-size:12px;padding:8px 7px}
  }

  .carga, .kpi, .badge, .paletes-resumo, .palete-local {
    min-width:0;
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  /* Modal (detalhes da carga) */
  .modal{ position:fixed;inset:0;background:rgba(0,0,0,.7);display:none;align-items:center;justify-content:center;z-index:100; }
  .modal .box{
    background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;
    max-width:1100px;width:96%;max-height:80vh;overflow:auto;color:var(--txt);
  }
  .modal .box h3{margin:0 0 10px 0;font-size:18px}
  table.modal-tbl{width:100%;border-collapse:collapse}
  table.modal-tbl th, table.modal-tbl td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
  table.modal-tbl tr.sku-separado td{background:rgba(31,136,61,.20);border-bottom-color:rgba(74,222,128,.45)}
  table.modal-tbl tr.sku-separado td:first-child{box-shadow:inset 4px 0 0 rgba(74,222,128,.85)}
  .divergencia-badge{color:var(--warn)!important;border-color:var(--warn)!important;font-weight:900;margin-top:7px}
  .modal .box.alerta-divergencia{max-width:760px;border:3px solid var(--warn)}
  .divergencia-item{background:var(--bg-elevated);border:1px solid var(--warn);border-radius:13px;padding:13px;margin-top:10px;color:var(--txt)}
  .divergencia-item strong{color:var(--warn)}
  .divergencia-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:9px;font-size:14px}
  .tratamento-box{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
  .tratamento-status{display:inline-flex;border-radius:99px;padding:5px 9px;font-size:12px;font-weight:900;margin-bottom:8px}
  .tratamento-status.pendente{background:rgba(245,158,11,.15);border:1px solid var(--warn);color:var(--warn)}
  .tratamento-status.corrigido{background:rgba(31,136,61,.20);border:1px solid var(--ok);color:#86efac}
  .tratamento-status.erro{background:rgba(209,36,47,.20);border:1px solid var(--err);color:#fca5a5}
  .tratamento-observacao{width:100%;box-sizing:border-box;min-height:64px;resize:vertical;background:var(--input);color:var(--txt);border:1px solid var(--line);border-radius:10px;padding:9px;font:inherit}
  .tratamento-acoes{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
  .btn-tratamento-corrigido{background:var(--ok);border:1px solid var(--ok);color:#fff;border-radius:10px;padding:9px 12px;font-weight:800;cursor:pointer}
.btn-tratamento-completar{background:#15803d;border:2px solid #22c55e;color:#fff;border-radius:10px;padding:11px 14px;font-weight:950;cursor:pointer;box-shadow:0 0 0 2px rgba(34,197,94,.12)}
  .btn-tratamento-erro{background:var(--err);border:1px solid var(--err);color:#fff;border-radius:10px;padding:9px 12px;font-weight:800;cursor:pointer}
  .tratamento-acoes button:disabled{opacity:.55;cursor:not-allowed}
  @media(max-width:640px){.divergencia-grid{grid-template-columns:1fr}}