/* ── Catálogo de Repuestos — estilo "Idea Repuestos" (navy + bone) ──────────
   Paleta y tipografías según GUIA-ESTILO.md. Todo va scopeado a .cr-catalogo
   para no afectar al resto del sitio. */
.cr-catalogo {
	/* Marca */
	--cr-navy:    #15233f;
	--cr-navy-700:#1d3052;
	--cr-navy-500:#33486b;
	--cr-navy-900:#0f1a2e;
	/* Superficies hueso */
	--cr-bone:    #f2eee5;
	--cr-bone-2:  #ece7db;
	--cr-surface: #faf7f0;
	--cr-surface-2:#fdfbf6;
	/* Tinta y líneas */
	--cr-ink:     #26313f;
	--cr-muted:   #6c6a63;
	--cr-line:    #ddd6c7;
	--cr-line-2:  #e7e1d4;
	/* Forma */
	--cr-r:       5px;
	--cr-r-sm:    3px;
	--cr-shadow:  0 1px 2px rgba(21,35,63,.05), 0 12px 32px -18px rgba(21,35,63,.22);
	--cr-ease:    cubic-bezier(.22,.61,.36,1);

	font-family:'Hanken Grotesk', sans-serif;
	font-size:15.5px;
	line-height:1.65;
	color:var(--cr-ink);
}

/* Filtros por marca (solo logo, todos del mismo tamaño) */
.cr-marcas { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:18px; }
.cr-marca-btn {
	/* Todos los contenedores miden igual; el logo se ajusta adentro. */
	box-sizing:border-box;
	width:136px; height:80px; padding:8px;
	display:inline-flex; align-items:center; justify-content:center;
	background:#fff;                          /* logos sobre blanco en ambos estados */
	border:1px solid var(--cr-line);
	border-radius:var(--cr-r);
	cursor:pointer;
	transition:transform .35s var(--cr-ease), box-shadow .35s var(--cr-ease), border-color .35s var(--cr-ease), background .35s var(--cr-ease), color .35s var(--cr-ease);
}
.cr-marca-btn:hover { transform:translateY(-2px); box-shadow:var(--cr-shadow); border-color:var(--cr-navy-500); }
/* Activo: anillo navy (el logo sigue legible sobre el blanco interior). */
.cr-marca-btn.is-active { border-color:var(--cr-navy); box-shadow:0 0 0 2px var(--cr-navy); }

/* El logo llena el botón respetando su relación de aspecto (sin deformar). */
.cr-marca-logo {
	max-width:100%; max-height:100%;
	width:auto; height:auto;
	object-fit:contain; display:block;
}

/* Fallback cuando una marca no tiene logo: su nombre. */
.cr-marca-nombre {
	font-family:'Sora', sans-serif; font-weight:500; font-size:13px;
	color:var(--cr-navy); text-align:center; line-height:1.2;
}

/* Botón "Todas" (texto): mismo tamaño; activo en navy sólido. */
.cr-marca-todas {
	font-family:'Sora', sans-serif; font-weight:600; font-size:14px;
	color:var(--cr-navy); letter-spacing:.02em;
}
.cr-marca-todas.is-active { background:var(--cr-navy); color:#fff; border-color:var(--cr-navy); box-shadow:none; }

/* Barra superior: buscador + contador */
.cr-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
.cr-search { position:relative; flex:1 1 320px; max-width:480px; }
.cr-search-ico { position:absolute; left:14px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--cr-muted); pointer-events:none; }
.cr-catalogo .cr-input {
	width:100%; box-sizing:border-box;
	padding:13px 16px 13px 42px;
	border:1px solid var(--cr-line);
	border-radius:var(--cr-r);
	font-family:'Hanken Grotesk', sans-serif;
	font-size:15.5px; color:var(--cr-ink);
	background:var(--cr-surface-2);
	outline:none;
	transition:border-color .35s var(--cr-ease), box-shadow .35s var(--cr-ease);
}
.cr-input::placeholder { color:var(--cr-muted); }
.cr-input:focus { border-color:var(--cr-navy-500); box-shadow:0 0 0 3px rgba(51,72,107,.14); }

.cr-count {
	font-family:'Sora', sans-serif;
	font-size:12.5px; font-weight:600;
	letter-spacing:.12em; text-transform:uppercase;
	color:var(--cr-navy-500); white-space:nowrap;
}
.cr-count-num { color:var(--cr-navy); }

/* Wrapper para respetar las esquinas de 5px */
.cr-table-wrap {
	border:1px solid var(--cr-line);
	border-radius:var(--cr-r);
	overflow:hidden;
	background:var(--cr-surface);
	box-shadow:var(--cr-shadow);
}

/* Tabla */
.cr-table { width:100%; border-collapse:collapse; background:var(--cr-surface); }
.cr-table thead th {
	font-family:'Sora', sans-serif;
	font-size:12.5px; font-weight:600;
	letter-spacing:.12em; text-transform:uppercase;
	color:var(--cr-navy-500); text-align:left;
	background:var(--cr-bone-2);
	padding:14px 18px;
	border-bottom:1px solid var(--cr-line);
}
.cr-table tbody td {
	padding:14px 18px;
	border-bottom:1px solid var(--cr-line-2);
	vertical-align:middle;
}
.cr-table tbody tr:last-child td { border-bottom:none; }
.cr-row { transition:background .35s var(--cr-ease); }
.cr-row:hover { background:var(--cr-surface-2); }

