/* NEXXO Workspace · VIS-01 — fundamentos globais (PREM-01D)
   Camada de apresentação carregada depois do CSS de index.html. Só redefine tokens e
   acabamento de componentes existentes: não cria telas, não muda estrutura, seletores
   de JS, gráficos ou regras. reset.html não carrega este arquivo. */

/* ---------- 1. Tokens ---------- */
:root{
  --r:14px;--r-sm:10px;
  --nav-line:#234055;--nav-text:#E5F2F6;--nav-sub:#9CB3C5;--nav-dim:#84A1B5;
  --nav-active:#133D48;--nav-accent:#70E2D0;
  font-synthesis:none;
}
html[data-theme="light"]{
  color-scheme:light;
  --nav:#0D1D2D;
  --bg:#F6F8FA;--card:#FFFFFF;--raised:#F1F5F7;--ghost:#F9FBFC;--input:#FFFFFF;
  --line:#E4EAF0;--line2:#D3DDE6;
  --text:#152B3D;--sub:#5A6F82;--sub2:#5A6F82;
  --mint:#07897F;--mintlight:#06786F;--action:#06786F;--action-hover:#05685F;--on-action:#FFFFFF;
  --blue:#477CCB;--orange:#AA761F;--red:#BE5060;--green:#17876F;--purple:#7B62C9;
  --blue-fg:#2F5EA8;--blue-soft:#EAF1FB;--orange-fg:#85570A;--orange-soft:#FDF3E1;
  --red-fg:#A8384A;--red-soft:#FDECEF;--green-fg:#0F6B57;--green-soft:#E6F4EF;
  --purple-fg:#5B43B0;--purple-soft:#F0ECFB;
  --shadow:none;--float:0 16px 48px rgba(18,43,61,.14);--scrim:rgba(13,29,45,.46);
  --th-bg:rgba(21,43,61,.035);--scroll-shadow:rgba(21,43,61,.22);
}
html[data-theme="dark"]{
  color-scheme:dark;
  --nav:#0D1D2D;
  --bg:#091520;--card:#101F2C;--raised:#1B3040;--ghost:#0D1A26;--input:#142534;
  --line:#24394A;--line2:#304658;
  --text:#F1F7FA;--sub:#A9BBC8;--sub2:#8FA6B6;
  --mint:#32D4BC;--mintlight:#32D4BC;--action:#32D4BC;--action-hover:#4FE0CA;--on-action:#04302D;
  --blue:#82B3FF;--orange:#F2BD6B;--red:#FF8294;--green:#68DCB5;--purple:#B9A4FF;
  --blue-fg:#9CC3FF;--blue-soft:#1A334F;--orange-fg:#F2BD6B;--orange-soft:#493922;
  --red-fg:#FF93A3;--red-soft:#462B3A;--green-fg:#68DCB5;--green-soft:#174439;
  --purple-fg:#C4B3FF;--purple-soft:#2E2A52;
  --shadow:none;--float:0 20px 56px rgba(0,0,0,.5);--scrim:rgba(3,10,17,.68);
  --th-bg:rgba(0,0,0,.2);--scroll-shadow:rgba(0,0,0,.6);
}

