/* ============================================================
   responsive.css
   Mobile-first. Aquí van las media queries y los modos
   "móvil" (scroll-snap) vs "desktop" (paneles centrados grandes
   con parallax/in-view).
   ============================================================ */

/* ---------- Base mobile-first (≤768px) ----------
   - Scroll vertical snap, cada panel ocupa 100vh.
   - Paneles full-width.
   ---------------------------------------------- */

.story-container {
  width: 100%;
}

.chapter {
  padding: var(--space-md) 0 var(--space-lg);
}

.panel {
  width: calc(100% - 24px);
  margin-left: auto;
  margin-right: auto;
}

/* Burbujas en mobile: un poco más compactas */
.bubble {
  font-size: var(--fs-md);
  max-width: 85%;
}

/* ============================================================
   MOBILE: ≤768px
   Scroll-snap vertical, paneles a pantalla completa.
   ============================================================ */
@media (max-width: 768px) {

  /* En móvil scrolleamos el body directamente (sin scroll-snap).
     Más confiable en navegadores móviles que la combinación de
     overflow:hidden + container scrollable + scroll-snap. */
  html.is-mobile,
  html.is-mobile body {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    height: auto;
    min-height: 100dvh;
  }

  html.is-mobile .story-container {
    height: auto;
    min-height: auto;
    overflow: visible;
    padding: 0;
  }

  html.is-mobile .chapter {
    padding: 0;
  }

  /* Paneles apilados, scroll libre. Cada uno con tamaño cómodo en vertical. */
  html.is-mobile .panel {
    width: 100%;
    height: auto;
    margin: 0 0 var(--space-md);
    display: block;
  }

  /* Media con proporción vertical para móvil (más alto que ancho) y un
     mínimo cómodo, sin recortes ni borde. */
  html.is-mobile .panel__media {
    width: 100%;
    aspect-ratio: 3 / 4;
    min-height: 65dvh;
    border-radius: 0;
    border: none;
    box-shadow: none;
  }

  /* La imagen de fondo cubre el contenedor (object-fit cover, fallback safe) */
  html.is-mobile .panel-bg,
  html.is-mobile img.panel-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Burbujas en mobile: forzadas a centrarse y caber en pantalla.
     Override agresivo de cualquier inline width / font-size que Oscar
     haya dejado puesto desde modo edición en desktop. */
  html.is-mobile .bubble,
  html.is-mobile .bubble[style],
  html.is-mobile .bubble[style*="width"],
  html.is-mobile .bubble[style*="left"] {
    left: 50% !important;
    right: auto !important;
    width: auto !important;
    max-width: calc(100vw - 28px) !important;
    height: auto !important;
    max-height: none !important;
    font-size: clamp(14px, 4.2vw, 19px) !important;
    line-height: 1.3 !important;
    padding: 10px 14px !important;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  html.is-mobile .bubble.bubble-narration,
  html.is-mobile .bubble.narration {
    max-width: calc(100vw - 20px) !important;
    font-size: clamp(13px, 3.8vw, 17px) !important;
  }

  /* Sobre-escribir el font-size que pudo persistir desde edición desktop. */
  html.is-mobile .bubble[style*="font-size"] {
    font-size: clamp(14px, 4.2vw, 19px) !important;
  }

  /* Evitar que el panel mismo desborde el ancho del viewport */
  html.is-mobile .panel,
  html.is-mobile .panel__media,
  html.is-mobile .panel__overlay {
    max-width: 100vw;
    overflow: hidden;
  }

  /* En móvil NO se muestran las burbujas que el usuario agregó desde el
     editor (etiquetas tipo "Cap 1 · Panel 1 — ...", notas, pruebas, etc.).
     El móvil es solo para lectura limpia. En desktop siguen visibles para
     poder editarlas o borrarlas. */
  .bubble[data-user-added="true"] {
    display: none !important;
  }

  /* === SALVAVIDAS: las mismas reglas sin depender de html.is-mobile,
     por si el JS no llegó a marcar la clase (modo PC + preview, etc.). === */
  .bubble,
  .bubble[style],
  .bubble[style*="width"],
  .bubble[style*="left"],
  .bubble[style*="font-size"] {
    left: 50% !important;
    right: auto !important;
    width: auto !important;
    max-width: calc(100vw - 28px) !important;
    height: auto !important;
    max-height: none !important;
    font-size: clamp(14px, 4.2vw, 19px) !important;
    line-height: 1.3 !important;
    padding: 10px 14px !important;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  .bubble.bubble-narration,
  .bubble.narration {
    max-width: calc(100vw - 20px) !important;
    font-size: clamp(13px, 3.8vw, 17px) !important;
  }
  .panel,
  .panel__media,
  .panel__overlay {
    max-width: 100vw !important;
    overflow: hidden !important;
  }

  /* Intro de capítulo en mobile: compacta para no estorbar el scroll. */
  html.is-mobile .chapter-intro,
  html.is-mobile .chapter__intro {
    min-height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: var(--space-md) var(--content-padding);
    margin: 0;
  }

  /* Header más compacto en mobile */
  .site-header {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "title actions"
      "indicator indicator";
    padding: var(--space-xs) var(--space-sm);
    min-height: auto;
  }

  .site-header__inner { grid-area: title; }
  .chapter-indicator {
    grid-area: indicator;
    justify-self: center;
    padding: 4px 10px;
    font-size: var(--fs-xs);
  }
  .mute-toggle { grid-area: actions; }

  .site-header__title { font-size: var(--fs-lg); }
  .site-header__subtitle { display: none; }

  /* Burbujas: cola un poco más pequeña, max-width mayor */
  .bubble {
    max-width: 90%;
    font-size: var(--fs-md);
    padding: var(--space-xs) var(--space-sm);
  }

  /* Capítulo title */
  .chapter__title { font-size: var(--fs-xl); }
}

/* ============================================================
   DESKTOP: ≥769px
   Paneles centrados, ancho máximo, parallax / in-view.
   ============================================================ */
@media (min-width: 769px) {

  :root {
    --fs-md: 1.2rem;
    --fs-lg: 1.6rem;
    --fs-xl: 2.2rem;
    --fs-2xl: 3rem;
  }

  html.is-desktop body {
    overflow-y: auto;
  }

  html.is-desktop .story-container {
    max-width: 100%;
    padding: var(--space-md) clamp(1rem, 3vw, 2rem);
  }

  /* Paneles centrados, ancho generoso, aspect cinematográfico 16/9 */
  html.is-desktop .panel {
    max-width: min(1280px, 85vw);
    margin: 0 auto var(--space-xl);
    opacity: 0;
    transform: translateY(40px) scale(0.98);
    transition:
      opacity var(--t-slow),
      transform var(--t-slow);
  }

  /* Animación al entrar en viewport */
  html.is-desktop .panel.in-view {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  /* Media: 16/9 para aprovechar más ancho horizontal. */
  html.is-desktop .panel__media {
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    /* Sombra coloreada con el tinte de la imagen → se funde con el papel
       crema. Fallback a un gris azulado para paneles sin imagen. */
    box-shadow:
      0 28px 70px -18px var(--panel-tint-glow, rgba(31, 42, 58, 0.45)),
      0 8px 22px -8px var(--panel-tint-glow, rgba(31, 42, 58, 0.3));
  }

  /* Intro de capítulo: compacta, alineada al ancho del panel. */
  html.is-desktop .chapter-intro,
  html.is-desktop .chapter__intro {
    max-width: min(1280px, 85vw);
    margin: 0 auto var(--space-md);
    padding: var(--space-md) 0;
    text-align: left;
  }

  /* Parallax sutil: el JS de scrollManager ajusta --parallax-y.
     Aplicamos el transform en un wrapper conceptual ya que el
     media ahora tiene burbujas absolutas dentro (no podemos
     transformarlo sin mover los hijos). El parallax se aplica
     a la imagen de fondo. */
  html.is-desktop .panel__media .panel-bg,
  html.is-desktop .panel__media > img:not(.character-overlay) {
    transform: translate3d(0, var(--parallax-y, 0px), 0) scale(1.08);
    transition: transform 80ms linear;
    will-change: transform;
  }

  /* Capítulo intro: gran espacio + tipografía mayor */
  html.is-desktop .chapter__intro {
    padding: var(--space-xl) var(--content-padding) var(--space-lg);
  }

  html.is-desktop .chapter__title {
    font-size: var(--fs-2xl);
  }

  /* Burbujas más grandes en desktop: 22px line-height 1.3 */
  html.is-desktop .bubble {
    max-width: 38%;
    font-size: 22px;
    line-height: 1.3;
  }

  html.is-desktop .bubble-narration,
  html.is-desktop .bubble.narration {
    max-width: 80%;
    font-size: 22px;
    line-height: 1.3;
  }

  /* Header desktop: subtítulo visible */
  .site-header__subtitle { display: block; }
}

/* ============================================================
   Desktop grande (≥1200px): respiramos más
   ============================================================ */
@media (min-width: 1200px) {
  html.is-desktop .panel {
    margin-bottom: 4rem;
  }
}

/* ============================================================
   Editor de burbujas: variantes responsivas
   En móvil el modo edición queda DESHABILITADO por completo:
   el botón flotante, el panel lateral y el modal de contraseña
   se ocultan para que el cuento se lea sin chrome de edición.
   ============================================================ */

@media (max-width: 768px) {
  .editor-toggle,
  #editor-toggle,
  button#editor-toggle.editor-toggle,
  .bubble-editor,
  .password-modal,
  .edit-mode-hint {
    display: none !important;
  }
}

/* Detección por puntero: cualquier dispositivo táctil (celular, tablet)
   queda sin botón de edición, sin importar el ancho del viewport. */
@media (pointer: coarse) {
  .editor-toggle,
  #editor-toggle,
  button#editor-toggle.editor-toggle,
  .bubble-editor,
  .password-modal,
  .edit-mode-hint {
    display: none !important;
  }
}

/* Mobile: drawer fullscreen desde abajo + tab bar */
@media (max-width: 768px) {
  .editor-panel {
    width: 100vw;
    max-width: 100vw;
    top: auto;
    right: 0;
    left: 0;
    bottom: 0;
    height: 90dvh;
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
    transform: translateY(100%);
    box-shadow: 0 -10px 28px rgba(31, 42, 58, 0.25);
  }

  .editor-panel.is-open {
    transform: translateY(0);
  }

  /* En mobile: mostramos el tab bar y solo la sección activa */
  .editor-tabs {
    display: flex;
  }

  .editor-section {
    display: none;
  }

  .editor-section.is-active {
    display: flex;
  }

  /* El separador no aplica si solo se ve una sección */
  .editor-section + .editor-section {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
  }

  /* Botón flotante un poco más arriba en mobile para evitar
     gestos del navegador en el borde */
  .editor-toggle {
    bottom: calc(var(--space-md) + env(safe-area-inset-bottom, 0px));
  }
}

/* Desktop: tabs ocultas, todas las secciones visibles */
@media (min-width: 769px) {
  .editor-tabs {
    display: none;
  }

  .editor-section {
    display: flex;
  }
}

/* ============================================================
   Preferencia: usuarios con poca movilidad/movimiento
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html.is-desktop .panel {
    opacity: 1;
    transform: none;
  }
  html.is-desktop .panel__media {
    transform: none;
  }
}