/* Pipeline Principal — visual fiel ao protótipo aprovado pelos gestores.
   Todo o estilo é escopado em #page-pipeline com classes pl-* para não conflitar
   com o app.css (.card, .col, table etc.).

   ⚠️ TEMA: a página tem paleta própria (--pl-*), mas desde 18/08/2026 ela SEGUE o tema do app —
   o bloco `[data-theme="dark"] #page-pipeline` reescreve as mesmas variáveis em versão escura.
   Regra para mexer aqui: **cor nova entra como variável**, nunca como literal no CSS nem no
   `style=` do index.js — literal só existe no tema claro e some no escuro (era o que deixava
   texto ilegível: vermelho escuro sobre caixa escura). As semânticas prontas são
   danger / warn / ok, cada uma com texto (`--pl-danger`), fundo (`-bg`) e borda (`-bd`). */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');

/* ⚠️ Os modais do pipeline (#pipeline-credito-modal, #pipeline-senha-modal) ficam no FIM do
   index.html, FORA do #page-pipeline — sem entrar nesta lista, todo var(--pl-*) dentro deles vira
   valor inválido. Foi o que deixou o botão "Cancelar venda" do modal INVISÍVEL (fundo
   var(--pl-danger-ink) sem valor + texto branco do .btn-primary), visto na venda 147713 em
   11/09/2026. Só as VARIÁVEIS valem para eles; o fundo da página continua só no #page-pipeline. */
#page-pipeline, #pipeline-credito-modal, #pipeline-senha-modal {
  /* ⚠️ Os quatro tons abaixo foram ESCURECIDOS em 18/08/2026 (auditoria de leitura): o cinza
     das legendas dava 3,9:1 sobre a carta branca e o âmbar 2,9:1 dentro da caixa dele — em
     texto de 10-11px, no celular, isso não se lê. Ao mexer na paleta, conferir a razão de
     contraste antes (mínimo 4,5:1 para texto pequeno). */
  --pl-bg:#F4F1EA; --pl-ink:#1A1A1A; --pl-ink2:#544C40; --pl-muted:#6F675C;
  --pl-line:#E0D9CC; --pl-card:#FFFFFF; --pl-panel:#FBFAF6;
  --pl-orange:#B85210; --pl-orange-soft:#F6E7DA; --pl-orange-bd:#E8CDB4;
  --pl-prio:#C2410C; --pl-prio-soft:#FFEDD5; --pl-prio-bd:#FDBA74; --pl-on-prio:#7C2D12;
  --pl-green:#356A48; --pl-green-soft:#E6EFE8; --pl-green-bd:#CFE0D4;
  --pl-prod:#C2691B; --pl-prod-soft:#F6E7D6;
  --pl-blue:#3B5E7A; --pl-blue-soft:#E3EAF0;
  --pl-amber:#8A6508; --pl-amber-bg:#FBF0D9; --pl-amber-bd:#E8CE8C;
  /* Semânticas (avisos do fluxo): usadas no CSS E nos style= do index.js. */
  --pl-danger:#B42318; --pl-danger-ink:#B91C1C; --pl-danger-bg:#FDECEA; --pl-danger-bd:#F3B4AC;
  --pl-warn:#B45309; --pl-warn-ink:#92400E; --pl-warn-bg:#FEF3C7; --pl-warn-bd:#FDE68A;
  --pl-ok:#15803D; --pl-ok-bg:#ECFDF5; --pl-ok-bd:#A7F3D0;
  --pl-teal:#0F766E;
  --pl-purple:#7A4B86; --pl-purple-soft:#F0E6F2; --pl-purple-bd:#DCC9E0;
  --pl-blue-bd:#C7D5E1;
  --pl-hover:#F0DBC8;          /* laranja um tom acima do -soft, para :hover de botão */
  --pl-on-amber:#7A5B08;       /* texto sobre a caixa âmbar */
  --pl-dot:#FFFFFF;            /* miolo do marcador "etapa atual" na trilha */
  --pl-btn-ink:#FFFFFF;        /* texto sobre botão de fundo laranja cheio */
  /* Apelidos usados como var(--pl-red, ...) / var(--pl-accent, ...) no index.js: existem para
     o fallback literal daqueles trechos nunca entrar em cena (ele só serve ao tema claro). */
  --pl-red:var(--pl-danger); --pl-accent:var(--pl-orange);
}
#page-pipeline { background: var(--pl-bg); }

/* ── Tema escuro ──────────────────────────────────────────────────────────────
   Mesmas variáveis, valores escuros: nenhuma regra abaixo precisa ser duplicada.
   Os tons de aviso invertem o papel (texto claro sobre fundo escuro), senão o
   vermelho/âmbar do tema claro sumiria dentro da caixa. */
[data-theme="dark"] #page-pipeline, [data-theme="dark"] #pipeline-credito-modal, [data-theme="dark"] #pipeline-senha-modal {
  --pl-bg:#0F1722; --pl-ink:#E7EBF2; --pl-ink2:#C2C9D6; --pl-muted:#8D97A8;
  --pl-line:#2A3446; --pl-card:#182233; --pl-panel:#141C29;
  --pl-orange:#F0904A; --pl-orange-soft:#3A2617; --pl-orange-bd:#5D3D22;
  --pl-prio:#FB923C; --pl-prio-soft:#43210F; --pl-prio-bd:#7C3E14; --pl-on-prio:#FFD9B8;
  --pl-green:#5FC08A; --pl-green-soft:#152B1E; --pl-green-bd:#28543A;
  --pl-prod:#E89B4B; --pl-prod-soft:#382713;
  --pl-blue:#93B7DB; --pl-blue-soft:#1A2634; --pl-blue-bd:#31465C;
  --pl-amber:#E0B449; --pl-amber-bg:#312611; --pl-amber-bd:#5A4718;
  --pl-danger:#F58A80; --pl-danger-ink:#FCA5A5; --pl-danger-bg:#3A1B19; --pl-danger-bd:#7B3830;
  --pl-warn:#E9AC5C; --pl-warn-ink:#F5C77E; --pl-warn-bg:#382913; --pl-warn-bd:#63491B;
  --pl-ok:#63C58C; --pl-ok-bg:#132A1D; --pl-ok-bd:#2A5B3D;
  --pl-teal:#4FB3A6;
  --pl-purple:#C7A3D2; --pl-purple-soft:#2A1F30; --pl-purple-bd:#4A3654;
  --pl-hover:#4A3020;
  --pl-on-amber:#F0D48A;
  --pl-dot:#182233;
  --pl-btn-ink:#0F1722;
}
#pipeline-content { font-family:'Inter',system-ui,sans-serif; color:var(--pl-ink); -webkit-font-smoothing:antialiased; }
#pipeline-content .pl-hidden { display:none !important; }

/* ── Navegação: abas de módulo fixas + barra de contexto ── */
#pipeline-content .pl-topbar { position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 28px; background:var(--pl-bg); border-bottom:1px solid var(--pl-line); }
#pipeline-content .pl-tabs { display:flex; gap:4px; overflow-x:auto; }
#pipeline-content .pl-tab { display:flex; align-items:center; gap:7px; font-family:inherit; font-size:13.5px; font-weight:600; color:var(--pl-muted); background:none; border:none; border-bottom:3px solid transparent; padding:14px 16px 11px; cursor:pointer; white-space:nowrap; transition:color .12s, border-color .12s; }
#pipeline-content .pl-tab:hover { color:var(--pl-ink); }
#pipeline-content .pl-tab.on { color:var(--pl-orange); border-bottom-color:var(--pl-orange); }
#pipeline-content .pl-tab .badge { font-size:10.5px; font-weight:700; line-height:1; padding:3px 7px; border-radius:20px; background:var(--pl-orange-soft); color:var(--pl-orange); border:1px solid var(--pl-orange-bd); }
#pipeline-content .pl-tab.on .badge { background:var(--pl-orange); color:#fff; border-color:var(--pl-orange); }
#pipeline-content .pl-sync { font-size:11.5px; color:var(--pl-muted); white-space:nowrap; }
#pipeline-content .pl-sync .dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--pl-amber); margin-right:5px; }

