/*
 * academia.css — sistema de diseño de Academia Cyber Range.
 *
 * Las vistas de frontend/themes/academia estaban escritas contra este sistema,
 * que nunca se implementó: 91 clases `academy-*` sin una sola regla. Este
 * archivo las define, tomando el lenguaje visual de la propia plantilla
 * (paneles oscuros, acentos cian/magenta/lima, tipografía Orbitron para cifras).
 *
 * Se carga DESPUÉS de material.css, así que puede convivir con el tema
 * anterior mientras las vistas migran una a una.
 *
 * Cada bloque va precedido por lo que resuelve, no por lo que es.
 */

/* ===========================================================================
 * Tokens. Un solo lugar donde cambiar la identidad de la academia.
 * ======================================================================== */
:root {
  --ac-fondo: #12141a;
  --ac-fondo-elevado: #1a1d26;
  --ac-fondo-hundido: #0d0f14;
  --ac-borde: #262a36;
  --ac-borde-suave: #1f2330;

  --ac-texto: #e6e8ef;
  --ac-texto-suave: #9aa1b4;
  /* #6b7285 daba ~3.5:1 sobre las superficies elevadas: por debajo de AA (4.5:1)
     para texto pequeño como los rótulos KPI («BANDERAS», «PUNTOS»…) a 0.74rem.
     #8b93a6 pasa AA sobre el fondo y las tarjetas sin dejar de ser un gris tenue. */
  --ac-texto-tenue: #8b93a6;

  /* Acentos. El lima es el primario: es el color que la plataforma ya usaba
   * para las acciones, así que la transición no desorienta a quien ya la usa. */
  --ac-lima: #94c11f;
  --ac-lima-oscuro: #7aa018;
  --ac-cian: #22d3ee;
  --ac-magenta: #e879f9;
  --ac-amarillo: #fbbf24;
  --ac-rojo: #f43f5e;
  --ac-azul: #60a5fa;

  --ac-radio: 10px;
  --ac-radio-chico: 6px;
  --ac-sombra: 0 6px 24px rgba(0, 0, 0, 0.35);
  --ac-espacio: 1rem;

  --ac-fuente: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Orbitron solo para cifras y etiquetas cortas: es display, no lectura. */
  --ac-fuente-cifras: 'Orbitron', 'Roboto Mono', monospace;
}

/* ===========================================================================
 * Marca
 * ======================================================================== */
.academy-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--ac-texto);
}

.academy-wordmark:hover,
.academy-wordmark:focus {
  text-decoration: none;
  color: var(--ac-texto);
}

.academy-wordmark img {
  border-radius: var(--ac-radio-chico);
  flex-shrink: 0;
}

.academy-wordmark span {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.academy-wordmark strong {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.academy-wordmark small {
  font-size: 0.72rem;
  color: var(--ac-lima);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* Antetítulo: da contexto a un encabezado sin competir con él. */
.academy-eyebrow {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ac-lima);
}

/* ===========================================================================
 * Superficies
 * ======================================================================== */
.academy-card {
  background: var(--ac-fondo-elevado);
  border: 1px solid var(--ac-borde);
  border-radius: var(--ac-radio);
  padding: 1.15rem;
  color: var(--ac-texto);
}

/* Solo las tarjetas que llevan a algún sitio reaccionan al puntero: animar
 * las que no son accionables enseña una afordancia que no existe. */
.academy-card--interactive {
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.academy-card--interactive:hover,
.academy-card--interactive:focus-within {
  border-color: var(--ac-lima);
  transform: translateY(-2px);
  box-shadow: var(--ac-sombra);
}

.academy-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--ac-espacio);
}

.academy-panel {
  background: var(--ac-fondo-elevado);
  border: 1px solid var(--ac-borde);
  border-radius: var(--ac-radio);
  overflow: hidden;
}

.academy-panel__header {
  padding: 0.9rem 1.15rem;
  border-bottom: 1px solid var(--ac-borde);
  background: var(--ac-fondo-hundido);
}

.academy-panel__header h2,
.academy-panel__header h3 {
  margin: 0;
  font-size: 1.05rem;
}

/* Texto largo servido desde la base de datos (legales, ayuda). */
.academy-prose {
  max-width: 72ch;
  line-height: 1.7;
  color: var(--ac-texto-suave);
}

.academy-prose h2,
.academy-prose h3 {
  color: var(--ac-texto);
  margin-top: 2rem;
}

.academy-prose a {
  color: var(--ac-lima);
}

/* ===========================================================================
 * Botones
 * ======================================================================== */
.academy-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  /* 44px de alto mínimo: es el objetivo táctil cómodo, no solo el mínimo
   * accesible de 24px. */
  min-height: 44px;
  padding: 0.6rem 1.15rem;
  border: 1px solid transparent;
  border-radius: var(--ac-radio-chico);
  background: transparent;
  color: var(--ac-texto);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.academy-button:hover,
.academy-button:focus {
  text-decoration: none;
}

.academy-button--primary {
  background: var(--ac-lima);
  /* Texto oscuro sobre lima: el contraste con blanco no llega a 4.5:1. */
  color: #12141a;
}

.academy-button--primary:hover,
.academy-button--primary:focus {
  background: var(--ac-lima-oscuro);
  color: #12141a;
}

.academy-button--ghost {
  border-color: var(--ac-borde);
  color: var(--ac-texto-suave);
}

.academy-button--ghost:hover,
.academy-button--ghost:focus {
  border-color: var(--ac-lima);
  color: var(--ac-texto);
}

.academy-button--large {
  width: 100%;
  min-height: 50px;
  font-size: 1.02rem;
}

.academy-icon-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--ac-borde);
  border-radius: var(--ac-radio-chico);
  background: transparent;
  color: var(--ac-texto-suave);
  cursor: pointer;
}

