/*! MendozaGSM · barra superior v3 (assets/mgsm2026/site-v3.css) — BETA, SIN gate del rediseño.
 *
 * La carga bar-v3.tpl (que site.tpl incluye sólo con la beta activa: ?mgsm2026b=1, cookie mgsm2026b=1 o beta publicada), con y sin el rediseño y con la cookie mgsm2026=0. Es la hoja de UNA sola pieza, las dos franjas
 * .mgsm26-top, y no depende de mgsm2026.css, de mgsm2026.js ni de nada de /assets/site o /mgsm-api/site (el deploy de dhru-addons/games-sorteo los sincroniza con borrado). La barra v2 (la de hoy) sigue con su hoja site.css, intacta.
 *
 * REGLAS
 *   1. Todo cuelga de `.mgsm26-top` (la clase la imprime bar-v3.tpl): ni `:root`, ni selectores de elemento sueltos, ni @font-face. Los @keyframes llevan el prefijo mgsm26-top-. Los tokens son variables --tp-* sobre el propio .mgsm26-top.
 *   2. Se ve entera sin JS: el primer mensaje, los contactos, sin botón de pausa ni Live Chat (van con hidden hasta que site.js los activa). Sin imágenes, sin fuentes remotas, sin url().
 *   3. Claro/oscuro: oscuro por defecto (el DHRU de visitante es oscuro). Con el rediseño manda `html[data-mgsm26-theme="light"]`; en el sitio clásico, el claro lo da la hoja theme8.css de DHRU (cuenta en modo claro) vía :has(). Los dos bloques de
 *      tokens claros llevan las MISMAS declaraciones (tools/check.mjs lo comprueba): van separados porque un :has() que el navegador no entienda invalida SU regla y no tiene que llevarse la del rediseño.
 *   4. Movimiento (giro de los mensajes, pulso de la luz) sólo con prefers-reduced-motion: no-preference. Con reduce el texto cambia sin desplazarse y la luz queda quieta (site.js lee la misma consulta).
 *   5. Toque de 44 px: cada contacto y el botón de pausa miden 44 px de alto; la caja visible es más baja y vive en un ::before (con el foco crece hasta el toque entero y el aro la abraza). La pausa reserva su lugar aun sin JS (visibility:hidden en vez de display:none):
 *      al cargar site.js el mensaje no cambia de ancho ni la franja de alto.
 *   6. Tipografía: la del rediseño (--m26-sans, Mona Sans) si está cargada; si no, la pila del sistema. Nada más viene de mgsm2026.css.
 *   7. Los SIETE contactos se ven siempre, en UNA fila y sin desplazar (no hay tira con scroll, ni borde desvanecido, ni chevrón, ni filas que envuelvan). Escritorio (≥ 1024 px): chips con su rótulo completo; cada franja es UNA línea. Bajo 1024 px: un DOCK de siete
 *      columnas iguales de borde a borde con el rótulo CORTO (s_* de top-strings.tpl): teléfono y tableta chica (< 768 px) con el ícono arriba y el rótulo de 9,5–12 px debajo (en < 768 px el rótulo de estado ocupa su propia fila y los mensajes pueden pasar a dos líneas),
 *      tableta (768–1023 px) con el ícono EN LÍNEA con el rótulo (13 px) en placas de 44 px de toque, como el escritorio. Los mensajes nunca se cortan con «…».
 *   8. Live Chat NO va dentro de la tira: es su hermano, al final de la franja de contactos (flex: none en escritorio), así que nunca queda cortado. En escritorio lleva su rótulo completo; en el dock (< 1024 px) es la séptima columna (el robot con «Chat» debajo o al lado).
 *      Es la acción principal de la franja pero con relleno SUAVE (cobalto translúcido, borde de 1 px, ícono y texto en el color de foco): el cobalto sólido es de «Crear cuenta» del header, que queda justo encima.
 *   9. Bordes: las dos franjas coinciden con los bordes FÍSICOS del header, que no se espeja en árabe. Con el rediseño: el logo a la izquierda y «Crear cuenta» 6 px más adentro a la derecha (desde 576 px). En el sitio clásico, desde 992 px: el logo
 *      y el teléfono a 15 px más adentro a la izquierda y el botón de sesión al borde. --tp-pad-start y --tp-pad-end valen --tp-pad más esos desplazamientos (en rtl el de inicio es el derecho). Ojo: --tp-pad lleva un 100% que se resuelve contra el contenedor de cada uso, por eso las franjas no llevan padding horizontal propio sobre sus hijos
 *      (el borde final de la franja de contactos lo da el margin de Live Chat).
 *  10. Alturas: franja de textos de 40 px y de contactos de 48 px (≈ 89 px en escritorio); el toque sigue en 44 px y la caja visible de cada contacto en 36 px: baja sólo el aire. En la tableta (768–1023 px) la franja de contactos es la misma de 48 px (la barra ≈ 90 px);
 *      en teléfono y tableta chica el dock mide ≈ 67 px (placas de 58 px). La pausa sobresale 8 px del borde y 2 px arriba y abajo para que su círculo caiga en la grilla (el borde del header) sin achicar el toque.
 *  11. Dock (< 1024 px): a 320 px cada columna mide 44 px (el piso del toque: siete columnas de 44; la placa dibujada mide 42 con --tp-px de 1 px) y los rótulos cortos (top-strings.tpl: s_admin … s_chat, hasta 7 caracteres, 9,5 px hasta 369 px de ancho, 10 px de 370 a 389, 10,5 desde 390, 11 desde 400, 12 desde 600 y 13 desde 768) caben
 *      en una línea, DENTRO del borde de su placa y con aire, en los 10 idiomas; tools/regress.mjs (BARRA3-12) lo mide contra la placa dibujada, no contra la columna. Las placas arrancan y terminan donde los bordes del header (15 px: --tp-pad-start/end menos el aire --tp-px) desde 336 px; de 320 a 335 px el margen es el mayor posible sin bajar de siete columnas de 44 px (7 px a 320), y BARRA3-13 lo mide ancho por ancho.
 *  12. Support (todavía sin enlace): en escritorio (≥ 1024 px) el anillo apagado de siempre; en el dock (< 1024 px), un casillero reservado: contorno punteado, sin relleno, atenuado. Como en táctil no hay hover, al tocarlo (o al hacer clic) site.js muestra un aviso de
 *      ~2,5 s con el «próximamente» (.mgsm26-top__tip).
 */

