/*
Theme Name:  Retos
Theme URI:   https://github.com/polmarza/retos
Author:      Con Criterio
Author URI:  https://concriterio.blog
Description: Tema propio de Retos, dentro del ecosistema Con Criterio. Tema de bloques sin dependencias ni compilación: la identidad vive en theme.json y las páginas en plantillas, para que viajen en el despliegue.
Version:     0.1.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.0
License:     MIT
License URI: https://opensource.org/licenses/MIT
Text Domain: retos
Tags:        block-theme, one-column, custom-colors, custom-menu, e-commerce
*/

/*
 * La identidad visual vive en theme.json, que es la fuente de verdad.
 * Aquí solo van los ajustes que theme.json no sabe expresar.
 * Ver docs/design-system.md antes de tocar cualquier valor.
 */

/* El pie se queda abajo aunque la pagina tenga poco contenido.

   Sin esto, el pie va justo detras del contenido: en una pagina corta —el
   listado con un solo reto, el carrito vacio, un aviso— queda flotando a media
   altura, y parece que la pagina esta rota o que falta algo por cargar.

   WordPress envuelve todo en .wp-site-blocks, asi que la columna se monta ahi y
   no en el body.

   Crece lo que haya entre la cabecera y el pie, sin nombrarlo: la ficha de
   producto no usa <main> como el resto de plantillas, sino un <div>, y una
   regla que dijera "main" la dejaria fuera sin avisar. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.wp-site-blocks > *:not(header):not(footer) {
	flex: 1 0 auto;
}

/* El foco de teclado nunca se elimina: es la única pista de dónde estás
   navegando sin ratón. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--acento-texto);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Los titulares en peso 900 se ven apretados si el navegador los parte por
   cualquier sitio. */
:where(h1, h2, h3) {
	text-wrap: balance;
}

/* Longitud de línea cómoda para leer, sin depender de la anchura del bloque. */
:where(p) {
	text-wrap: pretty;
}

/* Medida de lectura.

   El contenedor de las secciones es ancho (70rem) para que los titulares y las
   cajas arranquen todos en la misma vertical. Pero un parrafo a 70rem es
   ilegible: la vista se pierde al saltar de linea. Esta clase le pone tope a la
   prosa sin centrarla, de modo que el texto empieza donde empieza el titular. */
.retos-medida {
	max-width: 42rem;
}

/* Un parrafo con medida no se centra solo: text-align centra las lineas dentro
   de la caja, pero la caja sigue pegada a la izquierda. Cuando se pide centrado,
   se centra tambien la caja. */
.retos-medida.has-text-align-center {
	margin-inline: auto;
}

/* El titular de portada puede permitirse mas ancho que la prosa: son pocas
   palabras y en peso 900, asi que gana rompiendo en menos lineas. */
.retos-titular {
	max-width: 52rem;
}

/* Ilustraciones de las tarjetas: SVG que escala con su columna. */
.retos-ilustracion {
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: var(--wp--preset--spacing--40);
}

/* Boton secundario sobre el banner violeta.

   Va en blanco -5,47:1 sobre #6552E0- y no en el violeta de marca, que sobre su
   propio tono seria invisible. Al pasar el raton se invierte. */
.retos-boton-borde .wp-block-button__link {
	background: transparent;
	border: 2px solid var(--wp--preset--color--superficie);
	color: var(--wp--preset--color--superficie);
}
.retos-boton-borde .wp-block-button__link:hover {
	background: var(--wp--preset--color--superficie);
	color: var(--wp--preset--color--acento-texto);
}

/* ─── El engranaje de la cabecera ───────────────────────────────────────────

   Solo lo ve quien ha entrado. Va en flex y centrado a proposito: el enlace
   hereda un interlineado de 27,5px y el icono mide 20, asi que colocado por
   defecto se queda pegado al borde de arriba de su caja — 3,5px por encima del
   centro del texto de al lado, suficiente para que se note. */
.retos-navegacion__configuracion .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	color: var(--wp--preset--color--texto-suave);
}

.retos-navegacion__configuracion .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--acento-texto);
}

.retos-navegacion__configuracion svg {
	display: block;
}

