/* PILAR OS 2.0 — design system novo (05/10/2026, estudo aprovado pelo André).
   Mesma marca (navy + dourado do logo), outra postura: ferramenta densa no
   modo gestão, botões gigantes no modo bancada (apontamento), chips de estado
   com linguagem única e tema escuro por tokens (html[data-tema="escuro"]).
   Mantém TODO o vocabulário de classes do app.js — rollback = voltar o link
   para app.css no app.html/login.html. */
@import url("/static/fonts/noto-emoji.css");
@import url("/static/fonts/ui-fonts2.css");  /* Archivo + Instrument Sans + Spline Sans Mono */

:root{
  /* nomes antigos continuam valendo (o app.js usa inline) */
  --cor-primaria:#0B1A2F;
  --cor-primaria-2:#14294A;
  --cor-destaque:#D89C4B;
  --dourado-escuro:#9A6D2C;
  --cor-fundo:#EEF1F5;
  --cor-card:#FFFFFF;
  --cor-texto:#16233A;
  --texto-suave:#5D6A7E;
  --borda:#D9DEE7;
  --cor-ok:#2E7D4F; --cor-alerta:#9A5B06; --cor-erro:#B3362A;
  --ok-bg:#E2F2E8; --alerta-bg:#FDEED3; --erro-bg:#FBE4E1; --info:#2B5F8F; --info-bg:#E3EDF6;
  --raio:10px;
  --fonte-titulo:"Archivo","Montserrat","Liberation Sans",Arial,"Noto Emoji",sans-serif;
  --fonte-corpo:"Instrument Sans","Inter","Liberation Sans",Arial,"Noto Emoji",sans-serif;
  --fonte-mono:"Spline Sans Mono",ui-monospace,"Liberation Mono",monospace;
}
html[data-tema="escuro"]{
  --cor-primaria:#0A1626;
  --cor-primaria-2:#0F2240;
  --dourado-escuro:#DCAB64;
  --cor-fundo:#0D1420;
  --cor-card:#141D2D;
  --cor-texto:#E7EBF2;
  --texto-suave:#9AA6B8;
  --borda:#263349;
  --cor-alerta:#E2A248; --cor-erro:#E2766A;
  --ok-bg:#13301F; --alerta-bg:#33230A; --erro-bg:#391513; --info:#7EB3DD; --info-bg:#132539;
}

*{box-sizing:border-box}
html{height:100%;background:var(--cor-fundo)}
html.pg-login{background:var(--cor-primaria)}
body{margin:0;font-family:var(--fonte-corpo);background:var(--cor-fundo);color:var(--cor-texto);
  font-size:14px;line-height:1.55}
button,input,select,textarea{font-family:inherit;color:inherit}
h1,h2,h3{font-family:var(--fonte-titulo);letter-spacing:-.01em}
h1{font-size:20px;margin:0 0 12px;font-weight:700}
h2{font-size:16px;margin:16px 0 8px;font-weight:700}
h3{font-size:14.5px;margin:0 0 10px;font-weight:600}
small{font-weight:400}
a{color:var(--dourado-escuro)}
:is(button,a,input,select,textarea):focus-visible{outline:2px solid var(--cor-destaque);outline-offset:2px}
[hidden]{display:none !important}

/* ---------- topo (claro, com busca global) + menu (navy) ---------- */
.topo{display:flex;align-items:center;gap:12px;background:var(--cor-card);color:var(--cor-texto);
  border-bottom:1px solid var(--borda);padding:8px 16px;position:sticky;top:0;z-index:20;min-height:52px}
.topo-dir{margin-left:auto;display:flex;align-items:center;gap:10px}
#eu-nome{font-size:12.5px;color:var(--texto-suave)}
.btn-menu{font-size:21px;background:none;border:none;color:var(--cor-texto);cursor:pointer;display:none;padding:4px 8px}
.busca-op{display:flex;align-items:center;gap:8px;background:var(--cor-fundo);border:1px solid var(--borda);
  border-radius:9px;padding:0 10px;width:min(340px,42vw)}
.busca-op input{flex:1;border:none;background:none;padding:8px 2px;font-size:13px;min-width:0}
.busca-op input:focus{outline:none}
.busca-op kbd{font:600 10px var(--fonte-mono);border:1px solid var(--borda);border-radius:5px;
  padding:1px 6px;background:var(--cor-card);color:var(--texto-suave)}
.btn-tema{background:none;border:1px solid var(--borda);border-radius:8px;padding:5px 10px;
  font-size:14px;cursor:pointer;color:var(--cor-texto)}
.corpo{display:flex;min-height:calc(100vh - 53px);min-height:calc(100svh - 53px)}
.menu{width:216px;background:var(--cor-primaria);padding:12px 8px 20px;flex-shrink:0}
.menu a{display:block;color:#C6D2E2;text-decoration:none;padding:7px 12px;font-size:13px;
  font-weight:500;cursor:pointer;border-radius:8px;margin:1px 0}