.mgsm26-top,
.mgsm26-top *,
.mgsm26-top *::before,
.mgsm26-top *::after { box-sizing: border-box; }

.mgsm26-top {
  --tp-a-bg: #08090b;
  --tp-b-bg: #0f1013;
  --tp-ink: #eceae5;
  --tp-ink-2: #aeb0b8;
  --tp-line: rgba(255, 255, 255, .11);
  --tp-line-2: rgba(255, 255, 255, .26);
  --tp-chip: rgba(255, 255, 255, .055);
  --tp-chip-hover: rgba(255, 255, 255, .12);
  --tp-focus: #8ea2ff;
  --tp-led: #3ddc97;
  --tp-led-glow: rgba(61, 220, 151, .34);
  --tp-led-wash: rgba(61, 220, 151, .075);
  --tp-wa: #4ae08a;
  --tp-tg: #56b9ef;
  --tp-acc: #2b59ff;
  --tp-acc-soft: rgba(43, 89, 255, .14);
  --tp-acc-soft-hover: rgba(43, 89, 255, .22);
  --tp-cta: #e3b180;
  --tp-cta-fill: rgba(227, 177, 128, .12);
  --tp-cta-fill-hover: rgba(227, 177, 128, .2);
  --tp-max: 1700px;
  --tp-pad: max(15px, calc((100% - var(--tp-max)) / 2 + 15px));
  --tp-pad-start: var(--tp-pad);
  --tp-pad-end: var(--tp-pad);
  --tp-ease: cubic-bezier(.2, .8, .2, 1);

  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  background: var(--tp-b-bg);
  color: var(--tp-ink);
  font-family: var(--m26-sans, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Noto Sans Arabic", "PingFang SC", "Microsoft YaHei", sans-serif);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
  text-align: start;
  text-transform: none;
}

/* ancho del contenido: el del header de cada sitio (el tema de DHRU usa un contenedor de 1700 px; el rediseño, de 1170), con 15 px de margen como los dos */
html.mgsm26 .mgsm26-top { --tp-max: 1170px; }
/* bordes físicos del header (ver la regla 9): con el rediseño, desde 576 px, el de la derecha queda 6 px adentro; en el sitio clásico, desde 992 px, el de la izquierda queda 15 px adentro (el logo y el teléfono arrancan a 30 px) */
@media (min-width: 576px) {
  html.mgsm26 .mgsm26-top { --tp-pad-end: calc(var(--tp-pad) + 6px); }
  html.mgsm26 .mgsm26-top[dir="rtl"] { --tp-pad-start: calc(var(--tp-pad) + 6px); --tp-pad-end: var(--tp-pad); }
}
@media (min-width: 992px) {
  html:not(.mgsm26) .mgsm26-top { --tp-pad-start: calc(var(--tp-pad) + 15px); }
  html:not(.mgsm26) .mgsm26-top[dir="rtl"] { --tp-pad-start: var(--tp-pad); --tp-pad-end: calc(var(--tp-pad) + 15px); }
}

/* claro: con el rediseño, por su atributo de tema; en el sitio clásico, cuando DHRU carga su hoja clara (theme8.css) */
html[data-mgsm26-theme="light"] .mgsm26-top {
  --tp-a-bg: #e9e6df;
  --tp-b-bg: #f4f2ed;
  --tp-ink: #1c1d21;
  --tp-ink-2: #4a4c53;
  --tp-line: rgba(17, 18, 20, .14);
  --tp-line-2: rgba(17, 18, 20, .3);
  --tp-chip: rgba(17, 18, 20, .05);
  --tp-chip-hover: rgba(17, 18, 20, .1);
  --tp-focus: #2447e0;
  --tp-led: #128a50;
  --tp-led-glow: rgba(18, 138, 80, .34);
  --tp-led-wash: rgba(18, 138, 80, .08);
  --tp-wa: #178a47;
  --tp-tg: #1f7fc0;
  --tp-acc: #2b59ff;
  --tp-acc-soft: rgba(43, 89, 255, .12);
  --tp-acc-soft-hover: rgba(43, 89, 255, .18);
  --tp-cta: #70401a;
  --tp-cta-fill: rgba(112, 64, 26, .12);
  --tp-cta-fill-hover: rgba(112, 64, 26, .2);
}
html:not(.mgsm26):has(link[href*="themes/theme8.css"]) .mgsm26-top {
  --tp-a-bg: #e9e6df;
  --tp-b-bg: #f4f2ed;
  --tp-ink: #1c1d21;
  --tp-ink-2: #4a4c53;
  --tp-line: rgba(17, 18, 20, .14);
  --tp-line-2: rgba(17, 18, 20, .3);
  --tp-chip: rgba(17, 18, 20, .05);
  --tp-chip-hover: rgba(17, 18, 20, .1);
  --tp-focus: #2447e0;
  --tp-led: #128a50;
  --tp-led-glow: rgba(18, 138, 80, .34);
  --tp-led-wash: rgba(18, 138, 80, .08);
  --tp-wa: #178a47;
  --tp-tg: #1f7fc0;
  --tp-acc: #2b59ff;
  --tp-acc-soft: rgba(43, 89, 255, .12);
  --tp-acc-soft-hover: rgba(43, 89, 255, .18);
  --tp-cta: #70401a;
  --tp-cta-fill: rgba(112, 64, 26, .12);
  --tp-cta-fill-hover: rgba(112, 64, 26, .2);
}

.mgsm26-top [hidden] { display: none !important; }
.mgsm26-top ul { margin: 0; padding: 0; list-style: none; }
.mgsm26-top li { margin: 0; padding: 0; }
.mgsm26-top .mgsm26-top__sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================= franja de textos (arriba) */
.mgsm26-top .mgsm26-top__a {
  position: relative;
  display: flex;
  align-items: center;
  column-gap: 14px;
  min-height: 40px;
  padding-block: 0;
  padding-inline: var(--tp-pad-start) var(--tp-pad-end);
  /* el resplandor verde nace EN la luz (que vive a --tp-pad-start del borde de inicio, 8 px de ancho): su centro es el de la luz, no un punto fijo de la pantalla */
  background:
    radial-gradient(150px 56px at calc(var(--tp-pad-start) + 4px) 50%, var(--tp-led-wash), transparent 72%) no-repeat,
    var(--tp-a-bg);
  border-bottom: 1px solid var(--tp-line);
}
.mgsm26-top[dir="rtl"] .mgsm26-top__a {
  background:
    radial-gradient(150px 56px at calc(100% - var(--tp-pad-start) - 4px) 50%, var(--tp-led-wash), transparent 72%) no-repeat,
    var(--tp-a-bg);
}

/* estado fijo: luz + «API ONLINE 24/7» */
.mgsm26-top .mgsm26-top__st {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 10px;
  padding-inline-end: 14px;
  border-inline-end: 1px solid var(--tp-line);
  min-height: 22px;
}
.mgsm26-top .mgsm26-top__led {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tp-led);
  box-shadow: 0 0 0 3px var(--tp-led-glow);
}
.mgsm26-top .mgsm26-top__lbl {
  /* la mono del paquete (--m26-mono, la de las etiquetas TPxx del hero) con respaldo propio: esta hoja no depende de mgsm2026.css */
  font-family: var(--m26-mono, ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .08em;
  line-height: 1;
  white-space: nowrap;
  color: var(--tp-ink);
}

/* mensajes rotativos: todos en la MISMA celda de la grilla (el alto es el del más largo) */
.mgsm26-top .mgsm26-top__vp {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  padding-block: 6px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
}
.mgsm26-top .mgsm26-top__msgs { display: grid; }
.mgsm26-top .mgsm26-top__msgs > li {
  grid-area: 1 / 1;
  align-self: center;
  color: var(--tp-ink);
  font-size: 13.5px;
  font-weight: 520;
  line-height: 1.4;
  text-wrap: balance;
  opacity: 0;
  transform: translateY(80%);
}
.mgsm26-top .mgsm26-top__msgs:not([data-js]) > li:first-child,
.mgsm26-top .mgsm26-top__msgs > li.is-on { opacity: 1; transform: none; }
.mgsm26-top .mgsm26-top__msgs > li.is-out { opacity: 0; transform: translateY(-80%); }

/* pausa (WCAG 2.2.2): 44 px de toque, círculo de 28 px */
.mgsm26-top .mgsm26-top__pp {
  position: relative;
  isolation: isolate;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  /* el toque mide 44 px pero el círculo, 28: se corre 2 px arriba y abajo (la franja es de 40 px). Desde que «Recargar» cierra la franja (y es lo que termina donde terminan Live Chat y «Crear cuenta»), la pausa ya no sobresale hacia el borde */
  margin: 0;
  margin-block: -2px;
  margin-inline-end: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--tp-ink-2);
  font: inherit;
  cursor: pointer;
}
.mgsm26-top .mgsm26-top__pp::before {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: -1;
  border-radius: 50%;
  background: var(--tp-chip);
  box-shadow: inset 0 0 0 1px var(--tp-line);
}
.mgsm26-top .mgsm26-top__ic { flex: none; width: 12px; height: 12px; fill: currentColor; }
/* hasta que site.js la activa (o si nunca carga) la pausa no se ve ni se enfoca, pero conserva su lugar: el mensaje no cambia de ancho al cargar el JS. Con un solo mensaje, site.js marca data-rot=off y deja de reservarlo */
/* (el .mgsm26-top doble sube la especificidad por encima de `html.mgsm26 [class*="mgsm26-"][hidden] { display: none !important }` de mgsm2026.css, que con el rediseño la sacaba del flujo) */
.mgsm26-top.mgsm26-top .mgsm26-top__pp[hidden] { display: inline-flex !important; visibility: hidden; }
.mgsm26-top.mgsm26-top[data-rot="off"] .mgsm26-top__pp[hidden] { display: none !important; }
.mgsm26-top .mgsm26-top__ic--play { display: none; }
.mgsm26-top .mgsm26-top__pp[data-paused] .mgsm26-top__ic--pause { display: none; }
.mgsm26-top .mgsm26-top__pp[data-paused] .mgsm26-top__ic--play { display: block; }
/* el toque de la pausa (44 px) sobresale 2 px de la franja de 40: el aro va metido 4 px (un círculo de 36 px que cabe entero en la franja y rodea al círculo de 28) para que no lo corte el borde de la página */
.mgsm26-top .mgsm26-top__pp:focus-visible { outline: 2px solid var(--tp-focus); outline-offset: -4px; border-radius: 50%; }
@media (hover: hover) {
  .mgsm26-top .mgsm26-top__pp:hover { color: var(--tp-ink); }
  .mgsm26-top .mgsm26-top__pp:hover::before { background: var(--tp-chip-hover); }
}

