/*! =============================================================================
 *  © 2026 Renzo Núñez · RonBStudio — "Perú Elige 2026 · Segunda Vuelta".
 *  Todos los derechos reservados. Código propietario: queda prohibida su copia,
 *  redistribución, ingeniería inversa o uso no autorizado, total o parcial.
 *  https://www.ronbstudio.com
 * ============================================================================= */
/* =============================================================================
 *  Proyecto      : Perú Elige 2026 — Segunda Vuelta
 *  Archivo       : mobile-sheet.css
 *  Descripción   : Drawer bottom-sheet para mobile (≤768px). Inspirado en
 *                  apps de mapas (estilo Google Maps). Se usa para
 *                  mostrar el panel detalle de la región seleccionada
 *                  como un bottom-sheet arrastrable, en lugar de
 *                  desplazarlo debajo del mapa donde se pierde de vista.
 *
 *                  3 estados:
 *                    · closed    → drawer fuera del viewport (no visible)
 *                    · peek      → ~120px visibles desde abajo (handle + título)
 *                    · expanded  → casi todo visible (90vh)
 *
 *                  Política Opción B: este componente SOLO se activa
 *                  en mobile (≤768px). En desktop la regla `display: none`
 *                  global lo deja fuera del flujo, y el panel detalle
 *                  vive en su columna lateral como siempre.
 *
 *                  El JS de `mobile-sheet.js` mueve el `#mapa-panel`
 *                  (aside con el NavDetailPanel adentro) dentro del
 *                  `.mobile-sheet__content` al activarse mobile, y lo
 *                  devuelve al aside original al volver a desktop.
 *
 *  Autor         : Renzo Núñez · RonBStudio
 *  Versión       : 0.1.15.9
 * ===========================================================================*/

:root {
  /* Tokens locales del sheet. Pixeles, no rem, porque trabajamos con
     translateY en pixeles para el touch logic.
     v0.1.13.6: peek aumentado de 120 a 180 para que entren el versus
     compacto + barra de poder + porcentajes en una sola vista del peek.
     v0.1.15.20: subido a 330 para que entre NOMBRE + fotos + barra + margen
     sin tener que expandir (mantener sync con PEEK_VISIBLE_PX en mobile-sheet.js). */
  --sheet-height        : 90vh;
  --sheet-peek-visible  : 330px;
  --sheet-handle-height : 32px;
  --sheet-radius        : 16px;
  --sheet-z             : 100;
  --sheet-backdrop-z    : 99;
  --sheet-transition    : 280ms cubic-bezier(0.4, 0, 0.2, 1);
}


/* =============================================================================
 *  Backdrop — overlay oscuro detrás del drawer cuando está expanded
 * ===========================================================================*/

.mobile-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 250ms ease;
  z-index: var(--sheet-backdrop-z);

  /* Solo aparece en mobile, y solo cuando el drawer está expanded.
     La regla base lo deja `display: none` para que ni siquiera
     reciba eventos en desktop. */
  display: none;
}

.mobile-sheet-backdrop.is-visible {
  opacity: 1;
  pointer-events: auto;
}


/* =============================================================================
 *  Sheet — el drawer en sí
 * ===========================================================================*/

.mobile-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--sheet-height);
  z-index: var(--sheet-z);

  /* v0.1.13.9: mismo fondo del .nav-detail (panel PC) para que el
     bottom-sheet y el card del detalle dialoguen como pareja visual.
     Radial gradient indigo top-left + blanco como base, igual que en
     desktop. El #mapa-panel adentro queda transparent (regla más
     abajo) para que se vea este fondo a través del drawer. */
  background:
    radial-gradient(
      ellipse at top left,
      var(--c-mv-mapa-radial-from) 0%,
      var(--c-mv-mapa-radial-mid)  60%,
      transparent 100%
    ),
    var(--c-mv-bg-card);
  border-top: 1px solid var(--c-mv-card-border);
  border-top-left-radius: var(--sheet-radius);
  border-top-right-radius: var(--sheet-radius);
  box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.15);

  /* Estado por default: closed (completamente fuera del viewport). */
  transform: translateY(100%);
  transition: transform var(--sheet-transition);

  /* Solo se activa en mobile. Desktop: display: none → invisible y sin
     eventos, no afecta el flujo del aside original. */
  display: none;
  flex-direction: column;

  /* Importante para que el scroll interno del content no propague
     scroll al body cuando llega a los extremos. */
  overscroll-behavior: contain;
}

