:root{
  --ink:#0A1020;
  --purple:#6C5CE7;
  --teal:#00BFA6;
  --cloud:#EEF2F9;
  --steel:#7C8AA5;

  --card: rgba(255,255,255,.92);
  --border: rgba(10,16,32,.12);
  --shadow: 0 20px 55px rgba(10,16,32,.16);

  --text: rgba(15,23,42,.96);
  --muted: rgba(124,138,165,.98);
  --danger:#E24B4B;

  --r: 12px;
  --ui-scale: 1;
}

@media (max-height: 760px){ :root{ --ui-scale: .96; } }
@media (max-height: 680px){ :root{ --ui-scale: .92; } }
@media (max-height: 610px){ :root{ --ui-scale: .88; } }
@media (max-height: 540px){ :root{ --ui-scale: .84; } }
@media (max-height: 480px){ :root{ --ui-scale: .80; } }

html, body{
  height: 100%;
}

body.login-body{
  margin: 0 !important;
  font-family: ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial !important;
  color: var(--text) !important;

  height: 100svh;
  min-height: 100svh;

  display: grid;
  place-items: center;

  padding: clamp(10px, 2.2vh, 22px);

  background: var(--cloud) !important;
  overflow: hidden;
  line-height: 1.6;
  font-size: calc(16px * var(--ui-scale));
  position: relative;
}

body.login-body::before,
body.login-body::after{
  content:"";
  position: fixed;
  width: 860px;
  height: 860px;
  border-radius: 999px;
  z-index: 0;
  background:
    radial-gradient(circle at 30% 30%, rgba(108,92,231,.12), rgba(108,92,231,0) 60%),
    radial-gradient(circle at 70% 50%, rgba(0,191,166,.11), rgba(0,191,166,0) 60%);
  pointer-events: none;
}
body.login-body::before{ left:-420px; top:260px; }
body.login-body::after{ right:-520px; top:-430px; }

.login-container{
  width: 100%;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1;
}

.login-box{
  position: relative;
  isolation: isolate;
  width: min(400px, 88vw); 
  max-width: 400px;

  padding: calc(2rem * var(--ui-scale)); 
  background: var(--card);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  backdrop-filter: blur(10px);
}

/* Borde gradiente + glow */
.login-box::before{
  content:"";
  position:absolute;
  inset: -1px;
  border-radius: calc(var(--r) + 1px);
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(108,92,231,.75),
    rgba(0,191,166,.75),
    rgba(108,92,231,.45)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events:none;
  z-index: -1;

  filter: drop-shadow(0 0 14px rgba(108,92,231,.16))
          drop-shadow(0 0 16px rgba(0,191,166,.14));
  opacity: .92;
}

@keyframes borderPulse{
  from{
    opacity: .76;
    filter: drop-shadow(0 0 12px rgba(108,92,231,.14))
            drop-shadow(0 0 14px rgba(0,191,166,.12));
  }
  to{
    opacity: 1;
    filter: drop-shadow(0 0 18px rgba(108,92,231,.22))
            drop-shadow(0 0 20px rgba(0,191,166,.18));
  }
}
.login-box::before{
  animation: borderPulse 3.2s ease-in-out infinite alternate;
}

.login-logo{
  display:block;
  width: calc(60px * var(--ui-scale));
  height: calc(60px * var(--ui-scale));
  object-fit: contain;
  margin: 0 auto calc(20px * var(--ui-scale));
  filter: drop-shadow(0 10px 20px rgba(10,16,32,.16));
}

.alert-box{
  margin: 0 0 calc(12px * var(--ui-scale));
}

.alert-success,
.alert-info,
.alert-error{
  padding: calc(10px * var(--ui-scale)) calc(12px * var(--ui-scale));
  border-radius: 12px;
  border: 1px solid rgba(10,16,32,.10);
  background: rgba(255,255,255,.82);
  color: rgba(15,23,42,.92);
  text-align: center;
  font-weight: 800;
  animation: fadeIn .25s ease-in-out;
}

