body {
    font-family: 'Bungee Shade', cursive; /* Cambiar a una fuente más divertida */
    background: url('../Fondo/Fondo playa.gif') no-repeat center center fixed; /* Establecer la imagen de fondo */
    background-size: cover; /* Asegurarse de que la imagen cubra toda la pantalla */
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
}

.character {
    width: 500px;
    height: 500px;
    background-color:rgba(230, 217, 233, 0);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.character-icon {
    width: 500px; 
    height: 500px; 
    background: url('../Capibara/Capibara_happy.png') no-repeat center;
    background-size: contain;
}

/* From Uiverse.io by zanina-yassine */ 
.form_container {
  width: fit-content;
  height: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 50px 40px 20px 40px;
  background-color: #ffffff;
  box-shadow: 0px 106px 42px rgba(0, 0, 0, 0.01),
    0px 59px 36px rgba(0, 0, 0, 0.05), 0px 26px 26px rgba(0, 0, 0, 0.09),
    0px 7px 15px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
  border-radius: 11px;
  font-family: "Inter", sans-serif;
}

.logo_container {
  box-sizing: border-box;
  width: 80px;
  height: 80px;
  background: url('../Logo.png') no-repeat center;
  background-size: contain;
  border: 1px solid #F7F7F8;
  filter: drop-shadow(0px 0.5px 0.5px #EFEFEF) drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5));
  border-radius: 11px;
}

.title_container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #212121;
}

.subtitle {
  font-size: 0.725rem;
  max-width: 80%;
  text-align: center;
  line-height: 1.1rem;
  color: #8B8E98
}

.input_container {
  width: 100%;
  height: fit-content;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.icon {
  width: 20px;
  position: absolute;
  z-index: 99;
  left: 12px;
  bottom: 9px;
}

.input_label {
  font-size: 0.75rem;
  color: #8B8E98;
  font-weight: 600;
}

.input_field {
  width: auto;
  height: 40px;
  padding: 0 0 0 40px;
  border-radius: 7px;
  outline: none;
  border: 1px solid #e5e5e5;
  filter: drop-shadow(0px 1px 0px #efefef)
    drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5));
  transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1);
}

.input_field:focus {
  border: 1px solid transparent;
  box-shadow: 0px 0px 0px 2px #242424;
  background-color: transparent;
}

.password-toggle {
  position: absolute;
  right: 35px;
  bottom: 9px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99;
  transition: opacity 0.2s;
}

.password-toggle:hover {
  opacity: 0.7;
}

.password-toggle svg {
  transition: all 0.2s;
}

.sign-in_btn {
  width: 100%;
  height: 40px;
  border: 0;
  background: #115DFC;
  border-radius: 7px;
  outline: none;
  color: #ffffff;
  cursor: pointer;
}

.sign-in_ggl {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #ffffff;
  border-radius: 7px;
  outline: none;
  color: #242424;
  border: 1px solid #e5e5e5;
  filter: drop-shadow(0px 1px 0px #efefef)
    drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5));
  cursor: pointer;
}

.sign-in_apl {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #212121;
  border-radius: 7px;
  outline: none;
  color: #ffffff;
  border: 1px solid #e5e5e5;
  filter: drop-shadow(0px 1px 0px #efefef)
    drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5));
  cursor: pointer;
}

.separator {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  color: #8B8E98;
}

.separator .line {
  display: block;
  width: 100%;
  height: 1px;
  border: 0;
  background-color: #e8e8e8;
}

.note {
  font-size: 0.75rem;
  color: #8B8E98;
  text-decoration: underline;
}

.note a {
  color: #8B8E98;
  text-decoration: underline;
}

.modal {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    padding: 15px 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    z-index: 9999;
    animation: fadeInDown 0.5s;
}

@keyframes fadeInDown {
    from { opacity: 0; top: 0; }
    to { opacity: 1; top: 20px; }
}

.modal .close {
    float: right;
    cursor: pointer;
    font-weight: bold;
}

@media (max-width: 1200px) {
    .character {
        width: 300px;
        height: 300px;
    }
    .character-icon {
        width: 300px;
        height: 300px;
    }
}

@media (max-width: 768px) { /* Tablets y teléfonos grandes */
    .character {
        width: 200px;
        height: 200px;
        margin-bottom: 20px;
    }

    .character-icon {
        width: 200px;
        height: 200px;
    }

    .form_container {
        padding: 30px 20px 15px 20px;
        gap: 10px;
    }

    .title {
        font-size: 1.1rem;
    }

    .subtitle {
        font-size: 0.65rem;
    }
}

@media (max-width: 480px) { /* Teléfonos pequeños */
    .character {
        width: 150px;
        height: 150px;
    }

    .character-icon {
        width: 150px;
        height: 150px;
    }

    .form_container {
        padding: 20px 15px 10px 15px;
        gap: 8px;
    }

    .title {
        font-size: 1rem;
    }

    .subtitle {
        font-size: 0.6rem;
    }

    .input_field {
        height: 35px;
        font-size: 0.9rem;
    }

    .sign-in_btn,
    .sign-in_ggl {
        height: 35px;
        font-size: 0.9rem;
    }
}

/* Estilos para la notificación */
.notification {
    width: 100%;
    margin-bottom: 15px;
    animation: slideInDown 0.3s ease-out;
}

.notification-content {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    padding: 12px 15px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.notification-message {
    flex: 1;
    font-size: 0.875rem;
    font-weight: 500;
}

.notification-close {
    background: none;
    border: none;
    color: #721c24;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    padding: 0;
    margin-left: 10px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
}

.notification-close:hover {
    background-color: rgba(114, 28, 36, 0.1);
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}