/* ==========================================================================
   Ser Escritura — login.css
   Pantalla de acceso a medida para "Sistema de enseñanza" (contraseña nativa WP).
   Se carga solo cuando la página protegida pide la clave.
   ========================================================================== */

.se-login{
  position:fixed;inset:0;z-index:3000;
  background:var(--se-white);
  display:flex;align-items:center;justify-content:center;
  padding:24px;overflow:hidden;
}

/* Blobs decorativos (extraídos del diseño) */
.se-login__blob{position:absolute;pointer-events:none;z-index:0;}
.se-login__blob--yellow{
  top:0;right:0;width:min(58vw,760px);height:auto;
  background:url("../img/login-blob-yellow.png") top right / contain no-repeat;
  aspect-ratio:3120/2720;
}
.se-login__blob--coral{
  bottom:0;left:0;width:min(40vw,500px);height:auto;
  background:url("../img/login-blob-coral.png") bottom left / contain no-repeat;
  aspect-ratio:1307/1734;
}

/* Botón cerrar (X blanca sobre el blob amarillo) */
.se-login__close{
  position:absolute;top:26px;right:38px;z-index:5;
  color:#fff;line-height:0;border-radius:6px;
  transition:transform .2s ease,opacity .2s ease;
}
.se-login__close:hover{color:#fff;transform:rotate(90deg);opacity:.85;}

/* Tarjeta central (sin caja: contenido centrado sobre blanco) */
.se-login__card{
  position:relative;z-index:2;
  width:100%;max-width:392px;text-align:center;
}
.se-login__brand{display:inline-block;margin-bottom:1.8rem;}
.se-login__brand img{width:210px;height:auto;}

.se-login__title{
  font-family:var(--se-font-body);
  color:var(--se-navy);font-weight:700;
  font-size:1.7rem;letter-spacing:.01em;margin:0 0 .5rem;
}
.se-login__lead{
  color:var(--se-navy);font-weight:600;
  font-size:.9rem;line-height:1.5;margin:0 auto 1.6rem;max-width:300px;
}
.se-login__error{
  color:#c0392b;font-size:.85rem;font-weight:600;margin:0 0 1rem;
}

/* Campo contraseña */
.se-login__form{margin:0;}
.se-login__field{
  position:relative;display:flex;align-items:center;
  background:#fff;border:1px solid #d9dbe3;border-radius:10px;
  height:54px;padding:0 12px;transition:border-color .2s,box-shadow .2s;
}
.se-login__field:focus-within{border-color:var(--se-navy);box-shadow:0 0 0 3px rgba(30,42,92,.12);}
.se-login__ico{display:flex;color:#9aa0ac;margin-right:8px;}
.se-login__input{
  flex:1;border:0;outline:0;background:transparent;
  font-family:var(--se-font-body);font-size:.95rem;color:var(--se-navy);
  letter-spacing:.06em;
}
.se-login__input::placeholder{color:#9aa0ac;letter-spacing:.12em;}
.se-login__toggle{
  border:0;background:transparent;color:#9aa0ac;cursor:pointer;
  display:flex;align-items:center;padding:6px;border-radius:6px;
}
.se-login__toggle:hover{color:var(--se-navy);}
.d-none{display:none !important;}

.se-login__help{margin:.5rem 0 1.4rem;text-align:right;}
.se-login__help a{color:var(--se-navy);font-size:.82rem;font-weight:600;}
.se-login__help a:hover{color:var(--se-coral);}

.se-login__submit{
  width:100%;height:54px;border:0;border-radius:10px;cursor:pointer;
  background:var(--se-navy);color:#fff;font-family:var(--se-font-body);
  font-weight:600;font-size:1rem;
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  transition:background .2s,transform .2s,box-shadow .2s;
}
.se-login__submit:hover{background:#16204a;transform:translateY(-1px);box-shadow:0 10px 24px rgba(30,42,92,.28);}
.se-login__submit .se-icon{transition:transform .2s ease;}
.se-login__submit:hover .se-icon{transform:translateX(3px);}

.se-login__back{
  display:inline-flex;align-items:center;gap:.45rem;
  margin-top:2.4rem;padding:.6rem 1.4rem;border-radius:10px;
  border:1px solid #d9dbe3;color:var(--se-navy);font-weight:500;font-size:.92rem;
  transition:border-color .2s,color .2s;
}
.se-login__back:hover{border-color:var(--se-navy);color:var(--se-navy);}

@media(max-width:575.98px){
  .se-login__blob--yellow{width:70vw;}
  .se-login__blob--coral{width:58vw;}
  .se-login__close{top:18px;right:22px;}
  .se-login__brand img{width:180px;}
}