/*
 * academia-design.css — sistema de diseño aplicado a toda la plataforma.
 *
 * Se rediseñan los PRIMITIVOS, no las pantallas. El marcado servido es
 * Bootstrap 4 + material-dashboard, y medido sobre 14 rutas contiene 168
 * .nav-link, 66 .btn, 41 .card y 41 .form-control. Redefinir esos primitivos
 * cambia las ~100 pantallas a la vez; migrarlas una a una costaría 106
 * reescrituras y dejaría la interfaz inconsistente mientras tanto.
 *
 * Las hojas del tema anterior NO se editan. Este archivo se carga al final, así
 * que gana por cascada sin tocar código vendorizado: revertir el rediseño es
 * quitar una línea de MaterialAsset.
 *
 * Convive con academia.css, que estiliza las clases `academy-*` propias de las
 * vistas nuevas. Aquel define componentes nuevos; este reviste los que ya hay.
 *
 * Orden: F0 fundamento · F1 campos · F2 botones · F3 superficies ·
 *        F4 navegación · F5 datos · F6 movimiento.
 */

/* ===========================================================================
 * F0 — FUNDAMENTO
 * ======================================================================== */

:root {
  /* --- Superficie ------------------------------------------------------
   * Cuatro niveles, no dos. El tema anterior usaba un gris plano (#222) para
   * todo, así que una tarjeta sobre el fondo no se distinguía salvo por su
   * borde. La profundidad se construye con luminosidad, no con sombras. */
  --ac-nivel-0: #0b0d12;   /* lienzo, lo más hundido */
  --ac-nivel-1: #12151c;   /* fondo de contenido */
  --ac-nivel-2: #171b24;   /* tarjetas y paneles */
  --ac-nivel-3: #1e232e;   /* elementos elevados: menús, modales */
  --ac-nivel-4: #262c3a;   /* estado activo / hover sobre elevado */

  --ac-linea: #2a3040;
  --ac-linea-fuerte: #3a4256;

  /* --- Texto -----------------------------------------------------------
   * Tres pesos de énfasis. Medidos contra --ac-nivel-2:
   *   principal  #e8eaf2 → 13.9:1   (AAA)
   *   secundario #a6adc0 → 7.2:1    (AAA)
   *   terciario  #7b8398 → 4.6:1    (AA, solo para etiquetas cortas) */
  --ac-txt: #e8eaf2;
  --ac-txt-2: #a6adc0;
  --ac-txt-3: #7b8398;

  /* --- Acento ----------------------------------------------------------
   * El lima es la identidad heredada de la plataforma; se conserva para no
   * desorientar a quien ya la usa, pero ajustado para contraste real.
   * #a8d818 sobre --ac-nivel-2 → 9.8:1. */
  --ac-acento: #a8d818;
  --ac-acento-2: #8bb814;
  --ac-acento-suave: rgba(168, 216, 24, 0.12);
  --ac-acento-borde: rgba(168, 216, 24, 0.35);

  /* --- Semánticos ------------------------------------------------------ */
  --ac-info: #38bdf8;
  --ac-exito: #4ade80;
  --ac-aviso: #fbbf24;
  --ac-error: #fb7185;
  --ac-info-suave: rgba(56, 189, 248, 0.12);
  --ac-exito-suave: rgba(74, 222, 128, 0.12);
  --ac-aviso-suave: rgba(251, 191, 36, 0.12);
  --ac-error-suave: rgba(251, 113, 133, 0.12);

  /* --- Escala tipográfica ----------------------------------------------
   * Razón 1.25 desde 16px. Una escala cerrada evita los 27 tamaños distintos
   * que el tema anterior acumulaba entre estilos inline y utilidades. */
  --ac-t-xs: 0.75rem;    /* 12px — metadatos */
  --ac-t-sm: 0.875rem;   /* 14px — texto secundario */
  --ac-t-base: 1rem;     /* 16px — cuerpo */
  --ac-t-md: 1.125rem;   /* 18px — subtítulo */
  --ac-t-lg: 1.375rem;   /* 22px — título de sección */
  --ac-t-xl: 1.75rem;    /* 28px — título de página */
  --ac-t-2xl: 2.25rem;   /* 36px — cifras destacadas */

  /* --- Ritmo vertical --------------------------------------------------
   * Múltiplos de 4px: cualquier separación arbitraria se nota como error. */
  --ac-e-1: 0.25rem;
  --ac-e-2: 0.5rem;
  --ac-e-3: 0.75rem;
  --ac-e-4: 1rem;
  --ac-e-5: 1.5rem;
  --ac-e-6: 2rem;
  --ac-e-7: 3rem;

  /* --- Forma ----------------------------------------------------------- */
  --ac-r-sm: 6px;
  --ac-r: 10px;
  --ac-r-lg: 14px;
  --ac-r-full: 999px;

  /* --- Elevación -------------------------------------------------------
   * Sombras frías y bajas. Sobre fondo oscuro una sombra negra difusa no se
   * ve; lo que da profundidad es el borde superior claro. */
  --ac-sombra-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --ac-sombra-2: 0 4px 16px rgba(0, 0, 0, 0.45);
  --ac-sombra-3: 0 12px 36px rgba(0, 0, 0, 0.55);

  /* --- Movimiento ------------------------------------------------------ */
  --ac-rapido: 120ms;
  --ac-normal: 200ms;
  --ac-curva: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* --- Tipografías ----------------------------------------------------- */
  --ac-fuente: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ac-fuente-cifras: 'Orbitron', 'Roboto Mono', ui-monospace, monospace;
  --ac-fuente-codigo: 'Roboto Mono', ui-monospace, 'SFMono-Regular', monospace;
}

/* Alias para el CSS embebido en algunas vistas del tema academia, que usa
 * nombres cortos (--s-5, --line) heredados de su maqueta original. */
:root {
  --s-1: var(--ac-e-1); --s-2: var(--ac-e-2); --s-3: var(--ac-e-3);
  --s-4: var(--ac-e-4); --s-5: var(--ac-e-5); --s-6: var(--ac-e-6);
  --line: var(--ac-linea);
}

/* --- Superficie global ---------------------------------------------------
 * El degradado sutil evita el "muro plano" de un color único a pantalla
 * completa, sin introducir una imagen que costaría una petición. */
