:root {
    --oscuro: #0D0D0D;
    --primario: #052DA6;
    --secundario: #0656BF;
    --gris: #848584;
    --gris-claro:gainsboro;
    --pruebas:rgb(230,230,230);
    --letra:rgb(200,200,200);
    --fuente-principal: Arial, sans-serif;
}

*, *:before, *:after {
    box-sizing: inherit;
  }
body{
    font-family: Arial, sans-serif;
    background-color: #f4f4f9;
}
/*INDEX*/
.contenedor{
    display: grid;
    grid-template-columns: 30% 40% 30%;
    
}
.liga{
            line-height: 2;
            color: #007bff;
        }
        .liga_roja{
            line-height:2;
            color: red;
        }
.logo{
    margin-top: 15%;
    width: 100%;
}
.inicio{
    width: 70%;
    padding-left: 12%;
}
.formulario input{
            border: 1px solid #ddd;
        }
        .formulario select{
            border: 1px solid #ddd;
        }
.entrada{
    background-color:var(--pruebas);
    border-radius: 5px;
    border: var(--gris-claro);
    height: 1.7rem;
    font-family: var(--fuente-principal);
    font-weight: 400;
    font-style: normal;
    
}
input::placeholder{
    color: var(--letra);
}
.acceso{
    width: 100%;
}
.inicio__boton{
    display: none;
}

/*HOME*/
.areas{
    display: grid;
    grid-template-columns: 33% 33% 33%;
    gap: 1rem;
   
}
    .area{
        width: 80%;
        padding-top: 2rem;
        padding-left: 8%;
        
    }
        .area__boton{
            display: block;
            width: 100%;
            background-color: var(--primario);
            height: 3rem;
            color: white;
            text-align: center;
            text-decoration: none;
            line-height: 3rem; /* Centra verticalmente el texto en el bot贸n */
            border: 1px solid var(--primario); /* Borde igual al color de fondo para apariencia de bot贸n */
            border-radius: 4px;
            
        }
        
        .area__boton:hover {
            background-color: var(--gris);
            border: var(--gris);
        }




/*Header main aside*/
.navegador{
    display: grid;
    grid-template-columns: 16% 16.5% 16.5% 16.5% 16.5% 16.5%;
}
    .navlogo{
        width: 70%;
        padding-left: 15%;
    }
    .area__boton.active {
        background-color: gray; /* Cambia el color de fondo a gris para resaltar el bot贸n activo */
        color: white; /* Cambia el color del texto a blanco para mayor contraste */
        border: var(--gris);
    }
.subnavegador .area{
    padding-top:1rem;
}

/* Estilos para el mensaje de confirmación */
.confirmacion {
    margin-top: 20px;
    padding: 10px;
    background-color: #e0ffe0; /* Fondo verde claro */
    color: #4caf50; /* Color del texto */
    border: 1px solid #4caf50;
    border-radius: 5px;
}
.error {
    background-color: #ffe0e0; /* Fondo rojo claro */
    color: #f44336; /* Color del texto */
    border: 1px solid #f44336;
}

.main{
    display: grid;
    grid-template-columns: 16.5% 83.5%;
}

    .principal{
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 10% 90%;
        border: #0D0D0D;
    }
        .pendientes{
            padding-left: 40%;
            border-color: #0D0D0D;
        }
        .mensajes{
            padding-left: 20%;
            border-color: #0D0D0D;
            
        }


/*Servicios*/

.titulo{
    font-family: var(--fuente-principal); 
    font-size: 24px;  
    font-weight: 525; 
    line-height: 26.4px;
    color: var(--oscuro);
    padding-left: 40%;
}
.contenedor__servicios{
    padding-left:5%;
    padding-right: 30%;
    
}
    .servicios__form{
        width:95%;
        display: grid;
        grid-template-columns: 25% 25% 25% 25%;
        gap: 1rem;
        font-family: var(--fuente-principal);
    }

        .boton__enviar{
            background-color:var(--gris);
            border-radius: 5px;
            border-width: 0rem;
            height: 1.7rem;
            width: 90%;
            color: #ffffff;
            font-family: var(--fuente-principal);
            
        }
        .boton__enviar:hover {
            cursor: pointer;
        }
.contenedor__cronograma{
    padding-left:5%;
    padding-right: 30%;
    width: 100%;
}

/*PROYECTOS*/
.ot{
    text-decoration: none;
    row-gap: 3rem;
    color: #0D0D0D;
    
}
.pendientes {
    display: flex;
    flex-wrap: wrap;
}
.pendientes > div {
    flex: 0 0 33.33%; /* Cada elemento ocupa 33.33% del ancho del contenedor */
    padding: 10px;
}

/*CRONOGRAMA*/
.cronograma{
    width: 90%;
    height: 60rem;
}



