h2 {
    color: #FBEFEF;
}

portfolio-area {
    border-bottom: 1px solid #d7dee0;
    padding: 60px 0px;
}

body {
    background-image: url('../fondo/imagenfondo.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-color: #464646;
}

body1 {
    background-color: #222;
    background-color: #717171;
}

panel1 {
    margin-bottom: 20px;
    background-color: #fff;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    box-shadow: 0 1px 1px;
}

.list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover {
    z-index: 2;
    color: #fff;
    background-color: #717171;
    border-color: #FBF5EF
}

a {
    color: #FBEFEF;
}

.list-group-item.active .list-group-item-text, .list-group-item.active:focus .list-group-item-text, .list-group-item.active:hover .list-group-item-text {
    color: #FBF5EF
}

.list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover {
    z-index: 2;
    color: #000000;

}

.panel-primary > .panel-heading {
    color: #fff;
    background-color: #717171;
    border-color: #000000
}

.panel-primary {
    border-color: #FBF5EF
}

.panel-default > .panel-heading {
    color: #333;
    background-color: #717171;
    border-color: #FBF5EF
}

/* Estilo del caret (triángulo) del submenú */
.submenu-caret {
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 4px solid #333;
    margin-left: 5px;
    vertical-align: middle;
}

/* Estilo del submenú */
.dropdown-menu .dropdown-submenu {
    position: relative;
}

.dropdown-menu .dropdown-submenu > .dropdown-menu {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    margin-top: -1px;
    max-width: 280px; /* Ajusta este valor según tus necesidades */
    white-space: normal; /* Permite que el texto envuelva a la siguiente línea si es necesario */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Agrega una sombra ligera */
    border: 1px solid #ddd; /* Agrega un borde ligero */
    background-color: #fff; /* Fondo blanco para el submenú */
    z-index: 1000; /* Asegura que el submenú se superponga correctamente */
}

/* Mostrar submenú al pasar el cursor */
.dropdown-menu .dropdown-submenu:hover > .dropdown-menu {
    display: block;
    animation: fadeIn 0.3s ease-in-out; /* Animación de aparición */
}

/* Ancho del menú principal */
.dropdown-menu {
    width: 220px;
    background-color: #fff; /* Fondo blanco para el menú principal */
    border: 1px solid #ddd; /* Borde ligero */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Sombra ligera */
}

/* Animación para la aparición del submenú */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Ajustar el estilo de los elementos del menú */
.dropdown-menu li a {
    padding: 10px 15px; /* Espaciado interior */
    color: #333; /* Color del texto */
    text-decoration: none; /* Sin subrayado */
    display: block; /* Bloque completo para el enlace */
    word-wrap: break-word; /* Permite que las palabras largas se ajusten */
    overflow-wrap: break-word; /* Permite que las palabras largas se ajusten */
    white-space: normal; /* Permite que el texto envuelva a la siguiente línea si es necesario */
}

/* Cambiar el color del texto y el fondo al pasar el cursor */
.dropdown-menu li a:hover {
    background-color: #f8f9fa; /* Fondo claro al pasar el cursor */
    color: #0056b3; /* Color del texto al pasar el cursor */
}

/* Ajustar el estilo de los elementos del submenú */
.dropdown-menu .dropdown-submenu li a {
    padding: 10px 15px; /* Espaciado interior */
    color: #333; /* Color del texto */
    text-decoration: none; /* Sin subrayado */
    display: block; /* Bloque completo para el enlace */
}

/* Cambiar el color del texto y el fondo del submenú al pasar el cursor */
.dropdown-menu .dropdown-submenu li a:hover {
    background-color: #f8f9fa; /* Fondo claro al pasar el cursor */
    color: #0056b3; /* Color del texto al pasar el cursor */
}

.custom-container {
    max-width: 800px; /* Ajusta el ancho según tus necesidades */
}


@media (max-width: 768px) {
    .dropdown-menu {
        width: 100%; /* Hace que el menú principal ocupe el ancho completo */
        box-shadow: none; /* Opcional: Quita la sombra para simplificar el diseño */
    }

    .dropdown-menu .dropdown-submenu > .dropdown-menu {
        position: static; /* Hace que el submenú se coloque debajo del menú principal */
        display: none; /* Oculta el submenú por defecto */
        width: 100%; /* Hace que el submenú ocupe el ancho completo del menú principal */
        box-shadow: none; /* Opcional: Quita la sombra para simplificar el diseño */
        border-top: 1px solid #ddd; /* Añade un borde superior para separar el submenú del menú principal */
        margin-top: 0; /* Ajusta el margen para que no se solape con el menú principal */
    }

    .dropdown-menu .dropdown-submenu.active > .dropdown-menu {
        display: block; /* Muestra el submenú cuando está activo */
    }
}

input[type="date"] {
    background-color: #ffffff; /* Cambia el color de fondo */
    border: 1px solid #ced4da; /* Cambia el color del borde */
    padding: 0.375rem 0.75rem; /* Ajusta el padding */
    border-radius: 0.25rem; /* Bordes redondeados */
}
/* CSS personalizado para mejorar la apariencia */
input.form-control {
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    padding: 0.375rem 0.75rem;
}

.datepicker {
    z-index: 1050 !important; /* Asegúrate de que el selector de fecha aparezca sobre otros elementos */
}