div{

    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: white;
    font-weight: 600;

}

li:hover {

    background-color: rgba(10, 13, 18, 1);

}

button{

    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: white;
    font-weight: 600;

}

a{

    text-decoration: underline transparent;

}

a:hover{

    filter: brightness(1.1);

}


.marco_fecha_2{

    border-radius:0.6vh;
    background:#1f2630;
    height: 4vh;
    margin-right: 0.4vh;
    margin-left: 0.6vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 0.5vw;
    padding-left: 1.5vw;
    font-size: 0.85vw;
    
}

.fecha_2{

    border: 0.15vh solid #1f2630;
    background-color: #1f2630;
    color: white;
    height: 4vh;
    font-size: 1vw;
    font-weight: 600;
    margin: 0 0.25vw;

}

.marco_hora{

    border:0.2vh solid #7d8690;
    border-radius:0.8vh;
    background:#161b22;
    height: 5vh;
    width: 14vh;
    margin: 0.6vh;
    margin-right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    
}

.hora{

    border: 0.15vh solid #161b22;
    background-color: #161b22;
    color: white;
    height: 4vh;
    width: 10vh;
    font-size: 2.2vh;
    font-weight: 600;
    margin: 0 0.8vh;

}

.estructura_marcos{

    display: grid;
    grid-template-columns: 100%;

}

.estructura_detalle{

    display: grid;
    grid-template-columns: 25% 75%;

}

.estructura_detalle2{

    display: grid;
    grid-template-columns: 50% 50%;

}

.estructura_50{

    display: grid;
    grid-template-columns: repeat(2, 50%);

}

.estructura_33{

    display: grid;
    grid-template-columns: repeat(3, 33.3%);

}





/*RESUMEN MENSUAL*/
/*#1f2630;*/
.marcos_principales{

    border:0.25vh solid #1f2630;
    border-radius: 1vh;
    height:92vh;
    background:#0a0d12;
    margin: 0.4vh;
    padding: 1vh 2vh;

}

.marcos_desagregados{

    border:0.25vh solid #1f2630;
    border-radius: 1vh;
    height:92vh;
    background:#0a0d12;
    margin: 0.4vh;
    padding: 1vh 2vh;

}

.titulo_marcos{
    
    font-size: 2.25vh;
    color: #6ba8a8;
    margin-top: 0.25vh;

}

.centrar{

    display: flex;
    justify-content: center;

}

.estructura_pestanas{

    display: grid;
    grid-template-columns: 20% 80%;

}

.marco_pestanas{

    border: 0.2vh solid #8a7bb3;
    border-radius: 0.6vh;
    height: 4vh;
    width: 10vw;
    background:#8a7bb3;
    margin: 0vh 0.2vw;
    padding: 0.5vh 0vw;
    font-size: 1vw;
    text-align: center;

}

.marco_pestanas:hover{
    filter: brightness(1.1);
}

.contenedor_detalle{

    margin: 4vh 1vw;

}

.titulo_nivel1{

    font-size: 2.1vh;
    border-bottom: 0.15vh solid white;

}

/*INCIDENCIA*/

.titulo_alertas{

    font-size: 2.2vh;
    border: #161b22;
    border-bottom: 0.15vh solid white;
    padding: 0.5vh 0;
    background-color: #161b22;
    width: 100%;
    text-align: left;
    margin-top: 4vh;

}

.titulos_detalle1{

    font-size: 1.1vw;
    text-align: center;
    margin: 0.25vh 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

}

.titulos_detalle2{

    font-size: 1.9vh;
    color: #6ba8a8;/*ba7087;*/
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 1vh 0;

}

.titulos_detalle3{

    font-size: 1.9vh;
    color: #c4923a;/*ba7087;*/
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 1vh 0;

}

.titulos_detalle4{

    font-size: 0.9vw;
    color: #6ba8a8;/*ba7087;*/
    text-align: center;
    margin: 1vh 0.25vw;
    margin-top: -2vh;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

}

.titulo_analisis_inc{

    font-size: 2vh;
    margin-top: 1vh;

}

.valor_analisis_inc{

    font-size: 3vh;
    margin-top: 2vh;

}

.marcos_desplegable{

    border:0.25vh solid #1f2630;
    border-radius: 1vh;
    height:37.5vh;
    background:#0a0d12;
    margin: 0.4vh;
    padding: 1vh 2vh;

}

