/* ==========================================================
   Cupones Tech · Inicio
   Reutiliza los tokens de color ya definidos en ctc-front.css
   (.ctc-listado) — este archivo solo agrega lo específico de home:
   pestañas, barra inferior fija, panel de favoritos y tiendas.
   ========================================================== */

.ctc-home {
	padding-bottom: 76px; /* espacio para que la barra inferior fija no tape el último renglón */
}

/* Sidebar de escritorio: oculta por default (móvil/tablet) — el
   media query de 1024px de abajo es lo único que la muestra. Así no
   depende solo de que el grid nunca se active; queda oculta aunque
   algo más cambie el display del padre más adelante. */
.ctc-home-sidebar {
	display: none;
}
.ctc-home-sidebar-modulo {
	background: var(--ctc-surface);
	border: 1px solid var(--ctc-border);
	border-radius: var(--ctc-radius-md);
	padding: 14px;
}
.ctc-home-sidebar-modulo-titulo {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 650;
	color: var(--ctc-text);
}
.ctc-home-sidebar-lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.ctc-home-sidebar-item {
	display: flex;
	flex-direction: column;
	gap: 1px;
	text-decoration: none;
	padding: 6px 8px;
	margin: 0 -8px;
	border-radius: 8px;
	transition: background-color 0.15s ease;
}
.ctc-home-sidebar-item:hover {
	background: var(--ctc-surface-2);
}
.ctc-home-sidebar-item-titulo {
	font-size: 12.5px;
	font-weight: 500;
	color: var(--ctc-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ctc-home-sidebar-item-tienda {
	font-size: 10.5px;
	color: var(--ctc-text-muted);
}

/* ==========================================================
   Responsive — móvil sin cambios (single-column, ya probado);
   solo se agrega adaptación para tablet/laptop/desktop. La tarjeta
   en sí NO se rediseña, solo se acomoda en más columnas cuando hay
   espacio de sobra.
   ========================================================== */
@media (min-width: 640px) {
	.ctc-home.ctc-listado {
		max-width: 880px;
	}
	.ctc-home-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
		gap: 12px;
	}
}
@media (min-width: 1024px) {
	.ctc-home.ctc-listado {
		max-width: 1240px;
		padding-left: 24px;
		padding-right: 24px;
	}
	.ctc-home-grid {
		/* FASE 3: en escritorio, UNA oferta completa por fila — antes
		   "repeat(auto-fill, minmax(320px, 1fr))" caía en 2 columnas
		   porque la columna del feed (dentro de .ctc-home-layout, ~78%
		   del ancho total) mide bastante más de 320px*2. Tablet (640px)
		   no se toca — sigue usando el auto-fill de arriba. */
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.ctc-cuponera-filtros,
	.ctc-home-tabs {
		gap: 8px;
	}
	/* REVISIÓN VISUAL GLOBAL: los chips "Todo · Samsung · Mercado Libre
	   · Amazon" son navegación de acceso rápido pensada para pantallas
	   angostas — en escritorio ya existe el mismo destino en el header
	   superior (nav principal) y en la sidebar, así que aquí se vuelven
	   redundantes y compiten visualmente con las pestañas Recientes/
	   Tendencias/Populares. Se ocultan SOLO en Home (selector scoped a
	   .ctc-home, y esta regla vive únicamente en ctc-home.css, que no
	   se carga en las cuponeras) — la misma clase .ctc-cuponera-filtros
	   en /cupones/mercado-libre/ y /cupones/amazon/ NO se toca, esas
	   páginas cargan otro archivo y siguen mostrando su barra de
	   filtros normalmente. display:none no reserva espacio. */
	.ctc-home .ctc-cuponera-filtros {
		display: none;
	}
	.ctc-tiendas-grid {
		grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
		gap: 14px;
	}

	/* --- Layout de 2 columnas: feed ~78% / sidebar ~22% ---
	   No es rígido: 1fr se adapta al ancho real disponible, y la
	   sidebar tiene un rango (240–300px) en vez de un valor fijo. */
	.ctc-home-layout {
		display: grid;
		grid-template-columns: 1fr minmax(240px, 300px);
		gap: 22px;
		align-items: start;
	}
	.ctc-home-feed-col {
		min-width: 0; /* evita que el grid empuje el ancho por contenido largo */
	}
	.ctc-home-sidebar {
		display: flex;
		flex-direction: column;
		gap: 16px;
		position: sticky;
		top: 20px;
	}
	/* HOME/LISTADOS — REGRESIÓN Y PULIDO: en /tiendas/ el contenido
	   principal ya lista las mismas tiendas que mostraba la sidebar
	   (duplicado). La sidebar se omite por completo en PHP para esa
	   vista (ver template-home.php, $vista==='tiendas'); esta clase
	   solo hace que la columna del feed aproveche el ancho completo en
	   vez de quedar comprimida contra una segunda columna vacía. */
	.ctc-home-layout--ancho-completo {
		grid-template-columns: 1fr;
	}

	/* --- Barra inferior: fuente Única de verdad es el bloque que vive
	   justo después de la declaración base de .ctc-home-barra-inferior
	   (sección "Barra inferior fija" más abajo en este archivo) — ver
	   la nota ahí para el porqué. --- */
	.ctc-home {
		padding-bottom: 40px; /* ya no hace falta el espacio reservado para la barra fija */
	}
	/* v0.39.75 — .ctc-home-favoritos ya no existe (Favoritos es una
	   página real, ver template-favoritos.php) — no hace falta ningún
	   ajuste de escritorio aquí. */

	/* --- Un poco más de presencia en escritorio — mismos elementos,
	   mismas proporciones, solo un poco más grandes. La estructura de
	   la tarjeta y el diseño móvil no se tocan. --- */
	.ctc-tarjeta-oferta-imagen {
		max-width: 140px;
	}
	.ctc-tarjeta-oferta-titulo {
		font-size: 14.5px;
	}
	.ctc-tarjeta-oferta-precio-final {
		font-size: 18px;
	}
	.ctc-tarjeta-oferta-cta {
		font-size: 12.5px;
		padding: 6px 14px;
	}

	/* FASE 3 (continuación): con el feed a una sola tarjeta por fila,
	   la columna disponible (~78% de hasta 1240px) es mucho más ancha
	   que el diseño original pensado para tarjetas de listado angostas
	   — sin este ajuste, la imagen (140px) queda perdida contra un
	   bloque de texto desproporcionadamente ancho y con poco aire.
	   Solo se tocan proporción/espaciado, nunca la estructura HTML ni
	   las clases que usa el JS. */
	.ctc-tarjeta-oferta {
		padding: 16px;
		gap: 20px;
	}
	.ctc-tarjeta-oferta-imagen {
		max-width: 200px;
	}
	.ctc-tarjeta-oferta-info {
		gap: 7px;
	}
	.ctc-tarjeta-oferta-precio {
		gap: 8px;
	}

	/* HOME 3A — uniformidad de altura entre tarjetas de producto.
	   Causa real de la disparidad: la tarjeta es un flex-row simple sin
	   min-height, y bloques internos aparecen/desaparecen según el
	   producto (arriba: tienda/favorito siempre, pero variantes/regalo/
	   doble-canal son opcionales), asi que el alto total depende de
	   cuánto contenido real trae cada tarjeta. La imagen no causaba la
	   diferencia por sí sola —ya usaba object-fit:contain sin deformar—
	   pero al no tener min-height/aspect-ratio propios, simplemente
	   heredaba (via align-items:stretch, el default del row) la altura
	   que dictaba la columna de texto, así que se veía tan dispareja
	   como el texto.
	   Solución SOLO con flex, sin tocar la estructura HTML: min-height
	   en la tarjeta como piso común (nunca recorta, las tarjetas con más
	   contenido simplemente crecen por encima de ese piso); con
	   align-items:stretch (ya era el default) la imagen y la columna de
	   texto quedan a esa misma altura sin deformarse (el object-fit ya
	   presente hace el resto); y el CTA/fecha se ancla siempre al fondo
	   de esa altura con margin-top:auto, sin importar cuánto contenido
	   opcional haya arriba. */
	/* Especificidad reforzada (.ctc-home-grid + .ctc-tarjeta-oferta) a
	   propósito: la regla genérica de uniformidad agregada en ctc-front.css
	   para /samsung/ y categorías usa ":not(.ctc-tarjeta-oferta--historica)",
	   que cuenta como 2 clases en especificidad — sin este refuerzo, esa
	   regla genérica le ganaría en cascada a este valor específico de Home,
	   sin importar el orden de carga. */
	.ctc-home-grid .ctc-tarjeta-oferta {
		min-height: 210px;
	}
	.ctc-home-grid .ctc-tarjeta-oferta-footer {
		margin-top: auto;
		padding-top: 8px;
	}
}

/* --- Tablet (640–1023px): el contenedor y el grid de tarjetas ya se
   adaptan desde el breakpoint de 640px de arriba, pero la sidebar de
   2 columnas NO cabe bien todavía — se queda oculta, el feed sigue
   ocupando todo el ancho, igual que en móvil. Esto es automático:
   .ctc-home-sidebar y .ctc-home-layout (grid) recién se activan en
   el breakpoint de 1024px de arriba, así que no hace falta ninguna
   regla adicional aquí — simplemente no ocurre antes de esa medida. */

/* --- Pestañas del feed (Recientes | Tendencias | Populares) --- */
.ctc-home-tabs {
	display: flex;
	gap: 4px;
	border-bottom: 1px solid var(--ctc-border);
	margin-bottom: 16px;
}
.ctc-home-tab {
	padding: 8px 14px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ctc-text-muted);
	text-decoration: none;
	border-bottom: 2px solid transparent;
}
.ctc-home-tab.is-activo {
	color: var(--ctc-accent);
	border-bottom-color: var(--ctc-accent);
}
.ctc-home-vacio-editorial {
	text-align: center;
	padding: 48px 16px;
	color: var(--ctc-text-muted);
	font-size: 14px;
}

/* --- Directorio de Tiendas --- */
.ctc-tiendas-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 10px;
}
.ctc-tienda-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 18px 10px;
	border-radius: var(--ctc-radius-md);
	border: 1px solid var(--ctc-border);
	background: var(--ctc-surface);
	text-decoration: none;
	color: var(--ctc-text);
	font-weight: 600;
	font-size: 13px;
	text-align: center;
}
.ctc-tienda-card--proxima {
	color: var(--ctc-text-muted);
	cursor: default;
	opacity: 0.6;
}
.ctc-tienda-card-nota {
	font-size: 10.5px;
	font-weight: 500;
	color: var(--ctc-text-muted);
}