/* ─── Listado de retos ──────────────────────────────────────────────────────

   WooCommerce sirve el catalogo como una rejilla de tarjetas centradas, que es
   lo razonable para una tienda de cien productos. Aqui hay un reto al mes: en
   rejilla se ve desangelado y no deja sitio para contar de que va cada uno.

   El tema sustituye su marcado entero por la tarjeta propia —ver
   retos_listado_con_la_tarjeta_del_tema() en functions.php—, asi que los estilos
   del listado son los de .retos-tarjeta y no hay reglas aqui. */

/* ─── Ficha de reto ─────────────────────────────────────────────────────────

   La descripcion del producto es HTML corriente, no bloques, asi que theme.json
   no llega: estos estilos van aqui. */

/* La cita del cliente es la que arranca el reto. Merece destacarse del resto
   del texto sin convertirse en un adorno. */
.woocommerce-product-details__short-description blockquote,
.wp-block-post-content blockquote,
.woocommerce-Tabs-panel blockquote {
	margin: var(--wp--preset--spacing--40) 0;
	padding: var(--wp--preset--spacing--10) 0 var(--wp--preset--spacing--10) var(--wp--preset--spacing--40);
	border-left: 3px solid var(--wp--preset--color--acento);
	color: var(--wp--preset--color--texto-suave);
	font-style: italic;
}

/* El titular de los retos relacionados, a la altura de "Descripcion".

   WooCommerce declara ".wp-block-woocommerce-product-collection h2.wp-block-heading"
   a tamano "small" —13px— pensando en una rejilla de miniaturas al pie de la
   ficha. Aqui es una seccion mas de la pagina y tiene que pesar lo mismo que el
   titular de arriba, o parece un pie de foto.

   El filtro retos_titular_de_relacionados() le quita la clase "wp-block-heading"
   al cambiarle el texto, precisamente para que ese selector no le alcance: es
   mas barato salir de su alcance que ganarle en especificidad, y no se rompe
   cuando WooCommerce sube la suya. La regla de aqui deja el tamano dicho en voz
   alta, para que se vea que es una decision y no una herencia. */
.retos-titular-relacionados {
	font-size: var(--wp--preset--font-size--titulo-2);
	line-height: 1.2;
}

/* "Categoria: Uncategorized" no aporta nada en un catalogo de un reto al mes, y
   con una sola categoria seria igual de inutil. Se oculta en vez de inventar
   una taxonomia que no hace falta. */
.wp-block-woocommerce-product-meta,
.product_meta {
	display: none;
}


/* ─── Mi cuenta ─────────────────────────────────────────────────────────────

   WooCommerce trae su propia hoja para esta zona, pensada para que funcione en
   cualquier tema. Funciona, pero desentona: menu flotado, tablas con bordes
   dobles y botones que no son los nuestros. Aqui se reescribe con los tokens
   del tema.

   El :has() distingue la zona interna -que tiene menu- de la pantalla de acceso
   -que no-, sin necesidad de clases distintas en el body. */

/* El contenido de una pagina va a la medida de lectura, 40rem, que aqui deja el
   menu y la tabla apretados contra el centro. Esta zona es una interfaz, no un
   texto: se le da el ancho amplio. */
.woocommerce-account .entry-content {
	max-width: var(--wp--style--global--wide-size);
}

/* WooCommerce contiene sus floats con el truco del clearfix: pseudo-elementos
   ::before y ::after con display:table. Dentro de una rejilla eso no es
   inofensivo — **los pseudo-elementos se convierten en celdas**, ocupan la
   primera y la ultima, y empujan a los hijos reales una posicion. El menu
   acababa en la columna ancha y la columna de registro bajaba a una segunda
   fila. Hay que apagarlos alli donde se use rejilla. */
.woocommerce:has(> .woocommerce-MyAccount-navigation)::before,
.woocommerce:has(> .woocommerce-MyAccount-navigation)::after,
.woocommerce .u-columns.col2-set::before,
.woocommerce .u-columns.col2-set::after {
	display: none;
}

.woocommerce:has(> .woocommerce-MyAccount-navigation) {
	display: grid;
	grid-template-columns: 14rem 1fr;
	gap: var(--wp--preset--spacing--60);
	align-items: start;
	margin-top: var(--wp--preset--spacing--50);
}

