/* Statera · Progresiones (Claude, 28/09/2026) · sobre tokens-v2 + marco + lab-comun */
.pg .lb-top .right .pg-n { font-size: var(--fs-sec); }
.pg .pg-v { min-width: 200px; }
.pg-nota { margin: -4px 0 10px; font-size: var(--fs-sec); color: var(--text-2); }

/* ---------- catálogo: tarjetas densas (1B) ---------- */
.pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(304px, 1fr)); grid-auto-flow: row dense; gap: 12px; padding-bottom: 8px; }
.pcard { position: relative; display: flex; flex-direction: column; gap: 6px; height: 346px; min-width: 0; padding: 12px 14px 12px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); cursor: pointer; overflow: hidden; view-transition-name: none; }
.pcard.sk { border: 0; }
.pcard:not(.open):hover { border-color: var(--line-hover); box-shadow: var(--shadow-lift); }
.pcard:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pcard.off { cursor: default; opacity: .8; }
.pcard.off .empty { padding: 24px 8px; }
.pc-h { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pc-h h3 { font-size: 17px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-h .pill { margin-left: auto; flex: none; }
.pc-q { font-size: var(--fs-sec); color: var(--text-2); line-height: 1.35; min-height: 38px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pc-seq { display: flex; gap: 8px; align-items: baseline; font-size: var(--fs-cap); min-width: 0; }
.pc-seq .k { color: var(--text-2); flex: none; }
.pc-seq .v { font-family: var(--mono); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-big { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: end; padding-top: 2px; }
.pc-big .k { display: block; font-size: var(--fs-cap); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-big .v { display: block; font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; white-space: nowrap; }
.pc-big .v small { font-size: var(--fs-cap); font-weight: 500; color: var(--text-2); letter-spacing: 0; }
.pc-big .v2 { display: block; font-size: 20px; font-weight: 700; line-height: 1.15; white-space: nowrap; }
.pc-big .d { display: block; font-size: var(--fs-cap); color: var(--text-2); white-space: nowrap; }
.pc-hist { height: 70px; flex: none; }
.pc-f { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 10px; margin: 0; padding-top: 6px; border-top: 1px solid var(--line); }
.pc-f div { display: grid; gap: 0; min-width: 0; }
.pc-f div + div { padding-left: 10px; border-left: 1px solid var(--line); }
.pc-f dt { font-size: var(--fs-cap); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-f dd { margin: 0; font-size: var(--fs-sec); font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- tarjeta abierta (6B/7B en su lugar) ---------- */
.pcard.open { grid-column: 1 / -1; height: auto; cursor: default; gap: 12px; padding: 14px 16px 16px; border-color: var(--line-hover); box-shadow: var(--shadow-lift); scroll-margin-top: 60px; }
.po-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.po-title { flex: 1 1 420px; min-width: 0; display: grid; gap: 6px; }
.po-title .pc-h h3 { font-size: 22px; }
.po-title .pc-h .pill { margin-left: 4px; }
.po-title .pc-q { -webkit-line-clamp: unset; min-height: 0; font-size: var(--fs-row); }
.po-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.po-x svg { width: 18px; height: 18px; }
.po-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (min-width: 1500px) { .po-kpis { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@media (max-width: 767px) { .po-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.po-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.po-h { grid-column: span 3; } .po-l { grid-column: span 3; }
.po-s { grid-column: span 3; } .po-r { grid-column: span 3; }
.po-c { grid-column: 1 / -1; }
.po-grid > .panel { display: flex; flex-direction: column; }
.po-grid > .panel > .chart { flex: 1 1 auto; }
.po-como { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 2px 0 0; }
.po-como div { display: flex; gap: 8px; align-items: baseline; }
.po-como dt { font-size: var(--fs-cap); color: var(--text-2); font-weight: 600; }
.po-como dd { margin: 0; font-size: var(--fs-sec); }
.po-grid .panel .ph { margin-bottom: 6px; }
@media (max-width: 1100px) { .po-grid > * { grid-column: 1 / -1 !important; } }

/* ---------- comparar: tabla-screener ---------- */
.comp .tbl th { white-space: normal; vertical-align: bottom; line-height: 1.25; }
.comp .tbl { table-layout: auto; }
.comp .tbl td:first-child a { font-weight: 650; text-decoration: none; }
.comp .tbl td:first-child a:hover { text-decoration: underline; }
.comp .tbl th.rg, .comp .tbl td.rg { width: 24%; min-width: 150px; }
.rng { position: relative; display: block; height: 14px; }
.rng i { position: absolute; top: 0; bottom: 0; }
.rng .z { width: 1px; background: var(--axis); }
.rng .b { top: 4px; bottom: 4px; border-radius: 3px; background: var(--bar-neutral); opacity: .55; }
.rng .m { width: 3px; margin-left: -1px; border-radius: 2px; background: var(--text); }
.rng .m.gain { background: var(--gain); } .rng .m.loss { background: var(--loss); }
.rng-ax { display: flex; justify-content: space-between; margin: 6px 8px 0 auto; width: calc(28% - 16px); min-width: 164px; font: 500 13px var(--mono); color: var(--text-2); }

/* ---------- celular ---------- */
@media (max-width: 767px) {
  .pg .pg-v { min-width: 0; flex: 1 1 auto; }
  .pcards { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .pcard { height: auto; }
  .po-como { grid-template-columns: minmax(0, 1fr); }
  .comp { padding: 10px; }
  .comp .tbl thead { display: none; }
  .comp .tbl, .comp .tbl tbody, .comp .tbl tr, .comp .tbl td { display: block; width: 100%; }
  .comp .tbl tr { padding: 8px 0; border-bottom: 1px solid var(--line); }
  .comp .tbl td { border: 0; padding: 2px 0; text-align: left !important; }
  .comp .tbl td.r { display: inline-block; width: auto; margin-right: 12px; }
  .comp .tbl td.rg { min-width: 0; }
  .comp .tbl td:first-child a { display: flex; align-items: center; min-height: 44px; }
  .rng-ax { width: 100%; margin: 6px 0 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .pcard { transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
}
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }

/* ---------- v2 (críticos) ---------- */
.pg-leg { margin: -2px 0 10px; }
.pg-leg > span:first-child { color: var(--text-2); }
.bar.over { opacity: .75; }
.pc-big .k { white-space: normal; line-height: 1.25; min-height: 0; }
.pc-f dt { white-space: normal; line-height: 1.2; }
.pcard.resumen { cursor: default; gap: 4px; }
.pcard.resumen .pc-q { min-height: 0; -webkit-line-clamp: 1; }
.res { display: grid; gap: 0; margin: 0; }
.res-b { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 52px 60px; align-items: center; gap: 8px; width: 100%; min-height: 21px; padding: 0 4px; border: 0; border-radius: 6px; background: transparent; color: var(--text); font-size: var(--fs-cap); text-align: left; cursor: pointer; }
.res-b:hover { background: var(--surface); }
.res-b .n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.res-b .bar-t { position: relative; display: block; height: 8px; border-radius: 3px; background: var(--track); overflow: hidden; }
.res-b .bar-t i { position: absolute; top: 0; bottom: 0; border-radius: 3px; }
.res-b .bar-t i.n { right: 0; background: var(--loss-bar); } .res-b .bar-t i.p { left: 0; background: var(--gain-bar); }
.res-b .v, .res-b .q { text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; }
.res-h { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 52px 60px; gap: 8px; padding: 0 4px; font-size: var(--fs-cap); color: var(--text-2); }
.res-h span:first-child { grid-column: 3; text-align: right; } .res-h span:last-child { text-align: right; }
.ses-sm { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 8px; }
.ses-sm .ses-l { font-size: var(--fs-cap); font-weight: 650; }
.chart.ses { display: grid; gap: 4px; }
.comp .sortb { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: inherit; }
.comp th[aria-sort="ascending"], .comp th[aria-sort="descending"] { color: var(--text); }
.comp td.nm { white-space: nowrap; }
.rng-m { display: none; }
@media (max-width: 767px) {
  .comp .tbl tr { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 10px; padding: 10px 0; }
  .comp .tbl td { display: block !important; width: auto !important; margin: 0 !important; }
  .comp .tbl td.nm, .comp .tbl td.rg { grid-column: 1 / -1; }
  .comp .tbl td[data-l]::before { content: attr(data-l); display: block; font-size: var(--fs-cap); color: var(--text-2); font-weight: 500; line-height: 1.25; }
  .comp .tbl td.r { text-align: left !important; font-weight: 650; }
  .rng-m { display: block; margin-top: 2px; font-size: var(--fs-cap); color: var(--text-2); }
  .rng-ax { display: none; }
  .ses-sm { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
@media (max-width: 767px) { .pcard.resumen { height: auto; } }
.pcard.resumen .res { flex: 1 1 auto; grid-auto-rows: minmax(21px, 1fr); align-content: stretch; }

/* ---------- v3 ---------- */
.pc-seq { align-items: flex-start; }
.pc-seq .v { white-space: normal; display: block; overflow: visible; line-height: 1.35; }
.pc-f dt, .pc-big .k { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.2; }
.pc-big > div { display: flex; flex-direction: column; } .pc-big .v, .pc-big .v2 { margin-top: auto; }
.pc-f div { display: flex; flex-direction: column; } .pc-f dd { margin-top: auto; }
.res-b { grid-template-columns: minmax(0, auto) minmax(40px, 1fr) 52px 64px; }
.res-h { grid-template-columns: minmax(0, auto) minmax(40px, 1fr) 52px 64px; }
.res-b .n { overflow: visible; text-overflow: clip; }
.rng-ax { position: relative; display: block; height: 16px; }
.rng-ax span { position: absolute; transform: translateX(-50%); }
.rng-ax span:first-child { transform: none; } .rng-ax span:last-child { transform: translateX(-100%); }
.po-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 1280px) { .po-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1600px) { .po-kpis { grid-template-columns: repeat(9, minmax(0, 1fr)); } }
@media (max-width: 767px) { .po-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .po-kpis .kpi.hero { grid-column: 1 / -1; } }
.pg-leg .pg-n { color: var(--text); font-weight: 600; }
.pcard { height: 362px; }
.pcard:not(.open) .pc-hist { flex: 1 1 auto; height: auto; min-height: 70px; }
@media (max-width: 767px) { .pcard:not(.open):not(.resumen) { height: auto; } .pcard:not(.open) .pc-hist { flex: none; height: 76px; } }

/* ---------- v4: adentro de Aprender, filtros arriba ---------- */
.pg-thead { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 10px; }
.pg-thead h2 { font-size: var(--fs-h3); font-weight: 700; }
.pg-thead p { flex: 1 1 320px; min-width: 0; font-size: var(--fs-sec); color: var(--text-2); }
.pg-thead .pg-v { margin-left: auto; align-self: center; }
.pg-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 14px; margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); }
.pg-f { display: grid; gap: 4px; }
.pg-fl { font-size: var(--fs-cap); font-weight: 600; color: var(--text-2); }
.pg-bar .seg button { min-height: 34px; padding: 0 10px; white-space: nowrap; font-size: var(--fs-cap); }
.pg-bar .seg .c { color: inherit; opacity: .75; margin-left: 2px; font-variant-numeric: tabular-nums; }
.pg-bar .sel { min-height: 36px; width: auto; min-width: 200px; }
.pg-q { align-self: center; margin-left: auto; }
.pg-q[open] { flex: 1 1 100%; }
@media (max-width: 767px) {
  .pg-bar { display: grid; grid-template-columns: minmax(0, 1fr); }
  .pg-bar .seg { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-bar .seg button { min-height: 44px; white-space: normal; }
  .pg-bar .seg button + button { border-left: 0; }
  .pg-bar .seg button:nth-child(even) { border-left: 1px solid var(--border-strong); }
  .pg-bar .seg button:nth-child(n+3) { border-top: 1px solid var(--border-strong); }
  .pg-bar .sel { width: 100%; min-height: 44px; }
  .pg-q { margin-left: 0; }
  .pg-thead .pg-v { width: 100%; margin-left: 0; }
}
.pc-q { -webkit-line-clamp: unset; display: block; }
.pg-fd > summary { display: none; }
@media (max-width: 767px) {
  .pg-fd { margin: 0 0 12px; }
  .pg-fd > summary { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; height: auto; min-height: 52px; padding: 8px 14px; list-style: none; text-align: left; white-space: normal; }
  .pg-fd > summary::-webkit-details-marker { display: none; }
  .pg-fd > summary span { font-weight: 500; font-size: var(--fs-cap); color: var(--text-2); }
  .pg-fd[open] > summary { border-radius: 10px 10px 0 0; }
  .pg-fd[open] .pg-bar { border-top: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
}
.res-hs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 28px; }
.pcard.resumen.ancha .res-hs, .pcard.resumen.ancha .res { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
.pcard.resumen.ancha .res { grid-auto-flow: row; }
.pcard.resumen.ancha { height: auto; min-height: 0; }
.pcard.resumen.ancha .res { grid-auto-flow: column; grid-template-rows: repeat(var(--rows), auto); grid-auto-rows: auto; }

/* ---------- v5: filas alineadas entre tarjetas y dentro de la tarjeta ---------- */
@media (min-width: 768px) { .pcard:not(.open) .pc-seq { min-height: 35px; } }
.pc-big { align-items: stretch; }
.pc-big .k { margin-bottom: 2px; }
/* resumen con pocas: cada fila con el reparto de cómo terminaron (mismos colores que los histogramas) */
.pcard.resumen.pocas .res { grid-auto-rows: minmax(0, 1fr); align-content: stretch; gap: 4px; }
.pcard.resumen.pocas.ancha .res { grid-template-rows: repeat(var(--rows), minmax(0, 1fr)); }
.res-leg { margin: 2px 0 4px; }
.res-b.res-b2 { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-content: center; row-gap: 6px; min-height: 52px; padding: 6px 8px; font-size: var(--fs-sec); }
.res-b2 .n { font-size: 15px; }
.res-b2 .v { font-size: 16px; font-weight: 700; }
.res-b2 .v small { font-size: var(--fs-cap); font-weight: 500; color: var(--text-2); }
.res-b2 .stk { grid-column: 1 / -1; display: flex; height: 12px; border-radius: 3px; overflow: hidden; background: var(--track); }
.res-b2 .stk i { display: block; height: 100%; }
.res-b2 .stk i.up { background: var(--gain-bar); } .res-b2 .stk i.dn { background: var(--loss-bar); } .res-b2 .stk i.q { background: var(--dd); }
.res-b2 .stk i + i { box-shadow: inset 1px 0 0 var(--card); }
/* 9 cifras en 5 columnas: el promedio ocupa 2 y no queda un hueco al final */
@media (min-width: 1280px) and (max-width: 1599px) { .po-kpis .kpi.hero { grid-column: span 2; } }
.pg-ver { display: none; }
@media (max-width: 767px) { .pg-ver { display: inline-flex; justify-content: center; width: 100%; min-height: 44px; } }
/* pie de la tarjeta: las dos primeras cifras a su ancho, la tercera toma el resto (sin partir «Cada 100 fichas» desde 290 px) */
.pc-f { grid-template-columns: max-content max-content minmax(0, 1fr); column-gap: 8px; }
.pc-f div + div { padding-left: 8px; }
.pc-f div:nth-child(-n+2) dt { white-space: nowrap; }
/* v5: 10 cifras parejas (5 + 5 desde 1280; 10 en una fila desde 1600) */
.po-kpis .kpi.hero { grid-column: auto !important; }
@media (min-width: 1280px) { .po-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1600px) { .po-kpis { grid-template-columns: repeat(10, minmax(0, 1fr)); } }
@media (min-width: 768px) and (max-width: 1279px) { .po-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.po-kpis .nw { white-space: nowrap; }
/* celular: el quinto botón de «Cómo sube» ocupa la fila entera */
@media (max-width: 767px) { .pg-bar .seg button:last-child:nth-child(odd) { grid-column: 1 / -1; border-left: 0; } }
.po-kpis .nw.blk { display: block; }
.po-kpis .nw.blk { white-space: normal; }
/* sin cuenta: tarjetas a su contenido (cómo sube y su escalera), sin el hueco de las cifras */
.pcards.sin-datos .pcard { height: auto; }
.pcards.sin-datos .pc-seq { min-height: 0; }
.pcards.sin-datos { align-items: start; }