body {
    background: #ffffff; 
    color: rgba(0,0,0,0.87); 
    font-family: Roboto, Helvetica, Arial, sans-serif; 
    width:98%;
    
}
.texto_titulo{
    font-size: 17px;
    font-weight: bold;
    color: #303030;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++++++++++++   ESTILOS PARA LA BIENVENIDA    +++++++++++++++++++++++++++++++
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

#div_pagina_bienvenida {
    margin: 0;
    top: 0;
    left: 0;
    background-image: url(REFINERIA-PORTADA-6.png); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100vw; /* Ancho completo del viewport */
    height: 100vh; /* Altura completa del viewport */
    display: block;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #f0f0f0;
}
#contenedor_bienvenida {
    width: 80%;
    max-width: 600px; /* Limita el ancho máximo del contenedor */
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-left: 10%;
    margin-top: 3%;
    font-family: Arial, sans-serif;
    background-color: rgba(0, 0, 0, 0.5); /* Añade un fondo semitransparente opcional */
    border-radius: 10px; /* Redondea los bordes del contenedor */
}
#titulo_bienvenida {
    color: #b1a832; /* Yellow for primary elements */
    font-size: 2.5rem;
    margin: 0;
    padding-top:15% ;
}
#subtitulo_bienvenida{
    color: wheat;
    font-size: 13px;
}
#btn_empezar_bienvenida{
    background-color: #8b6600;
    color: #f2f3ab;
    border: none;
    padding: 12px 24px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s;
    text-transform: uppercase;
}
#btn_empezar_bienvenida:hover {
    background-color: #cacaca;
}
#footer_bienvenida{
    margin-top: 20px;
    font-size: 0.9rem;
    color: #999;
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++++++++++++   ESTILOS PARA LA BARRA DE TITULO    ++++++++++++++++++++++++++
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
#div_titulo_desktop{
    position: fixed;
    top: 0;
    width: 100%;
    margin-left: 0px;
    z-index: 100;
    background-position: center;
}
#div_header_titulo{
    display: flex; 
    justify-content: space-between; 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;  
    height: 80px; 
    background:  rgb(255, 253, 211);
}
#div_header_titulo2{
    display: flex; 
    justify-content: space-between; 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;  
    height: 80px; 
    background: linear-gradient(45deg, #adadad, #9b9898, #757575, #525151, #303030);
    background-size: 400% 400%; /* Tamaño del degradado para animación */
    animation: metallic-shine 3s infinite; /* Animación de brillo */
    box-shadow: inset 0 1px 2px rgba(156, 156, 156, 0.5), /* Efecto de reflejo interno */
                inset 0 -1px 2px rgba(0, 0, 0, 0.2); /* Sombra interna */
               /* 0 4px 8px rgba(0, 0, 0, 0.3);  Sombra externa */
    border: 1px solid #999999; /* Borde sutil */
}
#titulo_header{
    margin: 0px; 
    font-size: 39px; 
    color: rgb(124, 86, 68); 
    font-weight: bold;
    padding-left: 25px; 
    padding-top: 20px;
}
#lbl_saludo_usuario:hover{
    cursor: pointer;
}

/* Animación del degradado */
@keyframes metallic-shine {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
/*
+++++++++++++   SECCION LOGIN   +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
*/

#div_acceso_login{
    display: flex;
}
#btn_login {
    display: grid;
    grid-template-rows: auto auto;
    padding: 10px;
    padding-right: 25px;
    padding-left: 25px;
    text-align: center;
    color: rgb(43, 104, 51);
}
#btn_logout{
    display: grid;
    grid-template-columns: auto auto;
    padding: 10px;
}
#btn_logout:hover{
    background: rgba(238, 0, 0, 0.39);
    cursor: pointer;
    color: red;
}
#btn_login:hover{
    
    cursor: pointer;
    font-weight: bolder;
}
#btn_logout_header{
    display: grid;
    grid-template-rows: auto auto;
    text-align: left;
}

/*
+++++++++++++   SECCION FORMULARIO LOGIN  ++++++++++++++++++++++++++++++++++++++++++++++++++
*/
.fondo_ventana_emergente{
    background-color: rgba(31, 29, 29, 0.473);
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
#ventana_inicio_sesion{
    width: 40%;
    position: relative;
    padding: 30px;
    margin: 10% auto;
    background: rgba(17, 1, 17, 0.733);
    color: rgb(197, 197, 197);
    backdrop-filter: blur(10px);
    border-color: #9b1367ea;
    border: 2px;
    border-radius: 20px;
}
#container_inicio_sesion{
    display: grid;
    grid-auto-rows: auto;
}
.input_login{
    width: 90%;
    margin-top: 10px;
    height: 35px;
}
.btn_login{
    font-size: 14px;
    margin: 10px;
    text-align: center;
}
#btn_login_login:hover{
    color: #32bb08;
    font-weight: bold;
    cursor: pointer;
}
#btn_login_cancelar:hover{
    color: darkred;
    font-weight: bold;
    cursor: pointer;
}

/*
+++++++++++++   SECCION BARRA OPCIONES  ++++++++++++++++++++++++++++++++++++++++++++++++++++
*/
#barra_opciones{
    display: flex;
    justify-content: space-between;
    background-color: white;
    margin-bottom: 10px;
    z-index: 100;
}
.btn_opciones{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color:rgba(226, 164, 200, 0) ;
    color: rgb(80, 80, 80);
    font-weight: normal;
    padding: 10px;
    cursor: pointer;
    border-style: hidden;
    font-size: 14px;
}
.btn_opciones:hover{
    font-size: 15px;
    color: rgb(124, 86, 68); 
    font-weight: bold;
}

/*
+++++++++++++   SECCION HOJA DE VIDA DEL USUARIO  ++++++++++++++++++++++++++++++++++++++++++++++++++++
*/
#fondo_ventana_usuario{
    background-image: url(FONDO-TEXTURA-ALUM.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
#barra_superior_hoja_usuario{
    background-color: #2f4f7f;
    color: aliceblue;
    padding: 8px;
    display: flex;
    justify-content: space-between;
    border-radius: 10px 10px 0px 0px;
}
#btn_cerrar_formulario_usuario{
    font-weight: bold;
    text-align: center;
    align-self: center;
    padding-right: 5px;
}
#btn_cerrar_formulario_usuario:hover{
    cursor: pointer;
}
#ventana_formulario_usuario{
    width: 40%;
    height: 80%;
    position: relative;
    margin-top: 5%;
    margin-left: 30%;
    background-color: aliceblue;
    border-radius: 10px;
}
#datos_personales_usuario{
    padding: 10px;
}
#div_historial_usuario{
    padding: 10px;
}
.transaccion{
    background-color: aquamarine;
    border-radius: 8px;
    padding: 6px;
    margin-bottom: 5px;
}


