/* ========================================================================== Theme ACEB · Sindikalia — Layout sólido (header fijo + sidebar controlado) ========================================================================== */ /* --------------------------- Paleta + Bootstrap ---------------------------- */ :root{ --aceb-red: #c81e1e; --aceb-red-dark: #971616; --aceb-black: #111111; --aceb-white: #ffffff; --g-50: #fafafa; --g-100: #f5f5f5; --g-200: #eeeeee; --g-300: #e2e2e2; --bs-primary: var(--aceb-red); --bs-primary-rgb: 200,30,30; --bs-body-color: var(--aceb-black); --bs-body-bg: var(--g-50); --bs-link-color: var(--aceb-red); --bs-link-hover-color: var(--aceb-red-dark); --bs-border-color: var(--g-300); /* Layout */ --header-h: 56px; --sb-w: 248px; /* ancho sidebar abierto */ --sb-w-mini:72px; /* ancho sidebar colapsado */ --gap-side: 6px; /* gap entre sidebar y contenido */ } /* ------------------------------ Base global -------------------------------- */ html,body{ height:100%; } body{ background:var(--bs-body-bg); color:var(--bs-body-color); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } a{ color:var(--bs-link-color); text-decoration:none; } a:hover{ color:var(--bs-link-hover-color); text-decoration:underline; } .card{ border-radius:14px; } .btn-primary{ background:var(--aceb-red); border-color:var(--aceb-red); } .btn-primary:hover{ background:var(--aceb-red-dark); border-color:var(--aceb-red-dark); } .input-group-text{ background:#fff; border-color:var(--g-300); color:var(--aceb-red); } .form-control:focus{ border-color:var(--aceb-red); box-shadow:0 0 0 .2rem rgba(200,30,30,.15); } /* ------------------------------- Navbar ----------------------------------- */ .app-header.navbar{ position:fixed; top:0; left:0; right:0; z-index:1030; min-height:var(--header-h); background:var(--aceb-red)!important; color:#fff!important; box-shadow:0 2px 8px rgba(17,17,17,.08); } .navbar .nav-logo-badge{ display:inline-flex; align-items:center; justify-content:center; background:#fff; border-radius:10px; padding:4px 6px; box-shadow:0 2px 6px rgba(0,0,0,.12); } .navbar .brand-logo{ height:20px; width:auto; } @media (min-width:576px){ .navbar .brand-logo{ height:22px; } } @media (min-width:992px){ .navbar .brand-logo{ height:24px; } } .ver-badge{ background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.25); color:#fff; font-weight:600; } /* Botones de icono en navbar */ .navbar .nav-icon-btn{ border-radius: 999px; padding: .35rem .55rem; margin-inline: .05rem; line-height: 1; display: flex; align-items: center; justify-content: center; } .navbar .nav-icon-btn i{ font-size: 1.05rem; } .navbar .nav-icon-btn:hover{ background-color: rgba(255,255,255,.18); } .navbar .user-menu .dropdown-menu{ min-width: 220px; border-radius: 14px; } .navbar .user-menu .dropdown-header{ padding: .75rem 1rem .5rem; } .navbar .user-menu .dropdown-item{ font-size: .9rem; padding: .45rem 1rem; } /* Compensación del contenido bajo header fijo */ .app-main{ padding-top:var(--header-h); } /* ------------------------------- Sidebar (layout) ------------------------- */ /* Escritorio: sidebar fijo bajo header */ @media (min-width:992px){ .app-sidebar{ position:fixed; top:var(--header-h); bottom:0; left:0; width:var(--sb-w); height:auto; z-index:1025; transition:width .2s ease; } .app-wrapper .app-main{ margin-left: calc(var(--sb-w) - var(--gap-side)) !important; transition: margin-left .2s ease; } /* Colapsado (class sb-collapsed en ) */ body.sb-collapsed .app-sidebar{ width:var(--sb-w-mini); } body.sb-collapsed .app-wrapper .app-main{ margin-left: calc(var(--sb-w-mini) - var(--gap-side)) !important; } } /* Móvil: overlay por class sb-open en */ @media (max-width:991.98px){ .app-sidebar{ position:fixed; top:var(--header-h); bottom:0; left:0; width:var(--sb-w); height:auto; transform:translateX(-100%); z-index:1050; box-shadow:4px 0 16px rgba(0,0,0,.15); transition: transform .2s ease; } body.sb-open .app-sidebar{ transform:translateX(0); } body.sb-open{ overflow:hidden; } /* backdrop */ .app-sidebar::after{ content:""; position:fixed; inset:var(--header-h) 0 0 0; background:rgba(0,0,0,.35); display:none; z-index:-1; } body.sb-open .app-sidebar::after{ display:block; } } /* Brand/encabezado del sidebar heredado de AdminLTE */ .brand-link{ background:#fff!important; border-bottom:1px solid var(--g-200); color:var(--aceb-black)!important; } .brand-link .brand-image{ height:34px; width:auto; opacity:.95; } /* Nav-pills generales (no solo sidebar) */ .nav-pills .nav-link.active, .nav-pills .show>.nav-link{ background:var(--aceb-red); } /* ------------------------------ Content area ------------------------------- */ .app-content{ padding-top:.35rem !important; } .app-content .row{ --bs-gutter-x: .75rem; --bs-gutter-y: .75rem; } .card{ margin-bottom:.55rem !important; } .container-fluid{ padding-left:8px !important; padding-right:8px !important; } /* ------------------------------- Login block ------------------------------- */ .login-wrap{ min-height:100svh; display:flex; align-items:center; justify-content:center; padding:clamp(16px,2.5vw,32px); padding-top:calc(env(safe-area-inset-top,0px) + clamp(16px,2.5vw,32px)); padding-bottom:calc(env(safe-area-inset-bottom,0px) + clamp(16px,2.5vw,32px)); background:linear-gradient(180deg,#ffffff 0%, var(--g-100) 100%); } .login-card{ width:clamp(320px,92vw,520px); background:#fff; border:1px solid var(--g-200); border-radius:1rem; overflow:hidden; box-shadow:0 .5rem 1.25rem rgba(17,17,17,.08); } @media (min-width:992px){ .login-card{ width:900px; } } .bg-aceb-side{ background:linear-gradient(180deg, #b31b1b 0%, #8e1616 100%); } .brand-image-xl{ width:auto; max-height:64px; margin:0 auto 8px; display:block; object-fit:contain; } .form-control-app{ height:48px; padding:.75rem .875rem; } .input-group-text-app{ background:#fff; border-color:var(--g-300); color:var(--aceb-red); } /* Logo login sobre recuadro blanco */ .logo-tile{ background:#fff; border-radius:16px; padding:18px 22px; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(0,0,0,.12); } .logo-tile img{ height:90px; width:auto; display:block; } @media (min-width:992px){ .logo-tile img{ height:104px; } } /* -------------------------------- Utilidades -------------------------------- */ .user-inline{ white-space:nowrap; } .text-aceb-red{ color:var(--aceb-red)!important; } .bg-aceb-red{ background:var(--aceb-red)!important; color:#fff!important; } /* Accesibilidad: reducción de animaciones */ @media (prefers-reduced-motion:reduce){ *{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important; } } /* ------------------------- Avatar / chip de usuario ------------------------ */ .avatar{ width:44px; height:44px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; overflow:hidden; background:#f1f1f1; border:2px solid #fff; box-shadow:0 0 0 2px rgba(0,0,0,.05); } .avatar-sm{ width:40px; height:40px; } .avatar img{ width:100%; height:100%; object-fit:cover; display:block; } .avatar-fallback{ font-weight:700; font-size:0.95rem; color:#555; } /* ================== SIDEBAR SINDIKALIA (ACEB) ================== */ .app-sidebar.sidebar-modern { background: #f8f9fb; border-right: 1px solid rgba(0,0,0,.04); } .app-sidebar.sidebar-modern .sidebar-header { background: #ffffff; } .app-sidebar.sidebar-modern .sidebar-header + .sidebar-wrapper{ margin-top:.25rem; } /* Chip de usuario en el sidebar */ .app-sidebar.sidebar-modern .sidebar-user{ padding:.45rem .75rem; border-radius:14px; transition:background-color .15s ease, box-shadow .15s ease, transform .05s ease; } .app-sidebar.sidebar-modern .sidebar-user .avatar{ box-shadow:0 0 0 2px #ffffff; } .app-sidebar.sidebar-modern .sidebar-user .fw-semibold{ font-size:.95rem; } .app-sidebar.sidebar-modern .sidebar-user .small{ font-size:.8rem; } .app-sidebar.sidebar-modern .sidebar-user:hover{ background-color:var(--g-100); box-shadow:0 4px 12px rgba(0,0,0,.04); text-decoration:none; transform:translateY(-1px); } /* Listado principal */ .app-sidebar.sidebar-modern .nav-sidebar { padding: .5rem .5rem 1.25rem; } /* Enlaces base del sidebar */ .app-sidebar.sidebar-modern .nav-link { border-radius: .7rem; margin: 2px 0; padding: .5rem .75rem; color: #495057; font-size: .93rem; display: flex; align-items: center; gap: .55rem; transition: background-color .15s ease, color .15s ease, transform .1s ease; text-decoration: none; } .app-sidebar.sidebar-modern .nav-link .nav-icon { width: 1.25rem; text-align: center; font-size: .95rem; opacity: .8; } /* Texto del item */ .app-sidebar.sidebar-modern .nav-link p { margin: 0; flex: 1; } /* Hover: SIN subrayado, cambio de color */ .app-sidebar.sidebar-modern .nav-link:hover, .app-sidebar.sidebar-modern .nav-link:focus { text-decoration: none; background-color: #edf1f9; color: #0d6efd; transform: translateX(1px); } /* Item activo: pastilla roja, texto blanco */ .app-sidebar.sidebar-modern .nav-link.active { background: linear-gradient(135deg, #c71f2d, #a80f1f); color: #ffffff; font-weight: 600; box-shadow: 0 6px 16px rgba(199, 31, 45, .35); transform: none; } .app-sidebar.sidebar-modern .nav-link.active .nav-icon { color: #ffffff; opacity: 1; } /* Evitar que el hover cambie el blanco del activo */ .app-sidebar.sidebar-modern .nav-link.active:hover, .app-sidebar.sidebar-modern .nav-link.active:focus { color: #ffffff; background: linear-gradient(135deg, #c71f2d, #a80f1f); transform: none; } /* Submenús (Sistema > Usuarios / Auditoría) */ .app-sidebar.sidebar-modern .nav-treeview .nav-link { font-size: .9rem; padding-left: 1.9rem; border-radius: .6rem; } .app-sidebar.sidebar-modern .nav-treeview .nav-link .nav-icon { font-size: .9rem; } .app-sidebar.sidebar-modern .nav-treeview .nav-link:hover { background-color: #e9edf7; color: #0d6efd; } /* Submenú activo: rojo sólido, blanco */ .app-sidebar.sidebar-modern .nav-treeview .nav-link.active { background: #c71f2d; color: #ffffff; } .app-sidebar.sidebar-modern .nav-treeview .nav-link.active .nav-icon { color: #ffffff; } /* Sistema: flecha y pill Admin */ .app-sidebar.sidebar-modern .nav-link-system .chevron-icon { font-size: .8rem; opacity: .7; transition: transform .2s ease, opacity .15s ease; } .app-sidebar.sidebar-modern .nav-link-system[aria-expanded="true"] .chevron-icon { transform: rotate(180deg); opacity: 1; } .app-sidebar.sidebar-modern .nav-link-system span.label { display: inline-flex; align-items: center; gap: .35rem; } .app-sidebar.sidebar-modern .nav-link-system .badge-tag { font-size: .65rem; text-transform: uppercase; letter-spacing: .04em; background: rgba(108,117,125,.12); color: #6c757d; border-radius: 999px; padding: .12rem .45rem; } /* Estado visual cuando Sistema está abierto (sin marcarlo como activo) */ .app-sidebar.sidebar-modern .nav-link-system[aria-expanded="true"]{ background-color:#edf1f9; color:#0d6efd; } .app-sidebar.sidebar-modern .nav-link-system[aria-expanded="true"] .nav-icon{ color:#0d6efd; }