/* ============================================================
   preview-sheet.css — "La vista previa siempre a mano" (móvil)
   ------------------------------------------------------------
   Pedido de Gabino (2026-07-25): en el taller hay tantos módulos que,
   en el teléfono, ver el efecto de un cambio obligaba a subir hasta
   arriba de todo y volver a bajar. Este archivo convierte el MISMO
   .preview-panel (un solo iframe, sin duplicar estado) en una hoja
   que sube desde abajo, con un botón flotante siempre visible.

   ★ Vive en un archivo aparte a propósito: taller.css lo está tocando
     otra sesión en paralelo. Se carga DESPUÉS de taller.css, así sus
     reglas móviles (.preview-panel { position: static; order: -1 })
     quedan pisadas por igualdad de especificidad + orden de cascada.

   ESCRITORIO (>=960px): no cambia absolutamente nada. Todo lo de acá
   abajo vive dentro de @media (max-width: 959px) salvo los estados
   base "apagados" (display:none) del FAB y del velo.
   ============================================================ */

:root {
  /* Curva con masa: arranca rápido y frena largo (sin ease-in-out). */
  --pv-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --pv-dur: 420ms;
  --pv-safe-b: env(safe-area-inset-bottom, 0px);
  --pv-safe-r: env(safe-area-inset-right, 0px);
  --pv-safe-t: env(safe-area-inset-top, 0px);
}

/* Base apagada: en escritorio ni el botón ni el velo existen visualmente
   (display:none también los saca del orden de tabulación y del árbol de
   accesibilidad, así que no hace falta ningún inert acá). */
.pv-fab,
.pv-scrim,
.pv-grab,
.pv-close { display: none; }

