/* ============================================================================ Xcitione RMM — Capa de optimización móvil (iOS Safari + Android Chrome/otros) Se carga AL FINAL: solo afina, gana por orden de cascada. No reescribe estilos. Cubre: notch/safe-area, bug de 100vh en Safari (dvh), zoom al enfocar inputs, tap targets, apilado de layouts multi-columna, scroll de tablas y modales. ============================================================================ */ /* La hamburguesa vive en ; ocultarla mientras no haya sesión (app-shell oculto) para que NO aparezca sobre la pantalla de login. */ .app-shell[hidden] ~ .nav-toggle { display: none !important; } /* Tokens de safe-area (notch, home indicator). 0px si el dispositivo no los usa. */ :root { --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px); } /* --- Alturas full-screen sin cortarse bajo la barra de URL de iOS Safari --- */ .auth-gate, .app-shell { min-height: 100vh; min-height: 100dvh; } @media (max-width: 980px) { @supports (-webkit-touch-callout: none) { /* Solo iOS móvil: -webkit-fill-available evita el salto de la barra dinámica */ .auth-gate, .app-shell { min-height: -webkit-fill-available; } } } /* ====================== Rango móvil / tablet (drawer) ====================== */ @media (max-width: 980px) { html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { -webkit-tap-highlight-color: transparent; /* sin flash gris al tocar */ overscroll-behavior-y: none; /* sin rebote de recarga */ } /* Nada debe forzar scroll horizontal de la página completa */ .app-shell, .app-main, main, .view, .panel, .card, .metric { max-width: 100%; } img, svg, canvas, video, iframe { max-width: 100%; height: auto; } /* Topbar y drawer respetando el notch/safe-area */ .topbar { padding-top: calc(10px + var(--safe-t)); padding-left: calc(12px + var(--safe-l)); padding-right: calc(12px + var(--safe-r)); } .sidebar { padding-top: calc(14px + var(--safe-t)); padding-bottom: calc(18px + var(--safe-b)); padding-left: calc(4px + var(--safe-l)); overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* Botón hamburguesa FLOTANTE fijo: vive en , así sigue visible aunque la vista (inventario, uam, seguridad...) oculte su topbar global. Antes se inyectaba dentro de .topbar y desaparecía con él → sin menú. */ .nav-toggle { position: fixed !important; top: calc(8px + var(--safe-t)); left: calc(10px + var(--safe-l)); z-index: 66; /* sobre el contenido; el drawer (70) lo tapa al abrir */ width: 44px; height: 44px; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; background: var(--panel, #131a24); border: 1px solid var(--line, rgba(255,255,255,.14)); border-radius: 12px; color: var(--ink, #e6edf6); box-shadow: 0 6px 20px rgba(0,0,0,.35); -webkit-tap-highlight-color: transparent; } /* Al abrir el menú, el botón se desvanece (se cierra tocando fuera / ítem / Esc) */ body.nav-open .nav-toggle { opacity: 0; pointer-events: none; } .nav-scrim { -webkit-tap-highlight-color: transparent; } /* Despejar el encabezado de cada vista para que no quede bajo el botón fijo */ .workspace { padding-top: calc(14px + var(--safe-t) + 46px) !important; } } /* ================= Teléfono (≤ 820px): apilar y agrandar toque ============= */ @media (max-width: 820px) { /* Inventario y demás layouts de 2-3 columnas -> una sola columna apilada */ .inventory-layout, .inventory-layout.inv-grouped, .inventory-layout.inv-grouped.groups-collapsed { grid-template-columns: 1fr !important; gap: 12px !important; } /* El árbol de grupos y la lista de equipos: bloques cortos scrolleables, así el detalle no queda empujado hasta abajo del todo */ .inventory-layout .ep-tree { max-height: 42vh; overflow: auto; -webkit-overflow-scrolling: touch; } .endpoint-selector-list { max-height: 46vh; overflow: auto; -webkit-overflow-scrolling: touch; } /* Splits genéricos de 2 columnas -> 1 columna */ .rx-split, .grid2, .rx-kv.grid2, .two-col, .split-2, .cols-2 { grid-template-columns: 1fr !important; } /* Tablas: scroll horizontal PROPIO, nunca empujan la página */ .rx-tbl, table.data, .scroll table, table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .scroll, .rx-scroll, .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* =============== Inputs ≥16px: iOS NO hace zoom al enfocar ================= */ @media (max-width: 768px) { input, select, textarea, .field input, .field select, .form-row input, .form-row select, .field textarea, .search input, .grp-create input[type="text"], .dash-matrix-search input, .dash-ctl select, .auth-field input { font-size: 16px !important; } /* Objetivos táctiles cómodos (≈44px) en navegación, pestañas y acciones */ .nav-link, .nav-group-head, .nav-sec-head { min-height: 44px; } .rx-tab, .tab, [role="tab"], .inv-tab, .es-tab { min-height: 40px; } button, .ghost-action, .primary-action, .chip-btn { min-height: 38px; } /* Topbar: título y acciones en columna para no desbordar en pantallas angostas */ .topbar h1 { font-size: 20px; line-height: 1.2; } } /* ================= Modales / overlays a pantalla completa ================== */ @media (max-width: 640px) { .auto-modal-card, .vault-modal { width: 100% !important; max-width: 100% !important; max-height: 100dvh; padding-bottom: calc(16px + var(--safe-b)); border-radius: 16px 16px 0 0; } /* Contenedores overlay centrados: alinear el contenido y permitir scroll */ #remoteReq, #connectorModal, .vault-modal-backdrop { padding: 0 !important; align-items: flex-end !important; /* hoja inferior estilo móvil */ } .auto-modal-actions, .vault-modal-actions { position: sticky; bottom: 0; padding-bottom: calc(8px + var(--safe-b)); background: inherit; } /* El visor de control remoto ocupa toda la pantalla con safe-area */ #remoteOverlay { padding-top: var(--safe-t); padding-bottom: var(--safe-b); } } /* ============ Pantallas muy angostas (≤ 400px): densidad mínima ============ */ @media (max-width: 400px) { .topbar h1 { font-size: 18px; } .rx-kpis { grid-template-columns: 1fr !important; } }