/* colores utilizados */
:root
{
  --color-oscuro: #001952;
  --color-semioscuro: #194a96;
  --color-medio: #2262a0;
  --color-semiclaro: #a3b18a;
  --color-claro: #e7e4da;
}

/* fuentes personalizadas */
@font-face
{
  font-family: 'TituloDIV';
  src: url('../assets/KGSummerSunshine.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face
{
  font-family: 'TituloDIVBlackout';
  src: url('../assets/KGSummerSunshineBlackout.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face
{
  font-family: 'TituloDIVShadow';
  src: url('../assets/KGSummerSunshineShadow.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

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


body
{
  background-image: url("../img/bg.jpg");;
  position: relative;
  width: 100%;
  height: 100%;
  font-size: 16px;
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

form
{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: 100%;
  max-width: 400px;
  background-color: #FFF;
  margin: 0;
  padding: 2.25em;
  box-sizing: border-box;
  border: solid 1px #DDD;
  border-radius: 0.5em;
  font-family: "Source Sans Pro", sans-serif;
}

form .svgContainer
{
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto 1em;
  border-radius: 50%;
  pointer-events: none;
}

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

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

form .svgContainer:after
{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: inherit;
  height: inherit;
  box-sizing: border-box;
  border: solid 2.5px var(--color-oscuro);
  border-radius: 50%;
}

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-oscuro);
  font-weight: 700;
  font-family: inherit;
}

form input[type=email], form input[type=text], form input[type=number], form input[type=url], form input[type=search], form input[type=password]
{
  display: block;
  margin: 0;
  padding: 0 1em 0;
  padding: 0.875em 1em 0;
  background-color: var(--color-claro);
  border: solid 2px var(--color-oscuro);
  border-radius: 4px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 100%;
  height: 65px;
  font-size: 1.55em;
  color: #353538;
  font-weight: 600;
  font-family: inherit;
  transition: box-shadow 0.2s linear, border-color 0.25s ease-out;
}

form input[type=email]:focus, form input[type=text]:focus, form input[type=number]:focus, form input[type=url]:focus, form input[type=search]:focus, form input[type=password]:focus
{
  outline: none;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
  border: solid 2px var(--color-medio);
}

form button
{
  display: block;
  margin: 0;
  padding: 0.65em 1em 1em;
  background-color: var(--color-medio);
  border: none;
  border-radius: 4px;
  box-sizing: border-box;
  box-shadow: none;
  width: 100%;
  height: 65px;
  font-size: 1.55em;
  color: #FFF;
  font-weight: 600;
  font-family: inherit;
  transition: background-color 0.2s ease-out;
}

form button:hover, form button:active
{
  background-color: var(--color-oscuro);
}

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

form .inputGroup1 .helper1
{
  top: 0;
  left: 0;
  transform: translate(1em, 2.2em) scale(1);
  transform-origin: 0 0;
  color: var(--color-oscuro);
  font-size: 1.55em;
  font-weight: 400;
  opacity: 0.65;
  pointer-events: none;
  transition: transform 0.2s ease-out, opacity 0.2s linear;
}

form .inputGroup1.focusWithText .helper
{
  transform: translate(1em, 1.55em) scale(0.6);
  opacity: 1;
}

form .inputGroup2 input[type=password]
{
  padding: 0.4em 1em 0.5em;
}

form .inputGroup2 input[type=text]
{
  padding: 0.025em 1em 0;
}

form .inputGroup2 #showPasswordToggle
{
  display: block;
  padding: 0 0 0 1.45em;
  position: absolute;
  top: 0.25em;
  right: 0;
  font-size: 1em;
}

form .inputGroup2 #showPasswordToggle input
{
  position: absolute;
  z-index: -1;
  opacity: 0;
}

form .inputGroup2 #showPasswordToggle .indicator
{
  position: absolute;
  top: 0;
  left: 0;
  height: 0.85em;
  width: 0.85em;
  background-color: var(--color-claro);
  border: solid 2px var(--color-oscuro);
  border-radius: 3px;
}

form .inputGroup2 #showPasswordToggle .indicator:after
{
  content: "";
  position: absolute;
  left: 0.25em;
  top: 0.025em;
  width: 0.2em;
  height: 0.5em;
  border: solid var(--color-oscuro);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
  visibility: hidden;
}

form .inputGroup2 #showPasswordToggle input:checked ~ .indicator:after
{
  visibility: visible;
}

form .inputGroup2 #showPasswordToggle input:focus ~ .indicator, form .inputGroup2 #showPasswordToggle input:hover ~ .indicator
{
  border-color: var(--color-medio);
}

form .inputGroup2 #showPasswordToggle input:disabled ~ .indicator
{
  opacity: 0.5;
}

form .inputGroup2 #showPasswordToggle input:disabled ~ .indicator:after
{
  visibility: hidden;
}

form p
{
  margin: 0px 0 16px;
  display: block;
  font-size: 1.5em;
  color: var(--color-oscuro);
  font-weight: 700;
  font-family: 'TituloDIV', sans-serif;
  text-align: center;
}

.captcha-container
{
  display: flex; 
  justify-content: center; 
  margin: 20px 0;
}

.error-message
{
  display: none;
  color: red;
  margin: 10px 0;
  text-align: center;
}