/*! MendozaGSM · header v3 (assets/mgsm2026/header-v3.css) — BETA, SÓLO con el rediseño activo.
 *
 * La carga head-on.tpl (con el gate del rediseño Y beta.tpl encendida: ?mgsm2026b=1, cookie mgsm2026b=1 o beta publicada) justo después de mgsm2026.css. Con la beta apagada esta hoja NI SE PIDE y el header queda como hoy, byte a byte.
 * TODA regla cuelga de `html.mgsm26`; las que no son de un nodo que SÓLO existe con la beta (.mgsm26-hs, el buscador del header: header-search.tpl; .mgsm26-who__*, el grupo del usuario, que agrega mgsm2026.js) son cuatro y sólo CORREN lo existente o le hacen
 * lugar (margin-right, position, padding-bottom, scroll-padding-top). tools/check.mjs lo comprueba.
 *
 * QUÉ HACE (pedido de Eze, 2026-10-13): AGREGAR un buscador junto al logo, con y sin sesión, y mostrar el grupo del usuario. NADA MÁS. El header de producción (con los retoques de Codex: botones con ícono, chip del usuario, carrito, moneda, tema e idioma) no se rediseña:
 * ni una regla de acá toca el tamaño, la tipografía, el color, el ícono o el orden de lo que ya existe, y tampoco el ancho del logo. Lo único que se mueve es la POSICIÓN: lo que está a la derecha del logo se corre a la derecha para dejarle lugar al buscador.
 *
 * TRES MODOS, que elige mgsm2026.js (módulo «header-busqueda») midiendo el header REAL de cada página y de cada idioma, y deja en data-m26-mode del .mgsm26-hs:
 *   inline  campo de 230–380 px justo a la derecha del logo;
 *   lupa    un botón de ícono (el mismo estilo que los de tema e idioma) que abre el campo en superposición sobre el header;
 *   row     una fila propia a todo el ancho DEBAJO del header (menú hamburguesa, < 992 px, y donde ni la lupa entra sin cambiar lo existente).
 * inline y lupa sólo se eligen si, con el buscador puesto, TODO lo existente mide lo mismo que sin él (anchos, altos y renglones del menú); lo que no cabe en el .container se corre a la derecha, hacia el aire de la página: `--m26-hs-x` (px) agranda el renglón
 * del header hacia la derecha en lo justo (nunca más allá de la pantalla). Bajo 992 px el buscador es la fila propia por CSS, sin esperar al JS (no hay salto de diseño); de 992 px para arriba queda FUERA del renglón y escondido hasta que el módulo midió.
 * El header NO se espeja en árabe (sus bordes son físicos): por eso los bordes de acá son left/right; el texto de dentro del buscador sí va en rtl (dir en .mgsm26-hs).
 */

/* ------------------------------------------------------------------ medidas */
html.mgsm26 {
  --m26-hs-w: 380px;       /* ancho ideal del campo en línea (territorioremoto.com: 380); el módulo lo baja hasta 230 px (el piso: con menos pasa a la lupa) según el aire que haya */
  --m26-hs-gut: 15px;      /* el margen del .container: el campo, la lupa y la fila arrancan donde arranca el logo */
  --m26-hs-row: 56px;      /* fila propia: campo de 44 px y 6 px de aire arriba y abajo */
}

/* con la fila propia el header mide 56 px más: un salto a un ancla no puede dejar el destino bajo ella (mgsm2026.js pone mgsm26-hs-row en <html>). El resto de lo que depende de --m26-hh (la portada, el renglón del header) NO cambia: el header crece en el
   flujo y la portada, que lo tapa con un margen negativo de --m26-hh, queda 56 px más abajo, justo donde termina la fila. */
html.mgsm26.mgsm26-hs-row { scroll-padding-top: calc(var(--m26-hh) + var(--m26-hs-row) + 8px); }

/* la barra de arriba (site-v3.css, nuestra) copia el corrimiento del header: sus franjas coinciden con los bordes físicos del header (el logo a la izquierda y «Crear cuenta», 6 px adentro, a la derecha); si el buscador corrió lo de la derecha --m26-hs-x, su borde final
   sigue al del header. Más específica que la regla de site-v3.css (que carga después de esta hoja): lleva la clase mgsm26-hd3, que sólo existe con la beta. Bajo 992 px no hay corrimiento. */