/* WooCommerce reparte esta zona con floats y anchos en porcentaje. Dentro de
   una rejilla eso no se ignora del todo: los porcentajes se siguen aplicando y
   las dos columnas salen diminutas. Hay que deshacerlo explicitamente. */
.woocommerce > :is(.woocommerce-MyAccount-navigation, .woocommerce-MyAccount-content) {
	float: none;
	width: auto;
	margin: 0;
	min-width: 0;
}


@media (max-width: 782px) {
	.woocommerce:has(> .woocommerce-MyAccount-navigation) {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--50);
	}
}

/* El menu lateral */

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 0.6rem 0.9rem;
	border-radius: 8px;
	color: var(--wp--preset--color--texto);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--pequeno);
}

.woocommerce-MyAccount-navigation li a:hover {
	background: var(--wp--preset--color--superficie);
	color: var(--wp--preset--color--acento-texto);
}

.woocommerce-MyAccount-navigation li.is-active a {
	background: var(--wp--preset--color--acento-texto);
	color: var(--wp--preset--color--superficie);
	font-weight: 700;
}

/* «Salir» no es una sección más: se separa y se atenua. */
.woocommerce-MyAccount-navigation li--customer-logout {
	margin-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--borde);
	padding-top: var(--wp--preset--spacing--30);
}

.woocommerce-MyAccount-navigation li--customer-logout a {
	color: var(--wp--preset--color--texto-suave);
}

/* Tablas: pedidos y descargas */

.woocommerce table.shop_table {
	width: 100%;
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: 12px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: var(--wp--preset--color--superficie);
	font-size: var(--wp--preset--font-size--pequeno);
}

.woocommerce table.shop_table :is(th, td) {
	padding: 0.9rem 1rem;
	text-align: left;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--borde);
}

.woocommerce table.shop_table th {
	font-weight: 700;
	background: var(--wp--preset--color--fondo);
}

.woocommerce table.shop_table tr:last-child td {
	border-bottom: 0;
}

/* Formularios */

.woocommerce :is(.woocommerce-Input, input[type="text"], input[type="email"], input[type="password"], input[type="tel"], select) {
	width: 100%;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: 8px;
	background: var(--wp--preset--color--superficie);
	color: var(--wp--preset--color--texto);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--base);
}

.woocommerce :is(.woocommerce-form-row, .form-row, fieldset p) {
	margin-bottom: var(--wp--preset--spacing--40);
}

.woocommerce label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: var(--wp--preset--font-size--pequeno);
	font-weight: 700;
}

.woocommerce fieldset {
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: 12px;
	padding: var(--wp--preset--spacing--40);
	margin: var(--wp--preset--spacing--50) 0;
}

.woocommerce legend {
	padding: 0 0.5rem;
	font-weight: 700;
}

/* Botones: los de WooCommerce se visten como los del tema. */

.woocommerce :is(a.button, button.button, input.button, .woocommerce-Button) {
	display: inline-block;
	width: auto;
	background: var(--wp--preset--color--acento-texto);
	color: var(--wp--preset--color--superficie);
	border: 0;
	border-radius: 8px;
	padding: 0.9rem 1.75rem;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}

.woocommerce :is(a.button, button.button, input.button, .woocommerce-Button):hover {
	background: var(--wp--preset--color--acento);
	color: var(--wp--preset--color--superficie);
}

/* La pantalla de acceso, cuando no hay sesión iniciada */

.woocommerce .u-columns.col2-set {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--wp--preset--spacing--50);
	margin-top: var(--wp--preset--spacing--50);
}

@media (max-width: 782px) {
	.woocommerce .u-columns.col2-set {
		grid-template-columns: 1fr;
	}
}

.woocommerce .u-columns.col2-set > div {
	width: auto;
	float: none;
}

.woocommerce :is(.woocommerce-form-login, .woocommerce-form-register) {
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: 12px;
	background: var(--wp--preset--color--superficie);
	padding: var(--wp--preset--spacing--50);
	margin: 0;
}

/* Avisos */

