/*
 * HUD de la experiencia propia (spec propia §11): lámina técnica con marco de esquinas de 1 px, cajetín abajo y
 * regla lateral. Lo llena scripts/xp/ui/hud-dom.js dentro de [data-xp-hud]; las posiciones exactas (px) salen de
 * ui/hud-layout.js y llegan como estilos en línea y como variables --xp-* en <html>. Aquí van solo el aspecto, los
 * hover (CSS) y los valores de arranque de esas variables para el primer pintado (menú, loader y paneles).
 * Clics (§11.9): todo el HUD con pointer-events: none salvo sus controles, que llevan data-xp-block.
 */

/* Rejilla por defecto hasta que el runtime publique la exacta (mismos cortes que hudLayout). */
:root {
  --xp-m: 24px;
  --xp-arm: 18px;
  --xp-bar-h: 44px;
  --xp-bar-top: calc(100vh - 68px);
  --xp-pad: 16px;
  --xp-fs: 10.5px;
  --xp-fi: 12.5px;
  --xp-col-x: calc(100vw - 568px);
  --xp-col-w: 520px;
  --xp-col-top: 92px;
  --xp-col-bottom: calc(100vh - 92px);
  --xp-menu-right: 48px;
  --xp-menu-cy: 50px;
  --xp-menu-gap: 28px;
  --xp-menu-fs: 10.5px;
}

@media (min-width: 1600px) and (min-height: 800px) {
  :root {
    --xp-m: 32px;
    --xp-arm: 22px;
    --xp-bar-h: 52px;
    --xp-bar-top: calc(100vh - 84px);
    --xp-pad: 20px;
    --xp-fs: 12px;
    --xp-fi: 14px;
    --xp-col-x: calc(100vw - 660px);
    --xp-col-w: 600px;
    --xp-col-top: 116px;
    --xp-col-bottom: calc(100vh - 108px);
    --xp-menu-right: 60px;
    --xp-menu-cy: 62px;
    --xp-menu-gap: 34px;
    --xp-menu-fs: 12px;
  }
}

@media (max-width: 639.98px), (max-height: 639.98px) {
  :root {
    --xp-m: 14px;
    --xp-arm: 12px;
    --xp-bar-h: 36px;
    --xp-bar-top: calc(100vh - 50px);
    --xp-pad: 10px;
    --xp-fs: 9.5px;
    --xp-fi: 12px;
    --xp-col-x: calc(50vw + 2px);
    --xp-col-w: calc(50vw - 16px);
    --xp-col-top: 62px;
    --xp-col-bottom: calc(100vh - 60px);
    --xp-menu-right: 32px;
    --xp-menu-cy: 36px;
    --xp-menu-gap: 16px;
    --xp-menu-fs: 9.5px;
  }
}

@media (max-width: 639.98px) and (orientation: portrait) {
  :root {
    --xp-bar-h: 40px;
    --xp-bar-top: calc(100vh - 54px);
    --xp-col-x: 14px;
    --xp-col-w: calc(100vw - 28px);
    --xp-col-top: 70px;
    --xp-col-bottom: calc(100vh - 64px);
  }
}

/* --- Contenedor ---------------------------------------------------------------------------------- */

.xp-hud {
  position: fixed;
  inset: 0;
  z-index: 350;
  pointer-events: none;
  color: var(--bone);
  font-family: var(--font-tech);
  font-size: var(--xp-hud-fs, var(--xp-fs));
  line-height: 1;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  contain: layout style;
}

html:not(.motion-xp) .xp-hud {
  display: none;
}

.xp-hud [hidden] {
  display: none !important;
}

.xp-hud *,
.xp-hud *::before,
.xp-hud *::after {
  box-sizing: border-box;
}

/* Arranque: nada a la vista; «base» = solo la hairline superior de la barra (la que deja el loader). */
.xp-hud[data-xp-hud-state="boot"] > *,
.xp-hud[data-xp-hud-state="boot"] .xp-hud__line {
  visibility: hidden;
}