#pipeline-content .pl-context { display:flex; align-items:center; gap:10px; padding:12px 28px; background:var(--pl-panel); border-bottom:1px solid var(--pl-line); }
#pipeline-content .pl-context .volta { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; flex-shrink:0; border-radius:8px; border:1px solid var(--pl-orange-bd); background:var(--pl-orange-soft); color:var(--pl-orange); font-size:15px; cursor:pointer; }
#pipeline-content .pl-context .volta:hover { background:var(--pl-hover); }
#pipeline-content .pl-context .trilha { font-size:13px; color:var(--pl-muted); display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
#pipeline-content .pl-context .trilha a { color:var(--pl-muted); cursor:pointer; text-decoration:none; }
#pipeline-content .pl-context .trilha a:hover { color:var(--pl-orange); text-decoration:underline; }
#pipeline-content .pl-context .trilha b { color:var(--pl-ink); font-weight:600; }

/* barra de sincronização / demo (legado) */
#pipeline-content .pl-syncbar { display:flex; align-items:center; justify-content:space-between; padding:10px 28px; background:#1A1A1A; }
#pipeline-content .pl-syncbar .crumb { font-size:13px; color:#B6AC9C; }
#pipeline-content .pl-syncbar .crumb b { color:#fff; }
#pipeline-content .pl-syncbar .sync { font-size:11.5px; color:#8E887E; }
#pipeline-content .pl-syncbar .sync .dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--pl-amber); margin-right:5px; }

#pipeline-content .pl-backbar { display:flex; align-items:center; gap:14px; padding:16px 28px 0; }
#pipeline-content .pl-back { display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--pl-orange); cursor:pointer; border:1px solid var(--pl-orange-bd); background:var(--pl-orange-soft); padding:7px 14px; border-radius:8px; }
#pipeline-content .pl-back:hover { background:var(--pl-hover); }
#pipeline-content .pl-head { padding:24px 28px 4px; }
#pipeline-content .pl-head h1 { font-family:'Fraunces',serif; font-size:27px; font-weight:600; margin:0; }

/* toolbar */
#pipeline-content .pl-toolbar { display:flex; gap:12px; align-items:center; padding:14px 28px 0; flex-wrap:wrap; }
#pipeline-content .pl-search { flex:1; min-width:240px; max-width:420px; position:relative; }
#pipeline-content .pl-search input { width:100%; font-family:inherit; font-size:13.5px; padding:10px 14px 10px 38px; border:1px solid var(--pl-line); border-radius:10px; background:var(--pl-card); color:var(--pl-ink); outline:none; transition:border .12s; }
#pipeline-content .pl-search input:focus { border-color:var(--pl-orange-bd); }
#pipeline-content .pl-search .ico { position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--pl-muted); font-size:15px; pointer-events:none; }
#pipeline-content .pl-filtersel label { font-size:10px; color:var(--pl-muted); text-transform:uppercase; letter-spacing:.5px; display:block; margin-bottom:3px; padding-left:2px; }
#pipeline-content .pl-filtersel select { font-family:inherit; font-size:13px; font-weight:600; padding:9px 30px 9px 13px; border:1px solid var(--pl-line); border-radius:10px; background:var(--pl-card); color:var(--pl-ink); cursor:pointer; outline:none; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238A8073' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; }
#pipeline-content .pl-clearf { font-size:12px; font-weight:600; color:var(--pl-orange); cursor:pointer; padding:9px 4px; align-self:flex-end; }
#pipeline-content .pl-clearf:hover { text-decoration:underline; }
#pipeline-content .pl-resultcount { padding:10px 28px 0; font-size:12px; color:var(--pl-muted); }

/* board */
#pipeline-content .pl-board { display:flex; gap:14px; padding:20px 28px 44px; overflow-x:auto; align-items:flex-start; }
#pipeline-content .pl-col { flex:0 0 280px; background:var(--pl-panel); border:1px solid var(--pl-line); border-radius:13px; overflow:hidden; }
#pipeline-content .pl-col-h { display:flex; align-items:center; gap:9px; padding:13px 14px; border-bottom:1px solid var(--pl-line); background:var(--pl-card); cursor:pointer; transition:background .12s; }
#pipeline-content .pl-col-h:hover { background:var(--pl-orange-soft); }
#pipeline-content .pl-col-h .ic { width:25px; height:25px; border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0; background:var(--pl-orange-soft); }
#pipeline-content .pl-col-h h3 { font-family:'Fraunces',serif; font-size:15.5px; font-weight:600; flex:1; line-height:1.15; margin:0; }
#pipeline-content .pl-col-h .ct { font-size:11px; color:var(--pl-muted); background:var(--pl-bg); border:1px solid var(--pl-line); border-radius:50%; width:22px; height:22px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
#pipeline-content .pl-col-h .arrow { font-size:11px; color:var(--pl-orange); opacity:0; transition:opacity .12s; flex-shrink:0; }
#pipeline-content .pl-col-h:hover .arrow { opacity:1; }
#pipeline-content .pl-col-b { padding:12px; display:flex; flex-direction:column; gap:11px; min-height:70px; }

/* card */
#pipeline-content .pl-kcard { background:var(--pl-card); border:1px solid var(--pl-line); border-radius:10px; padding:13px; border-left:3px solid var(--pl-orange); cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.04); transition:transform .1s, box-shadow .1s; }
#pipeline-content .pl-kcard:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,.1); }
#pipeline-content .pl-kcard.green { border-left-color:var(--pl-green); }
#pipeline-content .pl-kcard.orc { border-left-color:var(--pl-amber); }
#pipeline-content .pl-kcard.retira { background:var(--pl-amber-bg); border-color:var(--pl-amber-bd); border-left-color:var(--pl-amber); border-left-width:4px; }
#pipeline-content .pl-kcard.showroom { background:var(--pl-purple-soft); border-color:var(--pl-purple-bd); border-left-color:var(--pl-purple); border-left-width:4px; }
/* Prioridade (21/08/2026): o card marcado fica laranja e no TOPO da coluna (ordenarCards).
   O showroom continua ganhando a pintura quando os dois coincidem — ele é presencial, com
   cliente esperando no balcão, e não pode perder o roxo que a Logística aprendeu a ler. */
#pipeline-content .pl-kcard.prio { background:var(--pl-prio-soft); border-color:var(--pl-prio-bd); border-left-color:var(--pl-prio); border-left-width:4px; }
#pipeline-content .pl-kcard.prio.showroom { background:var(--pl-purple-soft); border-color:var(--pl-purple-bd); border-left-color:var(--pl-purple); }
#pipeline-content .pl-tag.prio { background:var(--pl-prio-soft); color:var(--pl-on-prio); border-color:var(--pl-prio-bd); font-weight:700; }
/* Devolvido: o card voltou de uma etapa adiante. Vermelho de aviso (o âmbar já é do "retira") e
   a tarja fica só enquanto ele está parado onde caiu — ver estaDevolvido() no index.js. */