.woocommerce :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
	list-style: none;
	margin: 0 0 var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--borde);
	border-left: 4px solid var(--wp--preset--color--acento);
	border-radius: 8px;
	background: var(--wp--preset--color--superficie);
	font-size: var(--wp--preset--font-size--pequeno);
}

.woocommerce .woocommerce-error {
	border-left-color: #C0392B;
}

/* Los avisos de los bloques de WooCommerce llevan su propia clase y su propio
   azul, que no es de la paleta. Se visten como los demas. */
/* Los modificadores de WooCommerce (.is-info, .is-success…) pesan mas que la
   clase sola, asi que hay que nombrarlos para poder ganarles. */
.wc-block-components-notice-banner,
.wc-block-components-notice-banner:is(.is-info, .is-success, .is-warning, .is-error) {
	border: 1px solid var(--wp--preset--color--borde);
	border-left: 4px solid var(--wp--preset--color--acento);
	border-radius: 8px;
	background: var(--wp--preset--color--superficie);
	color: var(--wp--preset--color--texto);
	font-size: var(--wp--preset--font-size--pequeno);
}

.wc-block-components-notice-banner:is(.is-error, .is-warning) {
	border-left-color: #C0392B;
}

/* Su icono viene coloreado por WooCommerce; se pasa a la paleta del tema. */
.wc-block-components-notice-banner:is(.is-info, .is-success, .is-warning, .is-error) > svg {
	fill: var(--wp--preset--color--acento);
	background: transparent;
}

.wc-block-components-notice-banner:is(.is-error, .is-warning) > svg {
	fill: #C0392B;
}

/* ─── Acceso y registro: uno cada vez ───────────────────────────────────────

   Solo se oculta el segundo formulario si hay JavaScript para devolverlo. Sin
   scripts se ven los dos, como venia de serie. */

/* Acotado al formulario de acceso. WooCommerce reutiliza las mismas clases
   -u-columns, col2-set- en la pagina de direcciones, y sin el :has() esta regla
   la centraba y le dejaba una columna de cero pixeles. */
.tiene-js .woocommerce .u-columns.col2-set:has(.woocommerce-form-login) {
	grid-template-columns: minmax(0, 32rem);
	justify-content: center;
}

.retos-cambiar-formulario {
	margin: var(--wp--preset--spacing--40) 0 0;
	font-size: var(--wp--preset--font-size--pequeno);
	color: var(--wp--preset--color--texto-suave);
}

/* ─── Direcciones ───────────────────────────────────────────────────────── */

/* WooCommerce pone el titulo y el enlace de editar en una misma cabecera, y
   manda el enlace a la derecha. Con una sola columna de contenido eso lo deja
   flotando lejos de lo que edita. Van uno encima de otro, a la izquierda. */
.woocommerce-Address-title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--10);
	margin-bottom: var(--wp--preset--spacing--30);
}

.woocommerce-Address-title :is(h2, h3) {
	margin: 0;
	font-size: var(--wp--preset--font-size--titulo-3);
}

.woocommerce-Address-title a {
	float: none;
	font-size: var(--wp--preset--font-size--pequeno);
}

.woocommerce-Addresses {
	gap: var(--wp--preset--spacing--60);
}

.woocommerce-Address address {
	font-style: normal;
	color: var(--wp--preset--color--texto-suave);
}

/* WooCommerce limita a 1000px el titular y el contenido de cuenta, carrito y
   checkout, en su propia hoja (woocommerce-blocktheme.css). El resto del sitio
   va a 70rem —1120px—, asi que en pantallas anchas esas tres paginas quedaban
   metidas hacia dentro respecto a la cabecera y el pie, sin alinear con nada.

   Se antepone "body" para ganar por especificidad y no depender del orden en que
   se carguen las hojas, que no controlamos. */
body.woocommerce-account .wp-block-post-title,
body.woocommerce-account main .woocommerce,
body.woocommerce-cart .wp-block-post-title,
body.woocommerce-cart main .woocommerce,
body.woocommerce-checkout .wp-block-post-title,
body.woocommerce-checkout main .woocommerce {
	max-width: var(--wp--style--global--wide-size);
}

/* ─── Mis retos: la zona personal ───────────────────────────────────────── */

