/* ─────────────────────────────────────────────────────────────────────────
   Catálogo (views/catalogo/content.php + sidebar*.php + cls/paginacionCatalogo.php).

   Se carga DESPUÉS de main.css y solo toca `#catalogo:not(.simple)`: la ficha
   de producto (`#catalogo.simple`) no cambia. Lo de escritorio va dentro de
   `min-width:1023px` porque por debajo main.css convierte la barra lateral en
   un panel modal (`.catalogo-sidebar.modal`) y esa mecánica no se toca.
   ───────────────────────────────────────────────────────────────────────── */

#catalogo:not(.simple){
  --cv-navy:#0D3C61; --cv-azul:#0795C4; --cv-btn:#1467B3;
  --cv-borde:#DCE6EE; --cv-suave:#EEF4F9; --cv-txt:#4A5868;
  border-top:0; padding:16px 15px 90px; background:#fff;
}
/* Ancho completo: sin márgenes vacíos a los lados en pantallas grandes. */
#catalogo:not(.simple) .contenedor{ max-width:none; padding:0 clamp(12px,1.8vw,32px); box-sizing:border-box; }

/* Migas + «Mostrando 1 – 24 de N productos» */
#catalogo:not(.simple) .breadcrumb{
  display:flex; align-items:center; justify-content:space-between; gap:6px 16px; flex-wrap:wrap;
  font-size:14px;
}
#catalogo:not(.simple) .cat-count{ font-size:13px; color:#6B7A8C; white-space:nowrap; }

/* ── Barra lateral: tarjeta «Filtros» ─────────────────────────────────── */
#catalogo:not(.simple) .catalogo-sidebar{
  background:#fff; border:1px solid var(--cv-borde); border-radius:12px;
  box-shadow:0 2px 10px rgba(13,60,97,.06);
  font-size:14px; padding:0 0 8px; margin:0; color:var(--cv-txt);
}
#catalogo:not(.simple) .catalogo-sidebar:before{ display:none; }

.catalogo-sidebar .cs-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 16px; background:var(--cv-suave, #EEF4F9);
  border-radius:12px 12px 0 0; border-bottom:1px solid #DCE6EE;
}
.catalogo-sidebar .cs-head b{ font-size:17px; color:#0D3C61; }
.catalogo-sidebar .cs-limpiar{ font-size:12.5px; color:#0795C4; text-decoration:none; }
.catalogo-sidebar .cs-limpiar:hover{ text-decoration:underline; }

#catalogo:not(.simple) .catalogo-sidebar > span,
#catalogo:not(.simple) .catalogo-sidebar > .cargar-marcas > span{
  display:flex; align-items:center; justify-content:space-between;
  left:0; margin:0; padding:14px 16px 8px;
  font-size:14.5px; font-weight:700; color:#0D3C61; cursor:pointer; user-select:none;
  border-top:1px solid #E7EDF3;
}
#catalogo:not(.simple) .catalogo-sidebar > .cs-head + span{ border-top:0; }
#catalogo:not(.simple) .catalogo-sidebar > span i,
#catalogo:not(.simple) .catalogo-sidebar > .cargar-marcas > span i{ margin:0; transition:transform .2s; }
.catalogo-sidebar span.cs-cerrado i{ transform:rotate(180deg); }
.catalogo-sidebar .cs-oculto{ display:none !important; }

#catalogo:not(.simple) .catalogo-sidebar > ul,
#catalogo:not(.simple) .catalogo-sidebar > .cargar-marcas > ul{ padding:0 16px 12px; color:var(--cv-txt); }
#catalogo:not(.simple) .catalogo-sidebar > ul li,
#catalogo:not(.simple) .catalogo-sidebar > .cargar-marcas > ul li{
  display:flex; align-items:center; gap:9px; padding:4px 0;
  white-space:normal; overflow:visible;
}
#catalogo:not(.simple) .catalogo-sidebar > ul li label,
#catalogo:not(.simple) .catalogo-sidebar > .cargar-marcas > ul li label{
  top:0; padding:0; color:var(--cv-txt); font-size:14px; line-height:1.25;
}
#catalogo:not(.simple) .catalogo-sidebar > ul li label:hover,
#catalogo:not(.simple) .catalogo-sidebar > .cargar-marcas > ul li label:hover{ color:#0D3C61; }
.catalogo-sidebar ul li.cs-fuera{ display:none !important; }

