@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,400;0,600;0,800;1,800&family=Inter:wght@400;500;600&display=swap');
:root{
  --bg:#041223; --line:rgba(168,184,200,.18);
  --txt:#F5F5F7; --mut:#A8B8C8; --or:#FF8100; --blue:#3A5ADE; --ok:#3ecf8e; --warn:#ffb020; --bad:#ff5d5d;
  /* superfícies claras (cards, linha do tempo, editor, login) */
  --sup:rgba(243,246,250,.93); --sup-borda:rgba(255,255,255,.55); --sup-txt:#0b1a2b; --sup-mut:#4b5d72; --sup-line:rgba(4,18,35,.13);
  --sup-or:#d96300; --sup-ok:#1b7f55; --sup-warn:#9a5b00; --sup-bad:#c62828; --sup-blue:#2b48c8;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:Inter,system-ui,Segoe UI,sans-serif;background:var(--bg);color:var(--txt);min-height:100vh;line-height:1.5;overflow-x:hidden}
/* Fundo: logo do projeto com desfoque gaussiano leve */
.fundo{position:fixed;inset:0;z-index:-2;background:url('../img/bg-tracao.jpg') center/cover no-repeat;filter:blur(5px);transform:scale(1.04)}
.fundo::after{content:"";position:fixed;inset:0;background:linear-gradient(90deg,rgba(4,18,35,.86) 0%,rgba(4,18,35,.55) 45%,rgba(4,18,35,.78) 100%)}
.app{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:100vh}
nav.lateral{position:sticky;top:0;height:100vh;padding:20px 14px;background:rgba(4,18,35,.78);border-right:1px solid var(--line);backdrop-filter:blur(10px);display:flex;flex-direction:column;gap:6px;overflow:auto;min-width:0}
nav.lateral img.logo{width:100%;border-radius:8px;margin-bottom:6px}
nav.lateral .sub{font:600 10px 'Exo 2';letter-spacing:.25em;color:var(--mut);text-transform:uppercase;margin:12px 8px 4px}
nav.lateral a{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 12px;border-radius:8px;color:var(--txt);text-decoration:none;font-weight:500;font-size:14px;border-left:3px solid transparent}
nav.lateral a:hover{background:rgba(255,255,255,.06)}
nav.lateral a.on{background:rgba(255,129,0,.14);border-left-color:var(--or);color:#fff}
nav.lateral a .n{font-size:11px;background:var(--or);color:#041223;border-radius:20px;padding:1px 8px;font-weight:700}
.rodape-nav{margin-top:auto;font-size:11px;color:var(--mut);padding:8px;overflow-wrap:anywhere}
main{padding:28px clamp(16px,4vw,48px) 60px;max-width:1200px;width:100%;min-width:0}
.topo{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.kicker{font:600 11px 'Exo 2';letter-spacing:.28em;color:var(--or);text-transform:uppercase}
h1{font:800 clamp(26px,4vw,40px) 'Exo 2';margin:4px 0 0;letter-spacing:.01em;overflow-wrap:anywhere}
h2{font:800 20px 'Exo 2';margin:0 0 12px}
h3{font:600 15px 'Exo 2';margin:0 0 6px;color:var(--or);letter-spacing:.03em}
p{margin:.3em 0}
.mut{color:var(--mut)}
.grid{display:grid;gap:16px}
.grid>*{min-width:0}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}

/* ---- superfícies claras: tudo dentro herda texto escuro ---- */
.card,.ev,.modal-corpo{
  --txt:var(--sup-txt); --mut:var(--sup-mut); --line:var(--sup-line); --or:var(--sup-or); --ok:var(--sup-ok); --warn:var(--sup-warn); --bad:var(--sup-bad); --blue:var(--sup-blue);
  color:var(--txt);
}
.card{background:var(--sup);border:1px solid var(--sup-borda);border-radius:14px;padding:18px 20px;backdrop-filter:blur(10px);box-shadow:0 8px 28px rgba(0,0,0,.22);min-width:0;overflow-wrap:break-word}
.card.destaque{border-color:rgba(255,129,0,.75);box-shadow:0 0 0 1px rgba(255,129,0,.25),0 8px 28px rgba(0,0,0,.22)}
/* tabelas largas rolam dentro do card em vez de vazar (o JS envolve cada tabela em .tabela) */
.tabela{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabela table{min-width:420px}
.kpi .v{font:800 28px/1.1 'Exo 2';color:var(--txt);overflow-wrap:anywhere}
.kpi .v.peq{font-size:22px}
.kpi .v.or{color:var(--or)}
.kpi .l{font-size:12px;color:var(--mut);text-transform:uppercase;letter-spacing:.08em;margin-top:4px}
ul,ol{margin:.3em 0;padding-left:1.2em} li{margin:.25em 0}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font:600 11px 'Exo 2';letter-spacing:.12em;text-transform:uppercase;color:var(--mut);padding:8px 10px;border-bottom:1px solid var(--line)}
td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top;overflow-wrap:break-word}
tr:last-child td{border-bottom:0}
.tag{display:inline-block;font-size:11px;font-weight:600;padding:2px 9px;border-radius:20px;border:1px solid var(--line);color:var(--mut);max-width:100%;overflow-wrap:anywhere;line-height:1.5}
.tag.treino{color:var(--blue);border-color:var(--blue)}.tag.gestao{color:var(--or);border-color:var(--or)}.tag.master{color:var(--mut);border-color:var(--mut)}.tag.campo{color:var(--ok);border-color:var(--ok)}.tag.evento{color:#fff;background:var(--or);border-color:var(--or)}
.tag.ok{color:var(--ok);border-color:var(--ok)}.tag.warn{color:var(--warn);border-color:var(--warn)}.tag.bad{color:var(--bad);border-color:var(--bad)}
.topo .tag.treino{color:#9db4ff}.topo .tag.master{color:#c6d3e0;border-color:#7a8ea3}
.fonte{font-size:11px;color:var(--mut)}
.ded{font-size:11px;color:var(--warn)}
/* linha do tempo */
.tl{position:relative;padding-left:26px}
.tl::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:rgba(168,184,200,.25)}
.ev{position:relative;padding:12px 16px;margin-bottom:10px;background:var(--sup);border:1px solid var(--sup-borda);border-radius:12px;display:grid;grid-template-columns:78px minmax(0,1fr);gap:14px;box-shadow:0 6px 20px rgba(0,0,0,.18)}
.ev::before{content:"";position:absolute;left:-23px;top:20px;width:12px;height:12px;border-radius:50%;background:var(--bg);border:2px solid #A8B8C8}
.ev.passado{opacity:.7}.ev.passado::before{background:#3ecf8e;border-color:#3ecf8e}
.ev.proximo{border-color:#FF8100;box-shadow:0 0 0 2px rgba(255,129,0,.35),0 6px 20px rgba(0,0,0,.18)}.ev.proximo::before{background:#FF8100;border-color:#FF8100}
.ev .d{font:800 22px 'Exo 2';color:var(--or);line-height:1}.ev .d small{display:block;font:600 11px Inter;color:var(--mut);margin-top:4px;letter-spacing:.08em}
.ev .t{font-weight:600}
.barra{height:8px;background:rgba(4,18,35,.1);border-radius:8px;overflow:hidden}.barra>i{display:block;height:100%;background:linear-gradient(90deg,#3A5ADE,#FF8100)}
.filtros{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
button,.btn{font:600 13px Inter;color:var(--txt);background:rgba(255,255,255,.08);border:1px solid var(--line);border-radius:8px;padding:7px 14px;cursor:pointer;text-decoration:none;display:inline-block;max-width:100%}
.card button,.card .btn,.ev .btn,.modal-corpo button{background:rgba(4,18,35,.06)}
button.on,.btn.pri,.card .btn.pri,.modal-corpo .btn.pri{background:#FF8100;border-color:#FF8100;color:#041223}
button:hover,.btn:hover{filter:brightness(1.08)}
.pend{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;padding:12px 0;border-bottom:1px solid var(--line)}
.pend input{width:18px;height:18px;accent-color:#FF8100;margin-top:3px}
.pend.feito .tx{text-decoration:line-through;opacity:.55}
.fase{border-left:4px solid rgba(4,18,35,.15)}.fase.concluida{border-left-color:var(--sup-ok)}.fase.andamento{border-left-color:#FF8100}.fase.futura{border-left-color:#3a5ade}
.pill-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
@media(max-width:860px){.app{grid-template-columns:1fr}nav.lateral{position:static;height:auto;flex-direction:row;flex-wrap:wrap;padding:10px}nav.lateral img.logo,.rodape-nav,.sub{display:none}.ev{grid-template-columns:1fr}.kpi .v{font-size:24px}}
@media print{.fundo,nav.lateral,.filtros,.acoes-topo{display:none}body{background:#fff;color:#000}.app{display:block}.card,.ev{background:#fff;color:#000;border-color:#bbb;box-shadow:none}.mut,.fonte{color:#444}}

/* ---- formulários, edição, login, avisos ---- */
input:not([type]),input[type=text],input[type=email],input[type=password],input[type=number],textarea,select{font:400 14px Inter,sans-serif;color:#0b1a2b;background:#fff;border:1px solid rgba(4,18,35,.22);border-radius:8px;padding:9px 11px;width:100%;max-width:100%}
select{width:auto}
input:focus,textarea:focus,select:focus{outline:2px solid #FF8100;outline-offset:0}
input[type=checkbox]{accent-color:#FF8100}
textarea{resize:vertical}
.acoes-topo{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.acesso{position:fixed;inset:0;z-index:5;display:grid;place-items:center;padding:16px;background:rgba(4,18,35,.45);overflow:auto}
.caixa{width:min(420px,100%)}
.erro{color:var(--bad);min-height:1.2em;font-size:13px}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:100;background:#0d2a1f;border:1px solid #3ecf8e;color:#dff7ec;padding:11px 18px;border-radius:10px;max-width:90vw;box-shadow:0 8px 30px rgba(0,0,0,.5)}
.toast.ruim{background:#3a1010;border-color:#ff5d5d;color:#ffe3e3}
.modal{position:fixed;inset:0;z-index:60;background:rgba(2,8,16,.82);display:grid;place-items:center;padding:16px}
.modal-corpo{background:#eef2f8;border:1px solid var(--sup-borda);border-radius:14px;width:min(980px,100%);max-height:92vh;display:flex;flex-direction:column;min-width:0}
.modal-topo{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.modal-meio{overflow:auto;padding:16px 18px}
.ed-campo,.ed-grupo{margin:10px 0;min-width:0}
.ed label{display:block;font:600 11px 'Exo 2';letter-spacing:.1em;text-transform:uppercase;color:var(--or);margin-bottom:4px}
.ed-obj{border-left:2px solid var(--line);padding-left:12px;min-width:0}
.ed-lista{display:grid;gap:10px}
.ed-item{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:rgba(255,255,255,.6);min-width:0}
.ed-item-topo{display:flex;justify-content:space-between;margin-bottom:6px}
.ed-acoes button{padding:2px 9px}
button.perigo{color:var(--bad)}
.matriz{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:10px}
.matriz label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--mut);min-width:0}
.matriz select{width:100%}
.nova input{width:100%}
.nova .grid{align-items:center}

/* ---- diagnóstico: barras ---- */
.barras{display:grid;gap:10px}
.barra-l{min-width:0}
.barra-t{display:flex;justify-content:space-between;gap:10px;font-size:13px;margin-bottom:3px}
.barra-t span{min-width:0;overflow-wrap:anywhere}
.npsbar{display:flex;height:14px;border-radius:8px;overflow:hidden;background:rgba(4,18,35,.1);margin:8px 0}
.npsbar i{display:block;height:100%}

/* ===== Tema escuro (o visual anterior: cards em vidro escuro, texto claro) ===== */
:root[data-tema="escuro"]{
  --sup:rgba(10,24,42,.72); --sup-borda:rgba(168,184,200,.18); --sup-txt:#F5F5F7; --sup-mut:#A8B8C8; --sup-line:rgba(168,184,200,.18);
  --sup-or:#FF8100; --sup-ok:#3ecf8e; --sup-warn:#ffb020; --sup-bad:#ff5d5d; --sup-blue:#9db4ff;
}
:root[data-tema="escuro"] .card{backdrop-filter:blur(8px);box-shadow:none}
:root[data-tema="escuro"] .card.destaque{border-color:rgba(255,129,0,.5);box-shadow:none}
:root[data-tema="escuro"] .ev{box-shadow:none}
:root[data-tema="escuro"] .ev.proximo{box-shadow:0 0 0 1px rgba(255,129,0,.25)}
:root[data-tema="escuro"] .card button,:root[data-tema="escuro"] .card .btn,:root[data-tema="escuro"] .ev .btn,:root[data-tema="escuro"] .modal-corpo button{background:rgba(255,255,255,.07)}
:root[data-tema="escuro"] .barra,:root[data-tema="escuro"] .npsbar{background:rgba(255,255,255,.1)}
:root[data-tema="escuro"] .fase{border-left-color:rgba(168,184,200,.18)}
:root[data-tema="escuro"] .tag.treino{color:#9db4ff;border-color:#3a5ade}
:root[data-tema="escuro"] .tag.master{color:#c6d3e0;border-color:#7a8ea3}
:root[data-tema="escuro"] input:not([type]),:root[data-tema="escuro"] input[type=text],:root[data-tema="escuro"] input[type=email],:root[data-tema="escuro"] input[type=password],:root[data-tema="escuro"] input[type=number],:root[data-tema="escuro"] textarea,:root[data-tema="escuro"] select{color:#F5F5F7;background:rgba(4,18,35,.7);border-color:rgba(168,184,200,.25)}
:root[data-tema="escuro"] select option{background:#0a182a;color:#F5F5F7}
:root[data-tema="escuro"] .modal-corpo{background:#0a182a}
:root[data-tema="escuro"] .ed-item{background:rgba(255,255,255,.03)}

/* seletor de tema */
.tema-sel{display:flex;gap:4px;margin-top:8px}
.tema-sel button{flex:1;padding:5px 8px;font-size:12px}
.caixa .tema-sel{margin-top:14px}
:root[data-tema="escuro"] .card .btn.pri,:root[data-tema="escuro"] .card button.on,:root[data-tema="escuro"] .ev .btn.pri,:root[data-tema="escuro"] .modal-corpo .btn.pri,:root[data-tema="escuro"] .modal-corpo button.on{background:#FF8100;border-color:#FF8100;color:#041223}

/* ---- termômetro do projeto (Visão geral) ---- */
.termo-topo{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:baseline;margin-bottom:6px}
.termo-linha{margin:16px 0 6px}
.termo-rot{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:14px;margin-bottom:6px}
.termo-barra{position:relative;height:24px;border-radius:12px;background:rgba(4,18,35,.1);overflow:hidden}
.termo-barra>i{position:absolute;left:0;top:0;height:100%;background:linear-gradient(90deg,#3A5ADE,#FF8100);border-radius:12px;transition:width .4s}
.termo-barra>s{position:absolute;top:0;bottom:0;width:1px;background:rgba(4,18,35,.28)}
.termo-barra.exec>i.real{background:var(--sup-ok)}
.termo-barra.exec>i.prog{background:rgba(255,129,0,.55);border-radius:0 12px 12px 0}
.termo-meses{display:grid;grid-template-columns:repeat(6,1fr);font-size:11px;color:var(--mut);margin-top:4px;text-align:center;letter-spacing:.04em}
.termo-meses span.on{color:var(--or);font-weight:700}
.termo-cats{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;margin-top:8px}
.termo-cats span.bad em{color:var(--bad);font-style:normal;font-weight:600}
:root[data-tema="escuro"] .termo-barra{background:rgba(255,255,255,.12)}
:root[data-tema="escuro"] .termo-barra>s{background:rgba(255,255,255,.3)}
:root[data-tema="escuro"] .termo-barra.exec>i.real{background:#3ecf8e}
/* quadro contrato × realizado */
.quadro td,.quadro th{text-align:center}.quadro td:first-child,.quadro th:first-child{text-align:left}
.quadro tr.atual td{background:rgba(255,129,0,.08)}
.quadro .tag{white-space:nowrap}
/* resumo para copiar */
.resumo textarea{width:100%;font:13px/1.45 ui-monospace,Consolas,monospace;min-height:55vh}