/* ============================================================
   Login de Portal CORE — COREDUCACIÓN
   Colores de marca y de estado desde core/tokens.css (compartidos con
   el Portal y las landings); fondos y degradados son propios del login.
   ============================================================ */

:root {
  --pr: var(--brand-magenta-600);
  --pr-dark: var(--brand-magenta-700);
  --pr-light: var(--brand-magenta-400);
  --sec: var(--brand-orange-500);
  --sec-dark: var(--brand-orange-700);
  --sec-light: #f47c55;

  --ink: #2b2038;
  --ink-soft: #6b6478;
  --bg: #f6f5f9;
  --surface: #ffffff;
  --border: #e8e5f0;

  --ok: var(--success-text);
  --ok-bg: var(--success-subtle);
  --warn: var(--warning-text);
  --warn-bg: var(--warning-subtle);
  --danger-bg: var(--danger-subtle);
  --info: var(--info-text);
  --info-bg: var(--info-subtle);

  --radius: 14px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 3px rgba(43, 32, 56, 0.06), 0 1px 2px rgba(43, 32, 56, 0.08);
  --shadow-md: 0 8px 24px rgba(43, 32, 56, 0.10);
  --shadow-lg: 0 16px 40px rgba(43, 32, 56, 0.16);
  --gradient-brand: linear-gradient(135deg, var(--pr) 0%, #b8215f 45%, var(--sec) 100%);

  /* Variante sobria del degradado de marca: mismos tonos, más profundos/
     apagados. Se usa en superficies grandes (fondo del login, panel
     decorativo) donde el degradado a máxima saturación resulta "candy". El
     --gradient-brand original se deja intacto para botones y acentos chicos. */
  --gradient-brand-deep: linear-gradient(150deg, var(--pr-dark) 0%, var(--pr) 55%, var(--sec-dark) 100%);
  --auth-bg-top: #f8f7fb;
  --auth-bg-bottom: #ece9f2;

  /* Login — panel oscuro/tecnológico (tonos más magenta/rosados en vez de morado oscuro) */
  --auth-dark-1: #2a1122;
  --auth-dark-2: #421532;
  --auth-dark-3: #561841;
}

/* ---- Base ---- */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--pr-light) transparent;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--pr-light);
  border-radius: 999px;
  transition: background .15s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--pr);
}

::-webkit-scrollbar-corner {
  background: transparent;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  background-color: var(--bg);
  color: var(--ink);
  animation: fadeInPage .35s ease both;
}

@keyframes fadeInPage {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}

a {
  color: var(--pr);
}

a:hover {
  color: var(--pr-dark);
}

/* Los controles heredan la tipografía (antes lo hacía el reboot de Bootstrap). */
input, button, select, textarea{ font: inherit; }

/* Botones y alertas: los de core/components.css (.btn, .btn-primary,
   .alert). Acá ya no se sobreescriben (antes pisaban a Bootstrap). */

/* ---- Login: entrada al ecosistema Portal Core ----
   El agua de fondo cubre TODA la pantalla (#authWaterCanvas, ver
   water-bg.js) para que un monitor grande no se vea con marco vacío
   alrededor de la tarjeta — los estados finales de docente siguen
   usando .status-shell, sin tocar. El degradado de acá abajo es solo
   el respaldo mientras el canvas carga o si JS falla. */
.auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  position: relative;
  background: linear-gradient(160deg, var(--auth-dark-1) 0%, var(--auth-dark-2) 55%, var(--sec-dark) 130%);
}

