/*
 * Panel del Dashboard (Home) — molde adaptado del "protagonista + satélites +
 * gráficos" de Clean OS (cap. 7).
 *
 * Orden de lectura: gráficos (forma del portafolio) → Vencidos/Por vencer
 * (.dash-kpis, la cifra que manda la regla de producto "ningún vencimiento
 * pasa desapercibido") → tabla de filas concretas. El conteo total de
 * productos registrados no es protagonista de nada: es la línea de contexto
 * bajo los KPIs.
 */

/* --- KPIs protagonistas --- */

/* Asume exactamente 2 tarjetas (Vencidos/Por vencer, hardcodeadas en el
   .razor, no un @foreach): con auto-fit eso da 1 columna en angosto y 2 en
   ancho, sin huérfanos ni wrap raro. Agregar una tercera KPI exige revisar
   este grid, no solo el markup. margin-top en --space-8: bajar de los
   gráficos a las cifras es un cambio de sección, no otro elemento del mismo
   grupo. */
.dash-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.dash-kpi-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  margin: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  appearance: none;
  cursor: pointer;
  transition: var(--transition-control);
}

.dash-kpi-card:hover { background: var(--surface-hover); }
.dash-kpi-card:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.dash-kpi-danger { border-color: var(--danger); }
.dash-kpi-danger[aria-pressed="true"] { background: var(--danger-soft); box-shadow: inset 0 0 0 2px var(--danger); }
.dash-kpi-danger .dash-kpi-cifra { color: var(--danger-text); }

.dash-kpi-warning { border-color: var(--warning); }
.dash-kpi-warning[aria-pressed="true"] { background: var(--warning-soft); box-shadow: inset 0 0 0 2px var(--warning); }
.dash-kpi-warning .dash-kpi-cifra { color: var(--warning-text); }

.dash-kpi-cifra {
  display: block;
  margin: var(--space-1) 0 0;
  font-size: clamp(2.25rem, 5vw, var(--text-display-size));
  line-height: var(--text-display-lh);
  letter-spacing: var(--text-display-ls);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

.dash-kpi-cap {
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-lh);
  color: var(--text-secondary);
}

/* El total registrado: antes era la cifra protagonista, ahora es el dato de
   contexto que acompaña a los KPIs ("de 312 registrados"). */
.dash-kpi-total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  color: var(--text-secondary);
}

.dash-kpi-total strong {
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-lh);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.dash-actualizado {
  font-size: var(--text-caption-size);
  color: var(--text-tertiary);
}

/* --- Estado de error --- */

.dash-error {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  max-width: 480px;
  background: var(--danger-soft);
  border-color: var(--danger);
}

.dash-error .os-overline { color: var(--danger-text); }

.dash-error-texto {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--text-small-size);
}

/* --- Satélites: barras y línea --- */

/* Igual que .dash-kpis: exactamente 2 tarjetas fijas en el .razor (barras +
   línea), por eso 1fr 1fr sin auto-fit es seguro. Una tercera obliga a
   revisar este grid. Sin margin-top: ahora abre la página. */
.dash-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  align-items: stretch;
}

@media (min-width: 900px) {
  .dash-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Ambas tarjetas son flex-column (antes solo barras lo era): así el estado
   vacío (.dash-vacio, flex:1) puede repartirse el alto real que
   .dash-grid (align-items:stretch) les da, en vez de quedar pegado arriba
   con hueco muerto debajo cuando el gráfico hermano es más alto. */
.dash-chart-card,
.dash-barras-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Vive dentro de .dash-graf-cab (arriba a la derecha), así que el aire de
   abajo ya lo pone la cabecera. No encoge: los dos botones del segmentado
   tienen que seguir leyéndose aunque el título sea largo — cuando no entran,
   la cabecera envuelve y el control baja entero. */
.dash-barras-filtro {
  flex-shrink: 0;
}

/* Los dos contenedores de gráfico comparten alto: 200px, para que los KPIs
   entren en la misma mirada sin scroll. flex:1 deja que cada uno ocupe lo que
   sobre en su tarjeta (el envoltorio lee ese alto real al pintar), y el
   min-height evita el salto de layout mientras el gráfico aún no pintó.

   Clave del arreglo: NINGUNO de los dos altos depende ya de los datos. Antes
   el de barras salía de la cantidad de grupos, así que alternar Unidad/Estado
   —que tienen distinta cantidad— cambiaba el tamaño de golpe. */
.dash-barras,
.dash-anios {
  flex: 1;
  min-height: 200px;
}

/* flex:1 + centrado: cuando el chart hermano es más alto,
   .dash-grid (align-items:stretch) estira
   esta tarjeta a esa misma altura. Sin esto el mensaje queda pegado arriba
   y el resto de la tarjeta se ve como espacio muerto. */
.dash-vacio {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: var(--space-12) var(--space-6);
  text-align: center;
  font-size: var(--text-small-size);
  color: var(--text-secondary);
}

.dash-graf-cab {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-2);
}

