/* ═══════════════════════════════════════════════════════════════
FINDEX ERP — Sistema de temas: Light / Dark
Reemplaza el sistema skin-* de AdminLTE.
Variables definidas en .theme-dark / .theme-light sobre .
═══════════════════════════════════════════════════════════════ */
/* ─── Variables por defecto (dark) — breadcrumb sin clase de tema ─ */
:root {
--nb-text-primary: rgba(255,255,255,0.97);
--nb-text-parent: rgba(255,255,255,0.62);
--nb-text-grand: rgba(255,255,255,0.42);
--nb-sep: rgba(255,255,255,0.25);
--nb-border: rgba(255,255,255,0.12);
--nb-icon: rgba(255,255,255,0.42);
}
/* ─── TEMA OSCURO ─────────────────────────────────────────────── */
.theme-dark {
/* Sidebar */
--sidebar-bg: #1e2130;
--sidebar-logo-bg: #181a28;
--sidebar-text: rgba(255,255,255,0.78);
--sidebar-text-muted: rgba(255,255,255,0.44);
--sidebar-active-bg: rgba(255,255,255,0.09);
--sidebar-active-text: rgba(255,255,255,0.97);
--sidebar-active-border: #5b8def;
--sidebar-hover-bg: rgba(255,255,255,0.05);
--sidebar-divider: rgba(255,255,255,0.07);
--sidebar-icon: rgba(255,255,255,0.50);
/* Navbar */
--navbar-bg: #1e2130;
--navbar-border: rgba(255,255,255,0.06);
--logo-text: rgba(255,255,255,0.92);
/* Breadcrumb */
--nb-text-primary: rgba(255,255,255,0.97);
--nb-text-parent: rgba(255,255,255,0.62);
--nb-text-grand: rgba(255,255,255,0.42);
--nb-sep: rgba(255,255,255,0.25);
--nb-border: rgba(255,255,255,0.12);
--nb-icon: rgba(255,255,255,0.42);
/* Toggle */
--toggle-bg: rgba(255,255,255,0.07);
--toggle-active-bg: rgba(255,255,255,0.14);
--toggle-text: rgba(255,255,255,0.44);
--toggle-active-text: rgba(255,255,255,0.93);
--toggle-border: rgba(255,255,255,0.07);
}
/* ─── TEMA CLARO ──────────────────────────────────────────────── */
.theme-light {
/* Sidebar */
--sidebar-bg: #ffffff;
--sidebar-logo-bg: #f5f7fa;
--sidebar-text: #3d4a5c;
--sidebar-text-muted: #8a96a3;
--sidebar-active-bg: #eef2ff;
--sidebar-active-text: #2563eb;
--sidebar-active-border: #2563eb;
--sidebar-hover-bg: #f5f7ff;
--sidebar-divider: rgba(0,0,0,0.06);
--sidebar-icon: #8a96a3;
/* Navbar */
--navbar-bg: #ffffff;
--navbar-border: rgba(0,0,0,0.09);
--logo-text: #1e2130;
/* Breadcrumb */
--nb-text-primary: rgba(30,33,48,0.92);
--nb-text-parent: rgba(30,33,48,0.58);
--nb-text-grand: rgba(30,33,48,0.38);
--nb-sep: rgba(30,33,48,0.22);
--nb-border: rgba(0,0,0,0.10);
--nb-icon: rgba(30,33,48,0.38);
/* Toggle */
--toggle-bg: rgba(0,0,0,0.05);
--toggle-active-bg: rgba(0,0,0,0.10);
--toggle-text: rgba(0,0,0,0.44);
--toggle-active-text: rgba(0,0,0,0.85);
--toggle-border: rgba(0,0,0,0.08);
}
/* ═══════════════════════════════════════════════════════════════
SIDEBAR
═══════════════════════════════════════════════════════════════ */
.theme-dark .main-sidebar,
.theme-dark .left-side,
.theme-light .main-sidebar,
.theme-light .left-side {
background-color: var(--sidebar-bg);
box-shadow: 2px 0 16px rgba(0,0,0,0.12);
}
/* ── Logo / Título ──────────────────────────────────────────── */
.theme-dark .main-header .logo,
.theme-light .main-header .logo {
background-color: var(--sidebar-logo-bg) !important;
border-right: none;
border-bottom: 1px solid var(--sidebar-divider);
color: var(--logo-text);
font-weight: 600;
font-size: 14px;
letter-spacing: 0.02em;
transition: background 0.2s;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.theme-dark .main-header .logo:hover,
.theme-light .main-header .logo:hover {
background-color: var(--sidebar-logo-bg) !important;
}
/* Logo imagen — fondo blanco neutro en ambos temas para garantizar
visibilidad sin importar los colores del logo subido */
.sidebar-logo-img {
background: #ffffff;
border-radius: 6px;
padding: 4px 10px;
max-height: 36px;
max-width: 160px;
width: auto;
object-fit: contain;
display: block;
box-shadow: 0 1px 4px rgba(0,0,0,0.14);
}
/* En colapsado el área del logo queda vacía con el color de fondo — intencional */
.sidebar-mini.sidebar-collapse .main-header .logo {
overflow: hidden;
}
/* ── Ítems de menú ──────────────────────────────────────────── */
.theme-dark .sidebar-menu > li > a,
.theme-light .sidebar-menu > li > a {
color: var(--sidebar-text) !important;
border-left: 3px solid transparent;
font-size: 13px;
font-weight: 500;
padding: 8px 12px 8px 10px;
margin: 2px 8px;
border-radius: 8px;
transition: background 0.15s, color 0.15s;
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
border-left: none;
}
/* ── Sidebar colapsado: ítems ───────────────────────────────── */
.sidebar-mini.sidebar-collapse .sidebar-menu > li > a {
padding: 12px 0 !important;
margin: 0 4px !important;
border-radius: 8px !important;
text-align: center !important;
border-left: none !important;
overflow: visible !important;
text-overflow: clip !important;
}
.sidebar-mini.sidebar-collapse .sidebar-menu > li > a > .fa,
.sidebar-mini.sidebar-collapse .sidebar-menu > li > a > .ion {
margin-right: 0 !important;
width: auto !important;
font-size: 16px !important;
}
/* Quitar border-left activo en colapsado para no desplazar ícono */
.sidebar-mini.sidebar-collapse .sidebar-menu > li.active > a,
.sidebar-mini.sidebar-collapse .sidebar-menu > li > a:hover {
border-left: none !important;
}
/* ── Hover del ítem nivel 1 en colapsado: recuadro pill igual que expandido ── */
.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a {
background-color: var(--sidebar-hover-bg) !important;
}
/* Flyout colapsado */
@media (min-width: 768px) {
/* Span header (label "RRHH") — cancelar margin-left:-3px de AdminLTE */
.theme-dark.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span:not(.pull-right-container),
.theme-light.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span:not(.pull-right-container) {
margin-left: -3.5px !important;
left: 50px !important;
top: 0 !important;
width: 220px !important;
height: 44px !important;
line-height: 44px !important;
padding: 0 14px !important;
background-color: var(--sidebar-bg) !important;
color: var(--sidebar-text) !important;
border-radius: 0 10px 0 0 !important;
font-size: 13px !important;
font-weight: 600 !important;
border-bottom: 1px solid var(--sidebar-divider) !important;
box-shadow: none !important;
z-index: 900 !important;
}
/* Panel treeview-menu */
.theme-dark.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu,
.theme-light.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
left: 50px !important;
margin-left: 0 !important;
margin-top: -5px;
top: 44px !important;
width: 220px !important;
background-color: var(--sidebar-bg) !important;
padding: 6px 8px !important;
box-sizing: border-box !important;
border-left: none !important;
border-radius: 0 0 10px 0 !important;
z-index: 899 !important;
}
}
/* Sub-panel nivel 2→3 dentro del flyout: línea vertical gris */
.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu .treeview-menu {
background-color: transparent !important;
padding: 3px 0 !important;
padding-left: 0 !important;
box-sizing: border-box !important;
width: auto !important;
box-shadow: none !important;
border-left: 3px solid rgba(255,255,255,0.13) !important;
margin-left: 14px;
border-radius: 0 !important;
}
/* en flyout nivel 1→2 */
.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu > li {
display: block !important;
width: 100% !important;
margin: 1px 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* en flyout nivel 2→3 */
.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu .treeview-menu > li {
display: block !important;
width: 100% !important;
margin: 1px 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* Active en flyout */
.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu li.active > a {
background-color: var(--sidebar-active-bg) !important;
color: var(--sidebar-active-text) !important;
font-weight: 600;
}
/* nivel 2 en flyout */
.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu > li > a {
display: block !important;
width: 100% !important;
box-sizing: border-box !important;
background-color: transparent !important;
margin: 1px 0 !important;
padding: 7px 12px 7px 12px !important;
border-radius: 7px !important;
color: var(--sidebar-text-muted) !important;
font-size: 12.5px;
transition: background 0.15s, color 0.15s;
}
.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu > li > a:hover {
background-color: var(--sidebar-hover-bg) !important;
color: var(--sidebar-active-text) !important;
}
/* nivel 3 en flyout */
.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu .treeview-menu > li > a {
display: block !important;
width: 100% !important;
box-sizing: border-box !important;
background-color: transparent !important;
margin: 1px 4px 1px 10px !important;
padding: 6px 12px !important;
border-radius: 7px !important;
color: var(--sidebar-text-muted) !important;
font-size: 12px;
transition: background 0.15s, color 0.15s;
width: calc(100% - 14px) !important;
}
.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu .treeview-menu > li > a:hover {
background-color: var(--sidebar-hover-bg) !important;
color: var(--sidebar-active-text) !important;
}
/* Íconos fa dentro del flyout: mismos estilos que sidebar expandido */
.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu li > a > .fa {
display: inline-block !important;
width: 16px !important;
font-size: 11px !important;
margin-right: 6px !important;
text-align: center !important;
color: var(--sidebar-text-muted) !important;
}
.theme-dark .sidebar-menu > li > a:hover,
.theme-light .sidebar-menu > li > a:hover {
background-color: var(--sidebar-hover-bg) !important;
color: var(--sidebar-active-text) !important;
}
.theme-dark .sidebar-menu > li.active > a,
.theme-light .sidebar-menu > li.active > a {
background-color: var(--sidebar-active-bg) !important;
color: var(--sidebar-active-text) !important;
font-weight: 600;
}
/* Ítem abierto (treeview activo) */
.theme-dark .sidebar-menu > li.active.treeview > a,
.theme-light .sidebar-menu > li.active.treeview > a {
background-color: var(--sidebar-hover-bg) !important;
color: var(--sidebar-active-text) !important;
}
/* ── Íconos ─────────────────────────────────────────────────── */
.theme-dark .sidebar-menu > li > a > .fa,
.theme-dark .sidebar-menu > li > a > .ion,
.theme-light .sidebar-menu > li > a > .fa,
.theme-light .sidebar-menu > li > a > .ion {
color: var(--sidebar-icon);
width: 20px;
font-size: 14px;
margin-right: 8px;
text-align: center;
flex-shrink: 0;
}
.theme-dark .sidebar-menu > li.active > a > .fa,
.theme-light .sidebar-menu > li.active > a > .fa {
color: var(--sidebar-active-border);
}
/* ── Submenú (treeview-menu) — nivel 1→2 ───────────────────── */
.theme-dark .treeview-menu,
.theme-light .treeview-menu {
background-color: transparent;
padding: 2px 0 4px 0;
}
/* Forzar padding-left: 0 en todos los niveles */
.theme-dark .sidebar-menu .treeview-menu,
.theme-light .sidebar-menu .treeview-menu {
padding-left: 0 !important;
}
/* Contenedor de nivel 1→2: línea vertical izquierda */
.theme-dark .sidebar-menu > li.treeview > .treeview-menu,
.theme-light .sidebar-menu > li.treeview > .treeview-menu {
position: relative;
margin-left: 26px;
margin-top: 10px;
padding: 4px 0 !important;
padding-left: 0 !important;
border-left: 3px solid rgba(255,255,255,0.13);
}
.theme-light .sidebar-menu > li.treeview > .treeview-menu {
border-left-color: rgba(0,0,0,0.12);
}
/* Ítems de nivel 2 (hijos directos del nivel 1) */
.theme-dark .sidebar-menu > li.treeview > .treeview-menu > li > a,
.theme-light .sidebar-menu > li.treeview > .treeview-menu > li > a {
display: block !important;
box-sizing: border-box;
color: var(--sidebar-text-muted) !important;
padding: 7px 12px 7px 12px;
margin: 1px 8px 1px 8px;
border-radius: 7px;
font-size: 12.5px;
font-weight: 400;
transition: color 0.15s, background 0.15s;
}
.theme-dark .sidebar-menu > li.treeview > .treeview-menu > li > a:hover,
.theme-light .sidebar-menu > li.treeview > .treeview-menu > li > a:hover {
background-color: var(--sidebar-hover-bg) !important;
color: var(--sidebar-active-text) !important;
}
.theme-dark .sidebar-menu > li.treeview > .treeview-menu > li.active > a,
.theme-light .sidebar-menu > li.treeview > .treeview-menu > li.active > a {
color: var(--sidebar-active-text) !important;
font-weight: 600;
background-color: var(--sidebar-active-bg) !important;
}
/* Nivel 2 con hijos activo/abierto */
.theme-dark .sidebar-menu > li.treeview > .treeview-menu > li.active.treeview > a,
.theme-light .sidebar-menu > li.treeview > .treeview-menu > li.active.treeview > a {
color: var(--sidebar-active-text) !important;
background-color: var(--sidebar-hover-bg) !important;
font-weight: 600;
}
/* Contenedor de nivel 2→3: línea vertical anidada */
.theme-dark .sidebar-menu > li.treeview > .treeview-menu > li.treeview > .treeview-menu,
.theme-light .sidebar-menu > li.treeview > .treeview-menu > li.treeview > .treeview-menu {
position: relative;
margin-left: 14px;
margin-top: 10px;
padding: 3px 0 !important;
padding-left: 0 !important;
border-left: 3px solid rgba(255,255,255,0.10);
}
.theme-light .sidebar-menu > li.treeview > .treeview-menu > li.treeview > .treeview-menu {
border-left-color: rgba(0,0,0,0.09);
}
/* Ítems de nivel 3 */
.theme-dark .sidebar-menu > li.treeview > .treeview-menu > li.treeview > .treeview-menu > li > a,
.theme-light .sidebar-menu > li.treeview > .treeview-menu > li.treeview > .treeview-menu > li > a {
display: block !important;
box-sizing: border-box;
color: var(--sidebar-text-muted) !important;
padding: 6px 12px 6px 12px;
margin: 1px 8px 1px 8px;
border-radius: 7px;
font-size: 12px;
font-weight: 400;
transition: color 0.15s, background 0.15s;
}
.theme-dark .sidebar-menu > li.treeview > .treeview-menu > li.treeview > .treeview-menu > li > a:hover,
.theme-light .sidebar-menu > li.treeview > .treeview-menu > li.treeview > .treeview-menu > li > a:hover {
background-color: var(--sidebar-hover-bg) !important;
color: var(--sidebar-active-text) !important;
}
.theme-dark .sidebar-menu > li.treeview > .treeview-menu > li.treeview > .treeview-menu > li.active > a,
.theme-light .sidebar-menu > li.treeview > .treeview-menu > li.treeview > .treeview-menu > li.active > a {
color: var(--sidebar-active-text) !important;
font-weight: 600;
background-color: var(--sidebar-active-bg) !important;
}
/* Línea accent cuando el grupo nivel 1 está activo */
.theme-dark .sidebar-menu > li.treeview.active > .treeview-menu {
border-left-color: rgba(91,141,239,0.50);
}
.theme-light .sidebar-menu > li.treeview.active > .treeview-menu {
border-left-color: rgba(37,99,235,0.35);
}
/* Línea accent cuando el grupo nivel 2 está activo */
.theme-dark .sidebar-menu > li.treeview > .treeview-menu > li.treeview.active > .treeview-menu {
border-left-color: rgba(91,141,239,0.45);
}
.theme-light .sidebar-menu > li.treeview > .treeview-menu > li.treeview.active > .treeview-menu {
border-left-color: rgba(37,99,235,0.30);
}
/* Íconos dentro de submenús: visibles pero más pequeños */
.theme-dark .treeview-menu > li > a > .fa,
.theme-light .treeview-menu > li > a > .fa {
display: inline-block;
width: 16px;
font-size: 11px;
margin-right: 6px;
text-align: center;
color: var(--sidebar-text-muted);
flex-shrink: 0;
}
/* ── Flecha del treeview ────────────────────────────────────── */
.theme-dark .sidebar-menu .treeview > a .fa-angle-left,
.theme-light .sidebar-menu .treeview > a .fa-angle-left {
color: var(--sidebar-text-muted);
}
/* ── Borde derecho del sidebar ──────────────────────────────── */
.theme-light .main-sidebar {
border-right: 1px solid rgba(0,0,0,0.06);
}
/* ── Sidebar colapsado: sombra y color sub-panel por tema ───── */
@media (min-width: 768px) {
.theme-dark.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
box-shadow: 6px 6px 20px rgba(0,0,0,0.40) !important;
}
.theme-light.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
box-shadow: 6px 6px 20px rgba(0,0,0,0.14) !important;
}
.theme-light.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu .treeview-menu {
border-left-color: rgba(0,0,0,0.10) !important;
}
}
/* ── Scrollbar personalizado ────────────────────────────────── */
.theme-dark .sidebar::-webkit-scrollbar,
.theme-light .sidebar::-webkit-scrollbar { width: 3px; }
.theme-dark .sidebar::-webkit-scrollbar-track,
.theme-light .sidebar::-webkit-scrollbar-track { background: transparent; }
.theme-dark .sidebar::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.12);
border-radius: 2px;
}
.theme-light .sidebar::-webkit-scrollbar-thumb {
background: rgba(0,0,0,0.10);
border-radius: 2px;
}
/* ═══════════════════════════════════════════════════════════════
NAVBAR (barra superior)
═══════════════════════════════════════════════════════════════ */
.theme-dark .main-header .navbar,
.theme-light .main-header .navbar {
background-color: var(--navbar-bg) !important;
border-bottom: 1px solid var(--navbar-border);
box-shadow: none;
}
.theme-dark .main-header,
.theme-light .main-header {
box-shadow: 0 1px 6px rgba(0,0,0,0.10);
}
/* Botón sidebar-toggle — hover cubre toda la altura del navbar */
.theme-light .main-header .navbar .sidebar-toggle,
.theme-dark .main-header .navbar .sidebar-toggle {
display: flex !important;
align-items: center;
justify-content: center;
height: 50px;
padding: 0 18px;
transition: background 0.15s, color 0.15s;
}
.theme-light .main-header .navbar .sidebar-toggle {
color: #3d4a5c;
}
.theme-light .main-header .navbar .sidebar-toggle:hover {
background-color: rgba(37,99,235,0.07);
color: #2563eb;
}
.theme-dark .main-header .navbar .sidebar-toggle {
color: rgba(255,255,255,0.75);
}
.theme-dark .main-header .navbar .sidebar-toggle:hover {
background-color: rgba(255,255,255,0.06);
color: rgba(255,255,255,0.97);
}
/* Textos / links en navbar para tema claro */
.theme-light .main-header .navbar .nav > li > a,
.theme-light .main-header .navbar a {
color: #3d4a5c;
}
.theme-light .main-header .navbar .btn-success {
background-color: #0ea5e9;
border-color: #0284c7;
color: #ffffff !important;
}
.theme-light .main-header .navbar .btn-success:hover {
background-color: #0284c7;
border-color: #0369a1;
color: #ffffff !important;
}
/* ═══════════════════════════════════════════════════════════════
USER CARD DROPDOWN
═══════════════════════════════════════════════════════════════ */
/* Reset overrides de AdminLTE para el user-menu */
.navbar-nav > .user-menu > .dropdown-menu {
width: auto !important;
padding: 0 !important;
border-top-right-radius: 12px !important;
border-top-left-radius: 12px !important;
border-top-width: 1px !important;
}
.navbar-nav > .user-menu > .dropdown-menu > li.user-header {
height: auto !important;
padding: 0 !important;
text-align: left !important;
background: transparent !important;
}
/* ── Trigger (nombre + avatar en la navbar) ─────────────────── */
.user-nav-trigger {
display: flex !important;
align-items: center;
gap: 8px;
padding: 0 10px !important;
height: 50px;
text-decoration: none !important;
transition: background 0.15s, color 0.15s;
}
/* El fondo redondeado se aplica a un wrapper interno para no alterar
el área de click de Bootstrap (que necesita height: 50px full) */
.user-nav-trigger::before {
content: '';
position: absolute;
inset: 7px 4px;
border-radius: 8px;
transition: background 0.15s;
pointer-events: none;
}
.user-nav-trigger { position: relative; }
.theme-dark .user-nav-trigger { color: rgba(255,255,255,0.88) !important; }
.theme-light .user-nav-trigger { color: #3d4a5c !important; }
.theme-dark .user-nav-trigger:hover,
.theme-dark .user-nav-trigger:focus,
.theme-dark .user-nav-trigger:active,
.theme-dark .user-menu.open > .user-nav-trigger {
background: transparent !important;
color: rgba(255,255,255,0.97) !important;
}
.theme-light .user-nav-trigger:hover,
.theme-light .user-nav-trigger:focus,
.theme-light .user-nav-trigger:active,
.theme-light .user-menu.open > .user-nav-trigger {
background: transparent !important;
color: #1e2130 !important;
}
/* Avatar pequeño en navbar */
.user-nav-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.02em;
flex-shrink: 0;
background: linear-gradient(135deg, #4f8ef7 0%, #6c63ff 100%);
color: #ffffff;
box-shadow: 0 1px 4px rgba(79,142,247,0.35);
}
.user-nav-name {
font-size: 13px;
font-weight: 500;
max-width: 140px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.user-nav-chevron {
font-size: 10px;
opacity: 0.55;
transition: transform 0.2s;
margin-left: 2px;
}
.user-nav-trigger[aria-expanded="true"] .user-nav-chevron {
transform: rotate(180deg);
}
/* ── Card dropdown ──────────────────────────────────────────── */
.user-card-dropdown {
min-width: 240px !important;
padding: 0 !important;
border-radius: 12px !important;
overflow: hidden;
border: none !important;
margin-top: 4px !important;
box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.10) !important;
}
.theme-dark .user-card-dropdown { background: #252839 !important; border: 1px solid rgba(255,255,255,0.08) !important; }
.theme-light .user-card-dropdown { background: #ffffff !important; border: 1px solid rgba(0,0,0,0.07) !important; }
/* Header con avatar grande + nombre + email */
.user-card-header {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 16px 14px;
}
.user-card-avatar-lg {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 50%;
font-size: 15px;
font-weight: 700;
flex-shrink: 0;
background: linear-gradient(135deg, #4f8ef7 0%, #6c63ff 100%);
color: #ffffff;
box-shadow: 0 2px 8px rgba(79,142,247,0.40);
}
.user-card-info {
min-width: 0;
}
.user-card-name {
font-size: 13.5px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.user-card-email {
font-size: 11.5px;
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.theme-dark .user-card-name { color: rgba(255,255,255,0.92); }
.theme-dark .user-card-email { color: rgba(255,255,255,0.44); }
.theme-light .user-card-name { color: #1e2130; }
.theme-light .user-card-email { color: #8a96a3; }
/* Divisor */
.user-card-divider {
height: 1px;
margin: 0;
}
.theme-dark .user-card-divider { background: rgba(255,255,255,0.07); }
.theme-light .user-card-divider { background: rgba(0,0,0,0.06); }
/* Ítems del menú */
.user-card-item {
display: flex !important;
align-items: center;
gap: 10px;
padding: 10px 16px !important;
font-size: 13px !important;
font-weight: 500;
transition: background 0.15s, color 0.15s;
text-decoration: none !important;
}
.theme-dark .user-card-item { color: rgba(255,255,255,0.78) !important; }
.theme-light .user-card-item { color: #3d4a5c !important; }
.theme-dark .user-card-item:hover { background: rgba(255,255,255,0.07) !important; color: rgba(255,255,255,0.97) !important; }
.theme-light .user-card-item:hover { background: rgba(37,99,235,0.06) !important; color: #2563eb !important; }
.user-card-item-danger { }
.theme-dark .user-card-item-danger { color: rgba(248,113,113,0.85) !important; }
.theme-light .user-card-item-danger { color: #dc2626 !important; }
.theme-dark .user-card-item-danger:hover { background: rgba(248,113,113,0.10) !important; color: #f87171 !important; }
.theme-light .user-card-item-danger:hover { background: rgba(220,38,38,0.06) !important; color: #b91c1c !important; }
.user-card-item-icon {
width: 18px;
text-align: center;
flex-shrink: 0;
font-size: 14px;
opacity: 0.75;
}
/* Textos / links en navbar para tema oscuro */
.theme-dark .main-header .navbar .nav > li > a,
.theme-dark .main-header .navbar a,
.theme-dark .navbar-custom-menu a,
.theme-dark .navbar-custom-menu strong {
color: rgba(255,255,255,0.88) !important;
}
/* Botón "Cambiar empresa" — texto blanco en dark */
.theme-dark .btn_business_modal {
color: rgba(255,255,255,0.90) !important;
}
.theme-dark .btn_business_modal:hover {
color: #ffffff !important;
}
/* Nombre de usuario en dark */
.theme-dark .navbar-custom-menu .user-menu > a {
color: rgba(255,255,255,0.88) !important;
}
/* Botón POS — accent azul en dark (mejor contraste que verde) */
.theme-dark .navbar-custom-menu .btn-success {
background-color: #4f8ef7 !important;
border-color: #3b7df5 !important;
color: #ffffff !important;
}
.theme-dark .navbar-custom-menu .btn-success:hover {
background-color: #3b7df5 !important;
border-color: #2563eb !important;
}
/* Ocultar solo la flecha del título del módulo (nivel superior del flyout).
Las flechas de ítems anidados dentro del treeview-menu se mantienen
para indicar que tienen hijos. */
.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span.pull-right-container {
display: none !important;
visibility: hidden !important;
}
/* Iconos de soporte (campana, life-ring) en dark */
.theme-dark .support-notif-icon,
.theme-dark .support-navbar-icon {
color: rgba(255,255,255,0.80) !important;
}
.theme-dark .support-navbar-icon:hover {
color: #ffffff !important;
}
/* ═══════════════════════════════════════════════════════════════
BREADCRUMB — colores vía variables (layout en app.css)
═══════════════════════════════════════════════════════════════ */
.navbar-breadcrumb {
border-left-color: var(--nb-border);
}
.navbar-breadcrumb .nb-icon { color: var(--nb-icon); }
.navbar-breadcrumb .nb-grand { color: var(--nb-text-grand); }
.navbar-breadcrumb .nb-parent { color: var(--nb-text-parent); }
.navbar-breadcrumb .nb-sep { color: var(--nb-sep); }
.navbar-breadcrumb .nb-current { color: var(--nb-text-primary); }
/* ═══════════════════════════════════════════════════════════════
BOTÓN TOGGLE DE TEMA (pie del sidebar)
Usa position:absolute respecto a .main-sidebar (ya es fixed/absolute)
para no añadir ningún contexto de scroll al sidebar.
═══════════════════════════════════════════════════════════════ */
/* Espacio en el fondo del menú para que el último ítem no quede
tapado por el toggle */
.theme-dark .main-sidebar .sidebar,
.theme-light .main-sidebar .sidebar {
padding-bottom: 56px;
}
.sidebar-theme-toggle {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 10px 14px 12px;
border-top: 1px solid var(--sidebar-divider);
background-color: var(--sidebar-bg);
z-index: 20;
}
/* ── Switch row (sidebar expandido) ────────────────────────── */
.theme-switch-row {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.theme-sw-icon {
font-size: 13px;
color: var(--toggle-text);
flex-shrink: 0;
}
/* Switch checkbox */
.theme-switch {
position: relative;
display: inline-block;
width: 42px;
height: 24px;
flex-shrink: 0;
}
.theme-switch input {
opacity: 0;
width: 0;
height: 0;
position: absolute;
}
.theme-switch-slider {
position: absolute;
inset: 0;
border-radius: 24px;
cursor: pointer;
transition: background 0.22s;
}
.theme-dark .theme-switch-slider { background: rgba(255,255,255,0.15); }
.theme-light .theme-switch-slider { background: rgba(0,0,0,0.14); }
.theme-switch-slider::before {
content: '';
position: absolute;
width: 18px;
height: 18px;
border-radius: 50%;
left: 3px;
top: 3px;
background: #ffffff;
box-shadow: 0 1px 4px rgba(0,0,0,0.25);
transition: transform 0.22s;
}
.theme-switch input:checked + .theme-switch-slider { background: #0ea5e9; }
.theme-switch input:checked + .theme-switch-slider::before { transform: translateX(18px); }
/* ── Botón mini (sidebar colapsado) ────────────────────────── */
.theme-switch-mini {
display: none;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 8px;
border: none;
background: transparent;
cursor: pointer;
margin: 0 auto;
transition: background 0.15s;
}
.theme-dark .theme-switch-mini { color: rgba(255,255,255,0.65); }
.theme-light .theme-switch-mini { color: rgba(30,33,48,0.55); }
.theme-dark .theme-switch-mini:hover { background: rgba(255,255,255,0.10); color: rgba(255,255,255,0.95); }
.theme-light .theme-switch-mini:hover { background: rgba(0,0,0,0.07); color: rgba(30,33,48,0.90); }
.theme-switch-mini .fa { font-size: 15px; }
/* ── Estado colapsado ───────────────────────────────────────── */
.sidebar-mini.sidebar-collapse .theme-switch-row { display: none !important; }
.sidebar-mini.sidebar-collapse .theme-switch-mini { display: flex !important; }
.sidebar-mini.sidebar-collapse .sidebar-theme-toggle {
padding: 8px 0 10px;
display: flex;
justify-content: center;
}
/* ═══════════════════════════════════════════════════════════════
SELECTOR DE TEMA EN CONFIGURACIÓN
═══════════════════════════════════════════════════════════════ */
.theme-selector-cards {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.theme-card-option {
cursor: pointer;
border: 2px solid #e0e4ea;
border-radius: 10px;
overflow: hidden;
transition: border-color 0.2s, box-shadow 0.2s;
width: 140px;
user-select: none;
}
.theme-card-option:hover {
border-color: #a0b4f7;
box-shadow: 0 0 0 3px rgba(79,142,247,0.10);
}
.theme-card-option.is-selected {
border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(37,99,235,0.14);
}
/* Miniatura de preview */
.theme-card-preview {
display: flex;
height: 82px;
padding: 7px;
gap: 5px;
}
.theme-card-preview.light-prev { background: #edf0f5; }
.theme-card-preview.dark-prev { background: #161928; }
.tp-sidebar {
width: 28px;
border-radius: 4px;
flex-shrink: 0;
}
.light-prev .tp-sidebar { background: #ffffff; }
.dark-prev .tp-sidebar { background: #1e2130; }
.tp-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 5px;
padding-top: 2px;
}
.tp-topbar {
height: 9px;
border-radius: 3px;
flex-shrink: 0;
}
.light-prev .tp-topbar { background: #ffffff; }
.dark-prev .tp-topbar { background: #1e2130; }
.tp-line {
height: 5px;
border-radius: 2px;
flex-shrink: 0;
}
.tp-line.short { width: 65%; }
.light-prev .tp-line { background: #d8dce6; }
.dark-prev .tp-line { background: #2a2d3e; }
.theme-card-label {
text-align: center;
padding: 8px 4px;
font-size: 12.5px;
font-weight: 600;
background: #ffffff;
color: #444;
border-top: 1px solid #e0e4ea;
}
.theme-card-label .fa {
margin-right: 4px;
color: #888;
}
.theme-card-option.is-selected .theme-card-label {
color: #2563eb;
}
.theme-card-option.is-selected .theme-card-label .fa {
color: #2563eb;
}
/* ═══════════════════════════════════════════════════════════════
FOOTER REFACTORED — colores por tema
═══════════════════════════════════════════════════════════════ */
/* ── Tema oscuro ─────────────────────────────────────────────── */
.theme-dark .findex-footer {
background: #12141f !important;
border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
color: rgba(255, 255, 255, 0.50);
}
.theme-dark .findex-footer-brand { color: rgba(255, 255, 255, 0.88); }
.theme-dark .findex-footer-copy { color: rgba(255, 255, 255, 0.45); }
.theme-dark .findex-footer-update { color: rgba(255, 255, 255, 0.38); }
.theme-dark .findex-footer-ip { color: rgba(255, 255, 255, 0.50); }
.theme-dark .findex-footer-vdivider {
background: rgba(255, 255, 255, 0.12);
}
/* Pills — loading */
.theme-dark .findex-status-pill {
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.45);
}
.theme-dark .findex-status-dot { background: rgba(255, 255, 255, 0.22); }
/* Pills — ok */
.theme-dark .findex-status-pill.status-ok {
background: rgba(34, 197, 94, 0.12);
color: #4ade80;
}
.theme-dark .findex-status-pill.status-ok .findex-status-dot { background: #22c55e; }
/* Pills — error */
.theme-dark .findex-status-pill.status-err {
background: rgba(239, 68, 68, 0.12);
color: #f87171;
}
.theme-dark .findex-status-pill.status-err .findex-status-dot { background: #ef4444; }
/* ── Tema claro ──────────────────────────────────────────────── */
.theme-light .findex-footer {
background: #f0f4f8 !important;
border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
color: #64748b;
}
.theme-light .findex-footer-brand { color: #1e293b; }
.theme-light .findex-footer-copy { color: #64748b; }
.theme-light .findex-footer-update { color: #94a3b8; }
.theme-light .findex-footer-ip { color: #475569; }
.theme-light .findex-footer-vdivider {
background: rgba(0, 0, 0, 0.12);
}
/* Pills — loading */
.theme-light .findex-status-pill {
background: rgba(0, 0, 0, 0.05);
color: #94a3b8;
}
.theme-light .findex-status-dot { background: #cbd5e1; }
/* Pills — ok */
.theme-light .findex-status-pill.status-ok {
background: rgba(34, 197, 94, 0.10);
color: #16a34a;
}
.theme-light .findex-status-pill.status-ok .findex-status-dot { background: #22c55e; }
/* Pills — error */
.theme-light .findex-status-pill.status-err {
background: rgba(239, 68, 68, 0.09);
color: #dc2626;
}
.theme-light .findex-status-pill.status-err .findex-status-dot { background: #ef4444; }
/* ═══════════════════════════════════════════════════════════════
QUICK ACTIONS DROPDOWN — colores por tema
═══════════════════════════════════════════════════════════════ */
/* ── Tema oscuro ─────────────────────────────────────────────── */
.theme-dark .quick-actions-trigger {
background: rgba(245, 158, 11, 0.14);
color: #fbbf24;
}
.theme-dark .quick-actions-trigger:hover,
.theme-dark .quick-actions-trigger:focus,
.theme-dark .open > .quick-actions-trigger {
background: rgba(245, 158, 11, 0.26);
color: #f59e0b;
}
.theme-dark .quick-actions-menu {
background: #252a3d !important;
border: 1px solid rgba(255, 255, 255, 0.10) !important;
}
.theme-dark .quick-actions-header span {
color: rgba(255, 255, 255, 0.32);
}
.theme-dark .quick-actions-menu > li > a {
color: rgba(255, 255, 255, 0.82) !important;
}
.theme-dark .quick-actions-menu > li > a > i {
color: rgba(255, 255, 255, 0.44);
}
.theme-dark .quick-actions-menu > li > a:hover {
background: rgba(255, 255, 255, 0.07) !important;
color: #ffffff !important;
}
.theme-dark .quick-actions-menu > li > a:hover > i {
color: #fbbf24;
}
.theme-dark .quick-actions-menu > li.divider {
background: rgba(255, 255, 255, 0.07) !important;
}
/* ── Tema claro ──────────────────────────────────────────────── */
.theme-light .quick-actions-trigger {
background: rgba(245, 158, 11, 0.12);
color: #d97706;
}
.theme-light .quick-actions-trigger:hover,
.theme-light .quick-actions-trigger:focus,
.theme-light .open > .quick-actions-trigger {
background: rgba(245, 158, 11, 0.22);
color: #b45309;
}
.theme-light .quick-actions-menu {
background: #ffffff !important;
border: 1px solid #e2e8f0 !important;
}
.theme-light .quick-actions-header span {
color: #9ca3af;
}
.theme-light .quick-actions-menu > li > a {
color: #374151 !important;
}
.theme-light .quick-actions-menu > li > a > i {
color: #6b7280;
}
.theme-light .quick-actions-menu > li > a:hover {
background: #eff6ff !important;
color: #1d4ed8 !important;
}
.theme-light .quick-actions-menu > li > a:hover > i {
color: #1d4ed8;
}
.theme-light .quick-actions-menu > li.divider {
background: #f1f5f9 !important;
}