/* ============================================================
   ESTILOS GLOBALES - RutaTurismo360
   Cache Busting: v1.0.2
   ============================================================ */

:root {
    --primary: #667eea;
    --primary-dark: #764ba2;
    --success: #4caf50;
    --danger: #f44336;
    --warning: #ff9800;
    --light-bg: #f5f7fa;
    --white: #ffffff;
    --border: #e0e0e0;
    --text-dark: #333;
    --text-light: #999;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--light-bg);
    color: var(--text-dark);
    height: 100%;
}

/* ============================================================
   MENÚ DE NAVEGACIÓN - ESTILOS FORZADOS
   ============================================================ */

/* ITEMS PRINCIPALES Y PADRES */
.nav-item,
.nav-item-parent {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 16px !important;
    color: rgba(255, 255, 255, 0.85) !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    border-left: 4px solid transparent !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    width: 100% !important;
    text-align: left !important;
    font-family: inherit !important;
    font-size: 14px !important;
    margin: 4px 0 !important;
}

.nav-item:hover,
.nav-item-parent:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-left-color: rgba(255, 255, 255, 0.5) !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

/* ESTILOS ACTIVOS - AZUL */
.nav-item.active,
.nav-item-parent.active,
:deep(.nav-link.active) {
    background-color: rgba(102, 126, 234, 0.3) !important;
    border-left-color: #667eea !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* ICONOS EN MENÚ */
.nav-icon {
    font-size: 18px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
}

/* TEXTO EN MENÚ */
.nav-text {
    flex: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* FLECHA DE EXPANSIÓN */
.nav-arrow {
    font-size: 16px !important;
    transition: transform 0.3s ease !important;
    color: rgba(255, 255, 255, 0.6) !important;
    flex-shrink: 0 !important;
}

.nav-arrow.expanded {
    transform: rotate(90deg) !important;
}

/* ============================================================
   SUBMENÚ - ITEMS HIJOS
   ============================================================ */

.nav-submenu {
    max-height: 500px !important;
    overflow: hidden !important;
    animation: expandSubmenu 0.3s ease-out forwards !important;
}

.nav-subitem {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 16px 10px 52px !important;
    color: rgba(255, 255, 255, 0.75) !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    border-left: 4px solid transparent !important;
    font-size: 13px !important;
    margin: 2px 0 !important;
}

.nav-subitem:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.95) !important;
    border-left-color: rgba(255, 255, 255, 0.3) !important;
}

.nav-subitem.active {
    background-color: rgba(102, 126, 234, 0.25) !important;
    border-left-color: #667eea !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

.nav-subitem .nav-icon {
    width: 20px !important;
    font-size: 16px !important;
}

/* ============================================================
   BLAZOR NAVLINK
   ============================================================ */

:deep(.nav-link) {
    color: rgba(255, 255, 255, 0.85) !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 16px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    border-left: 4px solid transparent !important;
    width: 100% !important;
    margin: 4px 0 !important;
}

:deep(.nav-link:hover) {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-left-color: rgba(255, 255, 255, 0.5) !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

:deep(.nav-link.active) {
    background-color: rgba(102, 126, 234, 0.3) !important;
    border-left-color: #667eea !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* ============================================================
   ANIMACIONES
   ============================================================ */

@keyframes expandSubmenu {
    from {
        opacity: 0 !important;
        max-height: 0 !important;
        transform: translateY(-10px) !important;
    }
    to {
        opacity: 1 !important;
        max-height: 500px !important;
        transform: translateY(0) !important;
    }
}