/* Un paso por debajo de .dash-table-titulo (h4/20px) a propósito: barras y
   línea son satélites de comparación/tendencia, la tabla es el trabajo real
   (regla 3, "precisión por encima de adorno" — el rango tipográfico tiene
   que decir lo mismo que dicen los comentarios del .razor). */
.dash-graf-cab h2 {
  margin: 0;
  font-size: var(--text-small-size);
  line-height: var(--text-small-lh);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.dash-graf-cab p {
  margin: var(--space-1) 0 0;
  font-size: var(--text-caption-size);
  color: var(--text-secondary);
}

/* --- Tabla de productos por vencer --- */

/* .tarjeta:has(table) (base.css) le quita borde/fondo/padding-inline a
   cualquier tarjeta con tabla adentro ("la hoja se disuelve") — correcto en
   general, pero acá dejaba la tabla (el trabajo real) sin ningún ancla
   visual entre dos tarjetas SÍ enmarcadas (los KPIs arriba, los gráficos
   abajo). El filete superior en tinta (mismo tratamiento que ya usa el
   encabezado de cualquier grid) le devuelve peso sin reintroducir la caja
   completa. Filete simple, no la tinta de 2px: con el lienzo ya en blanco
   alcanza para anclar sin agregar peso. margin-top en --space-6 (grupo
   nuevo: KPIs → tabla), no el --space-4 de dos elementos del mismo grupo. */
.dash-table-card {
  min-width: 0;
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--border);
}

/* Cabecera propia (no .dash-graf-cab): esa clase también estiliza cualquier
   <p> hijo para el subtítulo de un gráfico, y pisaría el tamaño/color de
   .dash-table-titulo por especificidad si se reutilizara acá. */
.dash-table-cab {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-3);
}

.dash-table-titulo {
  margin: 0;
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-lh);
  letter-spacing: var(--text-h4-ls);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

/* El buscador va pegado al título, no repartido por el space-between de la
   cabecera: el margen automático a la derecha se come todo el hueco y empuja
   la marca de filtro activo al otro extremo. La clase base .busqueda vive en
   app-shell.css, compartida con Productos y los catálogos. */
.dash-table-cab .busqueda-dash {
  flex: 1 1 220px;
  min-width: 0;
  max-width: 320px;
  margin-inline-end: auto;
}

.dash-table-filtro-activo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-caption-size);
  color: var(--text-secondary);
  white-space: nowrap;
}

.dash-table-filtro-activo strong { color: var(--text-primary); }

.dash-table-filtro-activo button {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--text-link);
  text-decoration: underline;
  cursor: pointer;
}

.dash-table-filtro-activo button:hover { color: var(--text-link-hover); }
.dash-table-filtro-activo button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-xs);
}

/* La tabla scrollea DENTRO de su contenedor, nunca desborda la página
   (regla del ancho propio, 4.13). */
.dash-table-scroll {
  overflow-x: auto;
}

/* Estado por vencimiento: pastilla con texto, sobre los mismos tokens
   semánticos que los KPIs (antes era un punto de color sin etiqueta, tomado
   directo de un string del SP — invisible para daltonismo y lectores de
   pantalla, e inconsistente con el resto de la paleta). */
.dash-estado {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--text-caption-size);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

.dash-estado-vencido { background: var(--danger-soft); color: var(--danger-text); }
.dash-estado-por-vencer { background: var(--warning-soft); color: var(--warning-text); }

/* Celda de vencimiento: fecha absoluta + "vence en N d" / "vencido hace N d",
   para no obligar a nadie a hacer la resta mentalmente. */
.dash-tabla-vencimiento {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.dash-tabla-vencimiento-rel {
  font-size: var(--text-caption-size);
  color: var(--text-secondary);
}