/* Visor Celeste — estilos.
   Paleta nocturna corporativa: #03050d fondo, #c9e04e acento (idéntico al
   visor de mapa). Los colores primario/secundario llegan inyectados por
   PHP en :root para que cambien automáticamente según comarca.

   Para que el usuario use sus propias fotos nocturnas:
     - Splash background: data/fotos/splash.jpg  (fallback gradiente)
     - Fondo del panel "esta noche": data/fotos/noche.jpg
   Si no existen, el visor sigue funcionando con los gradientes por defecto.
*/

:root {
  --vc-bg:           #03050d;
  --vc-bg-card:      rgba(10, 18, 40, 0.85);
  --vc-bg-card-op:   rgba(10, 18, 40, 0.95);
  --vc-borde:        rgba(158, 196, 255, 0.25);
  --vc-borde-fuerte: rgba(158, 196, 255, 0.55);
  --vc-texto:        #e0e8f5;
  --vc-texto-tenue:  #9ec4ff;
  --vc-acento:       #4a5876;   /* azul-gris oscuro y apagado (sin verde ni azul brillante) */
  --vc-error:        #ff6c66;
  --vc-safe-top:     env(safe-area-inset-top, 0);
  --vc-safe-bottom:  env(safe-area-inset-bottom, 0);
  --vc-foto-splash:  url('../data/fotos/splash.jpg');
  --vc-foto-noche:   url('../data/fotos/noche.jpg');
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--vc-bg);
  color: var(--vc-texto);
  font-family: system-ui, -apple-system, sans-serif;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

/* ───────────────────────────────────────────────────────────
   Pantalla de instalación (gate: solo se ve si no está instalada)
   ─────────────────────────────────────────────────────────── */

.vc-instalar {
  position: fixed; inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--vc-bg);
}
.vc-instalar.hidden { display: none; }

.vc-instalar-bg {
  position: absolute; inset: 0;
  background-image: var(--vc-foto-splash);
  background-size: cover;
  background-position: center;
  background-color: #03050d;
}
.vc-instalar-bg::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(3,5,13,.45) 0%, rgba(3,5,13,.92) 100%);
}

.vc-instalar-content {
  position: relative; z-index: 1;
  max-width: 440px; width: 100%;
  text-align: center;
}

.vc-instalar-icon {
  font-size: 64px;
  margin-bottom: 12px;
  filter: drop-shadow(0 0 20px rgba(158,196,255,.4));
}

.vc-instalar-content h1 {
  font-size: 26px;
  font-weight: 700;
  color: var(--vc-texto);
  margin: 0 0 4px;
  letter-spacing: .02em;
}

.vc-instalar-sub {
  color: var(--vc-texto-tenue);
  font-size: 12px;
  letter-spacing: .1em;
  margin: 0 0 24px;
}

.vc-instalar-desc {
  color: var(--vc-texto);
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 28px;
}

.vc-instalar-pasos {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 28px;
}

.vc-instalar-paso {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: rgba(10,18,40,.7);
  border: 1px solid var(--vc-borde);
  border-radius: 12px;
  padding: 14px 16px;
  text-align: left;
  font-size: 14px;
  line-height: 1.5;
}

.vc-instalar-icono-os { font-size: 26px; flex-shrink: 0; margin-top: 2px; }

.vc-chip {
  display: inline-block;
  background: var(--vc-bg-card);
  border: 1px solid var(--vc-borde-fuerte);
  border-radius: 5px;
  padding: 1px 6px;
  font-size: 12px;
  font-family: ui-monospace, monospace;
  white-space: nowrap;
}

.vc-btn-instalar {
  background: rgba(255, 255, 255, 0.14);
  color: var(--vc-texto);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 14px 32px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 28px;
  cursor: pointer;
  margin-bottom: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  transition: transform .15s;
}
.vc-btn-instalar:active { transform: scale(.97); }
.vc-btn-instalar.hidden { display: none; }

.vc-instalar-nota {
  font-size: 11px;
  color: var(--vc-texto-tenue);
  margin-top: 16px;
  line-height: 1.5;
}

/* ───────────────────────────────────────────────────────────
   Splash de inicio
   ─────────────────────────────────────────────────────────── */

