/* ==========================================================================
   [ZSPORT-busca-barra] La caja "Buscá en todo el sitio" de la barra.
   La arma backend/tienda_barra.py y la lleva cada pagina publica menos la de
   pago. Es un renglon propio debajo de la barra, siempre a la vista (en la
   computadora y en el telefono: nada plegado detras de una lupa).
   Tiene que verse bien sobre vitrina.css (tienda, fichas, cuenta,
   configurador, paginas por marca, resultados), sobre app.css +
   herramientas-cliente.css (hub), sobre inicio.css (portada y /soluciones) y
   sobre la hoja propia de los avisos legales: por eso trae sus propios
   valores (--zb-*) y no usa las variables de ninguna (en inicio.css --texto
   es un color, no una letra).
   Sin JavaScript: la pista larga o corta es CSS. Campo de 16 px, toques de
   44 px, corte del telefono a 760 px.
   ========================================================================== */

.zbusca-fila, .zidioma{
  --zb-fondo:#12161C; --zb-borde:#2A313D; --zb-borde-suave:#1B212A; --zb-panel:#1E242E; --zb-panel-alto:#252C38;
  --zb-hueso:#ECEEF2; --zb-ceniza:#8B94A3; --zb-redline:#FF5A1F; --zb-redline-tenue:rgba(255,90,31,.16);
  --zb-letra:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --zb-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
.zbusca-fila{ display:block; border-top:1px solid var(--zb-borde-suave) }
.zbusca-env{ max-width:1140px; margin:0 auto; padding:8px 22px 9px; box-sizing:border-box }

/* ----------------------------------------------------------- el campo -- */
.zbusca{
  position:relative; display:block; margin:0; width:100%; max-width:680px; min-width:0;
  font-family:var(--zb-letra);
}
.zbusca .zbusca-campo{
  display:block; box-sizing:border-box; width:100%; height:42px; margin:0;
  background:var(--zb-fondo); border:1px solid var(--zb-borde); border-radius:100px;
  color:var(--zb-hueso); font:400 16px/1.2 var(--zb-letra); letter-spacing:0;
  padding:0 96px 0 42px; -webkit-appearance:none; appearance:none; box-shadow:none;
  transition:border-color .16s, box-shadow .16s;
}
.zbusca .zbusca-campo::placeholder{ color:transparent }
.zbusca .zbusca-campo::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none }
.zbusca .zbusca-campo:focus{ outline:none; border-color:var(--zb-redline); box-shadow:0 0 0 4px var(--zb-redline-tenue) }
.zbusca .zbusca-ico{
  position:absolute; left:15px; top:50%; transform:translateY(-50%);
  width:17px; height:17px; stroke:var(--zb-ceniza); fill:none; stroke-width:2; stroke-linecap:round;
  pointer-events:none;
}
.zbusca .zbusca-pista{
  position:absolute; left:42px; right:100px; top:0; bottom:0;
  display:flex; align-items:center; pointer-events:none; overflow:hidden; white-space:nowrap;
  font:400 15px/1 var(--zb-letra); color:var(--zb-ceniza); letter-spacing:0; text-transform:none;
}
.zbusca .zbusca-pista b{ color:var(--zb-hueso); font-weight:600 }
.zbusca .zbusca-campo:not(:placeholder-shown) ~ .zbusca-pista{ display:none }
.zbusca .zbusca-boton{
  position:absolute; right:4px; top:4px; height:34px; margin:0; width:auto; min-width:0;
  background:var(--zb-panel); color:var(--zb-hueso); border:1px solid var(--zb-borde); border-radius:100px;
  padding:0 16px; font:600 13px/1 var(--zb-letra); cursor:pointer; letter-spacing:0; text-transform:none;
  box-shadow:none; transition:background .14s, color .14s, border-color .14s;
}
.zbusca .zbusca-boton:hover, .zbusca .zbusca-boton:focus-visible{
  background:var(--zb-redline); border-color:var(--zb-redline); color:#0A0C0F; outline:none;
}

/* ------------------------------------------------- cada barra del sitio -- */
/* La tienda (data-idioma="desplegable") mide hasta 1360 desde 1001 px en
   castellano y portugues (vitrina.css, [ZSPORT-vitrina-idioma]): la caja
   arranca donde arranca el logo. */
