/** * INVARAT — Sistema de temas (restyle) * Solo estilos. Base para modo oscuro / claro. * Fase 1: topbar */ :root { /* Paleta de marca */ --brand-black: #111111; --brand-white: #ffffff; --brand-accent: #00e5d6; --brand-accent-muted: rgba(0, 229, 214, 0.15); --brand-accent-hover: rgba(0, 229, 214, 0.25); /* Topbar — modo oscuro (por defecto) */ --topbar-bg: #111111; --topbar-bg-hover: #1a1a1a; --topbar-text: #ffffff; --topbar-text-muted: rgba(255, 255, 255, 0.75); --topbar-border: rgba(255, 255, 255, 0.08); --topbar-accent: #00e5d6; --topbar-accent-hover: #00cfc2; --topbar-icon: #ffffff; --topbar-breadcrumb-separator: rgba(255, 255, 255, 0.45); --topbar-shadow: 0 1px 0 rgba(255, 255, 255, 0.06); --topbar-user-btn-bg: transparent; --topbar-user-btn-border: rgba(255, 255, 255, 0.35); --topbar-user-btn-text: #ffffff; --topbar-user-btn-hover-bg: rgba(255, 255, 255, 0.08); --topbar-logo-filter: none; --dropdown-bg: #1a1a1a; --dropdown-text: #f0f0f0; --dropdown-text-muted: rgba(255, 255, 255, 0.55); --dropdown-hover-bg: rgba(255, 255, 255, 0.08); --dropdown-border: rgba(255, 255, 255, 0.12); --notif-bg: rgba(255, 255, 255, 0.06); --notif-border: rgba(255, 255, 255, 0.14); --notif-badge-bg: #00e5d6; --topbar-height: 80px; /* Botones — sistema fijo Vexa Mobius */ --btn-radius: 8px; --btn-font-size: 12px; --btn-weight: 600; --btn-letter-spacing: 0.04em; --btn-accent-bg: #00e5d6; --btn-accent-bg-hover: #00cfc2; --btn-accent-text: #111111; --btn-black-bg: #111111; --btn-black-bg-hover: #2a2a2a; --btn-black-text: #ffffff; --btn-outline-bg: #ffffff; --btn-outline-border: #111111; --btn-outline-text: #111111; --btn-outline-hover-bg: #f5f5f5; /* Sustitución color corporativo legacy */ --legacy-teal: var(--brand-accent); } /* Modo claro (activar en cuando se implemente el toggle) */ [data-theme="light"] { --topbar-bg: #ffffff; --topbar-bg-hover: #f5f5f5; --topbar-text: #111111; --topbar-text-muted: rgba(17, 17, 17, 0.65); --topbar-border: rgba(0, 0, 0, 0.08); --topbar-accent: #00b8ad; --topbar-accent-hover: #009a91; --topbar-icon: #111111; --topbar-breadcrumb-separator: rgba(17, 17, 17, 0.35); --topbar-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); --topbar-user-btn-bg: transparent; --topbar-user-btn-border: rgba(17, 17, 17, 0.25); --topbar-user-btn-text: #111111; --topbar-user-btn-hover-bg: rgba(0, 0, 0, 0.04); --topbar-logo-filter: none; --dropdown-bg: #ffffff; --dropdown-text: #111111; --dropdown-text-muted: rgba(17, 17, 17, 0.55); --dropdown-hover-bg: rgba(0, 0, 0, 0.05); --dropdown-border: rgba(0, 0, 0, 0.1); --notif-bg: rgba(0, 0, 0, 0.04); --notif-border: rgba(0, 0, 0, 0.12); --notif-badge-bg: #00e5d6; } /* =========================================== TOPBAR — layout (flex, centrado vertical) =========================================== */ .pcoded .pcoded-header.header-navbar[header-theme="theme1"], .header-navbar.pcoded-header { background: var(--topbar-bg) !important; border-bottom: 1px solid var(--topbar-border); box-shadow: var(--topbar-shadow); min-height: var(--topbar-height); } .header-navbar .navbar-wrapper { display: flex; align-items: stretch; min-height: var(--topbar-height); } .header-navbar .navbar-wrapper .navbar-container.container-fluid { flex: 1; display: flex; align-items: center; justify-content: space-between; min-height: var(--topbar-height); float: none; width: auto; padding-top: 0; padding-bottom: 0; } .header-navbar .navbar-wrapper .navbar-container .nav-left, .header-navbar .navbar-wrapper .navbar-container .nav-right { float: none; display: flex; align-items: center; height: 100%; margin: 0; } .header-navbar .navbar-wrapper .navbar-container .nav-left { flex: 0 1 auto; min-width: 0; max-width: 38%; } .header-navbar .navbar-wrapper .navbar-container .nav-right { flex: 0 0 auto; } /* Búsqueda global (centro del topbar) */ .header-navbar .navbar-wrapper .navbar-container .vm-global-search { flex: 1 1 320px; min-width: 180px; max-width: 520px; margin: 0 16px; position: relative; align-self: center; } .vm-global-search__inner { position: relative; display: flex; align-items: center; } .vm-global-search__icon { position: absolute; left: 12px; color: var(--topbar-text-muted); font-size: 14px; pointer-events: none; z-index: 1; } .vm-global-search__input { width: 100%; height: 36px; padding: 0 72px 0 36px; border-radius: 18px; border: 1px solid var(--topbar-border); background: rgba(255, 255, 255, 0.06); color: var(--topbar-text); font-size: 13px; transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; } .vm-global-search__input::placeholder { color: var(--topbar-text-muted); opacity: 0.85; } .vm-global-search__input:focus { outline: none; border-color: var(--brand-cyan); background: rgba(0, 229, 214, 0.08); box-shadow: 0 0 0 2px rgba(0, 229, 214, 0.15); } .vm-global-search__kbd { position: absolute; right: 10px; font-size: 10px; line-height: 1; padding: 3px 6px; border-radius: 4px; border: 1px solid var(--topbar-border); color: var(--topbar-text-muted); background: rgba(255, 255, 255, 0.04); font-family: inherit; } .vm-global-search__panel { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 1200; background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 10px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18); max-height: min(70vh, 480px); overflow: hidden; display: flex; flex-direction: column; } .vm-global-search__status { padding: 8px 14px; font-size: 11px; color: rgba(17, 17, 17, 0.55); border-bottom: 1px solid rgba(0, 0, 0, 0.06); flex-shrink: 0; } .vm-global-search__loading .ti-reload { display: inline-block; animation: vm-spin 0.8s linear infinite; } .vm-global-search__results { overflow-y: auto; flex: 1; } .vm-global-search__group-title { padding: 8px 14px 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(17, 17, 17, 0.45); background: #f8f8f8; border-bottom: 1px solid rgba(0, 0, 0, 0.04); } .vm-global-search__group-title i { margin-right: 4px; color: var(--brand-cyan); } .vm-global-search__item { display: block; padding: 10px 14px; text-decoration: none !important; color: #111 !important; border-bottom: 1px solid rgba(0, 0, 0, 0.04); transition: background 0.12s ease; } .vm-global-search__item:hover, .vm-global-search__item.is-active { background: rgba(0, 229, 214, 0.1); } .vm-global-search__item-title { display: block; font-size: 13px; font-weight: 600; color: #111; } .vm-global-search__item-sub { display: block; font-size: 12px; color: rgba(17, 17, 17, 0.65); margin-top: 2px; } .vm-global-search__item-meta { display: block; font-size: 11px; color: rgba(17, 17, 17, 0.45); margin-top: 2px; } .vm-global-search__empty { color: rgba(17, 17, 17, 0.55); } @media (max-width: 991px) { .header-navbar .navbar-wrapper .navbar-container .vm-global-search { max-width: 220px; margin: 0 8px; } .vm-global-search__input { font-size: 12px; padding-right: 12px; } .vm-global-search__kbd { display: none !important; } } @media (max-width: 767px) { .header-navbar .navbar-wrapper .navbar-container .nav-left { max-width: 28%; } .header-navbar .navbar-wrapper .navbar-container .vm-global-search { flex: 1 1 120px; min-width: 100px; max-width: 160px; } .vm-global-search__input::placeholder { font-size: 11px; } } .header-navbar .navbar-wrapper .navbar-container .nav-left > li, .header-navbar .navbar-wrapper .navbar-container .nav-right > li { float: none; display: flex; align-items: center; align-self: center; line-height: 1 !important; height: auto; padding-top: 0; padding-bottom: 0; } .header-navbar .navbar-wrapper .navbar-logo { background: var(--topbar-bg) !important; border-right: 1px solid var(--topbar-border); float: none; flex-shrink: 0; height: var(--topbar-height); min-height: var(--topbar-height); display: flex; align-items: center; justify-content: center; } /* Logo: invertir en fondo oscuro para que se lea bien */ .header-navbar .navbar-wrapper .navbar-logo .topbar-logo-link { display: flex; align-items: center; justify-content: center; line-height: 0; } .header-navbar .navbar-wrapper .navbar-logo img.topbar-logo { filter: var(--topbar-logo-filter); max-height: 36px; width: auto; object-fit: contain; } .header-navbar .navbar-wrapper .navbar-logo img.topbar-logo--full { max-width: 140px; } .header-navbar .navbar-wrapper .navbar-logo img.topbar-logo--compact { display: none; max-width: 44px; max-height: 32px; } /* Iconos menú móvil / sidebar */ .header-navbar .navbar-wrapper .navbar-logo a, .header-navbar .navbar-wrapper .navbar-logo .mobile-menu, .header-navbar .navbar-wrapper .navbar-logo .mobile-options, .header-navbar .navbar-wrapper .navbar-container .sidebar_toggle a { color: var(--topbar-icon) !important; } .header-navbar .navbar-wrapper .navbar-logo a:hover, .header-navbar .navbar-wrapper .navbar-container .sidebar_toggle a:hover { color: var(--topbar-text-muted) !important; } .header-navbar .navbar-wrapper .navbar-logo .mobile-menu i, .header-navbar .navbar-wrapper .navbar-logo .mobile-options i, .header-navbar .navbar-wrapper .navbar-container .sidebar_toggle a i { color: var(--topbar-icon) !important; } /* Breadcrumbs */ .header-navbar .breadcrumb-title li, .header-navbar .breadcrumb-title li a, .header-navbar .breadcrumb-item, .header-navbar .breadcrumb-item a { color: var(--topbar-text) !important; } .header-navbar .breadcrumb-item + .breadcrumb-item::before { color: var(--topbar-breadcrumb-separator) !important; } .header-navbar .breadcrumb-title .icofont-home { color: var(--topbar-text) !important; } /* Enlaces generales del header */ .pcoded .pcoded-header.header-navbar[header-theme="theme1"] a { color: var(--topbar-text) !important; } .pcoded .pcoded-header.header-navbar[header-theme="theme1"] a:hover { color: var(--topbar-text-muted) !important; } /* Notificaciones topbar — pills Vexa Mobius */ .header-navbar .nav-right li.notif-backg { padding: 0 6px !important; background: transparent !important; } .header-navbar .notif-backg { background: transparent !important; display: flex; align-items: center; } .header-navbar a.vm-topbar-pill, .header-navbar .notif-backg a.notif-positio { display: inline-flex !important; align-items: center; gap: 8px; min-height: 38px; padding: 8px 14px 8px 10px; border-radius: 999px; background: var(--notif-bg) !important; border: 1px solid var(--notif-border); text-decoration: none !important; line-height: 1.2; transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; } .header-navbar .notif-backg a.vm-topbar-pill.vm-topbar-pill--alertas, .header-navbar .notif-backg a.notif-positio.vm-topbar-pill--alertas { background: #c62828 !important; background-color: #c62828 !important; border-color: #b71c1c !important; box-shadow: 0 2px 8px rgba(198, 40, 40, 0.35); } .header-navbar .notif-backg a.vm-topbar-pill.vm-topbar-pill--alertas.vm-topbar-pill--unread, .header-navbar .notif-backg a.notif-positio.vm-topbar-pill--alertas.vm-topbar-pill--unread { background: #d32f2f !important; background-color: #d32f2f !important; border-color: #ffca28 !important; box-shadow: 0 0 0 2px rgba(255, 202, 40, 0.45), 0 2px 12px rgba(198, 40, 40, 0.5); animation: vm-alert-pill-glow 2.2s ease-in-out infinite; } .header-navbar .notif-backg a.vm-topbar-pill--alertas .vm-topbar-pill__label { color: #ffffff !important; font-weight: 600; } .header-navbar .notif-backg a.vm-topbar-pill--alertas .vm-topbar-pill__count { background: #ffca28 !important; color: var(--brand-black) !important; } .header-navbar .notif-backg a.vm-topbar-pill--alertas.notif-positio::after { border-top-color: rgba(255, 255, 255, 0.85); } .header-navbar .notif-backg a.vm-topbar-pill--alertas .vm-topbar-pill__icon--alert { width: 28px; height: 28px; border-radius: 50%; background: rgba(0, 0, 0, 0.22); color: #ffca28 !important; font-size: 16px; animation: vm-alert-icon-attention 2.8s ease-in-out infinite; } .header-navbar .notif-backg a.vm-topbar-pill--alertas.vm-topbar-pill--unread .vm-topbar-pill__icon--alert { background: rgba(0, 0, 0, 0.3); color: #ffe082 !important; animation: vm-alert-icon-attention 1.6s ease-in-out infinite; } @keyframes vm-alert-pill-glow { 0%, 100% { box-shadow: 0 0 0 2px rgba(255, 202, 40, 0.35), 0 2px 10px rgba(198, 40, 40, 0.4); } 50% { box-shadow: 0 0 0 4px rgba(255, 202, 40, 0.55), 0 2px 14px rgba(198, 40, 40, 0.55); } } @keyframes vm-alert-icon-attention { 0%, 78%, 100% { transform: rotate(0deg) scale(1); box-shadow: 0 0 0 0 rgba(255, 202, 40, 0.5); } 82% { transform: rotate(-10deg) scale(1.08); } 86% { transform: rotate(10deg) scale(1.1); } 90% { transform: rotate(-8deg) scale(1.08); } 94% { transform: rotate(8deg) scale(1.06); } 50% { box-shadow: 0 0 0 5px rgba(255, 202, 40, 0); } } .header-navbar a.vm-topbar-pill:hover, .header-navbar a.vm-topbar-pill:focus, .header-navbar .notif-backg a.notif-positio:hover, .header-navbar .notif-backg a.notif-positio:focus { background: var(--brand-accent-muted) !important; border-color: rgba(0, 229, 214, 0.45) !important; box-shadow: 0 0 0 1px rgba(0, 229, 214, 0.12); } .header-navbar .notif-backg a.vm-topbar-pill--alertas:hover, .header-navbar .notif-backg a.vm-topbar-pill--alertas:focus, .header-navbar .notif-backg a.notif-positio.vm-topbar-pill--alertas:hover, .header-navbar .notif-backg a.notif-positio.vm-topbar-pill--alertas:focus { background: #b71c1c !important; background-color: #b71c1c !important; border-color: #ffca28 !important; box-shadow: 0 2px 12px rgba(198, 40, 40, 0.5) !important; } .header-navbar .vm-topbar-pill__icon { display: inline-flex; align-items: center; justify-content: center; color: var(--brand-accent) !important; font-size: 15px; line-height: 1; } .header-navbar .notif-backg a.vm-topbar-pill--alertas .vm-topbar-pill__icon, .header-navbar .notif-backg a.vm-topbar-pill--alertas .vm-topbar-pill__icon i { color: #ffca28 !important; } .header-navbar .vm-topbar-pill__label { color: var(--topbar-text) !important; font-size: 12px; font-weight: 500; letter-spacing: 0.01em; white-space: nowrap; } .header-navbar .vm-topbar-pill__count, .header-navbar .notif-backg .badge-cm, .header-navbar #alertas-no-leidas-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 8px; border-radius: 999px; background: var(--notif-badge-bg) !important; color: var(--brand-black) !important; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; border: none; line-height: 1; } .header-navbar .notif-backg a.notif-positio::after { margin-left: 2px; vertical-align: middle; border-top-color: var(--topbar-text-muted); } .header-navbar .notif-backg .dropdown-menu.alertas-dropdown-menu { min-width: 340px; max-width: 380px; padding: 0; overflow: hidden; border-radius: 12px; border: 1px solid rgba(0, 0, 0, 0.1); background: #ffffff !important; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22); } .header-navbar .alertas-dropdown-menu__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; background: var(--brand-black); border-bottom: 2px solid var(--brand-accent); } .header-navbar .alertas-dropdown-menu__title { display: inline-flex; align-items: center; gap: 8px; color: #ffffff !important; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } .header-navbar .alertas-dropdown-menu__title i { color: var(--brand-accent) !important; font-size: 16px; } .header-navbar .alertas-dropdown-menu__link { color: var(--brand-accent) !important; font-size: 12px; font-weight: 600; text-decoration: none !important; white-space: nowrap; } .header-navbar .alertas-dropdown-menu__link:hover { color: #ffffff !important; text-decoration: underline !important; } .header-navbar .alertas-dropdown-menu__body { max-height: 320px; overflow-y: auto; background: #ffffff; } .header-navbar .alertas-dropdown-menu__empty { padding: 28px 20px; text-align: center; color: rgba(17, 17, 17, 0.5) !important; font-size: 13px; } .header-navbar .alertas-dropdown-menu__empty i { display: block; font-size: 28px; margin-bottom: 8px; color: rgba(17, 17, 17, 0.2); } .header-navbar .alertas-dropdown-menu__foot { padding: 12px 16px 14px; background: #f7f7f7; border-top: 1px solid rgba(0, 0, 0, 0.06); } .header-navbar .alertas-dropdown-menu__foot .btn-vm-accent { background: var(--brand-accent) !important; border-color: var(--brand-accent) !important; color: var(--brand-black) !important; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; font-size: 11px; border-radius: 8px; padding: 10px 14px; } .header-navbar .alertas-dropdown-menu__foot .btn-vm-accent:hover { background: var(--btn-accent-bg-hover, #00cfc2) !important; border-color: var(--btn-accent-bg-hover, #00cfc2) !important; color: var(--brand-black) !important; } .header-navbar .alertas-dropdown-menu .dropdown-item { color: var(--brand-black) !important; padding: 12px 16px; border-bottom: 1px solid rgba(0, 0, 0, 0.05); white-space: normal; } .header-navbar .alertas-dropdown-menu .dropdown-item:hover, .header-navbar .alertas-dropdown-menu .dropdown-item:focus { background: rgba(0, 229, 214, 0.08) !important; color: var(--brand-black) !important; } .header-navbar .alertas-dropdown-menu .alerta-item.alerta-no-leida { background: rgba(0, 229, 214, 0.12) !important; border-left: 3px solid var(--brand-accent); } .header-navbar .alertas-dropdown-menu .alerta-item { white-space: normal; } .header-navbar .header-notification a:first-child { color: var(--topbar-text) !important; } /* Botón usuario / logout */ .header-navbar .logout-position { margin-top: 0 !important; display: flex; align-items: center; position: relative; } .header-navbar .nav-right > li:last-child { padding-right: 16px !important; } .header-navbar .logout-position .btn-outline-warning { display: inline-flex !important; align-items: center; gap: 8px; margin: 0; padding: 6px 12px; line-height: 1.25 !important; vertical-align: middle; background: var(--topbar-user-btn-bg) !important; border-color: var(--topbar-user-btn-border) !important; color: var(--topbar-user-btn-text) !important; box-shadow: none !important; } .header-navbar .logout-position .btn-outline-warning .icon-navbar-horizontal, .header-navbar .logout-position .btn-outline-warning .mt10 { margin-top: 0 !important; margin-bottom: 0 !important; line-height: 1; vertical-align: middle; } .header-navbar .logout-position .btn-outline-warning:hover, .header-navbar .logout-position .btn-outline-warning:focus, .header-navbar .logout-position .btn-outline-warning:active, .header-navbar .logout-position .show > .btn-outline-warning.dropdown-toggle { background: var(--topbar-user-btn-hover-bg) !important; border-color: var(--topbar-user-btn-border) !important; color: var(--topbar-text) !important; } .header-navbar .logout-position .btn-outline-warning span, .header-navbar .logout-position .btn-outline-warning i { color: var(--topbar-user-btn-text) !important; } .header-navbar .icon-navbar-horizontal { color: var(--topbar-icon) !important; } /* Dropdown perfil — oculto por defecto (Bootstrap usa display:none) */ .header-navbar .logout-position .dropdown-menu { display: none; background: var(--dropdown-bg) !important; border: 1px solid var(--dropdown-border) !important; border-radius: 10px; padding: 8px; margin-top: 6px; min-width: 180px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); left: auto !important; right: 0 !important; float: none; } .header-navbar .logout-position .dropdown-menu.show { display: flex; flex-direction: column; gap: 4px; } .header-navbar .logout-position .dropdown-menu .dropdown-item { color: var(--dropdown-text) !important; padding: 12px 14px; font-size: 14px; line-height: 1.4; border-radius: 6px; display: flex; align-items: center; gap: 12px; white-space: nowrap; } .header-navbar .logout-position .dropdown-menu .dropdown-item i { color: var(--dropdown-text-muted) !important; font-size: 15px; width: 18px; text-align: center; } .header-navbar .logout-position .dropdown-menu .dropdown-item:hover, .header-navbar .logout-position .dropdown-menu .dropdown-item:focus { background: var(--dropdown-hover-bg) !important; color: var(--dropdown-text) !important; } .header-navbar .logout-position .dropdown-menu .dropdown-item:hover i, .header-navbar .logout-position .dropdown-menu .dropdown-item:focus i { color: var(--dropdown-text) !important; } /* Toggle menú lateral: junto al breadcrumb, sin borde */ .header-navbar .navbar-wrapper .navbar-logo .mobile-menu, .header-navbar .navbar-wrapper .navbar-logo .mobile-search, .header-navbar .navbar-wrapper .navbar-logo .mobile-options { display: none !important; } .header-navbar .page-header-breadcrumb { display: flex; align-items: center; gap: 12px; } .header-navbar .topbar-sidebar-toggle { display: flex; align-items: center; flex-shrink: 0; } .header-navbar .navbar-wrapper .navbar-container .nav-left li .topbar-sidebar-toggle a, .pcoded[theme-layout="vertical"] .pcoded-header .topbar-sidebar-toggle a { display: inline-flex !important; align-items: center; justify-content: center; float: none; width: auto; height: auto; top: 0; margin: 0; padding: 4px; border: none !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; line-height: 1; } .header-navbar .topbar-sidebar-toggle a i, .pcoded[theme-layout="vertical"] .pcoded-header .topbar-sidebar-toggle a i { position: static; top: 0; font-size: 20px; } .header-navbar .topbar-sidebar-toggle a:hover, .header-navbar .topbar-sidebar-toggle a:focus, .pcoded[theme-layout="vertical"] .pcoded-header .topbar-sidebar-toggle a:hover { background: var(--topbar-user-btn-hover-bg) !important; box-shadow: none !important; text-decoration: none; } .header-navbar .page-header-breadcrumb .breadcrumb-title { margin-bottom: 0; } /* =========================================== SIDEBAR — forzar tema oscuro de marca (pcoded aplica navbar-theme vía demo-12.js / style.css) =========================================== */ .pcoded .pcoded-navbar, .pcoded .pcoded-navbar[navbar-theme="theme1"], .pcoded .pcoded-navbar[navbar-theme="themelight1"], .pcoded .pcoded-navbar[navbar-theme*="theme"] { background: var(--brand-black) !important; border-right: 1px solid rgba(255, 255, 255, 0.06) !important; box-shadow: 2px 0 16px rgba(0, 0, 0, 0.4) !important; } .pcoded .pcoded-navbar .main-menu, .pcoded .pcoded-navbar .pcoded-inner-navbar, .pcoded .pcoded-navbar[navbar-theme="theme1"] .main-menu, .pcoded .pcoded-navbar[navbar-theme="themelight1"] .main-menu, .pcoded .pcoded-navbar[navbar-theme*="theme"] .main-menu { background-color: var(--brand-black) !important; } .pcoded .pcoded-navbar .pcoded-navigatio-lavel, .pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-navigatio-lavel, .pcoded .pcoded-navbar[navbar-theme="theme1"] .pcoded-navigatio-lavel { color: rgba(255, 255, 255, 0.35) !important; font-size: 9px !important; letter-spacing: 2px !important; font-weight: 700 !important; border-bottom-color: transparent !important; } /* Espacio al final del menú para poder hacer scroll más allá del último ítem */ .pcoded .pcoded-navbar .pcoded-inner-navbar.main-menu .pcoded-item.pcoded-left-item { padding-bottom: 96px; } /* Alineación icono + texto (style.css pone mtext en absolute) */ .pcoded[theme-layout="vertical"] .pcoded-navbar .pcoded-item > li > a, .pcoded .pcoded-navbar .pcoded-item > li > a { display: flex !important; align-items: center !important; gap: 10px; min-height: 44px; padding-top: 8px !important; padding-bottom: 8px !important; line-height: 1.3 !important; } .pcoded[theme-layout="vertical"] .pcoded-navbar .pcoded-item > li > a .pcoded-mtext, .pcoded[theme-layout="vertical"][vertical-nav-type="expanded"] .pcoded-navbar .pcoded-item > li > a .pcoded-mtext { position: relative !important; top: auto !important; left: auto !important; opacity: 1 !important; visibility: visible !important; flex: 1; min-width: 0; } .pcoded .pcoded-navbar .pcoded-item > li > a > .pcoded-micon { flex-shrink: 0; display: inline-flex !important; align-items: center; justify-content: center; width: 28px !important; height: 28px !important; margin-right: 0 !important; padding: 0 !important; line-height: 1 !important; vertical-align: middle; } .pcoded .pcoded-navbar .pcoded-item > li > a > .pcoded-micon i { line-height: 1 !important; font-size: 16px !important; } /* Ítems nivel 1 */ .pcoded .pcoded-navbar .pcoded-item > li > a, .pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item > li > a, .pcoded .pcoded-navbar[navbar-theme="theme1"] .pcoded-item > li > a { color: var(--brand-white) !important; background: transparent !important; border-left: 3px solid transparent !important; border-bottom: none !important; border-bottom-color: transparent !important; transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease !important; } .pcoded .pcoded-navbar .pcoded-item > li:not(.pcoded-hasmenu) > a { border-radius: 0 8px 8px 0; margin: 2px 10px 2px 0; } .pcoded .pcoded-navbar .pcoded-item > li.pcoded-hasmenu > a { border-radius: 0 !important; margin: 0 !important; } /* Hover nivel 1 — acento cyan visible (anula active-item-theme theme4 de style.css) */ .pcoded .pcoded-navbar .pcoded-item > li:hover > a, .pcoded .pcoded-navbar .pcoded-item > li > a:hover, .pcoded .pcoded-navbar[navbar-theme="theme1"] .pcoded-item > li:hover > a, .pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item > li:hover > a, .pcoded .pcoded-navbar[active-item-theme="theme4"] .pcoded-item > li:hover > a, .pcoded .pcoded-navbar[navbar-theme="theme1"][active-item-theme="theme4"] .pcoded-item > li:hover > a, .pcoded .pcoded-navbar[active-item-theme="theme4"] .pcoded-item li.pcoded-hasmenu:hover > a { background: rgba(0, 229, 214, 0.14) !important; color: var(--brand-accent) !important; border-left-color: var(--brand-accent) !important; } .pcoded .pcoded-navbar .pcoded-item > li:hover > a .pcoded-mtext, .pcoded .pcoded-navbar[active-item-theme="theme4"] .pcoded-item > li:hover > a .pcoded-mtext, .pcoded .pcoded-navbar[active-item-theme="theme4"] .pcoded-item li.pcoded-hasmenu:hover > a .pcoded-mtext { color: var(--brand-accent) !important; } .pcoded .pcoded-navbar .pcoded-item > li:hover > a .pcoded-micon, .pcoded .pcoded-navbar .pcoded-item > li:hover > a .pcoded-micon i, .pcoded .pcoded-navbar[active-item-theme="theme4"] .pcoded-item > li:hover > a .pcoded-micon i { color: var(--brand-accent) !important; } .pcoded .pcoded-navbar .pcoded-item > li.pcoded-hasmenu:hover > a:after { color: var(--brand-accent) !important; } .pcoded[theme-layout="vertical"] .pcoded-navbar .pcoded-item > li:hover > a:before, .pcoded .pcoded-navbar[active-item-theme="theme4"] .pcoded-item > li:hover > a:before { border-left-color: var(--brand-accent) !important; border-left-width: 3px !important; } .pcoded .pcoded-navbar .pcoded-item > li > a > .pcoded-micon, .pcoded .pcoded-navbar .pcoded-item > li > a > .pcoded-micon i { color: var(--brand-accent) !important; background: transparent !important; } .pcoded .pcoded-navbar .pcoded-item > li > a > .pcoded-micon b { display: none !important; } .pcoded .pcoded-navbar .pcoded-item > li > a > .pcoded-mtext, .pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item > li > a > .pcoded-mtext { color: var(--brand-white) !important; } .pcoded .pcoded-navbar .pcoded-item > li > a > .pcoded-mcaret, .pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item > li.pcoded-hasmenu > a:after, .pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item > li.pcoded-hasmenu:hover > a:after { color: rgba(255, 255, 255, 0.5) !important; } /* Ítem activo — barra lateral + fondo visible */ .pcoded[theme-layout="vertical"] .pcoded-navbar .pcoded-item > li.active > a:before, .pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item > li.active > a:before, .pcoded .pcoded-navbar[navbar-theme="theme1"] .pcoded-item > li.active > a:before { border-left-color: var(--brand-accent) !important; border-left-width: 3px !important; } .pcoded .pcoded-navbar .pcoded-item > li.active > a, .pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item > li.active > a, .pcoded .pcoded-navbar[navbar-theme="theme1"] .pcoded-item > li.active > a, .pcoded .pcoded-navbar[active-item-theme="theme4"] .pcoded-item > li.active > a { background: rgba(0, 229, 214, 0.18) !important; border-left: 3px solid var(--brand-accent) !important; font-weight: 600 !important; box-shadow: inset 0 0 0 1px rgba(0, 229, 214, 0.35) !important; } .pcoded .pcoded-navbar .pcoded-item > li.active > a, .pcoded .pcoded-navbar .pcoded-item > li.active > a:hover, .pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item > li.active > a, .pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item > li.active:hover > a, .pcoded .pcoded-navbar[navbar-theme="theme1"] .pcoded-item > li.active > a, .pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item > li.active > a, .pcoded .pcoded-navbar[navbar-theme="theme1"] .pcoded-item > li.active > a { color: var(--brand-accent) !important; background: rgba(0, 229, 214, 0.18) !important; } .pcoded .pcoded-navbar .pcoded-item > li.active > a .pcoded-mtext, .pcoded .pcoded-navbar .pcoded-item > li.active > a .pcoded-micon, .pcoded .pcoded-navbar .pcoded-item > li.active > a .pcoded-micon i, .pcoded .pcoded-navbar .pcoded-item > li.active > a .pcoded-mcaret, .pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item > li.active > a .pcoded-mtext { color: var(--brand-accent) !important; } /* =========================================== SUBMENÚS — estilo plano Vexa Mobius =========================================== */ /* Chevron del padre: centrado y limpio */ .pcoded[theme-layout="vertical"] .pcoded-navbar .pcoded-item li.pcoded-hasmenu > a:after { top: 50% !important; right: 16px !important; padding-top: 0 !important; margin-top: 0 !important; transform: translateY(-50%); font-size: 11px !important; color: rgba(255, 255, 255, 0.4) !important; transition: color 0.2s ease, transform 0.25s ease !important; } .pcoded[theme-layout="vertical"] .pcoded-navbar .pcoded-item li.pcoded-hasmenu.pcoded-trigger > a:after { color: var(--brand-accent) !important; transform: translateY(-50%) rotate(0deg); } /* Padre con submenú abierto */ .pcoded .pcoded-navbar .pcoded-item > li.pcoded-hasmenu.pcoded-trigger > a, .pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item > li.pcoded-hasmenu.pcoded-trigger > a, .pcoded .pcoded-navbar[navbar-theme="theme1"] .pcoded-item > li.pcoded-hasmenu.pcoded-trigger > a { background: rgba(255, 255, 255, 0.04) !important; border-left-color: var(--brand-accent) !important; border-bottom: none !important; color: var(--brand-white) !important; } .pcoded .pcoded-navbar .pcoded-item > li.pcoded-hasmenu.active > a, .pcoded .pcoded-navbar .pcoded-item > li.pcoded-hasmenu.active.pcoded-trigger > a { border-left-color: var(--brand-accent) !important; } .pcoded .pcoded-navbar .pcoded-item > li.pcoded-hasmenu.pcoded-trigger > a .pcoded-micon, .pcoded .pcoded-navbar .pcoded-item > li.pcoded-hasmenu.pcoded-trigger > a .pcoded-micon i { color: var(--brand-accent) !important; } /* Contenedor submenú: sin caja, sin flip 3D */ .pcoded[theme-layout="vertical"] .pcoded-navbar .pcoded-item .pcoded-hasmenu .pcoded-submenu, .pcoded .pcoded-navbar .pcoded-item .pcoded-hasmenu .pcoded-submenu, .pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item li.pcoded-hasmenu .pcoded-submenu, .pcoded .pcoded-navbar[navbar-theme="theme1"] .pcoded-item li.pcoded-hasmenu .pcoded-submenu { position: relative !important; width: 100% !important; max-height: 0 !important; overflow: hidden !important; opacity: 0 !important; visibility: hidden !important; transform: none !important; -webkit-transform: none !important; transform-style: flat !important; -webkit-transform-style: flat !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; list-style: none !important; transition: max-height 0.3s ease, opacity 0.22s ease !important; } .pcoded[theme-layout="vertical"] .pcoded-navbar .pcoded-item .pcoded-hasmenu.pcoded-trigger > .pcoded-submenu, .pcoded .pcoded-navbar .pcoded-item .pcoded-hasmenu.pcoded-trigger > .pcoded-submenu { max-height: 1200px !important; opacity: 1 !important; visibility: visible !important; padding: 4px 0 10px !important; } /* Ítems del submenú */ .pcoded .pcoded-navbar .pcoded-item .pcoded-hasmenu .pcoded-submenu li > a, .pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item li.pcoded-hasmenu .pcoded-submenu li > a, .pcoded .pcoded-navbar[navbar-theme="theme1"] .pcoded-item li.pcoded-hasmenu .pcoded-submenu li > a { display: block !important; color: rgba(255, 255, 255, 0.62) !important; font-size: 12.5px !important; font-weight: 400 !important; line-height: 1.35 !important; padding: 8px 16px 8px 52px !important; margin: 0 !important; border: none !important; border-left: 2px solid transparent !important; border-radius: 0 !important; background: transparent !important; transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease !important; } /* Quitar flechitas / iconos decorativos del submenú */ .pcoded .pcoded-navbar .pcoded-item .pcoded-hasmenu .pcoded-submenu li > a .pcoded-micon, .pcoded .pcoded-navbar .pcoded-item .pcoded-hasmenu .pcoded-submenu li > a .pcoded-mcaret { display: none !important; } .pcoded .pcoded-navbar .pcoded-item .pcoded-hasmenu .pcoded-submenu li > a .pcoded-mtext:before, .pcoded .pcoded-navbar .pcoded-item .pcoded-hasmenu[subitem-icon="style6"] .pcoded-submenu li > a .pcoded-mtext:before, .pcoded .pcoded-navbar .pcoded-item .pcoded-hasmenu .pcoded-submenu li > a .pcoded-mtext:after { display: none !important; content: none !important; } .pcoded .pcoded-navbar .pcoded-item .pcoded-hasmenu .pcoded-submenu li > a:before, .pcoded .pcoded-navbar .pcoded-item .pcoded-hasmenu .pcoded-submenu li:hover > a:before { display: none !important; content: none !important; border: none !important; } .pcoded .pcoded-navbar .pcoded-item .pcoded-hasmenu .pcoded-submenu li > a:hover, .pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item .pcoded-hasmenu .pcoded-submenu li:hover > a, .pcoded .pcoded-navbar[active-item-theme="theme4"] .pcoded-item li .pcoded-submenu li:hover > a { background: rgba(0, 229, 214, 0.12) !important; color: var(--brand-accent) !important; border-left-color: var(--brand-accent) !important; } .pcoded .pcoded-navbar .pcoded-item .pcoded-hasmenu .pcoded-submenu li:hover > a .pcoded-mtext, .pcoded .pcoded-navbar[active-item-theme="theme4"] .pcoded-item li .pcoded-submenu li:hover > a .pcoded-mtext { color: var(--brand-accent) !important; } .pcoded .pcoded-navbar .pcoded-item .pcoded-hasmenu .pcoded-submenu li.active > a, .pcoded .pcoded-navbar .pcoded-item .pcoded-hasmenu .pcoded-submenu li.active > a .pcoded-mtext, .pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item .pcoded-hasmenu .pcoded-submenu li.active > a, .pcoded .pcoded-navbar .pcoded-item .pcoded-hasmenu .pcoded-submenu li.active span { background: rgba(0, 229, 214, 0.1) !important; color: var(--brand-accent) !important; border-left-color: var(--brand-accent) !important; font-weight: 600 !important; } /* Scrollbar */ .pcoded-navbar::-webkit-scrollbar-thumb { background: var(--brand-accent-muted) !important; } .pcoded .pcoded-navbar .pcoded-item .pcoded-hasmenu.pcoded-trigger > a > .pcoded-mcaret { color: var(--brand-accent) !important; } /* Anular colores por posición nth-child del tema pcoded (st5) */ .pcoded[nav-type="st5"] .pcoded-item.pcoded-left-item > li > a > .pcoded-micon, .pcoded[nav-type="st5"] .pcoded-item.pcoded-left-item > li > a > .pcoded-micon i { color: var(--brand-accent) !important; background-color: transparent !important; } /* =========================================== SIDEBAR COLAPSADO — barra de iconos (80px) =========================================== */ .pcoded[theme-layout="vertical"][vertical-nav-type="collapsed"] .main-menu, .pcoded[theme-layout="vertical"][vertical-nav-type="collapsed"] .pcoded-navbar, .pcoded[theme-layout="vertical"][vertical-nav-type="collapsed"] .pcoded-inner-navbar, .pcoded[theme-layout="vertical"][vertical-nav-type="collapsed"] .pcoded-header .pcoded-left-header, .pcoded[theme-layout="vertical"][vertical-nav-type="collapsed"] .header-navbar .navbar-wrapper .navbar-logo { width: 80px !important; max-width: 80px !important; } .pcoded[theme-layout="vertical"][vertical-nav-type="collapsed"] .pcoded-navbar, .pcoded[theme-layout="vertical"][vertical-nav-type="collapsed"] .main-menu { overflow: hidden !important; } .pcoded[theme-layout="vertical"][vertical-placement="left"][vertical-nav-type="collapsed"][vertical-effect="shrink"] .pcoded-content { margin-left: 80px !important; } .pcoded[theme-layout="vertical"][vertical-nav-type="collapsed"] .header-navbar .navbar-wrapper .navbar-logo { padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; } .pcoded[theme-layout="vertical"][vertical-nav-type="collapsed"] .header-navbar .navbar-wrapper .navbar-logo img.topbar-logo--full { display: none !important; } .pcoded[theme-layout="vertical"][vertical-nav-type="collapsed"] .header-navbar .navbar-wrapper .navbar-logo img.topbar-logo--compact { display: block !important; max-width: 44px; max-height: 32px; object-fit: contain; } .pcoded[theme-layout="vertical"][vertical-nav-type="collapsed"] .pcoded-navbar .pcoded-navigatio-lavel { display: none !important; } .pcoded[theme-layout="vertical"][vertical-nav-type="collapsed"] .pcoded-navbar .pcoded-item > li, .pcoded[theme-layout="vertical"][vertical-nav-type="collapsed"] .pcoded-navbar .pcoded-item > li.pcoded-trigger { width: 80px !important; max-width: 80px !important; overflow: hidden !important; box-shadow: none !important; } .pcoded[theme-layout="vertical"][vertical-nav-type="collapsed"] .pcoded-navbar .pcoded-item > li > a, .pcoded[theme-layout="vertical"][vertical-nav-type="collapsed"] .pcoded-navbar .pcoded-item > li:not(.pcoded-hasmenu) > a, .pcoded[theme-layout="vertical"][vertical-nav-type="collapsed"] .pcoded-navbar .pcoded-item > li.pcoded-hasmenu > a { display: flex !important; justify-content: center !important; align-items: center !important; gap: 0 !important; width: 80px !important; max-width: 80px !important; padding: 0 !important; margin: 0 !important; border-radius: 0 !important; border-left: none !important; min-height: 48px !important; box-sizing: border-box !important; background: transparent !important; box-shadow: none !important; overflow: hidden !important; } .pcoded[theme-layout="vertical"][vertical-nav-type="collapsed"] .pcoded-navbar .pcoded-item > li > a .pcoded-mtext, .pcoded[theme-layout="vertical"][vertical-nav-type="collapsed"] .pcoded-navbar .pcoded-item > li.pcoded-trigger > a .pcoded-mtext { display: none !important; flex: 0 0 0 !important; width: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } .pcoded[theme-layout="vertical"][vertical-nav-type="collapsed"] .pcoded-navbar .pcoded-item > li > a > .pcoded-micon { width: 44px !important; height: 44px !important; min-width: 44px !important; margin: 0 !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 8px !important; transition: background 0.18s ease, color 0.18s ease !important; } .pcoded[theme-layout="vertical"][vertical-nav-type="collapsed"] .pcoded-navbar .pcoded-item > li > a > .pcoded-micon i { font-size: 18px !important; line-height: 1 !important; } /* Hover / activo: resaltar solo el icono, sin desbordar */ .pcoded[theme-layout="vertical"][vertical-nav-type="collapsed"] .pcoded-navbar .pcoded-item > li:hover > a, .pcoded[theme-layout="vertical"][vertical-nav-type="collapsed"] .pcoded-navbar .pcoded-item > li > a:hover, .pcoded[theme-layout="vertical"][vertical-nav-type="collapsed"] .pcoded-navbar .pcoded-item > li.active > a, .pcoded[theme-layout="vertical"][vertical-nav-type="collapsed"] .pcoded-navbar .pcoded-item > li.active > a:hover { background: transparent !important; border-left: none !important; box-shadow: none !important; color: var(--brand-white) !important; } .pcoded[theme-layout="vertical"][vertical-nav-type="collapsed"] .pcoded-navbar .pcoded-item > li:hover > a > .pcoded-micon, .pcoded[theme-layout="vertical"][vertical-nav-type="collapsed"] .pcoded-navbar .pcoded-item > li.active > a > .pcoded-micon { background: rgba(0, 229, 214, 0.18) !important; } .pcoded[theme-layout="vertical"][vertical-nav-type="collapsed"] .pcoded-navbar .pcoded-item > li:hover > a > .pcoded-micon i, .pcoded[theme-layout="vertical"][vertical-nav-type="collapsed"] .pcoded-navbar .pcoded-item > li.active > a > .pcoded-micon i { color: var(--brand-accent) !important; } .pcoded[theme-layout="vertical"][vertical-nav-type="collapsed"] .pcoded-navbar .pcoded-item > li:hover > a:before, .pcoded[theme-layout="vertical"][vertical-nav-type="collapsed"] .pcoded-navbar .pcoded-item > li.active > a:before { display: none !important; content: none !important; border: none !important; } .pcoded[theme-layout="vertical"][vertical-nav-type="collapsed"] .pcoded-navbar .pcoded-item li.pcoded-hasmenu > a:after { display: none !important; } /* Submenú flotante al hacer clic en icono (modo colapsado) */ .pcoded[theme-layout="vertical"][vertical-nav-type="collapsed"] .pcoded-navbar .pcoded-item > .pcoded-hasmenu.pcoded-trigger > .pcoded-submenu, .pcoded[theme-layout="vertical"][vertical-nav-type="collapsed"] .pcoded-navbar .pcoded-item > li.pcoded-trigger > .pcoded-submenu { left: 80px !important; width: 220px !important; max-height: none !important; opacity: 1 !important; visibility: visible !important; transform: none !important; background: var(--brand-black) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-left: 2px solid var(--brand-accent) !important; border-radius: 0 10px 10px 0 !important; box-shadow: 4px 8px 28px rgba(0, 0, 0, 0.5) !important; padding: 8px 0 !important; } .pcoded[theme-layout="vertical"][vertical-nav-type="collapsed"] .pcoded-navbar .pcoded-item > .pcoded-hasmenu.pcoded-trigger > .pcoded-submenu li > a, .pcoded[theme-layout="vertical"][vertical-nav-type="collapsed"] .pcoded-navbar .pcoded-item > li.pcoded-trigger .pcoded-submenu li > a { padding: 9px 16px 9px 18px !important; } /* =========================================== CONTENIDO — cabecera de página + dashboard =========================================== */ .pcoded-main-container { background: #f0f2f5 !important; } .main-body .page-wrapper .page-header.card { background: var(--brand-white) !important; border: 1px solid rgba(0, 0, 0, 0.06) !important; border-radius: 12px !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important; margin-bottom: 16px !important; padding: 16px 20px !important; } .main-body .page-wrapper .page-header .title-page { color: var(--brand-black) !important; font-size: 1.15rem !important; font-weight: 600 !important; letter-spacing: -0.01em; } /* Dashboard de bienvenida */ .dashboard-welcome { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 200px); padding: 8px 16px 32px; } .dashboard-welcome-card { width: 100%; max-width: 640px; background: var(--brand-white); border-radius: 16px; border: 1px solid rgba(0, 0, 0, 0.06); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08); overflow: hidden; } .dashboard-welcome-card__banner { height: 180px; background-position: center center; background-size: cover; background-repeat: no-repeat; position: relative; } .dashboard-welcome-card__banner::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--brand-accent), rgba(0, 229, 214, 0.35)); } .dashboard-welcome-card__body { padding: 36px 40px 40px; text-align: center; } .dashboard-welcome-logo { display: block; max-width: 240px; width: 100%; height: auto; margin: 0 auto 28px; object-fit: contain; } .dashboard-welcome-greeting { margin: 0 0 16px; font-size: 1.25rem; line-height: 1.5; color: var(--brand-black); font-weight: 500; } .dashboard-welcome-name { color: var(--brand-accent); font-weight: 700; } .dashboard-welcome-help { margin: 0; font-size: 0.95rem; line-height: 1.6; color: rgba(17, 17, 17, 0.6); max-width: 460px; margin-left: auto; margin-right: auto; } .dashboard-welcome-help strong { color: var(--brand-black); font-weight: 600; } @media (max-width: 575px) { .dashboard-welcome-card__body { padding: 28px 24px 32px; } .dashboard-welcome-greeting { font-size: 1.1rem; } .dashboard-welcome-card__banner { height: 140px; } } /* =========================================== BOTONES — sistema fijo (accent / negro / outline) Uso: btn-vm-accent | btn-vm-black | btn-vm-outline Compat: btn-primary → accent en área de contenido =========================================== */ .main-body .btn-vm-accent, .main-body .btn-vm-black, .main-body .btn-vm-outline, .main-body .btn.btn-vm-accent, .main-body .btn.btn-vm-black, .main-body .btn.btn-vm-outline { display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; border-radius: var(--btn-radius) !important; font-size: var(--btn-font-size) !important; font-weight: var(--btn-weight) !important; letter-spacing: var(--btn-letter-spacing); text-transform: uppercase; line-height: 1.25 !important; padding: 8px 16px !important; border: 1px solid transparent !important; box-shadow: none !important; transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.12s ease !important; } .main-body .btn-vm-accent, .main-body .btn.btn-vm-accent, .main-body .btn-primary { background: var(--btn-accent-bg) !important; border-color: var(--btn-accent-bg) !important; color: var(--btn-accent-text) !important; } .main-body .btn-vm-accent:hover, .main-body .btn-vm-accent:focus, .main-body .btn.btn-vm-accent:hover, .main-body .btn-primary:hover, .main-body .btn-primary:focus { background: var(--btn-accent-bg-hover) !important; border-color: var(--btn-accent-bg-hover) !important; color: var(--btn-accent-text) !important; } .main-body .btn-vm-black, .main-body .btn.btn-vm-black { background: var(--btn-black-bg) !important; border-color: var(--btn-black-bg) !important; color: var(--btn-black-text) !important; } .main-body .btn-vm-black:hover, .main-body .btn-vm-black:focus, .main-body .btn.btn-vm-black:hover { background: var(--btn-black-bg-hover) !important; border-color: var(--btn-black-bg-hover) !important; color: var(--btn-black-text) !important; } .main-body .btn-vm-outline, .main-body .btn.btn-vm-outline { background: var(--btn-outline-bg) !important; border-color: var(--btn-outline-border) !important; color: var(--btn-outline-text) !important; } .main-body .btn-vm-outline:hover, .main-body .btn-vm-outline:focus, .main-body .btn.btn-vm-outline:hover { background: var(--btn-outline-hover-bg) !important; border-color: var(--btn-outline-border) !important; color: var(--btn-outline-text) !important; } .main-body .btn-vm-accent.btn-sm, .main-body .btn-vm-black.btn-sm, .main-body .btn-vm-outline.btn-sm, .main-body .btn-primary.btn-sm { padding: 6px 12px !important; font-size: 11px !important; } .main-body .page-header .col-md-8.text-right { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; } .main-body .page-header .col-md-8.text-right .btn { margin: 0 !important; } /* =========================================== VISTAS DE LISTADO — filtros, tablas, datatables =========================================== */ .main-body .page-wrapper > .card { background: var(--brand-white) !important; border: 1px solid rgba(0, 0, 0, 0.06) !important; border-radius: 12px !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important; margin-bottom: 16px !important; } .main-body .page-wrapper > .card > .card-block { padding: 20px !important; } .main-body .header-filters { border: 1px solid rgba(0, 0, 0, 0.1) !important; border-radius: 10px !important; background: #fafafa !important; transition: border-color 0.2s ease, background 0.2s ease !important; } .main-body .header-filters:hover { border-color: var(--brand-accent) !important; background: rgba(0, 229, 214, 0.06) !important; } .main-body .header-filters a, .main-body .header-filters a.accordion-msg { color: var(--brand-black) !important; font-weight: 600 !important; font-size: 13px !important; letter-spacing: 0.03em; } .main-body .header-filters:hover a, .main-body .header-filters a:hover { color: var(--brand-black) !important; } .main-body .header-filters i { color: var(--brand-accent) !important; } .main-body .accordion-desc label, .main-body .accordion-desc p { font-size: 12px !important; font-weight: 600 !important; color: rgba(17, 17, 17, 0.65) !important; margin-bottom: 6px !important; } /* Checkboxes — sin verde legacy (#0c748a) */ .main-body .border-checkbox-section .border-checkbox-group .border-checkbox-label { color: var(--brand-black) !important; font-size: 13px !important; font-weight: 500 !important; } .main-body .border-checkbox-section .border-checkbox-group .border-checkbox-label:before { border: 2px solid rgba(17, 17, 17, 0.28) !important; border-radius: 4px !important; background: var(--brand-white) !important; transition: border-color 0.15s ease, background 0.15s ease !important; } .main-body .border-checkbox-section .border-checkbox-group .border-checkbox-label:after { border-right-color: transparent !important; border-top-color: transparent !important; } .main-body .border-checkbox-section .border-checkbox-group .border-checkbox:checked + .border-checkbox-label:before { border-color: var(--brand-black) !important; background: var(--brand-black) !important; } .main-body .border-checkbox-section .border-checkbox-group .border-checkbox:checked + .border-checkbox-label:after { border-right-color: var(--brand-accent) !important; border-top-color: var(--brand-accent) !important; opacity: 1 !important; } .main-body .border-checkbox-section .border-checkbox-group .border-checkbox-label:hover:before { border-color: var(--brand-accent) !important; } .main-body .form-control, .main-body .select2-container--default .select2-selection--single { border: 1px solid rgba(0, 0, 0, 0.12) !important; border-radius: 8px !important; min-height: 38px; font-size: 13px !important; color: var(--brand-black) !important; transition: border-color 0.18s ease, box-shadow 0.18s ease !important; } .main-body .form-control:focus, .main-body .select2-container--default.select2-container--focus .select2-selection--single, .main-body .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--brand-accent) !important; box-shadow: 0 0 0 3px rgba(0, 229, 214, 0.2) !important; } .main-body .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 36px !important; padding-left: 12px !important; padding-right: 28px !important; color: var(--brand-black) !important; background-color: var(--brand-white) !important; } .main-body .select2-container--default .select2-selection--single { height: auto !important; color: var(--brand-black) !important; background: var(--brand-white) !important; } .main-body .select2-container--default .select2-selection--multiple { background: var(--brand-white) !important; border: 1px solid rgba(0, 0, 0, 0.12) !important; border-radius: 8px !important; min-height: 38px; } .main-body .select2-container--default .select2-selection--multiple .select2-selection__choice { background: var(--brand-black) !important; border: 1px solid var(--brand-black) !important; color: var(--brand-white) !important; border-radius: 6px !important; padding: 3px 10px !important; font-size: 12px !important; font-weight: 500; margin-top: 4px !important; } .main-body .select2-container--default .select2-selection--multiple .select2-selection__choice span { color: var(--brand-white) !important; } .main-body .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: var(--brand-accent) !important; margin-right: 6px !important; font-weight: 700; } .main-body .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { color: var(--brand-white) !important; } .main-body .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--brand-black) !important; color: var(--brand-white) !important; } .main-body .select2-container--default.select2-container--focus .select2-selection--multiple, .main-body .select2-container--default.select2-container--open .select2-selection--multiple { border-color: var(--brand-accent) !important; box-shadow: 0 0 0 3px rgba(0, 229, 214, 0.2) !important; } .main-body .select2-container--default .select2-search--dropdown .select2-search__field:focus { border-color: var(--brand-accent) !important; } /* Calendario «hoy» — add_boton_date_now() en main.js (antes #0c748a) */ .main-body .input-group-addon.btn-today, .main-body .btn-today { background: var(--brand-black) !important; border: 1px solid var(--brand-black) !important; color: var(--brand-white) !important; border-radius: 8px 0 0 8px !important; display: inline-flex !important; align-items: center; justify-content: center; min-height: 38px; padding: 0 12px !important; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .main-body .input-group-addon.btn-today:hover, .main-body .btn-today:hover { background: var(--brand-accent) !important; border-color: var(--brand-accent) !important; color: var(--brand-black) !important; } .main-body .input-group > .input-group-addon.btn-today + .form-control { border-left: none !important; border-radius: 0 8px 8px 0 !important; } /* Contenedor vm-table (listados DataTables) */ .main-body .vm-table { width: 100%; } .main-body .vm-table .vm-dt-wrapper { width: 100%; } /* Toolbar: exportación + búsqueda */ .main-body .vm-table .vm-dt-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .main-body .vm-table .vm-dt-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; } .main-body .vm-table .vm-dt-export { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-left: auto; flex-shrink: 0; } .main-body .vm-table .vm-dt-tools .dataTables_filter { margin: 0; float: none; } .main-body .vm-table .vm-dt-tools .dataTables_filter label { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; font-size: 12px; color: rgba(17, 17, 17, 0.65); } /* Footer: registros + paginación */ .main-body .vm-table .vm-dt-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(0, 0, 0, 0.06); } .main-body .vm-table .vm-dt-length, .main-body .vm-table .vm-dt-info, .main-body .vm-table .vm-dt-paginate { float: none !important; margin: 0 !important; } .main-body .vm-table .vm-dt-paginate { margin-left: auto !important; } .main-body .vm-table .vm-dt-loading { font-weight: 600; line-height: 1.5; } .main-body .vm-table .vm-dt-loading .ti-reload { display: inline-block; margin-right: 6px; } /* Filas con estado especial (órdenes) */ .main-body .vm-table tbody tr.row-delete td { background: rgba(255, 121, 126, 0.18) !important; } .main-body .vm-table tbody tr.row-anulado td { background: rgba(87, 12, 226, 0.12) !important; } .main-body .vm-table tbody tr.row-asignado24 { background: transparent !important; } .main-body .vm-table tbody tr.row-asignado24 td { background: rgba(17, 17, 17, 0.08) !important; color: rgba(17, 17, 17, 0.85) !important; } .main-body .vm-table tbody tr.row-delete:hover td, .main-body .vm-table tbody tr.row-anulado:hover td, .main-body .vm-table tbody tr.row-asignado24:hover td { filter: brightness(0.97); } /* Botones exportación vm-dt */ .main-body .vm-table button.vm-dt-btn, .main-body .vm-table a.vm-dt-btn, .main-body .vm-table .vm-dt-export-btn { border-radius: 6px !important; } .main-body .vm-table th.vm-col-hidden, .main-body .vm-table td.vm-col-hidden, .main-body .vm-table th.none { display: none !important; } .main-body .vm-table th.vm-col-sortable { cursor: pointer; user-select: none; position: relative; padding-right: 22px !important; } .main-body .vm-table th.vm-col-sortable::after { content: '↕'; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 10px; opacity: 0.35; } .main-body .vm-table th.vm-sort-asc::after { content: '↑'; opacity: 1; color: var(--brand-accent); } .main-body .vm-table th.vm-sort-desc::after { content: '↓'; opacity: 1; color: var(--brand-accent); } .main-body .vm-table .vm-dt-search-label { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; font-size: 12px; color: rgba(17, 17, 17, 0.65); } .main-body .vm-table .vm-table-search { min-width: 180px; max-width: 260px; } .main-body .vm-table .vm-dt-length label { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: rgba(17, 17, 17, 0.65); } .main-body .vm-table .vm-dt-length select { width: auto; min-width: 72px; } .main-body .vm-table .vm-dt-paginate { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; } .main-body .vm-table .vm-dt-page-btn { background: var(--btn-outline-bg); border: 1px solid var(--btn-outline-border); color: var(--btn-outline-text); border-radius: 6px; padding: 5px 10px; font-size: 12px; font-weight: 600; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } .main-body .vm-table .vm-dt-page-btn:hover:not(:disabled) { background: var(--btn-black-bg); border-color: var(--btn-black-bg); color: var(--btn-black-text); } .main-body .vm-table .vm-dt-page-btn.is-active { background: var(--brand-accent); border-color: var(--brand-accent); color: var(--brand-black); } .main-body .vm-table .vm-dt-page-btn:disabled { opacity: 0.4; cursor: not-allowed; } .main-body .vm-table .vm-dt-processing { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.82); display: none; align-items: center; justify-content: center; z-index: 5; border-radius: 10px; pointer-events: all; } .main-body .vm-table.is-loading { pointer-events: none; user-select: none; } .main-body .vm-table.is-loading .vm-dt-processing { display: flex !important; } .main-body .vm-table.is-loading .vm-dt-toolbar, .main-body .vm-table.is-loading .vm-dt-footer { opacity: 0.55; } /* Overlay reutilizable (dashboards / tablas pesadas) */ .vm-load-panel { position: relative; } .vm-panel-cargando { pointer-events: none; user-select: none; } .vm-panel-cargando .vm-table-load-overlay { display: flex; pointer-events: all; } .vm-table-load-overlay { display: none; position: absolute; inset: 0; z-index: 120; background: rgba(255, 255, 255, 0.84); align-items: center; justify-content: center; border-radius: 8px; } .vm-table-load-overlay__box { text-align: center; color: rgba(17, 17, 17, 0.78); font-weight: 600; font-size: 13px; line-height: 1.45; padding: 12px 18px; } .vm-table-load-overlay__icon { display: block; font-size: 30px; color: var(--brand-accent); animation: vm-spin 0.75s linear infinite; margin: 0 auto 10px; } .vm-table-load-overlay__hint { display: block; margin-top: 4px; font-size: 11px; font-weight: 500; color: rgba(17, 17, 17, 0.5); } .vm-load-disabled { cursor: not-allowed !important; } .main-body .vm-table.vm-table--list { position: relative; } /* Scroll horizontal superior sincronizado */ .main-body .vm-table .vm-table-scroll { width: 100%; max-width: 100%; overflow: hidden; } .main-body .vm-table .vm-table-scroll-top { overflow-x: auto; overflow-y: hidden; min-height: 12px; margin-bottom: 6px; border-radius: 6px; scrollbar-width: thin; scrollbar-color: var(--brand-black) rgba(0, 0, 0, 0.06); } .main-body .vm-table .vm-table-scroll-top.is-hidden { display: none; } .main-body .vm-table .vm-table-scroll-top-inner { height: 1px; } .main-body .vm-table .vm-table-scroll-top::-webkit-scrollbar, .main-body .vm-table .vm-table-scroll-body::-webkit-scrollbar { height: 8px; } .main-body .vm-table .vm-table-scroll-top::-webkit-scrollbar-track, .main-body .vm-table .vm-table-scroll-body::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.05); border-radius: 999px; } .main-body .vm-table .vm-table-scroll-top::-webkit-scrollbar-thumb, .main-body .vm-table .vm-table-scroll-body::-webkit-scrollbar-thumb { background: var(--brand-black); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } .main-body .vm-table .vm-table-scroll-top::-webkit-scrollbar-thumb:hover, .main-body .vm-table .vm-table-scroll-body::-webkit-scrollbar-thumb:hover { background: var(--brand-accent); border: 2px solid transparent; background-clip: padding-box; } .main-body .vm-table .vm-table-scroll-body { display: block; width: 100%; max-width: 100%; overflow: auto; border-radius: 10px; border: 1px solid rgba(0, 0, 0, 0.06); scrollbar-width: thin; scrollbar-color: var(--brand-black) rgba(0, 0, 0, 0.06); -webkit-overflow-scrolling: touch; } /* Tabla */ .main-body .table-responsive, .main-body .vm-table .table-responsive:not(.vm-table-scroll-body) { border-radius: 10px; overflow: hidden; border: 1px solid rgba(0, 0, 0, 0.06); } .main-body table.table thead th { background: var(--brand-black) !important; color: var(--brand-white) !important; font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: 0.04em; border: none !important; border-bottom: 2px solid var(--brand-accent) !important; padding: 12px 10px !important; vertical-align: middle !important; } .main-body table.table tbody td { border-color: rgba(0, 0, 0, 0.06) !important; padding: 10px !important; font-size: 13px !important; color: var(--brand-black) !important; vertical-align: middle !important; } .main-body table.table.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(0, 0, 0, 0.02) !important; } .main-body table.table tbody tr:hover { background-color: rgba(0, 229, 214, 0.06) !important; } .main-body .dataTables_wrapper .dataTables_length, .main-body .dataTables_wrapper .dataTables_filter, .main-body .dataTables_wrapper .dataTables_info, .main-body .dataTables_wrapper .dataTables_paginate { font-size: 13px; color: rgba(17, 17, 17, 0.65); padding: 8px 0; } .main-body .dataTables_wrapper .dataTables_filter input { border: 1px solid rgba(0, 0, 0, 0.12) !important; border-radius: 8px !important; padding: 6px 10px !important; margin-left: 8px; } .main-body .dataTables_wrapper .dataTables_filter input:focus { border-color: var(--brand-accent) !important; outline: none; box-shadow: 0 0 0 3px rgba(0, 229, 214, 0.15); } .main-body .dataTables_wrapper .dataTables_processing { background: var(--brand-black) !important; color: var(--brand-accent) !important; border-radius: 8px; font-weight: 600; } .main-body .dataTables_wrapper .dataTables_paginate .paginate_button.current, .main-body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: var(--brand-accent) !important; border-color: var(--brand-accent) !important; color: var(--brand-black) !important; border-radius: 6px !important; } .main-body .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: rgba(0, 229, 214, 0.12) !important; border-color: transparent !important; color: var(--brand-black) !important; border-radius: 6px !important; } /* Exportación CSV / Excel / PDF */ .main-body button.dt-button, .main-body div.dt-button, .main-body a.dt-button, .main-body .dt-buttons .btn { background: var(--btn-outline-bg) !important; border: 1px solid var(--btn-outline-border) !important; color: var(--btn-outline-text) !important; border-radius: 6px !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.03em; text-transform: uppercase; padding: 6px 12px !important; margin-right: 6px !important; } .main-body button.dt-button:hover, .main-body div.dt-button:hover, .main-body a.dt-button:hover, .main-body .dt-buttons .btn:hover { background: var(--btn-black-bg) !important; border-color: var(--btn-black-bg) !important; color: var(--btn-black-text) !important; } /* Acciones en fila */ .main-body .vm-table td .vm-actions-inline, .main-body .vm-table td:first-child ul.list-inline { display: inline-flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; gap: 6px; margin: 0 !important; padding: 0 !important; list-style: none !important; vertical-align: middle; } .main-body .vm-table td .vm-actions-inline .list-inline-item, .main-body .vm-table td:first-child .list-inline-item { display: inline-flex !important; align-items: center !important; float: none !important; margin: 0 !important; padding: 0 !important; } .main-body .vm-table td .vm-actions-inline form { display: inline-flex !important; margin: 0 !important; } .main-body .vm-table td:first-child { white-space: nowrap; } .main-body .btn-datatable { border-radius: 6px !important; padding: 4px 8px !important; font-size: 14px !important; margin: 0 !important; } .main-body .btn-datatable.btn-info { background: var(--brand-black) !important; border-color: var(--brand-black) !important; color: var(--brand-white) !important; } .main-body .btn-datatable.btn-info:hover { background: var(--btn-accent-bg) !important; border-color: var(--btn-accent-bg) !important; color: var(--btn-accent-text) !important; } .main-body .btn-datatable.btn-danger { background: transparent !important; border: 1px solid rgba(220, 53, 69, 0.45) !important; color: #c82333 !important; } .main-body .btn-datatable.btn-danger:hover { background: #dc3545 !important; border-color: #dc3545 !important; color: #fff !important; } .main-body .btn-datatable.btn-success { background: var(--brand-accent) !important; border-color: var(--brand-accent) !important; color: var(--brand-black) !important; } .main-body .btn-datatable.btn-warning { background: transparent !important; border: 1px solid rgba(0, 0, 0, 0.2) !important; color: var(--brand-black) !important; } /* Badges / estados — listados (órdenes, eventos, etc.) */ .main-body .label { font-weight: 600; border-radius: 999px; padding: 4px 10px; font-size: 11px; display: inline-block; line-height: 1.3; border: 1px solid transparent; } .main-body .label-primary { background: rgba(0, 229, 214, 0.18) !important; color: #006b64 !important; border-color: rgba(0, 229, 214, 0.45) !important; } .main-body .label-danger { background: rgba(252, 97, 128, 0.12) !important; color: #b71c1c !important; border-color: rgba(252, 97, 128, 0.35) !important; } .main-body .label-success { background: rgba(17, 17, 17, 0.08) !important; color: var(--brand-black) !important; border-color: rgba(17, 17, 17, 0.15) !important; } .main-body .label-inverse { background: var(--brand-black) !important; color: var(--brand-white) !important; border-color: var(--brand-black) !important; } .main-body .label-yellow-cierre-cia { background: rgba(0, 229, 214, 0.15) !important; color: #008f86 !important; border: 1px solid rgba(0, 229, 214, 0.45); font-weight: 600; border-radius: 999px; padding: 4px 10px; font-size: 11px; } .main-body .vm-label-anulado { background: rgba(87, 12, 226, 0.12) !important; color: #5a1fa8 !important; border: 1px solid rgba(87, 12, 226, 0.35) !important; } .main-body .label-info { background: rgba(17, 17, 17, 0.06) !important; color: var(--brand-black) !important; border: 1px solid rgba(17, 17, 17, 0.12) !important; border-radius: 999px; padding: 4px 10px; font-size: 11px; } .main-body .btn-datatable.btn-primary { background: var(--brand-black) !important; border-color: var(--brand-black) !important; color: var(--brand-white) !important; } .main-body .btn-datatable.btn-primary:hover { background: var(--brand-accent) !important; border-color: var(--brand-accent) !important; color: var(--brand-black) !important; } .main-body .badge-primary, .main-body .corporative-bg { background-color: var(--brand-accent) !important; color: var(--brand-black) !important; } .main-body .orange { color: var(--brand-accent) !important; } .main-body .card .card-block .sub-title, .main-body .sub-title h4 { color: var(--brand-black) !important; } /* =========================================== DATE RANGE PICKER — Vexa Mobius (el popup se monta en body, fuera de .main-body) =========================================== */ .daterangepicker { border: 1px solid rgba(0, 0, 0, 0.1) !important; border-radius: 12px !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important; padding: 12px !important; font-family: inherit; color: var(--brand-black) !important; } /* Dos meses siempre en una fila; sin scroll interno */ .daterangepicker.vm-daterange-picker { width: auto !important; min-width: 540px !important; max-width: calc(100vw - 16px) !important; overflow: visible !important; } .daterangepicker.vm-daterange-picker.ltr .calendar.left, .daterangepicker.vm-daterange-picker.ltr .calendar.right { float: left !important; clear: none !important; display: block !important; max-width: none !important; } .daterangepicker.vm-daterange-picker.ltr .calendar.left { margin-right: 0 !important; } .daterangepicker.vm-daterange-picker.ltr .calendar.right { margin-left: 0 !important; } .daterangepicker.vm-daterange-picker.ltr .calendar.left .calendar-table { border-right: none !important; padding-right: 10px !important; } .daterangepicker.vm-daterange-picker.ltr .calendar.right .calendar-table { border-left: 1px solid rgba(0, 0, 0, 0.06) !important; padding-left: 10px !important; } .daterangepicker.vm-daterange-picker .daterangepicker_input { display: none !important; } .daterangepicker.vm-daterange-picker .ranges { clear: both !important; float: none !important; width: 100% !important; margin: 8px 0 0 !important; padding-top: 10px !important; border-top: 1px solid rgba(0, 0, 0, 0.06); } .daterangepicker:before { border-bottom-color: rgba(0, 0, 0, 0.12) !important; } .daterangepicker:after { border-bottom-color: #fff !important; } .daterangepicker .calendar-table { border: none !important; background: transparent !important; } .daterangepicker .calendar th { color: rgba(17, 17, 17, 0.45) !important; font-size: 11px !important; font-weight: 600 !important; text-transform: lowercase; } .daterangepicker .calendar th.month { color: var(--brand-black) !important; font-size: 13px !important; font-weight: 700 !important; text-transform: capitalize; } .daterangepicker th.prev.available, .daterangepicker th.next.available { color: var(--brand-black) !important; min-width: 28px; vertical-align: middle; } .daterangepicker th.prev.available i, .daterangepicker th.next.available i { display: none !important; } .daterangepicker th.prev.available::before { content: '‹'; display: inline-block; font-size: 22px; font-weight: 700; line-height: 1; color: var(--brand-black); } .daterangepicker th.next.available::before { content: '›'; display: inline-block; font-size: 22px; font-weight: 700; line-height: 1; color: var(--brand-black); } .daterangepicker th.prev.available:hover, .daterangepicker th.next.available:hover { background: rgba(0, 229, 214, 0.2) !important; border-radius: 6px !important; } .daterangepicker td.available:hover, .daterangepicker th.available:hover { background: rgba(0, 229, 214, 0.15) !important; color: var(--brand-black) !important; border-radius: 6px !important; } .daterangepicker td.in-range { background: rgba(0, 229, 214, 0.12) !important; color: var(--brand-black) !important; } .daterangepicker td.active, .daterangepicker td.active:hover { background: var(--brand-black) !important; color: var(--brand-white) !important; border-radius: 6px !important; } .daterangepicker td.start-date { border-radius: 6px 0 0 6px !important; } .daterangepicker td.end-date { border-radius: 0 6px 6px 0 !important; } .daterangepicker td.start-date.end-date { border-radius: 6px !important; } .daterangepicker td.off, .daterangepicker td.off.in-range { background: transparent !important; color: rgba(17, 17, 17, 0.3) !important; } .daterangepicker .input-mini { border: 1px solid rgba(0, 0, 0, 0.12) !important; border-radius: 8px !important; height: 34px !important; line-height: 34px !important; font-size: 13px !important; color: var(--brand-black) !important; } .daterangepicker .input-mini.active { border-color: var(--brand-accent) !important; box-shadow: 0 0 0 3px rgba(0, 229, 214, 0.2) !important; } .daterangepicker .ranges li { background: #fafafa !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; border-radius: 8px !important; color: var(--brand-black) !important; font-size: 12px !important; padding: 6px 12px !important; } .daterangepicker .ranges li:hover, .daterangepicker .ranges li.active { background: var(--brand-black) !important; border-color: var(--brand-black) !important; color: var(--brand-white) !important; } .daterangepicker .range_inputs { display: flex; gap: 8px; justify-content: flex-end; padding-top: 8px; } .daterangepicker .applyBtn.btn-success, .daterangepicker button.applyBtn { background: var(--btn-accent-bg) !important; border: 1px solid var(--btn-accent-bg) !important; color: var(--btn-accent-text) !important; border-radius: 6px !important; font-weight: 600 !important; font-size: 12px !important; padding: 6px 14px !important; text-transform: uppercase; letter-spacing: 0.03em; } .daterangepicker .applyBtn.btn-success:hover, .daterangepicker button.applyBtn:hover { background: var(--btn-accent-bg-hover) !important; border-color: var(--btn-accent-bg-hover) !important; } .daterangepicker .cancelBtn.btn-default, .daterangepicker button.cancelBtn { background: var(--btn-outline-bg) !important; border: 1px solid var(--btn-outline-border) !important; color: var(--btn-outline-text) !important; border-radius: 6px !important; font-weight: 600 !important; font-size: 12px !important; padding: 6px 14px !important; text-transform: uppercase; letter-spacing: 0.03em; } .daterangepicker .cancelBtn.btn-default:hover, .daterangepicker button.cancelBtn:hover { background: var(--btn-outline-hover-bg) !important; } .daterangepicker select.monthselect, .daterangepicker select.yearselect, .daterangepicker select.hourselect, .daterangepicker select.minuteselect { border: 1px solid rgba(0, 0, 0, 0.12) !important; border-radius: 6px !important; padding: 2px 6px !important; font-size: 12px !important; } /* Input fecha en filtros */ .main-body .input-group-date-custom .input-group-addon { background: var(--brand-black) !important; border: 1px solid var(--brand-black) !important; color: var(--brand-white) !important; border-radius: 0 8px 8px 0 !important; cursor: pointer; transition: background 0.15s ease; } .main-body .input-group-date-custom .input-group-addon:hover { background: var(--brand-accent) !important; border-color: var(--brand-accent) !important; color: var(--brand-black) !important; } .main-body .input-group-date-custom .form-control { border-radius: 8px 0 0 8px !important; } .main-body .input-group-date-custom .form-control:focus { border-color: var(--brand-accent) !important; box-shadow: 0 0 0 3px rgba(0, 229, 214, 0.2) !important; } /* =========================================== PRELOADER — carga inicial de página (.theme-loader en layouts/partials/preloader) =========================================== */ .theme-loader { background-color: var(--brand-white) !important; } .theme-loader .ball-scale { width: 90px; margin-left: -45px; } .theme-loader .ball-scale .contain > div { width: 4px !important; height: 44px !important; border-radius: 4px !important; margin: 0 2px !important; } /* Barras: negro en los extremos → cyan en el centro */ .theme-loader .ball-scale .contain > div:nth-child(1), .theme-loader .ball-scale .contain > div:nth-child(9) { background-color: rgba(17, 17, 17, 0.18) !important; } .theme-loader .ball-scale .contain > div:nth-child(2), .theme-loader .ball-scale .contain > div:nth-child(8) { background-color: rgba(17, 17, 17, 0.38) !important; } .theme-loader .ball-scale .contain > div:nth-child(3), .theme-loader .ball-scale .contain > div:nth-child(7) { background-color: rgba(17, 17, 17, 0.62) !important; } .theme-loader .ball-scale .contain > div:nth-child(4), .theme-loader .ball-scale .contain > div:nth-child(6) { background-color: var(--brand-black) !important; } .theme-loader .ball-scale .contain > div:nth-child(5) { background-color: var(--brand-accent) !important; box-shadow: 0 0 14px rgba(0, 229, 214, 0.55); } .theme-loader::after { content: 'Cargando…'; position: absolute; left: 50%; top: calc(50% + 42px); transform: translateX(-50%); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(17, 17, 17, 0.45); pointer-events: none; } /* =========================================== OVERLAY — operaciones largas (#loading-app) =========================================== */ #loading-app.container-loading { background: rgba(255, 255, 255, 0.92) !important; opacity: 1 !important; backdrop-filter: blur(4px); z-index: 999998 !important; } #loading-app .ti-harddrives { color: var(--brand-accent) !important; font-size: 28px !important; animation: vm-loader-pulse 1.2s ease-in-out infinite; } #loading-app .img-fluid { display: none !important; } #loading-app .col-sm-2 { display: flex; align-items: center; justify-content: center; min-height: 100px; } #loading-app .col-sm-2::before { content: ''; display: block; width: 4px; height: 44px; border-radius: 4px; background: var(--brand-accent); box-shadow: -14px 0 0 rgba(17, 17, 17, 0.35), -28px 0 0 rgba(17, 17, 17, 0.18), 14px 0 0 rgba(17, 17, 17, 0.35), 28px 0 0 rgba(17, 17, 17, 0.18); animation: vm-loader-bar 0.9s ease-in-out infinite; } #loading-app span[style*="color:#ff7b00"], #loading-app span[style*="color:#ff7a00"] { color: rgba(17, 17, 17, 0.7) !important; font-weight: 600 !important; letter-spacing: 0.02em; } #loading-app span[style*="font-size: 0.8em"] { color: rgba(17, 17, 17, 0.45) !important; } @keyframes vm-loader-bar { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.45); } } @keyframes vm-loader-pulse { 0%, 100% { opacity: 0.35; transform: scale(0.95); } 50% { opacity: 1; transform: scale(1); } } @keyframes vm-spin { to { transform: rotate(360deg); } } /* Tabla vm-list — indicador de carga */ .main-body .vm-table .vm-dt-loading { color: rgba(17, 17, 17, 0.65) !important; font-size: 12px !important; letter-spacing: 0.03em; } .main-body .vm-table .vm-dt-loading .ti-reload { color: var(--brand-accent) !important; animation: vm-spin 0.75s linear infinite; } /* =========================================== PURGA LEGACY #0c748a — invarat.css residual =========================================== */ /* Sidebar: anular verde teal que invarat.css aplica con !important */ .pcoded .pcoded-navbar .pcoded-item > li > a:hover { border-left-color: transparent !important; } .pcoded .pcoded-navbar .pcoded-item > li.active > a, .pcoded .pcoded-navbar .pcoded-item > li.active > a:hover { background: rgba(0, 229, 214, 0.18) !important; border-left-color: var(--brand-accent) !important; color: var(--brand-accent) !important; } .pcoded .pcoded-navbar .pcoded-item > li.active > a .pcoded-micon, .pcoded .pcoded-navbar .pcoded-item > li.active > a .pcoded-micon i, .pcoded .pcoded-navbar .pcoded-item > li.active > a .pcoded-mtext { color: var(--brand-accent) !important; } .pcoded .pcoded-navbar .pcoded-item .pcoded-hasmenu .pcoded-submenu { background: transparent !important; border-left: none !important; box-shadow: none !important; } .pcoded .pcoded-navbar .pcoded-item .pcoded-hasmenu .pcoded-submenu li > a { color: rgba(255, 255, 255, 0.62) !important; border-bottom: none !important; } .pcoded .pcoded-navbar .pcoded-item .pcoded-hasmenu .pcoded-submenu li > a:hover, .pcoded .pcoded-navbar .pcoded-item .pcoded-hasmenu .pcoded-submenu li.active > a { background: rgba(0, 229, 214, 0.12) !important; color: var(--brand-accent) !important; border-left-color: var(--brand-accent) !important; } .pcoded .pcoded-navbar .pcoded-item > li > a:hover > .pcoded-micon, .pcoded .pcoded-navbar .pcoded-item > li > a:hover > .pcoded-micon i { color: var(--brand-white) !important; } .pcoded[nav-type="st5"] .pcoded-item.pcoded-left-item > li > a > .pcoded-micon, .pcoded[nav-type="st5"] .pcoded-item.pcoded-left-item > li > a > .pcoded-micon i { color: rgba(255, 255, 255, 0.55) !important; background-color: transparent !important; } .pcoded[nav-type="st5"] .pcoded-item.pcoded-left-item > li.active > a > .pcoded-micon, .pcoded[nav-type="st5"] .pcoded-item.pcoded-left-item > li.active > a > .pcoded-micon i { color: var(--brand-accent) !important; } .pcoded-navbar::-webkit-scrollbar-thumb { background: var(--brand-accent-muted) !important; } li .active span { color: var(--brand-accent) !important; } .main-body .item-row-bg:hover { background-color: rgba(0, 229, 214, 0.15) !important; color: var(--brand-black) !important; } /* =========================================== Select2 global — dropdown en (fuera de .main-body) Purga #0c748a de style.css =========================================== */ .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--brand-black) !important; color: var(--brand-white) !important; } .select2-container--default .select2-results__option[aria-selected="true"] { background-color: rgba(0, 229, 214, 0.12) !important; color: var(--brand-black) !important; } .select2-container--default .select2-search--dropdown .select2-search__field:focus { border-color: var(--brand-accent) !important; outline: none; } .select2-container--default:focus { border-color: var(--brand-accent) !important; } .select2-container--default.select2-container--focus .select2-selection--multiple, .select2-container--default.select2-container--open .select2-selection--multiple { border-color: var(--brand-accent) !important; } .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: var(--brand-black) !important; border-color: var(--brand-black) !important; color: var(--brand-white) !important; } .select2-container--default .select2-selection--multiple .select2-selection__choice span { color: var(--brand-white) !important; } /* style.css — single select con fondo #0c748a */ .select2-container--default .select2-selection--single { background: var(--brand-white) !important; border: 1px solid rgba(0, 0, 0, 0.12) !important; color: var(--brand-black) !important; } .select2-container--default .select2-selection--single .select2-selection__rendered { background-color: var(--brand-white) !important; color: var(--brand-black) !important; } .select2-container--default.select2-container--focus .select2-selection--single, .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--brand-accent) !important; box-shadow: 0 0 0 3px rgba(0, 229, 214, 0.2) !important; } .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: var(--brand-black) transparent transparent transparent !important; } .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent var(--brand-black) transparent !important; } /* Multi-select plugin (ms-container) */ .ms-container .ms-list.ms-focus { border-color: var(--brand-accent) !important; box-shadow: 0 0 0 3px rgba(0, 229, 214, 0.2) !important; } .ms-container .ms-selectable li.ms-hover, .ms-container .ms-selection li.ms-hover { background-color: var(--brand-black) !important; color: var(--brand-white) !important; } /* =========================================== MODALES — Vexa Mobius (global) Anula legacy #0c748a de invarat.css =========================================== */ .main-body .modal-content { border: 1px solid rgba(0, 0, 0, 0.08) !important; border-radius: 12px !important; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18) !important; overflow: hidden; } .main-body .modal-header { background: var(--brand-black) !important; color: var(--brand-white) !important; border-bottom: 2px solid var(--brand-accent) !important; padding: 14px 20px !important; align-items: center; } .main-body .modal-header .modal-title, .main-body .modal-header h5 { font-size: 14px !important; font-weight: 700 !important; letter-spacing: 0.06em; text-transform: uppercase; margin: 0 !important; color: var(--brand-white) !important; } .main-body .modal-header .close { color: var(--brand-white) !important; opacity: 0.75; text-shadow: none; font-size: 1.5rem; margin: -4px -4px -4px auto; padding: 0 4px; } .main-body .modal-header .close:hover { opacity: 1; color: var(--brand-accent) !important; } .main-body .modal-body { padding: 20px 24px !important; background: var(--brand-white); } .main-body .modal-footer { padding: 12px 20px !important; border-top: 1px solid rgba(0, 0, 0, 0.08) !important; background: #fafafa; } .main-body .modal-footer .btn { border-radius: 8px !important; font-weight: 600 !important; letter-spacing: 0.04em; text-transform: uppercase; font-size: 11px !important; padding: 8px 16px !important; box-shadow: none !important; } .main-body .modal-footer .btn-default, .main-body .modal-footer .btn-secondary { background: var(--brand-white) !important; border: 1px solid rgba(17, 17, 17, 0.2) !important; color: var(--brand-black) !important; } .main-body .modal-footer .btn-default:hover, .main-body .modal-footer .btn-secondary:hover { background: rgba(0, 0, 0, 0.04) !important; border-color: var(--brand-black) !important; } .main-body .modal-footer .btn-success, .main-body .modal-footer .btn-primary, .main-body .modal-footer .btn-vm-accent { background: var(--brand-accent) !important; border-color: var(--brand-accent) !important; color: var(--brand-black) !important; } .main-body .modal-footer .btn-success:hover, .main-body .modal-footer .btn-primary:hover, .main-body .modal-footer .btn-vm-accent:hover { background: var(--btn-accent-bg-hover, #00cfc2) !important; border-color: var(--btn-accent-bg-hover, #00cfc2) !important; color: var(--brand-black) !important; } /* Formularios dentro de modales */ .main-body .modal-body label, .main-body .modal-body strong { font-size: 12px; font-weight: 600; color: rgba(17, 17, 17, 0.75); } .main-body .modal-body .form-control, .main-body .modal-body .select2-container--default .select2-selection--single, .main-body .modal-body .select2-container--default .select2-selection--multiple, .main-body .modal-body textarea.form-control { border: 1px solid rgba(0, 0, 0, 0.12) !important; border-radius: 8px !important; font-size: 13px !important; color: var(--brand-black) !important; } .main-body .modal-body .form-control:focus, .main-body .modal-body .select2-container--default.select2-container--focus .select2-selection--single, .main-body .modal-body .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--brand-accent) !important; box-shadow: 0 0 0 3px rgba(0, 229, 214, 0.2) !important; } .main-body .modal-body hr { border-color: rgba(0, 0, 0, 0.08) !important; margin: 16px 0 !important; } .main-body .modal-body .border-checkbox-section .border-checkbox-label { font-size: 12px !important; font-weight: 600 !important; color: rgba(17, 17, 17, 0.8) !important; } .main-body .modal-body .border-checkbox-section .border-checkbox-label:before { border: 1px solid rgba(0, 0, 0, 0.2) !important; border-radius: 4px !important; } .main-body .modal-body .border-checkbox-section .border-checkbox:checked + .border-checkbox-label:before { background: var(--brand-accent) !important; border-color: var(--brand-accent) !important; } .main-body .modal-body .label.label-warning { background: rgba(255, 152, 0, 0.12) !important; color: #e65100 !important; border: 1px solid rgba(255, 152, 0, 0.35) !important; border-radius: 6px !important; font-size: 11px !important; font-weight: 600 !important; padding: 6px 10px !important; display: inline-block; } .main-body .modal-body .add-option-desc { cursor: pointer; color: var(--brand-black) !important; font-size: 12px; } .main-body .modal-body .add-option-desc i { color: var(--brand-accent) !important; } .main-body .modal-body .add-option-desc:hover { color: var(--brand-accent) !important; } /* TinyMCE / editor en modales */ .main-body .modal-body .mce-tinymce, .main-body .modal-body .tox-tinymce { border-radius: 8px !important; border-color: rgba(0, 0, 0, 0.12) !important; overflow: hidden; } .main-body .modal-backdrop.show { opacity: 0.45; }