/*
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
                       ESTILOS PARA EL MAPA
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
*/
 /* Estilo del marcador */
.marcador {
    position: absolute;
    width: 20px; /* Ajusta el tamaño del marcador */
    height: 25px;
    animation-name: parpadeo;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

/* Estilo del ícono de marcador */
.marcador img {
    width: 100%;
    height: 100%;
}
/* Contenedor para el mapa */
#map-container {
    position: relative;
    display: inline-block;
}
/*
+++++++++++++   SECCION FORMULARIO DETALLE MAPA  ++++++++++++++++++++++++++++++++++++++++++++++++++++
*/
#detalle_tarea_mapa{
    background-color: #ffffff00;
}
#ventana_detalle_tarea{
    border-radius: 10px;
    background-color: #ffffffcc;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.411), 0 0 0 4px rgba(0, 0, 0, 0.021);
}
.ventana_emergente_2{
    width: 70%;
    position: relative;
    padding: 30px;
    margin: 5% auto;
    background-color: aliceblue;
}
#container_titulo_detalle_tarea{
    display: grid;
    grid-template-columns: 70% 30%;
}
.btn_cerrar{
    font-size: 12px;
    text-align: end;
}
.btn_cerrar:hover{
    cursor: pointer;
    color: firebrick;
    font-weight: bold
    ;
}
#titulo_detalle_tarea{
    font-weight: bold;
}
#lista_personal_detalle_tarea_mapa{
    display: inline-flex;
    overflow: scroll;
    width: 100%;
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++++++++++++   ESTILOS PARA PROGRAMA 2 TURNOS    ++++++++++++++++++++++++++
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

/* Nuevos estilos backlog*/


.recurso_item{
    display: grid;
    grid-template-columns: 5% 15% 30% 25% 25%;
    align-items: center;
    background-color: #ffffff;
    padding-left: 15px;
    margin-bottom: 4px;
    height: 35px;
    border-radius: 4px;
    font-size: 13px;
}
.recurso_item_2{
    display: grid;
    grid-template-columns: 10% 40% 50%;
    align-items: center;
    background-color: #b1eca0;
    padding-left: 15px;
    margin-bottom: 4px;
    height: 35px;
    border-radius: 4px;
    font-size: 12px;
}

.area_title{
    background-color: #9e1687;
    padding: 4px;
}
.especialidad_title{
    background-color: #ad0000;
    padding: 8px;
}



/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++++++++++++   ESTILOS PARA PROGRAMA SEMANAL    ++++++++++++++++++++++++++
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.ventana_de_trabajo{
    padding: 10px;
    background: white;
    border-radius: 10px;
    margin-bottom: 15px;
    margin: 5px;
    width: 98%;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
}
#selector_area_psm,
#selector_psm {
    border: 1px; 
    height: 25px;
    width: 150px; 
    margin-right: 10px; 
    padding: 4px; 
    font-size: 1em; 
    border-radius: 4px; 
    color: rgb(65, 65, 65);
}
.btn_emergente{
    background: #af0a0a;
    color: #ffffff;
    font-size: 13px;
    font-weight: bold;
    padding: 6px;
    border-width: 0px;
    border-radius: 6px;
    margin-bottom: 15px;
}
.btn_emergente:hover{
    cursor: pointer;
}
#tabla_psm{
    width: 100%;
}
.div_tabla_psm{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}
.div_dia_psm{
    padding: 0px;
    background: white;
    border-radius: 2px;
    text-align: center;
}
.encabezado_psm{
    background: rgb(124, 86, 68);   
}
.encabezado_dia{
    font-weight: bold;
    padding-top: 4px;
    color: #ffffff;
    padding-bottom: 4px;
    font-size: 12px;
}
.encabezado_fecha{
    color: #f07713;
    padding-top: 2px;
    font-size: 12px;
    padding-bottom: 2px;
}

.data_operacion_psm{
    display: grid;
    grid-template-columns: 50% 50%;
}


.ventana_listado_recursos{
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 70%;
    height: 60%;
    margin-top: 3%;
    margin-left: 3%;
    overflow: scroll;
    padding: 8px;
}
.div_operacion_gantt {
    position: relative;
    margin-left: 0;
    height: 40px; /* Ajusta la altura según el diseño */
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 4px;
    overflow: hidden;
}

  .txt_psm_orden, .txt_psm_descripcion {
    color: #383838;
    font-size: 1rem;
    padding: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0px;
  }




/*
+++++++++++++   SECCION ESTILOS PSM GANTT ++++++++++++++++++++++++++++++++++++++++++++++++++++
*/
.gantt {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 2px;
      margin-top: 10px;
    }

    .header {
      font-weight: bold;
      text-align: center;
      background: #333;
      color: white;
      padding: 6px;
      border-radius: 4px;
    }

    .bar {
      background-color: #4caf50;
      color: white;
      text-align: center;
      padding: 6px;
      border-radius: 4px;
      grid-column: span 1;
    }

    .empty {
      height: 32px;
    }



/*
+++++++++++++   SECCION ESTADISTICAS PSM ++++++++++++++++++++++++++++++++++++++++++++++++++++
*/
#div_estadistica_psm{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 200;
    
}

.Titulo_ventanas_emergentes{
    margin: 0px;
    padding-left: 10px;
    padding-top: 10px;
    color: #fff679;
    font-size: 13px;
}
#btn_cerrar_estadisticas_psm{
    margin: 0px;
    padding-right: 10px;
    padding-bottom: 5px;
    padding-top: 5px;
    color: #fff679;
    font-weight: bold;
}

#barra_superior_estadisticas_psm{
    border-radius: 10px 10px 0 0;
    background-color: #25691c;
    display: flex;
    justify-content: space-between;

   
}

#div_scrolable{
    overflow: scroll;
    background-color: white;
    border-radius: 10px;
    height: 100%;
}

