/**
 * Aula Verde · shell responsive
 * Bloque 1: viewport, safe areas, z-index, a11y
 * Bloque 2: Cordobéz + dock + sheets
 */

/* --- Viewport: regiones fullscreen --- */
#app {
  width: 100vw;
  height: 100vh;
  max-height: 100vh;
}

@supports (height: 100dvh) {
  #app {
    height: 100dvh;
    max-height: 100dvh;
  }
}

/* --- Atlas: mapa con altura mínima fluida --- */
.map-card {
  min-height: var(--map-min-h);
}

/* --- Safe areas estructurales --- */
.topbar {
  padding-top: calc(18px + var(--safe-top));
  padding-left: calc(22px + var(--safe-left));
  padding-right: calc(22px + var(--safe-right));
}

.panel.open,
#comprehensionPanel.open {
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
}

/* --- Capas z-index --- */
.hotspots {
  z-index: var(--z-hotspots) !important;
}

.topbar {
  z-index: var(--z-hud) !important;
}

.map-hud,
.zoom-controls,
.map-control-rail,
.route-strip {
  z-index: var(--z-hud) !important;
}

.bottom-dock,
.map-footer-controls {
  z-index: var(--z-dock) !important;
}

.cordobez-widget {
  z-index: var(--z-cordobez) !important;
}

.sheet-backdrop {
  z-index: var(--z-sheet-backdrop) !important;
}

#sheet.sheet {
  z-index: var(--z-sheet) !important;
}

.panel.open,
#comprehensionPanel.open {
  z-index: var(--z-modal) !important;
}

.overlay:not(.hidden),
.attract.show {
  z-index: var(--z-modal-backdrop) !important;
}

.toast.show,
.toast {
  z-index: var(--z-toast) !important;
}

/* =========================================================
   BLOQUE 2 — Cordobéz oculto / no interactuable
   ========================================================= */

#app.sheet-open .cordobez-widget,
#app.modal-open .cordobez-widget,
#app:has(.panel.open) .cordobez-widget,
#app:has(#comprehensionPanel.open) .cordobez-widget,
#app:has(.overlay:not(.hidden)) .cordobez-widget,
#app:has(.attract.show) .cordobez-widget {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: scale(0.92);
}

@media (min-width: 1024px) {
  /* Desktop: reducir presencia detrás del sheet (sigue debajo por z-index) */
  #app.sheet-open .cordobez-widget {
    opacity: 0.28 !important;
    visibility: visible !important;
    pointer-events: none !important;
    transform: scale(0.9);
  }
}

/* =========================================================
   BLOQUE 2 — Dock / footer + reservas Cordobéz
   ========================================================= */

.bottom-dock,
.map-footer-controls {
  padding-bottom: calc(12px + var(--safe-bottom));
  padding-left: calc(12px + var(--safe-left) + var(--cordobez-reserve-x));
  padding-right: calc(12px + var(--safe-right));
  box-sizing: border-box;
}

.map-footer-controls .layers,
.bottom-dock .layers {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-2);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: 2px;
}

.map-footer-controls .layer,
.bottom-dock .layer,
.map-footer-controls .tool-btn,
.bottom-dock .tool-btn {
  min-height: var(--touch-target-min);
  min-width: var(--touch-target-min);
  flex: 0 0 auto;
}

@media (max-width: 767.98px) {
  .map-footer-controls .layer,
  .bottom-dock .layer {
    min-height: var(--touch-target);
  }

  .map-shell {
    /* Reserva inferior aproximada: dock + breathing room */
    --map-safe-bottom: calc(var(--dock-h) + var(--cordobez-reserve-y) + var(--safe-bottom));
  }
}

@media (min-width: 1024px) {
  .bottom-dock,
  .map-footer-controls {
    padding-left: calc(18px + var(--safe-left));
  }
}

/* =========================================================
   BLOQUE 2 — Discovery sheet
   ========================================================= */

#sheet.sheet {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  padding-top: var(--safe-top) !important;
  padding-bottom: 0 !important;
  padding-right: var(--safe-right) !important;
  padding-left: var(--safe-left) !important;
}

#sheet .sheet-top {
  flex: 0 0 auto !important;
}

#sheet .sheet-content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

