/* ==========================================================================
   1. ESTILOS GENERALES Y MENÚ MÓVIL (NAVBAR SUPERIOR)
   ========================================================================== */

/* COLOR DE FONDO INSTITUCIONAL */
.bg-dark-copandaro {
    background-color: #212832 !important;
}

/* MENÚ MÓVIL (NAVBAR SUPERIOR Y LOGO) */
.mobile-navbar-logo {
    max-height: 45px;
    width: auto;
}

/* MARGEN SUPERIOR EN MÓVIL */
@media (max-width: 991.98px) {
    body {
        padding-top: 60px;
    }

    .main-layout-wrapper {
        margin-left: 0 !important;
    }
}


/* ==========================================================================
   2. BARRA LATERAL ESCRITORIO (>= 992px) CON SCROLLBAR
   ========================================================================== */

@media (min-width: 992px) {
    .copandaro-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 220px;
        height: 100vh;
        background-color: #212832;
        z-index: 1050;
        overflow-y: auto;
        /* MANTIENE ACTIVO EL SCROLL VERTICAL */
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
    }

    .main-layout-wrapper {
        margin-left: 220px;
    }
}

.sidebar-logo {
    max-width: 160px;
    height: auto;
}

.sidebar-link {
    color: #94a3b8 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 12px;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    text-align: center;
    transition: all 0.25s ease;
}

.sidebar-icon {
    font-size: 1.7rem;
    margin-bottom: 8px;
    color: #64748b;
    transition: color 0.25s ease, transform 0.25s ease;
}

.sidebar-link:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.05);
}

.sidebar-link:hover .sidebar-icon {
    color: #f59e0b;
    transform: translateY(-2px);
}


/* ==========================================================================
   3. SUBMENÚ DESPLEGABLE (FLYOUT CON POSICIONAMIENTO FIXED DINÁMICO)
   ========================================================================== */

.has-flyout,
.has-flyout-nested {
    position: relative;
}

/* BASE DEL SUBMENÚ PRIMER NIVEL */
.flyout-menu.flyout-level-1 {
    display: none;
    width: 250px;
    background-color: #ffffff;
    list-style: none;
    margin: 0;
    padding: 0;
    box-shadow: 4px 4px 18px rgba(0, 0, 0, 0.25);
    z-index: 99999 !important;
    /* Capa superior sobre el sidebar y contenido */
}

/* BASE DEL SUBMENÚ SEGUNDO NIVEL (AYUNTAMIENTO Y OBRAS) */
.flyout-menu.flyout-level-2 {
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    width: 220px;
    background-color: #ffffff;
    list-style: none;
    margin: 0;
    padding: 0;
    box-shadow: 4px 4px 18px rgba(0, 0, 0, 0.25);
    z-index: 100000 !important;
}

/* MOSTRAR EN HOVER (ESCRITORIO) */
@media (min-width: 992px) {
    .has-flyout:hover>.flyout-level-1 {
        display: block !important;
    }

    .has-flyout-nested:hover>.flyout-level-2 {
        display: block !important;
    }
}

/* ESTILOS DE LOS ENLACES */
.flyout-menu li a {
    display: block;
    padding: 14px 18px;
    color: #1e293b;
    font-size: 0.88rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.flyout-menu li a:hover {
    background-color: #f8fafc;
    color: #e11d48;
}

/* ENCABEZADO ROJO (Transparencia ASM) */
.flyout-header-item a {
    background-color: #ff0000 !important;
    color: #ffffff !important;
    font-weight: 600;
}

.flyout-header-item a:hover {
    background-color: #cc0000 !important;
}

/* ESTADO ACTIVO EN SEGUNDO NIVEL */
.has-flyout-nested:hover>a {
    background-color: #ff0000 !important;
    color: #ffffff !important;
}

/* CAMBIO DE COLOR ROJO EN RENDICIÓN DE CUENTAS AL PASAR EL MOUSE */
.has-flyout:hover>.sidebar-link {
    color: #ff0000 !important;
}

.has-flyout:hover>.sidebar-link .sidebar-icon {
    color: #ff0000 !important;
}