body[data-tema="oscuro"] .auth-shell {
  background: linear-gradient(160deg, #180914 0%, #301025 55%, #61220f 130%);
}

body[data-tema="oscuro"] .core-auth-form-panel {
  background: #1d1827;
}

body[data-tema="oscuro"] .core-auth-form h1 {
  color: #fff;
}

body[data-tema="oscuro"] .core-auth-form-sub,
body[data-tema="oscuro"] .core-auth-field label {
  color: #c9c2d5;
}

body[data-tema="oscuro"] .core-auth-field input {
  border-color: #514762;
  background: #2a2337;
  color: #fff;
}

body[data-tema="oscuro"] .core-auth-field input::placeholder {
  color: #aaa1b8;
}

body[data-tema="oscuro"] .core-auth-google {
  border-color: #514762;
  background: #2a2337;
  color: #fff;
}

body[data-tema="oscuro"] .core-auth-google:hover {
  background: #352d45;
}

.auth-water-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* ============================================================
   DASHBOARD — barra lateral + topbar (estilo panel administrativo)
   ============================================================ */
:root {
  --sidebar-w: 260px;
  --topbar-h: 64px;
}

/* ============================================================
   Sidebar COLAPSADA (solo íconos) — desktop, estado persistido
   en localStorage. Ver #btnColapsarSidebar / #btnExpandirSidebar.
   ============================================================ */
:root {
  --sidebar-w-collapsed: 76px;
}

/* ---- Login: la puerta de entrada a Portal Core ----
   Tarjeta partida en dos: panel visual (mascota CORE + identidad de marca,
   fondo oscuro/tecnológico) y panel de formulario (claro, minimalista).
   overflow: visible en la tarjeta y en el panel visual a propósito — es lo
   que permite que la mascota sobresalga por encima del borde superior. */
.core-auth-card {
  position: relative;
  display: flex;
  width: min(96vw, 1040px);
  min-height: min(88vh, 620px);
  border-radius: 20px;
  overflow: visible;
  box-shadow: 0 24px 60px -20px rgba(43, 32, 56, .28), 0 4px 18px rgba(43, 32, 56, .1);
  animation: coreAuthCardIn .5s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes coreAuthCardIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Panel visual: cristal esmerilado sobre el agua de #authWaterCanvas +
   mascota opcional. background-color es el respaldo si el navegador no
   soporta backdrop-filter (Firefox < 103, algunos navegadores viejos). ── */
.core-auth-visual {
  position: relative;
  flex: 0 0 42%;
  overflow: hidden;
  border-radius: 20px 0 0 20px;
  background-color: rgba(21, 10, 36, .62);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 3rem 2.5rem;
  color: #fff;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .core-auth-visual {
    background-color: rgba(21, 10, 36, .42);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    backdrop-filter: blur(22px) saturate(150%);
  }
}

/* Textura discreta encima del cristal: rejilla de puntos que se desvanece
   hacia abajo, aporta profundidad sin competir con el agua de fondo. */
.core-auth-visual-pattern {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: radial-gradient(rgba(255, 255, 255, .14) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(200deg, black, transparent 65%);
  mask-image: linear-gradient(200deg, black, transparent 65%);
  pointer-events: none;
}

/* Mascota "Core": recorte transparente (sin fondo propio) detrás del
   bloque de texto — por eso el copy lleva text-shadow, para seguir siendo
   legible encima de la imagen. */
.core-auth-mascot {
  position: absolute;
  top: 1.75rem;
  left: 50%;
  transform: translateX(-50%);
  /* Anclada arriba y con alto máximo que deja libre el bloque de texto de
     abajo (logo + kicker + tagline + subtítulo ≈ 16rem): antes iba centrada
     y tapaba el "PORTAL CORE". */
  width: auto;
  max-width: min(92%, 300px);
  max-height: calc(100% - 17rem);
  object-fit: contain;
  z-index: 2;
  filter: drop-shadow(0 18px 30px rgba(4, 1, 10, .5));
  pointer-events: none;
}

.core-auth-visual-copy {
  position: relative;
  z-index: 3;
  text-shadow: 0 2px 12px rgba(8, 3, 18, .45);
}

.core-auth-visual-mark {
  width: 40px;
  height: 40px;
  display: block;
  margin-bottom: 1.1rem;
}

.core-auth-kicker {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sec-light);
  margin-bottom: .75rem;
}

.core-auth-tagline {
  font-size: 1.55rem;
  line-height: 1.3;
  font-weight: 700;
  color: #fff;
  margin: 0 0 .65rem;
}

.core-auth-visual-sub {
  font-size: .88rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, .68);
  margin: 0;
  max-width: 26ch;
}

