/* =========================================================
   Cupón Stech — ficha de producto
   Tokens propios: azul de marca Samsung como acento (no un
   azul genérico de SaaS), superficie de tarjeta real separada
   del fondo de la página, un solo acento de color por bloque.
   ========================================================= */

.ctc-ficha {
	--ctc-bg: #eef1f7;
	--ctc-surface: #ffffff;
	--ctc-surface-2: #f3f5f9;
	--ctc-text: #12141a;
	--ctc-text-muted: #6b7280;
	--ctc-border: #e4e7ee;
	--ctc-accent: #1428a0;      /* azul Samsung, no un azul generico */
	--ctc-accent-bg: #eef0fa;
	--ctc-teal: #0f766e;       /* color fijo para identificar Tienda Estudiantes en cualquier estado */
	--ctc-danger: #b3261e;
	--ctc-danger-bg: #fbeae9;
	--ctc-success: #146c3a;
	--ctc-gift: #6d3f9e;
	--ctc-gift-bg: #f2ecfa;
	--ctc-radius-lg: 20px;
	--ctc-radius-md: 12px;
	--ctc-radius-sm: 9px;

	max-width: 480px;
	margin: 24px auto;
	padding: 10px;
	color: var(--ctc-text);
	background: var(--ctc-bg);
	border-radius: calc(var(--ctc-radius-lg) + 8px);
	font-size: 15px;
	line-height: 1.45;
}

:where(.ctc-ficha) :where(button) {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	font-family: inherit;
	color: var(--ctc-text);
}

.ctc-tarjeta {
	background: var(--ctc-surface);
	border-radius: var(--ctc-radius-lg);
	padding: 20px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
}

.ctc-breadcrumb {
	font-size: 12px;
	color: var(--ctc-text-muted);
	margin: 0 0 10px;
}
.ctc-breadcrumb a {
	color: inherit;
	text-decoration: none;
}
.ctc-breadcrumb a:hover {
	text-decoration: underline;
}

.ctc-titulo {
	margin: 0 0 16px;
	font-size: 21px;
	font-weight: 650;
	letter-spacing: -0.01em;
	color: var(--ctc-text);
}

.ctc-imagen {
	background: var(--ctc-surface-2);
	border-radius: var(--ctc-radius-md);
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	margin-bottom: 18px;
}
.ctc-imagen img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.ctc-imagen-placeholder {
	width: 56px;
	height: 56px;
	color: #b8bfcc;
}

.ctc-sin-oferta {
	background: var(--ctc-surface-2);
	border-radius: var(--ctc-radius-md);
	padding: 20px;
	text-align: center;
}
.ctc-sin-oferta-titulo {
	font-weight: 600;
	margin: 0 0 6px;
	color: var(--ctc-text);
}
.ctc-sin-oferta-precio {
	color: var(--ctc-text-muted);
	margin: 0;
}

.ctc-selector-label {
	font-size: 12.5px;
	color: var(--ctc-text-muted);
	margin: 0 0 8px;
}
.ctc-selector-variantes {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 14px;
}
.ctc-variante-chip {
	flex: 0 1 auto;
	min-width: 44px;
	padding: 7px 14px;
	border-radius: 999px;
	border: 1.5px solid var(--ctc-border);
	background: var(--ctc-surface-2);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ctc-text);
	text-align: center;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.ctc-variante-chip.is-active {
	border-color: var(--ctc-accent);
	background: var(--ctc-accent);
	color: #fff;
}
.ctc-selector {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 8px;
}
/* BUG REAL encontrado: sin esta regla, el atributo hidden (puesto por
   JS al cambiar de variante) no tenía ningún efecto visual — el
   display:flex de arriba lo pisaba silenciosamente, así que TODAS las
   rutas de TODAS las variantes se seguían viendo a la vez, sin
   importar cuál chip de variante estuviera activo. */
.ctc-selector[hidden] {
	display: none;
}
.ctc-selector-chip {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	flex: 1 1 130px;
	text-align: center;
	padding: 9px 12px;
	border-radius: 16px;
	border: 1.5px solid var(--ctc-border);
	background: var(--ctc-surface-2);
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
	font-size: 12.5px;
	font-weight: 500;
	color: var(--ctc-text);
	white-space: normal;
	line-height: 1.3;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.ctc-selector-chip-texto {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1px;
}
.ctc-selector-chip-linea1 {
	font-weight: 600;
}
.ctc-selector-chip-linea2 {
	font-size: 10.5px;
	font-weight: 400;
	opacity: 0.8;
}
.ctc-selector-chip.is-active {
	border-color: var(--ctc-accent);
	background: var(--ctc-accent);
	color: #fff;
	font-weight: 600;
	box-shadow: 0 3px 10px rgba(20, 40, 160, 0.28);
}
.ctc-selector-chip--estudiantes {
	border-color: rgba(15, 118, 110, 0.35);
}
.ctc-selector-chip--estudiantes .ctc-selector-chip-icono {
	color: var(--ctc-teal);
}
.ctc-selector-chip--estudiantes.is-active {
	background: var(--ctc-teal);
	border-color: var(--ctc-teal);
	color: #fff;
	box-shadow: 0 3px 10px rgba(15, 118, 110, 0.28);
}
.ctc-selector-chip--estudiantes.is-active .ctc-selector-chip-icono {
	color: #fff;
}
.ctc-selector-chip-icono {
	width: 13px;
	height: 13px;
	flex-shrink: 0;
}
.ctc-selector-nota {
	font-size: 11.5px;
	color: var(--ctc-text-muted);
	margin: 0 0 20px;
}
.ctc-fecha-actualizado-ruta {
	font-size: 12px;
	color: var(--ctc-text-muted);
	/* FASE 3: SKU vuelve a vivir en esta misma línea (último
	   segmento) — una sola línea conceptual; en móvil puede envolver
	   de forma natural si de plano no cabe, gracias a flex-wrap, pero
	   ya no es una segunda línea "a propósito" como en 2B.7. */
	margin: 8px 0 18px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	column-gap: 4px;
	row-gap: 2px;
}


.ctc-acceso-estudiantes {
	background: var(--ctc-accent-bg);
	border: 1px solid rgba(20, 40, 160, 0.16);
	border-radius: var(--ctc-radius-sm);
	padding: 10px 12px;
	margin: 10px 0;
	color: #2c3a8c;
}
.ctc-acceso-estudiantes-titulo {
	margin: 0 0 4px;
	font-size: 12.5px;
	font-weight: 600;
	color: #2c3a8c;
}
.ctc-acceso-estudiantes-paso {
	margin: 0 0 3px;
	font-size: 12px;
	color: #2c3a8c;
}
.ctc-acceso-estudiantes-nota {
	margin: 0;
	font-size: 11.5px;
	font-weight: 500;
	color: #2c3a8c;
	font-style: italic;
}

.ctc-precio-bloque {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 18px;
	padding: 14px 0;
	border-top: 1px solid rgba(18, 20, 26, 0.08);
	border-bottom: 1px solid rgba(18, 20, 26, 0.08);
	font-variant-numeric: tabular-nums;
}
.ctc-precio-final {
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--ctc-text);
}
.ctc-precio-original {
	font-size: 15px;
	color: var(--ctc-text-muted);
	text-decoration: line-through;
}
.ctc-badge-ahorro {
	display: inline-block;
	background: var(--ctc-danger-bg);
	color: var(--ctc-danger);
	font-size: 12.5px;
	font-weight: 600;
	padding: 4px 12px;
	border-radius: 999px;
}

.ctc-regalo {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--ctc-gift-bg);
	color: var(--ctc-gift);
	border-radius: var(--ctc-radius-md);
	padding: 12px 14px;
	font-size: 13.5px;
	margin-bottom: 16px;
}

