/*
 * Estilos de las pantallas de auth (login y reset de password). Son las únicas vistas
 * propias de la app: el resto es Avo, que trae su propio layout y CSS.
 *
 * El generador de auth de Rails 8 crea las vistas sin estilo ninguno, y con la hoja
 * vacía quedaban como inputs sueltos sobre el fondo del browser — ilegible.
 *
 * Todo va scopeado bajo .auth para no pisar nada. Sin framework: son 3 pantallas.
 */

:root {
  --auth-bg: #f6f7f9;
  --auth-panel: #ffffff;
  --auth-border: #d8dde5;
  --auth-text: #14181f;
  --auth-muted: #5c6673;
  --auth-accent: #2563eb;
  --auth-error: #b42318;
  --auth-ok: #067647;
}

/* Acompaña el tema del sistema, igual que hace Avo. */
@media (prefers-color-scheme: dark) {
  :root {
    --auth-bg: #14181f;
    --auth-panel: #1c222c;
    --auth-border: #303845;
    --auth-text: #eef1f5;
    --auth-muted: #9aa5b4;
    --auth-accent: #5b8cf7;
    --auth-error: #f97066;
    --auth-ok: #4ade80;
  }
}

/* Sin esto el padding se suma por fuera del max-width: la card medía 450px en vez de
   384px, y el padding del body la descentraba 48px hacia abajo. */
body.auth,
body.auth *,
body.auth *::before,
body.auth *::after {
  box-sizing: border-box;
}

body.auth {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: var(--auth-bg);
  color: var(--auth-text);
  font: 16px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.auth-card {
  width: 100%;
  max-width: 24rem;
  padding: 2rem;
  background: var(--auth-panel);
  border: 1px solid var(--auth-border);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 6%), 0 8px 24px rgb(0 0 0 / 6%);
}

.auth-card h1 {
  margin: 0 0 0.25rem;
  font-size: 1.25rem;
}

.auth-card .auth-subtitle {
  margin: 0 0 1.5rem;
  color: var(--auth-muted);
  font-size: 0.875rem;
}

.auth-card label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.auth-card input[type="email"],
.auth-card input[type="password"] {
  width: 100%;
  margin-bottom: 1rem;
  padding: 0.625rem 0.75rem;
  font-size: 1rem;
  color: var(--auth-text);
  background: var(--auth-bg);
  border: 1px solid var(--auth-border);
  border-radius: 8px;
}

.auth-card input:focus-visible {
  outline: 2px solid var(--auth-accent);
  outline-offset: 1px;
  border-color: var(--auth-accent);
}

.auth-card input[type="submit"] {
  width: 100%;
  padding: 0.625rem 1rem;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background: var(--auth-accent);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.auth-card input[type="submit"]:hover {
  filter: brightness(1.08);
}

.auth-footer {
  margin: 1.25rem 0 0;
  font-size: 0.875rem;
}

.auth-footer a {
  color: var(--auth-accent);
}

/* Los flash del generador venían con style inline y color rojo/verde fijo, que en
   tema oscuro no se leía. */
.auth-flash {
  margin-bottom: 1.25rem;
  padding: 0.625rem 0.75rem;
  border-radius: 8px;
  font-size: 0.875rem;
  border: 1px solid currentcolor;
}

.auth-flash-alert { color: var(--auth-error); }
.auth-flash-notice { color: var(--auth-ok); }

/* ── Login con Google ─────────────────────────────────────────────────────
   Es el camino principal, así que va antes del formulario y con más peso
   visual. El de contraseña queda como break-glass. */
.auth-google {
  display: block;
  width: 100%;
  margin-bottom: 1.25rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--auth-accent);
  border-radius: 8px;
  background: transparent;
  color: var(--auth-accent);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.auth-google:hover {
  background: color-mix(in srgb, var(--auth-accent) 12%, transparent);
}

/* Separador con el texto centrado sobre la línea. */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1.25rem;
  font-size: 0.8125rem;
  opacity: 0.6;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentcolor;
}