body {
  background-color: var(--ac-nivel-1);
  background-image:
    radial-gradient(900px 500px at 12% -8%, rgba(168, 216, 24, 0.05), transparent 60%),
    radial-gradient(700px 420px at 96% 4%, rgba(56, 189, 248, 0.045), transparent 62%);
  background-attachment: fixed;
  color: var(--ac-txt);
  font-family: var(--ac-fuente);
  font-size: var(--ac-t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.wrapper,
.main-panel {
  background: transparent;
}

.main-panel > .content,
main.content {
  padding: var(--ac-e-5) var(--ac-e-4) var(--ac-e-7);
}

/* --- Jerarquía tipográfica ----------------------------------------------
 * El tema anterior dejaba h1..h6 con los tamaños de Bootstrap y las vistas los
 * usaban sin criterio, así que un h4 podía verse más grande que el h1 de la
 * misma página. */
h1, .h1 { font-size: var(--ac-t-xl); }
h2, .h2 { font-size: var(--ac-t-lg); }
h3, .h3 { font-size: var(--ac-t-md); }
h4, .h4 { font-size: var(--ac-t-base); }
h5, .h5 { font-size: var(--ac-t-sm); }
h6, .h6 { font-size: var(--ac-t-xs); }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  margin: 0 0 var(--ac-e-3);
  color: var(--ac-txt);
  font-weight: 600;
  line-height: 1.25;
  /* Roboto abre demasiado en tamaños grandes; cerrarlo da aire de producto. */
  letter-spacing: -0.011em;
}

h1, .h1 { letter-spacing: -0.02em; }

p { margin: 0 0 var(--ac-e-4); }
p:last-child { margin-bottom: 0; }

small, .small { font-size: var(--ac-t-sm); }

a {
  color: var(--ac-acento);
  text-decoration: none;
  transition: color var(--ac-rapido) var(--ac-curva);
}

a:hover,
a:focus {
  color: var(--ac-acento-2);
  text-decoration: underline;
  /* El subrayado solo al interactuar: dentro de una tarjeta densa, subrayar
   * siempre convierte la pantalla en ruido. */
}

code, kbd, pre, samp, .text-monospace {
  font-family: var(--ac-fuente-codigo);
  font-size: 0.92em;
}

code {
  padding: 0.12em 0.4em;
  border-radius: var(--ac-r-sm);
  background: var(--ac-nivel-0);
  border: 1px solid var(--ac-linea);
  color: var(--ac-acento);
}

pre {
  padding: var(--ac-e-4);
  border: 1px solid var(--ac-linea);
  border-radius: var(--ac-r);
  background: var(--ac-nivel-0);
  overflow-x: auto;
}

pre code {
  padding: 0;
  border: 0;
  background: transparent;
}

hr {
  border: 0;
  border-top: 1px solid var(--ac-linea);
  margin: var(--ac-e-5) 0;
}

/* Las utilidades de color de Bootstrap se reasignan a los tokens: las vistas
 * las usan en todas partes (text-danger ×41, text-primary ×19, text-info ×19)
 * y sin esto seguirían pintando los colores del tema viejo. */
.text-primary { color: var(--ac-acento) !important; }
.text-info    { color: var(--ac-info) !important; }
.text-success { color: var(--ac-exito) !important; }
.text-warning { color: var(--ac-aviso) !important; }
.text-danger  { color: var(--ac-error) !important; }
.text-muted   { color: var(--ac-txt-3) !important; }
.text-white   { color: var(--ac-txt) !important; }
.text-dark    { color: var(--ac-nivel-0) !important; }

.bg-dark { background-color: var(--ac-nivel-2) !important; }

/* Barras de desplazamiento acordes: en una interfaz oscura la barra clara del
 * sistema es lo primero que delata una plantilla sin terminar. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--ac-linea-fuerte) transparent;
}

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--ac-linea-fuerte);
  border: 2px solid transparent;
  border-radius: var(--ac-r-full);
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background-color: var(--ac-txt-3); background-clip: content-box; }

/* La selección de texto se define UNA sola vez, en cyberconquer.css.
 * Aquí había una regla con `color: var(--ac-nivel-0)` —casi negro— que
 * sobrevivía a todos los intentos posteriores de corregirla, porque las reglas
 * siguientes solo cambiaban el `background` y omitir una propiedad NO la
 * deshace: la cascada conserva el último valor declarado. Ver el comentario
 * completo en cyberconquer.css. */

/* ===========================================================================
 * F1 — CAMPOS DE FORMULARIO
 *
 * material-dashboard usa el patrón de etiqueta flotante: el campo no tiene
 * borde, solo una línea inferior, y la etiqueta se posiciona en absoluto sobre
 * él. Se ve bien en una maqueta y falla en uso real — el usuario no distingue
 * dónde termina un campo y empieza el siguiente, y la etiqueta deja de ser
 * legible mientras se escribe. Medido en la página servida: 5px de solape
 * entre la etiqueta y el borde del campo.
 *
 * Aquí los campos son cajas con borde y la etiqueta va encima, en el flujo.
 * ======================================================================== */

.form-group,
.bmd-form-group {
  position: static;
  padding: 0;
  margin-bottom: var(--ac-e-4);
}

.form-group > label,
.bmd-form-group > label,
.form-group .control-label,
label.control-label {
  position: static;
  display: block;
  top: auto;
  left: auto;
  margin: 0 0 var(--ac-e-2);
  transform: none;
  font-size: var(--ac-t-sm);
  font-weight: 500;
  line-height: 1.4;
  color: var(--ac-txt-2);
  pointer-events: auto;
}

.form-control,
.form-control:not([size]):not([multiple]),
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="url"],
input[type="tel"],
textarea,
select {
  display: block;
  width: 100%;
  /* 44px: objetivo tactil comodo, no el minimo de 24. */
  min-height: 44px;
  height: auto;
  padding: var(--ac-e-2) var(--ac-e-3);
  background-color: var(--ac-nivel-0);
  background-image: none;
  border: 1px solid var(--ac-linea);
  border-radius: var(--ac-r-sm);
  color: var(--ac-txt);
  font-family: inherit;
  font-size: var(--ac-t-base);
  line-height: 1.5;
  box-shadow: none;
  transition: border-color var(--ac-rapido) var(--ac-curva),
              box-shadow var(--ac-rapido) var(--ac-curva),
              background-color var(--ac-rapido) var(--ac-curva);
}

textarea,
textarea.form-control {
  min-height: 120px;
  resize: vertical;
}

.form-control:hover:not(:disabled):not([readonly]) {
  border-color: var(--ac-linea-fuerte);
}

/* Anillo de foco doble: borde de color y halo. Sobre fondo oscuro un borde de
 * 1px por si solo no basta para saber donde esta el cursor. */
.form-control:focus,
input:focus,
textarea:focus,
select:focus {
  background-color: var(--ac-nivel-1);
  border-color: var(--ac-acento);
  box-shadow: 0 0 0 3px var(--ac-acento-suave);
  color: var(--ac-txt);
  outline: none;
}

.form-control::placeholder { color: var(--ac-txt-3); opacity: 1; }

.form-control:disabled,
.form-control[readonly] {
  background-color: var(--ac-nivel-1);
  border-color: var(--ac-linea);
  color: var(--ac-txt-3);
  cursor: not-allowed;
}

/* La flecha del select se dibuja aqui: la nativa se pinta clara sobre oscuro
 * en varios navegadores y queda invisible. */
select,
select.form-control {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--ac-e-6);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23a6adc0' stroke-width='1.6'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--ac-e-3) center;
  background-size: 16px 16px;
}

select option { background: var(--ac-nivel-2); color: var(--ac-txt); }

/* --- Casillas y opciones -------------------------------------------------
 * accent-color deja al navegador dibujar el control nativo con el color de la
 * marca: conserva el comportamiento y el foco nativos, que es justo lo que las
 * casillas personalizadas suelen romper. */
input[type="checkbox"],
input[type="radio"] {
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 0;
  accent-color: var(--ac-acento);
  cursor: pointer;
}

.form-check,
.checkbox,
.radio {
  display: flex;
  align-items: center;
  gap: var(--ac-e-2);
  margin-bottom: var(--ac-e-2);
}

.form-check label,
.checkbox label,
.radio label {
  display: inline-flex;
  align-items: center;
  gap: var(--ac-e-2);
  margin: 0;
  font-size: var(--ac-t-base);
  color: var(--ac-txt);
  cursor: pointer;
}

/* --- Grupos de campos ---------------------------------------------------- */
.input-group { display: flex; align-items: stretch; }
.input-group .form-control { border-radius: var(--ac-r-sm) 0 0 var(--ac-r-sm); }
.input-group .form-control:only-child { border-radius: var(--ac-r-sm); }

.input-group-append .btn,
.input-group-prepend .btn { border-radius: 0 var(--ac-r-sm) var(--ac-r-sm) 0; }

/* --- Ayudas y validacion -------------------------------------------------
 * El mensaje de error lleva barra lateral y peso, no solo color: el color por
 * si solo falla para quien no lo distingue (WCAG 1.4.1). */
.form-text { color: var(--ac-txt-3); font-size: var(--ac-t-sm); }

.form-group .help-block:not(:empty),
.invalid-feedback,
.has-error .help-block {
  display: block;
  margin-top: var(--ac-e-2);
  padding: var(--ac-e-1) 0 var(--ac-e-1) var(--ac-e-3);
  border-left: 3px solid var(--ac-error);
  color: var(--ac-error);
  font-size: var(--ac-t-sm);
  font-weight: 500;
}

.form-group .hint-block,
.form-group small.text-warning {
  display: block;
  margin-top: var(--ac-e-2);
  color: var(--ac-txt-3) !important;
  font-size: var(--ac-t-sm);
}

.has-error .form-control,
.form-control.is-invalid,
[aria-invalid="true"] { border-color: var(--ac-error) !important; }

.has-error .form-control:focus,
[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--ac-error-suave); }

.has-success .form-control,
.form-control.is-valid { border-color: var(--ac-exito); }

.required > label::after,
label.required::after {
  content: " *";
  color: var(--ac-error);
  font-weight: 700;
}