.ctc-cta-fila {
	display: flex;
	align-items: stretch;
	gap: 10px;
	margin-bottom: 18px;
}
.ctc-cta {
	display: block;
	flex: 1;
	width: 100%;
	text-align: center;
	background: var(--ctc-accent);
	color: #fff !important;
	padding: 14px;
	border-radius: var(--ctc-radius-md);
	font-weight: 600;
	font-size: 15.5px;
	text-decoration: none;
	box-sizing: border-box;
	transition: opacity 0.15s ease;
}
.ctc-cta:hover {
	opacity: 0.92;
}
.ctc-cta-fila .ctc-fav-toggle--junto-cta {
	position: static !important;
	width: 52px !important;
	height: auto !important;
	min-width: 52px !important;
	max-width: 52px !important;
	min-height: 0 !important;
	max-height: none !important;
	flex-shrink: 0;
	border-radius: var(--ctc-radius-md);
	border: 1.5px solid var(--ctc-border);
	background: var(--ctc-surface);
	box-shadow: none;
}
.ctc-cta-fila .ctc-fav-toggle--junto-cta svg {
	width: 22px !important;
	height: 22px !important;
}
.ctc-cta-fila .ctc-fav-toggle--junto-cta:hover {
	border-color: #e11d48;
}
.ctc-cta-fila .ctc-fav-toggle--junto-cta.is-guardado {
	background: #fef2f4;
	border-color: #e11d48;
	color: #e11d48;
}

.ctc-acordeon {
	border-top: 1px solid var(--ctc-border);
	padding: 16px 0;
}
.ctc-acordeon summary {
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
	color: var(--ctc-text);
	display: flex;
	align-items: center;
	justify-content: space-between;
	list-style: none;
}
.ctc-acordeon summary::-webkit-details-marker {
	display: none;
}
.ctc-acordeon summary::after {
	content: "";
	width: 9px;
	height: 9px;
	border-right: 1.5px solid var(--ctc-text-muted);
	border-bottom: 1.5px solid var(--ctc-text-muted);
	transform: rotate(45deg);
	transition: transform 0.15s ease;
	flex-shrink: 0;
}
.ctc-acordeon[open] summary::after {
	transform: rotate(-135deg);
}
.ctc-acordeon-contenido {
	margin-top: 14px;
	color: var(--ctc-text);
}
.ctc-acordeon-contenido > p {
	margin: 0 0 10px;
}

.ctc-pasos {
	margin-bottom: 16px;
}
.ctc-paso {
	display: flex;
	gap: 10px;
	position: relative;
	padding-bottom: 16px;
}
.ctc-paso:not(:last-child)::before {
	content: "";
	position: absolute;
	left: 9px;
	top: 22px;
	bottom: 0;
	width: 1.5px;
	background: var(--ctc-border);
}
.ctc-paso-num {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 19px;
	height: 19px;
	border-radius: 999px;
	background: var(--ctc-accent-bg);
	color: var(--ctc-accent);
	font-size: 11.5px;
	font-weight: 700;
	z-index: 1;
}
.ctc-paso-texto {
	margin: 0;
	padding-top: 1px;
	font-weight: 500;
	display: flex;
	align-items: center;
	gap: 6px;
}
.ctc-paso-subtexto {
	margin: 2px 0 0;
	font-size: 12px;
	color: var(--ctc-text-muted);
}
.ctc-paso-info {
	display: inline-flex;
	color: var(--ctc-text-muted);
	flex-shrink: 0;
}
.ctc-paso-info svg {
	width: 15px;
	height: 15px;
}
.ctc-paso-info:hover {
	color: var(--ctc-accent);
}
.ctc-paso-cuerpo {
	flex: 1;
	min-width: 0;
}
.ctc-paso-cuerpo .ctc-paso-texto {
	margin-bottom: 10px;
}

.ctc-cupones-lista {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0 0 6px;
}
.ctc-cupon-chip {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	background: var(--ctc-surface);
	border: 1.5px solid var(--ctc-accent);
	border-radius: 999px;
	padding: 12px 16px;
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--ctc-accent);
	text-align: center;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
	transition: background-color 0.15s ease, transform 0.1s ease;
}
.ctc-cupon-chip:active {
	transform: scale(0.98);
	background: var(--ctc-accent-bg);
}
.ctc-cupon-chip.is-copiado {
	border-color: var(--ctc-success);
	color: var(--ctc-success);
	background: #eaf7ee;
}
/* Cupón de ficha ya consultado en esta sesión — distinción sutil,
   nunca se oculta ni se deshabilita (se puede volver a copiar). */
.ctc-cupon-chip--ficha.is-consultado {
	border-style: dashed;
	opacity: 0.85;
}

/* Diseño definitivo del cupón de ficha: una parte REAL del código
   siempre visible a la izquierda (nunca •••• ni texto ficticio), con
   una capa sólida integrada en la misma cápsula cubriendo ~50% del
   lado derecho — al tocar, la capa desaparece y el código completo
   queda expuesto y se mantiene así. */
.ctc-cupon-chip--ficha {
	position: relative;
	justify-content: flex-start;
	padding: 0;
	height: 46px;
	overflow: hidden;
}
.ctc-cupon-chip--ficha .ctc-cupon-parcial {
	flex: 1;
	text-align: left;
	padding-left: 16px;
	padding-right: 4px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: clip;
}
.ctc-cupon-chip--ficha .ctc-cupon-capa-solida {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 52%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	line-height: 1.15;
	padding: 0 8px;
	background: var(--ctc-accent);
	color: #fff;
	font-family: system-ui, -apple-system, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0;
	border-radius: 0 999px 999px 0;
}
.ctc-cupon-chip--ficha.is-revelado .ctc-cupon-capa-solida {
	display: none;
}
.ctc-cupon-chip--ficha.is-revelado .ctc-cupon-parcial {
	padding-right: 16px;
}
/* Variante CUPON_PERSONAL (prefijo administrativo PERSONAL- en la
   columna 'cupones' de Samsung, ver single-producto_oferta.php) —
   cambia SOLO el color de la capa derecha (azul -> negro/gris muy
   oscuro) y agrega un icono de chat antes del texto. La parte
   izquierda (.ctc-cupon-parcial), el alto, el ancho y los radios de
   la cápsula NO se tocan — misma estructura .ctc-cupon-chip--ficha
   de siempre, solo esta capa cambia. */
.ctc-cupon-chip--personal .ctc-cupon-capa-solida {
	background: #1a1a1a;
	gap: 5px;
}
.ctc-cupon-icono-chat {
	width: 12px;
	height: 12px;
	flex-shrink: 0;
}
.ctc-cupon-texto {
	letter-spacing: 0.01em;
}
.ctc-cupon-icono {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
}
.ctc-cupones-ayuda {
	font-size: 11.5px;
	color: var(--ctc-text-muted);
	margin: 0;
}
.ctc-sin-cupon {
	color: var(--ctc-text-muted);
	font-size: 14px;
	margin: 0;
}
/* v0.39.73 — nota_extra: antes pasaba demasiado desapercibida
   (mismo tono/gris apagado que otros textos secundarios). Ahora es
   un aviso discreto pero visible: fondo tenue de acento (no gris
   neutro), borde sutil del mismo tono, texto un poco más marcado, e
   ícono informativo pequeño — nunca rojo/naranja de error, sigue
   siendo minimalista. Contenido y lógica de nota_extra SIN CAMBIOS,
   esto es Únicamente presentación. */
.ctc-nota-extra {
	display: flex;
	align-items: flex-start;
	gap: 7px;
	font-size: 12.5px;
	font-weight: 500;
	color: #2c3a8c; /* variante más marcada del azul de acento, nunca gris apagado */
	background: var(--ctc-accent-bg);
	border: 1px solid rgba(20, 40, 160, 0.16);
	padding: 10px 12px;
	border-radius: var(--ctc-radius-sm);
	line-height: 1.4;
}
.ctc-nota-extra-icono {
	flex-shrink: 0;
	width: 15px;
	height: 15px;
	margin-top: 1px;
	color: var(--ctc-accent);
}

.ctc-ahorra-mas-titulo {
	font-size: 13px;
	font-weight: 600;
	color: var(--ctc-text);
	margin: 18px 0 12px;
	padding-top: 16px;
	border-top: 1px solid var(--ctc-border);
}
.ctc-ahorra-mas-lista {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.ctc-ahorra-item {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}
.ctc-ahorra-icono {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--ctc-surface-2);
	font-size: 15px;
}
.ctc-ahorra-item-titulo {
	margin: 0 0 2px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ctc-text);
}
.ctc-ahorra-item-desc {
	margin: 0;
	font-size: 12.5px;
	color: var(--ctc-text-muted);
	line-height: 1.4;
}
.ctc-ahorra-item-guia {
	display: inline-block;
	margin-top: 4px;
	font-size: 12px;
	font-weight: 600;
	color: var(--ctc-accent);
	text-decoration: none;
}
.ctc-ahorra-item-guia:hover {
	text-decoration: underline;
}


