.form-container {
    /* width: fit-content; /* Eliminado */
    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;
    width: 100%; /* Mantenido */
    box-sizing: border-box; /* Añadido */
  }

  .logo_container {
    box-sizing: border-box;
    width: 80px;
    height: 80px;
    background: linear-gradient(180deg, rgba(248, 248, 248, 0) 50%, #F8F8F888 100%);
    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);
    box-sizing: border-box;
  }

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

  .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;
    margin: 0;
  }

  .note span{
    cursor: pointer;
  }

  .form {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
  }

  .form-oculto{
    display: none;
  }


.mnsj-login {
    background: #c7e5c3;
    width: 100%;
    color: #000000;
    padding: 8px;
    text-align: center;
    margin-bottom: 20px;
    border-radius: 10px;
    box-sizing: border-box; /* Asegurar que el padding no cause desbordamiento */
}

/* --- Media Queries para Responsividad Móvil --- */

/* Para pantallas de hasta 480px de ancho (típico de móviles pequeños) */
@media (max-width: 480px) {
    .form-container {
        padding: 30px 20px 15px 20px; /* Reducir padding en móviles */
        gap: 10px; /* Reducir el espacio entre elementos */
    }

    .title {
        font-size: 1.1rem; /* Ajustar tamaño del título */
    }

    .subtitle {
        font-size: 0.675rem; /* Ajustar tamaño del subtítulo */
        max-width: 90%; /* Permitir que ocupe un poco más de ancho */
    }

    .input-label {
        font-size: 0.7rem; /* Ajustar tamaño de la etiqueta del input */
    }

    .input-field {
        height: 35px; /* Ligeramente más pequeño */
        padding: 0 0 0 35px; /* Ajustar padding izquierdo por el icono */
    }

    .icon {
        width: 18px; /* Ligeramente más pequeño */
        left: 10px;
        bottom: 8px;
    }

    .sign-in_btn,
    .sign-in_ggl,
    .sign-in-apl {
        height: 35px; /* Ligeramente más pequeño */
        font-size: 0.9rem; /* Ajustar tamaño de fuente de los botones */
    }

    .separator {
        gap: 20px; /* Reducir el espacio en el separador */
        font-size: 0.7rem; /* Ajustar tamaño de fuente del separador */
    }

    .note {
        font-size: 0.7rem; /* Ajustar tamaño de fuente de la nota */
    }

    .mnsj-login {
        padding: 6px; /* Reducir padding del mensaje */
        font-size: 0.9rem; /* Ajustar tamaño de fuente del mensaje */
    }
}

/* Para pantallas de hasta 320px de ancho (móviles muy pequeños) */
@media (max-width: 320px) {
    .form-container {
        padding: 20px 15px 10px 15px; /* Reducir aún más el padding */
        gap: 8px; /* Reducir aún más el espacio */
    }

    .title {
        font-size: 1rem;
    }

    .subtitle {
        font-size: 0.65rem;
        max-width: 95%;
    }

    .input-field {
        height: 30px;
        padding: 0 0 0 30px;
    }

    .icon {
        width: 16px;
        left: 8px;
        bottom: 7px;
    }

    .sign-in_btn,
    .sign-in_ggl,
    .sign-in-apl {
        height: 30px;
        font-size: 0.85rem;
    }

    .separator {
        gap: 15px;
        font-size: 0.65rem;
    }

    .note {
        font-size: 0.65rem;
    }

    .mnsj-login {
        padding: 5px;
        font-size: 0.85rem;
    }
}