/* ============================================================================ MOBILE LAYER — responsive total del CRM (estilo web-app, ref. Supabase). NO cambia colores ni diseño: solo adapta layout/tamaños en pantallas chicas. Se carga al FINAL del para ganar los empates de especificidad contra los estilos que inyectan los módulos JS en (por eso hay !important en los overrides que pelean con esos estilos inyectados). Breakpoints: 900px (tablet/split) y 620px (teléfono). ========================================================================== */ @media (max-width: 900px) { /* ── Base: sin scroll horizontal fantasma ─────────────────────────────── */ html, body { max-width: 100vw; overflow-x: hidden; } /* ── Sidebar: en móvil el drawer abre SIEMPRE completo (con nombres). ──── El estado .collapsed (icon-only) es de desktop; si quedó persistido, en el teléfono se veían solo iconos sin labels. Acá se restauran los valores base. */ .sb.collapsed { --sw: 240px !important; } .sb.collapsed .sb-brandtext { display: block !important; } .sb.collapsed .ni-label { display: block !important; flex: 1; overflow: hidden; text-overflow: ellipsis; } .sb.collapsed .ni-badge { display: inline-block !important; } .sb.collapsed .nav-dot { display: block !important; } .sb.collapsed .sb-uinfo { display: block !important; } .sb.collapsed .sb-ucaret { display: flex !important; } .sb.collapsed .sb-brandrow { flex-direction: row !important; height: var(--th) !important; padding: 0 16px !important; gap: 11px !important; justify-content: flex-start !important; } .sb.collapsed .ni { justify-content: flex-start !important; margin: 1px 8px !important; padding: 9px 12px !important; } .sb.collapsed .sb-sec { font-size: 10px !important; padding: 0 14px !important; margin: 0 0 6px !important; height: auto !important; overflow: visible !important; } .sb.collapsed .sb-user { justify-content: flex-start !important; padding: 10px 12px !important; } /* ── Drawer más ancho estilo Supabase (casi pantalla completa) ──────────── */ .sb { width: min(86vw, 330px) !important; transform: translateX(-105%) !important; } .sb.open { transform: translateX(0) !important; --sw: min(86vw, 330px) !important; } /* ── Analítica toolbar: tabs ARRIBA (deslizables), acciones ABAJO full-width (antes "Nueva incidencia" + período tapaban/apretaban las pestañas). ───── */ .ana-tabsbar { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; } .ana-tabsbar > .ana-tabs { width: 100%; } .ana-tabsbar > div:last-child { width: 100%; display: flex !important; gap: 8px !important; } #ana-new-inc-btn { flex: 1 1 auto; justify-content: center; } .ana-period2 { flex-shrink: 0; align-self: stretch; } .ana-period2 .period-btn { height: 38px; } /* ── Menú nativo mobile: backdrop oscuro al abrir el drawer ──────────────── Cubre toda la pantalla detrás del sidebar. Tocar fuera lo cierra (JS). pointer-events:none → el tap "atraviesa" al contenido y el handler global lo detecta como click-fuera y cierra el menú. */ body:has(.sb.open)::before { content: ""; position: fixed; inset: 0; z-index: 99; background: rgba(15, 23, 42, .55); backdrop-filter: blur(1px); pointer-events: none; animation: fadeIn .18s ease; } @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } } /* ── Dashboard móvil: "Composición por plaga" ARRIBA de "Últimas Incidencias". row-bottom es 1 columna en móvil → uso order (no afecta PC, que se queda en 2 columnas lado a lado). El 2º hijo (composición) sube. */ .row-bottom { display: flex !important; flex-direction: column; } .row-bottom > .card:nth-child(2) { order: -1; } /* Tablas: SIEMPRE deslizables al estilo app (los no se comprimen). */ .cb, .tw, .cfg-card .cb { overflow-x: auto; -webkit-overflow-scrolling: touch; } .cb table { min-width: 520px; } /* Canvas de Chart.js: nunca más ancho que su tarjeta. */ canvas { max-width: 100% !important; } /* ── Dashboard: filas de 2 columnas → 1 columna ───────────────────────── */ #pg-dash .row-main, .row-bottom { grid-template-columns: 1fr !important; } /* ── Analítica ────────────────────────────────────────────────────────── */ .ana-toolbar { flex-wrap: wrap !important; gap: 8px !important; } .ana-period-global { margin-left: 0 !important; width: 100%; justify-content: space-between; } .ana-toolbar .finp, .ana-rep-filter { min-width: 0 !important; } #pg-inc .ana-ph-charts, #pg-inc .ana-plaga-grid, #pg-inc .ana-cmp-charts { grid-template-columns: 1fr !important; } .ana-repg-head { flex-wrap: wrap; gap: 6px; } .ana-repg-body .ana-rep-date { width: auto !important; } .ana-rep-row { flex-wrap: wrap; } .ana-modal .md, .ana-modal .ana-modal-card { width: calc(100vw - 16px) !important; max-width: none !important; } .ana-bc-xrow { margin-left: 0 !important; overflow-x: auto; } /* ── Clientes (fmc) ───────────────────────────────────────────────────── */ .client-modal { padding: 0 !important; } .client-modal .md { width: 100vw !important; max-width: 100vw !important; height: 100dvh !important; max-height: 100dvh !important; border-radius: 0 !important; } .client-modal-headline { grid-template-columns: 1fr !important; } .fmc-fed-trio { grid-template-columns: 1fr !important; } .fmc-toolbar, .fmc-head-row { flex-wrap: wrap; gap: 8px; } .fmc-search { width: 100%; } .fmc-tr { grid-template-columns: 1fr auto !important; row-gap: 4px; } /* ── Detalle de incidencia / modales genéricos (FMModal) ─────────────── */ .mo .md { width: calc(100vw - 12px); max-width: calc(100vw - 12px); } .idm-edit-grid { grid-template-columns: 1fr !important; } /* ── Chat Analista IA: pantalla completa en móvil ─────────────────────── */ .ai-drawer { width: 100vw !important; --ai-w: 100vw; --ai-w-wide: 100vw; border-radius: 0 !important; } body.ai-docked { --ai-dock-w: 0px !important; } .ai-resizer { display: none !important; } /* ── Notificaciones ───────────────────────────────────────────────────── */ /* No a pantalla completa: tarjeta compacta anclada arriba-derecha (junto a la campana). */ .notif-panel { left: auto !important; right: 8px !important; width: min(330px, calc(100vw - 16px)) !important; } .notif-toast-wrap { left: 10px; right: 10px; } .notif-toast { width: 100% !important; } /* ── Config ───────────────────────────────────────────────────────────── */ .cfg-subnav { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 6px; padding-bottom: 6px; } .cfg-subnav .cfg-tab, .cfg-subnav a, .cfg-subnav button { flex: 0 0 auto; white-space: nowrap; } /* ── Certificados: dock ya es 100vw (regla propia); compactar el form ── */ .cert-form-grid { grid-template-columns: 1fr !important; gap: 14px !important; } .cert-plague-grid { grid-template-columns: 1fr 1fr !important; } .cert-filters-row .finp { flex: 1 1 100% !important; min-width: 0 !important; } /* ── Inventario ───────────────────────────────────────────────────────── */ .inv-kpi { grid-template-columns: 1fr 1fr !important; } .inv-form .grid, .inv-dzrow { grid-template-columns: 1fr !important; } /* Grids en línea (style="grid-template-columns:1fr 1fr") del módulo → 1 col. */ #pg-inv div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; } /* ── Levantamientos / listas largas ───────────────────────────────────── */ .lev-grid, .lev-form-grid { grid-template-columns: 1fr !important; } /* ── Panel "Nueva incidencia" (drawer derecho) a ancho completo ────────── */ .aninc { width: 100vw !important; } } @media (max-width: 620px) { /* ── Compacto estilo Supabase: elementos chicos, densidad alta ────────── */ .page { padding: 12px 10px !important; } .card { border-radius: 12px; } .ch { padding: 12px 12px; } .cb { padding: 12px; } .ph-title { font-size: 17px !important; } .sv { font-size: 20px !important; } .sc { padding: 12px !important; } /* Inputs a 16px: evita el auto-zoom de iOS al enfocar un campo. */ input, select, textarea { font-size: 16px !important; } .btn, .ibtn { min-height: 38px; } /* Dashboard: stats 2 por fila, charts más bajos, feed cómodo al toque. */ .sg, .sg2, .sg3 { grid-template-columns: 1fr 1fr !important; gap: 8px !important; } #pg-dash canvas { max-height: 220px !important; } .feed-row { padding: 10px 8px; } /* Analítica: tabs deslizables, KPIs 2 por fila. */ .ana-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; } #pg-inc .ana-kpi-grid { grid-template-columns: 1fr 1fr !important; } /* Certificados: plagas 1 por fila en teléfonos chicos. */ .cert-plague-grid { grid-template-columns: 1fr !important; } .inv-kpi { grid-template-columns: 1fr !important; } /* Topbar: quitar el saludo largo, dejar título compacto. */ .topbar-greet { display: none !important; } /* Toast de notificación compacto. */ .notif-toast { padding: 14px 14px !important; border-radius: 18px !important; } .notif-toast-title { font-size: 13.5px !important; } .notif-toast-msg { font-size: 12px !important; } } /* Áreas seguras de iPhone (notch) en modo web-app instalada. */ @supports (padding: env(safe-area-inset-top)) { @media (max-width: 900px) { .topbar { padding-top: calc(10px + env(safe-area-inset-top)); } .sb { padding-top: env(safe-area-inset-top); } } } /* ============================================================================ V2 QUIRURGICA - overrides por modulo (auditoria multi-agente 2026-07-02). Selectores verificados contra el codigo real de cada modulo por 7 agentes. ========================================================================== */ @media (max-width: 900px) { /* -- dashboard-notif -- */ .kpi-grid { grid-template-columns:1fr 1fr!important;gap:10px!important; } .notif-panel { max-height:min(480px,calc(100dvh - 110px))!important;border-radius:14px!important; } /* -- analitica -- */ #pg-inc .ana-ph-charts .ana-stk-wrap { height:380px!important; } /* -- clientes -- */ .fmc-stats { width:100%;order:3; } /* -- inventario -- */ .inv-drawer .panel { width:100vw!important;min-width:0!important;max-width:100vw!important; } .inv-drawer .panel div[style*="grid-template-columns"] { grid-template-columns:1fr!important; } #inv-tabs { display:flex;flex-wrap:nowrap!important;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:4px; } #pg-inv .ph-acts { display:flex;flex-wrap:wrap;gap:6px; } /* -- certificados -- */ .cert-2col { padding:12px 12px!important;gap:16px!important; } /* -- config-users -- */ .cfg-subnav a { font-size:12px;padding:7px 9px; } } @media (max-width: 620px) { /* -- dashboard-notif -- */ .kpi-grid { grid-template-columns:1fr 1fr!important;gap:8px!important;margin-bottom:10px!important; } .kpi { padding:10px!important; } .kpi-label { font-size:9px!important;letter-spacing:.03em!important; } .kpi-number { font-size:20px!important;letter-spacing:-.5px!important; } .kpi-name { font-size:14px!important;max-width:100%!important; } .kpi-icon { width:26px!important;height:26px!important; } .kpi-icon i { font-size:15px!important; } .kpi-head { gap:7px!important;margin-bottom:5px!important; } .kpi-foot { font-size:10px!important;margin-top:3px!important; } .notif-panel { max-height:min(420px,calc(100dvh - 100px))!important; } .notif-head { padding:10px 12px!important; } .notif-item { padding:9px 11px!important;grid-template-columns:28px minmax(0,1fr)!important;gap:8px!important; } /* -- analitica -- */ #pg-inc .ana-kpi-grid { grid-template-columns:1fr 1fr!important;gap:8px!important;margin-bottom:10px!important; } #pg-inc .ana-kpi { padding:10px 12px!important;gap:5px!important;border-radius:10px!important; } #pg-inc .ana-kpi-value { font-size:19px!important; } #pg-inc .ana-kpi-label { font-size:10px!important;letter-spacing:.2px!important; } #pg-inc .ana-kpi-head i { font-size:15px!important; } .ana-tabsbar { gap:8px!important;margin:0 0 12px!important; } .ana-tab { height:34px!important;padding:0 10px!important;font-size:12px!important; } #pg-inc .ana-cmp-trend-big { font-size:26px!important; } #pg-inc .ana-ph-charts .ana-stk-wrap { height:300px!important; } .ana-repg-body .ana-rep-row { gap:8px!important;padding:9px 10px!important; } .ana-repg-body .ana-rep-text { font-size:12px!important;line-height:1.4!important; } .ana-pap-row { gap:8px!important;padding:10px 2px!important;flex-wrap:wrap; } /* -- clientes -- */ .fmc-stats { width:100%!important;justify-content:space-between!important; } .fmc-stat { padding:7px 8px!important;flex:1 1 0; } .fmc-stat b { font-size:16px!important; } .fmc-head { gap:10px!important;margin-bottom:12px!important; } .fmc-new { height:38px!important;padding:0 14px!important;font-size:13px!important; } .fmc-tr { padding:10px 12px!important;gap:8px 10px!important; } .fmc-ficha-head { padding:14px 14px 12px!important;gap:12px!important;flex-wrap:wrap; } .fmc-ficha-body { padding:12px 12px!important; } .fmc-ficha-foot { padding:10px 12px!important;flex-wrap:wrap; } .fmc-ficha-h1 { font-size:17px!important; } .client-wa-linked { flex-wrap:wrap!important;padding:10px 12px!important;gap:10px!important; } .client-modal .md-b { padding:12px 12px 18px!important; } /* -- inventario -- */ .ivk-grid { grid-template-columns:1fr 1fr!important;gap:8px!important;margin-bottom:12px!important; } .ivk { padding:10px 10px!important;gap:8px!important; } .ivk-ic { width:30px!important;height:30px!important;font-size:16px!important;border-radius:8px!important; } .ivk-v { font-size:16px!important;word-break:break-word; } .inv-grid { grid-template-columns:1fr 1fr!important;gap:10px!important; } .inv-card .pic { height:96px!important; } .inv-rcpt { max-width:100%!important;overflow-x:auto!important; } .ivc .cwrap { height:190px!important; } /* -- certificados -- */ .cert-dock { min-width:0!important;width:100vw!important;max-width:100vw!important; } .cert-dock-head { padding:10px 14px!important; } .cert-dock-body { padding:12px 14px!important; } .cert-2col { padding:8px!important;gap:12px!important; } .cert-2col .cert-single { padding:14px 12px!important;border-radius:12px!important; } .cert-2col .cert-col-list { padding:12px 10px 8px!important; } .cert-field label { font-size:11px!important; } .cert-field .finp { height:40px!important; } .cert-hero-title { font-size:14.5px!important; } .cert-form-actions { margin-top:16px!important;gap:8px!important;flex-wrap:wrap; } .cert-btn { height:38px!important;padding:0 14px!important;font-size:12.5px!important; } .cert-pagination { flex-wrap:wrap;gap:8px;font-size:11px!important; } /* -- config-users -- */ #edit-user-modal .md { width:100vw!important;max-width:100vw!important;height:100dvh!important;max-height:100dvh!important;border-radius:0!important; } #eu-role-cards { grid-template-columns:1fr!important;gap:6px!important; } .cfg-wrap { padding:0 10px!important;margin:12px auto!important;gap:12px!important; } .cfg-topbar { padding:8px 10px 0!important; } .cfg-sec-h { font-size:15px!important; } .cfg-sec-d { font-size:12px!important;margin-bottom:12px!important; } .cfg-panic { padding:10px 12px!important;gap:10px!important;flex-wrap:wrap; } .cfg-panic i.ph { font-size:22px!important; } .cfg-kpi { padding:10px 12px!important; } .cfg-kpi .cfg-kv { font-size:19px!important; } .cfg-row { padding:10px 0!important;gap:10px!important; } /* -- levantamientos-calendar -- */ .lp-wrap { padding:12px 10px!important; } .lp-drawer { width:100vw!important;max-width:100vw!important;border-radius:0!important; } .lp-grip { display:none!important; } .lp-kpi { padding:10px 12px!important; } .lp-kpi-v { font-size:20px!important;letter-spacing:-.5px!important; } .lp-kpi-icon { width:30px!important;height:30px!important;border-radius:8px!important; } .lp-kpis { gap:8px!important;margin-bottom:14px!important; } .lp-h1 { font-size:17px!important; } .lp-dhead { padding:12px 44px 12px 14px!important; } .lp-dbody { padding:12px!important; } .lp-modal { width:calc(100vw - 12px)!important;max-height:94dvh!important; } .lp-pdf-ov { padding:6px!important; } }