:root {
    --ColorSolicitud: #fcd706;
    --ColorProgramada: #c6c7c9;
    --ColorPendiente: #d62828;
    --ColorProceso: #ce8537;
    --ColorFacturar: #aad37d;
    --ColorEjecutada: #33691e;

    /* colores para las cotizaciones */
    --ColorSolicitada: #d62828;
    --ColorProcesada: #4ED4CD;
    --ColorDevuelta: #ffd22d;
    --ColorPorAprobar: #f77f00;
    --ColorRecotizar: #4B86E3;
    --ColorAprobada: #adc3a5;
    --ColorEnviada: #85a578;
    --ColorAceptada: #5c874b;
    --ColorFinalizada: #33691e;

    
    /* colores para los Proyectos */
    --ProyectoPorIniciar: #c6c7c9;     
    --ProyectoPausado: #d62828;     
    --ProyectoAsignado: #ffd22d;
    --ProyectoEjecucion: #f77f00;
    --ProyectoFinalizado: #33691e;

    /* colores para la Solicitud de Materiales */
    --SolictudPendiente: #d62828;
    --SolictudRevision: #ffd22d;
    --SolicitudRechazada: #870000;
    --SolicitudAprobada: #33691e;
    --SolictudEjecucion: #f77f00;

    --Programada: #c6c7c9;
    --Facturada: #33691e;

    --ColorInactivo: #c6c7c9;
    --ColorActivo: #33691e;

    /* margenes */
    --mt: 0;
    --mb: 0;
    --ms: 0;
    --me: 0;
}


.mt {
    margin-top: var(--mt) px;
}
.mb {
    margin-bottom: var(--mb) !important;
}
.ms {
    margin-left: var(--ms) px;
}
.me {
    margin-right: var(--me) px;
}

.bgProgramada {
    background-color: var(--ColorProgramada);
    color: #000;
}
.bgPendiente {
    background-color: var(--ColorPendiente);
    color: #fff;
}
.bgProceso {
    background-color: var(--ColorProceso);
    color: #fff;
}
.bgFacturar {
    background-color: var(--ColorFacturar);
    color: #fff;
}
.bgEjecutada {
    background-color: var(--ColorEjecutada);
    color: #fff;
}

.bgActivo {
    background-color: var(--ColorActivo) !important;
    color: #fff;
}

.bgInactivo {
    background-color: var(--ColorInactivo) !important;
    color: #fff;
}

#newChart {
    --ColorProgramada: var(--ColorProgramada);
    --ColorPendiente: var(--ColorPendiente);
    --ColorProceso: var(--ColorProceso);
    --ColorFacturar: var(--ColorFacturar);
    --ColorEjecutada: var(--ColorEjecutada);
}

.fc-toolbar.fc-footer-toolbar {
    padding: 0px !important;
    margin: 0px !important;
    background-color: #e0e1e1;
    border-end-end-radius: 12px;
    border-end-start-radius: 12px;
    line-height: 0 !important;
}
.fc-toolbar.fc-header-toolbar {
    margin-bottom: 0px !important;
    border-start-start-radius: 12px;
    border-start-end-radius: 12px;
    background-color: #ba0000;
    color: #fff;
}
.fc-toolbar.fc-header-toolbar h2 {
    font-family: "Poppins-Black" !important;
    font-size: 24px;
}
.fc-toolbar .fc-left {
    margin-bottom: 5px !important;
}

.fc .fc-row {
    margin-bottom: 0px !important;
}
.fc-event{
    font-size: 9px !important;
}
.fc-day-number{
    font-size: 12px !important;
}

.hover-end {
    padding: 0;
    margin: 0;
    font-size: 75%;
    text-align: center;
    position: absolute;
    bottom: 0;
    width: 100%;
    opacity: 0.8;
}
.calendarTooltip {
    box-shadow: 3px 3px 6px #092e47;
    padding-left: 10px;
    padding-top: 5px;
    text-align: center;
    width: 220px;
    background: #f3f1f1;
    border-radius: 6px;
    color: #092e47;
    position: absolute;
    z-index: 10001;
}
#calendario {
    margin-bottom: 15px;
    padding-top: 10px;
}

