/* Identidade alinhada ao portal MSE (mseboard): fundo cinza claro, cartões brancos, banner azul-marinho */
:root{
  --bg:#e8eaee; --card:#fff; --navy:#16243f; --tx:#1b2433; --mut:#8a94a6; --linha:#e6e9ef; --linha2:#1b2433;
  --acc:#ff6b2c; --blue:#2563eb; --blueBg:#dbe7fd; --slate:#475569; --slateBg:#e8ebf0;
  --purple:#7c3aed; --orange:#dd6b20; --orangeBg:#fde8d6; --red:#dc2626; --redBg:#fde2e2; --green:#16a34a;
  --sans:"IBM Plex Sans","Segoe UI",system-ui,Arial,sans-serif; --mono:"IBM Plex Mono",Consolas,"Courier New",monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:min(calc(100vw/96),calc(100vh/54))}
body{width:100vw;height:100vh;overflow:hidden;background:var(--bg);color:var(--tx);font-family:var(--sans);
  display:grid;grid-template-rows:auto 1fr 3.6rem;padding:1.2rem 2rem 0;gap:1.1rem}

/* banner */
.banner{background:var(--navy);color:#fff;border-radius:.9rem;padding:1.1rem 2rem;display:flex;justify-content:space-between;align-items:center}
.banner h1{font-size:2.5rem;font-weight:700;letter-spacing:-.01em}
.banner h1 b{color:var(--acc);font-weight:800}
.banner p{font-size:1.15rem;color:#b9c4d8;margin-top:.25rem}
.pos{text-align:right}
.pos span{display:block;font-size:.95rem;color:#b9c4d8}
.pos b{font-size:2rem;font-weight:700;font-variant-numeric:tabular-nums}

/* telas */
main{position:relative;min-height:0}
.tela{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;display:flex;flex-direction:column;min-height:0;gap:1rem}
.tela.on{opacity:1}

/* KPIs */
.kpis{display:grid;gap:1rem}
.kpis.k6{grid-template-columns:repeat(6,1fr)}
.kpis.k3{grid-template-columns:repeat(3,1fr)}
.kpi{background:var(--card);border:1px solid var(--linha);border-radius:.8rem;padding:.9rem 1.5rem 1rem}
.kpi small{display:flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.95rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.kpi b{display:block;font-size:3.6rem;font-weight:600;line-height:1.15;font-variant-numeric:tabular-nums}
.kpi .dot{width:.75rem;height:.75rem;border-radius:50%}
.c-blue{color:var(--blue)}.c-slate{color:var(--slate)}.c-purple{color:var(--purple)}.c-orange{color:var(--orange)}.c-red{color:var(--red)}
.resumo{font-size:1.25rem;color:var(--slate)}
.resumo b{color:var(--tx)}

/* painéis (visão geral) */
.paineis{display:grid;grid-template-columns:1fr 1fr;gap:1rem;flex:1;min-height:0}
.painel{background:var(--card);border:1px solid var(--linha);border-radius:.8rem;padding:1.1rem 1.5rem;display:flex;flex-direction:column;min-height:0}
.painel h2{font-size:1.5rem;font-weight:700;margin-bottom:.6rem;display:flex;gap:.8rem;align-items:baseline}
.painel h2 span{font-size:1.1rem;font-weight:400;color:var(--mut)}
.lin{display:grid;align-items:center;gap:1rem;padding:.55rem 0;border-top:1px solid var(--linha);font-size:1.3rem;min-width:0}
.lin.cab{border-top:0;border-bottom:2px solid var(--linha2);padding:.4rem 0;font-family:var(--mono);font-size:.9rem;letter-spacing:.1em;color:var(--mut)}
.lin > *{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv{grid-template-columns:11rem 1fr 11rem}
.pa{grid-template-columns:11rem 1fr 7rem 8rem}
.vazio{margin:auto;color:var(--mut);font-size:1.5rem;text-align:center}
.mais{margin-top:.5rem;color:var(--mut);font-size:1.1rem}

/* chips */
.chip{display:inline-block;border-radius:.4rem;padding:.12rem .6rem;font-size:.95rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.chip.fazendo{background:var(--blueBg);color:#1d4ed8}
.chip.afazer{background:var(--slateBg);color:#374151}
.chip.teste{background:#ece4fd;color:#6d28d9}
.chip.pausado{background:var(--orangeBg);color:#b45309}
.chip.hoje{background:var(--orangeBg);color:#b45309;text-transform:none;font-size:.95rem;margin-left:.6rem}
.chip.atras{background:var(--redBg);color:#b91c1c;text-transform:none;font-size:.95rem;margin-left:.6rem}

/* barra */
.bar{height:.6rem;border-radius:1rem;background:#e8ebf0;overflow:hidden;flex:1}
.bar i{display:block;height:100%;border-radius:1rem;background:var(--blue)}
.pct{display:flex;align-items:center;gap:.8rem}
.pct span{width:3.6rem;text-align:right;font-size:1.1rem;color:var(--slate);font-variant-numeric:tabular-nums}

/* detalhamento por responsável */
.pessoa{background:var(--card);border:1px solid var(--linha);border-radius:.8rem;padding:1.1rem 1.8rem;flex:1}
.pessoa h2{font-size:2.1rem;font-weight:700;display:flex;gap:1rem;align-items:baseline;margin-bottom:.5rem}
.pessoa h2 small{font-size:1.15rem;font-weight:400;color:var(--mut)}
.pessoa h2 .pg{margin-left:auto;font-size:1rem;color:var(--mut);font-family:var(--mono)}
.td{display:grid;grid-template-columns:1fr 9rem 18rem 17rem;gap:1rem;align-items:center;padding:.5rem 0;border-top:1px solid var(--linha);font-size:1.35rem;min-width:0}
.td.cab{border-top:0;border-bottom:2px solid var(--linha2);font-family:var(--mono);font-size:.9rem;letter-spacing:.1em;color:var(--mut);padding:.4rem 0}
.td.gr{display:block;border-top:0;padding:.7rem 0 .15rem}
.td .ti{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.td .dt{font-variant-numeric:tabular-nums}
.td .mut{color:var(--mut)}
.td .prazo{display:flex;align-items:center;white-space:nowrap}
.td.atr{background:linear-gradient(90deg,#fff6f6,#fff)}

/* desempenho */
.rank{background:var(--card);border:1px solid var(--linha);border-radius:.8rem;padding:.9rem 1.6rem;flex:1;display:flex;flex-direction:column;min-height:0}
.rank .titulo{font-family:var(--mono);font-size:.95rem;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);margin-bottom:.4rem;display:flex}
.rl{display:grid;grid-template-columns:3.4rem 1fr 7rem 8rem 7rem 1.4fr 7rem;gap:1rem;align-items:center;font-size:1.45rem;padding:0 .4rem;min-width:0}
.rl.cab{font-family:var(--mono);font-size:.9rem;letter-spacing:.1em;color:var(--mut);padding-bottom:.45rem;border-bottom:2px solid var(--linha2);text-transform:uppercase;flex:none}
.rl.r{flex:1;max-height:3.9rem;border-top:1px solid var(--linha)}
.rl .n{font-family:var(--mono);color:var(--mut);font-size:1.1rem;text-align:center}
.rl .who{display:flex;align-items:center;gap:.9rem;font-weight:600;min-width:0}
.rl .who span.nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ini{width:2.5rem;height:2.5rem;border-radius:50%;background:#e8ebf0;color:#334155;display:grid;place-items:center;font-size:.95rem;font-weight:700;flex:none}
.rl .num{font-family:var(--mono);color:var(--slate);font-variant-numeric:tabular-nums}
.rl .num.t{font-weight:700;color:var(--tx)}
.rl .num.late{color:var(--orange);font-weight:600}
.prop{display:flex;height:.8rem;border-radius:1rem;overflow:hidden;background:#e8ebf0}
.prop i{display:block;height:100%}
.prop .ok{background:var(--blue)}.prop .no{background:var(--orange)}
.rl .pc{font-family:var(--mono);font-weight:700;text-align:right}
.rl.top{background:linear-gradient(90deg,#fff3dc,#fffaf0 55%,#fff)}
.rl.top .n{font-size:1.9rem;color:inherit}
.rl.t1 .n{color:#c58a00}.rl.t2 .n{color:#7b8794}.rl.t3 .n{color:#a8651f}
.rl.top .who{font-size:1.65rem}
.rl.top .ini{width:3rem;height:3rem;font-size:1.1rem;background:#fff;border:2px solid #f0c36a}
.leg{margin-left:auto;display:flex;gap:1.4rem;font-size:1rem;color:var(--mut);font-family:var(--sans);text-transform:none;letter-spacing:0}
.leg i{display:inline-block;width:.7rem;height:.7rem;border-radius:50%;margin-right:.4rem}

/* entregas por período */
.periodos{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;flex:1;min-height:0}
.per{background:var(--card);border:1px solid var(--linha);border-radius:.8rem;padding:1rem 1.5rem;display:flex;flex-direction:column;min-height:0}
.per h3{font-family:var(--mono);font-size:.95rem;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);margin-bottom:.5rem}
.pl{display:grid;grid-template-columns:5.2rem 1fr 3rem;gap:.9rem;align-items:center;flex:1;max-height:3.1rem;font-size:1.25rem}
.pl .r{font-family:var(--mono);color:var(--slate)}
.pl .v{font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.pl .bar i{background:var(--blue)}
.pl.hoje .bar i{background:var(--acc)}

/* destaque do dia */
.dest{display:grid;gap:1rem;flex:1;min-height:0}
.dcard{background:var(--card);border:1px solid var(--linha);border-top:.5rem solid #f0c36a;border-radius:.8rem;padding:1.3rem 2rem;display:flex;gap:2rem;min-height:0;background-image:linear-gradient(90deg,#fff7e6,#fff 60%)}
.dcard .big{width:9.5rem;height:9.5rem;border-radius:50%;background:#fff;border:.3rem solid #f0c36a;display:grid;place-items:center;font-size:3.4rem;font-weight:700;color:#334155;flex:none;font-style:normal}
.dtx{flex:1;min-width:0;display:flex;flex-direction:column}
.dtx .rot{font-family:var(--mono);font-size:1rem;letter-spacing:.1em;text-transform:uppercase;color:#b07a00}
.dtx h3{font-size:3.2rem;font-weight:700;line-height:1.1;margin:.2rem 0}
.dtx .dn{font-size:1.5rem;color:var(--slate)}
.dtx .dn b{font-size:2.6rem;color:var(--tx);margin-right:.3rem}
.dlst{margin-top:.8rem}
.dl{display:flex;gap:1rem;justify-content:space-between;font-size:1.35rem;padding:.4rem 0;border-top:1px solid var(--linha)}
.dl .ti{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.dl .hr{font-family:var(--mono);color:var(--mut)}
.edest{background:var(--card);border:1px solid var(--linha);border-radius:.8rem;padding:.9rem 1.8rem;display:flex;gap:1.4rem;align-items:center}
.edest .em{font-size:3rem}
.edest small{display:block;font-family:var(--mono);font-size:.95rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.edest b{display:block;font-size:1.7rem}
.edest span{color:var(--orange);font-size:1.2rem;font-weight:600}

/* rodapé */
footer{display:flex;align-items:center;justify-content:space-between;gap:2rem;border-top:1px solid #d5d9e0}
.faixa{font-size:1.25rem;font-weight:500;color:var(--slate);transition:opacity .5s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.faixa{flex:1;min-width:0}
.status{font-size:1.05rem;color:var(--mut);white-space:nowrap;flex-shrink:0;font-variant-numeric:tabular-nums}
.status.alerta{background:#fff0c2;color:#8a5a00;font-weight:700;padding:.25rem .9rem;border-radius:.4rem;font-size:1.2rem}
.pontos{display:flex;gap:.35rem;align-items:center;flex-shrink:0}
.pontos i{display:block;width:.6rem;height:.6rem;border-radius:50%;background:#c4cad4}
.pontos i.at{background:var(--navy);transform:scale(1.4)}

/* celebração */
#confete{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:50}
#celebra{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;background:rgba(22,36,63,.78);opacity:0;pointer-events:none;transition:opacity .45s}
#celebra.on{opacity:1}
.cx{background:#fff;border-radius:1.4rem;text-align:center;width:62rem;max-width:90vw;padding:2.6rem 3.4rem;transform:scale(.85);transition:transform .6s cubic-bezier(.2,1.6,.4,1);border-top:.9rem solid var(--acc)}
#celebra.on .cx{transform:scale(1)}
.cx .em{font-size:6rem;line-height:1}
.cx .ct{font-size:3.6rem;font-weight:700;line-height:1.1;margin:1rem 0 .4rem;color:var(--navy)}
.cx .cs{font-size:1.7rem;color:var(--orange);font-weight:600}
.cx .ctt{font-size:2rem;font-weight:500;margin-top:1.2rem;line-height:1.3;color:var(--slate)}
#offline{position:fixed;right:.8rem;bottom:.8rem;width:.9rem;height:.9rem;border-radius:50%;background:var(--red);display:none;z-index:60}