/* 1. Definición única de colores (Tu "Fuente de Verdad") */
:root {
    --color-land-main: linear-gradient(135deg, #8B4513, #5C3317);
    --color-land-bg: rgba(255, 248, 235, 0.85);
    --color-land-border: #a0602d;
    --color-land-text: #5a2e14;
    --color-land-btn-idle: #d8b8a0;
}

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

/* 2. Aplicación a elementos de estructura */
.header-land,
.element-card.land .element-card-header,
.menu-card-header.land {
    background: var(--color-land-main);
    color: white;
}

.land-menu-card {
    background: var(--color-land-main) !important;
    border-radius: 12px;
    border: none !important; /* Limpia el borde de nav-tabs */
}

.land-menu-btn {
    background: var(--color-land-main) !important; /* Gradiente marrón por defecto */
    border: 1px solid #3e220f !important;
    color: white !important; /* Texto blanco por defecto */
    border-radius: 6px;
    transition: all 0.3s ease;
}

/* 4. Estado Hover y Activo - AHORA CON COLOR CLARO */
/* El estado .active suele mantenerse destacado, pero si quieres que
   al pasar el ratón se vuelva claro, usamos este orden: */
.land-menu-btn:hover {
    background: var(--color-land-btn-idle) !important; /* Color crema claro al pasar el ratón */
    color: var(--color-land-text) !important; /* Texto marrón oscuro */
    border-color: var(--color-land-border) !important;
}

/* Si quieres que el botón de la página seleccionada sea el claro (para que resalte sobre la barra oscura): */
.land-menu-btn.active {
    background: var(--color-land-btn-idle) !important;
    color: var(--color-land-text) !important;
    border-color: var(--color-land-border) !important;
}

/* Botón moderno Land (nav) */
.land-nav-btn-modern {
    background: var(--color-land-main) !important; /* Gradiente marrón */
    border: 1px solid #3e220f !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 */
.land-nav-btn-modern:hover,
.land-nav-btn-modern.active {
    background: var(--color-land-btn-idle) !important; /* Color claro al hover/activo */
    color: var(--color-land-text) !important;          /* Texto marrón oscuro */
    border-color: var(--color-land-border) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}


/* Estilo base para el panel oscuro */
.content-glass-panel {
    background-color: rgba(59, 70, 82, 0.75) !important; /* Color sólido al 85% para mejor legibilidad */
    border-radius: 12px;
    padding: 20px;
    /* Borde muy sutil para dar definición sin ensuciar */
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
    color: #ffffff;
}

/* Quitar redondeo inferior a la barra de navegación */
.land-menu-card, .air-menu-card, .water-menu-card {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-bottom: none !important; /* Asegura que no haya línea de separación */
}

/* Quitar redondeo superior al panel de contenido para que encaje */
.content-glass-panel {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    /* Mantenemos el resto de tus estilos (background, padding, etc.) */
}

/* Nuevo panel de cristal en tonos marrón tierra */
.land-glass-panel {
    /* Fondo marrón claro con 65% de transparencia */
    background-color: rgba(139, 69, 19, 0.50) !important;
    border-radius:  0px;
    border: 1px solid rgba(216, 184, 160, 0.2);
    color: #a5a5a5;
}
.select-land{
    background: var(--color-land-bg) !important;
    color: var(--color-land-text) !important;
    border: 1px solid var(--color-land-border) !important;
}

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