/* =========================================================
   San Juan 1944 · Visor 3D / Realidad aumentada
   Basado en el modelo de programación g2 (model-viewer)
   ========================================================= */

html, body.visor {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

/* 1. FONDO: luz cálida baja, como la plaza al anochecer */
body.visor {
  background:
    radial-gradient(70% 45% at 50% 68%, rgba(216, 195, 160, 0.22) 0%, rgba(216, 195, 160, 0) 70%),
    radial-gradient(120% 70% at 50% 0%, #22325a 0%, rgba(34, 50, 90, 0) 65%),
    var(--noche);
}

model-viewer {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background-color: transparent;
  --poster-color: transparent;
  --progress-bar-color: transparent;
}

/* Velo inferior para que los controles se lean sobre el modelo */
.velo {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: calc(240px + var(--seguro-abajo));
  background: linear-gradient(to top, rgba(10, 16, 32, 0.92) 0%, rgba(10, 16, 32, 0.6) 55%, rgba(10, 16, 32, 0) 100%);
  pointer-events: none;
  z-index: 1;
}
body.visor.sin-ra-activo .velo { height: calc(290px + var(--seguro-abajo)); }
#viewer[ar-status="session-started"] .velo,
#viewer[ar-status="object-placed"] .velo { display: none; }

/* Barra de carga propia */
.carga {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 120;
  pointer-events: none;
}
.carga__barra {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--adobe), var(--tinta));
  transition: width 0.25s ease, opacity 0.4s ease 0.2s;
}
.carga.lista .carga__barra { opacity: 0; }

/* 2. ENCABEZADO */
.barra {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  align-items: start;
  gap: 12px;
  padding: calc(14px + var(--seguro-arriba)) 16px 0;
  pointer-events: none;
}
.barra > * { pointer-events: auto; }

.circular {
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(17, 26, 46, 0.55);
  border: 1px solid var(--linea-fuerte);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--papel);
  text-decoration: none;
  transition: transform 0.15s ease;
}
.circular:active { transform: scale(0.94); }
.circular svg { width: 22px; height: 22px; }

.barra__titulo { text-align: center; padding-top: 2px; min-width: 0; }
.barra__titulo h1 {
  font-size: var(--t-l);
  font-weight: 600;
  text-shadow: 0 2px 12px rgba(5, 8, 18, 0.6);
}
.barra__titulo .destino { margin-top: 6px; font-size: var(--t-xs); }

/* 3. CONTROL DE AUDIO (como en el modelo g2) */
#audio-control {
  position: absolute;
  top: calc(78px + var(--seguro-arriba));
  left: 16px;
  z-index: 100;
  display: none;
  align-items: center;
  gap: 10px;
  padding: 9px 16px 9px 12px;
  border-radius: 999px;
  background: rgba(17, 26, 46, 0.55);
  border: 1px solid var(--linea-fuerte);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--papel);
  font-family: var(--f-titulo);
  font-size: var(--t-s);
  letter-spacing: 0.02em;
  transition: transform 0.15s ease;
}
#audio-control.disponible { display: flex; }
#audio-control:active { transform: scale(0.95); }
#audio-icon { width: 22px; height: 22px; flex: none; }
#audio-icon .ondas { transition: opacity 0.2s; }
#audio-control.muted #audio-icon .ondas { opacity: 0; }
#audio-control:not(.muted) { border-color: var(--adobe); }

/* 4. PANEL INFERIOR
   Pila desde abajo: créditos → botón RA (o aviso sin RA) → escala */
body.visor {
  --pie: calc(18px + var(--seguro-abajo));
  --alto-ra: 52px;
}
body.visor.sin-ra-activo { --alto-ra: 100px; }

.panel {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99;
  width: max-content;
  max-width: calc(100% - 32px);
}

.developer-credit { bottom: var(--pie); }

#ar-button,
.sin-ra { bottom: calc(var(--pie) + 30px); }

.escala {
  bottom: calc(var(--pie) + 30px + var(--alto-ra) + 18px);
  text-align: center;
}
.escala__opciones {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  padding: 4px;
  border-radius: 999px;
  background: rgba(17, 26, 46, 0.6);
  border: 1px solid var(--linea);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.escala__opciones button {
  min-height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  font-family: var(--f-titulo);
  font-size: var(--t-s);
  color: var(--polvo);
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.escala__opciones button[aria-pressed="true"] {
  background: rgba(241, 236, 226, 0.14);
  color: var(--papel);
}
.escala__medida {
  margin-top: 7px;
  font-size: var(--t-s);
  font-style: italic;
  color: var(--polvo);
  text-shadow: 0 1px 8px rgba(5, 8, 18, 0.8);
}

/* 5. BOTÓN DE INGRESO A AR (slot ar-button del modelo g2) */
#ar-button {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99;
  min-width: min(320px, calc(100% - 32px));
  white-space: nowrap;
  box-shadow: 0 10px 28px rgba(5, 8, 18, 0.45);
}
#ar-button:active { transform: translateX(-50%) scale(0.97); }

/* Mensaje cuando el dispositivo no tiene RA */
.sin-ra {
  display: none;
  align-items: center;
  gap: 14px;
  width: min(380px, calc(100% - 32px));
  padding: 12px 14px;
  border-radius: var(--radio);
  background: rgba(17, 26, 46, 0.7);
  border: 1px solid var(--linea);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: var(--t-s);
  line-height: 1.45;
  color: rgba(241, 236, 226, 0.88);
}
.sin-ra.visible { display: flex; }
.sin-ra__qr {
  width: 76px; height: 76px;
  padding: 6px;
  border-radius: 8px;
  background: var(--papel);
  flex: none;
}
.sin-ra__qr:empty { display: none; }
.sin-ra__qr svg { width: 100%; height: 100%; display: block; }

/* 6. CRÉDITOS STUDIO PENCA */
.developer-credit {
  font-family: var(--f-titulo);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  color: rgba(241, 236, 226, 0.72);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  text-align: center;
  white-space: nowrap;
}
.developer-credit b { color: var(--papel); font-weight: 600; }

/* 7. MANO GUÍA */
#ar-prompt {
  position: absolute;
  left: 50%;
  bottom: 180px;
  transform: translateX(-50%);
  display: none;
  pointer-events: none;
}
#ar-prompt img { width: 80px; animation: moveHand 2s infinite ease-in-out; }
@keyframes moveHand {
  0%, 100% { transform: translateX(-20px); }
  50% { transform: translateX(20px); }
}

