/* ==========================================================================
   RC-FILTROS — boton "Filtrar" movil al estilo Uniclima.

   Por que existe: amazzingfilter en modo compacto cuelga su pestana
   .compact-toggle DENTRO de #amazzing_filter, que lleva overflow-x:hidden
   (para su scroll interno) y un transform. La pestana quedaba recortada, y
   position:fixed no la salva porque un padre con transform pasa a ser el
   bloque contenedor. rc-filtros.js la saca del panel; aqui se le da forma.

   Sobre los !important: son 9 y NO son decorativos. El bundle heredado
   (theme-*.css, que arrastra la capa de BD) declara con !important
   ".btn-primary, .btn-product-list, .add-to-cart {background-color:#1d4ed8}"
   y "#left-column a {color:...;font-size:13.5px}". El boton lleva la clase
   .btn-primary del modulo, asi que sin !important pierde y sale azul y sin
   texto legible. Se retiran cuando se retire esa capa (lote 5).

   Revertir: borrar rc-filtros.css + rc-filtros.js y sus 2 lineas de head.tpl.
   ========================================================================== */

#rc-filtros-host { display: none; }

@media (max-width: 991px) {
  #rc-filtros-host { display: block; margin: 0 0 14px; }

  #rc-filtros-host .compact-toggle,
  #rc-filtros-host a.compact-toggle.btn-primary {
    position: static;
    transform: none;
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    height: auto !important;
    min-height: 52px;
    padding: 14px 18px !important;
    border: 1px solid #d9dee5 !important;
    border-radius: 10px;
    background: #fff !important;
    background-color: #fff !important;
    color: #1b2432 !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    line-height: 1.2;
    letter-spacing: 0;
    text-align: left;
    text-decoration: none;
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  }

  /* los dos span del modulo venian apilados a 32px de ancho */
  #rc-filtros-host .compact-toggle > span {
    display: inline-flex !important;
    align-items: center;
    width: auto !important;
    height: auto !important;
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit;
    writing-mode: horizontal-tb;
  }

  /* RC-ANULA-ROTACION: el modulo pinta la pestana en VERTICAL:
     .compact-toggle-text va en position:absolute con transform:rotate(270deg).
     Al reutilizar el mismo elemento como boton horizontal hay que anular las
     dos, o el texto se renderiza girado y ocupa 19x93 px (una letra por linea). */
  #rc-filtros-host .compact-toggle .compact-toggle-text {
    position: static !important;
    transform: none !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    background: none !important;
    white-space: nowrap !important;
    margin-right: auto;
  }

  /* galon a la derecha, para que se lea como desplegable */
  #rc-filtros-host .compact-toggle::after {
    content: "";
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    margin-left: auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
  }

  #rc-filtros-host .compact-toggle:hover,
  #rc-filtros-host .compact-toggle:focus-visible {
    border-color: #1b2c56 !important;
    color: #1b2c56 !important;
  }
  #rc-filtros-host .compact-toggle:focus-visible {
    outline: 2px solid #1b2c56;
    outline-offset: 2px;
  }
}