/* ===========================================================================
 * F2 — BOTONES E ICONOS
 *
 * El tema anterior daba a .btn fondo gris, sombra difusa, mayusculas forzadas
 * y un radio distinto por variante. Resultado: 66 botones por pantalla sin
 * jerarquia visible — primario y secundario pesaban igual.
 * ======================================================================== */

.btn,
button.btn,
a.btn,
input[type="submit"].btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ac-e-2);
  min-height: 44px;
  margin: 0;
  padding: var(--ac-e-2) var(--ac-e-4);
  border: 1px solid transparent;
  border-radius: var(--ac-r-sm);
  background: var(--ac-nivel-3);
  color: var(--ac-txt);
  font-family: inherit;
  font-size: var(--ac-t-sm);
  font-weight: 600;
  /* Sin text-transform: las mayusculas forzadas hacen ilegibles las etiquetas
   * largas en espanol ("CREAR PERFIL DE OPERADOR") y maltratan los acentos. */
  text-transform: none;
  letter-spacing: 0.01em;
  line-height: 1.4;
  box-shadow: none;
  cursor: pointer;
  overflow: hidden;
  transition: background-color var(--ac-rapido) var(--ac-curva),
              border-color var(--ac-rapido) var(--ac-curva),
              color var(--ac-rapido) var(--ac-curva),
              transform var(--ac-rapido) var(--ac-curva);
}

.btn:hover { background: var(--ac-nivel-4); color: var(--ac-txt); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn.disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* Primario: el unico con relleno solido de acento. Si todo es primario, nada
 * lo es. Texto oscuro porque el blanco sobre lima no alcanza 4.5:1. */
.btn-primary, .btn.btn-primary {
  background: var(--ac-acento);
  border-color: var(--ac-acento);
  color: var(--ac-nivel-0);
}

.btn-primary:hover, .btn-primary:focus, .btn.btn-primary:hover {
  background: var(--ac-acento-2);
  border-color: var(--ac-acento-2);
  color: var(--ac-nivel-0);
}

/* Secundario: contorno. */
.btn-secondary, .btn-default, .btn-white {
  background: transparent;
  border-color: var(--ac-linea-fuerte);
  color: var(--ac-txt-2);
}

.btn-secondary:hover, .btn-default:hover, .btn-white:hover {
  background: var(--ac-nivel-3);
  border-color: var(--ac-acento);
  color: var(--ac-txt);
}

.btn-success { background: var(--ac-exito); border-color: var(--ac-exito); color: var(--ac-nivel-0); }
.btn-info    { background: var(--ac-info);  border-color: var(--ac-info);  color: var(--ac-nivel-0); }
.btn-warning { background: var(--ac-aviso); border-color: var(--ac-aviso); color: var(--ac-nivel-0); }
.btn-danger  { background: var(--ac-error); border-color: var(--ac-error); color: var(--ac-nivel-0); }
.btn-rose    { background: var(--ac-error); border-color: var(--ac-error); color: var(--ac-nivel-0); }

.btn-success:hover, .btn-info:hover, .btn-warning:hover,
.btn-danger:hover, .btn-rose:hover { filter: brightness(1.1); color: var(--ac-nivel-0); }

.btn-link {
  background: transparent;
  border-color: transparent;
  color: var(--ac-acento);
  padding-left: var(--ac-e-2);
  padding-right: var(--ac-e-2);
}

.btn-link:hover { background: var(--ac-acento-suave); color: var(--ac-acento); }

.btn-just-icon, .btn.btn-just-icon {
  width: 44px;
  min-width: 44px;
  padding: 0;
  border-radius: var(--ac-r-sm);
}

.btn-round, .btn.btn-round { border-radius: var(--ac-r-full); }

.btn-sm, .btn.btn-sm {
  min-height: 34px;
  padding: var(--ac-e-1) var(--ac-e-3);
  font-size: var(--ac-t-xs);
}

.btn-lg, .btn.btn-lg {
  min-height: 52px;
  padding: var(--ac-e-3) var(--ac-e-5);
  font-size: var(--ac-t-base);
}

.btn-block { width: 100%; }

/* material-dashboard inyecta un <div class="ripple-container"> por boton. Sin
 * su JS queda como hijo vacio que descuadra el flex. */
.btn > .ripple-container { position: absolute; inset: 0; pointer-events: none; }

/* --- Iconos --------------------------------------------------------------
 * Conviven Material Icons (158 usos) y Font Awesome (108). No se unifican
 * cambiando el marcado —serian 266 ediciones— sino igualando su metrica, que
 * es lo que hacia que un icono saltara respecto al texto contiguo. */
.material-icons,
.fas, .far, .fab, .fa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 1;
}

.material-icons {
  font-size: 1.25em;
  /* Sin esto el glifo arrastra la linea base y desalinea el texto de al lado. */
  transform: translateY(-0.05em);
}

/* Un icono dentro de un boton hereda su color y no impone tamano propio:
 * varias vistas traen font-size inline de hasta 2.2em. */
.btn .material-icons,
.btn .fas, .btn .far, .btn .fab {
  font-size: 1.1em !important;
  color: inherit;
}

/* ===========================================================================
 * F3 — SUPERFICIES
 *
 * .card aparece 41 veces por recorrido. En el tema anterior era un rectangulo
 * casi del mismo color que el fondo, con una sombra difusa que sobre oscuro no
 * se percibe: el resultado era una pantalla sin estructura donde nada parecia
 * agrupado con nada.
 *
 * Aqui la tarjeta se separa por luminosidad y por un borde nitido, que es lo
 * que funciona en una interfaz oscura.
 * ======================================================================== */

.card,
.card.bg-dark {
  position: relative;
  margin-bottom: var(--ac-e-4);
  background: var(--ac-nivel-2);
  border: 1px solid var(--ac-linea);
  border-radius: var(--ac-r);
  box-shadow: var(--ac-sombra-1);
  color: var(--ac-txt);
  overflow: hidden;
  transition: border-color var(--ac-normal) var(--ac-curva),
              box-shadow var(--ac-normal) var(--ac-curva);
}

/* Filo superior claro: es lo que da sensacion de volumen sobre fondo oscuro,
 * donde una sombra proyectada es practicamente invisible. */
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.07) 22%, rgba(255, 255, 255, 0.07) 78%, transparent);
  pointer-events: none;
}

.card-body { padding: var(--ac-e-5); }
.card-footer {
  padding: var(--ac-e-3) var(--ac-e-5);
  border-top: 1px solid var(--ac-linea);
  background: rgba(0, 0, 0, 0.18);
}

.card-header {
  padding: var(--ac-e-4) var(--ac-e-5);
  border-bottom: 1px solid var(--ac-linea);
  background: transparent;
  box-shadow: none;
  margin: 0;
}

/* material-dashboard saca la cabecera fuera de la tarjeta con margenes
 * negativos y le pone un degradado de color. Se anula: lo que producia era una
 * caja de color flotando encima del borde. */
.card-header-primary, .card-header-info, .card-header-success,
.card-header-warning, .card-header-danger, .card-header-rose,
.card-header-score, .card-header-icon, .card-header-text {
  margin: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.card-title {
  margin: 0;
  font-family: var(--ac-fuente);
  font-size: var(--ac-t-md);
  font-weight: 600;
  color: var(--ac-txt);
  letter-spacing: -0.011em;
}

.card-category,
.card-description {
  margin: var(--ac-e-1) 0 0;
  font-size: var(--ac-t-sm);
  color: var(--ac-txt-3);
}

/* La tarjeta que enlaza a algun sitio reacciona; la que solo informa, no.
 * Animar lo que no es accionable ensena una afordancia que no existe. */
.card a:not(.btn):hover ~ *,
.card:has(a:hover) { border-color: var(--ac-linea-fuerte); }

.card:focus-within {
  border-color: var(--ac-acento);
  box-shadow: 0 0 0 3px var(--ac-acento-suave);
}

/* --- Menus desplegables --------------------------------------------------
 * 29 por recorrido. Necesitan leerse por encima del contenido: nivel 3 y
 * sombra fuerte, no el mismo gris que la tarjeta de debajo. */
.dropdown-menu {
  min-width: 14rem;
  padding: var(--ac-e-2);
  background: var(--ac-nivel-3);
  border: 1px solid var(--ac-linea-fuerte);
  border-radius: var(--ac-r);
  box-shadow: var(--ac-sombra-3);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--ac-e-2);
  min-height: 40px;
  padding: var(--ac-e-2) var(--ac-e-3);
  border-radius: var(--ac-r-sm);
  color: var(--ac-txt-2);
  font-size: var(--ac-t-sm);
  white-space: normal;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--ac-nivel-4);
  color: var(--ac-txt);
  text-decoration: none;
}

