/*
 * Estilos base del nuevo diseño (docs/plan-rediseno-publico.md, fase 2).
 * Todo cuelga de body.tema-v2 para ganar a la plantilla Ecomus (styles.css),
 * que se sigue cargando para no romper las páginas aún sin rediseñar.
 * Colores, fuentes y medidas: SOLO desde tokens.css.
 * Mobile-first: lo de fuera de las media queries es el móvil.
 */

/* ================================================================ Base */
body.tema-v2 {
	background: var(--jo-fondo);
	color: var(--jo-texto);
	font-family: var(--jo-fuente-texto);
	font-size: var(--jo-texto-m);
	line-height: 1.5;
}
/* Etiquetas sueltas con especificidad de ETIQUETA (:where() anula la de
   .tema-v2): ganan a las reglas de etiqueta de Ecomus (h1 {...}, a {...})
   porque este archivo se carga después, y pierden ante cualquier clase, sea de
   la plantilla (.tf-btn) o de un componente v2 (el título blanco de una
   cabecera sobre foto). Subirlas a una clase rompía, p. ej., el texto blanco
   de los botones .tf-btn. */
:where(.tema-v2) :is(h1, h2, h3, h4) {
	font-family: var(--jo-fuente-titulos);
	font-weight: 400;
	color: inherit;
	letter-spacing: 0;
}
/* La palabra destacada de los titulares va en cursiva («Especial *bodas*»):
   la cursiva regular de la fuente de titulares (tokens.css). */
:where(.tema-v2) :is(h1, h2) em, .tema-v2 .jo-serif em { font-style: italic; font-weight: 400; }
:where(.tema-v2) a { color: inherit; }
:where(.tema-v2) img { max-width: 100%; }