#pipeline-content .pl-kcard.devolvido { background:var(--pl-danger-bg); border-color:var(--pl-danger-bd); border-left-color:var(--pl-danger-ink); border-left-width:4px; }
#pipeline-content .pl-devtag { font-size:10.5px; font-weight:700; color:var(--pl-danger-ink); margin-bottom:5px; text-transform:uppercase; letter-spacing:.02em; }
#pipeline-content .pl-devolvido { background:var(--pl-danger-bg); border:1px solid var(--pl-danger-bd); border-left:4px solid var(--pl-danger-ink); border-radius:10px; padding:11px 13px; margin-bottom:14px; }
#pipeline-content .pl-devolvido .t { font-size:13px; font-weight:700; color:var(--pl-danger-ink); margin-bottom:3px; }
#pipeline-content .pl-devolvido .m { font-size:12.5px; color:var(--pl-ink); line-height:1.5; }
#pipeline-content .pl-devolvido .q { font-size:11px; color:var(--pl-muted); margin-top:4px; }
#pipeline-content .pl-kcard .r1 { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
#pipeline-content .pl-kcard .cod { font-family:'Fraunces',serif; font-size:13px; color:var(--pl-orange); font-weight:600; }
#pipeline-content .pl-kcard .val { font-size:14px; font-weight:700; }
#pipeline-content .pl-kcard .cli { font-size:12.5px; font-weight:600; line-height:1.3; margin-bottom:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#pipeline-content .pl-kcard .meta { font-size:11px; color:var(--pl-muted); margin-bottom:8px; }
#pipeline-content .pl-kcard .tags { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:9px; }
#pipeline-content .pl-tag { font-size:10px; font-weight:600; border-radius:5px; padding:2px 7px; border:1px solid var(--pl-line); background:var(--pl-bg); color:var(--pl-ink2); }
#pipeline-content .pl-tag.prod { background:var(--pl-prod-soft); color:var(--pl-prod); border-color:var(--pl-orange-bd); }
#pipeline-content .pl-tag.est { background:var(--pl-green-soft); color:var(--pl-green); border-color:var(--pl-green-bd); }
#pipeline-content .pl-tag.comp { background:var(--pl-blue-soft); color:var(--pl-blue); border-color:var(--pl-blue-bd); }
#pipeline-content .pl-tag.dev { background:var(--pl-purple-soft); color:var(--pl-purple); border-color:var(--pl-purple-bd); }
#pipeline-content .pl-tag.ret { background:var(--pl-amber-bg); color:var(--pl-amber); border-color:var(--pl-amber-bd); }
#pipeline-content .pl-tag.show { background:var(--pl-purple-soft); color:var(--pl-purple); border-color:var(--pl-purple-bd); font-weight:700; }
#pipeline-content .pl-tag.orc { background:var(--pl-amber-bg); color:var(--pl-amber); border-color:var(--pl-amber-bd); }
#pipeline-content .pl-substage { font-size:10px; color:var(--pl-muted); margin-bottom:8px; display:flex; align-items:center; gap:5px; }
#pipeline-content .pl-substage .d { width:5px; height:5px; border-radius:50%; background:var(--pl-orange); }
#pipeline-content .pl-prog { display:flex; gap:3px; margin-bottom:7px; }
#pipeline-content .pl-prog i { height:3px; flex:1; border-radius:2px; background:var(--pl-line); }
#pipeline-content .pl-prog i.on { background:var(--pl-orange); }
#pipeline-content .pl-kcard.green .pl-prog i.on { background:var(--pl-green); }
#pipeline-content .pl-age { font-size:11px; color:var(--pl-muted); }
#pipeline-content .pl-age.warn { color:var(--pl-orange); font-weight:600; }

/* formulários (campos alinhados mesmo com rótulos de alturas diferentes) */
#pipeline-content .pl-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; align-items:end; }
#pipeline-content .pl-field { display:flex; flex-direction:column; justify-content:flex-end; min-width:0; }
#pipeline-content .pl-field > label { font-size:10px; color:var(--pl-muted); text-transform:uppercase; letter-spacing:.5px; line-height:1.3; margin-bottom:6px; }
#pipeline-content .pl-input { width:100%; box-sizing:border-box; font-family:inherit; font-size:13px; padding:9px 11px; border:1px solid var(--pl-line); border-radius:8px; background:var(--pl-card); color:var(--pl-ink); outline:none; transition:border-color .12s; }
#pipeline-content .pl-input:focus { border-color:var(--pl-orange-bd); }
#pipeline-content textarea.pl-input { resize:vertical; line-height:1.5; }
#pipeline-content .pl-check { display:inline-flex; align-items:center; gap:9px; font-size:13px; font-weight:600; cursor:pointer; user-select:none; }
#pipeline-content .pl-check input { width:17px; height:17px; cursor:pointer; accent-color:var(--pl-orange); margin:0; }

/* detalhe do pedido */
#pipeline-content .pl-wrap { max-width:920px; margin:0 auto; padding:20px 28px 60px; }
#pipeline-content .pl-od-head { background:var(--pl-panel); border:1px solid var(--pl-line); border-radius:12px; padding:20px 22px; margin-bottom:16px; }
#pipeline-content .pl-od-kick { font-size:11px; font-weight:700; color:var(--pl-orange); letter-spacing:2px; text-transform:uppercase; margin-bottom:9px; }
#pipeline-content .pl-od-badges { display:flex; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
#pipeline-content .pl-od-badges .b { font-size:11px; font-weight:600; border-radius:6px; padding:3px 9px; border:1px solid var(--pl-line); }
#pipeline-content .pl-od-badges .sh { background:var(--pl-bg); color:var(--pl-ink2); }
#pipeline-content .pl-od-badges .omie { background:var(--pl-orange-soft); color:var(--pl-orange); border-color:var(--pl-orange-bd); }
#pipeline-content .pl-od-badges .ret { background:var(--pl-amber-bg); color:var(--pl-amber); border-color:var(--pl-amber-bd); }
#pipeline-content .pl-od-badges .show { background:var(--pl-purple-soft); color:var(--pl-purple); border-color:var(--pl-purple-bd); font-weight:700; }
#pipeline-content .pl-od-head h2 { font-family:'Fraunces',serif; font-size:23px; font-weight:600; line-height:1.2; margin:0; }
#pipeline-content .pl-od-head .sub { font-size:12.5px; color:var(--pl-muted); margin-top:5px; }
#pipeline-content .pl-od-track { display:flex; align-items:center; margin:0 0 14px; padding:16px; background:var(--pl-panel); border:1px solid var(--pl-line); border-radius:12px; }
#pipeline-content .pl-od-track .st { flex:1; text-align:center; position:relative; }
#pipeline-content .pl-od-track .st .dot { width:14px; height:14px; border-radius:50%; background:var(--pl-line); margin:0 auto 7px; border:3px solid var(--pl-panel); position:relative; z-index:2; }
#pipeline-content .pl-od-track .st.done .dot { background:var(--pl-orange); }
#pipeline-content .pl-od-track .st.now .dot { background:var(--pl-dot); border-color:var(--pl-orange); box-shadow:0 0 0 3px var(--pl-orange-soft); }
#pipeline-content .pl-od-track .st .lb { font-size:10px; color:var(--pl-muted); line-height:1.2; }
#pipeline-content .pl-od-track .st.done .lb, #pipeline-content .pl-od-track .st.now .lb { color:var(--pl-ink); font-weight:600; }
#pipeline-content .pl-od-track .st:not(:last-child):after { content:''; position:absolute; top:7px; left:50%; width:100%; height:2px; background:var(--pl-line); z-index:1; }
#pipeline-content .pl-od-track .st.done:not(:last-child):after { background:var(--pl-orange); }
#pipeline-content .pl-sec { background:var(--pl-card); border:1px solid var(--pl-line); border-radius:12px; padding:18px 22px; margin-bottom:14px; box-shadow:0 1px 3px rgba(0,0,0,.04); }
#pipeline-content .pl-sec h3 { font-size:11px; font-weight:700; color:var(--pl-muted); letter-spacing:1.5px; text-transform:uppercase; margin:0 0 14px; }
#pipeline-content .pl-sec table { width:100%; border-collapse:collapse; font-size:13px; }
#pipeline-content .pl-sec th { text-align:left; font-size:10px; color:var(--pl-muted); text-transform:uppercase; letter-spacing:.5px; padding:0 8px 9px; font-weight:600; background:none; border:none; }
#pipeline-content .pl-sec td { padding:9px 8px; border-top:1px solid var(--pl-line); vertical-align:middle; border-bottom:none; }
#pipeline-content .pl-it-cod { font-family:'Fraunces',serif; color:var(--pl-orange); font-weight:600; font-size:12px; }
#pipeline-content .pl-it-desc { font-weight:500; }
#pipeline-content .pl-num { text-align:right; font-variant-numeric:tabular-nums; }
#pipeline-content .pl-disc { color:var(--pl-orange); }
#pipeline-content select.pl-drop { font-family:inherit; font-size:11px; font-weight:600; padding:4px 8px; border-radius:6px; border:1px solid var(--pl-orange-bd); background:var(--pl-orange-soft); color:var(--pl-prod); cursor:pointer; }
#pipeline-content .pl-tots { display:grid; grid-template-columns:1fr 1fr; gap:8px 30px; }
#pipeline-content .pl-totrow { display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid var(--pl-line); font-size:13px; }
#pipeline-content .pl-totrow .lb { color:var(--pl-ink2); }
#pipeline-content .pl-totrow.big { border:none; font-weight:700; font-size:17px; align-items:center; }
#pipeline-content .pl-totrow.big .v { color:var(--pl-orange); }
#pipeline-content .pl-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
#pipeline-content .pl-fld .k { font-size:10px; color:var(--pl-muted); text-transform:uppercase; letter-spacing:.5px; margin-bottom:3px; }
#pipeline-content .pl-fld .v { font-size:13.5px; font-weight:500; margin-bottom:13px; }
#pipeline-content .pl-retbox { display:flex; align-items:center; gap:12px; padding:14px 18px; border:1px solid var(--pl-amber-bd); background:var(--pl-amber-bg); border-radius:10px; margin-bottom:14px; cursor:pointer; user-select:none; }
#pipeline-content .pl-retbox .cbx { width:22px; height:22px; border-radius:6px; border:2px solid var(--pl-amber); background:var(--pl-card); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:14px; color:var(--pl-card); font-weight:700; }
#pipeline-content .pl-retbox.on .cbx { background:var(--pl-amber); }
#pipeline-content .pl-retbox .tx .t { font-size:13.5px; font-weight:700; color:var(--pl-on-amber); }
#pipeline-content .pl-retbox .tx .m { font-size:11.5px; color:var(--pl-amber); margin-top:1px; }
/* Cliente showroom: mesma caixa do "cliente retira", mas ela SÓ FICA ROXA quando marcada — é o
   sinal que o Guilherme pediu para diferenciar de bate-pronto (18/08/2026). O roxo é o mesmo que
   segue a venda até a Separação: a fita e o cartão do quadro da Logística usam o tom irmão. */
