/* ───────────────────────────────────────────────────────────
   Jungla Digital — modo tarjetas (móvil): scroll seccionado con
   snap, cada tarjeta ocupa la pantalla real (svh) y su contenido
   queda centrado verticalmente. Solo interviene bajo 782px y con
   html[data-jd-cards] puesto por card-view.js.
   ─────────────────────────────────────────────────────────── */

@media (max-width: 781px) {
  html[data-jd-cards] {
    /* proximity, no mandatory: las tarjetas que caben snapean igual,
       pero una tarjeta más alta que la pantalla se puede leer completa
       sin que el imán te arrastre a la siguiente sección. */
    scroll-snap-type: y proximity;
    scroll-padding-top: var(--jd-header-h, 64px);
  }

  html[data-jd-cards] .jd-cardview__card {
    /* pantalla real del celu: svh respeta la barra del navegador */
    min-height: calc(100vh - var(--jd-header-h, 64px));
    min-height: calc(100svh - var(--jd-header-h, 64px));
    display: flex;
    flex-direction: column;
    justify-content: center; /* ← SIEMPRE centrado verticalmente */
    scroll-snap-align: start;
    box-sizing: border-box;
    padding: 14px 0 calc(14px + env(safe-area-inset-bottom, 0px));
  }
  /* una tarjeta más alta que la pantalla se recorre libre y snapea al borde */
  html[data-jd-cards] .jd-cardview__card > * { min-width: 0 }

  /* ── barra de progreso tipo Stories ── */
  html[data-jd-cards] .jd-cardview__progress {
    position: fixed;
    top: var(--jd-header-h, 64px);
    left: 0; right: 0;
    z-index: 55;
    display: flex;
    gap: 5px;
    padding: 8px clamp(14px, 4vw, 24px);
    pointer-events: none;
  }
  html[data-jd-cards] .jd-cardview__progress i {
    flex: 1;
    height: 3px;
    border-radius: 99px;
    background: color-mix(in srgb, var(--fg) 16%, transparent);
    transition: background .25s;
  }
  html[data-jd-cards] .jd-cardview__progress i.is-done { background: var(--primary) }

  /* ── FAB tarjetas ⟷ artículo: icono del modo al que vas ── */
  .jd-cardview__toggle {
    position: fixed;
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    z-index: 9000;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #C3FF01;
    background: #15301E;
    border: 1px solid rgba(243,239,228,.18);
    border-radius: 99px;
    cursor: pointer;
    box-shadow: 0 10px 30px -8px rgba(0,0,0,.45);
    transition: transform .15s;
  }
  .jd-cardview__toggle:active { transform: scale(.92) }
  .jd-cardview__toggle svg { width: 24px; height: 24px; display: none }
  /* en modo tarjetas ofrece el documento; en modo artículo, las tarjetas */
  .jd-cardview__toggle.is-cards .jd-cardview__ico-doc { display: block }
  .jd-cardview__toggle:not(.is-cards) .jd-cardview__ico-cards { display: block }
  .jd-cardview__toggle:focus-visible { outline: 2px solid #C3FF01; outline-offset: 3px }
}

/* fuera de móvil, nada de esto existe */
@media (min-width: 782px) {
  .jd-cardview__progress, .jd-cardview__toggle { display: none }
}