/*! MendozaGSM · barra superior propia (assets/mgsm2026/site.css) — SIN gate.
 *
 * La carga site.tpl (que head.tpl incluye en TODAS las páginas) con y sin el rediseño y con la cookie mgsm2026=0: es la hoja de UNA sola pieza, la franja
 * .mgsm26-bar, 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: el 2026-10-12 se llevó la barra vieja). Con el rediseño, mgsm2026.css sólo le pone la tipografía (Mona Sans) y la transición de tema.
 *
 * REGLAS
 *   1. Todo cuelga de `.mgsm26-bar` (la clase la imprime site.tpl): ni `:root`, ni selectores de elemento sueltos, ni @font-face ni @keyframes. Los tokens son
 *      variables --tb-* declaradas sobre el propio .mgsm26-bar.
 *   2. Sin JS, sin imágenes, sin fuentes remotas, sin movimiento: una franja estática de una línea (dos en teléfono).
 *   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. `pointer-events: none` en la franja y `auto` en los enlaces, y data-cs-allow en el marcado: convivencia con el script de protección de copia de DHRU, que
 *      ya andaba así con la barra anterior. Ningún nombre de clase puede caer en los selectores con los que el CSS del pie de DHRU oculta cosas (lo comprueba package.sh).
 *   5. Alto de toque de 44 px (la caja visible del botón es más baja y vive en un ::before). Etiquetas largas desde 1200 px, cortas por debajo; el mensaje («API online 24/7 — instant!»,
 *      inglés para todos los idiomas, con lang="en" dir="ltr" propios) se ve en todos los anchos; en teléfono (< 768 px) la franja pasa a dos filas: mensaje + «Recargar», y abajo los
 *      cuatro contactos con su rótulo corto.
 */

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

.mgsm26-bar {
  --tb-bg: #101115;
  --tb-ink: #eceae5;
  --tb-chip: rgba(255, 255, 255, .06);
  --tb-chip-hover: rgba(255, 255, 255, .13);
  --tb-line: rgba(255, 255, 255, .14);
  --tb-cta: #e3b180;
  --tb-cta-fill: rgba(227, 177, 128, .12);
  --tb-focus: #8ea2ff;
  --tb-wa: #4ae08a;
  --tb-tg: #56b9ef;
  --tb-gut: clamp(16px, 4vw, 32px);

  position: relative;
  display: block;
  margin: 0;
  padding: 0 10px;
  background: var(--tb-bg);
  color: var(--tb-ink);
  border-bottom: 1px solid var(--tb-line);
  font-family: 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.3;
  letter-spacing: 0;
  text-align: start;
  text-transform: none;
  pointer-events: none;
}

/* 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-bar {
  --tb-bg: #eeece6;
  --tb-ink: #1c1d21;
  --tb-chip: rgba(17, 18, 20, .05);
  --tb-chip-hover: rgba(17, 18, 20, .1);
  --tb-line: rgba(17, 18, 20, .16);
  --tb-cta: #70401a;
  --tb-cta-fill: rgba(112, 64, 26, .12);
  --tb-focus: #2447e0;
  --tb-wa: #178a47;
  --tb-tg: #1f7fc0;
}
html:not(.mgsm26):has(link[href*="themes/theme8.css"]) .mgsm26-bar {
  --tb-bg: #eeece6;
  --tb-ink: #1c1d21;
  --tb-chip: rgba(17, 18, 20, .05);
  --tb-chip-hover: rgba(17, 18, 20, .1);
  --tb-line: rgba(17, 18, 20, .16);
  --tb-cta: #70401a;
  --tb-cta-fill: rgba(112, 64, 26, .12);
  --tb-focus: #2447e0;
  --tb-wa: #178a47;
  --tb-tg: #1f7fc0;
}

.mgsm26-bar a { pointer-events: auto; }

/* ---------------------------------------------------------------- teléfono (base) */
.mgsm26-bar .mgsm26-bar__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 8px;
  row-gap: 0;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
}
.mgsm26-bar .mgsm26-bar__msg {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  padding: 4px 0;
  color: var(--tb-ink);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  text-wrap: balance;
}

