@charset "UTF-8";
html {
  font-size: 100%;
}
body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  width: 100vw;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 1em;
  color: #111;
  background: url("../images/web-size/Fondo-min.png") no-repeat fixed left top;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 30% 30%;
}
#logo {
  position: absolute;
  top: 0;
  left: 0;
  padding-top: 0.8em;
  padding-left: 1.2em;
}
.contenedor {
  position: relative;
  top: -2.5em;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: url("../images/web-size/bocadillo_login-5a-min.png");
  background-size: 32em 23em;
  background-repeat: no-repeat;
  width: 32em;
  height: 23em;
}
.contenedor-datos {
  width: 80%;
}
/* 2 áreas dentro de contenedor */
.area-bienvenida {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  text-align: center;
}
.area-formulario {
  margin-top: 0.2em;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
/* Área de bienvenida */
.area-bienvenida #hola {
  margin: 1.2em 0 0.6em 0; /* sobreescribe margen por defecto de h1 */
  width: 100%;
  font-size: 1.5em;
  line-height: 1.2em;
}
.area-bienvenida #datos {
  margin: 0; /* sobreescribe margen por defecto de h2 */
  width: 100%;
  font-size: 1em;
}
/* Área de formulario */
.area-formulario form {
  margin-top: 0;
  width: 70%;
}
.area-formulario form .dato-formulario {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.area-formulario form .dato-formulario label {
  min-width: 6.8em;
}
input {
  color: #000;
}
input[type="text"],
input[type="password"] {
  max-width: 97%;
  height: 1.3em;
  border: 0.125em solid black;
}
input[type="submit"] {
  background-color: #f3f3f3;
  padding: 0.4em 0.5em;
  border-radius: 0.25em;
  border: 0.125em solid #000;
  font-size: 0.9em;
}
::placeholder {
  color: #5d5c5c;
}
.area-formulario form .clickable-formulario {
  text-align: center;
  position: relative;
  left: -1.25em; /* para centrar en bocadillo, que no es simétrico por abajo */
  margin: 0.8em 0;
}
.area-formulario form .clickable-formulario a {
  /*color: #0600ed;*/
  color: #0000dd;
}
.area-formulario form .clickable-formulario a:visited {
  /*color: #613099;*/
  color: #542a88;
}
.area-formulario form #olvido {
  font-size: 0.8em;
}
.area-formulario form #acceder:hover {
  transition: all 0.25s;
  box-shadow: 0 0 0.2em 0.1em #dbdbdb;
}
.area-formulario form #reg {
  margin-top: 0em;
}
/* Tooltip */
span {
  max-width: 100%;
}
[data-tooltip] {
  position: relative;
  z-index: 2;
}
[data-tooltip]:before,
[data-tooltip]:after {
  opacity: 0; /* tooltip escondido por defecto */
  visibility: hidden;
}
[data-tooltip]:before {
  /* caja de texto y texto */
  position: absolute;
  bottom: 2.6em;
  padding: 0.4em;
  width: 95%;
  content: attr(data-tooltip);
  font-size: 0.7em;
  line-height: normal;
  text-align: center;
  background-color: #2c2b2b;
  color: rgb(253, 252, 252);
  border-radius: 0.2em;
  transition: all 0.2s;
}
[data-tooltip]:after {
  /* triángulo inferior */
  position: absolute;
  bottom: 1.55em;
  left: 50%;
  width: 0;
  margin-left: -6px;
  border-top: 6px solid #2c2b2b;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  content: "";
}
[data-tooltip]:focus-within:before,
[data-tooltip]:focus-within:after {
  opacity: 1; /* mientras que la caja de input está seleccionada, se muestra el tooltip */
  visibility: visible;
  transition: all 0.2s;
}
/* Only for Firefox b/c of different behavior on screen vs. Edge, Safari, Chrome, Opera */
@-moz-document url-prefix() {
  input {
    max-width: 11em !important;
  }
}
/* End of only for Firefox */
/* Only for Safari b/c of different behavior on screen vs. Edge, Chrome, Opera */
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    [data-tooltip]:before {
      /* caja de texto y texto */
      bottom: 2.3em;
    }
    [data-tooltip]:after {
      /* triángulo inferior */
      bottom: 1.4em;
    }
  }
}
/* End of only for Safari */
/* Errores */
.area-errores {
  position: absolute;
  top: 0;
  width: 100vw;
  z-index: 2;
  /* background-color: rgb(255, 117, 93); */
  background-color: #ff8c8c;
  /* border: 0.063em solid rgb(255, 117, 93); */
  border: 0.063em 0 solid #ff8c8c;
  box-shadow: 0 0 0.25em 0.125em #282020;
  text-align: center;
  color: #000; /* por accesibilidad AAA, #000 vs #111 */
}
.area-errores a {
  color: #000; /* por accesibilidad AAA, #000 vs #111 */
}
.area-errores .error {
  position: relative;
  font-size: 0.9em;
  margin: 0em;
  padding: 0.6em 1em;
  line-height: normal;
}
.area-errores #aceptar-error:hover {
  transition: all 0.25s;
  box-shadow: 0 0 0.2em 0.1em rgb(241, 80, 51);
}

/* Versión móvil */
@media (max-width: 60em) {
  #logo {
    padding-top: 0.6em;
    padding-left: 0.6em;
  }
  #logo * {
    transform: scale(0.9);
  }
  .contenedor {
    top: 0;
    background: url("../images/web-size/hoja2-min.png");
    background-size: 18em 24em;
    width: 18em;
    height: 23.5em;
    background-repeat: no-repeat;
    padding-top: 0.5em;
  }
  /* Área de bienvenida */
  .area-bienvenida #hola {
    font-size: 1.3em;
  }
  .area-bienvenida #datos {
    line-height: 1.2em;
    font-size: 0.875em;
  }
  /* Área de formulario */
  .area-formulario form {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  .area-formulario form .dato-formulario {
    margin: 0.4em 0; /* sobreescribe margen por defecto de p */
    width: 65%;
    flex-direction: column;
    align-items: flex-start;
    font-size: 0.875em;
  }
  .area-formulario form .clickable-formulario {
    margin: 0.4em 0; /* sobreescribe margen por defecto de p */
    left: 0;
  }
  .area-formulario form #acceder {
    margin: 0.2em 0;
  }
  .area-formulario form #reg {
    margin-top: 0.4em;
  }
}