.academy-icon-button:hover,
.academy-icon-button:focus {
  border-color: var(--ac-lima);
  color: var(--ac-texto);
}

/* Contador de pendientes. Va dentro del botón para que su nombre accesible lo
 * incluya al leerse. */
.academy-icon-button span {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--ac-rojo);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 18px;
}

/* ===========================================================================
 * Etiquetas de estado
 * ======================================================================== */
.academy-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--ac-borde);
  border-radius: 999px;
  background: var(--ac-fondo-hundido);
  color: var(--ac-texto-suave);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.academy-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* El color nunca es el único indicador: cada variante mantiene su texto. */
.academy-chip--cyan    { border-color: var(--ac-cian);     color: var(--ac-cian); }
.academy-chip--magenta { border-color: var(--ac-magenta);  color: var(--ac-magenta); }
.academy-chip--yellow  { border-color: var(--ac-amarillo); color: var(--ac-amarillo); }
.academy-chip--red     { border-color: var(--ac-rojo);     color: var(--ac-rojo); }
.academy-chip--blue    { border-color: var(--ac-azul);     color: var(--ac-azul); }
.academy-chip--solved  { border-color: var(--ac-lima);     color: #12141a; background: var(--ac-lima); }

.academy-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ac-lima);
  box-shadow: 0 0 0 3px rgba(148, 193, 31, 0.18);
}

/* ===========================================================================
 * Indicadores numéricos
 * ======================================================================== */
.academy-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--ac-espacio);
  margin-bottom: 1.5rem;
}

.academy-kpi {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.academy-kpi__label {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ac-texto-tenue);
}

.academy-kpi__value {
  font-family: var(--ac-fuente-cifras);
  font-size: 1.85rem;
  line-height: 1.1;
  color: var(--ac-texto);
}

.academy-kpi__note {
  font-size: 0.8rem;
  color: var(--ac-texto-suave);
}

.is-cyan    { color: var(--ac-cian); }
.is-magenta { color: var(--ac-magenta); }
.is-yellow  { color: var(--ac-amarillo); }
.is-lime    { color: var(--ac-lima); }

.academy-progress {
  height: 6px;
  border-radius: 3px;
  background: var(--ac-fondo-hundido);
  overflow: hidden;
}

.academy-progress > span {
  display: block;
  height: 100%;
  background: var(--ac-lima);
}

/* ===========================================================================
 * Barra superior del operador
 * ======================================================================== */
.academy-topbar {
  display: flex;
  align-items: center;
  gap: var(--ac-espacio);
  flex-wrap: wrap;
  padding: 0.7rem 1.15rem;
  border-bottom: 1px solid var(--ac-borde);
  background: var(--ac-fondo-elevado);
}

.academy-topbar__event {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.academy-topbar__event span {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.academy-topbar__event small {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ac-texto-tenue);
}

.academy-topbar__tools {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 1 1 260px;
  min-width: 0;
}

.academy-topbar__search,
.academy-topbar__claim {
  min-width: 0;
  flex: 1 1 auto;
}

.academy-topbar__operator {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-left: auto;
}

.academy-operator-stat {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  text-align: right;
}

.academy-operator-stat small {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ac-texto-tenue);
}

.academy-operator-stat strong {
  font-family: var(--ac-fuente-cifras);
  font-size: 0.95rem;
  color: var(--ac-lima);
}

.academy-topbar__profile {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--ac-radio-chico);
  text-decoration: none;
  color: var(--ac-texto);
}

.academy-topbar__profile:hover,
.academy-topbar__profile:focus {
  background: var(--ac-fondo-hundido);
  text-decoration: none;
  color: var(--ac-texto);
}

.academy-topbar__profile img {
  border-radius: var(--ac-radio-chico);
}

.academy-topbar__profile span {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.academy-topbar__profile small {
  font-size: 0.68rem;
  color: var(--ac-texto-tenue);
}

.academy-alert-menu {
  position: relative;
}

.academy-dropdown {
  min-width: 22rem;
  max-width: calc(100vw - 2rem);
  background: var(--ac-fondo-elevado);
  border: 1px solid var(--ac-borde);
  border-radius: var(--ac-radio);
  box-shadow: var(--ac-sombra);
}

.academy-countdown:empty {
  display: none;
}

.academy-countdown {
  padding: 0.4rem 1.15rem;
  background: var(--ac-fondo-hundido);
  border-bottom: 1px solid var(--ac-borde);
  font-family: var(--ac-fuente-cifras);
  font-size: 0.82rem;
  color: var(--ac-amarillo);
}

/* Por debajo de la tabla el operador se apila: la barra en una fila deja los
 * controles a menos de 8px de ancho cada uno. */
@media (max-width: 767.98px) {
  .academy-topbar {
    flex-direction: column;
    align-items: stretch;
  }

  .academy-topbar__operator {
    margin-left: 0;
    justify-content: space-between;
  }

  .academy-operator-stat {
    text-align: left;
  }
}

/* ===========================================================================
 * Filtros y paginación
 * ======================================================================== */
.academy-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--ac-espacio);
  margin-bottom: var(--ac-espacio);
}

.academy-filter-bar label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 1 1 170px;
  margin: 0;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ac-texto-tenue);
}

