/* ============================================
   ATMIC GAMERZONE - OVERRIDE
   Se carga después de los demás CSS para forzar
   el estilo gamer en inputs, selects y checkboxes.
   ============================================ */

/* ===== INPUTS DE TEXTO, NÚMERO Y SELECT ===== */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
textarea,
select {
  background-color: #0D0221 !important;
  color: #F8F9FA !important;
  border: 1px solid #9D4EDD !important;
  border-radius: 10px !important;
  padding: 0.65rem 1rem !important;
  font-size: 0.9rem !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
  border-color: #FF006E !important;
  box-shadow: 0 0 0 3px rgba(255, 0, 110, 0.25) !important;
}

input::placeholder,
textarea::placeholder {
  color: #8B86A3 !important;
  opacity: 1 !important;
}

/* Autofill de Chrome: evita fondo blanco feo */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #0D0221 inset !important;
  -webkit-text-fill-color: #F8F9FA !important;
  caret-color: #F8F9FA !important;
  transition: background-color 9999s ease-in-out 0s !important;
}

/* Select con flecha custom neón */
select {
  background-image:
    linear-gradient(#0D0221, #0D0221),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path fill='%239D4EDD' d='M7 9L0 0h14z'/></svg>") !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: 0 0, right 1rem center !important;
  background-size: 100% 100%, 14px 9px !important;
  padding-right: 2.5rem !important;
  cursor: pointer !important;
}

select option {
  background-color: #0D0221 !important;
  color: #F8F9FA !important;
}

/* Quitar flechitas de los inputs number */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

input[type="number"] {
  -moz-appearance: textfield !important;
  appearance: textfield !important;
}

/* ===== CHECKBOX CIRCULAR NEÓN ===== */
label.filtro-check {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  cursor: pointer !important;
  color: #B8B5C9 !important;
  font-size: 0.9rem !important;
  padding: 4px 0 !important;
  user-select: none !important;
  transition: color 0.2s !important;
}

label.filtro-check:hover {
  color: #F8F9FA !important;
}

label.filtro-check input[type="checkbox"] {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
}

label.filtro-check > span {
  display: inline-flex !important;
  align-items: center !important;
  position: relative !important;
}

/* El círculo */
label.filtro-check > span::before {
  content: '' !important;
  display: inline-block !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  border: 2px solid #9D4EDD !important;
  background: transparent !important;
  margin-right: 10px !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}

/* El check ✓ oculto por defecto */
label.filtro-check > span::after {
  content: '✓' !important;
  position: absolute !important;
  left: 4px !important;
  top: 50% !important;
  transform: translateY(-50%) scale(0) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  color: #fff !important;
  pointer-events: none !important;
  transition: transform 0.2s ease !important;
  line-height: 1 !important;
}

/* Al marcar: relleno con degradado + check visible */
label.filtro-check input[type="checkbox"]:checked ~ span::before,
label.filtro-check input[type="checkbox"]:checked + span::before {
  background: linear-gradient(135deg, #9D4EDD, #FF006E) !important;
  border-color: transparent !important;
  box-shadow: 0 0 12px rgba(255, 0, 110, 0.6) !important;
}

label.filtro-check input[type="checkbox"]:checked ~ span::after,
label.filtro-check input[type="checkbox"]:checked + span::after {
  transform: translateY(-50%) scale(1) !important;
}

/* ===== BOTÓN ✕ DEL HEADER DE FILTROS ===== */
.filtros__cerrar {
  display: none !important;
  background: rgba(255, 0, 110, 0.15) !important;
  border: 1px solid #FF006E !important;
  color: #FF006E !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  font-size: 14px !important;
  cursor: pointer !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s !important;
  padding: 0 !important;
}
/* ============================================
   FILTROS EN HORIZONTAL (chips)
   Convierte los checkboxes en fila horizontal
   ============================================ */

/* Contenedor de la lista: pasar de columna a fila */
.filtros__lista {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

/* Cada checkbox: estilo chip/pastilla */
label.filtro-check {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 12px !important;
  border: 1px solid #9D4EDD !important;
  border-radius: 9999px !important;
  background: rgba(157, 78, 221, 0.1) !important;
  font-size: 0.85rem !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
}

label.filtro-check:hover {
  background: rgba(157, 78, 221, 0.25) !important;
  border-color: #FF006E !important;
}

/* Al marcar el checkbox: chip resaltado */
label.filtro-check:has(input[type="checkbox"]:checked) {
  background: linear-gradient(135deg, #9D4EDD, #FF006E) !important;
  border-color: transparent !important;
  box-shadow: 0 0 12px rgba(255, 0, 110, 0.5) !important;
  color: #fff !important;
}

/* Ocultar el círculo y el check dentro del chip (no hace falta) */
label.filtro-check > span::before,
label.filtro-check > span::after {
  display: none !important;
}

/* ============================================
   AJUSTE PARA MÓVIL
   ============================================ */

/* En móvil, volver a columna (los chips ocupan mucho) */
@media (max-width: 899px) {
  .filtros__lista {
    flex-direction: column !important;
    gap: 8px !important;
  }

  label.filtro-check {
    width: 100% !important;
    justify-content: flex-start !important;
    border-radius: 10px !important;
    padding: 8px 12px !important;
  }

  /* Volver a mostrar el círculo en móvil */
  label.filtro-check > span::before {
    display: inline-block !important;
  }

  label.filtro-check > span::after {
    display: block !important;
  }
}

.filtros__cerrar:hover {
  background: #FF006E !important;
  color: #fff !important;
}

@media (max-width: 899px) {
  .filtros__cerrar {
    display: flex !important;
  }
}

@media (min-width: 900px) {
  .filtros__cerrar {
    display: none !important;
  }
}

/* ===== INPUT DE CANTIDAD EN DETALLE DE PRODUCTO ===== */
.cantidad-control input[type="number"] {
  background-color: transparent !important;
  border: none !important;
  border-left: 1px solid #9D4EDD !important;
  border-right: 1px solid #9D4EDD !important;
  border-radius: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  width: 60px !important;
  height: 40px !important;
}

.cantidad-control input[type="number"]:focus {
  box-shadow: none !important;
  border-color: #9D4EDD !important;
}

/* ===== BADGES DE PRODUCTO (Nuevo / Oferta / Agotado) ===== */
.producto-imagen__badges,
.card-producto__badges {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 0.4rem !important;
  top: 0.4rem !important;
  left: 0.4rem !important;
}

.producto-imagen__badges .badge,
.card-producto__badges .badge {
  margin: 0 !important;
}

/* ============================================
   FIX DE PRODUCTO - DETALLE
   Todo con !important para ganar cualquier pelea
   ============================================ */

/* ===== BOTONES DE ACCIÓN (Añadir / Consultar) ===== */
.producto-acciones {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.4rem !important;
  margin-top: 0.4rem !important;
  margin-bottom: 0.4rem !important;
}

/* ===== ESPECIFICACIONES TÉCNICAS CENTRADAS ===== */
.producto-specs {
  margin-top: 0.4rem !important;
  padding-top: 1.5rem !important;
  border-top: 1px solid rgba(157, 78, 221, 0.25) !important;
  text-align: center !important;
  width: 100% !important;
}

.producto-specs__titulo {
  font-family: 'Orbitron', sans-serif !important;
  font-size: 1.1rem !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 1rem !important;
  color: #9D4EDD !important;
  text-align: center !important;
}

.specs-tabla {
  width: 100% !important;
  max-width: 600px !important;
  margin: 0 auto !important;
  border-collapse: collapse !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  text-align: center !important;
}

.specs-tabla th,
.specs-tabla td {
  padding: 0.75rem 1rem !important;
  font-size: 0.9rem !important;
  border-bottom: 1px solid rgba(157, 78, 221, 0.25) !important;
  text-align: center !important;
  vertical-align: middle !important;
}

.specs-tabla th {
  background: rgba(123, 44, 191, 0.2) !important;
  color: #9D4EDD !important;
  font-weight: 600 !important;
  width: 40% !important;
}

.specs-tabla td {
  color: #F8F9FA !important;
  background: rgba(26, 11, 46, 0.5) !important;
}

.specs-tabla tr:last-child th,
.specs-tabla tr:last-child td {
  border-bottom: none !important;
}

/* ===== BADGES DE PRODUCTO (Nuevo / Oferta / Agotado) ===== */
.producto-imagen__badges,
.card-producto__badges {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.4rem !important;
  top: 0.4rem !important;
  left: 0.4rem !important;
  position: absolute !important;
}

.producto-imagen__badges .badge,
.card-producto__badges .badge {
  margin: 0 !important;
}

/* ===== PRECIO REFERENCIAL / AVISO ===== */
.precio-referencial {
  font-size: 0.75rem !important;
  color: #B8B5C9 !important;
  opacity: 0.85 !important;
  margin-top: 0.25rem !important;
  margin-bottom: 0 !important;
}

/* ===== STOCK BAJO ===== */
.producto-stock-bajo {
  font-size: 1rem !important;
  color: #F59E0B !important;
  font-weight: 700 !important;
  margin: 0.4rem 0 !important;
}

/* ===== CANTIDAD INLINE (a la derecha del precio) ===== */
.producto-cantidad-inline {
  display: flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
}

.producto-cantidad-inline label {
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: #B8B5C9 !important;
  white-space: nowrap !important;
}

/* ===== CONTROL DE CANTIDAD (32px de alto) ===== */
.cantidad-control {
  display: inline-flex !important;
  align-items: center !important;
  background: rgba(13, 2, 33, 0.9) !important;
  border: 1px solid rgba(157, 78, 221, 0.25) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  height: 32px !important;
}

.cantidad-btn {
  width: 32px !important;
  height: 100% !important;
  background: transparent !important;
  color: #F8F9FA !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  line-height: 1 !important;
  border: none !important;
}

.cantidad-btn:hover {
  background: #9D4EDD !important;
  color: #fff !important;
}

.cantidad-control input[type="number"] {
  width: 44px !important;
  height: 100% !important;
  text-align: center !important;
  border: none !important;
  border-left: 1px solid rgba(157, 78, 221, 0.25) !important;
  border-right: 1px solid rgba(157, 78, 221, 0.25) !important;
  background: transparent !important;
  color: #F8F9FA !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

.cantidad-control input[type="number"]:focus {
  box-shadow: none !important;
  border-color: rgba(157, 78, 221, 0.25) !important;
}

/* ===== BLOQUE DE PRECIOS: FORZAR COLORES ===== */
.producto-precio-original__tachado {
  color: #C0392B !important;
  text-decoration: line-through !important;
  text-decoration-thickness: 1.5px !important;
  opacity: 0.75 !important;
  font-weight: 500 !important;
}

.producto-precio-original__descuento {
  color: #22C55E !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
}

.producto-precio-final {
  font-family: 'Orbitron', sans-serif !important;
  font-size: 2.25rem !important;
  font-weight: 900 !important;
  color: #22C55E !important;
  line-height: 1.1 !important;
  letter-spacing: 0.02em !important;
}

@media (min-width: 900px) {
  .producto-precio-final {
    font-size: 2.75rem !important;
  }
}

.producto-precio-final-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  flex-wrap: wrap !important;
}

.producto-precio-original {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  font-size: 0.95rem !important;
}

.producto-precios-bloque {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.4rem !important;
}
/* ============================================
   COTIZACIÓN + ABOUT
   ============================================ */

/* ===== CABECERA COTIZACIÓN ===== */
.cotizacion-hero {
  padding: var(--sp-7) 0 var(--sp-5);
  text-align: center;
  border-bottom: 1px solid var(--color-borde);
}

.cotizacion-hero__titulo {
  font-size: var(--fs-3xl);
  margin-bottom: var(--sp-3);
}

.cotizacion-hero__desc {
  color: var(--color-texto-suave);
  max-width: 600px;
  margin: 0 auto;
}

/* ===== LAYOUT COTIZACIÓN ===== */
.cotizacion-main {
  padding: var(--sp-6) 0 var(--sp-8);
}

.cotizacion-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  align-items: start;
}

@media (min-width: 900px) {
  .cotizacion-layout {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-6);
  }
}

/* ===== RESUMEN (izquierda) ===== */
.cotizacion-resumen,
.cotizacion-form {
  background: rgba(26, 11, 46, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--color-borde);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
}

.cotizacion-resumen__titulo,
.cotizacion-form__titulo {
  font-family: 'Orbitron', sans-serif;
  font-size: var(--fs-lg);
  letter-spacing: 0.06em;
  color: var(--color-violeta);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--color-borde);
}

.cotizacion-form__desc {
  color: var(--color-texto-suave);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-4);
}