.dropdown-divider { border-top-color: var(--ac-linea); margin: var(--ac-e-2) 0; }

/* --- Modales ------------------------------------------------------------- */
.modal-content {
  background: var(--ac-nivel-2);
  border: 1px solid var(--ac-linea-fuerte);
  border-radius: var(--ac-r-lg);
  box-shadow: var(--ac-sombra-3);
}

.modal-header,
.modal-footer {
  padding: var(--ac-e-4) var(--ac-e-5);
  border-color: var(--ac-linea);
}

.modal-body { padding: var(--ac-e-5); }
.modal-title { font-size: var(--ac-t-lg); }
.modal-backdrop.show { opacity: 0.72; }

.close {
  color: var(--ac-txt-2);
  opacity: 1;
  text-shadow: none;
  font-size: 1.5rem;
}

.close:hover { color: var(--ac-txt); }

/* --- Avisos y mensajes ---------------------------------------------------
 * Barra lateral de color + fondo tenue. El borde izquierdo hace que el tipo de
 * mensaje se reconozca en una ojeada sin depender solo del matiz. */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--ac-e-3);
  margin-bottom: var(--ac-e-4);
  padding: var(--ac-e-3) var(--ac-e-4);
  border: 1px solid var(--ac-linea);
  border-left-width: 4px;
  border-radius: var(--ac-r-sm);
  background: var(--ac-nivel-2);
  color: var(--ac-txt);
  box-shadow: none;
  font-size: var(--ac-t-sm);
}

.alert-success, .alert-primary { border-left-color: var(--ac-exito); background: var(--ac-exito-suave); }
.alert-info    { border-left-color: var(--ac-info);  background: var(--ac-info-suave); }
.alert-warning { border-left-color: var(--ac-aviso); background: var(--ac-aviso-suave); }
.alert-danger  { border-left-color: var(--ac-error); background: var(--ac-error-suave); }

.alert a { font-weight: 600; text-decoration: underline; }

/* ===========================================================================
 * F4 — NAVEGACION
 * ======================================================================== */

/* --- Barra lateral -------------------------------------------------------
 * Era negra plana con un item activo en bloque solido verde que dominaba la
 * pantalla. Ahora el activo se marca con fondo tenue y una barra de acento:
 * se distingue sin gritar. */
.sidebar,
.sidebar[data-color],
.sidebar[data-background-color] {
  background: var(--ac-nivel-0);
  border-right: 1px solid var(--ac-linea);
  box-shadow: none;
}

.sidebar::after,
.sidebar::before { display: none !important; }

.sidebar .logo {
  padding: var(--ac-e-4);
  border-bottom: 1px solid var(--ac-linea);
}

.sidebar .logo a.logo-normal,
.sidebar .logo a.logo-mini { color: var(--ac-txt); }

.sidebar .nav { padding: var(--ac-e-3) var(--ac-e-2); }

.sidebar .nav .nav-item { margin: 0 0 2px; }

.sidebar .nav .nav-link {
  display: flex;
  align-items: center;
  gap: var(--ac-e-3);
  min-height: 44px;
  margin: 0;
  padding: var(--ac-e-2) var(--ac-e-3);
  border-radius: var(--ac-r-sm);
  background: transparent;
  color: var(--ac-txt-2);
  font-size: var(--ac-t-sm);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  opacity: 1;
  box-shadow: none;
  transition: background-color var(--ac-rapido) var(--ac-curva),
              color var(--ac-rapido) var(--ac-curva);
}

.sidebar .nav .nav-link:hover {
  background: var(--ac-nivel-2);
  color: var(--ac-txt);
}

/* Activo: fondo tenue, texto de acento y barra a la izquierda. Tres senales,
 * una de ellas independiente del color. */
.sidebar .nav .nav-item.active > .nav-link,
.sidebar .nav .nav-link.active {
  position: relative;
  background: var(--ac-acento-suave);
  color: var(--ac-acento);
  font-weight: 600;
  box-shadow: none;
}

.sidebar .nav .nav-item.active > .nav-link::before,
.sidebar .nav .nav-link.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--ac-acento);
}

.sidebar .nav .nav-link i,
.sidebar .nav .nav-link .material-icons {
  margin: 0;
  font-size: 1.15em;
  color: inherit;
  opacity: 1;
}

.sidebar .user,
.sidebar .user .photo { border: 0; }
.sidebar .user::after { display: none; }

/* --- Barra superior ------------------------------------------------------ */
.navbar,
.navbar.navbar-transparent,
.navbar.navbar-absolute {
  padding: var(--ac-e-2) var(--ac-e-4);
  background: rgba(11, 13, 18, 0.78) !important;
  /* Fondo translucido con desenfoque: separa la barra del contenido que pasa
   * por debajo sin recurrir a un bloque opaco. */
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--ac-linea);
  box-shadow: none;
}

.navbar .navbar-brand {
  padding: 0;
  color: var(--ac-txt);
  font-size: var(--ac-t-md);
  font-weight: 600;
  letter-spacing: -0.011em;
}

.navbar .navbar-nav .nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ac-e-2);
  min-width: 44px;
  min-height: 44px;
  padding: var(--ac-e-2);
  border-radius: var(--ac-r-sm);
  color: var(--ac-txt-2);
  font-size: var(--ac-t-sm);
  text-transform: none;
}

.navbar .navbar-nav .nav-link:hover {
  background: var(--ac-nivel-3);
  color: var(--ac-txt);
}

/* Los iconos de la barra traian font-size inline de hasta 2.2em, que rompia la
 * altura de la fila. */
.navbar .navbar-nav .nav-link i,
.navbar .navbar-nav .nav-link .fas,
.navbar .navbar-nav .nav-link .material-icons {
  font-size: 1.15rem !important;
}

/* Contador de pendientes sobre el icono. */
.navbar .notification {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: var(--ac-r-full);
  background: var(--ac-error);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.navbar-toggler .navbar-toggler-icon.icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  margin: 4px auto;
  border-radius: 1px;
  background: var(--ac-txt-2);
}

/* --- Migas de pan -------------------------------------------------------- */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ac-e-1);
  padding: 0;
  margin: 0 0 var(--ac-e-4);
  background: transparent;
  font-size: var(--ac-t-sm);
}

.breadcrumb-item { color: var(--ac-txt-3); }
.breadcrumb-item a { color: var(--ac-txt-2); }
.breadcrumb-item a:hover { color: var(--ac-acento); }
.breadcrumb-item.active { color: var(--ac-txt); font-weight: 500; }

.breadcrumb-item + .breadcrumb-item::before {
  content: "/";
  padding: 0 var(--ac-e-2);
  color: var(--ac-linea-fuerte);
}

/* --- Paginacion ---------------------------------------------------------- */
.pagination { gap: var(--ac-e-1); margin: 0; }

.pagination .page-item .page-link,
.pagination .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 0 var(--ac-e-2);
  border: 1px solid var(--ac-linea);
  border-radius: var(--ac-r-sm);
  background: var(--ac-nivel-2);
  color: var(--ac-txt-2);
  font-size: var(--ac-t-sm);
  box-shadow: none;
}

.pagination .page-link:hover {
  background: var(--ac-nivel-3);
  border-color: var(--ac-linea-fuerte);
  color: var(--ac-txt);
}

.pagination .page-item.active .page-link {
  background: var(--ac-acento);
  border-color: var(--ac-acento);
  color: var(--ac-nivel-0);
  font-weight: 600;
}

.pagination .page-item.disabled .page-link {
  background: transparent;
  color: var(--ac-txt-3);
  opacity: 0.5;
}

/* --- Pie ----------------------------------------------------------------- */
.footer {
  padding: var(--ac-e-4) 0;
  border-top: 1px solid var(--ac-linea);
  background: transparent;
  color: var(--ac-txt-3);
  font-size: var(--ac-t-sm);
}