/* «Recargar» (el CTA de la barra v2, de vuelta): el último elemento de la franja de textos, a la derecha de la pausa. Contorno corte SIM en el color de CTA del rediseño (cobre: --m26-cta), distinto del cobalto de Live Chat (relleno suave) y de «Crear cuenta»
   (sólido), que quedan justo debajo. Toque de 44 px (la franja mide 40: sobresale 2 px arriba y abajo) y caja visible de 32 px; con el foco la caja crece hasta el toque entero y el aro la abraza (como en los contactos). */
.mgsm26-top .mgsm26-top__cta {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 7px;
  min-height: 44px;
  margin: 0;
  margin-block: -2px;
  margin-inline-start: 2px;
  padding: 0 14px 0 12px;
  border: 0;
  background: none;
  color: var(--tp-cta) !important;
  font-size: 12px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: .07em;
  text-decoration: none !important;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}
.mgsm26-top .mgsm26-top__cta::before {
  content: "";
  position: absolute;
  inset: 6px 0;
  z-index: -1;
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%);
  background:
    linear-gradient(to top right, transparent calc(50% - .6px), var(--tp-cta) calc(50% - .6px), var(--tp-cta) calc(50% + .6px), transparent calc(50% + .6px)) no-repeat top right / 7px 7px,
    var(--tp-cta-fill);
  box-shadow: inset 0 0 0 1.5px var(--tp-cta);
}
.mgsm26-top[dir="rtl"] .mgsm26-top__cta::before {
  clip-path: polygon(7px 0, 100% 0, 100% 100%, 0 100%, 0 7px);
  background:
    linear-gradient(to top left, transparent calc(50% - .6px), var(--tp-cta) calc(50% - .6px), var(--tp-cta) calc(50% + .6px), transparent calc(50% + .6px)) no-repeat top left / 7px 7px,
    var(--tp-cta-fill);
}
.mgsm26-top .mgsm26-top__cta-ic { flex: none; width: 14px; height: 14px; fill: currentColor; }
.mgsm26-top:lang(ar) .mgsm26-top__cta, .mgsm26-top:lang(he) .mgsm26-top__cta { letter-spacing: 0; text-transform: none; }
.mgsm26-top:lang(zh) .mgsm26-top__cta { letter-spacing: .04em; }
.mgsm26-top .mgsm26-top__cta:focus-visible { outline: 2px solid var(--tp-focus); outline-offset: -4px; }      /* el toque de 44 px sobresale 2 px de la franja de 40: el aro (-4 px) cae adentro de la franja y coincide con el borde de la caja visible, que con el foco crece hasta ahí */
.mgsm26-top .mgsm26-top__cta:focus-visible::before { inset: 2px 0; }
@media (hover: hover) {
  .mgsm26-top .mgsm26-top__cta:hover::before { background-color: var(--tp-cta-fill-hover); }
}