#ventana_estadisticas_psm{
    background-color: white;
    border-radius: 10px;
    height: 80%;
    width: 70%;
    margin-top: 5%;
    margin-left: 15%;
    
}
#div_kpi_psm{
    display: grid;
    grid-template-rows: auto auto auto;
    margin-bottom: 15px;
    width: 100%;
   
}
#div_indicadores_contrato{
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    justify-items: center;
    align-items: center;
    width: 100%;
}
.label_kpi{
    font-size: 13px;
    font-weight: bold;
    color: #555555;
    margin-top: 0px;
}
.dato_kpi{
    text-align: center; 
    font-size: 25px; 
    font-weight: bolder; 
    color: rgb(69, 107, 139); 
    margin-bottom: 8px;
}
#div_2_graficos{
    display: grid;
    grid-template-columns: 45% 45%;
    gap: 10%;
    padding: 5%;
    box-shadow: 0px 1px 3px  #303030;
    border-radius: 12px;
}


/*************************************************************************************
+++++++++++++   SECCION FORMULARIO EMERGENTES PSM  ++++++++++++++++++++++++++++++++++++++++++++++++++++
**************************************************************************************/
#formulario_emergente{
background-color: rgba(31, 29, 29, 0.473);
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index: 700;
}

  #formulario_operacion_emergente {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 12px;
    overflow: auto;
    height: 90%;
  }

  .ventana_formulario_emergente {
    padding: 20px;
    border-radius: 8px;
    background-color: #dac8a2;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 70%;
    height: 80%;
    margin: 40px auto;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
  }

  .form_horizontal {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 10px;
  }

  .form_group {
    display: flex;
    flex-direction: column;
  }

  .form_group input[type="text"],
  .form_group input[type="date"],
  .form_group input[type="number"],
  .form_group select,
  .form_group textarea {
    padding: 5px;
    border-radius: 4px;
    border: 1px solid #aaa;
  }

  .full_width {
    grid-column: span 3;
  }

  label {
    font-weight: bold;
    margin-bottom: 2px;
  }

  .boton_guardar {
    margin-top: 20px;
    padding: 8px 16px;
    background-color: #4caf50;
    border: none;
    border-radius: 4px;
    color: white;
    cursor: pointer;
  }

  .boton_guardar:hover {
    background-color: #45a049;
  }

  .barra_titulo_emergente {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }

  .barra_titulo_emergente h3 {
    margin: 0;
  }

  #btn_cerrar_formulario_emergente {
    background: none;
    border: none;
    font-weight: bold;
    font-size: 20px;
    cursor: pointer;
    color: brown;
  }
  #btn_cerrar_formulario_emergente:hover {
    cursor: pointer;
    color: aliceblue;
    background-color: brown;
    border-radius: 4px;
  }

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++
        ESTILOS PARA FORMULARIO DE REPORTE DIARIO PSM
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

/*  Nueva clase del reporte*/
.fondo_ventana_reporte_nueva{
    position: fixed; /* Fija el div en la ventana del navegador */
    top: 0;          /* Alinea el div en la parte superior */
    left: 0; 
    z-index: 350; /* Aumenta este valor si otros elementos también tienen z-index alto */
    background-color: rgba(255, 255, 255);
    width: 100%; 
    height: 100%;
    /*overflow: scroll;*/  
}

#ventana_reporte_diario_psm{
    width: 70%;
    height: 80%;
    /*overflow: scroll;*/
    padding-bottom: 25px;
    border-radius: 10px;
    background-color: rgb(255, 255, 255);
    margin-left: 15%;
    margin-top: 5%;
    z-index: 200;
}
#div_contenedor_detalle_tarea_psm{
    overflow: scroll;
    height: 100%;
}

.barra_titulo{
    background-color: rgb(110, 8, 88); 
    height: 25px;
    border-radius: 10px 10px 0px 0px;
    padding-bottom: 8px;
    padding-right: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#titulo_ventana_reporte_psm{
    color: aliceblue;
    font-size: 15px;
    padding-top: 8px;
    padding-left: 10px;
}
.barra_titulo_emergente{ 
    height: 35px;
    border-radius: 10px 10px 0px 0px;
    padding-top: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#btn_cerrar_reporte_diario_psm{
    font-size: 20px;
    font-weight: bold;
    color: aliceblue;
    padding: 4px;
}

#btn_cerrar_reporte_diario_psm:hover{
    cursor: pointer;
    color: red;
}
#div_descripcion{
    display: grid; 
    grid-template-rows: auto auto;
    text-align: center;
    margin-top: 10px;
}
#reporte_diario_descripcion_ot{
    color: rgb(22, 47, 66);
    font-weight: bold;
    font-size: 15px;
}
#reporte_diario_descripcion_op{
    color: rgb(22, 47, 66);
    font-size: 12px;
    margin-bottom: 15px;
}
.label_reporte_diario_psm{
    margin: 0px;
    padding-top: 2px;
    font-size: 12px;
    width: 100%;
    color: rgb(22, 47, 66);
}
.input_estado_operacion_psm{
    font-size: 12px;
    background-color: transparent;
    color: #0056b3;
    font-weight: bold;
    padding: 8px;
    margin: 10px;
    border: none;
}
#div_registro_hh{
    display: grid;
    grid-template-columns: auto auto;
    text-align: center;
    margin-top: 15px;
    color: aliceblue;
}
.div_hh_reporte_diario_psm{
    display: grid;
    grid-template-rows: auto auto;
    text-align: center;
}
.input_hh_reporte_diario_psm{
    width: 90px;
    margin-left: 35%;
    margin-bottom: 3px;
    height: 30px;
    text-align: center;
    font-size: 12px;
    border-radius: 5px;
    border-width: 0px;
    background-color: rgb(212, 212, 212);
}
#input_comentarios_reporte_diario_psm{
    border-radius: 5px;
    border-width: 0px;
}
#div_comentario_reporte_diario_psm{
    display: grid;
    grid-template-rows: auto auto;
    width: 80%;
    margin-left: 10%;
    margin-top: 10px;
}
#btn_actualizar_operacion_reporte_psm{
    margin-top: 30px;
    height: 40px;
    background-color: rgb(20, 128, 34);
    color: aliceblue;
    font-weight: bold;
    border-radius: 10px;
    border-width: 0px;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: 30%;
}
#btn_actualizar_operacion_reporte_psm:hover{
    cursor: pointer;
}
#div_comentariosyrecursos{
    display: grid;
    grid-template-columns: 50% 50%;
    text-align: center;
    margin-left: 20px;
    margin-right: 20px;
    height: 270px;
}
#listado_comentarios{
    padding: 4px;
    
    height: 200px;
    overflow: scroll;
    overflow-x: hidden;
}
#entrada_comentario{
    border-radius: 12px; 
    background-color: #12629777; 
    border: none; 
    padding-left: 8px; 
    width: 100%;
}
#listado_recursos{
    display: flex;
    padding: 4px;
    
    height: 200px;
    overflow: scroll;
    overflow-y: hidden;
}
.item_comentario{
    background-color: rgb(203, 175, 248);
    padding: 8px;
    margin: 5px;
    border-radius: 4px;
    box-shadow: 0px 1px 3px  #303030;
}
.label_comentario{
    margin: 0px;
    font-size: 13px;
    text-align: left;
}
.label_usuario{
    margin: 0px;
    text-align: right;
    font-size: 11px;
    color: rgb(90, 90, 90);
}
#btn_subir_reporte_psm{
    width: min-content; 
    background-color: rgb(255, 255, 255);
    padding: 8px;
    border-radius: 8px;
    font-weight: bold;
}
#btn_subir_reporte_psm:hover{
    cursor: pointer;
    box-shadow: 0px 0px 5px  #303030;

}
#div_botones_psm{
    display: grid;
    grid-template-columns: 40% 60%;
    margin-top: 30px;
    justify-items: center;
}
.item_recurso{
    background-color: aqua;
    width: max-content;
    height: min-content;
    padding: 15px;
    border-radius: 8px;
    margin: 4px;
    box-shadow: 0px 1px 3px  #303030;
}
.lbl_nombre_recurso{
    margin: 0px;
    font-size: 12px;
    font-weight: bold;
    width: max-content;
}
.lbl_cargo_especialidad_recurso{
    margin: 0px;
    font-size: 11px;
}

