/* ============================================================================ OMNI CRM — offline.css · Indicador de red + nav colapsable/responsivo ============================================================================ */ /* ─────────────────────────── Indicador de red ─────────────────────────── */ .omni-net { position: fixed; top: 12px; right: 16px; z-index: 9500; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font: 600 12.5px/1 'Inter', system-ui, sans-serif; color: #0f172a; background: #ffffff; border: 1px solid #e2e8f0; box-shadow: 0 4px 14px rgba(15,23,42,.10); cursor: pointer; user-select: none; transition: opacity .3s ease, transform .2s ease, background .2s ease, border-color .2s ease; } .omni-net:hover { transform: translateY(-1px); } .omni-net--dim { opacity: .35; } .omni-net--dim:hover { opacity: 1; } /* FIX 2026-07 (Fase 8 UI/UX): variante "acoplada" — cuando la píldora vive dentro de #omni-net-slot (parte normal del layout del header), en vez de flotar fija encima de todo con sombra y z-index alto. Así ya no tapa botones reales (bell, avatar, Actualizar, etc.) detrás de ella. */ .omni-net--docked { position: static; top: auto; right: auto; z-index: auto; box-shadow: none; padding: 5px 10px; } .omni-net--docked:hover { transform: none; } .omni-net__dot { width: 9px; height: 9px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.18); } .omni-net__label { white-space: nowrap; } .omni-net__count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #0f172a; color: #fff; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; } /* Online */ .omni-net--online .omni-net__dot { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.18); } /* Offline */ .omni-net--offline { background: #fff7ed; border-color: #fed7aa; color: #9a3412; } .omni-net--offline .omni-net__dot { background: #f97316; box-shadow: 0 0 0 3px rgba(249,115,22,.18); } .omni-net--offline .omni-net__count { background: #ea580c; } /* Sincronizando */ .omni-net--syncing { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; } .omni-net--syncing .omni-net__dot { background: #3b82f6; box-shadow: none; animation: omni-spin 0.8s linear infinite; border: 2px solid #bfdbfe; border-top-color: #1d4ed8; border-radius: 50%; width: 12px; height: 12px; } @keyframes omni-spin { to { transform: rotate(360deg); } } /* ─────────────────────────── Toasts ─────────────────────────── */ #omni-net-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 9600; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; } .omni-net-toast { max-width: 340px; padding: 10px 14px; border-radius: 12px; font: 500 13px/1.35 'Inter', system-ui, sans-serif; color: #0f172a; background: #fff; border: 1px solid #e2e8f0; box-shadow: 0 8px 24px rgba(15,23,42,.14); opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .3s ease; } .omni-net-toast.is-in { opacity: 1; transform: translateY(0); } .omni-net-toast--ok { border-left: 4px solid #22c55e; } .omni-net-toast--warn { border-left: 4px solid #f97316; } .omni-net-toast--info { border-left: 4px solid #3b82f6; } /* En móvil, el indicador flotante (sin slot) se recoge para no tapar la barra superior. La variante --docked NO debe volver a position:fixed. */ @media (max-width: 480px) { .omni-net { top: 8px; right: 10px; padding: 5px 9px; font-size: 11.5px; } .omni-net--docked { position: static; top: auto; right: auto; } .omni-net--online .omni-net__label { display: none; } /* online: sólo el punto */ } /* ═══════════════════════ Nav colapsable / responsivo ═══════════════════════ Se apoya en tu markup: #app-icon-rail (rail 64px) y #main-content. Sólo actúa cuando tiene la clase .omni-nav-collapsed. */ /* Botón de colapso dentro del rail */ .omni-nav-collapse { width: 40px; height: 28px; margin: 6px auto 2px; display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; background: transparent; color: #94a3b8; border-radius: 8px; font-size: 13px; transition: background .15s ease, color .15s ease; } .omni-nav-collapse:hover { background: rgba(148,163,184,.15); color: #475569; } /* Flecha flotante para reabrir (oculta por defecto) */ .omni-nav-arrow { position: fixed; left: 0; top: 50%; transform: translateY(-50%); width: 26px; height: 54px; z-index: 9400; display: none; align-items: center; justify-content: center; cursor: pointer; border: 1px solid #e2e8f0; border-left: none; background: #ffffff; color: #2563eb; font-size: 13px; border-radius: 0 12px 12px 0; box-shadow: 3px 0 12px rgba(15,23,42,.12); transition: background .15s ease, transform .15s ease; } .omni-nav-arrow:hover { background: #f8fafc; transform: translateY(-50%) translateX(1px); } /* Estado COLAPSADO (escritorio): ocultar rail, ampliar contenido, mostrar flecha */ body.omni-nav-collapsed #app-icon-rail { transform: translateX(-100%); transition: transform .25s ease; pointer-events: none; } body.omni-nav-collapsed #main-content { margin-left: 0 !important; } body.omni-nav-collapsed .omni-nav-arrow { display: flex; } /* Transición suave al reabrir */ #app-icon-rail { transition: transform .25s ease; } /* ── Móvil: el rail actúa como cajón por encima del contenido ── */ @media (max-width: 768px) { #app-icon-rail { position: fixed !important; top: 0; left: 0; height: 100vh; z-index: 60; box-shadow: 4px 0 24px rgba(15,23,42,.18); } /* Cuando NO está colapsado en móvil, mostrar overlay para cerrar tocando fuera */ body:not(.omni-nav-collapsed) #sidebar-overlay { opacity: 1 !important; pointer-events: auto !important; } body.omni-nav-collapsed .omni-nav-arrow { display: flex; } /* En móvil el contenido nunca reserva el ancho del rail */ #main-content { margin-left: 0 !important; } } /* ── Responsividad general de vistas: evita desbordes horizontales ── */ @media (max-width: 640px) { #main-content, #main-content * { min-width: 0; } .rail-flyout, #rail-flyout { max-width: 82vw; } } /* ─────────────────────── Panel de sincronización ─────────────────────── */ #omni-sync-overlay { position: fixed; inset: 0; z-index: 9700; background: rgba(15,23,42,.45); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px; backdrop-filter: blur(2px); } #omni-sync-panel { width: 100%; max-width: 560px; max-height: 82vh; display: flex; flex-direction: column; background: #fff; border-radius: 16px; box-shadow: 0 24px 60px rgba(15,23,42,.30); overflow: hidden; font-family: 'Inter', system-ui, sans-serif; } .omni-sync-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid #eef2f7; font-weight: 700; color: #0f172a; } .omni-sync-head i { color: #2563eb; margin-right: 6px; } .omni-sync-x { border: none; background: transparent; font-size: 22px; line-height: 1; cursor: pointer; color: #94a3b8; } .omni-sync-x:hover { color: #475569; } .omni-sync-body { padding: 12px 18px; overflow-y: auto; } .omni-sync-loading, .omni-sync-empty { color: #64748b; font-size: 13px; padding: 10px 0; } .omni-sync-sec { margin-bottom: 14px; } .omni-sync-sec h4 { margin: 8px 0; font-size: 13px; color: #334155; font-weight: 700; } .omni-sync-item { border: 1px solid #eef2f7; border-radius: 10px; padding: 9px 11px; margin-bottom: 7px; } .omni-sync-item--conf { border-color: #fed7aa; background: #fff7ed; } .omni-sync-item-main { display: flex; align-items: center; gap: 8px; } .omni-sync-method { font-size: 10.5px; font-weight: 800; padding: 2px 6px; border-radius: 5px; background: #e2e8f0; color: #334155; } .omni-sync-method.m-POST { background: #dcfce7; color: #166534; } .omni-sync-method.m-PUT, .omni-sync-method.m-PATCH { background: #dbeafe; color: #1e40af; } .omni-sync-method.m-DELETE { background: #fee2e2; color: #991b1b; } .omni-sync-path { font-size: 12.5px; color: #0f172a; font-family: ui-monospace, monospace; word-break: break-all; } .omni-sync-meta { font-size: 11px; color: #94a3b8; margin: 3px 0 5px; } .omni-sync-actions { display: flex; gap: 12px; } .omni-sync-link { border: none; background: transparent; color: #2563eb; font-size: 12px; font-weight: 600; cursor: pointer; padding: 0; } .omni-sync-link:hover { text-decoration: underline; } .omni-sync-link--danger { color: #dc2626; } .omni-sync-foot { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-top: 1px solid #eef2f7; } .omni-sync-btn { border: none; border-radius: 9px; padding: 8px 14px; font-weight: 700; font-size: 13px; cursor: pointer; } .omni-sync-btn--primary { background: #2563eb; color: #fff; } .omni-sync-btn--primary:hover { background: #1d4ed8; } .omni-sync-state { font-size: 12px; color: #64748b; } @media (max-width: 480px) { #omni-sync-panel { max-height: 88vh; } }