/* ========================================================================== 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 reducido entre sidebar y contenido */ } 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; } /* Compensación del contenido bajo header fijo */ .app-main{ padding-top:var(--header-h); } /* ------------------------------- Sidebar ---------------------------------- */ /* Escritorio: sidebar fijo bajo header, con margen lateral compacto */ @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 controlado 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 */ .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 .nav-link.active,.nav-pills .show>.nav-link{ background:var(--aceb-red); } .sidebar-mini .app-sidebar .nav-sidebar>.nav-item>.nav-link .nav-icon, .app-sidebar .nav-sidebar>.nav-item>.nav-link .nav-icon{ font-size:1.05rem; } /* ------------------------------ Content area ------------------------------- */ /* Compacto: menos padding y gutters para “feel app” */ .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); } /* -------------------------------- 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 */ @media (prefers-reduced-motion:reduce){ *{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important; } } /* ===== Sidebar header / user chip ===== */ .sidebar-header{ background:#fff; } .sidebar-user:hover .fw-semibold{ text-decoration:underline; } /* Avatar circular */ .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; } /* Un pelín menos de aire debajo del header del menú */ .sidebar-header + .sidebar-wrapper{ margin-top:.25rem; } /* Estilo del ponqué de afiliados y el listado */ .pie-legend .legend-dot{ width:12px; height:12px; border-radius:50%; display:inline-block; border:1px solid rgba(0,0,0,.08); } .pie-legend .legend-label{ font-weight:600; max-width: 38vw; } @media (min-width: 992px){ .pie-legend .legend-label{ max-width: 22vw; } } .btn-xs{ padding:.15rem .5rem; font-size:.75rem; line-height:1.1; }