*{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;}



/* ==== 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;}
}