/* ============================================================
   AUTH.CSS — Puerta a Puerta X
   Sistema "claymorphic" traducido del mockup geroo03/figma-2
   (src/index.css + LoginScreen/RegisterScreen/ForgotPasswordModal.tsx)
   a CSS plano, sin Tailwind. Usado por login.html.

   Reemplaza a login.css (solo lo usaban login.html y
   cliente/login-usuario.html — este último pasó a ser un stub).
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: stretch;
  background: #0d0d0d;
  overflow-y: auto;
  overscroll-behavior: none;
}

/* ── Fondo con foto (mismo criterio que el login viejo: oscurecida, las
   cards claras van encima) — ahora servida local, no depende de Unsplash. */
.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: url('../img/login-bg.jpg') center/cover no-repeat;
  filter: brightness(.3);
}

.wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
  min-height: 100dvh;
  /* calc(52px + --safe-top): status bar + margen visual. --safe-bottom sin
     sumar nada: barra de navegación / gesture bar de Android — sin esto el
     CTA de abajo queda tapado (confirmado en un Samsung S23 real, ver
     CHANGELOG). */
  padding: calc(52px + var(--safe-top)) 0 var(--safe-bottom);
}

/* flex:1 0 auto a propósito: nunca se achica por debajo de su tamaño
   natural. Con flex:1 solo (shrink:1 default) el bloque del headline podía
   comprimirse cuando la tarjeta de abajo no entraba en el alto disponible
   (mobile con la barra de direcciones ocupando espacio) y el texto
   centrado terminaba cortado por arriba. Ahora, si no entra todo, la
   página scrollea (body ya tiene overflow-y:auto) en vez de recortar. */
