*{box-sizing:border-box;}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;margin:0;background:var(--cc-fondo);color:var(--cc-texto);}
a{color:inherit;}
.cc-header{background:var(--cc-secundario);color:var(--cc-primario);padding:14px 16px;position:sticky;top:0;z-index:10;}
.cc-header-fila{max-width:1100px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:12px;justify-content:space-between;}
.cc-marca{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;}
.cc-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.cc-marca img{height:40px;width:40px;object-fit:contain;border-radius:6px;background:var(--cc-primario);}
.cc-marca-nombre{font-weight:800;font-size:1.15em;letter-spacing:.02em;}
.cc-contacto-btn{background:var(--cc-acento);color:#fff;border:none;padding:10px 16px;border-radius:6px;font-weight:700;text-decoration:none;white-space:nowrap;}
.cc-header-acciones{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.cc-pedido-header-btn{display:inline-flex;align-items:center;gap:6px;min-height:40px;color:var(--cc-primario);border:2px solid rgba(255,255,255,.4);border-radius:8px;padding:6px 12px;text-decoration:none;font-weight:700;font-size:.85em;white-space:nowrap;}
.cc-pedido-header-btn:hover{border-color:var(--cc-acento);}
@media (max-width:640px){.cc-pedido-header-btn{display:none;}}
.cc-hero{background:var(--cc-secundario);color:var(--cc-primario);padding:28px 16px 36px;}
.cc-hero-inner{max-width:1100px;margin:0 auto;}
.cc-hero h1{margin:0 0 6px;font-size:1.6em;}
.cc-hero p{margin:0;opacity:.85;max-width:640px;}
.cc-banners{max-width:1100px;margin:18px auto 0;padding:0 16px;position:relative;overflow:hidden}.cc-banner{display:none;position:relative;border-radius:16px;overflow:hidden;background:var(--cc-secundario);min-height:230px}.cc-banner.cc-banner-activo{display:block}.cc-banner img{width:100%;height:clamp(230px,32vw,390px);object-fit:cover;display:block}.cc-banner-capa{position:absolute;inset:0;padding:clamp(22px,5vw,58px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;color:#fff;background:linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,.05) 70%)}.cc-banner-capa h2{font-size:clamp(1.45rem,4vw,2.8rem);margin:0 0 8px;max-width:650px}.cc-banner-capa p{font-size:clamp(.95rem,2vw,1.2rem);margin:0 0 16px;max-width:620px}.cc-banner-cta{display:inline-flex;background:var(--cc-acento);color:#fff;text-decoration:none;border-radius:999px;padding:11px 18px;font-weight:800}.cc-banner-puntos{display:flex;justify-content:center;gap:7px;padding:10px}.cc-banner-punto{width:9px;height:9px;border:0;border-radius:50%;background:#cbd5e1}.cc-banner-punto.activo{background:var(--cc-acento)}
.cc-buscador{max-width:1100px;margin:-20px auto 0;padding:0 16px;position:relative;z-index:2;}
.cc-buscador form{background:#fff;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.12);padding:12px;display:flex;flex-wrap:wrap;gap:8px;}
.cc-buscador input[type=text]{flex:1 1 220px;padding:10px;border:1px solid #ddd;border-radius:6px;font-size:1em;}
.cc-buscador select{padding:10px;border:1px solid #ddd;border-radius:6px;font-size:1em;}
.cc-buscador button{
  /* CORREGIDO (v0.6.22, Seccion 6): el boton "Buscar" medía 35 px de alto
     (medido con navegador real por tests/prueba_responsive_v0622.mjs),
     por debajo del minimo tactil de 44 px que exige la especificacion. */
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;min-width:44px;
  background:var(--cc-acento);color:#fff;border:none;padding:10px 18px;
  border-radius:6px;font-weight:700;cursor:pointer;
}
/* AGREGADO (buscador rapido en el encabezado, septiembre 2026): igual
   que en Mercado Libre, Amazon, etc., una caja de busqueda simple
   siempre visible en la cabecera (sticky) de computadora, para que el
   cliente no tenga que bajar hasta pasar el banner/hero/video para
   buscar. En telefono se sigue usando SOLO el buscador de siempre (mas
   completo, con categoria/marca/disponible); esta caja se oculta ahi. */
.cc-header-buscador{display:none;}
@media (min-width:641px){
  .cc-header-buscador{display:flex;flex:1 1 260px;max-width:420px;}
  .cc-header-buscador form{display:flex;width:100%;background:#fff;border-radius:6px;overflow:hidden;}
  .cc-header-buscador input[type=text]{flex:1;border:none;padding:10px 12px;font-size:0.95em;min-width:0;}
  .cc-header-buscador input[type=text]:focus{outline:2px solid var(--cc-acento);outline-offset:-2px;}
  .cc-header-buscador button{display:inline-flex;align-items:center;justify-content:center;min-width:44px;border:none;background:var(--cc-acento);color:#fff;cursor:pointer;}
}
/* AGREGADO (v0.6.22, Seccion 6): filtro compacto de DISPONIBILIDAD.
   Es una casilla nativa dentro del mismo <form> del buscador (viaja con
   q/categoria/marca en un solo envio), presentada como "chip" para que
   ocupe poco y sea comoda para el pulgar: 44 px de alto minimo, como
   exige la especificacion. Sin JavaScript y sin ninguna libreria. */
.cc-filtro-disponible{
  display:inline-flex;align-items:center;gap:8px;
  min-height:44px;padding:8px 14px;
  border:1px solid #ddd;border-radius:22px;background:#fff;
  font-size:0.95em;font-weight:600;cursor:pointer;white-space:nowrap;
}
.cc-filtro-disponible input{width:20px;height:20px;margin:0;flex:0 0 auto;accent-color:var(--cc-acento);}
.cc-filtro-disponible:has(input:checked){border-color:var(--cc-acento);background:#f0f8f5;color:var(--cc-acento);}
.cc-filtro-disponible input:focus-visible{outline:3px solid rgba(0,0,0,.25);outline-offset:2px;}
.cc-contenido{max-width:1100px;margin:0 auto;padding:24px 16px 60px;}
.cc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px;}
.cc-card{background:#fff;border:1px solid #e6e6e6;border-radius:10px;overflow:hidden;display:flex;flex-direction:column;}
.cc-card-img{width:100%;aspect-ratio:1/1;object-fit:cover;background:#f0f0f0;display:block;}
.cc-card-body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:2px;flex:1;}
.cc-card-nombre{font-weight:700;margin:0;font-size:0.98em;}
.cc-card-meta{font-size:0.78em;color:#666;margin:0;}
.cc-card-precio{margin:6px 0 0;font-weight:800;font-size:1.05em;color:var(--cc-acento);}
.cc-card-precio-tachado{text-decoration:line-through;color:#999;font-weight:400;font-size:0.85em;margin-right:6px;}
.cc-card-precio-consultar{font-weight:700;font-size:0.95em;color:var(--cc-secundario);}
.cc-card-precio-bs{margin:0;font-size:0.78em;font-weight:400;color:#666;}
.cc-tasa-bcv{max-width:1100px;margin:8px auto 0;padding:0 16px;font-size:0.82em;color:#666;}
.cc-card-estado{font-size:0.78em;font-weight:700;text-align:center;margin:6px 0 0;}
.cc-card-disponibilidad{font-size:0.78em;font-weight:700;margin:4px 0 0;}
.cc-disponibilidad-ok{color:#198754;}
.cc-disponibilidad-poco{color:#b8860b;}
.cc-disponibilidad-agotado{color:#c0392b;}
.cc-disponibilidad-puntos{display:inline-flex;gap:4px;vertical-align:middle;margin-left:3px;}
.cc-punto{width:11px;height:11px;border-radius:50%;background:#d8dde3;display:inline-block;}
.cc-punto-verde{background:#55dc91;}.cc-punto-amarillo{background:#f4db63;}.cc-punto-rojo{background:#ff6541;}
.cc-card-agregar{
  /* CORREGIDO (v0.6.22, Seccion 6): "objetivos tactiles de minimo
     44x44 px". El boton "Agregar" de la tarjeta media unos 37 px de alto
     (padding 9 px + linea de texto), por debajo del minimo exigido, y es
     precisamente el boton que mas se pulsa en toda la tienda desde un
     telefono. Se le fija min-height:44px sin cambiar su aspecto en
     computadora (donde ya se veia mas alto por el padding de la regla de
     abajo). */
  margin-top:8px;width:100%;min-height:44px;padding:9px;
  background:var(--cc-acento);color:#fff;border:none;border-radius:6px;
  font-weight:700;cursor:pointer;
}
.cc-card-agotado{color:#c0392b;}
.cc-card-opciones{color:#666;}
.cc-bloque{max-width:1100px;margin:0 auto;padding:20px 16px 0;}
.cc-bloque-titulo{margin:0 0 12px;font-size:1.15em;}
.cc-destacados-fila{display:flex;gap:16px;overflow-x:auto;padding-bottom:4px;}
.cc-destacados-fila .cc-card{flex:0 0 190px;}
.cc-chip-grid{display:flex;flex-wrap:wrap;gap:8px;}
.cc-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 14px !important;font-size:.9rem;}
.cc-cat-ico{flex:none;opacity:.8;}
.cc-chip{
  /* CORREGIDO (v0.6.22, Seccion 6): los "chips" de categoria y marca
     medían 34 px de alto (medido con navegador real). Son enlaces de
     navegacion que se pulsan con el pulgar: deben cumplir los 44 px. */
  display:inline-flex;align-items:center;justify-content:center;
  min-height:38px;min-width:38px;
  background:#fff;border:1px solid #e0e0e0;border-radius:22px;padding:6px 14px;
  text-decoration:none;color:var(--cc-texto);font-size:0.9em;font-weight:600;
}
.cc-chip:hover{border-color:var(--cc-acento);}
.cc-faq-item{border-bottom:1px solid #e6e6e6;padding:12px 0;}
.cc-faq-pregunta{
  /* CORREGIDO (v0.6.22, Seccion 6): la pregunta desplegable medía 19 px de
     alto (medido con navegador real por tests/prueba_responsive_v0622.mjs).
     Es el elemento que hay que PULSAR para abrir la respuesta: minimo
     tactil de 44 px. */
  display:flex;align-items:center;
  min-height:44px;
  margin:0;font-weight:700;cursor:pointer;list-style:none;
}
.cc-faq-pregunta::-webkit-details-marker{display:none;}
.cc-faq-pregunta::before{content:"+ ";color:var(--cc-acento);font-weight:800;}
details[open] .cc-faq-pregunta::before{content:"– ";}
.cc-faq-respuesta{margin:8px 0 0;color:#444;line-height:1.5;}
.cc-footer{background:var(--cc-secundario);color:var(--cc-primario);margin-top:32px;padding:26px 16px;}
.cc-footer-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;}
.cc-footer-inner h3{margin:0 0 6px;font-size:0.95em;text-transform:uppercase;letter-spacing:.05em;color:var(--cc-acento);}
.cc-footer-inner p{margin:0;opacity:.9;line-height:1.5;}
/* CORREGIDO (v0.6.22, Seccion 6): los enlaces del pie (WhatsApp,
   Instagram y "Consultar el estado de mi pedido") medían entre 19 y 43 px
   de alto. Son enlaces de accion, no texto corrido: se les da el minimo
   tactil de 44 px en cualquier ancho. */
.cc-footer-inner a{display:inline-flex;align-items:center;min-height:44px;}
.cc-mapa-btn{
  /* CORREGIDO (v0.6.22, Seccion 6): medía 32 px de alto. */
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;min-width:44px;
  margin-top:8px;background:var(--cc-acento);color:#fff;padding:8px 14px;
  border-radius:6px;text-decoration:none;font-weight:700;font-size:0.85em;
}

/* AGREGADO: banner informativo de Cashea ("Contenido y bloques de la
   tienda", interruptor cashea_activo). Puramente informativo -- no es un
   metodo de pago real, solo un aviso de que el cliente puede pagar con
   Cashea. Fijo arriba de TODA la pagina (fuera de cc-header, antes de
   ella en el HTML), igual en telefono y computadora. Mismo diseño que ya
   usa el proyecto TUCUAM para este mismo banner: fondo amarillo #fff200,
   texto negro, sin depender de ningun color de tema del comercio (para
   que siempre se reconozca como la marca Cashea, no la del comercio). */
.cc-cashea-banner{
  width:100%;min-height:40px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:7px 16px;
  background:#fff200;color:#111111;
  border-bottom:1px solid #e3da00;
  text-align:center;font-size:12px;line-height:1.25;font-weight:700;
}
.cc-cashea-logo{color:#111111;font-size:18px;font-weight:900;letter-spacing:-.7px;text-transform:lowercase;}
.cc-cashea-separator{color:#111111;font-size:16px;font-weight:900;}
.cc-cashea-text{color:#111111;font-size:12px;font-weight:700;}

/* AGREGADO ("video horizontal opcional de la tienda"): bloque
   ".cc-bloque" reutilizado (mismo ancho/margenes que "Productos
   destacados", "Compra por categoria", etc. -- se adapta solo a 1200px
   en la plantilla "repuestos" por la regla ya existente mas abajo). La
   "fachada" (".cc-video-facade") es lo unico nuevo: una miniatura (o un
   fondo generico, si la plataforma no tiene miniatura publica, ver
   Core\VideoEmbed) con un boton de reproducir superpuesto. El video
   real (iframe) NUNCA se pide al cargar la pagina -- el script de mas
   abajo solo lo crea cuando el cliente hace clic o presiona Enter/Espacio
   sobre la fachada, para no hacer mas lenta la tienda con un video que
   tal vez nadie reproduzca. */
.cc-video-facade{
  position:relative;width:100%;aspect-ratio:16/9;
  border-radius:12px;overflow:hidden;background:#111;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;border:none;padding:0;
}
.cc-video-facade img{width:100%;height:100%;object-fit:cover;display:block;}
.cc-video-facade-fondo{position:absolute;inset:0;background:linear-gradient(135deg,var(--cc-secundario),var(--cc-acento));}
.cc-video-play{
  position:relative;z-index:1;
  width:64px;height:64px;border-radius:50%;
  background:rgba(0,0,0,.55);color:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:background-color .15s ease;
}
.cc-video-facade:hover .cc-video-play,.cc-video-facade:focus-visible .cc-video-play{background:var(--cc-acento);}
.cc-video-play svg{width:26px;height:26px;margin-left:3px;}
.cc-video-facade:focus-visible{outline:3px solid var(--cc-acento);outline-offset:3px;}
.cc-video-facade iframe{width:100%;height:100%;border:0;display:block;}

/* AGREGADO (v0.6.4): apariencia del carrito flotante (carrito.js ya no
   trae "style" inline para el boton ni para el cuerpo del panel -- ver
   ese archivo). Estos valores son EXACTAMENTE los mismos que antes
   llevaba el "style" inline: ningun comercio en la plantilla general
   cambia de aspecto con este cambio. */
.cc-carrito-boton{position:fixed;bottom:16px;right:16px;background:#0a58ca;color:#fff;border:none;border-radius:999px;padding:14px 20px;font-size:1em;box-shadow:0 2px 8px rgba(0,0,0,.25);z-index:1000;cursor:pointer;}
/* CORREGIDO (v0.6.6, correccion puntual de visualizacion del carrito de la
   plantilla "repuestos"): se agrega "color:var(--cc-texto)" EXPLICITO a
   ".cc-carrito-panel" -- antes este texto dependia de heredar el color
   desde un ancestro en el DOM (normalmente el body, que ya usa
   var(--cc-texto)). Eso funcionaba bien en la plantilla general (donde
   "#cc-carrito-flotante" vive al final del body, fuera de la cabecera),
   pero en la plantilla "repuestos" (v0.6.5) ese mismo contenedor se movio
   DENTRO de la cabecera (header.cc-header) para resolver la superposicion
   con "Contactar por WhatsApp", y la cabecera fija "color:var(--cc-primario)"
   (blanco, para Repuestos M&X) -- por eso el nombre de producto, la
   cantidad y el total del panel se veian blancos sobre fondo blanco
   ("invisibles"). Declarar el color aqui, en la propia clase del panel, en
   vez de depender de donde vive el panel en el DOM, corrige ese problema
   de raiz y de paso hace el panel a prueba de futuros cambios de
   ubicacion. Para la plantilla general esto NO cambia nada visible: el
   valor calculado ya era exactamente var(--cc-texto) por herencia. */
.cc-carrito-panel{position:fixed;bottom:70px;right:16px;width:min(340px,90vw);max-height:70vh;overflow:auto;background:#fff;color:var(--cc-texto);border:1px solid #ddd;border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,.2);padding:12px;z-index:1000;}
.cc-carrito-cerrar{display:none;}
.cc-carrito-vacio{margin:0;color:#666;}
.cc-carrito-titulo{margin:0 0 8px;font-weight:bold;color:var(--cc-texto);}
.cc-carrito-linea{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:6px 0;border-bottom:1px solid #eee;}
.cc-carrito-linea-img{width:44px;height:44px;object-fit:cover;border-radius:10px;background:#f1f5f9;flex:0 0 auto;}
.cc-carrito-linea-info{flex:1;}
.cc-carrito-linea-nombre{font-size:0.9em;color:var(--cc-texto);}
.cc-carrito-linea-precio{font-size:0.8em;color:#666;}
.cc-carrito-linea-acciones{display:flex;align-items:center;gap:4px;}
.cc-carrito-linea-acciones .cc-cant-menos,.cc-carrito-linea-acciones .cc-cant-mas{width:26px;}
.cc-carrito-linea-cantidad{min-width:20px;text-align:center;color:var(--cc-texto);}
.cc-linea-eliminar{margin-left:6px;color:#c00;border:none;background:none;cursor:pointer;}
.cc-carrito-total{margin:10px 0 0;font-weight:bold;text-align:right;color:var(--cc-texto);}
.cc-carrito-total-nota{margin:2px 0 10px;font-size:0.75em;color:#888;text-align:right;}
.cc-carrito-cotizar-aviso{margin:10px 0 0;font-weight:bold;text-align:right;color:var(--cc-texto);}
.cc-carrito-ir-pagar{display:block;text-align:center;background:#198754;color:#fff;padding:10px;border-radius:6px;text-decoration:none;}


/* AGREGADO (v0.6.4, "plantilla repuestos"): capa responsive exclusiva de
   esta plantilla. Reutiliza las mismas variables de color --cc-* que ya
   calcula este archivo desde comercios.tema (para Repuestos M&X:
   negro/blanco/naranja, ver seed_008_repuestosmx.sql) -- no inventa
   colores nuevos. Nada de lo de aqui abajo cambia la logica de datos de
   la pagina: solo su presentacion, y solo cuando
   comercios.plantilla_visual = 'repuestos' para ESTE comercio.

   CORREGIDO (v0.6.5, correccion de interfaz sobre la v0.6.4): esta
   version reescribe por completo la cabecera de computadora (el boton
   de carrito se superponia con "Contactar por WhatsApp" porque ambos
   usaban "position:fixed" en la misma esquina), la navegacion inferior
   de telefono (ahora botones tipo capsula con icono, en vez de texto
   pequeño), el panel de filtros de telefono (el checkbox quedaba
   visible sin querer) y el z-index del carrito en telefono (debe quedar
   por encima de la cabecera y de la barra inferior). Ningun dato ni
   logica de negocio cambia en esta correccion -- ver README para el
   detalle punto por punto. */
.cc-header-fila{max-width:1200px;}
.cc-hero{padding:20px 16px 28px;}
.cc-hero h1{font-size:1.35em;}
.cc-buscador{margin-top:-16px;}
.cc-contenido,.cc-bloque,.cc-tasa-bcv,.cc-footer-inner,.cc-header-fila,.cc-hero-inner{max-width:1200px;}
.cc-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
@media (min-width:640px){.cc-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;}}
.cc-card{border-radius:12px;position:relative;}
.cc-card-agregar{padding:11px;}

/* AGREGADO (v0.6.8, "productos destacados"): insignia superior naranja
   "DESTACADO", solo sobre la tarjeta de un producto que el comerciante
   marco como tal desde /panel/items (ver Core\CatalogoItemRender::tarjeta(),
   que decide cuando imprimir esta insignia -- nunca por su cuenta, solo
   cuando items.destacado = 1 para ESE producto). Se dibuja sobre la
   esquina superior izquierda de la tarjeta, encima de la foto, sin tapar
   el nombre ni el precio (que quedan debajo, en "cc-card-body"). Solo
   existe en esta plantilla: la general no la pidio y no la muestra
   (Core\CatalogoItemRender::tarjeta() nunca la imprime fuera de
   "repuestos", ver ese archivo). */
.cc-card-destacado-insignia{
  position:absolute;top:8px;left:8px;z-index:1;
  background:var(--cc-acento);color:#1a1a1a;
  font-size:0.68em;font-weight:800;letter-spacing:.03em;
  padding:4px 9px;border-radius:4px;
  box-shadow:0 1px 4px rgba(0,0,0,.25);
  pointer-events:none;
}

/* CORREGIDO (v0.6.5): cabecera de computadora -- "Contactar por
   WhatsApp" y el carrito ahora viven DENTRO del flujo normal de la
   cabecera (un contenedor "cc-header-acciones" alineado a la derecha,
   con separacion visible entre ambos), en vez de que el carrito flotara
   con "position:fixed" en la misma esquina que el boton de WhatsApp.
   El elemento "#cc-carrito-flotante" (el mismo de siempre, con la misma
   logica de carrito.js) se ubica DENTRO de la cabecera solo para esta
   plantilla -- ver el HTML mas abajo; en la plantilla general sigue
   exactamente en su lugar de siempre (al final del body). */
.cc-header-acciones{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.cc-header-acciones .cc-contacto-btn{display:inline-flex;align-items:center;min-height:44px;}
/* AGREGADO ("acceso a Consultar pedido desde la cabecera de
   computadora"): mismo motivo que el boton "Pedido" de la botonera de
   telefono -- en computadora el enlace solo vivia en el pie de pagina,
   y alguien que no baja hasta el final nunca lo encuentra. Estilo
   secundario (borde claro, fondo transparente) a proposito: no debe
   competir visualmente con WhatsApp (la accion principal, boton solido)
   ni con el Carrito, solo estar ahi, visible, para quien lo necesite. */
.cc-pedido-header-btn{
  display:inline-flex;align-items:center;gap:6px;
  min-height:44px;
  color:var(--cc-primario);
  border:2px solid rgba(255,255,255,.4);
  border-radius:8px;
  padding:8px 14px;
  text-decoration:none;
  font-weight:700;font-size:0.85em;
  white-space:nowrap;
}
.cc-pedido-header-btn:hover{border-color:var(--cc-acento);}
.cc-pedido-header-btn svg{flex:none;}
/* WhatsApp conserva su color naranja de siempre (.cc-contacto-btn ya usa
   var(--cc-acento), sin cambios). El carrito usa fondo oscuro (el mismo
   de la cabecera) con borde naranja, para distinguirse sin competir con
   el naranja solido de WhatsApp. */
.cc-carrito-header .cc-carrito-boton{
  position:static;
  display:inline-flex;align-items:center;gap:8px;
  min-height:44px;
  background:var(--cc-secundario);
  color:var(--cc-primario);
  border:2px solid var(--cc-acento);
  border-radius:8px;
  padding:8px 14px;
  font-size:0.85em;
  box-shadow:none;
}
.cc-carrito-header .cc-carrito-boton::before{
  content:"";
  width:18px;height:18px;flex:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.4'/%3E%3Ccircle cx='18' cy='20' r='1.4'/%3E%3Cpath d='M2 3h2l2.6 12.2a2 2 0 0 0 2 1.6h8.8a2 2 0 0 0 2-1.6L21 7H6'/%3E%3C/svg%3E");
  background-size:contain;background-repeat:no-repeat;background-position:center;
}

/* CORREGIDO (v0.6.5): filtros de categoria/marca en telefono -- el
   checkbox nativo que controla el panel desplegable ahora queda oculto
   SIEMPRE (antes solo se ocultaba dentro de la consulta de telefono; en
   computadora quedaba visible como un checkbox suelto junto al
   buscador). El boton "Filtros" ahora lleva un icono, y el panel
   desplegable de telefono se ve como una tarjeta clara al abrirse. */
#cc-filtros-toggle{position:absolute;opacity:0;width:0;height:0;pointer-events:none;}
.cc-filtros-boton{display:none;}
.cc-filtros-boton svg{flex:none;}
@media (max-width:640px){
  .cc-buscador form{flex-direction:column;align-items:stretch;}
  .cc-buscador input[type=text]{flex:none;min-height:44px;}
  .cc-filtro-disponible{width:100%;justify-content:flex-start;}
  .cc-filtros-boton{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;text-align:left;background:#fff;border:1px solid #ddd;border-radius:6px;padding:10px;font-weight:700;cursor:pointer;color:var(--cc-texto);}
  .cc-filtros-campos{display:none;flex-direction:column;gap:8px;margin-top:8px;padding:10px;background:#fff;border:1px solid #eee;border-radius:8px;}
  .cc-filtros-campos select,.cc-filtros-campos button{min-height:44px;}
  #cc-filtros-toggle:checked ~ .cc-filtros-boton{border-color:var(--cc-acento);color:var(--cc-acento);}
  #cc-filtros-toggle:checked ~ .cc-filtros-campos{display:flex;}
}

/* CORREGIDO (v0.6.5): navegacion inferior fija de telefono -- ahora es
   una sola botonera de 5 botones tipo capsula (icono + etiqueta corta),
   con separacion visible entre ellos, alto minimo de 64px, area tactil
   minima de 44x44 por boton, y respeta la zona segura inferior del
   telefono (safe-area-inset-bottom) para no quedar debajo de los
   controles del sistema operativo. El boton activo (la seccion en la
   que ya esta el usuario) se distingue con fondo naranja y texto de
   alto contraste; los demas usan un fondo oscuro translucido sobre la
   misma cabecera oscura, manteniendo la identidad negro/blanco/naranja. */
.cc-nav-inferior{display:none;}
@media (max-width:640px){
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom) + 14px);} /* deja sitio a la botonera fija -- solo hace falta en telefono, donde la botonera existe */
  .cc-nav-inferior{
    display:flex;gap:4px;
    position:fixed;left:0;right:0;bottom:0;z-index:1002;
    min-height:64px;
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    background:var(--cc-secundario);
    border-top:1px solid rgba(255,255,255,.15);
  }
  .cc-nav-inferior a,.cc-nav-inferior button,.cc-nav-inferior label{
    /* CORREGIDO: el boton "Categorias" de esta barra es un <label> (para
       poder abrir/cerrar el panel con un checkbox nativo, sin JS), pero
       este selector nunca lo incluyo -- se veia mas angosto y sin la
       misma capsula oscura que el resto de botones de la barra. Se
       agrega "label" al selector: mismo tamaño, forma y area tactil que
       los demas, sin cambiar su funcionamiento (sigue siendo el mismo
       <label for="cc-categorias-toggle">, con el mismo checkbox detras). */
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    min-width:44px;min-height:44px;
    background:rgba(255,255,255,.08);
    border:none;border-radius:10px;
    color:var(--cc-primario);
    /* CORREGIDO (agregado del boton "Pedido", botonera de 6 accesos en
       vez de 5): con letra un poco mas chica (antes 0.68em) cada boton
       sigue teniendo espacio comodo, sin bajar del minimo tactil de
       44x44px -- probado hasta 320px de ancho de pantalla. */
    font-size:0.6em;font-weight:700;line-height:1.15;
    padding:6px 1px;cursor:pointer;font-family:inherit;text-decoration:none;
  }
  .cc-nav-inferior svg{width:19px;height:19px;flex:none;}
  .cc-nav-inferior [aria-current="page"]{background:var(--cc-acento);color:#1a1a1a;}
  /* El boton flotante de siempre (ahora dentro de la cabecera, ver mas
     arriba) queda redundante con "Carrito" en la barra inferior -- se
     oculta en telefono para esta plantilla; en computadora sigue
     visible dentro de la cabecera (ver regla de mas abajo). No se
     duplica ningun carrito: solo hay UN boton visible a la vez segun el
     ancho de pantalla. */
  .cc-carrito-header .cc-carrito-boton{display:none;}
  /* AGREGADO: mismo criterio que el carrito de arriba -- en telefono el
     boton "Pedido" ya vive en la botonera fija de abajo (ver mas abajo
     en este archivo), asi que esta copia de la cabecera se oculta para
     no duplicarlo. En computadora (min-width:641px, sin esta regla)
     sigue visible en la cabecera. */
  .cc-pedido-header-btn{display:none;}
}

/* CORREGIDO (v0.6.5): el panel del carrito debe quedar POR ENCIMA de la
   cabecera (z-index:10) y de la barra inferior (z-index:1002) cuando se
   abre en telefono -- antes heredaba el z-index:1000 de la regla
   general, que queda por DEBAJO de la barra inferior. La logica de
   apertura/cierre sigue siendo la misma de siempre (carrito.js); aqui
   solo cambia donde, como y por encima de que se ve el panel. */
.cc-carrito-panel{background:#fff;box-shadow:-6px 0 20px rgba(0,0,0,.25);border:none;padding:18px;z-index:2000;}
.cc-carrito-cerrar{display:block;position:absolute;top:10px;right:12px;width:32px;height:32px;border:none;background:#f0f0f0;border-radius:999px;font-size:1.2em;line-height:1;cursor:pointer;color:var(--cc-texto);}
@media (min-width:641px){
  /* Panel lateral completo en computadora, sin tapar el buscador ni la
     cabecera cuando esta CERRADO -- solo cubre el lado derecho mientras
     el propietario o el cliente lo tienen abierto, como cualquier panel
     lateral ("drawer"). */
  .cc-carrito-panel{top:0;right:0;bottom:auto;left:auto;height:100vh;max-height:100vh;width:min(400px,94vw);border-radius:0;}
}
@media (max-width:640px){
  .cc-carrito-panel{top:0;left:0;right:0;bottom:0;width:100%;max-height:100vh;height:100vh;border-radius:0;padding:64px 16px 16px;}
}

/* AGREGADO (v0.6.6, correccion puntual de visualizacion del carrito de la
   plantilla "repuestos"): controles de cantidad ("- 1 +") mas grandes y de
   mayor contraste, para que el numero central de unidades se lea con
   claridad -- solo para esta plantilla, sin tocar el tamaño de siempre en
   la plantilla general. */
.cc-carrito-linea-acciones .cc-cant-menos,.cc-carrito-linea-acciones .cc-cant-mas{
  width:32px;height:32px;border:1px solid #ccc;border-radius:6px;background:#f5f5f5;color:var(--cc-texto);font-weight:700;font-size:1em;cursor:pointer;
}
.cc-carrito-linea-cantidad{
  min-width:28px;font-size:1.1em;font-weight:800;color:var(--cc-texto);
}
.cc-carrito-linea-nombre{font-weight:600;}
.cc-linea-eliminar{font-weight:700;font-size:0.85em;padding:4px 6px;border-radius:4px;}

/* AGREGADO (v0.6.6): insignia (badge) circular con el numero total de
   unidades en el carrito, sobre el boton "Carrito" de la navegacion
   inferior de telefono. Reutiliza el mismo conteo real que ya calcula
   carrito.js (self.totalUnidades) -- ver el bloque agregado a render() en
   ese archivo; esta regla solo define la APARIENCIA de la insignia. Se
   oculta por completo mientras el carrito este vacio
   (".cc-carrito-badge-vacio"), para no mostrar un "0" permanente. */
#cc-nav-carrito{position:relative;}
.cc-carrito-badge{
  position:absolute;top:2px;right:calc(50% - 26px);
  min-width:16px;height:16px;padding:0 3px;
  background:var(--cc-acento);color:#1a1a1a;
  border-radius:999px;
  font-size:0.62em;font-weight:800;line-height:16px;text-align:center;
  box-shadow:0 0 0 2px var(--cc-secundario);
}
.cc-carrito-badge-vacio{display:none;}
/* El boton "Carrito" se destaca (fondo naranja) cuando tiene productos,
   igual que el boton activo de la navegacion, sin necesitar "aria-current"
   (que se reserva para indicar en que seccion esta el usuario). */
#cc-nav-carrito.cc-carrito-badge-activo{background:var(--cc-acento);color:#1a1a1a;}

/* CORREGIDO (v0.6.9, "correccion visual de categorias en telefono"):
   reemplaza las "categorias rapidas" de la v0.6.7 (una fila horizontal
   con scroll -- en la practica, quedaba cortada visualmente: varias
   categorias caian fuera de la vista inicial sin ninguna pista de que
   habia mas para desplazar). Ahora es un boton compacto "Categorias"
   que despliega, justo debajo de si mismo, un panel con TODAS las
   categorias visibles de una vez, en una cuadricula de 2 columnas -- sin
   scroll horizontal ni categorias escondidas, usable desde 320px de
   ancho. Se abre/cierra con un checkbox nativo + CSS (el mismo truco que
   ya usa "#cc-filtros-toggle" mas arriba), sin ninguna libreria. Sigue
   siendo SOLO otra forma de activar el mismo filtro de siempre
   (?categoria=): al elegir una categoria se recarga la pagina con ese
   parametro, lo que "cierra" el panel de forma natural (la pagina nueva
   vuelve a cargar con el checkbox sin marcar). En computadora no se
   muestra en absoluto: el <select> de categoria del buscador ya cumple
   esa funcion ahi. */
.cc-categorias-desplegable{display:none;}
#cc-categorias-toggle{position:absolute;opacity:0;width:0;height:0;pointer-events:none;}
@media (max-width:640px){
  .cc-categorias-desplegable{display:block;padding:0 16px 10px;margin-top:-4px;}
  .cc-categorias-boton{
    display:flex;align-items:center;gap:8px;width:100%;min-height:44px;
    text-align:left;background:#fff;border:1px solid #ddd;border-radius:6px;
    padding:10px;font-weight:700;cursor:pointer;color:var(--cc-texto);
  }
  .cc-categorias-boton svg{flex:none;}
  #cc-categorias-toggle:checked ~ .cc-categorias-boton{border-color:var(--cc-acento);color:var(--cc-acento);}
  .cc-categorias-panel{
    display:none;grid-template-columns:repeat(2,1fr);gap:8px;
    margin-top:8px;padding:10px;background:#fff;border:1px solid #eee;border-radius:8px;
  }
  #cc-categorias-toggle:checked ~ .cc-categorias-panel{display:grid;}
  .cc-categoria-capsula{
    display:flex;align-items:center;justify-content:center;text-align:center;
    background:#f5f5f5;border:1px solid #ddd;border-radius:999px;
    padding:8px 10px;min-height:40px;
    font-size:0.85em;font-weight:700;
    color:var(--cc-texto);text-decoration:none;
  }
  /* Categoria activa: fondo naranja, pedido explicitamente. */
  .cc-categoria-capsula-activa{background:var(--cc-acento);border-color:var(--cc-acento);color:#1a1a1a;}
  /* Si el nombre de una categoria es muy largo, ocupa las dos columnas
     de la cuadricula en vez de partirse o desbordar su celda. */
  .cc-categoria-capsula-ancha{grid-column:1 / -1;}
  /* "Productos destacados" respeta el maximo de 4 en telefono pedido
     explicitamente -- el controlador ya trae como maximo 6 (el limite de
     computadora, ver mas abajo), asi que aqui solo se ocultan los
     puestos 5 y 6 en pantallas pequeñas, sin pedir menos fotos de las
     que hacen falta para computadora. */
  .cc-destacados-fila .cc-card:nth-child(n+5){display:none;}
}

/* AGREGADO (v0.6.7): titulo de la seccion de resultados cuando hay una
   categoria, marca o busqueda activos (ver $tituloResultados en la
   vista) -- mismo tamaño y peso que el resto de titulos de bloque de
   esta pagina ("cc-bloque-titulo"), para que se vea como parte del mismo
   sistema visual. */
.cc-resultados-titulo{margin:0 0 14px;font-size:1.15em;font-weight:700;color:var(--cc-texto);}

/* AGREGADO (v0.6.7, "carga progresiva de catalogo"): boton "Ver mas
   productos", centrado debajo de la grilla, con area tactil comoda en
   telefono. */
.cc-ver-mas-envoltorio{display:flex;justify-content:center;margin-top:20px;}
.cc-ver-mas-boton{
  background:#fff;color:var(--cc-texto);
  border:2px solid var(--cc-acento);border-radius:8px;
  padding:12px 28px;min-height:44px;
  font-weight:700;font-size:0.95em;cursor:pointer;
}
.cc-ver-mas-boton:disabled{opacity:0.6;cursor:default;}


/* ==== MODERNIZACION VISUAL (01-10-2026) ====
   Solo presentacion: tarjetas con sombra suave y fotos mas grandes, cabecera compacta en telefono,
   categorias en una fila deslizable, buscador tipo "pildora" y mejor jerarquia de precios.
   No cambia ninguna ruta, dato ni regla de negocio. */
:root{--cc-radio:14px;--cc-sombra:0 1px 2px rgba(16,24,40,.06),0 2px 8px rgba(16,24,40,.06);--cc-sombra-alta:0 6px 18px rgba(16,24,40,.14);}
body{-webkit-font-smoothing:antialiased;}
.cc-card{border:0;border-radius:var(--cc-radio);box-shadow:var(--cc-sombra);transition:box-shadow .18s ease,transform .18s ease;}
@media (hover:hover){.cc-card:hover{box-shadow:var(--cc-sombra-alta);transform:translateY(-2px);}}
.cc-card-img{aspect-ratio:1/1;object-fit:cover;background:linear-gradient(135deg,#f1f3f6,#e7ebf0);}
div.cc-card-img{position:relative;}
div.cc-card-img::after{content:"";position:absolute;inset:0;margin:auto;width:34px;height:34px;opacity:.35;background:no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23566' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3 7h4l2-3h6l2 3h4v12H3z'/><circle cx='12' cy='13' r='3.5'/></svg>");}
.cc-card-body{padding:10px 12px 8px;gap:3px;}
.cc-card-nombre{font-size:.96em;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.cc-card-meta{font-size:.76em;color:#6b7280;}
.cc-card-precio{font-size:1.2em;margin-top:6px;letter-spacing:-.01em;}
.cc-card-precio-bs{font-size:.74em;color:#6b7280;}
.cc-card-agregar{border-radius:10px;font-size:.95em;transition:filter .15s ease,transform .1s ease;}
.cc-card-agregar:active{transform:scale(.97);filter:brightness(.92);}
.cc-card-destacado-insignia{border-radius:999px;box-shadow:0 1px 3px rgba(0,0,0,.25);}
.cc-bloque-titulo,.cc-resultados-titulo{font-size:1.2em;font-weight:800;letter-spacing:-.01em;display:flex;align-items:center;gap:8px;}
.cc-bloque-titulo::before,.cc-resultados-titulo::before{content:"";width:4px;height:1.05em;border-radius:3px;background:var(--cc-acento);flex:none;}
.cc-chip{border-radius:999px;box-shadow:var(--cc-sombra);border-color:transparent;}
.cc-buscador form{border-radius:16px;box-shadow:0 4px 18px rgba(16,24,40,.16);}
.cc-buscador input[type=text]{border-radius:12px;border-color:#e3e7ec;background:#f8fafc;}
.cc-buscador button,.cc-filtro-disponible,.cc-buscador select{border-radius:12px;}
.cc-ver-mas-boton{border-radius:999px;box-shadow:var(--cc-sombra);}
.cc-banner{border-radius:18px;box-shadow:var(--cc-sombra);}
.cc-footer{border-radius:22px 22px 0 0;}
@media (max-width:640px){
  /* Cabecera compacta: nombre a la izquierda, WhatsApp pequeno a la derecha (antes ocupaba dos filas) */
  .cc-header{padding:8px 12px;}
  .cc-header-fila{flex-wrap:nowrap;gap:8px;}
  .cc-marca{min-width:0;flex:1 1 auto;}
  .cc-marca-nombre{font-size:1.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .cc-marca img{height:34px;width:34px;}
  .cc-header-acciones{flex:0 0 auto;flex-wrap:nowrap;gap:6px;}
  .cc-contacto-btn,.cc-header-acciones .cc-contacto-btn{min-height:38px;padding:0 12px;font-size:.82em;border-radius:999px;}
  .cc-hero{padding:14px 16px 26px;}
  .cc-hero h1{font-size:1.2em;}
  .cc-hero p{font-size:.88em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .cc-banners{margin-top:10px;padding:0 12px;}
  .cc-banner{min-height:0;}
  .cc-banner img{height:clamp(150px,48vw,230px);}
  .cc-banner-capa{padding:16px;}
  .cc-banner-capa h2{font-size:1.2rem;margin-bottom:4px;}
  .cc-banner-capa p{font-size:.85rem;margin-bottom:10px;}
  .cc-banner-cta{padding:8px 14px;font-size:.85rem;}
  .cc-bloque{padding:16px 12px 0;}
  .cc-contenido{padding:16px 12px 90px;}
  /* Buscador: campo y boton Filtros en la misma fila */
  .cc-buscador{padding:0 12px;}
  .cc-buscador form{flex-direction:row !important;flex-wrap:wrap;align-items:center;padding:8px;gap:8px;}
  .cc-buscador input[type=text]{flex:1 1 0 !important;min-width:0;}
  .cc-filtros-boton{width:auto !important;flex:none;padding:0 14px !important;border-radius:12px !important;}
  .cc-filtros-campos{flex-basis:100%;}
  /* Categorias: una sola fila deslizable, siempre visible */
  .cc-categorias-desplegable{padding:0 0 4px;margin:10px 0 0;}
  .cc-categorias-boton{display:none !important;}
  .cc-categorias-panel{display:flex !important;flex-wrap:nowrap;overflow-x:auto;gap:8px;padding:2px 12px 8px !important;margin:0 !important;background:transparent !important;border:0 !important;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
  .cc-categorias-panel::-webkit-scrollbar{display:none;}
  .cc-categoria-capsula{flex:0 0 auto;grid-column:auto !important;background:#fff;border:0;box-shadow:var(--cc-sombra);padding:8px 16px;white-space:nowrap;}
  .cc-categoria-capsula-activa{box-shadow:none;}
  /* Tarjetas compactas: menos texto secundario, foto protagonista */
  .cc-grid{gap:10px !important;}
  .cc-card-body .cc-card-meta ~ .cc-card-meta{display:none;}
  .cc-card-body{padding:8px 10px 6px;}
  .cc-card-agregar{margin:0 10px 10px !important;width:calc(100% - 20px) !important;min-height:42px;}
  .cc-card-opciones{margin:0 0 10px !important;font-size:.76em;}
  .cc-tasa-bcv{padding:0 12px;}
}