@media (min-width: 992px) {
  html.mgsm26.mgsm26-hd3 .mgsm26-top { --tp-pad-end: max(15px, calc(var(--tp-pad) + 6px - var(--m26-hs-x, 0px))); }
  html.mgsm26.mgsm26-hd3 .mgsm26-top[dir="rtl"] { --tp-pad-start: max(15px, calc(var(--tp-pad) + 6px - var(--m26-hs-x, 0px))); --tp-pad-end: var(--tp-pad); }
}

/* ------------------------------------------------------------- el buscador */
html.mgsm26 .mgsm26-hs { position: static; min-width: 0; }
html.mgsm26 .mgsm26-hs .mgsm26-hs__lupa, html.mgsm26 .mgsm26-hs .mgsm26-hs__x { display: none; }
html.mgsm26 .mgsm26-hs .mgsm26-search { margin: 0; max-width: none; position: relative; }
html.mgsm26 .mgsm26-hs .mgsm26-search__box { --cut: 9px; height: 44px; padding: 0 0 0 12px; gap: 6px; filter: none; }      /* el borde en reposo es el de la portada (--m26-field, 3:1 contra el fondo: WCAG 1.4.11) */
html.mgsm26 .mgsm26-hs .mgsm26-search__box:focus-within { --edge: var(--m26-accent-t); }
/* las marcas de foco (::after) de la portada crecen al aparecer: en una fila de borde a borde esa fracción sobresale de la pantalla (invisible, pero agrega scroll horizontal): acá aparecen sin crecer */
html.mgsm26 .mgsm26-hs .mgsm26-search__box::after { inset: -6px; transform: none; }
html.mgsm26 .mgsm26-hs .mgsm26-search__ico { display: block; width: 18px; height: 18px; }
html.mgsm26 .mgsm26-hs .mgsm26-search__input { padding: 0 2px; font-size: 14.5px; font-weight: 500; letter-spacing: 0; }
html.mgsm26 .mgsm26-hs .mgsm26-search__input::placeholder { font-size: 14px; }
@media (pointer: coarse) { html.mgsm26 .mgsm26-hs .mgsm26-search__input { font-size: 16px; } }      /* un iPad en horizontal (≥ 992 px) también hace zoom al enfocar un campo de menos de 16 px */
/* borrar y cerrar tienen toque de 44 px; el círculo visible (28 px) vive en un ::before, como los contactos de la barra de arriba */
html.mgsm26 .mgsm26-hs .mgsm26-search__clear, html.mgsm26 .mgsm26-hs .mgsm26-hs__x { position: relative; isolation: isolate; width: 44px; height: 44px; background: none; }
html.mgsm26 .mgsm26-hs .mgsm26-search__clear:hover, html.mgsm26 .mgsm26-hs .mgsm26-hs__x:hover { background: none; }
html.mgsm26 .mgsm26-hs .mgsm26-search__clear::before, html.mgsm26 .mgsm26-hs .mgsm26-hs__x::before { content: ""; position: absolute; inset: 8px; z-index: -1; border-radius: 50%; background: transparent; }
html.mgsm26 .mgsm26-hs .mgsm26-search__clear::before { background: color-mix(in srgb, var(--m26-ink) 8%, transparent); }
html.mgsm26 .mgsm26-hs .mgsm26-search__clear:hover::before, html.mgsm26 .mgsm26-hs .mgsm26-hs__x:hover::before { background: color-mix(in srgb, var(--m26-ink) 15%, transparent); }
html.mgsm26 .mgsm26-hs .mgsm26-kbd { padding: 5px 8px; font-size: 11.5px; }
html.mgsm26 .mgsm26-hs[data-m26-narrow] .mgsm26-kbd { display: none; }      /* campo de menos de 300 px: sin la pista «/», para que entre el placeholder entero */