.ctc-grafica {
	margin-top: 4px;
}
.ctc-grafica svg {
	width: 100%;
	height: 36px;
	display: block;
	cursor: default;
}
.ctc-grafica circle {
	cursor: pointer;
}
.ctc-ver-historial-completo {
	margin-top: 14px;
	border-top: 1px solid var(--ctc-border);
	padding-top: 12px;
}
.ctc-ver-historial-completo summary {
	font-size: 13px;
	font-weight: 600;
	color: var(--ctc-accent);
	cursor: pointer;
	list-style: none;
}
.ctc-ver-historial-completo summary::-webkit-details-marker {
	display: none;
}
.ctc-rutas-anteriores {
	margin-top: 14px;
	border-top: 1px solid var(--ctc-border);
	padding-top: 12px;
}
.ctc-rutas-anteriores > summary {
	font-size: 13px;
	font-weight: 600;
	color: var(--ctc-text-muted);
	cursor: pointer;
	list-style: none;
}
.ctc-rutas-anteriores > summary::-webkit-details-marker {
	display: none;
}
.ctc-rutas-anteriores-nota {
	font-size: 11.5px;
	color: var(--ctc-text-muted);
	margin: 6px 0 10px;
}
.ctc-ruta-anterior-item {
	border: 1px solid var(--ctc-border);
	border-radius: 10px;
	padding: 8px 10px;
	margin-bottom: 6px;
}
.ctc-ruta-anterior-item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	list-style: none;
}
.ctc-ruta-anterior-item summary::-webkit-details-marker {
	display: none;
}
.ctc-ruta-anterior-cantidad {
	font-size: 11.5px;
	font-weight: 400;
	color: var(--ctc-text-muted);
	white-space: nowrap;
}
.ctc-ruta-anterior-item .ctc-historial {
	margin-top: 10px;
}
.ctc-historial {
	margin-top: 14px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
/* La tarjeta histórica reutiliza literalmente .ctc-tarjeta-oferta y
   sus clases hijas (misma imagen 32%, mismo precio, mismo canal) —
   ver más abajo en este archivo. Aquí solo lo que es EXCLUSIVO del
   histórico y no existe en la tarjeta del feed: cupones y la línea
   compacta de beneficios/SKU. */
.ctc-tarjeta-oferta--historica {
	cursor: default;
}
/* La imagen histórica NO debe estirarse para igualar la altura de la
   columna de texto (eso pasaba por el stretch por defecto del flex
   padre) — con contenido variable (SKU, cupones, nota, regalo...) la
   altura de esa columna cambia de tarjeta a tarjeta, y la imagen se
   veía inconsistente. Un contenedor con proporción fija + object-fit
   contain (ya presente en la regla base) la desacopla de ese alto
   variable. Ámbito exclusivo de .ctc-tarjeta-oferta--historica — la
   tarjeta del feed y de la ficha NO se tocan. */
.ctc-tarjeta-oferta--historica .ctc-tarjeta-oferta-imagen {
	align-self: flex-start;
	height: auto;
	aspect-ratio: 4 / 3;
}
/* BUG REAL encontrado (Fase 2B.3): sin esta regla, el atributo
   hidden (puesto por JS al filtrar por semana) no tenía ningún
   efecto visual — el display:flex de .ctc-tarjeta-oferta (arriba,
   compartida con el feed) lo pisaba silenciosamente, exactamente el
   mismo patrón de bug que ya se documentó una vez para
   .ctc-selector[hidden]. Las tarjetas de otras semanas quedaban
   ocultas "en el DOM" pero seguían viéndose y ocupando espacio. */
.ctc-tarjeta-oferta--historica[hidden] {
	display: none;
}
.ctc-badge-ahorro--historica {
	background: #e7f5ec;
	color: #16794f;
}
.ctc-badge-ahorro--historica.ctc-badge-ahorro--sube {
	background: var(--ctc-danger-bg);
	color: var(--ctc-danger);
}
.ctc-historial-cupones-lista {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 2px;
}
.ctc-historial-cupon-chip {
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 10.5px;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--ctc-accent-bg);
	color: var(--ctc-accent);
}
.ctc-historial-extra {
	margin: 2px 0 0;
	font-size: 11px;
	color: var(--ctc-text-muted);
}
.ctc-historial-vacio {
	margin: 12px 0 0;
	font-size: 13px;
	color: var(--ctc-text-muted);
}

/* Sección independiente "Historial de ofertas" — separada a propósito
   del acordeón "Histórico de precios" (que ya termina en la gráfica).
   Estilo mini-feed: cada snapshot es su propia tarjeta siempre
   visible, ya no un <details> gigante ni anidado dentro de "Ver
   historial completo". */
.ctc-historial-ofertas-seccion {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--ctc-border);
}
.ctc-historial-ofertas-titulo {
	font-size: 14px;
	font-weight: 650;
	color: var(--ctc-text);
	margin: 0 0 10px;
}

/* FASE 2B.2/2B.3/2B.4 — Navegador de semanas (lunes-domingo) del
   historial de tarjetas, con jerarquía "Semana 37" como identificador
   principal (ISO-8601) y el rango de fechas como texto secundario
   debajo. Reutiliza el mismo lenguaje visual que los controles de
   paginación/filtro ya existentes (botones circulares discretos,
   texto pequeño) en vez de introducir un componente nuevo. El
   contador "N cambios" vive solo en el subtítulo de la cápsula de la
   gráfica (ver arriba), no se repite aquí. */
.ctc-historial-semana-nav {
	margin: 0 0 12px;
}
.ctc-historial-semana-nav-fila {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
}
.ctc-historial-semana-boton {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 999px;
	border: 1px solid var(--ctc-border);
	background: var(--ctc-surface);
	color: var(--ctc-text);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	touch-action: manipulation;
}
.ctc-historial-semana-boton:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}
.ctc-historial-semana-boton:focus-visible {
	outline: 2px solid var(--ctc-accent);
	outline-offset: 2px;
}
.ctc-historial-semana-info {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1px;
	min-width: 118px;
}
.ctc-historial-semana-rango {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--ctc-text);
	text-align: center;
}
.ctc-historial-semana-subrango {
	font-size: 10.5px;
	color: var(--ctc-text-muted);
	text-align: center;
}

/* Resalte discreto de la tarjeta correspondiente al snapshot exacto
   seleccionado en la gráfica — nunca oculta ni reordena nada, solo
   distingue visualmente cuál de las tarjetas visibles es esa. */
.ctc-tarjeta-oferta--historica.is-destacada {
	box-shadow: 0 0 0 2px var(--ctc-accent-bg) inset, 0 0 0 1.5px var(--ctc-accent);
	border-radius: var(--ctc-radius-md);
}

/* =========================================================
   FASE 2B — Gráfica SVG interactiva del histórico (escalonada,
   eje temporal real, cursor/scrubber). Vanilla JS + SVG, sin
   librerías. Ver ctc-front.js (initTodasLasGraficasHistorial).
   FASE 2B.3/2B.4: ahora vive dentro de su PROPIA cápsula blanca
   (.ctc-tarjeta, reutilizada tal cual de la oferta principal) en vez
   de flotar directo sobre el fondo gris de .ctc-ficha. margin-top
   separa esta cápsula de la tarjeta principal de arriba;
   margin-bottom la separa de "Historial de ofertas" — tres secciones
   distintas, sin espacios exagerados.
   ========================================================= */
.ctc-tarjeta--grafica-historial {
	margin-top: 20px;
	margin-bottom: 16px;
	padding: 16px 16px 14px;
}
/* FASE 2B.7: cabecera en dos extremos (space-between) — izquierda
   "Evolución del precio" (estático), derecha "Semana 37 (rango) · N
   cambios" (dinámico, mismo texto que aplicar() en ctc-front.js ya
   generaba, solo reubicado visualmente). min-width:0 + ellipsis en el
   bloque derecho para PRIORIZAR compactar antes que hacer wrap — si
   de verdad no alcanza el ancho, se recorta con "…" en vez de partir
   a una segunda línea o desbordar horizontalmente. */