/* ========================================================== franja de contactos (abajo) */
.mgsm26-top .mgsm26-top__b {
  display: flex;
  align-items: center;
  gap: 8px;
  /* SIN padding horizontal: --tp-pad lleva un 100% que se resuelve contra el contenedor, y los hijos tienen que ver el ancho ENTERO de la barra (el borde final lo da el margin de Live Chat) */
  background: var(--tp-b-bg);
  border-bottom: 1px solid var(--tp-line);
}
/* Escritorio (≥ 1024 px): UNA fila. En tableta y teléfono la franja se reacomoda (ver abajo) para que los siete contactos se vean SIN desplazar: acá el overflow-x queda sólo como red de seguridad, sin JS, sin máscara ni snap. */
.mgsm26-top .mgsm26-top__scroll {
  display: flex;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;
  gap: 6px;
  min-height: 48px;
  padding-block: 2px;
  padding-inline-start: var(--tp-pad-start);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.mgsm26-top .mgsm26-top__scroll::-webkit-scrollbar { display: none; }
.mgsm26-top .mgsm26-top__grp { display: flex; align-items: center; flex: none; gap: 4px; }
.mgsm26-top .mgsm26-top__grp > li { flex: none; }
.mgsm26-top .mgsm26-top__grp--tg::before {
  content: "";
  flex: none;
  align-self: center;
  width: 1px;
  height: 20px;
  margin-inline: 10px 8px;
  background: var(--tp-line-2);
}

/* contacto: caja con la esquina cortada arriba a la derecha (corte SIM); la caja vive en el ::before, el toque es el elemento entero */
.mgsm26-top .mgsm26-top__c {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 8px;
  min-height: 44px;
  margin: 0;
  padding: 0 14px 0 12px;
  border: 0;
  background: none;
  color: var(--tp-ink) !important;
  font: inherit;
  font-size: 13px;
  font-weight: 580;
  line-height: 1.2;
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
}
.mgsm26-top .mgsm26-top__c::before {
  content: "";
  position: absolute;
  inset: 4px 0;
  z-index: -1;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
  background:
    linear-gradient(to top right, transparent calc(50% - .6px), var(--tp-line-2) calc(50% - .6px), var(--tp-line-2) calc(50% + .6px), transparent calc(50% + .6px)) no-repeat top right / 8px 8px,
    var(--tp-chip);
  box-shadow: inset 0 0 0 1px var(--tp-line);
}
.mgsm26-top[dir="rtl"] .mgsm26-top__c::before {
  clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px);
  background:
    linear-gradient(to top left, transparent calc(50% - .6px), var(--tp-line-2) calc(50% - .6px), var(--tp-line-2) calc(50% + .6px), transparent calc(50% + .6px)) no-repeat top left / 8px 8px,
    var(--tp-chip);
}
.mgsm26-top .mgsm26-top__c svg { flex: none; width: 16px; height: 16px; fill: currentColor; }
/* rótulo CORTO (aria-hidden): sólo se ve en el dock del teléfono, bajo el ícono; el completo (.mgsm26-top__t) sigue siendo el que se ve en escritorio y tableta y el nombre accesible en todas partes */
.mgsm26-top .mgsm26-top__s { display: none; }
.mgsm26-top .mgsm26-top__c--wa svg { color: var(--tp-wa); }
.mgsm26-top .mgsm26-top__c--tg svg { color: var(--tp-tg); }
.mgsm26-top .mgsm26-top__c:focus-visible { outline: 2px solid var(--tp-focus); outline-offset: 0; }
/* con el foco la caja visible crece hasta el toque entero (44 px): el aro la abraza en vez de rodear una caja de 36 px con aire adentro («caja doble») */
.mgsm26-top .mgsm26-top__c:focus-visible::before { inset: 0; }
@media (hover: hover) {
  .mgsm26-top a.mgsm26-top__c:hover::before { background-color: var(--tp-chip-hover); box-shadow: inset 0 0 0 1px var(--tp-line-2); }
}

