/**
 * Centro de Descargas — [mycar_descargas]
 * Mobile-first. Misma paleta e identidad que el resto de cnlaunchlatin.com.
 */

.mycar-dl {
	--dl-red: #c41230;
	--dl-red-deep: #a00e28;
	--dl-ink: #14161c;
	--dl-muted: #6b7280;
	--dl-surface: #ffffff;
	--dl-surface-2: #f7f7fa;
	--dl-line: #e6e7ee;
	--dl-count-bg: rgba(0, 0, 0, .06);
	--dl-radius: 14px;
	--dl-radius-sm: 9px;

	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: var(--dl-ink);
	max-width: 1400px;
	margin: 0 auto;
	padding-top: 28px;
	box-sizing: border-box;
}

@media (min-width: 768px) {
	.mycar-dl { padding-top: 36px; }
}

/* Modo oscuro: BuddyBoss ReadyLaunch marca .bb-rl-dark-mode en el body. Se
   redefinen los mismos tokens, así que el resto del CSS no necesita saber
   que existe el modo oscuro. */
body.bb-rl-dark-mode .mycar-dl {
	--dl-ink: #eef0f5;
	--dl-muted: #9aa0b8;
	--dl-surface: #171a23;
	--dl-surface-2: #1e2129;
	--dl-line: #2b2e3a;
	--dl-count-bg: rgba(255, 255, 255, .08);
}

.mycar-dl *,
.mycar-dl *::before,
.mycar-dl *::after { box-sizing: border-box; }

/* El centro trae su propia jerarquía visual, así que el título de la página
   del tema sobra. Se oculta solo en esta página (clase que agrega el
   shortcode al body), nunca globalmente. */
body.mycar-dl-page .entry-title,
body.mycar-dl-page .bb-page-header .page-title {
	display: none;
}

.mycar-dl--empty {
	padding: 32px;
	text-align: center;
	color: var(--dl-muted);
	border: 1px solid var(--dl-line);
	border-radius: var(--dl-radius);
}

/* ---------- Toolbar: buscador + tipos ---------- */

.mycar-dl__toolbar {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 16px;
}

.mycar-dl__search input {
	width: 100%;
	appearance: none;
	border: 1px solid var(--dl-line);
	background: var(--dl-surface-2);
	border-radius: var(--dl-radius-sm);
	padding: 11px 14px;
	font: 400 14px/1.3 'Inter', sans-serif;
	color: var(--dl-ink);
}

.mycar-dl__search input::placeholder { color: var(--dl-muted); }

.mycar-dl__search input:focus {
	outline: none;
	border-color: var(--dl-red);
	box-shadow: 0 0 0 3px rgba(196, 18, 48, 0.12);
	background: var(--dl-surface);
}

.mycar-dl__types {
	display: flex;
	gap: 6px;
	overflow-x: auto;
	padding-bottom: 4px;
	-webkit-overflow-scrolling: touch;
}

.mycar-dl__type {
	flex: 0 0 auto;
	appearance: none;
	background: var(--dl-surface-2);
	border: 1px solid var(--dl-line);
	color: var(--dl-ink);
	font: 600 11.5px/1 'Inter', sans-serif;
	padding: 6px 11px;
	border-radius: 999px;
	cursor: pointer;
	white-space: nowrap;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.mycar-dl__type:hover { border-color: var(--dl-red); }

.mycar-dl__type.is-active {
	background: var(--dl-red);
	border-color: var(--dl-red);
	color: #fff;
}

/* ---------- Layout ---------- */

.mycar-dl__body {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

/* ---------- Navegación de categorías ---------- */

.mycar-dl__nav {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding-bottom: 4px;
}

.mycar-dl__cat {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	appearance: none;
	background: var(--dl-surface);
	border: 1px solid var(--dl-line);
	border-radius: var(--dl-radius-sm);
	padding: 8px 12px;
	font: 600 12.5px/1 'Inter', sans-serif;
	color: var(--dl-ink);
	cursor: pointer;
	white-space: nowrap;
	transition: border-color .15s ease, background .15s ease;
}

.mycar-dl__cat:hover:not(:disabled) { border-color: var(--dl-red); }

.mycar-dl__cat.is-active {
	background: var(--dl-red);
	border-color: var(--dl-red);
	color: #fff;
}

.mycar-dl__cat:disabled { opacity: .4; cursor: default; }

.mycar-dl__cat-icon { font-size: 13px; }

.mycar-dl__cat-count {
	font: 700 10.5px/1 'Inter', sans-serif;
	background: var(--dl-count-bg);
	border-radius: 999px;
	padding: 2px 6px;
}

.mycar-dl__cat.is-active .mycar-dl__cat-count { background: rgba(255, 255, 255, .22); }

/* ---------- Contenido ---------- */

.mycar-dl__header { margin-bottom: 14px; }

.mycar-dl__title {
	font: 700 20px/1.2 'Arial Black', Arial, sans-serif;
	letter-spacing: .01em;
	margin: 0 0 4px;
	color: var(--dl-ink);
}

.mycar-dl__desc {
	margin: 0;
	font-size: 13.5px;
	color: var(--dl-muted);
}

.mycar-dl__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}

.mycar-dl__product {
	background: var(--dl-surface);
	border: 1px solid var(--dl-line);
	border-radius: var(--dl-radius);
	padding: 16px;
}

.mycar-dl__product-head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--dl-line);
	margin-bottom: 12px;
}