.vc-splash {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
  background: var(--vc-bg);
  transition: opacity .5s ease;
}
.vc-splash.hidden {
  opacity: 0;
  pointer-events: none;
}
.vc-splash-bg {
  position: absolute; inset: 0;
  background-image: var(--vc-foto-splash);
  background-size: cover;
  background-position: center;
  /* Si la foto no carga, este pseudo-fondo se ve y queda igualmente bien */
  background-color: var(--vc-bg);
}
.vc-splash-bg::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center,
    rgba(3, 5, 13, 0.3) 0%,
    rgba(3, 5, 13, 0.85) 70%,
    rgba(3, 5, 13, 0.97) 100%);
}
.vc-splash-content {
  position: relative; z-index: 1;
  text-align: center;
}
.vc-splash-content h1 {
  margin: 0 0 8px;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--vc-texto);
  text-shadow: 0 2px 12px rgba(0,0,0,0.7);
}
.vc-splash-content p {
  margin: 0 0 32px;
  color: var(--vc-texto-tenue);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.vc-splash-loader {
  width: 40px; height: 40px;
  margin: 0 auto;
  border: 3px solid rgba(158, 196, 255, 0.25);
  border-top-color: var(--vc-acento);
  border-radius: 50%;
  animation: vc-spin 1s linear infinite;
}
@keyframes vc-spin { to { transform: rotate(360deg); } }

/* ───────────────────────────────────────────────────────────
   Canvas y vídeo
   ─────────────────────────────────────────────────────────── */

#vc-canvas {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  display: block;
  touch-action: none;
}
/* AR overlay — estructura igual que /mapa/ar.js */
.vc-ar-overlay {
  position: fixed; inset: 0; z-index: 70;
  background: #000;
  overflow: hidden;
}
.vc-ar-overlay.hidden { display: none; }

#vc-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
#vc-canvas-ar {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  background: transparent;
  pointer-events: none;
}

body.vc-modo-ar #vc-canvas { display: none; }

/* Solo visible en modo AR */
.vc-modo-ar-only { display: none; }
body.vc-modo-ar .vc-modo-ar-only { display: block; }

/* ───────────────────────────────────────────────────────────
   HUD superior (lugar, fecha, búsqueda)
   ─────────────────────────────────────────────────────────── */

.vc-hud-top {
  position: fixed;
  top: calc(8px + var(--vc-safe-top));
  left: 8px; right: 8px;
  display: flex;
  gap: 10px;
  align-items: center;
  z-index: 10;
  pointer-events: none;
}
.vc-hud-info {
  flex: 0 0 auto;
  background: var(--vc-bg-card);
  border: 1px solid var(--vc-borde);
  backdrop-filter: blur(8px);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 11px;
  line-height: 1.4;
  pointer-events: auto;
  min-width: 110px;
}
#vc-hud-lugar {
  font-weight: 700;
  color: var(--vc-acento);
  font-size: 12px;
  letter-spacing: 0.02em;
}
#vc-hud-fecha {
  color: var(--vc-texto-tenue);
  font-variant-numeric: tabular-nums;
}
#vc-hud-velocidad {
  color: var(--vc-texto);
  font-size: 10px;
  margin-top: 2px;
}
#vc-sensor-info {
  font-size: 9px;
  color: var(--vc-texto-tenue);
  margin-top: 4px;
  font-family: ui-monospace, monospace;
}
#vc-busqueda {
  pointer-events: auto;
  background: var(--vc-bg-card);
  border: 1px solid var(--vc-borde);
  backdrop-filter: blur(8px);
  border-radius: 10px;
  color: var(--vc-texto);
  font-size: 14px;
  outline: none;
  /* Colapsado por defecto: solo se ve el icono */
  width: 0;
  min-width: 0;
  padding: 9px 0;
  border-width: 0;
  margin-right: 0;
  opacity: 0;
  overflow: hidden;
  transition: width .25s ease, opacity .2s ease, margin-right .25s ease, padding .25s ease;
}
.vc-buscador.abierto #vc-busqueda {
  width: min(280px, calc(100vw - 140px));
  padding: 9px 14px;
  border-width: 1px;
  margin-right: 8px;
  opacity: 1;
}
#vc-busqueda::placeholder { color: var(--vc-texto-tenue); }
#vc-busqueda:focus { border-color: var(--vc-acento); }

#vc-busqueda-resultados {
  position: fixed;
  top: calc(60px + var(--vc-safe-top));
  right: 8px;
  width: min(380px, calc(100vw - 16px));
  z-index: 11;
  background: var(--vc-bg-card-op);
  border: 1px solid var(--vc-borde);
  backdrop-filter: blur(12px);
  border-radius: 10px;
  max-height: 50vh;
  overflow-y: auto;
  pointer-events: auto;
}
#vc-busqueda-resultados.hidden { display: none; }
.vc-busq-item {
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--vc-borde);
  display: flex; align-items: baseline; gap: 10px;
}
.vc-busq-item:last-child { border-bottom: none; }
.vc-busq-item:hover, .vc-busq-item:active { background: rgba(158, 196, 255, 0.1); }
.vc-busq-item b { color: var(--vc-acento); }
.vc-busq-item small { color: var(--vc-texto-tenue); font-size: 11px; margin-left: auto; }
.vc-busq-vacio { padding: 14px; color: var(--vc-texto-tenue); text-align: center; }