.ctc-grafica-historial-cabecera {
	display: flex;
	justify-content: space-between;
	align-items: center;
	column-gap: 8px;
	margin: 0 0 10px;
}
.ctc-grafica-historial-titulo-linea {
	margin: 0;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--ctc-text);
	white-space: nowrap;
	flex-shrink: 0;
}
.ctc-grafica-historial-derecha {
	display: flex;
	align-items: baseline;
	column-gap: 4px;
	min-width: 0;
	justify-content: flex-end;
}
.ctc-grafica-historial-semana {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--ctc-text);
	flex-shrink: 0;
	white-space: nowrap;
}
.ctc-grafica-historial-metadatos {
	margin: 0;
	font-size: 11px;
	color: var(--ctc-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}
.ctc-grafica-historial {
	margin-bottom: 0;
	/* Reserva de espacio (CLS): svg + control + resumen, aunque el
	   contenido tarde un tick en pintarse vía JS. Reducido en 2B.4 junto
	   con la altura del SVG. */
	min-height: 102px;
}
@media (min-width: 480px) {
	.ctc-grafica-historial {
		min-height: 142px;
	}
}
.ctc-grafica-historial-svg-envoltura {
	position: relative;
	width: 100%;
	/* Nunca ancho fijo — el SVG interno usa viewBox y escala con el
	   contenedor; overflow:hidden evita cualquier desborde horizontal
	   si el navegador redondea de más. */
	overflow: hidden;
}
.ctc-grafica-historial-svg {
	display: block;
	width: 100%;
	/* FASE 2B.3: altura EXPLÍCITA en px (no auto/proporcional al ancho)
	   — con preserveAspectRatio="none" el SVG llena exactamente esta
	   caja sin importar el ancho real del contenedor. FASE 2B.4: se
	   redujo aprox. a la mitad (objetivo ~80-100px móvil / ~100-120px
	   desktop), así el área de la gráfica queda consistentemente
	   compacta en cualquier pantalla, en vez de crecer con el ancho de
	   la columna. La posición X sigue siendo estrictamente proporcional
	   al tiempo real (eso lo calcula escalaX en JS, esta altura no lo
	   afecta). */
	height: 92px;
	/* Permite scroll vertical de la página mientras se interactúa
	   (tap/drag) sobre la gráfica — solo se captura el gesto horizontal. */
	touch-action: pan-y;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}
@media (min-width: 480px) {
	.ctc-grafica-historial-svg {
		height: 112px;
	}
}
.ctc-grafica-historial-svg .ctc-g-eje-linea {
	stroke: var(--ctc-border);
	stroke-width: 1;
}
.ctc-grafica-historial-svg .ctc-g-eje-texto {
	font-size: 10px;
	fill: var(--ctc-text-muted);
	font-family: inherit;
}
.ctc-grafica-historial-svg .ctc-g-escalon {
	fill: none;
	stroke: var(--ctc-accent);
	stroke-width: 2;
	stroke-linejoin: round;
	stroke-linecap: round;
}
.ctc-grafica-historial-svg .ctc-g-punto {
	fill: var(--ctc-surface);
	stroke: var(--ctc-accent);
	stroke-width: 2;
}
.ctc-grafica-historial-svg .ctc-g-punto.is-seleccionado {
	fill: var(--ctc-accent);
	r: 6;
}
.ctc-grafica-historial-svg .ctc-g-punto-hit {
	fill: transparent;
	cursor: pointer;
}
.ctc-grafica-historial-svg .ctc-g-cursor {
	stroke: var(--ctc-accent);
	stroke-width: 1.5;
	stroke-dasharray: 3 3;
	opacity: 0.6;
	pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
	.ctc-grafica-historial-svg .ctc-g-cursor,
	.ctc-grafica-historial-svg .ctc-g-punto {
		transition: transform 0.12s ease, cx 0.12s ease, x1 0.12s ease, x2 0.12s ease;
	}
}

/* FASE 2B.1: control accesible re-estilizado — antes se veía como el
   input[type=range] nativo del navegador (barra blanca gruesa + bola
   azul grande), que rompía con el resto del diseño. Se conserva
   'appearance:none' + reset del navegador y se dibuja un riel delgado
   con el mismo tono que .ctc-g-eje-linea, y un pulgar pequeño del
   color de acento — nada de esto cambia su funcionalidad (sigue
   siendo un <input type="range"> real: teclado, foco, lector de
   pantalla intactos), solo su apariencia. */
.ctc-grafica-historial-control {
	display: block;
	width: 100%;
	margin: 2px 0 8px;
	height: 18px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: transparent;
	touch-action: pan-y;
}
.ctc-grafica-historial-control::-webkit-slider-runnable-track {
	height: 3px;
	background: var(--ctc-border);
	border-radius: 999px;
}
.ctc-grafica-historial-control::-moz-range-track {
	height: 3px;
	background: var(--ctc-border);
	border-radius: 999px;
}
.ctc-grafica-historial-control::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--ctc-accent);
	border: 2px solid var(--ctc-surface);
	box-shadow: 0 1px 3px rgba(16, 24, 40, 0.28);
	cursor: pointer;
	margin-top: -5.5px; /* centra el pulgar de 14px sobre el riel de 3px */
}
.ctc-grafica-historial-control::-moz-range-thumb {
	width: 14px;
	height: 14px;
	border: 2px solid var(--ctc-surface);
	border-radius: 50%;
	background: var(--ctc-accent);
	box-shadow: 0 1px 3px rgba(16, 24, 40, 0.28);
	cursor: pointer;
}
.ctc-grafica-historial-control:focus-visible {
	outline: 2px solid var(--ctc-accent);
	outline-offset: 2px;
}

/* FASE 2B.3: resumen horizontal compacto del punto seleccionado —
   sustituye a la tarjeta grande anterior (una línea por dato). No es
   un segundo sistema de tarjetas: reutiliza el mismo contenedor
   .ctc-grafica-historial-tarjeta y el chip de cupón ya existente
   (.ctc-g-tarjeta-cupon-chip), solo cambia su disposición interna. */
.ctc-grafica-historial-tarjeta {
	min-height: 0;
	background: var(--ctc-surface-2);
	border-radius: var(--ctc-radius-sm);
	padding: 8px 10px;
	font-size: 12px;
	color: var(--ctc-text);
}
.ctc-grafica-resumen-linea {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
}
.ctc-grafica-resumen-fecha {
	font-size: 11px;
	color: var(--ctc-text-muted);
}
.ctc-grafica-resumen-precio {
	font-size: 15px;
	font-weight: 700;
	color: var(--ctc-text);
	font-variant-numeric: tabular-nums;
}
.ctc-grafica-resumen-meta {
	font-size: 11.5px;
	color: var(--ctc-text-muted);
}
.ctc-grafica-resumen-cupones {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 4px;
}
.ctc-grafica-resumen-extra {
	margin: 4px 0 0;
	font-size: 11px;
	color: var(--ctc-text-muted);
}
/* SAMSUNG — resumen protegido del punto "Precio actual" en la
   gráfica: mismo layout que un snapshot normal, pero sin cupones ni
   beneficios, y con un CTA compacto opcional hacia la oferta real. */
.ctc-grafica-resumen-actual {
	font-weight: 700;
	color: var(--ctc-accent);
}
.ctc-grafica-resumen-cta {
	display: inline-block;
	margin-top: 6px;
	font-size: 11px;
	font-weight: 600;
	color: #fff;
	background: var(--ctc-accent);
	padding: 5px 12px;
	border-radius: 999px;
	text-decoration: none;
}
.ctc-grafica-resumen-cta:hover {
	opacity: 0.9;
}
.ctc-g-tarjeta-cupon-chip {
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 10px;
	font-weight: 600;
	padding: 1px 7px;
	border-radius: 999px;
	background: var(--ctc-surface);
	border: 1px solid var(--ctc-border);
	color: var(--ctc-accent);
}

