@import url("https://fonts.googleapis.com/css?family=Bungee+Inline");

:root {
    /********************* Colores *****************************/
    --green-mint: #5FD15F;
    --soft-blue: #A5BBCC;
    --light-blue: #90ADC4;
    --dark-blue: #14749E;
    --deep-blue: #1F7EA8;
    --bright-blue: #1EA0D9;
    --grayish-green: #5C8778;
    --teal-green: #5CB5AB;
    --dark-gray-semi-transparent: #32323280;
    --dark-gray: #323232;
    --slate-gray: #37474F;
    --grayish-blue: #7B868B;
    --light-gray: #C2C2C2;
    --pale-gray: #DEE0E2;
    --light-gray-blue: #ECEFF1;
    --white: #FFFFFF;

    /******************* Typography ***************************/
    --primary-font: "Rubik";
    --primary-font-size: 24px;
    --secondary-font-size: 16px;

    /********************* Buttons ***************************/
    --button-background-color: var(--dark-blue);
    --button-text-color: var(--white);
    --button-border: 1px solid var(--grayish-blue);
    --button-padding: 10px 20px;
    --button-border-radius: 5px;

    /********************* Shadow ***************************/
    --shadow: 4px 4px 15px #0000004D;
    --shadow-hover: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/************************ Reset ***************************/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/********************* CSS ***************************/
html, body {
    height: 100%;
    font-family: var(--primary-font), sans-serif;
}

body {
    background-image: url(../img/misc/backgroudGradient.svg);
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.loginContainer {
  display: flex;
  background: rgba(58, 56, 56, 0.558);
  width: 720px;
  height: 620px;
  box-shadow: var(--shadow);
  align-items: stretch;
  justify-content: center;
  border-radius: 20px;
}

.formLogin {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.logoLogin {
    display: flex;
    width: 100%;
    height: 251px;
    justify-content: center;
    align-items: center;
}

.logoLogin img{
    width: 160px;
}

.logo-title {
    font-size: 70px;
    color: white;
}

.inputLogin {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-top: 20px;
    width: 390px;
    gap: 1rem;
}

.inputWithIcon {
    position: relative;
    display: flex;
    align-items: center;
}

.inputWithIcon input {
    padding-left: 30px;
    padding-right: 30px;
    width: 100%;
    height: 45px;
    background: var(--white);
    border-radius: 4px;
    opacity: 0.8;
    color: rgba(0, 0, 0, 0.382);
}

.inputWithIcon .icon-left,
.inputWithIcon .icon-left-Password,
.inputWithIcon .icon-right {
    position: absolute;
    width: 20px;
    height: 20px;
    background-size: cover;
}

.inputWithIcon .icon-left {
    left: 10px;
    background-image: url('../img/misc/user.svg');
    z-index: 1;
    opacity: 0.2;
}

.inputWithIcon .icon-left-Password {
    left: 10px;
    background-image: url('../img/misc/password.svg');
    z-index: 1;
    opacity: 0.2;
    cursor: pointer;
}

.inputWithIcon .icon-right {
    right: 10px;
}

.titleLogin {
    color: var(--light-gray-blue);
    text-align: center;
    font-size: 18px;
    font-weight: 450;
}

.checkRecovery {
    display: flex;
    align-items: center;
    font-size: 16px;
    color: var(--light-gray-blue);
}

.checkRecovery input[type="checkbox"] {
    margin-right: 5px;
}

.extras {
    display: flex;
    align-items: center;
    color: var(--white);
}

.extras .icon-advertencia {
    width: 20px;
    height: 20px;
    background-image: url('../img/misc/Advertencia.svg');
    background-size: cover;
    margin-right: 5px;
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(180deg) brightness(200%) contrast(100%);
}

.extras a {
    color: var(--light-gray-blue);
    font-size: 16px;
    text-decoration: none;
}

.extras a:hover {
    text-decoration: underline;
}
.buttonLogin a {
  text-decoration: none;
}
button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 45px;
    background-color: var(--button-background-color);
    color: var(--button-text-color);
    border: none;
    border-radius: var(--button-border-radius);
    cursor: pointer;
    font-size: 14px;
    text-decoration: none;
}

button:hover {
    background-color: #0056b3;
}
.alert-login {
    color:#ec5d5d
}
.ui-keyboard {
    position: fixed !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: 10% !important; /* Ajustar la distancia desde el fondo */
    z-index: 1000 !important;
    background: #d0d0d0 !important;
    border-radius: 10px !important;
    width: 655px !important;
    top: auto !important
}

.ui-keyboard .ui-keyboard-button {
    width: 40px !important; /* Ancho de cada tecla */
    height: 40px !important; /* Altura de cada tecla */
    margin: 3px !important;  /* Margen entre teclas */
    font-size: 14px !important; /* Tamaño de fuente */
}

.ui-keyboard .ui-keyboard-keyset-normal {
    display: flex !important;
    flex-wrap: wrap  !important;
}