/* panel de resultados: del ancho del campo hacia el borde de la pantalla, hasta 560 px; los renglones son los de la portada */
html.mgsm26 .mgsm26-hs .mgsm26-panel { --cut: 12px; inset-inline: auto; left: 0; right: auto; width: min(560px, calc(100vw - 2 * var(--m26-hs-gut))); top: calc(100% + 8px); z-index: 60; max-height: var(--m26-room, min(560px, calc(100svh - 150px))); overflow-y: auto; }
html.mgsm26 .mgsm26-hs .mgsm26-opt { min-height: 56px; padding: 7px 14px 7px 18px; }
html.mgsm26 .mgsm26-hs .mgsm26-opt__name { font-size: 14.5px; }
html.mgsm26 .mgsm26-hs .mgsm26-panel__none { padding: 16px 18px 6px; color: var(--m26-ink); font-weight: 600; overflow-wrap: anywhere; }
html.mgsm26 .mgsm26-hs .mgsm26-panel__hint { margin: 0; padding: 0 18px 4px; color: var(--m26-ink-2); font-size: 13.5px; line-height: 1.45; }
html.mgsm26 .mgsm26-hs .mgsm26-panel__empty { display: flex; flex-direction: column; align-items: flex-start; padding-bottom: 10px; }
html.mgsm26 .mgsm26-hs .mgsm26-panel__empty .mgsm26-link { display: inline-flex; align-items: center; min-height: 44px; margin: 0 18px; }
html.mgsm26 .mgsm26-hs .mgsm26-panel__dym {
  display: flex; align-items: center; width: 100%; min-height: 44px; margin: 0; padding: 6px 18px; border: 0; border-bottom: 1px solid var(--m26-line);
  background: color-mix(in srgb, var(--m26-accent) 10%, transparent); color: var(--m26-ink); font: 550 14px/1.3 var(--m26-sans); text-align: start; cursor: pointer; overflow-wrap: anywhere;
}
html.mgsm26 .mgsm26-hs .mgsm26-panel__dym:hover { background: color-mix(in srgb, var(--m26-accent) 18%, transparent); }
html.mgsm26 .mgsm26-hs .mgsm26-panel__dym:focus-visible { outline: 2px solid var(--m26-accent-t); outline-offset: -3px; }
html.mgsm26 .mgsm26-hs .mgsm26-panel__dym[hidden], html.mgsm26 .mgsm26-hs .mgsm26-panel__empty[hidden] { display: none; }
@media (max-width: 575.98px) {
  html.mgsm26 .mgsm26-hs .mgsm26-opt { grid-template-columns: minmax(0, 1fr); row-gap: 3px; padding: 9px 14px 9px 16px; }
  html.mgsm26 .mgsm26-hs .mgsm26-opt__price { justify-self: start; }
}

/* -------------------------------------------------- FILA PROPIA bajo el header
 * Siempre bajo 992 px (menú hamburguesa) y, desde 992 px, cuando mgsm2026.js la elige (data-m26-mode="row": ni la lupa entra sin romper lo existente) y mientras no hay JS (header-search.tpl la imprime así). Se dibuja ABSOLUTA, en el
 * relleno que el .container de DHRU se reserva abajo: el renglón del logo, el menú y las acciones no se entera de que está. Las dos listas llevan LAS MISMAS reglas (tools/check.mjs lo comprueba). */
@media (max-width: 991.98px) {
  html.mgsm26 header .header-middle:has(.mgsm26-hs) { height: auto; }      /* el tema de DHRU le fija 72 px (theme.css: .header-bottom, hasta 992 px): sin esto la fila quedaría colgando FUERA del header, sobre la página */
  html.mgsm26 header .header-middle .container:has(.mgsm26-hs) { position: relative; padding-bottom: var(--m26-hs-row); }
  html.mgsm26 .mgsm26-hs { position: absolute; left: var(--m26-hs-gut); right: var(--m26-hs-gut); bottom: 6px; height: 44px; z-index: 5; }
  html.mgsm26 .mgsm26-hs .mgsm26-hs__form { display: block; width: 100%; }
  html.mgsm26 .mgsm26-hs .mgsm26-kbd { display: none; }
  html.mgsm26 .mgsm26-hs .mgsm26-panel { width: auto; right: 0; }
  html.mgsm26 .mgsm26-hs .mgsm26-search__input { font-size: 16px; }   /* 16 px: iOS no hace zoom al enfocar */
}
@media (min-width: 992px) {
  html.mgsm26 header .header-middle:has(.mgsm26-hs[data-m26-mode="row"]) { height: auto; }      /* a 992 px justos todavía rige el 72 px de theme.css (max-width: 992px) */
  html.mgsm26 header .header-middle .container:has(.mgsm26-hs[data-m26-mode="row"]) { position: relative; padding-bottom: var(--m26-hs-row); }
  html.mgsm26 .mgsm26-hs[data-m26-mode="row"] { position: absolute; left: var(--m26-hs-gut); right: var(--m26-hs-gut); bottom: 6px; height: 44px; z-index: 5; }
  html.mgsm26 .mgsm26-hs[data-m26-mode="row"] .mgsm26-hs__form { display: block; width: 100%; }
  html.mgsm26 .mgsm26-hs[data-m26-mode="row"] .mgsm26-kbd { display: none; }
  html.mgsm26 .mgsm26-hs[data-m26-mode="row"] .mgsm26-panel { width: auto; right: 0; }
  html.mgsm26 .mgsm26-hs[data-m26-mode="row"] .mgsm26-search__input { font-size: 16px; }
}

