#envolvente_form_acceso {
margin-top: 2em;
margin-bottom: 4em;
width: 100% ;
display: flex;
flex-direction: column;
align-items: center;
}

#matriz_candados {
margin: 0 auto 1em auto;
max-width: fit-content;
display:grid;
gap: 1em;
grid-template-columns: 1fr 1fr 1fr;
}

.div_candado img{
max-width: 2em;
height: auto;
}

#input_datakey {
width: 8em;
margin: 0 1em;
font-size: .6em;
text-align: center;
}

#form_key .submit-button {
font-size: .6em;
}

#error_acceso {
text-align: center;
color: transparent;
font-size: .6em;
}


/* ********************************* */
/* Estilo para monitores muy grandes */
/*                                   */
/* ********************************* */
@media (min-width: 1980px) {
body {
width: 100%;
font-size: 1.8rem;
margin:0;
padding:0;
}
#div_h1_alegreweb {
font-size: 1.8rem;
}
#div_cab {
font-size: 1.2rem;
}
#botton_cab {
margin: 8rem 0;
}
#svg_logo {
width: 100%;
height: auto;
}
#botton_logo {
margin: 6rem 0;
}
#contenedor {
max-width: 800px;
margin: 0 auto;
padding: 2rem;
border: 2px solid #000;
border-radius: 55px;
}
#top_foot {
margin-bottom: 5rem;
}
#div_foot {
width: 100%;
font-size: 1.2rem;
display: flex;
justify-content: center;
}
#div_table {
max-width: 800px;
}
#div_table table {
width:100%;
table-layout: fixed;
text-align: center;
}
#botton_foot {
margin-bottom: 5rem;
}
#ancho-pantalla {
position: fixed;
bottom: 1rem;
right: 1rem;
background-color: rgba(0, 0, 0, 0.6);
color: white;
padding: .8rem 1.2rem;
border-radius: 5px;
opacity: .4;
font-size: 1.6rem;
}
}
/* ****************************** */
/* Estilo para monitores estandar */
/*                                */
/* ****************************** */
@media (min-width: 1300px) and (max-width:1980px) {
body {
width: 100%;
font-size: 1.5rem;
margin:0;
padding:0;
}
#div_h1_alegreweb {
font-size: 1rem;
}
#div_cab {
font-size: 1.1rem;
}
#botton_cab {
margin: 4rem 0;
}
#svg_logo {
width: 100%;
height: auto;
}
#botton_logo {
margin: 2rem 0;
}
#contenedor {
max-width: 500px;
margin: 0 auto;
padding: 2rem;
border: 2px solid #000;
border-radius: 55px;
}
#top_foot {
margin-bottom: 3rem;
}
#div_foot {
width: 100%;
font-size: 1.2rem;
display: flex;
justify-content: center;
}
#div_table {
max-width: 800px;
}
#div_table table {
width:100%;
table-layout: fixed;
text-align: center;
}
#botton_foot {
margin-bottom: 3rem;
}
#ancho-pantalla {
position: fixed;
bottom: .6rem;
right: .6rem;
background-color: rgba(0, 0, 0, 0.6);
color: white;
padding: .4rem .8rem;
border-radius: 5px;
opacity: .4;
font-size: 1rem;
}
}
/* **************************** */
/* Estilo para monitores laptop */
/*                              */
/* **************************** */
@media (min-width: 860px) and (max-width: 1300px) {
body {
width: 100%;
font-size: 1.3rem;
margin:0;
padding:0;
}
#div_h1_alegreweb {
font-size: .4rem;
}
#div_cab {
font-size: .9rem;
}
#botton_cab {
margin: 2rem 0;
}
#svg_logo {
width: 100%;
height: auto;
}
#botton_logo {
margin: 1rem 0;
}
#contenedor {
max-width: 500px;
margin: 0 auto;
padding: 2rem;
border: 2px solid #000;
border-radius: 55px;
}
#top_foot {
margin-bottom: 2rem;
}
#div_foot {
width: 100%;
font-size: 1.2rem;
display: flex;
justify-content: center;
}
#div_table {
max-width: 800px;
}
#div_table table {
width:100%;
table-layout: fixed;
text-align: center;
}
#botton_foot {
margin-bottom: 1rem;
}
#ancho-pantalla {
position: fixed;
bottom: .6rem;
right: .6rem;
background-color: rgba(0, 0, 0, 0.6);
color: white;
padding: .4rem .8rem;
border-radius: 5px;
opacity: .4;
font-size: 1rem;
}
}
/* ******************************** */
/* Estilo para dispositivos móviles */
/*                                  */
/* ******************************** */
@media (max-width: 860px) {
body {
width: 100%;
font-size: 1.3rem;
margin:0;
padding:0;
}
#div_h1_alegreweb {
font-size: .2rem;
}
#div_cab {
font-size: .7rem;
}
#botton_cab {
margin: 3rem 0;
}
#svg_logo {
width: 95%;
height: auto;
}
#botton_logo {
margin: 2rem 0;
}
#contenedor {
max-width: 340px;
margin: 0 auto;
padding: 2rem 0;
border: 2px solid #000;
border-radius: 55px;
}
#top_foot {
margin-bottom: 4rem;
}
#div_foot {
width: 100%;
font-size: 1rem;
display: flex;
justify-content: center;
}
#div_table {
max-width: 800px;
}
#div_table table {
width:100%;
table-layout: fixed;
text-align: center;
}
#botton_foot {
margin-bottom: 4rem;
}
#ancho-pantalla {
position: fixed;
bottom: .4rem;
right: .4rem;
background-color: rgba(0, 0, 0, 0.6);
color: white;
padding: .2rem .4rem;
border-radius: 5px;
opacity: .4;
font-size: .8rem;
}
}

/* ************** */
/* Estilo GENERAL */
/* ************** */
body {
background-color: #333333;
color: #DEB887;
}
#div_h1_alegreweb {
width: 100%;
color: #333333;
text-align: center;        
}
#div_cab {
width: 100%;
text-align: center;
}
#div_cab div {
display: inline-block;
margin: 0 .8rem;
}
#div_logo {
width: 100%;
display: flex;
justify-content: center;
}
#div_logo:hover #g_svg_alegre {
fill: #00FFFF;
}
#tooltiptext {
font-size: 1.2rem;
color: #00FFFF;
padding-left: 2em;
text-align: center;
opacity: 0;
transition: opacity 600ms;
}
#contenedor li{
margin-bottom: 1em;
}
a {
color: #FFEBCD;
text-decoration: none;
}
a:hover {
color: #00FFFF;
}
#div_foot a {
color: #DEB887;
text-decoration: underline;
}
#div_foot a:hover {
color: #FFEBCD;
}