.xp-hud[data-xp-hud-state="base"] .xp-hud__frame,
.xp-hud[data-xp-hud-state="base"] .xp-hud__in,
.xp-hud[data-xp-hud-state="base"] .xp-hud__sep,
.xp-hud[data-xp-hud-state="base"] .xp-hud__ruler {
  visibility: hidden;
}

.xp-hud__sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Marco: esquinas de 1 px al 34 % ---------------------------------------------------------------- */

.xp-hud__frame {
  position: absolute;
  inset: 0;
}

.xp-hud__arm {
  position: absolute;
  display: block;
  background: var(--hairline-strong);
}

/* --- Cajetín ----------------------------------------------------------------------------------------- */

.xp-hud__bar {
  position: absolute;
}

.xp-hud__line,
.xp-hud__linefill {
  position: absolute;
  display: block;
  height: 1px;
  background: var(--hairline);
}

.xp-hud__linefill {
  background: var(--hairline-strong);
  transform-origin: 0 50%;
  transform: scaleX(0);
}

.xp-hud__sep {
  position: absolute;
  display: block;
  width: 1px;
  background: var(--hairline-soft);
  transform-origin: 50% 0;
}

.xp-hud__cell {
  position: absolute;
  display: block;
  overflow: hidden;
}

.xp-hud__in {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  padding: 0 var(--xp-hud-pad, var(--xp-pad));
  white-space: nowrap;
}

.xp-hud__cell--brand .xp-hud__in {
  padding-left: 0;
}

.xp-hud__ctl {
  pointer-events: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.xp-hud__ctl:focus-visible {
  outline: 1px solid var(--hairline-strong);
  outline-offset: 3px;
}

/* Marca: A de 16 px + AXIOM; hover: hairline debajo de izquierda a derecha en 0,25 s. */
.xp-hud__brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 100%;
}

.xp-hud__mark {
  display: block;
  width: 16px;
  height: 13.15px;
  fill: var(--bone);
  flex: none;
}

[data-xp-hud-kind="large"] .xp-hud__mark {
  width: 18px;
  height: 14.8px;
}

.xp-hud__brandword {
  position: relative;
  font-size: calc(var(--xp-hud-fs, var(--xp-fs)) + 0.5px);
}

.xp-hud__brandword::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0.13em;
  bottom: -5px;
  height: 1px;
  background: var(--hairline-strong);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 250ms var(--ease-premium);
}

.xp-hud__brand:hover .xp-hud__brandword::after,
.xp-hud__brand:focus-visible .xp-hud__brandword::after {
  transform: scaleX(1);
}

/* Índice: `00` hueso + `/ 03` acero. */
.xp-hud__num {
  font-size: calc(var(--xp-hud-fs, var(--xp-fs)) + 1px);
  color: var(--bone);
}

.xp-hud__total {
  color: var(--steel);
}

/* En móvil la celda del índice mide 60 px: solo cabe `00` (el total sigue para lectores). */
[data-xp-hud-kind^="mobile"] .xp-hud__total {
  display: none;
}

/* Título y subtítulo (Inter acero; en móvil vertical no hay subtítulo). */
.xp-hud__title {
  color: var(--bone);
}

.xp-hud__sub {
  margin-left: 12px;
  color: var(--steel);
  font-family: var(--font-sans);
  font-size: var(--xp-hud-fi, var(--xp-fi));
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.xp-hud__hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--silver);
}

.xp-hud__arrow {
  display: block;
  width: 9px;
  height: 12px;
  color: var(--silver);
  overflow: visible;
}

/* Coordenadas: 2 líneas Michroma de fs − 1 (mínimo 9,5). */
.xp-hud__cell--coords .xp-hud__in {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
}

.xp-hud__coord {
  display: inline-flex;
  align-items: center;
  color: var(--steel);
  font-size: var(--xp-hud-fs-small, 9.5px);
  line-height: 1;
}

.xp-hud__coordpart {
  white-space: pre;
}

.xp-hud__deg {
  position: relative;
  top: -0.42em;
  margin-left: 0.04em;
  font-size: 0.86em;
}

.xp-hud__coord--km {
  color: var(--silver);
}

.xp-hud__kmlabel {
  margin-right: 0.5em;
}

