/*************************************************************************************** 
*   Nombre:styles.css 
*   Funcionalidad:Crear las estiquetas y estilos de lapresentacion de los elemntos del,
*   html, como input,label, table, menu otros
*   creado: felix roman mendez zambrano // frmz/18-08-2023
* ****************************************************************************************/

* {
    font-family: Helvetica;
    margin: 0px;
    text-decoration: none;
    padding: 0px;
}

body {
    /* background-image: url('dbweb1.png'); */
    /* background-repeat: no-repeat;
    background-size: 20%;
    background-position: center center;
    height: 100vh; */
}


.btn--radius {
    padding: 3px 3px 3px 3px;
    margin-top: 3px;
    color: white;
    font-family: Helvetica;
    /*text-shadow: 3PX 3PX 3PX black;*/
    font-size: 1.4rem;
    border-radius: 10px;
    background: linear-gradient(rgb(89, 171, 48) 20%,
            rgb(7, 220, 21) 35%, rgb(27, 144, 3) 100%);
/*            
    background: linear-gradient(rgb(53, 184, 177) 20%,
            rgb(90, 131, 122) 35%, rgb(24, 165, 130) 100%);
    /*    text-align: center;*/
    border-bottom: 0.3rem rgb(1, 5, 41) solid;


}


.btn--radius:hover {

    transition: 0.1s;
    background: linear-gradient(rgb(108, 9, 121) 20%,
            (rgb(59, 13, 65) 35%, rgb(70, 71, 126) 100%));
    box-shadow: 5px 5px 5px saddlebrown;
    text-shadow: 3PX 3PX 3PX black;

}

.btn--radius:disabled {
    background-color: lightgray; /* Cambia el color de fondo */
    color: gray; /* Cambia el color del texto */
    cursor: not-allowed; /* Muestra el cursor de "no permitido" */
  }

.btn--radius_2 {
    padding: 3px 3px 3px 3px;
    margin-top: 10px;

    color: white;
    font-family: Helvetica;
    /*text-shadow: 3PX 3PX 3PX black;*/
    font-size: 2rem;
    border-radius: 10px;
    /*background: linear-gradient(rgb(126, 128, 127) 20%,
            rgb(153, 167, 164) 35%, rgb(103, 107, 106) 100%);*/
    background: linear-gradient(rgb(22, 69, 46) 20%,
    rgb(90, 131, 122) 35%, rgb(25, 122, 98) 100%);
    /*    text-align: center;*/
    border-bottom: 0.3rem rgb(124, 7, 170) solid;
}

.btn--radius2 {
    padding: 3px 3px 3px 3px;
    color: white;
    background-color: transparent;
    font-family: Helvetica;
    font-size: normal;
    font-size: 1rem;

}


.btn--radius2:hover {
    color: rgb(255, 255, 0);
    text-shadow: 8px 8px 8px rgb(0, 0, 0);
    transition: 0.1s;
    border-radius: 10PX 10PX;
    box-shadow: 5px 5px 5px rgb(255, 255, 255);

}

.btn--radius_2 {
    margin-top: 3px;
    width: 100%;
    padding: 3px 3px 3px 3px;
    color: white;
    background-color: transparent;
    font-family: Helvetica;
    font-size: normal;
    font-size: 1rem;
    border-radius: 10px;
}


.btn--radius_2:hover {
    color: rgb(255, 255, 0);
    text-shadow: 8px 8px 8px rgb(0, 0, 0);
    transition: 0.1s;
    border-bottom: 20PX 20PX;
    box-shadow: 5px 5px 5px rgb(255, 255, 255);

}


.btn-a,
.btn-c,
.btn-b {
    border-radius: 5px;
    padding-left: 10px;
    padding-right: 10px;
    font-weight: bold;
    text-decoration: none;
    font-size: 1.2rem;
    text-align: center;
}

.btn-a {
    /*display: inline-block;*/
    color: white;
    background-color: green;
    text-decoration: none;
    margin-left: 5px;
    float: left;
}

.btn-a:hover {
    transition: 0.1ms;
    color: rgb(255, 123, 0);
    box-shadow: 5px 5px 5px gray;
}

.btn-b {
    display: inline-block;
    color: white;
    background-color: orange;
    margin-left: 5px;
}

.btn-b:hover {
    transition: 0.1ms;
    color: green;
    box-shadow: 5px 5px 5px gray;
}