.footer a { color: var(--ac-txt-2); }
.footer a:hover { color: var(--ac-acento); }

/* ===========================================================================
 * F5 — PRESENTACION DE DATOS
 * ======================================================================== */

/* --- Tablas -------------------------------------------------------------- */
.table {
  width: 100%;
  margin: 0;
  color: var(--ac-txt);
  border-collapse: separate;
  border-spacing: 0;
}

.table thead th {
  padding: var(--ac-e-3) var(--ac-e-4);
  border: 0;
  border-bottom: 1px solid var(--ac-linea);
  background: var(--ac-nivel-1);
  color: var(--ac-txt-3);
  font-size: var(--ac-t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.table tbody td {
  padding: var(--ac-e-3) var(--ac-e-4);
  border: 0;
  border-bottom: 1px solid var(--ac-linea);
  vertical-align: middle;
  font-size: var(--ac-t-sm);
}

.table tbody tr { transition: background-color var(--ac-rapido) var(--ac-curva); }
.table tbody tr:hover { background: rgba(255, 255, 255, 0.025); }
.table tbody tr:last-child td { border-bottom: 0; }

.table-responsive { border-radius: var(--ac-r); }

/* --- Distintivos --------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ac-e-1);
  padding: 0.25em 0.65em;
  border: 1px solid transparent;
  border-radius: var(--ac-r-full);
  font-size: var(--ac-t-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.5;
  text-transform: none;
}

/* Fondo tenue + texto y borde del color: legible, y no compite con los botones
 * primarios como hacia el distintivo solido. */
.badge-primary { background: var(--ac-acento-suave); border-color: var(--ac-acento-borde); color: var(--ac-acento); }
.badge-info    { background: var(--ac-info-suave);   border-color: var(--ac-info);  color: var(--ac-info); }
.badge-success { background: var(--ac-exito-suave);  border-color: var(--ac-exito); color: var(--ac-exito); }
.badge-warning { background: var(--ac-aviso-suave);  border-color: var(--ac-aviso); color: var(--ac-aviso); }
.badge-danger  { background: var(--ac-error-suave);  border-color: var(--ac-error); color: var(--ac-error); }
.badge-default, .badge-secondary { background: var(--ac-nivel-3); border-color: var(--ac-linea); color: var(--ac-txt-2); }

/* --- Progreso ------------------------------------------------------------
 * Las barras se veian como cajas blancas vacias: el contenedor era claro y el
 * relleno no tenia color. */
.progress {
  height: 8px;
  margin: var(--ac-e-2) 0 0;
  border-radius: var(--ac-r-full);
  background: var(--ac-nivel-0);
  box-shadow: none;
  overflow: hidden;
}

.progress-bar {
  background: linear-gradient(90deg, var(--ac-acento-2), var(--ac-acento));
  box-shadow: none;
  transition: width var(--ac-normal) var(--ac-curva);
}

.progress-bar-info    { background: var(--ac-info); }
.progress-bar-success { background: var(--ac-exito); }
.progress-bar-warning { background: var(--ac-aviso); }
.progress-bar-danger  { background: var(--ac-error); }

/* --- Cifras y estadisticas -----------------------------------------------
 * Orbitron solo para numeros: en textos largos es ilegible, y el tema anterior
 * la aplicaba a titulos completos. */
.card-stats .card-title,
.stats-value,
.card-stats h3,
.card-stats h4 {
  font-family: var(--ac-fuente-cifras);
  font-size: var(--ac-t-2xl);
  font-weight: 500;
  line-height: 1.1;
  color: var(--ac-txt);
  letter-spacing: 0;
}

.card-stats .card-category {
  font-family: var(--ac-fuente);
  font-size: var(--ac-t-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ac-txt-3);
}

/* El icono de las tarjetas de estadistica venia con degradados chillones y
 * sombra de color heredados de material-dashboard. Se sustituye por una
 * superficie sobria con el icono en color de acento. */
.card .card-header.card-header-icon .card-icon,
.card .card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--ac-linea);
  border-radius: var(--ac-r);
  background: var(--ac-nivel-3) !important;
  box-shadow: none !important;
  color: var(--ac-acento);
}

.card .card-icon i,
.card .card-icon .material-icons,
.card .card-icon .fas {
  font-size: 1.5rem !important;
  color: var(--ac-acento);
}

.card .card-icon img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

/* --- Estados vacios ------------------------------------------------------ */
.empty,
.empty-state {
  padding: var(--ac-e-6) var(--ac-e-4);
  color: var(--ac-txt-3);
  text-align: center;
}

/* --- Listas -------------------------------------------------------------- */
.list-group-item {
  padding: var(--ac-e-3) var(--ac-e-4);
  background: transparent;
  border-color: var(--ac-linea);
  color: var(--ac-txt);
}

.list-group-item:hover { background: var(--ac-nivel-3); }

/* --- Pestanas ------------------------------------------------------------ */
.nav-tabs {
  gap: var(--ac-e-1);
  border-bottom: 1px solid var(--ac-linea);
}

.nav-tabs .nav-link {
  padding: var(--ac-e-3) var(--ac-e-4);
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--ac-txt-2);
  font-size: var(--ac-t-sm);
  font-weight: 500;
  text-transform: none;
}

.nav-tabs .nav-link:hover { color: var(--ac-txt); border-bottom-color: var(--ac-linea-fuerte); }

.nav-tabs .nav-link.active {
  background: transparent;
  border-bottom-color: var(--ac-acento);
  color: var(--ac-acento);
  font-weight: 600;
}

/* ===========================================================================
 * F7 — AJUSTES DE PANTALLA
 * (va antes de F6 en el archivo porque F6 solo anade movimiento encima)
 * ======================================================================== */

/* --- La barra superior tapaba el contenido -------------------------------
 * Medido: la barra ocupa 121px y el contenido solo reservaba 24px de padding,
 * asi que la primera tarjeta empezaba en y=94 y quedaba cortada por debajo de
 * ella. Es un defecto del tema original que solo se nota con datos reales. */
.main-panel > .content,
main.content {
  padding-top: calc(70px + var(--ac-e-5));
}

@media (max-width: 991.98px) {
  .main-panel > .content,
  main.content { padding-top: calc(64px + var(--ac-e-4)); }
}

/* La barra de autenticacion no existe: alli el contenido empieza arriba. */
body > main#contenido { padding-top: 0; }

/* --- Marca de la barra lateral ------------------------------------------- */
.sidebar .logo .academy-wordmark {
  display: flex;
  align-items: center;
  gap: var(--ac-e-3);
  padding: 0;
  margin: 0;
  line-height: 1.2;
}

.sidebar .logo .academy-wordmark img { border-radius: var(--ac-r-sm); flex-shrink: 0; }

.sidebar .logo .academy-wordmark span { display: flex; flex-direction: column; }

.sidebar .logo .academy-wordmark strong {
  font-size: var(--ac-t-sm);
  font-weight: 600;
  color: var(--ac-txt);
  letter-spacing: -0.01em;
}

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

/* material centra y escala el logo con reglas propias; se neutralizan para que
 * el wordmark se lea como una unidad. */
.sidebar .logo a.logo-mini,
.sidebar .logo a.logo-normal {
  float: none;
  width: auto;
  margin: 0;
  opacity: 1;
  transform: none;
  text-align: left;
}

.sidebar .logo::after { display: none; }

/* --- Tarjetas de estadistica --------------------------------------------
 * El marcado real es:
 *   .card-header > .card-icon + p.card-category (etiqueta) + h4.card-title (valor)
 *
 * material aplica a .card .card-header .card-title reglas mas especificas que
 * las mias, asi que la cifra salia pequena y la etiqueta grande: la jerarquia
 * invertida. Se sube la especificidad y se coloca el bloque en rejilla, con el
 * icono a la izquierda y el par etiqueta/valor a la derecha. */
.card.card-stats .card-header {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icono etiqueta"
    "icono valor";
  align-items: center;
  gap: 0 var(--ac-e-4);
  padding: var(--ac-e-4) var(--ac-e-5);
  border-bottom: 0;
}

.card.card-stats .card-header .card-icon { grid-area: icono; }