/* 8. DISPARADOR FOTO / VIDEO */
.shutter {
  position: absolute;
  bottom: calc(40px + var(--seguro-abajo));
  left: 50%;
  transform: translateX(-50%);
  width: 72px; height: 72px;
  border-radius: 50%;
  border: 5px solid white;
  background: rgba(0, 0, 0, 0.1);
  cursor: pointer;
  z-index: 10;
  display: none;
  touch-action: none;
}
.shutter:active { background: white; }
.shutter.recording { border-color: #ff4444; background: rgba(255, 68, 68, 0.3); }
.shutter-ayuda {
  position: absolute;
  bottom: calc(124px + var(--seguro-abajo));
  left: 50%;
  transform: translateX(-50%);
  display: none;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  font-family: var(--f-titulo);
  font-size: var(--t-xs);
  color: white;
  white-space: nowrap;
}

/* Estados de la sesión de RA */
#viewer[ar-status="session-started"] > #ar-prompt { display: block; }
#viewer[ar-status="session-started"] .shutter,
#viewer[ar-status="object-placed"] .shutter,
#viewer[ar-status="object-placed"] .shutter-ayuda { display: block; }
#viewer[ar-status="session-started"] .barra,
#viewer[ar-status="object-placed"] .barra,
#viewer[ar-status="session-started"] .panel,
#viewer[ar-status="object-placed"] .panel,
#viewer[ar-status="session-started"] #audio-control,
#viewer[ar-status="object-placed"] #audio-control,
#viewer[ar-status="session-started"] #ar-button,
#viewer[ar-status="object-placed"] #ar-button,
#viewer[ar-status="session-started"] .carga,
#viewer[ar-status="object-placed"] .carga { display: none; }

/* Aviso breve (foto guardada, etc.) */
.aviso {
  position: fixed;
  left: 50%;
  top: calc(20px + var(--seguro-arriba));
  transform: translate(-50%, -20px);
  z-index: 200;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--papel);
  color: var(--noche);
  font-family: var(--f-titulo);
  font-size: var(--t-s);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.aviso.visible { opacity: 1; transform: translate(-50%, 0); }

/* 9. HOJA DE HISTORIA */
.hoja {
  width: 100%;
  max-width: 640px;
  max-height: 86dvh;
  margin: auto auto 0;
  padding: 0;
  border: 0;
  border-radius: 22px 22px 0 0;
  background: var(--noche-alta);
  color: var(--papel);
  box-shadow: 0 -20px 60px rgba(5, 8, 18, 0.6);
  overflow: hidden;
}
.hoja[open] { animation: subir 0.32s cubic-bezier(0.2, 0.8, 0.2, 1); }
.hoja::backdrop { background: rgba(5, 8, 18, 0.55); }
@keyframes subir { from { transform: translateY(40px); opacity: 0; } }

.hoja__contenido {
  max-height: 86dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 24px calc(28px + var(--seguro-abajo));
}
.hoja__asa {
  width: 40px; height: 4px;
  margin: 0 auto 14px;
  border-radius: 4px;
  background: var(--linea-fuerte);
}
.hoja__cabecera {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 16px;
}
.hoja h2 { font-size: var(--t-xl); }
.hoja__sub { margin-top: 6px; font-style: italic; color: var(--polvo); }
.hoja__cerrar { flex: none; width: 40px; height: 40px; }

.datos {
  margin: 22px 0 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 10px 18px;
  padding: 16px 0;
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
  font-size: var(--t-s);
}
.datos dt { font-family: var(--f-titulo); color: var(--adobe); }
.datos dd { margin: 0; color: rgba(241, 236, 226, 0.9); }

.historia { margin-top: 20px; max-width: 62ch; }
.historia p { line-height: 1.7; color: rgba(241, 236, 226, 0.9); }
.historia p + p { margin-top: 14px; }
.historia .nota { font-size: var(--t-s); font-style: italic; color: var(--polvo); }

.siguiente {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 28px;
  padding: 16px 18px;
  border-radius: var(--radio);
  border: 1px solid var(--linea-fuerte);
  text-decoration: none;
  font-family: var(--f-titulo);
}
.siguiente small { display: block; color: var(--polvo); font-size: var(--t-xs); margin-bottom: 2px; }
.siguiente svg { width: 20px; height: 20px; flex: none; color: var(--adobe); }

@media (min-width: 760px) {
  .hoja { border-radius: 22px; margin: auto; }
  .barra { padding-left: 28px; padding-right: 28px; }
  #audio-control { left: 28px; }
}