.marcos_desplegable_inv{

    border:0.25vh solid #1f2630;
    border-radius: 1vh;
    height:92vh;
    background:#0a0d12;
    margin: 0.4vh;
    padding: 1vh 2vh;

}

.marco_todas{

    border: 0.2vh solid #161b22;
    border-radius: 0.8vh;
    height: 79vh;
    background:#161b22;
    margin: 2vh 1vh;
    padding: 1vh 2vh;
    transition: height 0.6s ease;
    overflow: hidden;

}

.estructura_nuevo_nodo{

    display: grid;
    grid-template-columns: 60% 20% 20%;

}

.estructura_desc_ubi{

    display: grid;
    grid-template-columns: 50% 50%;
    border-bottom: 0.15vh solid white;

}

.input_desc_ubi{

    width: 15vh;
    font-size: 2.5vh;
    height: 4vh;
    font-weight: bold;
    background:#1f2630;
    color: white;
    border: none;
    border-radius: 0.6vh;
    text-align: center;

}

.estructura_inc{

    display: grid;
    grid-template-columns: 20% 80%;
    margin-top: 2vh;

}

.estructura_inc1_sub{

    display: grid;
    grid-template-columns: 50% 35% 15%;
    border-bottom: 0.2vh solid white;
    margin-top: 2vh;

}

.estructura_inc1{

    display: grid;
    grid-template-columns: 50% 35% 15%;
    border-bottom: 0.2vh solid white;
    margin-top: 2vh;

}

.estructura_inc2{

    display: grid;
    grid-template-columns: 50% 35% 15%;
    border-bottom: 0.15vh solid #5eb88e;
    padding-top: 0.5vh;
    padding-bottom: 0.5vh;

}

.estructura_inc22{

    display: grid;
    grid-template-columns: 4% 7% 5% 14% 18% 14% 13% 13% 4% 8%;
    border-bottom: 0.15vh solid #5eb88e;
    padding-top: 0.7vh;
    padding-bottom: 1vh;

}

.input_inc{

    font-size: 1vw;
    height: 3.5vh;
    margin-bottom: 0.25vh;
    font-weight: bold;
    background:#1f2630;
    color: white;
    border: none;
    border-radius: 0.6vh;
    text-align: center;
    width: 100%;
    margin-bottom: 1vh;

}

.input_inc_cons{

    width: 5vw;
    margin-right: 1vh;

}

.input_inc_obs{

    width: 60vh;

}

.input_inc_anaotro{

    width: 10vh;

}

.input_inc_cant{

    width: 6vh;
    font-size: 2.5vh;
    height: 4vh;

}

.boton_actcant{

    border:0.2vh solid #1f2630;
    border-radius:0.6vh;
    background:#1f2630;
    height: 4.5vh;
    width: 13vh;
    margin: 0.6vh 2vh;
    margin-right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2vh;
    padding: 0 1vh;
    
}

.input_inc_descubi{

    width: 15vh;
    height: 4vh;

}

.input_inc_ip{

    width: 5vh;

}

.estructura_ip{

    display: grid;
    grid-template-columns: repeat(7, 14.2857%);
    margin-left: -2vh;

}

.input_inc_mac{

    width: 3.2vh;

}

.estructura_mac{

    display: grid;
    grid-template-columns: repeat(11, 9.091%);
    margin-left: -2vh;

}

.separador_mac{

    font-size: 1.7vh;
    margin-top: 1.5vh;
    text-align: center;
    margin-left: 0.8vh;
    margin-right: -0.8vh;

}

.separador_ip{

    font-size: 1.7vh;
    margin-top: 1.5vh;
    text-align: center;
    margin-left: 1vh;
    margin-right: -1vh;

}

.espacio_check_vert{

    padding: 2vh 0;

}

.espacio_check{

    margin: 0 2vh;

}

.lista_nodo{

    font-size: 2.2vh;
    border-bottom: 0.15vh solid white;
    color: #6ba8a8;

}

.lista_hmi{

    font-size: 2vh;
    margin-left: 40vh;
    color: #6b8caf;

}

.lista_ipc{

    font-size: 2vh;
    margin-left: 40vh;
    color: #cc6e6a;

}

.lista_plc{

    font-size: 2vh;
    margin-left: 40vh;
    border-bottom: 0.15vh solid white;
    color: #c4923a;

}

