html, body {
margin: 0;
padding: 0;
overflow: hidden; /* opcional, evita scroll extra */
}
#captura {
display: block; /* evita inline-block que añade espacios */
margin: 0;
padding: 0;
}
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;
}
.estructura_marcos{
display: grid;
grid-template-columns: 17.95% 81.95%;
}
.estructura_marcos_fv_sub{
display: grid;
grid-template-columns: 100%;
}
.estructura_datos{
display: grid;
grid-template-columns: 60% 40%;
}
.estructura_velocimetros_estr{
display: grid;
grid-template-columns: 10% 90%;
}
/*MANTENIMIENTO*/
.marco_mantenimiento{
border:0.25vh solid #1f2630;
border-radius:1.2vh;
height:6vh;
width:auto;
background:#0a0d12;
margin: 0.4vh;
margin-bottom: 0.4vh;
padding: 1vh 2vh;
}
.titulo_barra_vertical{
font-size: 0.85vw;
color: #e8ecf0;
display: flex;
justify-content: center;
align-items: center;
}
.barra_vertical_gris{
border-left: 0.3vw solid #7d8690;
height: 3.5vh;
}
.barra_vertical_verde{
border-left: 0.3vw solid #5eb88e;
height: 3.5vh;
}
.barra_vertical_amarilla{
border-left: 0.3vw solid #c4923a;
height: 3.5vh;
}
.barra_vertical_roja{
border-left: 0.3vw solid #cc6e6a;
height: 3.5vh;
}
.estructura_barras{
display: grid;
grid-template-columns: 4vw repeat(18, 0.5vw);
}
.estructura_mantenimiento{
display: grid;
grid-template-columns: 22% 32% 32% 14%;
}
/*ANALISIS DIARIO*/
.marcos_principales{
border:0.25vh solid #1f2630;
border-radius:1.2vh;
height:92.25vh;
background:#0a0d12;
margin: 0.8vh 0.4vh;
margin-top: 0.4vh;
padding: 1vh 2vh;
}
.marcos_principales_sin{
border:0.25vh solid #1f2630;
border-radius:1.2vh;
height:47.75vh;
background:#0a0d12;
margin: 0.4vh 0.4vh;
margin-top: 0.4vh;
padding: 1vh 2vh;
}
.marcos_principales_sin2{
border:0.25vh solid #1f2630;
border-radius:1.2vh;
height:43.75vh;
background:#0a0d12;
margin: 0.4vh 0.4vh;
margin-top: 0.4vh;
padding: 1vh 2vh;
}
.estructura_botones{
display: grid;
grid-template-columns: 3% 53.5% 44%;
}
.estructura_botones_sin{
display: grid;
grid-template-columns: 18.5% 82%;
margin-bottom: 1vh;
}
.subestructura_botones{
display: grid;
grid-template-columns: repeat(6, 5.5vh);
grid-gap: 0.55vh;
}
.estructura_interna_marcos_diario{
display:grid;
grid-template-columns: 13.5% 86.5%;
}
.estructura_interna_marcos{
display:grid;
grid-template-columns: 28% 72%;
}
.titulo_marcos{
font-size: 2.2vh;
margin-bottom: -0.5vh;
color: #6ba8a8;
}
.titulo_marcos_sin{
font-size: 2.2vh;
margin-bottom: 0.5vh;
color: #6ba8a8;
}
.titulo_marcos_mant_cal{
font-size: 1vw;
display: flex;
align-items: center;
color: #6ba8a8;
}
.titulos_nivel_1{
font-size: 2vh;
color: #7ac9a3;
margin-top: 0.9vh;
}
.titulos_nivel_2{
color: #7ac9a3;
font-size: 1.5vh;
margin-top: 1vh;
}
.titulos_nivel_3{
font-size: 1.7vh;
margin-top: 1vh;
}
.titulos_nivel_4{
font-size: 1.6vh;
margin-top: -0.5vh;
color: #7ac9a3;
}
.valores_nivel_1{
font-size: 3.8vh;
margin-top: -1.5vh;
}
.valores_nivel_2{
font-size: 2.4vh;
margin-top: -1vh;
margin-bottom: -0.4vh;
}
.valores_nivel_3{
font-size: 1.9vh;
margin-top: -0.9vh;
margin-bottom: -0.4vh;
}
.valores_nivel_4{
font-size: 1.9vh;
margin-top: -1vh;
margin-bottom: -1vh;
}
.valores_nivel_5{
font-size: 1.6vh;
margin-top: -1.2vh;
}
.texto_lim_nivel_1{
font-size: 1.7vh;
color: #e8ecf0;
margin-top: -1.2vh;
}
.texto_des_nivel_1{
font-size: 1.7vh;
color: #e8ecf0;
margin-top: -0.8vh;
}
.texto_lim_nivel_2{
font-size: 1.6vh;
color: #e8ecf0;
margin-top: -0.9vh;
}
.texto_des_nivel_2{
font-size: 1.6vh;
color: #e8ecf0;
margin-top: -1.1vh;
}
.texto_lim_nivel_4{
font-size: 1.6vh;
color: #e8ecf0;
margin-top: -1.1vh;
}
.texto_des_nivel_4{
font-size: 1.6vh;
color: #e8ecf0;
margin-top: -1.1vh;
}
.icono_reloj{
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
color: white;
margin: 0.5vh 0vh;
}
.graficos_reparto{
height: 9vh;
margin: 1.5vh 0;
}
.graficos{
height: 39.5vh;
margin: 1.5vh 0;
}
.graficos_sin{
height: 21vh;
margin: 1vh 0;
}
.graficos_sin2{
height: 35vh;
margin: 0.5vh 0;
}
/*PLANIFICACION ENERGETICA*/
.marco_suministro{
border:0.25vh solid #1f2630;
border-radius:1.2vh;
height:6vh;
width:auto;
background:#0a0d12;
margin: 0.4vh;
margin-bottom: 0.4vh;
padding: 1vh 2vh;
}
.estructura_suministro{
display: grid;
grid-template-columns: 14% 26% 22% 23% 15.8%;
}
.texto_calidad_suministro{
font-size: 0.85vw;
display: flex;
align-items: center;
justify-content: center;
color: rgb(200,205,210);
}
.dato_calidad_suministro{
font-size: 0.85vw;
display: flex;
align-items: center;
color: white;
}
.marco_botones{
border:0.25vh solid #1f2630;
border-radius:0.6vh;
background:#161b22;
height:3.4vh;
font-size: 0.8vw;
display: flex;
align-items: center;
justify-content: center;
margin: 0vh 0.2vw;
padding: 0 0.5vw;
}
.marco_botones_ad, .marco_botones_pen, .marco_botones_am{
border:0.19vh solid #7d8690;
border-radius:0.8vh;
background:#161b22;
height: 3.4vh;
width: 5.5vh;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.7vh;
margin: 0 0.2vh;
}
.marco_botones_ad_agua{
border:0.19vh solid #7d8690;
border-radius:0.8vh;
background:#161b22;
height: 3.4vh;
width: 9vh;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.7vh;
margin: 0 0.2vh;
}
.marco_boton_iluminado{
border: 0.19vh solid #c4923a;
color: #c4923a;
}
.marco_boton_rojo{
border:0.19vh solid #cc6e6a;
color: #cc6e6a;
}
.marco_titulos_botones{
border:0.19vh solid #c4923a;
border-radius:0.8vh;
background:#161b22;
height:3.8vh;
width: 11vh;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.7vh;
}
.titulos_botones{
color: #c4923a;
text-decoration: none;
cursor: pointer;
}
/*LINEA PUNTEADA*/
.line {
margin-top: -0.2vh;
height: 0.22vh;
width: 11vh;
background: repeating-linear-gradient(
to right,
white,
white 1.2vh,
black 1.2vh,
black 2.2vh
);
}
.line2{
height: 0.22vh;
width: 11vh;
margin-top: -0.4vh;
margin-bottom: 0.4vh;
background:repeating-linear-gradient(
to right,
#cc6e6a,
#cc6e6a 1.2vh,
black 1.2vh,
black 2.2vh
);
}
.lim_rmp{
font-size: 1.7vh;
}
.desplegables_ban{
border: none !important;
border-radius:0.6vh;
background: #1f2630 !important;
padding: 0vh 0.5vw !important;
margin: 0vh 0.25vw;
display: flex;
height: 3.4vh;
width: 6.5vw;
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;
}
.desplegables_ban2{
border: none !important;
border-radius:0.6vh;
background: #1f2630 !important;
padding: 0vh 0.5vw !important;
margin: 0vh 0.25vw;
display: flex;
height: 3.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{
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.85vw !important;
overflow-x: hidden;
}
.marco_fecha_2{
border-radius:0.6vh;
background:#1f2630;
height: 3.4vh;
width: 12.5vw;
margin-right: 0.2vw;
margin-left: 0.2vw;
display: flex;
justify-content: center;
align-items: center;
padding: 0 0.25vw;
padding-left: 0.75vw;
font-size: 0.85vw;
white-space: nowrap;
}
.fecha_2{
border: 0.15vh solid #1f2630;
background-color: #1f2630;
color: white;
height: 3vh;
font-size: 0.85vw;
font-weight: 600;
margin: 0 0.25vw;
min-width: 0;
overflow: hidden;
}
.estructura_res1_sub{
display: grid;
grid-template-columns: repeat(7, 14.2%);
margin-top: -2vh;
border-bottom: 0.2vh solid white;
}
.estructura_res1{
display: grid;
grid-template-columns: repeat(7, 14.2857%);
margin-top: -2vh;
border-bottom: 0.2vh solid white;
}
.estructura_res2{
display: grid;
grid-template-columns: repeat(7, 14.2857%);
border-bottom: 0.15vh solid #5eb88e;
padding-top: 1vh;
padding-bottom: 1vh;
}
.titulos_detalle4{
font-size: 0.85vw;
color: #6ba8a8;/*ba7087;*/
text-align: center;
margin: 1vh 0;
margin-top: 2vh;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.centrar_vert{
display: flex;
justify-content: center;
align-items: center;
}
.centrar_vert_maq{
display: flex;
justify-content: center;
align-items: center;
}
.titulos_detalle1_n1{
font-size: 0.75vw;
margin: -0.45vh 0;
text-align: center;
}
.titulos_detalle1{
font-size: 0.75vw;
margin: -0.45vh 0;
text-align: center;
}
.barra_deslizadera_det{
max-height: 33vh;
overflow-y: auto;
}
.titulo_vel_estr{
font-size: 1.5vh;
margin-bottom: -1.5vh;
margin-top: 1.75vh;
}
.titulo_vel_estr2{
font-size: 1.5vh;
margin-bottom: -1.5vh;
margin-top: 5vh;
}
.titulo_vel_estr3{
font-size: 1.5vh;
margin-bottom: -1.5vh;
margin-top: 7.75vh;
}
.cont_vel_estr {
position: relative;
width: 11vh;
height: 11vh;
}
.valor_vel_estr {
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 1.7vh;
text-align: center;
line-height: 1.5vh;
}
.lim_des_vel_estr{
text-align: center;
font-size: 1.1vh;
margin-top: -0.5vh;
}
/* ----------------- BUSCADOR ----------------- */
.input_of {
font-size: 0.65vw;
height: 3vh;
font-weight: bold;
background: #1f2630 !important;
padding: 0.75vh 0.5vw !important;
margin: 0vh 0.25vw;
height: 3.4vh;
width: 6.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.65vw;
height: 3vh;
font-weight: bold;
background: #1f2630 !important;
padding: 0.75vh 0.5vw !important;
margin: 0vh 0.25vw;
height: 3.4vh;
width: 6.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 */
}