.card.card-stats .card-header .card-category {
  grid-area: etiqueta;
  align-self: end;
  margin: 0;
  font-family: var(--ac-fuente);
  font-size: var(--ac-t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ac-txt-3);
  text-align: left;
}

.card.card-stats .card-header .card-title,
.card.card-stats .card-header h4.card-title {
  grid-area: valor;
  align-self: start;
  margin: 0;
  font-family: var(--ac-fuente-cifras);
  font-size: var(--ac-t-2xl);
  font-weight: 500;
  line-height: 1.1;
  color: var(--ac-txt);
  text-align: left;
  letter-spacing: 0;
}

.card.card-stats .card-footer {
  padding: var(--ac-e-3) var(--ac-e-5);
  font-size: var(--ac-t-sm);
  color: var(--ac-txt-3);
}

/* Las tarjetas de estadistica del panel traen su progreso justo debajo. */
.card.card-stats .progress { margin-top: var(--ac-e-3); }

/* --- Buscador y bandera de la barra superior -----------------------------
 * Flotaban sueltos con un boton circular blanco encima del campo. Se agrupan
 * como un control unico. */
.navbar .navbar-form,
.navbar form#claim,
.navbar form#search {
  display: flex;
  align-items: center;
  gap: var(--ac-e-2);
  margin: 0;
}

.navbar .input-group {
  align-items: center;
  gap: var(--ac-e-2);
  border: 0;
}

.navbar .form-control,
.navbar input[type="text"] {
  min-height: 40px;
  min-width: 12rem;
  background: var(--ac-nivel-2);
  border: 1px solid var(--ac-linea);
  border-radius: var(--ac-r-sm);
  color: var(--ac-txt);
  font-size: var(--ac-t-sm);
}

.navbar .btn.btn-just-icon,
.navbar .btn.btn-white,
.navbar .btn.btn-round {
  width: 40px;
  min-width: 40px;
  min-height: 40px;
  background: var(--ac-nivel-3);
  border: 1px solid var(--ac-linea);
  border-radius: var(--ac-r-sm);
  color: var(--ac-txt-2);
  box-shadow: none;
}

.navbar .btn.btn-just-icon:hover,
.navbar .btn.btn-white:hover {
  background: var(--ac-acento);
  border-color: var(--ac-acento);
  color: var(--ac-nivel-0);
}

/* --- Perfil del operador en la barra lateral ----------------------------- */
.sidebar .simple-text.logo-normal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ac-e-2);
  padding: var(--ac-e-4);
  border-bottom: 1px solid var(--ac-linea);
  color: var(--ac-txt);
  font-size: var(--ac-t-sm);
  text-transform: none;
}

.sidebar .clock,
.sidebar #clock {
  display: block;
  padding: var(--ac-e-2) var(--ac-e-4);
  color: var(--ac-txt-3) !important;
  font-family: var(--ac-fuente-cifras);
  font-size: var(--ac-t-xs);
  text-align: center;
}

/* ===========================================================================
 * F6 — MOVIMIENTO
 *
 * Discreto y funcional: cada transicion existe para confirmar que algo
 * respondio, no para decorar. Todo se desactiva con prefers-reduced-motion.
 * ======================================================================== */

/* Foco visible en todo lo interactivo. :focus-visible mantiene el anillo fuera
 * del camino del raton y presente para el teclado. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible,
.page-link:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
summary:focus-visible {
  outline: 3px solid var(--ac-acento);
  outline-offset: 2px;
  border-radius: var(--ac-r-sm);
}

/* La tarjeta se eleva al apuntarla solo si contiene un enlace: si no es
 * accionable, moverla promete algo que no ocurre. */
.card:has(a:not(.btn-link)):hover,
.card:has(.btn):hover {
  border-color: var(--ac-linea-fuerte);
  box-shadow: var(--ac-sombra-2);
  transform: translateY(-2px);
}

.card { transition: border-color var(--ac-normal) var(--ac-curva),
                    box-shadow var(--ac-normal) var(--ac-curva),
                    transform var(--ac-normal) var(--ac-curva); }

/* Entrada del contenido: un desplazamiento minimo que ancla la vista sin
 * hacerse notar. Solo la primera vez, sin repetir en cada interaccion. */
@keyframes ac-entrada {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.main-panel > .content > .container,
.main-panel > .content > .container-fluid,
main#contenido > .container,
main#contenido > .container-fluid {
  animation: ac-entrada var(--ac-normal) var(--ac-curva) both;
}

/* Estado de envio: el boton informa que trabaja. Lo activa academia-ux.js. */
.btn[aria-busy="true"] {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.btn[aria-busy="true"]::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  /* El color se toma del texto original, que aqui es transparente; se fija
   * explicito para que el giro se vea sobre cualquier variante. */
  border-color: var(--ac-nivel-0) transparent var(--ac-nivel-0) var(--ac-nivel-0);
  animation: ac-giro 620ms linear infinite;
}

.btn-secondary[aria-busy="true"]::after,
.btn-white[aria-busy="true"]::after,
.btn-link[aria-busy="true"]::after {
  border-color: var(--ac-txt) transparent var(--ac-txt) var(--ac-txt);
}

@keyframes ac-giro { to { transform: rotate(360deg); } }

/* Esqueleto para contenido que aun no llega. */
.ac-skeleton {
  border-radius: var(--ac-r-sm);
  background: linear-gradient(90deg, var(--ac-nivel-2) 25%, var(--ac-nivel-3) 37%, var(--ac-nivel-2) 63%);
  background-size: 400% 100%;
  animation: ac-brillo 1.4s ease infinite;
}

@keyframes ac-brillo { from { background-position: 100% 50%; } to { background-position: 0 50%; } }

/* Un punto que late para indicar "en linea", sin sonido ni parpadeo brusco. */
.ac-latido {
  position: relative;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ac-exito);
}

.ac-latido::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  animation: ac-pulso 2s var(--ac-curva) infinite;
}

@keyframes ac-pulso {
  from { transform: scale(1); opacity: 0.7; }
  to   { transform: scale(2.6); opacity: 0; }
}

/* Regla no negociable: quien pide menos movimiento no recibe ninguno.
 * WCAG 2.1 SC 2.3.3. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .card:hover { transform: none; }
  .btn:active { transform: none; }
}

/* ===========================================================================
 * F7 bis — CORRECCIONES MEDIDAS EN LA PAGINA SERVIDA
 *
 * Las reglas anteriores no ganaban. Medido con getComputedStyle y recorriendo
 * document.styleSheets: material.css declara
 *
 *   .card-stats.bg-dark > .card-header.card-header-icon > .card-category
 *
 * con especificidad (0,5,0) y font-size 1.2em, por encima de mi
 * `.card.card-stats .card-header .card-category` (0,4,0). Resultado: la
 * etiqueta salia a 16.8px en Orbitron y la cifra igual — la jerarquia
 * invertida, con "PAISES" gritando y el numero susurrando.
 *
 * Se replica el mismo patron de selector anadiendo `.card` al frente, lo que
 * da (0,6,0) y gana por especificidad, no por !important.
 * ======================================================================== */

.card.card-stats.bg-dark > .card-header.card-header-icon > .card-category,
.card.card-stats > .card-header > .card-category {
  font-family: var(--ac-fuente);
  font-size: var(--ac-t-xs);
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ac-txt-3);
}

.card.card-stats.bg-dark > .card-header.card-header-icon > .card-title,
.card.card-stats > .card-header > .card-title,
.card.card-stats.bg-dark > .card-header.card-header-icon > h4.card-title {
  font-family: var(--ac-fuente-cifras);
  /* 1.75rem y no 2.25: varias tarjetas del panel llevan texto, no solo cifras
   * ("Nivel actual: New 1"), y a 36px ese texto rompe en tres lineas. */
  font-size: var(--ac-t-xl);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--ac-txt);
}

/* Las tarjetas cuyo "valor" es una frase y no un numero se leen mejor con la
 * tipografia de texto: Orbitron es display, y una oracion en Orbitron cansa. */
.card.card-stats > .card-header > .card-title:not(:only-child) { text-wrap: balance; }

