/* ============================================================ Mobile layer — PMS Enterprise Técnica portada de dgu2025 (docs/exploracion/dgu2025-referencia.md §"Mobile-first"): un solo Blade sirve desktop y móvil; el desktop no se toca, el móvil es una capa ADITIVA por clases puestas en por mobile-detection.js (is-mobile / is-ios / is-android / is-touch / is-portrait / is-landscape). Nada aquí depende de JS para funcionar — sigue habiendo un fallback por @media puro. ============================================================ */ /* ------------------------------------------------------------ Utilidades show/hide ------------------------------------------------------------ */ .mobile-only { display: none !important; } .desktop-only { display: initial; } body.is-mobile .mobile-only { display: initial !important; } body.is-mobile .desktop-only { display: none !important; } @media (max-width: 768px) { .mobile-only { display: initial !important; } .desktop-only { display: none !important; } } /* ------------------------------------------------------------ Touch targets — Apple HIG / Material mínimo 44x44px ------------------------------------------------------------ */ body.is-touch a, body.is-touch button, body.is-touch .btn-action, body.is-touch .btn-ghost, body.is-touch .btn.btn-primary, body.is-touch .btn.btn-outline-primary, body.is-touch input[type=checkbox], body.is-touch input[type=radio], body.is-touch .switch, body.is-touch .top-bar nav a { min-height: 44px; min-width: 44px; } body.is-touch .top-bar nav a { display: inline-flex; align-items: center; justify-content: center; } body.is-touch input[type=checkbox], body.is-touch input[type=radio] { width: 22px; height: 22px; } /* ------------------------------------------------------------ Safe-area iOS (notch / home indicator) — viewport-fit=cover ------------------------------------------------------------ */ body.is-ios { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); } body.is-ios .top-bar { padding-top: calc(14px + env(safe-area-inset-top)); } /* Evita el "bounce" de scroll de Safari arrastrando todo el body */ body.is-ios { overscroll-behavior-y: none; } /* ------------------------------------------------------------ Topbar compacta en móvil (mismo patrón que editorial.css trae para .top-bar, reforzado aquí vía clase de body) ------------------------------------------------------------ */ body.is-mobile .top-bar { padding: 10px 14px; } body.is-mobile .top-bar .brand { font-size: 1rem; } body.is-mobile .top-bar .user { display: none; } body.is-mobile .top-bar nav { gap: 4px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } body.is-mobile .top-bar nav a .lbl { display: none; } /* ------------------------------------------------------------ Masthead / page paddings reducidos ------------------------------------------------------------ */ body.is-mobile .masthead { padding: 24px 16px 14px; } body.is-mobile .masthead h1 { font-size: 1.7rem; } body.is-mobile .page, body.is-mobile .page-narrow { padding: 20px 14px 60px; } /* ------------------------------------------------------------ Tabla → tarjeta (.fin-table) en móvil Se activa cuando la tabla trae data-mobile-cards (o cualquier .fin-table dentro de body.is-mobile). Deja la regla lista aunque hoy no haya tablas reales que la usen todavía. Requiere en el th/td el atributo data-label="Encabezado" para pintar la etiqueta en el pseudo-elemento ::before. ------------------------------------------------------------ */ body.is-mobile table.fin-table.mobile-cards, body.is-mobile table.fin-table[data-mobile-cards] { border: 0; } body.is-mobile table.fin-table.mobile-cards thead, body.is-mobile table.fin-table[data-mobile-cards] thead { display: none; } body.is-mobile table.fin-table.mobile-cards, body.is-mobile table.fin-table.mobile-cards tbody, body.is-mobile table.fin-table.mobile-cards tr, body.is-mobile table.fin-table.mobile-cards td, body.is-mobile table.fin-table[data-mobile-cards], body.is-mobile table.fin-table[data-mobile-cards] tbody, body.is-mobile table.fin-table[data-mobile-cards] tr, body.is-mobile table.fin-table[data-mobile-cards] td { display: block; width: 100% !important; } body.is-mobile table.fin-table.mobile-cards tr, body.is-mobile table.fin-table[data-mobile-cards] tr { background: var(--card-bg); border: 1px solid var(--rule); border-radius: 12px; margin-bottom: 10px; padding: 8px 12px; } body.is-mobile table.fin-table.mobile-cards td, body.is-mobile table.fin-table[data-mobile-cards] td { border-bottom: 1px solid var(--rule-soft); padding: 6px 0; display: flex; justify-content: space-between; gap: 12px; white-space: normal !important; } body.is-mobile table.fin-table.mobile-cards td:last-child, body.is-mobile table.fin-table[data-mobile-cards] td:last-child { border-bottom: 0; } body.is-mobile table.fin-table.mobile-cards td::before, body.is-mobile table.fin-table[data-mobile-cards] td::before { content: attr(data-label); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.02em; color: var(--ink-soft); text-transform: uppercase; flex-shrink: 0; } /* Tablas genéricas (.table) sin variante card: al menos que sigan scrolleando horizontalmente en vez de romper el layout */ body.is-mobile .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ------------------------------------------------------------ Modales fullscreen en móvil ------------------------------------------------------------ */ body.is-mobile .modal-content { border-radius: 0 !important; min-height: 100vh; } /* ------------------------------------------------------------ Drawer lateral (para cuando exista nav lateral con swipe-to-close) ------------------------------------------------------------ */ .drawer { position: fixed; top: 0; bottom: 0; left: 0; width: min(84vw, 320px); background: var(--card-bg); box-shadow: 0 0 24px rgba(26,22,18,0.18); transform: translateX(-100%); transition: transform .25s ease; z-index: 1000; } .drawer.open { transform: translateX(0); } .drawer-backdrop { position: fixed; inset: 0; background: rgba(26,22,18,0.35); opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 999; } .drawer-backdrop.open { opacity: 1; pointer-events: auto; } /* ------------------------------------------------------------ Orientación (clases informativas, sin efecto propio salvo que una vista las use) ------------------------------------------------------------ */ body.is-portrait .landscape-only { display: none !important; } body.is-landscape .portrait-only { display: none !important; } /* ------------------------------------------------------------ Sin scroll horizontal accidental de toda la página en móvil ------------------------------------------------------------ */ body.is-mobile { max-width: 100%; overflow-x: hidden; }