/* NEXXO Workspace · PREM-01D / VIS-02
   Acabamento visual do Painel Executivo EXISTENTE.
   Não altera dados, ordem dos blocos, gráficos, navegação ou regras.
   O seletor de escopo aplica-se apenas à tela com .grid-charts.
   Carregado depois dos fundamentos VIS-01. */

/* Tokens discretos para os dois temas. */
html[data-theme="light"]{
  --nx-dash-surface:#FFFFFF;
  --nx-dash-wash:#F8FAFC;
  --nx-dash-teal-wash:#F2FAF8;
  --nx-dash-green:#107D68;
  --nx-dash-red:#B44859;
  --nx-dash-red-wash:#FFF6F7;
  --nx-dash-blue:#416FB9;
  --nx-dash-blue-wash:#F4F7FD;
  --nx-dash-plot-grid:rgba(58,91,121,.085);
}
html[data-theme="dark"]{
  --nx-dash-surface:#101F2C;
  --nx-dash-wash:#132736;
  --nx-dash-teal-wash:#132D30;
  --nx-dash-green:#69DEC3;
  --nx-dash-red:#FF93A3;
  --nx-dash-red-wash:#2B2431;
  --nx-dash-blue:#A0C3FF;
  --nx-dash-blue-wash:#182C42;
  --nx-dash-plot-grid:rgba(190,214,231,.075);
}

/* 1. Hierarquia da abertura. */
#content:has(> .grid-charts) > .pagehead{
  margin-bottom:23px;
  padding-bottom:19px;
  border-bottom:1px solid var(--line);
}
#content:has(> .grid-charts) > .pagehead h1{
  font-size:clamp(27px,2.25vw,34px);
  letter-spacing:-.035em;
  line-height:1.15;
}
#content:has(> .grid-charts) > .pagehead .subhead{
  max-width:620px;
  font-size:13.5px;
  color:var(--sub);
}
#content:has(> .grid-charts) > .pagehead .actions{
  align-self:flex-end;
}

/* 2. KPIs: métricas idênticas, hierarquia e semântica de atenção. */
#content:has(> .grid-charts) > .kpis{
  gap:13px;
  margin-bottom:20px;
}
#content:has(> .grid-charts) > .kpis > .kpi{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:space-between;
  min-height:148px;
  padding:20px 20px 18px;
  gap:8px;
  overflow:hidden;
  background:linear-gradient(155deg,var(--nx-dash-surface) 55%,var(--nx-dash-wash));
  border-color:var(--line);
}
#content:has(> .grid-charts) > .kpis > .kpi::before{
  content:"";
  position:absolute;
  top:17px;left:0;
  width:3px;height:25px;
  border-radius:0 4px 4px 0;
  background:var(--line2);
}
#content:has(> .grid-charts) > .kpis > .kpi:nth-child(2){
  background:linear-gradient(155deg,var(--nx-dash-surface) 50%,var(--nx-dash-teal-wash));
}
#content:has(> .grid-charts) > .kpis > .kpi:nth-child(2)::before{background:var(--nx-dash-green)}
#content:has(> .grid-charts) > .kpis > .kpi:nth-child(3){
  background:linear-gradient(155deg,var(--nx-dash-surface) 50%,var(--nx-dash-red-wash));
}
#content:has(> .grid-charts) > .kpis > .kpi:nth-child(3)::before{background:var(--nx-dash-red)}
#content:has(> .grid-charts) > .kpis > .kpi:nth-child(4){
  background:linear-gradient(155deg,var(--nx-dash-surface) 50%,var(--nx-dash-blue-wash));
}
#content:has(> .grid-charts) > .kpis > .kpi:nth-child(4)::before{background:var(--nx-dash-blue)}
#content:has(> .grid-charts) > .kpis .k-icon{
  display:inline-grid;
  place-items:center;
  width:30px;height:30px;
  font-size:15px;
  border-radius:9px;
  background:var(--raised);
  color:var(--sub);
}
#content:has(> .grid-charts) > .kpis > .kpi:nth-child(2) .k-icon{color:var(--nx-dash-green);background:var(--green-soft)}
#content:has(> .grid-charts) > .kpis > .kpi:nth-child(3) .k-icon{color:var(--nx-dash-red);background:var(--red-soft)}
#content:has(> .grid-charts) > .kpis > .kpi:nth-child(4) .k-icon{color:var(--nx-dash-blue);background:var(--blue-soft)}
#content:has(> .grid-charts) > .kpis .k-name{
  font-size:12.5px;
  line-height:1.25;
  font-weight:650;
  letter-spacing:0;
  vertical-align:middle;
  margin-left:9px;
}
#content:has(> .grid-charts) > .kpis strong{
  font-size:clamp(31px,2.6vw,39px);
  line-height:1.04;
  margin-top:7px;
  font-weight:730;
  letter-spacing:-.045em;
}
#content:has(> .grid-charts) > .kpis > .kpi:nth-child(3) strong{color:var(--nx-dash-red)}
#content:has(> .grid-charts) > .kpis small{
  font-size:12px;
  line-height:1.4;
  margin-top:0;
  color:var(--sub);
}

