/* ============================================================
   style.css — Mínimo: en VR casi no hay DOM (§7). Esto es el chrome de
   escritorio: canvas a pantalla completa, overlay de carga, HUD y la
   atribución obligatoria de Esri.
   Las reglas de touch/overscroll ya están puestas pensando en el teléfono
   dentro del visor (§9.9).
   ============================================================ */
:root {
  --ink: #e8efe0;
  --panel: rgba(10, 20, 13, .72);
  --muted: #a8c0ab;
  --gold: #e8d9a0;
  --bad: #e57373;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  background: #0d1a10; color: var(--ink);
  font: 14px/1.5 -apple-system, Segoe UI, Roboto, system-ui, sans-serif;
  touch-action: none; user-select: none; overscroll-behavior: none;
}

#vista { display: block; width: 100%; height: 100%; outline: none; }

/* --- Overlay de carga --- */
#carga {
  position: fixed; inset: 0; z-index: 30; display: flex;
  flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: #0d1a10;
}
#carga .marca { font-size: 20px; font-weight: 600; letter-spacing: .01em; }
#carga .marca span { color: var(--gold); }
#carga .txt { color: var(--muted); font-variant-numeric: tabular-nums; }
#carga .barra { width: min(320px, 60vw); height: 4px; background: #1b3122; border-radius: 3px; overflow: hidden; }
#carga .barra i { display: block; height: 100%; width: 0; background: #6a9c4a; transition: width .2s ease; }

/* --- Chrome de escritorio --- */
#escenario {
  position: fixed; top: 12px; left: 12px; z-index: 10;
  background: var(--panel); padding: 7px 13px; border-radius: 8px;
  backdrop-filter: blur(4px);
}
#ayuda {
  position: fixed; bottom: 34px; left: 12px; z-index: 10;
  background: var(--panel); padding: 7px 13px; border-radius: 8px;
  color: var(--muted); font-size: 12px; line-height: 1.7; max-width: 46ch;
  backdrop-filter: blur(4px);
}
#ayuda kbd {
  background: #1e3626; border-radius: 4px; padding: 1px 5px; color: var(--ink);
  font: 11px ui-monospace, monospace;
}
#hud {
  position: fixed; top: 12px; right: 12px; z-index: 10; display: none;
  background: var(--panel); padding: 7px 12px; border-radius: 8px;
  font: 12px/1.5 ui-monospace, monospace; text-align: right;
}
#hud2 {
  position: fixed; z-index: 10; display: none;
  background: var(--panel); padding: 6px 10px; border-radius: 8px;
  font: 11px/1.45 ui-monospace, monospace; text-align: center;
}
#hud .warn, #hud2 .warn { color: var(--gold); }

/* --- Modo cardboard (§9.7) ---
   El canvas queda partido en dos mitades, una por ojo, así que cualquier
   overlay de una esquina cae fuera de lo que se ve por las lentes. El HUD se
   duplica al centro de cada mitad y el resto del chrome de escritorio se
   apaga. Los botones van al borde inferior, sobre la costura: no se pueden
   tocar con el visor puesto, y ahí no tapan la escena. */
body.estereo #escenario,
body.estereo #ayuda { display: none !important; }

body.estereo #hud,
body.estereo #hud2 {
  top: 22%; right: auto; text-align: center;
  transform: translateX(-50%);
  /* `width: max-content` es imprescindible: con `left: 75%` y ancho auto, el
     ancho disponible es el 25 % que queda hasta el borde, así que el panel del
     ojo derecho se encogía y cortaba los renglones en distinto lugar que el
     izquierdo (visible en la captura del dueño del 2026-07-25). Los dos
     paneles tienen que ser idénticos o el estéreo del HUD no fusiona. */
  width: max-content; max-width: 46vw;
  /* Idénticos también en tipografía y padding: los dos paneles tienen que ser
     el MISMO objeto visual para que el texto fusione (con 12px/7px en uno y
     11px/6px en el otro quedaban 4 px de diferencia de ancho). */
  padding: 6px 10px;
  font: 11px/1.45 ui-monospace, monospace;
}
/* Los dos paneles van a los CENTROS DE LENTE, no al 25/75 % del ancho: si la
   separación está calibrada (--sep, la escribe display-cardboard.js) el texto
   tiene que quedar donde queda la imagen, o el HUD no fusiona aunque la escena
   sí. Sin calibración, --sep = 50vw y esto da 25 % / 75 % como antes. */