.cr-th-img { width:96px; }
/* Celda de imagen en blanco liso para que coincida con el fondo de las fotos.
   !important para ganarle al "zebra striping" del tema (regla en hoja externa
   con más especificidad y color semitransparente que dejaba pasar el crema). */
.cr-catalogo .cr-table td.cr-td-img { width:96px; background:#fff !important; }
.cr-th-cod, .cr-td-cod {
	width:150px; white-space:nowrap;
	font-family:'Sora', sans-serif; font-weight:600;
	font-variant-numeric:tabular-nums;
	color:var(--cr-navy-500);
}
.cr-td-nom { color:var(--cr-ink); }

/* Refuerzo: si algún navegador (iOS) autodetecta el código como enlace "tel:",
   que no se vea ni actúe como link (el meta format-detection ya lo previene). */
.cr-td-cod a, .cr-card-cod a {
	color:inherit; text-decoration:none; pointer-events:none; cursor:text;
}

/* Miniatura */
.cr-thumb {
	width:68px; height:68px; object-fit:contain;
	background:#fff;
	border:1px solid var(--cr-line);
	border-radius:var(--cr-r-sm);
	cursor:zoom-in; display:block;
	transition:transform .35s var(--cr-ease), box-shadow .35s var(--cr-ease);
}
.cr-thumb:hover { transform:translateY(-3px); box-shadow:var(--cr-shadow); }
.cr-noimg {
	display:inline-flex; align-items:center; justify-content:center;
	width:68px; height:68px;
	background:#fff;
	border:1px dashed var(--cr-line);
	border-radius:var(--cr-r-sm);
	color:var(--cr-muted-2, #8b8881);
}

/* La lista de tarjetas existe en el DOM pero solo se muestra en mobile. */
.cr-cards { display:none; }

.cr-noresults { padding:28px; text-align:center; color:var(--cr-muted); }
.cr-empty { padding:18px; color:var(--cr-muted); }

/* Paginación (solo cliente: la lista entera ya está en el DOM) */
.cr-pager { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:22px; }
.cr-pager[hidden] { display:none; }
.cr-page-btn {
	display:inline-flex; align-items:center; justify-content:center;
	min-width:40px; height:40px; padding:0 12px;
	font-family:'Sora', sans-serif; font-size:14px; font-weight:500;
	color:var(--cr-navy); background:var(--cr-surface);
	border:1px solid var(--cr-line); border-radius:var(--cr-r);
	cursor:pointer;
	transition:transform .35s var(--cr-ease), box-shadow .35s var(--cr-ease), background .35s var(--cr-ease), color .35s var(--cr-ease);
}
.cr-page-btn:hover:not(:disabled):not(.is-active) { transform:translateY(-2px); box-shadow:var(--cr-shadow); }
.cr-page-btn:disabled { opacity:.4; cursor:default; }
.cr-page-btn.is-active { background:var(--cr-navy); border-color:var(--cr-navy); color:#fff; cursor:default; }
.cr-page-ellipsis { display:inline-flex; align-items:center; justify-content:center; min-width:24px; height:40px; color:var(--cr-muted); font-family:'Sora', sans-serif; }
.cr-page-nav svg { width:16px; height:16px; }

/* Lightbox (ampliar imagen, no es ficha de producto) */
.cr-lightbox { position:fixed; inset:0; z-index:99999; background:rgba(15,26,46,.82); display:flex; align-items:center; justify-content:center; padding:24px; }
.cr-lightbox[hidden] { display:none; }
.cr-lb-img { max-width:92vw; max-height:88vh; object-fit:contain; background:var(--cr-surface); border-radius:var(--cr-r); box-shadow:0 24px 60px -28px rgba(21,35,63,.34); }
.cr-lb-close {
	position:absolute; top:18px; right:24px;
	width:44px; height:44px; border:none; border-radius:50%;
	background:rgba(242,238,229,.16); color:#fff;
	font-size:28px; line-height:1; cursor:pointer;
	transition:background .35s var(--cr-ease);
}
.cr-lb-close:hover { background:rgba(242,238,229,.30); }

/* ── Mobile: en vez de "doblar" la tabla de desktop con CSS, se renderiza una
   lista de tarjetas propia (.cr-cards) y se oculta la tabla por completo. ── */
@media (max-width:600px) {
	.cr-table-wrap { display:none; }
	.cr-cards { display:flex; flex-direction:column; gap:12px; }

	.cr-card {
		display:grid;
		grid-template-columns:72px 1fr;
		align-items:center;
		gap:14px;
		padding:12px;
		background:var(--cr-surface);
		border:1px solid var(--cr-line);
		border-radius:var(--cr-r);
		box-shadow:var(--cr-shadow);
	}

	.cr-card-img {
		width:72px; height:72px;
		display:flex; align-items:center; justify-content:center;
		background:#fff;
		border:1px solid var(--cr-line);
		border-radius:var(--cr-r-sm);
		overflow:hidden;
	}
	.cr-card-img .cr-thumb,
	.cr-card-img .cr-noimg {
		width:100%; height:100%; border:none; border-radius:0;
	}

	.cr-card-body { display:flex; flex-direction:column; gap:3px; min-width:0; }
	.cr-card-cod {
		font-family:'Sora', sans-serif; font-weight:600; font-size:13px;
		letter-spacing:.02em; color:var(--cr-navy-500);
		font-variant-numeric:tabular-nums;
	}
	.cr-card-nom {
		font-family:'Hanken Grotesk', sans-serif; font-size:15.5px;
		line-height:1.4; color:var(--cr-ink);
	}
}