/* 1. Definición de variables WATER */
:root {
    --color-water-main: linear-gradient(135deg, #0dcaf0, #0096c7);
    --color-water-bg: rgba(230, 247, 255, 0.75); /* Un toque azulado al fondo */
    --color-water-border: #0dcaf0;
    --color-water-text: #0b5d6b;
    --color-water-btn-idle: #e3f6f9;
}
.theme-water {
    background: var(--color-water-main);
    color: white;
    border: 1px solid var(--color-water-border);
}

/* 2. Aplicación a estructuras (Cabeceras y Cards) */
.header-water,
.element-card.water .element-card-header,
.menu-card-header.water {
    background: var(--color-water-main) !important;
    color: white;
}

/* 2. Estructura de la barra (Mantiene el gradiente fuerte) */
.water-menu-card {
    background: var(--color-water-main) !important;
    border-radius: 12px;
    border: none !important;
    border-bottom-left-radius: 0 !important; /* Para unión con panel inferior */
    border-bottom-right-radius: 0 !important;
}

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

/* 4. Estado Activo y Hover - AHORA CON COLOR CLARO */
.water-menu-btn.active,
.water-menu-btn:hover {
    background: var(--color-water-btn-idle) !important; /* Color claro al seleccionar/hover */
    color: var(--color-water-text) !important; /* Texto azul oscuro */
    border-color: var(--color-water-border) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Estilo forzado para el botón Water */
/* Reaplicar estilos de botones de Water a nav moderno */
.water-nav-btn-modern {
    background: var(--color-water-main) !important;
    border: 1px solid #0077b6 !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 */
}

.water-nav-btn-modern:hover,
.water-nav-btn-modern.active {
    background: var(--color-water-btn-idle) !important;
    color: var(--color-water-text) !important;
    border-color: var(--color-water-border) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}


.water-glass-header {
    background-color: rgba(13, 202, 240, 0.65) !important; /* Azul translúcido */
    color: white !important;                                /* Texto blanco */
    border-bottom: 1px solid rgba(0, 118, 191, 0.3) !important; /* Borde sutil */
    border-radius: 0 !important;                            /* Sin redondeo */
}
.water-glass-panel {
    background-color: rgba(230, 247, 255, 0.65) !important;
    border-radius: 0 !important;         /* crucial */
    border: 1px solid rgba(13, 202, 240, 0.2) !important;
    color: var(--color-water-text) !important;
    padding: 20px !important;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1) !important;
}
.select-water{
    background: var(--color-water-bg) !important;
    color: var(--color-water-text) !important;
    border: 1px solid var(--color-water-border) !important;
}

.select-water:focus{
    box-shadow: 0 0 0 0.15rem rgba(13, 202, 240, 0.35) !important;
}
        .breadcrumb-mobile-list { list-style: none; padding: 0 1rem; margin: 0; }
        .op-75 { opacity: 0.75; }