/* ---------- 2. Base e tipografia ---------- */
body{font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3{letter-spacing:-.02em}
h1{font-size:clamp(25px,2.1vw,30px);font-weight:700;letter-spacing:-.028em;line-height:1.2}
h2{font-size:17px}
h3{font-size:14px}
::selection{background:rgba(19,184,167,.28)}
:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.kpi strong,.mini-kpi strong,.donut-inner strong,.report-stat b,.table td,.legendrow strong,.marker,.pagination,.count{font-variant-numeric:tabular-nums}

/* ---------- 3. Campos e botões ---------- */
input,select,textarea{border-color:var(--line2);border-radius:var(--r-sm);padding:9px 12px;font-size:14px;transition:border-color .15s ease,box-shadow .15s ease}
input::placeholder,textarea::placeholder{color:var(--sub2);opacity:1}
input:focus,select:focus,textarea:focus{border-color:var(--mint);box-shadow:0 0 0 3px rgba(19,184,167,.2)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:0}
button:disabled{opacity:.45}
.btn{border-color:var(--line2);border-radius:var(--r-sm);padding:9px 14px;font-size:13px;font-weight:650;line-height:1.35;transition:background .15s ease,border-color .15s ease,color .15s ease}
.btn:hover,.iconbtn:hover{filter:none;background:var(--raised)}
.btn.primary{background:var(--action);border-color:var(--action);color:var(--on-action)}
.btn.primary:hover{background:var(--action-hover);border-color:var(--action-hover)}
.btn.ghost:hover{background:var(--raised)}
.btn.sm{padding:6px 10px;font-size:12px}
.btn.warn{border-color:var(--red);color:var(--red-fg)}
.btn.warn:hover{background:var(--red-soft)}
.btn:disabled:hover{background:var(--card)}
.link{font-size:12.5px;font-weight:650}
.link:hover{text-decoration:underline;text-underline-offset:3px}
.iconbtn{width:38px;height:38px;border-color:var(--line2);border-radius:var(--r-sm);transition:background .15s ease}

/* ---------- 4. Navegação lateral: escura nos dois temas ---------- */
.sidebar{
  --text:var(--nav-text);--sub:var(--nav-sub);--sub2:var(--nav-dim);--line:var(--nav-line);
  --card:rgba(255,255,255,.035);--raised:rgba(255,255,255,.045);--mintlight:var(--nav-accent);--blue:#8DBBFF;
  width:244px;padding:22px 14px 16px;color:var(--nav-text);border-right-color:var(--nav-line);
}
.brand{padding:2px 10px 22px;margin-bottom:18px;border-bottom:1px solid var(--nav-line)}
.brand img{width:38px;height:38px}
.brand strong{font-size:19px;letter-spacing:.19em;color:#fff}
.brand small{font-size:9.5px;letter-spacing:.125em;color:var(--nav-dim)}
.workspace{margin:0 4px 22px;padding:11px 12px;gap:10px}
.workspace-ico{padding:7px;font-size:16px;background:rgba(141,187,255,.14)}
.workspace strong{font-size:12.5px}
.workspace small{font-size:12px;margin-top:2px}
.caption{font-size:11px;letter-spacing:.13em;font-weight:700;margin-bottom:10px}
.navbtn{font-size:13.5px;font-weight:600;padding:10px 12px;margin:2px 0;transition:background .15s ease,color .15s ease}
.navbtn:hover{background:rgba(255,255,255,.07);color:#fff}
.navbtn.active,.navbtn.active:hover{background:var(--nav-active);color:var(--nav-accent)}
.navbtn.indent{font-size:12.5px}
.sideline{border-radius:11px;padding:12px}
.sideline strong{font-size:12.5px}
.sideline small{font-size:12px;margin-top:3px}
.version{font-size:11.5px;padding:12px 8px 0}

/* ---------- 5. Barra superior e cabeçalho de página ---------- */
.topbar{height:64px;background:var(--card);gap:12px}
.breadcrumbs{font-size:13px}
.breadcrumbs b{font-weight:650}
.top-actions{gap:10px}
.searchbox input{height:38px;font-size:13px;background:var(--ghost)}
.searchbox:before{top:5px;color:var(--sub2)}
.search-clear{top:5px}
.avatar{width:36px;height:36px;background:#214459;color:#DBF3F3;border:0;font-size:12px;border-radius:var(--r-sm)}
.avatar:hover{background:#2A5670}
.save-state{font-size:12px}
.save-state.error{color:var(--red-fg)}
.content{padding:30px clamp(18px,2.6vw,36px) 64px}
.pagehead{margin-bottom:22px}
.eyebrow{font-size:11.5px;letter-spacing:.12em;font-weight:750;margin-bottom:8px}
.subhead{font-size:14.5px;margin-top:8px}
.foot{font-size:12px}

/* ---------- 6. Superfícies: borda em vez de sombra ---------- */
.pad{padding:20px}
.c-head h2{font-size:15.5px;font-weight:680}
.c-head p{font-size:12.5px;margin-top:4px}
.subtle,.note,.chart-note,.right-note{font-size:12px}
.chartkey{font-size:12px}
.legendrow{font-size:12.5px}
.legendrow strong{font-size:13px}
.legend-action:hover{background:var(--ghost)}
.donut-inner span{font-size:11px;letter-spacing:.12em}
.xlabel{font-size:11px}
.mutedbox{border-radius:12px}
.empty{font-size:13.5px}

/* Indicadores (mesmos dados e mesma ordem) */
.kpi{padding:18px;min-height:124px}
.kpi .k-icon,.marker{background:var(--blue-soft);color:var(--blue-fg)}
.kpi .k-name{font-size:13px;font-weight:600;margin-left:10px}
.kpi strong{font-weight:750;margin-top:10px}
.kpi small{font-size:12px;margin-top:6px}
.kpi-hit{transition:border-color .15s ease,background .15s ease}
.kpi-hit:hover{transform:none;background:var(--ghost);border-color:var(--mint)}
.kpi-hit.is-selected{background:var(--card);border-color:var(--mint);box-shadow:inset 0 2px 0 var(--mint)}
.kpi-hit[data-filter-role="BACKUP"].is-selected{background:var(--card);border-color:var(--blue);box-shadow:inset 0 2px 0 var(--blue)}
.kpi-hit[data-filter-role="SUPORTE"].is-selected{background:var(--card);border-color:var(--orange);box-shadow:inset 0 2px 0 var(--orange)}
.kpi-hit .kpi-foot{font-size:12px}
.mini-kpi{padding:16px}
.mini-kpi span{font-size:12.5px}
.mini-kpi strong{font-weight:720}
.mini-kpi small{font-size:12px}
.progress{height:6px}

/* ---------- 7. Estados ---------- */
.pill{font-size:12px;font-weight:650;padding:3px 9px;border-radius:999px;line-height:1.5}
.pill:before{width:6px;height:6px}
.pill.green{color:var(--green-fg);background:var(--green-soft)}
.pill.blue{color:var(--blue-fg);background:var(--blue-soft)}
.pill.orange{color:var(--orange-fg);background:var(--orange-soft)}
.pill.red{color:var(--red-fg);background:var(--red-soft)}
.pill.purple{color:var(--purple-fg);background:var(--purple-soft)}
.pill.grey{color:var(--sub);background:var(--raised)}
.chip{font-size:12px;border-radius:8px;border-color:var(--line2)}
.deadline-overdue{color:var(--red-fg)}

/* ---------- 8. Tabelas e listas ---------- */
.table th{font-size:11.5px;letter-spacing:.05em;font-weight:650;color:var(--sub);padding:10px 12px;background:var(--th-bg)}
.table th:first-child{border-top-left-radius:8px}
.table th:last-child{border-top-right-radius:8px}
.table td{font-size:13px;line-height:1.4;padding:13px 12px}
.table tbody tr:hover{background:var(--th-bg)}
.table .projcell{font-size:13px;font-weight:620;line-height:1.35;text-wrap:pretty;overflow-wrap:break-word}
.table .meta{font-size:12px;margin-top:3px}
.sort-head{font-size:11.5px;letter-spacing:.05em;font-weight:650}
.portfolio-row td:first-child{padding-left:14px}
.portfolio-title{font-weight:620;line-height:1.35;align-items:flex-start;text-wrap:pretty;overflow-wrap:break-word}
.portfolio-listhead h2{font-size:16px}
.portfolio-listhead .count{font-size:12.5px}
.pagination{font-size:12.5px}
.pagination button{border-radius:9px;border-color:var(--line2);font-size:12.5px}
.listitem{padding:12px 0}
.listitem strong{font-size:13.5px;font-weight:650}
.listitem small{font-size:12px}
.marker{width:30px;height:30px;border-radius:9px;font-size:12.5px}
.clickable-list:hover{background:var(--ghost)}
.report-stat span{font-size:13px}
.report-stat b{font-size:16px}

/* Tabelas mais largas que o cartão rolam dentro dele (como antes). A sombra na borda
   indica que há mais colunas e some quando a rolagem chega ao fim daquele lado. */
.table-scroll{
  background:
    linear-gradient(to right,var(--card) 40%,transparent) 0 0/36px 100% no-repeat local,
    linear-gradient(to left,var(--card) 40%,transparent) 100% 0/36px 100% no-repeat local,
    linear-gradient(to right,var(--scroll-shadow),transparent) 0 0/14px 100% no-repeat scroll,
    linear-gradient(to left,var(--scroll-shadow),transparent) 100% 0/14px 100% no-repeat scroll;
  scrollbar-width:thin;scrollbar-color:var(--line2) transparent;
}
/* Nomes longos: a coluna do nome recebe largura suficiente para quebrar em no máximo duas ou três linhas. */
.table{min-width:560px}
.table td:has(>.projcell){min-width:230px;width:44%}
.table td:has(>.meta){min-width:230px}
.portfolio-row td:first-child{min-width:250px;width:30%}

/* ---------- 9. Projeto: identidade, abas, formulários ---------- */
.tabline{gap:4px}
.tab{font-size:13.5px;font-weight:620;padding:11px 14px;transition:color .15s ease,border-color .15s ease}
.tab:hover{color:var(--text)}
.tab.active,.tab.active:hover{color:var(--mintlight)}
.proj-id{font-size:12px;letter-spacing:.06em}
.project-fields span{font-size:12px}
.project-fields b{font-size:13.5px;font-weight:650}
.field label{font-size:12.5px;font-weight:600}
.formheading{font-size:15px}
.filters{gap:10px}
.seg{border-radius:var(--r-sm)}
.seg button{font-size:12.5px;font-weight:650;padding:7px 11px;transition:background .15s ease,color .15s ease}
.seg button.selected{box-shadow:0 1px 2px rgba(9,21,32,.12)}
.flow-item{padding:16px}
.flow-item .cap{font-size:11px;letter-spacing:.07em}
.flow-item h3{font-size:15px}
.flow-item .details{font-size:12.5px}

/* ---------- 10. Camadas elevadas: únicas com sombra ---------- */
.modalwrap{background:var(--scrim);backdrop-filter:blur(3px)}
.modal{border-radius:16px;padding:24px;box-shadow:var(--float)}
.modal h2{font-size:19px}
.toast{background:#12303A;border-color:#2A6B6A;color:#EAF7F6;font-size:13.5px;border-radius:12px;box-shadow:var(--float)}

/* ---------- 11. Tela de acesso (sempre escura, como já publicada) ---------- */
.auth-outer{background:#091520;color:#F1F7FA}
.auth-panel{background:#101F2C;border-color:#24394A;border-radius:16px;box-shadow:0 20px 56px rgba(0,0,0,.5)}
.auth-panel h1{font-size:27px}
.auth-panel p{font-size:13px;color:#A9BBC8}
.auth-panel label{font-size:12.5px;font-weight:600}
.auth-panel input{background:#142534;color:#F1F7FA;border-color:#304658}
.auth-panel button{height:44px;font-size:14px}
.auth-error{font-size:12.5px;color:#FF93A3}
.auth-panel .auth-recover{font-size:13px;color:#32D4BC}

/* ---------- 12. Responsividade base ---------- */
@media(max-width:900px){
  .sidebar.open{box-shadow:var(--float)}
  .content{padding:22px 16px 52px}
}
@media(max-width:820px){
  .mobile-proj{background:var(--card);border-radius:12px}
  .mobile-proj .pname{font-size:14px;font-weight:650}
  .mobile-proj .pmeta,.mobile-proj .pfoot{font-size:12px}
}
@media(max-width:620px){
  .searchbox input{font-size:13px;height:38px}
  .top-actions #theme,.topbar #mobilemenu{width:38px;height:38px}
  .topbar .btn.primary,.top-actions>.btn.primary{padding:9px 11px;font-size:12.5px}
  .kpi{padding:14px;min-height:120px}
  .kpi .k-name{display:block;font-size:12.5px;margin:8px 0 0}
  .kpi-hit{min-height:120px;padding:14px}
  .kpi-hit .k-name{font-size:12.5px;margin:8px 0 0}
  .kpi-hit strong{font-size:27px}
  .kpi-hit .kpi-foot{font-size:12px}
  .pad{padding:16px}
  .table th{padding:9px 10px}
  .table td{font-size:12.5px;padding:11px 10px}
  .table .projcell{font-size:12.5px}
  .table{min-width:520px}
  .table td:has(>.projcell){min-width:190px;width:30%}
  .table td:has(>.meta){min-width:190px}
  .table td:has(>.projcell)+td{min-width:132px;width:132px}
  .modal{padding:20px}
  .toast{left:16px;right:16px;bottom:16px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}
@media print{
  .toast,.modalwrap{display:none}
}