/* ==========================================================================
* CUENTAS — entrar, crear cuenta, recuperar y «Mi perfil».
*
* PHP de este módulo: inc/cuentas.php
*
* --------------------------------------------------------------------------
* DÓNDE SE CARGA Y POR QUÉ EN TODAS PARTES
* --------------------------------------------------------------------------
* Esta hoja va en TODAS las pantallas del sitio, y es la única excepción a la
* regla de inc/encolar-modulos.php. El motivo es el bloque «Entra o crea tu
* cuenta» (`.lt-invitacion`): lo van a llamar las reseñas, el foro y cualquier
* formulario que venga después, y el módulo no puede adivinar en qué plantillas.
* Encolarla al vuelo desde la función haría que la hoja llegara después del
* HTML y el bloque se vería un instante sin estilo. El razonamiento largo está
* en `lt_cuentas_encolar()`.
*
* Por eso esta hoja es CORTA a propósito: todo lo que ya existe —botones,
* contenedores, tipografía— se reutiliza de base.css. Aquí solo está lo que no
* había: los controles de formulario y los dos bloques nuevos.
*
* --------------------------------------------------------------------------
* POR QUÉ NO SE REUTILIZAN .lt-control / .lt-campo / .lt-aviso
* --------------------------------------------------------------------------
* Existen, y están bien, pero viven en assets/css/resto.css, que SOLO se encola
* en cupones, marketplace, videos y comunidad. En una página suelta —que es lo
* que son las cuatro pantallas de cuentas— esas clases no tienen ni una regla:
* los campos saldrían con el estilo por defecto del navegador. Duplicar cuatro
* reglas pesa menos que arrastrar resto.css entera (34 KB) a cada pantalla, y
* mucho menos que moverla a la capa global.
*
* Los nombres llevan `lt-cuenta-` justo para NO chocar con las de resto.css el
* día que las dos hojas coincidan en la misma pantalla.
*
* --------------------------------------------------------------------------
* PALETA
* --------------------------------------------------------------------------
* Azul, blanco y negro. Ni un verde y ni un rojo, tampoco en los errores: un
* error se distingue por el borde casi negro, por el titular en negrita y por
* `role="alert"`, no por el color. Es además lo que pide el criterio 1.4.1 de
* la WCAG —el color nunca puede ser lo único que informa— y lo que hace que el
* aviso siga funcionando para quien no distingue el rojo del verde.
* ========================================================================== */
/* ==========================================================================
* 1 · EL MARCO DE LAS CUATRO PANTALLAS
* ========================================================================== */
/*
* page.php mete el contenido en `.lt-pagina__prosa`, que limita a 72 caracteres
* y sube el cuerpo a 1.05rem. Eso está pensado para leer una política de
* privacidad, no para un formulario: 72ch deja los campos anclados a la
* izquierda de un contenedor de 1240px, con medio metro de blanco al lado.
*
* Se anula SOLO en estas cuatro páginas, con la clase que pone
* `lt_cuentas_clases_cuerpo()`. La regla no puede tocar a nadie más.
*/
body.lt-cuenta-pagina .lt-pagina__prosa {
max-width: none;
font-size: var(--fs-texto);
}
/*
* El h1 que pinta page.php. En una página suelta no hay ninguna hoja que lo
* estilice (`.lt-cabecera-listado` vive en ayudas-eventos.css, que aquí no se
* carga), así que sin esto el título sale pegado al borde y sin aire.
*/
body.lt-cuenta-pagina .lt-cabecera-listado {
padding-top: var(--e-5);
text-align: center;
}
body.lt-cuenta-pagina .lt-cabecera-listado h1 {
margin: 0;
font-size: var(--fs-h2);
}
/*
* La columna. 34rem son unos 545px: lo bastante ancho para que un correo largo
* no se corte y lo bastante estrecho para que el ojo no tenga que barrer la
* pantalla entre la etiqueta y el campo.
*
* `margin-inline: auto` la centra. Sin él quedaba pegada a la izquierda y a
* 1920px parecía media pantalla vacía por un fallo de maquetación.
*/
.lt-cuenta {
max-width: 34rem;
margin-inline: auto;
padding-bottom: var(--e-5);
}
/*
* «MI PERFIL» VA AL ANCHO DEL SITIO. Cambiado el 2026-08-16.
*
* Estaba en 42rem —unos 672px— dentro de un contenedor de 1240. El dueño lo vio
* y dijo lo que era: «el ancho de la caja está muy delgado... se ve muy vacío».
* Y tenía delante la prueba: justo debajo, «Promocionar una publicación» ocupa
* el ancho normal, así que la misma pantalla tenía dos anchos distintos.
*
* Las otras tres pantallas de cuenta —entrar, crear, recuperar— siguen en 34rem
* y así se quedan: ahí sí hay un formulario corto y nada más, y ensancharlo solo
* separaría la etiqueta de su campo.
*/
.lt-cuenta--perfil { max-width: var(--contenedor); }
/*
* LAS DOS COLUMNAS.
*
* A la izquierda «Tus datos», que es lo largo. A la derecha el resto, que es
* corto. 1.7fr / 1fr y no mitad y mitad: el formulario de la izquierda tiene
* campos de texto que necesitan sitio, y las cajas de la derecha son un botón
* cada una.
*
* Empezó en 1.4 y el dueño la abrió más el 2026-08-16: «que el recuadro que
* dice tus datos sea un poco más amplio y el que dice tu negocio un poco más
* angosto, para que se haga una armonía visual diferente». A 1192px de
* contenedor eso son 730 y 430.
*
* `align-items: start` para que las cajas de la derecha no se estiren al alto
* de la izquierda: una tarjeta de «Salir» de 600px de alto con un botón perdido
* arriba es peor que el hueco.
*
* 60rem de corte porque a menos que eso las dos columnas dejarían los campos
* más estrechos de lo que estaban antes de todo esto.
*/
.lt-cuenta-columnas { display: block; }
@media (min-width: 60rem) {
.lt-cuenta-columnas {
display: grid;
grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
gap: var(--e-4);
align-items: start;
}
}
/* Dentro de cada columna los bloques se apilan con su propio aire. */
.lt-cuenta-columnas__lado {
display: flex;
flex-direction: column;
gap: var(--e-4);
/* `min-width: 0` o un campo largo ensancha la columna y rompe la rejilla. */
min-width: 0;
}
/* El bloque ya no pone su propio margen: el hueco lo pone la columna. */
.lt-cuenta-columnas__lado > .lt-cuenta-bloque { margin-bottom: 0; }
/*
* LA CONTRASENA, PEGADA A «TUS DATOS».
*
* El dueno la queria «en el mismo coso» que sus datos, seccionada. Se le quita
* el hueco de arriba y se le pone una raya: las dos cajas se leen como una sola
* con dos apartados, que es lo que pidio, sin fusionar los formularios —cada
* uno guarda por su lado, y tiene que seguir siendo asi—.
*/
.lt-cuenta-columnas__lado > .lt-cuenta-bloque--pegado {
margin-top: calc(var(--e-4) * -1 + var(--e-3));
padding-top: var(--e-3);
border-top: 1px solid var(--linea, rgba(14, 33, 56, .12));
}
/*
* «Busca tu negocio y pide su ficha». Lo unico que quedo de la lista que se
* retiro; va en su propia caja para que no se lea como una nota al pie del
* estado de verificacion que tiene justo encima.
*/
.lt-cuenta-pedir {
margin-top: var(--e-3);
padding-top: var(--e-3);
border-top: 1px solid var(--linea, rgba(14, 33, 56, .12));
}
.lt-cuenta-pedir__texto { margin: 0 0 var(--e-2); }
.lt-cuenta-pedir__accion { margin: 0 0 6px; }
/*
* «VER MIS PUBLICACIONES», DESPEGADO DE LAS TARJETAS.
*
* Iba pegado al borde de la rejilla y se leia como una cuarta tarjeta mal
* alineada. Y son dos cosas distintas: las tarjetas ABREN algo nuevo, este
* boton lleva a mirar lo que ya hay.
*/
.lt-pagos__ver-mias { margin-top: var(--e-3); }
/*
* LA GUIA DE CONTRASENA. Lista numerada de verdad: el orden es la informacion
* —«que sea larga» importa mas que «que no salga de tus datos»— y una lista sin
* numeros no lo dice.
*/
.lt-cuenta-guia {
margin: 0 0 var(--e-2);
padding-left: 1.25em;
display: flex;
flex-direction: column;
gap: var(--e-2);
font-size: var(--fs-chico);
line-height: 1.55;
color: var(--apagado);
}
.lt-cuenta-guia ::marker { color: var(--marca); font-weight: 700; }
/* El titular de cada consejo, en tinta plena: es lo que se lee de un vistazo. */
.lt-cuenta-guia strong {
display: block;
color: var(--tinta);
font-weight: 700;
}
.lt-cuenta-entradilla {
margin: 0 0 var(--e-3);
color: var(--apagado);
}
/* ==========================================================================
* 2 · LOS CAMPOS
* ========================================================================== */
.lt-cuenta-formulario {
margin: 0 0 var(--e-3);
padding: var(--e-3);
background: var(--hueso);
border: 1px solid var(--linea);
border-radius: var(--radio-tarjeta);
}
.lt-cuenta-campo {
margin: 0 0 var(--e-3);
}
.lt-cuenta-campo:last-of-type { margin-bottom: 0; }
.lt-cuenta-campo label {
display: block;
margin-bottom: 6px;
font-size: var(--fs-chico);
font-weight: var(--peso-fuerte);
color: var(--tinta);
}
.lt-cuenta-control {
display: block;
width: 100%;
/*
* `box-sizing` explícito y no heredado: si un día alguien retira el reinicio
* global, un campo al 100% con 14px de relleno se sale de su caja y aparece
* la barra horizontal que este sitio no tiene nunca.
*/
box-sizing: border-box;
min-height: 48px;
padding: 12px 14px;
border: 1.5px solid var(--linea);
border-radius: var(--radio-chico);
background: var(--blanco);
color: var(--tinta);
font-family: var(--fuente-texto);
/*
* 16px CLAVADOS Y NO 14. Por debajo de 16px, Safari en iPhone hace zoom solo
* al tocar el campo y deja la página descolocada y en horizontal. Es el fallo
* más viejo de los formularios móviles y se arregla aquí, no con un
* `maximum-scale` en la etiqueta viewport (eso además impide ampliar, que es
* una barrera de accesibilidad de verdad).
*/
font-size: 16px;
line-height: 1.4;
transition: border-color var(--transicion), box-shadow var(--transicion);
}
.lt-cuenta-control:hover { border-color: var(--marca); }
.lt-cuenta-control:focus {
outline: none;
border-color: var(--marca);
/* El anillo se pinta con `box-shadow` y no con `outline` para que siga el
redondeo del campo en lugar de dibujar un rectángulo alrededor. */
box-shadow: 0 0 0 3px rgba(41, 80, 145, .22);
}
select.lt-cuenta-control { cursor: pointer; }
.lt-cuenta-pista {
display: block;
margin-top: 6px;
font-size: var(--fs-chico);
/* #5A5A5A sobre el hueso del formulario (#F6F3EE): 6,2:1. */
color: var(--apagado);
}
/* --- Casillas y botones de opción ------------------------------------- */
/*
* La fila entera mide 44px de alto y la etiqueta va dentro del área pulsable:
* un cuadradito de 18px es imposible de acertar con el pulgar, y la etiqueta
* asociada por `for` amplía la zona sin ningún JavaScript.
*/
.lt-cuenta-campo--casilla {
display: flex;
align-items: flex-start;
gap: 10px;
min-height: 44px;
margin-bottom: var(--e-2);
padding-block: 10px;
}
.lt-cuenta-campo--casilla input {
flex: 0 0 auto;
width: 20px;
height: 20px;
/* Alinea el cuadrado con la primera línea del texto cuando la etiqueta ocupa
dos renglones, que es lo normal en móvil. */
margin: 2px 0 0;
accent-color: var(--marca);
cursor: pointer;
}
.lt-cuenta-campo--casilla label {
margin: 0;
font-weight: var(--peso-texto);
font-size: var(--fs-texto);
cursor: pointer;
}
/*
* EL ENLACE DENTRO DE LA ETIQUETA — MEDIDO HOY (2026-08-09) EN LA PANTALLA DE
* CREAR CUENTA: «política de privacidad» daba 149x17 en 360, 390, 768 y 1280.
* Diecisiete píxeles de alto, y es el único enlace legal del formulario: el que
* hay que poder abrir ANTES de aceptar nada.
*
* Se arregla con el mismo recurso que ya usa `.lt-cuenta-nota a` unas líneas más
* abajo —`inline-flex` con `min-height`—, que sube la caja pulsable sin sacar el
* enlace de la frase en la que va metido. Los 44px son de la caja de verdad, no
* de un ::after invisible encima.
*/
.lt-cuenta-campo--casilla label a {
display: inline-flex;
align-items: center;
min-height: 44px;
color: var(--marca); /* 7,9:1 sobre blanco */
text-decoration: underline;
text-underline-offset: 2px;
}
.lt-cuenta-campo--casilla label a:hover { color: var(--marca-oscuro); }
.lt-cuenta-grupo {
margin: 0 0 var(--e-3);
padding: var(--e-2);
border: 1px solid var(--linea);
border-radius: var(--radio-chico);
background: var(--blanco);
}
.lt-cuenta-grupo legend {
padding: 0 6px;
font-size: var(--fs-chico);
font-weight: var(--peso-fuerte);
color: var(--tinta);
}
.lt-cuenta-grupo .lt-cuenta-campo--casilla:last-child { margin-bottom: 0; }
.lt-cuenta-enviar {
margin: var(--e-3) 0 0;
}
/* En el teléfono el botón ocupa el ancho: un botón de 160px en una columna de
340px se lee como un enlace más y se falla al tocarlo. */
@media (max-width: 480px) {
.lt-cuenta-enviar .lt-btn { width: 100%; }
}
.lt-cuenta-nota {
margin: var(--e-2) 0 0;
font-size: var(--fs-chico);
color: var(--apagado);
}
/*
* 44px DE ALTO TAMBIÉN AQUÍ. Medidos, estos dos enlaces —«¿Olvidaste tu
* contraseña?» y «Crea una en un minuto»— salían con 15px de alto pulsable: la
* altura de la letra y nada más. Son justo los dos enlaces que pulsa quien está
* atascado, y casi siempre desde el teléfono.
*
* `inline-flex` y no `block`: el segundo va dentro de una frase («¿Ya tienes
* cuenta? Entra aquí») y convertirlo en bloque lo partiría en dos renglones.
* Así crece la caja pulsable sin sacar el enlace de su sitio en el texto.
*/
.lt-cuenta-nota a {
display: inline-flex;
align-items: center;
min-height: 44px;
color: var(--marca); /* 7,9:1 sobre blanco */
text-decoration: underline;
/* El subrayado se separa una pizca de la letra: pegado al trazo, en un texto
de 14px, se come los descendentes de la «g» y la «p». */
text-underline-offset: 2px;
}
.lt-cuenta-nota a:hover { color: var(--marca-oscuro); }
/* ==========================================================================
* 3 · LOS AVISOS
* ========================================================================== */
.lt-cuenta-aviso {
margin: 0 0 var(--e-3);
padding: var(--e-2) var(--e-3);
border-left: 4px solid var(--marca);
border-radius: var(--radio-chico);
background: var(--marca-claro);
font-size: var(--fs-chico);
color: var(--tinta); /* 16:1 sobre #E8EEF7 */
}
.lt-cuenta-aviso p { margin: 0 0 8px; }
.lt-cuenta-aviso p:last-child { margin-bottom: 0; }
.lt-cuenta-aviso ul {
margin: 8px 0 0;
padding-left: 1.25em;
}
.lt-cuenta-aviso li { margin-bottom: 4px; }
.lt-cuenta-aviso li:last-child { margin-bottom: 0; }
/* Todo salió bien: azul de marca, que aquí es el color de «esto es del sitio». */
.lt-cuenta-aviso--bien {
border-left-color: var(--marca);
background: var(--marca-claro);
}
/*
* ALGO FALLÓ. Sin rojo, por la paleta. Lo que lo distingue es el borde en tinta
* casi negra —el elemento con más peso visual de toda la pantalla— sobre el
* papel más oscuro del sitio. Y, sobre todo, el texto: el titular en negrita
* dice qué pasó y la lista dice qué arreglar. Quien no vea el borde, lo lee.
*/
.lt-cuenta-aviso--mal {
border-left-color: var(--noche);
background: var(--hueso-honda); /* tinta sobre #EBE5DC: 14,9:1 */
}
/* ==========================================================================
* 4 · LA CAJA DE «YA ESTÁS DENTRO» Y LOS BLOQUES DEL PERFIL
* ========================================================================== */
.lt-cuenta-caja {
padding: var(--e-4) var(--e-3);
background: var(--hueso);
border: 1px solid var(--linea);
border-radius: var(--radio-tarjeta);
text-align: center;
}
.lt-cuenta-caja__titulo {
margin: 0 0 var(--e-3);
font-size: var(--fs-h4);
font-weight: var(--peso-fuerte);
}
.lt-cuenta-acciones {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--e-1);
margin: 0;
}
.lt-cuenta-bloque {
margin-bottom: var(--e-5);
}
.lt-cuenta-bloque:last-child { margin-bottom: 0; }
.lt-cuenta-bloque__titulo {
margin: 0 0 var(--e-2);
font-size: var(--fs-h4);
/* La línea separa los tres bloques del perfil sin necesidad de tres tarjetas
anidadas una dentro de otra. */
padding-bottom: var(--e-1);
border-bottom: 1px solid var(--linea);
}
/* Un dato que se enseña y no se edita (el correo). */
.lt-cuenta-dato {
display: flex;
flex-wrap: wrap;
gap: 4px var(--e-2);
margin: var(--e-3) 0 0;
}
.lt-cuenta-dato__rotulo {
font-size: var(--fs-chico);
font-weight: var(--peso-fuerte);
}
.lt-cuenta-dato__valor {
/* Un correo largo en una pantalla de 360px tiene que partirse por donde sea
antes que sacar la página de su sitio. */
overflow-wrap: anywhere;
color: var(--apagado);
}
/* ==========================================================================
* 5 · «ENTRA O CREA TU CUENTA»
*
* Este bloque no vive en las páginas de cuentas: lo llaman OTRAS pantallas
* —una ficha de negocio, el hilo de una pregunta— justo al lado de la acción
* que necesita la sesión. Por eso tiene su propia superficie y su propio
* borde: tiene que leerse como una pieza aparte de lo que la rodea, sea lo que
* sea lo que la rodee.
* ========================================================================== */
.lt-invitacion {
padding: var(--e-3);
background: var(--marca-claro);
border: 1px solid var(--marca-borde);
border-radius: var(--radio-tarjeta);
color: var(--tinta);
}
.lt-invitacion__titulo {
margin: 0 0 6px;
font-size: var(--fs-h4);
font-weight: var(--peso-fuerte);
}
.lt-invitacion__texto {
margin: 0 0 var(--e-2);
color: var(--tinta);
}
.lt-invitacion__acciones {
display: flex;
flex-wrap: wrap;
gap: var(--e-1);
margin: 0;
}
/*
* El botón fantasma toma su color del texto de alrededor (`currentColor`).
* Sobre este azul clarito eso sería tinta casi negra, que compite con el botón
* principal y confunde cuál es la acción de verdad. Se fija al azul de marca:
* 7,2:1 sobre #E8EEF7.
*/
.lt-invitacion .lt-btn--fantasma { color: var(--marca); }
.lt-invitacion .lt-btn--fantasma:hover { color: var(--blanco); }
.lt-invitacion__nota {
margin: var(--e-2) 0 0;
font-size: var(--fs-chico);
/* Sobre #E8EEF7 el gris de texto da 5,9:1. */
color: var(--apagado);
}
/* La versión de una línea, para meterla dentro de una tarjeta o al pie de un
formulario sin partir la composición. */
.lt-invitacion--compacta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--e-1) var(--e-2);
padding: var(--e-2);
}
.lt-invitacion--compacta .lt-invitacion__titulo {
margin: 0;
font-size: var(--fs-texto);
}
.lt-invitacion--compacta .lt-invitacion__texto,
.lt-invitacion--compacta .lt-invitacion__nota {
margin: 0;
font-size: var(--fs-chico);
flex: 1 1 12rem;
}
.lt-invitacion--compacta .lt-invitacion__acciones { margin-left: auto; }
/*
* SOBRE FONDO OSCURO. Las secciones `--honda`, `--marca` y `--noche` pintan el
* texto en blanco; sin esto, la invitación heredaría ese blanco sobre su propio
* fondo azul clarito y quedaría ilegible (1,1:1). Se le da su propia superficie
* oscura en vez de dejarla clara: una tarjeta blanca en mitad de una banda
* nocturna es un agujero de luz.
*/
.lt-seccion--honda .lt-invitacion,
.lt-seccion--marca .lt-invitacion,
.lt-seccion--noche .lt-invitacion,
.lt-oscuro .lt-invitacion {
background: var(--noche-suave);
border-color: var(--noche-borde);
color: var(--blanco);
}
.lt-seccion--honda .lt-invitacion__texto,
.lt-seccion--marca .lt-invitacion__texto,
.lt-seccion--noche .lt-invitacion__texto,
.lt-oscuro .lt-invitacion__texto { color: var(--blanco); }
.lt-seccion--honda .lt-invitacion__nota,
.lt-seccion--marca .lt-invitacion__nota,
.lt-seccion--noche .lt-invitacion__nota,
.lt-oscuro .lt-invitacion__nota { color: var(--niebla); }
/* Sobre oscuro, el fantasma vuelve a ser blanco: 15,6:1 sobre #0E2138. */
.lt-seccion--honda .lt-invitacion .lt-btn--fantasma,
.lt-seccion--marca .lt-invitacion .lt-btn--fantasma,
.lt-seccion--noche .lt-invitacion .lt-btn--fantasma,
.lt-oscuro .lt-invitacion .lt-btn--fantasma { color: var(--blanco); }
/*
* Y AL PASAR EL RATON, TAMBIEN AQUI. 2026-08-16.
*
* La regla de arriba, `.lt-invitacion .lt-btn--fantasma:hover { color: blanco }`,
* pesa lo mismo que la del sistema para fondo oscuro y va en una hoja que se
* carga despues, asi que le ganaba: dejaba la letra BLANCA sobre el relleno
* BLANCO que pone el sistema. Se invertia mal justo en esta caja y solo dentro
* de una seccion oscura, que es de los sitios donde menos se mira.
*
* Con los dos colores nombrados aqui, la inversion es la misma que en el resto
* del sitio y deja de depender de que hoja se cargue antes.
*/
.lt-seccion--honda .lt-invitacion .lt-btn--fantasma:hover,
.lt-seccion--marca .lt-invitacion .lt-btn--fantasma:hover,
.lt-seccion--noche .lt-invitacion .lt-btn--fantasma:hover,
.lt-oscuro .lt-invitacion .lt-btn--fantasma:hover,
.lt-seccion--honda .lt-invitacion .lt-btn--fantasma:focus-visible,
.lt-seccion--marca .lt-invitacion .lt-btn--fantasma:focus-visible,
.lt-seccion--noche .lt-invitacion .lt-btn--fantasma:focus-visible,
.lt-oscuro .lt-invitacion .lt-btn--fantasma:focus-visible {
background: var(--blanco);
border-color: var(--blanco);
color: var(--noche);
}
/* ==========================================================================
* 5 bis · «CONFIRMA TU CORREO»
*
* Hermano de `.lt-invitacion` y por el mismo motivo: lo pinta este módulo pero
* lo llaman OTRAS pantallas, justo donde iría el formulario que todavía no se
* puede usar. Por eso viaja en esta hoja, que es la única que va en todas las
* páginas del sitio.
*
* POR QUÉ NO REUTILIZA `.lt-invitacion` TAL CUAL. Se parecen en la forma y no
* en lo que dicen. La invitación es una puerta abierta —«entra, es gratis»— y
* esta es una puerta cerrada con la llave puesta: «ya tienes cuenta, te falta
* un paso». Si las dos se pintaran igual, quien ya tiene cuenta creería que el
* sitio no le reconoce y volvería a registrarse. La diferencia se marca con el
* papel (hueso, no azul) y con el borde grueso a la izquierda, que es la misma
* señal que este módulo usa para «esto hay que leerlo».
* ========================================================================== */
.lt-confirmar {
/*
* AIRE ALREDEDOR. Lo pidio el dueno el 2026-08-15: «el pop-up que aparece que
* dice que envio el correo para confirmarlo aparece muy pegado al nombre del
* usuario; quiero que haya un poquito de espacio en ese pedazo».
*
* MEDIDO antes de tocar: el hueco entre este bloque y `.lt-panel__cabecera`
* era de CERO pixeles, y el bloque no tenia ningun margen. No es que fuera
* poco: es que no habia.
*
* El margen va en el bloque y no en la pantalla del perfil a proposito: este
* aviso lo puede pintar cualquier modulo —una ficha de negocio, el foro— con
* `lt_aviso_confirmar_correo()`, y pegado al contenido siguiente se ve mal en
* todos los sitios, no solo en el perfil.
*
* Abajo pesa mas que arriba porque abajo es donde empieza otra cosa. Encima
* suele venir el aviso verde de bienvenida, que ya trae su propia separacion.
*/
margin-block: var(--e-2) var(--e-4);
padding: var(--e-3);
background: var(--hueso);
border: 1px solid var(--linea);
/* El filo de tinta a la izquierda: el mismo recurso que `.lt-cuenta-aviso--mal`
para pesar en la pantalla sin usar un color de alarma que la paleta no
tiene. */
border-left: 4px solid var(--noche);
border-radius: var(--radio-tarjeta);
color: var(--tinta); /* #0B1220 sobre #F6F3EE: 16,9:1 */
}
.lt-confirmar__titulo {
margin: 0 0 6px;
font-size: var(--fs-h4);
font-weight: var(--peso-fuerte);
}
.lt-confirmar__texto {
margin: 0 0 var(--e-2);
color: var(--tinta);
}
.lt-confirmar__texto:last-of-type { margin-bottom: 0; }
/*
* El correo tapado va en negrita dentro de la frase: es el dato que la persona
* está buscando —«¿a cuál lo mandaron?»— y en una frase larga sin ningún peso
* se pierde.
*/
.lt-confirmar__texto strong { overflow-wrap: anywhere; }
.lt-confirmar__forma {
margin: var(--e-3) 0 0;
}
/* En el teléfono el botón ocupa el ancho, igual que los de las cuatro
pantallas: un botón de 180px dentro de una columna de 340px se lee como un
enlace más. */
@media (max-width: 480px) {
.lt-confirmar__forma .lt-btn { width: 100%; }
}
.lt-confirmar__nota {
margin: var(--e-2) 0 0;
font-size: var(--fs-chico);
color: var(--apagado); /* #5A5A5A sobre #F6F3EE: 6,2:1 */
}
/*
* Los avisos de «te lo mandamos» / «no salió» se pintan con `.lt-cuenta-aviso`,
* que ya existe. Dentro de este bloque necesitan aire por arriba: pegados al
* párrafo anterior parecen parte de la frase y no una respuesta a lo que se
* acaba de pulsar.
*/
.lt-confirmar .lt-cuenta-aviso {
margin: var(--e-2) 0 0;
}
/*
* SOBRE FONDO OSCURO, igual que la invitación. Sin esto, un bloque metido en una
* banda `--noche` heredaría el texto blanco sobre su propio papel hueso y no se
* leería nada (1,1:1).
*/
.lt-seccion--honda .lt-confirmar,
.lt-seccion--marca .lt-confirmar,
.lt-seccion--noche .lt-confirmar,
.lt-oscuro .lt-confirmar {
background: var(--noche-suave);
border-color: var(--noche-borde);
border-left-color: var(--blanco);
color: var(--blanco); /* #FFF sobre #0E2138: 15,9:1 */
}
.lt-seccion--honda .lt-confirmar__texto,
.lt-seccion--marca .lt-confirmar__texto,
.lt-seccion--noche .lt-confirmar__texto,
.lt-oscuro .lt-confirmar__texto { color: var(--blanco); }
.lt-seccion--honda .lt-confirmar__nota,
.lt-seccion--marca .lt-confirmar__nota,
.lt-seccion--noche .lt-confirmar__nota,
.lt-oscuro .lt-confirmar__nota { color: var(--niebla); }
/* ==========================================================================
* 6 · FOCO Y MOVIMIENTO
* ========================================================================== */
/*
* El anillo de foco de todo lo que se puede pulsar en este módulo. Va con
* `:focus-visible` y no con `:focus` para que no aparezca al hacer clic con el
* ratón —donde no aporta nada y parece un fallo— y sí al llegar con el
* tabulador, que es cuando es la única forma de saber dónde estás.
*/
.lt-cuenta a:focus-visible,
.lt-cuenta button:focus-visible,
.lt-cuenta input:focus-visible,
.lt-cuenta select:focus-visible,
.lt-invitacion a:focus-visible,
.lt-confirmar button:focus-visible,
.lt-confirmar a:focus-visible {
outline: 3px solid var(--marca);
outline-offset: 2px;
border-radius: var(--radio-chico);
}
/* Sobre banda oscura el anillo azul se pierde contra el fondo (2,1:1 sobre
#0E2138). Se pinta en blanco, que es lo que ahí se ve. */
.lt-seccion--honda .lt-confirmar button:focus-visible,
.lt-seccion--marca .lt-confirmar button:focus-visible,
.lt-seccion--noche .lt-confirmar button:focus-visible,
.lt-oscuro .lt-confirmar button:focus-visible {
outline-color: var(--blanco);
}
@media (prefers-reduced-motion: reduce) {
.lt-cuenta-control { transition: none; }
}
/* ==========================================================================
* 7 · PANTALLAS ESTRECHAS
* ========================================================================== */
@media (max-width: 768px) {
body.lt-cuenta-pagina .lt-cabecera-listado { padding-top: var(--e-4); }
.lt-cuenta-formulario { padding: var(--e-2); }
/* La invitación compacta deja de serlo: en 360px, el titular, el texto y dos
botones en una fila salen a 60px de ancho cada uno. Se apila. */
.lt-invitacion--compacta { display: block; }
.lt-invitacion--compacta .lt-invitacion__titulo { margin-bottom: 6px; }
.lt-invitacion--compacta .lt-invitacion__acciones { margin: var(--e-2) 0 0; }
}
@media (max-width: 480px) {
/* Dos botones de 30 caracteres no caben en una fila de 328px útiles. */
.lt-cuenta-acciones .lt-btn,
.lt-invitacion__acciones .lt-btn { width: 100%; }
}
/* ==========================================================================
* 8 · LA CUENTA DE NEGOCIO
*
* PHP: inc/cuentas.php (las pantallas) e inc/verificar-negocio.php (la lógica).
*
* --------------------------------------------------------------------------
* LA REGLA QUE ESCONDE LOS CAMPOS DEL NEGOCIO, Y POR QUÉ ESTÁ AL REVÉS
* --------------------------------------------------------------------------
* Los campos del negocio están SIEMPRE en el HTML de «Crear cuenta». Esta hoja
* es lo único que los esconde cuando está marcado «Quiero usar el sitio», con
* `:has()`. No hay ni una línea de JavaScript en todo el módulo y esto no la
* añade.
*
* La regla ESCONDE-CUANDO-VECINO en vez de ENSEÑAR-CUANDO-NEGOCIO a propósito.
* `:has()` no lo entienden los navegadores viejos, y un selector que no se
* entiende hace que el navegador tire la regla ENTERA. Con esta forma, tirarla
* significa que los campos SALEN: el formulario queda algo más largo y se puede
* rellenar entero. Con la forma contraria, tirarla significaría que los campos
* NO salen nunca y que nadie podría registrar un negocio, sin un solo error en
* pantalla. El fallo tiene que caer del lado que deja trabajar.
*
* Y por eso mismo NINGUNO de esos campos lleva `required` en el HTML: un campo
* obligatorio escondido con `display:none` no se puede enfocar y el navegador se
* niega a enviar el formulario ENTERO sin avisar de nada. Lo obligatorio se
* comprueba en el servidor. Está explicado largo en el PHP.
* ========================================================================== */
/*
* `display: none` y no `visibility: hidden` ni una altura cero: hace falta que
* los campos salgan también del orden de tabulación y del lector de pantalla.
* Quien eligió «Quiero usar el sitio» no tiene que tabular por tres campos
* vacíos que no ve.
*/
.lt-cuenta-formulario:has(#lt-cuenta-tipo-vecino:checked) .lt-cuenta-negocio {
display: none;
}
/* --- Las dos tarjetas de «¿Para qué quieres la cuenta?» ---------------- */
/*
* Se anulan el borde y el relleno que trae `.lt-cuenta-grupo`: aquí las dos
* tarjetas ya llevan los suyos, y el doble borde —el del grupo y el de cada
* tarjeta— dibujaba una caja dentro de otra caja sin ninguna razón.
*/
.lt-cuenta-tipos {
padding: 0;
border: 0;
background: none;
}
.lt-cuenta-tipos legend {
padding: 0;
margin-bottom: 10px;
}
/*
* LA TARJETA ENTERA ES EL ÁREA PULSABLE. El círculo del botón de opción mide
* 20px: imposible de acertar con el pulgar. Con la etiqueta envolviéndolo todo
* se pulsa en cualquier punto de la tarjeta, y son 44px reales de alto por el
* relleno y el contenido — no un ::after invisible encima.
*/
.lt-cuenta-tipo {
display: flex;
align-items: flex-start;
gap: 12px;
min-height: 44px;
margin-bottom: 10px;
padding: 14px 16px;
border: 1.5px solid var(--linea);
border-radius: var(--radio-chico);
background: var(--blanco);
cursor: pointer;
transition: border-color var(--transicion), background-color var(--transicion);
}
.lt-cuenta-tipo:last-child { margin-bottom: 0; }
.lt-cuenta-tipo:hover { border-color: var(--marca); }
.lt-cuenta-tipo input {
flex: 0 0 auto;
width: 20px;
height: 20px;
/* Alinea el círculo con la primera línea del titular, que va a 1rem. */
margin: 2px 0 0;
accent-color: var(--marca);
cursor: pointer;
}
/*
* LA ELEGIDA SE DISTINGUE POR EL BORDE Y POR EL FONDO, no solo por el punto del
* círculo. En un móvil, con el pulgar encima, el círculo se tapa: si la tarjeta
* no cambia, no hay forma de ver cuál está marcada. Y no es solo color: el borde
* también cambia de grosor visual al pasar a azul.
*/
.lt-cuenta-tipo:has(input:checked) {
border-color: var(--marca);
background: var(--marca-claro);
}
/*
* El anillo de foco va en la TARJETA y no en el círculo, porque la tarjeta es lo
* que se pulsa. `:focus-within` y no `:focus-visible` porque quien recibe el
* foco es el `` de dentro, no la etiqueta.
*/
.lt-cuenta-tipo:focus-within {
outline: 3px solid var(--marca);
outline-offset: 2px;
}
.lt-cuenta-tipo__texto { display: block; }
.lt-cuenta-tipo__titulo {
display: block;
font-weight: var(--peso-fuerte);
color: var(--tinta);
}
.lt-cuenta-tipo__nota {
display: block;
margin-top: 3px;
font-size: var(--fs-chico);
/* #5A5A5A sobre blanco: 7,0:1. Y sobre #E8EEF7, la tarjeta marcada: 5,9:1. */
color: var(--apagado);
}
/* --- El bloque de datos del negocio ------------------------------------ */
/*
* El aviso de honradez —«esto es lo que tú nos dices»— separado del resto por
* una línea, para que no se lea como la ayuda del primer campo.
*/
.lt-cuenta-negocio__aviso {
margin: 0 0 var(--e-2);
padding-bottom: var(--e-2);
border-bottom: 1px solid var(--linea);
}
.lt-cuenta-negocio .lt-cuenta-campo:last-of-type { margin-bottom: 0; }
/* --- «Mi perfil»: subtítulo, puertas y plegable ------------------------ */
.lt-cuenta-subtitulo {
margin: var(--e-3) 0 var(--e-1);
font-size: var(--fs-h4);
font-weight: var(--peso-fuerte);
color: var(--tinta);
}
/*
* LA LISTA DE PUERTAS, SIN VIÑETAS. Son acciones, no una enumeración: la viñeta
* las lee como una lista de la compra. Cada una lleva su enlace y, debajo, la
* frase que dice si está abierta o qué falta para que lo esté.
*/
.lt-cuenta-puertas {
margin: 0 0 var(--e-3);
padding: 0;
list-style: none;
}
.lt-cuenta-puertas li {
margin-bottom: var(--e-2);
padding-bottom: var(--e-2);
border-bottom: 1px solid var(--linea);
}
.lt-cuenta-puertas li:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: 0;
}
/* 44px reales: es un enlace de una línea dentro de una lista y sin esto sale con
la altura de la letra, que es lo que ya pasó con los del pie de «Entrar». */
.lt-cuenta-puertas a {
display: inline-flex;
align-items: center;
min-height: 44px;
font-weight: var(--peso-fuerte);
color: var(--marca); /* 7,9:1 sobre blanco */
text-decoration: underline;
text-underline-offset: 2px;
}
.lt-cuenta-puertas a:hover { color: var(--marca-oscuro); }
/*
* LA PUERTA CERRADA NO ES UN ENLACE Y NO LO PARECE: texto apagado, sin subrayado
* y sin color de enlace, con la frase debajo que dice cuándo se abre. Un enlace
* desactivado que sigue pareciendo enlace se pulsa igual y no hace nada, que es
* peor que no enseñarlo.
*/
.lt-cuenta-puerta--cerrada {
display: block;
font-weight: var(--peso-fuerte);
color: var(--apagado); /* 7,0:1 sobre blanco */
}
.lt-cuenta-plegable {
margin-top: var(--e-3);
border-top: 1px solid var(--linea);
}
/*
* EL RESUMEN ES EL BOTÓN. `` lo abre el navegador, sin una línea de
* guion, y ya se maneja con el teclado y con el lector de pantalla de serie.
*
* `display: block` Y NO `flex`, aunque flex centraría mejor: en Chrome y en
* Safari, poner `display:flex` en un `` BORRA el triangulito de abrir.
* Ese triángulo es la única señal de que ahí hay algo que se despliega, y sin él
* el bloque parece un título muerto. Los 44px se consiguen con la cuenta de
* siempre: 10 + 24 + 10.
*/
.lt-cuenta-plegable__boton {
display: block;
min-height: 44px;
padding: 10px 0;
line-height: 24px;
font-size: var(--fs-texto);
font-weight: var(--peso-fuerte);
color: var(--marca);
cursor: pointer;
}
.lt-cuenta-plegable__boton:hover { color: var(--marca-oscuro); }
.lt-cuenta-plegable__boton:focus-visible {
outline: 3px solid var(--marca);
outline-offset: 2px;
border-radius: var(--radio-chico);
}
/* El segundo formulario del plegable —el de volver a cuenta normal— no repite la
caja del primero: se separa con una línea y basta. Dos tarjetas iguales
seguidas se leen como dos formas de hacer lo mismo. */
.lt-cuenta-plegable .lt-cuenta-formulario + .lt-cuenta-formulario {
margin-top: var(--e-2);
padding: var(--e-2) 0 0;
background: none;
border: 0;
border-top: 1px solid var(--linea);
border-radius: 0;
}
@media (prefers-reduced-motion: reduce) {
.lt-cuenta-tipo { transition: none; }
}
@media (max-width: 480px) {
.lt-cuenta-plegable .lt-cuenta-enviar .lt-btn { width: 100%; }
}
/* ==================================================================== */
/* EL PANEL DE MI PERFIL */
/* PHP: inc/panel-perfil.php */
/* ==================================================================== */
/*
* /mi-perfil/ era una lista de formularios con UN solo enlace en toda la
* pagina: «Salir de mi cuenta». Quien entraba a su perfil quedaba encerrado.
* Aqui esta la maqueta de lo que lo convierte en un panel: la cabecera de quien
* eres, la rejilla de tus zonas y la tarjeta de tu plan.
*/
/* --------------------------------------------------------- la cabecera */
.lt-panel__cabecera {
display: flex;
align-items: center;
gap: clamp(14px, 2.4vw, 22px);
margin-bottom: clamp(20px, 3vw, 30px);
padding-bottom: clamp(18px, 2.6vw, 26px);
border-bottom: 1px solid var(--linea);
}
/*
* LA INICIAL, NO UN AVATAR DE GRAVATAR.
*
* Gravatar es una peticion a un servidor de terceros que ademas filtra el
* correo de cada visitante hacia fuera, y para casi toda esta comunidad
* devolveria el mismo cuadrado gris. Un circulo con la inicial es mas rapido,
* no cuenta nada a nadie y siempre dice algo verdadero.
*/
.lt-panel__inicial {
display: grid;
place-items: center;
flex: none;
width: clamp(54px, 9vw, 68px);
aspect-ratio: 1;
border-radius: 50%;
font-family: var(--fuente-titulo);
font-size: clamp(1.6rem, 4vw, 2rem);
font-weight: var(--peso-titulo, 700);
line-height: 1;
text-transform: uppercase;
color: #fff;
background: linear-gradient(150deg, var(--marca, #295091) 0%, var(--cielo, #4EA8DE) 130%);
}
.lt-panel__quien { min-width: 0; }
.lt-panel__nombre {
margin: 0;
font-family: var(--fuente-titulo);
font-size: clamp(1.3rem, 3.2vw, 1.7rem);
font-weight: var(--peso-titulo, 700);
line-height: 1.15;
color: var(--tinta);
}
.lt-panel__sellos {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 8px 0 0;
}
.lt-panel__sello {
display: inline-block;
padding: 3px 10px;
border-radius: 999px;
font-size: var(--fs-etiqueta, .75rem);
font-weight: var(--peso-fuerte, 700);
letter-spacing: .04em;
line-height: 1.5;
white-space: nowrap;
}
/*
* NI VERDE NI AMBAR. 2026-08-15.
*
* La regla del dueno es literal: «no metas verde en la pagina, solo azul blanco
* y negro». Estos sellos llevaban un verde (#1f7a3a) para «confirmado» y un
* ambar (#8a6100) para «pendiente», que ademas eran los DOS unicos colores de
* fuera de la paleta en toda la pantalla de perfil.
*
* LO BUENO SE DISTINGUE SIN COLOR, y aqui hay tres estados que contar con un
* solo tono. Se hace como ya se hacen los avisos de esta misma hoja: por el
* PESO, no por el color. El estado en regla va en azul de marca sobre su fondo
* tintado; el que pide accion va en tinta sobre papel, con un filete a la
* izquierda que lo separa del resto. Quien no distingue colores los diferencia
* igual, que es de paso lo que pide el criterio 1.4.1 de la WCAG.
*
* Y el texto ya dice cual es cual: «Correo confirmado» / «Falta confirmar el
* correo». El color nunca era la informacion.
*/
.lt-panel__sello--tipo { background: rgba(41, 80, 145, .1); color: var(--marca, #295091); }
.lt-panel__sello--ok { background: rgba(41, 80, 145, .1); color: var(--marca, #295091); }
.lt-panel__sello--pendiente {
background: var(--hueso, #F6F3EE);
color: var(--tinta, #0B1220);
border-left: 3px solid var(--tinta, #0B1220);
}
/* Los mismos colores que usa el panel del dueno para los mismos estados: dos
pantallas que pintan «por vencer» de colores distintos hacen dudar de las
dos. */
.lt-panel__sello--activa { background: rgba(41, 80, 145, .1); color: var(--marca, #295091); }
.lt-panel__sello--por_vencer {
background: var(--hueso, #F6F3EE);
color: var(--tinta, #0B1220);
border-left: 3px solid var(--tinta, #0B1220);
}
.lt-panel__sello--gracia { background: rgba(176, 42, 40, .12); color: #a02b28; }
.lt-panel__sello--cancelada,
.lt-panel__sello--parada { background: rgba(11, 18, 32, .08); color: var(--apagado); }
/* ----------------------------------------------------------- los atajos */
/*
* `auto-fit` con un minimo de 240px: con dos tarjetas van a dos columnas, con
* cuatro a cuatro en escritorio y a dos en tableta, y en el telefono se apilan.
* Sin una sola media query que adivine cuantas hay — y son entre dos y cuatro
* segun el tipo de cuenta.
*/
.lt-panel__atajos {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 12px;
margin-bottom: clamp(24px, 3.4vw, 36px);
}
.lt-panel__atajo {
display: flex;
align-items: center;
gap: 14px;
/* 62px de alto: el icono y las dos lineas caben sin apretarse, y sigue muy
por encima de los 44px minimos de la casa. */
min-height: 62px;
padding: 14px 16px;
border: 1px solid var(--linea);
border-radius: var(--radio-tarjeta, 8px);
background: var(--blanco);
color: var(--tinta);
text-decoration: none;
transition: border-color var(--transicion), transform var(--transicion), box-shadow var(--transicion);
}
.lt-panel__atajo:hover,
.lt-panel__atajo:focus-visible {
border-color: var(--cielo, #4EA8DE);
transform: translateY(-2px);
box-shadow: var(--sombra-2, 0 12px 28px rgba(11, 18, 32, .12));
text-decoration: none;
}
@media (prefers-reduced-motion: reduce) {
.lt-panel__atajo:hover,
.lt-panel__atajo:focus-visible { transform: none; }
}
.lt-panel__atajo-icono {
display: grid;
place-items: center;
flex: none;
width: 40px;
height: 40px;
border-radius: 10px;
background: rgba(41, 80, 145, .09);
color: var(--marca, #295091);
}
/*
* Se anula `position: absolute` por si algun icono compartido lo trae de otra
* pieza. Ya paso una vez en el indice del directorio: un simbolo heredado se
* escapo al pixel 1454 y desplazo la pagina entera 14px de lado.
*/
.lt-panel__atajo-icono svg { position: static; inset: auto; opacity: 1; }
.lt-panel__atajo-texto { display: block; min-width: 0; flex: 1; }
.lt-panel__atajo-titulo {
display: block;
font-weight: var(--peso-fuerte, 700);
font-size: var(--fs-chico, .875rem);
line-height: 1.25;
color: var(--tinta);
}
.lt-panel__atajo-dato {
display: block;
margin-top: 2px;
font-size: var(--fs-etiqueta, .75rem);
line-height: 1.35;
color: var(--apagado);
}
.lt-panel__atajo-flecha { flex: none; color: var(--apagado); }
.lt-panel__atajo:hover .lt-panel__atajo-flecha { color: var(--marca, #295091); }
/* ------------------------------------------------------------- tu plan */
/*
* LA TARJETA DEL PLAN LLEVA UNA BARRA DE COLOR A LA IZQUIERDA.
*
* Es la unica pieza de esta pagina que cambia de color segun un estado, y el
* color va en una barra y no en el fondo entero: un recuadro rojo del ancho de
* la columna se lee como un error del sitio, y aqui lo que pasa es que hay una
* factura pendiente.
*/
.lt-panel__plan {
position: relative;
padding: clamp(16px, 2.4vw, 22px) clamp(18px, 2.6vw, 24px);
padding-left: clamp(22px, 3vw, 30px);
border: 1px solid var(--linea);
border-radius: var(--radio-tarjeta, 8px);
background: var(--blanco);
overflow: hidden;
}
.lt-panel__plan::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 5px;
background: var(--linea);
}
/*
* EL FILETE DEL PLAN, SIN VERDE NI AMBAR NI NARANJA. 2026-08-15.
*
* Eran cuatro colores de semaforo para cuatro estados. Fuera de la paleta los
* tres primeros, y el semaforo ademas solo funciona para quien distingue los
* colores: «activa» y «por vencer» se diferenciaban UNICAMENTE por el tono.
*
* Ahora el filete cuenta lo mismo con el peso del azul de la casa: lleno para
* lo que esta en regla, a media tinta para lo que pide atencion, y apagado para
* lo que ya no corre. El estado va escrito al lado con todas sus letras, que es
* donde de verdad estaba la informacion.
*/
.lt-panel__plan--activa::before { background: var(--marca, #295091); }
.lt-panel__plan--por_vencer::before { background: var(--tinta, #0B1220); }
.lt-panel__plan--gracia::before { background: var(--tinta, #0B1220); }
.lt-panel__plan--cancelada::before,
.lt-panel__plan--parada::before { background: var(--apagado); }
.lt-panel__plan-nombre {
margin: 0;
font-family: var(--fuente-titulo);
font-size: clamp(1.15rem, 2.6vw, 1.45rem);
font-weight: var(--peso-titulo, 700);
line-height: 1.2;
color: var(--tinta);
}
.lt-panel__plan-precio {
margin: 2px 0 0;
font-family: var(--fuente-titulo);
font-size: clamp(1.5rem, 3.4vw, 2rem);
font-weight: var(--peso-titulo, 700);
line-height: 1;
color: var(--tinta);
}
.lt-panel__plan-precio span {
font-family: var(--fuente-texto);
font-size: .38em;
font-weight: var(--peso-fuerte, 700);
color: var(--apagado);
}
.lt-panel__plan-estado { margin: 12px 0 0; }
.lt-panel__plan-fecha {
margin: 8px 0 0;
font-size: var(--fs-chico, .875rem);
line-height: 1.5;
color: var(--apagado);
}
/*
* EL AVISO DE LA POLITICA, con barra ambar. Es el mismo lenguaje que usan los
* avisos de los planes en la portada: cuando algo cuesta dinero, se marca
* distinto de la informacion normal.
*/
.lt-panel__plan-aviso {
margin: 12px 0 0;
padding: 10px 14px;
/* Mismo cambio que los filetes de arriba: el aviso pesa por el borde y por
el texto, no por un ambar que la paleta no tiene. */
border-left: 3px solid var(--tinta, #0B1220);
border-radius: 0 6px 6px 0;
background: var(--hueso, #F6F3EE);
font-size: var(--fs-etiqueta, .75rem);
line-height: 1.55;
color: var(--apagado);
}
.lt-panel__plan-accion { margin: 14px 0 0; }
@media (max-width: 560px) {
/* Apilada, la inicial baja de tamano para que el nombre no se parta en
tres lineas al lado de un circulo de 68px. */
.lt-panel__cabecera { gap: 12px; }
}
/* ------------------------------------------------ tus datos y tu cuenta */
.lt-panel__datos { margin-bottom: var(--e-3, 20px); }
.lt-panel__datos-titulo {
margin: 0 0 6px;
font-size: var(--fs-chico, .875rem);
font-weight: var(--peso-fuerte, 700);
color: var(--tinta);
}
.lt-panel__datos-texto {
margin: 0 0 12px;
max-width: 62ch;
font-size: var(--fs-chico, .875rem);
line-height: 1.55;
color: var(--apagado);
}
/*
* EL BORRADO VA DENTRO DE UN CERRADO.
*
* No es esconderlo —esta aqui, con su titulo, y se abre de un clic— es que no
* sea lo primero que encuentra el pulgar al llegar al final de la pagina. Un
* boton de borrar cuenta a la vista, justo debajo de «salir», se pulsa por
* error desde un telefono.
*/
.lt-panel__borrar {
border: 1px solid var(--linea);
border-radius: var(--radio-tarjeta, 8px);
background: var(--blanco);
}
.lt-panel__borrar-titulo {
/* 44px de alto pulsable: es un resumen que se toca. */
display: flex;
align-items: center;
min-height: 44px;
padding: 10px 16px;
font-size: var(--fs-chico, .875rem);
font-weight: var(--peso-fuerte, 700);
color: #a02b28;
cursor: pointer;
}
.lt-panel__borrar-titulo::marker { color: #a02b28; }
.lt-panel__borrar-cuerpo {
padding: 4px 16px 16px;
border-top: 1px solid var(--linea);
font-size: var(--fs-chico, .875rem);
line-height: 1.55;
color: var(--apagado);
}
.lt-panel__borrar-lista {
margin: 10px 0 16px;
padding-left: 20px;
}
.lt-panel__borrar-lista li { margin-bottom: 6px; }
/*
* EL BOTON DE BORRAR ES EL UNICO ROJO DEL SITIO, y lo es a proposito: el rojo
* aqui no decora, avisa. Si se usara tambien para otra cosa dejaria de avisar.
*/
.lt-btn--peligro {
background: #a02b28;
border-color: #a02b28;
color: #fff;
}
.lt-btn--peligro:hover,
.lt-btn--peligro:focus-visible {
background: #8a2422;
border-color: #8a2422;
color: #fff;
}
/* ==========================================================================
* 8 · LA PANCARTA — «tu cuenta ya está lista», caiga donde caiga la persona
*
* PHP: `lt_cuentas_pancarta()` en inc/cuentas.php, colgada de `lt_tras_cabecera`.
*
* POR QUÉ EXISTE. Medido el 2026-08-15 en el sitio vivo con un teléfono de
* verdad: al crear la cuenta la redirección te devuelve a la página de la que
* venías —la portada, casi siempre— y hasta ese día el mensaje de bienvenida
* solo sabía pintarse dentro de las cuatro pantallas de cuenta. O sea que la
* cuenta se creaba, la sesión se abría, y en pantalla no cambiaba absolutamente
* nada. Cualquiera concluye que no funcionó, y eso fue justo lo que pasó.
*
* VA EN EL FLUJO, DEBAJO DE LA CABECERA, y no flotando: un aviso fijo taparía
* la cabecera pegajosa en el móvil y competiría con el botón de WhatsApp de la
* esquina. Aquí empuja el contenido hacia abajo una sola vez, que es
* exactamente lo que hace que se lea.
*
* MISMA PALETA QUE TODO LO DEMÁS: azul, blanco y tinta. El tono de aviso no se
* distingue por otro color sino por el borde más oscuro y por el texto, que es
* lo que pide el criterio 1.4.1 de la WCAG y lo que hace que funcione para
* quien no distingue los colores.
* ========================================================================== */
.lt-pancarta {
border-bottom: 1px solid var(--linea);
background: var(--marca-claro);
color: var(--tinta); /* #0B1220 sobre #E8EEF7: 16:1 */
}
.lt-pancarta__caja {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--e-1) var(--e-2);
padding-block: var(--e-2);
}
.lt-pancarta__texto {
flex: 1 1 260px;
margin: 0;
font-size: var(--fs-chico);
line-height: 1.45;
}
.lt-pancarta__texto strong { display: block; }
.lt-pancarta__texto span {
display: block;
margin-top: 2px;
color: var(--apagado);
}
/*
* EL ENLACE AL PERFIL ES UN BOTÓN DE VERDAD, no un enlace de texto: es la única
* acción del bloque y en un teléfono tiene que poderse tocar sin apuntar.
*/
.lt-pancarta__enlace {
flex: 0 0 auto;
min-height: 40px;
display: inline-flex;
align-items: center;
padding: 0 var(--e-2);
border-radius: 999px;
background: var(--marca);
color: var(--blanco);
font-size: var(--fs-chico);
font-weight: 600;
text-decoration: none;
}
.lt-pancarta__enlace:hover,
.lt-pancarta__enlace:focus-visible {
background: var(--marca-oscuro);
color: var(--blanco);
}
/*
* LA «×» NO ES UN BOTÓN CON JAVASCRIPT: es un enlace a esta misma dirección sin
* el parámetro `lt_hecho`. Así el aviso también se puede cerrar con el teclado,
* sobrevive a que el navegador tenga el JS apagado y no deja basura en el
* historial más allá de una entrada.
*
* 44×44 reales: es el mínimo que se puede tocar con el pulgar sin fallar.
*/
.lt-pancarta__cerrar {
flex: 0 0 auto;
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: auto;
border-radius: 999px;
color: var(--tinta);
font-size: 1.4rem;
line-height: 1;
text-decoration: none;
}
.lt-pancarta__cerrar:hover,
.lt-pancarta__cerrar:focus-visible {
background: rgba(41, 80, 145, .12);
color: var(--tinta);
}
/* Cuando el correo no salió: mismo azul, borde inferior más marcado. */
.lt-pancarta--aviso {
border-bottom-width: 3px;
border-bottom-color: var(--marca);
}
@media (max-width: 600px) {
.lt-pancarta__enlace {
order: 3;
width: 100%;
justify-content: center;
}
}
/*
* LA PORTADA ES DISTINTA, Y SIN ESTO EL AVISO NO SE VE.
*
* MEDIDO en local con un iPhone: cabecera y=0 alto=108, pancarta y=0. Es decir,
* quedaba ENTERA por debajo de la cabecera. En el resto de las pantallas caía
* en y=107, justo debajo, perfecta.
*
* El motivo: la cabecera es fija y el sitio le reserva su alto con
* `body { padding-top: var(--alto-cabecera) }`. Pero en las páginas con hero a
* sangre —`body.lt-sobre-oscuro`, la portada entre ellas— ese relleno se pone a
* CERO a propósito, para que la foto del hero pase por detrás de la cabecera
* translúcida. Todo lo que vaya antes del hero cae en esa zona tapada.
*
* Y la portada es justo donde aterriza la gente: el enlace «Entrar» de la
* cabecera lleva `lt_volver` a la página en la que estabas.
*
* SE SACA DEL FLUJO EN VEZ DE EMPUJAR. Devolverle el relleno al body obligaría a
* descontárselo al hero —que además crece ese mismo alto para no comprimir su
* contenido— y eso son tres reglas encadenadas tocando la pieza más delicada de
* la portada para un aviso que dura un clic. Aquí el aviso se posa ENCIMA del
* hero, debajo de la cabecera, sin mover un píxel del resto.
*
* `absolute` y no `fixed`: es un aviso, no una barra. Se queda donde estaba y se
* va con el desplazamiento; una barra fija persiguiendo a la persona por toda la
* portada sería más molesta que útil.
*
* z-index 90, por debajo del 100 de la cabecera: si se solapan, manda el menú.
*/
body.lt-sobre-oscuro .lt-pancarta {
position: absolute;
top: calc(var(--desplazamiento-barra, 0px) + var(--alto-cabecera));
left: 0;
right: 0;
z-index: 90;
}
/* ==========================================================================
* LA FOTO DE PERFIL — 2026-08-15
*
* PHP: inc/foto-perfil.php
*
* La pide el dueno para las dos clases de cuenta, la personal y la de negocio:
* un negocio subira su logo y una persona su cara, y el sitio no distingue.
*
* SE RECORTA EN CIRCULO Y AQUI SI ES LO CORRECTO —al reves que en la tarjeta de
* la marquesina, donde el circulo cortaba el logo—. La diferencia es que alli la
* imagen es una PORTADA apaisada y aqui es un AVATAR: una cara centrada, o un
* logo cuadrado. El campo lo avisa por escrito: «lo importante va en el centro».
* ========================================================================== */
.lt-foto__rotulo {
display: block;
margin-bottom: 8px;
font-weight: 600;
}
.lt-foto__fila {
display: flex;
align-items: flex-start;
gap: var(--e-3);
flex-wrap: wrap;
}
.lt-foto__muestra {
flex: 0 0 auto;
width: 96px;
height: 96px;
display: grid;
place-items: center;
overflow: hidden;
border-radius: 50%;
border: 1px solid var(--linea);
background: var(--marca-claro);
color: var(--marca);
}
.lt-foto__muestra img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.lt-foto__mandos {
flex: 1 1 220px;
min-width: 0;
}
/*
* EL CAMPO DE ARCHIVO DE VERDAD SE ESCONDE Y MANDA LA ETIQUETA.
*
* El control nativo se pinta distinto en cada navegador —«Examinar…», «Choose
* File», «Sin archivos seleccionados» en ingles aunque el sitio este en
* espanol— y no hay forma de darle estilo. La etiqueta si, y pulsarla abre el
* mismo selector porque apunta al campo con `for`.
*
* NO se usa `display:none` ni `visibility:hidden`: eso lo saca del tabulador y
* quien navega con teclado no podria elegir foto. Se queda en el documento,
* medido 1x1 y recortado.
*/
.lt-foto__archivo {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/*
* EL SELECTOR LLEVA DOS CLASES Y NO UNA, Y NO ES POR GUSTO.
*
* Unas lineas mas arriba de esta misma hoja vive
* `.lt-cuenta-campo label { color: var(--tinta); display: block }`, que pesa
* (0,1,1) —una clase y un elemento—. Un `.lt-foto__elegir` a secas pesa (0,1,0)
* y PIERDE, asi que el boton salia con la tinta casi negra sobre el azul de
* marca y estirado a todo lo ancho.
*
* MEDIDO antes de arreglarlo: texto rgb(11,18,32) sobre fondo rgb(41,80,145),
* o sea 2,36:1 cuando la WCAG pide 4,5. No era «se ve un poco oscuro»: era
* ilegible y encima incumplia.
*
* Con `.lt-foto .lt-foto__elegir` pesa (0,2,0) y gana. No se usa `!important`:
* eso arregla el sintoma y deja la trampa puesta para el siguiente.
*/
.lt-foto .lt-foto__elegir {
display: inline-flex;
align-items: center;
min-height: 44px; /* lo minimo que se toca con el pulgar sin fallar */
padding: 0 var(--e-3);
border-radius: 999px;
background: var(--marca);
color: var(--blanco);
font-size: var(--fs-chico);
font-weight: 600;
cursor: pointer;
}
.lt-foto .lt-foto__elegir:hover {
background: var(--marca-oscuro);
color: var(--blanco);
}
/* El foco del teclado se ve en la ETIQUETA, porque el campo real esta oculto. */
.lt-foto__archivo:focus-visible + .lt-foto__elegir,
.lt-foto__elegir:focus-visible {
outline: 3px solid var(--marca);
outline-offset: 3px;
}
/*
* QUITAR LA FOTO — ahora es un BOTON, no una etiqueta con casilla.
*
* Lo pidio el dueno el 2026-08-15. Estas reglas estaban escritas para el
* `