.menu a:hover{background:var(--cor-primaria-2);color:#fff}
.menu a.ativo{background:var(--cor-primaria-2);color:#fff;font-weight:600;
  box-shadow:inset 3px 0 0 var(--cor-destaque)}
.menu-bloco{font-size:9.5px;font-weight:600;letter-spacing:2px;text-transform:uppercase;
  color:#5E7191;opacity:1;padding:14px 12px 4px;user-select:none}
.menu-bloco:first-child{padding-top:4px}
.menu .marca-menu{display:flex;align-items:center;gap:9px;padding:4px 10px 14px;color:#fff}
.menu .marca-menu img{height:30px;width:auto}
.menu .marca-menu b{font-family:var(--fonte-titulo);font-weight:800;font-size:15px;letter-spacing:.5px;line-height:1}
.menu .marca-menu small{display:block;color:var(--cor-destaque);font-size:8.5px;letter-spacing:3px}
.conteudo{flex:1;padding:16px 18px 40px;max-width:1500px;min-width:0}
@media(max-width:900px){
  .btn-menu{display:block}
  .busca-op{width:100%}
  .menu{position:fixed;left:-260px;top:53px;bottom:0;z-index:30;transition:left .2s;overflow:auto}
  .menu.aberto{left:0;box-shadow:4px 0 20px rgba(0,0,0,.4)}
  .conteudo{padding:10px}
}
@media (prefers-reduced-motion: reduce){ .menu{transition:none} }

/* ---------- logo / login ---------- */
.login-logo{display:flex;align-items:center;gap:10px;color:#fff}
.login-logo b{font-family:var(--fonte-titulo);font-weight:800;font-size:19px;letter-spacing:.5px;display:block;line-height:1}
.login-logo small{color:var(--cor-destaque);font-size:9px;letter-spacing:3px}
.login-logo.mini b{font-size:16px}
.logo-img{height:32px;width:auto;display:block}
.logo-cheia{display:block;width:min(260px,76%);margin:0 auto 10px}
.tela-login{display:flex;align-items:center;justify-content:center;min-height:100vh;min-height:100svh;margin:0;
  background:radial-gradient(900px 420px at 80% -10%, rgba(216,156,75,.16), transparent 60%), #0B1A2F}
.login-card{position:relative;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.13);
  backdrop-filter:blur(4px);border-radius:16px;padding:32px 34px 30px 44px;width:min(400px,92vw)}
.pilar-haste{position:absolute;left:20px;top:44px;bottom:44px;width:3px;background:var(--cor-destaque)}
.pilar-haste::before,.pilar-haste::after{content:"";position:absolute;left:-4px;width:11px;height:3px;background:var(--cor-destaque)}
.pilar-haste::before{top:-5px} .pilar-haste::after{bottom:-5px}
.login-card h1{color:#fff;font-size:17px;margin:16px 0 14px;font-weight:700}
.login-card label{display:block;color:#8FA0BA;margin-bottom:12px;font-size:10.5px;font-weight:600;
  letter-spacing:2px;text-transform:uppercase}
.login-card input{width:100%;margin-top:6px;padding:12px 13px;border-radius:9px;font-size:15px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.17);color:#fff;
  font-weight:500;letter-spacing:normal;text-transform:none}
.login-card input:focus{outline:2px solid var(--cor-destaque);outline-offset:0;border-color:transparent}
.login-erro{background:#391513;color:#F2A69D;padding:10px 12px;border-radius:8px;margin-bottom:12px;font-size:13px;
  font-weight:500;letter-spacing:normal;text-transform:none}
.login-card .btn{width:100%;margin-top:6px}

/* ---------- botões ---------- */
.btn{background:var(--cor-destaque);color:#271A07;border:none;border-radius:8px;
  padding:9px 16px;font-size:13px;font-weight:600;cursor:pointer;min-height:38px;font-family:var(--fonte-corpo)}
.btn:hover{filter:brightness(1.06)}
.btn:disabled{opacity:.5;cursor:default}
.btn-grande{width:100%;min-height:58px;font-size:16px;font-family:var(--fonte-titulo);font-weight:700;border-radius:12px}
.btn-sec{background:transparent;border:1px solid var(--borda);color:var(--cor-texto)}
.btn-sec:hover{filter:none;background:var(--cor-fundo)}
.btn-mini{min-height:30px;padding:4px 11px;font-size:12px;font-weight:600;border-radius:7px}
.btn-perigo{background:var(--erro-bg);color:var(--cor-erro);border:1px solid transparent}
.btn-ok{background:var(--cor-ok);color:#fff}
.barra{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.barra input,.barra select{padding:8px 10px;border-radius:8px;border:1px solid var(--borda);
  font-size:13px;background:var(--cor-card);color:var(--cor-texto)}

/* ---------- cards/tabelas ---------- */
.card{background:var(--cor-card);border:1px solid var(--borda);border-radius:var(--raio);
  padding:14px 16px;margin-bottom:12px;box-shadow:none}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  border-bottom:1px solid var(--borda);padding:7px 6px;color:var(--texto-suave)}
td{padding:8px 6px;border-bottom:1px solid var(--borda);vertical-align:middle}
tr:last-child td{border-bottom:0}
tr:hover td{background:color-mix(in srgb, var(--cor-destaque) 5%, transparent)}
.vazio{color:var(--texto-suave);padding:26px;text-align:center;font-size:13.5px}
.num,.tb{font-variant-numeric:tabular-nums}

/* ---------- chips de estado (linguagem única: ponto + verbo) ---------- */
.pill{display:inline-flex;align-items:center;gap:5px;border-radius:6px;padding:2px 8px;
  font-size:11px;font-weight:600;white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
.pill.on,.pill.done{background:var(--ok-bg);color:var(--cor-ok)}
.pill.off{background:var(--cor-fundo);color:var(--texto-suave);border:1px solid var(--borda)}
.pill.adm{background:var(--cor-primaria);color:var(--cor-destaque)}
.pill.aguarda{background:var(--cor-fundo);color:var(--texto-suave);border:1px solid var(--borda)}
.pill.anda{background:var(--info-bg);color:var(--info)}
.pill.pausa{background:var(--alerta-bg);color:var(--cor-alerta)}
.pill.terc{background:var(--info-bg);color:var(--info)}
.pill.venc{background:var(--erro-bg);color:var(--cor-erro)}
.pill.aceito{background:var(--alerta-bg);color:var(--dourado-escuro)}

/* ---------- kanban ---------- */
.kanban{display:flex;gap:12px;overflow-x:auto;padding-bottom:16px;align-items:flex-start}
.kb-col{background:transparent;border-radius:var(--raio);min-width:238px;width:238px;flex-shrink:0;padding:0 2px}
.kb-col h3{font-size:13px;display:flex;justify-content:space-between;gap:8px;color:var(--cor-texto);
  margin:2px 4px 8px;font-weight:600}
.kb-col h3 small{color:var(--texto-suave);font-weight:500;font-size:11px}
.kb-card{background:var(--cor-card);border:1px solid var(--borda);border-radius:10px;padding:9px 11px;
  margin-bottom:8px;cursor:pointer;border-left:3px solid transparent;box-shadow:none;font-size:12.5px}
.kb-card:hover{border-color:var(--cor-destaque)}
.kb-card b{font-size:12.5px;font-family:var(--fonte-mono);font-weight:600;color:var(--dourado-escuro)}
.kb-card .linha2{color:var(--texto-suave);margin:1px 0;font-size:12px}
.prazo-ok{color:var(--cor-ok);font-weight:600}.prazo-perto{color:var(--cor-alerta);font-weight:600}
.prazo-estourou{color:var(--cor-erro);font-weight:700}
.tv .menu,.tv .topo{display:none}

/* ---------- apontamento = MODO BANCADA (touch, uma ação por vez) ---------- */
.apont-hero{background:var(--cor-primaria);color:#fff;border-radius:14px;padding:18px 20px;margin-bottom:12px;
  position:relative;overflow:hidden}
.apont-hero::after{content:"";position:absolute;right:-30px;top:-30px;width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle,rgba(216,156,75,.22),transparent 70%);pointer-events:none}
.apont-hero h1{color:#fff;font-size:21px;font-weight:800}
.apont-hero .grade{color:var(--cor-destaque);font-size:15px;margin-top:6px;font-family:var(--fonte-mono)}
.apont-acoes{display:flex;flex-direction:column;gap:10px;max-width:520px}
.apont-acoes .btn-grande{text-align:center}
.timeline{list-style:none;padding:0;margin:12px 0}
.timeline li{padding:9px 14px;border-left:3px solid var(--borda);margin-bottom:3px;background:var(--cor-card);
  border-radius:0 9px 9px 0;font-size:13px;border-top:1px solid var(--borda);border-right:1px solid var(--borda);
  border-bottom:1px solid var(--borda)}
.timeline li.done{border-left-color:var(--cor-ok)}
.timeline li.atual{border-left-color:var(--cor-destaque);font-weight:600;
  background:color-mix(in srgb, var(--cor-destaque) 9%, var(--cor-card))}

/* ---------- produção diária ---------- */
.pd-colab{display:flex;align-items:center;gap:10px;padding:12px;border-bottom:1px solid var(--borda);
  cursor:pointer;font-size:15px}
.pd-colab .check{margin-left:auto;font-size:20px}
.pd-lanc input[type=number]{width:104px;padding:12px;font-size:20px;text-align:center;
  border:1.5px solid var(--borda);border-radius:10px;background:var(--cor-card);color:var(--cor-texto);
  font-family:var(--fonte-mono)}

/* ---------- modal/toast ---------- */
.modal-fundo{position:fixed;inset:0;background:rgba(6,12,24,.6);z-index:50;display:flex;
  align-items:center;justify-content:center;padding:14px}
.modal{background:var(--cor-card);border:1px solid var(--borda);border-radius:14px;padding:20px;
  width:min(680px,96vw);max-height:92vh;overflow:auto;box-shadow:0 18px 44px -16px rgba(5,12,24,.5)}
.modal h3{font-size:15px;font-weight:700}
.modal label{display:block;margin-bottom:10px;font-size:13px}
.modal input,.modal select,.modal textarea{width:100%;margin-top:4px;padding:9px 11px;font-size:13.5px;
  border:1px solid var(--borda);border-radius:8px;background:var(--cor-card);color:var(--cor-texto)}
.acoes{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--cor-primaria);color:#fff;
  padding:11px 20px;border-radius:10px;z-index:99;font-size:13.5px;box-shadow:0 8px 24px rgba(0,0,0,.4);
  max-width:min(560px,92vw)}
.toast.erro{background:var(--cor-erro)}

/* ---------- dash/kpis ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-bottom:12px}
.kpi{background:var(--cor-card);border:1px solid var(--borda);border-radius:var(--raio);
  padding:12px 14px;text-align:left}
.kpi b{font-size:26px;color:var(--cor-texto);display:block;font-family:var(--fonte-titulo);
  font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kpi span{color:var(--texto-suave);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.kpi.ruim b{color:var(--cor-erro)}

/* ---------- grade / permissões ---------- */
.grade-linha{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.grade-linha label{text-align:center;font-size:11px;color:var(--texto-suave);font-weight:600}
.grade-linha input{width:58px;padding:8px 4px;text-align:center;font-size:14px;border:1px solid var(--borda);
  border-radius:8px;background:var(--cor-card);color:var(--cor-texto);font-family:var(--fonte-mono)}
.perm-grupo{border:1px solid var(--borda);border-radius:10px;padding:10px;margin-bottom:10px}
.perm-grupo b{display:block;margin-bottom:6px}
.perm-grupo label{display:inline-flex;align-items:center;gap:4px;margin:3px 12px 3px 0;font-size:12.5px}
.perm-grupo input{width:auto}

/* ---------- orçamento ---------- */
.badge-menu{display:inline-block;background:var(--cor-destaque);color:#271A07;border-radius:10px;
  padding:0 7px;font-size:11px;font-weight:700;margin-left:6px;vertical-align:2px}
.orc-bloco{background:var(--cor-card);border:1px solid var(--borda);border-radius:var(--raio);
  padding:14px 16px;margin-bottom:12px;box-shadow:none}
.orc-bloco>h2{margin-top:0;border-bottom:2px solid var(--cor-destaque);padding-bottom:6px;font-size:14.5px}
.orc-item{border:1px solid var(--borda);border-radius:10px;padding:12px;margin-bottom:12px}
.orc-item .subtotal{margin-left:auto;font-family:var(--fonte-mono);font-weight:600;color:var(--cor-texto)}
.orc-totais{display:flex;justify-content:flex-end}
.orc-totais .caixa{background:var(--cor-primaria);color:#fff;border-radius:var(--raio);padding:12px 18px;min-width:260px}
.orc-totais .linha{display:flex;justify-content:space-between;gap:20px;color:#B8C2D2;font-size:13px;padding:2px 0}
.orc-totais .linha.total{border-top:1px solid rgba(255,255,255,.2);margin-top:6px;padding-top:8px;color:#fff;
  font-family:var(--fonte-titulo);font-weight:700;font-size:18px}
.orc-totais .linha.total span:last-child{color:var(--cor-destaque)}
.orc-rodape-fixo{position:sticky;bottom:0;background:var(--cor-fundo);padding:10px 0;display:flex;gap:8px;
  flex-wrap:wrap;align-items:center;border-top:1px solid var(--borda);z-index:10}
.cliente-result{display:block;width:100%;text-align:left;background:var(--cor-card);border:1px solid var(--borda);
  border-radius:8px;padding:9px 11px;margin-top:6px;cursor:pointer;font-size:13.5px;color:var(--cor-texto)}
.cliente-result:hover{background:var(--cor-fundo)}
.orc-dup{display:flex;align-items:center;gap:10px;border-top:1px solid var(--borda);padding:8px 0;font-size:13px}
.mock-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:10px}
.mock-lista figure{margin:0;border:1px solid var(--borda);border-radius:8px;overflow:hidden;
  background:var(--cor-card);position:relative}
.mock-lista img{width:100%;height:110px;object-fit:contain;background:#E9EDF2;display:block}
.mock-lista figcaption{padding:4px 8px;font-size:12px;color:var(--texto-suave)}
.mock-lista figcaption b{display:block;color:var(--cor-texto)}
.mock-lista .mock-acoes{position:absolute;top:4px;right:4px;display:flex;gap:4px}
.mock-lista .mock-acoes button{border:none;border-radius:6px;background:rgba(11,26,47,.78);color:#fff;
  cursor:pointer;font-size:13px;padding:2px 7px}
.solta-aqui{border:1.5px dashed var(--borda);border-radius:10px;padding:16px;text-align:center;
  color:var(--texto-suave);cursor:pointer}
.solta-aqui.arrastando{border-color:var(--cor-destaque);background:var(--alerta-bg)}
.sim-tecido{margin-top:10px;text-align:right;color:var(--texto-suave);font-size:13px}
.sim-tecido b{color:var(--cor-texto)}
.sem-def{display:inline-flex;align-items:center;gap:8px;background:var(--alerta-bg);
  border:1px dashed var(--cor-destaque);border-radius:8px;padding:6px 10px;margin:6px 8px 0 0;
  font-size:13px;color:var(--dourado-escuro)}
.sem-def small{color:var(--texto-suave)}
.sem-def input{width:64px;padding:7px 4px;text-align:center;border:1px solid var(--borda);border-radius:8px;
  font-size:13.5px;background:var(--cor-card);color:var(--cor-texto)}
@media print{.menu,.topo,.barra{display:none}}

/* ---------- gestão de orçamentos / agenda ---------- */
.cards-resumo{display:flex;gap:10px;flex-wrap:wrap}
.cardzinho{background:var(--cor-card);border:1px solid var(--borda);border-radius:10px;padding:10px 14px;
  display:flex;flex-direction:column;min-width:146px;box-shadow:none}
.cardzinho b{font-size:19px;color:var(--cor-texto);font-family:var(--fonte-titulo);font-variant-numeric:tabular-nums}
.cardzinho span{font-size:10.5px;color:var(--texto-suave);font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.dica{font-size:11.5px;color:var(--texto-suave)}
.agenda-item{display:flex;gap:10px;align-items:baseline;padding:7px 4px;border-bottom:1px dashed var(--borda);cursor:pointer}
.agenda-item:hover{background:color-mix(in srgb, var(--cor-destaque) 6%, transparent)}

/* ---------- tela Empresa ---------- */
.emp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px 16px;margin-top:10px}
.emp-grid.textos{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.emp-campo{display:flex;flex-direction:column;gap:4px;margin:0}
.emp-campo span{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--texto-suave)}
.emp-campo input,.emp-campo textarea{width:100%;box-sizing:border-box;padding:8px 10px;
  border:1px solid var(--borda);border-radius:8px;font:inherit;font-size:13px;
  background:var(--cor-card);color:var(--cor-texto)}
.emp-campo textarea{resize:vertical;min-height:70px}
.emp-campo input:disabled,.emp-campo textarea:disabled{background:var(--cor-fundo);color:var(--texto-suave)}
.emp-larga{grid-column:span 2}
@media(max-width:700px){.emp-larga{grid-column:auto}}
.emp-duplo{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px;align-items:start}
@media(max-width:900px){.emp-duplo{grid-template-columns:1fr}}
.emp-duplo .card{margin:0}

/* ---------- varejo ---------- */
.vx-matriz{width:100%;border-collapse:separate;border-spacing:0;font-size:.85rem;font-variant-numeric:tabular-nums}
.vx-matriz th,.vx-matriz td{padding:6px 8px;border-bottom:1px solid var(--borda);text-align:center;white-space:nowrap}
.vx-matriz th.vx-cor{text-align:left;min-width:150px}
.vx-matriz thead th{position:sticky;top:0;background:var(--cor-card);z-index:1;
  font-size:.68rem;text-transform:uppercase;letter-spacing:.4px;color:var(--texto-suave)}
.vx-amostra{display:inline-block;width:13px;height:13px;border-radius:3px;
  border:1px solid rgba(0,0,0,.25);vertical-align:-2px;margin-right:6px}
.vx-cel{display:flex;flex-direction:column;gap:1px;align-items:center;min-width:64px}
.vx-cel .sku{font-size:.62rem;color:var(--texto-suave);font-variant-numeric:tabular-nums}
.vx-cel .est{font-weight:700;font-variant-numeric:tabular-nums}
.vx-cel.tem{cursor:pointer;border-radius:6px;padding:3px 5px}
.vx-cel.tem:hover{background:color-mix(in srgb, var(--cor-destaque) 10%, transparent)}
.vx-cel.vazia{opacity:.35}
.vx-cel.zerado .est{color:var(--cor-erro)}
.vx-cel.baixo .est{color:var(--cor-alerta)}
.vx-legenda{font-size:.72rem;color:var(--texto-suave);margin-top:8px}
.msg{display:none;padding:9px 12px;border-radius:9px;margin-top:10px;font-size:13px}
.msg.erro{background:var(--erro-bg);color:var(--cor-erro);border:1px solid transparent}
.msg.ok{background:var(--ok-bg);color:var(--cor-ok);border:1px solid transparent}
.btn-bloco{display:block;width:100%}
.vr-linha{gap:8px;margin-top:8px}
.vr-linha>div:first-child{flex:1.2} .vr-linha>div:last-child{flex:1}
.vv-kpi{cursor:pointer;border-radius:8px;padding:4px 8px;margin:-4px -8px}
.vv-kpi:hover{background:color-mix(in srgb, var(--cor-destaque) 7%, transparent)}
.vx-produtos td{padding:8px}
.vx-produtos tbody tr{cursor:pointer}
.vx-prod{display:flex;align-items:center;gap:10px}
.vx-badge{flex:0 0 auto;width:32px;height:32px;border-radius:9px;color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;
  letter-spacing:.5px;font-family:var(--fonte-titulo)}
.vx-nome{font-weight:600;font-size:13.5px;line-height:1.25}
.vx-cod{font-size:12px;color:var(--texto-suave);font-variant-numeric:tabular-nums;font-family:var(--fonte-mono)}
.vx-ncm{font-variant-numeric:tabular-nums;color:var(--texto-suave)}
.vx-alerta{color:var(--cor-alerta);font-weight:700;font-size:12px}
.vx-zero{color:var(--cor-erro)}
.vx-baixo{color:var(--cor-alerta)}
.vx-acoes{white-space:nowrap;text-align:right}
.vx-acoes .btn{margin-left:6px}
.vx-abas{display:flex;gap:4px;flex-wrap:wrap;margin-top:10px;border-bottom:1px solid var(--borda)}
.vx-aba{background:none;border:0;border-bottom:2px solid transparent;cursor:pointer;
  padding:8px 13px;font:inherit;font-size:13px;color:var(--texto-suave);border-radius:8px 8px 0 0}
.vx-aba:hover{background:color-mix(in srgb, var(--cor-destaque) 7%, transparent)}
.vx-aba.on{color:var(--cor-texto);font-weight:600;border-bottom-color:var(--cor-destaque)}
.vv-meta-trilha{height:9px;border-radius:99px;background:var(--cor-fundo);border:1px solid var(--borda);
  margin-top:10px;overflow:hidden}
.vv-meta-barra{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--cor-destaque),#E9BD7D);transition:width .4s}
.vv-meta-barra.ok{background:var(--cor-ok)}

/* ═══════════ Kanban novo (22/10/2026 — spec da Larissa) ═══════════
   CORES DO PRAZO (valem em todas as telas): vermelho = vencida · laranja =
   vence hoje · amarelo = vence em 1 ou 2 dias · verde = no prazo. */
:root{
  --prz-vencida:#C0392B; --prz-vencida-bg:#FDECEA;
  --prz-hoje:#E8811F;    --prz-hoje-bg:#FEF1E3;
  --prz-ate2:#E9C23B;    --prz-ate2-bg:#FFF8DB; --prz-ate2-tx:#6B5100;
  --prz-ok:#2E7D4F;      --prz-ok-bg:#E2F2E8;
  --ch-lote:#8A6420; --ch-lote-bg:#FBF3E4; --ch-pers:#6B3FA0; --ch-pers-bg:#EFE7F8;
  --ch-terc:#475569; --ch-terc-bg:#E8EDF3;
}
html[data-tema="escuro"]{
  --prz-vencida:#E2766A; --prz-vencida-bg:#391513;
  --prz-hoje:#F29B4B;    --prz-hoje-bg:#3A2410;
  --prz-ate2:#E9C23B;    --prz-ate2-bg:#33290B; --prz-ate2-tx:#F3D976;
  --prz-ok:#5FBF86;      --prz-ok-bg:#13301F;
  --ch-lote:#DCAB64; --ch-lote-bg:#33260F; --ch-pers:#C3A3EC; --ch-pers-bg:#2A1D3D;
  --ch-terc:#AAB6C8; --ch-terc-bg:#1E2838;
}
/* pílula do prazo (todas as telas) */
.prz{display:inline-block;border-radius:6px;padding:2px 8px;font-size:10.5px;font-weight:700;
  white-space:nowrap;letter-spacing:.01em}
.prz-vencida{background:var(--prz-vencida);color:#fff;text-transform:uppercase}
.prz-hoje{background:var(--prz-hoje);color:#fff;text-transform:uppercase}
.prz-ate2{background:var(--prz-ate2);color:#3A2C00}
.prz-ok{background:var(--prz-ok-bg);color:var(--prz-ok)}
.prz-sem{background:var(--cor-fundo);color:var(--texto-suave);border:1px solid var(--borda)}

/* cabeçalho + placar */
.kb2-topo{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:4px 0 12px}
.kb2-topo h1{margin:0}
.kb2-topo .sub{flex-basis:100%;color:var(--texto-suave);font-size:12.5px;margin-top:-4px}
.kb2-filtros{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.kb2-filtros input,.kb2-filtros select{padding:8px 10px;border:1px solid var(--borda);border-radius:8px;
  background:var(--cor-card);color:var(--cor-texto);font-size:13px}
.kb2-filtros input{min-width:220px}
.kb2-vazias{border:1px dashed var(--borda);background:transparent;color:var(--texto-suave);
  border-radius:8px;padding:8px 12px;font-size:13px;cursor:pointer}
.kb2-vazias.on{border-style:solid;color:var(--cor-texto);background:var(--cor-card)}
.placar{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:12px;margin-bottom:10px}
@media(max-width:760px){.placar{grid-template-columns:repeat(2,1fr)}}
.plc{display:flex;align-items:center;gap:12px;border:0;border-radius:12px;padding:12px 16px;
  cursor:pointer;text-align:left;color:#fff;font-family:var(--fonte-corpo);
  box-shadow:0 1px 0 rgba(0,0,0,.05);transition:transform .08s, box-shadow .15s}
.plc:hover{transform:translateY(-1px)}
.plc .ic{font-size:22px;opacity:.95}
.plc b{display:block;font:800 28px/1 var(--fonte-titulo);font-variant-numeric:tabular-nums}
.plc span{font-size:12.5px;font-weight:600}
.plc.vencida{background:var(--prz-vencida)} .plc.hoje{background:var(--prz-hoje)}
.plc.ate2{background:var(--prz-ate2);color:#3A2C00} .plc.ok{background:var(--prz-ok)}
.plc.on{box-shadow:0 0 0 3px var(--cor-card),0 0 0 5px var(--cor-texto)}
.placar.filtrando .plc:not(.on){opacity:.45}
.pends{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:4px 0 14px;font-size:12.5px}
.pends>span{color:var(--texto-suave);font-weight:600}
.pend{border:1px solid var(--borda);background:var(--cor-card);border-radius:99px;padding:5px 12px;
  font-size:12.5px;cursor:pointer;color:var(--cor-texto)}
.pend.tecido{color:var(--prz-vencida)} .pend.dtf{color:var(--info)}
.pend.bordado{color:var(--ch-pers)} .pend.arte{color:var(--dourado-escuro)}
.pend.on{background:var(--cor-texto);color:var(--cor-card);border-color:var(--cor-texto)}

/* quadro */
.kb2{display:flex;gap:12px;overflow-x:auto;padding-bottom:14px;align-items:flex-start}
.kb2-col{background:color-mix(in srgb,var(--cor-texto) 5%,var(--cor-fundo));border-radius:12px;
  min-width:252px;width:252px;flex-shrink:0;padding:10px 10px 4px}
.kb2-col header{display:flex;align-items:baseline;justify-content:space-between;gap:6px;padding:2px 4px 6px}
.kb2-col header b{font:700 14px var(--fonte-titulo)}
.kb2-col header small{color:var(--texto-suave);font-size:11px;white-space:nowrap}
.kb2-mix{display:flex;height:5px;border-radius:99px;overflow:hidden;margin:0 4px 6px;
  background:var(--borda);gap:2px}
.kb2-mix i{display:block;height:100%}
.kb2-mix .vencida{background:var(--prz-vencida)} .kb2-mix .hoje{background:var(--prz-hoje)}
.kb2-mix .ate2{background:var(--prz-ate2)} .kb2-mix .ok{background:var(--prz-ok)}
.kb2-col .colsub{font-size:11.5px;color:var(--texto-suave);margin:0 4px 8px}
.kb2-col .vazio{padding:14px 6px;font-size:12px}
.kc{position:relative;background:var(--cor-card);border:1px solid var(--borda);border-top:4px solid var(--prz-ok);
  border-radius:10px;padding:9px 11px 10px;margin-bottom:9px;cursor:pointer;font-size:12.5px}
.kc:hover{box-shadow:0 2px 10px -4px rgba(11,26,47,.35)}
.kc.f-vencida{border-top-color:var(--prz-vencida);background:color-mix(in srgb,var(--prz-vencida-bg) 70%,var(--cor-card))}
.kc.f-hoje{border-top-color:var(--prz-hoje);background:color-mix(in srgb,var(--prz-hoje-bg) 70%,var(--cor-card))}
.kc.f-ate2{border-top-color:var(--prz-ate2)}
.kc.f-sem{border-top-color:var(--borda)}
.kc .l1{display:flex;align-items:center;gap:6px}
.kc .num{font:600 12.5px var(--fonte-mono);color:var(--dourado-escuro)}
.kc .l1 .prz{margin-left:auto}
.kc .cli{font-weight:700;margin-top:4px;font-size:13px;line-height:1.25}
.kc .art{color:var(--texto-suave);margin-top:1px;line-height:1.35}
.kc .art b{color:var(--cor-texto);font-weight:700}
.kc .grd{font:500 11px var(--fonte-mono);color:var(--texto-suave);margin-top:2px}
.kc .chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.kc .dist{font-size:11px;color:var(--texto-suave);margin-top:5px}
.pos{width:23px;height:23px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font:700 10.5px var(--fonte-titulo);color:#fff;background:var(--prz-ok);flex-shrink:0}
.pos.f-vencida{background:var(--prz-vencida)} .pos.f-hoje{background:var(--prz-hoje)}
.pos.f-ate2{background:var(--prz-ate2);color:#3A2C00} .pos.f-sem{background:var(--texto-suave)}
.kprog{margin-top:7px}
.kprog .trilha{height:5px;border-radius:99px;background:var(--borda);overflow:hidden}
.kprog .trilha i{display:block;height:100%;background:var(--cor-texto)}
.kprog small{display:block;font-size:11px;color:var(--texto-suave);margin-top:3px}
.kch{display:inline-block;border-radius:6px;padding:2px 7px;font-size:11px;font-weight:600;line-height:1.5;
  white-space:nowrap;border:1px solid transparent}
.kch.ok{background:var(--prz-ok-bg);color:var(--prz-ok)}
.kch.warn{background:var(--prz-ate2-bg);color:var(--prz-ate2-tx)}
.kch.err{background:var(--prz-vencida-bg);color:var(--prz-vencida)}
.kch.info{background:var(--info-bg);color:var(--info)}
.kch.off{background:var(--cor-fundo);color:var(--texto-suave);border-color:var(--borda)}
.kch.lote{background:var(--ch-lote-bg);color:var(--ch-lote);border-color:color-mix(in srgb,var(--ch-lote) 35%,transparent)}
.kch.pers{background:var(--ch-pers-bg);color:var(--ch-pers)}
.kch.terc{background:var(--ch-terc-bg);color:var(--ch-terc)}
body.tv .kb2-col{min-width:300px;width:300px}

/* modal "Liberar parcial" (dividir OP em lotes) */
/* 26/10 (Larissa, foto do notebook): com overflow:hidden o modal passava da
   altura da tela e o botão "Liberar e dividir OP" ficava cortado, sem rolagem.
   Agora o MEIO rola e o topo + o rodapé com os botões ficam sempre à vista. */
.modal.modal-lotes{padding:0;width:min(940px,96vw);overflow:hidden;display:flex;flex-direction:column}
.modal.modal-lotes .ml-topo,.modal.modal-lotes .ml-rodape{flex-shrink:0}
.modal.modal-lotes .ml-corpo{flex:1 1 auto;min-height:0;overflow:auto}
.ml-topo{background:var(--cor-primaria);color:#fff;padding:20px 26px 18px}
.ml-topo .eb{font-size:10.5px;font-weight:700;letter-spacing:2px;color:var(--cor-destaque)}
.ml-topo h3{color:#fff;font:800 20px var(--fonte-titulo);margin:4px 0 2px}
.ml-topo small{color:#B8C2D2}
.ml-corpo{padding:18px 26px;display:grid;grid-template-columns:1.05fr 1fr;gap:26px}
@media(max-width:800px){.ml-corpo{grid-template-columns:1fr}}
.ml-corpo h4{font:700 14px var(--fonte-titulo);margin:0 0 10px}
.ml-grade td{padding:5px 6px}
.ml-grade input{width:76px;padding:7px 8px;text-align:left;border:1px solid var(--borda);border-radius:8px;
  background:var(--cor-card);color:var(--cor-texto);font-size:14px}
.ml-grade .falta{font-weight:700;color:var(--prz-vencida)}
.ml-grade .falta.zero{color:var(--texto-suave);font-weight:400}
.ml-grade tfoot td{border-top:2px solid var(--cor-texto);font-weight:700}
.ml-motivo{display:flex;align-items:center;gap:10px;border:1px solid var(--borda);border-radius:10px;
  padding:11px 14px;margin-bottom:8px;cursor:pointer;font-size:13.5px}
.ml-motivo input{width:auto;margin:0}
.ml-motivo.on{border-color:var(--cor-destaque);background:color-mix(in srgb,var(--cor-destaque) 10%,var(--cor-card))}
.ml-oque{grid-column:1/-1}
.ml-lotes{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:800px){.ml-lotes{grid-template-columns:1fr}}
.ml-lote{border-radius:10px;padding:12px 14px;border:1px solid}
.ml-lote .mono{font:600 12px var(--fonte-mono)}
.ml-lote b{display:block;font:700 15px var(--fonte-titulo);margin:3px 0 2px}
.ml-lote small{color:var(--texto-suave)}
.ml-lote.segue{background:var(--prz-ok-bg);border-color:color-mix(in srgb,var(--prz-ok) 35%,transparent)}
.ml-lote.segue b{color:var(--prz-ok)}
.ml-lote.volta{background:var(--ch-lote-bg);border-color:color-mix(in srgb,var(--ch-lote) 35%,transparent)}
.ml-lote.volta b{color:var(--ch-lote)}
.ml-rodape{display:flex;justify-content:flex-end;gap:10px;padding:14px 26px;border-top:1px solid var(--borda)}

/* rota de produção do modelo (tela 3) */
.rota{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:800px){.rota{grid-template-columns:1fr}}
.rota-et{display:flex;align-items:center;gap:10px;border:1px solid var(--borda);border-radius:10px;
  padding:10px 14px;margin-bottom:8px;font-size:13.5px}
.rota-et.fixa{background:var(--cor-fundo)}
.rota-et input[type=checkbox]{width:auto;margin:0}
.rota-et .dir{margin-left:auto;display:flex;gap:8px;align-items:center;color:var(--texto-suave);font-size:11.5px}
.rota-et .dir input{width:64px;padding:5px 6px;margin:0;text-align:center}
.rota-box{border-radius:10px;padding:10px 14px;margin-bottom:8px;font-size:12.5px}
.rota-box b{display:block;font-size:12.5px;margin-bottom:2px}
.rota-box.tecido{background:var(--prz-vencida-bg)} .rota-box.tecido b{color:var(--prz-vencida)}
.rota-box.dtf{background:var(--info-bg)} .rota-box.dtf b{color:var(--info)}
.rota-box.bordado{background:var(--ch-pers-bg)} .rota-box.bordado b{color:var(--ch-pers)}
.rota-box.arte{background:var(--ch-lote-bg)} .rota-box.arte b{color:var(--ch-lote)}
.rota-box.inativa{opacity:.35}

/* 22/10 — faixa do WhatsApp fora do ar (a Pilar não tem campainha) */
.wpp-faixa{background:var(--erro-bg);color:var(--cor-erro);padding:9px 16px;font-size:13.5px;
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;border-bottom:1px solid var(--borda)}
.wpp-faixa[hidden]{display:none}

/* 26/10 — painel "O que fazer hoje" */
.hj-topo{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.hj-eyebrow{font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--dourado-escuro)}
.hj-placar{background:var(--cor-primaria);color:#fff;border-radius:12px;padding:12px 16px;min-width:280px}
.hj-placar>div:first-child{display:flex;align-items:baseline;gap:8px}
.hj-placar span{font-size:12.5px;font-weight:600;flex:1}
.hj-placar b{font-size:20px}
.hj-placar small{opacity:.8}
.hj-placar-barra{height:5px;background:rgba(255,255,255,.18);border-radius:4px;margin-top:8px;overflow:hidden}
.hj-placar-barra i{display:block;height:100%;background:var(--cor-destaque)}
.hj-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:14px}
.hj-kpi{border-radius:12px;padding:12px 14px;border:1px solid var(--borda);background:var(--cor-card)}
.hj-kpi span{display:block;font-size:12px;font-weight:600}
.hj-kpi b{display:block;font-size:26px;margin:4px 0 2px;font-variant-numeric:tabular-nums}
.hj-kpi b small{font-size:14px;font-weight:600}
.hj-kpi>small{font-size:11.5px;color:var(--texto-suave)}
.hj-kpi.ruim{background:var(--erro-bg)}.hj-kpi.ruim span,.hj-kpi.ruim b{color:var(--cor-erro)}
.hj-kpi.alerta{background:var(--alerta-bg)}.hj-kpi.alerta span,.hj-kpi.alerta b{color:var(--cor-alerta)}
.hj-kpi.bom{background:var(--ok-bg)}.hj-kpi.bom span,.hj-kpi.bom b{color:var(--cor-ok)}
.hj-grade{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px;align-items:start}
.hj-lado .card{margin-bottom:12px}
.hj-sec h2{font-size:16px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:0 0 6px}
.hj-sec h2 small{font-weight:400;font-size:12.5px;color:var(--texto-suave)}
.hj-tag{margin-left:auto;font-size:11px;font-weight:600;padding:2px 9px;border-radius:20px;background:var(--ok-bg);color:var(--cor-ok)}
.hj-tag.ruim{background:var(--erro-bg);color:var(--cor-erro)}
.hj-sec h4{font-size:10.5px;letter-spacing:.1em;color:var(--texto-suave);margin:12px 0 4px}
.hj-linha{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--borda)}
.hj-linha:last-child{border-bottom:0}
.hj-pill{flex:0 0 64px;text-align:center;font-size:11px;font-weight:700;padding:4px 6px;border-radius:7px}
.hj-pill.ruim{background:var(--erro-bg);color:var(--cor-erro)}
.hj-pill.alerta{background:var(--alerta-bg);color:var(--cor-alerta)}
.hj-pill.bom{background:var(--ok-bg);color:var(--cor-ok)}
.hj-pill.info{background:var(--info-bg);color:var(--info)}
.hj-pill.neutro{background:var(--cor-fundo);color:var(--texto-suave);border:1px solid var(--borda)}
.hj-txt{flex:1;min-width:0}
.hj-txt b{display:block;font-size:13.5px}
.hj-txt small{display:block;font-size:12px;color:var(--texto-suave);overflow:hidden;text-overflow:ellipsis}
.hj-bts{display:flex;gap:6px;flex-shrink:0}
.hj-escuro{background:var(--cor-primaria);color:#fff}
.hj-apagado{opacity:.7}
.hj-dourado{background:var(--cor-destaque);color:var(--cor-primaria)}
.hj-meta{display:flex;align-items:baseline;gap:6px}
.hj-meta b{font-size:24px}
.hj-meta span{margin-left:auto;font-size:12px;font-weight:700;color:var(--cor-alerta)}
.hj-barra{height:8px;background:var(--cor-fundo);border-radius:6px;overflow:hidden;margin-top:6px}
.hj-barra.fina{height:6px;margin-top:3px}
.hj-barra i{display:block;height:100%;background:var(--cor-primaria);border-radius:6px}
.hj-trav{margin:8px 0}
.hj-trav>div:first-child{display:flex;justify-content:space-between;font-size:12.5px}
.hj-trav small{color:var(--texto-suave)}
.hj-insight{margin-top:10px;font-size:12px;padding:8px 10px;border-radius:8px;background:var(--erro-bg);color:var(--cor-erro)}
.hj-fin{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hj-fin small{display:block;font-size:11px;color:var(--texto-suave)}
.hj-fin b{font-size:15px}
@media (max-width:1100px){.hj-grade{grid-template-columns:1fr}.hj-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.hj-linha{flex-wrap:wrap}.hj-bts{width:100%;justify-content:flex-end}.hj-kpis{grid-template-columns:1fr 1fr}}