/* ============================================================
   IMPERIO ALGORÍTMICO — ZONA DE ALUMNOS
   Mismos tokens de marca que el sitio principal.
   ============================================================ */

:root {
  --negro: #0d0304;
  --negro-2: #150506;
  --granate: #1e0709;
  --granate-claro: #2c0b0e;
  --rojo: #e84547;
  --rojo-coral: #f2555a;
  --rojo-claro: #ff8a8d;
  --rojo-profundo: #5c1015;
  --borde: rgba(232, 69, 71, 0.28);
  --blanco: #ffffff;
  --texto: #e9dfe0;
  --texto-suave: #b9a6a8;
  --verde: #4ade80;
  --ambar: #fbbf24;

  --fondo-claro: #fbf9f9;
  --fondo-claro-2: #f4efef;
  --tinta: #1c0e0f;
  --tinta-suave: #6d595b;
  --rojo-tinta: #c9333a;
  --borde-claro: rgba(201, 51, 58, 0.22);

  --radio: 16px;
  --ancho: 900px;
  --f-cuerpo: "Poppins", system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--f-cuerpo);
  background: var(--fondo-claro);
  color: var(--tinta);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.92em; }
[hidden] { display: none !important; }

.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 24px; }

.kicker {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rojo-coral);
}

/* ============================ BOTONES ============================ */

.boton {
  font-family: inherit;
  font-weight: 600;
  font-size: 15px;
  border: none;
  border-radius: 999px;
  padding: 14px 28px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  display: inline-block;
  text-decoration: none;
  text-align: center;
}

.boton--principal {
  background: linear-gradient(135deg, var(--rojo) 0%, var(--rojo-profundo) 100%);
  color: var(--blanco);
  width: 100%;
  box-shadow: 0 6px 20px rgba(232, 69, 71, 0.28);
}
.boton--principal:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(232, 69, 71, 0.38); }
.boton--principal:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.boton--fantasma {
  background: transparent;
  color: var(--texto);
  border: 1px solid var(--borde);
  padding: 8px 18px;
  font-size: 14px;
}
.boton--fantasma:hover { background: rgba(232, 69, 71, 0.12); color: var(--blanco); }

.boton--mini {
  background: var(--rojo-tinta);
  color: var(--blanco);
  padding: 7px 16px;
  font-size: 13px;
  flex-shrink: 0;
}
.boton--mini:hover { background: var(--rojo); }
.boton--mini.copiado { background: #15803d; }

/* ============================ LOGIN ============================ */

.pantalla--login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  background:
    radial-gradient(ellipse 120% 90% at 50% -10%, rgba(140, 25, 30, 0.35), transparent 60%),
    radial-gradient(ellipse 80% 60% at 85% 100%, rgba(92, 16, 21, 0.4), transparent 70%),
    var(--negro);
}

.login-caja {
  width: 100%;
  max-width: 440px;
  background: var(--granate);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 44px 36px 32px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.login-logo { width: 190px; margin: 0 auto 28px; }
.login-titulo { color: var(--blanco); font-size: 26px; font-weight: 700; margin: 8px 0 10px; line-height: 1.25; }
.login-sub { color: var(--texto-suave); font-size: 15px; margin-bottom: 28px; }

.campo { display: block; text-align: left; margin-bottom: 18px; }

.campo-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--texto);
  margin-bottom: 7px;
}