/* Casilla: cuadro con borde, azul al marcar */
.catalogo-sidebar .checkbox{
  width:18px; height:18px; border:1.5px solid #B8C6D3; border-radius:4px; box-shadow:none; background:#fff;
}
.catalogo-sidebar .checkbox:checked{ background:#0795C4; border-color:#0795C4; }
.catalogo-sidebar .checkbox-wrapper svg{ width:12px; height:12px; left:3px; top:calc(50% - 6px); }

/* Buscador de marcas y «Ver más» (los pone catalogo-v3.js) */
.catalogo-sidebar .cs-buscar{ padding:0 16px 8px; }
.catalogo-sidebar .cs-buscar input{
  width:100%; height:34px; box-sizing:border-box; padding:0 10px 0 32px;
  border:1px solid #D5DFE8; border-radius:8px; font-size:13.5px; color:#0D3C61; outline:0;
  background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a9bb0' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>") no-repeat 9px center/16px;
}
.catalogo-sidebar .cs-buscar input:focus{ border-color:#0795C4; box-shadow:0 0 0 3px rgba(7,149,196,.14); }
.catalogo-sidebar .cs-mas{ display:block; padding:0 16px 12px; font-size:13px; color:#0795C4; text-decoration:none; cursor:pointer; }
.catalogo-sidebar .cs-mas[hidden]{ display:none; }
.catalogo-sidebar .cs-mas:hover{ text-decoration:underline; }

/* Precio */
#catalogo:not(.simple) .catalogo-sidebar .slider{ width:auto; padding:6px 20px 16px; }
#catalogo:not(.simple) .catalogo-sidebar .slider .price-input{ height:auto; margin:14px 0 0; gap:6px; }
#catalogo:not(.simple) .catalogo-sidebar .slider .price-input > div:not(.separator){ height:auto; }
#catalogo:not(.simple) .catalogo-sidebar .slider .price-input > div input{
  padding:7px 4px; border:1px solid #D5DFE8; border-radius:6px; font-size:12.5px; color:#0D3C61;
}
#catalogo:not(.simple) .catalogo-sidebar .slider .price-input > div.separator{ width:14px; }

/* ── Barra: ordenar · vista · mostrar ─────────────────────────────────── */
#catalogo:not(.simple) .catalogo-content .filtros{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:0 0 16px; }
#catalogo:not(.simple) .catalogo-content .filtros > span{ margin:0; font-size:14px; font-weight:700; color:#0D3C61; }
#catalogo:not(.simple) .catalogo-content .filtros select{
  height:38px; padding:0 30px 0 12px; border:1px solid #D5DFE8; border-radius:8px;
  background-color:#fff; color:#0D3C61; font-size:14px; outline:0; cursor:pointer;
}
#catalogo:not(.simple) .catalogo-content .filtros select:focus{ border-color:#0795C4; }
#catalogo:not(.simple) .catalogo-content .filtros .cat-tools{ margin:0 0 0 auto; display:flex; align-items:center; gap:10px; }
.cat-vista{ display:inline-flex; gap:4px; }
.cat-vista button{
  width:34px; height:34px; padding:0; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid transparent; border-radius:8px; background:transparent; color:#7c8fa3; cursor:pointer;
}
.cat-vista button svg{ width:18px; height:18px; }
.cat-vista button[aria-pressed="true"]{ background:#E4F1FA; color:#1467B3; border-color:#BFDDF1; }
.cat-vista button:hover{ color:#1467B3; }
#catalogo:not(.simple) .catalogo-content .filtros .cat-mostrar{ font-weight:600; color:#4A5868; }

/* ── Tarjetas ──────────────────────────────────────────────────────────── */
/* Tarjetas más anchas (máx. ~6 por fila en pantalla grande): menos hueco en la última fila. */
.productos.productos-v2{ grid-template-columns:repeat(auto-fill,minmax(235px,1fr)); gap:18px; }
.productos-v2 .tc{ border-color:#E3EAF1; border-radius:12px; }
.productos-v2 .tc-img .iconos.agregado-a-cesta-1{ top:auto; bottom:10px; right:10px; }
.productos-v2 .tc-tag{ top:12px; left:12px; font-size:11.5px; padding:3px 9px; }
.productos-v2 .tc-fav{
  position:absolute; top:8px; right:8px; z-index:4; width:34px; height:34px; padding:0;
  display:flex; align-items:center; justify-content:center;
  border:0; border-radius:50%; background:transparent; color:#0D3C61; cursor:pointer; transition:transform .15s;
}
.productos-v2 .tc-fav svg{ width:20px; height:20px; }
.productos-v2 .tc-fav:hover{ transform:scale(1.12); }
.productos-v2 .tc-fav[aria-pressed="true"]{ color:#E5484D; }
.productos-v2 .tc-fav[aria-pressed="true"] svg{ fill:currentColor; }
.productos-v2 .tc-add{
  background:#1467B3; border-color:#1467B3; color:#fff; font-size:13.5px;
}
.productos-v2 .tc-add:before{
  content:""; width:17px; height:17px; flex:none;
  background:url("data:image/svg+xml;utf8,<svg 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'><path d='M3 4h2.2l2.1 10.2a1.6 1.6 0 0 0 1.6 1.3h8.2a1.6 1.6 0 0 0 1.6-1.2L20.5 8H6.2'/><circle cx='9.5' cy='19.5' r='1.3'/><circle cx='17' cy='19.5' r='1.3'/></svg>") no-repeat center/contain;
}
.productos-v2 .tc-add:hover{ background:#0D3C61; border-color:#0D3C61; color:#fff; }
.productos-v2 .tc-add.agregado{ background:#0D3C61; border-color:#0D3C61; }

/* Vista de lista */
.cargar-datos.vista-lista .productos.productos-v2{ grid-template-columns:1fr; gap:12px; }
.cargar-datos.vista-lista .productos-v2 .tc{ flex-direction:row; align-items:stretch; }
.cargar-datos.vista-lista .productos-v2 .tc-img{ flex:0 0 220px; aspect-ratio:auto; min-height:160px; }
.cargar-datos.vista-lista .productos-v2 .tc-body{ justify-content:center; padding:16px 20px; }
.cargar-datos.vista-lista .productos-v2 .tc-precio{ margin-top:8px; }
.cargar-datos.vista-lista .productos-v2 .tc-add{ align-self:center; margin:0 20px 0 0; padding:10px 18px; white-space:nowrap; }

/* ── Escritorio: barra lateral fija a la izquierda ─────────────────────── */
@media all and (min-width:1023px){
  #catalogo:not(.simple) .contenedor .content{ display:flex; align-items:flex-start; gap:24px; padding-top:14px; }
  #catalogo:not(.simple) .contenedor .content:after{ display:none; }
  /* La barra queda a la vista al bajar: no deja un hueco en blanco a la izquierda. */
  #catalogo:not(.simple) .catalogo-sidebar{
    float:none; flex:0 0 264px; width:264px;
    position:sticky; top:12px; max-height:calc(100vh - 24px); overflow-y:auto;
  }
  #catalogo:not(.simple) .catalogo-content:not(.without-sidebar){ margin:0; flex:1 1 0; min-width:0; overflow:visible; }
  #catalogo:not(.simple) .catalogo-content .filtros .show-1022{ display:none; }
}

@media all and (max-width:699px){
  .productos.productos-v2{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .productos-v2 .tc-add{ font-size:12px; gap:6px; padding:8px 6px; }
  .productos-v2 .tc-add span{ white-space:nowrap; }
  .productos-v2 .tc-add:before{ width:15px; height:15px; }
  #catalogo:not(.simple) .catalogo-content .filtros{ gap:8px; }
  #catalogo:not(.simple) .catalogo-content .filtros .cat-tools{ margin-left:0; width:100%; justify-content:space-between; }
  .cargar-datos.vista-lista .productos-v2 .tc{ flex-direction:column; }
  .cargar-datos.vista-lista .productos-v2 .tc-img{ flex:none; aspect-ratio:5/4; }
  .cargar-datos.vista-lista .productos-v2 .tc-add{ align-self:stretch; margin:8px 12px 12px; }
}