:root {
  --navy:#0b2447; --navy-2:#13315f; --navy-3:#1b4380; --blue:#1d5fd1; --blue-soft:#e8f0fd;
  --bg:#eef2f7; --card:#fff; --line:#dbe2ec; --fg:#14233a; --muted:#6b7a90;
  --green:#16a34a; --orange:#f59e0b; --red:#dc2626; --purple:#9333ea; --teal:#0891b2;
  --ok:#e6f4ea; --err:#fdecea; --weekend:#fdeeee;
}
* { box-sizing:border-box; }
html, body { height:100%; }
body { margin:0; font:14px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:var(--fg); background:var(--bg); }
a { color:var(--blue); }
.muted { color:var(--muted); } .small { font-size:12px; } .center { text-align:center; } .r { text-align:right; }
.pad { padding:18px; } .neg { color:var(--red); }
h1, h2, h3 { margin:0; }

/* ---------- estrutura ---------- */
body.app .shell { display:flex; min-height:100vh; }
.side { width:208px; flex:none; background:var(--navy); color:#dfe8f7; display:flex; flex-direction:column; padding:14px 10px; position:sticky; top:0; height:100vh; overflow-y:auto; }
.logo { display:flex; align-items:center; gap:10px; padding:8px 6px 14px; color:#fff; }
.logo .mark { width:40px; height:40px; border-radius:10px; background:var(--navy-3); display:grid; place-items:center; font-size:22px; font-weight:700; }
.logo strong { font-size:13px; letter-spacing:.08em; line-height:1.15; }
.plant-label { font-size:10px; letter-spacing:.1em; color:#9db3d6; padding:0 6px; }
.chip { margin:8px 6px 14px; padding:6px 10px; border:1px solid var(--navy-3); border-radius:6px; font-size:12px; color:#c9d8f0; }
.chip b { color:#fff; }
.side nav { display:flex; flex-direction:column; gap:3px; flex:1; }
.side nav a { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:7px; color:#dfe8f7; text-decoration:none; font-weight:600; font-size:13px; }
.side nav a:hover { background:var(--navy-2); }
.side nav a.on { background:var(--blue); color:#fff; }
.side nav a.sub { font-weight:500; font-size:12px; padding:7px 10px; }
.nav-sep { margin:14px 10px 4px; font-size:10px; letter-spacing:.1em; color:#8aa3cc; }
.ic { width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.side-foot { display:flex; flex-direction:column; gap:2px; padding:12px 8px 2px; border-top:1px solid var(--navy-2); font-size:11px; color:#9db3d6; }
.who-mail { color:#fff; word-break:break-all; }
button.link { background:none; border:0; padding:2px 0; color:var(--blue); text-decoration:underline; cursor:pointer; font:inherit; text-align:left; }
button.link.light { color:#cfe0fb; }
.main { flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar { background:var(--navy); color:#fff; display:flex; align-items:center; gap:16px; padding:10px 20px; flex-wrap:wrap; }
.topbar .ttl { flex:1; min-width:220px; }
.topbar h1 { font-size:18px; } .topbar small { font-size:10px; letter-spacing:.12em; color:#9db3d6; }
.topbar .mes { display:flex; gap:6px; }
.topbar select { background:var(--navy-2); color:#fff; border:1px solid var(--navy-3); border-radius:7px; padding:7px 10px; font:inherit; font-weight:600; }
.ghost-dark { background:transparent; color:#cfe0fb; border:1px solid var(--navy-3); border-radius:7px; padding:6px 10px; cursor:pointer; font:inherit; }
.btn-dark { display:inline-block; background:var(--navy-2); color:#fff; border:1px solid var(--navy-3); border-radius:7px; padding:7px 12px; text-decoration:none; font-weight:600; font-size:12px; }
.btn-dark:hover { background:var(--navy-3); }
.content { padding:18px 20px 40px; max-width:100%; min-width:0; }
.content.narrow { max-width:420px; margin:8vh auto 0; }

/* ---------- mensagens ---------- */
.msg { padding:10px 14px; border-radius:8px; margin-bottom:14px; }
.msg.ok { background:var(--ok); } .msg.err { background:var(--err); }
.msg ul { margin:6px 0 0 18px; padding:0; }
.infobar { display:flex; gap:26px; flex-wrap:wrap; background:var(--card); border:1px solid var(--line); border-radius:8px; padding:10px 16px; margin-bottom:14px; font-size:12px; color:var(--muted); }
.infobar b { color:var(--fg); }
.banner { background:#f7efe0; border:1px solid #e6d5ae; border-radius:8px; padding:12px 16px; margin-bottom:14px; display:flex; flex-direction:column; gap:2px; }
.banner strong { font-size:13px; letter-spacing:.04em; } .banner span { color:#6d5a2e; font-size:12px; }

/* ---------- KPIs ---------- */
.kpis { display:grid; gap:12px; margin-bottom:14px; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); }
.kpis.k4 { grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); }
.kpi { background:var(--card); border:1px solid var(--line); border-left:4px solid var(--blue); border-radius:8px; padding:12px 16px; display:flex; flex-direction:column; gap:4px; min-height:92px; }
.kpi .kl { font-size:10px; letter-spacing:.08em; color:var(--muted); font-weight:700; }
.kpi .kv { font-size:24px; line-height:1.15; }
.kpi .ks { font-size:11px; color:var(--muted); }
.k-blue { border-left-color:var(--blue); } .k-green { border-left-color:var(--green); }
.k-orange { border-left-color:var(--orange); } .k-red { border-left-color:var(--red); }
.kpi.stock .rows { margin:6px 0 0; display:flex; flex-direction:column; gap:3px; font-size:12px; }
.kpi.stock .rows div { display:flex; justify-content:space-between; gap:8px; }
.kpi.stock dt { color:var(--muted); } .kpi.stock dd { margin:0; font-weight:700; }
.kpi.p-soda { border-left-color:var(--purple); } .kpi.p-hipo { border-left-color:var(--green); }
.kpi.p-hcl { border-left-color:var(--blue); } .kpi.p-cloro { border-left-color:var(--teal); }

/* ---------- painéis e tabelas ---------- */
.panel { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:14px 16px; margin-bottom:14px; min-width:0; }
.panel h2 { font-size:15px; } .panel h3.cap { font-size:10px; letter-spacing:.1em; color:var(--muted); margin-bottom:8px; }
.panel .sub { margin:2px 0 10px; font-size:12px; color:var(--muted); }
.split { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:14px; }
.split.even { grid-template-columns:repeat(2, minmax(0,1fr)); }
@media (max-width:1000px) { .split, .split.even { grid-template-columns:1fr; } }
.tbl { width:100%; border-collapse:collapse; font-size:13px; }
.tbl th { text-align:left; font-size:12px; color:var(--fg); padding:9px 10px; border-bottom:1px solid var(--line); background:#f7f9fc; white-space:nowrap; }
.tbl th.r { text-align:right; }
.tbl td { padding:8px 10px; border-bottom:1px solid #edf1f6; vertical-align:top; }
.tbl tbody tr:nth-child(even) td { background:#fafbfd; }
.plano { margin:8px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:4px 24px; }
.plano div { display:flex; justify-content:space-between; gap:8px; border-bottom:1px solid #edf1f6; padding:5px 0; font-size:12px; }
.plano dt { color:var(--muted); } .plano dd { margin:0; font-weight:600; }
.note { margin:12px 0 0; padding:9px 12px; background:#f1f4f9; border-radius:6px; font-size:12px; color:var(--muted); }
.inline-stats { margin:0; display:flex; flex-wrap:wrap; gap:6px 18px; font-size:12px; color:var(--muted); }
.inline-stats b { color:var(--fg); }
.chipbadge { display:inline-block; padding:3px 9px; border-radius:99px; background:var(--blue-soft); color:#1c4aa3; font-size:11px; font-weight:600; }
.plain { margin:8px 0 0 18px; padding:0; display:flex; flex-direction:column; gap:6px; font-size:13px; }

/* ---------- gráficos ---------- */
.chart { width:100%; height:auto; display:block; }
.chart .grid { stroke:#e4e9f1; stroke-dasharray:3 4; stroke-width:1; }
.chart .ax { fill:#8795aa; font-size:11px; }
.chart .hline { stroke:var(--red); stroke-width:1.6; stroke-dasharray:6 4; }
.chart .line { fill:none; stroke-width:2; } .chart .line.dashed { stroke-dasharray:6 4; }
.chart .line.prog, .chart .pt.prog { stroke:var(--blue); } .chart .pt.prog { fill:var(--blue); }
.chart .line.real, .chart .pt.real { stroke:var(--green); } .chart .pt.real { fill:var(--green); }
.chart .line.real-soda, .chart .pt.real-soda { stroke:var(--purple); } .chart .pt.real-soda { fill:var(--purple); }
.chart .line.real-hipo, .chart .pt.real-hipo { stroke:var(--green); } .chart .pt.real-hipo { fill:var(--green); }
.chart .line.real-hcl, .chart .pt.real-hcl { stroke:var(--blue); } .chart .pt.real-hcl { fill:var(--blue); }
.chart .line.real-cloro, .chart .pt.real-cloro { stroke:var(--teal); } .chart .pt.real-cloro { fill:var(--teal); }
.legend { display:flex; gap:18px; justify-content:center; font-size:12px; color:var(--muted); margin-top:4px; }
.legend .lg { display:inline-flex; align-items:center; gap:6px; }
.legend .sw { display:inline-block; width:22px; height:0; border-top:2px solid var(--blue); }
.legend .sw.real { border-color:var(--green); } .legend .sw.cap { border-color:var(--red); }
.legend .sw.dashed { border-top-style:dashed; }

/* ---------- barra de ferramentas e abas ---------- */
.toolbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.toolbar .hint { font-size:12px; color:var(--muted); } .spacer { flex:1; }
.btn-line, .btn-primary { font:inherit; font-size:12px; font-weight:600; padding:7px 12px; border-radius:7px; cursor:pointer; text-decoration:none; display:inline-block; }
.btn-line { background:#fff; color:var(--fg); border:1px solid var(--line); } .btn-line:hover { border-color:var(--blue); }
.btn-primary { background:var(--blue); color:#fff; border:1px solid var(--blue); } .btn-primary:hover { filter:brightness(1.08); }
button:disabled { opacity:.45; cursor:not-allowed; }
.search { font:inherit; font-size:12px; padding:7px 10px; border:1px solid var(--line); border-radius:7px; min-width:170px; }
.logbox { border:1px solid var(--line); border-radius:8px; margin-bottom:10px; max-height:240px; overflow:auto; padding:6px 10px; }
.tabs { display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.tab { padding:8px 16px; border:1px solid var(--line); border-radius:7px; background:#fff; color:var(--fg); text-decoration:none; font-weight:600; font-size:13px; }
.tab.on { background:var(--blue); border-color:var(--blue); color:#fff; }
.filters { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:8px; }
.filters select, .filters input[type=search] { font:inherit; font-size:12px; padding:7px 10px; border:1px solid var(--line); border-radius:7px; background:#fff; }

/* ---------- grade de lançamento ---------- */
.gridpanel { padding:12px; }
.grid-scroll { overflow:auto; max-height:calc(100vh - 330px); min-height:260px; border:1px solid var(--line); border-radius:6px; position:relative; }
.grid-scroll.tall { max-height:calc(100vh - 360px); }
table.pgrid { border-collapse:separate; border-spacing:0; font-size:12px; }
.pgrid th, .pgrid td { border-bottom:1px solid #edf1f6; border-right:1px solid #f1f4f8; padding:0; background:#fff; }
.pgrid thead th { position:sticky; top:0; z-index:3; background:#f7f9fc; text-align:center; font-size:12px; height:34px; padding:2px 4px; }
.pgrid thead tr:nth-child(2) th { top:34px; font-size:10px; color:var(--muted); letter-spacing:.06em; height:22px; z-index:3; }
.pgrid thead th small { display:block; font-size:9px; color:var(--muted); letter-spacing:.08em; }
.pgrid th.day.today { box-shadow:inset 0 -3px 0 var(--blue); }
.pgrid .c1, .pgrid .c2, .pgrid .c3 { position:sticky; z-index:2; background:#fff; text-align:left; }
.pgrid .c1 { left:0; min-width:200px; max-width:200px; padding:0 10px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pgrid .c2 { left:200px; min-width:64px; padding:0 8px; color:var(--muted); }
.pgrid.vgrid .c2 { min-width:72px; text-align:right; } .pgrid.vgrid .c3 { left:272px; min-width:72px; text-align:right; padding:0 8px; }
.pgrid thead .corner { z-index:5; text-align:left; padding:0 10px; }
.pgrid td.we, .pgrid th.we { background:var(--weekend); }
.pgrid tbody tr { height:30px; } .pgrid tbody tr:hover td, .pgrid tbody tr:hover th { background:#f4f8ff; }
.pgrid td.sum { text-align:right; font-weight:600; padding:0 8px; font-variant-numeric:tabular-nums; }
.pgrid tfoot .total th, .pgrid tfoot .total td { background:var(--navy); color:#fff; position:sticky; bottom:0; z-index:2; height:32px; border-color:var(--navy-2); }
.pgrid tfoot .total .c1, .pgrid tfoot .total .c2, .pgrid tfoot .total .c3 { z-index:4; }
.cell { width:66px; height:28px; border:0; background:transparent; text-align:right; font:12px system-ui,sans-serif; color:var(--fg); padding:0 6px; font-variant-numeric:tabular-nums; }
.cell:focus { outline:2px solid var(--blue); outline-offset:-2px; background:#fff; }
.cell[readonly] { cursor:default; } .cell.changed { background:#fff3c4; }
.newname { width:100%; border:1px solid var(--blue); border-radius:5px; padding:4px 6px; font:12px system-ui,sans-serif; }
.savebar { display:flex; gap:10px; align-items:center; justify-content:flex-end; margin-top:10px; font-size:12px; color:var(--muted); }
.savebar.dirty span { color:var(--fg); font-weight:600; }

/* ---------- OTIF ---------- */
table.otif td, table.otif th { white-space:nowrap; } table.otif td:nth-child(3), table.otif td:nth-child(10), table.otif td:nth-child(11) { white-space:normal; min-width:140px; }
.flag { display:inline-block; min-width:34px; text-align:center; padding:1px 8px; border-radius:99px; font-size:11px; font-weight:700; background:#eef1f5; color:var(--muted); }
.flag.f1 { background:#dff3e5; color:#157a3b; } .flag.f0 { background:#fde4e2; color:#b42318; }

/* ---------- previsões ---------- */
.cards3 { display:grid; gap:14px; grid-template-columns:repeat(auto-fit, minmax(430px, 1fr)); }
.pcard .tbl th, .pcard .tbl td { padding:7px 6px; font-size:12px; }
.pcard .tbl td:first-child { white-space:nowrap; }
.pcard .phead { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.facts { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px 12px; margin:0 0 12px; }
.facts dt { font-size:10px; letter-spacing:.06em; color:var(--muted); } .facts dd { margin:2px 0 0; font-size:17px; font-weight:700; }
.facts small { display:block; font-size:10px; color:var(--muted); line-height:1.25; }

/* ---------- formulários antigos (lançamento do dia, capacidade, login) ---------- */
.bar { display:flex; gap:12px; align-items:end; margin-bottom:14px; }
label { display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--muted); }
input, select { font:inherit; color:var(--fg); padding:6px 8px; border:1px solid var(--line); border-radius:6px; background:#fff; min-width:0; }
input[readonly], select[disabled] { background:#f0f2f4; }
input.num { width:110px; text-align:right; }
button { font:inherit; padding:8px 16px; border:0; border-radius:6px; background:var(--blue); color:#fff; cursor:pointer; }
button.ghost { background:#fff; color:var(--blue); border:1px solid var(--blue); }
.scroll { overflow-x:auto; }
table.grid { border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:8px; width:100%; margin-bottom:12px; }
table.grid th { text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); padding:8px; background:#fafbfc; border-bottom:1px solid var(--line); white-space:nowrap; }
table.grid td { padding:4px 6px; border-bottom:1px solid #eef1f4; }
table.grid td input, table.grid td select { width:100%; } table.grid td input.num { width:110px; }
table.wide { min-width:1250px; }
table.grid select[name=produto], table.grid select[name=incoterm] { min-width:92px; }
table.grid select[name=status] { min-width:175px; } table.grid select[name=tipo] { min-width:110px; }
table.grid input[name=cliente], table.grid input[name=entidade] { min-width:190px; }
table.grid input[name=area] { min-width:130px; } table.grid input[name=motivo] { min-width:170px; }
table.grid input[name=observacao] { min-width:200px; } table.grid input[type=date] { min-width:150px; }
.login { background:#fff; border:1px solid var(--line); border-radius:10px; padding:28px; }
.login h1 { color:var(--navy); letter-spacing:.06em; font-size:22px; margin-bottom:6px; }
.login form { display:flex; flex-direction:column; gap:14px; margin-top:14px; }
@media (max-width:760px) {
  body.app .shell { flex-direction:column; } .side { width:100%; height:auto; position:static; flex-direction:column; }
  .side nav { flex-direction:row; flex-wrap:wrap; } .content { padding:12px; }
}

/* ---------- Reunião Diária (pop-up) ---------- */
.btn-reuniao { background:var(--navy); color:#fff; border-color:var(--navy); } .btn-reuniao:hover { background:var(--navy-3); border-color:var(--navy-3); }
dialog.reuniao { width:min(1560px, 97vw); height:93vh; max-width:none; max-height:none; padding:0; border:0; border-radius:12px; background:var(--bg); color:var(--fg); box-shadow:0 20px 60px rgba(8,20,45,.45); }
dialog.reuniao::backdrop { background:rgba(8,20,45,.62); }
.rbody { height:100%; overflow:auto; padding:16px 18px 24px; }
.rbody[aria-busy="true"] { opacity:.55; }
.rhead { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:12px; }
.rtitle h2 { margin:0 0 2px; font-size:20px; color:var(--navy); }
.rnav { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.rdate { display:inline-flex; gap:6px; align-items:center; margin:0; } .rdate input { font:inherit; font-size:12px; padding:6px 8px; border:1px solid var(--line); border-radius:7px; }
.rcards { display:grid; grid-template-columns:repeat(auto-fit, minmax(460px, 1fr)); gap:12px; margin-bottom:10px; }
.rcard { padding:12px 14px; } .rcard h3, .rpanel h3 { margin:0 0 8px; font-size:14px; color:var(--navy); }
.rsum td, .rsum th { padding:5px 8px; font-size:12.5px; font-variant-numeric:tabular-nums; }
.lvl { display:inline-block; padding:1px 8px; border-radius:10px; font-size:11px; font-weight:700; background:var(--ok); color:#166534; }
.lvl.red { background:#fde2e2; color:#991b1b; } .lvl.yellow { background:#fff3c4; color:#8a5a00; }
.rlegend { display:flex; gap:18px; flex-wrap:wrap; align-items:center; margin:2px 2px 10px; }
.rlegend .sw { display:inline-block; width:14px; height:10px; border-radius:2px; margin-right:4px; vertical-align:-1px; border:1px solid var(--line); }
.rlegend .sw.yellow { background:#ffe066; } .rlegend .sw.red { background:#f87171; } .rlegend .sw.focus { background:var(--blue-soft); border-color:var(--blue); }
.rlegend .lg-prog { color:#7a8798; } .rlegend .lg-real { color:var(--fg); }
.rpanel { padding:12px 14px; margin-bottom:12px; }
.rscroll { overflow:auto; border:1px solid var(--line); border-radius:6px; margin-bottom:10px; max-width:100%; }
table.rgrid { border-collapse:separate; border-spacing:0; font-size:11.5px; width:max-content; min-width:100%; }
.rgrid th, .rgrid td { border-bottom:1px solid #edf1f6; border-right:1px solid #f1f4f8; background:#fff; height:24px; padding:0 6px; text-align:right; min-width:54px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.rgrid thead th { position:sticky; top:0; z-index:3; background:#f7f9fc; text-align:center; height:32px; font-size:11.5px; }
.rgrid thead th small { display:block; font-size:9px; color:var(--muted); letter-spacing:.08em; }
.rgrid .c1, .rgrid .c2 { position:sticky; z-index:2; text-align:left; background:#fff; }
.rgrid .c1 { left:0; min-width:190px; max-width:190px; overflow:hidden; text-overflow:ellipsis; font-weight:600; }
.rgrid .c2 { left:190px; min-width:34px; max-width:34px; }
.rgrid thead .c1, .rgrid thead .c2 { z-index:5; background:#f7f9fc; } .rgrid thead .c1.prod { color:var(--navy); font-size:12.5px; }
.rgrid td.we, .rgrid th.we { background:var(--weekend); }
.rgrid td.real { font-weight:700; color:var(--fg); } .rgrid td.prog { font-style:italic; color:#7a8798; }
.rgrid thead th.today { box-shadow:inset 0 -3px 0 var(--blue); }
.rgrid td.focus, .rgrid thead th.focus { background:var(--blue-soft); }
.rgrid tr.rtot th, .rgrid tr.rtot td { background:#eef3fb; font-weight:700; border-top:1px solid var(--line); }
.rgrid tr.rtot td.focus { background:#d4e3fb; }
.rgrid tr.rest th, .rgrid tr.rest td { border-bottom:2px solid var(--line); }
.rgrid td.yellow { background:#ffe066; color:#5f4300; } .rgrid td.red { background:#f87171; color:#fff; }
.reuniao-page .rhead .rnav { justify-content:flex-end; }
@media (max-width: 900px) { dialog.reuniao { width:100vw; height:100vh; border-radius:0; } .rcards { grid-template-columns:1fr; } }

/* Cadastro de e-mails */
.cad-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.cad-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted, #667); }
.cad-form input[type=email] { min-width: 280px; }
.cad-form label.chk { flex-direction: row; align-items: center; gap: 6px; }
table.cad td { vertical-align: middle; }
table.cad tr.off td { opacity: .55; }

/* Reunião Diária: edição do dia */
input.rcell { width: 84px; text-align: right; padding: 3px 6px; border: 1px solid var(--line, #d5dae3); border-radius: 4px; background: #fff; font: inherit; }
input.rcell[readonly] { border-color: transparent; background: transparent; }
input.rcell.changed { background: #fff6d6; border-color: #e0b400; }
tr.minor td { color: var(--muted, #667); }
details.rprod { margin: 6px 0; }
details.rprod > summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 4px 0; }
.rsave { position: sticky; bottom: 0; background: var(--panel, #fff); padding: 8px 0; border-top: 1px solid var(--line, #d5dae3); }
.rsave .rmsg { margin-right: auto; }
.rsave .rmsg.err { color: #b3261e; font-weight: 600; }
.rsave .rmsg.ok { color: #1b7a3a; font-weight: 600; }

table.cad td.acoes .btn-line { margin: 2px 4px 2px 0; }
.panel:has(table.cad) { overflow-x: auto; }
table.cad td, table.cad th { padding-left: 8px; padding-right: 8px; }