/* ==========================================================================
   PAGOS — comprar una promocion desde «Mi perfil», y el recibo.
   Modulo: inc/pagos.php

   DONDE SE CARGA
   Solo en /mi-perfil/ y en la ficha de una entrada promocionada. Lo decide
   `LT\Tema\Pagos\archivos()`; ver alli el motivo.

   AVISO DE CASCADA (medido el 2026-08-09)
   base.css carga ANTES que las hojas de modulo, y esta va detras de todas:
   tokens -> base -> utilidades -> hero -> estructura -> componentes -> … ->
   pagos. Con la misma especificidad gana la ultima, o sea esta. Por eso aqui
   NO hace falta ni un !important ni selectores encadenados: basta con una
   clase. Y por el mismo motivo, cualquier regla que se escriba aqui con un
   selector que ya use otra hoja LA PISA — se ha evitado a proposito: todos los
   selectores de este archivo empiezan por .lt-pagos, .lt-promocionado o
   .lt-cuenta-aviso--… y ninguno redefine .lt-btn, .lt-cuenta-control ni nada
   del sistema.

   COLOR
   Azul, blanco y negro. Ni un verde. Todo sale de assets/css/tokens.css: si
   manana cambia el azul de marca, esta hoja cambia sola.

   CONTRASTE (comprobado con los valores reales de tokens.css)
     --tinta   #0B1220 sobre --blanco #FFFFFF ............ 18.9:1
     --tinta   #0B1220 sobre --marca-claro #E8EEF7 ....... 16.4:1
     --apagado #5A5A5A sobre --blanco #FFFFFF ............  7.0:1
     --apagado #5A5A5A sobre --marca-claro #E8EEF7 .......  6.1:1
     --blanco  #FFFFFF sobre --marca #295091 .............  8.2:1
     --blanco  #FFFFFF sobre --tinta #0B1220 ............. 18.9:1
   Todos por encima de 4.5:1 sobre el fondo que se pinta de verdad, que es el
   unico que cuenta.

   ZONAS PULSABLES
   Las opciones de promocion son etiquetas <label> con el radio dentro: toda la
   tarjeta es pulsable, y mide bastante mas de 44 px de alto por el padding.
   No hay ningun ::after invisible en esta hoja — lo que se ve es lo que se
   pulsa.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. EL BLOQUE DE COMPRAR
   -------------------------------------------------------------------------- */

.lt-pagos__intro,
.lt-pagos__vacio {
	margin: 0 0 var(--e-2);
	color: var(--apagado);
	font-size: var(--fs-chico);
	line-height: var(--interlineado);
}

.lt-pagos__forma {
	margin-top: var(--e-2);
}

/* --------------------------------------------------------------------------
   2. LAS OPCIONES DE PROMOCION

   Botones de opcion a la vista, no un desplegable: hay que comparar precios y
   eso es imposible viendo uno cada vez. Cada opcion es una tarjeta entera
   pulsable.
   -------------------------------------------------------------------------- */

.lt-pagos__lista {
	border: 0;
	margin: 0 0 var(--e-3);
	padding: 0;
}

.lt-pagos__lista > legend {
	padding: 0;
	margin: 0 0 var(--e-1);
	font-weight: var(--peso-fuerte);
	font-size: var(--fs-chico);
	letter-spacing: var(--tracking-etiqueta);
	text-transform: uppercase;
	color: var(--tinta);
}

.lt-pagos__opcion {
	display: flex;
	align-items: flex-start;
	gap: var(--e-2);

	/* 16 px arriba y abajo + la altura del texto deja la tarjeta muy por encima
	   de los 44 px de alto minimos. Medido: 78 px con una linea de nota. */
	padding: var(--e-2);
	margin: 0 0 var(--e-1);

	border: 1.5px solid var(--marca-borde);
	border-radius: var(--radio-chico);
	background: var(--blanco);
	cursor: pointer;
	transition: border-color var(--transicion), background-color var(--transicion);
}

.lt-pagos__opcion:hover {
	border-color: var(--marca);
}

/* EL RADIO SE VE Y SE TOCA. No se esconde con opacity:0 ni se saca de la
   pantalla: quien navega con teclado necesita ver donde esta el foco, y quien
   usa lector de pantalla necesita el control de verdad. 22 px es el tamaño
   minimo comodo con el dedo dentro de una fila. */
