/* =====================================================================
   TENIS Y BRILLO — Login
   Archivo: /CSS/Login.css
   Depende de: variables.css
   Pantalla previa a la autenticación — NO usa Shell.css (no hay sidebar
   ni sesión todavía). Reutiliza la identidad visual del hero público.
   ===================================================================== */

:root{
  --login-ink: #0A0E17;
  --login-ink-2: #10151F;
  --login-glow-a: rgba(37, 99, 235, 0.5);
  --login-glow-b: rgba(20, 184, 166, 0.4);
}

html, body{ height:100%; }
body{
  display:flex; align-items:center; justify-content:center;
  padding: var(--sp-5);
  background:
    radial-gradient(560px 420px at 12% 0%, var(--login-glow-a), transparent 60%),
    radial-gradient(620px 480px at 88% 100%, var(--login-glow-b), transparent 60%),
    linear-gradient(180deg, var(--login-ink) 0%, var(--login-ink-2) 100%);
}

.login-wrap{ width: 100%; max-width: 420px; }

.login-brand{ display:flex; flex-direction:column; align-items:center; gap: var(--sp-3); margin-bottom: var(--sp-7); }
.login-brand__mark{
  width: 52px; height: 52px; border-radius: var(--radius-lg);
  background: var(--gradient-brand);
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-lg);
}
.login-brand__mark svg{ width: 26px; height: 26px; }
.login-brand__text{ font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); color:#fff; letter-spacing:-0.01em; }
.login-brand__text span{ color: var(--brand-teal); }

.login-card{
  background: var(--surface-0);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-8) var(--sp-7);
}
.login-card h1{
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xl);
  letter-spacing: -0.01em; color: var(--text-primary); margin: 0 0 4px; text-align:center;
}
.login-card p.lead{ font-size: var(--fs-xs); color: var(--text-secondary); text-align:center; margin: 0 0 var(--sp-7); }

.login-field{ margin-bottom: var(--sp-4); }
.login-field label{ display:block; font-size: var(--fs-xs); font-weight: 700; color: var(--text-primary); margin-bottom: var(--sp-2); }
.login-field input, .login-field select{
  width:100%; height: 48px; padding: 0 var(--sp-4);
  border-radius: var(--radius-md); border: 1px solid var(--border-soft);
  background: var(--surface-1); color: var(--text-primary); font-size: var(--fs-sm);
  outline: none; transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.login-field input:focus, .login-field select:focus{ border-color: var(--brand-blue); background: var(--surface-0); box-shadow: var(--shadow-focus); }
.login-field.has-error input{ border-color: var(--state-danger); }
.login-field.has-error .login-error{ display:block; }
.login-error{ display:none; font-size: var(--fs-2xs); color: var(--state-danger); margin-top: 6px; font-weight:600; }

.login-password-wrap{ position: relative; }
.login-password-wrap input{ padding-right: 44px; }
.login-toggle-pass{
  position:absolute; right: var(--sp-3); top:50%; transform: translateY(-50%);
  width: 28px; height: 28px; border:0; background:transparent; color: var(--text-tertiary);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.login-toggle-pass svg{ width: 17px; height: 17px; }

.login-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom: var(--sp-6); }
.login-remember{ display:flex; align-items:center; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--text-secondary); cursor:pointer; }
.login-remember input{ width:16px; height:16px; accent-color: var(--brand-blue); cursor:pointer; }
.login-forgot{ font-size: var(--fs-xs); font-weight:700; color: var(--brand-blue-dark); }
.login-forgot:hover{ text-decoration: underline; }

.login-submit{
  width:100%; height: 50px; border-radius: var(--radius-md); border:0;
  background: var(--brand-blue); color:#fff; font-size: var(--fs-sm); font-weight:700;
  cursor:pointer; display:flex; align-items:center; justify-content:center; gap: var(--sp-2);
  transition: all var(--dur-fast) var(--ease-out);
}
.login-submit svg{ width: 16px; height: 16px; }
.login-submit:hover{ background: var(--brand-blue-dark); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.login-submit:disabled{ opacity: 0.7; cursor: default; transform:none; }

.login-divider{ display:flex; align-items:center; gap: var(--sp-3); margin: var(--sp-6) 0; }
.login-divider::before, .login-divider::after{ content:''; flex:1; height:1px; background: var(--border-soft); }
.login-divider span{ font-size: var(--fs-2xs); color: var(--text-tertiary); font-weight:600; }

.login-footer-link{
  display:flex; align-items:center; justify-content:center; gap: var(--sp-2);
  font-size: var(--fs-xs); color: var(--text-secondary); text-align:center;
}
.login-footer-link a{ color: var(--brand-blue-dark); font-weight:700; }
.login-footer-link a:hover{ text-decoration: underline; }

.login-below{ text-align:center; margin-top: var(--sp-6); font-size: var(--fs-xs); color: rgba(255,255,255,0.6); }
.login-below a{ color: rgba(255,255,255,0.85); font-weight:600; }
.login-below a:hover{ color:#fff; }

@media (max-width: 480px){
  .login-card{ padding: var(--sp-6) var(--sp-5); }
}