/* Lightbox — CUALQUIER imagen con esta clase es clickeable/ampliable,
   sin importar dónde viva en el HTML (ver el mismo principio en el
   JS). touch-action:manipulation quita el delay de ~300ms y el
   doble-tap-zoom que algunos navegadores móviles aplican por default
   sobre imágenes — el tap debe sentirse inmediato, no solo funcionar. */
.ctc-lightbox-trigger {
	cursor: zoom-in;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}
.ctc-lightbox-trigger:focus-visible {
	outline: 2px solid var(--ctc-accent);
	outline-offset: 2px;
}
.ctc-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(10, 10, 12, 0.88);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	z-index: 9999;
}
.ctc-lightbox[hidden] {
	display: none;
}
/* El marco se ajusta al tamaño REAL con que termina renderizando la
   imagen (inline-block encoge al contenido) — el botón de cerrar se
   posiciona relativo a ESTE marco, no a .ctc-lightbox (pantalla
   completa). Antes el botón vivía "pegado arriba de la pantalla" sin
   importar qué tan grande o chica saliera la imagen; ahora siempre
   queda en la esquina de la imagen misma. */
.ctc-lightbox-marco {
	position: relative;
	display: inline-flex;
	max-width: 96vw;
	max-height: 92vh;
}
.ctc-lightbox-imagen {
	display: block;
	max-width: 96vw;
	max-height: 92vh;
	object-fit: contain;
	border-radius: 6px;
	cursor: default;
}
.ctc-lightbox-cerrar {
	position: absolute;
	top: -12px;
	right: -12px;
	width: 34px;
	height: 34px;
	padding: 0;
	margin: 0;
	box-sizing: border-box; /* sin esto, el padding/borde por default del
	                           navegador en <button> deformaba el círculo —
	                           causa real de que saliera ovalado */
	border-radius: 50%;
	border: none;
	background: #ffffff;
	color: #1428a0;
	font-size: 18px;
	font-weight: 400;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(10, 10, 12, 0.32);
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.ctc-lightbox-cerrar:hover {
	background: #eef0fa;
}

/* =========================================================
   Listado (archive-producto_oferta.php)
   Mismos tokens de color que la ficha — sin paleta nueva.
   ========================================================= */
.ctc-listado {
	--ctc-bg: #eef1f7;
	--ctc-surface: #ffffff;
	--ctc-surface-2: #f3f5f9;
	--ctc-text: #12141a;
	--ctc-text-muted: #6b7280;
	--ctc-border: #e4e7ee;
	--ctc-accent: #1428a0;
	--ctc-accent-bg: #eef0fa;
	--ctc-teal: #0f766e;
	--ctc-teal-bg: #e6f5f3;
	--ctc-purple: #6d3f9e;
	--ctc-purple-bg: #f2ecfa;
	--ctc-danger: #b3261e;
	--ctc-danger-bg: #fbeae9;
	--ctc-radius-md: 12px;
	--ctc-radius-sm: 9px;

	max-width: 720px;
	margin: 0 auto;
	padding: 20px 12px 40px;
	background: var(--ctc-bg);
	color: var(--ctc-text);
}
.ctc-listado-encabezado {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 12px;
	padding: 0 4px;
}
.ctc-listado-titulo {
	font-size: 19px;
	font-weight: 650;
	margin: 0;
}
.ctc-tarjetas {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Tarjeta genérica de oferta — compartida con la futura home mixta.
   Proporción aprox. 32% imagen / 68% contenido, pensada para que
   nunca se vea alta ni pesada en móvil (320-430px). */
.ctc-tarjeta-oferta {
	position: relative;
	display: flex;
	gap: 12px;
	background: var(--ctc-surface);
	border-radius: var(--ctc-radius-md);
	padding: 10px;
	text-decoration: none;
	color: inherit;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
	transition: box-shadow 0.15s ease;
}
.ctc-tarjeta-oferta:hover {
	box-shadow: 0 2px 8px rgba(16, 24, 40, 0.08);
}
.ctc-tarjeta-oferta-imagen {
	flex: 0 0 32%;
	max-width: 120px;
	border-radius: 10px;
	background: var(--ctc-surface-2);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.ctc-tarjeta-oferta-imagen img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
/* v0.39.73 — zoom moderado SOLO en tarjetas de PRODUCTO Samsung (Home
   y /samsung/) — nunca en cupón (ese markup no tiene
   .ctc-tarjeta-oferta-imagen en absoluto, así que esta regla ya es
   exclusiva de producto por construcción) ni en tarjetas históricas de
   la ficha (:not(.ctc-tarjeta-oferta--historica), mismo patrón de
   exclusión ya usado más abajo en este archivo para el min-height de
   escritorio). object-fit:contain se conserva sin cambios (la imagen
   sigue sin deformarse ni recortarse por proporción); el contenedor
   .ctc-tarjeta-oferta-imagen YA tenía overflow:hidden (arriba en este
   mismo archivo), así que el excedente del zoom se recorta ahí sin
   agregar ninguna regla nueva de overflow ni cambiar el alto de la
   tarjeta — transform no participa en el flujo del layout. */
.ctc-tarjeta-oferta:not(.ctc-tarjeta-oferta--historica) .ctc-tarjeta-oferta-imagen img {
	transform: scale(1.12);
}
.ctc-tarjeta-oferta-imagen svg {
	width: 28px;
	height: 28px;
	color: #b8bfcc;
}
.ctc-tarjeta-oferta-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.ctc-tarjeta-oferta-destacado {
	display: inline-block;
	align-self: flex-start;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #fff;
	background: var(--ctc-accent);
	padding: 2px 7px;
	border-radius: 6px;
	margin-bottom: 2px;
}
.ctc-tarjeta-oferta-titulo {
	margin: 0;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ctc-text);
	line-height: 1.3;
	/* REGRESIÓN CORREGIDA (HOME 3A había agregado min-height aquí):
	   line-clamp:2 es el Único límite — tope MÁXIMO de 2 líneas, nunca
	   un piso que obligue a un título corto a reservar una segunda línea
	   vacía. Título corto = 1 línea, largo = hasta 2, nunca más. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.ctc-tarjeta-oferta-variantes {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}
.ctc-tarjeta-oferta-variante-chip {
	font-size: 10px;
	line-height: 1.4;
	padding: 1px 6px;
	border-radius: 999px;
	background: var(--ctc-surface-2);
	color: var(--ctc-text-muted);
	border: 1px solid var(--ctc-border);
}
.ctc-tarjeta-oferta-precio {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 5px;
	font-variant-numeric: tabular-nums;
}
.ctc-tarjeta-oferta-desde {
	font-size: 10.5px;
	color: var(--ctc-text-muted);
}
.ctc-tarjeta-oferta-precio-final {
	font-size: 16.5px;
	font-weight: 700;
	color: var(--ctc-text);
}
.ctc-tarjeta-oferta-precio-original {
	font-size: 11.5px;
	color: var(--ctc-text-muted);
	text-decoration: line-through;
}
.ctc-badge-ahorro-chica {
	display: inline-block;
	align-self: flex-start;
	background: var(--ctc-danger-bg);
	color: var(--ctc-danger);
	font-size: 11px;
	font-weight: 600;
	padding: 2px 9px;
	border-radius: 999px;
}
/* Utilidad genérica de recorte a 2 líneas — reutilizada por el
   título (arriba) y por el texto de regalo, que puede venir largo. */
.ctc-clamp-2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.ctc-tarjeta-oferta-regalo {
	margin: 0;
	font-size: 11px;
	line-height: 1.35;
	color: #6d3f9e;
}

/* Esquina superior: categoría discreta a la derecha (con o sin
   badge "Destacado" a la izquierda) — separada del resto para no
   competir con el título ni con el canal/tienda de abajo. */
.ctc-tarjeta-oferta-arriba {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	min-height: 14px;
}
.ctc-tarjeta-oferta-categoria-discreta {
	font-size: 9.5px;
	color: var(--ctc-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	text-align: right;
}
/* REVISIÓN VISUAL GLOBAL: metadata de tienda/tipo ("Samsung ·
   Oferta", "Mercado Libre · Oferta"...) o categoría, ahora como su
   propia línea discreta ENCIMA del título — ya no comparte espacio
   con el corazón de favorito. Genérico para cualquier tienda: el
   texto sale tal cual de $datos['tienda'], nunca hardcodeado. */
.ctc-tarjeta-oferta-meta-tienda {
	margin: 0;
	font-size: 9.5px;
	font-weight: 700;
	color: var(--ctc-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
/* Agrupa tienda/categoría + corazón de favorito pegados a la derecha
   del renglón superior — reemplaza el viejo botón flotante sobre la
   imagen, que quedaba fuera de lugar y competía con el contenido. */
.ctc-tarjeta-oferta-arriba-derecha {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
}
.ctc-tarjeta-oferta-arriba-derecha .ctc-fav-toggle {
	position: static !important;
	width: 20px !important;
	height: 20px !important;
	min-width: 20px !important;
	min-height: 20px !important;
	max-width: 20px !important;
	max-height: 20px !important;
	padding: 0 !important;
	margin: 0 !important;
	box-sizing: border-box !important;
	background: none;
	border: none;
	box-shadow: none;
	flex-shrink: 0;
	color: #9aa1b0;
}
.ctc-tarjeta-oferta-arriba-derecha .ctc-fav-toggle svg {
	width: 17px !important;
	height: 17px !important;
}
.ctc-tarjeta-oferta-arriba-derecha .ctc-fav-toggle.is-guardado {
	color: #e11d48;
}
/* v0.39.73 — Indicadores discretos 👁/↗ (product_view/outbound_click
   o coupon_click acumulados históricos) — conviven con el corazón en
   .ctc-tarjeta-oferta-arriba-derecha, siempre a la IZQUIERDA del
   corazón cuando ambos existen (orden de impresión en PHP). Tamaño y
   color deliberadamente más discretos que el precio/CTA/badge de
   ahorro — nunca deben competir visualmente con ellos. */
.ctc-tarjeta-oferta-metricas {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}
.ctc-tarjeta-oferta-metrica {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	font-size: 9.5px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: #9aa1b0;
	line-height: 1;
}
.ctc-tarjeta-oferta-metrica svg {
	width: 11px;
	height: 11px;
	flex-shrink: 0;
}
/* Identidad por tienda (solo home, vía opciones['mostrar_tienda']) —
   reemplaza la categoría técnica como identificador principal.
   Reutilizada tanto en la tarjeta de producto como en la de cupón. */
.ctc-tarjeta-oferta-tienda {
	font-size: 10.5px;
	font-weight: 700;
	color: var(--ctc-text);
	text-align: right;
}
.ctc-tarjeta-oferta-tienda-tipo {
	font-weight: 500;
	color: var(--ctc-text-muted);
	text-transform: none;
	letter-spacing: normal;
}

/* Zona secundaria/discreta: solo canal de compra — chico y apagado a
   propósito, para que no compita con título/precio (decisión de
   Efren, ronda de refinamiento visual de /samsung/). Ahora con más
   espacio propio porque categoría y fecha se movieron a otro lado. */
.ctc-tarjeta-oferta-secundaria {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px;
	margin-top: 1px;
}
/* Chip de canal — reutiliza los mismos colores que ya identifican
   Normal/Estudiantes en la ficha individual (.ctc-selector-chip),
   solo que en una versión chica y no interactiva. */
.ctc-tarjeta-oferta-canal {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-size: 9.5px;
	font-weight: 600;
	line-height: 1;
	padding: 2px 6px;
	border-radius: 999px;
	color: var(--ctc-accent);
	background: var(--ctc-accent-bg);
}
.ctc-tarjeta-oferta-canal--estudiantes {
	color: var(--ctc-teal);
	background: var(--ctc-teal-bg, var(--ctc-surface-2));
}
.ctc-tarjeta-oferta-canal-icono {
	width: 10px;
	height: 10px;
	flex-shrink: 0;
}
/* Renglón inferior: fecha relativa (izquierda) + CTA (derecha), junto
   al final — mismo patrón visual que ya usa la tarjeta de cupón
   (.ctc-cupon-tarjeta-footer), para consistencia entre Samsung y
   marketplace. */
.ctc-tarjeta-oferta-footer {
	margin-top: 4px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.ctc-tarjeta-oferta-actualizado {
	font-size: 9.5px;
	color: var(--ctc-text-muted);
}
.ctc-tarjeta-oferta-cta {
	align-self: flex-start;
	font-size: 11.5px;
	font-weight: 600;
	color: #fff;
	background: var(--ctc-accent);
	padding: 5px 12px;
	border-radius: 999px;
	margin-left: auto;
}

/* HOME 3B — uniformidad de altura también en /samsung/ y categorías
   (plantillas que cargan ctc-front.css SIN ctc-home.css, así que no
   heredan el min-height específico de la Home). Excluye a propósito
   las tarjetas históricas de la ficha (.ctc-tarjeta-oferta--historica)
   — esas NO se tocan, siguen con su alto natural. En la Home, el
   bloque más específico de ctc-home.css (cargado después) sigue
   ganando la cascada y sustituye estos valores por los suyos, sin
   conflicto. */
@media (min-width: 1024px) {
	.ctc-tarjeta-oferta:not(.ctc-tarjeta-oferta--historica) {
		min-height: 176px;
	}
	.ctc-tarjeta-oferta:not(.ctc-tarjeta-oferta--historica) .ctc-tarjeta-oferta-footer {
		margin-top: auto;
	}
}
.ctc-listado-paginacion {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 5px;
	margin: 20px 0 8px;
}
/* Mismo estilo de pastilla que la paginación de la home — WordPress
   genera estas clases automáticamente vía the_posts_pagination(). */
.ctc-listado-paginacion .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	padding: 0 8px;
	border-radius: 999px;
	border: 1px solid var(--ctc-border);
	background: var(--ctc-surface);
	color: var(--ctc-text);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}
.ctc-listado-paginacion .page-numbers.current {
	background: var(--ctc-accent);
	border-color: var(--ctc-accent);
	color: #fff;
}
.ctc-listado-paginacion .page-numbers.dots {
	border: none;
	background: none;
	color: var(--ctc-text-muted);
}
.ctc-listado-paginacion .page-numbers.prev,
.ctc-listado-paginacion .page-numbers.next {
	font-size: 16px;
}
.ctc-listado-vacio {
	text-align: center;
	color: var(--ctc-text-muted);
	padding: 40px 0;
}

/* =========================================================
   Barra de filtros de la cuponera (Todos/Del día/Bancarios/Directos).
   Filtra en el cliente sobre bloques ya cargados — ver ctc-front.js.
   ========================================================= */
.ctc-listado-orden-select {
	flex-shrink: 0;
	border: 1px solid var(--ctc-border);
	border-radius: 999px;
	padding: 5px 10px;
	font-size: 12px;
	font-weight: 500;
	color: var(--ctc-text);
	background: var(--ctc-surface);
	cursor: pointer;
	max-width: 45%;
}

.ctc-cuponera-filtros {
	display: flex;
	gap: 6px;
	overflow-x: auto;
	padding: 0 4px 16px;
	margin-bottom: 4px;
	-webkit-overflow-scrolling: touch;
}
.ctc-cuponera-filtro {
	flex: 0 0 auto;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ctc-text-muted);
	background: var(--ctc-surface);
	border: 1px solid var(--ctc-border);
	padding: 7px 14px;
	border-radius: 999px;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ctc-cuponera-filtro.is-activo {
	background: var(--ctc-accent);
	border-color: var(--ctc-accent);
	color: #fff;
}

/* =========================================================
   Tarjeta de cupón (ML/Amazon) — sin imagen, compacta, con
   franja de acento lateral. El color del acento llega por PHP
   como variable inline (--acento), resuelto en
   CTC_Banco_Colores::color_para() — no por sección vía CSS fijo,
   porque el color real depende del banco/entidad, no solo de la
   sección técnica. Espacio propio, no comparte clases con
   .ctc-tarjeta-oferta (Samsung).
   ========================================================= */
.ctc-cupon-tarjetas {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 10px;
	margin-bottom: 4px;
}

.ctc-cupon-tarjeta {
	--acento: var(--ctc-accent);

	position: relative;
	background: var(--ctc-surface);
	border: 1px solid var(--ctc-border);
	border-left: 4px solid var(--acento);
	border-radius: var(--ctc-radius-md);
	padding: 12px 14px;
}

.ctc-cupon-tarjeta--destacada {
	box-shadow: 0 0 0 1.5px var(--acento);
}
.ctc-cupon-tarjeta--agotada {
	opacity: 0.6;
}
/* El botón sí se mantiene invitando al clic aunque el resto de la
   tarjeta se vea "apagado" — el clic sigue siendo válido y genera
   comisión igual, solo ya no promete un código (ver PHP). */
.ctc-cupon-tarjeta--agotada .ctc-cupon-accion {
	opacity: 1;
}

.ctc-cupon-tarjeta-cuerpo {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

/* .ctc-cupon-tarjeta-superior y .ctc-cupon-tarjeta-nombre se
   retiraron — la identidad de tienda/banco ahora reutiliza
   .ctc-tarjeta-oferta-arriba/-arriba-derecha/-tienda, la misma
   jerarquía visual discreta que ya usa Samsung (ver más abajo en
   este archivo). El título/beneficio sigue siendo lo dominante. */
.ctc-cupon-tarjeta-badge {
	flex-shrink: 0;
	font-size: 9.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 2px 7px;
	border-radius: 6px;
}
.ctc-cupon-tarjeta-badge--destacado {
	background: var(--ctc-accent);
	color: #fff;
}
.ctc-cupon-tarjeta-badge--agotado {
	background: var(--ctc-surface-2);
	color: var(--ctc-text-muted);
}

.ctc-cupon-tarjeta-beneficio {
	margin: 0;
	font-size: 18px;
	font-weight: 800;
	color: var(--ctc-text);
	line-height: 1.2;
	letter-spacing: -0.01em;
}
.ctc-cupon-tarjeta-condiciones {
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	color: var(--ctc-text);
}
.ctc-cupon-tarjeta-nota {
	margin: 0;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--ctc-text);
}

.ctc-cupon-tarjeta-footer {
	margin-top: 6px;
	padding-top: 8px;
	border-top: 1px dashed var(--ctc-border);
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: nowrap;
	gap: 8px;
}
.ctc-cupon-tarjeta-meta {
	flex: 1 1 auto;
	min-width: 0;
	padding-top: 2px;
	font-size: 10.5px;
	color: var(--ctc-text-muted);
}
.ctc-cupon-countdown {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	color: var(--ctc-text);
}
.ctc-cupon-fila-meta {
	margin: 2px 0 0;
	font-size: 10.5px;
	color: var(--ctc-text-muted);
}

/* Diferenciador visual para "vence hoy" / por_agotarse=true — distinto
   del resto del texto de meta (que se queda gris discreto). */
.ctc-cupon-urgente {
	font-weight: 700;
	color: #dc2626;
}
.ctc-cupon-urgente .ctc-cupon-countdown {
	color: #dc2626;
}
.ctc-cupon-flama {
	display: inline-block;
	margin-right: 3px;
	animation: ctc-flama-viva 1.1s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
	.ctc-cupon-flama {
		animation: none;
	}
}
@keyframes ctc-flama-viva {
	0%, 100% {
		transform: scale(1) rotate(-2deg);
		opacity: 0.9;
	}
	50% {
		transform: scale(1.12) rotate(2deg);
		opacity: 1;
	}
}
.ctc-cupon-tarjeta-acciones {
	margin-left: auto;
	flex-shrink: 0;
}

/* Botón único de acción (revela el código en el acto + copia + abre el
   enlace ~800ms después; si no hay código, abre directo). */
.ctc-cupon-accion {
	position: relative;
	display: inline-block;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--acento-texto, #fff);
	background: var(--acento, var(--ctc-accent));
	border: none;
	padding: 6px 14px;
	border-radius: 999px;
	cursor: pointer;
	transition: opacity 0.15s ease, transform 0.15s ease;
}
.ctc-cupon-accion:hover {
	opacity: 0.9;
}
.ctc-cupon-accion:disabled {
	cursor: not-allowed;
	opacity: 0.55;
	animation: none;
}
.ctc-cupon-accion.is-revelado {
	font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
	letter-spacing: 0.02em;
}
.ctc-cupon-accion--chica {
	font-size: 11px;
	padding: 5px 11px;
}

/* Insignia de "¡Copiado!" — flota ARRIBA del botón con position:absolute
   a propósito: nunca debe empujar ni ensanchar nada del layout (eso fue
   justo lo que se veía mal antes con el salto de línea). */
.ctc-cupon-copiado-flotante {
	position: absolute;
	bottom: 100%;
	right: 0;
	margin-bottom: 6px;
	background: #111111;
	color: #ffffff;
	font-size: 10px;
	font-weight: 700;
	padding: 3px 8px;
	border-radius: 6px;
	white-space: nowrap;
	pointer-events: none;
	animation: ctc-copiado-flota 1.1s ease forwards;
}
@keyframes ctc-copiado-flota {
	0% {
		opacity: 0;
		transform: translateY(4px);
	}
	15% {
		opacity: 1;
		transform: translateY(0);
	}
	80% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: translateY(-4px);
	}
}

/* Llamado a la acción sutil en el CTA principal (tarjetas independientes
   de "cupones del día" y "directos"): un pulso de sombra, no un temblor
   — un shake continuo se percibe rápido como spam/dark pattern. Se
   detiene solo (3 ciclos) para no ser molesto en una lista larga; el
   :hover cancela la animación para no pelear con la interacción real. */
.ctc-cupon-tarjeta .ctc-cupon-accion:not(.ctc-cupon-accion--chica):not(:disabled) {
	animation: ctc-pulso-cta 2s ease-in-out 3;
}
.ctc-cupon-tarjeta .ctc-cupon-accion:not(.ctc-cupon-accion--chica):hover {
	animation: none;
}
@keyframes ctc-pulso-cta {
	0%, 100% {
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
	}
	50% {
		box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.08);
	}
}
@media (prefers-reduced-motion: reduce) {
	.ctc-cupon-tarjeta .ctc-cupon-accion {
		animation: none;
	}
}

/* =========================================================
   Tarjeta AGRUPADA por banco (bloque MLBANCARIO/AMZ). Un solo
   contenedor con el nombre del banco arriba una vez, y cada oferta
   de ese banco como una fila interna separada por una línea sutil
   — nunca una tarjeta repetida por oferta.
   ========================================================= */
.ctc-cupon-grupo-banco {
	--acento: var(--ctc-accent);

	background: var(--ctc-surface);
	border: 1px solid var(--ctc-border);
	border-left: 4px solid var(--acento);
	border-radius: var(--ctc-radius-md);
	padding: 4px 14px 4px;
	margin-bottom: 10px;
}
.ctc-cupon-grupo-banco-nombre {
	margin: 0;
	padding: 10px 0 6px;
	font-size: 12.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--acento);
}

.ctc-cupon-fila {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	border-top: 1px solid var(--ctc-border);
}
.ctc-cupon-fila--agotada {
	opacity: 0.55;
}
.ctc-cupon-fila--agotada .ctc-cupon-accion {
	opacity: 1;
}
.ctc-cupon-fila-info {
	min-width: 0;
	flex: 1;
}
.ctc-cupon-fila-superior {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.ctc-cupon-fila-beneficio {
	font-size: 15px;
	font-weight: 800;
	color: var(--ctc-text);
}
.ctc-cupon-fila-tag {
	font-size: 9.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--acento);
	background: var(--ctc-surface-2);
	padding: 2px 7px;
	border-radius: 6px;
}
.ctc-cupon-fila-condiciones {
	margin: 2px 0 0;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--ctc-text);
}
.ctc-cupon-fila-nota {
	margin: 2px 0 0;
	font-size: 11px;
	font-weight: 600;
	color: var(--ctc-text);
}

/* =========================================================
   Bloques de sección dentro de una cuponera (del día / bancario /
   directos). Viven dentro de .ctc-listado, heredan sus tokens.
   ========================================================= */
.ctc-cuponera-bloque {
	margin-bottom: 28px;
}
.ctc-cuponera-bloque-titulo {
	font-size: 15.5px;
	font-weight: 650;
	margin: 0 0 10px;
	padding: 0 4px;
}
.ctc-cuponera-bloque-subtitulo {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ctc-text-muted);
	margin: 14px 0 8px;
	padding: 0 4px;
}

/* =========================================================
   Botón de favorito (opt-in vía $opciones['favoritos'] — solo la
   home lo activa hoy). Guarda un registro ligero en localStorage,
   ver ctc-home.js. Absoluto sobre la imagen (Samsung) o la esquina
   de la tarjeta (cupón), nunca empuja el layout existente.
   ========================================================= */
.ctc-fav-toggle {
	position: absolute !important;
	top: 6px !important;
	right: 6px !important;
	z-index: 2;
	width: 28px !important;
	height: 28px !important;
	min-width: 28px !important;
	min-height: 28px !important;
	max-width: 28px !important;
	max-height: 28px !important;
	padding: 0 !important;
	margin: 0 !important;
	box-sizing: border-box !important;
	line-height: 1 !important;
	font-size: 0 !important;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1.5px solid rgba(15, 18, 26, 0.14);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.95);
	color: #6b7280;
	cursor: pointer;
	box-shadow: 0 1px 4px rgba(16, 24, 40, 0.22);
	transition: color 0.15s ease, transform 0.1s ease, border-color 0.15s ease;
}
.ctc-fav-toggle svg {
	width: 17px !important;
	height: 17px !important;
	display: block;
}
.ctc-fav-toggle svg path {
	fill: currentColor;
}
.ctc-fav-toggle:hover {
	transform: scale(1.08);
}
.ctc-fav-toggle.is-guardado {
	color: #e11d48;
	border-color: #e11d48;
}
/* v0.39.75 — variante compacta para render_cupon_fila() (filas
   bancarias agrupadas): position:static (nunca flota sobre nada,
   nunca se recorta contra el borde de la fila), tamaño reducido, sin
   fondo/borde propio (se funde con el renglón), y margin-left:auto
   para quedar pegado al borde derecho de .ctc-cupon-fila-superior
   SIN ensanchar la fila ni desplazar el botón de acción (que vive en
   un contenedor hermano, fuera de este renglón). */