/* --- Marca lateral: el subtitulo no debe repetir el nombre ---------------
 * Con event_name = "Academia Cyber Range", anadir "Cyber Range" debajo lo dice
 * dos veces. La vista ya no lo imprime cuando es redundante; esto cubre el
 * caso en que si aparezca. */
.sidebar .logo .academy-wordmark strong {
  font-size: var(--ac-t-sm);
  line-height: 1.25;
  text-transform: none;
  letter-spacing: -0.01em;
}

/* --- El texto del item activo se veia apagado ---------------------------
 * material envuelve la etiqueta en <p> con color propio, asi que el color del
 * enlace no llegaba al texto. */
.sidebar .nav .nav-link p,
.sidebar .nav .nav-link span {
  margin: 0;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-transform: none;
}

.sidebar .nav .nav-item.active > .nav-link p { color: inherit; font-weight: 600; }

/* --- Bloque de perfil de la barra lateral --------------------------------
 * El avatar, el nombre y el distintivo VIP se pisaban: el distintivo estaba
 * posicionado en absoluto con porcentajes calculados para otro tamano. */
.sidebar .user,
.sidebar .simple-text.logo-normal {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ac-e-2);
  padding: var(--ac-e-4);
  text-align: center;
}

.sidebar .simple-text.logo-normal img {
  width: 64px;
  height: 64px;
  border-radius: var(--ac-r);
  object-fit: cover;
}

.sidebar .simple-text.logo-normal .badge {
  position: static !important;
  /* Estaba en `position:absolute; bottom:32%; left:57%`, coordenadas atadas al
   * tamano anterior del avatar: al cambiarlo, el distintivo caia sobre el
   * nombre. En el flujo no puede solaparse con nada. */
  bottom: auto !important;
  left: auto !important;
  margin-top: var(--ac-e-1);
}

/* --- Tarjeta de "Ultimas visitas" y similares ---------------------------- */
.card .card-header + .card-body { padding-top: var(--ac-e-4); }

.card-header h4:only-child,
.card-header .card-title:only-child { margin: 0; }

/* --- El pie no debe pegarse al contenido --------------------------------- */
.main-panel > .footer { margin-top: var(--ac-e-6); }

/* ===========================================================================
 * F8 bis — LEGIBILIDAD DE LAS CIFRAS
 *
 * Orbitron dibuja el cero con barra diagonal. A 28px, medido en pantalla, ese
 * glifo se lee como un recuadro y no como un numero: "Retos: 0" parecia un
 * error de fuente. Es tipografia de display, valida para un rotulo corto, no
 * para el dato que el alumno viene a consultar.
 *
 * Los valores pasan a Roboto con cifras tabulares: todas ocupan el mismo
 * ancho, asi que una columna de numeros queda alineada y un contador que sube
 * no descuadra la tarjeta. Orbitron se reserva para etiquetas de acento.
 * ======================================================================== */
.card.card-stats.bg-dark > .card-header.card-header-icon > .card-title,
.card.card-stats > .card-header > .card-title,
.card.card-stats.bg-dark > .card-header.card-header-icon > h4.card-title,
.card-stats .card-title,
.stats-value,
.academy-kpi__value,
.academy-auth__stat strong,
.academy-operator-stat strong {
  font-family: var(--ac-fuente);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-weight: 600;
  letter-spacing: -0.015em;
}

/* Orbitron se queda donde aporta caracter sin costar legibilidad: rotulos
 * cortos de dos o tres caracteres. */
.academy-auth__brief-grid span,
.sidebar .clock,
.sidebar #clock {
  font-family: var(--ac-fuente-cifras);
}

/* ===========================================================================
 * F9 — COMPOSICION DE PAGINA
 *
 * El login se veia de otra categoria que el resto y la diferencia no era el
 * color: era la COMPOSICION. Esa pantalla abre con antetitulo, titulo grande y
 * una frase de contexto, reparte el espacio con intencion y agrupa las cifras
 * como una unidad. Las demas empezaban directamente con una rejilla de
 * tarjetas de anchos dispares, sin titulo visible, flotando en un lienzo medio
 * vacio.
 *
 * Esta fase lleva esa estructura al resto: encabezado en todas las pantallas,
 * ritmo vertical entre secciones y una rejilla que alinea de verdad.
 * ======================================================================== */

/* --- Encabezado de pagina ------------------------------------------------ */
.ac-page-header {
  margin-bottom: var(--ac-e-6);
  /* Ancho de lectura: un parrafo de 120 caracteres por linea cansa. */
  max-width: 78ch;
}

.ac-page-header__eyebrow {
  margin: 0 0 var(--ac-e-2);
  font-size: var(--ac-t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ac-acento);
}

.ac-page-header__title {
  margin: 0;
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.022em;
  color: var(--ac-txt);
  text-wrap: balance;
}

.ac-page-header__lead {
  margin: var(--ac-e-3) 0 0;
  max-width: 68ch;
  font-size: var(--ac-t-md);
  line-height: 1.6;
  color: var(--ac-txt-2);
}

/* Linea de acento bajo el encabezado: cierra el bloque y separa la entrada del
 * contenido sin recurrir a un <hr> que anadiria ruido semantico. */
.ac-page-header::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin-top: var(--ac-e-4);
  border-radius: 2px;
  background: linear-gradient(90deg, var(--ac-acento), transparent);
}

/* --- Ritmo entre secciones -----------------------------------------------
 * Las filas se apilaban sin separacion y las tarjetas traian margenes inline
 * distintos, asi que nada quedaba alineado con nada. */
.main-panel > .content .row,
main#contenido .row {
  margin-bottom: var(--ac-e-2);
}

.main-panel > .content .row > [class^="col"],
.main-panel > .content .row > [class*=" col"] {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--ac-e-4);
}

/* La tarjeta ocupa toda la altura de su columna: es lo que hace que una fila
 * de tarjetas quede a ras, en vez de escalonada segun su contenido. */
.main-panel > .content .row > [class^="col"] > .card,
.main-panel > .content .row > [class*=" col"] > .card {
  flex: 1 1 auto;
  margin-bottom: 0;
}

/* Neutraliza los anchos y margenes inline heredados de la maqueta original
 * (max-width: 333px en la tarjeta de ultimas visitas, margin-top: 0 sueltos),
 * que impedian cualquier alineacion coherente. */
.main-panel > .content [style*="max-width: 333px"],
.main-panel > .content [style*="max-width:333px"] {
  max-width: none !important;
}

.main-panel > .content .card[style*="margin-top"] { margin-top: 0 !important; }

/* --- Rejilla de indicadores ---------------------------------------------
 * Las cuatro tarjetas de cifras se apilaban en una columna estrecha a la
 * derecha mientras el centro quedaba vacio. En rejilla ocupan el ancho y se
 * leen como un panel de control. */
.ac-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--ac-e-4);
  margin-bottom: var(--ac-e-5);
}

.ac-kpi-grid > .card,
.ac-kpi-grid > [class^="col"] > .card { margin: 0; height: 100%; }

/* --- Seccion con encabezado propio --------------------------------------- */
.ac-section { margin-bottom: var(--ac-e-6); }

.ac-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ac-e-4);
  margin-bottom: var(--ac-e-4);
}

.ac-section__title {
  margin: 0;
  font-size: var(--ac-t-lg);
  font-weight: 600;
  letter-spacing: -0.015em;
}

.ac-section__hint {
  margin: 0;
  font-size: var(--ac-t-sm);
  color: var(--ac-txt-3);
}

/* --- Contenedor de contenido --------------------------------------------
 * Sin limite, en una pantalla ancha el texto se estira hasta ser ilegible y
 * las tarjetas se separan tanto que dejan de leerse como grupo. */
.main-panel > .content > .container-fluid,
main#contenido > .container-fluid {
  max-width: 1500px;
  margin-inline: auto;
}

/* --- Tarjeta de estadistica: mas aire y una linea de acento -------------- */
.card.card-stats {
  position: relative;
  border-top: 2px solid transparent;
}

/* El color de la linea superior viene de la variante que la vista ya declara
 * (card-header-warning, -danger...), asi que distingue tipos de dato sin
 * anadir marcado. */