/* Sonido: medidor de 3 barras + SONIDO + OFF/ON. */
.xp-hud__sound {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  width: 100%;
}

[data-xp-hud-kind="mobile-v"] .xp-hud__sound {
  justify-content: center;
}

[data-xp-hud-kind="mobile-v"] .xp-hud__soundword,
[data-xp-hud-kind="mobile-v"] .xp-hud__soundstate {
  display: none;
}

/* Medidor: tres barras huecas (OFF) que se llenan (ON). */
.xp-hud__meter {
  display: block;
  width: 16px;
  height: 16px;
  flex: none;
  overflow: visible;
}

.xp-hud__meter rect {
  fill: var(--bone);
  fill-opacity: 0;
  stroke: var(--silver);
  stroke-width: 1;
  stroke-opacity: 0.75;
}

.xp-hud__base {
  stroke: var(--hairline-strong);
  stroke-width: 1;
  fill: none;
}

.xp-hud__soundstate {
  color: var(--steel);
}

.xp-hud__sound[aria-pressed="true"] .xp-hud__soundstate {
  color: var(--bone);
}

.xp-hud__sound:hover .xp-hud__soundword {
  color: var(--bone);
}

.xp-hud__soundword {
  color: var(--silver);
  transition: color 250ms var(--ease-premium);
}

/* Avance: ESCENA + hairline con relleno al 34 %. */
.xp-hud__progwrap {
  flex: 1;
  min-width: 0;
}

.xp-hud__progwrap > .xp-swap__layer {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.xp-hud__proglabel {
  color: var(--steel);
  font-size: var(--xp-hud-fs-small, 9.5px);
}

.xp-hud__track {
  position: relative;
  display: block;
  flex: 1;
  height: 1px;
  background: var(--hairline);
}

.xp-hud__trackfill {
  position: absolute;
  inset: 0;
  display: block;
  background: var(--hairline-strong);
  transform-origin: 0 50%;
  transform: scaleX(0);
}

/* --- Regla lateral (escritorio) ------------------------------------------------------------------------ */

.xp-hud__ruler {
  position: absolute;
}

.xp-hud__ticks {
  position: absolute;
  inset: 0;
  border-right: 1px solid var(--hairline);
}

.xp-hud__tick {
  position: absolute;
  right: 0;
  display: block;
  width: 4px;
  height: 1px;
  background: var(--hairline);
}

.xp-hud__tick--major {
  width: 9px;
  background: var(--hairline-strong);
}

.xp-hud__marker {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 12px;
  height: 1px;
  background: var(--bone);
}

.xp-hud__jump {
  position: absolute;
  right: 14px;
  padding: 6px 4px;
  margin-top: -1px;
  transform: translateY(-50%);
  color: var(--steel);
  font-size: var(--xp-hud-fs-small, 9.5px);
  line-height: 1;
  transition: color 250ms var(--ease-premium);
}

.xp-hud__jump:hover,
.xp-hud__jump:focus-visible {
  color: var(--bone);
}

/* --- Contador que rueda, cortina y barrido -------------------------------------------------------------- */

.xp-roll {
  display: inline-flex;
  align-items: center;
  gap: 0.08em;
  letter-spacing: 0;
}

.xp-roll__slot {
  position: relative;
  display: inline-grid;
  height: 1em;
  line-height: 1em;
  overflow: hidden;
}

/* Cajas de ancho fijo: los dígitos de Michroma avanzan 0,95–1 em (con 0,72 em se recortaban). */
.xp-roll__slot--digit {
  width: 1em;
  justify-items: center;
}

.xp-roll__a,
.xp-roll__b {
  grid-area: 1 / 1;
  display: block;
  white-space: pre;
  will-change: transform;
}

.xp-cur {
  position: relative;
}

.xp-cur__caret,
.xp-swap__caret {
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 1.1em;
  margin-top: -0.55em;
  background: var(--bone);
  opacity: 0;
  pointer-events: none;
}

.xp-swap {
  position: relative;
  display: inline-grid;
  align-items: center;
}

.xp-swap__layer {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .xp-hud__brandword::after,
  .xp-hud__jump,
  .xp-hud__soundword {
    transition: none;
  }
}