/*movimiento de logo*/
.logo {
  height: 100px;
  transform-style: preserve-3d;
  animation: spin 5s linear infinite; /* Aquí configuramos la animación */
}

@keyframes spin {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}

/*estilo texto*/

@keyframes changeColor {
  0% {
    color: #FB9F0F;
  }
  50% {
    color: #FF5733;
  }
  100% {
    color: #FB9F0F;
  }
}

.p {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  animation: changeColor 3s infinite;
}

/*imagen fondo */
#caja{
  background-position: center;
  background-size: cover;
}

/****************************************************/
body {
        font-family: 'Roboto', sans-serif;
        background-color: #f4f5f7;
      }
      .auth-page-wrapper {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: #333;
      }
      .card {
        border: none;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
      }
      .btn-success {
        background-color: #4caf50;
        border: none;
        border-radius: 20px;
        padding: 10px 24px;
        transition: background-color 0.3s ease;
      }
      .btn-success:hover {
        background-color: #43a047;
      }
      /*.form-control, .form-check-input {
        border-radius: 20px;
      }*/
      .password-addon {
        cursor: pointer;
      }
       .auth-one-bg-position {
        animation: GradientShift 30s ease infinite;
        background-size: 400% 400%;
      }
      @keyframes GradientShift {
        0% {background-position: 0% 50%;}
        50% {background-position: 100% 50%;}
        100% {background-position: 0% 50%;}
      }
      .form-control:focus {
        border-color: #667eea;
        box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
      }
      .btn-success:hover {
        transform: scale(1.05);
      }
      .is-valid {
        border-color: #28a745;
      }
      .is-invalid {
        border-color: #dc3545;
      }
      .is-valid, .is-invalid {
      position: relative;
      padding-right: 30px;
    }
    .is-valid::after, .is-invalid::after {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      font-family: 'Font Awesome 5 Free';
      font-weight: 900;
    }
    .is-valid::after {
      content: '\f00c';
      color: #28a745;
    }
    .is-invalid::after {
      content: '\f00d'; 
      color: #dc3545;
    }
    .bg-overlay {
      opacity: 0.85;
    }
    @media (max-width: 768px) {
      .auth-page-content {
        padding: 20px;
      }
    }
    .error-message {
      display: none;
      color: #dc3545; 
      font-size: 0.875rem;
      margin-top: 0.25rem; 
    }
    .input-invalid + .error-message {
      display: block;
    }
    .input-invalid {
      border-color: #dc3545; 
    }
    .header-text {
      font-family: 'Montserrat', sans-serif;
      font-size: 1.5rem; 
      font-weight: 700; 
      color: #FFFFFF; 
      text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
      letter-spacing: 0.5px; 
      margin: 2rem 0;
    }
    .counter-container1 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 40px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin: 20px 0;
    transition: all 0.3s ease;
    }
    #counter {
        font-size: 18px;
        font-weight: bold;
        font-family: 'Source Code Pro', monospace;
        color: #ffffff;
    }
    .counter-container1:hover {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        transform: translateY(-2px);
    }
    .form-control {
      border: 0;
      border-bottom: 2px solid #ccc;
      border-radius: 0;
      outline: none;
      transition: border-color 0.3s ease-in-out;
    }
    .form-control:focus {
      border-bottom: 2px solid #ccc;
      box-shadow: none;
    }
    .form-label {
      font-weight: bold;
      color: #333;
      margin-bottom: 5px;
    }
    .mb-3 {
      margin-bottom: 16px;
    }
    .footer {
      background-color: #667eea;
      color: #FFFFFF;
      padding: 20px 0;
      font-size: 0.875rem;
    }
    .footer p {
      margin: 0;
      color: #FFFFFF;
    }
    .footer a {
      color: #FFFFFF; 
      text-decoration: none;
      transition: color 0.3s ease; 
    }
    .footer a:hover {
      color: #a8b1d1;
    }
    .text-center {
      text-align: center;
    }
    @media (max-width: 768px) {
      .footer {
        padding: 10px 0;
      }
    }