/* ============= PALETA SLATE ============= */
:root[data-theme="slate"]{
  /* Acento */
  --primary:#2e3f66; --primary-600:#273656; --primary-700:#202c46; --primary-rgb:46,63,102;

  /* Neutros base */
  --ink:#0e1116; --muted:#4b5563; --muted-weak:#7b8491;
  --bg:#f6f7fa; --card:#ffffff; --card-hover:#f8f9fc;

  /* Bordes / anillos */
  --ring:#e6e9f1; --border:#e5e7eb; --divider:#edf1f5;

  /* Superficies */
  --primary-soft:#eef1f6; --primary-soft-hover:#e9edf4;
  --surface-hover:#f1f3f5; --surface-muted:#fafbfc;
  --shadow-rgb:10,12,16;

  /* Estados */
  --danger-bg:#ffeaea; --danger-ring:#ffd3d3; --danger-700:#9a0511;
  --success-bg:#eef7ff; --success-ring:#cfe4ff; /* (azulado suave) */
  --overlay-backdrop:rgba(10,12,16,.6);

  /* Varios */
  --warning:#b68e18; --warning-ring:rgba(244,208,111,.25);
}

/* ============= ESTILOS LOGIN (solo colores via variables) ============= */
html, body{
  font-family:'Manrope', Arial, sans-serif;
  background:var(--bg);
  color:var(--ink);
  margin:0; padding:0; min-height:100vh;
}

.login-container{
  max-width:380px;
  margin:5.2em auto 0;
  background:var(--card);
  border-radius:19px;
  box-shadow:0 7px 32px rgba(var(--shadow-rgb),.10);
  padding:2.6em 1.7em 2em;
  display:flex; flex-direction:column; align-items:center;
  border:1.5px solid var(--ring);
}

.login-logo{
  display:flex; align-items:center; gap:.7em;
  font-size:2em; font-weight:800; color:var(--primary);
  letter-spacing:-1px; margin-bottom:.2em;
}
.login-logo img{ height:2.2em; }

h2{
  margin:.5em 0 1.2em;
  font-size:1.38em; font-weight:800;
  color:var(--primary-700);
  letter-spacing:-.7px; text-align:center;
}

.login-form{ width:100%; display:flex; flex-direction:column; gap:1.4em; }
.form-field{ width:100%; display:flex; flex-direction:column; gap:.33em; }

label{ font-weight:700; color:var(--primary); font-size:1em; }

input[type="text"], input[type="password"]{
  width:100%; padding:.67em 1em; border-radius:8px;
  border:1.5px solid var(--input-border);
  background:var(--card-hover);
  font-size:1.09em; transition:border-color .16s, box-shadow .16s;
  box-sizing:border-box; color:var(--ink);
}
input[type="text"]::placeholder, input[type="password"]::placeholder{ color:var(--muted-weak); }
input[type="text"]:focus, input[type="password"]:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 2px rgba(var(--primary-rgb),.18);
  outline:none;
}

.login-btn{
  width:100%; padding:.75em 0; color:#fff; font-weight:800; font-size:1.09em;
  border:none; border-radius:10px; cursor:pointer; margin-top:.7em;
  background:linear-gradient(180deg, var(--primary), var(--primary-600));
  box-shadow:0 2px 14px rgba(var(--primary-rgb),.12), inset 0 -1px 0 rgba(0,0,0,.06);
  transition:filter .13s, transform .10s;
}
.login-btn:hover, .login-btn:focus{
  filter:brightness(1.05);
  transform:translateY(-1px) scale(1.03);
}

.login-links{ margin-top:1.2em; text-align:center; }
.login-links a{
  color:var(--primary); text-decoration:underline; font-weight:700;
  margin:0 .7em; font-size:.98em;
}
.login-links a:hover{ color:var(--primary-700); }

/* MENSAJES DJANGO */
.messages{ width:100%; margin-bottom:1em; display:flex; flex-direction:column; gap:.5em; padding:0; }
.mensaje{
  padding:.72em 1.15em; border-radius:8px; font-weight:700; font-size:1em;
  box-shadow:0 1px 8px rgba(var(--shadow-rgb),.05); text-align:center;
  border:1.2px solid transparent; margin-bottom:0; opacity:1; transition:opacity .5s;
  animation:fadeInError .3s;
}

/* Semántica de estados usando la paleta Slate */
.mensaje.success, .mensaje.sucess, .mensaje.ok{
  background:var(--success-bg);
  border-color:var(--success-ring);
  color:#14532d; /* verde legible (no existe var específica en la paleta) */
}
.mensaje.info{
  background:var(--primary-soft);
  border-color:var(--ring);
  color:var(--primary-700);
}
.mensaje.warning, .mensaje.warn{
  background:var(--warning-ring);
  border-color:var(--warning-ring);
  color:var(--warning);
}
.mensaje.error{
  background:var(--danger-bg);
  border-color:var(--danger-ring);
  color:var(--danger-700);
}

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

@media (max-width:520px){
  .login-container{ padding:1.7em .4em; }
}