/* ═══════════════════════════════════════════════════════════
   YouPlanFit · Design System V2 — componentes compartidos
   ═══════════════════════════════════════════════════════════
   Requiere design-v2-tokens.css cargado antes.

   REGLA DE AISLAMIENTO: esta hoja NUNCA define selectores de clase
   "pelados" como .btn o .field (son las clases genéricas que usa TODO
   app.html sin migrar — sobrescribirlas a secas cambiaría cada botón y
   cada input de la aplicación entera, no solo los de la sección que se
   está migrando). En su lugar, cada componente se escopa con un selector
   descendiente al contenedor real que lo usa (p.ej. `.sesion .btn`,
   `#lead .field`). Cada grupo de migración añade sus propios contenedores
   a esta hoja; nunca reglas sueltas de `.btn`/`.field`.

   GRUPO A — login / registro / recuperación:
     .sesion   → diálogo de sesión (sesion-ui.js, ya global: login, "ya
                 estás dentro", y el cuaderno de cargas #anotarCaja que
                 reutiliza el mismo componente — se beneficia gratis)
     .puerta   → overlay completo de "la puerta" en app.html, sus 3 pasos:
                 #puertaPerfil (elegir para quién es el plan),
                 #puertaAlta/#lead (alta de cuenta),
                 #puertaCodigo (verificar correo / recuperar contraseña)
   ═══════════════════════════════════════════════════════════ */

/* ── Diálogo modal (.sesion) — usado por login y por "ya estás dentro" ── */
.sesion{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  padding:20px;background:rgba(3,11,16,.72);backdrop-filter:blur(8px);
}
.sesion__panel{
  position:relative;width:min(440px,100%);
  background:linear-gradient(180deg,rgba(18,39,52,.95),rgba(8,23,32,.97));
  border:1px solid rgba(90,184,222,.24);border-radius:22px;
  padding:34px 30px;color:var(--v2-text);
  box-shadow:var(--v2-sombra),inset 0 1px rgba(255,255,255,.05);
  backdrop-filter:blur(18px);
}
.sesion__panel--ancho{width:min(560px,100%);max-height:88vh;overflow-y:auto}
.sesion__cerrar{
  position:absolute;top:14px;right:16px;border:0;background:transparent;
  font-size:1.6rem;line-height:1;cursor:pointer;color:var(--v2-muted);
  transition:color var(--v2-dur) var(--v2-curva);
}
.sesion__cerrar:hover{color:var(--v2-text)}
.sesion .eyebrow{
  color:#81dff8;font-size:.68rem;letter-spacing:.2em;font-weight:700;
  text-transform:uppercase;margin:0 0 8px;
}
.sesion__panel h2{
  font-family:var(--v2-display);color:var(--v2-text);
  margin:0 0 12px;font-size:1.5rem;line-height:1.15;letter-spacing:-.01em;
}
.sesion__lead{margin:0 0 20px;font-size:.92rem;color:var(--v2-muted);line-height:1.55}
.sesion__aviso{margin:12px 0 0;font-size:.84rem;color:var(--v2-pink);min-height:1.2em}
.sesion__olvido{margin:16px 0 0;text-align:center;font-size:.85rem}
.sesion__plan{
  margin:0 0 20px;padding:14px 16px;border-radius:14px;
  background:rgba(10,37,47,.6);border:1px solid var(--v2-line);
  font-size:.9rem;line-height:1.5;color:var(--v2-text);
}
.sesion__plan em{font-style:normal;color:var(--v2-muted)}
.sesion__acciones{display:flex;gap:10px;flex-wrap:wrap}
.sesion__acciones .btn{flex:1 1 auto}
.sesion__salir{
  display:block;margin:20px auto 0;border:0;background:transparent;
  font:inherit;font-size:.82rem;color:var(--v2-muted);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;
}
.sesion__salir:hover{color:var(--v2-text)}
.sesion__datos{
  margin-top:20px;padding-top:16px;border-top:1px solid var(--v2-line);
  font-size:.8rem;line-height:1.6;color:var(--v2-muted);text-align:left;
}
.sesion__datos summary{cursor:pointer;font-weight:600;color:var(--v2-text);list-style:none;padding:2px 0}
.sesion__datos summary::-webkit-details-marker{display:none}
.sesion__datos summary::after{content:' +';font-weight:400;opacity:.6}
.sesion__datos[open] summary::after{content:' –'}
.sesion__datos p{margin:12px 0 0}
.sesion__datos a{color:var(--v2-cyan2)}