/* Live Chat: la acción principal de la franja, al final y FUERA de la tira (flex: none: nunca se corta). Relleno SUAVE (cobalto translúcido) con borde de 1 px cobalto e ícono y texto en el color de foco: el cobalto SÓLIDO queda
   para «Crear cuenta» del header, que está justo encima (dos bloques sólidos apilados le quitaban la primacía). El borde de la esquina cortada es una diagonal de 1,2 px, como la de los demás contactos. */
.mgsm26-top .mgsm26-top__c--chat { flex: none; order: 1; margin-inline-end: var(--tp-pad-end); padding: 0 18px 0 14px; color: var(--tp-focus) !important; font-weight: 640; }
.mgsm26-top .mgsm26-top__c--chat::before {
  inset: 4px 0;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  background:
    linear-gradient(to top right, transparent calc(50% - .6px), var(--tp-acc) calc(50% - .6px), var(--tp-acc) calc(50% + .6px), transparent calc(50% + .6px)) no-repeat top right / 10px 10px,
    var(--tp-acc-soft);
  box-shadow: inset 0 0 0 1px var(--tp-acc);
}
.mgsm26-top[dir="rtl"] .mgsm26-top__c--chat::before {
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
  background:
    linear-gradient(to top left, transparent calc(50% - .6px), var(--tp-acc) calc(50% - .6px), var(--tp-acc) calc(50% + .6px), transparent calc(50% + .6px)) no-repeat top left / 10px 10px,
    var(--tp-acc-soft);
}
.mgsm26-top .mgsm26-top__c--chat svg { width: 18px; height: 18px; color: var(--tp-focus); }
.mgsm26-top .mgsm26-top__c--chat[data-wait] { cursor: progress; }
.mgsm26-top .mgsm26-top__c--chat:focus-visible { outline-color: var(--tp-focus); }
@media (hover: hover) {
  .mgsm26-top .mgsm26-top__c--chat:hover::before { background-color: var(--tp-acc-soft-hover); }
}

/* Support todavía sin enlace (ESCRITORIO, ≥ 1024 px): visible pero apagado (no es un enlace, no se enfoca). El escritorio NO cambia respecto de la v3 anterior: anillo interior de 1 px con opacidad .8. Dentro del dock (< 1024 px) se
   lee como casillero RESERVADO (contorno punteado: ver más abajo). */
.mgsm26-top .mgsm26-top__c--off { cursor: default; color: var(--tp-ink-2) !important; }
.mgsm26-top .mgsm26-top__c--off::before { background-color: transparent; box-shadow: inset 0 0 0 1px var(--tp-line); opacity: .8; }
.mgsm26-top .mgsm26-top__c--off svg { opacity: .55; }
.mgsm26-top .mgsm26-top__c--off .mgsm26-top__t { opacity: .8; }

/* ================================================================================ franja de textos: tableta y teléfono */
@media (min-width: 768px) {
  .mgsm26-top .mgsm26-top__a { column-gap: 16px; }
  .mgsm26-top .mgsm26-top__msgs > li { font-size: 14px; }
  .mgsm26-top .mgsm26-top__scroll { gap: 8px; }
  .mgsm26-top .mgsm26-top__c { padding: 0 16px 0 14px; font-size: 13.5px; }
  .mgsm26-top .mgsm26-top__c--chat { padding: 0 20px 0 16px; }
}
@media (max-width: 767.98px) {
  .mgsm26-top .mgsm26-top__a { flex-wrap: wrap; column-gap: 4px; row-gap: 0; padding-block: 0; }
  /* primera fila: el rótulo de estado a la izquierda y «Recargar» (44 px de toque, sin salirse de la franja) a la derecha; segunda: los mensajes y la pausa. El orden VISUAL lo da `order`; el del DOM (estado, mensajes, pausa, Recargar) es el de lectura. El mensaje pide casi toda la fila
     (menos la pausa) para no caber junto al rótulo y bajar de fila */
  .mgsm26-top .mgsm26-top__st { flex: 1 1 0; min-width: 0; padding-inline-end: 0; border-inline-end: 0; min-height: 44px; }
  .mgsm26-top .mgsm26-top__cta { order: 1; margin-block: 0; margin-inline-start: 0; }
  .mgsm26-top .mgsm26-top__vp { order: 2; flex: 1 1 calc(100% - 48px); padding-block: 0 6px; }
  .mgsm26-top .mgsm26-top__pp { order: 3; margin-block: -2px 0; }
  .mgsm26-top .mgsm26-top__msgs > li { font-size: 13px; line-height: 1.38; }
  .mgsm26-top .mgsm26-top__c { padding: 0 12px 0 10px; font-size: 12.5px; gap: 7px; }
}