.retos-seccion + .retos-seccion {
	margin-top: var(--wp--preset--spacing--70);
}

.retos-seccion__titulo {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--titulo-3);
}

/* Cuando no hay nada que enseñar, no se enseña una caja vacia: una caja promete
   contenido, y aqui lo que hay que decir cabe en una frase. */
.retos-vacio {
	margin: 0;
	color: var(--wp--preset--color--texto-suave);
	max-width: 42rem;
}

/* La misma tarjeta sirve para un reto que ya tienes y para uno que no: solo
   cambian los botones. */
.retos-tarjetas {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
}

/* La tarjeta de un reto. Es la unica que hay: la usan el catalogo, los retos
   relacionados de la ficha y "Mis retos". Antes habia dos —una sobre el marcado
   de WooCommerce y otra propia— y se separaban en cada retoque. */
.retos-tarjeta {
	display: grid;
	grid-template-columns: 180px minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--superficie);
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: 12px;
}

.retos-tarjeta__imagen img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
}

/* El titulo y el precio comparten linea, separados por una barra. El precio no
   se va al fondo a la derecha: ahi dependia del ancho de la tarjeta, y en cuanto
   la tarjeta cambiaba de sitio —relacionados, movil— quedaba descolgado. */
.retos-tarjeta__texto h3 {
	margin: 0 0 0.35rem;
	font-size: var(--wp--preset--font-size--titulo-3);
}

.retos-tarjeta__texto h3 a {
	color: var(--wp--preset--color--texto);
	text-decoration: none;
}

.retos-tarjeta__texto h3 a:hover {
	color: var(--wp--preset--color--acento-texto);
}

.retos-tarjeta__precio {
	margin-left: 0.6em;
	padding-left: 0.7em;
	border-left: 2px solid var(--wp--preset--color--borde);
	color: var(--wp--preset--color--texto-suave);
	font-weight: 400;
	white-space: nowrap;
}

