/* publica.css -- EL CASCARON de las paginas publicas (fase 4 del rediseño,
2026-10-03): la cabecera clara y el pie. UNA copia para /login/, /signup/,
/forgot-password/, /reset-password/, /plan/, /contacto/, /terminos/,
/privacidad/ y /404.html, no una por pagina (asi se separaron las cuatro
cabeceras de antes). Solo tokens de assets/tokens.css: ni un hex.
Marcado:
...
El logo es el wordmark OFICIAL en linea (SVG, tools/marca_svg.py; colores
--marca-* de tokens.css). Se ve tambien en el telefono. */
.pub-cab{position:sticky; top:0; z-index:20; height:64px; padding:0 6%;
display:flex; align-items:center; justify-content:space-between; gap:1rem;
background:color-mix(in srgb, var(--white) 92%, transparent); backdrop-filter:blur(16px);
border-bottom:1px solid var(--border);}
.pub-logo{font-size:1.4rem; font-weight:800; letter-spacing:-0.03em; text-decoration:none; display:inline-flex; line-height:1;
align-items:center; min-height:44px;}
.pub-cab-der{display:flex; align-items:center; gap:1rem; font-size:.875rem;}
.pub-volver,.pub-cab-der a.pub-enlace{color:var(--muted); font-weight:600; text-decoration:none;
display:inline-flex; align-items:center; min-height:44px; min-width:44px;}
.pub-volver:hover,.pub-cab-der a.pub-enlace:hover{color:var(--navy);}
.pub-volver:focus-visible,.pub-logo:focus-visible,.pub-pie a:focus-visible{outline:2px solid var(--blue-tinta, var(--blue)); outline-offset:3px; border-radius:6px;}
.pub-idioma{display:inline-flex; border:1px solid var(--border); border-radius:100px;}
.pub-idioma button{border:0; background:transparent; padding:.35rem .7rem; font-size:.75rem; font-weight:700; color:var(--muted); cursor:pointer; font-family:inherit;
position:relative;}
.pub-idioma button:first-child{border-radius:100px 0 0 100px;}
.pub-idioma button:last-child{border-radius:0 100px 100px 0;}
/* El area que se toca llega a 44 x 44 SIN cambiar el aspecto: la pastilla mide
~26 px de alto, asi que cada boton extiende su zona 9 px arriba y abajo y
7 px hacia FUERA (6 el ultimo) (la izquierda del primero, la derecha del ultimo). Por eso
la pastilla ya no lleva overflow:hidden (recortaria esa zona): las esquinas
redondas las ponen los propios botones. */
.pub-idioma button::after{content:""; position:absolute; top:-9px; bottom:-9px; left:0; right:0;}
.pub-idioma button:first-child::after{left:-7px;}
.pub-idioma button:last-child::after{right:-6px;}
.pub-idioma button[aria-pressed="true"]{background:var(--navy); color:var(--white);}
/* El pie de la portada, en --navy (el wordmark del pie usaria --grad-dark). */
.pub-pie{background:var(--navy); color:color-mix(in srgb, var(--white) 55%, transparent); font-size:.82rem;
padding:2rem 6%; display:flex; justify-content:space-between; flex-wrap:wrap; gap:.75rem 1.5rem;}
.pub-pie a{color:color-mix(in srgb, var(--white) 75%, transparent); text-decoration:none;
display:inline-block; padding:14px 0; margin:-14px 0;}
/* (44 px, 2026-10-04) los enlaces del pie crecen 14 px arriba y abajo con un
margen negativo igual: la zona que se toca pasa de ~16 a ~44 px de alto y el
pie se ve exactamente igual. */
.pub-pie a:hover{color:var(--white);}
@media (max-width:520px){
.pub-cab{padding:0 16px; height:60px;}
.pub-cab-der .pub-volver{display:none;}
.pub-pie{padding:1.5rem 16px;}
}
/* ---------- Acceso: /login/, /signup/, /forgot-password/, /reset-password/
(fase 4, P2, 2026-10-03). Debajo del cascaron: a la izquierda un lado
CLARO con tres razones (solo escritorio), a la derecha el titulo SIEMPRE
visible y el formulario de siempre (.auth-form, .field, .btn-google,
.divider y .auth-footer siguen en styles.css). Recuperar y nueva
contraseña van en una tarjeta centrada, sin lado.
Marcado:
... una sola columna ... */
.pub-auth{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); min-height:calc(100vh - 64px); background:var(--white);}
.pub-auth-lado{background:linear-gradient(160deg, var(--bg2), var(--white)); border-right:1px solid var(--border);
padding:56px 7%; display:flex; flex-direction:column; justify-content:center; gap:18px;}
.pub-auth-eyebrow{font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--blue-deep);}
.pub-auth-lado .pub-auth-frase{font-size:1.75rem; font-weight:800; letter-spacing:-.02em; line-height:1.2; color:var(--navy); max-width:420px;}
.pub-auth-lado ul{list-style:none; display:grid; gap:14px; margin:0; padding:0; font-size:.92rem; color:var(--text); max-width:420px;}
.pub-auth-lado li{display:flex; gap:12px; align-items:flex-start; line-height:1.5;}
.pub-auth-lado li .ic{flex:0 0 auto; width:20px; height:20px; color:var(--blue-tinta, var(--blue)); margin-top:1px;}
.pub-auth-cuerpo{display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding:48px 24px 56px;}
.pub-auth-cabeza{max-width:380px; width:100%; margin-bottom:22px;}
.pub-auth-tit{font-size:1.65rem; font-weight:800; letter-spacing:-.02em; line-height:1.2; color:var(--navy); margin:0;}
.pub-auth-sub{font-size:.92rem; color:var(--muted); line-height:1.55; margin:6px 0 0;}
/* Una sola columna: recuperar y nueva contraseña. La tarjeta se centra. */
.pub-auth-solo{grid-template-columns:minmax(0,1fr); background:var(--bg);}
.pub-auth-solo .pub-auth-cuerpo{justify-content:center;}
.pub-tarjeta{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-card);
padding:36px 32px; max-width:440px; width:100%;}
.pub-tarjeta .pub-auth-cabeza,.pub-tarjeta .auth-form{max-width:none;}
/* Aviso ambar (correo sin confirmar, reintento de Google): tokens, sin hex. */
.pub-aviso{border:1px solid var(--border); border-radius:12px; padding:12px; margin:-2px 0 10px; background:var(--warning-tint-bg);}
.pub-aviso p{font-size:12.5px; color:var(--muted); line-height:1.55; margin:0 0 10px; display:flex; gap:8px; align-items:flex-start;}
.pub-aviso p .ic{flex:0 0 auto; width:16px; height:16px; color:var(--warning-deep); margin-top:1px;}
/* Icono en circulo para los estados ("Revisa tu correo"). */
.pub-estado-ico{width:56px; height:56px; border-radius:50%; background:var(--grad-tinta, var(--grad)); color:var(--white); display:grid; place-items:center; margin:0 auto 18px;}
.pub-estado-ico .ic{width:26px; height:26px;}
/* Los grupos del paso 2 del registro: Tu, Tu negocio, Direccion, Acceso. */
.pub-grupo{font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
margin:18px 0 8px; padding-top:14px; border-top:1px solid var(--border);}
.paso-titulo + .pub-grupo{margin-top:4px; padding-top:0; border-top:0;}
@media (max-width:900px){
.pub-auth{grid-template-columns:minmax(0,1fr); min-height:0;}
.pub-auth-lado{display:none;}
.pub-auth-cuerpo{padding:28px 16px 40px;}
}
@media (max-width:520px){
.pub-auth{min-height:calc(100vh - 60px);}
.pub-tarjeta{padding:26px 18px; border-radius:16px;}
}
/* El telefono (pasada-movil, 2026-10-09): el mismo bloque que styles.css para
las paginas publicas que no lo cargan (/planes/, /terminos/, /privacidad/,
/contacto/). Safari de iOS amplia la pagina al enfocar un campo con letra de
menos de 16 px; una fecha de iOS no respeta width:100%. Sin bloquear el
zoom. Lo vigila tools/prueba_pasada_movil.py. */
@media (max-width:767px), (pointer:coarse){
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]),
select, textarea{font-size:16px !important;}
input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"]{-webkit-appearance:none; appearance:none; min-width:0; max-width:100%; min-height:44px;}
input::-webkit-date-and-time-value{text-align:left;}
}