/* ------------------------------------------------ CAMPO EN LÍNEA y LUPA (≥ 992 px) */
/* Class equivalents also reserve the row on browsers without :has(). */
html.mgsm26.mgsm26-hs-row header.mgsm26-site-header .header-middle { height: auto; }
html.mgsm26.mgsm26-hs-row header.mgsm26-site-header .header-middle .container { position: relative; padding-bottom: var(--m26-hs-row); }
@media (min-width: 992px) {
  html.mgsm26.mgsm26-hs-inline header.mgsm26-site-header .navbar-xl,
  html.mgsm26.mgsm26-hs-lupa header.mgsm26-site-header .navbar-xl { margin-right: calc(-1 * var(--m26-hs-x, 0px)); }
  html.mgsm26.mgsm26-hs-inline header.mgsm26-site-header .navbar-brand,
  html.mgsm26.mgsm26-hs-lupa header.mgsm26-site-header .navbar-brand { margin-right: 0 !important; }
  /* mientras mgsm2026.js no midió (la clase mgsm26-hd3 la pone head-on.tpl con JS; mgsm26-hs-on la pone el módulo al decidir) y mientras mide (modo off) el buscador queda FUERA del renglón: el header se ve y mide como hoy */
  html.mgsm26.mgsm26-hd3:not(.mgsm26-hs-on) .mgsm26-hs { position: absolute; visibility: hidden; pointer-events: none; }
  html.mgsm26 .mgsm26-hs[data-m26-mode="off"] { position: absolute; }
  /* el renglón crece hacia la derecha en --m26-hs-x (lo pone el módulo en el nav): el logo no se mueve; el aire que sobraba entre el logo y el menú pasa a estar después del buscador */
  html.mgsm26 header:has(.mgsm26-hs:is([data-m26-mode="inline"], [data-m26-mode="lupa"])) .navbar-xl { margin-right: calc(-1 * var(--m26-hs-x, 0px)); }
  html.mgsm26 header:has(.mgsm26-hs:is([data-m26-mode="inline"], [data-m26-mode="lupa"])) .navbar-brand { margin-right: 0 !important; }
  /* campo: de ancho fijo (--m26-hs-w lo pone el módulo, entre 230 y 380 px) y sin achicarse: si el flex le quitara a ÉL lo que falta, lo existente (el logo, que ya viene apretado en su mínimo) se estiraría y dejaría de medir lo que mide hoy */
  html.mgsm26 .mgsm26-hs[data-m26-mode="inline"] { flex: 0 0 var(--m26-hs-w); margin: 0 auto 0 16px; }
  html.mgsm26 .mgsm26-hs[data-m26-mode="lupa"] { flex: none; margin: 0 auto 0 0; }
  html.mgsm26 .mgsm26-hs[data-m26-mode="lupa"] .mgsm26-hs__lupa { display: inline-flex; }
  html.mgsm26 .mgsm26-hs[data-m26-mode="lupa"] .mgsm26-hs__form { display: none; }
  /* lupa abierta: el campo cubre el renglón entero del header (el <header> fijo es su referencia: de borde a borde menos 15 px a cada lado; lo que se corrió a la derecha termina antes), con la flecha de cerrar al principio */
  html.mgsm26 .mgsm26-hs[data-m26-mode="lupa"].is-open .mgsm26-hs__form { display: flex; align-items: center; position: absolute; z-index: 70; top: 0; bottom: 0; left: var(--m26-hs-gut); right: var(--m26-hs-gut); padding-inline: 0; background: var(--m26-surface); }
  html.mgsm26 .mgsm26-hs[data-m26-mode="lupa"].is-open .mgsm26-hs__form .mgsm26-search__box { flex: 1 1 auto; min-width: 0; }
  html.mgsm26 .mgsm26-hs[data-m26-mode="lupa"].is-open .mgsm26-hs__x { display: inline-grid; }
  html.mgsm26 .mgsm26-hs[data-m26-mode="lupa"].is-open .mgsm26-kbd { display: none; }
}
/* el botón de cerrar de la superposición: flecha hacia el borde de inicio, antes del campo (su toque y su círculo, arriba) */
html.mgsm26 .mgsm26-hs .mgsm26-hs__x { order: -1; flex: none; place-items: center; padding: 0; margin-inline-start: -8px; border: 0; border-radius: 50%; color: var(--m26-ink-2); cursor: pointer; }
html.mgsm26 .mgsm26-hs .mgsm26-hs__x:hover { color: var(--m26-ink); }
html.mgsm26 .mgsm26-hs .mgsm26-hs__x svg { transform: rotate(90deg); }
html.mgsm26 .mgsm26-hs .mgsm26-hs__x:focus-visible { outline: 2px solid var(--m26-accent-t); outline-offset: 1px; }
html.mgsm26 .mgsm26-hs[dir="rtl"] .mgsm26-hs__x svg { transform: rotate(-90deg); }

