/* 1. Definición de variables AIR */
:root {
    --color-air-main: linear-gradient(135deg, #a8d8ff, #6fb8ff);
    --color-air-bg: rgba(255, 255, 255, 0.7);
    --color-air-border: #6fb8ff;
    --color-air-text: #034a80;
    --color-air-btn-idle: #cfe9ff;
}

.theme-air {
    background: var(--color-air-main);
    color: white;
    border: 1px solid var(--color-air-border);
}

/* 2. Aplicación a estructuras (Cabeceras y Cards) */
.header-air,
.element-card.air .element-card-header,
.menu-card-header.air {
    background: var(--color-air-main) !important;
    color: #fff !important;
    border-bottom: 2px solid #5a9be0;
}
/* 2. Estructura de la barra (Cambiamos de -bg a -main para que sea azul fuerte) */
.air-menu-card {
    background: var(--color-air-main) !important;
    border-radius: 12px;
    border: none !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    /* Unión perfecta con el panel inferior */
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* 3. Botones de menú AIR - AHORA CON GRADIENTE POR DEFECTO */
.air-menu-btn {
    background: var(--color-air-main) !important; /* Gradiente azul por defecto */
    border: 1px solid #5a9be0 !important;
    color: #fff !important; /* Texto blanco por defecto */
    border-radius: 6px;
    transition: all 0.3s ease;
    margin-right: 4px;
}

/* 4. Estado Activo y Hover AIR - AHORA CON COLOR CLARO */
.air-menu-btn.active,
.air-menu-btn:hover {
    background: var(--color-air-btn-idle) !important; /* Color claro al seleccionar/hover */
    color: var(--color-air-text) !important; /* Texto azul oscuro */
    border-color: var(--color-air-border) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
/* Botón moderno Air (nav) */
.air-nav-btn-modern {
    background: var(--color-air-main) !important; /* Gradiente azul claro */
    border: 1px solid #5a9be0 !important;
    color: #fff !important;
    border-radius: 6px;
    transition: all 0.3s ease;
    margin-right: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    text-decoration: none; /* Evita subrayado */
}

/* Hover y estado activo */
.air-nav-btn-modern:hover,
.air-nav-btn-modern.active {
    background: var(--color-air-btn-idle) !important; /* Color claro al seleccionar/hover */
    color: var(--color-air-text) !important;         /* Texto azul oscuro */
    border-color: var(--color-air-border) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Pequeño ajuste para el layout */
.breadcrumb-scroll .air-nav-btn-modern {
    padding: 0.3rem 0.8rem; /* Más pequeños para la barra de arriba */
    font-size: 0.85rem;
    white-space: nowrap;    /* Evita que el texto se parta en dos líneas */
}

.breadcrumb-scroll {
    display: flex;
    overflow-x: auto;       /* Permite scroll lateral en móvil */
    gap: 8px;
    align-items: center;
    scrollbar-width: none;  /* Oculta scroll en Firefox */
}
.breadcrumb-scroll::-webkit-scrollbar { display: none; } /* Oculta scroll en Chrome/Safari */

.select-air{
    background: var(--color-air-bg) !important;
    color: var(--color-air-text) !important;
    border: 1px solid var(--color-air-border) !important;
    backdrop-filter: blur(6px);
}

.select-air:focus{
    box-shadow: 0 0 0 0.15rem rgba(111, 184, 255, 0.45) !important;
}