#sheet .sheet-actions {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 4;
  flex: 0 0 auto;
  display: flex !important;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0 !important;
  padding: var(--space-4) var(--space-page) calc(var(--space-4) + var(--safe-bottom)) !important;
  background: linear-gradient(
    180deg,
    rgba(4, 17, 13, 0),
    rgba(4, 17, 13, 0.97) 28%,
    rgba(4, 17, 13, 1)
  ) !important;
}

#sheet .sheet-actions button {
  min-height: var(--touch-target) !important;
  min-width: var(--touch-target-min);
}

/* Desktop: panel lateral */
@media (min-width: 1024px) {
  #sheet.sheet {
    width: var(--sheet-w-desktop) !important;
    max-width: var(--sheet-max) !important;
    left: auto !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 32px 0 0 32px !important;
  }

  @supports (height: 100dvh) {
    #sheet.sheet {
      height: 100dvh !important;
      max-height: 100dvh !important;
    }
  }

  #sheet .sheet-image,
  #sheet .sheet-icon-hero {
    height: clamp(220px, 32vh, 420px) !important;
    max-height: 42vh !important;
    object-fit: contain !important;
  }

  #sheet h2 {
    font-size: var(--fs-display) !important;
  }
}

/* Tablet: casi full / 72–80vw */
@media (min-width: 768px) and (max-width: 1023.98px) {
  #sheet.sheet {
    width: min(80vw, 720px) !important;
    max-width: 100vw !important;
    left: auto !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 28px 0 0 28px !important;
  }

  @supports (height: 100dvh) {
    #sheet.sheet {
      height: 100dvh !important;
      max-height: 100dvh !important;
    }
  }

  #sheet .sheet-image,
  #sheet .sheet-icon-hero {
    height: auto !important;
    max-height: 32dvh !important;
    object-fit: cover !important;
  }

  #sheet h2 {
    font-size: var(--fs-h1) !important;
  }
}

/* Móvil: full viewport */
@media (max-width: 767.98px) {
  #sheet.sheet {
    width: 100% !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    border-left: 0 !important;
  }

  @supports (height: 100dvh) {
    #sheet.sheet {
      height: 100dvh !important;
      max-height: 100dvh !important;
    }
  }

  #sheet .sheet-top {
    padding: calc(12px + var(--safe-top)) var(--space-page) 8px !important;
  }

  #sheet .sheet-content {
    padding: 4px var(--space-page) var(--space-3) !important;
  }

  #sheet .sheet-image,
  #sheet .sheet-icon-hero {
    height: auto !important;
    max-height: 28dvh !important;
    object-fit: cover !important;
    padding: 12px !important;
  }

  #sheet .sheet-icon-hero {
    display: grid !important;
    place-items: center;
    font-size: clamp(48px, 12vw, 72px) !important;
  }

  #sheet h2 {
    font-size: var(--fs-h1) !important;
    margin: 12px 0 6px !important;
  }

  #sheet .sheet-actions {
    flex-direction: column !important;
  }

  #sheet .sheet-actions button {
    width: 100%;
    min-height: 48px !important;
    max-height: none;
  }

  #sheet .sheet-close {
    width: var(--touch-target) !important;
    height: var(--touch-target) !important;
    flex: 0 0 var(--touch-target) !important;
  }
}

/* Backdrop: debajo del sheet, encima del mapa; Cordobéz debajo por z-index */
.sheet-backdrop {
  z-index: var(--z-sheet-backdrop) !important;
}

.sheet-backdrop.show {
  pointer-events: auto;
}

/* =========================================================
   Accesibilidad base
   ========================================================= */

.icon-btn:focus-visible,
.layer:focus-visible,
.sheet-close:focus-visible,
.panel-close:focus-visible,
.cordobez-widget .cordobez-launcher:focus-visible,
.map-reset:focus-visible,
.cta:focus-visible,
.ghost:focus-visible,
#sheet .sheet-actions button:focus-visible {
  outline: 2px solid var(--av-focus-ring);
  outline-offset: 3px;
}

.icon-btn,
.sheet-close,
.panel-close,
.map-reset {
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .cordobez-widget[data-state="idle"] .cordobez-face,
  .cordobez-widget[data-state="listening"] .cordobez-launcher,
  .hotspot .ring,
  .hotspot .ring2 {
    animation: none !important;
  }
}