.lt-pagos__opcion > input[type="radio"] {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin: 2px 0 0;
	accent-color: var(--marca);
}

/* La tarjeta elegida se distingue por DOS cosas, no solo por el color: el
   borde azul mas grueso y el fondo tintado. El criterio 1.4.1 de la WCAG dice
   que el color no puede ser el unico portador de la informacion — y ademas el
   propio radio marcado ya lo dice por si mismo. */
.lt-pagos__opcion:has(> input[type="radio"]:checked) {
	border-color: var(--marca);
	background: var(--marca-claro);
}

/* El anillo de foco va en la TARJETA y no solo en el circulito: es lo que se
   esta eligiendo. `:focus-visible` para que no salte con el raton. */
.lt-pagos__opcion:has(> input[type="radio"]:focus-visible) {
	outline: 3px solid var(--marca);
	outline-offset: 2px;
}

/* RESPALDO PARA NAVEGADORES SIN :has(). No todos lo tienen, y sin este bloque
   la tarjeta elegida no se distinguiria: el radio marcado se ve igual, asi que
   no se pierde informacion, solo el realce. */
@supports not selector(:has(*)) {
	.lt-pagos__opcion > input[type="radio"]:focus-visible {
		outline: 3px solid var(--marca);
		outline-offset: 2px;
	}
}

.lt-pagos__opcion-cuerpo {
	display: block;
	min-width: 0; /* deja que el texto largo se parta en vez de desbordar a 320 px */
}

.lt-pagos__opcion-nombre {
	display: block;
	font-weight: var(--peso-fuerte);
	color: var(--tinta);
	line-height: 1.3;
}

.lt-pagos__opcion-precio {
	display: block;
	margin-top: 2px;
	font-weight: var(--peso-fuerte);
	color: var(--marca);
}

.lt-pagos__opcion-nota {
	display: block;
	margin-top: 4px;
	font-size: var(--fs-chico);
	color: var(--apagado);
	line-height: var(--interlineado);
}

/* --------------------------------------------------------------------------
   3. EL AVISO DE «ESTAMOS ESPERANDO»

   inc/cuentas.php ya tiene .lt-cuenta-aviso--bien y --mal. Falta el tercero:
   ni ha salido bien ni ha salido mal, esta en camino. Se distingue por el
   borde de la izquierda y por el titulo, NO por el color: la paleta es azul,
   blanco y negro y no hay un ambar que gastar.
   -------------------------------------------------------------------------- */

.lt-pagos-aviso--espera {
	border-left: 4px solid var(--marca);
	background: var(--marca-claro);
	color: var(--tinta);
}

/* --------------------------------------------------------------------------
   4. LOS RECIBOS
   -------------------------------------------------------------------------- */

.lt-pagos-recibos__lista {
	list-style: none;
	margin: 0;
	padding: 0;
}

.lt-pagos-recibo {
	padding: var(--e-2);
	margin: 0 0 var(--e-1);
	border: 1px solid var(--linea);
	border-radius: var(--radio-chico);
	background: var(--blanco);
}

.lt-pagos-recibo p {
	margin: 0 0 4px;
	line-height: var(--interlineado);
}

.lt-pagos-recibo p:last-child {
	margin-bottom: 0;
}

.lt-pagos-recibo__que {
	color: var(--tinta);
}

.lt-pagos-recibo__objeto,
.lt-pagos-recibo__dato {
	font-size: var(--fs-chico);
	color: var(--apagado);
}

/* El identificador de Stripe se parte donde haga falta: es una cadena de 30
   caracteres sin espacios y a 320 px de ancho desbordaria la tarjeta entera. */
.lt-pagos-recibo__ref {
	font-family: Menlo, Consolas, monospace;
	font-size: 0.8rem;
	word-break: break-all;
	color: var(--apagado);
}

.lt-pagos-recibo__estado {
	font-size: var(--fs-chico);
	color: var(--apagado);
}

/* --------------------------------------------------------------------------
   5. EL SELLO DE ESTADO

   Un solo dibujo con dos variantes. Lo que cambia entre estados es el TEXTO de
   dentro, que es lo que se lee; el sello solo lo hace visible de un vistazo.
   -------------------------------------------------------------------------- */

