/*fonts*/
@font-face {
  font-family: 'BilonaMedium';
  src: url('resouce/BilonaMedium-2v6W3.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'ShalinaPhilie';
  src: url('resouce/ShalinaPhilie-R9dRl.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

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

.contenedor {
  display: flex;
}

.lado-izquierdo {
  width: 40%;
  height: 100vh;
  background: #3f0914;
  background-image: url('resouce/beanstalk-dark.png');
  background-repeat: repeat;
  background-blend-mode: screen;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 20px;
  box-shadow: 20px 0 40px rgba(0, 0, 0, 0.5);
  z-index: 2;
  margin-right: -20px;
  border-radius: 0 10px 10px 0;
}

.lado-derecho {
  width: 60%;
  height: 100vh;
  background: #F2F4F3;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
}

.formulario {
  width: 100%;
  max-width: 320px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
}

.formulario form {
  position: absolute;
  width: 100%;
  padding: 40px 30px;
  background: #F2F4F3;
  border-radius: 10px;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.formulario form h2 {
  margin-bottom: 20px;
  color: #6c6f7d;
  text-align: center;
}

.formulario form input {
  display: block;
  margin-bottom: 15px;
  padding: 10px;
  width: 100%;
  border: 2px solid #4a4c56;
  border-radius: 5px;
}

.formulario form input[type="submit"],
.formulario form button {
  display: block;
  background-color: #6c6f7d;
  color: white;
  border: 2px solid #4a4c56;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  width: fit-content;
  margin: 10px auto;
}

.formulario form input[type="submit"]:hover,
.formulario form button:hover {
  background-color: #4a4c56;
}


#formLogin {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

#formRegistro {
  opacity: 0;
  visibility: hidden;
  z-index: 1;
}

@keyframes typing {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

.ripple-button {
  position: relative;
  overflow: hidden;
}

.ripple-button .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: scale(0);
  animation: ripple-effect 0.6s linear;
  pointer-events: none;
  width: 100px;
  height: 100px;
}

@keyframes ripple-effect {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

#formLogin #btnRegistro {
  padding: 6px 12px;
  font-size: 0.9rem;
  background-color: transparent;
  color: #6c6f7d;
  border: none;
  text-decoration: underline;
  margin-top: 5px;
}

.boton-centro {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

#formRegistro #btnVolverLogin {
  padding: 6px 12px;
  font-size: 0.9rem;
  background-color: transparent;
  color: #6c6f7d;
  border: none;
  text-decoration: underline;
  margin-top: 5px;
}

#fraseMotivacional {
  font-family: 'ShalinaPhilie', monospace;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  font-size: 2rem;
  max-width: 100%;
  color: #49111C;
}

.cursor {
  display: inline-block;
  width: 1px;
  height: 1em;
  background-color: #000;
  margin-left: 2px;
  animation: blink 0.7s step-start infinite;
}

.cursor.activo {
  animation-play-state: running;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

.navbar>ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Padre relativo para posicionar el submenu */
.navbar ul li.dropdown {
  position: relative;
}

/* Evita que alguna regla previa esté recortando el submenu */
.navbar,
.navbar ul,
.navbar ul li {
  overflow: visible !important;
}

/* Submenu oculto por defecto */
.navbar ul li .dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  /* un poquito debajo del item */
  left: 0;
  min-width: 180px;
  background: var(--white, #fff);
  border-radius: 6px;
  border: 1px solid var(--medium-grey, #e0e0e0);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  padding: 6px 0;
  z-index: 9999;
  /* aseguramos layout vertical si alguna regla "flex" se filtra */
  display: none;
  flex-direction: column;
}

/* estilos de los links del submenu */
.navbar ul li .dropdown-menu li a {
  display: block;
  padding: 10px 14px;
  color: var(--dark-grey, #333);
  text-decoration: none;
  white-space: nowrap;
}

.navbar ul li .dropdown-menu li a:hover {
  background: var(--medium-grey, #e0e0e0);
  color: var(--primary-color, #49111C);
}

/* Mostrar el submenu SOLO cuando se hace hover en el LI padre */
.navbar ul li.dropdown:hover>.dropdown-menu {
  display: block;
}