/* © 2026 KoreStock Ledger — un proyecto de Kitsótaro · Código disponible, todos los derechos reservados (ver LICENSE).
 * PANORAMA — tarjetas con un número grande y detalle desplegable (§24.3). */
.cifra-grande { display: block; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; font-size: var(--t-2xl); font-weight: var(--peso-fuerte); line-height: 1.2; margin: 2px 0; }
input.umbral { width: 3.5rem; min-height: 2rem; padding: 0 var(--e-2); text-align: center; border: 1.5px solid var(--borde-fuerte); border-radius: var(--r-xs); background: var(--superficie); }
details[data-tarjeta] > summary { align-items: flex-start; }
details[data-tarjeta] > summary .boton-icono { width: 2.25rem; min-width: 2.25rem; min-height: 2.25rem; }
.titulo-panorama { display: flex; align-items: center; gap: 6px; white-space: nowrap; font-size: var(--t-sm); font-weight: var(--peso-normal); color: var(--texto-2); }
.titulo-panorama .boton-info { width: 1.25rem; height: 1.25rem; flex: none; }
details[data-tarjeta] > summary > .icono-giro { margin-top: 2px; flex: none; }
/* Cuadrícula de 2 columnas con tarjetas cerradas del mismo alto y ancho; la
   abierta (solo una a la vez) ocupa todo el ancho para sus listas largas. */
.rejilla-panorama { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; gap: var(--e-3); align-items: stretch; }
.rejilla-panorama > details[open] { grid-column: 1 / -1; }
.rejilla-panorama > details:not([open]) { height: 8.5rem; overflow: hidden; }
.rejilla-panorama > details:not([open]) .cifra-grande + .t-pequeno { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rejilla-panorama > details:not([open]) .cifra-grande { font-size: var(--t-xl); }
.fila-roi { display: grid; gap: 4px; padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--borde); }
.fila-roi:last-child { border-bottom: 0; }
.fila-roi .mini-barra { width: 100%; height: 4px; }
.fila-roi .semaforo { font-size: var(--t-base); }
.rejilla-panorama > .tarjeta { margin: 0; }
.fila-roi .sub { font-size: var(--t-xs); color: var(--texto-2); }
/* Títulos largos en pantallas angostas: bajan a una segunda línea (con ⓘ al final) */
details[data-tarjeta] > summary > .crece { min-width: 0; }
@media (max-width: 559px) {
  .titulo-panorama { display: block; white-space: normal; line-height: 1.25; }
  .titulo-panorama > .icono { display: inline-block; vertical-align: -3px; margin-right: 4px; }
  .titulo-panorama .boton-info { display: inline-grid; vertical-align: middle; }
  .rejilla-panorama > details:not([open]) { height: 9.5rem; }
}
/* Punto de equilibrio: tres datos con ícono, luego el avance con su barra */
.datos-equilibrio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-2); }
.dato-equilibrio { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 6px; padding: var(--e-3); border-radius: var(--r-md); background: var(--superficie-2); }
.dato-equilibrio > .icono { width: 0.95rem; height: 0.95rem; color: var(--texto-3); }
.dato-equilibrio .etiqueta-eq { font-size: var(--t-xs); color: var(--texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dato-equilibrio strong { grid-column: 1 / -1; font-size: var(--t-lg); margin-top: 4px; }
.avance-equilibrio { display: grid; gap: var(--e-2); }
.avance-equilibrio .fila-separada > span { display: inline-flex; align-items: center; gap: 4px; }
@media (max-width: 559px) { .datos-equilibrio { grid-template-columns: 1fr; } .dato-equilibrio { grid-template-columns: auto minmax(0, 1fr) auto; } .dato-equilibrio strong { grid-column: auto; margin-top: 0; font-size: var(--t-base); } }
.nota-icono { display: flex; align-items: center; gap: 4px; }
.nota-icono .icono { flex: none; width: 0.85rem; height: 0.85rem; }