#pipeline-content .pl-showbox { display:flex; align-items:center; gap:12px; padding:14px 18px; border:1px solid var(--pl-line); background:var(--pl-card); border-radius:10px; margin-bottom:14px; cursor:pointer; user-select:none; transition:background .12s, border-color .12s; }
#pipeline-content .pl-showbox:hover { border-color:var(--pl-purple-bd); }
#pipeline-content .pl-showbox .cbx { width:22px; height:22px; border-radius:6px; border:2px solid var(--pl-purple); background:var(--pl-card); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:14px; color:var(--pl-card); font-weight:700; }
#pipeline-content .pl-showbox .tx .t { font-size:13.5px; font-weight:700; color:var(--pl-ink); }
#pipeline-content .pl-showbox .tx .m { font-size:11.5px; color:var(--pl-muted); margin-top:1px; }
#pipeline-content .pl-priobox { display:flex; align-items:center; gap:12px; padding:14px 18px; border:1px solid var(--pl-line); background:var(--pl-card); border-radius:10px; margin-bottom:14px; cursor:pointer; user-select:none; transition:background .12s, border-color .12s; }
#pipeline-content .pl-priobox:hover { border-color:var(--pl-prio-bd); }
#pipeline-content .pl-priobox.on { background:var(--pl-prio-soft); border-color:var(--pl-prio-bd); }
#pipeline-content .pl-priobox .cbx { width:22px; height:22px; border-radius:6px; border:2px solid var(--pl-prio); background:var(--pl-card); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:14px; color:var(--pl-card); font-weight:700; }
#pipeline-content .pl-priobox.on .cbx { background:var(--pl-prio); }
#pipeline-content .pl-priobox .tx .t { font-size:13.5px; font-weight:700; color:var(--pl-ink); }
#pipeline-content .pl-priobox.on .tx .t { color:var(--pl-on-prio); }
#pipeline-content .pl-priobox .tx .m { font-size:11.5px; color:var(--pl-muted); margin-top:1px; }
#pipeline-content .pl-showbox.on { background:var(--pl-purple-soft); border-color:var(--pl-purple-bd); }
#pipeline-content .pl-showbox.on .cbx { background:var(--pl-purple); }
#pipeline-content .pl-showbox.on .tx .t,
#pipeline-content .pl-showbox.on .tx .m { color:var(--pl-purple); }
#pipeline-content .pl-acts { display:flex; flex-wrap:wrap; gap:10px; }
#pipeline-content .pl-actbtn { display:inline-flex; align-items:center; gap:9px; padding:11px 18px; border-radius:10px; border:1px solid var(--pl-orange-bd); background:var(--pl-orange-soft); color:var(--pl-orange); font-size:13.5px; font-weight:600; cursor:pointer; font-family:inherit; transition:all .12s; }
#pipeline-content .pl-actbtn:hover { background:var(--pl-hover); }
#pipeline-content .pl-actbtn.done { background:var(--pl-green-soft); border-color:var(--pl-green-bd); color:var(--pl-green); }
#pipeline-content .pl-log { display:flex; flex-direction:column; }
#pipeline-content .pl-logitem { display:flex; gap:12px; padding-bottom:16px; position:relative; }
#pipeline-content .pl-logitem:not(:last-child):before { content:''; position:absolute; left:6px; top:14px; bottom:0; width:2px; background:var(--pl-line); }
#pipeline-content .pl-logitem .ld { width:13px; height:13px; border-radius:50%; background:var(--pl-orange); flex-shrink:0; margin-top:2px; z-index:2; }
#pipeline-content .pl-logitem.muted .ld { background:var(--pl-line); }
#pipeline-content .pl-logitem .lc .lt { font-size:13px; font-weight:600; }
#pipeline-content .pl-logitem .lc .lm { font-size:11.5px; color:var(--pl-muted); margin-top:1px; }
#pipeline-content .pl-estado { display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600; color:var(--pl-green); background:var(--pl-green-soft); border:1px solid var(--pl-green-bd); padding:6px 12px; border-radius:8px; }
#pipeline-content .pl-estado .d { width:7px; height:7px; border-radius:50%; background:var(--pl-green); }

/* visão por setor */
#pipeline-content .pl-sp-board { display:flex; gap:14px; padding:20px 28px 44px; overflow-x:auto; align-items:flex-start; }
#pipeline-content .pl-sp-col { flex:0 0 264px; background:var(--pl-panel); border:1px solid var(--pl-line); border-radius:12px; overflow:hidden; }
#pipeline-content .pl-sp-h { padding:12px 14px; border-bottom:1px solid var(--pl-line); background:var(--pl-card); display:flex; align-items:center; justify-content:space-between; }
#pipeline-content .pl-sp-h h4 { font-size:13.5px; font-weight:700; margin:0; }
#pipeline-content .pl-sp-h .c { font-size:11px; color:var(--pl-muted); }
#pipeline-content .pl-sp-b { padding:11px; display:flex; flex-direction:column; gap:10px; min-height:50px; }

/* ── Campos no tema escuro ────────────────────────────────────────────────────
   O app.css pinta TODO input/select escuro com !important (regra global). Aqui a regra é
   reafirmada com a paleta do módulo, senão o campo nasce cinza-ardósia dentro de uma carta
   azul-escura — dois cinzas diferentes na mesma tela. E a setinha do select é um SVG embutido
   de traço escuro: no tema escuro ela some, então é redesenhada em traço claro. */
[data-theme="dark"] #pipeline-content .pl-input,
[data-theme="dark"] #pipeline-content .pl-search input,
[data-theme="dark"] #pipeline-content .pl-filtersel select,
[data-theme="dark"] #pipeline-content .pl-filtersel input[type="date"],
[data-theme="dark"] #pipeline-content .pl-fr-op select,
[data-theme="dark"] #pipeline-content .pl-fr-op input,
[data-theme="dark"] #pipeline-content select.pl-drop {
  background-color: var(--pl-card) !important;
  border-color: var(--pl-line) !important;
  color: var(--pl-ink) !important;
}
[data-theme="dark"] #pipeline-content select.pl-drop { background-color: var(--pl-orange-soft) !important; color: var(--pl-prod) !important; border-color: var(--pl-orange-bd) !important; }
[data-theme="dark"] #pipeline-content .pl-filtersel select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238D97A8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ══════════ Cadastro de usuários (aba ⚙️ Configurações) ══════════ */
/* Era uma tabela; com a 4ª e a 5ª permissão virou 10 colunas e saiu da tela — os botões
   Salvar/Inativar chegaram a empilhar deitados. Cartão por pessoa: os campos ficam numa grade
   que quebra sozinha e cada permissão é uma etiqueta clicável (o quadradinho continua lá, é
   ele que o salvarUsuario lê por id). */
