/* ==========================================================================
   TandyWeb — Estilos de las páginas de autenticación
   ========================================================================== */

.cuerpo-auth {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 2rem 1rem;
  background:
    radial-gradient(1200px 600px at 90% -10%, color-mix(in srgb, var(--color-primario) 18%, transparent), transparent 60%),
    radial-gradient(1000px 500px at -10% 110%, color-mix(in srgb, var(--color-acento) 14%, transparent), transparent 60%),
    var(--bg);
}
.auth-shell { width: 100%; max-width: 460px; display: grid; gap: 1rem; }
.auth-card {
  background: var(--bg-elevado);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 2rem 1.75rem;
  box-shadow: var(--sombra);
}
.logo--centrado { display: block; text-align: center; margin-bottom: 1.5rem; font-size: 1.4rem; }
.auth-titulo { font-size: 1.6rem; letter-spacing: -.02em; margin-bottom: .25rem; }
.auth-subtitulo { color: var(--texto-suave); margin-bottom: 1.5rem; }

.form-auth { display: grid; gap: 1rem; }
.campo { display: grid; gap: .35rem; }
.campo label {
  font-size: .9rem; font-weight: 600; color: var(--texto-suave);
}
.campo .opcional { color: var(--texto-suave); font-weight: 400; }
.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: .7rem .85rem;
  border-radius: var(--radio-sm);
  border: 1px solid var(--borde);
  background: var(--bg);
  color: var(--texto);
  font: inherit;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--color-primario);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primario) 25%, transparent);
}
.campo .error { color: var(--color-error); font-size: .85rem; }

.boton--bloque { display: flex; width: 100%; }

.form-auth__extras {
  display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap;
  font-size: .9rem; color: var(--texto-suave);
}
.enlace-suave { color: var(--color-primario); text-decoration: none; font-weight: 600; }
.enlace-suave:hover { text-decoration: underline; }

.alerta {
  padding: .85rem 1rem; border-radius: var(--radio-sm);
  font-size: .92rem; margin-bottom: 1rem;
}
.alerta a { color: inherit; font-weight: 700; }
.alerta--info {
  background: color-mix(in srgb, var(--color-primario) 15%, transparent);
  color: var(--color-primario);
  border: 1px solid color-mix(in srgb, var(--color-primario) 25%, transparent);
}
.alerta--ok {
  background: color-mix(in srgb, var(--color-exito) 15%, transparent);
  color: var(--color-exito);
  border: 1px solid color-mix(in srgb, var(--color-exito) 25%, transparent);
}
.alerta--error {
  background: color-mix(in srgb, var(--color-error) 15%, transparent);
  color: var(--color-error);
  border: 1px solid color-mix(in srgb, var(--color-error) 25%, transparent);
}

.auth-pie { text-align: center; color: var(--texto-suave); font-size: .9rem; }
.auth-pie a { color: var(--color-primario); text-decoration: none; font-weight: 600; }
.auth-pie a:hover { text-decoration: underline; }