/* ══════════════════════════════════════════════════════════════
   MÓVIL / TABLET VERTICAL — todo el componente
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 959px) {

  /* ── Aire para que el botón flotante no se coma los CTAs del final
     (el cross-sell, el footer) ni la barra de descarga de la hoja. ── */
  body.pv-editor { padding-bottom: calc(4.8rem + var(--pv-safe-b)); }
  /* El toast nace en bottom:1.5rem, justo debajo del FAB — lo subimos
     para que no se pisen en pantallas angostas. */
  body.pv-editor .toast { bottom: calc(5.1rem + var(--pv-safe-b)); }

  /* ── BOTÓN FLOTANTE (isla) ──────────────────────────────────
     Doble bisel: cáscara de vidrio crema (hairline + blur, solo sobre
     un elemento fixed) con el núcleo espresso adentro. El blur va acá
     y en ningún contenedor con scroll. */
  body.pv-editor .pv-fab {
    display: inline-flex;
    align-items: center;
    position: fixed;
    z-index: 90;
    right: calc(1rem + var(--pv-safe-r));
    bottom: calc(1rem + var(--pv-safe-b));
    padding: 5px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: rgba(250, 247, 241, 0.74);
    backdrop-filter: blur(16px) saturate(135%);
    -webkit-backdrop-filter: blur(16px) saturate(135%);
    box-shadow:
      0 24px 46px -26px rgba(42, 38, 31, 0.62),
      0 2px 6px -3px rgba(42, 38, 31, 0.22);
    transition:
      transform var(--pv-dur) var(--pv-ease),
      opacity 240ms var(--pv-ease),
      border-color 320ms var(--pv-ease);
    -webkit-tap-highlight-color: transparent;
  }
  /* Cuando hay algo nuevo, el hairline se entibia hacia la terracota. */
  .pv-fab[data-fresh="1"] {
    border-color: color-mix(in oklab, var(--accent), var(--line-strong) 45%);
  }

  .pv-fab-core {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.6rem 0.55rem 0.6rem 0.95rem;
    border-radius: 999px;
    background: var(--cream);
    color: var(--bg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
    transition: transform 260ms var(--pv-ease);
  }
  .pv-fab-label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    white-space: nowrap;
  }
  .pv-fab-icon { display: inline-flex; opacity: 0.82; }
  .pv-fab-icon svg { width: 15px; height: 15px; display: block; }

  /* Ícono dentro de su propio círculo, a ras del borde interno (nunca
     una flecha desnuda al lado del texto). */
  .pv-fab-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 999px;
    background: rgba(250, 247, 241, 0.14);
    transition: transform 320ms var(--pv-ease), background 320ms var(--pv-ease);
  }
  .pv-fab-arrow svg { width: 12px; height: 12px; display: block; }

  .pv-fab:hover .pv-fab-arrow,
  .pv-fab:focus-visible .pv-fab-arrow {
    transform: translateY(-1.5px);
    background: rgba(250, 247, 241, 0.22);
  }
  .pv-fab:active .pv-fab-core { transform: scale(0.975); }
  .pv-fab:focus-visible {
    outline: none;
    box-shadow:
      0 0 0 3px color-mix(in oklab, var(--accent), transparent 62%),
      0 24px 46px -26px rgba(42, 38, 31, 0.62);
  }

  /* ── El punto de "hay algo nuevo que ver" ──
     Aparece cuando el preview se actualizó con la hoja cerrada. Un halo
     lento que se apaga solo (3 vueltas) y después queda el punto quieto:
     insinúa, no grita. Solo transform/opacity. */
  .pv-fab-dot {
    position: absolute;
    top: 2px;
    right: 3px;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--accent);
    border: 2px solid var(--bg);
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 220ms var(--pv-ease), transform 360ms var(--pv-ease);
    pointer-events: none;
  }
  .pv-fab-dot::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 999px;
    background: var(--accent);
    opacity: 0;
  }
  .pv-fab[data-fresh="1"] .pv-fab-dot { opacity: 1; transform: scale(1); }
  .pv-fab[data-fresh="1"] .pv-fab-dot::after {
    animation: pv-halo 2.4s var(--pv-ease) 3;
  }
  @keyframes pv-halo {
    0%   { transform: scale(1);   opacity: 0.5; }
    70%  { transform: scale(2.7); opacity: 0; }
    100% { transform: scale(2.7); opacity: 0; }
  }

  /* Con la hoja abierta el botón se retira (y JS lo pone inert). */
  body.pv-open .pv-fab {
    opacity: 0;
    transform: translateY(10px) scale(0.92);
    pointer-events: none;
  }

  /* ── VELO ───────────────────────────────────────────────────
     Deja asomar una franja de la página arriba: se entiende que la
     hoja está POR ENCIMA de lo que estabas editando, no que cambiaste
     de pantalla. touch-action:none evita que arrastrar acá scrollee
     la página de atrás (y con eso, que se pierda la posición). */
  .pv-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 140;
    background: rgba(24, 20, 14, 0.44);
    opacity: 0;
    visibility: hidden;
    touch-action: none;
    transition: opacity 300ms var(--pv-ease), visibility 0s linear 300ms;
  }
  body.pv-open .pv-scrim {
    opacity: 1;
    visibility: visible;
    transition: opacity 300ms var(--pv-ease);
  }

  /* ── LA HOJA = EL MISMO .preview-panel ──────────────────────
     Un solo iframe: el panel no se clona ni se recrea, solo cambia de
     posición. Por eso el toggle móvil/escritorio sigue funcionando
     adentro y no hay doble carga ni estado duplicado. */
  .preview-panel {
    position: fixed;
    z-index: 150;
    left: 0;
    right: 0;
    bottom: 0;
    top: calc(2.4rem + var(--pv-safe-t));
    order: 0; /* anula el order:-1 de taller.css (ya no va arriba de todo) */
    gap: 0.7rem;
    padding: 0 1rem calc(0.85rem + var(--pv-safe-b));
    background: var(--bg);
    border-top: 1px solid var(--line-strong);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -30px 64px -34px rgba(42, 38, 31, 0.6);
    overflow: hidden;
    overscroll-behavior: contain;
    transform: translateY(101%);
    transition: transform var(--pv-dur) var(--pv-ease);
    will-change: transform;
  }
  body.pv-open .preview-panel { transform: translateY(0); }

  /* Tirador: además de dar el asa para arrastrar y cerrar, es la señal
     de "esto se baja". touch-action:none = el gesto es nuestro. */
  .preview-panel .pv-grab {
    display: block;
    flex: 0 0 auto;
    padding: 0.6rem 0 0.4rem;
    touch-action: none;
    cursor: grab;
  }
  .preview-panel .pv-grab:active { cursor: grabbing; }
  .preview-panel .pv-grab span {
    display: block;
    width: 44px;
    height: 4px;
    margin: 0 auto;
    border-radius: 999px;
    background: var(--line-strong);
  }

  /* Cabecera de la hoja en UNA sola línea: segmentado + cerrar.
     Cada píxel que no gasta la cabecera se lo lleva el teléfono, que es
     lo único que el usuario vino a mirar. En pantallas muy angostas el
     flex-wrap la parte en dos sola. */
  .preview-panel .device-toggle-row {
    flex: 0 0 auto;
    row-gap: 0.5rem;
  }
  /* El rótulo "Vista previa" se retira DENTRO de la hoja: el tirador, el
     ✕ y el teléfono ya dicen qué es esto, y esos ~100px de ancho son los
     que hacen que el segmentado y el ✕ entren en una sola línea (y esa
     línea de menos es alto para la tarjeta). La hoja conserva su nombre
     accesible vía aria-label, así que el lector de pantalla no pierde
     nada. Fuera de la hoja el rótulo sigue igual. */
  .preview-panel .device-toggle-row > .section-title { display: none; }
  .preview-panel .device-toggle { order: 1; flex: 1 1 auto; justify-content: center; }
  .preview-panel .device-btn { padding: 0.34rem 0.55rem; font-size: 0.68rem; }
  /* order: el ✕ va después del segmentado (arriba a la derecha, donde se
     lo busca) sin reordenar el DOM — que en escritorio sigue intacto. */
  .preview-panel .pv-close {
    order: 2;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    background: var(--bg-2);
    color: var(--cream-dim);
    padding: 0;
    transition: border-color 200ms var(--pv-ease), color 200ms var(--pv-ease), transform 200ms var(--pv-ease);
  }
  .preview-panel .pv-close svg { width: 13px; height: 13px; display: block; }
  .preview-panel .pv-close:hover { border-color: var(--accent); color: var(--accent); }
  .preview-panel .pv-close:active { transform: scale(0.92); }
  .preview-panel .pv-close:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 78%);
  }
  /* ── El escenario se come todo el alto libre: el teléfono llega
     grande y el cambio SE LEE sin hacer zoom. ── */
  .preview-panel .device-stage {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: stretch;
    justify-content: center;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  /* El marco de escritorio se escala al ancho (queda bajito): centrado
     vertical para que no quede colgando arriba con un vacío enorme. */
  .preview-panel .device-stage[data-device="desktop"] { align-items: center; }
  .preview-panel .device-stage[data-device="mobile"] .phone-frame {
    display: flex;
    flex-direction: column;
    width: min(100%, 340px);
    margin: 0 auto;
    /* Bisel más fino que en la columna: acá el marco no tiene que
       "posar" de teléfono, tiene que dejar ver la tarjeta. */
    padding: 8px 8px 4px;
  }
  .preview-panel .phone-notch { top: 8px; }
  .preview-panel .phone-home-bar { height: 3px; margin: 5px auto 1px; }
  .preview-panel .phone-screen { flex: 1 1 auto; min-height: 0; }
  .preview-panel .phone-frame .preview-iframe-inner {
    width: 100%;
    height: 100%;
  }

  /* Pie de la hoja: el aviso de bloqueo y la barra de descarga quedan
     SIEMPRE a la vista, sin scroll — mirar la tarjeta y bajarla es un
     solo gesto. El tope deja entrar el título + el candado de cuenta +
     el botón primario; si el bloque creciera, se encoge y scrollea él
     en vez de robarle alto al teléfono. */
  .preview-panel .preview-lock-note,
  .preview-panel .preview-lock-btn { flex: 0 0 auto; }
  .preview-panel .share-row {
    flex: 0 1 auto;
    max-height: min(30vh, 205px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.8rem;
    gap: 0.5rem;
  }

  /* ── Teléfono acostado (o ventana muy baja) ──
     Acá "que el teléfono llene el alto" se da vuelta en contra: quedaría
     una ranura de 60px. Por debajo de 560px de alto se invierte la
     regla — el teléfono conserva un alto legible fijo y el que scrollea
     es el escenario. Se ve menos tarjeta de una, pero se LEE. */
  @media (max-height: 560px) {
    .preview-panel {
      top: calc(0.9rem + var(--pv-safe-t));
      border-radius: 14px 14px 0 0;
      gap: 0.5rem;
    }
    .preview-panel .pv-grab { padding: 0.4rem 0 0.3rem; }
    .preview-panel .share-row { max-height: min(46vh, 150px); }
    .preview-panel .device-stage { align-items: flex-start; }
    .preview-panel .device-stage[data-device="mobile"] .phone-frame {
      height: 470px;
      flex: 0 0 auto;
    }
  }

  /* ── Sin animación de deslizamiento para quien la pidió apagada ── */
  @media (prefers-reduced-motion: reduce) {
    .preview-panel {
      transition: none;
      transform: translateY(101%);
    }
    body.pv-open .preview-panel { transform: translateY(0); }
    .pv-scrim { transition: opacity 1ms linear, visibility 0s linear 1ms; }
    .pv-fab,
    .pv-fab-core,
    .pv-fab-arrow,
    .pv-fab-dot { transition: none; }
    .pv-fab[data-fresh="1"] .pv-fab-dot::after { animation: none; }
  }
}

/* Texto solo para lectores de pantalla (descripción del botón). */
.pv-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}