body.estereo #hud { left: calc(50% - var(--sep, 50vw) / 2); }
body.estereo #hud2 { left: calc(50% + var(--sep, 50vw) / 2); }

/* --- Banner del tour (P6, §9.13) ---
   Va abajo y al centro en escritorio; en cardboard se duplica a los centros
   de lente, con las mismas reglas que el HUD (width: max-content y tipografía
   idéntica en los dos, o el texto no fusiona). */
#tour, #tour2 {
  position: fixed; z-index: 15; display: none;
  bottom: 15%; left: 50%; transform: translateX(-50%);
  background: var(--panel); border-radius: 999px; padding: 8px 18px;
  font: 600 14px/1.3 -apple-system, Segoe UI, Roboto, system-ui, sans-serif;
  text-align: center; width: max-content; max-width: 80vw;
  color: var(--gold); pointer-events: none;
}
body.estereo #tour, body.estereo #tour2 {
  bottom: 22%; font-size: 12px; padding: 6px 12px; max-width: 42vw;
}
body.estereo #tour { left: calc(50% - var(--sep, 50vw) / 2); }
body.estereo #tour2 { left: calc(50% + var(--sep, 50vw) / 2); }

/* --- Botones del modo VR --- */
#vr-botones {
  position: fixed; bottom: 12px; left: 50%; transform: translateX(-50%);
  z-index: 20; display: flex; gap: 8px;
}
#vr-botones button {
  font: 600 14px/1 -apple-system, Segoe UI, Roboto, system-ui, sans-serif;
  color: var(--ink); background: rgba(30, 54, 38, .92);
  border: 1px solid #3d6b47; border-radius: 999px; padding: 12px 20px;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
#vr-botones button:active { background: #3d6b47; }
#vr-botones button[hidden] { display: none; }

/* Aviso (p. ej. "no se detecta el giroscopio"). Va al centro-abajo para que
   se lea con el teléfono en la mano, que es cuando importa. */
#aviso {
  position: fixed; bottom: 64px; left: 50%; transform: translateX(-50%);
  z-index: 25; display: none; max-width: min(560px, 88vw); text-align: center;
  background: rgba(40, 26, 10, .92); border: 1px solid #7a5c22; border-radius: 10px;
  padding: 10px 14px; font-size: 13px; line-height: 1.5;
}
/* El reporte de la sesión WebXR: es largo y son números, así que va alineado
   a la izquierda y con scroll propio. Dentro de la sesión el DOM no se ve, así
   que esto es lo único que queda de lo medido (P7). */
#aviso.reporte { text-align: left; max-height: 60vh; overflow: auto; }
#aviso pre {
  margin: 6px 0; font: 12px/1.45 ui-monospace, monospace;
  white-space: pre-wrap; word-break: break-word;
}

/* Atribución obligatoria de la imagen satelital (§9.1) */
#credito {
  position: fixed; bottom: 6px; right: 8px; z-index: 10;
  font-size: 11px; color: var(--muted); background: rgba(10, 20, 13, .5);
  padding: 2px 8px; border-radius: 6px;
}
#credito a { color: var(--muted); }

#error {
  position: fixed; inset: auto 12px 12px 12px; z-index: 40; display: none;
  background: #1a0d0d; color: var(--bad); padding: 12px; border-radius: 8px;
  font: 12px/1.5 ui-monospace, monospace; white-space: pre-wrap; max-height: 40vh; overflow: auto;
}

@media (max-width: 760px) { #ayuda { display: none; } }