.lt-pagos-sello {
	display: inline-block;
	padding: 2px 10px;
	margin-right: 6px;
	border-radius: var(--radio-pildora);
	border: 1px solid var(--marca-borde);
	background: var(--marca-claro);
	color: var(--marca-oscuro);
	font-size: var(--fs-etiqueta);
	font-weight: var(--peso-fuerte);
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
	vertical-align: baseline;
}

/* Activa: la unica que se pinta en solido. Es el estado que la persona quiere
   ver, y tiene que distinguirse sin leer. */
.lt-pagos-sello--activo {
	background: var(--marca);
	border-color: var(--marca);
	color: var(--blanco);
}

/* Los tres estados «no salio»: negro, que es el otro color de la casa. No hay
   rojo en esta paleta y no se va a inventar uno para esto. */
.lt-pagos-sello--rechazado,
.lt-pagos-sello--cancelado,
.lt-pagos-sello--fallido {
	background: var(--tinta);
	border-color: var(--tinta);
	color: var(--blanco);
}

/* --------------------------------------------------------------------------
   6. LA MARCA DE «PROMOCIONADO» EN LA FICHA

   `post_class()` pone la clase `lt-promocionado` en el <article> de la ficha
   cuando la promocion esta viva (ver inc/pagos.php). Aqui se dibuja: una linea
   azul arriba y un rotulo. Se deja DELIBERADAMENTE discreto — es una etiqueta
   de honestidad hacia el visitante, no un anuncio.

   Y se declara asi, con `::before` sobre el propio articulo, porque este modulo
   NO puede tocar las plantillas de ficha (son de otro). Lo unico que puede
   poner es una clase.
   -------------------------------------------------------------------------- */

.lt-promocionado {
	position: relative;
}

.lt-promocionado::before {
	content: "Promocionado";
	display: inline-block;
	padding: 3px 10px;
	margin-bottom: var(--e-1);
	border-radius: var(--radio-pildora);
	background: var(--marca-claro);
	border: 1px solid var(--marca-borde);
	color: var(--marca-oscuro);
	font-family: var(--fuente-etiqueta, var(--fuente-texto));
	font-size: var(--fs-etiqueta);
	font-weight: var(--peso-fuerte);
	letter-spacing: var(--tracking-etiqueta);
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   7. MOVIL

   Comprobado a 320, 360, 390 y 768 px. Lo unico que hace falta es que el
   circulito del radio no encoja y que la tarjeta pueda partir el texto: las dos
   cosas ya estan arriba (flex:0 0 auto y min-width:0). Aqui solo se aprieta el
   espaciado, que a 320 px se come media pantalla.
   -------------------------------------------------------------------------- */

@media (max-width: 480px) {
	.lt-pagos__opcion {
		padding: var(--e-2) 12px;
		gap: 12px;
	}

	.lt-pagos-recibo {
		padding: 12px;
	}
}

/* --------------------------------------------------------------------------
   8. MOVIMIENTO

   Esta hoja solo anima el color del borde de una tarjeta al pasar por encima.
   Aun asi se apaga: la regla de la casa es que TODA animacion tenga su
   respaldo, y una excepcion «pero si es pequeña» es como se erosiona una regla.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.lt-pagos__opcion {
		transition: none;
	}
}

/* ==================================================================== */
/* EL RECORRIDO NUEVO: UNA PREGUNTA POR PANTALLA — 2026-08-19            */
/*                                                                      */
/* Ver inc/pagos.php. El recorrido quedo asi:                            */
/*                                                                      */
/*   publicar -> informacion + pieza -> [Siguiente]                      */
/*            -> plan               -> [Pagar] -> Stripe -> publicado    */
/* ==================================================================== */

/*
 * LO QUE QUEDO A MEDIAS.
 *
 * Quien relleno su ficha y se fue sin pagar la encuentra aqui con su boton.
 * Se pinta como una FILA y no como una tarjeta a proposito: es una tarea
 * pendiente, no una pieza de contenido, y una tarjeta le daria mas peso visual
 * del que merece al lado de los botones de publicar.
 */
.lt-pagos__pendientes {
	list-style: none;
	margin: 0 0 var(--e-4, 32px);
	padding: 0;
	display: grid;
	gap: var(--e-2, 16px);
}

.lt-pagos__pendiente {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--e-2, 16px);
	padding: var(--e-3, 24px);
	background: var(--blanco);
	border: 1px solid var(--linea);
	border-radius: var(--radio-tarjeta);
}