/* ───────────────────────────────────────────────────────────
   Tabs de modo
   ─────────────────────────────────────────────────────────── */

/* Panel inferior desplegable (bottom sheet): colapsado muestra una fila de 4
   botones; al tirar del tirador hacia arriba se despliega y muestra el resto. */
.vc-barra-inferior {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: var(--vc-bg-card);
  border-top: 1px solid var(--vc-borde);
  border-radius: 16px 16px 0 0;
  backdrop-filter: blur(8px);
  padding: 0 0 calc(6px + var(--vc-safe-bottom));
  z-index: 12;
  box-sizing: border-box;
}
/* Tirador superior */
.vc-barra-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  cursor: grab;
  touch-action: none;       /* para gestionar el swipe sin scroll del navegador */
}
.vc-barra-grip {
  width: 40px;
  height: 4px;
  border-radius: 3px;
  background: var(--vc-borde-fuerte, #4a5575);
  transition: background .2s ease;
}
.vc-barra-inferior.desplegado .vc-barra-grip { background: var(--vc-acento); }

/* Contenedor de botones: envuelve en filas de 4. Colapsado = una fila. */
.vc-barra-botones {
  --vc-fila: 66px;          /* altura exacta de una fila de botones */
  --vc-gap: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--vc-gap);
  padding: 0 8px;
  box-sizing: border-box;
  max-height: var(--vc-fila);   /* colapsado: solo la primera fila */
  overflow: hidden;
  transition: max-height .3s ease;
}
.vc-barra-inferior.desplegado .vc-barra-botones {
  max-height: calc(var(--vc-fila) * 2 + var(--vc-gap) + 4px);  /* dos filas + separación */
}
.vc-barra-botones button {
  flex: 0 0 calc(25% - 0.75 * var(--vc-gap));  /* 4 por fila con separación */
  min-width: 0;
  height: var(--vc-fila);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: none;
  color: var(--vc-texto);
  padding: 6px 2px;
  border-radius: 14px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.vc-barra-botones .vc-ico { font-size: 24px; line-height: 1; }
.vc-barra-botones .vc-lbl {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.vc-barra-botones button:hover { background: rgba(158, 196, 255, 0.12); }
.vc-barra-botones button:disabled { opacity: 0.5; }
.vc-barra-botones button.activo {
  background: var(--vc-acento);
  color: var(--vc-bg);
}
.vc-barra-botones button.activo .vc-lbl { font-weight: 700; }

/* ───────────────────────────────────────────────────────────
   Panel de capas
   ─────────────────────────────────────────────────────────── */

.vc-panel-capas {
  position: fixed;
  top: calc(8px + var(--vc-safe-top));
  right: 8px;
  z-index: 11;
  display: none; /* la búsqueda ocupa este sitio en móvil; mostramos solo en desktop */
}
@media (min-width: 720px) {
  .vc-panel-capas { display: block; top: calc(80px + var(--vc-safe-top)); }
  .vc-hud-top { gap: 10px; }
}
.vc-panel-capas details {
  background: var(--vc-bg-card);
  border: 1px solid var(--vc-borde);
  backdrop-filter: blur(8px);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 12px;
  min-width: 180px;
}
.vc-panel-capas summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--vc-acento);
  list-style: none;
  margin-bottom: 6px;
}
.vc-panel-capas summary::after { content: ' ▾'; }
.vc-panel-capas details[open] summary::after { content: ' ▴'; }
.vc-panel-capas label {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0;
  cursor: pointer;
}
.vc-panel-capas input[type="checkbox"] {
  accent-color: var(--vc-acento);
}

/* ───────────────────────────────────────────────────────────
   Controles de tiempo
   ─────────────────────────────────────────────────────────── */

.vc-controles-tiempo {
  position: fixed;
  bottom: calc(90px + var(--vc-safe-bottom));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  background: var(--vc-bg-card);
  border: 1px solid var(--vc-borde);
  backdrop-filter: blur(8px);
  border-radius: 22px;
  padding: 4px;
  z-index: 10;
}
.vc-controles-tiempo button {
  background: transparent;
  border: none;
  color: var(--vc-texto);
  padding: 6px 10px;
  font-size: 13px;
  border-radius: 18px;
  cursor: pointer;
  min-width: 36px;
}
.vc-controles-tiempo button:hover {
  background: rgba(158, 196, 255, 0.15);
}
.vc-controles-tiempo button:active {
  background: var(--vc-acento);
  color: var(--vc-bg);
}