#pipeline-content .pl-users { display:flex; flex-direction:column; gap:10px; }
#pipeline-content .pl-user { border:1px solid var(--pl-line); border-radius:10px; padding:12px 14px; background:var(--pl-card); }
#pipeline-content .pl-user.off { opacity:.55; }
#pipeline-content .pl-user-top { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
#pipeline-content .pl-user-top b { font-size:14px; }
#pipeline-content .pl-user-tag { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; padding:2px 8px; border-radius:20px; border:1px solid var(--pl-line); color:var(--pl-muted); }
#pipeline-content .pl-user-tag.prov { color:var(--pl-warn); border-color:var(--pl-warn); }
#pipeline-content .pl-user-campos { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; margin-bottom:11px; }
#pipeline-content .pl-user-campos > label { display:flex; flex-direction:column; gap:4px; min-width:0; font-size:10px; text-transform:uppercase; letter-spacing:.5px; color:var(--pl-muted); }
#pipeline-content .pl-user-campos input, #pipeline-content .pl-user-campos select { width:100%; box-sizing:border-box; }
#pipeline-content .pl-perm-grupo { font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--pl-muted); margin:0 0 6px; }
#pipeline-content .pl-user-perms { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:11px; }
#pipeline-content .pl-perm { display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600; cursor:pointer; user-select:none; padding:5px 11px 5px 8px; border-radius:99px; border:1px solid var(--pl-line); color:var(--pl-muted); background:var(--pl-panel); }
#pipeline-content .pl-perm input { width:15px; height:15px; margin:0; cursor:pointer; accent-color:var(--pl-orange); flex-shrink:0; }
#pipeline-content .pl-perm.on { color:var(--pl-orange); border-color:var(--pl-orange-bd); background:var(--pl-orange-soft); }
#pipeline-content .pl-user-acoes { display:flex; gap:8px; flex-wrap:wrap; }
#pipeline-content .pl-user-acoes .pl-actbtn { padding:7px 16px; font-size:12.5px; }
#pipeline-content .pl-actbtn.ghost { background:transparent; border-color:var(--pl-line); color:var(--pl-muted); }
#pipeline-content .pl-actbtn.ghost:hover { background:var(--pl-panel); color:var(--pl-ink); }

/* ══════════ Barra de módulos (abaixo das abas do App RR Inox) ══════════ */
/* Os módulos que tinham tile na home entraram aqui em 17/08/2026: cada botão só é desenhado
   para quem tem a marca no cadastro (⚙️ Configurações). Rola na horizontal como as abas —
   em tablet a barra não cabe inteira. */
#pipeline-content .pl-modulos { display:flex; align-items:center; gap:8px; padding:8px 28px; overflow-x:auto; -webkit-overflow-scrolling:touch; background:var(--pl-panel); border-bottom:1px solid var(--pl-line); }
#pipeline-content .pl-modulos::-webkit-scrollbar { height:0; }
#pipeline-content .pl-modulos .pl-mod-label { font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; font-weight:700; color:var(--pl-muted); white-space:nowrap; padding-right:2px; }
#pipeline-content .pl-mod { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; font-family:inherit; font-size:12.5px; font-weight:600; color:var(--pl-ink2); cursor:pointer; padding:6px 13px; border-radius:99px; border:1px solid var(--pl-line); background:var(--pl-card); transition:color .12s, border-color .12s, background .12s; }
#pipeline-content .pl-mod:hover { color:var(--pl-orange); border-color:var(--pl-orange-bd); background:var(--pl-orange-soft); }
#pipeline-content .pl-mod:active { transform:scale(.97); }

/* Campos de data da barra de filtros (Fluxo Principal e visão por etapa) — mesmo desenho do
   select ao lado, sem a seta, para os quatro filtros ficarem visualmente alinhados. */
#pipeline-content .pl-filtersel input[type="date"] { font-family:inherit; font-size:13px; font-weight:600; padding:9px 12px; border:1px solid var(--pl-line); border-radius:10px; background:var(--pl-card); color:var(--pl-ink); cursor:pointer; outline:none; min-width:140px; }
#pipeline-content .pl-filtersel input[type="date"]:focus { border-color:var(--pl-orange); }

/* ── Arrastar e soltar (kanban de etapas e auxiliares) ────────────────────────
   O card em arrasto fica translúcido; enquanto há um arrasto ativo, todas as
   colunas mostram contorno tracejado (alvos válidos) e a coluna sob o mouse
   acende em laranja. Coluna vazia ganha "Solte aqui" para não virar alvo cego. */
#pipeline-content .pl-dragging { opacity:.35; }
#pipeline-content .pl-sp-b { min-height:110px; }
#pipeline-content.pl-arrastando .pl-sp-col { outline:2px dashed var(--pl-line); outline-offset:-2px; }
#pipeline-content .pl-sp-col.pl-drop-over { outline:2px dashed var(--pl-orange); outline-offset:-2px; background:var(--pl-orange-soft); transition:background .1s; }
#pipeline-content .pl-sp-col.pl-drop-over .pl-sp-h { background:var(--pl-orange-soft); }
#pipeline-content.pl-arrastando .pl-sp-b:empty { position:relative; }
#pipeline-content.pl-arrastando .pl-sp-b:empty::after { content:'Solte aqui'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:12px; color:var(--pl-muted); font-style:italic; pointer-events:none; }
/* Durante o arrasto, os cards parados não podem "roubar" os eventos de enter/leave
   da coluna — é isso que fazia o destaque piscar card a card. */
#pipeline-content.pl-arrastando .pl-sp-b > * { pointer-events:none; }
#pipeline-content.pl-arrastando .pl-dragging { pointer-events:auto; }

/* ── Card do Pipeline de Frete ────────────────────────────────────────────────
   O destino (cidade/CEP) é a informação de cotação — vem em destaque. Itens em
   caixa própria com o peso somado; o formulário de opções em grade alinhada. */
#pipeline-content .pl-sp-board.frete .pl-sp-col { flex:0 0 330px; }
#pipeline-content .pl-fr-dest { display:flex; align-items:baseline; gap:8px; margin:1px 0 2px; flex-wrap:wrap; }
#pipeline-content .pl-fr-dest .cid { font-size:13px; font-weight:700; }
#pipeline-content .pl-fr-dest .cep { font-size:11px; color:var(--pl-muted); font-variant-numeric:tabular-nums; }
#pipeline-content .pl-fr-end { font-size:11px; color:var(--pl-muted); line-height:1.45; margin-bottom:8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Endereço que veio do CADASTRO do cliente (o orçamento foi feito sem cliente no SH): quem cota
   precisa saber que não é um endereço digitado no pedido. */
