/* ============================================================
   SENTRY · Guías — capa responsive de pantalla
   El documento carta (doc-page) se conserva para escritorio e
   impresión/PDF. En celular se muestra la vista fluida (#guia-movil).
   ============================================================ */

/* Rendimiento base */
img { max-width: 100%; }

/* Por defecto (escritorio): la vista móvil está oculta */
#guia-movil { display: none; }

/* Botón flotante "Descargar PDF" */
#guia-pdf{
  position: fixed; right: 16px; bottom: 16px; z-index: 999;
  display: inline-flex; align-items: center; gap: 8px;
  background: #2D74E8; color: #fff; border: none; cursor: pointer;
  font-family: 'Outfit', system-ui, sans-serif; font-weight: 600; font-size: 14px;
  padding: 12px 18px; border-radius: 999px;
  box-shadow: 0 12px 28px -10px rgba(45,116,232,.7);
}
#guia-pdf:hover{ background:#2168df; }

/* ============================================================
   MÓVIL (≤ 819px): lectura vertical fluida
   ============================================================ */
@media (max-width: 819px) {
  html, body { background: #F4F7FB; }
  doc-page { display: none !important; }         /* ocultamos la hoja carta en pantalla */
  #guia-movil { display: block; max-width: 680px; margin: 0 auto; padding-bottom: 90px; }

  #guia-movil .m-page { margin: 0 0 12px; }

  /* Cada página clonada se vuelve un bloque fluido de alto automático */
  #guia-movil .page{
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    display: block !important;
    box-sizing: border-box;
    padding: 26px 20px !important;
    box-shadow: 0 4px 16px rgba(11,46,89,.08);
    overflow: visible !important;
    justify-content: flex-start !important;
  }
  /* Páginas texturizadas (grain) con TEXTO: necesitan padding en móvil */
  #guia-movil .page.grain{ padding: 34px 22px !important; color:#fff; }
  #guia-movil .page.grain *{ overflow-wrap:break-word; }
  /* La PORTADA (contiene la franja de imagen height:64%) va full-bleed, sin padding */
  #guia-movil .page.grain:has(> div[style*="64%"]),
  #guia-movil .page.grain:has(> div[style*="height:64%"]){ padding: 0 !important; }
  /* La franja de imagen de portada usaba height:64% del alto carta */
  #guia-movil .page.grain > div:first-child[style*="64%"],
  #guia-movil .page.grain > div[style*="height:64%"]{ height: 62vw !important; min-height: 220px; }

  /* Rejillas de 2 columnas → 1 columna */
  #guia-movil [style*="grid-template-columns"]{ grid-template-columns: 1fr !important; }
  /* Bloques lado a lado con flex fija → apilados */
  #guia-movil [style*="display:flex"][style*="gap"]{ flex-wrap: wrap; }

  /* Imágenes y tarjetas fluidas */
  #guia-movil img{ max-width: 100% !important; height: auto; }
  #guia-movil .objimg{ height: auto !important; aspect-ratio: 16 / 10; }
  #guia-movil [style*="height:220px"],
  #guia-movil [style*="height:265px"]{ height: auto !important; aspect-ratio: 16/10; }

  /* Topar tipografías pensadas para hoja carta */
  #guia-movil h1{ font-size: 30px !important; line-height: 1.08 !important; }
  #guia-movil h2{ font-size: 22px !important; line-height: 1.22 !important; }

  /* Reducir paddings interiores grandes de portada */
  #guia-movil .page.grain [style*="padding:34px 44px"],
  #guia-movil .page.grain [style*="padding:16px 44px"],
  #guia-movil .page.grain [style*="0 44px"]{ padding-left: 22px !important; padding-right: 22px !important; }
}

/* ============================================================
   IMPRESIÓN: siempre el documento carta original
   ============================================================ */
@media print {
  #guia-movil { display: none !important; }
  #guia-pdf { display: none !important; }
  doc-page { display: block !important; }
}