.academy-filter-bar select {
  background: var(--ac-fondo-hundido);
  border: 1px solid var(--ac-borde);
  border-radius: var(--ac-radio-chico);
  color: var(--ac-texto);
  min-height: 42px;
  padding: 0 0.6rem;
  font-size: 0.9rem;
  text-transform: none;
  letter-spacing: normal;
}

.academy-filter-bar__actions {
  display: flex;
  gap: 0.5rem;
  flex: 0 0 auto;
}

.academy-pagination {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
}

.academy-pagination .pagination {
  gap: 0.25rem;
  margin: 0;
}

.academy-pagination .page-link {
  min-width: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ac-borde);
  border-radius: var(--ac-radio-chico);
  background: var(--ac-fondo-elevado);
  color: var(--ac-texto-suave);
}

.academy-pagination .active .page-link {
  background: var(--ac-lima);
  border-color: var(--ac-lima);
  color: #12141a;
}

/* ===========================================================================
 * Tarjetas de máquina y reto
 * ======================================================================== */
.academy-challenge-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  height: 100%;
}

.academy-challenge-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.academy-challenge-card__head h3,
.academy-challenge-card__head h4 {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.35;
}

.academy-challenge-card__head a {
  color: var(--ac-texto);
  text-decoration: none;
}

.academy-challenge-card__head a:hover,
.academy-challenge-card__head a:focus {
  color: var(--ac-lima);
}

.academy-challenge-card__points {
  font-family: var(--ac-fuente-cifras);
  font-size: 1.15rem;
  color: var(--ac-lima);
  white-space: nowrap;
}

.academy-challenge-card__progress {
  margin-top: auto;
}

/* ===========================================================================
 * Tarjeta de máquina (catálogo de objetivos)
 *
 * Migrada desde _pendiente. Comparte estructura con la tarjeta de reto
 * (mismo `academy-challenge-card__head`, `__progress`, `__points`), y añade
 * la fila miniatura+nombre y la fila de estadísticas.
 * ======================================================================== */
.academy-target-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  height: 100%;
}

.academy-target-card__body {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.academy-target-card__body h3 {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.35;
}

.academy-target-card__body h3 a {
  color: var(--ac-texto);
  text-decoration: none;
}

.academy-target-card__body h3 a:hover,
.academy-target-card__body h3 a:focus {
  color: var(--ac-lima);
}

.academy-target-card__thumb {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--ac-radio-chico);
  background: var(--ac-fondo-hundido);
  overflow: hidden;
}

.academy-target-card__thumb img {
  max-width: 100%;
  height: auto;
}

.academy-target-card__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  font-family: var(--ac-fuente-cifras);
  font-size: 0.9rem;
  color: var(--ac-texto-suave);
}

.academy-target-card__stats small {
  color: var(--ac-texto-tenue);
}

.academy-chip--mono {
  font-family: var(--ac-fuente-cifras);
  letter-spacing: 0.02em;
}

/* ===========================================================================
 * Marcadores, niveles, créditos y preguntas frecuentes
 * ======================================================================== */
.academy-leaderboard {
  width: 100%;
  border-collapse: collapse;
}

.academy-leaderboard th,
.academy-leaderboard td {
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--ac-borde-suave);
  text-align: left;
}

.academy-leaderboard th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ac-texto-tenue);
}

.academy-level {
  display: flex;
  align-items: center;
  gap: var(--ac-espacio);
}

.academy-level__rank {
  font-family: var(--ac-fuente-cifras);
  font-size: 1.5rem;
  color: var(--ac-lima);
  flex-shrink: 0;
}

.academy-level__body {
  flex: 1 1 auto;
  min-width: 0;
}

.academy-level__title {
  margin: 0;
  font-size: 1rem;
}

.academy-level__desc {
  margin: 0.2rem 0 0;
  font-size: 0.85rem;
  color: var(--ac-texto-suave);
}

.academy-level__points {
  font-family: var(--ac-fuente-cifras);
  font-size: 1.1rem;
  color: var(--ac-texto);
  white-space: nowrap;
}

.academy-level__points-label {
  display: block;
  font-family: var(--ac-fuente);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ac-texto-tenue);
}

.academy-level__share {
  font-size: 0.8rem;
  color: var(--ac-texto-tenue);
}

.academy-credits {
  display: grid;
  gap: var(--ac-espacio);
}

.academy-credits__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--ac-espacio);
  list-style: none;
  margin: 0;
  padding: 0;
}

.academy-credit {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.academy-credit__body strong {
  display: block;
}

.academy-credit__body small {
  color: var(--ac-texto-suave);
}

.academy-faq {
  display: grid;
  gap: 0.75rem;
}

.academy-faq details {
  border: 1px solid var(--ac-borde);
  border-radius: var(--ac-radio);
  background: var(--ac-fondo-elevado);
}

.academy-faq summary {
  padding: 0.9rem 1.15rem;
  cursor: pointer;
  font-weight: 600;
  /* El marcador nativo se conserva: comunica que el bloque se abre y cierra. */
}

.academy-faq summary:focus-visible {
  outline: 3px solid var(--ac-lima);
  outline-offset: -3px;
}

.academy-faq details > div {
  padding: 0 1.15rem 1.15rem;
  color: var(--ac-texto-suave);
}

/* ===========================================================================
 * Insignia compartible
 * ======================================================================== */
.academy-badge-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ac-espacio);
  padding: 2rem 1.15rem;
  text-align: center;
}

.academy-badge-hero__brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.academy-badge-hero__logo {
  border-radius: var(--ac-radio-chico);
}