#pipeline-content .pl-fr-end .src { font-style:italic; opacity:.75; }
#pipeline-content .pl-fr-badges { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:8px; }
#pipeline-content .pl-fr-badge { font-size:9.5px; font-weight:700; letter-spacing:.3px; border-radius:5px; padding:2.5px 8px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#pipeline-content .pl-fr-badge.red { background:#FEF3C7; color:#B45309; }
#pipeline-content .pl-fr-badge.ent { background:#DBEAFE; color:#1D4ED8; }
#pipeline-content .pl-fr-itens { background:var(--pl-bg); border:1px solid var(--pl-line); border-radius:8px; padding:8px 10px; font-size:11.5px; margin-bottom:9px; }
#pipeline-content .pl-fr-itens .it { display:flex; justify-content:space-between; gap:8px; padding:1.5px 0; }
#pipeline-content .pl-fr-itens .it .d { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#pipeline-content .pl-fr-itens .it .q { white-space:nowrap; color:var(--pl-muted); font-variant-numeric:tabular-nums; }
#pipeline-content .pl-fr-itens .peso { display:flex; justify-content:space-between; border-top:1px dashed var(--pl-line); margin-top:5px; padding-top:5px; font-weight:700; }
#pipeline-content .pl-fr-itens .peso .obs { font-weight:400; color:var(--pl-muted); font-size:10.5px; }
#pipeline-content .pl-fr-secl { font-size:9.5px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:var(--pl-muted); margin:10px 0 3px; }
#pipeline-content .pl-fr-op { display:grid; grid-template-columns:16px minmax(0,1fr) 72px 62px; gap:5px; align-items:center; margin-top:5px; }
#pipeline-content .pl-fr-op .n { font-size:10px; font-weight:700; color:var(--pl-muted); text-align:center; }
#pipeline-content .pl-fr-op select, #pipeline-content .pl-fr-op input { font-family:inherit; font-size:11.5px; padding:6.5px 7px; border:1px solid var(--pl-line); border-radius:7px; background:var(--pl-card); color:var(--pl-ink); outline:none; min-width:0; width:100%; box-sizing:border-box; }
#pipeline-content .pl-fr-op select:focus, #pipeline-content .pl-fr-op input:focus { border-color:var(--pl-orange); }
#pipeline-content .pl-fr-send { width:100%; margin-top:9px; font-family:inherit; font-size:12px; font-weight:700; padding:8px; border:none; border-radius:8px; background:var(--pl-orange); color:var(--pl-btn-ink); cursor:pointer; }
#pipeline-content .pl-fr-send:hover { filter:brightness(1.07); }
#pipeline-content .pl-fr-mais { background:none; border:none; font-family:inherit; font-size:10.5px; color:var(--pl-muted); cursor:pointer; padding:4px 0 0; text-decoration:underline; }
#pipeline-content .pl-fr-sent { border-top:1px dashed var(--pl-line); margin-top:8px; padding-top:8px; display:flex; flex-direction:column; gap:5px; }
#pipeline-content .pl-fr-opt { font-size:11.5px; padding:6.5px 9px; border:1px solid var(--pl-line); border-radius:7px; background:var(--pl-bg); color:var(--pl-ink2); display:flex; justify-content:space-between; align-items:center; gap:8px; }
#pipeline-content .pl-fr-opt .t { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#pipeline-content .pl-fr-opt .v { white-space:nowrap; font-weight:700; }
#pipeline-content .pl-fr-opt.win { border-color:var(--pl-orange-bd); background:var(--pl-orange-soft); color:var(--pl-orange); }
#pipeline-content .pl-fr-aguarda { font-size:10.5px; color:var(--pl-muted); font-style:italic; }

/* Observação do envio pelos Correios: só o time do frete escreve; o vendedor lê nos Totais do
   card. Cores por variável do tema — o cartão do frete existe em claro e escuro. */
#pipeline-content .pl-fr-obs { border-top:1px dashed var(--pl-line); margin-top:8px; padding-top:8px; }
#pipeline-content .pl-fr-obs label { display:block; font-size:10.5px; font-weight:700; color:var(--pl-muted); margin-bottom:4px; }
#pipeline-content .pl-fr-obs textarea {
  width:100%; box-sizing:border-box; font-family:inherit; font-size:11.5px; line-height:1.4;
  padding:6.5px 8px; border:1px solid var(--pl-line); border-radius:7px;
  background:var(--pl-card); color:var(--pl-ink); outline:none; resize:vertical;
}
#pipeline-content .pl-fr-obs textarea:focus { border-color:var(--pl-orange); }
/* Quem não pode escrever (vendedor, financeiro) lê o mesmo texto, sem caixa. */
#pipeline-content .pl-fr-obs .ro { font-size:12px; line-height:1.45; color:var(--pl-ink2); white-space:pre-wrap; }

/* Motivo da recotação — primeira coisa que o time do frete lê no cartão. */
.pl-fr-motivo {
  background: #FEF3C7; color: #92400E; border-left: 3px solid #F59E0B;
  padding: 6px 9px; border-radius: 6px; font-size: 11.5px; font-weight: 600;
  margin-bottom: 8px; line-height: 1.35;
}