/* v0.39.75 — el panel de Favoritos (.ctc-home-favoritos y sus
   hijos) se retiró: Favoritos ahora es una página real en
   template-favoritos.php, sin overlay ni position:fixed. */

/* --- Menú lateral (drawer desde la derecha), compacto --- */
.ctc-home-menu-fondo {
	position: fixed;
	top: var(--ctc-cabecera-alto, 0px);
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 65;
	background: rgba(15, 18, 26, 0.4);
}
.ctc-home-menu {
	position: fixed;
	top: var(--ctc-cabecera-alto, 0px);
	right: 0;
	bottom: 0;
	z-index: 66;
	width: min(78vw, 300px);
	background: rgba(255, 255, 255, 0.96);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-left: 1px solid var(--ctc-border);
	box-shadow: -8px 0 24px rgba(16, 24, 40, 0.18);
	padding: 16px;
	transform: translateX(100%);
	transition: transform 0.22s ease;
	overflow-y: auto;
}
.ctc-home-menu.is-abierto {
	transform: translateX(0);
}
.ctc-home-menu-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
	font-size: 13px;
	font-weight: 700;
	color: var(--ctc-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.ctc-home-menu nav {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.ctc-home-menu nav a {
	padding: 11px 10px;
	font-size: 15px;
	font-weight: 600;
	color: var(--ctc-text);
	text-decoration: none;
	border-radius: 8px;
}
.ctc-home-menu nav a:hover {
	background: var(--ctc-surface-2);
}

/* --- Barra inferior fija: translúcida con blur, siempre visible por
   encima de cualquier panel de vista (Favoritos incluido) ---
   ÚNICA fuente de verdad para su visibilidad responsive: la
   declaración base de abajo es SIEMPRE flex (móvil/tablet), y el
   único override a display:none vive en el bloque @media que sigue
   INMEDIATAMENTE después — nunca en otro lugar del archivo. */
.ctc-home-barra-inferior {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 60;
	display: flex;
	background: rgba(255, 255, 255, 0.82);
	-webkit-backdrop-filter: blur(16px) saturate(160%);
	backdrop-filter: blur(16px) saturate(160%);
	border-top: 1px solid rgba(228, 231, 238, 0.7);
	box-shadow: 0 -2px 12px rgba(16, 24, 40, 0.06);
}
/* REGRESIÓN INVESTIGADA (fase HOME/LISTADOS): antes había DOS reglas
   @media(min-width:1024px) para esta misma clase en dos puntos del
   archivo (una arriba, en el bloque grande de layout/grid; otra aquí
   mismo). Ambas decían display:none, así que el resultado final en
   cascada YA era correcto (última declaración = esta) — pero tener
   la regla duplicada en dos lugares del archivo es justo el patrón
   que causó el bug original una fase atrás (una queda "huérfana" si
   alguien edita una copia y no la otra). Se eliminó la copia de
   arriba; esta es ahora la ÚNICA regla que oculta la barra en
   escritorio, sin ambigüedad de cuál manda. */
@media (min-width: 1024px) {
	.ctc-home-barra-inferior {
		display: none;
	}
}
.ctc-home-barra-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 9px 4px 11px;
	border: none;
	background: none;
	color: var(--ctc-text-muted);
	font-size: 10.5px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}
.ctc-home-barra-icono {
	width: 20px;
	height: 20px;
}
.ctc-home-barra-item.is-activo,
.ctc-home-barra-item:active {
	color: var(--ctc-accent);
}

/* --- Paginación compacta tipo chips: ‹ [1] [2] [3] › --- */
.ctc-home-paginacion {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 5px;
	margin: 20px 0 8px;
}
.ctc-home-pagina-num,
.ctc-home-pagina-flecha {
	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-home-pagina-num.is-activa {
	background: var(--ctc-accent);
	border-color: var(--ctc-accent);
	color: #fff;
}
.ctc-home-pagina-flecha {
	font-size: 16px;
}
.ctc-home-pagina-flecha.is-inactiva {
	opacity: 0.4;
	pointer-events: none;
}
.ctc-home-pagina-puntos {
	color: var(--ctc-text-muted);
	padding: 0 2px;
}

/* --- Botón "volver arriba" del TEMA (no de este plugin): en la home
   flota justo donde está nuestra barra inferior y la tapa. No conozco
   el nombre exacto de la clase de tu tema, así que cubro los patrones
   más comunes — si tu tema usa otro distinto, dime el selector real y
   lo cambio por uno exacto en vez de esta lista defensiva. */
#back-to-top,
.back-to-top,
.scroll-to-top,
.scroltop,
.scroll-top,
[class*="scroll-to-top"],
[class*="scrolltop"],
[id*="scroll-to-top"] {
	bottom: 86px !important;
}
@media (min-width: 1024px) {
	#back-to-top,
	.back-to-top,
	.scroll-to-top,
	.scroltop,
	.scroll-top,
	[class*="scroll-to-top"],
	[class*="scrolltop"],
	[id*="scroll-to-top"] {
		bottom: 24px !important;
	}
}

/* NOTA: el bloque @media (min-width:1024px) de arriba, en este
   archivo, ya NO menciona .ctc-home-barra-inferior — esa regla vive
   Únicamente justo después de la declaración base, en la sección
   "Barra inferior fija" más arriba. El resto (layout de 2 columnas,
   padding-bottom) sigue viviendo en ese primer bloque. */