/* ======================================================================= el DOCK de los siete contactos (< 1024 px) */
/* Siete columnas IGUALES de borde a borde: la tira ocupa 6 partes (dos listas de 3) y Live Chat la séptima. Cada contacto es una placa de ≥ 44 px de ancho (a 320 px, 44 justos) con el ícono y el rótulo CORTO (s_* de top-strings.tpl); el
   rótulo completo queda como nombre accesible (clip, no display:none). Misma familia que el escritorio: placa con la esquina cortada, borde de 1 px, íconos con el color de su red, Support apagado (punteado) y Live Chat con relleno
   suave de cobalto. Entre WhatsApp y Telegram, un trazo fino (desde 360 px; abajo no hay ancho para el hueco que necesita). Todo cabe en el ancho: nada se desplaza ni se envuelve en filas.
   · < 768 px: ícono ARRIBA y rótulo debajo (9,5–12 px), placas de ≥ 56 px de alto.
   · 768–1023 px: ícono EN LÍNEA con el rótulo (13 px), placas de 44 px de toque como en el escritorio: la franja mide lo mismo que allá (la primera versión de la tableta, dos filas de chips, medía 142 px contra 90 y dejaba huecos).
   --tp-px es el aire entre la placa dibujada (::before) y el borde de su columna: 2 px (1 px en pantallas chicas, ≤ 349; 3 px desde 600); el rótulo se mide contra la PLACA, no contra la columna. */
@media (max-width: 1023.98px) {
  .mgsm26-top .mgsm26-top__b {
    --tp-px: 2px;
    align-items: stretch;
    gap: 0;
    /* las placas arrancan y terminan donde los bordes del header (--tp-pad-start/end: 15 px, la luz y el logo), menos el aire de la placa (--tp-px); pero las siete columnas no pueden bajar de 44 px (el toque): si el riel no deja ese ancho
       (de 320 a ~335 px) el margen es el mayor posible, (100% − 7 × 44 px) / 2 por lado: 6 px a 320 px (la placa dibujada a 7), y crece solo hasta llegar a 15. 100% = ancho de la barra */
    padding-block: 4px 5px;
    padding-inline: min(calc(var(--tp-pad-start) - var(--tp-px)), calc((100% - 308px) / 2)) min(calc(var(--tp-pad-end) - var(--tp-px)), calc((100% - 308px) / 2));
  }
  .mgsm26-top .mgsm26-top__scroll { flex: 6 1 0; gap: 0; min-height: 0; padding: 0; overflow: visible; }
  .mgsm26-top .mgsm26-top__grp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); flex: 1 1 0; gap: 0; min-width: 0; position: relative; }
  .mgsm26-top .mgsm26-top__grp > li { min-width: 0; }
  /* el trazo del escritorio no aplica acá: se enciende sólo donde hay hueco (más abajo) */
  .mgsm26-top .mgsm26-top__grp--tg::before { display: none; }
  .mgsm26-top .mgsm26-top__c {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    min-height: 58px;
    padding: 7px 0 5px;
    gap: 3px;
    font-size: 10.5px;
    line-height: 1.15;
    text-align: center;
  }
  .mgsm26-top .mgsm26-top__c::before {
    inset: 3px var(--tp-px);
    clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%);
    background:
      linear-gradient(to top right, transparent calc(50% - .6px), var(--tp-line-2) calc(50% - .6px), var(--tp-line-2) calc(50% + .6px), transparent calc(50% + .6px)) no-repeat top right / 7px 7px,
      var(--tp-chip);
  }
  .mgsm26-top[dir="rtl"] .mgsm26-top__c::before {
    clip-path: polygon(7px 0, 100% 0, 100% 100%, 0 100%, 0 7px);
    background:
      linear-gradient(to top left, transparent calc(50% - .6px), var(--tp-line-2) calc(50% - .6px), var(--tp-line-2) calc(50% + .6px), transparent calc(50% + .6px)) no-repeat top left / 7px 7px,
      var(--tp-chip);
  }
  .mgsm26-top .mgsm26-top__c svg { width: 20px; height: 20px; }
  .mgsm26-top .mgsm26-top__t {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .mgsm26-top .mgsm26-top__s { display: block; max-width: 100%; font-size: 10px; font-weight: 500; letter-spacing: 0; overflow-wrap: anywhere; }
  .mgsm26-top .mgsm26-top__c:focus-visible { outline-offset: -1px; }
  /* en el teléfono y la tableta no hay hover: la placa responde al toque (:active) igual que el hover del escritorio */
  .mgsm26-top a.mgsm26-top__c:active::before { background-color: var(--tp-chip-hover); box-shadow: inset 0 0 0 1px var(--tp-line-2); }
  .mgsm26-top .mgsm26-top__c--chat:active::before { background-color: var(--tp-acc-soft-hover); }
  .mgsm26-top .mgsm26-top__c--chat { flex: 1 1 0; width: auto; margin: 0; padding: 7px 0 5px; gap: 3px; }   /* sin padding horizontal: con flex-basis 0 el padding sumaría a su parte y la séptima columna saldría más ancha que las otras seis */
  .mgsm26-top .mgsm26-top__c--chat::before { inset: 3px var(--tp-px); clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%); background: linear-gradient(to top right, transparent calc(50% - .6px), var(--tp-acc) calc(50% - .6px), var(--tp-acc) calc(50% + .6px), transparent calc(50% + .6px)) no-repeat top right / 7px 7px, var(--tp-acc-soft); }
  .mgsm26-top[dir="rtl"] .mgsm26-top__c--chat::before { clip-path: polygon(7px 0, 100% 0, 100% 100%, 0 100%, 0 7px); background: linear-gradient(to top left, transparent calc(50% - .6px), var(--tp-acc) calc(50% - .6px), var(--tp-acc) calc(50% + .6px), transparent calc(50% + .6px)) no-repeat top left / 7px 7px, var(--tp-acc-soft); }
  .mgsm26-top .mgsm26-top__c--chat svg { width: 20px; height: 20px; }
  /* Live Chat nace con hidden y site.js lo muestra al cargar: su columna se reserva igual (invisible, fuera del árbol de accesibilidad y del foco) para que las seis placas no se ensanchen y se achiquen al cargar el JS (CLS). Sin clave del chat el botón no se imprime y las seis columnas llenan el ancho. El .mgsm26-top doble sube la especificidad por encima del `[hidden] { display: none !important }` de arriba y del de mgsm2026.css. */
  .mgsm26-top.mgsm26-top .mgsm26-top__c--chat[hidden] { display: flex !important; visibility: hidden; }
  /* Support todavía sin enlace, EN EL DOCK: un casillero RESERVADO, no un botón roto: contorno PUNTEADO en vez del sólido de los demás, sin relleno, ícono y rótulo atenuados (el color sigue sobre 3:1). No es un enlace y no se enfoca.
     En táctil no hay hover (el title no se ve): site.js muestra al tocarlo un aviso de ~2,5 s con el «próximamente» de top-strings.tpl (.mgsm26-top__tip). Va al final del bloque a propósito: la regla de la placa de arriba y esta
     tienen la misma especificidad y acá gana el orden. */
  .mgsm26-top .mgsm26-top__c.mgsm26-top__c--off::before { background-color: transparent; box-shadow: none; border: 1px dashed var(--tp-line-2); opacity: 1; }
  .mgsm26-top .mgsm26-top__c--off .mgsm26-top__s { opacity: .8; }
}
@media (min-width: 390px) and (max-width: 599.98px) {
  .mgsm26-top .mgsm26-top__s { font-size: 10.5px; }
}
@media (min-width: 400px) and (max-width: 599.98px) {
  .mgsm26-top .mgsm26-top__s { font-size: 11px; }
}
/* desde 360 px entra el trazo entre WhatsApp y Telegram: 4 px de hueco extra y una línea de 1 px centrada en los que quedan entre las dos placas (--tp-px + 4 + --tp-px) */
@media (min-width: 360px) and (max-width: 1023.98px) {
  .mgsm26-top .mgsm26-top__grp--tg { margin-inline-start: 4px; }
  .mgsm26-top .mgsm26-top__grp--tg::before { display: block; position: absolute; align-self: stretch; inset-block: 14px; inset-inline-start: -2.5px; width: 1px; height: auto; margin: 0; }
}
@media (max-width: 359px) {
  .mgsm26-top .mgsm26-top__lbl { font-size: 10.5px; letter-spacing: .05em; }
  .mgsm26-top .mgsm26-top__msgs > li { font-size: 12.5px; }
}
/* pantallas chicas (≤ 349 px, p. ej. 320): la columna mide 44 px a 320 (el piso del toque, con el riel de 15 px) y la placa dibujada 42 con 1 px de aire a cada lado (--tp-px): el rótulo corto de 9,5 px queda con ≥ 0,75 px de aire adentro del borde
   en los 10 idiomas (tools/regress.mjs, BARRA3-12) */