.ctc-fav-toggle--fila {
	position: static !important;
	width: 16px !important;
	height: 16px !important;
	min-width: 16px !important;
	min-height: 16px !important;
	max-width: 16px !important;
	max-height: 16px !important;
	padding: 0 !important;
	margin: 0 0 0 auto !important;
	box-sizing: border-box !important;
	background: none;
	border: none;
	box-shadow: none;
	flex-shrink: 0;
	color: #9aa1b0;
}
.ctc-fav-toggle--fila svg {
	width: 15px !important;
	height: 15px !important;
}
.ctc-fav-toggle--fila:hover {
	transform: none;
}
.ctc-fav-toggle--fila.is-guardado {
	color: #e11d48;
	border-color: transparent;
}
/* NOTA: en la ficha, el favorito NO usa este posicionamiento base
   (position:absolute sobre la imagen) — vive junto al CTA "Ver
   oferta" en .ctc-cta-fila, con su propio override
   .ctc-fav-toggle--junto-cta (más abajo en este archivo). El bloque
   base de abajo sigue aplicando tal cual a las tarjetas del feed. */
.ctc-imagen-envoltura {
	position: relative;
}
/* La insignia de canal reutiliza .ctc-tarjeta-oferta-canal (pensada
   para una tarjeta chica) — en la ficha necesita verse un poco más
   prominente, ya que aquí vive sola, no dentro de una tarjeta densa. */
