body {
  padding: 0px;
  margin: 0px;
  background-color: #fafffa;
  background-image: url("https://www.transparenttextures.com/patterns/concrete-wall-2.png");
/*  margin: 70px;*/
/*  background-color: #ffffff;*/
/*  background-image: url("https://www.transparenttextures.com/patterns/brick-wall-dark.png");*/
/*  font-family: Cantarell;*/
/*  font-family: arial, sans-serif;*/
  
  font-family: Verdana , sans-serif;
  font-size: 14px;
/*  background-color: rgb(249, 250, 247);*/

}

/* Applies to all <h1>...</h1> elements. */
h1 {
  text-align:center;
  color: #192747;
  font-size: 47px;
  font-weight: normal;
  margin-top: 1px;
  margin-bottom: 3px;
}
h3 {
  text-align:center;
  color: #172542;
  font-size: 21px;
  font-weight: normal;
  margin-top: 0px;
}
h5 {
  text-align:center;
  color: #172542;
  font-size: 16px;
  font-weight: normal;
  margin-top: 0px;
}

#cabecera{
  opacity: .4;
  padding:  0px 0px 0px 0px;
  margin:0px;
  background-color: #fafffa;
/*  height: 170px;*/
}

.distribulle{
/*  opacity: .4;*/
  padding:  7px 10px 1px 4px;
  margin:2px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background-color: #fafffa;
/*  height: 170px;*/
}

.esconde {
            display: none;
        }
.distribulle_cabeza{
/*  opacity: .4;*/
/*  padding:  7px 10px 1px 4px;*/
/*  margin:2px;*/
  display: flex;
  justify-content: space-between;
/*  background-color: #fafffa;*/
/*  height: 170px;*/
}
.distribulle_pie{
/*  opacity: .4;*/
/*  padding:  7px 10px 1px 4px;*/
/*  margin:2px;*/
  font-size: 17px;
  display: flex;
  justify-content: space-between;
/*  background-color: #fafffa;*/
/*  height: 170px;*/
}

.contiene{
  margin-top: 17px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  align-content: center;
}
/* Applies to all elements with <... class="someclass"> specified. */
.div_cuadro {
  position:relative;
  margin: 12px;
/*  padding: 12px;*/
  display: inline-block;
}
.ima_cuadro{
/*  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;*/
/*  box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;*/
  box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;

/*  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;*/
/*  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;*/
/*  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;*/
/*box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;*/
/*  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;*/
/*box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;*/
/*box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;*/
}
.checkbox{
  transform: scale(1.5); /* Aumenta el tamaño del checkbox */
  margin: 7px; /* Ajusta el margen si es necesario */
}
.div_ficha{
/*  text-align: right;*/
/*  align-content: right;*/
  width: 57px;
  float: right;
  background-color: rgb(247, 243, 233);
  margin: 3px;
  font-family: Courier , monospace;
  font-size: 4px;
  padding: 3px;
  border: 1px solid rgb(150, 130, 74);
  opacity:.6;
}
.ficha_trans_suave{
  -webkit-transition: width 270ms,font-size 270ms,opacity 270ms;   
  -moz-transition:  width 270ms,font-size 270ms,opacity 270ms;  
  -o-transition:  width 270ms,font-size 270ms,opacity 270ms;  
  -ms-transition: width 270ms,font-size 270ms,opacity 270ms; 
  transition: width 270ms,font-size 270ms,opacity 270ms;
}
.div_ficha_flotada{
  right: 0;
  bottom: 0;
  position:absolute;
  width: 57px;
  background-color: #f7f6f4;
  background-image: url("https://www.transparenttextures.com/patterns/beige-paper.png");
  /* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
/*  background-color: rgb(247, 243, 233);*/
  margin: 3px;
  font-family: Courier , monospace;
  font-size: 4px;
  padding: 3px;
  border: 1px solid rgb(150, 130, 74);
/*  transition: width 270ms,font-size 270ms,opacity 270ms;*/
  opacity:.6;
}
.div_ficha_flotada_G{
  line-height: 170%;
  opacity:.95;
/*  position:absolute;*/
/*  right: 0;*/
/*  bottom: 0;*/
  width: 237px;
/*  float: right;*/
/*  background-color: rgb(247, 243, 233);*/
  margin: 0px;
  font-family: Courier , monospace;
  font-size: 15px;
  padding: 9px;
/*  border: 1px solid rgb(150, 130, 74);*/
}


/*background-color: #e0e0e0;*/
/*background-image: url("https://www.transparenttextures.com/patterns/concrete-wall.png");*/
/* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
/*  transform: scale(5);*/
/*.div_ficha:hover {
  width: 300px;
  float: right;
  background-color: rgb(247, 243, 233);
  margin: 3px;
  font-size: 14px;
  padding: 3px;
  border: 1px solid rgb(150, 130, 74);
}
*//* Applies to the element with <... id="someid"> specified. */
#someid { color: green; }








/*FORMA*/

label {
            display: block; /* Para que las etiquetas estén encima de los campos */
            margin-bottom: 5px; /* Espacio entre la etiqueta y el campo */
}
input[type="text"],
input[type="email"],
input[type="tel"] {
    width: 100%; /* Para que los campos ocupen todo el ancho del contenedor */
    padding: 5px;
    margin-bottom: 3px;
    box-sizing: border-box; /* Para que el padding no aumente el ancho total */
    border: 1px solid #ccc;
    border-radius: 7px;
}
input[type="submit"] {
    background-color: #4CAF50;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
input[type="submit"]:hover {
    background-color: #45a049;
}
.error {
    color: red;
    font-size: small;
    margin-top: -5px; /* Ajusta el margen superior para que esté cerca del campo */
    margin-bottom: 10px;
}
form {
    max-width: 400px; /* Ancho máximo del formulario */
    margin: 0 auto; /* Centra el formulario horizontalmente */
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 5px;
}