/* --- DESCRIPCION ---
0. Generales
1. Secciones, recuadros y fondo
2. Logo
3. Login
4. Moviles y tablets

*/

/* --- 0. Generales ---*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /*font-family: 'Quicksand', sans-serif;*/
  font-family: 'Roboto', sans-serif;
}

/* --- 1. Secciones, recuadros y fondo --- */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #000;
}

section {
  position: absolute;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
  overflow: hidden;
}

section::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  /*animación gradiente naranja Arrabal*/
  background: linear-gradient(rgba(0,0,0,1),rgba(255,149,0,1),rgba(0,0,0,1) );
  animation: animate 5s linear infinite;
}

@keyframes animate {
  0%
  {
    transform: translateY(-100%);
  }
  100%
  {
    transform: translateY(100%);
  }
}

section span {
  position: relative;
  display: block;
  width: calc(6.25vw - 2px);
  height: calc(6.25vw - 2px);
  background: #181818;
  z-index: 2;
  transition: 1.5s;
}


section span:hover { /*color recuadros*/
  background: rgba(255,149,0,1);
  transition: 1s;
}

section .signin {
  position: absolute;
  width: 400px;
  background: #222;  
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px;
  border-radius: 4px;
  box-shadow: 0 15px 35px rgba(0,0,0,9);
}

section .signin .content {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 40px;
}

section .signin .content h2 {
  font-size: 2em;
  color: rgba(255,149,0,1);
  text-transform: uppercase;
}

section .signin .content .form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

section .signin .content .form .inputBox {
  position: relative;
  width: 100%;
}


section .signin .content .form .inputBox input {/*color del texto al completar*/
  position: relative;
  width: 100%;
  background: #333;
  border: none;
  outline: none;
  padding: 25px 10px 7.5px;
  border-radius: 4px;
  color: rgba(255,149,0,1);
  font-weight: 500;
  font-size: 1em;
}

section .signin .content .form .inputBox i {
  position: absolute;
  left: 0;
  padding: 15px 10px;
  font-style: normal;
  color: #aaa;
  transition: 0.5s;
  pointer-events: none;
}

.signin .content .form .inputBox input:focus ~ i,
.signin .content .form .inputBox input:valid ~ i {
  transform: translateY(-7.5px);
  font-size: 0.8em;
  color: #fff;
}

.signin .content .form  {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.signin .content .form  a {
  color: rgba(255,149,0,1);
  text-decoration: none;
}

.signin .content .form  a:nth-child(2) {
  color: rgba(255,149,0,1);
  font-weight: 600;
}

/* --- 2. Logo --- */

#logo{width:300px; height: 117px;}


/* --- 3. Login --- */

div#login {
    z-index: 9999 !important;
}

.login form{
  background:none !important;
  border:0 !important;
  box-shadow: none;
}

#login {
  width: 380px !important;
  background: rgba(43, 42, 51,1) !important;
  padding: 20px !important;
  box-shadow: 1px 1px 30px black;
}

#nav, label, .wp-login-register, .wp-login-lost-password, backtoblog, a {
  color: white !important;
}
a:hover{color:rgba(255,149,0,1)!important;}
.language-switcher{display:none !important;}


.signin .content .form .inputBox input[type="submit"]{ /*botón login*/
  padding: 10px;
  background: rgba(255,149,0,1);
  color: rgba(255,255,255,1);
  font-weight: 600;
  font-size: 1.35em;
  letter-spacing: 0.05em;
  cursor: pointer;
}

input[type="submit"]:active { opacity: 0.6;}

.signin .content .form .inputBox input[type="submit"]:hover {
  padding: 10px;
  /* background: rgba(231,20,103,1);*/
  background: linear-gradient(to right,#f49819,#f2752c, #ed4b45, #ea2d58, #e81b63, #e71467 );
  color: rgba(255,255,255,1);
  font-weight: 600;
  font-size: 1.35em;
  letter-spacing: 0.05em;
  cursor: pointer;
}

button.button.button-secondary.wp-hide-pw.hide-if-no-js{color:rgba(255,149,0,1) !important;}

#loginform .button-primary,
#loginform .button-primary.button-large,
#loginform .button-primary#wp-submit {
  background: rgba(255,149,0,1) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 600;
  font-size: 1.2em;
  border-radius: 4px;
  box-shadow: none;
  transition: background 0.2s;
}
#loginform .button-primary:hover,
#loginform .button-primary.button-large:hover,
#loginform .button-primary#wp-submit:hover {
  background: linear-gradient(to right,#f49819,#f2752c) !important;
  color: #fff !important;
}

/*txt*/
p#nav, p#backtoblog {
    text-align: center !important;
}

/* Tipografía general del login: sin negrita */
body.login, #login, #loginform, #loginform input, #loginform label, #loginform .button-primary, #loginform .button-primary.button-large, #loginform .button-primary#wp-submit {
  font-family: 'Roboto', sans-serif !important;
  font-weight: 200 !important;
}

.toggle-password.material-icons { /*color ojo contraseña */
  color: rgba(255,149,0,1);
}

.password-container { position: relative;}

#password {padding-right: 30px;}

.toggle-password {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  cursor: pointer;
}

/* Focus en campos del login: borde naranja Arrabal */
#loginform input:focus, #loginform input:active, #loginform input[type="text"]:focus, #loginform input[type="password"]:focus {
  border: 2px solid rgba(255,149,0,1) !important;
  box-shadow: 0 0 0 1.5px rgba(255,149,0,0.5) !important;
  outline: none !important;
}

/* --- 4. Moviles y tablets --- */
 
@media (max-width: 900px){ /* tablet */
  section span {
    width: calc(10vw - 2px);
    height: calc(10vw - 2px);
  }
}

@media (max-width: 600px){ /* movil */
  section span {
    width: calc(20vw - 2px);
    height: calc(20vw - 2px);
  }
}