/* Botón "esta noche" destacado dentro de la barra inferior */
#vc-btn-noche { color: var(--vc-acento); }

/* HUD diagnóstico (toggle con triple-tap en zona info) */
.vc-debug {
  position: fixed;
  top: calc(170px + var(--vc-safe-top));
  left: 8px;
  background: rgba(0, 0, 0, 0.85);
  border: 1px solid var(--vc-acento);
  border-radius: 8px;
  padding: 8px 12px;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  line-height: 1.4;
  color: var(--vc-texto);
  z-index: 50;
  max-width: 320px;
  pointer-events: none;
}
.vc-debug.hidden { display: none; }
.vc-debug b { color: var(--vc-acento); }

/* Botón salir AR */
#vc-btn-salir-ar {
  position: fixed;
  top: calc(12px + var(--vc-safe-top));
  right: 12px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid var(--vc-borde);
  color: var(--vc-texto);
  font-size: 18px;
  cursor: pointer;
  z-index: 75;   /* encima del overlay AR (z-index 70) */
}

/* ───────────────────────────────────────────────────────────
   Panel de información (ficha del objeto seleccionado)
   ─────────────────────────────────────────────────────────── */

/* Texto de la ficha con su padding */
.vc-ficha-texto {
  padding: 14px 16px 12px;
}