/* ── Panel de formulario ── */
.core-auth-form-panel {
  flex: 1 1 58%;
  background: var(--surface);
  border-radius: 0 20px 20px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /*padding: 3rem 3.25rem;*/
}

.core-auth-form {
  width: 100%;
  max-width: 380px;
  animation: coreFormIn .5s .1s ease both;
}

@keyframes coreFormIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.core-auth-logo {
    display: flex;
    width: 20%;
    height: 20%;
    margin-bottom: 1.1rem;
    margin-left: auto;
    margin-right: auto;
}

.core-auth-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.core-auth-form h1 {
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 .35rem;
}

.core-auth-form-sub {
  color: var(--ink-soft);
  font-size: .92rem;
  margin: 0 0 1.6rem;
  line-height: 1.4;
}

.core-auth-field {
  margin-bottom: 1.1rem;
  text-align: left;
}

.core-auth-field label {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: .4rem;
}

.core-auth-field input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fdfcff;
  padding: .9rem 1rem;
  font-size: 1rem;
  color: var(--ink);
  transition: border-color .18s ease, box-shadow .18s ease;
}

.core-auth-field input::placeholder {
  color: var(--ink-soft);
  opacity: .7;
}

.core-auth-field input:focus {
  outline: none;
  border-color: var(--pr-light);
  box-shadow: 0 0 0 .2rem rgba(158, 31, 99, .15);
}

/* Estado de error inline (validación en JS) — mismo rojo institucional
   (--danger) que ya usan las alertas del resto del sistema. */
.core-auth-field input.field-invalid {
  border-color: var(--danger);
}

.core-auth-field input.field-invalid:focus {
  border-color: var(--danger);
  box-shadow: 0 0 0 .2rem rgba(214, 56, 89, .15);
}

.field-error {
  align-items: center;
  gap: .4rem;
  width: 100%;
  margin: .35rem 0 0;
  padding: 0;
  color: var(--danger);
  font-size: .82rem;
  font-weight: 500;
  text-align: left;
}

.field-error:not([hidden]) {
  display: flex;
}

/* Input de contraseña + botón de mostrar/ocultar */
.input-with-action {
  position: relative;
  width: 100%;
}

.input-with-action input {
  padding-right: 2.9rem;
}

.input-toggle-visibility {
  position: absolute;
  top: 50%;
  right: .4rem;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border: none;
  background: transparent;
  border-radius: 8px;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}

.input-toggle-visibility:hover {
  background: var(--bg);
  color: var(--ink);
}

.core-auth-submit {
  width: 100%;
  margin-top: .3rem;
  min-height: 52px;
  font-size: 1rem;
  border-radius: var(--radius-sm);
}

.core-auth-submit:hover{ box-shadow: 0 6px 16px rgba(158, 31, 99, 0.28); }
.core-auth-submit:active{ transform: translateY(1px); }

/* Error del servidor (credenciales): alerta del sistema junto al formulario. */
.core-auth-alert{ margin: 0 0 1rem; font-size: .9rem; }

/* Estados del botón "Ingresar": label normal vs. "Ingresando…" + spinner,
   alternados por JS mientras se espera la respuesta del servidor. */
.btn-label:not([hidden]) {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.btn-loading:not([hidden]) {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}

.btn-spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2.5px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  animation: slide-loading-spin .7s linear infinite;
}

.core-auth-divider {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 1.35rem 0;
  color: var(--ink-soft);
  font-size: .8rem;
}

.core-auth-divider::before,
.core-auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Botón de Google: alternativa secundaria, respeta las convenciones de
   marca de Google (fondo blanco, texto gris oscuro, ícono multicolor) en
   vez de convertirse en un segundo botón primario. */
