/* bacnolomboa update */

.logout {
    display: flex;
    align-items: center;
    text-align: right;
    position: absolute; /* Posicionar absolutamente */
    right: 35px; /* Separar del borde derecho */
  }
  
  .out {
    margin-left: -4rem;
    margin-top: 0.8rem;
    text-decoration: none;
    font-size: 1rem;
    color: #2C2A29;
    ;
    font-weight: 600;
  }
  
  .out-image {
    padding-left: 1.5rem;
    margin-left: 1rem;
  }
  
  
  .welcome-div {
    margin-top: 25%;
    display: flex; /* Asegura que el contenedor use flexbox */
    flex-direction: column; /* Apila los elementos hijos verticalmente */
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
    width: 100%; /* Ajusta el ancho según sea necesario */
    padding: 20px; /* Añade un poco de padding */
  }
  
  .login-h {
    font-family: 'FontBold', sans-serif;
    color: black;
    font-size: 2rem; /* Tamaño de fuente */
  }
  
  .cp-pass{
    font-family: 'FontBold', sans-serif;
    color: black;
    font-size: 2rem; /* Tamaño de fuente */
  }
  
  .boldText{
    font-family: 'FontBold', sans-serif;
    color: black;
  }
  
  .normalText{
    font-family: 'MyFont', sans-serif;
    color: #2C2A29;
    font-size: 0.8rem; 
  }
  
  .buttons{
    display: flex; /* Asegura que el contenedor use flexbox */
    flex-direction: column; /* Apila los elementos hijos verticalmente */
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
    width: 100%;
  }
  
  .personas {
    margin-left: 45px;
    width: 100%;
    display: flex; /* Asegura que los elementos hijos estén uno al lado del otro */
    align-items: center; /* Centra verticalmente los elementos hijos */ /* Espacia los elementos hijos */ /* Color de fondo para visualización */
    padding: 10px; /* Añade un poco de padding */
    border-radius: 10px; /* Bordes redondeados */
  }
  
  /* Define la animación */
  @keyframes clickAnimation {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.95);
    }
    100% {
        transform: scale(1);
    }
  }
  
  /* Aplica la animación al hacer click */
  .personas:active {
    animation: clickAnimation 0.2s ease-in-out;
  }
  
  .mano:active {
    animation: clickAnimation 0.2s ease-in-out;
  }
  
  .mano {
    margin-left: 45px;
    width: 100%;
    display: flex; /* Asegura que los elementos hijos estén uno al lado del otro */
    align-items: center; /* Centra verticalmente los elementos hijos */ /* Espacia los elementos hijos */ /* Color de fondo para visualización */
    padding: 10px; /* Añade un poco de padding */
    border-radius: 10px; /* Bordes redondeados */
  }
  
  .text {
    width: 79%;
    background-color: white;
    padding: 10px 10px 2px 10px;
    border-radius: 10px 0px 0px 10px;
    /* Añade un margen a la derecha para separar del .arrow */
  }
  
  .text-mano {
    width: 79%;
    background-color: white;
    padding: 10px 10px 2px 10px;
    border-radius: 10px 0px 0px 10px;
    /* Añade un margen a la derecha para separar del .arrow */
  }
  
  .arrow {
    display: flex; /* Asegura que el contenedor use flexbox */
    align-items: center; /* Centra verticalmente el contenido */
    background-color: rgb(253, 218, 18);
    height: 68px;
    width: 30px;
    border-radius: 0px 10px 10px 0px;
  }
  
  .arrow img {
    padding-left: 5px;
  }
  
  .arrow-mano {
    display: flex; /* Asegura que el contenedor use flexbox */
    align-items: center; /* Centra verticalmente el contenido */
    background-color: rgb(255, 127, 64);
    height: 68px;
    width: 30px;
    border-radius: 0px 10px 10px 0px;
  }
  
  .question a {
    font-family: 'FontBold', sans-serif;
    color: black;
    margin-top: -5rem;
    font-size: 1.5rem; 
  }
  
  .question{
    display: flex; /* Asegura que el contenedor use flexbox */
    flex-direction: column; /* Apila los elementos hijos verticalmente */
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
    width: 100%;
  }
  
  .back{
    background-image: url('./media/trazo-desktop.3de67dbd4b31f3798f8a1d3e3a90197c.svg'); /* Reemplaza con la ruta a tu imagen */
    background-size: cover; /* Ajusta el tamaño de la imagen para cubrir todo el div */
    background-position: center; /* Centra la imagen de fondo */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    width: 100%; /* Ajusta el ancho según sea necesario */
    height: 130px;
  }
  
  .square{
    background-color: white;
    padding: 1rem;
    width: 99%;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
  
  .text-pass{
    font-size: 0.8rem;
    width: 50%;
    text-align: center;
  }
  
  .password-input {
    margin: 2rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px; /* Espacio entre los inputs */
  }
  
  .digit, .digit2  {
    width: 100px; /* Ancho de cada input */
    height: 100px; /* Alto de cada input */
    text-align: center; /* Centra el texto dentro del input */
    font-size: 24px; /* Tamaño de la fuente */
    border: none; /* Elimina el borde del input */
    border-bottom: 0.2px solid #000; /* Añade una línea inferior */
    outline: none; /* Elimina el borde azul al hacer click */
    background: none; /* Elimina el fondo del input */
  }
  
  .digit:focus {
    border-bottom: 2px solid rgb(230, 228, 115); /* Cambia la línea inferior a amarilla cuando el input está seleccionado */
  }
  
  
  .digit-dynamic, .digit-dynamic2 {
    width: 100px; /* Ancho de cada input */
    height: 100px; /* Alto de cada input */
    text-align: center; /* Centra el texto dentro del input */
    font-size: 24px; /* Tamaño de la fuente */
    border: none; /* Elimina el borde del input */
    border-bottom: 0.2px solid #000; /* Añade una línea inferior */
    outline: none; /* Elimina el borde azul al hacer click */
    background: none; /* Elimina el fondo del input */
  }
  
  .digit-dynamic:focus {
    border-bottom: 2px solid rgb(230, 228, 115); /* Cambia la línea inferior a amarilla cuando el input está seleccionado */
  }
  
  .butt {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px; /* Espacio entre los botones */
    font-family: 'FontBold', sans-serif;
    color: black;
    font-size: 0.9rem; 
  
  }
  
  .bc-button {
    background-color: white;
    border: 1px solid black;
    padding: 10px 30px;
    border-radius: 20px;
  }
  
  .bc-button:active{
    background-color: #f2f2f2;
    animation: clickAnimation 0.2s ease-in-out;
  }
  
  
  .c-button {
    background-color: rgb(217, 218, 222);
    border: none;
    padding: 10px 20px;
    border-radius: 20px;
  }
  
  .c-button.active {
    background-color: rgb(253, 218, 18); /* Color del botón cuando está activo */
    animation: clickAnimation 0.2s ease-in-out;
    color: black;
    cursor: pointer; /* Cursor permitido cuando el botón está activo */
  }
  
  .dirip{
    font-family: 'MyFont', sans-serif;
    color: #2C2A29;
    font-size: 0.6rem; 
  }
  
  .texto-min{
    margin-top: -10px;
    font-family: 'MyFont', sans-serif;
    color: #2C2A29;
    font-size: 0.6rem; 
  }
  
  .square-din{
    background-color: white;
    padding: 1rem;
    margin-left: 1.3rem;
    width: 90%;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
  
  .butt-din {
    display: block;
    justify-content: center;
    align-items: center;
    gap: 20px; /* Espacio entre los botones */
    font-family: 'FontBold', sans-serif;
    color: black;
    font-size: 0.9rem; 
  }
  
  .cbdin {
    padding: 10px 30vw;
  }
  
  .bcdin {
    padding: 10px 32vw;
  }
  
  .text-hand{
    background-color: inherit;
    width: 90%;
    margin: 0px 0px 0px 25px;
    font-size: 0.8rem;   
  }
  
  .welcome {
    margin-top: 5%;
    display: flex; /* Asegura que el contenedor use flexbox */
    flex-direction: column; /* Apila los elementos hijos verticalmente */
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
    width: 100%; /* Ajusta el ancho según sea necesario */
    padding: 20px; /* Añade un poco de padding */
  }
  
  .text-pass-din{
    font-size: 0.8rem;
    width: 75%;
    text-align: center;
  }
  
  footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center; /* Centra el contenido del footer */
    padding: 30px 0; /* Espaciado interno del footer */
  }
  
  #custom-alert {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    width: 80%;
    max-width: 500px;
    text-align: center;
  }
  
  .home-bc{
    font-family: 'MyFont', sans-serif;
      background-color: rgb(247, 247, 247);
      overflow: hidden;
  }
  
  
  
  
  .header {
    width: 100%;
    display: flex;
    padding: 30px 20px;
    align-items: center;
    position: relative;
    background-color: white;
    justify-content: center; /* Centrar los elementos hijos */
  }
  
  .header img {
    max-width: 150px; /* Tamaño máximo del logo */
    height: auto;
    position: absolute; /* Posicionar absolutamente */
    left: 50%; /* Mover al centro horizontal */
    transform: translateX(-50%); /* Centrar la imagen */
  }
  
  
  
  .logo-center {
    max-width: 190px;
    height: auto;
  }
  
  .logo-right {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    max-width: 50px;
    height: auto;
  }
  
  .boldText {
    font-family: 'FontBold', sans-serif;
    color: black;
    font-size: 1rem; 
  }
  
  .normalText {
    font-family: 'MyFont', sans-serif;
    color: #2C2A29;
    font-size: 0.8rem; 
  }
  
  @font-face {
    font-family: 'MyFont';
    src: url('../fonts/OpenSans-Regular.9ccd5e1b1dbea150336d.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'FontBold';
    src: url('../fonts/Nunito-Bold.5b67d635abb53cc261c5.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
  }
  .welcome-container {
    text-align: center;
    margin-top: 80px;
  }
  
  .welcome-text {
    font-family: 'FontBold', sans-serif;
    color: black;
    font-size: 1.5rem; 
  }
  .exit-container {
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
  }
  
  .exit-text {
    font-family: 'MyFont', sans-serif;
    color: #000;
    font-size: 1rem;
    margin-right: 45px; /* Espacio entre el texto y el icono */
  }
  .modal-container {
    text-align: center;
    margin-top: 20px;
    background-color: #fff; /* Fondo blanco del modal */
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    width: 100%;
    margin-left: 0; 
    margin-right: 0;
  }
  
  .modal-text {
    font-family: 'MyFont', sans-serif;
    color: #000;
    font-size: 4rem;
    line-height: 1.5rem;
  }
  
  
  .user-info {
    margin-top: 20px;
    position: relative;
    padding-left: 1px;
  }
  
  .user-details {
    display: flex;
    align-items: center;
    justify-content: center; /* Centrar horizontalmente */
  }
  
  .user-icon {
    max-width: 20px; /* Tamaño del icono */
    height: auto;
    margin-right: -1px; /* Espacio entre el icono y el campo de entrada */
  }
  
  .user-input {
    border: none;
    border-bottom: 2px solid #000; /* Línea inferior negra */
    background-color: transparent;
    padding: 0.5rem;
    font-family: 'MyFont', sans-serif;
    font-size: 1rem;
    color: #000;
    width: 200px; /* Ajustar según el diseño */
    outline: none;
    box-sizing: border-box; /* Asegura que el padding no afecte el tamaño total */
    margin-left: -10px; /* Mover el campo de entrada a la izquierda */
  
  }
  
  .user-input::placeholder {
    color: #000; /* Color del texto de marcador de posición */
  }
  
  
  
  
  .user-text {
    font-family: 'MyFont', sans-serif;
    color: #000;
    font-size: 1rem;
    
  }
  
  .separator {
    border: 0;
    border-top: 1px solid #ddd; /* Línea horizontal */
    width: 20%; /* Ajustar el ancho de la línea */
    margin: 10px auto; /* Centrar la línea */
  }
  
  .forgot-user {
    font-family: 'MyFont', sans-serif;
    font-weight: normal; /* Aplicar fuente delgada */
    font-size: 0.9rem;
    text-decoration: none;
    position: absolute;
    right: 610px; /* Alinea a la derecha del contenedor */
    bottom: -25px; /* Ajusta según el espacio necesario */
    color: #000;
  }
  
  .forgot-user:hover {
    text-decoration: underline;
  }
  
  /* Media queries para ajustar el diseño en dispositivos móviles */
  @media (max-width: 768px) {
    
    .modal-text {
        font-size: 0.9rem; /* Ajustar tamaño de fuente en móviles */
    }
  
    .separator {
        width: 80%; /* Ancho completo en móviles */
    }
  
    .forgot-user {
        position: static;
        margin-top: 10px; /* Ajustar el margen en móviles */
        font-size: 0.8rem; /* Ajustar el tamaño de la fuente en móviles */
        right: 60%;
        bottom: auto;
    }
  }
  
  .buttons-container {
    display: flex;
    justify-content: center;
    gap: 20px; /* Espacio entre los botones */
    margin-top: 40px; /* Espacio arriba de los botones */
  }
  
  .btn {
    width: 150px; /* Ancho fijo para los botones */
    height: 50px; /* Alto fijo para los botones */
    border-radius: 35px; /* Radio de borde para que sea ovalado */
    font-family: 'FontBold', sans-serif;
    font-size: 1.1rem;
    border: 2px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
  }
  
  .volver {
    background-color: #fff;
    color: #000;
    border-color: #000; /* Contorno negro */
  
  }
  
  .continuar {
    background-color: rgb(253, 219, 36); /* Fondo amarillo */
    color: #000;
    border-color: rgb(253, 219, 36); /* Contorno amarillo */
  }
  
  .btn-aceptar {
  
    background-color: rgb(253, 219, 36); /* Fondo amarillo */
    color: #000;
    border-color: rgb(253, 219, 36); /* Contorno amarillo */
  }
  
  #custom-alert {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    width: 80%;
    max-width: 500px;
    text-align: center;
  }
  
  .finalizado-container {
  
    text-align: center;
    font-family: 'FontBold', sans-serif;
    color: black;
    font-size: 1.5rem; 
  }
  
  
  .texto {
    padding: 5rem;
    text-align: center;
    font-size: 3.5rem;
    line-height: 1.5;
  }
  
  
  
  
  .texto p {
    margin: 0;
    font-size: 3.8rem;
  }
  
  .texto strong {
    font-size: 18px;
  }
  
  .choose-login{
    font-size: 1.5rem;
  }
  
  .password-input {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px; /* Espacio entre los inputs */
  }