@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&display=swap'); /* ============================================================ ModulosERP — Layout global (sidebar + topbar) Reutilizable en todas las páginas del sistema ============================================================ */ :root { /* ── Paleta navy (tema por defecto) ── */ --navy-0: #020818; --navy-1: #060f24; --navy-2: #0a1628; --navy-3: #0d1f3c; --navy-4: #132044; --cyan: #00d4ff; --cyan-dim: rgba(0,212,255,.14); --cyan-glow: rgba(0,212,255,.45); --blue: #3b82f6; --purple: #8b5cf6; --green: #10b981; --red: #ef4444; --amber: #f59e0b; --text: #e2e8f0; --text-muted:rgba(226,232,240,.42); --border: rgba(0,212,255,.09); /* ── Superficies (se sobreescriben en light) ── */ --surface-0: #020818; --surface-1: #060f24; --surface-sidebar: rgba(4,11,28,.97); --surface-topbar: rgba(4,11,28,.88); --surface-card: rgba(255,255,255,.03); --surface-dropdown:rgba(8,20,46,.98); --surface-input: rgba(255,255,255,.03); --hover-overlay: rgba(255,255,255,.04); /* ── Superficies elevadas ── */ --surface-raised: rgba(6,14,32,.8); --surface-panel: rgba(6,14,34,.98); --surface-modal: rgba(8,18,42,.98); --surface-overlay-bg: rgba(2,8,24,.70); --border-subtle: rgba(255,255,255,.06); --border-hairline: rgba(255,255,255,.03); /* ── Layout ── */ --sidebar-w: 256px; --sidebar-c: 68px; --topbar-h: 62px; --ease: .24s ease; --radius: 12px; /* ── FUI Navy: acentos neón secundarios (Fase 0 — rediseño futurista) ── Intensificados 2026-07-17 (Ronda 3): la primera pasada era demasiado sutil (glow de 8px al .22 de alpha no se percibe contra un fondo ya oscuro). Sube el alpha y el radio para que el efecto sea visible sin hover. */ --neon-purple: #b026ff; --neon-purple-dim: rgba(176,38,255,.14); --neon-purple-glow: rgba(176,38,255,.45); --neon-orange: #ff6a1a; --neon-orange-dim: rgba(255,106,26,.14); --neon-orange-glow: rgba(255,106,26,.45); --cyan-glow-strong: rgba(0,212,255,.5); /* Radios de resplandor reutilizables — combinar con el color: box-shadow: 0 0 var(--glow-blur-md) var(--cyan-glow) */ --glow-blur-sm: 12px; --glow-blur-md: 24px; --glow-blur-lg: 44px; /* Vidrio unificado (mismo nombre de variable en ambos temas, valores distintos — Navy: vidrio oscuro con leve saturate) */ --blur-panel: 18px; --glass-blur: blur(18px) saturate(160%); --glass-highlight: inset 0 1px 0 rgba(0,212,255,.16), inset 0 0 30px rgba(0,212,255,.025); --glass-shadow: 0 20px 46px -16px rgba(0,0,0,.55); --glass-shadow-sm: 0 8px 20px -8px rgba(0,0,0,.5); } /* ── Light Mode ─────────────────────────────────────────────── */ [data-theme="light"] { /* Tema claro "macOS / white glass" (2026-10-05, reemplaza el HUD industrial): fondo tipo wallpaper claro, superficies de vidrio esmerilado blanco, separadores finos, acento azul sistema (#007AFF), texto #1d1d1f. Solo cambian los VALORES de los tokens. */ --navy-0: #eef1f7; --navy-1: #f5f5fa; --navy-2: #e6e9f2; --navy-3: #d1d5e0; --navy-4: #9aa0b0; --cyan: #007aff; --cyan-dim: rgba(0,122,255,.12); --cyan-glow: rgba(0,122,255,.30); --accent-cyan: #0a84ff; --steel: #6e6e73; --text: #1d1d1f; --text-muted:#6e6e73; --border: rgba(60,60,67,.18); --grid-color: transparent; --surface-0: #eef1f7; --surface-1: #f2f4f9; --surface-sidebar: rgba(247,248,252,.62); --surface-topbar: rgba(255,255,255,.55); --surface-card: rgba(255,255,255,.55); --surface-dropdown:rgba(255,255,255,.92); --surface-input: rgba(255,255,255,.7); --hover-overlay: rgba(0,0,0,.045); --surface-raised: rgba(255,255,255,.66); --surface-panel: rgba(255,255,255,.9); --surface-modal: rgba(255,255,255,.92); --surface-overlay-bg: rgba(30,30,40,.30); --border-subtle: rgba(60,60,67,.10); --border-hairline: rgba(60,60,67,.06); --neon-purple: #af52de; --neon-purple-dim: rgba(175,82,222,.10); --neon-purple-glow: rgba(175,82,222,.18); --neon-orange: #ff9500; --neon-orange-dim: rgba(255,149,0,.10); --neon-orange-glow: rgba(255,149,0,.18); --cyan-glow-strong: rgba(0,122,255,.40); --glow-blur-sm: 6px; --glow-blur-md: 12px; --glow-blur-lg: 20px; --blur-panel: 28px; --glass-blur: blur(28px) saturate(180%); --glass-highlight: inset 0 1px 0 rgba(255,255,255,.85); --glass-shadow: 0 14px 40px -12px rgba(30,40,90,.20); --glass-shadow-sm: 0 6px 20px -8px rgba(30,40,90,.18); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; background: var(--surface-0); color: var(--text); font-family: 'Inter', system-ui, sans-serif; font-size: 14.5px; line-height: 1.55; overflow: hidden; } /* ── App shell ─────────────────────────────────────────────── */ .app { display: flex; height: 100vh; overflow: hidden; } /* ── Sidebar ───────────────────────────────────────────────── */ .sidebar { width: var(--sidebar-w); flex-shrink: 0; background: var(--surface-sidebar); border-right: 1px solid var(--cyan-dim); /* Sin backdrop-filter: no hay contenido scrolleando detrás (es un panel lateral fijo, no flotante) — el blur no tendría efecto visible y sí costo de pintura. El "vidrio" se expresa con el highlight superior + sombra, no con blur real, a diferencia del topbar/dropdowns. */ box-shadow: var(--glass-highlight), var(--glass-shadow-sm), 1px 0 0 var(--cyan-dim); position: relative; display: flex; flex-direction: column; transition: width var(--ease); overflow: hidden; z-index: 100; } /* Filamento de energía vertical — mismo lenguaje que el borde inferior del topbar. right:0 (no -1px): .sidebar tiene overflow:hidden (para la animación de colapso), así que un ::after fuera de la caja quedaría recortado. */ .sidebar::after { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 1px; background: linear-gradient(180deg, transparent, var(--cyan) 15%, var(--neon-purple) 55%, transparent 90%); opacity: .5; pointer-events: none; } .sidebar.collapsed { width: var(--sidebar-c); } /* Brand */ .sidebar-brand { display: flex; align-items: center; gap: 11px; padding: 0 14px; /* min-height (no height fijo) + overflow visible: si el logo de plataforma usa zoom/margen grandes (Admin → Identidad), la fila crece para contenerlo en vez de recortarlo. Con los valores por defecto (zoom 100%, margen 0) se ve exactamente igual que antes (--topbar-h). */ min-height: var(--topbar-h); border-bottom: 1px solid var(--border); flex-shrink: 0; overflow: visible; } .brand-icon { width: 36px; height: 36px; flex-shrink: 0; background: linear-gradient(135deg, var(--cyan-dim), rgba(59,130,246,.25)); border: 1px solid var(--cyan-glow); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--cyan); font-size: 15px; box-shadow: 0 0 var(--glow-blur-md) var(--cyan-glow); animation: brand-pulse 3.6s ease-in-out infinite; } @keyframes brand-pulse { 0%, 100% { box-shadow: 0 0 var(--glow-blur-md) var(--cyan-glow); } 50% { box-shadow: 0 0 calc(var(--glow-blur-md) * 1.6) var(--cyan-glow-strong, var(--cyan-glow)); } } @media (prefers-reduced-motion: reduce) { .brand-icon { animation: none; } } /* Cuando hay logo subido: sin caja, bordes de color NI el pulso de .brand-icon — el glow/animación es para el ícono de respaldo (hexágono), no para una imagen real. */ .brand-icon--logo { width: auto; height: auto; background: none; border: none; border-radius: 0; box-shadow: none; color: inherit; font-size: inherit; animation: none; } .brand-icon--logo img { max-height: 44px; max-width: 148px; width: auto; object-fit: contain; display: block; } .brand-text { overflow: hidden; white-space: nowrap; transition: opacity var(--ease), max-width var(--ease); max-width: 180px; } .brand-text h2 { font-size: 1.1rem; font-weight: 800; color: var(--text); letter-spacing: -.01em; } .brand-text small { font-size: .63rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1.4px; } .sidebar.collapsed .brand-text { opacity: 0; max-width: 0; } /* ── Platform dual-theme logo (logo_path = navy, logo_path_light = light) ── */ /* Ambas imágenes se renderizan en el HTML; CSS elige cuál mostrar según data-theme */ .brand-plat-logo { display: none } .brand-plat-icon .brand-plat-default { display: flex; align-items:center; justify-content:center } /* Navy / default: mostrar solo logo navy */ .has-logo-navy .brand-plat-logo--navy { display: block; max-height: 44px; max-width: 148px; width: auto; object-fit: contain } .has-logo-navy .brand-plat-default { display: none } .has-logo-navy .brand-plat-text { display: none } .has-logo-navy .brand-plat-icon { width: auto; height: auto; background: none; border: none; border-radius: 0; box-shadow: none; color: inherit; font-size: inherit; animation: none; } /* Light theme: mostrar solo logo light (si existe), ocultar navy */ [data-theme="light"] .has-logo-light .brand-plat-logo--navy { display: none } [data-theme="light"] .has-logo-light .brand-plat-logo--light { display: block; max-height: 44px; max-width: 148px; width: auto; object-fit: contain } [data-theme="light"] .has-logo-light .brand-plat-default { display: none } [data-theme="light"] .has-logo-light .brand-plat-text { display: none } [data-theme="light"] .has-logo-light .brand-plat-icon { width: auto; height: auto; background: none; border: none; border-radius: 0; box-shadow: none; color: inherit; font-size: inherit; animation: none; } /* Posición del logo dentro de la barra (left/center/right, configurable en Admin → Identidad) */ .sidebar-brand.logo-pos-left { justify-content: flex-start; } .sidebar-brand.logo-pos-center { justify-content: center; } .sidebar-brand.logo-pos-right { justify-content: flex-end; } /* Zoom del logo completo — variable seteada inline por sidebar.php (--plat-logo-zoom) */ .brand-plat-logo--navy, .brand-plat-logo--light { transform: scale(var(--plat-logo-zoom, 1)); } .logo-pos-left .brand-plat-logo--navy, .logo-pos-left .brand-plat-logo--light { transform-origin: left center; } .logo-pos-center .brand-plat-logo--navy, .logo-pos-center .brand-plat-logo--light { transform-origin: center center; } .logo-pos-right .brand-plat-logo--navy, .logo-pos-right .brand-plat-logo--light { transform-origin: right center; } /* Margen fino (nudge) del logo — variable seteada inline por sidebar.php (--plat-logo-margin, shorthand "Tpx Rpx Bpx Lpx"). No se aplica al ícono del auto-swap por colapso a propósito (riel muy angosto, mejor tamaño/posición fijos). */ .brand-plat-logo--navy, .brand-plat-logo--light { margin: var(--plat-logo-margin, 0); } /* Variante "ícono" (logo_icon_path / logo_icon_path_light). Dos casos la muestran: 1) zona 'sidebar' con formato completo + sidebar colapsado (auto-swap por espacio), o 2) zona 'sidebar' con formato 'icono' explícito (sidebar.php la deja como única imagen en ese caso, así que estas reglas no dependen de .collapsed). */ .sidebar.collapsed .has-logo-icon-navy .brand-plat-logo--navy { display: none } .has-logo-icon-navy .brand-plat-logo--navy-icon { display: none } .sidebar.collapsed .has-logo-icon-navy .brand-plat-logo--navy-icon, .sidebar-brand.logo-formato-icono.has-logo-icon-navy .brand-plat-logo--navy-icon { display: block; max-height: 32px; max-width: 32px; width: auto; object-fit: contain; } [data-theme="light"] .sidebar.collapsed .has-logo-icon-light .brand-plat-logo--light { display: none } .has-logo-icon-light .brand-plat-logo--light-icon { display: none } [data-theme="light"] .sidebar.collapsed .has-logo-icon-light .brand-plat-logo--light-icon, .sidebar-brand.logo-formato-icono.has-logo-icon-light .brand-plat-logo--light-icon { display: block; max-height: 32px; max-width: 32px; width: auto; object-fit: contain; } /* FIX: en tema light, si hay ícono light, ocultar el ícono navy — si no, se ven los dos íconos (navy y light) superpuestos. Afecta tanto al formato 'icono' explícito como al auto-swap por colapso (ninguna de las dos reglas de arriba tenía guard de tema). */ [data-theme="light"] .sidebar-brand.logo-formato-icono.has-logo-icon-light .brand-plat-logo--navy-icon, [data-theme="light"] .sidebar.collapsed .has-logo-icon-light .brand-plat-logo--navy-icon { display: none; } /* Zoom aplicado también al ícono cuando la zona está en formato 'icono' explícito (el auto-swap por colapso NO se escala — mejor tamaño fijo en el riel angosto). */ .sidebar-brand.logo-formato-icono .brand-plat-logo--navy-icon, .sidebar-brand.logo-formato-icono .brand-plat-logo--light-icon { transform: scale(var(--plat-logo-zoom, 1)); margin: var(--plat-logo-margin, 0); } .logo-pos-left .brand-plat-logo--navy-icon, .logo-pos-left .brand-plat-logo--light-icon { transform-origin: left center; } .logo-pos-center .brand-plat-logo--navy-icon, .logo-pos-center .brand-plat-logo--light-icon { transform-origin: center center; } .logo-pos-right .brand-plat-logo--navy-icon, .logo-pos-right .brand-plat-logo--light-icon { transform-origin: right center; } /* FIX: en formato 'icono' nunca se agrega has-logo-navy/light (esas clases son del logo "ancho" completo/texto), así que las reglas de arriba que ocultan el ícono hexágono por defecto (.brand-plat-default), el nombre+tagline (.brand-plat-text) y resetean la caja con borde de .brand-plat-icon NUNCA se disparaban — se veía la caja con borde + hexágono + nombre superpuestos con la imagen de ícono real. Se repite el mismo reset acá, condicionado a que sí haya un ícono para mostrar. */ .sidebar-brand.logo-formato-icono.has-logo-icon-navy .brand-plat-default, .sidebar-brand.logo-formato-icono.has-logo-icon-navy .brand-plat-text { display: none; } .sidebar-brand.logo-formato-icono.has-logo-icon-navy .brand-plat-icon { width: auto; height: auto; background: none; border: none; border-radius: 0; box-shadow: none; color: inherit; font-size: inherit; animation: none; } [data-theme="light"] .sidebar-brand.logo-formato-icono.has-logo-icon-light .brand-plat-default, [data-theme="light"] .sidebar-brand.logo-formato-icono.has-logo-icon-light .brand-plat-text { display: none; } [data-theme="light"] .sidebar-brand.logo-formato-icono.has-logo-icon-light .brand-plat-icon { width: auto; height: auto; background: none; border: none; border-radius: 0; box-shadow: none; color: inherit; font-size: inherit; animation: none; } /* Nav scroll wrapper — único contenedor con overflow, crece entre brand y footer */ .sidebar-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(0,212,255,.08) transparent; } /* Nav sections — solo espaciado, sin scroll propio (estilo Proyectos: superficies planas, radios 10px) */ .sidebar-nav { padding: 8px 10px 4px; } /* separador entre secciones (sustituye el border-top blanco inline de sidebar.php) */ .sidebar-nav + .sidebar-nav { border-top: 1px solid var(--border-subtle) !important; margin-top: 4px; } .nav-group-label { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-dim, var(--text-muted)); padding: 12px 10px 6px; white-space: nowrap; overflow: hidden; transition: opacity var(--ease); } .sidebar.collapsed .nav-group-label { opacity: 0; } .nav-link { display: flex; align-items: center; gap: 11px; padding: 7px 10px; color: var(--text-muted); text-decoration: none; font-size: .88rem; font-weight: 600; border: 1px solid transparent; border-radius: 10px; transition: background .15s, color .15s, border-color .15s; margin-bottom: 3px; white-space: nowrap; position: relative; } .nav-link:hover { color: var(--text); background: var(--surface-raised); border-color: var(--border-subtle); } /* Activo: mismo lenguaje que las pestañas de Proyectos (texto cian sobre cian tenue), sin glow ni pulso */ .nav-link.active { background: var(--cyan-dim); color: var(--cyan); border-color: transparent; box-shadow: none; animation: none; } /* El color inline viene de core_modulos.color: se usa de tinte del "chip" del icono (como .proy-feature-icon). */ .nav-link .ni { width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; background: color-mix(in srgb, currentColor 14%, transparent); transition: background .15s; } .nav-link:hover .ni { background: color-mix(in srgb, currentColor 20%, transparent); } .nav-link.active .ni { background: color-mix(in srgb, currentColor 24%, transparent); } .nav-link .nl { transition: opacity var(--ease), max-width var(--ease); max-width: 160px; overflow: hidden; } .sidebar.collapsed .nav-link .nl { opacity: 0; max-width: 0; overflow: hidden; } /* Tooltip en modo collapsed */ .sidebar.collapsed .nav-link { justify-content: center; padding: 7px 0; } .sidebar.collapsed .nav-link[data-tip]:hover::after { content: attr(data-tip); position: absolute; left: calc(var(--sidebar-c) + 10px); top: 50%; transform: translateY(-50%); background: var(--navy-3); border: 1px solid rgba(0,212,255,.2); color: var(--text); font-size: .78rem; padding: 5px 11px; border-radius: 8px; white-space: nowrap; z-index: 999; pointer-events: none; box-shadow: 0 4px 16px rgba(0,0,0,.4); } /* Sidebar footer */ .sidebar-footer { padding: 8px; border-top: 1px solid var(--border); flex-shrink: 0; } /* ── Main wrapper ───────────────────────────────────────────── */ .main-wrap { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; background: var(--surface-1); } /* ── Topbar ─────────────────────────────────────────────────── */ .topbar { height: var(--topbar-h); flex-shrink: 0; background: var(--surface-topbar); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-bottom: 1px solid var(--cyan-dim); box-shadow: var(--glass-highlight), 0 1px 0 var(--cyan-dim), 0 8px 24px -12px var(--cyan-dim); position: relative; display: flex; align-items: center; padding: 0 22px; gap: 14px; z-index: 50; } /* Filamento de energía en el borde inferior — la línea que "prende" la barra */ .topbar::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--cyan) 20%, var(--neon-purple) 60%, transparent 90%); opacity: .55; pointer-events: none; } /* Barra de modo soporte (superadmin operando en otra empresa) */ .support-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 18px; background: #b45309; color: #fff; font-size: .82rem; font-weight: 600; position: sticky; top: 0; z-index: 500; } .support-bar button { background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.4); color: #fff; padding: 5px 12px; border-radius: 6px; cursor: pointer; font-size: .78rem; font-weight: 700; } .support-bar button:hover { background: rgba(255,255,255,.3); } .topbar-toggle { background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 15px; width: 36px; height: 36px; border-radius: 9px; display: flex; align-items: center; justify-content: center; transition: all .18s; flex-shrink: 0; } .topbar-toggle:hover { color: var(--cyan); background: var(--cyan-dim); box-shadow: 0 0 var(--glow-blur-sm) var(--cyan-glow); } .topbar-breadcrumb { flex: 1; display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--text-muted); overflow: hidden; } .topbar-breadcrumb .page-title { color: var(--text); font-weight: 600; white-space: nowrap; } .topbar-breadcrumb .sep { color: rgba(0,212,255,.3); } .topbar-right { display: flex; align-items: center; gap: 6px; } .t-btn { background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 14px; width: 36px; height: 36px; border-radius: 9px; display: flex; align-items: center; justify-content: center; transition: all .18s; position: relative; } .t-btn:hover, .t-btn.open { color: var(--cyan); background: var(--cyan-dim); box-shadow: 0 0 var(--glow-blur-sm) var(--cyan-glow); transform: translateY(-1px); will-change: transform; } [data-theme="light"] .t-btn:hover, [data-theme="light"] .t-btn.open { box-shadow: var(--glass-highlight), 0 0 var(--glow-blur-sm) var(--cyan-glow); } .t-btn--labeled { width: auto; padding: 0 12px; gap: 7px; font-size: 13px; font-weight: 500; } @media (max-width: 768px) { .t-btn--labeled { width: 36px; padding: 0; gap: 0; } .t-btn-label { display: none; } } .user-pill { display: flex; align-items: center; gap: 9px; padding: 5px 12px 5px 5px; background: var(--surface-input); border: 1px solid var(--cyan-dim); border-radius: 50px; cursor: pointer; transition: all .18s; text-decoration: none; color: inherit; } .user-pill:hover { background: var(--cyan-dim); border-color: var(--cyan-dim); box-shadow: 0 0 var(--glow-blur-sm) var(--cyan-glow); transform: translateY(-1px); will-change: transform; } [data-theme="light"] .user-pill:hover { box-shadow: var(--glass-highlight), 0 0 var(--glow-blur-sm) var(--cyan-glow); } .u-avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--cyan), var(--blue)); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .72rem; color: #020818; flex-shrink: 0; } .u-info { line-height: 1.2; } .u-name { font-size: .8rem; font-weight: 600; color: var(--text); } .u-company { font-size: .68rem; color: var(--text-muted); } /* ── Page content ───────────────────────────────────────────── */ .page-content { flex: 1; overflow-y: auto; padding: 26px 28px; scrollbar-width: thin; scrollbar-color: var(--cyan-dim) transparent; /* Ambiente FUI: dos resplandores fijos (no scrollean con el contenido) — cian arriba-izquierda, púrpura abajo-derecha. Reemplaza el fondo plano por una sensación de "cabina" iluminada, sin costo de blur/animación. */ background: radial-gradient(ellipse 1000px 620px at 10% -8%, var(--page-glow-cyan, rgba(0,212,255,.07)), transparent 60%), radial-gradient(ellipse 780px 560px at 105% 105%, var(--page-glow-purple, rgba(176,38,255,.06)), transparent 60%), var(--surface-1); background-attachment: fixed, fixed, scroll; } [data-theme="light"] .page-content { --page-glow-cyan: rgba(2,132,199,.05); --page-glow-purple: rgba(124,58,237,.04); } /* ── Scrollbar webkit ───────────────────────────────────────── */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(0,212,255,.12); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: var(--cyan-glow); } /* fa-grid-2 (icono del Dashboard en sidebar.php) es de Font Awesome Pro y no existe en la versión gratuita: se mapea a fa-table-cells-large (\f009). */ .fa-grid-2::before { content: "\f009"; } /* ── Sub-nav (módulo expandido en sidebar) ──────────────────── */ .nav-sub { margin-left: 20px; padding: 5px 10px; font-size: .83rem; margin-bottom: 2px; border-radius: 0 10px 10px 0; border-left: 2px solid var(--border-subtle); } .nav-sub.active { border-left-color: var(--cyan); } .nav-sub .ni { width: 22px; height: 22px; border-radius: 7px; font-size: 11px; } .sidebar.collapsed .nav-sub { margin-left: 0; padding: 5px 0; border-left: none; border-radius: 10px; } /* Grupos plegables de sub-páginas (p. ej. CRM → Email / WhatsApp / Leads Generator) */ .nav-sub-head { width: 100%; text-align: left; font-family: inherit; cursor: pointer; background: none; } .nav-sub-head .nl { display: flex; align-items: center; flex: 1; } .nav-chev { margin-left: auto; font-size: .62rem; opacity: .6; transition: transform .2s ease; } .nav-sub-group.open > .nav-sub-head .nav-chev { transform: rotate(180deg); } .nav-sub-group.has-active > .nav-sub-head { border-left-color: var(--cyan); color: var(--text); } .nav-sub-children { display: none; } .nav-sub-group.open > .nav-sub-children { display: block; } .nav-sub-group.open > .nav-sub-head .nav-grp-badge { display: none; } .nav-sub2 { margin-left: 34px; font-size: .8rem; padding: 4px 10px; } .nav-sub2 .ni { width: 20px; height: 20px; font-size: 10px; } .nav-sub2 .nl { max-width: 148px; text-overflow: ellipsis; white-space: nowrap; } /* con el menú contraído (solo iconos) los grupos se aplanan: se ven todas las páginas, sin encabezado */ .sidebar.collapsed .nav-sub-head { display: none; } .sidebar.collapsed .nav-sub-children { display: block; } .sidebar.collapsed .nav-sub2 { margin-left: 0; } /* ── User dropdown ──────────────────────────────────────────── */ .user-dropdown { position: absolute; right: 0; top: calc(100% + 8px); background: var(--surface-dropdown); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--cyan-dim); border-radius: 13px; min-width: 190px; overflow: hidden; box-shadow: var(--glass-highlight), 0 16px 40px rgba(0,0,0,.55); z-index: 200; display: none; } .user-dropdown.open { display: block; animation: slide-fade .18s ease; } @keyframes slide-fade { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } } .user-dropdown-header { padding: 12px 16px; border-bottom: 1px solid var(--border-subtle); } .user-dropdown-item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; font-size: .84rem; text-decoration: none; color: var(--text-muted); transition: background .15s; } .user-dropdown-item:hover { background: var(--hover-overlay); color: var(--text); } .user-dropdown-logout { color: #f87171; } .user-dropdown-logout:hover { background: rgba(239,68,68,.07); color: #f87171; } /* ── Utility classes ────────────────────────────────────────── */ /* .glass se usa en ~30 archivos de módulo. Bug real encontrado: no tenía override de [data-theme="light"], así que en tema claro siempre mostraba un panel navy oscuro hardcodeado, sin relación con el tema activo. Se corrige acá (Fase 1) porque es la utilidad de vidrio más usada de toda la plataforma — el resto de los CSS de módulo (Fase 3) se audita aparte, uno por uno, con más riesgo por tocar bajo demanda. */ .glass { background: rgba(8,18,40,.7); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--border); border-radius: var(--radius); } [data-theme="light"] .glass { background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.7); box-shadow: var(--glass-highlight), var(--glass-shadow-sm); } .text-cyan { color: var(--cyan); } .text-muted { color: var(--text-muted); } .fw-700 { font-weight: 700; } /* ── Topbar dropdowns (theme / lang) ──────────────────────────── */ .tb-drop-wrap { position: relative; } .tb-dropdown { position: absolute; right: 0; top: calc(100% + 8px); background: var(--surface-dropdown); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--cyan-dim); border-radius: 11px; min-width: 148px; overflow: hidden; box-shadow: var(--glass-highlight), 0 16px 40px rgba(0,0,0,.55); z-index: 300; display: none; } .tb-dropdown.open { display: block; animation: slide-fade .18s ease; } .tb-drop-item { display: flex; align-items: center; gap: 9px; padding: 9px 14px; font-size: .83rem; cursor: pointer; color: var(--text-muted); transition: background .15s; border: none; background: none; width: 100%; text-align: left; } .tb-drop-item:hover { background: var(--hover-overlay); color: var(--text); } .tb-drop-item.active { color: var(--cyan); font-weight: 600; } .lang-flag { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 17px; border-radius: 4px; font-size: .63rem; font-weight: 800; letter-spacing: .8px; background: var(--surface-input); border: 1px solid var(--border-subtle); color: var(--text); flex-shrink: 0; } /* ── Sonido de interfaz (topbar) ────────────────────────────── */ #soundBtn.muted { color: var(--text-muted); } /* ── Fallbacks de accesibilidad/rendimiento (Fase 1) ────────── Van al final a propósito: deben ganar por orden de cascada sobre las declaraciones incondicionales de backdrop-filter/transform de arriba (misma especificidad). */ @media (prefers-reduced-transparency: reduce) { .topbar, .sidebar, .glass, .user-dropdown, .tb-dropdown { backdrop-filter: none; -webkit-backdrop-filter: none; } [data-theme="light"] .glass { background: #ffffff; } } @supports not (backdrop-filter: blur(1px)) { .topbar { background: var(--surface-1); } .glass { background: var(--surface-1); } } @media (prefers-reduced-motion: reduce) { .t-btn, .t-btn:hover, .t-btn.open, .user-pill, .user-pill:hover, .topbar-toggle, .topbar-toggle:hover { transition: none !important; transform: none !important; } } /* ═══════════════════════════════════════════════════════════════ TEMA CLARO — macOS "WHITE GLASS" (solo [data-theme="light"]) Fondo de wallpaper claro con manchas de color suaves, vidrio esmerilado blanco (blur + saturación), bordes de 1px casi invisibles con brillo superior, esquinas muy redondeadas, sombras amplias y suaves, azul sistema como acento. El prefijo html[…] sube la especificidad para ganarle a los estilos claros propios de cada página. ═══════════════════════════════════════════════════════════════ */ html[data-theme="light"] body, html[data-theme="light"] .app { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, sans-serif; } html[data-theme="light"] .main-wrap { background: transparent; } html[data-theme="light"] .app { background: radial-gradient(900px 620px at 14% -8%, rgba(110,168,255,.40), transparent 62%), radial-gradient(820px 600px at 100% 2%, rgba(255,184,214,.34), transparent 62%), radial-gradient(900px 700px at 88% 108%, rgba(142,228,205,.30), transparent 62%), radial-gradient(700px 520px at 0% 100%, rgba(196,170,255,.26), transparent 62%), linear-gradient(180deg, #eef1f8, #f6f6fb); background-attachment: fixed; } html[data-theme="light"] .page-content { background: transparent; scrollbar-color: rgba(60,60,67,.35) transparent; } html[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(60,60,67,.30); border-radius: 10px; } html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(60,60,67,.5); } /* barra lateral y superior FLOTANTES: sin fondo, sin bordes ni sombras ni blur (más liviano); solo flotan las opciones */ html[data-theme="light"] .sidebar, html[data-theme="light"] .topbar { background: transparent; border: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } html[data-theme="light"] .topbar::after, html[data-theme="light"] .topbar::before, html[data-theme="light"] .sidebar::after, html[data-theme="light"] .sidebar::before { display: none; } html[data-theme="light"] .sidebar-brand, html[data-theme="light"] .sidebar-footer, html[data-theme="light"] .sidebar-nav { border: none !important; box-shadow: none; } html[data-theme="light"] .sidebar-brand { background: transparent; } /* opciones del menú (tema claro): SIN fondo ni contorno; solo la página seleccionada lleva cristal. Tipografía Poppins delgada; iconos de línea fina (contorno del glifo, sin chip de fondo). */ html[data-theme="light"] .nav-link { position: relative; border-radius: 14px; margin-bottom: 3px; color: #1d1d1f; background: none; border: 1px solid transparent; box-shadow: none; transition: background .2s ease, box-shadow .2s ease, color .2s ease; } html[data-theme="light"] .nav-link .nl, html[data-theme="light"] .nav-sub-head .nl { font-family: 'Poppins', 'Inter', system-ui, sans-serif; font-weight: 300; letter-spacing: .01em; } html[data-theme="light"] .nav-link:hover { background: none; border-color: transparent; box-shadow: none; transform: none; color: #000; } html[data-theme="light"] .nav-link:hover .nl { font-weight: 400; } html[data-theme="light"] .nav-link:active { transform: none; } /* iconos: sin fondo y delgados (outline del glifo; FA Free no trae la variante "thin") */ html[data-theme="light"] .nav-link .ni, html[data-theme="light"] .nav-link:hover .ni, html[data-theme="light"] .nav-link.active .ni { background: none; border-radius: 0; } html[data-theme="light"] .nav-link .ni i { -webkit-text-fill-color: transparent; -webkit-text-stroke: .55px currentColor; paint-order: stroke fill; } /* seleccionada: único elemento con fondo y contorno */ html[data-theme="light"] .nav-link.active { color: #0062d6; background: linear-gradient(135deg, rgba(0,122,255,.30) 0%, rgba(0,122,255,.12) 55%, rgba(120,190,255,.22) 100%); border-color: rgba(255,255,255,.7); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(0,122,255,.12), 0 10px 22px -8px rgba(0,122,255,.50); } html[data-theme="light"] .nav-link.active .nl { font-weight: 400; } html[data-theme="light"] .nav-sub, html[data-theme="light"] .nav-sub.active { border-left: 1px solid transparent; border-radius: 12px; margin-left: 14px; } html[data-theme="light"] .nav-sub.active { border-left-color: rgba(255,255,255,.7); } html[data-theme="light"] .nav-sub2 { margin-left: 26px; } html[data-theme="light"] .nav-sub-group.has-active > .nav-sub-head { border-left-color: transparent; color: #0062d6; } html[data-theme="light"] .nav-group-label { color: #6e6e73; letter-spacing: .06em; } html[data-theme="light"] .nav-chev { opacity: .5; } html[data-theme="light"] .sidebar.collapsed .nav-link { border-radius: 14px; } /* cards: vidrio esmerilado */ html[data-theme="light"] .proy-box, html[data-theme="light"] .proy-feature-card, html[data-theme="light"] .proy-serv-card, html[data-theme="light"] .proy-kpi, html[data-theme="light"] .proy-card, html[data-theme="light"] .adm-detail-card, html[data-theme="light"] .right-card, html[data-theme="light"] .hero-card, html[data-theme="light"] .area-card, html[data-theme="light"] .k-card, html[data-theme="light"] .k-col, html[data-theme="light"] .venc-card, html[data-theme="light"] .adm-mod-card, html[data-theme="light"] .empresa-card, html[data-theme="light"] .kpi-card, html[data-theme="light"] .glass, html[data-theme="light"] .cb-onb-banner, html[data-theme="light"] .mkt-glass-flat, html[data-theme="light"] .mkt-section { background: rgba(255,255,255,.62); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border: 1px solid rgba(255,255,255,.75); border-radius: 18px; box-shadow: 0 10px 34px -12px rgba(30,40,90,.18), 0 1px 2px rgba(30,40,90,.06), inset 0 1px 0 rgba(255,255,255,.9); transition: box-shadow .25s ease, transform .2s ease, background .25s ease; } html[data-theme="light"] .proy-box:hover, html[data-theme="light"] .proy-feature-card:hover, html[data-theme="light"] .proy-serv-card:hover, html[data-theme="light"] .proy-kpi:hover, html[data-theme="light"] .proy-card:hover, html[data-theme="light"] .adm-detail-card:hover, html[data-theme="light"] .right-card:hover, html[data-theme="light"] .hero-card:hover, html[data-theme="light"] .area-card:hover, html[data-theme="light"] .k-card:hover, html[data-theme="light"] .venc-card:hover, html[data-theme="light"] .adm-mod-card:hover, html[data-theme="light"] .empresa-card:hover, html[data-theme="light"] .kpi-card:hover { background: rgba(255,255,255,.74); border-color: rgba(255,255,255,.9); box-shadow: 0 16px 44px -12px rgba(30,40,90,.26), 0 1px 2px rgba(30,40,90,.07), inset 0 1px 0 #fff; } html[data-theme="light"] .right-card-head, html[data-theme="light"] .proy-box-head, html[data-theme="light"] .panel-header, html[data-theme="light"] .modal-header { background: transparent; border-bottom: 1px solid rgba(60,60,67,.08); } /* rendimiento: componentes repetidos muchas veces por pantalla no usan backdrop-filter (solo los contenedores grandes) */ html[data-theme="light"] .k-card, html[data-theme="light"] .proy-kpi, html[data-theme="light"] .area-card, html[data-theme="light"] .venc-card, html[data-theme="light"] .adm-mod-card, html[data-theme="light"] .kpi-card, html[data-theme="light"] .proy-feature-card, html[data-theme="light"] .proy-serv-card { background: rgba(255,255,255,.76); backdrop-filter: none; -webkit-backdrop-filter: none; } html[data-theme="light"] .k-card { border-radius: 14px; } html[data-theme="light"] .k-col { background: rgba(255,255,255,.42); } /* ventanas, paneles y menús: vidrio más opaco */ html[data-theme="light"] .modal-box, html[data-theme="light"] .mkt-modal-box, html[data-theme="light"] .create-panel, html[data-theme="light"] .adm-panel, html[data-theme="light"] .proy-panel, html[data-theme="light"] .tb-dropdown, html[data-theme="light"] .user-dropdown { background: rgba(255,255,255,.86); backdrop-filter: blur(40px) saturate(190%); -webkit-backdrop-filter: blur(40px) saturate(190%); border: 1px solid rgba(255,255,255,.8); border-radius: 18px; box-shadow: 0 30px 80px -20px rgba(20,25,60,.35), 0 2px 6px rgba(20,25,60,.08), inset 0 1px 0 #fff; } html[data-theme="light"] .create-panel, html[data-theme="light"] .adm-panel, html[data-theme="light"] .proy-panel { border-radius: 18px 0 0 18px; } /* controles: campos y botones al estilo macOS */ html[data-theme="light"] input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), html[data-theme="light"] select, html[data-theme="light"] textarea { background: rgba(255,255,255,.75); border: 1px solid rgba(60,60,67,.18); border-radius: 10px; box-shadow: inset 0 1px 2px rgba(0,0,0,.04); } html[data-theme="light"] input:focus, html[data-theme="light"] select:focus, html[data-theme="light"] textarea:focus { border-color: #007aff; box-shadow: 0 0 0 4px rgba(0,122,255,.18); outline: none; } html[data-theme="light"] .proy-btn { background: rgba(255,255,255,.8); border: 1px solid rgba(60,60,67,.16); color: #1d1d1f; border-radius: 10px; box-shadow: 0 1px 2px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.9); transition: background .2s, box-shadow .2s, transform .15s; } html[data-theme="light"] .proy-btn:hover { background: #fff; border-color: rgba(60,60,67,.24); color: #1d1d1f; box-shadow: 0 3px 10px rgba(0,0,0,.12), inset 0 1px 0 #fff; } html[data-theme="light"] .proy-btn:active { transform: scale(.98); } html[data-theme="light"] .proy-btn-primary, html[data-theme="light"] .proy-btn.primary, html[data-theme="light"] .btn-new-adm, html[data-theme="light"] .btn-panel-submit { background: linear-gradient(180deg, #3b9bff, #007aff); border: 1px solid #0a6fe0; color: #fff; border-radius: 10px; box-shadow: 0 4px 12px -2px rgba(0,122,255,.45), inset 0 1px 0 rgba(255,255,255,.4); } html[data-theme="light"] .proy-btn-primary:hover, html[data-theme="light"] .proy-btn.primary:hover, html[data-theme="light"] .btn-new-adm:hover, html[data-theme="light"] .btn-panel-submit:hover { background: linear-gradient(180deg, #54a8ff, #1a86ff); color: #fff; box-shadow: 0 6px 16px -2px rgba(0,122,255,.55), inset 0 1px 0 rgba(255,255,255,.5); } html[data-theme="light"] .proy-page-title, html[data-theme="light"] .page-title { color: #1d1d1f; letter-spacing: -.02em; } html[data-theme="light"] .support-bar { backdrop-filter: blur(20px); } @media (prefers-reduced-transparency: reduce) { html[data-theme="light"] .proy-box, html[data-theme="light"] .adm-detail-card, html[data-theme="light"] .right-card, html[data-theme="light"] .k-card, html[data-theme="light"] .empresa-card, html[data-theme="light"] .glass, html[data-theme="light"] .modal-box { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; } } /* ── Opciones de los