.academy-badge__hex {
  font-family: var(--ac-fuente-cifras);
  color: var(--ac-lima);
  word-break: break-all;
}

.academy-badge-share {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

/* ===========================================================================
 * Autenticación: dos paneles, formulario a la izquierda
 * ======================================================================== */
.academy-auth {
  display: grid;
  grid-template-columns: minmax(320px, 460px) 1fr;
  min-height: 100vh;
  background: var(--ac-fondo);
}

.academy-auth__form {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 2rem;
}

.academy-auth__form-inner {
  width: 100%;
  max-width: 380px;
}

.academy-auth__form-mark {
  margin-bottom: 1.75rem;
}

.academy-auth__back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 24px;
  margin-bottom: 1.25rem;
  font-size: 0.85rem;
  color: var(--ac-texto-tenue);
  text-decoration: none;
}

.academy-auth__back:hover,
.academy-auth__back:focus {
  color: var(--ac-lima);
}

.academy-auth__form-inner h1 {
  margin: 0 0 0.5rem;
  font-size: 1.9rem;
  line-height: 1.2;
}

.academy-auth__form-lead {
  margin-bottom: 1.75rem;
  color: var(--ac-texto-suave);
}

.academy-auth__form-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ac-espacio);
  margin-bottom: 1.25rem;
}

.academy-auth__form-options .form-group {
  margin: 0;
}

.academy-auth__form-options a {
  font-size: 0.85rem;
  color: var(--ac-lima);
}

.academy-auth__register,
.academy-auth__note {
  margin-top: 1.25rem;
  font-size: 0.88rem;
  color: var(--ac-texto-suave);
}

.academy-auth__register a,
.academy-auth__note a {
  color: var(--ac-lima);
  font-weight: 600;
}

/* Panel de marca. Decorativo: en pantallas estrechas desaparece porque el
 * formulario es lo único que hace falta para entrar. */
.academy-auth__brand {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  padding: 2.5rem;
  background:
    radial-gradient(1000px 500px at 78% 12%, rgba(148, 193, 31, 0.13), transparent 60%),
    radial-gradient(760px 420px at 22% 88%, rgba(34, 211, 238, 0.11), transparent 60%),
    var(--ac-fondo-hundido);
  border-left: 1px solid var(--ac-borde);
}

.academy-auth__hero h2 {
  margin: 0.5rem 0 1rem;
  font-size: 2.3rem;
  line-height: 1.15;
  max-width: 16ch;
}

.academy-auth__hero h2 span {
  color: var(--ac-lima);
  display: block;
}

.academy-auth__hero p {
  max-width: 52ch;
  color: var(--ac-texto-suave);
  line-height: 1.7;
}

.academy-auth__brief {
  margin-top: 1.75rem;
  border: 1px solid var(--ac-borde);
  border-radius: var(--ac-radio);
  background: rgba(18, 20, 26, 0.6);
  overflow: hidden;
}

.academy-auth__brief-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ac-espacio);
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--ac-borde);
  font-size: 0.8rem;
}

.academy-auth__brief-header span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ac-texto-suave);
}

/* El <i> vacío del marcado es el punto de estado. */
.academy-auth__brief-header i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ac-lima);
  box-shadow: 0 0 0 3px rgba(148, 193, 31, 0.18);
}

.academy-auth__brief-header strong {
  color: var(--ac-lima);
}

.academy-auth__brief-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--ac-borde);
}

.academy-auth__brief-grid > div {
  padding: 0.9rem 1rem;
  background: var(--ac-fondo-hundido);
}

.academy-auth__brief-grid span {
  font-family: var(--ac-fuente-cifras);
  font-size: 0.78rem;
  color: var(--ac-lima);
}

.academy-auth__brief-grid p {
  margin: 0.3rem 0 0;
  font-size: 0.86rem;
  color: var(--ac-texto-suave);
}

.academy-auth__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ac-espacio);
}

.academy-auth__stat {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.academy-auth__stat strong {
  font-family: var(--ac-fuente-cifras);
  font-size: 1.75rem;
  color: var(--ac-texto);
}

.academy-auth__stat span {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ac-texto-tenue);
}

@media (max-width: 991.98px) {
  .academy-auth {
    grid-template-columns: 1fr;
  }

  /* El panel de marca es decorativo; en móvil el formulario ocupa la pantalla
   * y nadie tiene que desplazarse para iniciar sesión. */
  .academy-auth__brand {
    display: none;
  }
}

/* ===========================================================================
 * Campos de formulario dentro del tema
 * ======================================================================== */
.academy-auth__form-inner .form-control,
.academy-auth__form-inner input[type='text'],
.academy-auth__form-inner input[type='email'],
.academy-auth__form-inner input[type='password'] {
  min-height: 46px;
  padding: 0.6rem 0.8rem;
  background: var(--ac-fondo-hundido);
  border: 1px solid var(--ac-borde);
  border-radius: var(--ac-radio-chico);
  color: var(--ac-texto);
}

.academy-auth__form-inner .form-control:focus {
  border-color: var(--ac-lima);
  box-shadow: none;
  outline: 3px solid rgba(148, 193, 31, 0.35);
  outline-offset: 1px;
}

/* Bootstrap Material Design turns every .form-group into a floating-label
 * container: it takes the label out of the flow (position:absolute; top:-10px)
 * because its own inputs have no border, only an underline. These inputs do
 * have a border, so the label landed 5px on top of it — measured on the running
 * page. Put the label back in the flow inside this form.
 *
 * The whole .bmd-form-group machinery is switched off here rather than nudged:
 * half-applying it produces labels that animate on focus to a position the
 * design does not use. */
