/* SOLO afecta al Select2 dentro del formulario de edición */
#formulario-editar-proyecto .select2-container .select2-selection--single {
    background-color: #fff !important;
    border: 1px solid #ccc !important;
    border-radius: 6px !important;
    height: 44px !important;
    width: 700px;
    display: flex;
    align-items: center;
    padding-left: 10px;
    font-family: "Montserrat", sans-serif !important;
    font-size: 14px !important;
    color: #324093 !important;
    transition: box-shadow 0.2s ease;
}

#formulario-editar-proyecto .select2-container .select2-selection--single:hover {
    box-shadow: 0 0 5px rgba(50, 64, 147, 0.5);
}

#formulario-editar-proyecto .select2-selection__rendered {
    color: #324093 !important;
    font-weight: 500;
}

#formulario-editar-proyecto .select2-container .select2-selection__placeholder {
    color: #324093 !important;
    opacity: 0.8;
    width: 700px;

}

#formulario-editar-proyecto .select2-dropdown {
    background-color: #fff !important;
    border: 1px solid #ccc !important;
    border-radius: 6px;
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    min-width: 100% !important;

    width: 700px !important;

}

#formulario-editar-proyecto .select2-results__option {
    padding: 8px 12px;
    color: #324093;
    cursor: pointer;
    width: 700px;

}

#formulario-editar-proyecto .select2-search__field {
    width: 100% !important;
    box-sizing: border-box;
}


#formulario-editar-proyecto .select2-results__option--highlighted {
    background-color: #324093 !important;
    color: #fff !important;
}

/* CSS */
#loader-grafo {
    position: absolute;
    top: 25%;
    left: 70%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.8);
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    z-index: 1000;
}

.spinner {
    border: 6px solid #f3f3f3;
    border-top: 6px solid #324093;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 0 auto 10px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.hidden {
    display: none;
}


.vis-tooltip {
    background-color: #324093 !important;
    color: #fff !important;
    border-radius: 8px;
    padding: 10px;
    font-size: 13px;
    font-family: "Montserrat", sans-serif;
    max-width: 300px;
    white-space: normal;
    word-wrap: break-word;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    }


.leyenda-circulo {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
}

#buscador-proyectos{
    display:flex;
    flex-wrap:wrap;      /* ⟵ importante para que los bloques salten de línea */
    gap:100px;
}

.grupo-filtros {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;  /* centra horizontalmente */
    align-items: center;      /* centra verticalmente */
    gap: 12px;                /* espacio entre filtros */
    width: 100%;
    margin-bottom: 16px;
}

.grupo-filtros input,
.grupo-filtros select {
    flex: 0 0 auto;           /* ocupa solo lo necesario */
    width: 200px;             /* tamaño fijo */
    max-width: 100%;
}


    /* Cambio a diseño vertical en móviles muy estrechos (opcional) */
@media (max-width: 800px) {
    .grupo-filtros {
        flex-direction: column;
        align-items: center;
    }
    .grupo-filtros input,
    .grupo-filtros select {
        width: 100%;  /* se adaptan */
        max-width: 300px;
    }
}


/* Para móviles: cada control ocupa toda la línea */
@media(max-width:800px){
    .grupo-filtros{ flex-direction:column; }
}

.leyenda-en-grafo {
    position: absolute;
    top: 650px;
    left: 10px;
    background-color: #F4E8C8;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 100;
    white-space: nowrap;
}
#form-edicion-proyecto button[type="submit"] {
    background-color: #324093;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s, box-shadow 0.3s;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    margin-top: 10px;
}
.select2-container--default .select2-selection__placeholder {
    font-family: "Montserrat", sans-serif !important;
    color: #324093 !important;
}
/* Ajusta el ancho del contenedor Select2 */
.select2-container {
    width: 200px !important; /* mismo tamaño que los otros filtros */
    height: 50px !important;
}

/* Si quieres que se ajuste al padre, puedes usar */
.select2-container {
    width: auto !important;
    min-width: 200px;
    max-width: 200px;
    max-height: 50px;
    min-height: 50px;
}


#form-edicion-proyecto button[type="submit"]:hover {
    background-color: #253270;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

#form-edicion-proyecto button[type="submit"]:active {
    transform: scale(0.98);
}

.leyenda-en-grafo ul {
    list-style: none;
    padding: 0;
    margin: 5px 0 0 0;
}

.leyenda-en-grafo li {
    margin: 4px 0;
}

#tabla-proyectos {
    width: 100%;
    border-collapse: collapse;
}

#tabla-proyectos td, #tabla-proyectos th {
    border: 1px solid rgb(208, 187, 149);
    padding: 8px;
}