/* La ficha de info debe ser visible incluso en modo limpio */
body.vc-limpio .vc-info-panel {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Botón de cierre de la ficha */
.vc-info-close {
  position: absolute;
  top: 8px; right: 8px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid var(--vc-borde);
  color: var(--vc-texto-tenue);
  font-size: 14px;
  cursor: pointer;
  line-height: 28px;
  z-index: 2;
  padding: 0;
}
.vc-info-close:active { background: var(--vc-error); color: #fff; }

/* Foto del objeto en la ficha */
.vc-ficha-foto-wrap {
  background: #000;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  line-height: 0;
}
.vc-ficha-foto {
  width: 100%;
  max-height: min(55vw, 38vh);   /* proporcional al ancho, pero acotado al alto */
  min-height: 160px;
  object-fit: contain;
  object-position: center;
  display: block;
  background: #000;
  border-bottom: 1px solid rgba(158,196,255,0.15);
}

.vc-info-panel {
  position: fixed;
  bottom: calc(190px + var(--vc-safe-bottom));
  left: 8px; right: 8px;
  max-width: 460px;
  margin: 0 auto;
  background: var(--vc-bg-card-op);
  border: 1px solid var(--vc-borde-fuerte);
  backdrop-filter: blur(12px);
  border-radius: 14px;
  overflow: hidden;   /* recortar foto en las esquinas redondeadas */
  padding: 0;           /* el padding ahora lo gestiona el contenido interno */
  font-size: 13px;
  line-height: 1.5;
  /* Limitar al espacio disponible sobre el anclaje inferior para que el borde
     superior nunca se salga de la pantalla (con o sin foto). */
  max-height: calc(100vh - 190px - var(--vc-safe-top) - var(--vc-safe-bottom) - 10px);
  max-height: calc(100dvh - 190px - var(--vc-safe-top) - var(--vc-safe-bottom) - 10px);
  overflow-y: auto;
  z-index: 9;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  animation: vc-slide-up .25s ease;
}
.vc-info-panel.hidden { display: none; }
@keyframes vc-slide-up {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.vc-info-panel h3 {
  margin: 0 0 4px;
  font-size: 17px;
  color: var(--vc-acento);
  font-weight: 700;
}
.vc-info-panel h3 small {
  display: inline-block;
  font-size: 12px;
  color: var(--vc-texto-tenue);
  font-weight: normal;
  font-style: italic;
  margin-left: 4px;
}
.vc-info-panel p.vc-meta {
  margin: 0 0 10px;
  font-size: 11px;
  color: var(--vc-texto-tenue);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.vc-meta-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 11px;
  margin: 0 0 10px;
  color: var(--vc-texto-tenue);
}
.vc-meta-grid b { color: var(--vc-texto); font-weight: 600; }
.vc-info-panel p { margin: 6px 0; }
.vc-info-panel p.vc-curiosidad {
  margin-top: 10px;
  padding: 8px 10px;
  background: rgba(158, 196, 255, 0.08);
  border-left: 3px solid var(--vc-acento);
  border-radius: 4px;
  font-size: 12.5px;
}

/* Mini-mapa de constelación en la ficha */
.vc-const-chart {
  display: block;
  width: 100%;
  max-height: 200px;
  border-radius: 8px;
  margin: 8px 0 14px;
  border: 1px solid var(--vc-borde);
  background: #03050d;
}

.vc-tabla {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0;
  font-size: 12px;
}
.vc-tabla td {
  padding: 4px 6px;
  border-bottom: 1px solid rgba(158, 196, 255, 0.1);
}
.vc-tabla td:first-child {
  color: var(--vc-texto-tenue);
  width: 45%;
}
.vc-tabla td:nth-child(2) {
  color: var(--vc-texto);
  font-variant-numeric: tabular-nums;
}

/* ───────────────────────────────────────────────────────────
   Modal de calibración
   ─────────────────────────────────────────────────────────── */

.vc-modal {
  position: fixed; inset: 0;
  z-index: 50;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.vc-modal.hidden { display: none; }
.vc-modal-card {
  max-width: 360px;
  width: 100%;
  background: var(--vc-bg-card-op);
  border: 1px solid var(--vc-borde-fuerte);
  border-radius: 14px;
  padding: 22px 24px;
  text-align: center;
}
.vc-modal-card h2 {
  margin: 0 0 8px;
  font-size: 18px;
  color: var(--vc-acento);
}

/* ── Calibración figura-8 (mismo patrón visual que Atalaya) ──────────── */
/* Aviso previo de calibración (con botón Aceptar) */
.vc-precalib {
  position: fixed; inset: 0;
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(6px);
  padding: 20px;
}
.vc-precalib.hidden { display: none; }
.vc-precalib-card {
  background: rgba(3,10,3,.96);
  border: 1px solid rgba(158,196,255,.4);
  border-radius: 22px;
  padding: 30px 26px 24px;
  text-align: center;
  width: min(340px, 90vw);
  box-shadow: 0 12px 48px rgba(0,0,0,.7);
}
.vc-precalib-icon { font-size: 44px; margin-bottom: 10px; }
.vc-precalib-card h2 {
  font-size: 19px; font-weight: 700; color: #fff; margin: 0 0 12px;
}
.vc-precalib-card p {
  font-size: 14.5px; color: rgba(255,255,255,.72);
  line-height: 1.55; margin: 0 0 22px;
}
.vc-precalib-ok {
  background: var(--vc-acento);
  color: var(--vc-bg);
  border: none;
  border-radius: 14px;
  padding: 13px 32px;
  font-size: 16px; font-weight: 700;
  cursor: pointer;
  width: 100%;
}
.vc-precalib-ok:active { filter: brightness(.92); }

.vc-calib {
  position: fixed; inset: 0;
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(6px);
}
.vc-calib.hidden { display: none; }
.vc-calib-card {
  background: rgba(3,10,3,.96);
  border: 1px solid rgba(158,196,255,.4);
  border-radius: 22px;
  padding: 28px 28px 22px;
  text-align: center;
  width: min(320px, 88vw);
  box-shadow: 0 12px 48px rgba(0,0,0,.7);
}
.vc-calib-titulo {
  font-size: 17px; font-weight: 700;
  color: #fff; margin-bottom: 16px;
}
.vc-calib-svg {
  width: 200px; height: 100px;
  display: block; margin: 0 auto 14px;
  overflow: visible;
}
.vc-calib-hint {
  font-size: 14px; color: rgba(255,255,255,.6);
  line-height: 1.5; margin-bottom: 20px;
}
.vc-calib-hint b { color: rgba(255,255,255,.9); }
.vc-calib-ok {
  display: block; width: 100%;
  background: rgba(158,196,255,.22);
  border: 1px solid rgba(158,196,255,.5);
  border-radius: 12px;
  color: #9ec4ff; font-size: 15px; font-weight: 600;
  padding: 12px; cursor: pointer;
}
.vc-calib-ok:active { background: rgba(158,196,255,.38); }
.vc-calib-astro {
  display: block; width: 100%; margin-top: 8px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 12px;
  color: rgba(255,255,255,.6); font-size: 13px; font-weight: 500;
  padding: 10px; cursor: pointer;
}
.vc-calib-astro.hidden { display: none; }
.vc-calib-astro:active { background: rgba(255,255,255,.08); }
.vc-calib-prog {
  width: 100%; height: 4px; background: rgba(255,255,255,.12);
  border-radius: 2px; margin: 10px 0;
}
#vc-calib-fill {
  height: 100%; width: 0%; background: #9ec4ff;
  border-radius: 2px; transition: width .1s linear;
}

.vc-cal-mensaje {
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0 0 16px;
  color: var(--vc-texto);
}
.vc-cal-objetivo {
  background: rgba(158, 196, 255, 0.1);
  border: 1px solid var(--vc-borde);
  border-radius: 8px;
  padding: 10px;
  margin: 10px 0 16px;
  font-size: 14px;
}
.vc-cal-objetivo.hidden { display: none; }
.vc-cal-objetivo b { color: var(--vc-acento); display: block; font-size: 16px; }
.vc-cal-objetivo small { display: block; color: var(--vc-texto-tenue); font-size: 11px; margin-top: 2px; }
.vc-cal-progreso {
  background: rgba(158, 196, 255, 0.1);
  height: 6px;
  border-radius: 3px;
  margin: 10px 0 20px;
  overflow: hidden;
}
.vc-cal-progreso.hidden { display: none; }
.vc-cal-progreso-bar {
  background: var(--vc-acento);
  height: 100%;
  width: 0%;
  transition: width .3s ease;
}
.vc-cal-accion {
  background: var(--vc-acento);
  color: var(--vc-bg);
  border: none;
  padding: 12px 28px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 22px;
  cursor: pointer;
}

/* ───────────────────────────────────────────────────────────
   Modo nocturno (rojo escotópico)
   ─────────────────────────────────────────────────────────── */

body.vc-nocturno {
  filter: hue-rotate(-50deg) saturate(2) brightness(0.7);
}
body.vc-nocturno .vc-controles-tiempo,
body.vc-nocturno .vc-barra-inferior,
body.vc-nocturno .vc-info-panel {
  filter: none; /* mantener legibilidad de controles */
}

/* ───────────────────────────────────────────────────────────
   Responsive
   ─────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .vc-buscador.abierto #vc-busqueda { font-size: 13px; padding: 8px 12px; }
  .vc-barra-inferior .vc-ico { font-size: 23px; }
  .vc-barra-inferior .vc-lbl { font-size: 12px; }
  .vc-info-panel { font-size: 12.5px; padding: 12px 14px; }
  .vc-info-panel h3 { font-size: 15px; }
}

/* ───────────────────────────────────────────────────────────
   Flash messages (toast minimal)
   ─────────────────────────────────────────────────────────── */
.vc-flash {
  position: fixed;
  top: calc(50% + 100px);
  left: 50%;
  transform: translate(-50%, 0);
  background: var(--vc-bg-card-op);
  border: 1px solid var(--vc-acento);
  color: var(--vc-acento);
  padding: 10px 20px;
  border-radius: 22px;
  font-size: 13px;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  z-index: 85;   /* encima del overlay AR y de los diálogos */
  white-space: nowrap;
  max-width: 90vw;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vc-flash-show { opacity: 1; }

/* ───────────────────────────────────────────────────────────
   Banner consejo AR
   ─────────────────────────────────────────────────────────── */
.vc-ar-banner {
  position: fixed;
  top: calc(70px + var(--vc-safe-top));
  left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px;
  background: var(--vc-bg-card-op);
  border: 1px solid var(--vc-acento);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 12.5px;
  color: var(--vc-texto);
  max-width: calc(100vw - 24px);
  z-index: 82;   /* encima del overlay AR */
  animation: vc-slide-up .3s ease;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
.vc-ar-banner button {
  background: var(--vc-acento);
  border: none;
  color: var(--vc-bg);
  padding: 4px 12px;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
}

/* Cursor de arrastre activo */
body.vc-arrastrando { cursor: grabbing; }
body.vc-arrastrando #vc-canvas-ar { cursor: grabbing; }

/* ── Diálogo calibración astronómica ─────────────────────── */
.vc-cal-dialog {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.72);
  display: flex; align-items: flex-end; justify-content: center;
  z-index: 80;   /* por encima del overlay AR (z-index 70) */
  animation: vc-fade-in .2s ease;
}
.vc-cal-inner {
  background: var(--vc-bg-card);
  border-radius: 18px 18px 0 0;
  padding: 20px 16px calc(20px + var(--vc-safe-bottom));
  width: 100%; max-width: 480px;
  max-height: 80vh; overflow-y: auto;
}
.vc-cal-inner h3 {
  margin: 0 0 6px; font-size: 15px; color: var(--vc-acento);
}
.vc-cal-inner p {
  margin: 0 0 14px; font-size: 12px; color: var(--vc-texto-tenue);
}
.vc-cal-lista {
  display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px;
}
.vc-cal-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--vc-bg-card-op);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px; padding: 10px 14px;
  color: var(--vc-texto); text-align: left; cursor: pointer;
  font-size: 13px;
  transition: background .15s;
}
.vc-cal-item:active { background: var(--vc-acento); color: #000; }
.vc-cal-sym  { font-size: 20px; width: 26px; text-align: center; }
.vc-cal-nombre { flex: 1; font-weight: 600; }
.vc-cal-pos { font-size: 11px; color: var(--vc-texto-tenue); white-space: nowrap; }
.vc-cal-cancel {
  width: 100%; padding: 11px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px; color: var(--vc-texto);
  font-size: 13px; cursor: pointer;
}

/* ── Paso "enfocar objeto" ── */
.vc-cal-enfocar { background: rgba(0,0,0,.55); }  /* más transparente para ver la cámara */
.vc-cal-enfocar-instruccion {
  font-size: 14px; color: var(--vc-texto-tenue);
  text-align: center; margin: 0 0 10px;
}
.vc-cal-enfocar-objeto {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; margin-bottom: 16px;
}
.vc-cal-enfocar-nota {
  font-size: 12px; color: var(--vc-texto-tenue);
  text-align: center; margin: 0 0 14px;
}
.vc-cal-confirmar {
  width: 100%; padding: 14px;
  background: var(--vc-acento);
  border: none; border-radius: 12px;
  color: #000; font-weight: 700; font-size: 16px;
  cursor: pointer;
}

/* ── Crosshair de puntería ── */
.vc-cal-crosshair {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 60px; height: 60px;
  pointer-events: none;
  z-index: 81;
}
.vc-cal-ch-h {
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 2px; margin-top: -1px;
  background: var(--vc-acento);
  opacity: 0.85;
}
.vc-cal-ch-v {
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 2px; margin-left: -1px;
  background: var(--vc-acento);
  opacity: 0.85;
}

/* Modo limpio: oculta todo excepto el canvas, la barra inferior (que se
   vacía visualmente) y el botón de visión limpia para poder volver. */
body.vc-limpio .vc-hud-top,
body.vc-limpio .vc-controles-tiempo,
body.vc-limpio .vc-panel-capas,
body.vc-limpio .vc-info-panel,
body.vc-limpio #vc-debug,
body.vc-limpio .vc-ar-banner,
body.vc-limpio #vc-btn-salir-ar {
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
/* La barra inferior se oculta por completo (sin panel ni botón verde). Se
   restaura con la X de arriba (vc-btn-salir-limpio) o con doble toque. */
body.vc-limpio .vc-barra-inferior {
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}

/* Botón X para salir de visión limpia — mismo patrón que la X de Cámara. */
#vc-btn-salir-limpio {
  display: none;
  position: fixed;
  top: calc(12px + var(--vc-safe-top));
  right: 12px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid var(--vc-borde);
  color: var(--vc-texto);
  font-size: 18px;
  cursor: pointer;
  z-index: 60;
}
body.vc-limpio #vc-btn-salir-limpio { display: block; }

/* ───────────────────────────────────────────────────────────
   Modo galería — tira de navegación entre constelaciones
   ─────────────────────────────────────────────────────────── */

.vc-galeria-hud {
  position: fixed;
  bottom: calc(58px + var(--vc-safe-bottom));   /* encima de las tabs */
  left: 50%;
  transform: translateX(-50%);
  background: var(--vc-bg-card-op);
  border: 1px solid rgba(158, 196, 255, 0.35);
  border-radius: 22px;
  padding: 7px 18px;
  z-index: 20;
  pointer-events: none;    /* no captura toques — el cielo sigue siendo táctil */
  white-space: nowrap;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55);
  animation: vc-slide-up .25s ease;
}
.vc-galeria-hud.hidden { display: none; }

.vc-galeria-label {
  font-size: 18px;
  font-weight: 700;
  color: var(--vc-acento);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* En modo limpio la tira sigue visible (es contenido activo del modo) */
body.vc-limpio .vc-galeria-hud {
  opacity: 1;
  pointer-events: auto;
}

/* ───────────────────────────────────────────────────────────
   Indicador meteorológico en HUD superior
   ─────────────────────────────────────────────────────────── */

.vc-hud-meteo {
  display: none;   /* indicador de cielo/calidad oculto; el detalle está en "Esta noche" */
  position: absolute;
  top: calc(8px + var(--vc-safe-top));
  right: 10px;
  font-size: 14px;
  color: var(--vc-texto-tenue);
  cursor: pointer;
  letter-spacing: .02em;
  user-select: none;
}

/* ───────────────────────────────────────────────────────────
   Panel meteorológico (dentro de vc-info-panel)
   ─────────────────────────────────────────────────────────── */

.vc-meteo-bloque {
  background: rgba(158, 196, 255, 0.07);
  border: 1px solid var(--vc-borde);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
}

.vc-meteo-cabecera {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.vc-meteo-icono  { font-size: 28px; line-height: 1; }
.vc-meteo-calidad { font-size: 15px; letter-spacing: .04em; }
.vc-meteo-texto  { font-size: 12px; color: var(--vc-texto-tenue); }

.vc-tabla-meteo { margin-bottom: 10px; }

/* Gráfico de barras de previsión horaria */
.vc-meteo-prevision {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 52px;
  margin-top: 8px;
  overflow-x: auto;
}

.vc-meteo-hora {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 36px;
}

.vc-meteo-hora span {
  font-size: 9px;
  color: var(--vc-texto-tenue);
  white-space: nowrap;
}

.vc-meteo-barra-wrap {
  width: 20px;
  height: 36px;
  background: rgba(158, 196, 255, 0.1);
  border-radius: 3px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.vc-meteo-barra {
  width: 100%;
  border-radius: 3px 3px 0 0;
  min-height: 2px;
  transition: height .3s ease;
}

/* ───────────────────────────────────────────────────────────
   Marca QRdescubre (QR en negrita)
   ─────────────────────────────────────────────────────────── */

.vc-qr { font-weight: 800; letter-spacing: .01em; }

.vc-marca {
  flex: 0 0 auto;
  font-size: 15px;
  letter-spacing: .03em;
  color: rgba(224, 232, 245, 0.9);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

/* Buscador colapsable: icono que despliega el input */
.vc-buscador {
  flex: 0 1 auto;
  margin-left: auto;   /* separa la lupa de QRdescubre, alineada a la derecha */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  pointer-events: auto;
}
.vc-busqueda-toggle {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--vc-bg-card);
  border: 1px solid var(--vc-borde);
  backdrop-filter: blur(8px);
  border-radius: 10px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: var(--vc-texto);
}
.vc-buscador.abierto .vc-busqueda-toggle { border-color: rgba(255, 255, 255, 0.3); }

/* ───────────────────────────────────────────────────────────
   Aviso inicial (precisión de sensores)
   ─────────────────────────────────────────────────────────── */

.vc-aviso {
  position: fixed; inset: 0;
  z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(6px);
  padding: 20px;
}
.vc-aviso.hidden { display: none; }
.vc-aviso-card {
  background: rgba(5, 8, 18, 0.97);
  border: 1px solid rgba(158, 196, 255, 0.32);
  border-radius: 22px;
  padding: 28px 24px 22px;
  text-align: center;
  width: min(360px, 92vw);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.7);
}
.vc-aviso-icon { font-size: 42px; margin-bottom: 8px; }
.vc-aviso-card h2 {
  font-size: 19px; font-weight: 700; color: #fff; margin: 0 0 12px;
}
.vc-aviso-card p {
  font-size: 14px; color: rgba(255, 255, 255, 0.74);
  line-height: 1.55; margin: 0 0 14px; text-align: left;
}
.vc-aviso-tip {
  font-size: 13px !important; color: var(--vc-texto-tenue) !important;
  margin-bottom: 20px !important;
}
.vc-aviso-ok {
  background: rgba(255, 255, 255, 0.14);
  color: var(--vc-texto);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 14px;
  padding: 13px 32px;
  font-size: 16px; font-weight: 700;
  cursor: pointer;
  width: 100%;
}
.vc-aviso-ok:active { filter: brightness(.92); }

/* ───────────────────────────────────────────────────────────
   Tour guiado (resalta cada control)
   ─────────────────────────────────────────────────────────── */

.vc-tour {
  position: fixed; inset: 0;
  z-index: 10000;
  pointer-events: auto;   /* bloquea la interacción con la página debajo */
}
.vc-tour.hidden { display: none; }

.vc-tour-spot {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 14px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.78);
  pointer-events: none;
  transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease;
}

.vc-tour-card {
  position: absolute;
  width: min(300px, 88vw);
  background: rgba(5, 8, 18, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 16px 18px 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7);
  pointer-events: auto;
}
.vc-tour-paso {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--vc-texto-tenue); margin: 0 0 4px;
}
.vc-tour-card h3 {
  font-size: 17px; font-weight: 700; color: #fff; margin: 0 0 6px;
}
.vc-tour-card > p:not(.vc-tour-paso) {
  font-size: 13.5px; color: rgba(255, 255, 255, 0.78);
  line-height: 1.5; margin: 0 0 14px;
}
.vc-tour-acciones {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.vc-tour-nav { display: flex; gap: 8px; }
.vc-tour-saltar {
  background: none; border: none; cursor: pointer;
  color: rgba(255, 255, 255, 0.5); font-size: 13px; padding: 8px 4px;
}
.vc-tour-prev {
  background: rgba(158, 196, 255, 0.12);
  color: var(--vc-texto);
  border: 1px solid var(--vc-borde);
  border-radius: 10px; padding: 8px 14px; font-size: 13px; cursor: pointer;
}
.vc-tour-prev:disabled { opacity: .4; cursor: default; }
.vc-tour-next {
  background: rgba(255, 255, 255, 0.14); color: var(--vc-texto);
  border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 10px; padding: 8px 16px;
  font-size: 13px; font-weight: 700; cursor: pointer;
}