.academy-auth__form-inner .form-group,
.academy-auth__form-inner .bmd-form-group {
  position: static;
  padding: 0;
  margin-bottom: 1.1rem;
}

.academy-auth__form-inner label,
.academy-auth__form-inner .bmd-form-group label {
  position: static;
  display: block;
  top: auto;
  left: auto;
  margin-bottom: 0.35rem;
  transform: none;
  font-size: 0.82rem;
  line-height: 1.3;
  color: var(--ac-texto-suave);
  pointer-events: auto;
}

/* The checkbox label sits beside its control, not above it. */
.academy-auth__form-options label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  cursor: pointer;
}

/* Solo el ERROR, no la ayuda.
   Esta regla decia `.help-block:not(:empty)`, que alcanza tambien a las
   pistas: yiiootstrap\ActiveField pone `help-block` a las dos cosas y
   solo anade `help-block-error` al mensaje de validacion. Medido en
   /request-password-reset: la pista "Si existe una cuenta con ese
   correo..." salia con barra roja y texto rojo, o sea leida como un
   fallo antes de escribir nada. La clase del framework es la senal
   fiable; el resto de hojas se apoyan ya en ella. */
.academy-auth__form-inner .help-block-error:not(:empty) {
  margin-top: 0.35rem;
  padding-left: 0.5rem;
  border-left: 3px solid var(--ac-rojo);
  color: #ff8fa3;
  font-size: 0.84rem;
}

/* ===========================================================================
 * Encabezado de página y estado vacío (componentes compartidos)
 * ======================================================================== */
.academy-page-header {
  margin-bottom: 1.5rem;
}

.academy-page-header h1 {
  margin: 0 0 0.4rem;
  font-size: 1.7rem;
  line-height: 1.2;
}

.academy-page-header p {
  margin: 0;
  max-width: 68ch;
  color: var(--ac-texto-suave);
}

.academy-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 2.5rem 1.5rem;
  text-align: center;
  border: 1px dashed var(--ac-borde);
  border-radius: var(--ac-radio);
  color: var(--ac-texto-suave);
}

.academy-empty i {
  font-size: 1.7rem;
  color: var(--ac-texto-tenue);
}

.academy-empty h2 {
  margin: 0;
  font-size: 1.1rem;
  color: var(--ac-texto);
}

.academy-empty p {
  margin: 0;
  max-width: 52ch;
}

/* ===========================================================================
 * Preferencias del sistema
 * ======================================================================== */
@media (prefers-reduced-motion: reduce) {
  .academy-card--interactive,
  .academy-button,
  .academy-icon-button {
    transition: none;
  }

  .academy-card--interactive:hover,
  .academy-card--interactive:focus-within {
    transform: none;
  }
}

@media (prefers-contrast: more) {
  :root {
    --ac-borde: #4a5163;
    --ac-texto-suave: #c3c9d8;
    --ac-texto-tenue: #a2aabd;
  }
}


/* ===========================================================================
 * Panel del estudiante (dashboard) — rediseño por tarea
 * ======================================================================== */

/* Título de sección dentro de una página: el h1 lo pone _page_header. */
.academy-section-title {
  margin: 2rem 0 0.9rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ac-texto);
}

/* --- Recorrido de primera vez ------------------------------------------- */
.academy-onboarding__body {
  padding: 1.15rem;
}

.academy-onboarding__lead {
  margin-top: 0;
  color: var(--ac-texto-suave);
  max-width: 72ch;
}

.academy-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--ac-espacio);
}

.academy-step {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  padding: 1rem;
  border: 1px solid var(--ac-borde);
  border-radius: var(--ac-radio);
  background: var(--ac-fondo-hundido);
}

.academy-step__num {
  flex: none;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ac-lima);
  color: #12141a;
  font-family: var(--ac-fuente-cifras);
  font-weight: 700;
}

.academy-step h3 {
  margin: 0.1rem 0 0.35rem;
  font-size: 1rem;
}

.academy-step p {
  margin: 0 0 0.75rem;
  color: var(--ac-texto-suave);
  font-size: 0.92rem;
}

/* --- Continúa donde lo dejaste ------------------------------------------ */
.academy-resume-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--ac-espacio);
}