/* ------------------------------------------------- el grupo del usuario (VIP, Gold…)
 * El chip de DHRU imprime «Nombre (Grupo) ⌄» y el saldo debajo; en producción el nombre y el grupo no se ven (queda el avatar, el ⌄ y el saldo). mgsm2026.js (módulo «header-grupo») agrega, SÓLO si el grupo no se ve, una etiqueta chica en el
 * renglón del ⌄ (antes de él), que hasta ahí estaba vacío: el chip no crece (el módulo lo mide y, si creciera, acorta la etiqueta o la deja sólo en el menú). El nombre completo va en title y, con «Grupo: » sólo para lectores, en el texto. */
html.mgsm26 .mgsm26-who__grp {
  display: inline-block; vertical-align: middle; margin: -4px 6px -4px 0; padding: 1px 6px 2px; border-radius: 3px; max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 700 10px/1.25 var(--m26-sans); letter-spacing: .07em; text-transform: uppercase; font-stretch: 100%;
  color: var(--m26-accent-t) !important; background: color-mix(in srgb, var(--m26-accent) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--m26-accent-t) 45%, transparent);
}
html.mgsm26 .mgsm26-who__grp[hidden] { display: none; }
/* el mismo dato, siempre, arriba del menú del chip (DHRU: .dropdown-menu.my-account): una línea de texto, no un enlace */
html.mgsm26 .mgsm26-who__menu { display: block; padding: 8px 20px 6px; color: var(--m26-ink-2); font: 500 12.5px/1.35 var(--m26-sans); letter-spacing: normal; text-transform: none; overflow-wrap: anywhere; }
html.mgsm26 .mgsm26-who__menu strong { color: var(--m26-ink); font-weight: 650; }

/* colores forzados (alto contraste): la etiqueta del grupo y la sugerencia pierden el relleno y el sombreado, así que llevan borde del sistema; el campo y la lupa ya tienen el suyo en mgsm2026.css */
@media (forced-colors: active) {
  html.mgsm26 .mgsm26-who__grp { color: ButtonText !important; background: none; box-shadow: none; border: 1px solid ButtonText; }
  html.mgsm26 .mgsm26-hs .mgsm26-panel__dym { background: ButtonFace; color: ButtonText; border: 1px solid ButtonText; }
  html.mgsm26 .mgsm26-hs .mgsm26-hs__x { color: ButtonText; }
  html.mgsm26 .mgsm26-hs .mgsm26-search__clear::before, html.mgsm26 .mgsm26-hs .mgsm26-hs__x::before { border: 1px solid ButtonText; background: none; }
}