.retos-tarjeta__texto p {
	margin: 0;
	color: var(--wp--preset--color--texto-suave);
	font-size: var(--wp--preset--font-size--pequeno);

	/* La descripcion corta del producto es un parrafo entero. Aqui es un apunte
	   de contexto, no el sitio donde leerla: se corta a dos lineas. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Los dos botones, apilados. "Ver detalles" arriba y la accion de verdad debajo,
   que es donde cae la vista al terminar de leer la descripcion. */
.retos-tarjeta__acciones {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

/* La geometria de los tres estados se declara aqui entera, sin apoyarse en la
   clase .button: el rotulo "Proximamente" es un <span> y no un enlace, asi que
   las reglas de WooCommerce para a.button no le llegaban y se quedaba 20px mas
   bajo que el boton de al lado.

   El borde transparente del principal tampoco es decorativo: el secundario y el
   rotulo llevan borde, y sin uno equivalente mediria 4px menos. */
.retos-tarjeta__acciones > * {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 11rem;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border: 2px solid transparent;
	border-radius: 6px;
	font-size: var(--wp--preset--font-size--pequeno);
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
}

/* El relleno se repite con mas especificidad que ".woocommerce a.button", que es
   quien lo declara para los enlaces y ganaria a la regla de arriba. */
.retos-tarjeta .retos-tarjeta__acciones > a.button {
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);

	/* WooCommerce declara "border: none" para sus botones, y el principal
	   quedaba 4px mas bajo que los otros dos, que si llevan borde. El color se
	   deja transparente aqui y lo pisa despues el que toque a cada variante. */
	border: 2px solid transparent;
	font-size: var(--wp--preset--font-size--pequeno);
	line-height: 1.4;
}

.retos-tarjeta .retos-proximamente {
	background: transparent;
	border-style: dashed;
	border-color: var(--wp--preset--color--borde);
	color: var(--wp--preset--color--texto-suave);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: default;
}

@media (max-width: 700px) {
	/* Una columna: la imagen encabeza a todo el ancho y los botones se reparten
	   la fila a mitades. A 375px, una miniatura de 180px al lado del texto deja
	   las dos cosas apretadas y ninguna se lee bien. */
	.retos-tarjeta {
		grid-template-columns: 1fr 1fr;
		align-items: start;
		gap: var(--wp--preset--spacing--30);
	}

	.retos-tarjeta__imagen,
	.retos-tarjeta__texto {
		grid-column: 1 / span 2;
	}

	.retos-tarjeta__acciones {
		grid-column: 1 / span 2;
		flex-direction: row;

		/* A media fila "Anadir al carrito" parte en dos lineas y "Ver detalles"
		   no. Sin estirarlos, uno queda mas alto que el otro. */
		align-items: stretch;
	}

	.retos-tarjeta__acciones > * {
		flex: 1 1 0;
		min-width: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

/* Rotulo del menu de configuracion. No es un titulo de pagina: pesa lo que pesa
   una etiqueta. */
.retos-menu__grupo {
	margin: 0 0 var(--wp--preset--spacing--20);
	padding-left: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--texto-suave);
	font-size: var(--wp--preset--font-size--pequeno);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* ─── Botones de la zona de cuenta ──────────────────────────────────────── */

/* Descargar es la accion principal de quien ya tiene el reto, y no es una
   compra: se distingue del violeta, que en este sitio significa comprar. */
.woocommerce a.button.retos-boton-oscuro,
a.button.retos-boton-oscuro {
	background: var(--wp--preset--color--texto);
	color: var(--wp--preset--color--fondo);
}

.woocommerce a.button.retos-boton-oscuro:hover,
a.button.retos-boton-oscuro:hover {
	background: var(--wp--preset--color--acento-texto);
	color: var(--wp--preset--color--superficie);
}

.woocommerce a.button.retos-boton-secundario,
a.button.retos-boton-secundario {
	background: transparent;
	border: 2px solid var(--wp--preset--color--borde);
	color: var(--wp--preset--color--acento-texto);
}

.woocommerce a.button.retos-boton-secundario:hover,
a.button.retos-boton-secundario:hover {
	background: transparent;
	border-color: var(--wp--preset--color--acento-texto);
	color: var(--wp--preset--color--acento-texto);
}

/* ─── Ficha de un reto ya adquirido ─────────────────────────────────────── */

.retos-ya-adquirido,
.retos-en-el-carrito {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--30);
}

.retos-ya-adquirido__aviso,
.retos-en-el-carrito__aviso {
	margin: 0;
	color: var(--wp--preset--color--texto-suave);
	font-size: var(--wp--preset--font-size--pequeno);
}

/* ─── Gestionar cuenta ──────────────────────────────────────────────────── */

.retos-gestion {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--50);
}

.retos-gestion__bloque {
	padding: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--superficie);
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: 12px;
}

.retos-gestion__bloque h3 {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--titulo-3);
}

.retos-gestion__bloque p {
	margin: 0 0 var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--texto-suave);
	font-size: var(--wp--preset--font-size--pequeno);
	max-width: 42rem;
}

/* Lo que no se puede deshacer se marca en rojo, no en violeta: el violeta de
   este sitio significa adquirir algo. */
.retos-gestion__bloque--peligro {
	border-left: 4px solid #C0392B;
}

.retos-gestion__confirmacion {
	display: block;
	margin-bottom: var(--wp--preset--spacing--40);
}

.retos-gestion__confirmacion label {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-weight: 400;
	font-size: var(--wp--preset--font-size--pequeno);
	color: var(--wp--preset--color--texto);
	cursor: pointer;
}

.retos-gestion__confirmacion input {
	width: auto;
	margin-top: 0.2rem;
	flex-shrink: 0;
}

.woocommerce .retos-gestion button.button.retos-boton-peligro,
button.button.retos-boton-peligro {
	background: #C0392B;
	color: #FFFFFF;
}

.woocommerce .retos-gestion button.button.retos-boton-peligro:hover,
button.button.retos-boton-peligro:hover {
	background: #96271B;
	color: #FFFFFF;
}

/* Aviso a toda anchura, para confirmaciones que llegan tras una redirección. */
.retos-aviso-global {
	background: var(--wp--preset--color--texto);
	color: var(--wp--preset--color--fondo);
	text-align: center;
}

.retos-aviso-global p {
	max-width: 70rem;
	margin: 0 auto;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--pequeno);
}