.academy-resume {
  padding: 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.academy-resume__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.academy-resume__head h3 {
  margin: 0;
  font-size: 1.1rem;
}

.academy-resume__head h3 a {
  color: var(--ac-texto);
  text-decoration: none;
}

.academy-resume__head h3 a:hover {
  color: var(--ac-lima);
}

.academy-resume__meta,
.academy-resume__purpose {
  margin: 0;
  color: var(--ac-texto-suave);
  font-size: 0.92rem;
}

.academy-resume__count {
  margin: 0;
  color: var(--ac-texto-tenue);
  font-size: 0.85rem;
}

.academy-resume .academy-button {
  margin-top: auto;
  align-self: flex-start;
}

.academy-resume--suggested {
  border-style: dashed;
}

/* --- Tu avance ----------------------------------------------------------- */
.academy-advance .academy-kpi {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.academy-advance .academy-kpi__value small {
  font-size: 0.55em;
  color: var(--ac-texto-tenue);
  font-family: var(--ac-fuente);
}

.academy-advance .academy-kpi__note a {
  color: var(--ac-lima);
}

/* --- Novedades ----------------------------------------------------------- */
.academy-news__item {
  padding: 1rem 1.15rem;
  border-top: 1px solid var(--ac-borde);
}

.academy-news__item:first-child {
  border-top: 0;
}

.academy-news__meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.35rem;
  color: var(--ac-texto-tenue);
  font-size: 0.85rem;
}

.academy-news__title {
  margin: 0 0 0.35rem;
  font-size: 1rem;
}

.academy-news__body {
  color: var(--ac-texto-suave);
  line-height: 1.6;
}

.academy-news__body p {
  margin: 0 0 0.5rem;
}

/* ===========================================================================
 * Correcciones de signup en layout auth (dos columnas)
 * ======================================================================== */

/* El formulario de registro es más largo que el de login: permite scroll
 * dentro del panel izquierdo para que no se corten campos en pantallas
 * medianas. */
.academy-auth--signup .academy-auth__form {
  align-items: flex-start;
  overflow-y: auto;
  max-height: 100vh;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

/* Los campos de archivo en el formulario de registro heredan estilos raros
 * de Bootstrap Material: se ven como botones elevados. Se normalizan. */
.academy-auth__form-inner input[type="file"] {
  display: block;
  width: 100%;
  padding: 0.5rem 0;
  background: transparent;
  border: 0;
  color: var(--ac-texto-suave);
  font-size: 0.88rem;
}

/* El captcha viene con fondo blanco; se enmarca para que no parezca un
 * recorte pegado sobre la interfaz oscura. */
.academy-auth__form-inner img[src*="captcha"] {
  display: block;
  margin-bottom: 0.5rem;
  padding: 0.35rem;
  border: 1px solid var(--ac-borde);
  border-radius: var(--ac-radio-chico);
  background: var(--ac-fondo-elevado);
  cursor: pointer;
}

/* El medidor de fuerza de contraseña (pwstrength) inyecta su veredicto
 * como texto suelto. Se le da forma de indicador. */
.academy-auth__form-inner .password-verdict {
  display: inline-block;
  margin-top: 0.35rem;
  padding: 0.15rem 0.55rem;
  border: 1px solid var(--ac-borde);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ac-texto-suave);
}

.academy-auth__form-inner .pwstrength_viewport_progress .progress {
  height: 6px;
  margin-top: 0.35rem;
}

/* El texto de términos y condiciones en el registro: evitar que quede
 * cortado o con color de error. */
.academy-auth__terms {
  margin: 0.75rem 0 0.25rem;
  color: var(--ac-texto-suave);
  line-height: 1.6;
}

.academy-auth__terms a {
  color: var(--ac-lima);
  font-weight: 600;
}

/* Etiquetas de campo con asterisco de obligatorio: en el signup se añade
 * manualmente para que coincida con el login. */
.academy-auth__form-inner .ac-required {
  color: var(--ac-rojo);
  margin-left: 0.15rem;
}

/* Los hint-blocks del signup usan <small> con clase text-warning heredada;
 * se normalizan al color de ayuda para que no parezcan errores. */
.academy-auth__form-inner .help-block small,
.academy-auth__form-inner .hint-block small {
  color: var(--ac-texto-tenue) !important;
  font-size: 0.82rem;
}

/* ===========================================================================
 * Correcciones de header del dashboard: búsqueda + claim unificados
 * ======================================================================== */

/* El header del material theme tiene search y claim flotando de forma
 * inconsistente. Se fuerza un layout limpio con un solo grupo de controles. */
.navbar .navbar-form#search,
.navbar .navbar-form#claim {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
}

/* Input de búsqueda: icono DENTRO del campo, no flotando encima. */
.navbar .navbar-form#search .input-group,
.navbar .navbar-form#claim .input-group {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid var(--ac-borde);
  border-radius: var(--ac-radio-chico);
  background: var(--ac-fondo-hundido);
  overflow: hidden;
}

.navbar .navbar-form#search .input-group:focus-within,
.navbar .navbar-form#claim .input-group:focus-within {
  border-color: var(--ac-lima);
  box-shadow: 0 0 0 3px rgba(148, 193, 31, 0.15);
}

/* El botón de submit (lupa/bandera) se integra como un icono dentro
 * del input group, no como botón circular blanco encima. */
.navbar .navbar-form#search button[type="submit"],
.navbar .navbar-form#claim button[type="submit"] {
  order: -1;
  width: 40px;
  min-width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ac-texto-tenue);
  box-shadow: none;
}

.navbar .navbar-form#search button[type="submit"]:hover,
.navbar .navbar-form#claim button[type="submit"]:hover {
  color: var(--ac-lima);
  background: transparent;
}

/* El input propiamente dicho: sin borde propio, hereda el del grupo. */
.navbar .navbar-form#search input[type="text"],
.navbar .navbar-form#claim input[type="text"] {
  min-height: 40px;
  padding: 0 0.75rem 0 0.25rem;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--ac-texto);
  font-size: 0.88rem;
  text-align: left !important;
}

.navbar .navbar-form#search input[type="text"]:focus,
.navbar .navbar-form#claim input[type="text"]:focus {
  box-shadow: none;
  outline: none;
}

/* Placeholder alineado a la izquierda, no centrado. */
.navbar .navbar-form#search input[type="text"]::placeholder,
.navbar .navbar-form#claim input[type="text"]::placeholder {
  text-align: left;
  color: var(--ac-texto-tenue);
}

/* ===========================================================================
 * Correcciones de tabla: eliminar fondos rojos de headers
 * ======================================================================== */

/* Los headers de tabla con fondo rojo ("Progress", "Listado de máquinas")
 * vienen de clases del tema anterior. Se reemplazan por un fondo sobrio
 * acorde a la paleta del login. */