.ctc-canal-ficha {
	font-size: 12.5px;
	padding: 5px 12px;
	gap: 5px;
	margin-bottom: 8px;
}
.ctc-canal-ficha .ctc-tarjeta-oferta-canal-icono {
	width: 14px;
	height: 14px;
}

/* v0.39.79 — Eco Renueva: CTA visible + modal glass informativo. */
.ctc-eco-info {
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	min-height: 28px;
	margin-left: 7px;
	padding: 4px 9px;
	border: 1px solid rgba(20, 40, 160, 0.22);
	border-radius: 999px;
	background: rgba(238, 242, 255, 0.92);
	color: var(--ctc-accent, #1428a0);
	font: inherit;
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1;
	vertical-align: middle;
	cursor: pointer;
	box-shadow: 0 1px 4px rgba(20, 40, 160, 0.08);
	transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.ctc-eco-info svg {
	width: 14px;
	height: 14px;
	flex: 0 0 14px;
}
.ctc-eco-info:hover,
.ctc-eco-info:focus-visible {
	background: rgba(224, 231, 255, 0.98);
	border-color: rgba(20, 40, 160, 0.38);
	box-shadow: 0 3px 10px rgba(20, 40, 160, 0.13);
	transform: translateY(-1px);
}
.ctc-eco-info:focus-visible {
	outline: 2px solid rgba(20, 40, 160, 0.22);
	outline-offset: 2px;
}
.ctc-eco-modal[hidden] {
	display: none !important;
}
.ctc-eco-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.ctc-eco-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.28);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}
.ctc-eco-modal-dialog {
	position: relative;
	z-index: 1;
	width: min(100%, 420px);
	max-height: min(80vh, 560px);
	overflow-y: auto;
	background: rgba(255, 255, 255, 0.82);
	color: var(--ctc-text, #111827);
	border: 1px solid rgba(255, 255, 255, 0.58);
	border-radius: 18px;
	box-shadow: 0 14px 44px rgba(15, 23, 42, 0.16);
	backdrop-filter: blur(12px) saturate(115%);
	-webkit-backdrop-filter: blur(12px) saturate(115%);
	padding: 22px 22px 20px;
}
.ctc-eco-modal-cerrar {
	position: absolute;
	top: 10px;
	right: 12px;
	width: 32px;
	height: 32px;
	min-width: 32px;
	max-width: 32px;
	padding: 0;
	box-sizing: border-box;
	aspect-ratio: 1 / 1;
	flex: 0 0 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(15, 23, 42, 0.08);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.82);
	color: #475569;
	box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08);
	font-size: 20px;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	transition: background 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.ctc-eco-modal-cerrar:hover,
