/*
 * auth.css — Estilos exclusivos de las páginas de autenticación (login).
 * Solo se carga en las vistas de auth; no afecta al resto del portal.
 */

/* ─── Área principal centrada ───────────────────────────────────────────────── */
.main-centrado {
  flex:            1;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         var(--space-8) var(--space-6);
  /* Empuja el contenido ligeramente hacia arriba del centro geométrico */
  padding-bottom:  calc(var(--space-8) + 4vh);
}

/* ─── Tarjeta de login ──────────────────────────────────────────────────────── */
.login-card {
  /* Tarjeta translúcida "liquid glass" (igual que las tarjetas de apps): deja
     entrever la escena de fondo (puerta estelar / puerta de Mordor) en ambos
     temas, en vez de taparla con una superficie opaca. */
  background:    var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate, 150%));
  backdrop-filter:         blur(var(--glass-blur)) saturate(var(--glass-saturate, 150%));
  border:        1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  box-shadow:    var(--glass-shadow);
  padding:       var(--space-10) var(--space-8);
  width:         100%;
  max-width:     420px;
  display:       flex;
  flex-direction: column;
  gap:           var(--space-6);
}

@media (max-width: 480px) {
  .login-card {
    padding:       var(--space-8) var(--space-6);
    border-radius: var(--radius-lg);
  }
}

/* ─── Cabecera de la tarjeta ────────────────────────────────────────────────── */
.login-card-header {
  text-align:    center;
  display:       flex;
  flex-direction: column;
  align-items:   center;
  gap:           var(--space-3);
}

.login-title {
  font-size:      var(--font-size-2xl);
  font-weight:    var(--font-weight-semi);
  letter-spacing: -0.02em;
  color:          var(--color-text-primary);
}

.login-subtitle {
  font-size: var(--font-size-sm);
  color:     var(--color-text-secondary);
}

/* ─── Mensaje de error ──────────────────────────────────────────────────────── */
.login-error {
  display:       flex;
  align-items:   flex-start;
  gap:           var(--space-2);
  padding:       var(--space-3) var(--space-4);
  background:    color-mix(in srgb, var(--color-error) 8%, transparent);
  border:        1px solid color-mix(in srgb, var(--color-error) 25%, transparent);
  border-radius: var(--radius-md);
  font-size:     var(--font-size-sm);
  color:         var(--color-error);
  line-height:   var(--line-height-normal);
}

.login-error svg {
  flex-shrink: 0;
  margin-top:  1px;
}

/* ─── Formulario ────────────────────────────────────────────────────────────── */
.login-form {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-5);
}

.form-group {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
}

.form-label {
  font-size:   var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color:       var(--color-text-primary);
}

.form-input {
  width:         100%;
  padding:       var(--space-3) var(--space-4);
  /* Campos también translúcidos para que las "cajas" dejen ver el fondo, pero
     con opacidad suficiente para que el texto se lea con claridad. */
  background:    color-mix(in srgb, var(--color-surface) 45%, transparent);
  border:        1px solid var(--glass-border);
  border-radius: var(--radius-md);
  font-family:   var(--font-family);
  font-size:     var(--font-size-base);
  color:         var(--color-text-primary);
  outline:       none;
  transition:    border-color var(--transition-fast), box-shadow var(--transition-fast);
  /* Evitar que el autorrelleno del navegador cambie el fondo con colores propios */
  -webkit-text-fill-color: var(--color-text-primary);
}

.form-input::placeholder {
  color: var(--color-text-muted);
}

.form-input:focus {
  border-color: var(--color-accent);
  box-shadow:   0 0 0 3px color-mix(in srgb, var(--color-accent) 15%, transparent);
}

.form-input--error {
  border-color: var(--color-error);
}

.form-input--error:focus {
  border-color: var(--color-error);
  box-shadow:   0 0 0 3px color-mix(in srgb, var(--color-error) 15%, transparent);
}

/* ─── Botón de login ─────────────────────────────────────────────────────────── */
.btn-login {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-2);
  width:           100%;
  padding:         var(--space-3) var(--space-6);
  margin-top:      var(--space-1);
  background:      var(--color-accent);
  color:           var(--color-accent-fg);
  border-radius:   var(--radius-md);
  font-size:       var(--font-size-base);
  font-weight:     var(--font-weight-medium);
  transition:      background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  cursor:          pointer;
  border:          none;
}

.btn-login:hover {
  background:  var(--color-accent-hover);
  box-shadow:  var(--shadow-md);
}

.btn-login:active {
  transform:   scale(0.98);
  box-shadow:  var(--shadow-xs);
}

/* ─── Botón de Synology SSO ──────────────────────────────────────────────────── */
/* Estilo secundario (outline) para diferenciarlo visualmente del botón principal */
.btn-sso {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-2);
  width:           100%;
  padding:         var(--space-3) var(--space-6);
  background:      var(--color-surface);
  color:           var(--color-text-primary);
  border:          1px solid var(--color-border);
  border-radius:   var(--radius-md);
  font-family:     var(--font-family);
  font-size:       var(--font-size-base);
  font-weight:     var(--font-weight-medium);
  text-decoration: none;
  box-shadow:      var(--shadow-xs);
  transition:      background var(--transition-fast), border-color var(--transition-fast),
                   box-shadow var(--transition-fast);
  cursor:          pointer;
}

.btn-sso:hover {
  background:    var(--color-surface-elevated);
  border-color:  var(--color-text-muted);
  box-shadow:    var(--shadow-sm);
}

.btn-sso:active {
  transform:  scale(0.98);
}

/* ─── Separador entre SSO y login local ─────────────────────────────────────── */
.login-divider {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
  color:       var(--color-text-muted);
  font-size:   var(--font-size-xs);
  user-select: none;
}

.login-divider::before,
.login-divider::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: var(--color-border);
}