.alert-error{
  background: rgba(226,75,75,.08);
  border-color: rgba(226,75,75,.35);
  color: rgba(226,75,75,.92);
}
.alert-success{
  background: rgba(0,191,166,.10);
  border-color: rgba(0,191,166,.35);
}
.alert-info{
  background: rgba(108,92,231,.08);
  border-color: rgba(108,92,231,.28);
}

@keyframes fadeIn{
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.errorlist{
  list-style:none;
  margin: 8px 0 0;
  padding: 0;
  color: rgba(226,75,75,.92);
  font-weight: 800;
  font-size: calc(12.8px * var(--ui-scale));
}

/* Floating labels */
.floating-label-group{
  position: relative;
  margin-top: calc(10px * var(--ui-scale));
  margin-bottom: calc(14px * var(--ui-scale));
}

.floating-label-group input{
  width: 100%;
  box-sizing: border-box;

  padding: calc(12px * var(--ui-scale)); 
  border-radius: 12px;                  

  border: 1px solid rgba(10,16,32,.14);
  background: rgba(255,255,255,.95);
  color: rgba(15,23,42,.92);

  font-size: calc(15px * var(--ui-scale));
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease, background .12s ease;
}

.floating-label-group input:focus{
  outline: none;
  border-color: rgba(0,191,166,.48);
  box-shadow: 0 0 0 4px rgba(0,191,166,.12);
  transform: translateY(-1px);
  background: #fff;
}

.floating-label-group label{
  position: absolute;
  top: calc(12px * var(--ui-scale));
  left: calc(12px * var(--ui-scale));
  color: rgba(124,138,165,.98);
  font-size: calc(15px * var(--ui-scale));
  pointer-events: none;
  transition: all .14s ease;
}

.floating-label-group input:focus + label,
.floating-label-group input.not-empty + label,
.floating-label-group input:not(:placeholder-shown) + label{
  top: calc(-9px * var(--ui-scale));
  left: calc(10px * var(--ui-scale));
  font-size: calc(12px * var(--ui-scale));
  font-weight: 900;
  color: rgba(0,191,166,.92);
  background: rgba(255,255,255,.97);
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(10,16,32,.08);
}

.pwd-group input{
  padding-right: calc(44px * var(--ui-scale));
}

.pwd-group .toggle-pwd{
  position: absolute;
  top: 50%;
  right: calc(12px * var(--ui-scale));
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  opacity: .85;
}

.pwd-group .toggle-pwd:hover{ opacity: 1; }
.pwd-group .toggle-pwd:focus{ outline: none; }
.pwd-group .toggle-pwd:focus-visible{
  outline: 2px solid rgba(0,191,166,.45);
  outline-offset: 3px;
  border-radius: 10px;
}

.pwd-group .eye-icon{
  width: 18px;
  height: 18px;
  fill: rgba(124,138,165,.95);
  transition: fill .12s ease;
}
.pwd-group .toggle-pwd:hover .eye-icon{ fill: rgba(0,191,166,.92); }

.login-button{
  width: 100%;
  border: 0;
  cursor: pointer;

  border-radius: 12px;                 
  padding: calc(.75rem * var(--ui-scale)); 

  font-weight: 950;
  letter-spacing: -0.01em;
  font-size: calc(15px * var(--ui-scale));

  color: var(--ink);
  background: var(--teal);
  box-shadow: 0 14px 34px rgba(0,191,166,.22);
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease, opacity .12s ease;
}

.login-button:hover{
  filter: brightness(1.04);
  transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(0,191,166,.26);
}
.login-button:active{ transform: translateY(0); }
.login-button[disabled]{ opacity:.6; cursor:not-allowed; }

.is-hidden{ display:none; }

@keyframes onAutoFillStart { from {} to {} }

.floating-label-group input:-webkit-autofill{
  animation-name: onAutoFillStart;
  animation-duration: 0.01s;
  -webkit-text-fill-color: rgba(15,23,42,.92);
  box-shadow: 0 0 0px 1000px rgba(255,255,255,.95) inset;
  transition: background-color 9999s ease-out 0s;
}

.floating-label-group input:-webkit-autofill + label,
.floating-label-group input:-webkit-autofill:focus + label{
  top: calc(-9px * var(--ui-scale)) !important;
  left: calc(10px * var(--ui-scale)) !important;
  font-size: calc(12px * var(--ui-scale)) !important;
  font-weight: 900 !important;
  color: rgba(0,191,166,.92) !important;
  background: rgba(255,255,255,.97) !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(10,16,32,.08) !important;
}


@media (max-width: 520px){
  .login-box{
    width: min(360px, 84vw);
    padding: calc(1.5rem * var(--ui-scale));
  }
  .login-logo{
    width: calc(72px * var(--ui-scale));
    height: calc(72px * var(--ui-scale));
    margin-bottom: calc(16px * var(--ui-scale));
  }
}

@media (max-width: 380px){
  .login-box{
    width: min(320px, 82vw);
    padding: calc(1.25rem * var(--ui-scale));
  }
}

body.login-body{
  margin: 0 !important;
  font-family: ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial !important;
  color: var(--text) !important;

  height: 100vh;
  height: 100svh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;

  display: grid;
  place-items: center;
  place-content: center; 

  padding: clamp(10px, 2vh, 18px);
  background: var(--cloud) !important;

  overflow: hidden;           
  overscroll-behavior: none;  
  position: relative;

  line-height: 1.6;
  font-size: calc(16px * var(--ui-scale));
}

.login-container{
  height: 100%;
  min-height: 100%;
}

@media (max-width: 520px){
  body.login-body{ padding: 12px; }

  .login-box{
    width: min(330px, 80vw);    
    padding: calc(1.25rem * var(--ui-scale));
  }

  .login-logo{
    width: calc(70px * var(--ui-scale));
    height: calc(70px * var(--ui-scale));
    margin-bottom: calc(14px * var(--ui-scale));
  }
}

@media (max-width: 380px){
  .login-box{
    width: min(300px, 78vw);
    padding: calc(1.1rem * var(--ui-scale));
  }
}

/* ==============================
   Errors & messages (login)
================================ */

/* Contenedor */
.alert-box{
  margin: 0 0 calc(12px * var(--ui-scale));
}

/* Error principal (login fallido, non_field_errors) */
.alert-error{
  padding: calc(10px * var(--ui-scale)) calc(12px * var(--ui-scale));
  border-radius: 12px;
  border: 1px solid rgba(226,75,75,.35);
  background: rgba(226,75,75,.10);
  color: rgba(226,75,75,.95);
  text-align: center;
  font-weight: 900;
}

/* Django messages (si usas messages framework) */
.alert-success,
.alert-info{
  padding: calc(10px * var(--ui-scale)) calc(12px * var(--ui-scale));
  border-radius: 12px;
  border: 1px solid rgba(10,16,32,.10);
  background: rgba(255,255,255,.82);
  color: rgba(15,23,42,.92);
  text-align: center;
  font-weight: 800;
}

/* Si quieres colores específicos */
.alert-success{
  border-color: rgba(0,191,166,.35);
  background: rgba(0,191,166,.10);
}
.alert-info{
  border-color: rgba(108,92,231,.28);
  background: rgba(108,92,231,.08);
}

/* Errores de campo ({{ form.username.errors }}) */
.errorlist{
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  text-align: left;
}

.errorlist li{
  display: block;
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(226,75,75,.28);
  background: rgba(226,75,75,.07);
  color: rgba(226,75,75,.92);
  font-weight: 800;
  font-size: calc(12.6px * var(--ui-scale));
}

/* Opcional: resaltar el input si hay error justo debajo */
.floating-label-group .errorlist + input,
.floating-label-group input:has(+ label + .errorlist){
  border-color: rgba(226,75,75,.40);
  box-shadow: 0 0 0 4px rgba(226,75,75,.10);
}