html {
    font-size: 62.5%;
    box-sizing: border-box;
}


body {
    letter-spacing: normal;
    font-size: 16px;
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

header {
    background-color: #b31c1d;
    height: 6rem;
    display: flex;
}
.plaes{
    display: flex;
    flex-direction: row;
}

h1 {
    font-size: 1.7rem;
    color: white;
    padding-left: 1rem;
   padding-right: 1rem;
   padding: 16px;
    margin: center;
}

div {
    display: flex;
    flex-direction: column;
    align-items: center;
   justify-content: center;
   text-align: center;
   
  
}

.parte1 {
    box-shadow: 0 3px 1px -2px #0003, 0 2px 2px #00000024, 0 1px 5px #0000001f;
    border-radius: 4px;
    padding-left: 1rem;
    padding-right: 1rem;
    padding: 16px;
    margin: 2rem 2rem 2rem 2rem;
}

.parte2{
    box-shadow: 0 3px 1px -2px #0003, 0 2px 2px #00000024, 0 1px 5px #0000001f;
    border-radius: 4px;
    padding-left: 1rem;
    padding-right: 1rem;
    padding: 16px;
    margin: 2rem 2rem 2rem 2rem;
    
}

h2 {
    font-weight: 490;
    margin: 2rem auto 0 auto;
    font-size: 2.6rem;
}


.polit {
    color: rgb(101, 6, 209);
    text-decoration: none;
}

.f1 {
    box-shadow: 0 3px 1px -2px #0003, 0 2px 2px #00000024, 0 1px 5px #0000001f;
    border-radius: 4px;
    padding-left: 1rem;
    padding-right: 1rem;
    padding: 16px;
    margin: 2rem 2rem 2rem 2rem;
    color: #05a
    
}
.f2 {
    box-shadow: 0 3px 1px -2px #0003, 0 2px 2px #00000024, 0 1px 5px #0000001f;
    border-radius: 4px;
    padding-left: 1rem;
    padding-right: 1rem;
    padding: 16px;
    margin: 2rem 2rem 2rem 2rem;
    color: #05a
}
.f3 {
    box-shadow: 0 3px 1px -2px #0003, 0 2px 2px #00000024, 0 1px 5px #0000001f;
    border-radius: 4px;
    padding-left: 1rem;
    padding-right: 1rem;
    padding: 16px;
    margin: 2rem 2rem 2rem 2rem;
    color: #05a
    
}

.f4 {
    box-shadow: 0 3px 1px -2px #0003, 0 2px 2px #00000024, 0 1px 5px #0000001f;
    border-radius: 4px;
    padding-left: 1rem;
    padding-right: 1rem;
    padding: 16px;
    margin: 2rem 2rem 2rem 2rem;
    color: #05a
}
.f5 {
    box-shadow: 0 3px 1px -2px #0003, 0 2px 2px #00000024, 0 1px 5px #0000001f;
    border-radius: 4px;
    padding-left: 1rem;
    padding-right: 1rem;
    padding: 16px;
    margin: 2rem 2rem 2rem 2rem;
    color: #05a
}

.check:hover,
.botbuscar:hover{
    cursor: pointer;
}
.siacepto {
    display: flex;
    font-size: 16px;
    cursor: inherit;
    justify-content: center;
    align-items: center;
}
.check{
    margin: 0 1rem 0 0;
}

.linc{
    text-decoration: none;
    color: #05a
}

@media (min-width: 250px) {
    .consuclas{
        margin: 3rem
    }
    .contcons{
        padding: 2rem;
        font-size: 17px;
        text-align: justify;
       color: #333;
       background-color: #efefef;
       border-radius: 2%;
       font-weight: 500;
    }
    .fofinal {
        display: flex;
        flex-direction: row;
        background-color: #efefef;
        padding: 0 3rem;
        
    }
    .founotel{
        font-size: 1.5rem;
        font-weight: 700;
    }
    .foufin{
        margin: 0;
        font-weight: 500;
        font-size: 1.5rem;
        padding: 0 2rem;
        
    }

    .fooclasb{
        background-color: #efefef;
    }
   
   .escudo{
    height: 36px;
    padding: 0 0 0 1.5rem;
   }
    
    .botbuscar{
        padding: 1rem 2rem;
        background-color: #b71c1c;
        color: white;
        font-size: 1.5rem;
        border-radius: 7px;
        margin: 0 0 2rem 0;
        font-weight: 700;
    }
    .check{
       display: inline-block;
       height: 18px;
       width: 18px;
       line-height: 0;
       
   }
 
    .parte1{
        margin: 4rem 2rem 7rem 2rem;
    }
    .docide{
        color: rgba(31, 28, 28, 0.952);
        margin: 0px 0px 0.5rem 0px;
    }
    .botoni{
        padding: 1rem 4rem;
        text-align: left;
        border-radius: 3px;
        border-color: rgb(228, 220, 220);
       
    }
    h1{
        font-size: 1.4rem;
        margin: 1re;
    }
   h3{
    display: flex;
    font-size: 16px;
   }
   .f1 {
    background-color: rgb(218, 232, 241);
    align-items: center;
    padding: 0 2rem;
   }
   .f2 {
    background-color: rgb(218, 232, 241);
    align-items: center;
    padding: 0 2rem;
   }
    .f3 {
        background-color: rgb(218, 232, 241);
        align-items: center;
        padding: 0 2rem;
        margin: 0 2rem;
    }
    .f4 {
        background-color: rgb(218, 232, 241);
        align-items: center;
        padding: 0 2rem;
    }
    .f5 {
        background-color: rgb(218, 232, 241);
        align-items: center;
        
        padding: 1rem 2rem;
        margin: 0 2rem 2rem 2rem;
    }
   .imagen1{
    width: 70px;
    padding: 0 0 0 1rem;
   }
   .imagen2{
    width: 65px;
    padding: 0 0 0 1rem;
   }
   .imagen3{
    width: 60px;
    padding: 0 0 0 1rem;
   }
   .imagen4{
    width: 70px;
    padding: 0 0 0 1rem;
   }
   .imagen5{
    width: 55px;
    padding: 0 0 0 1rem;
   }
  button{
    
    border-radius: 100%;
    background-color: #b31c1d;
    width: 70px;
    border-color: aliceblue;
    padding: 0.1rem;
    display: inline-block;
    margin: -100% 0 1rem 20rem;
}
 .brevigente{

    margin: 5% 5% 0 5%;
    padding: 5%;
 }
    
 .barrabreve{
   
    flex-direction: column;
    justify-content: space-between;
 }
}

@media (min-width: 1050px) {
    .barrabreve{
        flex-direction: row;
       
    }
    .barraimg,
    .imgpuntos{
        margin: 0 1rem 0 0;
    }
    nav{
        padding: 0 10%;
    }
    .botoni{
        padding: 1rem 5rem;
    }
    h1 {
        font-size: 1.8rem;
       
    }
    .parte1{
        margin: 5rem 15rem 6rem 15rem;
        display: flex;
        padding: 4rem 20rem;
        
    }
    .parte2{
        margin: 2rem 15rem 4rem 15rem;
        
    }
    .f1 {
        align-items: center;
        padding: 0.6rem;
    }
    .f2 {
        align-items: center;
        padding: 0.8rem;
        margin: 2rem 2rem 0 2rem;
      
    }
    .f3 {
        align-items: center;
        padding: 0.9rem;
        margin: -8.2rem 2rem;
    }
    .f4 {
        align-items: center;
    }
    .f5 {
        align-items: center;
        font-size: 1.6rem;
        padding: 14px;
        margin: -14.4rem 2rem;
    }
    .imagen1{
        padding: 0 0 0 4rem;
    }
    .imagen2{
        padding: 0 0 0 4rem;
    }
    .imagen3{
        padding: 0 0 0 4rem;
    }
    .imagen4{
        padding: 0 0 0 4rem;
    }
    .imagen5{
        padding: 0 0 0 4rem;
    }
    .partedos {
        display: grid;
        grid-template-columns: 400px 400px;
        
        align-content: center;
        align-items: center;
        align-self: center;
        
    }
    .escudo{
        height: 36px;
        padding: 0 0 0 15rem;
    }
    .botoon{
        margin: -100rem 0 3rem 50rem;
    }
    .brevigente{
        margin: 5% 20% 0% 20%;
        padding: 4% 5% 5% 5%;
    }
    
}

.brevdatos{
    background-color: #ecf2f9;
    display: flex;
    font-weight: 500;
    font-size: 1.5rem;
    padding-left: 4.5%;
    align-items: flex-start;
    
}

.bgcolorhdos{
    background-color: #ecf2f9;
    
}

.colukas{
    display: grid;
    grid-template-columns: 50% 50%;
   
    gap: 1rem;
    padding: 0 0 1rem 1rem;
    
}


.datcliente {
    
    margin: -1rem 0 -1rem 8%;
    display: flex;
    font-size: 1rem;
    color: #313030de;
}

.paquetedatos {
    display: flex;
    margin: 1rem 1rem 1rem 8%;
    font-size: 14px;
    font-weight: 490;
    text-align: start;
}

.barrabreve{
    display: flex;
    text-decoration: none;
    cursor: pointer;
    
    padding: 5%;
    align-items: center;
    
    font-size: 100%;
    color: rgb(70, 67, 67) 
}

nav {
    display: grid;
    white-space: nowrap;
    grid-template-columns: 50% 50%;
    justify-items: center;
    background-color: aliceblue;
    gap: -1rem;
    
    
}

.brevigente {
    
    box-shadow: 0 3px 1px -2px #0003, 0 2px 2px #00000024, 0 1px 5px #0000001f;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-wrap: wrap;
    /*padding: 5%;*/
}

.vegencia{
    display: flex;
   flex-direction: row  ;
   margin: 0 0 5% -0.6rem;
   justify-content: space-between;
}


.divisiondedatos{
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 20% 20% 20% 10%;
  gap: 1.5rem;
  margin: 0 0 0rem 0;
}

.datclientes{
    display: flex;
    font-size: 1rem;
    margin: 0; 
    color: #313030de
}

.divisiondedatos h3{
    margin-inline-start: 0;
    padding: 0;
    margin: 0;
    font-size: 14px;
    font-weight: 490;
    

}

.finl{
    font-weight: 490;
    font-size: 14px;
    margin: -0.2rem 0 0 -0.6rem;
    padding: 0;
}


.vigenciali{
    margin: 0 0 0 0.6rem;
    color: #00823b
    
}

.breimagen{
padding: 0 0 0 4rem ;

}

.botonopcion{
    padding: 1rem 0 ;
    margin: 0 0 1rem 0;
    font-size: 1.2rem;
    color: rgb(95, 95, 95);
    font-weight: 600;
    cursor: pointer;
}

.nna{
    padding: 0 0.5rem 0 0;
}
button{
    cursor: pointer;
    width: 50px;
    height: 50px;
}

.homu{
    height: 30px;
    width: 30px;
}

.imgpuntos{
    height: 22px;
    width: 20px;
}
.letrasnav{
    margin: 0;
    font-size: 13px;
    color: #727272de;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.error {
    background-color: #b31c1d;
    text-align: center;
    padding: 1rem;
    color: white;
    
    margin: -1rem 0 0 0;
}

.administrador h1{
    color: #b31c1d;
    text-align: center;
    font-size: 3rem;
    font-weight: 900;
}
.botonagregar{
    background-color: rgb(77, 177, 90);
    color: white;   
    padding: 1rem;
    
    margin: 0 0 3rem 10rem;
}

.formularioagregar{
   display: flex;
    flex-direction: column;
    margin: 2rem 5rem 1rem;
}
.formulariogeneral{
    display: flex;
    flex-direction: column;
    margin: 2rem 15rem;
    
}

.botonagregarsistema{
    background-color: rgb(77, 177, 77);
    color: white;   
    padding: 1rem;
    margin: 1rem 10rem;
    
}
.bdformularioingreso{
    padding: 1rem 0 0;
}

.enviadobasedatos{
    color: rgb(77, 177, 77);
    font-weight: 600;
    margin: 2rem;
}

.botonvolver{
 background-color: rgb(177, 77, 77);
    color: white;   
    padding: 1rem;
    
    margin: 0 0 3rem 10rem;
}

table.propiedades {
    align-content: center;
    margin: 2rem 0 0 0;
    font-size: 14px;
    border-color: #b31c1d; 
}

.propiedadesInformacion{
    background-color: rgb(62, 121, 180);
}
.propiedadesContenido{
 background-color: #d3cacade;

}

.botonpropiedadesactualizar{
 color: rgb(231, 165, 22);
}
.botonpropiedadeseliminar{
 color: #b31c1d;

}

.botonescontrol{
    display: flex;
    flex-direction: row;
}

.papel{
    font-size: 12px;
    color: #857373; 
}