/*++++++++++++++++++++++++++++++++++++++++++++
   ESTILOS PARA BARRA DE BUSQUEA DE REPORTES
+++++++++++++++++++++++++++++++++++++++++++++*/
#BarraBusquedaReport{
    display: grid; 
    grid-template-columns: auto auto auto; 
    justify-content: center; 
    background-color: brown; 
    border: 15px; 
    margin-left: 25%; 
    margin-right: 25%; 
    width: 50%; 
    border-radius: 35px; 
    padding-left: 25px; 
    padding-right: 25px; 
    padding-top: 15px; 
    margin-top: 30px; 
    padding-bottom: 15px;
}
#area_reporte{
    background-color: aliceblue; 
    border: 0px; 
    border-radius: 20px 0 0 20px;
    padding: 8px;
    
}
#input_busqueda_reporte{
    padding-left: 4px; 
    background-color: aliceblue; 
    border: 0px; 
    padding: 8px;  
    
}
#btn_buscar_reporte_por_ot{
    background-color: aliceblue;
    border-radius: 0 20px 20px 0; 
    padding-right: 15px;
    padding-top: 5px;
    border: 0px;
    
}

/*++++++++++++++++++++++++++++++++++++++++++++
   ESTILOS PARA FORMULARIO DE PERFIL DE USUARIO
+++++++++++++++++++++++++++++++++++++++++++++*/

#btn_actualizar_perfil_usuario{
    background-color: #007bff;
    color: white;
    cursor: pointer;
    border: 0px;
    border-radius: 4px;
}
#btn_actualizar_perfil_usuario:hover{
    background-color: #0056b3;
}
#barra_titulo{
    display: grid;
    grid-template-columns: 95% 5%;
}

#historial_usuario {
    height: 100px;
    max-height: 150px;
    overflow-y: scroll;
    border: 1px solid #ccc;
    padding: 10px;
    background-color: #f9f9f9;
  }

  .historial_scrollable {
    font-size: 14px;
  }


  /*++++++++++++++++++++++++++++++++++++
        ESTILOS PARA FORMULARIO DEL TRABAJADOR
++++++++++++++++++++++++++++++++++++++++*/

#formulario_trabajador {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #ventana_formulario_trabajador {
    background-color: #f4f4f4;
    padding: 20px;
    border-radius: 10px;
    width: 600px;
    max-width: 90%;
  }
  #formulario_trabajador_detalles {
    display: flex;
    flex-wrap: wrap;
  }
  .form_group1 {
    flex: 1 1 45%;
    margin: 10px;
  }
  .full_width {
    flex: 1 1 100%;
  }
  .input_trabajador {
    width: 100%;
    padding: 8px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: Arial, sans-serif;
  }

  #btn_guardar_trabajador {
    background-color: #5cb85c;
    color: white;
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 20px;
  }
  #btn_guardar_trabajador:hover {
    background-color: #4cae4c;
  }
  #btn_cerrar_formulario_trabajador,
  #btn_cerrar_formulario_usuario {
    float: right;
    background-color: #d9534f;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 4px;
  }

  #btn_cerrar_formulario_trabajador:hover,
  #btn_cerrar_formulario_usuario:hover {
    background-color: #c9302c;
  }

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++
        FIN ESTILOS NUEVOS
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

.titulos_resumen_backlog{
    font-size: 14px;
    font-weight: bold;
    margin: 0px;
}
.numeros_resumen_backlog{
    font-size: 13px;
    margin: 0px;
}

.nuevoItemBackLog{
    border-radius: 5px;
    margin-top: 8px;
    padding: 8px;
    display: grid;
    grid-template-columns: 15% 15% 70%;
    font-size: 13px;
}

.nuevoItemBackLog:hover{
    cursor: pointer;
    color: rgb(255, 255, 255);
    font-weight: bold;
    background-color: rgb(151, 21, 21);
}

.nuevoItemBackLogPlanta{
    padding: 8px;
    margin-top: 25px;
    background-color: #ad0f5e;
    font-size: 16px;
    border-radius: 8px;
    font-weight: bold;
}


/*Estilos normales */


.Fila2Turnos2{
    display: grid;
    grid-template-columns: 7% 5% 3% 9% 25% 25% 3% 3% 20%;
    background: gainsboro; 
    margin-top: 4px; 
    padding-left: 12px; 
    padding-top: 6px; 
    padding-bottom: 6px; 
    border-radius: 12px;
    font-size: 11px;
}
.FilaHeader2Turnos{
    display: grid;
    grid-template-columns: 7% 5% 3% 9% 25% 25% 3% 3% 20%;
    color: rgb(151, 21, 21);
    margin-top: 4px; 
    padding-left: 12px; 
    padding-top: 6px;  
    border-radius: 12px;
    font-size: 12px;
    font-weight: bold;
}