.lista_anal{

    font-size: 1.8vh;
    margin-left: 80vh;
    color: #5eb88e;

}

.lista_otro{

    font-size: 1.8vh;
    margin-left: 80vh;
    color: #7ac9a3;

}

.unidades_tam{

    font-size: 1.9vh;

}

.estructura_botones_edicion{

    display: grid;
    grid-template-columns: 90% 10%;
    justify-content: right;

}

.marco_botones_edicion{

    border:0.2vh solid #161b22;
    border-radius:0.8vh;
    background:#1a2029;
    height: 5vh;
    margin-left: 0.5vw;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1vw;

}

.marco_botones{

    border:0.25vh solid #1f2630;
    border-radius:0.6vh;
    background:#161b22;
    height:4vh;
    font-size: 1.75vw;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0vh 0.25vw;
    padding: 0 1vw;
    margin-right: -0.4vw;

}

.marco_detalle{

    border: 0.2vh solid #161b22;
    border-radius: 0.8vh;
    height: 29vh;
    background:#161b22;
    margin: 1vh 0.5vw;
    padding: 1vh 0vw;

}

.marco_detalle_inv{

    border: 0.2vh solid #161b22;
    border-radius: 0.8vh;
    height: 82.5vh;
    background:#161b22;
    margin: 1vh 0.5vw;
    padding: 2vh 1.5vw;

}

.marco_detalle2{

    padding: 0vh 1vw;

}

.titulo_detalle{

    font-size: 0.75vw;
    color: #6ba8a8;
    margin-top: 1.5vh;
    margin-bottom: -0.25vh;

}

.titulo_detalle_det{

    font-size: 0.85vw;
    color: #6ba8a8;
    margin-top: 1vh;
    margin-bottom: -0.25vh;

}

.titulo_detalle2{

    font-size: 0.85vw;
    color: #6ba8a8;
    margin-bottom: -0.75vh;
    margin-top: 0.5vh;

}

.titulo_detalle3{

    font-size: 0.85vw;
    color: #6ba8a8;
    margin-bottom: -1.25vh;
    margin-top: -1vh;

}

.titulo_detalle4{

    font-size: 0.75vw;
    color: #6ba8a8;
    margin-top: -0.75vh;

}

.valor_detalle{

    font-size: 1.25vw;
    margin-top: -0.75vh;
    margin-bottom: 1vh;
    line-height: 3vh;

}

.valor_detalle2{

    font-size: 1vw;
    margin-top: -0.75vh;
    margin-bottom: 1vh;
    line-height: 3vh;

}

.valor_detalle_det{

    font-size: 1vw;
    margin-top: -0.75vh;

}

.valor_detalle3{

    font-size: 1.75vw;
    margin-bottom: 0.5vh;

}

.valor_detalle_inv{

    font-size: 1.25vw;
    margin-top: -0.75vh;
    margin-bottom: 1vh;

}

.pendiente {
    display: block; /* Mostrar */
}

.resuelta, .no-resuelta {
    display: none; /* Ocultar */
}

.barra_deslizadera{

    max-height: 64vh;
    overflow-y: auto;

}

.grafica{

    height: 27.5vh;
    margin: 2vh 0.5vw;
    margin-top: -0.5vh;

}

.marco_graficas{

    margin: 0 1vw;

}

.desplegables_ban{

    border: none !important;
    border-radius:0.6vh;
    background: #1f2630 !important;
    padding: 1vh 0vw !important;
    margin: 0vh 0.25vw;
    display: flex !important;
    height: 4vh;
    width: 8.5vw;
    justify-content: center !important;
    align-items: center !important;
    font-size: 0.85vw !important;
    font-weight: bold !important;
    max-width: 22vw !important;
    white-space: nowrap;
    text-overflow: ellipsis;

}

.desplegables_ban_detalle{

    border: none !important;
    border-radius:0.6vh;
    background: #1f2630 !important;
    padding: 0vh 0.5vw !important;
    margin: 0vh 0vw;
    margin-bottom: 0.25vh;
    height: 3.5vh;
    width: 8vw;
    justify-content: center !important;
    align-items: center !important;
    font-size: 0.9vw !important;
    font-weight: bold !important;
    max-width: 22vw !important;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden !important;
    width: 100%;
    margin-bottom: 1vh;

}