.core-auth-google {
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  width: 100%;
  min-height: 50px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
  color: #3c4043;
  font-weight: 600;
  font-size: .93rem;
  cursor: pointer;
  transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}

.core-auth-google:hover {
  box-shadow: 0 4px 14px rgba(43, 32, 56, .12);
  border-color: #d6d3de;
}

.core-auth-google:active {
  transform: translateY(1px);
}

/* ── Overlay de carga tras enviar el login ──
   El formulario se envía normal (sin AJAX): esto solo cubre la tarjeta con
   un spinner mientras el navegador espera la redirección del servidor, en
   vez de dejar el clic en "Ingresar" sin ninguna señal de que algo pasó. */
.slide-loading {
  position: absolute;
  inset: 0;
  z-index: 300;
  background: var(--surface);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.slide-loading-spinner {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 4px solid var(--border);
  border-top-color: var(--pr);
  animation: slide-loading-spin .7s linear infinite;
}

.slide-loading p {
  color: var(--ink-soft);
  font-weight: 600;
  margin: 0;
}

@keyframes slide-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Foco visible consistente (no el outline azul por defecto del navegador). */
.core-auth-card :is(button, a, input):focus-visible {
  outline: 2px solid var(--pr-light);
  outline-offset: 3px;
  border-radius: 10px;
}

/* ── Tablet: el panel visual cede algo de ancho al formulario en vez de
   mantener la proporción de escritorio a la fuerza. ── */
@media (max-width: 900px) {
  .core-auth-visual {
    flex-basis: 36%;
    padding: 2rem 1.75rem;
  }

  .core-auth-tagline {
    font-size: 1.35rem;
  }

  .core-auth-form-panel {
    padding: 2.5rem 2rem;
  }
}

/* ── Móvil: la composición de dos columnas no cabe cómoda por debajo de
   este ancho — el panel visual pasa a ser una franja superior compacta
   y el formulario se apila debajo, a todo ancho. ── */
@media (max-width: 720px) {
  .auth-shell {
    padding: 0;
    align-items: flex-start;
  }

  .core-auth-card {
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
    border-radius: 0;
    box-shadow: none;
  }

  .core-auth-visual {
    flex: 0 0 auto;
    min-height: 230px;
    border-radius: 0;
    padding: 2rem 1.5rem;
    align-items: center;
    justify-content: center;
  }

  .core-auth-visual-copy {
    text-align: center;
  }

  .core-auth-visual-mark {
    margin: 0 auto .9rem;
  }

  .core-auth-visual-sub {
    max-width: none;
    margin: 0 auto;
  }

  /* La mascota ya trae su propio "¡Bienvenido!" pintado en el PNG — en la
     franja compacta de móvil, mostrarla junto al kicker/tagline los hace
     pelear por el mismo espacio y queda ilegible. Se prioriza el texto. */
  .core-auth-mascot {
    display: none;
  }

  .core-auth-form-panel {
    border-radius: 0;
    padding: 2rem 1.5rem 2.5rem;
    flex: 1 1 auto;
  }

  .slide-loading {
    border-radius: 0;
  }
}

@media (prefers-reduced-motion: reduce) {

  .core-auth-card,
  .core-auth-form {
    animation: none !important;
    transition: none !important;
  }
}

@keyframes notifToastIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Botón claro/oscuro del login (usa core/tema.js, igual que el Portal) ── */
.auth-theme-toggle {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  background: rgba(21, 10, 36, .55);
  color: #fff;
  font-size: 17px;
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease;
}
.auth-theme-toggle:hover { background: rgba(158, 31, 99, .85); transform: translateY(-1px); }
.auth-theme-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.auth-theme-icon-oscuro,
body[data-tema="oscuro"] .auth-theme-icon-claro { display: none; }
body[data-tema="oscuro"] .auth-theme-icon-oscuro { display: inline; }