.lt-pagos__pendiente-nombre {
	flex: 1 1 240px;
	min-width: 0;
	font-weight: var(--peso-fuerte, 700);
	color: var(--tinta);
}

.lt-pagos__pendiente-tipo {
	flex: none;
	font-size: var(--fs-etiqueta, .78rem);
	font-weight: var(--peso-fuerte, 700);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--apagado);
}

.lt-pagos__pendiente .lt-btn { flex: none; }

/*
 * QUE SE VA A PUBLICAR, en la pantalla del plan.
 *
 * Sustituye al desplegable que habia antes. No es un control: es un recordatorio
 * de lo que se acaba de hacer, y por eso no lleva ni borde ni fondo de campo —si
 * los llevara, alguien intentaria cambiarlo—.
 */
.lt-pagos__que {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px var(--e-2, 16px);
	margin: 0 0 var(--e-3, 24px);
	padding-bottom: var(--e-2, 16px);
	border-bottom: 1px solid var(--linea);
}

.lt-pagos__que-rotulo {
	flex: 100%;
	font-size: var(--fs-etiqueta, .78rem);
	font-weight: var(--peso-fuerte, 700);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--apagado);
}

.lt-pagos__que-nombre {
	font-family: var(--fuente-titulo, inherit);
	font-size: 1.25rem;
	font-weight: var(--peso-fuerte, 700);
	color: var(--tinta);
}

.lt-pagos__que-tipo {
	font-size: var(--fs-chico, .9rem);
	color: var(--apagado);
}

/* Donde se paga: debajo del boton, no dentro. */
.lt-pagos__donde {
	display: block;
	margin-top: var(--e-1, 8px);
}

/*
 * LA SALIDA DE LA PANTALLA DEL PLAN — 2026-08-19.
 *
 * El dueno, mirando la pantalla: «¿por que no se le puede dar atras?». No habia
 * salida ninguna. Son dos enlaces —corregir algo, o dejarlo para despues— y van
 * en texto plano, no como botones: dos botones del mismo peso al final de una
 * compra es una duda que no hace falta crear.
 */
.lt-pagos__volver {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-3, 24px);
	margin: var(--e-3, 24px) 0 0;
}

.lt-pagos__volver-enlace {
	font-size: var(--fs-chico, .9rem);
	font-weight: var(--peso-medio, 600);
	color: var(--apagado);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.lt-pagos__volver-enlace:hover,
.lt-pagos__volver-enlace:focus-visible {
	color: var(--marca);
}

/* ==================================================================== */
/* LA PANTALLA DEL PLAN, SOLA EN SU PAGINA — 2026-08-19                  */
/*                                                                      */
/* PHP: inc/elegir-plan.php                                             */
/*                                                                      */
/* Es la ultima pantalla antes de Stripe. Todo lo que hay aqui esta para */
/* que se entienda que se compra y se pulse el boton: ni un enlace de    */
/* mas, ni una seccion que invite a irse a otro sitio.                   */
/* ==================================================================== */

.lt-plan {
	max-width: 900px;
	margin: 0 auto;
	padding: var(--e-5) 0 var(--e-6);
}

/* Que se va a publicar. Va arriba porque es lo que le da sentido al precio. */
.lt-plan__que {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px var(--e-2);
	margin: 0 0 var(--e-3);
	padding-bottom: var(--e-2);
	border-bottom: 1px solid var(--linea);
}

.lt-plan__que-rotulo {
	flex: 100%;
	font-size: var(--fs-etiqueta);
	font-weight: var(--peso-fuerte);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--apagado);
}

.lt-plan__que-nombre {
	font-family: var(--fuente-titulo, inherit);
	font-size: 1.4rem;
	font-weight: var(--peso-fuerte);
	color: var(--tinta);
}

.lt-plan__que-tipo { font-size: var(--fs-chico); color: var(--apagado); }