.top {
  padding: 0 28px 28px;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Ícono de marca — clay-icon-app traducido, funciona igual de bien sobre
   la foto oscura que sobre fondo claro (tiene su propio gradiente). */
.brand-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: linear-gradient(145deg, #FF7B47 0%, #FF6B35 45%, #ab3500 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  box-shadow:
    0 16px 28px -6px rgba(171, 53, 0, .45),
    0 6px 12px -2px rgba(255, 107, 53, .3),
    inset 0 3px 3px rgba(255, 255, 255, .5),
    inset 0 -4px 6px rgba(0, 0, 0, .22);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.brand-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }

.headline {
  font-size: 32px;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 10px;
  letter-spacing: -.5px;
}
.headline span { color: #FF8C42; }
.subline {
  font-size: 14px;
  color: rgba(255, 255, 255, .6);
  font-weight: 500;
  line-height: 1.6;
  max-width: 300px;
}

/* ── Card claymorphic ────────────────────────────────────────────────── */
.card {
  background: #fff;
  border-radius: 28px 28px 0 0;
  padding: 30px 22px 40px;
  box-shadow:
    0 -16px 36px -6px rgba(46, 40, 42, .12),
    inset 0 2px 2px 0 rgba(255, 255, 255, 1);
  flex-shrink: 0;
}
.card-title {
  font-size: 19px;
  font-weight: 800;
  color: #1f1a1c;
  margin-bottom: 4px;
}
.card-sub {
  font-size: 13px;
  color: #8d7168;
  margin-bottom: 20px;
  line-height: 1.5;
}

/* ── Errores / éxito ─────────────────────────────────────────────────── */
.msg {
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 14px;
  display: none;
  line-height: 1.4;
}
.msg.show { display: block; }
.msg-error   { background: #FFF1F1; color: #B71C1C; border: 1px solid #FFD4D4; }
.msg-success { background: #EFFBF3; color: #1E7D3A; border: 1px solid #C7EFD3; }

/* ── Formulario / inputs ─────────────────────────────────────────────── */
.form-group { margin-bottom: 12px; }
.form-label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: #594139;
  margin-bottom: 6px;
  margin-left: 2px;
}
.form-label .req { color: #FF6B35; }

.clay-input {
  background-color: #fcf9f9;
  border: 1.5px solid rgba(225, 191, 181, .85);
  border-radius: 14px;
  box-shadow: inset 0 2px 4px rgba(46, 40, 42, .04);
  transition: all .2s ease-in-out;
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 10px;
}
.clay-input:focus-within {
  background-color: #fff;
  border-color: #FF6B35;
  box-shadow: 0 0 0 3.5px rgba(255, 107, 53, .16), inset 0 1px 2px rgba(46, 40, 42, .03);
}
.clay-input svg { flex-shrink: 0; color: #8d7168; }
.clay-input input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  /* 16px mínimo a propósito — por debajo, iOS hace zoom automático al
     enfocar el campo (regla del proyecto, CLAUDE.md §14). El login viejo
     tenía 14px acá. */
  font-size: 16px;
  color: #1f1a1c;
  padding: 13px 0;
}
.clay-input input::placeholder { color: #ab928a; }

.toggle-pass-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  color: #8d7168;
  display: flex;
  align-items: center;
  padding: 4px;
  flex-shrink: 0;
}
.toggle-pass-btn:hover { color: #FF6B35; }

/* ── Botones ──────────────────────────────────────────────────────────── */
.clay-btn-primary {
  width: 100%;
  background: linear-gradient(180deg, #FF7B47 0%, #FF6B35 55%, #f25b22 100%);
  color: #fff;
  border: none;
  border-radius: 9999px;
  padding: 15px;
  font-size: 15.5px;
  font-weight: 800;
  font-family: inherit;
  letter-spacing: .01em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow:
    0 10px 22px -3px rgba(255, 107, 53, .42),
    0 4px 8px -2px rgba(171, 53, 0, .25),
    inset 0 2px 2px 0 rgba(255, 255, 255, .45),
    inset 0 -3px 3px 0 rgba(171, 53, 0, .3);
  transition: all .2s cubic-bezier(.16, 1, .3, 1);
}
.clay-btn-primary:active { transform: scale(.985); }
.clay-btn-primary:disabled { opacity: .65; cursor: not-allowed; }

/* Registrarme mantiene el mismo peso visual que Ingresar (decisión de
   negocio de 2026-08-20: "es la palanca de crecimiento real"), no baja a
   link de texto como en el mockup original — ver amendment del plan. */
.clay-btn-primary.is-secondary-tone {
  background: linear-gradient(180deg, #ffffff 0%, #fefcfb 100%);
  color: #AB3500;
  border: 1.5px solid rgba(255, 107, 53, .35);
  box-shadow:
    0 6px 16px -3px rgba(46, 40, 42, .08),
    inset 0 1.5px 1px 0 rgba(255, 255, 255, 1);
}

.clay-btn-social {
  width: 100%;
  background: #fff;
  color: #1f1a1c;
  border: 1px solid rgba(225, 191, 181, .65);
  border-radius: 9999px;
  padding: 13px;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow:
    0 6px 16px -3px rgba(46, 40, 42, .07),
    0 2px 6px -1px rgba(46, 40, 42, .04),
    inset 0 1.5px 1px 0 rgba(255, 255, 255, 1);
  transition: all .2s ease;
}
.clay-btn-social:hover:not(:disabled) { background: #faf7f7; border-color: rgba(225, 191, 181, .95); }
.clay-btn-social:active { transform: scale(.985); }
.clay-btn-social:disabled { opacity: .6; cursor: not-allowed; }
.clay-btn-social svg { width: 18px; height: 18px; flex-shrink: 0; }

.spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.spinner.dark { border-color: rgba(31, 26, 28, .2); border-top-color: #1f1a1c; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Links / footer ──────────────────────────────────────────────────── */
.forgot-link { text-align: right; margin: -4px 0 4px; }
.forgot-link button {
  background: none; border: none; padding: 0; font-family: inherit; cursor: pointer;
  font-size: 12.5px; color: #AB3500; font-weight: 700;
}
.forgot-link button:hover { text-decoration: underline; }

.divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; }
.divider-line { flex: 1; height: 1px; background: rgba(225, 191, 181, .4); }
.divider-text { font-size: 11.5px; font-weight: 500; color: #8d7168; white-space: nowrap; }

.footer-switch { text-align: center; margin-top: 18px; }
.footer-switch p { font-size: 13px; color: #594139; font-weight: 500; }
.footer-switch button {
  background: none; border: none; padding: 0; font-family: inherit; cursor: pointer;
  font-weight: 800; color: #FF6B35; margin-left: 4px; font-size: 13px;
}
.footer-switch button:hover { text-decoration: underline; }
.footer-sumate { display: flex; gap: 10px; margin-top: 14px; }
.footer-sumate a {
  flex: 1; text-align: center; padding: 11px 8px; border-radius: 14px;
  border: 1px solid #f0d9cf; background: #fff8f5; color: #ab3500;
  font-size: 13px; font-weight: 800; text-decoration: none;
}
.footer-sumate a:hover { background: #ffefe7; }

.legal-footer { text-align: center; margin-top: 18px; }
.legal-footer a {
  font-size: 11px;
  /* #aaa, no rgba(255,255,255,.4) — ese contraste era prácticamente
     invisible (fix real, ver CHANGELOG 5d2128f). Acá el link va sobre la
     card blanca, así que un gris medio sobre blanco funciona bien. */
  color: #8d7168;
  text-decoration: none;
}
.legal-footer a:hover { text-decoration: underline; }

/* ── TyC checkbox ─────────────────────────────────────────────────────── */
.tyc-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 12px;
  color: #594139;
  line-height: 1.5;
  margin: 10px 0 4px;
}
.tyc-row input {
  margin-top: 3px;
  accent-color: #FF6B35;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  cursor: pointer;
}
.tyc-row a { color: #FF6B35; font-weight: 700; text-decoration: none; }
.tyc-row a:hover { text-decoration: underline; }

/* ── Fuerza de contraseña (registro) ─────────────────────────────────── */
.pass-strength { display: flex; align-items: center; gap: 6px; padding: 6px 2px 0; }
.pass-strength .bar { height: 4px; flex: 1; border-radius: 4px; background: #eee0dc; transition: background .2s; }
.pass-strength .bar.on-weak   { background: #E5484D; }
.pass-strength .bar.on-medio  { background: #F5A623; }
.pass-strength .bar.on-fuerte { background: #34A853; }
.pass-strength .label { font-size: 10px; font-weight: 700; padding-left: 4px; white-space: nowrap; }

/* ── Panel de error de infraestructura (config.js devolvió null) ────── */
.infra-error { text-align: center; padding: 12px 4px; }
.infra-error p { font-size: 13px; color: #594139; margin-bottom: 16px; line-height: 1.5; }

/* ── Modal "Olvidé mi contraseña" ─────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(13, 13, 13, .6);
  backdrop-filter: blur(2px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-overlay.show { display: flex; }
.modal-card {
  width: 100%;
  max-width: 380px;
  background: #fff;
  border-radius: 26px;
  padding: 26px 22px;
  position: relative;
  box-shadow: 0 24px 60px -10px rgba(0, 0, 0, .35);
}
.modal-close {
  position: absolute;
  right: 14px;
  top: 14px;
  background: none;
  border: none;
  padding: 6px;
  color: #ab928a;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
}
.modal-close:hover { color: #594139; background: #f5f0ee; }
.modal-icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: rgba(255, 107, 53, .15);
  color: #FF6B35;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.modal-icon.success { background: #E8F5EA; color: #1E7D3A; width: 56px; height: 56px; margin: 0 auto 12px; }
.modal-title { font-size: 18px; font-weight: 800; color: #1f1a1c; margin-bottom: 6px; }
.modal-sub { font-size: 12.5px; color: #594139; margin-bottom: 18px; line-height: 1.6; }

/* Vistas hermanas: login / registro / nueva-clave. Se togglean con [hidden]. */
[hidden] { display: none !important; }

@media (max-width: 360px) {
  .headline { font-size: 27px; }
  .card { padding: 26px 18px 34px; }
}

/* ── Selector de rol al registrarse (Cliente / Comercio / Cadete) ──────── */
/* Tres opciones grandes, una debajo de la otra, ninguna marcada de entrada. */
.role-chips { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.role-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: #fcf9f9;
  border: 1.5px solid rgba(225, 191, 181, .7);
  border-radius: 14px;
  padding: 12px 14px;
  font-family: inherit;
  color: #2b1d18;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
  text-align: left;
}
.role-chip:hover { border-color: rgba(255, 107, 53, .55); }
.role-chip:focus-visible { outline: 2px solid #FF6B35; outline-offset: 2px; }
.role-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(255, 107, 53, .1);
  color: #E8551F;
}
.role-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.role-txt b { font-size: 14.5px; font-weight: 800; }
.role-txt small { font-size: 12px; color: #8d7168; line-height: 1.35; }
.role-chip.is-active {
  background: #fff4ee;
  border-color: #FF6B35;
  box-shadow: 0 6px 14px -6px rgba(255, 107, 53, .45);
}
.role-chip.is-active .role-ico { background: #FF6B35; color: #fff; }

/* Botón "primario" desactivado por disabled= (submit en curso) */
.clay-btn-primary .btn-label,
.clay-btn-social .btn-label { display: inline-block; }