.Solicitud, .Solicitada {
    background-color: var(--ColorSolicitada) !important;
    color: #f4faf5;
    box-shadow: 3px 3px 6px #888888;
    font-family: "Poppins-Light";
    font-size: 15px;
}
.Procesada {
    background-color: var(--ColorProcesada) !important;
    color: #faf5f4;
    box-shadow: 3px 3px 6px #888888;
    font-family: "Poppins-Light";
    font-size: 15px;
}
.Aprobar, .Generada{
  background-color: var(--ColorPorAprobar) !important;
    color: #faf5f4;
    box-shadow: 3px 3px 6px #888888;
    font-family: "Poppins-Light";
    font-size: 15px;
}

.Devuelta {
    background-color: var(--ColorDevuelta) !important;
    color: #faf5f4;
    box-shadow: 3px 3px 6px #888888;
    font-family: "Poppins-Light";
    font-size: 15px;
}
.Aprobada{
  background-color: var(--ColorAprobada) !important;
    color: #faf5f4;
    box-shadow: 3px 3px 6px #888888;
    font-family: "Poppins-Light";
    font-size: 15px;
}
.Enviada {
    background-color: var(--ColorEnviada) !important;
    color: #faf5f4;
    box-shadow: 3px 3px 6px #888888;
    font-family: "Poppins-Light";
    font-size: 15px;
}

.Recotizar {
    background-color: var(--ColorRecotizar) !important;
    color: #faf5f4;
    box-shadow: 3px 3px 6px #888888;
    font-family: "Poppins-Light";
    font-size: 15px;
}

.Aceptada {
    background-color: var(--ColorAceptada) !important;
    color: #faf5f4;
    box-shadow: 3px 3px 6px #888888;
    font-family: "Poppins-Light";
    font-size: 15px;
}
.Rechazada {
    background-color: var(--SolicitudRechazada) !important;
    color: #faf5f4;
    box-shadow: 3px 3px 6px #888888;
    font-family: "Poppins-Light";
    font-size: 15px;
}

/* estilos para los status de las solicitudes de material */
.Pendiente{
    background-color: var(--SolictudPendiente) !important;
    color: #faf5f4;
    box-shadow: 3px 3px 6px #888888;
    font-family: "Poppins-Light";
    font-size: 15px;
}
.Facturada{
    background-color: var(--Facturada) !important;
    color: #faf5f4;
    box-shadow: 3px 3px 6px #888888;
    font-family: "Poppins-Light";
    font-size: 15px;
}

.Programada{
    background-color: var(--Programada) !important;
    color: #faf5f4;
    box-shadow: 3px 3px 6px #888888;
    font-family: "Poppins-Light";
    font-size: 15px;
}

.Proceso{
    background-color: var(--ColorProceso) !important;
    color: #faf5f4;
    box-shadow: 3px 3px 6px #888888;
    font-family: "Poppins-Light";
    font-size: 15px;
}

.Ejecutada{
    background-color: var(--ColorProceso) !important;
    color: #faf5f4;
    box-shadow: 3px 3px 6px #888888;
    font-family: "Poppins-Light";
    font-size: 15px;
}

.Facturar{
    background-color: var(--ColorFacturar) !important;
    color: #faf5f4;
    box-shadow: 3px 3px 6px #888888;
    font-family: "Poppins-Light";
    font-size: 15px;
}