@media (max-width: 349.98px) {
  .mgsm26-top .mgsm26-top__b { --tp-px: 1px; }
}
/* la letra de 9,5 px llega hasta 369 px: con el riel de 15 px también bajo 390 px (13 px de padding + el aire de la placa) las columnas de 350–369 px perdieron ~2,6 px frente al dock con 4 px de padding de antes y el rótulo de 10 px
   («Channel», «Support») tocaba el borde de su placa; el de 10 px arranca a 370 */
@media (max-width: 369.98px) {
  .mgsm26-top .mgsm26-top__s { font-size: 9.5px; }
}
/* tableta chica (600–767 px): el ícono sigue arriba, el rótulo corto sube a 12 px y las placas ganan un poco de aire */
@media (min-width: 600px) and (max-width: 767.98px) {
  .mgsm26-top .mgsm26-top__b { --tp-px: 3px; }
  .mgsm26-top .mgsm26-top__s { font-size: 12px; }
}
/* tableta (768–1023 px): el ícono EN LÍNEA con el rótulo (13 px), placas de 44 px de toque con la misma esquina cortada que las del escritorio, una sola fila de siete columnas iguales */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .mgsm26-top .mgsm26-top__b { --tp-px: 3px; padding-block: 2px; }
  .mgsm26-top .mgsm26-top__c { flex-direction: row; min-height: 44px; padding: 0 6px; gap: 7px; }
  .mgsm26-top .mgsm26-top__c::before {
    inset: 4px var(--tp-px);
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
    background:
      linear-gradient(to top right, transparent calc(50% - .6px), var(--tp-line-2) calc(50% - .6px), var(--tp-line-2) calc(50% + .6px), transparent calc(50% + .6px)) no-repeat top right / 8px 8px,
      var(--tp-chip);
  }
  .mgsm26-top[dir="rtl"] .mgsm26-top__c::before {
    clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px);
    background:
      linear-gradient(to top left, transparent calc(50% - .6px), var(--tp-line-2) calc(50% - .6px), var(--tp-line-2) calc(50% + .6px), transparent calc(50% + .6px)) no-repeat top left / 8px 8px,
      var(--tp-chip);
  }
  .mgsm26-top .mgsm26-top__c svg { width: 16px; height: 16px; }
  .mgsm26-top .mgsm26-top__s { font-size: 13px; font-weight: 580; line-height: 1.2; white-space: nowrap; overflow-wrap: normal; }
  .mgsm26-top .mgsm26-top__c--chat { flex-direction: row; padding: 0; gap: 8px; font-weight: 640; }   /* sin padding horizontal (como en el resto del dock): con flex-basis 0 sumaría a su parte y la séptima columna saldría más ancha */
  .mgsm26-top .mgsm26-top__c--chat::before { inset: 4px var(--tp-px); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); background: linear-gradient(to top right, transparent calc(50% - .6px), var(--tp-acc) calc(50% - .6px), var(--tp-acc) calc(50% + .6px), transparent calc(50% + .6px)) no-repeat top right / 10px 10px, var(--tp-acc-soft); }
  .mgsm26-top[dir="rtl"] .mgsm26-top__c--chat::before { clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px); background: linear-gradient(to top left, transparent calc(50% - .6px), var(--tp-acc) calc(50% - .6px), var(--tp-acc) calc(50% + .6px), transparent calc(50% + .6px)) no-repeat top left / 10px 10px, var(--tp-acc-soft); }
  .mgsm26-top .mgsm26-top__c--chat svg { width: 18px; height: 18px; }
  .mgsm26-top .mgsm26-top__c:focus-visible { outline-offset: 0; }
  .mgsm26-top .mgsm26-top__grp--tg::before { inset-block: 12px; }
}

