/* ============================================================================
   tablero.css — Solutiva Design System para los tableros 05 (presupuesto) y
   06 (evaluación social). Mismo lenguaje que el visor 03 (alternativas):
   esquinas de marca 22/6, sombras suaves, rótulos verde 700, selector
   segmentado en píldora, cifras en Montserrat ExtraBold.
   Se enlaza DESPUÉS de ../marco.css. Solo estilo: no toca ids ni scripts.
   ============================================================================ */
:root{
  --verde:#8CAA20;--verde-50:#F4F8E6;--verde-100:#E6EFC4;--verde-700:#5F7316;
  --carbon:#333333;--gris-100:#E8E8E8;--gris-50:#F5F5F4;--borde:#D6D6D5;--texto-2:#5C5C5C;
  --r-brand:22px 6px 22px 6px;--r-brand-sm:12px 4px 12px 4px;
  --sombra-xs:0 1px 2px rgba(0,0,0,.06);--sombra-md:0 6px 16px rgba(0,0,0,.08);
  --foco:0 0 0 4px rgba(140,170,32,.28);
  /* tokens propios de los tableros, remapeados */
  --tx:var(--carbon);--tx2:var(--texto-2);--tx3:var(--texto-2);--linea:var(--borde);
  --panel2:var(--gris-50);--ac:var(--verde);--ac-dark:var(--verde-700);
}
body{color:var(--carbon) !important;font-size:14px !important}