.btn-c {
    /*display: inline-block;*/
    color: white;
    background-color: rgb(5, 108, 225);
    text-decoration: none;
    margin-left: 5px;
    float: left;
}

.btn-c:hover {
    transition: 0.1ms;
    color: rgb(0, 255, 38);
    box-shadow: 5px 5px 5px gray;
}


.text-margin-10,
.text-margin,
.text-margin-one,
.text-margin-three,
.text-margin-4,
.text-margin-three1 {
    margin-bottom: 5px;
    border-radius: 8px;
    font-size: 1rem;
}

.text-margin {
    background-color: rgb(235, 232, 232);
    margin-bottom: 5px;
    /*margin-bottom: 3px;*/
    color: rgb(0, 0, 0);
    border-radius: 8px;
    text-align: center;
    font-size: 1.5rem;
    width: 95%;
}

.text-margin-10 {
    color: rgb(0, 0, 0);
    text-align: center;
    padding-top: 4px;
    width: 20%;
}

.text-margin-50 {
    color: rgb(0, 0, 0);
    text-align: right;
    border-radius: 8px;
    width: 50%;
}

.text-margin-one {
    color: rgb(0, 0, 0);
    text-align: right;
    width: 18%;
}

.text-margin-two {
    color: rgb(0, 0, 0);
    text-align: left;
    border-radius: 8px;
    width: 20%;
}

.text-margin-three {
    color: rgb(177, 0, 0);
    background-color: rgb(235, 232, 232);
    text-align: right;
    font-size: 1.3rem;
    font-weight: bold;
    width: 47%;
}

.text-margin-4 {
    text-align: center;
    color: rgb(177, 0, 0);
    background-color: rgb(235, 232, 232);
    font-size: 1.3rem;
    width: 95%;
}

.text-margin-three1 {

    width: 35%;

}

.botton-margin {
    background-color: blue;
    margin-top: 5px;

    margin-bottom: 15px;
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
    border-radius: 10px;
    box-shadow: 3px 3px 3px rgb(201, 2, 2);
    width: 10%;
}

.botton-margin:active {
    transition: 0.1ms;
    box-shadow: 0px 0px 0px rgb(201, 2, 2);

}

.botton-margin:hover {
    transition: 0.1ms;
    background-color: rgb(255, 0, 0);
    box-shadow: 3px 3px 3px rgb(32, 2, 201);

}

.bottons-margin {
    background-color: blue;
    margin-top: 5px;
    margin-bottom: 15px;
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
    border-radius: 10px;
    box-shadow: 3px 3px 3px rgb(201, 2, 2);
    width: 10%;
}

.central-18 {
    margin-left: 36rem;
    text-align: center;
    border-radius: 10px;
    box-shadow: 3px 3px 3px 6px rgb(158, 86, 86);
    max-width: 15%;
    color: blue;
}

.central {
    margin-left: 30rem;
    text-align: center;
    border-radius: 20px;
    box-shadow: 3px 3px 3px 6px rgb(158, 86, 86);
    max-width: 20%;
    color: blue;
}

.div-des{
    text-align: center;
    font-weight: bold;
    color: white;
    border-radius: 10px;
    width: 8rem;
    height: 1.3rem;
    background-color:rgb(124, 7, 170) ;
    box-shadow: 3px 3px 3px gray;
}
.div-header {
    color: yellow;
    text-align: center;
    border-radius: 5px;
    width: 100%;
    height: 30px;
    background-color: rgb(0, 17, 255);
    box-shadow: 3px 3px 3px rgb(133, 1, 1);
}

.div-two {
    margin-top: 10px;
    margin-left: 10px;
    width: 90%;
    border: 4px solid gray;
    height: 450px;
    border-radius: 20px;
    text-align: center;
}

.div-10,
.div-12,
.div-15,
.div-20,
.div-25,
.div-21,
.div-25,
.div-30,
.div-35,
.div-40,
.div-45,
.div-50,
.div-50_scrolling,
.div-60,
.div-70,
.div-901,
.div-90 {
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    border: 1px solid rgb(124, 7, 170);
    margin-top: 0.1rem;
    margin-left: 0.3rem;
    text-align: center;
    /* font-weight: bold; */
    /* box-shadow: 5px 5px 5px gray; */
}

.div-10 {
    width: 10%;
    
    border-bottom: 0.1rem solid  rgb(124, 7, 170) ;
    text-align: center;
    float: left;
}


