/* Acceso (/entrar, /registro): como la pantalla de acceso de la app */
body .pagina.acceso { padding-bottom: calc(24px + env(safe-area-inset-bottom)); gap: 14px; }
.acceso-cabeza { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; margin-top: 4px; }
.acceso-mascota { width: 170px; margin-bottom: -18px; position: relative; z-index: 2; animation: bota 2s ease-in-out infinite; }
@keyframes bota { 50% { transform: translateY(-8px) rotate(-3deg); } }
.acceso-cabeza .cartoon { font-size: 28px; }
.acceso-caja { background: var(--crema); display: flex; flex-direction: column; gap: 14px; padding: 18px; }
.acceso-caja .pestanas { align-self: stretch; margin: 0; }
.acceso-caja .pestanas a { flex: 1; text-align: center; text-decoration: none; padding: 9px 12px; border-radius: 999px; font-family: var(--titulos); font-weight: 800; color: var(--tinta-suave); }
.acceso-caja .pestanas a[aria-selected="true"] { background: linear-gradient(180deg, #FFCB5C, var(--oro)); color: var(--tinta); box-shadow: inset 0 0 0 2px var(--canto); }
.acceso-ayuda { margin: 0; color: var(--tinta-suave); font-size: 15px; }
.acceso-ayuda b { color: var(--tinta); }
.acceso-form { display: flex; flex-direction: column; gap: 10px; }
.campo.codigo { text-align: center; letter-spacing: 12px; font-size: 28px; text-transform: uppercase; font-family: var(--titulos); }
.acceso-reenviar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.acceso-reenviar .boton { padding: 8px 14px; font-size: 15px; }
.acceso-reenviar .boton svg { width: 18px; height: 18px; }
.acceso-error { margin: 0; padding: 10px 14px; border-radius: 14px; background: #FDE3DC; border: 2px solid var(--peligro); color: #8A2410; font-weight: 800; }
.acceso-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.acceso-chips svg { color: var(--cielo-hondo); }
.acceso-legal { text-align: center; margin: 0; font-size: 13px; font-weight: 800; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.5); }
.acceso-legal a { color: #fff; }
.acepto { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; font-weight: 700; color: var(--tinta); cursor: pointer; }
.acepto input { width: 22px; height: 22px; flex: none; accent-color: var(--hierba); margin-top: 1px; }
.acepto a { color: var(--cielo-hondo); font-weight: 800; }
/* Aviso informativo (p. ej. "Ya tenías cuenta: te hemos enviado un código para entrar") */
.acceso-aviso { margin: 0; padding: 10px 14px; border-radius: 14px; background: #FFF4D6; border: 2px solid var(--oro); color: var(--tinta); font-weight: 800; }