/* Aucha · planta 3D — estilos de la vista (navy glass, táctil, offline). */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: #0B3954;
  color: #EAF2F8;
  font: 15px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
#canvas { position: fixed; inset: 0; display: block; touch-action: none; }

/* Barra superior */
#topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 14px; padding-top: max(10px, env(safe-area-inset-top));
  background: linear-gradient(180deg, rgba(6,26,40,.92), rgba(6,26,40,.55) 70%, transparent);
  pointer-events: none;
  animation: hud-in .5s ease-out both;
}
#topbar h1 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: .2px; }
#hud { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.pill {
  background: rgba(13,48,72,.5); border: 1px solid rgba(234,242,248,.16);
  border-radius: 999px; padding: 5px 11px; font-size: 12px; font-weight: 600; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 4px 14px rgba(2,12,20,.35);
  backdrop-filter: blur(12px) saturate(1.3); -webkit-backdrop-filter: blur(12px) saturate(1.3);
}
.pill b { color: #7BC67E; }
.pill.demo { color: #E0A030; border-color: rgba(224,160,48,.5); }

/* Controles inferiores */
#controls {
  position: fixed; left: 0; right: 0; z-index: 6;
  bottom: max(12px, env(safe-area-inset-bottom));
  display: flex; gap: 10px; justify-content: center; padding: 0 12px;
  animation: hud-in .5s .12s ease-out both;
}
#controls button {
  min-height: 48px; min-width: 64px; flex: 0 1 auto;
  border: 1px solid rgba(234,242,248,.22); border-radius: 14px;
  background: rgba(15,52,78,.55); color: #EAF2F8;
  font-size: 14px; font-weight: 700; padding: 0 16px; cursor: pointer;
  position: relative; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 6px 18px rgba(2,12,20,.4);
  backdrop-filter: blur(12px) saturate(1.25); -webkit-backdrop-filter: blur(12px) saturate(1.25);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
#controls button:active {
  transform: translateY(1px) scale(.96);
  box-shadow: inset 0 2px 8px rgba(0,0,0,.4);
}
#controls button:focus-visible,
#panel .answers button:focus-visible {
  outline: 2px solid #16A39A;
  outline-offset: 2px;
}
#controls #btn-ir { background: rgba(22,163,154,.92); border-color: #16A39A; color: #04222b; }
#controls #btn-ar.active { background: #E0A030; border-color: #E0A030; color: #2b2004; }

/* Onda de pulsación (button press) */
.ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(234,242,248,.38) 0%, rgba(234,242,248,.12) 60%, transparent 70%);
  transform: scale(0); opacity: 1;
  animation: ripple .5s ease-out forwards;
}
@keyframes ripple { to { transform: scale(1); opacity: 0; } }
@keyframes hud-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes panel-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Aviso / info de siguiente punto */
#info {
  position: fixed; z-index: 5; left: 14px; right: 14px; top: 62px; max-width: 460px;
  background: rgba(10,40,62,.55); border: 1px solid rgba(234,242,248,.14);
  border-radius: 14px; padding: 10px 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 30px rgba(2,12,20,.4);
  backdrop-filter: blur(14px) saturate(1.25); -webkit-backdrop-filter: blur(14px) saturate(1.25);
}
#info.is-open { animation: hud-in .32s ease-out both; }
#info .t { font-weight: 700; font-size: 14px; }
#info .r { margin-top: 4px; font-size: 12.5px; color: #C7D6E0; }
#info .r code { background: rgba(22,163,154,.22); padding: 1px 5px; border-radius: 5px; }
[hidden] { display: none !important; }

/* Panel de zona (hoja inferior) */
#panel {
  position: fixed; z-index: 8; left: 0; right: 0; bottom: 0;
  background: rgba(9,36,56,.72); border-top: 1px solid rgba(234,242,248,.18);
  border-radius: 18px 18px 0 0; padding: 14px 16px max(14px, env(safe-area-inset-bottom));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 -12px 30px rgba(0,0,0,.35);
  backdrop-filter: blur(18px) saturate(1.25); -webkit-backdrop-filter: blur(18px) saturate(1.25);
}
#panel.is-open { animation: panel-in .3s ease-out both; }
#panel .head { display: flex; align-items: baseline; gap: 10px; justify-content: space-between; }
#panel .nombre { font-size: 17px; font-weight: 700; }
.tag { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 9px; }
.tag.nuevo { background: rgba(255,213,74,.2); color: #FFD54A; border: 1px solid rgba(255,213,74,.55); }
.tag.modificado { background: rgba(255,213,74,.2); color: #FFD54A; border: 1px solid rgba(255,213,74,.55); }
.tag.none { background: rgba(234,242,248,.12); color: #C7D6E0; }
#panel .reqs { margin: 8px 0 10px; font-size: 13px; color: #C7D6E0; }
#panel .reqs code { background: rgba(22,163,154,.22); padding: 1px 6px; border-radius: 6px; margin-right: 6px; }
#panel .nota-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
#panel .nota-row label { font-size: 13px; color: #C7D6E0; }
#panel input#nota {
  flex: 1; min-height: 44px; border-radius: 12px; border: 1px solid rgba(234,242,248,.22);
  background: rgba(6,26,40,.7); color: #EAF2F8; padding: 0 12px; font-size: 14px;
}
#panel .answers { display: flex; gap: 10px; }
#panel .answers button {
  flex: 1; min-height: 64px; border-radius: 14px; border: none;
  font-size: 15px; font-weight: 800; color: #06222b; cursor: pointer;
  position: relative; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 5px 16px rgba(2,12,20,.35);
  transition: transform .12s ease, box-shadow .12s ease;
}
#panel .answers .cumple { background: #7BC67E; }
#panel .answers .nocumple { background: #D64545; color: #fff; }
#panel .answers .na { background: #9AA5AD; color: #10222b; }
#panel .answers button:active {
  transform: translateY(1px) scale(.96);
  box-shadow: inset 0 2px 8px rgba(0,0,0,.35);
}
#panel .flash { margin-top: 10px; font-size: 12.5px; color: #7BC67E; min-height: 16px; }

/* HUD de AR: brújula + cruz */
#ar-hud { position: fixed; inset: 0; z-index: 4; pointer-events: none; }
#ar-hud .cross {
  position: absolute; left: 50%; top: 46%; width: 26px; height: 26px;
  transform: translate(-50%, -50%); opacity: .9;
}
#ar-hud .cross::before, #ar-hud .cross::after {
  content: ""; position: absolute; background: #EAF2F8; box-shadow: 0 0 2px rgba(0,0,0,.6);
}
#ar-hud .cross::before { left: 50%; top: 0; width: 2px; height: 100%; transform: translateX(-50%); }
#ar-hud .cross::after { top: 50%; left: 0; height: 2px; width: 100%; transform: translateY(-50%); }
#ar-hud .compass {
  position: absolute; top: 58px; left: 50%; transform: translateX(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(234,242,248,.4); background: rgba(13,48,72,.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 4px 14px rgba(2,12,20,.35);
  backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2);
}
#ar-hud .needle {
  position: absolute; inset: 0; display: flex; justify-content: center;
  color: #EAF2F8; font-size: 11px; font-weight: 800; transform-origin: 50% 50%;
}
#ar-hud .needle span { margin-top: 2px; }
#ar-hud .needle .n { color: #D64545; }

/* Movimiento reducido: sin animaciones de UI ni onda de pulsación */
@media (prefers-reduced-motion: reduce) {
  #topbar, #controls, #panel, #panel.is-open, #info.is-open { animation: none; }
  .ripple { display: none; }
  #controls button, #panel .answers button { transition: none; }
}