.login-button {
    padding: 20px 32px;
    border: none;
   
    background-color: #D33E1E;;
    color: #0C0B0B;
    font-size: 2rem;
    font-weight: bold;
    font-family: var(--parrafos);
    overflow: hidden; /* Asegura que el contenido adicional se oculte */
    position: relative; /* Posicionamiento relativo para el icono absoluto */
    transition: all 0.3s ease; /* Transición suave para los cambios */
    cursor: pointer;
    text-align: left; /* Alinea el texto a la izquierda */
    z-index: 100;
  }

  .login-button:hover{
    background-color: #0C0B0B;
    color: white;
  }

  .login-button i {
    margin-right: 10px; /*Espacio entre el icono y el texto */
    transition: transform 0.3s ease; /* Transición suave para el deslizamiento */
  }

  .login-button span {
    position: absolute;
    right: 10px;
    text-align: center;
    opacity: 0; /* Oculta el texto inicialmente */
    transition: opacity 0.3s ease; /* Transición suave para la opacidad */
    transform: translateY(-100%);
  }

  .login-button:hover i {
   transform: translateY(-100%); /* Desliza el icono hacia la izquierda */
    opacity: 0%;
  }

  .login-button:hover span {
    opacity: 100%; /* Muestra el texto al pasar el cursor */
  }

  @media(max-width: 768px) {
    .login-button {
      padding: 10px 35px;
      background-color: white;;
      color: #0C0B0B;
      font-weight: bold;
    }

    .login-button i {
      opacity: 0%;
    }
    
    .login-button span {
      opacity: 100%; /*Muestra el texto al pasar el cursor*/
    }
    .login-button:hover, span:hover{
      background-color: #0C0B0B;;
      color: white;
    }
}

/* Estilo para el modal */
.modal {
  display: none; /* Oculto por defecto */
  position: fixed; /* Se queda fijo en la pantalla */
  z-index: 1; /* Se sitúa sobre el resto de elementos */
  left: 0;
  top: 0;
  width: 100%; /* Ancho completo */
  height: 100%; /* Alto completo */
  overflow: auto; /* Habilita el scroll si es necesario */
  background-color: rgb(0,0,0); /* Color de fondo */
  background-color: rgba(0,0,0,0.4); /* Negro con opacidad */
}

/* Estilo para el contenido del modal */
.modal-content {
  background-color: #dd17177c;
  margin: 15% auto; /* 15% desde arriba y centrado */
  padding: 20px;
  border: 1px solid #888;
  width: 50%; /* Podrías definir un ancho específico si lo prefieres */
}

/* Botón para cerrar el modal */
.close {
  background-color: red;
  color:white;
  border: none;
  float: right;
  padding: 10px 20px;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  border-radius: 50%;
  margin: 10px;
}


.close:hover, .close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
  background-color: darkred;
}

.formulario {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    z-index: -2;
  }

  .modal-header {
    padding: 10px 15px;
    background-color: #ff6600;
    color: white;
    font-size: 20px; /* Tamano de fuente más grande para resaltar */
    font-weight: bold; /* Fuente en negrita */
    text-align: center; /* Alineación del texto al centro */
    border-top-left-radius: 5px; /* Bordes redondeados en la parte superior izquierda */
    border-top-right-radius: 5px; /* Bordes redondeados en la parte superior derecha */
  }

  .campo {
    margin-bottom: 10px;
  }

  .campo label {
    display: block;
    margin-bottom: 5px;
  }
  .campo label.resaltado {
    color: #007bff; /* Color azul para resaltar */
    font-weight: bold; /* Hace la fuente negrita */
  }

  .campo input[type='text'],
  .campo input[type='email'],
  .campo input[type='password'] {
    width: 100%;
    padding: 10px;
    border: 1px solid #dddddd;
    border-radius: 4px;
    box-sizing: border-box;
  }

  .campo input[type='text']:focus,
  .campo input[type='email']:focus,
  .campo input[type='password']:focus {
    position: relative;
    border-color: #007bff;
    outline: none;
  }


   .input-contrasena {
    padding-right: 30px; /*Espacio para el icono del ojo */
   } 

  .icono-ojo {
    /* position: absolute; */
    position: relative;
    top: -20px; 
    right: -90%;
    cursor: pointer;
    transform: translateY(-50%);
    z-index: 10;
  }

  .botonModal {
    background-color: #007bff; /* Color azul inicial */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease; /* Transición suave para todos los cambios */
  }

  .botonModal:hover {
    background-color: #0056b3; /* Color azul más oscuro al pasar el cursor */
    transform: scale(1.1); /* Aumenta el tamano del botón */
  }


  .campo input[type='text']:focus,
  .campo input[type='email']:focus,
  .campo input[type='password']:focus,
  .campo input.has-value {
    box-shadow: 0 0 5px rgba(0, 76, 255, 0.5);
    border-color: #004cff;
  }