#tabla-proyectos tr:hover {background-color: #ddd;}


#buscador-proyectos,
#buscador-proyectos * {
    font-family: "Montserrat", sans-serif !important;
}

.select2-container .select2-selection--single,
.select2-dropdown,
.select2-results__option {
    font-family: "Montserrat", sans-serif !important;
    font-size: 50px !important;
    color: #324093 !important;
}


th {
    text-align: left;
    background-color: #324093;
    color: white;
    font-family: "Monserrat", Sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 1.2rem;
}

#buscador-proyectos {
    display: flex;
    /* justify-content: space-between;
    align-items: flex-start; */
    width: 100%; 
    max-width: 100%;
    margin: 0 auto;
    font-family: "Monserrat", Sans-serif;
    box-sizing: border-box;
    gap: 40px;
    padding: 0 20px;
    margin-left: -20px; 


}

h2{
    font-family: "Monserrat", Sans-serif !important;
    margin-bottom: 200px;
    margin-top: -10px;
}


#busqueda{
    flex: 0 0 200px;
    max-width: 100%;
    font-size: .7em;
    padding: 6px 25px;
    background-color: #F4E8C8;  /* color personalizado */
    border: 1px solid #ccc;
    border-radius: 6px;
    color: #324093;
    outline: none;
    font-family: "Monserrat", Sans-serif;
    transition: box-shadow 0.2s ease;
    margin-bottom: 20px; 
    margin-left: 0px;
}

#filtro_comunidad {


    font-size: .7em;
    padding: 6px 0px;
    background-color: #F4E8C8;  /* color personalizado */
    border: 1px solid #ccc;
    border-radius: 6px;
    color: #324093;
    outline: none;
    font-family: "Monserrat", Sans-serif;
    transition: box-shadow 0.2s ease;
    margin-bottom: 20px; 

}

.panel-busqueda {
    position: relative;
    flex: 3;
    width: 60%;
    /* left: 70px; */
    color: #324093;
    font-family: "Monserrat", Sans-serif;

    min-width: 500px;
    max-width: 1000px;
    box-sizing: border-box;
    margin-top: 45px; 
    margin-bottom: 50px;
    margin-left: 20px; /* Espacio a la izquierda */
}


#btn-volver-todos{
    position:absolute;            
    top:-10;                      /* ajusta si lo quieres un poco más abajo */
    left: 830px;
    margin:0;       
    margin-top: -80px; 
    font-size: .7em;
    padding: 6px 10px;
    background-color: #F4E8C8;  /* color personalizado */
    border: 1px solid #ccc;
    border-radius: 6px;
    color: #324093;
    outline: none;
    font-family: "Monserrat", Sans-serif;

}

#btn-exportar {
    position: absolute;
    top: -40px;    /* Se coloca debajo del otro botón */
    /* right: 0px; */
    left: 730px;
    right: -60px;
    font-size: .7em;
    padding: 6px 10px;
    background-color: #F4E8C8;
    border: 1px solid #ccc;
    border-radius: 6px;
    color: #324093;
    font-family: "Montserrat", sans-serif;
    /* margin-left: 100px; Espacio a la derecha */
    margin-bottom: 50px;
}

#filtro_linea {
    position:relative;
    top: -4px;
    font-size: .7em;
    padding: 6px 0px;

    background-color: #F4E8C8;  /* color personalizado */
    border: 1px solid #ccc;
    border-radius: 6px;
    color: #324093;
    outline: none;
    font-family: "Monserrat", sans-serif;

    transition: box-shadow 0.2s ease;
    margin-bottom: 12px; 

}

#filtro_palabra {
    font-size: .9em !important;
    padding: 4px 8px;
    background-color: #F4E8C8;  /* color personalizado */
    border: 1px solid #ccc;
    border-radius: 6px;
    color: #324093;
    outline: none;
    font-family: "Monserrat", Sans-serif !important;
    width: 200px;
    height: 10px;
    transition: box-shadow 0.2s ease;
    margin-bottom: 10px; 
}


.select2-container--default .select2-selection--single {
    background-color: #F4E8C8 !important;
    border: 1px solid #ccc !important;
    border-radius: 6px !important;
    padding: 6px 10px !important;
    font-family: "Montserrat", Sans-serif !important;
    font-size: 14px !important;
    color: #324093 !important;
    height: auto !important;
    transition: box-shadow 0.2s ease;
    margin-bottom: 10px; 
}

/* 2. Placeholder */
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #324093 !important;
    font-size: 14px !important;
    opacity: 1 !important;  /* Asegura que no se vea atenuado */
    font-family: "Montserrat", sans-serif !important;
}