/*Alta de pieza*/
.altadepieza__campo:nth-child(2){
    grid-column: 2/4;
}
.altadepieza__campo:nth-child(3){
    grid-column: 4/5;
}
.altadepieza__campo__cantidad{
    grid-column: 1/1;
        }
.altadepieza__campo__descripcion{
    grid-column: 2/4;
}
.altadepieza__campo__comentario{
    grid-column: 4/4;
}

.altadepieza__boton__enviar{
    grid-column: 4;
}

/*Reporte*/
.reporte_formulario{
    width: 100%;
    padding-bottom: 1rem;
}
    .formulario_reporte_ot{
        width: 8%;
    }
    .formulario_reporte_encargado{
        width: 13%;
    }
    .formulario_reporte_area{
        width: 13%;
    }
    
/*Tablas*/
    .centrado {
        text-align: center;
    }
    .formulario_reporte_fecha {
        margin-right: 10px;
    }
    .formulario_reporte_area {
        margin-bottom: 10px;
    }
    .reporte_tabla {
        margin-top: 20px;
    }
    table {
        border-collapse: collapse;
        width: 80%;
    }
    th, td {
        border: 1px solid black;
        padding: 8px;
        text-align: left;
    }
    th {
        background-color: #f2f2f2;
    }
    tbody tr:nth-child(odd) {
          background-color:#f7f7f7;
        }

         table, th, td {
            border: none;
        }
body {
            color: #333;
            margin: 0;
            padding: 0;
        }

        h1 {
            text-align: center;
            margin-top: 20px;
            font-size: 24px;
            color: #444;
        }

        .principal {
            width: 90%;
            margin: auto;
            background-color: #fff;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            min-height: 100%;
        }

        .buscador {
            text-align: center;
            margin-bottom: 20px;
        }

        .reporte_formulario {
            display: inline-block;
            text-align: left;
        }

        .reporte_formulario label {
            font-size: 14px;
            margin-right: 10px;
        }

        .reporte_formulario input[type="text"],
        .reporte_formulario select {
            padding: 8px;
            width: 150px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 14px;
        }
        input[type="date"] {
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 16px;
        }
        .reporte_formulario input[type="submit"] {
            padding: 10px 20px;
            border: none;
            background-color: #007bff;
            color: white;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }

        .reporte_formulario input[type="submit"]:hover {
            background-color: #0056b3;
        }

        table {
            border-collapse: collapse;
            width: 90%;
            margin:auto;
            margin-top: 20px;
        }

        th, td {
            border: 1px solid #f9f9f9;
            padding: 12px;
            text-align: center;
            font-size: 14px;
        }

        tbody tr:nth-child(odd) {
            background-color: #eaeaea;
        }

        tbody tr:nth-child(even) {
            background-color: #fff;
        }

        .centrado {
            text-align: center;
            margin-top: 20px;
        }

        .paginacion {
            margin-top: 20px;
            text-align: center;
        }

        .paginacion a, .paginacion span {
            margin: 0 5px;
            padding: 8px 12px;
            border-radius: 4px;
            border: 1px solid #ddd;
            text-decoration: none;
            color: #007bff;
        }

        .paginacion span {
            background-color: #007bff;
            color: white;
            border-color: #007bff;
        }

        .paginacion a:hover {
            background-color: #eaeaea;
        }

        .registros-por-pagina {
            text-align: center;
            margin-bottom: 20px;
        }

        .registros-por-pagina select {
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 14px;
        }


        
        label{
            padding-left:1rem;
        }
        .iniciar{
            margin: .3rem;
        }
        .cantidad_piezas {
    margin-top: 10px;
    font-size: 1.2em;
    color: #333;
}

    .no-border{
        border:none;
        width:90%;
    }
    
    .form_area{
        margin-left:25%;
    }
    
    .eliminarEncargado {
        margin-left: .5rem;
        text-align: center;
        cursor: pointer;
        color: red;
        border-radius: 5px;
    }
    .custom-file {
        position: relative;
        display: inline-block;
        width: 100%;
        margin-bottom: 10px;
    }
    .custom-file-input {
        position: relative;
        z-index: 2;
        width: 100%;
        height: 80px;
        margin: 0;
        opacity: 0;
    }
    .custom-file-label {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        z-index: 1;
        height: 80px;
        padding: 10px;
        line-height: 20px;
        color: #495057;
        background-color: #ffffff;
        border: 1px solid #ced4da;
        border-radius: 5px;
        cursor: pointer;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .upload {
        width: 20px;
        height: 20px;
        margin-right: 5px;
        vertical-align: middle;
    }
    .custom-file-input:focus ~ .custom-file-label {
        border-color: #4d90fe;
    }
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }
    
    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }
    
    .dropdown-content a:hover {background-color: #f1f1f1;}
    
    .area:hover .dropdown-content {
        display: block;
    }