/* Cotação de item especial */
.pl-es-tipo {
  display: inline-block; background: #EDE9FE; color: #5B21B6; font-size: 10.5px; font-weight: 700;
  padding: 2px 8px; border-radius: 20px; margin-bottom: 5px;
}
.pl-es-desc { font-size: 12.5px; line-height: 1.35; margin-bottom: 4px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pl-es-anexos { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.pl-es-anexos a { font-size: 11px; color: var(--pl-accent, #C2410C); text-decoration: none; }
.pl-es-anexos a:hover { text-decoration: underline; }
.pl-es-obs { font-size: 11.5px; color: var(--pl-muted); background: rgba(0,0,0,.04);
  border-radius: 6px; padding: 5px 7px; margin-bottom: 6px; }
.pl-es-form { display: flex; flex-direction: column; gap: 5px; margin-top: 9px; }
.pl-es-resp { margin-top: 9px; background: #DCFCE7; color: #166534; border-radius: 7px;
  padding: 6px 9px; font-size: 12px; font-weight: 700; }
.pl-es-resp.nao { background: #FEE2E2; color: #991B1B; }
.pl-es-resp span { display: block; font-weight: 400; font-size: 11px; margin-top: 2px; }

/* ── Faturamento na OMIE ──
   Par fixo bg/texto (legível no claro e no escuro, como as demais pills do projeto). */
.pl-od-badges .b.fat { background: #DCFCE7; color: #15803D; border-color: #86EFAC; font-weight: 700; }
/* ── Cancelamentos ── */
.pl-od-badges .b.canc { background: #FEE2E2; color: #991B1B; font-weight: 700; }
.pl-cc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-bottom: 14px; }
.pl-cc-kpi {
  background: var(--pl-card); border: 1px solid var(--pl-line); border-radius: 10px; padding: 11px 14px;
}
.pl-cc-kpi.alerta { border-left: 4px solid var(--pl-warn); }
.pl-cc-kpi span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--pl-muted); font-weight: 700; }
.pl-cc-kpi b { font-size: 21px; font-weight: 800; letter-spacing: -.5px; }
.pl-cc-motivos { display: flex; gap: 6px; flex-wrap: wrap; }
.pl-cc-motivos span {
  background: var(--pl-line); border-radius: 20px; padding: 4px 11px; font-size: 12px; cursor: pointer;
}
.pl-cc-motivos span:hover { background: #FEE2E2; color: #991B1B; }
.pl-cc-tab { width: 100%; border-collapse: collapse; background: var(--pl-card);
  border: 1px solid var(--pl-line); border-radius: 10px; overflow: hidden; margin-top: 12px; font-size: 12.5px; }
.pl-cc-tab th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .3px;
  color: var(--pl-muted); padding: 10px 9px; border-bottom: 2px solid var(--pl-line); white-space: nowrap; }
.pl-cc-tab td { padding: 9px; border-bottom: 1px solid var(--pl-line); vertical-align: top; }
.pl-cc-tab .r { text-align: right; }
.pl-cc-tab .mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 700; }
.pl-cc-tab .sub { font-size: 11px; color: var(--pl-muted); margin-top: 2px; }
.pl-cc-ok { color: var(--pl-ok); font-weight: 700; font-size: 12px; }

/* ── Celular ──────────────────────────────────────────────────────────────────
   O App RR Inox roda em tablet e celular. Três coisas quebravam na tela estreita:
   (1) a topbar era uma linha só — abas + carimbo do SH + nome do usuário disputando 360px,
       e as abas ficavam com 40px de área útil. Agora a identificação sobe e as abas ficam
       numa faixa própria, rolando por inteiro;
   (2) as legendas de 10px (rótulo de campo, sub-etapa, idade do card) somem no celular;
   (3) o board é largo de propósito — quem resolve é a barra flutuante (HSCROLL), presa no
       rodapé da janela, que o index.js prende em .pl-board / .pl-sp-board. */
@media (max-width: 700px) {
  #pipeline-content .pl-grid2, #pipeline-content .pl-tots, #pipeline-content .pl-acts { grid-template-columns:1fr; }
  #pipeline-content .pl-head, #pipeline-content .pl-toolbar, #pipeline-content .pl-board, #pipeline-content .pl-sp-board, #pipeline-content .pl-wrap, #pipeline-content .pl-backbar { padding-left:14px; padding-right:14px; }

  #pipeline-content .pl-topbar { flex-wrap:wrap; padding:0 14px; gap:0; }
  #pipeline-content .pl-topbar > div:last-child { order:1; width:100%; justify-content:space-between; padding:7px 0 0; gap:10px; }
  #pipeline-content .pl-tabs { order:2; width:100%; margin:0 -14px; padding:0 14px; }
  #pipeline-content .pl-tab { padding:11px 12px 9px; font-size:13px; }
  #pipeline-content .pl-modulos { padding:7px 14px; }
  #pipeline-content .pl-context { padding:10px 14px; }
  #pipeline-content .pl-head { padding-top:16px; }
  #pipeline-content .pl-head h1 { font-size:22px; }
  #pipeline-content .pl-sec { padding:14px 15px; }
  #pipeline-content .pl-wrap { padding-bottom:80px; }   /* espaço para a barra flutuante */
  #pipeline-content .pl-board, #pipeline-content .pl-sp-board { padding-bottom:70px; }

  /* Legendas mínimas: 10px em papel é ok, em celular não se lê. */
  #pipeline-content .pl-field > label,
  #pipeline-content .pl-filtersel label,
  #pipeline-content .pl-fld .k,
  #pipeline-content .pl-sec th,
  #pipeline-content .pl-od-track .st .lb,
  #pipeline-content .pl-substage { font-size:11.5px; }
  #pipeline-content .pl-tag, #pipeline-content .pl-fr-badge { font-size:11px; }
  #pipeline-content .pl-age, #pipeline-content .pl-kcard .meta { font-size:11.5px; }

  /* Barras horizontais sem barrinha nativa (o dedo rola direto). */
  #pipeline-content .pl-tabs::-webkit-scrollbar { height:0; }
  #pipeline-content .pl-tabs { scrollbar-width:none; -webkit-overflow-scrolling:touch; }
}

/* Telefone estreito: a coluna do quadro ainda mostra uma fatia da seguinte (é o que avisa
   que há mais para o lado), mas sem espremer o card. */
@media (max-width: 400px) {
  #pipeline-content .pl-col { flex:0 0 264px; }
  #pipeline-content .pl-sp-col { flex:0 0 250px; }
  #pipeline-content .pl-modulos { padding-left:12px; padding-right:12px; }
}

/* Devoluções: o quadro reusa .pl-sp-*; aqui só o que é próprio dele. A dica embaixo do título
   diz o que se espera da etapa — o processo é novo e ninguém decorou a ordem ainda. */
#pipeline-content .pl-dv-dica { padding:7px 14px 9px; font-size:11px; line-height:1.4; color:var(--pl-muted); border-bottom:1px solid var(--pl-line); background:var(--pl-card); }
/* Recusada na conferência: a mercadoria continua fisicamente no galpão esperando o cliente
   retirar, então o card precisa gritar — é o que vira cobrança antes do descarte. */
#pipeline-content .pl-kcard.recusada { border-color:var(--pl-danger-bd); background:var(--pl-danger-bg); }
#pipeline-content .pl-dv-alerta { font-size:11.5px; font-weight:700; color:var(--pl-danger-ink); margin:4px 0 2px; }
#pipeline-content .pl-dv-alerta .sub { font-weight:400; font-size:11px; color:var(--pl-muted); }

/* Com a aba Devoluções a barra passou a ter 10 abas e estourava a largura em notebook comum
   (1280-1440px): a decima ficava rolada para fora, sem scrollbar visivel — parecia que nao
   existia. Abaixo de 1500px as abas apertam o passo para caberem todas na tela. */
@media (max-width: 1500px) {
  #pipeline-content .pl-tab { padding: 12px 9px 9px; font-size: 12.5px; gap: 5px; }
  #pipeline-content .pl-topbar { padding: 0 14px; gap: 8px; }
  /* Aba escondida atras de scroll invisivel nunca mais: nao coube, QUEBRA LINHA. A barra fica
     um pouco mais alta e feia — e todo mundo VE todas as abas, que e o que importa. */
  #pipeline-content .pl-tabs { flex-wrap: wrap; overflow-x: visible; }
}

/* Detalhe da devolução: grid de campos com rótulo em cima, chips de situação, fotos em
   miniatura com lixeira. O modal era uma parede de texto corrido — ninguém achava nada. */
#pipeline-content .pl-dvd-chip, .pl-dvd-chip { font-size:11px; font-weight:700; padding:3px 9px; border-radius:20px; background:var(--pl-orange-soft); color:var(--pl-orange); border:1px solid var(--pl-orange-bd); }
.pl-dvd-chip.warn { background:var(--pl-warn-bg); color:var(--pl-warn-ink); border-color:var(--pl-warn-ink); }
.pl-dvd-chip.danger { background:var(--pl-danger-bg); color:var(--pl-danger-ink); border-color:var(--pl-danger-bd); }
.pl-dvd-chip.ok { background:#e6f6ec; color:#177245; border-color:#9ed8b5; }
.pl-dvd-aviso { background:var(--pl-warn-bg); color:var(--pl-warn-ink); border-radius:8px; padding:9px 11px; font-size:12.5px; margin-bottom:10px; line-height:1.5; }
.pl-dvd-aviso.danger { background:var(--pl-danger-bg); color:var(--pl-danger-ink); }
.pl-dvd-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px 14px; margin:4px 0 2px; }
.pl-dvd-campo { font-size:13px; line-height:1.45; }
.pl-dvd-campo.span2 { grid-column:1 / -1; }
.pl-dvd-campo b { display:block; font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.02em; color:var(--gray-500,#6b7280); margin-bottom:1px; }
.pl-dvd-obs { font-size:12.5px; margin:6px 0; line-height:1.5; }
.pl-dvd-sec { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--gray-500,#6b7280); margin:12px 0 6px; }
.pl-dvd-thumbs { display:flex; flex-wrap:wrap; gap:8px; }
.pl-dvd-thumb { position:relative; display:block; width:72px; height:72px; border:1px solid var(--gray-200,#e5e7eb); border-radius:10px; overflow:hidden; }
.pl-dvd-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.pl-dvd-thumb.doc { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:6px; text-decoration:none; color:inherit; }
.pl-dvd-thumb.doc .ext { font-size:20px; }
.pl-dvd-thumb.doc .nome { font-size:9.5px; line-height:1.2; text-align:center; overflow:hidden; max-height:24px; word-break:break-all; }
.pl-dvd-del { position:absolute; top:2px; right:2px; width:18px; height:18px; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.55); color:#fff; border-radius:50%; font-size:11px; cursor:pointer; }
.pl-dvd-del:hover { background:var(--pl-danger-ink,#b42318); }
.pl-dvd-rodape { font-size:11.5px; color:var(--pl-muted,#6b7280); margin-top:10px; line-height:1.5; }

/* Chips curtos nos cards de devolução: aviso longo vive no title/detalhe, não no card. */
.pl-dv-chips { display:flex; flex-wrap:wrap; gap:4px; margin:5px 0 2px; }
/* DEV-3: foto da conferência em destaque no card da tratativa e maior na ficha */
#pipeline-content .pl-dv-foto { width:100%; max-height:170px; object-fit:cover; border-radius:8px; margin:6px 0 2px; display:block; border:1px solid var(--pl-line); }
.pl-dvd-thumbs.grande .pl-dvd-thumb { width:200px; height:150px; }
.pl-dvd-chip.mini { font-size:10px; padding:2px 7px; font-weight:600; }
#pipeline-content .pl-kcard .cli { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Hierarquia no card de devolução: chip é AVISO (fundo suave, sem borda — não confundir com
   botão), botão principal é laranja cheio, e o valor antigo fica miúdo sob o valor vigente. */
.pl-dvd-chip.mini { border:none; font-weight:600; }
#pipeline-content .pl-kcard .pl-actbtn.on { background:var(--pl-orange); color:#fff; border-color:var(--pl-orange); font-weight:700; }
#pipeline-content .pl-kcard .val small { display:block; font-size:10px; font-weight:400; color:var(--pl-muted); text-decoration:line-through; text-align:right; line-height:1.3; }

/* Barra de ações do card de devolução: largura total, separada por um fio, botões da mesma
   altura — a principal ocupa mais espaço. Botão solto boiando à direita desalinhava tudo. */
/* Grade de colunas IGUAIS: todo botao com a mesma largura e altura, texto sem quebrar —
   o principal se destaca pela cor, nao pelo tamanho (1,6x + quebra de linha ficava torto). */
#pipeline-content .pl-kcard .pl-dv-acoes { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:6px; margin-top:9px; padding-top:8px; border-top:1px solid var(--pl-line); }
#pipeline-content .pl-kcard .pl-dv-acoes .pl-actbtn { text-align:center; justify-content:center; padding:7px 6px; font-size:11.5px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#pipeline-content .pl-kcard .pl-dv-acoes .sub { text-align:center; align-self:center; }

/* Itens no detalhe da devolução: valor nunca quebra linha (R$ numa linha e 330,00 na outra
   era o que mais enfeava o modal) e a célula respira um pouco mais. */
.pl-dvd-itens th, .pl-dvd-itens td { padding:7px 9px; }
.pl-dvd-itens th.r, .pl-dvd-itens td.r { white-space:nowrap; }
.pl-dvd-grid { margin-bottom:4px; }

/* Detalhe premium: cabeçalho com título forte e subtítulo, dados num painel de fundo suave
   com rótulos finos espaçados, tabela com cabeçalho discreto e total em faixa. */
.pl-dvd-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:12px; }
.pl-dvd-tit { font-size:17px; font-weight:800; letter-spacing:-.01em; line-height:1.25; }
.pl-dvd-subtit { font-size:11.5px; color:var(--pl-muted,#6b7280); margin-top:3px; }
.pl-dvd-chips-h { display:flex; flex-direction:column; gap:4px; align-items:flex-end; flex-shrink:0; }
.pl-dvd-panel { background:var(--gray-50,#fafafa); border:1px solid var(--gray-200,#e5e7eb); border-radius:12px; padding:12px 14px; }
.pl-dvd-panel .pl-dvd-grid { margin:0; }
.pl-dvd-campo { font-size:13px; font-weight:600; }
.pl-dvd-campo b { font-size:9.5px; letter-spacing:.07em; }
.pl-dvd-itens thead th { background:none; font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--pl-muted,#6b7280); border-bottom:2px solid var(--gray-200,#e5e7eb); }
.pl-dvd-itens tr.total td { font-weight:800; background:var(--gray-50,#fafafa); border-top:2px solid var(--gray-200,#e5e7eb); font-size:12px; }
.pl-dvd-itens tr.total.destaque td { color:var(--pl-orange,#c2410c); }

/* Linha do tempo do detalhe: bolinha + fio vertical, evento em cima, autor/hora embaixo.
   Recusa e cancelamento em vermelho; devolvida para ajuste em âmbar. */
.pl-dvd-tl { padding:2px 0 0 2px; }
.pl-dvd-tl .ev { position:relative; padding:0 0 13px 22px; }
.pl-dvd-tl .ev::before { content:; position:absolute; left:5px; top:8px; bottom:-4px; width:2px; background:var(--gray-200,#e5e7eb); }
.pl-dvd-tl .ev:last-child::before { display:none; }
.pl-dvd-tl .ev::after { content:; position:absolute; left:0; top:4px; width:12px; height:12px; border-radius:50%; background:var(--pl-orange,#c2410c); box-shadow:0 0 0 2px var(--gray-100,#f3f4f6); }
.pl-dvd-tl .ev.danger::after { background:var(--pl-danger-ink,#b42318); }
.pl-dvd-tl .ev.warn::after { background:var(--pl-warn-ink,#b45309); }
.pl-dvd-tl .ev .t { font-size:12.5px; font-weight:700; line-height:1.35; }
.pl-dvd-tl .ev .m { font-size:11px; color:var(--pl-muted,#6b7280); line-height:1.45; }


/* ── Gerar OP (17/09/2026) ─────────────────────────────────────────────────────
   Era uma tabela de 6 colunas dentro de um modal estreito: a coluna do item ficava com ~90px e
   o texto de apoio (código, tipo, estoque, prazo) descia numa fita vertical de uma palavra por
   linha, com o botão da estrutura espremido no meio. Virou UM CARTÃO POR ITEM: a descrição ocupa
   a largura toda, o apoio vira duas linhas legíveis e os quatro campos ficam numa grade rotulada
   que quebra sozinha quando a tela é estreita. Os ids dos campos NÃO mudaram — gerarOPs() e
   opLinhaMudou() continuam lendo os mesmos. */
#pipeline-credito-modal .pl-op-lista { display:flex; flex-direction:column; gap:10px; max-height:58vh; overflow:auto; padding:2px; }
#pipeline-credito-modal .pl-op-card { border:1px solid var(--pl-line); border-radius:11px; padding:12px 13px;
  background:var(--pl-card); display:flex; flex-direction:column; gap:9px; }
#pipeline-credito-modal .pl-op-card.feita { opacity:.6; background:var(--pl-panel); }
#pipeline-credito-modal .pl-op-topo { display:flex; align-items:center; gap:10px; }
#pipeline-credito-modal .pl-op-topo input[type=checkbox] { width:18px; height:18px; flex-shrink:0; cursor:pointer; accent-color:var(--pl-ink); }
#pipeline-credito-modal .pl-op-desc { flex:1; min-width:0; font-family:inherit; font-size:13.5px; font-weight:600;
  padding:8px 10px; border:1.5px solid var(--pl-line); border-radius:8px; background:var(--pl-card); color:var(--pl-ink); }
#pipeline-credito-modal .pl-op-desc:focus { outline:none; border-color:var(--pl-ink2); }
#pipeline-credito-modal .pl-op-meta { font-size:11.5px; color:var(--pl-muted); line-height:1.6; padding-left:28px; }
#pipeline-credito-modal .pl-op-meta b { color:var(--pl-ink); }
#pipeline-credito-modal .pl-op-meta .alerta { color:var(--pl-warn); font-weight:700; }
#pipeline-credito-modal .pl-op-meta .feito { color:var(--pl-green); font-weight:700; }
#pipeline-credito-modal .pl-op-est { padding-left:28px; font-size:11.5px; line-height:1.7; }
#pipeline-credito-modal .pl-op-campos { display:grid; grid-template-columns:repeat(auto-fit, minmax(148px, 1fr));
  gap:10px; padding-left:28px; }
#pipeline-credito-modal .pl-op-campos label { display:flex; flex-direction:column; gap:4px;
  font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--pl-muted); }
#pipeline-credito-modal .pl-op-campos input, #pipeline-credito-modal .pl-op-campos select {
  font-family:inherit; font-size:13px; padding:7px 9px; border:1.5px solid var(--pl-line); border-radius:8px;
  background:var(--pl-card); color:var(--pl-ink); width:100%; box-sizing:border-box; }
#pipeline-credito-modal .pl-op-campos input:focus, #pipeline-credito-modal .pl-op-campos select:focus {
  outline:none; border-color:var(--pl-ink2); }
#pipeline-credito-modal .pl-op-campos input:disabled, #pipeline-credito-modal .pl-op-campos select:disabled {
  background:var(--pl-panel); color:var(--pl-muted); }
@media (max-width:520px) {
  #pipeline-credito-modal .pl-op-meta, #pipeline-credito-modal .pl-op-est,
  #pipeline-credito-modal .pl-op-campos { padding-left:0; }
}