/* el aviso de Support (lo crea site.js al primer toque; aria-hidden, porque «próximamente» ya es parte del nombre accesible de Support): una globo sobre la placa, con los colores invertidos de la barra */
.mgsm26-top .mgsm26-top__tip {
  position: absolute;
  z-index: 5;
  width: max-content;
  max-width: calc(100% - 16px);
  padding: 7px 11px 8px;
  border-radius: 4px;
  background: var(--tp-ink);
  color: var(--tp-b-bg);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .34);
  transform: translateY(-100%);
}
.mgsm26-top .mgsm26-top__tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: calc(var(--tp-tip-x, 50%) - 5px);
  border: 5px solid transparent;
  border-top-color: var(--tp-ink);
}

/* ================================================================== movimiento permitido */
@media (prefers-reduced-motion: no-preference) {
  .mgsm26-top .mgsm26-top__msgs > li { transition: transform .62s var(--tp-ease), opacity .46s ease; }
  .mgsm26-top .mgsm26-top__msgs > li.is-snap { transition: none; opacity: 0; transform: translateY(80%); }
  .mgsm26-top .mgsm26-top__led { animation: mgsm26-top-pulse 2.8s ease-out infinite; }
  /* la pausa del usuario (WCAG 2.2.2) detiene TODO lo que se mueve en la franja, no sólo los mensajes */
  .mgsm26-top[data-rot="user"] .mgsm26-top__led { animation: none; }
  .mgsm26-top .mgsm26-top__c::before, .mgsm26-top .mgsm26-top__pp::before { transition: background-color .18s ease; }
  .mgsm26-top .mgsm26-top__tip { animation: mgsm26-top-tip .2s var(--tp-ease); }
  @keyframes mgsm26-top-tip {
    from { opacity: 0; transform: translateY(calc(-100% + 5px)); }
    to { opacity: 1; transform: translateY(-100%); }
  }
  @keyframes mgsm26-top-pulse {
    0% { box-shadow: 0 0 0 0 var(--tp-led-glow), 0 0 0 3px var(--tp-led-glow); }
    70% { box-shadow: 0 0 0 9px rgba(0, 0, 0, 0), 0 0 0 3px var(--tp-led-glow); }
    100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0), 0 0 0 3px var(--tp-led-glow); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .mgsm26-top .mgsm26-top__msgs > li,
  .mgsm26-top .mgsm26-top__msgs > li.is-out { transform: none; }
  .mgsm26-top .mgsm26-top__scroll { scroll-behavior: auto; }
}

/* colores forzados (Windows alto contraste): los fondos desaparecen, los contornos pasan a ser bordes de verdad */
@media (forced-colors: active) {
  .mgsm26-top .mgsm26-top__a, .mgsm26-top .mgsm26-top__b { border-bottom-color: CanvasText; background: Canvas; }
  .mgsm26-top .mgsm26-top__led { background: Highlight; box-shadow: none; forced-color-adjust: none; }
  .mgsm26-top .mgsm26-top__c::before, .mgsm26-top .mgsm26-top__pp::before { box-shadow: none; border: 1px solid ButtonText; background: none; }
  .mgsm26-top .mgsm26-top__c--chat::before { background: ButtonFace; border: 1px solid ButtonText; }
  .mgsm26-top .mgsm26-top__cta::before { box-shadow: none; border: 1.5px solid ButtonText; background: none; }
  .mgsm26-top .mgsm26-top__cta { color: LinkText !important; }
  .mgsm26-top .mgsm26-top__c, .mgsm26-top .mgsm26-top__pp { color: LinkText !important; }
  .mgsm26-top .mgsm26-top__c--chat, .mgsm26-top .mgsm26-top__c--chat svg { color: ButtonText !important; }
  .mgsm26-top .mgsm26-top__c--off { color: GrayText !important; }
  .mgsm26-top .mgsm26-top__c--off::before { border-style: dashed; border-color: GrayText; }
}
@media print { .mgsm26-top { display: none; } }