/* © 2026 KoreStock Ledger — un proyecto de Kitsótaro · Código disponible, todos los derechos reservados (ver LICENSE).
 * TARJETA — contenedor, tarjeta de lectura del producto elegido (D14) y cifras (KPI). */
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-lg); padding: var(--e-4); box-shadow: var(--sombra-1); }
.tarjeta-plana { background: var(--superficie-2); border-radius: var(--r-md); padding: var(--e-4); }
.tarjeta + .tarjeta { margin-top: var(--e-3); }
.tarjeta-titulo { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); margin-bottom: var(--e-3); }
.tarjeta-titulo h2, .tarjeta-titulo h3 { display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-md); font-weight: var(--peso-fuerte); }

.tarjeta-producto { display: grid; gap: var(--e-2); }
.tarjeta-producto .nombre { font-size: var(--t-lg); font-weight: var(--peso-fuerte); line-height: 1.3; }
.tarjeta-producto .dato { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-3); color: var(--texto-2); font-size: var(--t-sm); }
.tarjeta-producto .dato strong { color: var(--texto); font-weight: var(--peso-fuerte); }

.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: var(--e-3); }
.cifra-tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-lg); padding: var(--e-3) var(--e-3) var(--e-3) var(--e-4); min-width: 0; box-shadow: var(--sombra-1); display: flex; flex-direction: column; }
/* Etiqueta en una sola línea con su ⓘ pequeño: así todas las cifras quedan a la misma altura */
.cifra-tarjeta .etiqueta { display: flex; align-items: center; gap: 2px; white-space: nowrap; min-height: 1.25rem; }
.cifra-tarjeta .etiqueta .boton-info { width: 1.1rem; height: 1.1rem; flex: none; }
.cifra-tarjeta .etiqueta .boton-info .icono { width: 0.85rem; height: 0.85rem; }
.cifra-tarjeta .etiqueta { font-size: 0.6875rem; color: var(--texto-2); font-weight: var(--peso-fuerte); text-transform: uppercase; letter-spacing: 0.03em; overflow: hidden; text-overflow: ellipsis; }
.cifra-tarjeta .valor { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; font-size: var(--t-xl); font-weight: var(--peso-fuerte); line-height: 1.25; margin-top: var(--e-1); overflow-wrap: anywhere; }
.cifra-tarjeta .comparacion { font-size: var(--t-xs); margin-top: var(--e-1); display: flex; align-items: center; gap: var(--e-1); }
.comparacion.sube { color: var(--exito); } .comparacion.baja { color: var(--peligro); } .comparacion.igual { color: var(--texto-3); }

details.tarjeta > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); font-weight: var(--peso-fuerte); }
details.tarjeta > summary::-webkit-details-marker { display: none; }
details.tarjeta > summary .icono { transition: transform var(--dur-media) var(--curva); }
details.tarjeta[open] > summary .icono-giro { transform: rotate(180deg); }
details.tarjeta[open] > summary { margin-bottom: var(--e-3); }
/* Una etiqueta con botón (Stock: «bruto ▾») baja el botón a otra línea en vez de cortarse */
.cifra-tarjeta .etiqueta:has(.boton-texto) { flex-wrap: wrap; white-space: normal; }
.tarjeta-titulo .boton-texto { white-space: nowrap; }
/* Texto grande del navegador: las cifras y títulos se recortan con «…» en vez de cortarse */
.cifra-tarjeta .valor, .tarjeta-titulo h2, .tarjeta-hoy .etiqueta-hoy, .tarjeta-hoy .detalle-hoy { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cifra-tarjeta .valor { overflow-wrap: normal; }
/* Una etiqueta con ⓘ puede bajar a otra línea en vez de ocultar el ⓘ */
.cifra-tarjeta .etiqueta:has(.boton-info) { white-space: normal; overflow: visible; flex-wrap: wrap; }