@media (min-width:1001px){
  .barra[data-idioma="desplegable"] .zbusca-env{ max-width:1360px }
  .barra[data-idioma="desplegable"]:lang(en) .zbusca-env{ max-width:1140px }
}
/* Avisos legales: su barra mide 1120. */
.barra > .env + .zbusca-fila .zbusca-env{ max-width:var(--ancho, 1140px) }
/* Portada y /soluciones (inicio.css): todo se mide con --barra-alto (el alto
   de la barra, el hero que se mete debajo, el menu del telefono, lo que se
   pega arriba y el margen de las anclas). Con la caja, la barra suma su
   renglon a --barra-alto y la fila de arriba conserva sus 72 px: el hero
   sigue entrando entero en la pantalla. La caja arranca donde arranca la
   marca. */
html:has(.barra > .barra-in + .zbusca-fila){ --barra-alto:128px }
.barra:has(> .barra-in + .zbusca-fila) > .barra-in{ height:72px }
/* El hero de la portada en la computadora es una pantalla entera por encima
   de la franja de abajo, y sus medidas salen del alto de la ventana (--vh,
   inicio.css). Con la caja, la barra le quita 56 px: el hero se mide con 56
   px menos y las reglas de las ventanas bajas (781, 740 y 620 px de alto en
   inicio.css) se corren 56 px. Asi el boton y las lecturas del pie quedan
   encima de la franja, igual que sin la caja en una ventana 56 px mas baja. */
@media (min-width:821px){
  html:has(.barra > .barra-in + .zbusca-fila) .hero{ --vh:calc((100vh - var(--abajo) - 56px) / 100) }
}
@media (min-width:821px) and (max-height:837px){
  html:has(.barra > .barra-in + .zbusca-fila) .hero{ padding-top:calc(var(--barra-alto) + 20px); --pant:118px }
  html:has(.barra > .barra-in + .zbusca-fila) .hero .hero-pie{ margin-top:26px }
}
@media (min-width:821px) and (max-height:796px){
  html:has(.barra > .barra-in + .zbusca-fila) .hero{
    padding-top:calc(var(--barra-alto) + 10px); --pant:92px; --fw:min(100vw,1760px,calc(var(--vh) * 170));
  }
  html:has(.barra > .barra-in + .zbusca-fila) .hero .bajada{ font-size:17px; line-height:1.4 }
  html:has(.barra > .barra-in + .zbusca-fila) .hero .hero-firma{ margin-top:10px }
  html:has(.barra > .barra-in + .zbusca-fila) .hero .hero-pie{ margin-top:14px }
}
@media (min-width:821px) and (max-height:676px){
  html:has(.barra > .barra-in + .zbusca-fila) .hero{ --pant:76px; --fw:min(100vw,1760px,calc(var(--vh) * 150)) }
}
.barra-in + .zbusca-fila{ height:56px; box-sizing:border-box; border-top-color:rgba(236,238,242,.10) }
.barra-in + .zbusca-fila .zbusca-env{
  max-width:calc(var(--max, 1240px) + 2*var(--margen, 22px)); padding:0 var(--margen, 22px) 12px;
}
/* El hub (/e/herramientas): su barra es la misma, en otra hoja. */
.hc-barra > .zbusca-fila .zbusca-env{ max-width:var(--hc-ancho, 1140px) }

/* Con la caja la barra es mas alta: lo que se abre por ancla no queda tapado
   (la portada y /soluciones ya lo hacen con su --barra-alto). */
html:has(.barra > .env + .zbusca-fila, .hc-barra .zbusca-fila){ scroll-padding-top:116px }

/* ---------------------------------- el idioma con banderas ([ZSPORT-busca-barra-idioma]) -- */
/* El mismo desplegable de la tienda (idiomas._vitrina_desplegable), en las
   barras que tenian el idioma como texto o nada: fichas, hub, cuenta,
   configurador y avisos legales. Cerrado: la bandera y la sigla del idioma
   que se ve, con la flechita; abierto: los tres con su bandera y su nombre, y
   una tilde en el actual. Abre solo (es un <details>);
   web/js/idioma-desplegable.js lo cierra al tocar afuera y con Escape. Se
   dibuja aca y no con vitrina.css: el hub y los avisos legales no la cargan. */
