/* =============================================================================
   Grupo Automotores — sitio público
   controles.css · los controles de formulario propios del rediseño 2026

   Dos componentes:

   1. `.ga-dd`  — desplegable propio. Un `<select>` nativo no se puede estilar
                  por dentro en ningún navegador, así que el panel de opciones
                  del sitio salía con la tipografía y el spacing del sistema
                  operativo justo en las pantallas donde más se mira (el filtro
                  de marca y el de orden del catálogo).

                  **Siempre envuelve un `<select>` nativo oculto con su `name`.**
                  El desplegable de arriba escribe en ese select y dispara su
                  `change`; sin JS el select queda a la vista y el catálogo
                  sigue andando por form GET. Un desplegable que reemplace al
                  select en vez de manejarlo rompe el catálogo sin JS, que es
                  un contrato con test (`TestCatalogoSinJavaScript`).

   2. `.ga-seg` — variante de enlaces del segmentado que ya existe en
                  catalogo.css con radios. Se usa donde el filtro es una URL y
                  no un campo de formulario ("Al día"), para que ande sin JS.

   Ver también: `iniciarDesplegables()` en ga/js/ga.js.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   DESPLEGABLE
   --------------------------------------------------------------------------- */
.ga-dd { position: relative; }

/* El select nativo que el desplegable maneja. Se esconde con `clip` y NO con
   `display:none` ni `hidden`: un campo con `display:none` se sigue enviando,
   pero además queda fuera del árbol de accesibilidad y de la validación
   nativa. Con `clip` sigue siendo un campo de formulario de verdad, sólo que
   invisible.

   `.ga-dd--js` la agrega el JS: si este bloque no corre, el select nunca se
   esconde y la pantalla queda con sus desplegables nativos funcionando. Es lo
   que hace que el catálogo siga andando sin JavaScript.

   Se esconde también el `.ga-field` que lo envuelve, porque ese span dibuja su
   propio chevron: sin esto quedaban dos flechas, una sobre la otra. */
.ga-dd--js > select,
.ga-dd--js > .ga-field {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  pointer-events: none;
}

/* El trigger sólo existe cuando hay JS: lo inyecta ga.js. */
.ga-dd__trigger {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--ga-s-2);
  padding: 10px 12px;
  min-height: 40px;
  font-family: var(--ga-font-body);
  font-size: var(--ga-t-sm);
  color: var(--ga-on-bone);
  background: var(--ga-bone-0);
  border: 1px solid var(--ga-bone-300);
  border-radius: var(--ga-r);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--ga-dur-fast) var(--ga-ease);
}
.ga-dd--js .ga-dd__trigger { display: flex; }
.ga-dd__trigger:hover { border-color: var(--ga-gold-ink); }
.ga-dd__trigger:focus-visible {
  outline: none;
  border-color: var(--ga-gold-ink);
  box-shadow: 0 0 0 3px var(--ga-goldink-a16);
}
.ga-dd__trigger i { flex: none; font-size: .75rem; color: var(--ga-on-bone-mut); transition: transform var(--ga-dur-fast) var(--ga-ease); }
.ga-dd.is-open .ga-dd__trigger i { transform: rotate(180deg); }
.ga-dd.is-open .ga-dd__trigger { border-color: var(--ga-gold-ink); }

/* Placeholder (nada elegido): gris, para que se distinga de un valor real. */
.ga-dd__trigger[data-vacio="1"] { color: var(--ga-on-bone-mut); }

.ga-dd__panel {
  position: absolute;
  z-index: 60;
  inset: calc(100% + 4px) 0 auto 0;
  max-height: 280px;
  overflow-y: auto;
  padding: 4px;
  background: var(--ga-bone-0);
  border: 1px solid var(--ga-bone-300);
  border-radius: var(--ga-r);
  box-shadow: var(--ga-el-lg, 0 12px 28px rgba(33, 31, 29, .14));
  display: none;
}
.ga-dd.is-open .ga-dd__panel { display: block; }

.ga-dd__opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ga-s-2);
  width: 100%;
  padding: 9px 10px;
  font-family: var(--ga-font-body);
  font-size: var(--ga-t-sm);
  color: var(--ga-on-bone);
  background: transparent;
  border: 0;
  border-radius: var(--ga-r);
  cursor: pointer;
  text-align: left;
}
.ga-dd__opt:hover { background: var(--ga-bone-50); }
.ga-dd__opt i { opacity: 0; font-size: .8rem; color: var(--ga-gold-ink); }
.ga-dd__opt.is-elegida { background: var(--ga-goldink-a08); font-weight: var(--ga-w-med); }
.ga-dd__opt.is-elegida i { opacity: 1; }

/* Capa transparente que cierra el desplegable al tocar afuera. La inyecta
   ga.js una sola vez. Es un elemento y no un listener en `document` porque
   con el listener el mismo click que cierra uno abría el de al lado. */
.ga-dd-capa {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: none;
}
.ga-dd-capa.is-visible { display: block; }

/* Variante sobre banda oscura (el buscador del hero). */
.ga-dd--dark .ga-dd__trigger {
  background: var(--ga-fill-ink);
  border-color: var(--ga-line-ink);
  color: var(--ga-on-ink);
}
.ga-dd--dark .ga-dd__trigger[data-vacio="1"] { color: var(--ga-on-ink-mut); }
.ga-dd--dark .ga-dd__trigger:hover,
.ga-dd--dark .ga-dd.is-open .ga-dd__trigger { border-color: var(--ga-gold); }
.ga-dd--dark .ga-dd__trigger i { color: var(--ga-on-ink-mut); }


/* ---------------------------------------------------------------------------
   SEGMENTADO DE ENLACES
   Mismo aspecto que el `.ga-seg` de radios de catalogo.css, pero con `<a>`:
   cada opción es una URL, así que sin JS el filtro sigue funcionando por
   recarga y el link se puede copiar y compartir.
   --------------------------------------------------------------------------- */
.ga-seg a {
  font-family: var(--ga-font-disp);
  font-size: var(--ga-t-xs);
  color: var(--ga-on-bone-mut);
  padding: 8px 12px;
  border-radius: var(--ga-r);
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--ga-dur-fast) var(--ga-ease),
              color var(--ga-dur-fast) var(--ga-ease);
}
.ga-seg a:hover { color: var(--ga-on-bone); }
.ga-seg a.is-activo {
  background: var(--ga-bone-0);
  color: var(--ga-on-bone);
  font-weight: var(--ga-w-med);
  box-shadow: var(--ga-el);
}