:root {
  --login-bg-light: #f5f5f7;
}

body.login-body {
  min-height: max(884px, 100dvh);
  background-color: var(--login-bg-light);
  color: var(--dk-ink, #1f2937);
  font-family: "Inter", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bg-gradient-overlay {
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.4),
    rgba(0, 0, 0, 0.2) 45%,
    rgba(0, 145, 234, 0.4)
  );
  mix-blend-mode: multiply;
}

.dark .bg-gradient-overlay {
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.7),
    rgba(0, 0, 0, 0.55) 60%,
    rgba(0, 0, 0, 0.6)
  );
}

.bg-blur-overlay {
  background: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(1px);
}

.glass-card {
  background: rgb(var(--dk-rgb-surface, 255 255 255) / 0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgb(var(--dk-rgb-border, 255 255 255) / 0.6);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.12);
}

.dark .glass-card {
  background: rgba(17, 17, 19, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.card-max {
  max-width: 28rem;
}

.text-xs {
  font-size: 0.75rem;
}

.tracking-widest {
  letter-spacing: 0.25em;
}

.tracking-wide {
  letter-spacing: 0.08em;
}

.input-underline {
  background-color: transparent;
  border-bottom: 1px solid var(--dk-border, #d1d1d6);
  transition: border-color 0.3s ease;
}

.dark .input-underline {
  border-color: #4b5563;
}

.input-underline:focus-within {
  border-color: var(--bs-primary);
}

.login-input {
  color: var(--dk-ink, #111827);
}

.login-input::placeholder {
  color: var(--dk-muted, #9ca3af);
}

.dark .login-input {
  color: #f9fafb;
}

.dark .login-input::placeholder {
  color: #9ca3af;
}

.login-input:focus {
  outline: none;
  box-shadow: none;
}

/* Separación interna del texto respecto al borde en los campos del login.
   Acotado a los bloques de /login: reset_password conserva su px-0. */
#loginDiv .login-input,
#forgotDiv .login-input {
  padding-left: .625rem;
  padding-right: .625rem;
}

.btn-login {
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(10, 132, 255, 0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-login:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(10, 132, 255, 0.25);
}

.btn-login:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(10, 132, 255, 0.28);
}

.login-link {
  transition: color 0.2s ease;
}

.login-link:hover {
  color: var(--bs-primary);
}

.dark .login-link:hover {
  color: #ffffff;
}

/* Logo del panel de /login: ancho fijo y alto según la proporción real de la
   imagen (el logo es algo más alto que ancho; forzarlo cuadrado lo achataba). */
.login-logo {
  width: 40px;
  height: auto;
}

.login-icon-btn {
  color: var(--dk-muted, #9ca3af);
  transition: color 0.2s ease;
}

.login-icon-btn:hover {
  color: var(--dk-soft, #4b5563);
}

.dark .login-icon-btn:hover {
  color: #e5e7eb;
}

.login-link .material-icons-round {
  font-size: 1rem;
}

.password-rules {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.password-rule {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--dk-muted, #6b7280);
  font-size: 0.75rem;
}

.password-rule .rule-icon {
  font-size: 1rem;
  color: var(--dk-muted, #9ca3af);
}

.password-rule.is-valid {
  color: var(--dk-success, #059669);
}

.password-rule.is-valid .rule-icon {
  color: var(--dk-success, #10b981);
}

.dark .password-rule {
  color: #d1d5db;
}

.dark .password-rule .rule-icon {
  color: #9ca3af;
}

.dark .password-rule.is-valid {
  color: #34d399;
}

.dark .password-rule.is-valid .rule-icon {
  color: #34d399;
}

/* ==========================================================================
   /login: accesibilidad y maquetación. Todo va bajo body.login-page (clase que
   solo pone el controller del login) para no alterar /reset-password, que
   comparte esta hoja.
   ========================================================================== */

/* --- Scroll en pantallas bajas --------------------------------------------- */
/* Anula el min-height de 884px de body.login-body: junto con overflow-hidden
   recortaba el formulario sin permitir scroll. */
body.login-page {
  min-height: 100vh;
  min-height: 100dvh;

  /* Azul de la marca: el del logotipo ICNS (#006aa2). Contraste AA: 5,86:1 con
     texto blanco y 4,92:1 como texto sobre la tarjeta en el peor caso. */
  --bs-primary: #006aa2;
  --bs-primary-rgb: 0, 106, 162;
}

/* En oscuro el azul se usa como texto sobre fondo casi negro: variante clara
   del mismo tono, 5,09:1. */
.dark body.login-page {
  --bs-primary: #4aa8d8;
  --bs-primary-rgb: 74, 168, 216;
}

.login-shell {
  min-height: 100vh;
  min-height: 100dvh;
}

.login-shell__main {
  flex: 1 0 auto;
  padding-block: 2rem;
}

/* --- Botones primarios ----------------------------------------------------- */
/* El fondo del botón no sale de --bs-primary sino de las variables propias de
   Bootstrap: se fija aquí en el mismo azul. En oscuro no cambia, porque su
   contraste es contra el texto blanco, no contra la tarjeta. */
.login-page .btn-primary {
  --bs-btn-bg: #006aa2;
  --bs-btn-border-color: #006aa2;
  --bs-btn-hover-bg: #005a8a;
  --bs-btn-hover-border-color: #005a8a;
  --bs-btn-active-bg: #004d76;
  --bs-btn-active-border-color: #004d76;
  --bs-btn-disabled-bg: #006aa2;
  --bs-btn-disabled-border-color: #006aa2;
  --bs-btn-disabled-opacity: .75;
}

/* --- Campos con etiqueta flotante ------------------------------------------ */
/* Línea inferior #7c838d: 3,21:1 sobre la tarjeta clara y 3,54:1 sobre la
   oscura en el peor caso (mínimo 3:1). El mismo valor sirve en los dos modos,
   por eso va sin token --dk-*. */
.login-page .input-underline {
  border-bottom-color: #7c838d;
}

/* Foco visible: la línea pasa a azul y dobla su grosor sin mover el diseño. */
.login-page .input-underline:focus-within {
  border-bottom-color: var(--bs-primary);
  box-shadow: 0 1px 0 0 var(--bs-primary);
}

.login-field {
  position: relative;
}

.login-page .login-field .login-input {
  height: auto;
  padding: 1.35rem .625rem .35rem;
  /* 16px: por debajo, iOS hace zoom automático al enfocar el campo. */
  font-size: 1rem;
  line-height: 1.4;
}

/* Hueco a la derecha para el botón del ojo. */
.login-page .login-field--accion .login-input {
  padding-right: 3rem;
}

.login-label {
  position: absolute;
  top: 1.35rem;
  left: .625rem;
  margin: 0;
  /* 5,85:1 sobre la tarjeta clara en el peor caso. */
  color: var(--dk-soft, #525a66);
  font-size: 1rem;
  line-height: 1.4;
  pointer-events: none;
  transition: top .15s ease, font-size .15s ease, color .15s ease;
}

.dark .login-label {
  color: #aeb4bd;
}

/* Etiqueta arriba al enfocar, con texto escrito o con autorrelleno. El
   placeholder es un espacio para que :placeholder-shown detecte el vacío. */
.login-input:focus ~ .login-label,
.login-input:not(:placeholder-shown) ~ .login-label,
.login-input:-webkit-autofill ~ .login-label {
  top: .35rem;
  font-size: .75rem;
  line-height: 1.2;
}

.login-input:focus ~ .login-label {
  color: var(--bs-primary);
}

/* --- Botón del ojo ---------------------------------------------------------- */
.login-page .login-icon-btn {
  position: absolute;
  top: 50%;
  right: .25rem;
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transform: translateY(-50%);
  /* 4,06:1 sobre la tarjeta clara en el peor caso (mínimo 3:1 para iconos). */
  color: #6b7280;
}

.login-page .login-icon-btn:hover {
  color: #374151;
}

.dark .login-page .login-icon-btn {
  color: #9ca3af;
}

.dark .login-page .login-icon-btn:hover {
  color: #e5e7eb;
}

.login-page .login-icon-btn:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: -2px;
  box-shadow: none;
  border-radius: 10px;
}

/* El ojo solo aparece cuando la contraseña tiene algún carácter. El campo usa
   placeholder=" ", así que :placeholder-shown equivale a "vacío". Con display:none
   el botón oculto tampoco recibe el foco del tabulador. El autorrelleno del
   navegador cuenta como contenido. */
.login-page .login-input:placeholder-shown ~ .login-icon-btn {
  display: none;
}

.login-page .login-input:-webkit-autofill ~ .login-icon-btn {
  display: inline-flex;
}

/* --- Enlaces secundarios (ahora botones) ------------------------------------ */
/* Área táctil de 44px de alto y texto a 14px (antes 12px). */
.login-page .login-link {
  width: 100%;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .5rem .75rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--bs-secondary-color);
  font-size: .875rem;
  font-weight: 500;
}

.login-page .login-link:hover {
  color: var(--bs-primary);
  background: rgba(var(--bs-primary-rgb), .07);
}

.login-page .login-link:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

/* --- Iconos SVG (sustituyen a la fuente Material Icons en el login) ------------ */
.login-svg {
  display: block;
  flex: 0 0 auto;
}

.login-page .login-link .login-svg {
  width: 1.125rem;
  height: 1.125rem;
}

.login-page .login-icon-btn .login-svg {
  width: 1.25rem;
  height: 1.25rem;
}

.login-svg[hidden] {
  display: none;
}

/* --- Jerarquía -------------------------------------------------------------- */
.login-title {
  margin: 0;
  color: var(--dk-ink, #111827);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
}

.dark .login-title {
  color: #f3f4f6;
}

/* "¿Has olvidado la contraseña?" pegado bajo el campo de contraseña. */
.login-forgot-row {
  display: flex;
  justify-content: flex-end;
  margin-top: -.5rem;
}

.login-page .login-link--inline {
  width: auto;
  padding-inline: .5rem;
  font-size: .8125rem;
}

/* --- Aviso legal y privacidad ------------------------------------------------ */
.login-legal {
  margin-top: 1.25rem;
  font-size: .8125rem;
  color: var(--bs-secondary-color);
}

.login-legal a {
  display: inline-block;
  padding: .25rem .375rem;
  color: var(--bs-secondary-color);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.login-legal a:hover {
  color: var(--bs-primary);
}

.login-legal a:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 1px;
  border-radius: 4px;
}

/* --- Rendimiento del efecto cristal ------------------------------------------ */
/* La tarjeta es un 92% opaca: el desenfoque de 18px apenas se veía y costaba GPU
   en móviles modestos. Se quita en el login sin cambiar el color de la tarjeta. */
.login-page .glass-card {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* --- Copyright y www.icns.es ------------------------------------------------ */
/* Bloque oscuro translúcido con las dos líneas: texto blanco a 5,57:1 incluso con
   zona blanca de la foto detrás (mínimo AA 4,5:1). Igual en ambos modos, por eso
   va sin token --dk-*. */
.login-copy-chip {
  display: inline-block;
  padding: .375rem .875rem .25rem;
  border-radius: .75rem;
  background: rgba(15, 23, 42, .65);
  color: #ffffff;
  line-height: 1.5;
}

/* Enlace: mismo blanco que el texto (5,57:1) y al menos 24px de alto como área
   táctil (WCAG 2.5.8). Sin subrayado en reposo: va solo en su línea y el texto es
   una dirección web, así que no depende únicamente del color (WCAG 1.4.1). */
.login-copy-web {
  display: inline-block;
  min-height: 24px;
  padding: .1875rem .5rem;
  color: #ffffff;
  text-decoration: none;
}

/* Al pasar el ratón se subraya, como única señal de que es un enlace. */
.login-copy-web:hover {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Foco visible: contorno blanco sobre la franja oscura (5,57:1, mínimo 3:1). */
.login-copy-web:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 1px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .login-label {
    transition: none;
  }
}