/* ============================================================
   panel.css — El panel de datos sobre el historial
   Usa los tokens de tokens.css: el panel tiene que verse parte de
   la app, no un widget pegado encima.
   Patrón de KPIs y tarjetas tomado del portal de Asistencia.
   ============================================================ */

.pn { margin: var(--e5) 0 var(--e4); }

.pn--cargando p, .pn--vacio p {
  margin: 0; padding: var(--e5) var(--e4); text-align: center;
  color: var(--texto-sec); font-size: var(--t-sm);
  background: var(--superficie); border: 1px dashed var(--borde-fuerte); border-radius: var(--r);
}
.pn-error {
  margin: var(--e4) 0; padding: var(--e3) var(--e4);
  background: var(--alerta-bg); color: #92620a;
  border-radius: var(--r-sm); font-size: var(--t-sm);
}

/* ---------- Cabecera ---------- */
.pn-cab {
  display: flex; align-items: baseline; gap: var(--e3);
  flex-wrap: wrap; margin-bottom: var(--e3);
}
.pn-t {
  margin: 0; font-size: var(--t-md); font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em; color: var(--la-azul);
}
.pn-rango { font-size: var(--t-xs); color: var(--texto-ter); }

/* ---------- KPIs ----------
   auto-fit: en el teléfono caben 2 por fila, en escritorio 4-5.
   Nunca se fija el número de columnas a mano. */
.pn-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--e2); margin-bottom: var(--e3);
}
.pn-kpi {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--e3) var(--e3) var(--e2);
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--r); box-shadow: var(--sombra);
  min-height: 84px;
}
.pn-kpi-lbl {
  font-size: 11.5px; font-weight: 600; line-height: 1.25; color: var(--texto-sec);
}
.pn-kpi-val {
  font-size: 26px; font-weight: 800; letter-spacing: -.5px; line-height: 1.15;
  color: var(--texto);
}
.pn-kpi-val .pn-u {
  font-size: 13px; font-weight: 600; color: var(--texto-ter); margin-left: 3px;
}
.pn-kpi-sub { font-size: 10.5px; color: var(--texto-ter); }
.pn-kpi .pn-spark { margin-top: auto; }

/* Tonos semánticos: el color es la lectura rápida, el número manda igual. */
.pn-kpi.t-ok     .pn-kpi-val { color: var(--ok); }
.pn-kpi.t-warn   .pn-kpi-val { color: var(--alerta); }
.pn-kpi.t-danger .pn-kpi-val { color: var(--error); }
.pn-kpi.t-info   .pn-kpi-val { color: var(--la-azul); }

.pn-spark { width: 100%; height: 26px; display: block; }
.pn-spark-line { fill: none; stroke: var(--la-azul-vivo); stroke-width: 1.6; opacity: .55; }

/* ---------- Tarjetas de gráfico ---------- */
.pn-card {
  padding: var(--e4) var(--e4) var(--e3);
  margin-bottom: var(--e2);
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--r); box-shadow: var(--sombra);
}
.pn-card-t {
  margin: 0 0 var(--e3); font-size: var(--t-sm); font-weight: 700; color: var(--texto);
}
.pn-card-s { font-weight: 500; color: var(--texto-ter); font-size: var(--t-xs); }

.pn-svg { width: 100%; height: auto; display: block; overflow: visible; }

/* --- Barras horizontales (HTML, no SVG: ver el comentario en panel.js) ---
   Tres columnas: nombre | pista | cifra. El nombre tiene ancho fijo para que
   todas las pistas arranquen alineadas, que es lo que hace comparables las
   barras de un vistazo. */