/* Items del resumen */
.cotizacion-items {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  max-height: 400px;
  overflow-y: auto;
}

.cotizacion-item {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--color-borde);
}

.cotizacion-item:last-child {
  border-bottom: none;
}

.cotizacion-item__img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: rgba(157, 78, 221, 0.1);
}

.cotizacion-item__info {
  min-width: 0;
}

.cotizacion-item__nombre {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-texto);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
}

.cotizacion-item__precio {
  font-size: var(--fs-xs);
  color: var(--color-texto-suave);
  margin-top: 2px;
}

.cotizacion-item__subtotal {
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  color: var(--color-azul);
  font-size: var(--fs-base);
  white-space: nowrap;
}

/* Totales */
.cotizacion-totales {
  border-top: 2px solid var(--color-borde);
  padding-top: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.cotizacion-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-sm);
  color: var(--color-texto-suave);
}

.cotizacion-total-envio {
  color: var(--color-advertencia);
  font-weight: 600;
}

.cotizacion-total-final {
  font-size: var(--fs-lg);
  padding-top: var(--sp-3);
  margin-top: var(--sp-2);
  border-top: 1px solid var(--color-borde);
  color: var(--color-texto);
}

.cotizacion-total-final strong {
  font-family: 'Orbitron', sans-serif;
  font-size: var(--fs-xl);
  color: #22C55E;
}

