/* Basic layout styles to match the attached admin image */
:root{
    --aside-width: 180px;
    --header-height: 70px;
    --footer-height: 36px;
    --primary:#1e88e5;
    --accent:#2b9af3;
}
/* Use border-box everywhere to avoid unexpected overflow calculations */
*{box-sizing:border-box}
.app-layout{display:block;min-height:100vh;font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial}
.app-aside{
    position:fixed;left:0;top:0;bottom:0;width:var(--aside-width);background:linear-gradient(180deg,#0b6bd6 0%, #1a8cff 100%);color:#fff;overflow:auto;overflow-x:hidden;z-index:12;
}
html,body{height:100%;margin:0;background:#f4f7fb;overflow-x:hidden}
.app-layout{ /* removed perspective to avoid subpixel rendering gaps */ }
.app-aside, .app-header{transform-style:preserve-3d;backface-visibility:hidden;transition:box-shadow 0.36s cubic-bezier(.2,.9,.2,1)}
/* Use box-shadow for elevation rather than translateZ to avoid subpixel gaps */
.app-aside{will-change:box-shadow;transform:none;box-shadow:0 30px 90px rgba(9,45,85,0.20), 0 6px 20px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.03);border-right:1px solid rgba(255,255,255,0.02);z-index:9998}
.app-header{will-change:box-shadow;transform:none;box-shadow:0 24px 60px rgba(9,45,85,0.18), 0 4px 12px rgba(0,0,0,0.06);border-bottom:1px solid rgba(255,255,255,0.06);background-image:linear-gradient(90deg, rgba(26,115,232,0.98), rgba(33,150,243,0.98));z-index:9999}
.app-header{position:fixed;left:var(--aside-width);right:0;top:0;height:var(--header-height);background:linear-gradient(90deg,#1a73e8 0%, #2196f3 100%);color:#fff;z-index:15;padding:12px 20px;display:flex;align-items:center;}

/* Gloss line at top of header to hide any rendering gap and add visual highlight */
.app-header::before{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -3px; /* extend more above to cover persistent hairline gaps */
    height: 14px;
    background: linear-gradient(90deg, rgba(255,255,255,0.24), rgba(255,255,255,0.08));
    pointer-events: none;
    z-index:9999;
}

/* Gloss for aside so top-left also has the gloss stripe */
.app-aside::before{
    content: '';
    position: absolute;
    left: 0;
    top: -3px; /* ensure gloss meets header and covers gaps */
    width: 100%;
    height: 14px;
    background: linear-gradient(90deg, rgba(255,255,255,0.18), rgba(255,255,255,0.06));
    pointer-events: none;
    z-index:9998;
}
.app-content{margin-left:var(--aside-width);margin-top:calc(var(--header-height) + 18px);margin-bottom:var(--footer-height);padding:24px;background:#f4f7fb;min-height:calc(100vh - var(--header-height) - var(--footer-height));transition:margin-left .36s cubic-bezier(.2,.9,.2,1),transform .36s cubic-bezier(.2,.9,.2,1),box-shadow .36s}
.app-footer{position:fixed;left:var(--aside-width);right:0;bottom:0;height:var(--footer-height);background:#ffffff;border-top:1px solid rgba(0,0,0,0.04);z-index:10;padding:6px 20px}
.brand{background:transparent}
.logo-box .badge{font-weight:700;display:inline-flex;align-items:center;justify-content:center;font-size:1rem;padding:10px 12px}

/* Ensure brand area sits above the gloss bar so the badge isn't clipped */
.brand{position:relative;z-index:10001}

/* Expanded (not collapsed): center logo+name and make logo a bit larger */
.app-layout:not(.aside-collapsed) .brand{display:flex;align-items:center;justify-content:flex-start;gap:12px;padding-top:12px;padding-bottom:12px;padding-left:12px}
.app-layout:not(.aside-collapsed) .logo-box{margin-right:8px}
.app-layout:not(.aside-collapsed) .logo-box .badge{font-size:1.18rem;padding:12px 14px;border-radius:10px}
.app-layout:not(.aside-collapsed) .brand .fw-bold{font-size:1.15rem;line-height:1;display:flex;flex-direction:column;justify-content:center}

/* Collapsed: make SD badge occupy the collapsed width and be fully visible */
.app-layout.aside-collapsed .brand{padding-top:18px;padding-bottom:18px;display:flex;align-items:center;justify-content:center;padding-left:0}
.app-layout.aside-collapsed .logo-box{width:100%;display:flex;justify-content:center}
.app-layout.aside-collapsed .logo-box .badge{width:62px;height:50px;font-size:1.05rem;padding:0;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;margin-left:-16px}
.user-panel{border-bottom:1px solid rgba(255,255,255,0.04)}
.avatar{width:44px;height:44px;border-radius:50%;background:#fff;color:#1565c0;display:flex;align-items:center;justify-content:center;font-weight:700}
.nav-link{color:rgba(255,255,255,0.92);padding:8.5px 10px;border-radius:6px;margin-bottom:4px}
.nav-link:hover{text-decoration:none}
.nav-link.active{background:rgba(255,255,255,0.96);color:#062433;font-weight:700;box-shadow:0 8px 20px rgba(12,54,109,0.06)}
.nav-section{font-size:12px;opacity:0.85}

/* Accordion hover effect: expand, stronger white background and aligned icon/text */
.app-aside .nav-link{position:relative;display:flex;align-items:center;gap:.5rem;transition:transform .22s ease,box-shadow .22s,padding .18s,color .18s}
.app-aside .nav-link i{transition:transform .32s cubic-bezier(.2,.9,.2,1),margin .22s ease,color .18s ease,filter .32s;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;font-size:18px;margin-right:0}
/* Ensure inline SVGs follow currentColor so they change color on hover */
.app-aside .nav-link i svg{fill:currentColor}

/* hover background handled by a pseudo-element so it can shrink from left->right
   while keeping the right edge fixed (transform-origin: right). */
.app-aside .nav-link::before{
    content: '';
    position: absolute;
    left: var(--hover-left, 14px);
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(255,255,255,0.9);
    border-radius: 10px;
    z-index: 0;
    transform-origin: right center;
    /* hidden by default: no background when not hover/active */
    transform: scaleX(0);
    opacity: 0;
    transition: transform .22s cubic-bezier(.2,.9,.2,1), opacity .18s ease;
    pointer-events: none;
}

.app-aside .nav-link i,
.app-aside .nav-link .nav-label{
    position: relative;
    z-index: 2;
}

/* Ensure parent toggle buttons (direct children of .nav-item) show full-width background when active */
.app-aside .nav-item > .nav-link.active::before{
    left: 0 !important;
    right: 0 !important;
    transform: scaleX(1) !important;
    opacity: 1 !important;
    z-index: 0;
    border-radius: 10px;
}
/* hover: semitransparent white and dark text for contrast on TOP-LEVEL items only; avoid changing padding/weight on submenu to prevent reflow */
.app-layout:not(.aside-collapsed) .app-aside nav > .nav-link:not(.active):hover,
.app-layout:not(.aside-collapsed) .app-aside nav > .nav-item > .nav-link:not(.active):hover{
    transform:none;color:#062433;box-shadow:0 10px 26px rgba(12,54,109,0.08);padding:8.5px 12px;border-radius:10px;z-index:20}
/* Submenu icon nudge remains only for collapse children */
.app-layout:not(.aside-collapsed) .app-aside .collapse .nav-link:not(.active):hover i{transform:translateX(20px);color:#ffffff;filter:drop-shadow(0 10px 26px rgba(12,54,109,0.10))}

/* Reduce gap between icon and label when sidebar is expanded */
.app-layout:not(.aside-collapsed) .app-aside .nav-link{gap:.12rem;padding-left:1px;padding-right:12px}

/* Submenu (inside collapse) — smaller, more compact than parent menu items */
.app-aside .collapse .nav-link{
    padding:4px 10px 4px 8px; /* reduce left padding to align submenu more to the left */
    font-size:0.95rem;
    border-radius:8px;
    margin-bottom:6px;
    font-weight:400;
    line-height:1.15;
}
.app-aside .collapse .nav-link i{
    width:24px;height:24px;font-size:15px;display:inline-flex;align-items:center;justify-content:center;margin-right:2px;margin-left:0
}
.app-aside .collapse{ /* slightly indent submenu area */
    padding-left:0px;
}

/* Submenu active: do not bold, slightly smaller background height */
.app-aside .collapse .nav-link.active{
    font-weight:700;color:#ffffff;
}

/* Replace submenu background with a left indicator bar for active submenu items */
.app-aside .collapse .nav-link.active{
    background: transparent !important;
    position: relative;
}
.app-aside .collapse .nav-link.active::before{ /* hide the hover/active pseudo-background for submenu active */
    transform: scaleX(0) !important;
    opacity: 0 !important;
}
.app-aside .collapse .nav-link.active::after{
    content: '';
    position: absolute;
    left: 4px; /* sit left of the icon area */
    top: 6px;
    bottom: 6px;
    width: 4px;
    background: #ffffff;
    border-radius: 3px;
    z-index: 1;
    margin-right: 2px;
}

/* Make sure hover doesn't bold or resize text (only slight left padding applied) */
.app-aside .collapse .nav-link,
.app-aside .collapse .nav-link .nav-label{
    font-weight:400;
}

/* Submenu hover: reduce background height and add a little left padding to text */
.app-aside .collapse .nav-link:not(.active):hover{ /* remove shifting by only padding label */ }
/* Remove hover transform/nudge for submenu icons */
.app-aside .collapse .nav-link:not(.active):hover i{transform: none !important;}

/* Make submenu hover background occupy full width without shifting; do not change nav-link padding */
.app-aside .collapse .nav-link:not(.active):hover::before{left:0;right:0;transform:scaleX(1);opacity:1}

/* On submenu hover, shift only the label slightly to the left with small padding */
.app-aside .collapse .nav-link:not(.active) .nav-label{padding-left:0;display:block}
.app-aside .collapse .nav-link:not(.active):hover .nav-label{padding-left:6px;text-align:left}

/* Force consistent font size and weight for submenu labels to prevent 'large' text after reload */
.app-aside .collapse .nav-link .nav-label{font-size:0.95rem;font-weight:400;line-height:1.15;transition:none}
.app-aside .collapse .nav-link.active .nav-label{font-size:0.95rem;font-weight:700;color:#ffffff}

/* Previously disabled submenu hover effects were removed so modern hover styles can apply. */
/* If you need to temporarily disable hover effects for specific layouts, scope them narrowly. */


/* shrink the hover background from left->right for submenu items only */
.app-layout:not(.aside-collapsed) .app-aside .collapse .nav-link:not(.active):hover::before{transform:scaleX(0.78);opacity:1}

/* Parent toggles (top-level nav-item buttons) should show full-width background on hover with no shifting */
.app-layout:not(.aside-collapsed) .app-aside nav > .nav-item > .nav-link:not(.active):hover::before{left:0;right:0;transform:scaleX(1);opacity:1}

/* Collapsed: show white background on hovered item (match active), but inset left so icon stays inside */
.app-layout.aside-collapsed .app-aside .nav-link:not(.active):hover::before{transform:scaleX(1);opacity:1}

.app-aside .nav-link.active::before{transform:scaleX(1);opacity:1;left:0}
.app-aside .nav-link .nav-label{transition:color .18s ease,opacity .18s;margin:0}
/* Change label color for top-level items on hover, but avoid changing font-weight to prevent layout shift */
.app-layout:not(.aside-collapsed) .app-aside nav > .nav-link:not(.active):hover .nav-label,
.app-layout:not(.aside-collapsed) .app-aside nav > .nav-item > .nav-link:not(.active):hover .nav-label{color:#062433;opacity:1}

/* collapsed: hide labels (we show bootstrap tooltips instead) */
.app-layout.aside-collapsed .nav-link{justify-content:center;padding-left:8px;padding-right:8px}
.app-layout.aside-collapsed .nav-link .nav-label{display:none}

/* (removed global left inset for collapsed links; hover rule above handles hover-only inset) */

/* Header widgets */
.search-box .input-group .input-group-text{border-right:0}
.search-box .form-control{border-left:0}
.app-header .btn-outline-light{color:#fff;border-color:rgba(255,255,255,0.12)}
.app-header .btn-outline-light:hover{background:rgba(255,255,255,0.06)}

/* Search box styling in header */
.search-box .input-group{width:420px}
.search-box .form-control{border-radius:24px 24px 24px 24px;padding:10px 14px;box-shadow:0 6px 18px rgba(13,54,109,0.08);border:0}
.search-box .input-group-text{background:#fff;border-radius:24px 0 0 24px;border:0}

/* Header action buttons */
.header-actions .btn-outline-light{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);color:#fff}
.header-actions .btn-primary{background:#7b6cff;border-color:#7b6cff}

/* Dashboard cards spacing */
.card.mb-4{overflow:hidden}
.card .card-body .chart-placeholder{height:220px}


/* Cards */
.card{border-radius:12px;box-shadow:0 8px 20px rgba(37,78,123,0.08);border:0}
.card .card-body{padding:18px}
.stat-circle{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff;color:#1e88e5;font-weight:700;box-shadow:0 6px 18px rgba(30,136,229,0.12)}

/* small widgets */
.small-widget{background:linear-gradient(180deg,#ffffff,#f3f7ff);border-radius:10px;padding:12px}

/* placeholder chart styles */
.chart-placeholder{height:160px;background:linear-gradient(180deg,#eaf3ff,#ffffff);border-radius:8px;border:1px dashed rgba(0,0,0,0.04)}

/* responsive adjustments */
@media (max-width: 992px){
    .app-aside{left:0;transform:translateX(0);position:fixed}
    .app-header{left:0}
    .app-content{margin-left:0;margin-top:calc(var(--header-height) + 12px);}
    .app-footer{left:0}
}

/* Larger screens adjustments */
@media (max-width: 1200px){
    .search-box .input-group{width:360px}
}

/* Tablet and small laptop */
@media (max-width: 992px){
    .search-box .input-group{width:300px}
    .header-actions .btn{padding:6px 10px;font-size:14px}
}

/* Mobile */
@media (max-width: 768px){
    .app-aside{position:fixed;left:0;top:0;height:100vh;width:var(--aside-width);transform:translateX(-110%);transition:transform .28s ease,z-index .28s}
    .app-layout.show-aside-mobile .app-aside{transform:translateX(0);z-index:60}
    .app-header{left:0}
    .search-box .input-group{width:100%;max-width:360px}
    .header-actions{display:none}
    .app-content{margin-left:0;margin-top:calc(var(--header-height) + 12px);padding:16px}
    .app-footer{left:0}
}

/* Very small devices */
@media (max-width: 480px){
    .search-box .input-group{width:100%}
    .logo-box .badge{font-size:12px;padding:6px 8px}
    .nav-link{padding:8px}
}

/* Collapsed sidebar (compact - icons only) */
.app-layout.aside-collapsed .app-aside{width:64px}
.app-layout.aside-collapsed .app-header{left:64px}
.app-layout.aside-collapsed .app-content{margin-left:64px}
.app-layout.aside-collapsed .app-footer{left:64px}
.app-layout.aside-collapsed .nav-link{padding:8.5px 8px;padding-left:8px;padding-right:8px}
.app-layout.aside-collapsed .nav-link .nav-label{display:none}
.app-layout.aside-collapsed .nav-section{display:none}
.app-layout.aside-collapsed .brand .fw-bold{display:none}
.app-layout.aside-collapsed .brand small{display:none}
.app-layout.aside-collapsed .brand .logo-box{width:100%;display:flex;justify-content:center}
/* align badge with active link background by reducing left padding */
.app-layout.aside-collapsed .brand{padding-left:0;padding-right:6px}
.app-layout.aside-collapsed .app-aside .nav-link i{font-size:1.2rem;margin:0 auto;display:block}

/* center icons vertically and add hover lift */
.app-layout.aside-collapsed .nav-link{display:flex;align-items:center;justify-content:center}
.app-layout.aside-collapsed .nav-link i{margin:0}
.app-aside .nav-link i{transition:transform .22s ease, box-shadow .22s ease}
/* only lift icon in collapsed state; when expanded keep icon vertically centered */
.app-layout.aside-collapsed .app-aside .nav-link:not(.active):hover i{transform:translateX(16px);filter:drop-shadow(0 10px 22px rgba(12,54,109,0.12))}

/* Move the label slightly to the right during hover so content feels pushed */
/* Move the label slightly to the right during hover so content feels pushed.
    Restrict to submenu links so parent toggles don't shift. */
.app-layout:not(.aside-collapsed) .app-aside .collapse .nav-link:not(.active) .nav-label{transition:transform .28s cubic-bezier(.2,.9,.2,1),color .18s}
.app-layout:not(.aside-collapsed) .app-aside .collapse .nav-link:not(.active):hover .nav-label{transform:translateX(20px);color:#062433}

/* Slightly stronger background/opacity on hover for better contrast */
.app-layout:not(.aside-collapsed) .app-aside .collapse .nav-link:not(.active):hover::before{transform:scaleX(0.72);opacity:1;}
.app-layout.aside-collapsed .app-aside .collapse .nav-link:not(.active):hover::before{transform:scaleX(1);opacity:1}
/* removed conflicting rule that reset transform; icons and labels now translate together */

/* Collapsed: on hover, move only the icon to the right (6px from edge) without lifting others */
.app-layout.aside-collapsed .app-aside .collapse .nav-link:not(.active):hover{ /* no padding changes to avoid shifting siblings */ }
.app-layout.aside-collapsed .app-aside .collapse .nav-link:not(.active):hover i{ /* visual nudge via transform above */ }

/* (reverted) collapsed state uses full-width pseudo-background like expanded */

/* Tooltip appearance tweak to look vertical */
.tooltip.bs-tooltip-right .tooltip-inner,
.tooltip.bs-tooltip-bottom .tooltip-inner{
    background:#ffffff;color:#062433;border:1px solid rgba(0,0,0,0.06);border-radius:8px;padding:6px 10px;box-shadow:0 10px 28px rgba(12,54,109,0.10);font-weight:600}
.tooltip.bs-tooltip-right .tooltip-arrow::before,
.tooltip.bs-tooltip-bottom .tooltip-arrow::before{border-right-color:#ffffff;border-bottom-color:#ffffff}

/* Animación/efecto al colapsar: pequeño desplazamiento y brillo en el contenido */
.app-content.animating-collapse{transform:translateX(8px);box-shadow:0 18px 40px rgba(12,54,109,0.04)}


/* mobile show aside (temporary) */
.app-layout.show-aside-mobile .app-aside{transform:translateX(0);z-index:30}



/* Responsive */
@media (max-width: 768px){
    .app-aside{position:relative;width:100%;height:auto}
    .app-header{left:0}
    .app-content{margin-left:0;margin-top:calc(var(--header-height));}
}

/* === Reset submenu indicator and new accordion-like hover for submenu items === */
/* Remove any leftover indicator pseudo-elements */
.app-aside .collapse .nav-link::after,
.app-aside .collapse .nav-link.active::after {
    display: none !important;
    content: none !important;
}

/* Submenu items: treat icon+text as a single interactive item with an 'accordion' hover */
.app-aside .collapse .nav-link{
    transition: transform .18s cubic-bezier(.2,.9,.2,1), box-shadow .18s ease, background .18s ease, color .12s;
    will-change: transform, box-shadow;
    transform: translateX(0);
    background: transparent;
    color: rgba(255,255,255,0.92);
}
.app-aside .collapse .nav-link i{ margin-right:6px; }

.app-aside .collapse .nav-link:not(.active):hover,
.app-aside .collapse .nav-link:not(.active):focus{
    /* Gradiente + Glow (más translúcido): medio transparente y sombra más fuerte */
    transform: translateX(2px);
    box-shadow: 0 22px 54px rgba(9,45,85,0.18), inset 0 1px 0 rgba(255,255,255,0.02);
    background: linear-gradient(90deg, rgba(255,255,255,0.22), rgba(255,255,255,0.14));
    color: #062433; /* texto oscuro para legibilidad sobre blanco translúcido */
    z-index: 3;
}
.app-aside .collapse .nav-link:not(.active):hover i,
.app-aside .collapse .nav-link:not(.active):focus i{
    color: #062433;
    transform: translateX(2px);
}

/* === Enforce no movement on submenu hover === */
/* Prevent any translate/scale or padding changes so siblings don't shift */
.app-aside .collapse .nav-link,
.app-aside .collapse .nav-link:focus,
.app-aside .collapse .nav-link:hover{
    transform: none !important;
    transition: background .22s ease, color .12s ease, box-shadow .18s ease !important;
    padding: 4px 10px 4px 22px !important; /* keep consistent spacing */
}
.app-aside .collapse .nav-link i,
.app-aside .collapse .nav-link .nav-label{
    transform: none !important;
    transition: color .12s ease !important;
}

/* Ensure hover doesn't change padding or move other items; background uses ::before so no layout change */
.app-aside .collapse .nav-link:not(.active):hover::before,
.app-aside .collapse .nav-link:not(.active):focus::before{
    transform: scaleX(1) !important;
    opacity: 1 !important;
    left: 0; right: 0; /* full-width reveal */
    transition: transform .22s cubic-bezier(.2,.9,.2,1), opacity .18s ease !important;
}

/* Disable any leftover rules that applied translate to icons on hover */
.app-aside .collapse .nav-link:not(.active):hover i,
.app-aside .collapse .nav-link:not(.active):focus i{
    transform: none !important;
}

/* make the label text white on hover */
.app-aside .collapse .nav-link:not(.active):hover .nav-label,
.app-aside .collapse .nav-link:not(.active):focus .nav-label{
    color: #062433 !important;
}

/* underline uses accent color over gradient hover for contrast */
.app-aside .collapse .nav-link:not(.active):hover .nav-label::after,
.app-aside .collapse .nav-link:not(.active):focus .nav-label::after{
    background: var(--accent) !important;
}

/* ensure submenu labels keep consistent font and don't cause reflow */
.app-aside .collapse .nav-link .nav-label{
    font-size:0.95rem; font-weight:400; line-height:1.15; transition:none;
}
.app-aside .collapse .nav-link.active .nav-label{ font-weight:700; color:#062433; }

/* ===== Fade-style submenu expand/collapse (avoid contraction) ===== */
/* Use opacity + max-height so the submenu fades in; avoid height-based contraction visual */
.app-aside .collapse{
    overflow: visible;
    max-height: 0;
    opacity: 0;
    transition: opacity .28s ease, max-height .28s ease;
}
.app-aside .collapse.show{
    max-height: 800px; /* large enough for expected submenu content */
    opacity: 1;
}
.app-aside .collapsing{
    /* Ignore bootstrap inline height to prevent the squeeze animation */
    height: auto !important;
    max-height: 800px;
    opacity: 0;
    transition: opacity .28s ease, max-height .28s ease;
}

/* ===== Toggle icon as '>' when closed and 'v' when opened ===== */
.app-aside .nav-item > button[data-bs-toggle="collapse"] .bi-chevron-down{ display:none; }
.app-aside .nav-item > button[data-bs-toggle="collapse"]{
    position:relative;
    padding-right:2.2rem; /* space for pseudo-icon */
}
.app-aside .nav-item > button[data-bs-toggle="collapse"]::after{
    content:'>';
    position:absolute;
    right:.7rem;
    top:50%;
    transform:translateY(-50%);
    font-weight:700;
    color: rgba(255,255,255,0.92);
    transition: transform .18s ease, color .12s ease;
}
.app-aside .nav-item > button[data-bs-toggle="collapse"][aria-expanded="true"]::after{
    content:'v';
    transform:translateY(-50%);
}

/* ===== Submenu hover / active refinements ===== */
/* Submenu hover: subtle lift and full-item highlight (no reflow) */
.app-aside .collapse .nav-link:not(.active){
    transition: transform .18s cubic-bezier(.2,.9,.2,1), box-shadow .18s ease, background .18s ease, color .12s;
}
.app-aside .collapse .nav-link:not(.active):hover,
.app-aside .collapse .nav-link:not(.active):focus{
    transform: translateX(6px);
    box-shadow: 0 10px 28px rgba(9,45,85,0.12);
    background: rgba(255,255,255,0.95);
    color: #062433;
}
.app-aside .collapse .nav-link:not(.active):hover i,
.app-aside .collapse .nav-link:not(.active):focus i{
    color:#062433;
}

/* Active submenu: bold and visually prominent */
.app-aside .collapse .nav-link.active{
    /* White outline + stronger background + 3D lift */
    background: rgba(8,24,37,0.28) !important; /* dark translucent to contrast white text */
    color: #ffffff !important;
    font-weight: 700 !important;
    border-left: 4px solid #ffffff; /* white outline */
    padding-left: 12px; /* keep space for border, adjusted to new submenu padding */
    border-radius: 8px;
    box-shadow: 0 18px 48px rgba(8,24,37,0.22), 0 6px 18px rgba(9,45,85,0.12);
    transform: translateX(2px) translateY(-2px) scale(1.01);
}
.app-aside .collapse .nav-link.active i{ color: #ffffff !important; transform: none !important; }
.app-aside .collapse .nav-link.active .nav-label{ color: #ffffff !important; }

/* ===== Slide-in accent bar + animated underline (submenu hover) ===== */
/* Ensure pseudo-element is available (override earlier removal) */
.app-aside .collapse .nav-link::after{
    display: block !important;
    content: '' !important;
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 4px;
    background: var(--accent);
    border-radius: 3px;
    transform: translateX(-120%);
    transition: transform .28s cubic-bezier(.2,.9,.2,1), opacity .22s;
    opacity: 0;
    z-index: 2;
}

/* On hover, slide the accent bar into view */
.app-aside .collapse .nav-link:not(.active):hover::after,
.app-aside .collapse .nav-link:not(.active):focus::after{
    transform: translateX(0);
    opacity: 1;
}

/* Animated underline on the label: grows from center */
.app-aside .collapse .nav-link .nav-label{ position: relative; display: inline-block; }
.app-aside .collapse .nav-link .nav-label::after{
    content: '';
    position: absolute;
    left: 50%;
    bottom: -6px;
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    width: calc(100% - 6px);
    height: 3px;
    background: var(--accent);
    border-radius: 3px;
    transition: transform .32s cubic-bezier(.2,.9,.2,1), opacity .24s;
    opacity: 0.95;
}
.app-aside .collapse .nav-link:not(.active):hover .nav-label::after,
.app-aside .collapse .nav-link:not(.active):focus .nav-label::after{
    transform: translateX(-50%) scaleX(1);
    opacity: 1;
}

/* Slightly offset background so the underline has space */
.app-aside .collapse .nav-link{ padding-bottom:10px; }

/* Ensure icons inherit the current text color so they match labels on hover */
.app-aside .collapse .nav-link i,
.app-aside .collapse .nav-link .bi,
.app-aside .collapse .nav-link svg{
    color: inherit;
}

/* Disable hover effects for active submenu items entirely */
.app-aside .collapse .nav-link.active:hover,
.app-aside .collapse .nav-link.active:focus{
    transform: none !important;
    box-shadow: 0 18px 48px rgba(8,24,37,0.22), 0 6px 18px rgba(9,45,85,0.12) !important;
    background: rgba(8,24,37,0.28) !important;
    color: #ffffff !important;
}

/* === Restore submenu hover to match top-level toggles (Notaria/Registro) === */
/* Place these at the end to ensure they override earlier experiment rules */
.app-layout:not(.aside-collapsed) .app-aside .collapse .nav-link:not(.active):hover,
.app-layout:not(.aside-collapsed) .app-aside .collapse .nav-link:not(.active):focus{
    /* No translate on hover; use same visual as parent but with center-expanding background */
    transform: none;
    color: #062433;
    box-shadow: 0 10px 26px rgba(12,54,109,0.08);
    padding:4px 10px 4px 22px;
    border-radius:8px;
    z-index:20;
}
.app-layout:not(.aside-collapsed) .app-aside .collapse .nav-link:not(.active):hover::before,
.app-layout:not(.aside-collapsed) .app-aside .collapse .nav-link:not(.active):focus::before{
    left:0; right:0; transform:scaleX(1); opacity:1; transform-origin:center center;
}

/* Remove slide-in accent bar and animated underline for submenu items (undo experiments) */
.app-aside .collapse .nav-link::after{ display:none !important; }
.app-aside .collapse .nav-link .nav-label::after{ display:none !important; }

/* Ensure icons match text color */
.app-aside .collapse .nav-link i,
.app-aside .collapse .nav-link svg{ color: inherit; }

/* Make submenu ::before expand from center for symmetrical reveal */
.app-aside .collapse .nav-link::before{
    left:0;
    right:0;
    transform-origin: center center; /* expand from middle to both sides */
}

/* Ensure hover forces label and icon to dark color (black) and no transform */
.app-aside .collapse .nav-link:not(.active):hover,
.app-aside .collapse .nav-link:not(.active):focus{
    transform: none !important;
    color: #062433 !important;
}
.app-aside .collapse .nav-link:not(.active):hover i,
.app-aside .collapse .nav-link:not(.active):focus i{
    color: #062433 !important;
    transform: none !important;
}
.app-aside .collapse .nav-link.active .nav-label{ color: #ffffff !important; }

/* Ensure hover doesn't accidentally dim active item */
.app-aside .collapse .nav-link.active:hover{ transform:none; box-shadow:0 10px 30px rgba(12,54,109,0.06); }

/* ================= Vehículo page cards ================= */
.vehiculo-page .card-grid{
    display: grid;
    gap: 16px;
    /* responsive: up to 5 columns on very large screens */
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

/* Force a maximum of 5 columns on wide screens */
@media (min-width: 1400px){
    .vehiculo-page .card-grid{ grid-template-columns: repeat(5, 1fr); }
}

.veh-card{
    border: 0;
    color: #062433; /* dark text by default for pastel variants */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 120px;
    transition: transform .18s ease, box-shadow .24s ease;
    box-shadow: 0 6px 18px rgba(9,45,85,0.06);
}
.veh-card .card-body{ padding: 18px; }
.veh-card .card-footer{ background: transparent; border-top: 1px solid rgba(255,255,255,0.06); padding: 10px 14px; }
.veh-card .icon-box{ width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.04);font-size:20px }
.veh-card .card-title{ margin:0; color:inherit }
.veh-card .card-text{ color: rgba(6,36,51,0.8) }
.veh-card .continue{ color: rgba(6,36,51,0.95); font-weight:600 }
.veh-card .card-footer{ background: transparent; border-top: 1px solid rgba(255,255,255,0.18); padding: 10px 14px; }
.veh-card .continue{ color: rgba(6,36,51,0.95); font-weight:600; font-style: italic }

.veh-card:hover{ transform: translateY(-6px); box-shadow: 0 22px 44px rgba(9,45,85,0.14); z-index:5 }
.veh-card:active{ transform: translateY(-2px) }

/* color variants */
.bg-variant-1{ background: linear-gradient(180deg,#cfe9ff,#bfe0ff); }
.bg-variant-2{ background: linear-gradient(180deg,#efe6ff,#dfd3ff); }
.bg-variant-3{ background: linear-gradient(180deg,#ffece6,#ffd8c7); }
.bg-variant-4{ background: linear-gradient(180deg,#e9f8ef,#d3f0dd); }
.bg-variant-5{ background: linear-gradient(180deg,#fff9e6,#fff1cc); color:#062433 }
.bg-variant-1{ background: linear-gradient(180deg,#b7ddff,#9fd4ff); }
.bg-variant-2{ background: linear-gradient(180deg,#e6dcff,#d2c6ff); }
.bg-variant-3{ background: linear-gradient(180deg,#ffd9c8,#ffc19a); }
.bg-variant-4{ background: linear-gradient(180deg,#dff3df,#bfeac0); }
.bg-variant-5{ background: linear-gradient(180deg,#fff3c9,#ffe7a8); color:#062433 }

/* ensure contrast on light variant footer/link */
.bg-variant-5 .continue{ color:#062433 }

/* small screens: tighter grid */
@media (max-width: 576px){
    .vehiculo-page .card-grid{ gap: 10px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
    .veh-card{ min-height: 110px }
}


/* === Narrow the hover/active background width for submenu items === */
/* Reduce the right edge so the background doesn't span full width */
.app-aside .collapse .nav-link::before{
    right: 10px; /* inset from right to make background narrower */
    border-radius: 8px;
}

/* Use the ::before pseudo-element to draw the active background (narrower) */
.app-aside .collapse .nav-link.active{
    /* keep border-left outline as visual indicator */
    background: transparent !important;
    position: relative;
    z-index: 1;
}
.app-aside .collapse .nav-link.active::before{
    /* darker translucent active background, narrower (inset from right)
       and placed behind content */
    content: '';
    position: absolute;
    left: 0;
    right: 10px;
    top: 0;
    bottom: 0;
    background: rgba(8,24,37,0.28);
    border-radius: 8px;
    transform-origin: center center;
    transform: scaleX(1);
    opacity: 1;
    z-index: 0;
}

/* Ensure the visual border-left stays visible above the pseudo background */
.app-aside .collapse .nav-link.active{ box-shadow: 0 18px 48px rgba(8,24,37,0.22), 0 6px 18px rgba(9,45,85,0.12); }