/* 3. Visualização: preservar tipos/escala/séries dos três gráficos. */
#content:has(> .grid-charts) > .grid-charts{
  gap:14px;
  margin-bottom:17px;
  grid-template-columns:minmax(0,1fr) minmax(0,1.22fr) minmax(0,.98fr);
  align-items:stretch;
}
#content:has(> .grid-charts) > .grid-charts > .card{
  min-width:0;
  padding:21px;
}
#content:has(> .grid-charts) .c-head{
  gap:14px;
  margin-bottom:16px;
}
#content:has(> .grid-charts) .c-head h2{
  font-weight:700;
  font-size:15px;
  letter-spacing:-.015em;
}
#content:has(> .grid-charts) .c-head p{
  font-size:12.5px;
  line-height:1.45;
  color:var(--sub);
}
#content:has(> .grid-charts) > .grid-charts .donut-wrap{
  min-height:195px;
  gap:17px;
  margin-top:12px;
}
#content:has(> .grid-charts) > .grid-charts .donut{
  width:min(154px,48%);
  box-shadow:0 0 0 1px var(--line) inset;
}
#content:has(> .grid-charts) > .grid-charts .donut-inner strong{
  font-size:31px;
  font-weight:700;
}
#content:has(> .grid-charts) > .grid-charts .legend{
  gap:10px;
}
#content:has(> .grid-charts) > .grid-charts .legendrow{
  gap:8px;
  line-height:1.35;
}
#content:has(> .grid-charts) > .grid-charts .chartkey{
  gap:10px 16px;
  font-size:12px;
}
#content:has(> .grid-charts) > .grid-charts .bars{
  height:195px;
  gap:10px;
  margin:24px 7px 31px;
  background:repeating-linear-gradient(
    to top,transparent 0 43px,var(--nx-dash-plot-grid) 44px 45px
  );
}
#content:has(> .grid-charts) > .grid-charts .b{
  border-radius:5px 5px 0 0;
  max-width:18px;
}
#content:has(> .grid-charts) > .grid-charts .xlabel{
  font-size:11px;
  line-height:1.3;
}
#content:has(> .grid-charts) > .grid-charts .note{
  line-height:1.5;
}

/* 4. Pendências e marcos: maior clareza e áreas clicáveis. */
#content:has(> .grid-charts) > .grid-low{
  gap:14px;
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
}
#content:has(> .grid-charts) > .grid-low > .card{
  padding:21px;
  min-width:0;
}
#content:has(> .grid-charts) > .grid-low .table th{
  font-size:11.5px;
  font-weight:650;
}
#content:has(> .grid-charts) > .grid-low .table td{
  vertical-align:middle;
  line-height:1.45;
}
#content:has(> .grid-charts) > .grid-low .projcell{
  font-weight:650;
  line-height:1.35;
}
#content:has(> .grid-charts) > .grid-low .listitem{
  min-height:60px;
  padding:13px 0;
  gap:12px;
  border-color:var(--line);
}
#content:has(> .grid-charts) > .grid-low .clickable-list{
  border-radius:9px;
  padding-left:7px;
  padding-right:7px;
  transition:background .15s ease;
}
#content:has(> .grid-charts) > .grid-low .clickable-list:hover,
#content:has(> .grid-charts) > .grid-low .clickable-list:focus-visible{
  background:var(--nx-dash-wash);
}
#content:has(> .grid-charts) > .grid-low .marker{
  width:38px;height:38px;
  background:var(--blue-soft);
  border-radius:10px;
  font-weight:730;
}
#content:has(> .grid-charts) > .grid-low .listitem strong{
  font-size:13px;
  line-height:1.35;
}
#content:has(> .grid-charts) > .grid-low .listitem small{
  font-size:12px;
  line-height:1.35;
}

/* 5. Adaptabilidade: manter ordem e conteúdo, evitar cartões comprimidos. */
@media(max-width:1360px){
  #content:has(> .grid-charts) > .grid-charts{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  #content:has(> .grid-charts) > .grid-charts > .card:last-child{
    grid-column:1/-1;
  }
  #content:has(> .grid-charts) > .grid-charts > .card:last-child .donut-wrap{
    max-width:550px;
    margin-inline:auto;
  }
}
@media(max-width:1050px){
  #content:has(> .grid-charts) > .grid-low{grid-template-columns:1fr}
}
@media(max-width:850px){
  #content:has(> .grid-charts) > .grid-charts{grid-template-columns:1fr}
  #content:has(> .grid-charts) > .grid-charts > .card:last-child{grid-column:auto}
  #content:has(> .grid-charts) > .pagehead .actions{align-self:flex-start}
  #content:has(> .grid-charts) > .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
  #content:has(> .grid-charts) > .pagehead{padding-bottom:15px;margin-bottom:18px}
  #content:has(> .grid-charts) > .kpis{gap:10px;margin-bottom:14px}
  #content:has(> .grid-charts) > .kpis > .kpi{min-height:132px;padding:15px 13px;gap:5px}
  #content:has(> .grid-charts) > .kpis .k-name{font-size:11.5px;margin-left:4px}
  #content:has(> .grid-charts) > .kpis .k-icon{width:25px;height:25px;font-size:12px}
  #content:has(> .grid-charts) > .kpis strong{font-size:30px}
  #content:has(> .grid-charts) > .kpis small{font-size:11px}
  #content:has(> .grid-charts) > .grid-charts > .card,
  #content:has(> .grid-charts) > .grid-low > .card{padding:16px}
  #content:has(> .grid-charts) > .grid-charts .donut-wrap{gap:12px;flex-wrap:wrap;justify-content:center}
  #content:has(> .grid-charts) > .grid-charts .donut{width:142px}
  #content:has(> .grid-charts) > .grid-charts .legend{width:100%;flex-basis:100%}
}
@media(max-width:350px){
  #content:has(> .grid-charts) > .kpis{grid-template-columns:1fr}
  #content:has(> .grid-charts) > .kpis > .kpi{min-height:110px}
}
@media(prefers-reduced-motion:reduce){
  #content:has(> .grid-charts) .clickable-list{transition:none}
}
@media print{
  #content:has(> .grid-charts) > .kpis > .kpi,
  #content:has(> .grid-charts) > .grid-charts > .card{
    background:#fff;
    color:#152B3D;
    print-color-adjust:exact;
  }
}