body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
background-color: #f0f0f0;
}

#upload_container {
background-color: #fff;
padding: 1em;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, .3);
margin-top: 4em;
display: flex;
flex-direction: column;
}

#drop_area {
border: 2px dashed #ccc;
border-radius: 10px;
padding: 2em;
text-align: center;
cursor: pointer;
user-select: none;
}

#drop_area.resaltaFondo {
background-color: #f0f8ff;
}

#drop_area.activa {
border: 2px dashed #03753c;
}

#drop_area.ok {
border: 2px solid #03753c;
cursor: auto;
}

#drop_area.error {
border: 2px solid #d31414;
cursor: auto;
}

#reiniciar, #enviar_token {
color: blue;
cursor: pointer;
text-decoration: none;
margin: 1em auto 0 auto;
}

#span_envia{
color: blue;
}

#reiniciar:hover, #enviar_token:hover {
font-weight: bold;
color: lightseagreen;
text-decoration: underline;
}

#cancelar_token {
color: #b40303;
cursor: pointer;
text-decoration: none;
}

#cancelar_token:hover {
color: red;
text-decoration: underline;
}

#button_container {
margin: 3em auto;
}

.oculto {
display: none;
}

.visible {
display:block;
}

#button {
text-align: center;
background-color: #fff;
padding: .5em;
border: 2px solid rgba(0, 0, 0, .3);
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
cursor: pointer;
}

#button:hover {
font-weight: bold;
border: 2px solid rgba(0, 0, 0, 1);
}

#log_container {
width: 50vw;
display: flex;
flex-direction: column;
align-items: center;
}

#log_title {
width: 100%;
text-align: center;
font-weight: bold;
box-shadow: 0 -4px 8px 4px rgba(0, 0, 0, 0.1) inset;
}

#div_log {
font-family: 'consolas';
font-size: small;
text-align: center;
}

#div_data {
max-width: 200px;
}

.span_bad {
color: red;
}

.span_good {
color: green;
}

.span_negrita {
font-weight: bold;
}

#input_token {
text-align: center;
}