.desplegables{

    border: none !important;
    border-radius:0.6vh;
    padding: 0.5vh 1.5vw !important;
    margin: 0vh 0vw;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1vw !important;
    font-weight: bold !important;
    max-width: 22vw !important;
    white-space: nowrap;
    text-overflow: ellipsis;

}

.desplegado{

    background:#1f2630 !important;
    color: white !important;
    font-weight: bold !important;
    max-height: 30vh; 
    overflow-y: auto; 
    border: 0.1vh solid #1a2029;
    cursor: pointer;
    font-size: 0.8vw !important;

}

.marco_boton_guardar{

    border-radius:0.6vh;
    background:#5eb88e;
    height:5vh;
    font-size: 0.9vw;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0vh 0.25vw;
    margin-top: 0vh;
    padding: 0vh 0.75vw;
    cursor: pointer;
    color: white;
    text-decoration: none;

}

.reparto{

    height: 18vh;
    width: 100%;
    margin-top: 1.5vh;

}

.desplegables_banner{

    border: none !important;
    border-radius:0.6vh;
    background: #1f2630 !important;
    padding: 0vh 0.5vw !important;
    margin: 0vh 0.5vw;
    margin-left: 1vw;
    display: flex;
    height: 4vh;
    justify-content: center;
    align-items: center;
    font-size: 1.7vh !important;
    font-weight: bold !important;
    max-width: 22vw !important;
    white-space: nowrap;
    text-overflow: ellipsis;

}


.desplegado_banner{

    background:#1f2630 !important;
    color: white !important;
    font-weight: bold !important;
    border: 0.1vh solid #1a2029;
    cursor: pointer;
    font-size: 0.85vw !important;


}

.dropdown-menu.desplegado_banner {
    width: 2.5vw !important;
    min-width: 2.5vw !important;
    max-width: 2.5vw !important;
}

/*MODAL*/

.marco_tipo{

    border: none !important;
    border-radius: 0.4vh !important;
    background:#5eb88e !important;
    margin: 3vh 0vw !important;
    height: 7vh !important;
    width: 5vw !important;
    margin-left: 0.5vw !important;
    font-size: 1.5vw !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    cursor: pointer !important;
    font-weight: bold !important;

}

.icono_alerta{

    height: 2.5vw;

}

/* ----------------- BUSCADOR ----------------- */

.input_of {
    font-size: 0.9vw;
    height: 3.5vh;
    font-weight: bold;
    background: #1f2630 !important;
    padding: 0.75vh 0.5vw !important;
    margin: 0vh 0.25vw;
    height: 4vh;
    width: 8.5vw;
    color: white;
    border: none;
    border-radius: 0.6vh;
    text-align: center;
    position: relative; /* Necesario para que las opciones se alineen correctamente */
    white-space: nowrap;
    text-overflow: ellipsis;
}

.input_of_des {
    font-size: 0.9vw;
    height: 3.5vh;
    font-weight: bold;
    background: #1f2630 !important;
    padding: 0.75vh 0.5vw !important;
    margin: 0vh 0.25vw;
    height: 4vh;
    width: 8.5vw;
    color: white;
    border: none;
    border-radius: 0.6vh;
    text-align: center;
    position: relative; /* Necesario para que las opciones se alineen correctamente */
    white-space: nowrap;
    text-overflow: ellipsis;
    opacity: 0.72;
}



    /*border: none !important;
    border-radius:0.6vh;
    background: #1f2630 !important;
    padding: 0.75vh 0vw !important;
    margin: 0vh 0.25vw;
    display: flex;
    height: 4vh;
    width: 8vw;
    justify-content: center;
    align-items: center;
    font-size: 0.9vw !important;
    font-weight: bold !important;
    max-width: 22vw !important;
    white-space: nowrap;
    text-overflow: ellipsis;*/

.opciones_of {
    max-height: 30vh;
    overflow-y: auto;
    background: #1f2630;
    position: absolute; /* Hacer que se superponga */
    top: 100%; /* Colocarlo justo debajo del input */
    left: 0;
    width: 20vw; /* Asegurar que tenga el mismo ancho que el input */
    z-index: 10; /* Asegurarse de que esté por encima de otros elementos */
    visibility: hidden; /* Ocultar por defecto */
}

.opciones_of_lista{

    padding: 0.75vh 0;
    cursor: pointer;
    list-style-type: none;

}

.opciones_of.visible {
    visibility: visible; /* Hacerlo visible cuando corresponda */
}