/* «Recargar»: contorno corte SIM (esquina cortada arriba a la derecha), alto de toque 44 con caja visual de 32 */
.mgsm26-bar .mgsm26-bar__cta {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 7px;
  min-height: 44px;
  margin: 0;
  padding: 0 14px 0 12px;
  border: 0;
  background: none;
  color: var(--tb-cta) !important;
  font-size: 12px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: .07em;
  text-decoration: none !important;
  text-transform: uppercase;
  white-space: nowrap;
}
.mgsm26-bar .mgsm26-bar__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(--tb-cta) calc(50% - .6px), var(--tb-cta) calc(50% + .6px), transparent calc(50% + .6px)) no-repeat top right / 7px 7px,
    var(--tb-cta-fill);
  box-shadow: inset 0 0 0 1.5px var(--tb-cta);
}
.mgsm26-bar .mgsm26-bar__cta svg { flex: none; width: 14px; height: 14px; fill: currentColor; }
.mgsm26-bar:lang(ar) .mgsm26-bar__cta { letter-spacing: 0; }

/* contactos: en teléfono, una fila de cuatro con el ícono sobre el rótulo corto */
.mgsm26-bar .mgsm26-bar__chips {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  flex: 0 0 100%;
  margin: 0;
  padding: 0 0 2px;
}
.mgsm26-bar .mgsm26-bar__chip {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 0 2px;
  border: 0;
  background: none;
  color: var(--tb-ink) !important;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.1;
  text-decoration: none !important;
  white-space: nowrap;
}
.mgsm26-bar .mgsm26-bar__chip::before {
  content: "";
  position: absolute;
  inset: 3px 0;
  z-index: -1;
  border: 1px solid var(--tb-line);
  border-radius: 8px;
  background: var(--tb-chip);
}
.mgsm26-bar .mgsm26-bar__chip svg { flex: none; width: 16px; height: 16px; fill: currentColor; }
.mgsm26-bar .mgsm26-bar__chip--wa svg { color: var(--tb-wa); }
.mgsm26-bar .mgsm26-bar__chip--tg svg { color: var(--tb-tg); }
.mgsm26-bar .mgsm26-bar__long { display: none; }
.mgsm26-bar .mgsm26-bar__short { display: inline; }

.mgsm26-bar .mgsm26-bar__cta:focus-visible,
.mgsm26-bar .mgsm26-bar__chip:focus-visible { outline: 2px solid var(--tb-focus); outline-offset: 2px; }
@media (hover: hover) {
  .mgsm26-bar .mgsm26-bar__chip:hover::before { background: var(--tb-chip-hover); }
}

/* ------------------------------------------------------- tableta y escritorio: una sola línea */
@media (min-width: 768px) {
  .mgsm26-bar { padding-inline: max(var(--tb-gut), calc((100% - 1320px) / 2 + 15px)); }
  .mgsm26-bar .mgsm26-bar__in { flex-wrap: nowrap; column-gap: 14px; max-width: none; margin: 0; }
  .mgsm26-bar .mgsm26-bar__msg { padding: 0; font-size: 13px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mgsm26-bar .mgsm26-bar__cta { margin-inline-start: auto; }
  .mgsm26-bar .mgsm26-bar__chips { display: flex; flex: none; gap: 2px; padding: 0; }
  .mgsm26-bar .mgsm26-bar__chip { flex-direction: row; gap: 6px; padding: 0 10px; font-size: 12.5px; line-height: 1.3; }
  .mgsm26-bar .mgsm26-bar__chip::before { inset: 7px 0; }
  .mgsm26-bar .mgsm26-bar__chip svg { width: 15px; height: 15px; }
}
@media (min-width: 1200px) {
  .mgsm26-bar .mgsm26-bar__long { display: inline; }
  .mgsm26-bar .mgsm26-bar__short { display: none; }
}
/* teléfonos muy angostos: el botón y el mensaje comparten la primera fila */
@media (max-width: 359px) {
  .mgsm26-bar .mgsm26-bar__cta { padding: 0 10px; letter-spacing: .03em; }
  .mgsm26-bar .mgsm26-bar__chip { font-size: 10.5px; }
}

/* colores forzados (Windows alto contraste): los fondos desaparecen, los contornos pasan a ser bordes de verdad */
@media (forced-colors: active) {
  .mgsm26-bar { border-bottom-color: CanvasText; }
  .mgsm26-bar .mgsm26-bar__cta::before { box-shadow: none; border: 1.5px solid ButtonText; }
  .mgsm26-bar .mgsm26-bar__chip::before { border-color: ButtonText; }
  .mgsm26-bar .mgsm26-bar__cta, .mgsm26-bar .mgsm26-bar__chip { color: LinkText !important; }
}
@media print { .mgsm26-bar { display: none; } }