.pn-bars { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.pn-bar {
  display: grid; grid-template-columns: 92px 1fr auto;
  align-items: center; gap: var(--e3);
}
.pn-bar-k {
  font-size: var(--t-xs); font-weight: 600; color: var(--texto-sec);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pn-bar-t {
  height: 9px; border-radius: var(--r-full);
  background: var(--superficie-2); box-shadow: inset 0 0 0 1px var(--borde);
  overflow: hidden;
}
.pn-bar-f {
  display: block; height: 100%; border-radius: var(--r-full);
  background: var(--la-azul);
}
.pn-card:nth-of-type(even) .pn-bar-f { background: var(--la-azul-vivo); }
.pn-bar-v {
  font-size: var(--t-xs); font-weight: 700; color: var(--texto);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* Variante para nombres largos: nombre y cifra arriba, barra abajo a todo lo ancho. */
.pn-bars--amplio .pn-bar {
  grid-template-columns: 1fr auto;
  grid-template-areas: "k v" "t t";
  row-gap: 3px;
}
.pn-bars--amplio .pn-bar-k { grid-area: k; white-space: normal; color: var(--texto); }
.pn-bars--amplio .pn-bar-v { grid-area: v; }
.pn-bars--amplio .pn-bar-t { grid-area: t; }

.pn-tend { width: 100%; }
.pn-svg--tend { height: 74px; }
/* `stroke: none` es OBLIGATORIO, no decorativo: app.css:18 le pone
   `stroke: currentColor; stroke-width: 2` a TODO <svg> para el sistema de íconos,
   y sin esto el área del gráfico sale con un borde oscuro alrededor. */
.pn-t-area { fill: var(--la-azul-claro); stroke: none; }
.pn-t-line { fill: none; stroke: var(--la-azul); stroke-width: 1.8; vector-effect: non-scaling-stroke; }

/* ---------- Calidad de datos ---------- */
.pn-card--calidad { border-color: var(--borde-fuerte); }
.pn-cal { display: grid; gap: var(--e1); }
.pn-cal-it { border-top: 1px solid var(--borde); }
.pn-cal-it:first-child { border-top: 0; }

.pn-cal-sum {
  display: flex; align-items: center; gap: var(--e3);
  min-height: 44px; padding: var(--e2) 0; cursor: pointer;
  font-size: var(--t-sm); list-style: none;
}
.pn-cal-sum::-webkit-details-marker { display: none; }
.pn-cal-sum::after {
  content: ""; margin-left: auto; width: 8px; height: 8px; flex: none;
  border-right: 2px solid var(--texto-ter); border-bottom: 2px solid var(--texto-ter);
  transform: rotate(45deg); transition: transform .15s;
}
.pn-cal-it[open] .pn-cal-sum::after { transform: rotate(-135deg); }

.pn-cal-n {
  display: grid; place-items: center; flex: none;
  min-width: 30px; height: 24px; padding: 0 var(--e2);
  background: var(--alerta-bg); color: #92620a;
  border-radius: var(--r-full); font-size: var(--t-xs); font-weight: 800;
}
.pn-cal-lbl { font-weight: 600; }

.pn-cal-lista { margin: 0 0 var(--e3); padding: 0 0 0 42px; list-style: none; }
.pn-cal-lista li { padding: 3px 0; font-size: var(--t-sm); }
.pn-cal-lista a { color: var(--la-azul); text-decoration: none; }
.pn-cal-lista a:hover { text-decoration: underline; }
/* Cada registro con observación abre su corrección. Es un <button> y no un
   enlace porque no navega a ninguna parte: abre el modal de edición. Se ve
   como enlace a propósito — la lista se lee igual que antes. */
.pn-cal-reg {
  padding: 0; border: 0; background: none; font: inherit; text-align: left;
  color: var(--la-azul); cursor: pointer;
}
.pn-cal-reg:hover { text-decoration: underline; }
.pn-cal-reg:focus-visible { outline: 2px solid var(--la-azul); outline-offset: 2px; border-radius: 4px; }
.pn-cal-mas { color: var(--texto-ter); font-size: var(--t-xs); }

/* ---------- Filtros (al final a propósito) ---------- */
.pn-filtros {
  display: flex; align-items: center; gap: var(--e2);
  flex-wrap: wrap; margin-top: var(--e3);
}
.pn-filtros-l {
  font-size: var(--t-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--texto-ter);
}
.pn-chip {
  min-height: 34px; padding: 0 var(--e4);
  background: var(--superficie); border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-full); color: var(--texto-sec);
  font: inherit; font-size: var(--t-sm); font-weight: 600; cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.pn-chip:hover { border-color: var(--la-azul); color: var(--la-azul); }
.pn-chip--on {
  background: var(--la-azul); border-color: var(--la-azul); color: #fff;
}

/* ---------- Teléfono ----------
   Corte a 899px, no a 680: hay teléfonos que declaran ~720px CSS de ancho y
   quedaban con el panel de escritorio. Mismo cambio y mismo motivo que el
   bloque TELÉFONO de app.css (2026-08-18). */
@media (max-width: 899px) {
  .pn { margin: var(--e4) 0 var(--e3); }
  /* 2 KPIs por fila con aire justo, igual que Asistencia. */
  .pn-kpis { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
  .pn-kpi { min-height: 0; padding: 8px 10px 6px; }
  .pn-kpi-val { font-size: 22px; }
  .pn-card { padding: var(--e3); }
  .pn-cal-lista { padding-left: 34px; }
  /* El nombre del equipo se lleva menos ancho para que la barra siga leyéndose. */
  .pn-bar { grid-template-columns: 74px 1fr auto; gap: var(--e2); }
  /* Táctil por ancho, no sólo por `pointer: coarse` (ver el mismo comentario
     en app.css: esa consulta no siempre la declara el navegador). */
  .pn-chip { min-height: 44px; padding: 0 var(--e5); }
  .pn-cal-sum { min-height: 48px; }
  .pn-cal-lista li { padding: 7px 0; }
}

/* Zonas de toque: con guantes, en terreno. */
@media (pointer: coarse) {
  .pn-chip { min-height: 44px; padding: 0 var(--e5); }
  .pn-cal-sum { min-height: 48px; }
  .pn-cal-lista li { padding: 7px 0; }
}