/* ============================================================
   Versión móvil (≤ 700px): inicio tipo iPhone + apps a pantalla completa
   ============================================================ */
@media (max-width: 700px) {
  /* ---------- Inicio: flujo vertical con scroll ---------- */
  body {
    display: flex;
    flex-direction: column;
    gap: 18px;
    height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: calc(var(--menubar-h) + 14px) 16px calc(var(--dock-h) + 30px + env(safe-area-inset-bottom));
    background: #0c1647 url("assets/wallpaper/wallpaper-solar-gradients-movil.jpg") center 60% / cover no-repeat fixed;
    background-image: image-set(url("assets/wallpaper/wallpaper-solar-gradients-movil.webp") type("image/webp"), url("assets/wallpaper/wallpaper-solar-gradients-movil.jpg") type("image/jpeg"));
  }
  .menubar { padding: 0 14px; }
  .menubar-left .menu-item:not(.bold) { display: none; }

  .desktop {
    position: relative;
    inset: auto;
    order: 2;
    flex-shrink: 0;
    display: block;
    padding: 0;
    overflow: visible;
    background: none;
  }
  .music-widget {
    position: relative;
    order: 1;
    flex-shrink: 0;
    inset: auto;
    width: auto;
    padding: 14px;
  }
  /* El widget de Fotos solo se muestra en escritorio */
  .photos-widget { display: none; }

  /* Rejilla de íconos tipo iPhone: apps y carpetas juntas, 4 columnas */
  .desktop-center {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px 6px;
    margin: 0;
    padding: 4px 0;
    max-height: none;
    overflow: visible;
  }
  .apps-row, .icons-grid { display: contents; }
  .app-icon, .folder { width: auto; min-width: 0; gap: 6px; padding: 4px 0; }
  .folder:hover { background: none; }
  .app-icon-img { width: 60px; height: 60px; }
  .folder-icon { width: 64px; height: 53px; margin: 3px 0 4px; }
  .app-icon-label, .folder-label {
    display: block;
    max-width: 100%;
    padding: 0 2px;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .folder-label { text-transform: lowercase; letter-spacing: -0.01em; }
  .folder-label::first-letter { text-transform: uppercase; }

  /* ---------- Ventanas: pantalla completa, por encima del dock ---------- */
  .windows-layer { z-index: 45; }
  .win.maximized {
    top: var(--menubar-h) !important;
    height: calc(100dvh - var(--menubar-h)) !important;
    border-radius: 0;
    box-shadow: none;
  }
  .win-titlebar { height: 50px; padding: 0 12px; gap: 12px; }
  .traffic-lights { gap: 12px; }
  .tl { position: relative; width: 16px; height: 16px; }
  .tl::after { content: ""; position: absolute; inset: -10px; }
  .tl svg { width: 10px; height: 10px; opacity: 1; }
  .tl-max { display: none; }

  /* ---------- Reportes (Analytics): diapositivas legibles en vertical ---------- */
  .ga-stage { padding: 12px; align-items: stretch; }
  .ga-frame { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 12px; }
  .ga-slide { overflow-y: auto; }
  .ga-cover { padding: 28px 22px; border-top-width: 6px; }
  .rp-cover .ga-cover-mark svg { width: 34px; height: 34px; margin-bottom: 14px; }
  .rp-cover .rp-real { font-size: 38px; gap: 10px; }
  .rp-cover .rp-real svg { width: 34px; height: 34px; }
  .rp-cover .rp-cover-title { margin-top: 14px; font-size: 17px; }
  .rp-cover .rp-cover-title + p { margin-top: 6px; font-size: 13px; }
  .rp-cover-tags { margin-top: 18px; gap: 6px; }
  .rp-cover-tags span { padding: 5px 10px; font-size: 11.5px; }

  .ga-slide.rp { padding: 22px 18px; gap: 18px; }
  .rp-head, .ga-slide.rp > :last-child { margin-bottom: 0; }
  .rp-eyebrow { gap: 6px; font-size: 11px; }
  .rp-eyebrow svg { width: 16px; height: 16px; }
  .rp-head h3 { font-size: 21px; }
  .rp-kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  .rp-kpi { gap: 4px; padding: 14px 12px; border-top-width: 3px; border-radius: 10px; }
  .rp-kpi small { font-size: 11px; }
  .rp-kpi strong, .rp-kpi.is-blue strong { font-size: 21px; line-height: 1.2; }
  .rp-kpi span { font-size: 10.5px; }
  .rp-growth-row { gap: 8px; }
  .rp-chip { gap: 5px; padding: 6px 10px; font-size: 12px; }
  .rp-chip svg { width: 9px; height: 9px; }
  .rp-split { grid-template-columns: 1fr; gap: 16px; }
  .rp-hero { gap: 4px; padding: 18px 16px; border-radius: 12px; }
  .rp-hero small, .rp-hero span { font-size: 12px; }
  .rp-hero strong { font-size: 28px; }
  .rp-table { font-size: 13px; }
  .rp-table th { padding: 0 8px 8px; font-size: 10.5px; }
  .rp-table td { padding: 10px 8px; }
  .rp-table td:has(> .rp-bar) { width: 30%; }
  .rp-leads tr > :nth-child(2) { display: none; }
  .rp-bar { height: 6px; }
  .rp-note { font-size: 11px; }
  .rp-callout { padding: 12px 14px; border-left-width: 3px; border-radius: 0 10px 10px 0; font-size: 13.5px; }
  .rp-growth { grid-template-columns: 1fr; gap: 12px; }
  .rp-growth-card { gap: 4px; padding: 16px; border-radius: 12px; }
  .rp-growth-card strong { gap: 6px; font-size: 38px; }
  .rp-growth-card strong svg { width: 18px; height: 18px; }
  .rp-growth-card span { font-size: 15px; }
  .rp-growth-card small { font-size: 12px; }
  .rp-points { gap: 14px; }
  .rp-points li { padding-left: 38px; font-size: 14.5px; }
  .rp-points li::before { top: 0; width: 26px; height: 26px; font-size: 13px; }

  /* ---------- Word ---------- */
  .word-tabs { overflow-x: auto; scrollbar-width: none; }
  .word-tabs::-webkit-scrollbar { display: none; }

  /* ---------- Tesina en Word: el texto se reacomoda a la pantalla ---------- */
  .word-canvas .doc { gap: 12px; }
  .word-canvas .doc-sheet { min-height: 0; padding: 26px 20px 44px; font-size: 14.5px; }
  .word-canvas .doc-pnum { right: 20px; bottom: 16px; font-size: 12px; }
}