.Revisión{
    background-color: var(--SolictudRevision) !important;
    color: #faf5f4;
    box-shadow: 3px 3px 6px #888888;
    font-family: "Poppins-Light";
    font-size: 15px;
    
}
.Rechazada{
    background-color: var(--SolicitudRechazada) !important;
    color: #faf5f4;
    box-shadow: 3px 3px 6px #888888;
    font-family: "Poppins-Light";
    font-size: 15px;

}
.Aprobada{
    background-color: var(--SolicitudAprobada) !important;
    color: #faf5f4;
    box-shadow: 3px 3px 6px #888888;
    font-family: "Poppins-Light";
    font-size: 15px;

}
.Ejecucion{
    background-color: var(--SolictudEjecucion) !important;
    color: #faf5f4;
    box-shadow: 3px 3px 6px #888888;
    font-family: "Poppins-Light";
    font-size: 15px;
}

.Finalizada{
    background-color: var(--SolicitudAprobada) !important;
    color: #faf5f4;
    box-shadow: 3px 3px 6px #888888;
    font-family: "Poppins-Light";
    font-size: 15px;
}


input,select{
    padding: 0px 4px !important; 
    height: 28px !important;
    font-size: 12px !important;  
}
input[type="checkbox"],
input[type="radio"]{    
    height: auto !important;     
}

.inputTotal {
    border: none;
    margin-right: 25px;
}
.cerrarModal{
    font-size: 35px;
}

.colorActivo {
    background-color:transparent ;
    color:  var(--SolicitudAprobada)
}
.colorPendiente {
    background-color:transparent ;
    color:  var(--SolictudPendiente)
}

.colorEnProceso {
    background-color: transparent;
    color: var(--SolictudEjecucion)
}

.colorRechazado {
    background-color: transparent;
    color: var(--SolicitudRechazada)
}

/* estilos para los botones de SweerAlert2 */
.swal2-confirm {
    box-shadow: 2px 2px 6px #0f0f0f !important;
   
}

.swal2-cancel {
    box-shadow: 2px 2px 6px #0f0f0f !important;
    
}
.swal2-deny {
    box-shadow: 2px 2px 6px #0f0f0f !important;
    
}

.card-shadow {
    border: 1px solid #d1cece;
    /* Define el color y grosor del borde */
    border-radius: 6px;
    padding: 10px;
    box-shadow: 2px 2px 4px gray;
    /* Define la sombra */
    margin-bottom: 15px;
    height: 200px;
    overflow-y: scroll;
    overflow-x: hidden;
}
.breadcrumb{
    box-shadow: 3px 3px 6px #888888;
}

.mdlCintillo{
    margin-bottom: 15px;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
    
}


/* medias query */
@media (max-width: 768px) {
    .table-sm {
        font-size: 8px; /* Ajusta este tamaño según sea necesario */
    }
    .table-lg {
        font-size: 12px; /* Ajusta este tamaño según sea necesario */
    }
    h1{
        font-size: 12px !important;
    }

    .tblTrabajosEjecutados,
    .tblTrabajosEjecutados td, 
    .tblTrabajosEjecutados textarea, 
    .tblTrabajosEjecutados input, 
    .tblTrabajosEjecutados button {
        font-size: 10px !important; /* Ajusta el tamaño de la fuente según sea necesario */
    } 
    .tblTrabajosEjecutados input{
        width: 90px;
    }

    .lblTotalMegas,
    .filesTabla,
    .filesTabla td, 
    .filesTabla textarea, 
    .filesTabla input, 
    .filesTabla button {
        font-size: 10px !important; /* Ajusta el tamaño de la fuente según sea necesario */
    } 
}

    .modal{
        display: none;
    }

    /* Estilo del overlay de carga para las vistas */
    #loadingOverlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.8); /* Fondo semi-transparente */
        z-index: 500;
        display: flex;
        justify-content: center;
        align-items: center;
        
    }
    #loadingOverlay img {
        width: 100px; /* Ajusta el tamaño de la imagen */
        height: auto;
        
        
    }
    #loadingOverlay h1 {            
        color: #870000;
        font-size: 50px;
        font-weight: bold;
        width: auto;
        opacity: .1;            
        animation: blink 2.0s infinite; /* Aplicamos la animación de parpadeo */
    }
        

        /* Definición de la animación blink */
        @keyframes blink {
            0% { opacity: 1; }  /* Comienza completamente visible */
            50% { opacity: 0; } /* A mitad del ciclo, desaparece */
            100% { opacity: .5; } /* Vuelve a aparecer */
        }

        /* .select2-container--classic .select2-results>.select2-results__options {
            max-height: 60vh !important;
            
        } */
    
