/* ============================================================ TEMAS DE PERSONALIZACIÓN — INNOVA/SIGPRO Clase en : theme-azul | theme-verde | theme-naranja | theme-rojo | theme-purpura | theme-azul-claro ============================================================ */ /* ===================================================================== LOGO DEL SIDEBAR — altura coordinada, centrado, sin duplicado Todos los valores deben coincidir con --topbar-h para no romper layout. ===================================================================== */ /* Altura del topbar aumentada de 60px → 75px de forma coordinada */ .navbar-header { height: 75px !important; } .vertical-menu { top: 75px !important; } .main-content .content { margin-top: 75px !important; } .page-content { padding-top: calc(75px + 20px) !important; } /* Brand-box: altura igual al navbar-header (75px), flex centrado, sin bordes. Sin height explícito el topbar blanco asoma por encima/debajo del logo. */ .navbar-brand-box { display: flex !important; align-items: center !important; justify-content: center !important; border: none !important; height: 75px !important; min-height: 75px !important; } /* Elimina los tres bordes que crean el rectángulo blanco alrededor del logo: 1) border-bottom del brand-box en modo dark (app.css: #192a3f) 2) border-right del vertical-menu (app.css: #e9ebec) 3) border-bottom del page-topbar (app.css: rgba(233,235,236,.6)) */ body[data-sidebar="dark"][class*="theme-"] .navbar-brand-box { border: none !important; } body[class*="theme-"] .vertical-menu { border-right: none !important; } body[class*="theme-"] #page-topbar { border-bottom: none !important; box-shadow: 0 1px 6px rgba(0,0,0,0.08) !important; } /* Corrige duplicado: en sidebar dark solo se muestra logo-light. display:flex en el contenedor anulaba el display:none de app.css. */ body[data-sidebar="dark"] .navbar-brand-box .logo-dark { display: none !important; } body[data-sidebar="dark"] .navbar-brand-box .logo-light { display: block !important; width: 100%; text-align: center; padding: 0 !important; } /* Logo grande y centrado dentro de los 75px */ body[data-sidebar="dark"] .navbar-brand-box .logo-light .logo-lg img { height: 54px !important; width: auto !important; max-width: 88% !important; object-fit: contain !important; display: block !important; margin: 0 auto !important; } body[data-sidebar="dark"] .navbar-brand-box .logo-light .logo-sm img { height: 38px !important; width: auto !important; max-width: 88% !important; object-fit: contain !important; display: block !important; margin: 0 auto !important; } /* ===================================================================== SIDEBAR MODERNO — BASE (todos los temas) Aplica cuando body tiene data-sidebar="dark" y alguna clase theme-* ===================================================================== */ /* Sub-menús: texto largo envuelve sin desbordarse */ #sidebar-menu ul.sub-menu li a { white-space: normal !important; word-break: break-word !important; line-height: 1.4 !important; padding-top: 6px !important; padding-bottom: 6px !important; } /* Sub-menús: fondo acorde al tema — solo en sidebar contraído (flyout). En sidebar expandido se usa el fondo nativo de Skote. */ body.sidebar-enable[data-sidebar="dark"].theme-azul #sidebar-menu .sub-menu { background-color: #003060 !important; } body.sidebar-enable[data-sidebar="dark"].theme-verde #sidebar-menu .sub-menu { background-color: #0b3320 !important; } body.sidebar-enable[data-sidebar="dark"].theme-naranja #sidebar-menu .sub-menu { background-color: #f4f4f4 !important; } body.sidebar-enable[data-sidebar="dark"].theme-rojo #sidebar-menu .sub-menu { background-color: #10131c !important; } body.sidebar-enable[data-sidebar="dark"].theme-purpura #sidebar-menu .sub-menu { background-color: #2e0f40 !important; } body.sidebar-enable[data-sidebar="dark"].theme-azul-claro #sidebar-menu .sub-menu { background-color: #0a52b0 !important; } body.sidebar-enable[data-sidebar="dark"].theme-rojo-solido #sidebar-menu .sub-menu { background-color: #7f1414 !important; } /* Variantes BLANCO: sub-menú gris muy claro (igual que naranja) */ body.sidebar-enable[data-sidebar="dark"].theme-blanco-azul #sidebar-menu .sub-menu { background-color: #f4f4f4 !important; } body.sidebar-enable[data-sidebar="dark"].theme-blanco-rojo #sidebar-menu .sub-menu { background-color: #f4f4f4 !important; } body.sidebar-enable[data-sidebar="dark"].theme-blanco-morado #sidebar-menu .sub-menu { background-color: #f4f4f4 !important; } body.sidebar-enable[data-sidebar="dark"].theme-blanco-verde #sidebar-menu .sub-menu { background-color: #f4f4f4 !important; } /* Inicio: mismo color base que el resto de ítems en todos los temas */ body[data-sidebar="dark"][class*="theme-"] #side-menu > li:first-child > a { color: rgba(255, 255, 255, 0.72) !important; } body[data-sidebar="dark"].theme-naranja #side-menu > li:first-child > a, body[data-sidebar="dark"].theme-blanco-azul #side-menu > li:first-child > a, body[data-sidebar="dark"].theme-blanco-rojo #side-menu > li:first-child > a, body[data-sidebar="dark"].theme-blanco-morado #side-menu > li:first-child > a, body[data-sidebar="dark"].theme-blanco-verde #side-menu > li:first-child > a { color: #495057 !important; } /* Sidebar contraído: header del flyout (app.min.css fija #152334 para todos) */ body.sidebar-enable[data-sidebar="dark"].theme-azul .vertical-menu #sidebar-menu > ul > li:hover > a { background: #003060 !important; color: #fff !important; } body.sidebar-enable[data-sidebar="dark"].theme-verde .vertical-menu #sidebar-menu > ul > li:hover > a { background: #0b3320 !important; color: #fff !important; } body.sidebar-enable[data-sidebar="dark"].theme-naranja .vertical-menu #sidebar-menu > ul > li:hover > a { background: #f4f4f4 !important; color: #495057 !important; } body.sidebar-enable[data-sidebar="dark"].theme-rojo .vertical-menu #sidebar-menu > ul > li:hover > a { background: #10131c !important; color: #fff !important; } body.sidebar-enable[data-sidebar="dark"].theme-purpura .vertical-menu #sidebar-menu > ul > li:hover > a { background: #2e0f40 !important; color: #fff !important; } body.sidebar-enable[data-sidebar="dark"].theme-azul-claro .vertical-menu #sidebar-menu > ul > li:hover > a { background: #0a52b0 !important; color: #fff !important; } body.sidebar-enable[data-sidebar="dark"].theme-rojo-solido .vertical-menu #sidebar-menu > ul > li:hover > a { background: #7f1414 !important; color: #fff !important; } /* Variantes BLANCO: header del flyout blanco con texto oscuro (igual que naranja) */ body.sidebar-enable[data-sidebar="dark"].theme-blanco-azul .vertical-menu #sidebar-menu > ul > li:hover > a { background: #f4f4f4 !important; color: #495057 !important; } body.sidebar-enable[data-sidebar="dark"].theme-blanco-rojo .vertical-menu #sidebar-menu > ul > li:hover > a { background: #f4f4f4 !important; color: #495057 !important; } body.sidebar-enable[data-sidebar="dark"].theme-blanco-morado .vertical-menu #sidebar-menu > ul > li:hover > a { background: #f4f4f4 !important; color: #495057 !important; } body.sidebar-enable[data-sidebar="dark"].theme-blanco-verde .vertical-menu #sidebar-menu > ul > li:hover > a { background: #f4f4f4 !important; color: #495057 !important; } /* Transiciones suaves en todos los items del menú */ body[data-sidebar="dark"][class*="theme-"] #sidebar-menu ul li a, body[data-sidebar="dark"][class*="theme-"] #sidebar-menu ul li a i { transition: color .18s ease, background-color .18s ease, border-radius .18s ease; } /* Color base de texto: blanco semi-transparente */ body[data-sidebar="dark"][class*="theme-"] #sidebar-menu ul li a { color: rgba(255, 255, 255, 0.72) !important; margin: 2px 8px !important; border-radius: 8px !important; } /* Hover: fondo semi-transparente + texto blanco — bordes redondeados en todos los lados */ body[data-sidebar="dark"][class*="theme-"] #sidebar-menu ul li a:hover, body[data-sidebar="dark"][class*="theme-"] #sidebar-menu ul li a:focus { color: #ffffff !important; background-color: rgba(255, 255, 255, 0.10) !important; border-radius: 8px !important; } /* Íconos en items normales */ body[data-sidebar="dark"][class*="theme-"] #sidebar-menu ul li a i { color: rgba(255, 255, 255, 0.55) !important; } body[data-sidebar="dark"][class*="theme-"] #sidebar-menu ul li a:hover i { color: #ffffff !important; } /* Título de sección (menu-title) */ body[data-sidebar="dark"][class*="theme-"] #sidebar-menu .menu-title { color: rgba(255, 255, 255, 0.40) !important; font-size: 0.70rem; text-transform: uppercase; letter-spacing: 0.08em; padding-left: 18px !important; } /* ─── OVERRIDE DEL FONDO AZUL DEL ITEM PADRE ACTIVO ─────────────────── Especificidad (1,4,4) supera a app.css (1,2,3). Estilo: fondo blanco redondeado en todos los lados (imagen de referencia). ──────────────────────────────────────────────────────────────────── */ body[data-sidebar="dark"][class*="theme-"] #sidebar-menu ul.metismenu > li.mm-active > a { background-color: rgba(255, 255, 255, 0.18) !important; color: #ffffff !important; border-radius: 8px !important; } body[data-sidebar="dark"][class*="theme-"] #sidebar-menu ul.metismenu > li.mm-active > a > i { color: #ffffff !important; } /* ─── OVERRIDE DEL COLOR DEL ITEM ACTIVO DEL SUBMENÚ ────────────────── Especificidad (1,4,3) supera a app.css (0,3,1). Estilo: fondo blanco redondeado en todos los lados, sin acento izquierdo. ──────────────────────────────────────────────────────────────────── */ body[data-sidebar="dark"][class*="theme-"] #sidebar-menu ul li.mm-active .active { color: #ffffff !important; background-color: rgba(255, 255, 255, 0.18) !important; border-radius: 8px !important; font-weight: 600; } body[data-sidebar="dark"][class*="theme-"] #sidebar-menu ul li.mm-active .active i { color: #ffffff !important; } /* ===================================================================== GRADIENTES Y COLORES POR TEMA ===================================================================== */ /* ─────────── AZUL ─────────── */ body.theme-azul .vertical-menu, body.theme-azul .navbar-brand-box { background: linear-gradient(180deg, #005fa3 0%, #003f72 100%) !important; } body.theme-azul .btn-primary { background-color: #0072CE !important; border-color: #005aa0 !important; } body.theme-azul .btn-primary:hover { background-color: #005aa0 !important; border-color: #004080 !important; } body.theme-azul .bg-primary { background-color: #0072CE !important; } body.theme-azul .text-primary { color: #0072CE !important; } body.theme-azul .border-primary { border-color: #0072CE !important; } body.theme-azul .badge.bg-primary { background-color: #0072CE !important; } body.theme-azul .page-item.active .page-link { background-color: #0072CE !important; border-color: #0072CE !important; } /* ─────────── VERDE ─────────── */ body.theme-verde .vertical-menu, body.theme-verde .navbar-brand-box { background: linear-gradient(180deg, #1a7a4a 0%, #0e4228 100%) !important; } body.theme-verde .btn-primary { background-color: #1a7a4a !important; border-color: #145e38 !important; } body.theme-verde .btn-primary:hover { background-color: #145e38 !important; border-color: #0e4228 !important; } body.theme-verde .bg-primary { background-color: #1a7a4a !important; } body.theme-verde .text-primary { color: #1a7a4a !important; } body.theme-verde .border-primary { border-color: #1a7a4a !important; } body.theme-verde .badge.bg-primary { background-color: #1a7a4a !important; } body.theme-verde .page-item.active .page-link { background-color: #1a7a4a !important; border-color: #1a7a4a !important; } /* ─────────── NARANJA — Sidebar blanco con acento naranja ─────────── */ /* Sidebar: fondo blanco con sombra sutil */ body.theme-naranja .vertical-menu, body.theme-naranja .navbar-brand-box { background: #ffffff !important; box-shadow: 2px 0 8px rgba(0,0,0,0.07) !important; } /* Override del texto blanco base → texto oscuro sobre fondo blanco */ body[data-sidebar="dark"].theme-naranja #sidebar-menu ul li a { color: #495057 !important; } body[data-sidebar="dark"].theme-naranja #sidebar-menu ul li a i { color: #74788d !important; } body[data-sidebar="dark"].theme-naranja #sidebar-menu ul li a:hover, body[data-sidebar="dark"].theme-naranja #sidebar-menu ul li a:focus { color: #e06f0c !important; background-color: rgba(224, 111, 12, 0.09) !important; } body[data-sidebar="dark"].theme-naranja #sidebar-menu ul li a:hover i { color: #e06f0c !important; } body[data-sidebar="dark"].theme-naranja #sidebar-menu .menu-title { color: #adb5bd !important; } body[data-sidebar="dark"].theme-naranja #sidebar-menu ul.metismenu > li.mm-active > a { background-color: rgba(224, 111, 12, 0.10) !important; color: #e06f0c !important; } body[data-sidebar="dark"].theme-naranja #sidebar-menu ul.metismenu > li.mm-active > a > i { color: #e06f0c !important; } body[data-sidebar="dark"].theme-naranja #sidebar-menu ul li.mm-active .active { color: #e06f0c !important; background-color: rgba(224, 111, 12, 0.10) !important; font-weight: 600; } body[data-sidebar="dark"].theme-naranja #sidebar-menu ul li.mm-active .active i { color: #e06f0c !important; } /* Botones y acentos naranja */ body.theme-naranja .btn-primary { background-color: #e06f0c !important; border-color: #c05c09 !important; } body.theme-naranja .btn-primary:hover { background-color: #c05c09 !important; border-color: #9e4a07 !important; } body.theme-naranja .bg-primary { background-color: #e06f0c !important; } body.theme-naranja .text-primary { color: #e06f0c !important; } body.theme-naranja .border-primary { border-color: #e06f0c !important; } body.theme-naranja .badge.bg-primary { background-color: #e06f0c !important; } body.theme-naranja .page-item.active .page-link { background-color: #e06f0c !important; border-color: #e06f0c !important; } /* ─────────── ROJO — Tema oscuro (negro) ─────────── */ body.theme-rojo .vertical-menu, body.theme-rojo .navbar-brand-box { background: linear-gradient(180deg, #1e2330 0%, #0b0f1a 100%) !important; } body.theme-rojo .btn-primary { background-color: #4a5568 !important; border-color: #2d3748 !important; } body.theme-rojo .btn-primary:hover { background-color: #2d3748 !important; border-color: #1a202c !important; } body.theme-rojo .bg-primary { background-color: #4a5568 !important; } body.theme-rojo .text-primary { color: #4a5568 !important; } body.theme-rojo .border-primary { border-color: #4a5568 !important; } body.theme-rojo .badge.bg-primary { background-color: #4a5568 !important; } body.theme-rojo .page-item.active .page-link { background-color: #4a5568 !important; border-color: #4a5568 !important; } /* ─────────── PÚRPURA ─────────── */ body.theme-purpura .vertical-menu, body.theme-purpura .navbar-brand-box { background: linear-gradient(180deg, #7b2d8b 0%, #401549 100%) !important; } body.theme-purpura .btn-primary { background-color: #7b2d8b !important; border-color: #62246f !important; } body.theme-purpura .btn-primary:hover { background-color: #62246f !important; border-color: #4a1b54 !important; } body.theme-purpura .bg-primary { background-color: #7b2d8b !important; } body.theme-purpura .text-primary { color: #7b2d8b !important; } body.theme-purpura .border-primary { border-color: #7b2d8b !important; } body.theme-purpura .badge.bg-primary { background-color: #7b2d8b !important; } body.theme-purpura .page-item.active .page-link { background-color: #7b2d8b !important; border-color: #7b2d8b !important; } /* ─────────── ROJO SÓLIDO — Sidebar rojo ─────────── */ body.theme-rojo-solido .vertical-menu, body.theme-rojo-solido .navbar-brand-box { background: linear-gradient(180deg, #c62828 0%, #7f1414 100%) !important; } body.theme-rojo-solido .btn-primary { background-color: #c62828 !important; border-color: #a52020 !important; } body.theme-rojo-solido .btn-primary:hover { background-color: #a52020 !important; border-color: #841919 !important; } body.theme-rojo-solido .bg-primary { background-color: #c62828 !important; } body.theme-rojo-solido .text-primary { color: #c62828 !important; } body.theme-rojo-solido .border-primary { border-color: #c62828 !important; } body.theme-rojo-solido .badge.bg-primary { background-color: #c62828 !important; } body.theme-rojo-solido .page-item.active .page-link { background-color: #c62828 !important; border-color: #c62828 !important; } /* ─────────── AZUL CLARO ─────────── */ /* Texto más blanco que el resto de temas (override del rgba(255,255,255,0.72) base) */ body[data-sidebar="dark"].theme-azul-claro #sidebar-menu ul li a { color: rgba(255, 255, 255, 0.96) !important; } body[data-sidebar="dark"].theme-azul-claro #sidebar-menu ul li a i { color: rgba(255, 255, 255, 0.82) !important; } body[data-sidebar="dark"].theme-azul-claro #sidebar-menu ul li a:hover, body[data-sidebar="dark"].theme-azul-claro #sidebar-menu ul li a:focus { color: #ffffff !important; background-color: rgba(255, 255, 255, 0.16) !important; } body[data-sidebar="dark"].theme-azul-claro #sidebar-menu ul li a:hover i { color: #ffffff !important; } body.theme-azul-claro .vertical-menu, body.theme-azul-claro .navbar-brand-box { background: linear-gradient(180deg, #1177E0 0%, #0A5BB5 100%) !important; } body.theme-azul-claro .btn-primary { background-color: #1177E0 !important; border-color: #0d5ec2 !important; } body.theme-azul-claro .btn-primary:hover { background-color: #0d5ec2 !important; border-color: #0a4da0 !important; } body.theme-azul-claro .bg-primary { background-color: #1177E0 !important; } body.theme-azul-claro .text-primary { color: #1177E0 !important; } body.theme-azul-claro .border-primary { border-color: #1177E0 !important; } body.theme-azul-claro .badge.bg-primary { background-color: #1177E0 !important; } body.theme-azul-claro .page-item.active .page-link { background-color: #1177E0 !important; border-color: #1177E0 !important; } /* ─────────── BLANCO + AZUL — Sidebar blanco, acento azul ─────────── */ body.theme-blanco-azul .vertical-menu, body.theme-blanco-azul .navbar-brand-box { background: #ffffff !important; box-shadow: 2px 0 8px rgba(0,0,0,0.07) !important; } body[data-sidebar="dark"].theme-blanco-azul #sidebar-menu ul li a { color: #495057 !important; } body[data-sidebar="dark"].theme-blanco-azul #sidebar-menu ul li a i { color: #74788d !important; } body[data-sidebar="dark"].theme-blanco-azul #sidebar-menu ul li a:hover, body[data-sidebar="dark"].theme-blanco-azul #sidebar-menu ul li a:focus { color: #0072CE !important; background-color: rgba(0, 114, 206, 0.09) !important; } body[data-sidebar="dark"].theme-blanco-azul #sidebar-menu ul li a:hover i { color: #0072CE !important; } body[data-sidebar="dark"].theme-blanco-azul #sidebar-menu .menu-title { color: #adb5bd !important; } body[data-sidebar="dark"].theme-blanco-azul #sidebar-menu ul.metismenu > li.mm-active > a { background-color: rgba(0, 114, 206, 0.10) !important; color: #0072CE !important; } body[data-sidebar="dark"].theme-blanco-azul #sidebar-menu ul.metismenu > li.mm-active > a > i { color: #0072CE !important; } body[data-sidebar="dark"].theme-blanco-azul #sidebar-menu ul li.mm-active .active { color: #0072CE !important; background-color: rgba(0, 114, 206, 0.10) !important; font-weight: 600; } body[data-sidebar="dark"].theme-blanco-azul #sidebar-menu ul li.mm-active .active i { color: #0072CE !important; } body.theme-blanco-azul .btn-primary { background-color: #0072CE !important; border-color: #005aa0 !important; } body.theme-blanco-azul .btn-primary:hover { background-color: #005aa0 !important; border-color: #004080 !important; } body.theme-blanco-azul .bg-primary { background-color: #0072CE !important; } body.theme-blanco-azul .text-primary { color: #0072CE !important; } body.theme-blanco-azul .border-primary { border-color: #0072CE !important; } body.theme-blanco-azul .badge.bg-primary { background-color: #0072CE !important; } body.theme-blanco-azul .page-item.active .page-link { background-color: #0072CE !important; border-color: #0072CE !important; } /* ─────────── BLANCO + ROJO — Sidebar blanco, acento rojo ─────────── */ body.theme-blanco-rojo .vertical-menu, body.theme-blanco-rojo .navbar-brand-box { background: #ffffff !important; box-shadow: 2px 0 8px rgba(0,0,0,0.07) !important; } body[data-sidebar="dark"].theme-blanco-rojo #sidebar-menu ul li a { color: #495057 !important; } body[data-sidebar="dark"].theme-blanco-rojo #sidebar-menu ul li a i { color: #74788d !important; } body[data-sidebar="dark"].theme-blanco-rojo #sidebar-menu ul li a:hover, body[data-sidebar="dark"].theme-blanco-rojo #sidebar-menu ul li a:focus { color: #d12d2d !important; background-color: rgba(209, 45, 45, 0.09) !important; } body[data-sidebar="dark"].theme-blanco-rojo #sidebar-menu ul li a:hover i { color: #d12d2d !important; } body[data-sidebar="dark"].theme-blanco-rojo #sidebar-menu .menu-title { color: #adb5bd !important; } body[data-sidebar="dark"].theme-blanco-rojo #sidebar-menu ul.metismenu > li.mm-active > a { background-color: rgba(209, 45, 45, 0.10) !important; color: #d12d2d !important; } body[data-sidebar="dark"].theme-blanco-rojo #sidebar-menu ul.metismenu > li.mm-active > a > i { color: #d12d2d !important; } body[data-sidebar="dark"].theme-blanco-rojo #sidebar-menu ul li.mm-active .active { color: #d12d2d !important; background-color: rgba(209, 45, 45, 0.10) !important; font-weight: 600; } body[data-sidebar="dark"].theme-blanco-rojo #sidebar-menu ul li.mm-active .active i { color: #d12d2d !important; } body.theme-blanco-rojo .btn-primary { background-color: #d12d2d !important; border-color: #b02424 !important; } body.theme-blanco-rojo .btn-primary:hover { background-color: #b02424 !important; border-color: #8f1d1d !important; } body.theme-blanco-rojo .bg-primary { background-color: #d12d2d !important; } body.theme-blanco-rojo .text-primary { color: #d12d2d !important; } body.theme-blanco-rojo .border-primary { border-color: #d12d2d !important; } body.theme-blanco-rojo .badge.bg-primary { background-color: #d12d2d !important; } body.theme-blanco-rojo .page-item.active .page-link { background-color: #d12d2d !important; border-color: #d12d2d !important; } /* ─────────── BLANCO + MORADO — Sidebar blanco, acento morado ─────────── */ body.theme-blanco-morado .vertical-menu, body.theme-blanco-morado .navbar-brand-box { background: #ffffff !important; box-shadow: 2px 0 8px rgba(0,0,0,0.07) !important; } body[data-sidebar="dark"].theme-blanco-morado #sidebar-menu ul li a { color: #495057 !important; } body[data-sidebar="dark"].theme-blanco-morado #sidebar-menu ul li a i { color: #74788d !important; } body[data-sidebar="dark"].theme-blanco-morado #sidebar-menu ul li a:hover, body[data-sidebar="dark"].theme-blanco-morado #sidebar-menu ul li a:focus { color: #7b2d8b !important; background-color: rgba(123, 45, 139, 0.09) !important; } body[data-sidebar="dark"].theme-blanco-morado #sidebar-menu ul li a:hover i { color: #7b2d8b !important; } body[data-sidebar="dark"].theme-blanco-morado #sidebar-menu .menu-title { color: #adb5bd !important; } body[data-sidebar="dark"].theme-blanco-morado #sidebar-menu ul.metismenu > li.mm-active > a { background-color: rgba(123, 45, 139, 0.10) !important; color: #7b2d8b !important; } body[data-sidebar="dark"].theme-blanco-morado #sidebar-menu ul.metismenu > li.mm-active > a > i { color: #7b2d8b !important; } body[data-sidebar="dark"].theme-blanco-morado #sidebar-menu ul li.mm-active .active { color: #7b2d8b !important; background-color: rgba(123, 45, 139, 0.10) !important; font-weight: 600; } body[data-sidebar="dark"].theme-blanco-morado #sidebar-menu ul li.mm-active .active i { color: #7b2d8b !important; } body.theme-blanco-morado .btn-primary { background-color: #7b2d8b !important; border-color: #62246f !important; } body.theme-blanco-morado .btn-primary:hover { background-color: #62246f !important; border-color: #4a1b54 !important; } body.theme-blanco-morado .bg-primary { background-color: #7b2d8b !important; } body.theme-blanco-morado .text-primary { color: #7b2d8b !important; } body.theme-blanco-morado .border-primary { border-color: #7b2d8b !important; } body.theme-blanco-morado .badge.bg-primary { background-color: #7b2d8b !important; } body.theme-blanco-morado .page-item.active .page-link { background-color: #7b2d8b !important; border-color: #7b2d8b !important; } /* ─────────── BLANCO + VERDE — Sidebar blanco, acento verde ─────────── */ body.theme-blanco-verde .vertical-menu, body.theme-blanco-verde .navbar-brand-box { background: #ffffff !important; box-shadow: 2px 0 8px rgba(0,0,0,0.07) !important; } body[data-sidebar="dark"].theme-blanco-verde #sidebar-menu ul li a { color: #495057 !important; } body[data-sidebar="dark"].theme-blanco-verde #sidebar-menu ul li a i { color: #74788d !important; } body[data-sidebar="dark"].theme-blanco-verde #sidebar-menu ul li a:hover, body[data-sidebar="dark"].theme-blanco-verde #sidebar-menu ul li a:focus { color: #1a7a4a !important; background-color: rgba(26, 122, 74, 0.09) !important; } body[data-sidebar="dark"].theme-blanco-verde #sidebar-menu ul li a:hover i { color: #1a7a4a !important; } body[data-sidebar="dark"].theme-blanco-verde #sidebar-menu .menu-title { color: #adb5bd !important; } body[data-sidebar="dark"].theme-blanco-verde #sidebar-menu ul.metismenu > li.mm-active > a { background-color: rgba(26, 122, 74, 0.10) !important; color: #1a7a4a !important; } body[data-sidebar="dark"].theme-blanco-verde #sidebar-menu ul.metismenu > li.mm-active > a > i { color: #1a7a4a !important; } body[data-sidebar="dark"].theme-blanco-verde #sidebar-menu ul li.mm-active .active { color: #1a7a4a !important; background-color: rgba(26, 122, 74, 0.10) !important; font-weight: 600; } body[data-sidebar="dark"].theme-blanco-verde #sidebar-menu ul li.mm-active .active i { color: #1a7a4a !important; } body.theme-blanco-verde .btn-primary { background-color: #1a7a4a !important; border-color: #145e38 !important; } body.theme-blanco-verde .btn-primary:hover { background-color: #145e38 !important; border-color: #0e4228 !important; } body.theme-blanco-verde .bg-primary { background-color: #1a7a4a !important; } body.theme-blanco-verde .text-primary { color: #1a7a4a !important; } body.theme-blanco-verde .border-primary { border-color: #1a7a4a !important; } body.theme-blanco-verde .badge.bg-primary { background-color: #1a7a4a !important; } body.theme-blanco-verde .page-item.active .page-link { background-color: #1a7a4a !important; border-color: #1a7a4a !important; } /* ===================================================================== LOGIN — ESTILOS POR TEMA ===================================================================== */ /* ─── LOGIN NARANJA: tinte naranja suave en encabezado ─── */ body.theme-naranja .login-header { background-color: #fff4ec !important; } /* ─── LOGIN variantes BLANCO: tinte suave del acento en encabezado ─── */ body.theme-blanco-azul .login-header { background-color: #eef5fc !important; } body.theme-blanco-rojo .login-header { background-color: #fcecec !important; } body.theme-blanco-morado .login-header { background-color: #f7eef9 !important; } body.theme-blanco-verde .login-header { background-color: #ecf6f0 !important; } /* ─── LOGIN OSCURO (theme-rojo): tarjeta oscura — solo página de login ─── */ body.theme-rojo .card-login { background-color: #1e2330 !important; color: #e2e8f0; box-shadow: 0 10px 30px rgba(0,0,0,0.6) !important; } body.theme-rojo .login-header { background-color: #161b27 !important; color: #cbd5e0 !important; } body.theme-rojo .login-header h4, body.theme-rojo .login-header small { color: #cbd5e0 !important; } body.theme-rojo .card-login .card-body { background-color: #1e2330 !important; } body.theme-rojo .card-login .card-body .form-label { color: #cbd5e0 !important; } body.theme-rojo .card-login .card-body .form-control { background-color: #2d3748 !important; border-color: #4a5568 !important; color: #e2e8f0 !important; } body.theme-rojo .card-login .card-body .form-control::placeholder { color: #718096 !important; } body.theme-rojo .card-login .card-body .form-control:focus { background-color: #374151 !important; border-color: #718096 !important; color: #ffffff !important; box-shadow: 0 0 0 0.25rem rgba(74,85,104,0.35) !important; } body.theme-rojo .card-login .card-body .input-group-text { background-color: #2d3748 !important; border-color: #4a5568 !important; color: #a0aec0 !important; } body.theme-rojo .card-login .card-body .btn-outline-secondary { background-color: #2d3748 !important; border-color: #4a5568 !important; color: #a0aec0 !important; } body.theme-rojo .card-login .card-body .btn-outline-secondary:hover { background-color: #374151 !important; color: #e2e8f0 !important; } body.theme-rojo .login-footer { color: rgba(255,255,255,0.55) !important; } /* ===================================================================== MOBILE — Topbar y Logo (≤ 991px) ===================================================================== */ @media (max-width: 991.98px) { /* Ocultar título largo; en móvil no hay espacio */ .sistema-titulo-wrapper { display: none !important; } /* Brand-box: compacto pero con logo visible */ .navbar-brand-box { width: 90px !important; min-width: 90px !important; padding: 0 0.75rem !important; } /* Mostrar logo pequeño, ocultar el grande */ .logo .logo-lg { display: none !important; } .logo .logo-sm { display: inline-block !important; } /* Logo-sm: tamaño cómodo en mobile */ .logo .logo-sm img { height: 42px !important; width: auto !important; max-width: 80px !important; object-fit: contain !important; } /* logo-light en temas oscuros */ body[data-sidebar="dark"] .navbar-brand-box .logo-light .logo-lg { display: none !important; } body[data-sidebar="dark"] .navbar-brand-box .logo-light .logo-sm { display: inline-block !important; } body[data-sidebar="dark"] .navbar-brand-box .logo-light .logo-sm img { height: 42px !important; width: auto !important; max-width: 80px !important; object-fit: contain !important; } }