.campo input {
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  color: var(--blanco);
  background: var(--negro);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 13px 15px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.campo input::placeholder { color: #7a6668; }
.campo input:focus {
  outline: none;
  border-color: var(--rojo);
  box-shadow: 0 0 0 3px rgba(232, 69, 71, 0.18);
}

.campo-password { position: relative; display: block; }
.campo-password input { padding-right: 66px; }

.ver-password {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--rojo-claro);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 10px;
}
.ver-password:hover { color: var(--blanco); }

.login-pie { margin-top: 22px; font-size: 14px; color: var(--texto-suave); }
.login-pie a { color: var(--rojo-claro); text-decoration: none; font-weight: 600; }
.login-pie a:hover { text-decoration: underline; }

/* ============================ AVISOS ============================ */

.aviso {
  border-radius: 12px;
  padding: 13px 16px;
  font-size: 14px;
  margin-bottom: 18px;
  text-align: left;
}

.aviso--error {
  background: rgba(232, 69, 71, 0.14);
  border: 1px solid rgba(232, 69, 71, 0.45);
  color: var(--rojo-claro);
}

.aviso--info {
  background: rgba(201, 51, 58, 0.07);
  border: 1px solid var(--borde-claro);
  color: var(--tinta-suave);
  margin-top: 22px;
  margin-bottom: 0;
}
.aviso--info strong { color: var(--tinta); }

/* ========================== CABECERA ========================== */

.cabecera {
  background: var(--negro);
  border-bottom: 1px solid var(--borde);
  position: sticky;
  top: 0;
  z-index: 20;
}

.cabecera-inner {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.cabecera-logo { width: 150px; }
.cabecera-derecha { display: flex; align-items: center; gap: 14px; }
.cabecera-usuario { color: var(--texto-suave); font-size: 14px; }

/* ========================= HERO PANEL ========================= */

.hero-panel {
  background:
    radial-gradient(ellipse 120% 90% at 50% -20%, rgba(140, 25, 30, 0.35), transparent 60%),
    var(--negro);
  color: var(--blanco);
  padding: 44px 0 40px;
  text-align: center;
}

.hero-titulo { font-size: 32px; font-weight: 700; margin: 8px 0 20px; }

.estado-licencia {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--granate-claro);
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: 9px 20px;
  font-size: 14px;
  color: var(--texto);
}

.punto { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.punto--verde { background: var(--verde); box-shadow: 0 0 10px var(--verde); }
.punto--ambar { background: var(--ambar); box-shadow: 0 0 10px var(--ambar); }
.punto--rojo  { background: var(--rojo);  box-shadow: 0 0 10px var(--rojo); }

/* =========================== BLOQUES =========================== */

.contenedor--panel { padding-top: 44px; padding-bottom: 60px; }

.bloque {
  background: var(--blanco);
  border: 1px solid var(--borde-claro);
  border-radius: var(--radio);
  padding: 32px;
  margin-bottom: 24px;
  box-shadow: 0 2px 14px rgba(28, 14, 15, 0.05);
  scroll-margin-top: 84px;   /* la cabecera es sticky: evita que tape el título */
}

.bloque-titulo {
  font-size: 20px;
  font-weight: 700;
  color: var(--tinta);
  margin-bottom: 12px;
}

.bloque-texto { color: var(--tinta-suave); font-size: 15px; margin-bottom: 16px; }
.bloque-texto:last-child { margin-bottom: 0; }
.bloque-texto strong { color: var(--tinta); }
.bloque-texto code, .lista-problemas code {
  background: var(--fondo-claro-2);
  border: 1px solid var(--borde-claro);
  border-radius: 5px;
  padding: 1px 6px;
  color: var(--rojo-tinta);
}

.bloque--soporte { background: var(--fondo-claro-2); text-align: center; }
.bloque--soporte .boton--principal { max-width: 320px; margin-top: 8px; }

/* ========================== DESCARGAS ========================== */

.descargas { display: grid; gap: 12px; }

.descarga {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--fondo-claro-2);
  border: 1px solid var(--borde-claro);
  border-radius: 12px;
  padding: 16px 18px;
  text-align: left;
}

.descarga-icono {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--rojo) 0%, var(--rojo-profundo) 100%);
  color: var(--blanco);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  flex-shrink: 0;
}

.descarga-cuerpo { flex: 1; min-width: 0; }
.descarga-nombre { font-weight: 600; font-size: 15px; color: var(--tinta); }
.descarga-desc { font-size: 13px; color: var(--tinta-suave); }

/* ============================ COPIAR ============================ */

.copiar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--negro);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 12px 12px 12px 16px;
  margin-bottom: 16px;
  overflow: hidden;
}

.copiar code {
  color: var(--rojo-claro);
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: thin;
}

.copiar-etiqueta {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-suave);
  flex-shrink: 0;
}

.credenciales { display: grid; gap: 12px; }

.credencial-nota {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--fondo-claro-2);
  border: 1px solid var(--borde-claro);
  border-radius: 10px;
  padding: 12px 16px;
}
.credencial-nota .copiar-etiqueta { color: var(--tinta-suave); }
.credencial-nota p { font-size: 14px; color: var(--tinta-suave); margin: 0; }

/* ============================ TABLA ============================ */

.tabla-scroll { overflow-x: auto; margin-bottom: 16px; }

.tabla { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 460px; }

.tabla th {
  background: var(--granate);
  color: var(--blanco);
  font-weight: 600;
  text-align: left;
  padding: 11px 14px;
  white-space: nowrap;
}
.tabla th:first-child { border-radius: 8px 0 0 0; }
.tabla th:last-child { border-radius: 0 8px 0 0; }

.tabla td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--borde-claro);
  color: var(--tinta-suave);
}
.tabla tr:last-child td { border-bottom: none; }
.tabla td:first-child { font-weight: 600; color: var(--tinta); }

/* ========================== PROBLEMAS ========================== */

.lista-problemas { list-style: none; text-align: left; margin-bottom: 26px; }

.lista-problemas li {
  position: relative;
  padding: 10px 0 10px 22px;
  font-size: 14px;
  color: var(--tinta-suave);
  border-bottom: 1px solid var(--borde-claro);
}
.lista-problemas li:last-child { border-bottom: none; }
.lista-problemas li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 19px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rojo);
}
.lista-problemas strong { color: var(--tinta); }

/* ============================= PIE ============================= */

.pie {
  background: var(--negro);
  color: var(--texto-suave);
  text-align: center;
  padding: 34px 0;
  font-size: 14px;
}

.pie-legal { font-size: 12.5px; margin-top: 8px; opacity: 0.75; max-width: 560px; margin-inline: auto; }
.pie-enlaces { margin-top: 14px; display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.pie-enlaces a { color: var(--rojo-claro); text-decoration: none; font-size: 13px; }
.pie-enlaces a:hover { text-decoration: underline; }

/* =========================== RESPONSIVE =========================== */

@media (max-width: 620px) {
  .login-caja { padding: 34px 24px 26px; }
  .login-titulo { font-size: 23px; }
  .hero-titulo { font-size: 26px; }
  .bloque { padding: 24px 20px; }
  .cabecera-logo { width: 124px; }
  .cabecera-usuario { display: none; }

  .descarga { flex-wrap: wrap; }
  .descarga .boton--mini { width: 100%; }

  .copiar { flex-wrap: wrap; }
  .copiar code { width: 100%; flex-basis: 100%; }
  .copiar .boton--mini { width: 100%; }
}