/*!
 * Bitto — CSS de las vistas de autenticación (login, registro, recuperar)
 * Fuente de verdad: design_handoff_bitto/Bitto Auth.dc.html
 *   B01 Registro · B02 Login (con estado de error) · B03 Onboarding (ver
 *   nota de alcance en controllers/SiteController.php / signup.php).
 *
 * Se apoya en el marco del Shell B (views/layouts/auth.php +
 * web/css/views/shells.css) y en los componentes bt-card/bt-btn/bt-input
 * de web/css/bitto.css; aquí solo se añade lo específico de estas 3
 * pantallas (alerta de error, fila label+enlace, toggle de contraseña,
 * divisor "o", medidor de fuerza).
 */

/* Encabezado centrado (B02 Login) — el shell ya pinta el logo/wordmark
   arriba, así que el heading de esta pantalla solo necesita centrarse. */
.bt-shell__auth-heading--center { text-align: center; }

/* Formulario dentro de la tarjeta: apila sus campos con el mismo gap
   vertical (16px) que usa el mockup entre bloques de la card. */
.bt-auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--bt-space-16);
}
.bt-auth-form .bt-btn { width: 100%; }

/* Alerta de credenciales/validación inválida (B02 — banner rojo sobre la
   tarjeta). Reutiliza los tokens --bt-danger-* ya definidos en
   bitto.css en vez de los valores de opacidad puntuales del mockup. */
.bt-auth-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid var(--bt-danger-border);
  background: var(--bt-danger-tint);
  border-radius: 10px;
  padding: 12px 14px;
}
.bt-auth-alert__icon { flex-shrink: 0; margin-top: 1px; color: var(--bt-danger); }
.bt-auth-alert__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--bt-danger);
}

/* Fila "label + enlace" (ej. Contraseña / ¿La olvidaste?) */
.bt-auth-field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.bt-auth-field-row .bt-label { margin-bottom: 0; }

.bt-auth-link { font-size: 12px; font-weight: 600; color: var(--bt-primary); }
.bt-auth-link:hover { color: var(--bt-primary-hover); }

/* Campo de contraseña con botón "Mostrar/Ocultar" superpuesto */
.bt-auth-password { position: relative; }
.bt-auth-password .bt-input { padding-right: 72px; }
.bt-auth-password__toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 4px 2px;
  font-family: var(--bt-font-ui);
  font-size: 12px;
  font-weight: 600;
  color: var(--bt-primary);
  cursor: pointer;
}
.bt-auth-password__toggle:hover { color: var(--bt-primary-hover); }

/* Medidor de fuerza de contraseña (B01 Registro) — oculto hasta que se
   escribe algo (ver signup.php); el [hidden] necesita ganarle a nuestro
   propio display:flex, si no el atributo queda sin efecto. */
.bt-auth-strength { display: flex; gap: 4px; align-items: center; }
.bt-auth-strength[hidden] { display: none; }
.bt-auth-strength__bar { flex: 1; height: 4px; border-radius: 2px; background: var(--bt-border); }
.bt-auth-strength__bar.is-filled--weak { background: var(--bt-danger); }
.bt-auth-strength__bar.is-filled--medium { background: var(--bt-warning); }
.bt-auth-strength__bar.is-filled--strong { background: var(--bt-success); }
.bt-auth-strength__label {
  font-size: 11px;
  font-weight: 600;
  color: var(--bt-text-muted);
  margin-left: 6px;
  white-space: nowrap;
}
.bt-auth-strength__label.is-weak { color: var(--bt-danger); }
.bt-auth-strength__label.is-medium { color: var(--bt-warning); }
.bt-auth-strength__label.is-strong { color: var(--bt-success); }

/* Divisor "o" / "o con tu correo" entre el botón social y el formulario */
.bt-auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--bt-disabled-text);
}
.bt-auth-divider::before,
.bt-auth-divider::after {
  content: '';
  height: 1px;
  flex: 1;
  background: var(--bt-divider);
}

/* Botón social (Google) — mismo componente que bt-btn--secondary; la
   marca no está wireada aún, ver nota en views/site/login.php. */
.bt-auth-social { gap: 10px; }

/* Texto de aceptación de términos bajo el CTA de registro */
.bt-auth-terms {
  font-size: 12px;
  color: var(--bt-text-muted);
  text-align: center;
  line-height: 1.5;
}

/* Enlace/aviso bajo la tarjeta ("¿No tienes cuenta? / ¿Ya tienes cuenta?") */
.bt-auth-switch {
  font-size: 13px;
  color: var(--bt-text-muted);
  text-align: center;
}
.bt-auth-switch a { font-weight: 600; }

/* Formulario simple de recuperar (sin card partida, un solo campo) */
.bt-auth-hint {
  font-size: 13px;
  color: var(--bt-text-muted);
  text-align: center;
  line-height: 1.5;
}