/* estilos para los radios buttons on off de los status de las tablas */
    .radio-switch {
        position: relative;
        display: inline-block;
        width: 60px;
        height: 28px;
        background-color: #ccc;
        border-radius: 15px;
        
    }
    
    .radio-switch input[type="radio"] {
        display: none; /* Ocultar los radio buttons */
    }
    
    .switch-label {
        position: absolute;
        top: 1px;
        width: 100%;
        height: 26px;
        line-height: 26px;
        text-align: center;
        font-size: 12px;
        color: white;
        cursor: pointer;
        border-radius: 15px;
        transition: 0.3s;
    }
    
    #activoOn:checked + .switch-label {
        background-color: #5cb85c;
        left: 0;
        width: 50%;
    }
    
    #activoOff:checked + .switch-label {
        background-color: #e70d05;
        right: 0;
        width: 50%;
    }

    .centrarTable {
        margin: 0 auto; /* Centra horizontalmente */
        /*text-align: center;  Opcional: centra el contenido del texto */
    }
    /* fin de los estilos de los radios button on off */
    /* table, th, td {
        padding: 3px 20px !important;
    } */   

    /* estilos para el tooltips de los datatable */
    .custom-tooltip ul {
        margin: 0;
        padding: 10px;
        list-style: none;
        color: #fff;
        background-color: #31708f;
        border: 1px solid #aaa;
        border-radius: 15px;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    }
        .custom-tooltip li {
            margin: 5px 0;
        }
    /***********************************************/
    /* estilos para los botones de los PDF's de las OC y COT de los servicios */
    .btnPdf {
        cursor: pointer; 
        border: 0px solid rgb(187, 204, 0); 
        font-size: 10px; 
        color: rgb(255, 255, 255); 
        padding: 4px 4px; 
        transition: 507ms; 
        width: 30px; 
        box-shadow: rgb(158, 158, 158) 2px 2px 1px 1px; 
        border-radius: 37px 17px 17px; 
        background: rgb(0, 102, 204); 
        --hover-width: 70px; 
        --hover-borderSize: 0px; 
        display: inline; 
        justify-content: center; 
        align-items: center; 
        flex-direction: row; 
        --hover-bgc: #185ca1;
        
    }   

    

    .tblServiciosFacturar, .tableBordes {
        border: 1px solid #dad3d3 !important; /* Borde exterior más oscuro */
    }
    
    .tblServiciosFacturar th,
    .tblServiciosFacturar td,
    .tableBordes th,
    .tableBordes td {
        border: 1px solid #dad3d3 !important; /* Bordes internos más visibles */
    }
    
    .table-striped tbody tr:nth-of-type(odd) {
        background-color: #f2f2f2; /* Alternar colores de filas para mejor contraste */
    }
    
    /* Tamaños de fuente personalizados */
    .fSize10 { font-size: 10px !important; }
    .fSize11 { font-size: 11px !important; }
    .fSize12 { font-size: 12px !important; }
    .fSize13 { font-size: 13px !important; }
    .fSize14 { font-size: 14px !important; }
    .fSize15 { font-size: 15px !important; }
    .fSize16 { font-size: 16px !important; }
    .fSize18 { font-size: 18px !important; }
    .fSize20 { font-size: 20px !important; }
    .fSize24 { font-size: 24px !important; }
    .fSize28 { font-size: 28px !important; }
    .fSize32 { font-size: 32px !important; }

    .paddingTd{
        padding: 2px 3px !important;
        font-size: 12px !important;
    }
    .paddingTd input {
        font-size: 12px !important;
    }

.thFijo {
    position: sticky;
    top: 0;
    background: white;
    z-index: 2;
    width: 5%; /* si quieres aplicarlo a ciertos th */
}