.cotizacion-nota {
  font-size: var(--fs-xs);
  color: var(--color-texto-suave);
  text-align: center;
  margin-top: var(--sp-3);
  opacity: 0.85;
}

.cotizacion-seguir {
  display: inline-block;
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--color-violeta);
  font-weight: 600;
}

.cotizacion-seguir:hover {
  color: var(--color-rosa);
}

/* ===== FORMULARIO (derecha) ===== */
.cotizacion-formulario {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.form-grupo {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.form-grupo label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-texto);
}

.form-grupo label span {
  color: var(--color-rosa);
}

.form-grupo input,
.form-grupo textarea {
  background: rgba(13, 2, 33, 0.9) !important;
  color: var(--color-texto) !important;
  border: 1px solid var(--color-borde) !important;
  border-radius: var(--radius-md) !important;
  padding: 0.7rem 1rem !important;
  font-size: var(--fs-sm) !important;
  font-family: var(--font-cuerpo) !important;
  transition: all var(--transition) !important;
  width: 100% !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.form-grupo input:focus,
.form-grupo textarea:focus {
  outline: none !important;
  border-color: #FF006E !important;
  box-shadow: 0 0 0 3px rgba(255, 0, 110, 0.25) !important;
}

.form-grupo input::placeholder,
.form-grupo textarea::placeholder {
  color: #8B86A3 !important;
  opacity: 1 !important;
}

.form-grupo textarea {
  resize: vertical !important;
  min-height: 80px !important;
  font-family: var(--font-cuerpo) !important;
}

.form-hint {
  font-size: var(--fs-xs);
  color: var(--color-texto-suave);
  opacity: 0.85;
}

.btn-whatsapp-enviar {
  margin-top: var(--sp-2);
  font-size: var(--fs-base) !important;
  padding: 0.9rem 1.5rem !important;
}

.cotizacion-privacidad {
  font-size: var(--fs-xs);
  color: var(--color-texto-suave);
  text-align: center;
  opacity: 0.85;
}

/* ===== CARRITO VACÍO ===== */
.cotizacion-vacio {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--sp-8) var(--sp-4);
  background: rgba(26, 11, 46, 0.7);
  border: 1px solid var(--color-borde);
  border-radius: var(--radius-lg);
}