.barra_avance_plan{
    height: 40px;
    width: 50%;
}

#pincho_hdt{
    height: 40px;
    width: 30px;
    position: relative;
    left: 820px;
    top: -310px;
}

#pincho_cok{
    height: 40px;
    width: 30px;
    position: relative;
    left: 950px;
    top: -300px;
}
#letrero_cok{
    height: 50px;
    width: 90px;
    border-radius: 4px;
    background-color: rgba(240, 248, 255, 0.377);
    position: relative;
    left: 950px;
    top: -200px;
    padding: 4px;
    font-size: 9px;
}
#pincho_tmto{
    height: 40px;
    width: 30px;
    position: relative;
    left: 1150px;
    top: -260px;
    animation-name: parpadeo;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    
}

#pincho_hck{
    height: 40px;
    width: 30px;
    position: relative;
    left: -10px;
    top: -160px;
    animation-name: parpadeo;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    
}
#pincho_cht{
    height: 40px;
    width: 30px;
    position: relative;
    left: 370px;
    top: -380px;
    animation-name: parpadeo;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    
}
#pincho{
    height: 40px;
    width: 30px;
    position: relative;
    animation-name: parpadeo;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    
}

.marcador_pincho{
    animation-name: parpadeo;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}
.marcador_pincho:hover{
    cursor: pointer;
}

@keyframes parpadeo {
    0%{
        opacity: 0%;
    }

    50%{
        opacity: 100%;
    }
    
    100%{
        opacity: 0%;
    }
}

.btn_agregar_item:hover{
    cursor: pointer;
    font-weight: bold;
}

.barra_gantt {
    background-color: #71D4E5;
    height: 20px;
}
  



/*
    ESTILOS PARA EL FORMULARIO DE INGRESO DE EMERGENTE
*/
.fondo_ventana_emergente {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 300;
  }

 
/*
  input, select, textarea {
    width: 100%;
    padding: 6px;
    margin-top: 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 12px;
    box-sizing: border-box;
  }

  input:focus, select:focus, textarea:focus {
    border-color: #4A90E2;
  }
*/
  .boton_guardar {
    width: 100%;
    padding: 12px;
    background-color: #4A90E2;
    color: white;
    font-weight: bold;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 15px;
  }

  .boton_guardar:hover {
    background-color: #357ABD;
  }
  
/*
    FIN ESTILOS PARA EL FORMULARIO DE INGRESO DE 
*/


.div_operacion{
    display: grid;
    grid-template-rows: auto auto auto;
    padding: 5px;
    text-align: center;
    background: #eeeeee;
    margin: 2px;
    border-radius: 6px;
    
}
.div_operacion:hover{
    cursor: pointer;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.411), 0 0 0 4px rgba(0, 0, 0, 0.021);
}

.txt_psm_estatus{
    font-size: 0.6rem;
    margin: 0px;
    font-weight: bold;
}

.txt_psm_orden{
    font-size: 0.6rem;
    font-weight: bold;
}

.txt_psm_descripcion{
    font-size: 0.6rem;
    margin: 0px;
}



.div_ingreso_tarea_horizontal{
    display: grid;
    grid-template-columns: 50% 50%;
    margin-top: 5px;
    height: 30px;
}
.div_titulo_ingreso_tarea{
    display: grid;
    grid-template-columns: 70% 30%;
}

.input_ingreso_tarea{
    height: 25px;
}

.input_ingreso_tarea_recursos{
    height: 25px;
    width: 35px;
    
}

.label_ingreso_tarea{
    font-size: 14px;
}

#btn_ingresar_ingreso_tarea_2turnos{
    width: min-content;
}

#btn_ingresar_ingreso_tarea_2turnos:hover{
    cursor: pointer;
    color: #32bb08;
    font-weight: bold;
}
.galeria_1{
    display: grid;
    grid-template-columns: 50%;
}

.pie_foto{
    text-align: end;
    font-style: italic;
    font-size: small;
}
.foto_galeria{
    border-radius: 20px;
}

.selector-fecha{
    text-align: center;
    margin-bottom: 10px;
}
.btn_fecha{
    background: none;
    border: none;
    font-size: 24px;
    font-weight: bold;
    color: royalblue;
    margin-left: 30px;
    margin-right: 30px;
}
.btn_fecha:hover{
    cursor: pointer;
    color: #4b4b4b;
}
.mostrador-fecha{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: rgb(97, 96, 95);
    font-weight: bold;
    background: none;
    border: none;
    padding: 4px;
    height: max-content;
}

#ventana_formulario{
    width: 60%;
    padding-top: 8px;
    padding-left: 5%;
    padding-right: 3%;
    padding-bottom: 5%;
    background: #ffffff;
    margin: 10%;
}
#btn_cerrar_formulario_operacion_diaria{
    margin-top: 8px;
    font-size: 20px;
    font-weight: bold;
    color: rgb(94, 94, 94);
}
#btn_cerrar_formulario_operacion_diaria:hover{
    cursor: pointer;
    color: #176ca5;
}
.titulo_operacion_diaria{
    text-align: center;
    font-size: 14px;
    color: #303030;
    font-weight: bold;
}
.texto_operacion_diaria{
    font-size: 12px;
    color: #303030;
    margin: 1px;
    text-align: end;
}
.input_operacion_diaria{
    width: 50%;
}
.div_horizontal{
    display: grid;
    grid-template-columns: 30% 70%;
    align-content: end start;
    margin: 5px;
}

#btn_cerrar_formulario_backlog:hover{
    cursor: pointer;
}

#div_trabajos_backlog{
    background-color: #ffffff;
    border-collapse: collapse;
}

#filtro_area_backlog{
    height: 40px;
    width: 50%;
}
#filtro_planta_backlog{
    height: 40px;
    width: 50%;
}

#container_backlog{
    background-color: rgb(255, 255, 255);
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
}

.opciones-pega{
    position: relative;
    margin: 100px;
}

#Graficos_curvaS{
    padding: 10px;
    background: white;
    border-radius: 10px;
    margin-bottom: 15px;

}
#btn_guardar_backlog:hover{
    cursor: pointer;
}
#btn_cancelar_backlog:hover{
    cursor: pointer;
}

#Graficos_histograma{
    padding: 10px;
    background: white;
    border-radius: 10px;
    margin-bottom: 15px;
}

#indicadores_hh_diaria_report{
    padding: 10px;
    background: white;
    border-radius: 10px;
    margin-bottom: 15px;
}