@media (max-width: 768px) {
  .mobile-sheet { display: flex; }
  .mobile-sheet-backdrop { display: block; }
}

/* Estados ─────────────────────────────────────────────────────────── */

.mobile-sheet[data-state="closed"] {
  transform: translateY(100%);
}

.mobile-sheet[data-state="peek"] {
  /* 120px visibles arriba del viewport bottom. El resto del drawer
     queda debajo del viewport. El usuario ve el handle + nombre de
     la región seleccionada como "tarjeta asomando" desde abajo. */
  transform: translateY(calc(100% - var(--sheet-peek-visible)));
}

.mobile-sheet[data-state="expanded"] {
  /* Drawer ocupa 90vh. El 10vh superior queda visible del mapa para
     contexto (el usuario sigue viendo qué región está mirando). */
  transform: translateY(0);
}

/* Mientras se arrastra, se quita la transición para que siga al dedo
   en tiempo real. JS le aplica style.transform inline durante el drag,
   y al soltar remueve la clase + el inline para que vuelva a animar
   al estado snap. */
.mobile-sheet.is-dragging {
  transition: none;
}


/* =============================================================================
 *  Handle — barra superior arrastrable (touch target + indicador visual)
 * ===========================================================================*/

.mobile-sheet__handle {
  flex-shrink: 0;
  height: var(--sheet-handle-height);

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: grab;
  user-select: none;

  /* touch-action: none para gestionar el drag manualmente sin que
     el navegador interprete el touchmove como scroll. */
  touch-action: none;

  /* Pequeña separación visual del contenido abajo. */
  border-bottom: 1px solid rgba(15, 23, 42, 0.04);
}

.mobile-sheet__handle:active {
  cursor: grabbing;
}

.mobile-sheet__handle-bar {
  width: 44px;
  height: 4px;
  border-radius: 2px;
  background: var(--c-mv-ink-soft);
  opacity: 0.45;
  transition: opacity 150ms ease;
}

.mobile-sheet__handle:hover .mobile-sheet__handle-bar,
.mobile-sheet__handle:active .mobile-sheet__handle-bar {
  opacity: 0.7;
}


/* =============================================================================
 *  Content — donde se monta el #mapa-panel via JS en mobile
 * ===========================================================================*/

.mobile-sheet__content {
  flex: 1;
  overflow-y: auto;
  /* Padding 0 — el contenido (NavDetailPanel) ya tiene su propio padding. */
  padding: 0;
  /* Smooth scroll interno (iOS / momentum). */
  -webkit-overflow-scrolling: touch;
}

/* v0.1.15.8: en peek, todo el contenido asomado es tappable para
   expandir (ver _onContentTap en mobile-sheet.js). El cursor pointer
   lo hace descubrible en el debug con mouse. En expanded vuelve a
   default para no sugerir click sobre el detalle ya abierto.
   v0.1.15.9: `touch-action: none` en peek para que el navegador NO
   inicie su scroll nativo cuando el dedo arrastra sobre el cuerpo del
   peek — así el JS captura el gesto y arrastra el drawer en lugar de
   scrollear la página de fondo. En expanded el content recupera el
   scroll nativo (no se aplica esta regla). */
.mobile-sheet[data-state="peek"] .mobile-sheet__content {
  cursor: pointer;
  touch-action: none;
}

/* Cuando el #mapa-panel está dentro del sheet (mobile), removemos su
   border y margin de aside para que se integre limpio. */
@media (max-width: 768px) {
  .mobile-sheet__content > #mapa-panel {
    margin: 0;
    border: none;
    background: transparent;
  }
}