.mycar-dl__product-img {
	width: 48px;
	height: 48px;
	object-fit: contain;
	flex: 0 0 auto;
}

.mycar-dl__product-name {
	font: 700 15px/1.25 'Inter', sans-serif;
	margin: 0;
}

.mycar-dl__product-meta {
	font: 400 12px/1 'Inter', sans-serif;
	color: var(--dl-muted);
}

.mycar-dl__group + .mycar-dl__group { margin-top: 14px; }

.mycar-dl__group-title {
	font: 700 10.5px/1 'Arial Black', Arial, sans-serif;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--dl-muted);
	margin: 0 0 8px;
}

/* ---------- Archivo ---------- */

.mycar-dl__file {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: var(--dl-surface-2);
	border: 1px solid var(--dl-line);
	border-radius: var(--dl-radius-sm);
	padding: 11px 13px;
	text-decoration: none;
	color: inherit;
	transition: border-color .15s ease, background .15s ease;
}

.mycar-dl__file + .mycar-dl__file { margin-top: 7px; }

.mycar-dl__file:hover {
	border-color: var(--dl-red);
	background: var(--dl-surface);
}

.mycar-dl__file-main { min-width: 0; }

.mycar-dl__file-title {
	display: block;
	font: 600 13.5px/1.3 'Inter', sans-serif;
	color: var(--dl-ink);
}

.mycar-dl__file-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 4px;
	font: 400 11.5px/1.3 'Inter', sans-serif;
	color: var(--dl-muted);
}

.mycar-dl__badge {
	background: rgba(196, 18, 48, .09);
	color: var(--dl-red);
	font-weight: 700;
	border-radius: 4px;
	padding: 2px 6px;
}

.mycar-dl__file-action {
	flex: 0 0 auto;
	font: 700 11.5px/1 'Inter', sans-serif;
	color: #fff;
	background: var(--dl-red);
	border-radius: 999px;
	padding: 9px 14px;
	white-space: nowrap;
}

.mycar-dl__file:hover .mycar-dl__file-action { background: var(--dl-red-deep); }

.mycar-dl__empty {
	color: var(--dl-muted);
	font-size: 13.5px;
	text-align: center;
	padding: 28px 0;
}

/* =====================================================================
   Tablet (≥768px): la grilla de equipos pasa a 2 columnas
   ===================================================================== */
@media (min-width: 768px) {
	/* El buscador queda SIEMPRE en su propia fila a ancho completo — con la
	   fila compartida (buscador + 8 chips lado a lado) se aplastaba a casi
	   nada en pantallas grandes. Las chips van debajo, envolviendo. */
	.mycar-dl__toolbar { align-items: center; }
	.mycar-dl__search { width: 100%; max-width: 420px; }
	.mycar-dl__types { flex-wrap: wrap; overflow-x: visible; justify-content: center; }

	.mycar-dl__grid { grid-template-columns: repeat(2, 1fr); }
}

/* =====================================================================
   Desktop (≥1024px): categorías como columna lateral fija
   ===================================================================== */
@media (min-width: 1024px) {
	.mycar-dl__body {
		flex-direction: row;
		align-items: flex-start;
	}

	.mycar-dl__nav {
		flex: 0 0 230px;
		width: 230px;
		flex-direction: column;
		overflow-x: visible;
		position: sticky;
		top: 20px;
	}

	.mycar-dl__cat {
		width: 100%;
		justify-content: flex-start;
	}

	.mycar-dl__cat-count { margin-left: auto; }

	.mycar-dl__main { flex: 1; min-width: 0; }

	.mycar-dl__title { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
	.mycar-dl__type,
	.mycar-dl__cat,
	.mycar-dl__file { transition: none; }
}