#indicadores_hh_diaria{
    padding: 10px;
    background: white;
    border-radius: 10px;
    margin-bottom: 15px;
}


#indicadores_resumen_hh_item{
    padding: 10px;
    background: white;
    border-radius: 10px;
    margin-bottom: 15px;
}



.reporte{
    padding: 10px;
    background: white;
    border-radius: 10px;
    margin-bottom: 15px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.btn_reporte{
    background-color: green;
    color: #c2c3c4;
    font-weight: bold;
    font-size: 16px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 6px;
    padding-bottom: 6px;
    border-radius: 10px;
    border: none;
}
.btn_reporte:hover{
    cursor: pointer;
    box-shadow: 0px 0px 5px  #303030;
}

/*

#report{
    margin: 20px;
    background: white;
    border-radius: 10px;
    padding: 15px;
    width: fit-content;
    max-height: 80%;
    overflow: scroll;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.411), 0 0 0 4px rgba(0, 0, 0, 0.021);
}
*/

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
          ESTILOS PARA FORMULARIO DE REPORTE
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.fondo_ventana_reporte{
    background-color: rgb(255, 255, 255);
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    width: 100vw; /* Ancho completo de la ventana */
    height: 100vh; /* Altura completa de la ventana */
    overflow-y: auto; /* Habilita scroll vertical */
    overflow-x: hidden;
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
}

#report2{
    border: transparent;
    padding: 10px;
    background: white;
    border-radius: 10px;
    padding: 5px;
    width: min-content;
    text-align: center;
    max-height: 95vh; /* Limita la altura a 90% de la pantalla */
    overflow-y: auto; /* Scroll vertical en el contenido del formulario */
    margin-left: 5%;
    margin-top: 2%;
    margin-bottom: 2%;

}

.texto_report{
    font-size: 11px;
    color: rgb(59, 59, 59);
    text-align: justify;
    font-weight: 500;
    margin-bottom: 5px;
    padding-top: 5px;
}

.input_reporte{
    width: 90%;
    height: 25px;
    border-radius: 5px;
    margin-bottom: 5px;
    background-color: #ebe9e9;
    border-color: #c1010100;
    border-width: 1px;
}

#folio_report{
    padding-left: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
   
}
#btn_subir_report{
    cursor: pointer;
}
.input_hh_report{
    width: 35px;
    text-align: center;
}
.encabezado_report{  
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}
#container_horas_report{
    display: flex;
}
#tabla_hh_por_viejo{
    border-collapse: collapse;
    border: none;

}
#tabla_foe_por_report{
    border-collapse: collapse;
    border: none;
    margin-top: 30px;
    text-align: center;
}



.input_hh_total_report{
    width: 40px;
    text-align: center;
    font-weight: bold;
}
#fila_encabezado_hh_report{
    font-size: 13px;
    font-weight: bold;
}
#fila_encabezado_item_report{
    font-size: 13px;
    font-weight: bold;
}

.columna_nombre_reporte{
    width: 350px;
}
.columna_categoria_reporte{
    width: 150px;
}

.celda_item_report{
    width: 60px;
}
.celda_cantidad_report{
    width: 50px;
    text-align: center;
}
.unidad_item_report{
    width: 50px;
    text-align: center;
}
.detalle_item_report{
    width: 590px;
}
.detalle_item_report_hh{
    width: 40px;
    text-align: center;
    font-weight: bold;
}
.numero_actividad_report{
    width: 20px;
    font-size: 13px;
    font-weight: bold;
}
.rol_trabajador_report{
    width: 30px;
}

#pizarra_digital{
    padding: 10px;
    background: white;
    border-radius: 10px;
    margin-bottom: 15px;
}

#container_items_pizarra{
    display: flex;
    flex-wrap: wrap;
    text-align: center;
}



.item_pizarra_digital{
    flex: 1 1 350px;
    resize: both;
    overflow:visible;
    background: white;
    border-radius: 10px;
    box-shadow: 2px 2px 8px #4b4b4b;
    padding: 10px;
    width:auto;
    margin: 8px;
    font-size: 14px;
    display: grid;
    grid-template-rows: auto auto auto auto auto;
}
.titulo_item_pizarra{
    font-weight: bold;
    color: #1b7ab9;;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    margin-bottom: 12px;
}
#ot_item_pizarra{
    margin-right: 8px;
}
.div_titulo_item_pizarra{
    display: grid;
    grid-template-columns: auto auto;
}

.actividades_item_pizarra{
    border-collapse: collapse;
    border-color: #1b7ab9;
    color: #4b4b4b;
}
.personal_item_pizarra{
    border-collapse: collapse;
    border-color: #1b7ab9;
    color: #4b4b4b;
}

.subtitulo_item_pizarra{
    color: rgb(82, 82, 82);
    font-weight: bold;
    margin-top: 6px;
    margin-bottom: 6px;
}

#tablas_2_turnos{
    display: flex;
    justify-content: center;
}

#tablas_2_turnos_rt{
    display: grid;
    grid-template-columns: 50% 50%;
    gap: 15px;
}

.tabla_2_turnos_rt{
    margin: 1px;
    border-collapse: collapse;
}

.btn_2turnos_rt{
    display: grid;
    grid-template-columns: min-content auto;
    align-items: center;
    width: fit-content;
    padding: 6px;
    border-radius: 10px;
    background-color: white;
    margin-bottom: 8px;
}
.txt_btn_2turnos_rt{
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 8px;
    font-size: 12px;
    font-weight: bold;
}

.btn_2turnos_rt:hover{
    cursor: pointer;
    background-color: white;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.411), 0 0 0 4px rgba(0, 0, 0, 0.021);
}
.fila_tabla_header{
    color: #3b3b3b;
    font-weight: bold;
    size: 13px;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 5px;
}

.tabla_2_turnos{
    font-size: 13px;
    border-collapse: collapse;
    margin: 4px;
    width: auto ;
    height: auto;
}

.titulo_tabla_2_turnos{
    color: #1b7ab9;
    font-weight: bold;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 13px;
    margin-bottom: 20px;
    width: 100%;
}

.fila_tabla_header_rt{
    background-color: brown;
    color: white;
    padding: 3px;
}

.titulo_tabla_2_turnos_rt{
    text-align: center;
    font-weight: bold;
    width: auto;
    padding-top: 15px;
}

#programa_dos_turnos_rt{
    width: 97%;
}