.card-header.card-header-danger,
.card-header.card-header-warning,
.card-header.card-header-success,
.card-header.card-header-info,
.card-header.card-header-primary {
  background: var(--ac-fondo-hundido) !important;
  color: var(--ac-texto) !important;
  border-bottom: 1px solid var(--ac-borde);
}

/* Si hay texto dentro de esos headers, que sea legible. */
.card-header.card-header-danger h3,
.card-header.card-header-warning h3,
.card-header.card-header-success h3,
.card-header.card-header-info h3,
.card-header.card-header-primary h3,
.card-header.card-header-danger h4,
.card-header.card-header-warning h4,
.card-header.card-header-success h4,
.card-header.card-header-info h4,
.card-header.card-header-primary h4 {
  color: var(--ac-texto) !important;
}

/* Las tarjetas de estadísticas con borde superior de color: el verde lima
 * es el único acento, el resto se normaliza a gris sutil. */
.card.card-stats:has(.card-header-warning),
.card.card-stats:has(.card-header-danger),
.card.card-stats:has(.card-header-success),
.card.card-stats:has(.card-header-info) {
  border-top-color: var(--ac-borde);
}

/* El header de tabla rojo en las listas de máquinas y progreso. */
.table thead th {
  background: var(--ac-fondo-hundido) !important;
  color: var(--ac-texto-tenue) !important;
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* ===========================================================================
 * Correcciones de sidebar: consistencia de perfil
 * ======================================================================== */

/* El sidebar del registro (cuando se mostraba) traía un menú diferente al
 * del dashboard. Ahora que el registro usa layout auth, esto ya no aplica,
 * pero se refuerza la consistencia del sidebar del dashboard para que el
 * avatar, badge VIP y reloj no se pisen. */
.sidebar .user .photo img,
.sidebar .simple-text.logo-normal img {
  width: 64px;
  height: 64px;
  border-radius: var(--ac-radio);
  object-fit: cover;
}

/* El badge VIP: en el flujo, nunca absolute. */
.sidebar .simple-text.logo-normal .badge {
  position: static !important;
  margin-top: 0.35rem;
}

/* ===========================================================================
 * Correcciones generales: elementos cortados y overflow
 * ======================================================================== */

/* El contenedor principal del auth layout debe permitir scroll si el
 * contenido excede la pantalla. */
main#contenido {
  min-height: 100vh;
}

/* Las tablas con columna AVANCE que se cortaba: forzar ancho mínimo
 * y scroll horizontal propio, nunca del body. */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--ac-radio-chico);
}

/* La columna de progreso en tablas: ancho fijo para que no se comprima. */
.table td .progress {
  min-width: 120px;
  margin: 0;
}

/* Las tarjetas del dashboard con iconos emojis o mezclados: forzar
 * tamaño consistente y usar solo Material Icons / Font Awesome. */
.card-icon .material-icons,
.card-icon .fas,
.card-icon .far {
  font-size: 1.5rem !important;
  color: var(--ac-lima);
}

/* Eliminar emojis sueltos en tablas: reemplazarlos por iconos consistentes
 * es tarea de la vista, pero aquí se normaliza el tamaño si aparecen. */
.table td i.material-icons,
.table td i.fas,
.table td i.far {
  font-size: 1.1rem;
  vertical-align: middle;
  color: var(--ac-texto-suave);
}

/* ===========================================================================
 * Correcciones tipográficas: unificar escala
 * ======================================================================== */

/* Títulos de página: el login usa un tamaño grande y limpio;
 * el dashboard debe emular esa misma jerarquía. */
.ac-page-header__title {
  font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ac-texto);
}

/* La línea de acento bajo el encabezado: usar el verde lima del login,
 * no un gradiente que se desvanece. */
.ac-page-header::after {
  width: 48px;
  height: 3px;
  background: var(--ac-lima);
  border-radius: 2px;
  margin-top: 0.75rem;
}

/* Los números grandes en tarjetas (headshots, retos, etc.): usar la misma
 * tipografía limpia que el login, no Orbitron ilegible. */
.card-stats .card-title,
.stats-value {
  font-family: var(--ac-fuente);
  font-weight: 700;
  font-size: 1.85rem;
  letter-spacing: -0.02em;
  color: var(--ac-texto);
}

/* Etiquetas de tarjetas de estadística: mayúsculas controladas, no
 * forzadas por el tema anterior. */
.card-stats .card-category {
  font-family: var(--ac-fuente);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ac-texto-tenue);
}

  margin: 0 0 0.5rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   PORTADA PUBLICA
   ══════════════════════════════════════════════════════════════════════════
   Reutiliza el shell de dos paneles de las pantallas de acceso, asi que solo
   necesita lo propio: los botones de accion y los tres pasos de "como empezar".
   ══════════════════════════════════════════════════════════════════════════ */