/* ── Botones y enlaces, escopados a los contenedores del Grupo A ── */
.sesion .btn,
.puerta .btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:100%;padding:14px 22px;border-radius:14px;border:0;
  font-weight:700;font-size:.92rem;color:#fff;cursor:pointer;
  background:linear-gradient(135deg,var(--v2-blue),var(--v2-cyan));
  box-shadow:0 8px 30px rgba(13,147,176,.25);
  transition:transform var(--v2-dur) var(--v2-curva),box-shadow var(--v2-dur) var(--v2-curva);
}
.sesion .btn:hover,
.puerta .btn:hover{transform:translateY(-2px);box-shadow:0 12px 38px rgba(19,185,231,.2)}
.sesion .btn:disabled,
.puerta .btn:disabled{opacity:.5;cursor:default;transform:none}
.sesion .enlace,
.puerta .enlace{
  background:transparent;border:0;color:var(--v2-cyan2);cursor:pointer;
  font:inherit;text-decoration:underline;text-underline-offset:3px;
}

/* ── Campos de formulario, mismo alcance ── */
.sesion .field,
.puerta .field{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.sesion .field label,
.puerta .field label{
  font-family:var(--v2-body);font-size:.72rem;text-transform:uppercase;
  letter-spacing:.08em;font-weight:700;color:var(--v2-muted);
}
.sesion .field input,
.sesion .field select,
.puerta .field input,
.puerta .field select{
  background:#0a1921;border:1px solid var(--v2-line);border-radius:12px;
  padding:13px 14px;color:var(--v2-text);font:inherit;font-size:.95rem;
  transition:border-color var(--v2-dur) var(--v2-curva),background var(--v2-dur) var(--v2-curva);
}
.sesion .field input::placeholder,
.puerta .field input::placeholder{color:#4c6470}
.sesion .field input:hover,
.puerta .field input:hover{background:#0d202a}
.sesion .field input:focus,
.sesion .field select:focus,
.puerta .field input:focus,
.puerta .field select:focus{
  outline:none;border-color:var(--v2-cyan);
  box-shadow:0 0 0 3px rgba(19,185,231,.18);
}
.sesion .field input.err,
.puerta .field input.err{border-color:var(--v2-pink);background:rgba(255,95,134,.08)}
.sesion .field small,
.puerta .field small{color:var(--v2-muted);font-size:.77rem;line-height:1.45}

/* ══════════════════════════════════════════════════════════
   .puerta — overlay completo de acceso (app.html): perfil → alta → código
   ══════════════════════════════════════════════════════════ */
.puerta{
  background:
    radial-gradient(circle at 20% 0%,#0c2736 0,transparent 32%),
    linear-gradient(180deg,var(--v2-bg),var(--v2-bg2) 65%,var(--v2-bg));
  color:var(--v2-text);
}
.puerta__logo .logo__lema{color:var(--v2-muted)}
.puerta .eyebrow{
  color:#81dff8;font-size:.68rem;letter-spacing:.2em;font-weight:700;
  text-transform:uppercase;margin:0 0 14px;
}
.puerta h2{
  font-family:var(--v2-display);color:var(--v2-text);
  letter-spacing:-.02em;line-height:1.05;
}
.puerta__lead{color:var(--v2-muted)}
.puerta__nota{color:var(--v2-muted);border-left-color:var(--v2-line)}
.puerta__nota b{color:var(--v2-text)}
.puerta__ya,.puerta__atras,.codigo__pie{color:var(--v2-muted)}

/* Paso 1 · tarjetas de perfil */
.perfiles{display:grid;gap:16px}
@media (min-width:720px){.perfiles{grid-template-columns:repeat(3,1fr)}}
.perfil{
  position:relative;display:grid;overflow:hidden;border-radius:18px;
  border:1px solid rgba(90,184,222,.24);background:var(--v2-panel-solid);
  cursor:pointer;padding:0;transition:transform var(--v2-dur) var(--v2-curva),border-color var(--v2-dur) var(--v2-curva);
}
.perfil:hover{transform:translateY(-3px);border-color:var(--v2-cyan)}
.perfil__foto{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--v2-bg2)}
.perfil__foto img{width:100%;height:100%;object-fit:cover;display:block}
.perfil__cuerpo{display:grid;gap:4px;padding:16px;text-align:left}
.perfil__nombre{font-family:var(--v2-display);font-size:1.1rem;color:var(--v2-text)}
.perfil__sub{font-size:.78rem;color:var(--v2-muted)}
.perfil__cta{margin-top:6px;font-size:.76rem;font-weight:700;color:var(--v2-cyan2)}

/* Paso 2 · alta de cuenta */
#puertaAlta{max-width:960px;margin:0 auto}
.captura{
  background:linear-gradient(180deg,rgba(18,39,52,.93),rgba(8,23,32,.94));
  border:1px solid rgba(90,184,222,.24);border-radius:22px;
  box-shadow:var(--v2-sombra-sm),inset 0 1px rgba(255,255,255,.05);
  backdrop-filter:blur(18px);
}
.lead__texto h3{font-family:var(--v2-display);color:var(--v2-text)}
.lead__texto .eyebrow{color:var(--v2-cyan2)}
.lead__texto p{color:var(--v2-muted)}
.lead__gana{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.lead__gana li{position:relative;padding-left:24px;font-size:.9rem;line-height:1.45;color:var(--v2-muted)}
.lead__gana li::before{
  content:'';position:absolute;left:0;top:.5em;width:14px;height:14px;
  border-radius:50%;background:rgba(19,185,231,.15);
  box-shadow:inset 0 0 0 1px var(--v2-cyan);
}
.lead__form{
  background:rgba(6,17,23,.55);border:1px solid var(--v2-line);
  border-radius:16px;padding:22px;display:grid;gap:0;
}
.captura .lead__form label{color:var(--v2-muted)}
.captura .lead__consent span{color:var(--v2-muted)}
.captura .lead__form input,
.captura .lead__form select{color:var(--v2-text);background:#0a1921}
.lead__consent{display:flex;gap:10px;align-items:flex-start;margin:4px 0 16px;font-size:.85rem}
.lead__consent input[type="checkbox"]{accent-color:var(--v2-cyan);width:18px;height:18px;flex:0 0 18px;margin-top:2px}
.lead__muestra{color:var(--v2-muted);font-size:.8rem;line-height:1.5}
.lead__aviso{color:var(--v2-pink);font-size:.84rem;min-height:1.2em}
.lead__ya{color:var(--v2-muted);font-size:.88rem;text-align:center;margin-top:14px}

/* Paso 3 · código de verificación / recuperación */
#puertaCodigo{max-width:520px;margin:0 auto;text-align:center}
.codigo__campo{
  display:block;width:100%;text-align:center;font-family:var(--v2-mono,monospace);
  font-size:1.6rem;letter-spacing:.5em;padding:16px 14px 16px 20px;
  background:#0a1921;border:1px solid var(--v2-line);border-radius:14px;color:var(--v2-text);
  margin-bottom:16px;
}
.codigo__campo:focus{outline:none;border-color:var(--v2-cyan);box-shadow:0 0 0 3px rgba(19,185,231,.18)}

/* ── Refuerzo de especificidad para el diálogo de LOGIN (#sesionCaja) ──
   portada.css escopa sus reglas viejas del diálogo como `#sesionCaja
   .sesion__panel` (un id + una clase). Un selector de id siempre gana a
   cualquier cantidad de clases sin id, así que las reglas `.sesion__panel`
   de arriba no le ganaban ahí pese a cargar después. Aquí no se toca
   portada.css: se repiten los mismos selectores con el id, para igualar la
   especificidad y ganar por orden de carga (esta hoja es la última). */
#sesionCaja .sesion__panel{
  background:linear-gradient(180deg,rgba(18,39,52,.95),rgba(8,23,32,.97));
  border:1px solid rgba(90,184,222,.24);border-radius:22px;
  color:var(--v2-text);box-shadow:var(--v2-sombra),inset 0 1px rgba(255,255,255,.05);
  backdrop-filter:blur(18px);
}
#sesionCaja .sesion__cerrar{color:var(--v2-muted)}
#sesionCaja .sesion__cerrar:hover{color:var(--v2-text)}
#sesionCaja .sesion__panel h2{font-family:var(--v2-display);color:var(--v2-text);letter-spacing:-.01em}
#sesionCaja .sesion__lead{color:var(--v2-muted)}
#sesionCaja .sesion__aviso{color:var(--v2-pink)}
#sesionCaja .sesion__plan{background:rgba(10,37,47,.6);border:1px solid var(--v2-line);color:var(--v2-text)}
#sesionCaja .sesion__plan em{color:var(--v2-muted)}
#sesionCaja .sesion__salir{color:var(--v2-muted)}
#sesionCaja .sesion__salir:hover{color:var(--v2-text)}
#sesionCaja .sesion__datos{border-top:1px solid var(--v2-line);color:var(--v2-muted)}
#sesionCaja .sesion__datos summary{color:var(--v2-text)}
#sesionCaja .sesion__datos a{color:var(--v2-cyan2)}
#sesionCaja .enlace{color:var(--v2-cyan2)}
#sesionCaja .enlace:hover{color:var(--v2-cyan2);opacity:.85}

/* Marca "YouPlanFit" partida en dos colores dondequiera que aparezca como
   texto real (no la imagen del logo, que trae el nombre ya dibujado en
   los píxeles y no se puede recolorear a medias). Vive aquí, no en una
   hoja de una sola página, porque tanto la portada como la app real
   necesitan la misma clase. */
.v2-fit{color:var(--v2-cyan2) !important}
#sesionCaja .enlace:focus-visible{outline:2.5px solid var(--v2-cyan);outline-offset:3px;border-radius:3px}