.btn_2turnos_mas_trabajo{
    font-size: 12px;
}

.btn_2turnos_mas_trabajo:hover{
    cursor: pointer;
    color: #32bb08;
    font-weight: bold;
}




  


.input_txt_1{
    margin: 10px;
    padding: 8px;
    width: 50%;
    border-radius: 5px;
    border-color: #303030;
    border-width: 1px;

}
.btn_verde{
    border-radius: 10px;
    background-color: green;
    color: aliceblue;
    font-weight: bold;
    padding: 10px;
    border: none;
}
.btn_rojo{
    border-radius: 10px;
    background-color: red;
    color: aliceblue;
    font-weight: bold;
    padding: 10px;
    border: none;
}







#div_seccion_resumen{
    display: grid;
    grid-template-columns: 20% 30% 20% 30%;
}





#listado_tareas_ejecucion{
    margin: 10px;
    padding: 5px;
    height: 625px;
    overflow: scroll;
}

.div_item_tarea{
    background-color: #c5c5c5;
    margin: 4px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 14px;
    padding-bottom: 10px;
}

.div_item_tarea:hover{
    cursor: pointer;
    border-radius: 10px;
    background-color: white;
    box-shadow: 0 0 6px 6px rgba(0, 0, 0, 0.527), 0 0 0 1px rgba(0, 0, 0, 0.075);
    
}

.txt_titulo_item{
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 8px;
}

.div_datos_item{
    display: grid;
    grid-template-columns: 20% 80%;
    margin-bottom: 4px;
    align-items: center;
}

.txt_datos_item{
    font-size: 14px;
    margin: 0px;
    display: grid;
}

.txt_avance_item{
    text-align: center;
    font-size: 14px;
    font-weight: bold;
}


.div_horizontal_item_tarea{
    display: grid;
    grid-template-columns: 30% 40% 30%;
}

.txt_datos_detalle{
    font-size: 15px;
    font-weight: bold;
    margin-top: 2px;
}

.txt_datos_detalle_2{
    font-size: 15px;
    margin-top: 2px;
}

.btn_tareas{
    display: grid;
    grid-template-rows: auto auto;
    text-align: center;
    align-items: center;
    width: fit-content;
    padding: 5px;
    background-color: #e4e4e4;
    border-radius: 5px;
    font-size: 12px;
    font-weight: bold;
}

.btn_tareas:hover{
    cursor: pointer;
    box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.466), 0 0 0 2px rgba(0, 0, 0, 0.055);
}

#botones_detalle_tarea{
    display: grid;
    grid-template-columns: 15% 15% 15% 15% 15% 15%;
    gap: 5%;
    justify-items: center;
    width: 70%;
    margin-left: 15%;
}

.div_info_personal{
    display: grid;
    grid-template-rows: auto auto auto;
    justify-content: center;
}

.div_persona{
    background-color: rgb(196, 2, 2); 
    border-radius: 10px;
    padding: 5px;
    min-width: 130px;
    max-width: 180px;
    display: grid;
    grid-template-rows: auto auto auto;
    justify-content: center;
    text-align: center;
    margin: 8px;
}

.div_foto{
    width: 100%;
    text-align: center;
    display: grid;
    justify-content: center;
    margin-bottom: 8px;
}

.txt_nombre_personal{
    font-size: 12px;
    font-weight: bold;
}

.txt_cargo_personal{
    font-size: 11px;
    margin: 0px;
}
.div_btn_retirar_recurso{
    width: fit-content;
    justify-content: center;
}
.div_hover_btn_retirar_recurso{
    width: 100%;
    text-align: center;
}
.div_hover_btn_retirar_recurso:hover{
    cursor: pointer;
}
.txt_info_persona{
    margin-bottom: 2px;
    font-size: 14px;
}
.div_opciones_personal{
    place-content: center;
}

.btn_opciones_personal{
    display: grid;
    grid-template-columns: min-content auto;
    padding: 4px;
    border-radius: 5px;
    align-items: center;
    padding: 4px;
    background-color: white;
    width: fit-content;
    margin-left: 30px;
    margin-top: 10px;
}
.btn_opciones_personal:hover{
    cursor: pointer;
}
.txt_btn_opciones_personal{
    margin-left: 4px;
    font-size: 13px;
    font-weight: bold;
    width: min-content;
    margin-top: 0px;
    margin-bottom: 0px;
}

#listado_personal_asignado{
    display: inline-flex;
    overflow: scroll;
    width: 40%;
    margin-left: 10px;
    padding: 8px;
}


#div_encabezado_om{
    display: grid;
    grid-template-columns: 50% 50%;
    gap: 10px;
}

.txt_datos_encabezado_om{
    font-size: 12px;
    font-weight: bold;
    margin-top: 0px;
    margin-bottom: 0px;

}

.div_item_operacion_formulario_ot{
    background-color: #bdbdbd;
    border-radius: 5px;
    display: grid;
    grid-template-columns: 5% 15% 50% 10% 10% 10%;
    padding: 8px;
    margin-bottom: 4px;
}

.div_item_operacion_formulario_ot:hover{
    cursor: pointer;
}


.txt_item_operacion_formulario_ot{
    font-size: 13px;
    font-weight: bold;
    margin: 0px;
}

.input_formulario_ot_op{
    border-radius: 5px;
    height: 25px;
    border: 1px;
    margin-bottom: 5px;
    padding-left: 8px;
    width: 50%;
    
}

.txt_formulario_ot{
    text-align: end;
    font-size: 14px;
    font-weight: bold;
    vertical-align: middle;
    margin: 0px;
    height: 25px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 20px;
}

#detalle_actividad_diaria{
    background-color: white;
    border-radius: 10px;
    padding: 20px;
    margin-top: 5%;
    margin-left: 5%;
    width: 80%;
    height: 70%;
    overflow: scroll;
}

#btn_cerrar_formulario_detalle_tarea:hover{
    color: red;
    font-weight: bold;
    cursor: pointer;
}

.foto_persona{
    height: 60px;
    border-radius: 30px;
}

.btns_ingreso_fecha_hora_genericos:hover{
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
}

#btn_cerrar_formulario_ingreso_fecha_hora:hover{
    cursor: pointer;
}

.div-celda-hover{
    display: grid;
    grid-template-columns: 50% 50%;
    height: 100%;
}

.celda-hover:hover{
    cursor: pointer;
}