.ctc-eco-modal-cerrar:focus-visible {
	background: rgba(238, 242, 255, 0.96);
	color: var(--ctc-accent, #1428a0);
	transform: scale(1.04);
	box-shadow: 0 3px 12px rgba(20, 40, 160, 0.12);
}
.ctc-eco-modal-titulo {
	margin: 0 38px 18px 0;
	font-size: 17px;
	line-height: 1.35;
	font-weight: 700;
}
.ctc-eco-modal-pasos {
	list-style: none;
	counter-reset: ctc-eco-paso;
	margin: 0;
	padding: 0;
}
.ctc-eco-modal-pasos li {
	counter-increment: ctc-eco-paso;
	position: relative;
	margin: 0;
	padding: 0 0 15px 32px;
	font-size: 14px;
	line-height: 1.45;
}
.ctc-eco-modal-pasos li::before {
	content: counter(ctc-eco-paso);
	position: absolute;
	left: 0;
	top: 0;
	width: 20px;
	height: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(238, 242, 255, 0.94);
	color: var(--ctc-accent, #1428a0);
	font-size: 11px;
	font-weight: 700;
}
.ctc-eco-modal-pasos li:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 9px;
	top: 22px;
	bottom: 2px;
	width: 1.5px;
	background: rgba(148, 163, 184, 0.32);
}
.ctc-eco-modal-nota {
	margin: 2px 0 0;
	padding-top: 14px;
	border-top: 1px solid rgba(148, 163, 184, 0.25);
	font-size: 13px;
	font-weight: 600;
}
body.ctc-eco-modal-abierto {
	overflow: hidden;
}
@media (max-width: 480px) {
	.ctc-eco-info {
		margin-left: 5px;
		padding: 4px 8px;
		font-size: 11px;
	}
	.ctc-eco-modal {
		padding: 14px;
	}
	.ctc-eco-modal-dialog {
		border-radius: 16px;
		padding: 20px 18px 18px;
	}
}