/*
 * LA PIEZA QUE SE SUBIO, A LA VISTA ANTES DE PAGAR.
 *
 * Pequena y a un lado: no es el protagonista, es la comprobacion de que se
 * subio lo que se creia. Un flyer equivocado se ve de un vistazo aqui y no
 * despues de cobrar.
 */
.lt-plan__pieza {
	max-width: 220px;
	margin: 0 0 var(--e-4);
	border-radius: var(--radio-tarjeta);
	overflow: hidden;
	background: var(--degradado-marca);
}

.lt-plan__pieza img { display: block; width: 100%; height: auto; }

.lt-plan__titulo {
	margin: 0 0 var(--e-3);
	font-size: clamp(1.6rem, 3vw, 2.2rem);
}

/*
 * LAS TARJETAS, UNA AL LADO DE OTRA.
 *
 * El duenno: «que ponga que incluye cada uno, como dos tarjetas». Lado a lado
 * y no una debajo de otra: comparar dos precios exige verlos a la vez, y en una
 * columna el segundo plan queda fuera de pantalla.
 */
.lt-plan__tarjetas {
	display: grid;
	gap: var(--e-3);
	margin-bottom: var(--e-4);
}

@media (min-width: 720px) {
	.lt-plan__tarjetas { grid-template-columns: repeat(2, 1fr); }
}

.lt-plan__tarjeta {
	display: block;
	position: relative;
	padding: var(--e-4);
	background: var(--blanco);
	border: 1px solid var(--linea);
	border-radius: var(--radio-tarjeta);
	cursor: pointer;
	transition: border-color var(--transicion), box-shadow var(--transicion);
}

.lt-plan__tarjeta:hover { border-color: var(--marca); }

/* El elegido se ve elegido sin tener que mirar el circulito del sistema. */
.lt-plan__tarjeta:has(input:checked) {
	border-color: var(--marca);
	box-shadow: 0 0 0 2px var(--marca);
}

.lt-plan__tarjeta:has(input:focus-visible) {
	outline: 2px solid var(--marca);
	outline-offset: 3px;
}

/*
 * EL BOTON DE OPCION SE ESCONDE PERO NO SE QUITA: sigue en el DOM, sigue
 * llegando al teclado y sigue siendo lo que anuncia un lector de pantalla. Lo
 * que se ve es la tarjeta entera, que es una zona pulsable de verdad y no un
 * cuadrito de 16px.
 */
.lt-plan__tarjeta input {
	position: absolute;
	top: var(--e-3);
	right: var(--e-3);
}

.lt-plan__tarjeta-cuerpo {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.lt-plan__nombre {
	font-family: var(--fuente-titulo, inherit);
	font-size: 1.25rem;
	font-weight: var(--peso-fuerte);
	color: var(--tinta);
	padding-right: var(--e-4);
}

.lt-plan__precio {
	font-size: 1.8rem;
	font-weight: var(--peso-fuerte);
	color: var(--marca);
	line-height: 1.1;
}

.lt-plan__vigencia {
	font-size: var(--fs-chico);
	color: var(--apagado);
	margin-bottom: var(--e-2);
}

/* Que incluye, punto por punto. */
.lt-plan__incluye {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-top: var(--e-2);
	border-top: 1px solid var(--linea);
}

.lt-plan__punto {
	position: relative;
	padding-left: 20px;
	font-size: var(--fs-chico);
	color: var(--tinta);
}

/* La palomita se dibuja con CSS: ni un byte de imagen ni un icono que cargar. */
.lt-plan__punto::before {
	content: '';
	position: absolute;
	left: 2px;
	top: 6px;
	width: 5px;
	height: 9px;
	border: solid var(--marca);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.lt-plan__enviar {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--e-1);
	margin: 0 0 var(--e-3);
}

.lt-plan__boton { min-width: 220px; }

.lt-plan__donde { font-size: var(--fs-chico); color: var(--apagado); }

/* Las salidas, en texto plano: no compiten con «Pagar». */
.lt-plan__salidas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-3);
	margin: 0;
}

.lt-plan__salida {
	font-size: var(--fs-chico);
	font-weight: var(--peso-medio);
	color: var(--apagado);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.lt-plan__salida:hover,
.lt-plan__salida:focus-visible { color: var(--marca); }

.lt-plan__vacio { margin: 0 0 var(--e-3); }
.lt-plan__volver { margin: var(--e-3) 0 0; }