* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
  scroll-behavior: smooth;
}

/* colors */
:root {
  --bg-body: #1c1c1c;
  --bg-form: #2b2d2c;
  --border-form: #3a3b3d;
  --border-svg: #8f90e4;
  --color-primary: #8f90e4;
  --bg-input: #3a3b3d;
  --color-text: #E0E0E0;
  --color-button: #6366F1;
  --color-placeholder: #757575;
}

html {
  width: 100%;
  height: 100%;
}

body {
  background-color: var(--bg-body);
  position: relative;
  width: 100%;
  height: 100%;
  font-size: 16px;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* flatten de form y anidados */
form {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: 100%;
  max-width: 400px;
  background-color: var(--bg-form);
  margin: 0;
  padding: 2.25em;
  box-sizing: border-box;
  border: solid 1px var(--border-form);
  border-radius: .5em;
  font-family: 'Source Sans Pro', sans-serif;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6);
}

form .svgContainer {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto 1em;
  border-radius: 50%;
  background: none;
  border: solid 2.5px var(--border-svg);
  overflow: hidden;
  pointer-events: none;
}

form .svgContainer>div {
  position: relative;
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-bottom: 100%;
}

form .svgContainer .mySVG {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

form .inputGroup {
  margin: 0 0 2em;
  padding: 0;
  position: relative;
}

form .inputGroup:last-of-type {
  margin-bottom: 0;
}

form label {
  margin: 0 0 12px;
  display: block;
  font-size: 1.25em;
  color: var(--color-primary);
  font-weight: 700;
  font-family: inherit;
}

input[type='email'],
input[type="text"],
input[type='password'] {
  display: block;
  margin: 0;
  padding: 0 1em 0;
  background-color: var(--bg-input);
  border: solid 2px var(--color-primary);
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  height: 65px;
  font-size: 1.55em;
  color: var(--color-text);
  font-weight: 600;
  font-family: inherit;
  transition: box-shadow .2s linear, border-color .25s ease-out;
}

input[type='email']:focus,
input[type="text"]:focus,
input[type='password']:focus {
  outline: none;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, .1);
  border: solid 2px var(--color-button);
}

a {
  display: block;
  margin: 0;
  padding: .65em 1em 1em;
  background-color: var(--color-button);
  border: none;
  border-radius: 6px;
  box-sizing: border-box;
  box-shadow: none;
  width: 100%;
  height: 65px;
  font-size: 1.55em;
  color: var(--color-text);
  font-weight: 600;
  font-family: inherit;
  transition: background-color .2s ease-out;
  cursor: pointer;
  transition: 0.2s ease-in-out;
  text-align: center;
  text-decoration: none;
}

a:hover,
a:active {
  background-color: #5557e4;
  transform: translateY(-3px);
}

.inputGroup1 .helper {
  position: absolute;
  z-index: 1;
  font-family: inherit;
}

.inputGroup1 .helper1 {
  top: 0;
  left: 0;
  transform: translate(1.4em, 2.6em) scale(1);
  transform-origin: 0 0;
  color: var(--color-primary);
  font-size: 1.25em;
  font-weight: 400;
  opacity: .65;
  pointer-events: none;
  transition: transform .2s ease-out, opacity .2s linear;
}

.inputGroup1.focusWithText .helper {
  transform: translate(1.4em, 2.0em) scale(.65);
  opacity: 1;
}

/* Ajusta el espacio bajo el círculo */
form .svgContainer {
  margin: 0 auto 0.25em;
}

/* Baja el personaje dentro del círculo (ajusta el valor a tu gusto) */
form .svgContainer .mySVG {
  top: 14px;
  position: absolute;
}

/* Oculta estilos antiguos del helper (por si quedan) */
.inputGroup1 .helper,
.inputGroup1 .helper1 {
  display: none !important;
}

/* Texto del input más pequeño */
input[type='email'],
input[type="text"],
input[type='password'] {
  font-size: 1.2em;
  /* antes 1.55em */
}

/* Placeholder aún más pequeño y discreto */
input::-webkit-input-placeholder,
input::-moz-placeholder,
input:-ms-input-placeholder,
input::-ms-input-placeholder,
input::placeholder {
  color: var(--color-placeholder);
  opacity: .55;
  font-weight: 400;
  font-size: .8em;
  /* antes .9em */
  letter-spacing: .1px;
}

.handsContainer {
  width: 220px;
  margin: 0.5em auto 0;
}

.handsContainer svg {
  display: block;
  width: 100%;
  height: auto;
}

form .svgContainer .handsSVG {
  position: absolute;
  left: 9.5px;
  top: 51px;
  /* Esto alinea el SVG de las manos con el del cuerpo */
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  z-index: 10;
  /* Asegura que esté por encima de la cara */
}

.handsSVG {
  scale: 0.62;
}

/* Toast styles */
.toast {
  visibility: hidden;
  min-width: 280px;
  background-color: rgba(43, 45, 44, 0.95); /* var(--bg-form) with opacity */
  color: var(--color-text);
  text-align: center;
  padding: 18px 25px;
  position: fixed;
  z-index: 9999; /* Ensure it's on top of everything */
  left: 50%;
  top: 30px; /* Changed from bottom to top */
  transform: translateX(-50%);
  
  /* Styling to match the page */
  border: 1px solid var(--border-svg); 
  border-left: 5px solid var(--color-button);
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  font-family: 'Source Sans Pro', sans-serif;
  backdrop-filter: blur(5px);
  
  opacity: 0;
  /* Smoother transition */
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), top 0.5s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.5s;
}

.toast.show {
  visibility: visible;
  opacity: 1;
  top: 50px; /* Slight movement down on show */
}

.toast-content {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#toastMessage {
  color: #fff;
  font-size: 1.1em;
  margin: 0;
  font-weight: 500;
  letter-spacing: 0.5px;
}