*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

:root {
  --azul: #1A6BFF;
  --azul-osc: #1259E0;
  --azul-claro: #EEF4FF;
  --naranja: #FFAA00;
  --naranja-claro: #FFF8EC;
  --negro: #0A0A0F;
  --blanco: #FFFFFF;
  --gris: #6B7280;
  --gris-claro: #F4F6FB;
  --borde: rgba(0,0,0,0.10);
  --error: #EF4444;
  --error-claro: #FEF2F2;
}

html, body {
  height: 100%;
  overscroll-behavior: none;
}

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--gris-claro);
  color: var(--negro);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  min-height: 100dvh;
}

.pantalla { display: none; min-height: 100vh; min-height: 100dvh; flex-direction: column; }
.pantalla.activa { display: flex; }

.spinner {
  width: 32px; height: 32px; margin: 40px auto;
  border: 3px solid var(--borde); border-top-color: var(--azul);
  border-radius: 50%; animation: girar 0.7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ── LOGIN ── */
.cabecera-login {
  display: flex; align-items: center; gap: 10px;
  padding: 24px 20px 8px;
}
.cabecera-login .logo { width: 36px; height: 36px; border-radius: 9px; box-shadow: 0 2px 8px rgba(26,107,255,0.25); }
.logo-texto { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 1.2rem; letter-spacing: -0.03em; }

.login-lista {
  flex: 1; padding: 16px 20px 32px;
  display: flex; flex-direction: column; gap: 12px;
}
.captador-btn {
  width: 100%; text-align: left;
  background: var(--blanco); border: 1.5px solid var(--borde);
  border-radius: 16px; padding: 18px 20px;
  font-family: 'DM Sans', sans-serif; cursor: pointer;
  transition: border-color 0.15s, transform 0.1s;
}
.captador-btn:active { transform: scale(0.98); border-color: var(--azul); }
.captador-btn .nombre { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; }
.captador-btn .puesto { color: var(--gris); font-size: 0.9rem; margin-top: 2px; }

.login-pin {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  padding: 12px 24px 32px; text-align: center;
}
.btn-volver {
  align-self: flex-start; background: none; border: none;
  color: var(--gris); font-size: 0.95rem; font-family: 'DM Sans', sans-serif;
  padding: 10px 0; cursor: pointer;
}
.pin-nombre { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 1.5rem; letter-spacing: -0.03em; margin-top: 16px; }
.pin-label { color: var(--gris); margin-top: 6px; margin-bottom: 24px; }

.pin-dots { display: flex; gap: 16px; margin-bottom: 8px; }
.pin-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--borde); }
.pin-dot.lleno { background: var(--azul); border-color: var(--azul); }
.pin-dot.error { background: var(--error); border-color: var(--error); }

.pin-error { color: var(--error); font-size: 0.88rem; min-height: 20px; margin: 10px 0 8px; }

.teclado {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  width: 100%; max-width: 300px; margin-top: 16px;
}
.teclado button {
  aspect-ratio: 1; border-radius: 50%; border: 1.5px solid var(--borde);
  background: var(--blanco); font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 1.5rem; font-weight: 700; color: var(--negro);
  cursor: pointer; transition: background 0.1s, transform 0.1s;
}
.teclado button:active { background: var(--azul-claro); transform: scale(0.94); }
.teclado .tecla-vacia { visibility: hidden; border: none; background: none; }
#tecla-borrar { font-size: 1.2rem; }

/* ── CABECERA COMÚN (registro / cuenta) ── */
.cabecera {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 16px; background: var(--blanco); border-bottom: 1px solid var(--borde);
}
.cabecera-nombre { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 1rem; }
.cabecera-ubicacion { font-size: 0.78rem; color: var(--gris); margin-top: 2px; }
.btn-icono {
  width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--borde);
  background: var(--blanco); font-size: 1.1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}

/* ── REGISTRO ── */
.contenido-registro { flex: 1; padding: 32px 24px; display: flex; flex-direction: column; }
.titulo-registro { font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.6rem; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 24px; }
.input-email {
  width: 100%; padding: 18px 16px; font-size: 1.15rem; font-family: 'DM Sans', sans-serif;
  border: 1.5px solid var(--borde); border-radius: 14px; outline: none;
  transition: border-color 0.15s;
}
.input-email:focus { border-color: var(--azul); }
.rgpd-check {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 20px;
  font-size: 0.83rem; color: var(--gris); line-height: 1.5; cursor: pointer;
}
.rgpd-check input { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; accent-color: var(--azul); }
.btn-grande {
  margin-top: 28px; width: 100%; padding: 18px; border: none; border-radius: 100px;
  background: var(--negro); color: var(--blanco); font-family: 'DM Sans', sans-serif;
  font-size: 1.05rem; font-weight: 600; cursor: pointer; transition: opacity 0.15s;
}
.btn-grande:disabled { opacity: 0.35; cursor: not-allowed; }
.registro-msg { text-align: center; margin-top: 16px; font-size: 0.9rem; min-height: 22px; }
.registro-msg.exito { color: #16A34A; }
.registro-msg.error { color: var(--error); }

.btn-mi-cuenta {
  padding: 18px; background: none; border: none; border-top: 1px solid var(--borde);
  color: var(--azul); font-weight: 600; font-family: 'DM Sans', sans-serif;
  font-size: 0.95rem; cursor: pointer;
}

/* ── MI CUENTA ── */
.contenido-cuenta { flex: 1; padding: 24px 20px 32px; display: flex; flex-direction: column; gap: 14px; }
.stat-card {
  background: var(--blanco); border: 1.5px solid var(--borde); border-radius: 18px;
  padding: 22px 20px; text-align: center;
}
.stat-card.destacada { background: var(--azul); border-color: var(--azul); }
.stat-card.destacada .stat-label, .stat-card.destacada .stat-nota { color: rgba(255,255,255,0.85); }
.stat-card.destacada .stat-num { color: var(--blanco); }
.stat-num { font-family: 'Bricolage Grotesque', sans-serif; font-size: 2.6rem; font-weight: 800; letter-spacing: -0.04em; color: var(--negro); }
.stat-label { font-size: 0.92rem; color: var(--gris); margin-top: 4px; font-weight: 500; }
.stat-nota { font-size: 0.76rem; color: var(--gris); margin-top: 6px; }

.btn-secundario {
  margin-top: 8px; padding: 16px; border-radius: 100px; border: 1.5px solid var(--negro);
  background: var(--blanco); color: var(--negro); font-family: 'DM Sans', sans-serif;
  font-weight: 600; font-size: 0.95rem; cursor: pointer;
}
.btn-texto-peligro {
  background: none; border: none; color: var(--error); font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem; padding: 12px; cursor: pointer; margin-top: 4px;
}

/* ── TOAST ── */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 100px);
  background: var(--negro); color: var(--blanco); padding: 12px 20px; border-radius: 100px;
  font-size: 0.88rem; opacity: 0; transition: transform 0.25s, opacity 0.25s;
  pointer-events: none; max-width: 90vw; text-align: center; z-index: 999;
}
.toast.mostrar { transform: translate(-50%, 0); opacity: 1; }
.toast.error { background: var(--error); }

@media (min-width: 480px) {
  #pantalla-login, #pantalla-registro, #pantalla-cuenta { max-width: 460px; margin: 0 auto; width: 100%; }
  body { background: var(--negro); }
  .pantalla { background: var(--gris-claro); min-height: 100vh; }
}