/* Las cinco pieles del Panel de Mando — DISPOSICIÓN.
 *
 * Aquí está lo que convierte cinco paletas en cinco productos: cada piel
 * reordena el tablero, cambia la densidad y decide qué bloques se enseñan y
 * cuáles sobran.
 *
 * Cómo funciona: cada caja del tablero sale con `data-bloque="<nombre>"` (el
 * nombre de la variable en la vista) y cada KPI con `data-orden="<n>"`. Desde
 * aquí se les cambia el ancho (`grid-column`), el sitio (`order`) o se
 * esconden. Los DATOS no cambian nunca: es el mismo motor, el mismo día y las
 * mismas cifras vistas de otra manera. Por eso cambiar de piel en mitad de una
 * demo es instantáneo y no puede descuadrar nada.
 *
 * Reparto de identidades:
 *   Planta    todo a la vista, 12 columnas, densidad alta. Es la de trabajo.
 *   Cristal   pocas tarjetas y muy grandes, apiladas casi a pantalla completa.
 *   Nube      densidad media, tres bloques por fila, todo visible.
 *   Consola   densidad máxima: tablas más largas, huecos mínimos, cuatro
 *             bloques por fila y ningún gráfico decorativo.
 *   Esencial  solo las cifras y una curva. El 60 % del tablero, escondido.
 */

/* La fila de KPIs va SIEMPRE la primera, en todas las pieles. Los temas que
   promueven un bloque con `order` negativo se lo colaban por encima de las
   cifras, que es justo lo que nadie quiere ver segundo. */
[data-tema] .pnl-lienzo > [data-bloque='kpis'] { order: -9; }

/* ------------------------------------------------- 02 · Cristal (iOS 17) -- */
/* Una cosa cada vez. Tarjetas anchas, mucho aire y fuera lo accesorio: esta  */
/* piel es para mirar, no para operar.                                        */