/* 3. Texto seleccionado */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #324093 !important;
    font-family: "Montserrat", sans-serif !important;

}

/* 4. Input oculto de búsqueda (por si usa un input text invisible) */
.select2-container input.select2-search__field {
    background-color: #F4E8C8 !important;
    color: #324093 !important;
    font-family: "Montserrat", sans-serif !important;

}

/* 5. Dropdown al desplegar */
.select2-dropdown {
    background-color: #F4E8C8 !important;
    border: 1px solid #ccc !important;
    font-family: "Montserrat", sans-serif !important;

}

/* 6. Opciones del menú desplegable */
.select2-results__option {
    color: #324093 !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 14px !important;
}

/* 7. Opción destacada al pasar el ratón */
.select2-results__option--highlighted {
    background-color: #324093 !important;
    color: white !important;
}

#busqueda::placeholder {
    color: #324093;
    /* white-space: normal; */
    overflow: visible;
    text-overflow: initial;

}

#busqueda:focus,
#filtro_comunidad:focus, #filtro_linea:focus {
    box-shadow: 0 0 5px rgba(50, 64, 147, 0.5);  
    border-color: #324093;  
}
.tabla-container {
    margin-top: 20px;
    max-height: 1115px;
    MAX-WIDTH: 90%;
    overflow-y: auto;
    font-size: 0.7em;
}

#tabla-proyectos thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}


.bordered-title {
    font-size: 32px; /* Tamaño fijo y equilibrado */
    line-height: 1.2;
    color: #324093;
    padding: 10px 20px;
    margin: 20px auto;
    text-align: center;

    border: 4px solid #324093;
    background-color: transparent;
    box-shadow: 4px 4px 0px rgba(50, 64, 147, 0.9);
    border-radius: 8px;
    font-family: "Montserrat", sans-serif !important;
    width: 100%;
    max-width: 600px;
    box-sizing: border-box;
}

#popup-info {
    position: fixed; /* Cambiar de absolute a fixed */
    background: #F4E8C8;
    border: 1px solid #ccc;
    padding: 10px;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
    display: none;
    max-width: 400px;
    z-index: 1000;
    font-size: 10px;
    font-family: "Monserrat", Sans-serif;
    word-wrap: break-word; 
    user-select: text;
}

#popup-info p {
    margin: 6px 0;  /* menos espacio vertical */
    font-size: 13px; /* opcional: puedes reducir el tamaño si quieres */
    line-height: 1.3; /* opcional: reduce la separación interna del texto */
}
#popup-resumen {
    text-align: justify;
}

.hidden {
    display: none;
}

#grafico-container-buscador {
    flex: 2;
    width: 30%;
    min-width: 300px;
    max-width: 600px;
    box-sizing: border-box;
    margin-left: -80px;
    margin-right: 200px;
    margin-top:-10px;


}

#network-container-buscador {
    width: 800px; 
    height: 700px;
    border: 1px solid #ccc;
    margin-top: 75px; /* Ajusta el valor según lo necesites */

}

#campos-extra {
    display: none;
}

#formulario-editar-proyecto {
    padding: 20px;
    border: 2px solid transparent;
    border-radius: 12px;
    box-shadow: none;
    transition: all 0.3s ease-in-out;
    background-color: #F4E8C8;
    text-align: left;
    margin-left: -100;
    font-family: "Monserrat", Sans-serif;
    font-size: 14px;
    /* margin-right: auto; */
    width: 100%;
    max-width: 700px; /* o el ancho que desees */
}
#formulario-editar-proyecto input[type="text"],
#formulario-editar-proyecto input[type="email"],
#formulario-editar-proyecto select {
    padding: 12px;
    font-size: 12px;
    height: 44px;
    border-radius: 8px;
    border: 1px solid #ccc;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
    background-color:#F4E8C8;
}


#formulario-editar-proyecto.visible {
    border: 2px solid #324093;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    background-color:#F4E8C8;
    font-size:13px;
    font-family: "Monserrat", Sans-serif;
}

#formulario-editar-proyecto input::placeholder {
    color: #F4E8C8;
    font-family: "Montserrat", sans-serif;
}


#btn-editar-proyecto {
    background-color: #324093; /* Azul marino bonito */
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s, box-shadow 0.3s;
    box-shadow: 0 4px 8px #324093;
}

#btn-editar-proyecto:hover {
    background-color: #324093;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

#btn-editar-proyecto:active {
    transform: scale(0.98);
}



@media screen and (max-width: 1024px) {
    #buscador-proyectos {
        flex-direction: column;
    }
    
    .panel-busqueda, 
    #grafico-container-buscador {
        width: 100%;
        min-width: auto;
    }
}