/* Texto que solo leen los lectores de pantalla. */
.tema-v2 .jo-solo-lectores {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.tema-v2 .jo-contenedor {
	width: 100%;
	max-width: calc(var(--jo-ancho) + 2 * var(--jo-margen));
	margin: 0 auto;
	padding-left: var(--jo-margen);
	padding-right: var(--jo-margen);
}
.tema-v2 .jo-main { min-height: 50vh; }
.tema-v2 .jo-serif { font-family: var(--jo-fuente-titulos); }

/* Botones de la plantilla, al estilo del diseño: negro, recto, sin sombra */
.tema-v2 .tf-btn.btn-fill { background: var(--jo-texto); border-color: var(--jo-texto); border-radius: var(--jo-radio); color: var(--jo-blanco); }
.tema-v2 .tf-btn.btn-fill:hover { background: #000; }
.tema-v2 .jo-boton {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 12px 22px; border-radius: var(--jo-radio);
	background: var(--jo-texto); color: var(--jo-blanco);
	font-size: var(--jo-texto-s); font-weight: 500; text-decoration: none;
}
.tema-v2 .jo-boton:hover { color: var(--jo-blanco); background: #000; }

/* ================================================================ Cabecera */
.tema-v2 .jo-cabecera {
	position: sticky; top: 0; z-index: 900;
	background: var(--jo-blanco);
	border-bottom: 1px solid rgba(0, 0, 0, .04);
}
.tema-v2 .jo-cabecera__fila {
	display: flex; align-items: center; gap: 16px;
	height: var(--jo-alto-cabecera);
}
.tema-v2 .jo-cabecera__hamburguesa { color: var(--jo-texto); display: inline-flex; }
.tema-v2 .jo-cabecera__logo { display: block; flex: 0 1 auto; margin-right: auto; }
.tema-v2 .jo-cabecera__logo img { display: block; height: 22px; width: auto; }

.tema-v2 .jo-menu { display: none; }

.tema-v2 .jo-cabecera__iconos { display: flex; align-items: center; gap: 16px; list-style: none; margin: 0; padding: 0; }
.tema-v2 .jo-cabecera__iconos > li > a { display: inline-flex; color: var(--jo-texto); position: relative; }
.tema-v2 .jo-cabecera__carrito .count-box {
	position: absolute; top: -6px; right: -8px;
	min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
	background: var(--jo-alerta); color: #fff; font-size: 10px; line-height: 16px; text-align: center;
}
.tema-v2 .jo-cabecera__carrito .count-box:empty { display: none; }
.tema-v2 .jo-cuenta { font-size: var(--jo-texto-s); border-radius: var(--jo-radio); min-width: 200px; }
.tema-v2 .jo-cuenta__nombre { padding: 6px 16px 8px; color: var(--jo-texto-tenue); font-size: var(--jo-texto-xs); }

@media (min-width: 1200px) {
	.tema-v2 .jo-cabecera__hamburguesa { display: none; }
	/* Logo centrado en vertical. El 27-10-2026 se alineó su base con la del menú,
	   según la maqueta, pero el diseñador lo prefirió centrado (28-10-2026). */
	.tema-v2 .jo-cabecera__logo { margin-right: 0; }
	.tema-v2 .jo-cabecera__logo img { height: 25.5px; } /* 220 px de ancho, como en la maqueta del diseñador (27-10-2026) */
	.tema-v2 .jo-menu { display: block; flex: 1; }
	.tema-v2 .jo-menu > ul { display: flex; justify-content: center; gap: 26px; list-style: none; margin: 0; padding: 0; }
	.tema-v2 .jo-menu > ul > li { position: relative; }
	.tema-v2 .jo-menu a {
		display: block; padding: 8px 0;
		font-size: var(--jo-texto-s); font-weight: 500; color: var(--jo-texto); text-decoration: none; white-space: nowrap;
	}
	.tema-v2 .jo-menu a:hover, .tema-v2 .jo-menu a.is-activo { text-decoration: underline; text-underline-offset: 6px; }

	.tema-v2 .jo-menu__sub {
		position: absolute; top: 100%; left: -16px; z-index: 10;
		min-width: 220px; padding: 10px 0; margin: 0; list-style: none;
		background: var(--jo-blanco); box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
		opacity: 0; visibility: hidden; transform: translateY(6px); transition: .15s;
	}
	.tema-v2 .jo-menu__sub a { padding: 6px 16px; font-weight: 400; }
	.tema-v2 .jo-menu__desplegable:hover .jo-menu__sub,
	.tema-v2 .jo-menu__desplegable:focus-within .jo-menu__sub { opacity: 1; visibility: visible; transform: none; }
}

/* ================================================================ Barra lateral de categorías
   (v2/partials/barra_categorias). Móvil: chips con scroll horizontal. */
.tema-v2 .jo-barra { margin: 0 calc(-1 * var(--jo-margen)) 24px; }
.tema-v2 .jo-barra__lista {
	display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none;
	list-style: none; margin: 0; padding: 4px var(--jo-margen);
	position: relative; /* referencia de offsetLeft para centrar la activa */
}
.tema-v2 .jo-barra__lista::-webkit-scrollbar { display: none; }
.tema-v2 .jo-barra__titulo, .tema-v2 .jo-barra__info, .tema-v2 .jo-barra__separador { display: none; }
.tema-v2 .jo-barra__enlace {
	display: flex; align-items: center; gap: 8px; white-space: nowrap;
	padding: 4px 12px 4px 4px; border-radius: 999px; background: var(--jo-blanco);
	font-size: var(--jo-texto-s); font-weight: 500; color: var(--jo-texto); text-decoration: none;
}
.tema-v2 .jo-barra__circulo {
	flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
	display: grid; place-items: center; overflow: hidden;
	background: var(--jo-circulo); color: var(--jo-texto);
}
.tema-v2 .jo-barra__circulo img { width: 62%; height: 62%; object-fit: contain; }
.tema-v2 .jo-barra__circulo svg { width: 55%; height: 55%; }
/* Iconos del diseñador (v2.partials.icono_categoria): su viewBox ya es el círculo entero */
.tema-v2 .jo-barra__circulo .jo-icono { width: 100%; height: 100%; }
.tema-v2 .jo-barra__enlace.is-activo { outline: 1px solid var(--jo-texto); }
.tema-v2 .jo-barra__circulo--blanco { background: var(--jo-blanco); box-shadow: inset 0 0 0 1px var(--jo-linea); }
.tema-v2 .jo-barra__circulo--destacados { background: var(--jo-circulo-destacados); }
.tema-v2 .jo-barra__circulo--promociones { background: var(--jo-circulo-promociones); }
.tema-v2 .jo-barra__circulo--configurador { background: var(--jo-circulo-configurador); }
.tema-v2 .jo-barra__circulo--venta { background: var(--jo-circulo-venta); color: var(--jo-blanco); }
.tema-v2 .jo-barra__circulo--feria { background: var(--jo-circulo-feria); color: var(--jo-blanco); }

@media (min-width: 1100px) {
	.tema-v2 .jo-barra { margin: 0; position: sticky; top: calc(var(--jo-alto-cabecera) + 24px); }
	.tema-v2 .jo-barra__lista { flex-direction: column; gap: 8px; overflow: visible; padding: 0; }
	.tema-v2 .jo-barra__enlace { padding: 0; background: none; border-radius: 0; gap: 14px; font-weight: 500; }
	.tema-v2 .jo-barra__enlace:hover .jo-barra__texto, .tema-v2 .jo-barra__enlace.is-activo .jo-barra__texto { text-decoration: underline; text-underline-offset: 4px; }
	.tema-v2 .jo-barra__enlace.is-activo { outline: 0; }
	.tema-v2 .jo-barra__circulo { width: 40px; height: 40px; }
	.tema-v2 .jo-barra__separador { display: block; height: 1px; width: 110px; margin: 8px 0; background: var(--jo-circulo-promociones); opacity: .45; }
	.tema-v2 .jo-barra__titulo { display: block; margin: 14px 0 6px; font-family: var(--jo-fuente-titulos); font-size: var(--jo-texto-l); }
	.tema-v2 .jo-barra__titulo em { font-style: italic; }
	.tema-v2 .jo-barra__info { display: block; margin-top: 24px; font-size: var(--jo-texto-xs); }
	.tema-v2 .jo-barra__info h3 { font-family: var(--jo-fuente-texto); font-size: var(--jo-texto-s); font-weight: 500; margin: 0 0 10px; }
	.tema-v2 .jo-barra__info ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
	.tema-v2 .jo-barra__info li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; }
	.tema-v2 .jo-barra__info strong { display: block; font-weight: 500; }
	.tema-v2 .jo-barra__info span { color: var(--jo-texto-tenue); }
}

/* ================================================================ Tarjeta de producto
   Se reestiliza la de siempre (layouts.public_producto_card) en vez de
   rehacerla: así siguen valiendo el carrito, la vista rápida y los precios. */
.tema-v2 .card-product { background: transparent; }
.tema-v2 .card-product .card-product-wrapper {
	background: var(--jo-blanco); border-radius: var(--jo-radio); overflow: hidden;
	aspect-ratio: 1 / 1;
}
/* La imagen ocupa todo el recuadro cuadrado: layouts.public_rejilla_css le da
   al enlace una proporción apaisada (1,4:1) en escritorio, y la foto se quedaba
   arriba, con un hueco debajo (se vio con las fotos cuadradas nuevas, 30-10-2026). */
.tema-v2 .card-product .card-product-wrapper > div,
.tema-v2 .card-product .product-img { aspect-ratio: auto; height: 100%; }
/* 5 % de aire (antes 10 %): el diseñador quiere los productos más grandes en su recuadro (27-10-2026). */
.tema-v2 .card-product .card-product-wrapper img { object-fit: contain; padding: 5%; }
.tema-v2 .card-product .card-product-info { padding-top: 10px; }
/* Nombre e iconos en la misma línea también en tarjetas de 200 a 239 px (cuatro
   por fila en el listado): layouts.public_rejilla_css los apila por debajo de
   240 px y la fila crecía (diseñador, 30-10-2026). */
@container (min-width: 200px) and (max-width: 239px) {
	.tema-v2 .card-acciones-fijas .acciones-fila { flex-direction: row; gap: 8px; text-align: start; }
	.tema-v2 .card-acciones-fijas .acciones-fila .title { align-self: auto; min-height: 0; }
}
.tema-v2 .card-product .card-product-info .title { font-family: var(--jo-fuente-texto); font-size: var(--jo-texto-s); font-weight: 500; color: var(--jo-texto); }
.tema-v2 .card-product .box-icon { width: 26px; height: 26px; border: 0; background: transparent; color: var(--jo-texto); }
/* Promoción: en lugar de la cinta cruzada de siempre (assets/css/app.css), un
   círculo con un «%» estrecho (dibujado aquí, no el icono de la barra lateral,
   que es más ancho) en la esquina, asomando un poco
   (en el diseño sale casi la mitad y choca con la tarjeta de al lado). El
   texto «Promoción» se oculta a la vista pero lo siguen leyendo los lectores
   de pantalla. El tamaño va en proporción a la tarjeta (densidades 4–6). */
.tema-v2 .card-product .card-product-wrapper:has(.promocion-cinta) { overflow: visible; }
.tema-v2 .promocion-cinta {
	top: -4px; right: -4px; left: auto;
	width: clamp(28px, 15%, 42px); height: auto; aspect-ratio: 1; padding: 0;
	transform: none; border: 0; border-radius: 50%; box-shadow: none;
	background: var(--jo-circulo-promociones) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1' stroke-linecap='round'%3E%3Ccircle cx='9.7' cy='9' r='1.45'/%3E%3Ccircle cx='14.3' cy='15' r='1.45'/%3E%3Cpath d='M14.2 7.9L9.8 16.1'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	font-size: 0; color: transparent; letter-spacing: 0;
}
@media (min-width: 768px) {
	.tema-v2 .promocion-cinta { top: -6px; right: -6px; }
}

/* ================================================================ Pie */
.tema-v2 .jo-pie { margin-top: var(--jo-hueco-seccion); color: var(--jo-texto); }
.tema-v2 .jo-pie__sello-fila { position: relative; height: 0; }
.tema-v2 .jo-sello { position: absolute; right: var(--jo-margen); bottom: -40px; z-index: 2; width: 96px; height: 96px; }
.tema-v2 .jo-pie__principal { background: var(--jo-panel); padding: 48px 0 40px; }
.tema-v2 .jo-pie__rejilla { display: grid; gap: 32px; }
.tema-v2 .jo-pie__marca img { height: 26px; width: auto; }
.tema-v2 .jo-pie__lema { margin: 28px 0 0; font-family: var(--jo-fuente-titulos); font-size: 22px; line-height: 1.2; }
.tema-v2 .jo-pie__lema em { font-style: italic; }
.tema-v2 .jo-pie__titulo { font-family: var(--jo-fuente-texto) !important; font-size: var(--jo-texto-s); font-weight: 500 !important; margin: 0 0 14px; }
.tema-v2 .jo-pie__columna { font-size: var(--jo-texto-s); }
.tema-v2 .jo-pie__columna p { margin: 0 0 16px; }
.tema-v2 .jo-pie__columna a { text-decoration: none; }
.tema-v2 .jo-pie__columna a:hover { text-decoration: underline; }
.tema-v2 .jo-pie__webs a { color: var(--jo-texto-suave); }
.tema-v2 .jo-pie__enlaces { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 2px; }
.tema-v2 .jo-pie__redes { display: flex; align-items: center; gap: 8px; }
.tema-v2 .jo-pie__redes span { font-weight: 500; color: var(--jo-texto-suave); margin-right: 10px; }
.tema-v2 .jo-pie__redes a {
	width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
	background: var(--jo-texto-tenue); color: var(--jo-panel);
}
.tema-v2 .jo-pie__redes a:hover { background: var(--jo-texto-suave); text-decoration: none; }

.tema-v2 .jo-pie__patrocinios { background: var(--jo-panel-oscuro); padding: 36px 0; }
.tema-v2 .jo-pie__patrocinios-fila { display: grid; gap: 24px; align-items: center; }
.tema-v2 .jo-pie__patrocinios p { margin: 0; font-size: var(--jo-texto-xs); font-weight: 500; line-height: 1.35; }
.tema-v2 .jo-pie__patrocinios ul { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; }
.tema-v2 .jo-pie__patrocinios img { height: 30px; width: auto; }
.tema-v2 .jo-pie__patrocinios img.jo-pie__patrocinio--compacto { height: 42px; } /* logo casi cuadrado: a la misma altura se ve diminuto */
.tema-v2 .jo-pie__patrocinios img.jo-pie__patrocinio--vertical { height: 56px; } /* logo más alto que ancho (Club Zaudín) */

/* Espacio para la barra inferior fija del móvil (layouts.public_menu_footer) */
@media (max-width: 1149px) {
	.tema-v2 .jo-pie__patrocinios { padding-bottom: 96px; }
}

@media (min-width: 768px) {
	.tema-v2 .jo-pie__rejilla { grid-template-columns: 1.1fr 1fr 1fr; gap: 40px; }
	.tema-v2 .jo-pie__marca { border-right: 1px solid var(--jo-texto-tenue); padding-right: 32px; }
	.tema-v2 .jo-pie__patrocinios-fila { grid-template-columns: 220px 1fr; }
	.tema-v2 .jo-pie__patrocinios ul { justify-content: space-around; }
	.tema-v2 .jo-sello { width: 140px; height: 140px; bottom: -64px; }
}
@media (min-width: 1200px) {
	.tema-v2 .jo-pie__principal { padding: 64px 0 56px; }
	.tema-v2 .jo-pie__lema { margin-top: 64px; font-size: 26px; }
	.tema-v2 .jo-pie__patrocinios { padding: 56px 0; }
	.tema-v2 .jo-pie__patrocinios img { height: 36px; }
	.tema-v2 .jo-pie__patrocinios img.jo-pie__patrocinio--compacto { height: 50px; }
	.tema-v2 .jo-pie__patrocinios img.jo-pie__patrocinio--vertical { height: 64px; }
}

/* ================================================================ Piezas de la plantilla en el tono v2 */
.tema-v2 .tf-toolbar-bottom { background: var(--jo-blanco); }
.tema-v2 .modal-content { border-radius: var(--jo-radio); }
.tema-v2 .preload-container { background: var(--jo-fondo); }

/* ================================================================ Páginas sin maqueta propia (fase 6)
   Carrito, Mi cuenta, acceso y registro, noticias…: son las vistas de siempre
   (sin copia en v2); aquí solo se pasan al tono del diseño las piezas de la
   plantilla que usan. */
body.tema-v2 { --primary: var(--jo-acento); } /* el rojo de Ecomus: enlaces .text_primary, menú de la cuenta… */

/* Cabecera de página: sin la foto de fondo y con el título en serif, a la
   izquierda, como el resto del diseño. El fondo y el color blanco vienen en
   línea / con !important de Bootstrap: de ahí los !important. */
.tema-v2 .tf-page-title { background-image: none !important; padding: 32px 0 8px; margin-bottom: 8px !important; }
.tema-v2 .tf-page-title .container-full {
	max-width: calc(var(--jo-ancho) + 2 * var(--jo-margen));
	margin: 0 auto;
	padding: 0 var(--jo-margen);
}
.tema-v2 .tf-page-title .heading {
	color: var(--jo-texto) !important;
	text-align: left !important;
	font-family: var(--jo-fuente-titulos);
	font-size: var(--jo-titulo-m);
	line-height: 1.1;
}
.tema-v2 .tf-page-title p { color: var(--jo-texto-suave) !important; text-align: left !important; margin-top: 8px; }

/* Menú lateral de Mi cuenta (layouts.public_cuenta_menu) */
.tema-v2 .my-account-nav .my-account-nav-item { border-radius: var(--jo-radio); border-color: var(--jo-linea); font-size: var(--jo-texto-m); }
.tema-v2 .my-account-nav .my-account-nav-item:hover,
.tema-v2 .my-account-nav .my-account-nav-item.active { background: var(--jo-blanco); color: var(--jo-texto); border-color: var(--jo-blanco); }
.tema-v2 .my-account-nav .my-account-nav-item.active { font-weight: 600; box-shadow: inset 3px 0 0 var(--jo-acento); }
.tema-v2 .my-account-nav .my-account-nav-item::before { background: var(--jo-acento); }

/* Páginas de error (v2/errors) */
.tema-v2 .jo-error { padding: var(--jo-hueco-seccion) var(--jo-margen); text-align: center; }
.tema-v2 .jo-error__codigo { margin: 0; font-family: var(--jo-fuente-titulos); font-size: 96px; line-height: 1; color: var(--jo-texto-tenue); }
.tema-v2 .jo-error__titulo { margin: 16px 0 12px; font-size: var(--jo-titulo-m); line-height: 1.15; }
.tema-v2 .jo-error__texto { max-width: 46ch; margin: 0 auto 28px; color: var(--jo-texto-suave); }
.tema-v2 .jo-error__acciones { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px; }
.tema-v2 .jo-error__enlace { text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 768px) {
	.tema-v2 .tf-page-title { padding-top: 48px; }
	.tema-v2 .tf-page-title .heading { font-size: var(--jo-titulo-l); }
	.tema-v2 .jo-error__codigo { font-size: 140px; }
	.tema-v2 .jo-error__titulo { font-size: var(--jo-titulo-l); }
}

/* Asistente IA «Planifica tu evento» (vista asistente + assets/css/assistant-chat.css):
   sus colores son variables --chat-*, así que basta con darles los del tema. */
body.tema-v2 {
	--chat-primary: var(--jo-texto);
	--chat-primary-light: var(--jo-texto);
	--chat-accent: var(--jo-acento);
	--chat-accent-light: var(--jo-acento);
	--chat-bg: var(--jo-fondo);
	--chat-user-bubble: var(--jo-texto);
	--chat-border: var(--jo-panel);
	--chat-radius: 8px;
	--chat-radius-sm: 6px;
}
.tema-v2 :is(.assistant-hero, .chat-container, .assistant-features),
.tema-v2 :is(.assistant-hero, .chat-container, .assistant-features) * { font-family: var(--jo-fuente-texto); }
.tema-v2 .assistant-hero { background: var(--jo-panel-medio); padding: 32px var(--jo-margen) 48px; }
.tema-v2 .assistant-hero::before { content: none; }
.tema-v2 .assistant-hero .hero-icon { display: none; }
.tema-v2 .assistant-hero h1 {
	margin: 0 0 8px !important;
	color: var(--jo-texto);
	font-family: var(--jo-fuente-titulos);
	font-size: var(--jo-titulo-m); font-weight: 400; line-height: 1.1; letter-spacing: 0;
}
.tema-v2 .assistant-hero p { color: var(--jo-texto-suave); }
@media (min-width: 768px) {
	.tema-v2 .assistant-hero h1 { font-size: var(--jo-titulo-l); }
}