.div-12 {
    width: 12%;
    
    border-bottom: 0.1rem solid  rgb(124, 7, 170) ;
    text-align: center;
    float: left;
}

.div-15 {

    width: 15%;
    border-bottom: 0.2rem solid  rgb(124, 7, 170) ;
    float: left;
}

.div-20 {
    width: 16%;
    border-bottom: 0.2rem solid rgb(124, 7, 170) ;
    float: left;
    /* box-shadow: 0px 0px 0px gray; */
}
.div-20:hover{
    transition: 0.2ms;
    box-shadow: 5px 5px 5px gray;
}
.div-25 {
    width: 25%;
    border-bottom: 1rem solid  rgb(124, 7, 170) ;
    float: left;

}

.div-21 {
    margin: 0px;
    width: 80%;
    border-bottom: 0.3rem solid  rgb(124, 7, 170) ;
    padding-bottom: 0.2rem;
    padding-left: 0.2rem;
    float: left;

}

.div-30 {
    width: 30%;
    float: left;
    border-bottom: 1rem solid  rgb(124, 7, 170) ;
}

.div-35 {
    width: 35%;
    float:  left;
    border-bottom: solid  rgb(124, 7, 170) ;
}


.div-40 {
    width: 40%;
    float: left;
}

.div-45 {
    background-color: solid antiquewhite;
    width: 45%;
    float: left;
}

.div-50_scrolling {
    width: 55%;
    float: left;
    margin-top: 1rem; 
    margin-left: 1rem; 
    max-width: 680px; 
    max-height: 550px; 
    overflow: auto; /* Para que tenga scroll cuando sea necesario */
}

.div-50 {
    width: 50%;
    float: left;
}


.div-60 {
    width: 60%;
    float: left;
}

.div-70 {
    width: 70%;
    border-bottom: 0.4rem solid black;
    float: left;
    font-size: 1rem;
    text-align: center;
    padding-left: 0px;
}

.div-80 {
    width: 80%;
    border-bottom: 0.4rem solid black;
    float: left;
    font-size: 1rem;
    text-align: center;
    padding-left: 0px;
}

.div-90 {
    background:  linear-gradient(rgb(53, 184, 177) 20%,
    rgb(90, 131, 122) 35%, rgb(24, 165, 130) 100%);
    font-family: Helvetica;
    width: 90%;
    border-bottom: 0.2rem black solid;
    text-align: left;
    float: left;
    margin-right: 5px;
}

.div-100 {
    /*background: linear-gradient(rgb(53, 184, 177) 20%,
            rgb(90, 131, 122) 35%, rgb(24, 165, 130) 100%);
    background: linear-gradient(rgb(184, 53, 53) 20%,
            rgb(234, 91, 91) 35%, rgb(165, 24, 24) 100%); */
    background: linear-gradient(rgb(53, 62, 184) 20%,
            rgb(91, 134, 234) 35%, rgb(52, 24, 165) 100%);        
    font-family: Helvetica;
    width: 100%;
    border-bottom: 0.2rem black solid;
    text-align: left;
    float: left;
    margin-right: 5px;
}

.div-95 {
    margin-top: -5px;
    width: 86%;
    background:  linear-gradient(rgb(53, 184, 177) 20%,
    rgb(90, 131, 122) 35%, rgb(24, 165, 130) 100%);
    text-align: center;
}

.div-96 {
    width: 100%;
    float: right;
    text-align: left;
    background: linear-gradient(rgb(117, 52, 52) 20%,
            rgb(90, 131, 122) 35%, rgb(52, 131, 111) 100%);
}

.div-one {
    margin-top: 10px;
    margin-left: 10px;
    width: 60%;
    border: 0.5rem solid gray;
    height: 50px;
    border-radius: 20px;
}


.div-overflow {
    background:  linear-gradient(rgb(53, 184, 177) 20%,
    rgb(90, 131, 122) 35%, rgb(24, 165, 130) 100%);
    font-family: Helvetica;
    width: var(--clr);
    border-bottom: 0.2rem black solid;
    text-align: left;
    float: left;
    margin-right: 5px;
    max-height: 550px;
    overflow: auto;
}


.label1 {
    color: red;
    font-size: 1.2rem;
    font-weight: bold;
}

.label2 {
    color: red;
    font-size: 1.4rem;
    font-weight: bold;
}

.label3 {
    color: white;
    background-color: black;
    font-size: 1.3rem;
    font-weight: bold;
    text-align: center;
    width: 90%;
    float: none;

}