.cotizacion-vacio h2 {
  font-size: var(--fs-2xl);
  margin-bottom: var(--sp-3);
}

.cotizacion-vacio p {
  color: var(--color-texto-suave);
  margin-bottom: var(--sp-5);
}

/* ===== ABOUT ===== */
.about-hero {
  padding: var(--sp-8) 0 var(--sp-6);
  text-align: center;
  border-bottom: 1px solid var(--color-borde);
}

.about-hero__titulo {
  font-size: var(--fs-3xl);
  margin-bottom: var(--sp-3);
}

.about-hero__desc {
  color: var(--color-texto-suave);
  font-size: var(--fs-lg);
  max-width: 600px;
  margin: 0 auto;
}

.about-contenido {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.about-bloque {
  background: rgba(26, 11, 46, 0.5);
  border: 1px solid var(--color-borde);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
}

.about-bloque h2 {
  font-family: 'Orbitron', sans-serif;
  font-size: var(--fs-xl);
  color: var(--color-violeta);
  margin-bottom: var(--sp-3);
}

.about-bloque p {
  color: var(--color-texto-suave);
  font-size: var(--fs-base);
  line-height: 1.7;
  margin-bottom: var(--sp-3);
}

.about-bloque p:last-child {
  margin-bottom: 0;
}

.about-lista {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.about-lista li {
  color: var(--color-texto-suave);
  font-size: var(--fs-base);
  padding-left: var(--sp-5);
  position: relative;
  line-height: 1.6;
}

.about-lista li::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: var(--color-rosa);
  font-weight: 900;
}

.about-lista li strong {
  color: var(--color-texto);
}

.about-contacto {
  text-align: center;
}

.about-contacto__botones {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

@media (min-width: 600px) {
  .about-contacto__botones {
    flex-direction: row;
    justify-content: center;
  }
}

/* ===== FIX COTIZACIÓN EN MÓVIL ===== */

/* Asegurar que las columnas del grid puedan encogerse */
.cotizacion-layout {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1rem !important;
  align-items: start !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.cotizacion-layout > * {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

@media (min-width: 900px) {
  .cotizacion-layout {
    grid-template-columns: 1fr 1fr !important;
    gap: 1.5rem !important;
  }
}

/* Recuadros: sin padding excesivo en móvil */
.cotizacion-resumen,
.cotizacion-form {
  padding: 1rem !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

@media (min-width: 600px) {
  .cotizacion-resumen,
  .cotizacion-form {
    padding: 1.25rem !important;
  }
}

/* Contenedor principal de la página */
.cotizacion-main .container {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* Items del resumen: que no se salgan */
.cotizacion-item {
  display: grid !important;
  grid-template-columns: 50px minmax(0, 1fr) auto !important;
  gap: 0.5rem !important;
  align-items: center !important;
  min-width: 0 !important;
}

.cotizacion-item__img {
  width: 50px !important;
  height: 50px !important;
  flex-shrink: 0 !important;
}

.cotizacion-item__info {
  min-width: 0 !important;
  overflow: hidden !important;
}

.cotizacion-item__nombre {
  font-size: 0.85rem !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
}

.cotizacion-item__precio {
  font-size: 0.75rem !important;
}

.cotizacion-item__subtotal {
  font-size: 0.85rem !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* Inputs del formulario: que no se salgan */
.form-grupo,
.form-grupo input,
.form-grupo textarea {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Botón de WhatsApp: que quepa completo */
.btn-whatsapp-enviar {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  font-size: 0.9rem !important;
  padding: 0.85rem 1rem !important;
  white-space: normal !important;
  text-align: center !important;
  line-height: 1.3 !important;
}

@media (min-width: 480px) {
  .btn-whatsapp-enviar {
    font-size: 1rem !important;
    padding: 0.9rem 1.5rem !important;
    white-space: nowrap !important;
  }
}

/* Evitar scroll horizontal accidental */
html, body {
  overflow-x: hidden !important;
  max-width: 100% !important;
}
/* ===== FIX DEFINITIVO: BOTONES ICONO DEL HEADER ===== */

/* TODOS los botones tipo icono del header: centrado perfecto */
header .btn-icono,
header .menu-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  line-height: 1 !important;
  width: 44px !important;
  height: 44px !important;
  flex-shrink: 0 !important;
  position: relative !important;
  overflow: visible !important;
}

/* TODOS los SVG dentro de botones icono del header */
header .btn-icono > svg,
header .menu-toggle > svg {
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* El menú hamburguesa un poco más grande */
header .menu-toggle > svg {
  width: 22px !important;
  height: 22px !important;
}

/* El badge del carrito (número) sigue funcionando */
header .btn-icono .cart-badge {
  position: absolute !important;
  top: -4px !important;
  right: -4px !important;
  transform: none !important;
}

/* Contenedor de acciones: alineación correcta */
.header__acciones {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  flex-shrink: 0 !important;
}
/* ============================================
   FIX DEFINITIVO: ICONOS DEL HEADER
   Usa all:unset para limpiar cualquier herencia
   ============================================ */

/* Reset total de los botones del header */
.header .btn-icono {
  all: unset !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  background: rgba(123, 44, 191, 0.15) !important;
  border: 1px solid rgba(157, 78, 221, 0.25) !important;
  color: #F8F9FA !important;
  cursor: pointer !important;
  position: relative !important;
  transition: all 0.25s ease !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  font-family: inherit !important;
  line-height: 1 !important;
  text-align: center !important;
  vertical-align: middle !important;
}

.header .btn-icono:hover {
  background: rgba(123, 44, 191, 0.35) !important;
  border-color: #9D4EDD !important;
  box-shadow: 0 0 18px rgba(123, 44, 191, 0.6) !important;
}

/* Reset total del SVG dentro del botón */
.header .btn-icono > svg {
  all: unset !important;
  box-sizing: border-box !important;
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  color: #F8F9FA !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2 !important;
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* SVG del menú hamburguesa un poco más grande */
.header .menu-toggle > svg {
  width: 22px !important;
  height: 22px !important;
}

/* El badge del carrito */
.header .btn-icono .cart-badge {
  position: absolute !important;
  top: -4px !important;
  right: -4px !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 4px !important;
  border-radius: 9999px !important;
  background: #FF006E !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 0 12px rgba(255, 0, 110, 0.6) !important;
  line-height: 1 !important;
  z-index: 2 !important;
}

/* Contenedor de las acciones del header */
.header .header__acciones {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
  height: 100% !important;
}

/* Asegurar que el menú hamburguesa SOLO aparezca en móvil */
@media (min-width: 900px) {
  .header .menu-toggle {
    display: none !important;
  }
}

@media (max-width: 899px) {
  .header .menu-toggle {
    display: inline-flex !important;
  }
}
/* ============================================
   CATÁLOGO - REFINAMIENTO MÓVIL Y DESKTOP
   ============================================ */

/* ===== BOTÓN ✕ (cerrar filtros): solo visible en móvil ===== */
.filtros__cerrar {
  display: none !important;
  background: rgba(255, 0, 110, 0.15) !important;
  border: 1px solid #FF006E !important;
  color: #FF006E !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  font-size: 14px !important;
  cursor: pointer !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

@media (max-width: 899px) {
  .filtros__cerrar {
    display: inline-flex !important;
  }
}

@media (min-width: 900px) {
  .filtros__cerrar {
    display: none !important;
  }
}

/* ===== FILA DE BÚSQUEDA + LIMPIAR (dentro del panel) ===== */
.filtros__busqueda-row {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0.5rem 0 !important;
  border-bottom: 1px solid rgba(157, 78, 221, 0.25) !important;
  margin-bottom: 0.5rem !important;
}

.filtros__busqueda {
  flex: 1 !important;
  min-width: 0 !important;
}

.filtros__limpiar-inline {
  flex-shrink: 0 !important;
  padding: 0.5rem 0.75rem !important;
  font-size: 0.75rem !important;
  border-radius: 8px !important;
  white-space: nowrap !important;
}

/* ===== DESPLEGABLES (details/summary) para Categoría y Marca ===== */
.filtros__dropdown {
  border-bottom: 1px solid rgba(157, 78, 221, 0.25) !important;
  padding: 0.5rem 0 !important;
}

.filtros__dropdown:last-of-type {
  border-bottom: none !important;
}

.filtros__dropdown summary {
  cursor: pointer !important;
  list-style: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0.5rem 0 !important;
  font-family: 'Orbitron', sans-serif !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #9D4EDD !important;
  font-weight: 700 !important;
  user-select: none !important;
}

.filtros__dropdown summary::-webkit-details-marker {
  display: none !important;
}

.filtros__dropdown summary::after {
  content: '▾' !important;
  font-size: 0.9rem !important;
  color: #9D4EDD !important;
  transition: transform 0.2s !important;
}

.filtros__dropdown[open] summary::after {
  transform: rotate(180deg) !important;
}

.filtros__dropdown .filtros__lista {
  padding-top: 0.5rem !important;
}

/* ===== PRECIO: Mín y Máx en una sola fila (forzado) ===== */
.filtros__bloque--precio .filtros__precio {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.5rem !important;
  flex-wrap: nowrap !important;
}

.filtros__bloque--precio .filtros__precio input {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  width: auto !important;
}

/* ===== TOOLBAR: solo Relevancia, pegada a la derecha en desktop ===== */
.catalogo-toolbar {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 0.5rem !important;
  margin-bottom: 1rem !important;
  flex-wrap: nowrap !important;
}

@media (max-width: 899px) {
  .catalogo-toolbar {
    justify-content: flex-end !important;
  }

  .catalogo-orden {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    max-width: 100% !important;
  }
}

@media (min-width: 900px) {
  .catalogo-orden {
    min-width: 200px !important;
    max-width: 220px !important;
  }
}

/* ===== Ocultar el botón viejo "⚙️ Filtros" si quedó en caché ===== */
.btn-filtros-movil {
  display: none !important;
}

/* ===== Ocultar barra de búsqueda horizontal vieja si quedó ===== */
.catalogo-busqueda {
  display: none !important;
}

/* ===== Ajuste del panel de filtros en móvil ===== */
@media (max-width: 899px) {
  .filtros__bloque {
    padding: 0.5rem 0 !important;
  }

  /* Los títulos clásicos (Precio) mantienen su estilo */
  .filtros__bloque--precio .filtros__titulo {
    font-family: 'Orbitron', sans-serif !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #9D4EDD !important;
    font-weight: 700 !important;
    margin-bottom: 0.5rem !important;
  }
}
/* ============================================
   CATÁLOGO - AJUSTES FINOS v2
   ============================================ */

/* ===== 1. SELECT "RELEVANCIA" CENTRADO ===== */
.catalogo-orden {
  text-align: center !important;
  text-align-last: center !important;
  -moz-text-align-last: center !important;
  padding-left: 1rem !important;
  padding-right: 2.5rem !important;
}

/* En móvil, centrado también */
@media (max-width: 899px) {
  .catalogo-orden {
    text-align: center !important;
    text-align-last: center !important;
  }
}

/* ===== 2. SEPARACIÓN UNIFORME EN EL PANEL DE FILTROS ===== */

/* Título "Precio" con mismo margen superior que separa de "Marca" */
.filtros__bloque {
  margin: 0 !important;
  padding: 0.75rem 0 !important;
  border-bottom: 1px solid rgba(157, 78, 221, 0.25) !important;
}

/* Precio: título con margen uniforme */
.filtros__bloque--precio {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}

.filtros__bloque--precio .filtros__titulo {
  margin-top: 0 !important;
  margin-bottom: 0.75rem !important;
  padding: 0 !important;
}

/* Botón "Limpiar filtros" (el del fondo) con separación uniforme */
#limpiarFiltros {
  margin-top: 0.75rem !important;
  margin-bottom: 0 !important;
  padding-top: 0.7rem !important;
  padding-bottom: 0.7rem !important;
}

/* Los <details> también con padding uniforme */
.filtros__dropdown {
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: 1px solid rgba(157, 78, 221, 0.25) !important;
}

.filtros__dropdown:last-of-type {
  border-bottom: none !important;
}

/* ===== 3. MÁS SEPARACIÓN ENTRE "RELEVANCIA" Y EL PANEL DE FILTROS ===== */

/* El select de relevancia tiene margen inferior uniforme */
.catalogo-toolbar {
  margin-bottom: 0.75rem !important;
  padding-bottom: 0.75rem !important;
  border-bottom: 1px solid rgba(157, 78, 221, 0.15) !important;
}

/* Contador de resultados: margen uniforme arriba y abajo */
.catalogo-contador {
  margin-top: 0.75rem !important;
  margin-bottom: 0.75rem !important;
}

/* ===== 4. SEPARACIÓN UNIFORME DEL PANEL DE FILTROS (arriba y abajo del título) ===== */

/* El título "Filtros" del panel con margen uniforme */
.filtros__header {
  padding-bottom: 0.75rem !important;
  margin-bottom: 0 !important;
  border-bottom: 1px solid rgba(157, 78, 221, 0.25) !important;
}

/* Fila de búsqueda dentro del panel: margen uniforme */
.filtros__busqueda-row {
  padding: 0.75rem 0 !important;
  margin: 0 !important;
  border-bottom: 1px solid rgba(157, 78, 221, 0.25) !important;
}

/* Los summaries de los details: padding uniforme */
.filtros__dropdown summary {
  padding: 0.75rem 0 !important;
  margin: 0 !important;
}

/* La lista de checkboxes (cuando está abierta): padding arriba para no chocar */
.filtros__dropdown .filtros__lista {
  padding: 0 0 0.75rem 0 !important;
  margin: 0 !important;
}
/* ============================================
   CATÁLOGO - FILA CONTADOR + SELECT (v2)
   Contador a la izquierda, select pegado a la
   derecha, marco ajustado, texto normal.
   ============================================ */

/* Fila contenedora */
.catalogo-topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  margin-bottom: 1rem !important;
  padding-bottom: 0.75rem !important;
  border-bottom: 1px solid rgba(157, 78, 221, 0.15) !important;
  flex-wrap: nowrap !important;
}

/* Contador: ocupa el espacio disponible a la izquierda */
.catalogo-topbar .catalogo-contador {
  margin: 0 !important;
  padding: 0 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* ===== SELECT "RELEVANCIA" PEGADO A LA DERECHA, MARCO AJUSTADO ===== */
.catalogo-orden.catalogo-orden--compacto {
  flex: 0 0 auto !important;    /* se pega a la derecha */
  margin-left: auto !important; /* empuja todo el espacio a la izquierda */
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;

  /* Marco ajustado: menos aire interno */
  font-size: 0.85rem !important;     /* texto normal, no reducido */
  padding: 0.35rem 1.75rem 0.35rem 0.6rem !important;
  height: auto !important;
  line-height: 1.2 !important;

  border-radius: 8px !important;
  text-align: center !important;
  text-align-last: center !important;
  -moz-text-align-last: center !important;

  /* Flecha más cerca del borde derecho */
  background-position: 0 0, right 0.55rem center !important;
}

/* En móvil: mismo comportamiento, pero el marco un poco más pequeño */
@media (max-width: 500px) {
  .catalogo-topbar {
    gap: 0.5rem !important;
  }

  .catalogo-orden.catalogo-orden--compacto {
    font-size: 0.8rem !important;
    padding: 0.3rem 1.5rem 0.3rem 0.5rem !important;
    background-position: 0 0, right 0.45rem center !important;
  }

  .catalogo-topbar .catalogo-contador {
    font-size: 0.8rem !important;
  }
}

/* Asegurar que no queden estilos viejos del toolbar */
.catalogo-toolbar {
  display: none !important;
}
/* ===== 2mm de aire entre "Limpiar filtros" y la fila del contador ===== */

.catalogo-topbar {
  margin-top: 0.8rem !important;   /* 2mm arriba */
}

/* Asegurar que el botón "Limpiar filtros" no sume margen extra abajo */
#limpiarFiltros {
  margin-bottom: 0 !important;
}
/* ============================================
   FIX BOTÓN WHATSAPP EN COTIZACIÓN (MÓVIL)
   ============================================ */

/* El botón debe adaptarse al ancho disponible sin desbordarse */
.btn-whatsapp-enviar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.4rem !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;

  /* El texto se puede partir en varias líneas si no cabe */
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  text-align: center !important;
  line-height: 1.3 !important;

  /* Padding ajustado para que quepa el contenido */
  padding: 0.75rem 1rem !important;
  font-size: 0.9rem !important;
}

/* En pantallas muy angostas, reducir un poco la letra y el padding */
@media (max-width: 400px) {
  .btn-whatsapp-enviar {
    font-size: 0.85rem !important;
    padding: 0.7rem 0.75rem !important;
    gap: 0.3rem !important;
  }
}

/* El emoji del botón: que no se deforme */
.btn-whatsapp-enviar .emoji,
.btn-whatsapp-enviar > span {
  flex-shrink: 0 !important;
  font-size: 1rem !important;
  line-height: 1 !important;
}

/* En desktop, mantener el botón en una sola línea si cabe */
@media (min-width: 900px) {
  .btn-whatsapp-enviar {
    white-space: nowrap !important;
    font-size: 1rem !important;
    padding: 0.9rem 1.5rem !important;
  }
}
/* ===== OCULTAR ✕ DE FILTROS Y USAR OVERLAY ===== */

/* Ocultar la ✕ en todos los tamaños */
.filtros__cerrar {
  display: none !important;
}

/* Overlay para cerrar tocando fuera (solo móvil) */
.filtros-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 2400; /* debajo del panel (2500) */
  animation: fade-overlay 0.25s ease;
}

@media (min-width: 900px) {
  .filtros-overlay {
    display: none !important;
  }
}