.card.card-stats:has(.card-header-warning) { border-top-color: var(--ac-aviso); }
.card.card-stats:has(.card-header-danger)  { border-top-color: var(--ac-error); }
.card.card-stats:has(.card-header-success) { border-top-color: var(--ac-exito); }
.card.card-stats:has(.card-header-info)    { border-top-color: var(--ac-info); }
.card.card-stats:has(.card-header-countries),
.card.card-stats:has(.card-header-icon)    { border-top-color: var(--ac-acento); }

.card.card-stats .card-body { padding-top: 0; }

/* --- Listas dentro de tarjetas ------------------------------------------- */
.card .list-group-flush .list-group-item {
  padding: var(--ac-e-3) 0;
  border: 0;
  border-bottom: 1px solid var(--ac-linea);
  background: transparent;
}

.card .list-group-flush .list-group-item:last-child { border-bottom: 0; }

/* --- Estado vacio dentro de una tarjeta ---------------------------------
 * Era una linea de texto suelta y perdida en medio de la tarjeta. */
.card .list-group:empty::after,
.card-body > .empty {
  display: block;
  padding: var(--ac-e-5) var(--ac-e-3);
  color: var(--ac-txt-3);
  font-size: var(--ac-t-sm);
  text-align: center;
}

/* --- Movil ---------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .ac-page-header { margin-bottom: var(--ac-e-5); }
  .ac-page-header__lead { font-size: var(--ac-t-base); }
  .main-panel > .content, main.content { padding-left: var(--ac-e-3); padding-right: var(--ac-e-3); }
}

/* ===========================================================================
 * F10 — CORRECCIONES DE DEFECTOS REPORTADOS Y MEDIDOS
 * ======================================================================== */

/* --- 1. Los iconos se volvian negros al seleccionar ----------------------
 * Defecto que introduje yo: `::selection { color: var(--ac-nivel-0) }` pintaba
 * TODO lo seleccionado en casi negro, glifos de icono incluidos. Al arrastrar
 * el raton sobre un menu o pulsar Ctrl+A, los iconos se perdian por completo
 * contra el fondo oscuro.
 *
 * La solucion no es elegir otro color de texto: es no imponer ninguno. Con un
 * fondo translucido, cada elemento conserva su color y sigue legible, sea texto
 * o icono.
 */
/* Regla retirada. Decía «sin color: el navegador respeta el color original» y
 * eso es falso: omitir `color` no elimina el que declaró la regla anterior de
 * este mismo archivo. El texto seleccionado seguía saliendo casi negro. */

/* Un icono de ligadura no es texto: su contenido literal es la palabra
 * "dashboard" o "favorite". Seleccionarlo mete esa palabra en el portapapeles,
 * asi que copiar un menu pegaba una lista de nombres de iconos. */
.material-icons,
.fas, .far, .fab, .fa,
[class^="fa-"], [class*=" fa-"] {
  -webkit-user-select: none;
  user-select: none;
}

/* --- 2. Las ayudas de los campos parecian errores ------------------------
 * Yii pinta la ayuda de un campo y su mensaje de error en el MISMO contenedor
 * .help-block, asi que mi regla les daba a ambos barra roja y texto rojo. En
 * el registro, "Entre 4 y 32 caracteres" se leia como un fallo antes de haber
 * escrito nada — medido: border-left 3px rgb(251,113,133) sobre una ayuda.
 *
 * Lo que SI distingue a un error: el contenedor lleva .has-error, o el propio
 * mensaje lleva role="alert" (que es lo que ponen los formularios revisados).
 * La ayuda, en cambio, envuelve su texto en un <small>.
 */
.form-group .help-block:not(:empty),
.invalid-feedback {
  /* Estado neutro por defecto: es una ayuda mientras no se demuestre lo
   * contrario. */
  display: block;
  margin-top: var(--ac-e-2);
  padding: 0;
  border-left: 0;
  color: var(--ac-txt-3);
  font-size: var(--ac-t-sm);
  font-weight: 400;
}

/* Error de verdad: barra, color y peso. */
/* La senal de error es la clase que pone el framework, no el estado del grupo.
   Con `.has-error .help-block` se pintaba de rojo TODO lo que hubiera bajo un
   campo invalido, incluida su ayuda. */
.help-block-error:not(:empty),
.invalid-feedback[role="alert"] {
  padding: var(--ac-e-1) 0 var(--ac-e-1) var(--ac-e-3);
  border-left: 3px solid var(--ac-error);
  color: var(--ac-error);
  font-weight: 500;
}

/* Una ayuda que solo contiene un <small> nunca es un error. */
.form-group .help-block:has(> small) {
  padding: 0;
  border-left: 0;
  color: var(--ac-txt-3);
  font-weight: 400;
}

.form-group .help-block small,
.form-group .hint-block small {
  color: var(--ac-txt-3) !important;
  font-size: var(--ac-t-sm);
}

/* --- 3. Enlaces de la barra superior en mayusculas -----------------------
 * material fuerza uppercase en .navbar .nav-link. En espanol convierte
 * "Iniciar sesion" en "INICIAR SESION": mas dificil de leer y sin acentos
 * correctos en algunas fuentes. */
.navbar .nav-link,
.navbar .navbar-nav .nav-link,
.nav-tabs .nav-link,
.navbar-brand {
  text-transform: none;
  letter-spacing: 0;
}

/* --- 4. Captcha ----------------------------------------------------------
 * La imagen viene con fondo blanco y tinta azul, heredada del generador. No se
 * puede recolorear una imagen, pero si enmarcarla para que no aparezca como un
 * recorte pegado sobre la interfaz. */
.field-signupform-captcha img,
img[src*="captcha"] {
  display: block;
  margin-bottom: var(--ac-e-2);
  padding: var(--ac-e-1);
  border: 1px solid var(--ac-linea);
  border-radius: var(--ac-r-sm);
  background: var(--ac-nivel-3);
  cursor: pointer;
}

/* --- 5. Medidor de fuerza de contrasena ---------------------------------
 * El complemento inyecta su veredicto en ingles y sin estilo: "Weak" aparecia
 * como texto suelto en negrita bajo el campo. Se le da forma de indicador y el
 * texto se traduce desde el JS compartido. */
.password-verdict,
.pwstrength_viewport_progress .password-verdict {
  display: inline-block;
  margin-top: var(--ac-e-2);
  padding: 0.15rem 0.55rem;
  border: 1px solid var(--ac-linea);
  border-radius: var(--ac-r-full);
  font-size: var(--ac-t-xs);
  font-weight: 600;
  color: var(--ac-txt-2);
}

.pwstrength_viewport_progress .progress {
  height: 6px;
  margin-top: var(--ac-e-2);
}

/* --- 6. Ancho de lectura de los formularios ------------------------------
 * Un formulario de una sola columna estirado a 740px obliga a barrer la
 * pantalla entre la etiqueta y el campo. */
.site-signup .col-lg-5,
.site-login .col-lg-5,
.site-signup form,
.site-login form {
  max-width: 520px;
}

/* --- 7. Entradilla de las pantallas de acceso ---------------------------
 * `text-primary` pinta un parrafo entero del color de acento, que esta
 * reservado para acciones y enfasis. Un parrafo de contexto va en texto
 * secundario. */
.site-signup > .body-content > p.text-primary,
.site-login > .body-content > p.text-primary {
  color: var(--ac-txt-2) !important;
  font-size: var(--ac-t-md);
  max-width: 62ch;
}

/* --- 8. Aviso de correo del registro ------------------------------------- */
.site-signup p.text-warning {
  padding: var(--ac-e-3) var(--ac-e-4);
  border: 1px solid var(--ac-linea);
  border-left: 3px solid var(--ac-info);
  border-radius: var(--ac-r-sm);
  background: var(--ac-info-suave);
  color: var(--ac-txt-2) !important;
  font-size: var(--ac-t-sm);
  max-width: 62ch;
}

/* --- Mayusculas de la barra superior, con la especificidad correcta -------
 * La regla anterior no ganaba: material-dashboard declara
 * `.navbar .navbar-nav .nav-item .nav-link` (0,4,0) y la mia era (0,3,0).
 * Medido recorriendo document.styleSheets sobre la pagina servida.
 */
.navbar .navbar-nav .nav-item .nav-link,
.navbar .collapse .navbar-nav .nav-item .nav-link,
.sidebar .nav .nav-item .nav-link {
  text-transform: none;
  letter-spacing: 0;
}