[data-tema='cristal'] .pnl-lienzo {
  gap: 1rem;
  padding: 1rem 1.4rem 3rem;
  max-width: 88rem;
  margin-inline: auto;
}
/* Tres KPIs grandes en fila; los dos últimos sobran en esta lectura. */
[data-tema='cristal'] .pnl-kpis { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
[data-tema='cristal'] .pnl-kpi[data-orden='4'],
[data-tema='cristal'] .pnl-kpi[data-orden='5'] { display: none; }
[data-tema='cristal'] .pnl-kpi { padding: 1.1rem 1.25rem 1.2rem; }
[data-tema='cristal'] .pnl-kpi__cifra { font-size: 2.1rem; font-weight: 400; }
[data-tema='cristal'] .pnl-kpi--grande .pnl-kpi__cifra { font-size: 2.4rem; }
[data-tema='cristal'] .pnl-kpi__etiqueta { font-size: 0.7rem; letter-spacing: 0.06em; text-transform: none; }

/* El bloque principal de cada vista ocupa el ancho entero; el resto va a
   medias. Nada de columnas de un tercio: en esta piel no caben. */
[data-tema='cristal'] .pnl-lienzo > [data-bloque] { grid-column: span 6; }
[data-tema='cristal'] .pnl-lienzo > [data-bloque='cierre'],
[data-tema='cristal'] .pnl-lienzo > [data-bloque='ritmo'],
[data-tema='cristal'] .pnl-lienzo > [data-bloque='ventas'],
[data-tema='cristal'] .pnl-lienzo > [data-bloque='aforo'],
[data-tema='cristal'] .pnl-lienzo > [data-bloque='evolucion'],
[data-tema='cristal'] .pnl-lienzo > [data-bloque='composicion'] { grid-column: span 12; order: -2; }
/* Las tarjetas de producto necesitan el ancho entero, pero no adelantarse a
   los dos gráficos que explican de qué van. */
[data-tema='cristal'] .pnl-lienzo > [data-bloque='productos'] { grid-column: span 12; }
[data-tema='cristal'] .pnl-lienzo > [data-bloque='alertas'],
[data-tema='cristal'] .pnl-lienzo > [data-bloque='avisos'] { grid-column: span 12; order: -1; }

/* Lo que no cabe en una lectura de vitrina. */
[data-tema='cristal'] .pnl-lienzo > [data-bloque='comparada'],
[data-tema='cristal'] .pnl-lienzo > [data-bloque='evoComponentes'],
[data-tema='cristal'] .pnl-lienzo > [data-bloque='destinos'],
[data-tema='cristal'] .pnl-lienzo > [data-bloque='porProducto'],
[data-tema='cristal'] .pnl-lienzo > [data-bloque='paradas'],
[data-tema='cristal'] .pnl-lienzo > [data-bloque='compas'],
[data-tema='cristal'] .pnl-lienzo > [data-bloque='firme'],
[data-tema='cristal'] .pnl-lienzo > [data-bloque='fuga'] { display: none; }

/* Tablas cortas: ocho filas y a otra cosa. Pero el desglose que se abre
   dentro de una ficha NO se recorta: si alguien lo ha abierto es justamente
   para verlo entero. */
[data-tema='cristal'] .pnl-tabla-env { max-height: none; }
[data-tema='cristal'] .pnl-caja-t__cuerpo > .pnl-tabla-env .pnl-tabla tbody tr:nth-child(n + 9) { display: none; }
[data-tema='cristal'] .pnl-tabla td { padding-block: 0.5rem; }
[data-tema='cristal'] .pnl-caja-t__cuerpo { padding: 1rem 1.1rem; }
[data-tema='cristal'] .pnl-caja-t__cabeza { padding: 0.8rem 1.1rem; }
[data-tema='cristal'] .pnl-caja-t__titulo { font-size: 0.74rem; letter-spacing: 0.08em; }

/* Control segmentado a la manera de iOS: pastilla con el activo en relieve. */
[data-tema='cristal'] .pnl-grupo {
  background: rgba(120, 130, 160, 0.16);
  border: 0;
  border-radius: 10px;
  padding: 2px;
  gap: 2px;
}
[data-tema='cristal'] .pnl-grupo .pnl-boton { border: 0; border-radius: 8px; background: none; }
[data-tema='cristal'] .pnl-grupo .pnl-boton[aria-pressed='true'] {
  background: #fff;
  color: var(--pnl-tinta);
  box-shadow: 0 1px 3px rgba(23, 32, 58, 0.18);
}

/* ---------------------------------------------------- 03 · Consola (téc.) -- */
/* Densidad máxima. Más filas por tabla, huecos mínimos y cuatro bloques por  */
/* fila: es la piel del que quiere ver el dato crudo sin hacer clic.          */

[data-tema='consola'] .pnl-lienzo { gap: 0.4rem; padding: 0.4rem 0.6rem 1.4rem; }
[data-tema='consola'] .pnl { font-family: var(--fuente-mono); font-size: 12px; }
/* La prosa larga sigue en proporcional: en mono no se lee un párrafo. */
[data-tema='consola'] .pnl-caja-t__pie,
[data-tema='consola'] .pnl-metodo,
[data-tema='consola'] .pnl-alerta__texto,
[data-tema='consola'] .pnl-indice__intro { font-family: var(--fuente); }

[data-tema='consola'] .pnl-kpis { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 0.4rem; }
[data-tema='consola'] .pnl-kpi { padding: 0.4rem 0.5rem; }
[data-tema='consola'] .pnl-kpi__cifra { font-size: 1.2rem; }
[data-tema='consola'] .pnl-kpi--grande .pnl-kpi__cifra { font-size: 1.35rem; }
[data-tema='consola'] .pnl-kpi__chispa { display: none; }

/* Todo se estrecha un escalón: donde había dos bloques, caben tres. */
[data-tema='consola'] .pnl-lienzo > [data-bloque] { grid-column: span 4; }
[data-tema='consola'] .pnl-lienzo > [data-bloque='entradas'],
[data-tema='consola'] .pnl-lienzo > [data-bloque='pedidos'],
[data-tema='consola'] .pnl-lienzo > [data-bloque='lotes'],
[data-tema='consola'] .pnl-lienzo > [data-bloque='clientes'],
[data-tema='consola'] .pnl-lienzo > [data-bloque='porProducto'],
[data-tema='consola'] .pnl-lienzo > [data-bloque='firme'],
[data-tema='consola'] .pnl-lienzo > [data-bloque='productos'],
[data-tema='consola'] .pnl-lienzo > [data-bloque='comparada'] { grid-column: span 8; }
[data-tema='consola'] .pnl-kpis { grid-column: span 12; }

/* Las tablas mandan: el doble de alto y las filas apretadas. */
[data-tema='consola'] .pnl-tabla-env { max-height: 32rem; }
[data-tema='consola'] .pnl-tabla { font-size: 0.72rem; }
[data-tema='consola'] .pnl-tabla td { padding: 0.18rem 0.45rem; }
[data-tema='consola'] .pnl-tabla th { padding: 0.28rem 0.45rem; font-size: 0.6rem; }
[data-tema='consola'] .pnl-caja-t__cuerpo { padding: 0.5rem; }
[data-tema='consola'] .pnl-caja-t__cabeza { padding: 0.32rem 0.5rem; }
[data-tema='consola'] .pnl-caja-t__titulo { color: var(--pnl-acento); font-size: 0.64rem; }
[data-tema='consola'] .pnl-caja-t__pie { padding: 0.3rem 0.5rem; font-size: 0.68rem; }
/* La ficha de producto también se aprieta: en esta piel una cifra de 24 px
   rompe la escala de todo lo demás. */
[data-tema='consola'] .pnl-prod__cifra { font-size: 1.15rem; }
[data-tema='consola'] .pnl-prod__dato { padding: 0.4rem 0.5rem; }
[data-tema='consola'] .pnl-prod { gap: 0.5rem; }
[data-tema='consola'] .pnl-alerta { padding: 0.32rem 0.5rem; }
[data-tema='consola'] .pnl-linea-prod { padding: 0.4rem 0.5rem; }

/* ----------------------------------------------------- 04 · Nube (moderno) */
/* Densidad media y tres bloques por fila. Nada oculto, pero nada apretado.   */

[data-tema='nube'] .pnl-lienzo { gap: 0.85rem; padding: 0.85rem 1.2rem 2.4rem; }
[data-tema='nube'] .pnl-kpis { gap: 0.85rem; }
[data-tema='nube'] .pnl-kpi { padding: 0.85rem 1rem; }
[data-tema='nube'] .pnl-kpi__etiqueta { text-transform: none; letter-spacing: 0.03em; font-size: 0.72rem; }
[data-tema='nube'] .pnl-kpi__cifra { font-size: 1.7rem; }
[data-tema='nube'] .pnl-caja-t__cuerpo { padding: 0.9rem; }
[data-tema='nube'] .pnl-caja-t__cabeza { padding: 0.7rem 0.9rem; }
[data-tema='nube'] .pnl-caja-t__titulo { text-transform: none; letter-spacing: 0.01em; font-size: 0.82rem; color: var(--pnl-tinta); }
[data-tema='nube'] .pnl-tabla td { padding-block: 0.42rem; }
[data-tema='nube'] .pnl-tabla-env { max-height: 26rem; }
/* Las alertas primero: en la lectura moderna, lo accionable va arriba. */
[data-tema='nube'] .pnl-lienzo > [data-bloque='alertas'],
[data-tema='nube'] .pnl-lienzo > [data-bloque='avisos'] { order: -1; }

/* ------------------------------------------------- 05 · Esencial (mínimo) -- */
/* Tres cifras, una curva y lo que esté fuera de rango. Todo lo demás se      */
/* esconde: si hace falta el detalle, se cambia de piel.                      */

[data-tema='esencial'] .pnl-lienzo {
  gap: 2.4rem;
  padding: 2.4rem 2rem 4rem;
  max-width: 74rem;
  margin-inline: auto;
}
[data-tema='esencial'] .pnl-kpis { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; }
[data-tema='esencial'] .pnl-kpi[data-orden='4'],
[data-tema='esencial'] .pnl-kpi[data-orden='5'] { display: none; }
[data-tema='esencial'] .pnl-kpi__chispa { display: none; }
[data-tema='esencial'] .pnl-kpi__etiqueta { font-size: 0.66rem; letter-spacing: 0.18em; }

/* Solo sobreviven el gráfico principal de cada vista y la bandeja de avisos. */
[data-tema='esencial'] .pnl-lienzo > [data-bloque] { display: none; grid-column: span 12; }
[data-tema='esencial'] .pnl-lienzo > .pnl-kpis,
[data-tema='esencial'] .pnl-lienzo > [data-bloque='cierre'],
[data-tema='esencial'] .pnl-lienzo > [data-bloque='ritmo'],
[data-tema='esencial'] .pnl-lienzo > [data-bloque='ventas'],
[data-tema='esencial'] .pnl-lienzo > [data-bloque='aforo'],
[data-tema='esencial'] .pnl-lienzo > [data-bloque='flujoEntrada'],
[data-tema='esencial'] .pnl-lienzo > [data-bloque='flujoPedido'],
[data-tema='esencial'] .pnl-lienzo > [data-bloque='evolucion'],
[data-tema='esencial'] .pnl-lienzo > [data-bloque='alertas'],
[data-tema='esencial'] .pnl-lienzo > [data-bloque='avisos'] { display: block; }
[data-tema='esencial'] .pnl-lienzo > [data-bloque='alertas'],
[data-tema='esencial'] .pnl-lienzo > [data-bloque='avisos'] { grid-column: span 12; }

/* Y dentro de lo que queda, solo lo esencial: sin tablas de apoyo ni bloque
   de previsión largo. */
[data-tema='esencial'] .pnl-sep,
[data-tema='esencial'] .pnl-caja-t__cuerpo .pnl-tabla-env { display: none; }
[data-tema='esencial'] .pnl-prevision { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1.6rem; }
[data-tema='esencial'] .pnl-prevision__caso { border-left: 0; padding-left: 0; }
[data-tema='esencial'] .pnl-prevision__cifra { font-size: 1.35rem; font-weight: 300; }

/* ------------------------------------------------------ la fila de cifras -- */
/* Cristal y Consola estrechan TODOS los bloques del tablero, y la fila de KPIs
   es un bloque más: se quedaba a media pantalla con las cifras apelotonadas.
   Va aquí abajo y con `.pnl-lienzo >` para ganar por orden a igual peso. */

[data-tema='cristal'] .pnl-lienzo > [data-bloque='kpis'],
[data-tema='consola'] .pnl-lienzo > [data-bloque='kpis'] { grid-column: span 12; }

/* --------------------------------------------------------------- móvil -- */
/* Por debajo de 760 px manda el apilado de `panel.css`: ninguna piel puede  */
/* imponer dos columnas en un teléfono.                                      */

@media (max-width: 760px) {
  [data-tema] .pnl-lienzo > [data-bloque],
  [data-tema] .pnl-lienzo > .pnl-kpis { grid-column: span 12; }
  [data-tema='cristal'] .pnl-lienzo,
  [data-tema='esencial'] .pnl-lienzo { padding-inline: 0.9rem; gap: 1.2rem; }
  [data-tema='esencial'] .pnl-kpi__cifra { font-size: 2rem; }
}