/* =============================================================================
   componentes/filtros.css — Controles del listado
   -----------------------------------------------------------------------------
   Orden (componentes/_orden.php), filtro de marcas con su panel lateral
   (componentes/_filtro-marcas.php) y filtro de año (componentes/_filtro-anio.php).
   ============================================================================= */

/* ---------- CONTROLES DE LA CABECERA DEL LISTADO ----------
   Orden y filtro son la MISMA pieza en dos versiones: misma altura, mismo radio y mismo
   grosor de borde, uno relleno y otro no. Antes el orden era un form-select-sm gris de
   Bootstrap y el filtro un botón negro grande, y juntos no parecían del mismo sitio.
   Se llaman .ss-control-pill (y no .ss-orden / .ss-filtro) porque el día que esto se lleve
   a un offcanvas con más filtros, los que se añadan heredan el aspecto sin tocar CSS. */
.ss-control-pill{
    border-radius:50rem; border:1.5px solid #212529;
    padding:.45rem 1rem; font-size:.9rem; font-weight:500; line-height:1.35;
    transition:background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
/* El <select> nativo: hueco a la derecha para la flecha propia de Bootstrap. */
select.ss-control-pill{ padding-right:2.25rem; background-color:#fff; color:#212529; cursor:pointer; }
select.ss-control-pill:hover{ background-color:#f8f9fa; }
/* El foco corporativo sustituye al azul de Bootstrap en los dos controles. */
.ss-control-pill:focus,.ss-control-pill:focus-visible{
    border-color:var(--ss-first-color,#c10049); outline:0;
    box-shadow:0 0 0 .2rem color-mix(in srgb,var(--ss-first-color,#c10049) 22%,transparent);
}
/* La versión SIN RELLENO como botón: el que abre los desplegables de orden y de año. Mismo
   blanco y mismo gris al pasar que tenía el <select> al que sustituye. Va en las variables
   --bs-btn-* para que los estados de Bootstrap (hover, abierto = .show, pulsado) no lo
   pinten de otro color. */
.ss-control-pill--claro{
    --bs-btn-bg:#fff;              --bs-btn-color:#212529;
    --bs-btn-hover-bg:#f8f9fa;     --bs-btn-hover-color:#212529;
    --bs-btn-active-bg:#f8f9fa;    --bs-btn-active-color:#212529;
    --bs-btn-hover-border-color:#212529; --bs-btn-active-border-color:#212529;
}

/* ---------- MENÚ DE OPCIONES (orden, año) ----------
   Colores, esquinas y sombra son los de todos los desplegables (base.css). Aquí: el menú
   nunca más estrecho que su botón, y la opción vigente con un ✓ además del color — solo el
   color no basta para quien no lo distingue. El ✓ ocupa su sitio también en las demás
   (invisible) para que los textos queden alineados. */
.ss-opciones{ min-width:max(100%, 12rem); }
.ss-opciones .dropdown-item.active{ font-weight:600; }
.ss-opciones__check{ width:1.1em; margin-right:.4rem; visibility:hidden; }
.ss-opciones .active .ss-opciones__check{ visibility:visible; }

/* MÓVIL: Ordenar y Filtrar comparten UNA fila. Antes cada uno ocupaba la suya a todo lo ancho
   y la rejilla empezaba dos controles más abajo. Filtrar mide lo que su texto y el orden se
   queda el resto (le cabe la etiqueta más larga, "Mayor descuento"; si algún día no cupiera,
   se recorta con puntos suspensivos en vez de partir la fila). */
@media (max-width:575.98px){
    .ss-listado-controles{ width:100%; flex-wrap:nowrap!important; }
    .ss-listado-controles > .ss-orden{ flex:1 1 auto; min-width:0; }
    .ss-listado-controles > .btn{ flex:0 0 auto; }
    .ss-orden > .dropdown-toggle{ width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}

/* ---------- PANEL DE FILTROS (offcanvas por la izquierda) ----------
   Sustituye al modal de marcas de site-25. Está pensado como columna que va a crecer: cada
   filtro nuevo (tamaños, pulgadas, precio…) es otro .ss-filtro-bloque dentro del cuerpo, y ni
   la cabecera ni el pie cambian.

   OJO: el .marca-on del ASP vivía en protoStyle.css, que web/ NO carga — o sea que en el modal
   anterior marcar una marca no se veía. De ahí que estos estilos estén aquí. */
#ss-filtros { --bs-offcanvas-width:min(26rem, 92vw); display:flex; flex-direction:column; }
#ss-filtros .offcanvas-body { overflow-y:auto; }

.ss-filtro-bloque + .ss-filtro-bloque { margin-top:1.75rem; padding-top:1.5rem; border-top:1px solid #e9ecef; }
.ss-filtro-bloque__titulo { font-size:1rem; font-weight:600; margin-bottom:.75rem; }

/* ---------- RANGO DE PRECIO (07-10-2026) ----------
   Dos <input type=range> superpuestos sobre una pista propia: Bootstrap no trae deslizador
   doble. Los inputs son transparentes y solo atrapan el ratón en el tirador (pointer-events),
   así se puede agarrar cualquiera de los dos. El tramo elegido va en el color corporativo. */
.ss-rango { position:relative; height:1.5rem; }
.ss-rango__pista {
    position:absolute; left:0; right:0; top:50%; height:.4rem; transform:translateY(-50%);
    border-radius:1rem; background:#dee2e6;
}
.ss-rango__tramo { position:absolute; top:0; bottom:0; border-radius:1rem; background:var(--ss-first-color,#c10049); }
.ss-rango .form-range {
    position:absolute; inset:0; width:100%; height:1.5rem; margin:0;
    background:transparent; pointer-events:none; z-index:2;
}
.ss-rango .form-range::-webkit-slider-runnable-track { background:transparent; }
.ss-rango .form-range::-moz-range-track { background:transparent; }
.ss-rango .form-range::-webkit-slider-thumb {
    pointer-events:auto; cursor:grab;
    background:#fff; border:2px solid var(--ss-first-color,#c10049); box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.ss-rango .form-range::-moz-range-thumb {
    pointer-events:auto; cursor:grab;
    background:#fff; border:2px solid var(--ss-first-color,#c10049); box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.ss-rango .form-range:active::-webkit-slider-thumb { cursor:grabbing; background:#fff; }
.ss-rango .form-range:active::-moz-range-thumb { cursor:grabbing; background:#fff; }
/* Las casillas: sin flechas de número (con el tirador sobran) y foco corporativo. */
.ss-filtro-precio .form-control { text-align:right; -moz-appearance:textfield; }
.ss-filtro-precio .form-control::-webkit-outer-spin-button,
.ss-filtro-precio .form-control::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.ss-filtro-precio .form-control:focus {
    border-color:var(--ss-first-color,#c10049);
    box-shadow:0 0 0 .2rem color-mix(in srgb,var(--ss-first-color,#c10049) 22%,transparent);
}

/* Buscador con la lupa dentro del campo. */
.ss-buscador-filtro { position:relative; }
.ss-buscador-filtro i { position:absolute; left:.85rem; top:50%; transform:translateY(-50%); color:#adb5bd; pointer-events:none; }
.ss-buscador-filtro .form-control { padding-left:2.35rem; border-radius:50rem; }
.ss-buscador-filtro .form-control:focus {
    border-color:var(--ss-first-color,#c10049); outline:0;
    box-shadow:0 0 0 .2rem color-mix(in srgb,var(--ss-first-color,#c10049) 22%,transparent);
}

/* Rejilla de marcas: tarjetas del mismo tamaño para que los logos, que vienen con
   proporciones muy distintas, no descuadren las filas. */
/* SIEMPRE 3 columnas (24-08-2026). Con 4 en pantallas anchas los logos salían tan pequeños
   que había que acercarse para distinguirlos, y el panel es una columna estrecha: caben
   igual de bien y se leen mejor. */
.ss-marcas-rejilla { display:grid; grid-template-columns:repeat(3, 1fr); gap:.5rem; }

.ss-marca {
    position:relative; display:flex; align-items:center; justify-content:center;
    aspect-ratio:3/2; padding:.4rem; cursor:pointer;
    border:1.5px solid #e9ecef; border-radius:12px; background:#fff;
    transition:border-color .15s ease, box-shadow .15s ease;
}
.ss-marca:hover { border-color:#adb5bd; }
.ss-marca__logo { max-width:100%; max-height:100%; object-fit:contain; }
/* Nº de productos de esa marca en el listado. Discreto: es una ayuda, no el protagonista. */
.ss-marca__num {
    position:absolute; top:.15rem; right:.3rem;
    font-size:.62rem; line-height:1; color:#adb5bd;
}
/* Elegida: borde corporativo y un check en la esquina. Solo el color no basta — hay quien no
   lo distingue, y sobre logos de colores se pierde. */
.ss-marca--on { border-color:var(--ss-first-color,#c10049); box-shadow:0 0 0 1px var(--ss-first-color,#c10049); }
.ss-marca__check { display:none; position:absolute; bottom:.2rem; right:.35rem;
    font-size:.62rem; color:var(--ss-first-color,#c10049); }
.ss-marca--on .ss-marca__check { display:block; }
.ss-marca--on .ss-marca__num { color:var(--ss-first-color,#c10049); }
/* Foco visible: el checkbox real está oculto, así que el aviso lo da la tarjeta. */
.ss-marca:focus-within { border-color:var(--ss-first-color,#c10049);
    box-shadow:0 0 0 .2rem color-mix(in srgb,var(--ss-first-color,#c10049) 22%,transparent); }

/* Pie fijo del panel: las acciones no se pierden al bajar por una lista larga. */
.ss-filtros-pie {
    display:flex; gap:.5rem; align-items:center;
    padding:1rem; border-top:1px solid #e9ecef; background:#fff;
}