/* | OXIRA Nexo · Hoja de Estilos del Sistema (nexo.css) — SaaS 2026 UI Design | | Marca oficial OXIRA: | --nx-primario: #6030BB (Morado marca) | --nx-acento: #00A896 (Turquesa / Éxito marca) | | Apoyado sobre Bootstrap 5.3 CDN, icons-webfont @tabler y data-tema="oscuro". */ :root { /* Branding OXIRA 2026 */ --nx-primario: #6030BB; --nx-primario-oscuro: #4c2696; --nx-primario-suave: rgba(96, 48, 187, 0.08); --nx-primario-glow: rgba(96, 48, 187, 0.25); --nx-acento: #00A896; --nx-acento-oscuro: #008577; --nx-acento-suave: rgba(0, 168, 150, 0.1); /* Colores de estado & semántica */ --nx-exito: #00A896; --nx-peligro: #ef4444; --nx-advertencia: #f59e0b; --nx-info: #3b82f6; /* Superficies claras: limpio, moderno, sin contraste agresivo */ --nx-fondo: #f4f6fa; --nx-superficie: #ffffff; --nx-superficie-2: #f8fafc; --nx-borde: #e2e8f0; --nx-borde-suave: #f1f5f9; --nx-texto: #1e293b; --nx-texto-suave: #64748b; --nx-texto-mutado: #94a3b8; /* Sidebar Oscuro (Modo Admin) */ --nx-sidebar-bg: #12141c; --nx-sidebar-borde: #1e2230; --nx-sidebar-texto: #94a3b8; --nx-sidebar-texto-hover: #ffffff; --nx-sidebar-item-hover: rgba(255, 255, 255, 0.06); --nx-sidebar-item-active: rgba(96, 48, 187, 0.22); /* Estructura & Sombras multi-capa SaaS */ --nx-radio: 14px; --nx-radio-sm: 8px; --nx-radio-lg: 18px; --nx-sombra-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.04); --nx-sombra: 0 4px 16px -2px rgba(15, 23, 42, 0.05), 0 2px 6px -1px rgba(15, 23, 42, 0.03); --nx-sombra-elevada: 0 12px 30px -4px rgba(15, 23, 42, 0.09), 0 4px 12px -2px rgba(15, 23, 42, 0.04); --nx-lateral-ancho: 256px; --nx-cabecera-alto: 64px; /* Integración con Bootstrap 5.3 */ --bs-primary: var(--nx-primario); --bs-primary-rgb: 96, 48, 187; --bs-success: var(--nx-acento); --bs-success-rgb: 0, 168, 150; --bs-link-color: var(--nx-primario); --bs-link-hover-color: var(--nx-primario-oscuro); --bs-body-bg: var(--nx-fondo); --bs-body-color: var(--nx-texto); --bs-border-color: var(--nx-borde); --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* Tema Oscuro: activado vía data-tema="oscuro" en */ html[data-tema="oscuro"] { --nx-primario-suave: rgba(96, 48, 187, 0.22); --nx-acento-suave: rgba(0, 168, 150, 0.2); --nx-fondo: #0f1117; --nx-superficie: #171923; --nx-superficie-2: #1e2230; --nx-borde: #262b3d; --nx-borde-suave: #1e2230; --nx-texto: #f1f5f9; --nx-texto-suave: #94a3b8; --nx-texto-mutado: #64748b; --nx-sombra-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.2); --nx-sombra: 0 4px 20px rgba(0, 0, 0, 0.35); --nx-sombra-elevada: 0 12px 32px rgba(0, 0, 0, 0.5); --nx-sidebar-bg: #0c0e14; --nx-sidebar-borde: #181b26; color-scheme: dark; } body { background-color: var(--nx-fondo); color: var(--nx-texto); font-family: var(--bs-font-sans-serif); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ============ Componentes Bootstrap Re-tintados & SaaS 2026 ============ */ .btn { font-weight: 550; border-radius: var(--nx-radio-sm); padding: 0.5rem 1rem; transition: all 150ms ease; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; } .btn-sm { padding: 0.32rem 0.75rem; font-size: 0.84rem; border-radius: 6px; } .btn-lg { padding: 0.75rem 1.5rem; font-size: 1.05rem; border-radius: var(--nx-radio); } .btn-primary { --bs-btn-bg: var(--nx-primario); --bs-btn-border-color: var(--nx-primario); --bs-btn-hover-bg: var(--nx-primario-oscuro); --bs-btn-hover-border-color: var(--nx-primario-oscuro); --bs-btn-active-bg: var(--nx-primario-oscuro); box-shadow: 0 2px 8px rgba(96, 48, 187, 0.25); } .btn-primary:hover { box-shadow: 0 4px 12px rgba(96, 48, 187, 0.35); } .btn-success { --bs-btn-bg: var(--nx-acento); --bs-btn-border-color: var(--nx-acento); --bs-btn-hover-bg: var(--nx-acento-oscuro); --bs-btn-hover-border-color: var(--nx-acento-oscuro); box-shadow: 0 2px 8px rgba(0, 168, 150, 0.25); } .btn-outline-primary { --bs-btn-color: var(--nx-primario); --bs-btn-border-color: var(--nx-primario); --bs-btn-hover-bg: var(--nx-primario); --bs-btn-hover-border-color: var(--nx-primario); --bs-btn-active-bg: var(--nx-primario); } .card { background: var(--nx-superficie); border: 1px solid var(--nx-borde); border-radius: var(--nx-radio); box-shadow: var(--nx-sombra); color: var(--nx-texto); transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease; } .card-header { background: transparent; border-bottom: 1px solid var(--nx-borde-suave); padding: 1rem 1.25rem; font-weight: 600; } .card-footer { background: transparent; border-top: 1px solid var(--nx-borde-suave); padding: 0.85rem 1.25rem; } /* Stat-Cards Destacadas */ .nx-stat-card { position: relative; overflow: hidden; } .nx-stat-card:hover { transform: translateY(-2px); box-shadow: var(--nx-sombra-elevada); border-color: rgba(96, 48, 187, 0.3); } .nx-stat-icon { width: 48px; height: 48px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; background: var(--nx-primario-suave); color: var(--nx-primario); flex-shrink: 0; } .nx-stat-icon.acento { background: var(--nx-acento-suave); color: var(--nx-acento); } /* Formularios */ .form-control, .form-select, .input-group-text { background-color: var(--nx-superficie); border-color: var(--nx-borde); color: var(--nx-texto); border-radius: var(--nx-radio-sm); padding: 0.55rem 0.85rem; font-size: 0.92rem; transition: border-color 150ms ease, box-shadow 150ms ease; } .form-control:focus, .form-select:focus { background-color: var(--nx-superficie); color: var(--nx-texto); border-color: var(--nx-primario); box-shadow: 0 0 0 3px var(--nx-primario-glow); } .form-label { font-weight: 550; font-size: 0.875rem; color: var(--nx-texto); margin-bottom: 0.35rem; } /* Badges */ .badge { font-weight: 600; padding: 0.35em 0.7em; font-size: 0.76rem; border-radius: 6px; letter-spacing: 0.2px; } /* Modales y Dropdowns */ .modal-content, .dropdown-menu { background: var(--nx-superficie); border: 1px solid var(--nx-borde); border-radius: var(--nx-radio); box-shadow: var(--nx-sombra-elevada); color: var(--nx-texto); } .dropdown-item { color: var(--nx-texto); border-radius: 6px; padding: 0.45rem 0.85rem; font-size: 0.88rem; display: flex; align-items: center; gap: 0.5rem; } .dropdown-item:hover { background: var(--nx-primario-suave); color: var(--nx-primario); } /* Paginación */ .pagination { gap: 0.25rem; } .page-link { border-radius: 6px !important; border-color: var(--nx-borde); color: var(--nx-texto); background: var(--nx-superficie); padding: 0.35rem 0.75rem; font-size: 0.88rem; } .page-item.active .page-link { background: var(--nx-primario); border-color: var(--nx-primario); color: #ffffff; } /* ============ Tablas del sistema ============ */ .tabla-nexo { overflow-x: auto; background: var(--nx-superficie); border: 1px solid var(--nx-borde); border-radius: var(--nx-radio); box-shadow: var(--nx-sombra); } .tabla-nexo table { margin-bottom: 0; } .table { --bs-table-bg: var(--nx-superficie); --bs-table-color: var(--nx-texto); --bs-table-border-color: var(--nx-borde); --bs-table-striped-bg: var(--nx-superficie-2); --bs-table-hover-bg: var(--nx-primario-suave); --bs-table-hover-color: var(--nx-texto); vertical-align: middle; } .table thead th { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--nx-texto-suave); background: var(--nx-superficie-2); border-bottom: 1px solid var(--nx-borde); padding: 0.75rem 1rem; white-space: nowrap; position: sticky; top: 0; z-index: 10; } .table tbody td { padding: 0.85rem 1rem; border-bottom: 1px solid var(--nx-borde-suave); font-size: 0.9rem; } /* ============ Área pública (front) ============ */ .nx-front-cabecera { background: var(--nx-superficie); border-bottom: 1px solid var(--nx-borde); } .nx-logo { font-weight: 800; font-size: 1.2rem; color: var(--nx-primario); text-decoration: none; letter-spacing: -0.3px; display: inline-flex; align-items: center; gap: 0.4rem; } .nx-logo span { color: var(--nx-acento); } .nx-logo:hover { color: var(--nx-primario-oscuro); } .nx-hero { padding: 4.5rem 0 3.5rem; text-align: center; } .nx-hero h1 { font-weight: 800; letter-spacing: -1px; } .nx-hero .nx-subtitulo { color: var(--nx-texto-suave); max-width: 620px; margin: 0.8rem auto 1.6rem; } .nx-tarjeta-funcion { height: 100%; text-align: center; padding: 1.6rem 1.2rem; } .nx-tarjeta-funcion i { font-size: 1.9rem; color: var(--nx-primario); } .nx-tarjeta-funcion h3 { font-size: 1.05rem; font-weight: 700; margin: 0.7rem 0 0.4rem; } .nx-tarjeta-funcion p { color: var(--nx-texto-suave); font-size: 0.92rem; margin: 0; } .nx-front-pie { border-top: 1px solid var(--nx-borde); color: var(--nx-texto-suave); font-size: 0.85rem; background: var(--nx-superficie); } /* ============ Área Admin: Cabecera + Menú Lateral Oscuro ============ */ .nx-admin { display: flex; min-height: 100vh; } .nx-lateral { width: var(--nx-lateral-ancho); min-height: 100vh; background: var(--nx-sidebar-bg); border-right: 1px solid var(--nx-sidebar-borde); flex-shrink: 0; display: flex; flex-direction: column; transition: margin-left 0.2s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1030; } .nx-admin.lateral-oculto .nx-lateral { margin-left: calc(-1 * var(--nx-lateral-ancho)); } .nx-lateral-marca { height: var(--nx-cabecera-alto); display: flex; align-items: center; padding: 0 1.25rem; border-bottom: 1px solid var(--nx-sidebar-borde); } .nx-lateral-marca .nx-logo { color: #ffffff; font-size: 1.2rem; } .nx-lateral-marca .nx-logo span { color: var(--nx-acento); } .nx-menu { flex: 1; overflow-y: auto; padding: 1rem 0.75rem; } .nx-menu-seccion { font-size: 0.68rem; font-weight: 750; text-transform: uppercase; letter-spacing: 0.8px; color: #64748b; padding: 1rem 0.75rem 0.35rem; } .nx-menu a { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.75rem; border-radius: 8px; color: var(--nx-sidebar-texto); text-decoration: none; font-size: 0.9rem; font-weight: 500; transition: all 150ms ease; } .nx-menu a:hover { background: var(--nx-sidebar-item-hover); color: var(--nx-sidebar-texto-hover); } .nx-menu a.active, .nx-menu a.activo { background: var(--nx-primario); color: #ffffff !important; font-weight: 600; box-shadow: 0 4px 12px rgba(96, 48, 187, 0.35); } .nx-menu a i { width: 1.2rem; text-align: center; font-size: 1.1rem; color: #64748b; transition: color 150ms ease; } .nx-menu a:hover i { color: #ffffff; } .nx-menu a.active i, .nx-menu a.activo i { color: #ffffff !important; } /* Grupos Plegables del Menú Lateral */ .nx-menu .nx-menu-grupo { justify-content: flex-start; font-weight: 550; cursor: pointer; } .nx-menu .nx-menu-grupo .nx-menu-chevron { margin-left: auto; font-size: 0.75rem; transition: transform 0.2s ease; } .nx-menu .nx-menu-grupo[aria-expanded="true"] .nx-menu-chevron { transform: rotate(180deg); } .nx-menu .nx-menu-grupo.active { background: var(--nx-sidebar-item-active); color: #ffffff; border-left: 3px solid var(--nx-primario); border-radius: 0 8px 8px 0; box-shadow: none; } .nx-menu .nx-menu-grupo.active i { color: var(--nx-primario); } .nx-menu .nx-submenu { margin: 0.2rem 0 0.4rem 1.25rem; border-left: 1px solid var(--nx-sidebar-borde); padding-left: 0.4rem; } .nx-menu .nx-submenu a { font-size: 0.86rem; padding: 0.4rem 0.65rem; border-radius: 6px; } .nx-contenido { flex: 1; min-width: 0; display: flex; flex-direction: column; } /* Cabecera Principal (Glassmorphism Sticky Bar) */ .nx-cabecera { height: var(--nx-cabecera-alto); background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--nx-borde); display: flex; align-items: center; gap: 0.8rem; padding: 0 1.5rem; position: sticky; top: 0; z-index: 1020; } html[data-tema="oscuro"] .nx-cabecera { background: rgba(23, 25, 35, 0.85); } .nx-principal { padding: 1.5rem; flex: 1; } .nx-btn-icono { border: 1px solid var(--nx-borde); background: var(--nx-superficie); color: var(--nx-texto); border-radius: 8px; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 150ms ease; } .nx-btn-icono:hover { background: var(--nx-superficie-2); color: var(--nx-primario); border-color: var(--nx-primario); } /* Responsive Mobile Sidebar Drawer */ @media (max-width: 991.98px) { .nx-lateral { position: fixed; z-index: 1040; left: 0; top: 0; bottom: 0; margin-left: calc(-1 * var(--nx-lateral-ancho)); box-shadow: none; } .nx-admin.lateral-abierto .nx-lateral { margin-left: 0; box-shadow: 0 0 50px rgba(0, 0, 0, 0.5); } .nx-admin.lateral-oculto .nx-lateral { margin-left: calc(-1 * var(--nx-lateral-ancho)); } .nx-admin.lateral-abierto.lateral-oculto .nx-lateral { margin-left: 0; } .nx-velo { display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(4px); z-index: 1035; } .nx-admin.lateral-abierto .nx-velo { display: block; } } /* ============ Área Cliente: Navegación Horizontal SaaS ============ */ .nx-cliente-cabecera { background: var(--nx-superficie); border-bottom: 1px solid var(--nx-borde); box-shadow: var(--nx-sombra-sm); } .nx-cliente-nav { display: flex; gap: 0.3rem; overflow-x: auto; padding-bottom: 0.1rem; } .nx-cliente-nav a { padding: 0.75rem 1rem; color: var(--nx-texto-suave); text-decoration: none; font-size: 0.92rem; font-weight: 550; white-space: nowrap; border-bottom: 2px solid transparent; transition: all 150ms ease; } .nx-cliente-nav a:hover { color: var(--nx-primario); } .nx-cliente-nav a.activo, .nx-cliente-nav a.active { color: var(--nx-primario); font-weight: 600; border-bottom-color: var(--nx-primario); } /* ============ Páginas de Autenticación (.nx-auth) ============ */ .nx-auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: radial-gradient(1000px 500px at 85% -10%, rgba(0, 168, 150, .18), transparent 60%), radial-gradient(900px 600px at -10% 110%, rgba(96, 48, 187, .22), transparent 55%), linear-gradient(160deg, #1a1030 0%, #241546 55%, #1c1236 100%) !important; } .nx-auth > * { width: 100%; max-width: 420px; } .nx-login-card { border: 0; border-radius: 1rem; box-shadow: 0 18px 50px rgba(10, 5, 30, .45); overflow: hidden; } .nx-login-brand { background: linear-gradient(135deg, var(--nx-primario) 0%, var(--nx-primario-oscuro) 100%); color: #fff; padding: 1.6rem 1.5rem 1.4rem; text-align: center; } .nx-login-brand .nx-logo { width: 52px; height: 52px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .14); font-size: 1.6rem; margin-bottom: .55rem; } .nx-login-brand h1 { font-size: 1.25rem; font-weight: 700; letter-spacing: .5px; margin: 0; } .nx-login-brand p { margin: .15rem 0 0; font-size: .85rem; opacity: .85; } .nx-login-card .form-control { padding: .65rem .85rem; } .nx-login-card .form-control:focus { border-color: var(--nx-primario); box-shadow: 0 0 0 .2rem rgba(96, 48, 187, .15); } .nx-login-card .btn-entrar { background: linear-gradient(135deg, var(--nx-primario) 0%, var(--nx-primario-oscuro) 100%); border: 0; padding: .65rem; font-weight: 600; letter-spacing: .3px; } .nx-login-card .btn-entrar:hover { filter: brightness(1.08); } .nx-auth-firma { text-align: center; margin-top: 1rem; font-size: .8rem; color: rgba(255, 255, 255, .55); } .nx-auth-firma a { color: rgba(255, 255, 255, .8); text-decoration: none; } .nx-auth-firma a:hover { color: #fff; } .nx-menu-pronto { display: flex; align-items: center; gap: .5rem; padding: .45rem .75rem; border-radius: .5rem; color: var(--nx-sidebar-texto); opacity: .45; cursor: default; font-size: .9rem; } .nx-menu-pronto em { margin-left: auto; font-style: normal; font-size: .68rem; border: 1px solid currentColor; border-radius: 999px; padding: 0 .4rem; } /* Ayudas de formulario colapsadas (despliegue en focus) */ .form-text { max-height: 0; overflow: hidden; opacity: 0; margin-top: 0; transition: max-height 150ms ease, opacity 150ms ease, margin-top 150ms ease; } .mb-3:focus-within > .form-text, .col:focus-within > .form-text, .col-md-4:focus-within > .form-text, .col-md-6:focus-within > .form-text, div:has(> input:focus) > .form-text, div:has(> select:focus) > .form-text, div:has(> textarea:focus) > .form-text { max-height: 6rem; opacity: 1; margin-top: .25rem; } .form-text.nx-siempre { max-height: none; opacity: 1; margin-top: .25rem; }