/* Paquete panel — corrección del frontend 13-sep-2026 (docs/auditoria/frontend-vistas-2026-09-13.md). */

/* --- Ritmo vertical del panel --------------------------------------------
 * VPN → máquina encendida → indicadores → siguiente paso/avisos. Un solo
 * espaciado entre bloques para que el orden se lea como una secuencia. */
.panel-alumno .acceso-vpn,
.panel-alumno #panel-instancia { margin-bottom: var(--ac-e-5); }

/* --- Indicadores: un bloque, seis tarjetas -------------------------------
 * Con seis tarjetas la rejilla heredada (auto-fit, minmax 210px) salía 4+2 a
 * 1440 px, con dos huecos vacíos (medido en la captura). Se fija 3×2 en
 * escritorio —cifras sueltas arriba, las tres con barra abajo—, 2×3 en tableta
 * y una columna en móvil. */
.panel-kpis.ac-kpi-grid { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 576px) {
  .panel-kpis.ac-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
  .panel-kpis.ac-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* DSH-10: a 1440 px «BANDERAS CAPTURADAS» medía 171 px en 157 disponibles y se
 * leía «BANDERAS CAPTURA…». Las etiquetas ya son de una palabra, y además se
 * permite partir línea en vez de recortar: cyberconquer.css recorta toda
 * .card-category de tarjeta de estadística con ellipsis (0,4,0); este selector
 * pesa (0,5,0) y solo actúa dentro del panel. */
.panel-kpis .card.card-stats .card-header .card-category {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* El valor es un <p class="card-title"> (no un h4): se anula el margen de
 * párrafo para que conserve la métrica que tenía como encabezado. */
.panel-kpis .card.card-stats > .card-header > p.card-title {
  margin: 0;
  overflow-wrap: anywhere;
}

.panel-kpis .panel-kpi .card-body { padding-top: 0; }

/* --- Barras de progreso --------------------------------------------------
 * DSH-09: el «0%» iba dentro de la barra con .text-dark (color del fondo) y con
 * anchura 0 quedaba sobre la pista sin contraste. La cifra va fuera, en texto
 * normal. */
.panel-kpi__barra .progress,
.panel-paso__item .progress {
  height: 6px;
  margin: 0;
  background: var(--bg-3);
  border-radius: var(--ac-r-full);
  overflow: hidden;
}

.panel-kpi__barra .progress-bar,
.panel-paso__item .progress-bar {
  background: var(--accent);
  border-radius: var(--ac-r-full);
}

.panel-kpi__progreso {
  display: flex;
  justify-content: space-between;
  gap: var(--ac-e-2);
  margin: var(--ac-e-2) 0 0;
  font-size: var(--ac-t-xs);
  color: var(--fg-dim);
}

.panel-kpi__progreso b {
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

/* --- Títulos de sección (h2 bajo el h1 de la página, DSH-17) ------------- */
.panel-seccion__titulo {
  margin: 0 0 var(--ac-e-4);
  font-size: var(--ac-t-md);
  font-weight: 650;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--fg);
}

.panel-seccion__titulo .fas { color: var(--fg-mute); margin-right: var(--ac-e-1); }

/* Sin height:100%: estirar «Tu siguiente paso» hasta la altura de los avisos
 * dejaba bajo una sola máquina un hueco vacío de ~400 px (medido en la captura
 * de 1440 px), que es justo lo que señalaba DSH-14. */
.panel-fila { align-items: flex-start; }
.panel-fila > [class*="col"] { margin-bottom: var(--ac-e-5); }
.panel-fila .card { margin: 0; }

/* --- Tu siguiente paso ---------------------------------------------------- */
.panel-paso__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--ac-e-4);
}

.panel-paso__item { display: grid; gap: var(--ac-e-1); }

.panel-paso__nombre {
  margin: 0;
  font-size: var(--ac-t-base);
  font-weight: 650;
  color: var(--accent);
}

a.panel-paso__nombre:hover { color: var(--accent-1); text-decoration: none; }
a.panel-paso__nombre:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

.panel-paso__meta {
  margin: 0;
  font-size: var(--ac-t-sm);
  color: var(--fg-dim);
}

.panel-paso__texto {
  margin: var(--ac-e-2) 0 var(--ac-e-4);
  font-size: var(--ac-t-sm);
  color: var(--fg-dim);
  line-height: 1.55;
}

.panel-paso__sugerida .panel-paso__meta { margin-top: var(--ac-e-1); }

.panel-paso__cta { margin: 0; }

.panel-paso__subtitulo {
  margin: var(--ac-e-5) 0 var(--ac-e-2);
  padding-top: var(--ac-e-4);
  border-top: 1px solid var(--line-soft);
  font-size: var(--ac-t-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

.panel-paso__visitas { margin: 0; padding: 0; list-style: none; }

.panel-paso__visita-enlace {
  display: flex;
  align-items: center;
  gap: var(--ac-e-2);
  padding: var(--ac-e-2) 0;
  background: transparent;
  border: 0;
  color: var(--fg);
  font-size: var(--ac-t-sm);
}

.panel-paso__visita-enlace:hover { color: var(--accent); background: transparent; }

/* --- Avisos ---------------------------------------------------------------- */
.panel-avisos .academy-news__item { padding-left: 0; padding-right: 0; }

.academy-news__title a { color: var(--fg); }
.academy-news__title a:hover { color: var(--accent); text-decoration: none; }
.academy-news__title a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

/* Áreas táctiles en teléfono (DIS-MPR-06): títulos de avisos de 17 px de alto
   y «Elige una en Máquinas…» de 20 px. */
@media (max-width: 760px) {
  .academy-news__title a,
  .instancia-vacia-enlace {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* --- Detalle de un aviso ---------------------------------------------------- */
.panel-noticia-vista { max-width: 72ch; }
.panel-noticia-vista .card { margin-top: 0; }
.panel-noticia-vista .academy-news__item { padding: 0; border: 0; }
.panel-noticia.academy-news__item .academy-news__title { font-size: var(--ac-t-lg); margin-bottom: var(--ac-e-3); }
.panel-noticia__volver { margin: var(--ac-e-4) 0 0; }

/* --- Sesión caducada en el panel de instancia (DSH-15) --------------------- */
.instancia-sesion {
  margin: 0 0 var(--ac-e-3);
  padding: var(--ac-e-3) var(--ac-e-4);
  border: 1px solid var(--warn);
  border-radius: var(--r-sm);
  background: var(--warn-bg);
  color: var(--fg);
  font-size: var(--ac-t-sm);
}

.instancia-sesion a { color: var(--warn); font-weight: 600; text-decoration: underline; }