.zidioma{ position:relative; flex:0 0 auto; display:flex; align-items:center; font-family:var(--zb-letra) }
.hc-env > .zidioma, .barra .env > .zidioma{ margin-left:auto }
.hc-env > nav + .zidioma, .barra .env > nav + .zidioma{ margin-left:0 }
.zidioma details.idioma{ position:relative; color:var(--zb-hueso) }
.zidioma .bandera{ width:21px; height:14px; flex:none; border-radius:1.5px; box-shadow:0 0 0 1px rgba(236,238,242,.26) }
.zidioma details.idioma > summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px; height:40px; padding:0 6px;
  font-family:var(--zb-mono); font-size:11.5px; line-height:1; letter-spacing:.08em; color:var(--zb-hueso);
  border-radius:8px; user-select:none; -webkit-user-select:none;
}
.zidioma details.idioma > summary::-webkit-details-marker{ display:none }
.zidioma details.idioma > summary::after{
  content:""; flex:none; width:6px; height:6px; margin:-4px 2px 0 1px;
  border-right:1px solid var(--zb-ceniza); border-bottom:1px solid var(--zb-ceniza); transform:rotate(45deg);
}
.zidioma details.idioma[open] > summary::after{ margin-top:4px; transform:rotate(-135deg) }
.zidioma details.idioma > summary:hover::after{ border-color:var(--zb-hueso) }
.zidioma details.idioma > summary:focus-visible{ outline:2px solid var(--zb-redline); outline-offset:2px }
.zidioma .idioma-palabra{ display:none }
.zidioma .idioma-lista{
  position:absolute; right:-8px; top:calc(100% + 9px); z-index:50; min-width:204px; margin:0; padding:6px;
  list-style:none; background:var(--zb-panel); border:1px solid var(--zb-borde); border-radius:8px;
  box-shadow:0 28px 56px -24px rgba(0,0,0,.85);
}
.zidioma .idioma-lista li{ margin:0; padding:0 }
.zidioma .idioma-lista a{
  display:flex; align-items:center; gap:12px; min-height:44px; padding:0 12px; border:0; border-radius:6px;
  font-family:var(--zb-letra); font-size:14.5px; line-height:1.2; color:var(--zb-ceniza); text-decoration:none;
  text-transform:none; letter-spacing:0; white-space:nowrap; transition:background-color .15s, color .15s;
}
.zidioma .idioma-lista a:hover{ background:var(--zb-panel-alto); color:var(--zb-hueso) }
.zidioma .idioma-lista a[aria-current="page"]{ color:var(--zb-hueso) }
.zidioma .idioma-lista a[aria-current="page"]::after{
  content:""; margin-left:auto; width:9px; height:5px; flex:none;
  border-left:1.5px solid var(--zb-hueso); border-bottom:1.5px solid var(--zb-hueso);
  transform:translateY(-2px) rotate(-45deg);
}
@media (pointer:coarse){ .zidioma details.idioma > summary{ height:44px } }
/* El hub en un telefono angosto: la nav pasa a una segunda fila a lo ancho
   (herramientas-cliente.css, [ZSPORT-hub-nav-375]) y arriba quedan el logo y
   el idioma. El desplegable es mas alto que el selector de texto: la fila de
   arriba crece con el y la nav no se mete debajo de la caja. */
@media (max-width:480px){
  .hc-env:has(> .zidioma){ height:auto; min-height:56px; padding-top:2px; padding-bottom:4px }
  .hc-env > .zidioma, .hc-env > nav + .zidioma{ margin-left:auto }
  /* Avisos legales (su barra: .marca, nav y el desplegable en una fila): el
     rotulo de la tienda no se pega al logo y la fila va centrada con la bandera. */
  .barra > .env:has(> .marca):has(> .zidioma) > nav{ margin-left:16px; align-items:center; gap:14px; min-width:0 }
  .barra > .env:has(> .marca):has(> .zidioma) > nav a{ line-height:1.3 }
  .barra > .env:has(> .marca) > nav + .zidioma{ margin-left:auto; padding-left:6px }
}

/* ------------------------------------------------------------ celular -- */
@media (max-width:1240px){
  .zbusca .zbusca-larga{ display:none }
}
@media (max-width:820px){
  /* Portada y /soluciones: en el telefono la barra va sobre la foto (sin
     fondo); el renglon de la caja lleva su propio fondo para que se lea. */
  html:has(.barra > .barra-in + .zbusca-fila){ --barra-alto:140px }
  .barra-in + .zbusca-fila{ height:68px; background:rgba(11,10,9,.82); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px) }
  .barra-in + .zbusca-fila .zbusca-env{ padding:8px 16px 10px }
}
@media (max-width:760px){
  .zbusca-env{ padding:6px 16px 8px }
  .zbusca{ max-width:none }
  .zbusca .zbusca-campo{ height:48px; padding-right:92px }
  .zbusca .zbusca-boton{ top:2px; right:2px; height:44px; padding:0 18px; font-size:14px }
  .zbusca .zbusca-pista{ right:96px }
  html:has(.barra > .env + .zbusca-fila, .hc-barra .zbusca-fila){ scroll-padding-top:132px }
}
@media (prefers-reduced-motion:reduce){
  .zbusca .zbusca-campo, .zbusca .zbusca-boton{ transition:none }
}