/* ---------- cabecera de la página */
.dash-head{max-width:1200px !important;padding:36px 24px 8px !important}
.dash-head .rule{width:56px;height:4px;border-radius:2px;background:var(--verde) !important}
.dash-head .badge{font-size:12px !important;letter-spacing:.22em !important;color:var(--verde-700) !important}
.dash-head h1{font-weight:800 !important;font-size:clamp(24px,3vw,34px) !important;line-height:1.15;color:#3a3a3a;letter-spacing:-.01em}
.dash-head .lead{font-size:15px !important;color:var(--texto-2) !important;line-height:1.6;max-width:720px;text-wrap:pretty}
.wrap{max-width:1200px !important;padding:20px 24px 56px !important}

/* ---------- tarjetas */
section.card{border:1px solid var(--borde) !important;border-radius:var(--r-brand) !important;
  box-shadow:var(--sombra-xs);padding:20px 22px 20px !important;background:#fff !important}
h2{font-size:12px !important;letter-spacing:.2em !important;color:var(--verde-700) !important;font-weight:700 !important}
.head{margin-bottom:14px !important}

/* ---------- cifras (05) */
.kpis{gap:16px !important;margin-bottom:20px !important}
.kpi{background:#fff !important;border:1px solid var(--borde) !important;border-radius:var(--r-brand) !important;
  box-shadow:var(--sombra-xs);padding:18px 20px !important}
.kpi .lab{font-size:12px !important;letter-spacing:.14em !important;color:var(--texto-2) !important}
.kpi .val{font-size:clamp(24px,2.4vw,30px) !important;font-weight:800 !important;line-height:1.15;margin:8px 0 2px !important;color:var(--carbon)}
.kpi .sub{font-size:12px !important;color:var(--texto-2) !important}
.kpi.hi{background:var(--carbon) !important;border-color:var(--carbon) !important;box-shadow:var(--sombra-md)}
.kpi.hi .lab{color:#C6D97A !important}
.kpi.hi .val{color:#fff}
.kpi.hi .sub{color:rgba(255,255,255,.78) !important}

/* ---------- selector segmentado (05 torta/barras, 06 pavimento y tramo) */
.pills{display:inline-flex !important;gap:4px !important;background:var(--gris-100);padding:4px;border-radius:999px;flex-wrap:wrap}
.pill{border:0 !important;background:transparent !important;border-radius:999px !important;color:var(--carbon) !important;
  font:600 12px/1.1 "Montserrat",sans-serif !important;letter-spacing:.04em !important;padding:8px 14px !important;min-height:32px;transition:background .2s,color .2s}
.pill:hover{background:#fff !important}
.pill.on{background:var(--carbon) !important;color:#fff !important;box-shadow:var(--sombra-xs)}
.pill.volver{background:#fff !important;color:var(--verde-700) !important}
.pill:focus-visible{outline:0 !important;box-shadow:var(--foco)}

/* ---------- leyenda y tabla (05) */
.it{border-radius:var(--r-brand-sm) !important;font-size:12px !important;padding:6px 8px !important}
.it.sel{background:var(--verde-50) !important;border-color:var(--verde-100) !important}
.sw{border-radius:3px !important}
.it .n{font-size:12px !important}
.crumb{font-size:12px !important}
.crumb .lnk{color:var(--verde-700) !important;font-weight:700}
table{font-size:12px !important}
th{font-size:12px !important;font-weight:700 !important;color:var(--verde-700) !important;letter-spacing:.06em !important;background:var(--verde-50)}
th,td{padding:8px 10px !important;border-bottom-color:var(--borde) !important}
tbody tr:hover td{background:var(--gris-50) !important}
.tbwrap{border:1px solid var(--borde);border-radius:12px 4px 12px 4px;background:#fff}
.tbwrap table{margin:0}
.tbwrap tbody tr:last-child td{border-bottom:0 !important}
tfoot td{border-top:2px solid var(--carbon) !important}
.hint{font-size:12px !important;color:var(--texto-2) !important;font-style:normal !important}
.seg.sel,.bar.sel{stroke:var(--carbon) !important}
.ctr-v{font-weight:800 !important;fill:var(--carbon) !important}

/* ---------- escenario y resultados (06) */
.grid{grid-template-columns:minmax(300px,340px) minmax(0,1fr) !important;gap:20px !important}
@media (min-width:941px){ .grid > section.card:first-child{position:sticky;top:96px} }
@media (max-width:940px){ .grid{grid-template-columns:1fr !important} }
.nom{font-size:13px !important;font-weight:600}
.val{font-size:13px !important;font-weight:800 !important}
.fila .val{min-width:52px;text-align:center;background:var(--gris-50);border-radius:999px;padding:1px 8px}
input[type=range]{accent-color:var(--verde-700) !important}
.ext{font-size:12px !important;color:var(--texto-2) !important}
.reset{border:1.5px solid var(--borde) !important;border-radius:var(--r-brand-sm) !important;background:#fff !important;color:var(--carbon) !important;
  font-size:12px !important;letter-spacing:.1em !important;padding:12px !important;transition:background .12s,border-color .12s}
.reset:hover{background:var(--verde-50) !important;border-color:var(--verde) !important;color:var(--carbon) !important}
.res{gap:16px !important;margin-bottom:20px !important}
.rc{background:#fff !important;border:1px solid var(--borde) !important;border-radius:var(--r-brand) !important;box-shadow:var(--sombra-xs);padding:16px 18px !important}
.rc .t{font-size:12px !important;letter-spacing:.14em !important;color:var(--texto-2) !important}
.rc .k{font-size:12px !important;letter-spacing:.1em !important;color:var(--texto-2) !important}
.rc .v{font-size:clamp(20px,1.8vw,24px) !important;font-weight:800 !important}
.rc .sub,.rc .nota{font-size:12px !important}
.rc.dest{background:var(--carbon) !important;border:1px solid var(--carbon) !important;color:#fff;box-shadow:var(--sombra-md)}
.rc.dest .t{color:#C6D97A !important}
.rc.dest .k,.rc.dest .sub,.rc.dest .nota{color:rgba(255,255,255,.78) !important}
.rc.dest .v{color:#fff}

/* ===================== 05 · PRESUPUESTO: navegación y espacio ===================== */
body.t-ppto .wrap{max-width:1440px !important}
body.t-ppto .dash-head{max-width:1440px !important;padding-bottom:4px !important}
body.t-ppto .kpis{grid-template-columns:repeat(4,minmax(0,1fr)) !important;margin-bottom:16px !important}
body.t-ppto .kpi{padding:14px 18px !important}
@media (max-width:820px){ body.t-ppto .kpis{grid-template-columns:repeat(2,minmax(0,1fr)) !important} }

/* barra de especialidades: navegación directa entre las once, sin volver al general */
.espnav{display:flex;gap:6px;overflow-x:auto;scrollbar-width:thin;padding:4px;margin:0 0 16px;background:var(--gris-100);border-radius:999px}
.espnav button{flex:none;display:inline-flex;align-items:center;gap:8px;border:0;background:transparent;border-radius:999px;cursor:pointer;
  font:600 12px/1.1 "Montserrat",sans-serif;color:var(--carbon);padding:9px 14px;white-space:nowrap;transition:background .15s,color .15s}
.espnav button:hover{background:#fff}
.espnav button[aria-current="true"]{background:var(--carbon);color:#fff;box-shadow:var(--sombra-xs)}
.espnav button:focus-visible{outline:0;box-shadow:var(--foco)}
.espnav .pt{width:10px;height:10px;border-radius:50%;flex:none;box-shadow:0 0 0 2px #fff}
.espnav .pc{font-weight:500;opacity:.75;font-variant-numeric:tabular-nums}

/* dos tarjetas del mismo alto; el gráfico y su leyenda lado a lado */
body.t-ppto .cols{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) !important;align-items:stretch !important;gap:16px !important;
  height:clamp(520px,calc(100vh - 330px),760px)}
body.t-ppto .cols > section.card{min-height:0;display:flex;flex-direction:column}
body.t-ppto .cols > section.card:first-child{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(220px,1fr);
  grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"head head" "viz leg" "hint hint";column-gap:20px}
body.t-ppto .cols > section.card:first-child > .head{grid-area:head}
body.t-ppto #viz{grid-area:viz;min-height:0;display:flex;align-items:center;justify-content:center;overflow:auto}
body.t-ppto #viz svg{max-height:100%;width:100%}
body.t-ppto #leg{grid-area:leg;min-height:0;overflow:auto;margin:0 !important;align-self:center;max-height:100%}
body.t-ppto .cols > section.card:first-child > .hint{grid-area:hint}
body.t-ppto .cols > section.card:last-child .tbwrap{flex:1 1 auto;min-height:0;overflow:auto}
body.t-ppto thead th{position:sticky;top:0;z-index:1}
body.t-ppto .crumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:12px !important}
body.t-ppto .crumb .lnk{text-decoration:none !important;background:var(--verde-50);border-radius:999px;padding:3px 10px}
body.t-ppto .crumb .lnk:hover{background:var(--verde-100)}
/* barra de incidencia dentro de la celda de % */
td.pbar{position:relative;min-width:84px}
td.pbar i{position:absolute;left:8px;right:8px;bottom:4px;height:3px;border-radius:2px;background:var(--gris-100)}
td.pbar i b{display:block;height:100%;border-radius:2px;background:var(--verde)}
@media (max-width:1100px){
  body.t-ppto .cols{height:auto;grid-template-columns:minmax(0,1fr) !important}
  body.t-ppto .cols > section.card:last-child .tbwrap{max-height:560px}
}
@media (max-width:700px){
  body.t-ppto .cols > section.card:first-child{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "viz" "leg" "hint"}
}

/* globo de detalle al pasar sobre el gráfico, la leyenda o la tabla */
#ppTip{position:fixed;z-index:3000;pointer-events:none;display:none;min-width:200px;max-width:300px;background:#fff;border:1px solid var(--borde);
  border-radius:12px 4px 12px 4px;box-shadow:0 10px 28px rgba(0,0,0,.14);padding:10px 14px 12px;font:500 12px/1.45 "Montserrat",sans-serif;color:var(--carbon)}
#ppTip.on{display:block}
#ppTip .t{display:flex;gap:8px;align-items:flex-start;font-weight:700;font-size:13px;line-height:1.3;margin-bottom:6px}
#ppTip .t i{width:10px;height:10px;border-radius:50%;flex:none;margin-top:3px}
#ppTip .m{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1}
#ppTip .r{display:flex;justify-content:space-between;gap:12px;color:var(--texto-2);font-variant-numeric:tabular-nums;margin-top:2px}
#ppTip .r b{color:var(--carbon)}
#ppTip .h{margin-top:8px;padding-top:6px;border-top:1px solid var(--borde);color:var(--verde-700);font-weight:700;font-size:12px}
#viz path,#viz rect{transition:opacity .15s}
#tb tr.hl td{background:var(--verde-50) !important}
#leg .it.hl{background:var(--gris-50)}

/* UNA SOLA LISTA. La tabla hace de leyenda (punto de color por fila) y la leyenda del
   gráfico se oculta; la barra de especialidades solo aparece dentro de una especialidad,
   para saltar a otra sin volver. */
body.t-ppto #leg{display:none !important}
body.t-ppto .cols{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr) !important}
body.t-ppto .cols > section.card:first-child{grid-template-columns:minmax(0,1fr) !important;grid-template-areas:"head" "viz" "hint" !important}
body.t-ppto #viz svg{max-width:440px;margin:0 auto}
body.t-ppto:not(.en-detalle) .espnav{display:none}
td .sw2{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px;vertical-align:0;flex:none}
td.c1{display:flex;align-items:flex-start;gap:0}
td.c1 .sw2{margin-top:4px}
body.t-ppto #bVolver{display:none !important}  /* la vuelta ya está en «Todas» y en la miga */

/* ===================== 06 · EVALUACIÓN: todo en una pantalla =====================
   Cabecera compacta; escenario a la izquierda con deslizadores de una línea; a la derecha
   las tres cifras y, debajo, gráfico O tabla con pestañas (no los dos apilados). El bloque
   completo mide el alto de la ventana, así que no hay que bajar para ver resultados. */
body.t-eval .wrap,body.t-eval .dash-head,body.t-ppto .dash-head{max-width:1440px !important}
body.t-eval .dash-head,body.t-ppto .dash-head{padding:18px 24px 0 !important;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:24px;align-items:end}
body.t-eval .dash-head .rule,body.t-ppto .dash-head .rule{display:none}
body.t-eval .dash-head .badge,body.t-ppto .dash-head .badge{grid-column:1;margin:0 0 2px !important}
body.t-eval .dash-head,body.t-ppto .dash-head h1{grid-column:1;font-size:clamp(22px,2.2vw,28px) !important}
body.t-eval .dash-head .lead,body.t-ppto .dash-head .lead{grid-column:2;grid-row:1 / 3;font-size:13px !important;margin:0 !important;max-width:640px;align-self:end}
body.t-eval .wrap{padding:14px 24px 28px !important}

@media (min-width:941px){
  body.t-eval .grid{grid-template-columns:minmax(280px,310px) minmax(0,1fr) !important;
    grid-template-areas:"esc res" "esc tabs" "esc main";grid-template-rows:auto auto minmax(0,1fr);
    gap:12px 16px !important;align-items:stretch !important;height:clamp(540px,calc(100vh - 220px),860px)}
  body.t-eval .grid > div{display:contents}
  body.t-eval .grid > section.card:first-child{grid-area:esc;position:static !important;overflow:auto;min-height:0}
  body.t-eval .res{grid-area:res;margin:0 !important}
  body.t-eval #evTabs{grid-area:tabs;display:flex}
  body.t-eval .grid > div > section.card{grid-area:main;margin:0 !important;display:flex;flex-direction:column;min-height:0}
  body.t-eval.ver-tabla .grid > div > section.card:nth-of-type(1),
  body.t-eval:not(.ver-tabla) .grid > div > section.card:nth-of-type(2){display:none !important}
  body.t-eval #graf{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center}
  body.t-eval #graf svg{width:100%;height:100%;max-height:100%}
  body.t-eval .grid > div > section.card:nth-of-type(2) .tbwrap{flex:1 1 auto;min-height:0;max-height:none !important}
}
#evTabs{display:none;gap:4px;background:var(--gris-100);padding:4px;border-radius:999px;justify-self:start}
#evTabs button{border:0;background:transparent;border-radius:999px;font:600 12px/1.1 "Montserrat",sans-serif;color:var(--carbon);padding:8px 16px;cursor:pointer}
#evTabs button:hover{background:#fff}
#evTabs button[aria-selected="true"]{background:var(--carbon);color:#fff}
#evTabs button:focus-visible{outline:0;box-shadow:var(--foco)}

/* escenario de una línea por deslizador */
body.t-eval .grid > section.card:first-child{padding:16px 18px !important}
body.t-eval .grid > section.card:first-child h2{margin-bottom:8px !important}
body.t-eval .grid > section.card:first-child .fila{margin:8px 0 0 !important}
body.t-eval .grid > section.card:first-child input[type=range]{margin:0 !important;min-height:20px}
body.t-eval .ext{display:none !important}
body.t-eval .grid > section.card:first-child .hint{font-size:12px !important;margin-top:6px !important}
body.t-eval .grid > section.card:first-child > .hint:last-child{display:none}
body.t-eval .reset{margin-top:12px !important;padding:9px !important}
/* cifras de una línea */
body.t-eval .res{gap:12px !important}
body.t-eval .rc{padding:12px 16px !important}
body.t-eval .rc .mets{margin:4px 0 0 !important;gap:20px !important}
body.t-eval .rc .v{font-size:clamp(18px,1.6vw,22px) !important}
body.t-eval thead th{position:sticky;top:0;z-index:1}
body.t-eval th,body.t-eval td{padding:6px 8px !important}
body.t-eval .pills{flex-wrap:nowrap !important}
@media (max-width:940px){
  body.t-eval .dash-head,body.t-ppto .dash-head{display:block}
  body.t-eval .dash-head .lead,body.t-ppto .dash-head .lead{margin-top:6px !important}
  body.t-eval .grid{grid-template-columns:minmax(0,1fr) !important}
}

/* las tarjetas de tramo son el selector: la oscura es la que se detalla en gráfico y tabla */
body.t-eval #p_tramo{display:none !important}
body.t-eval .rc{cursor:pointer;transition:transform .15s,box-shadow .15s,border-color .15s}
body.t-eval .rc:not(.dest):hover{transform:translateY(-2px);box-shadow:var(--sombra-md);border-color:var(--verde) !important}
body.t-eval .rc:focus-visible{outline:0;box-shadow:var(--foco)}
body.t-eval #evTramo{color:var(--carbon);letter-spacing:.06em}
body.t-eval .rc .sub{display:none !important}   /* la tasa social ahora es un deslizador del escenario */

/* TABLA COMPLETA (06): los 21 años y el total caben sin desplazarse. Filas de ~20 px, sin
   título de tarjeta (la pestaña ya dice qué es) y la tabla estira sus filas si sobra alto. */
@media (min-width:941px){
  body.t-eval .grid{height:clamp(500px,calc(100vh - 216px),900px) !important;
    grid-template-areas:"esc res" "esc main" !important;grid-template-rows:auto minmax(0,1fr) !important}
  /* pestañas dentro de la tarjeta principal, arriba a la derecha: no gastan una fila propia */
  body.t-eval #evTabs{grid-area:main;align-self:start;justify-self:end;position:relative;z-index:2;margin:8px 10px 0 0;padding:3px !important}
  body.t-eval #evTabs button{padding:6px 12px !important}
  body.t-eval.ver-tabla .grid > div > section.card:nth-of-type(2){padding-top:48px !important}
  body.t-eval .grid > div > section.card:nth-of-type(1){padding-top:48px !important}
  /* VAN y TIR lado a lado en cada tarjeta */
  body.t-eval .rc{padding:10px 14px !important}
  body.t-eval .rc .mets{flex-wrap:nowrap !important;gap:16px !important;margin:2px 0 0 !important}
  body.t-eval .rc .nota{margin-top:2px}
  body.t-eval.ver-tabla .grid > div > section.card:nth-of-type(2) > div:first-child{display:none !important}
  body.t-eval.ver-tabla .grid > div > section.card:nth-of-type(2){padding:44px 14px 12px !important}
  body.t-eval .grid > section.card:first-child .fila{margin:6px 0 0 !important}
  body.t-eval .grid > section.card:first-child .hint{margin-top:4px !important;line-height:1.4}
  body.t-eval .reset{margin-top:10px !important}
  body.t-eval.ver-tabla .grid > div > section.card:nth-of-type(2) > div:first-child{margin-bottom:6px !important}
  body.t-eval.ver-tabla .grid > div > section.card:nth-of-type(2) h2{font-size:12px !important;margin:0 !important}
  body.t-eval.ver-tabla .tbwrap table{height:100%}
  body.t-eval.ver-tabla .tbwrap th{padding:3px 8px !important}
  body.t-eval.ver-tabla .tbwrap td{padding:0 8px !important;line-height:1.2;height:17px}
  body.t-eval.ver-tabla .tbwrap tfoot td{padding:2px 8px !important}
}