.label31 {
    color: rgb(4, 1, 84);

    font-size: 3rem;
    font-weight: bold;
    text-align: center;
    width: 90%;
}

.label4 {
    color: red;
    font-size: 1rem;
    font-weight: bold;
}

.text-Precios {
    font-size: 1.4rem;
}


.files {
    padding: 3px 3px 3px 3px;
    font-style: oblique;
    /*border: 1px solid black;
    
    color: transparent;
    */
    text-align: center;
    background-color: white;
    font-size: 1.2rem;
    box-shadow: 3px 3px 3px 3px rgb(140, 129, 129);
    border-radius: 10px;

}


.div-202 {
    background: linear-gradient(rgb(22, 69, 46) 20%,
            rgb(90, 131, 122) 35%, rgb(25, 122, 98) 100%);
    border-bottom: 0.4rem black solid;
    padding-bottom: 0.1rem;

    border-radius: 0px 0px 5px 5px;
}

a {
    margin-left: 0.3rem;
    margin-right: 0.3rem;
}

td,
th {
    padding: 3px;
}

table {
    background-color: rgb(255, 255, 255);
    text-align: left;
    border-collapse: collapse;
    width: 100%;
    border-style: solid;
}

thead {
    border-bottom: rgb(78, 180, 43) solid 5px;
    background-color: black;
    color: rgb(255, 255, 255);
    font-weight: bold;
    text-align: center;
    height: ;
}

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

tr:hover td {
    background-color: rgb(45, 96, 27);
    color: white;
}

input [checkbox] {
    font-size: 2rem;
}
img{
    border-radius: 15px;
    box-shadow: 1px 1px 1px 1px saddlebrown;
    
} 



#principal {
    width: var(--clr);
    height: 100px;
    background-color: #ccc;
    cursor: pointer;
    margin: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Estilo para la superposición (modal) */
  #overlay {
    display: none; /* Oculto por defecto */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    
  }

  /* Estilo para el contenido superpuesto */
  #modalContent {
    background-color: #fff;
    padding: 20px;
    width: var(--clr);
    position: relative;
    border-radius: 8px;
    border-bottom: 0.3rem solid rgb(4, 121, 39) ;
    max-width: 600px;
    max-height: 500px;
    overflow-y: auto;
    overflow-x: none;
  }

  /* Estilo para el div interno de 300x300 */
  #innerDiv {
    width: var(--clr);
    height: var(--clr);
    background-color: #f0f0f0;
    margin-top: 10px;
  }

  /* Botón para cerrar */
  #closeBtn {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
  }


  #principal1 {
    width: var(--clr);
    height: 100px;
    background-color: #ccc;
    cursor: pointer;
    margin: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Estilo para la superposición (modal) */
  #overflow {
    display: none; /* Oculto por defecto */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    
  }

  /* Estilo para el contenido superpuesto */
  #modalContent1 {
    background-color: #fff;
    padding: 20px;
    width: var(--clr);
    position: relative;
    border-radius: 8px;
    border-bottom: 0.3rem solid rgb(4, 121, 39) ;
    max-width: 600px;
    max-height: 500px;
    overflow-y: auto;
    overflow-x: none;
  }

  /* Estilo para el div interno de 300x300 */
  #innerDiv1 {
    width: var(--clr);
    height: var(--clr);
    background-color: #f0f0f0;
    margin-top: 10px;
  }

  /* Botón para cerrar */
  #closeBtn1 {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
  }

#overtable {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    
  }

  /* Estilo para el contenido superpuesto */
  #modaltable {
    background-color: #fff;
    padding: 20px;
    width: var(--clr);
    position: relative;
    border-radius: 8px;
    border-bottom: 0.3rem solid rgb(4, 121, 39) ;
    max-width: 600px;
    max-height: 500px;
    overflow-y: auto;
    overflow-x: none;
  }

  /* Estilo para el div interno de 300x300 */
  #innerDiv3 {
    width: var(--clr);
    height: var(--clr);
    background-color: #f0f0f0;
    margin-top: 10px;
  }

  /* Botón para cerrar */
  #closeBtn3 {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
  }


@media(max-width:600px) {
    .div-20{
        width: 550px;  
        font-size: 1rem;
        display: none;
    }
    .btn--radius{
        font-size: 1rem;
    }
    .div-100{
        display: none;
    }
}