.portada-acciones {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 26px 0 32px;
}
.portada-acciones .academy-button { flex: 1 1 180px; }
.portada-secundario {
  background: transparent;
  border: 1px solid var(--ac-borde, #262a36);
  color: var(--ac-texto, #e6e8ef);
}
.portada-secundario:hover {
  border-color: var(--ac-lima, #94c11f);
  color: var(--ac-lima, #94c11f);
  text-decoration: none;
}

.portada-pasos {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  counter-reset: none;
}
.portada-pasos li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.portada-paso-n {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--ac-fondo-elevado, #1a1d26);
  border: 1px solid var(--ac-borde, #262a36);
  color: var(--ac-lima, #94c11f);
  font-family: var(--ac-fuente-cifras, monospace);
  font-size: 12px;
  font-weight: 700;
}
.portada-pasos strong {
  display: block;
  color: var(--ac-texto, #e6e8ef);
  font-size: 14px;
  margin-bottom: 2px;
}
.portada-pasos p {
  margin: 0;
  color: var(--ac-texto-suave, #9aa1b4);
  font-size: 13px;
  line-height: 1.5;
}

.portada-aviso {
  margin: 0 0 24px;
  padding: 14px 16px;
  border-radius: var(--ac-radio, 10px);
  background: var(--ac-fondo-elevado, #1a1d26);
  border: 1px solid var(--ac-borde, #262a36);
  color: var(--ac-texto-suave, #9aa1b4);
  font-size: 13.5px;
  line-height: 1.6;
}
.portada-aviso > *:last-child { margin-bottom: 0; }

/* Los enlaces del pie de la portada, separados por puntos medios. */
.academy-auth__note a { white-space: nowrap; }

/* ── Portada: ritmo de los botones y del texto ────────────────────────────
   Los dos botones se tocaban (12px de separacion y el mismo peso visual), asi
   que se leian como un bloque en vez de como dos opciones. */
.portada-acciones {
  gap: 14px;
  margin: 30px 0 30px;
}
.portada-acciones .academy-button {
  min-height: 52px;
  font-size: 15px;
  letter-spacing: 0.01em;
}
.portada-secundario { font-weight: 500; }

/* Los tres pasos, con aire y separados de los botones por una linea sutil. */
.portada-pasos {
  gap: 18px;
  padding-top: 26px;
  border-top: 1px solid var(--ac-borde, #262a36);
}
.portada-pasos li { gap: 16px; }
.portada-pasos strong { margin-bottom: 4px; font-size: 14.5px; }
.portada-pasos p { font-size: 13.5px; line-height: 1.6; }

/* Titular y entradilla con mas respiro: el bloque venia muy apretado. */
.academy-auth--portada .academy-auth__form-inner h1 { margin-bottom: 14px; line-height: 1.12; }
.academy-auth--portada .academy-auth__form-lead { line-height: 1.65; margin-bottom: 4px; }
.academy-auth--portada .academy-eyebrow { margin-bottom: 10px; }

/* ══════════════════════════════════════════════════════════════════════════
   TERMINAL DE LA PORTADA
   ══════════════════════════════════════════════════════════════════════════
   Decorativa pero con contenido real: reproduce el recorrido de un alumno. Se
   pinta como una ventana de terminal para que se lea como lo que es, y no
   como un cuadro de texto cualquiera. */
.portada-terminal {
  margin: 26px 0 30px;
  border-radius: 12px;
  overflow: hidden;
  background: #06090d;
  border: 1px solid var(--ac-borde, #262a36);
  box-shadow: 0 22px 48px -18px rgba(0, 0, 0, 0.75);
  font-family: var(--ac-fuente-cifras, ui-monospace, monospace);
}
.pt-barra {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.035);
  border-bottom: 1px solid var(--ac-borde, #262a36);
}
.pt-punto { width: 9px; height: 9px; border-radius: 50%; background: #2b313d; flex: 0 0 auto; }
.pt-punto:nth-child(1) { background: #ff5f57; }
.pt-punto:nth-child(2) { background: #febc2e; }
.pt-punto:nth-child(3) { background: #28c840; }
.pt-titulo {
  margin-left: 8px; font-size: 11px; letter-spacing: 0.02em;
  color: var(--ac-texto-tenue, #6b7285);
}
.pt-salida {
  padding: 14px 14px 16px;
  min-height: 232px; max-height: 232px;
  overflow: hidden;
  font-size: 12.5px; line-height: 1.75;
}
.pt-linea { display: flex; gap: 8px; white-space: pre-wrap; word-break: break-word; }
.pt-prompt { color: var(--ac-lima, #7fff61); flex: 0 0 auto; font-weight: 700; }
.pt-cmd .pt-texto { color: var(--ac-texto, #e6e8ef); }
.pt-out .pt-texto { color: var(--ac-texto-suave, #9aa1b4); padding-left: 16px; }
.pt-ok  .pt-texto { color: var(--ac-lima, #7fff61); padding-left: 16px; }
.pt-win .pt-texto { color: #ffd166; font-weight: 700; padding-left: 16px; }

/* Cursor parpadeante al final de la ultima linea que se esta escribiendo. */
.pt-linea:last-child .pt-texto::after {
  content: '▌';
  color: var(--ac-lima, #7fff61);
  animation: pt-parpadeo 1.05s steps(2, start) infinite;
  margin-left: 1px;
}
.pt-terminado .pt-linea:last-child .pt-texto::after { content: none; }
@keyframes pt-parpadeo { to { visibility: hidden; } }

/* Quien pide menos animacion no ve ni el cursor. */
@media (prefers-reduced-motion: reduce) {
  .pt-linea:last-child .pt-texto::after { animation: none; }
}

/* El panel derecho de la portada reparte su espacio entre lema, terminal y
   cifras; sin esto la terminal empujaba las cifras fuera de la pantalla. */
.academy-auth__brand--portada { justify-content: flex-start; gap: 0; }
.academy-auth__brand--portada .academy-auth__hero { margin-bottom: 0; }

@media (max-width: 900px) {
  /* En pantalla estrecha manda el contenido: la terminal es un adorno. */
  .portada-terminal { display: none; }
}