.lbl_header_backlog{
    margin: 0;
    font-size: 13px;
    font-weight: bold;

}
#fila_header_backlog{
    display: grid;
    grid-template-columns: 8% 5% 5% 5% 25% 5% 25% 20%;
    background-color: #1b7ab9;
    padding: 10px;
    border-radius: 5px;
}
.fila_backlog{
    display: grid;
    grid-template-columns: 8% 5% 5% 5% 25% 5% 25% 20%;
    padding: 10px;
    margin-bottom: 5px;
}

.fila_backlog:hover{
    font-weight: bold;
    cursor: pointer;
}

.lbl_operacion_backlog{
    margin: 0;
    font-size: 12px;
}










.ventana_detalle_psm{
    width: 200px;
    height: 150px;
    border-radius: 10px;
    background-color: #e4e4e4;
    position: relative;
    left: 370px;
    top: -380px;
}


#btn_guardar_estatus_psm{
    display: flex;
    align-items: center;
    gap: 5px;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 5px;
    width: min-content;
    height: auto;
    background: white;
    margin-top: 15px;
    margin-left: 60%;
}
#btn_guardar_estatus_psm:hover{
    cursor: pointer;
    box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.466), 0 0 0 2px rgba(0, 0, 0, 0.055);
}



.div_header_tabla_hh{
    display: grid;
    grid-template-columns: auto auto auto;
    font-size: 13px;
    text-align: center;
}

.header_tenatativo{
    font-size: 11px;
    font-weight: bold;
}

.uso_recurso_tentativo_center{
    font-size: 11px;
    font-weight: bold;
    margin: 0px;
    text-align: center;
}

.tarea_tentativo{
    display: grid;
    grid-template-columns: 7% 5% 5% 7% 15% 4% 15% 10% 7% 7% 7% 7% 7%;
    font-size: 10px;
    text-align: left;
}

.fila_tenatativo_center{
    text-align: center;
}

.div_especialidad_hh{
    display: grid;
    grid-template-columns: 50% 25% 25%;
    align-items: center;
    background: #e4e4e4;
    border-radius: 5px;
    margin-bottom: 1px;
    padding-left: 10px;
    height: 25px;

}
.modulo_plan_especialidad{
    color: #176ca5;
    font-weight: bold;
    height: min-content;
    font-size: 12px;
    text-align: center;
    margin: 0px;
}

.modulo_plan_cantidades{
    height: min-content;
    font-size: 13px;
    text-align: center;
    margin: 0px;
}


#btn_reporte_erres:hover{
    cursor: pointer;
    box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.466), 0 0 0 2px rgba(0, 0, 0, 0.055);
    
}

#btn_tabla_reporte_erres:hover{
    cursor: pointer;
    box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.466), 0 0 0 2px rgba(0, 0, 0, 0.055);
}



.header_sabana_reporte{
    background-color: rgb(253, 0, 0);
    font-size: 11px;
    padding-top: 4px;
    padding-bottom: 4px;
    font-weight: bold;
}

.fila_sabana_reporte{
    font-size: 10px;

}
#btn_cerrar_reporte:hover{
    cursor: pointer;
    font-weight: bold;
    color: #020202;
}

.grafico_kpi{
    background-color: white;
    border-radius: 15px;
    width: 25%;
    height: 100px;
    overflow: scroll;
}


.bloque_horas_alcance_backlog{
    background-color: #ad0f5e;
}

.clase_item_alcance_backlog:hover{
    cursor: pointer;
    box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.466), 0 0 0 2px rgba(0, 0, 0, 0.055);
}
#btn_buscar_reporte_por_ot:hover{
    cursor: pointer;
}

.fila_tabla_2_turnos{
    font-size: 12px;
    border-bottom: 1px solid #000000;
}

.fila_tabla_2_turnos:hover{
    cursor: pointer;

    
}

.listado_reportes{
    width: 50%;
    margin-left: 8px;
    padding: 10px;
    background-color: #b1b1b1;
    border-radius: 8px;
}

.txt_orden_busca_reporte{
    font-size: 16px;
    font-weight: bold;
    color: #000000;
}

.txt_fecha_busca_reporte{
    font-size: 12px;
    color: #303030;
    padding-left: 8px;
}
.txt_folio_busca_reporte{
    font-size: 12px;
    padding-left: 4px;
    color: white;
    font-weight: bold;
    margin-left: 16px;
    padding-top: 4px;
    padding-bottom: 4px;
}
.txt_folio_busca_reporte:hover{
    cursor: pointer;
    background-color: red;
}

.operacion-div {
    display: grid;
    grid-template-columns: 5% 15% 60% 10% 10%;
    margin-left: 5px;
    gap: 5px;
    margin-top: 5px;
}
.operacion-div input {
    text-align: center;
}

.material-backlog-div {
    display: grid;
    grid-template-columns: 34% 8% 10% 40% 8%;
    margin-left: 5px;
    gap: 5px;
    margin-bottom: 5px;
}
.material-backlog-div input {
    text-align: center;
}



/*Estilo para el formulario backlog */
#div_tabla_datos_1 {
    display: grid;
    grid-template-columns: 10% 50% 15% 25%;
    gap: 10px; /* Espacio entre columnas */
}

#div_tabla_datos_1 > div {
    display: grid;
    grid-template-rows: auto auto;
    margin-right: 5px;
}

#div_tabla_datos_1 a {
    font-size: 11px;
    color: aliceblue;
    background-color: rgb(180, 0, 0);
    text-align: center;
    padding: 5px;
    
}

#div_tabla_datos_1 input {
    text-align: center;
    width: 100%;
    padding: 5px;
    
}

        /* Estilos base para el contenedor principal */
        

        /* Estilos para cada div interno */
        

        /* Estilos para los enlaces */
        

        /* Estilos para los inputs */
        

        /* Media Query para pantallas más pequeñas (móviles) */
        @media (max-width: 768px) {
            #div_tabla_datos_1 {
                grid-template-columns: 1fr; /* Una sola columna */
            }

            #div_tabla_datos_1 > div {
                margin-left: 0; /* Elimina margen en pantallas pequeñas */
            }

            #div_tabla_datos_1 a {
                font-size: 14px; /* Aumenta un poco el tamaño de fuente en pantallas pequeñas */
            }
        }

        /* Media Query para tabletas */
        @media (min-width: 769px) and (max-width: 1024px) {
            #div_tabla_datos_1 {
                grid-template-columns: 25% 25% 25% 25%; /* Ajustar proporciones para tabletas */
            }
        }