/* 
  Archivo: password_confirm.css 
  Ruta: src\static\css\password_confirm.css
*/

.card {
    margin: 20px auto;
    max-width: 600px;
    border-radius: 10px;
  }
  
  .card-body {
    padding: 30px;
  }
  
  .btn {
    padding: 10px 25px;
    border-radius: 5px;
  }
  
  .block-heading {
    margin-bottom: 30px;
    padding-top: 30px;
  }
  
  /* Estilos para los requisitos de contraseña */
  .password-requirements {
    font-size: 0.85rem;
    color: #6c757d;
  }
  
  .requirement {
    margin-bottom: 5px;
  }
  
  .icon-valid, .icon-invalid {
    margin-right: 5px;
  }
  
  .icon-valid {
    color: #28a745;
    display: none;
  }
  
  .icon-invalid {
    color: #dc3545;
  }
  
  .requirement.valid .icon-valid {
    display: inline-block;
  }
  
  .requirement.valid .icon-invalid {
    display: none;
  }
  
  /* Estilos para los campos de formulario */
  .form-group label {
    font-weight: 500;
  }
  
  /* Estilos para el botón de mostrar/ocultar contraseña */
  .toggle-password {
    cursor: pointer;
  }
  
  /* Estilos para mensajes de alerta */
  .alert {
    margin-bottom: 20px;
  }
  
  /* Estilo para inputs de solo lectura */
  input[readonly] {
    background-color: #f8f9fa;
  }
  
  /* Animación para la validación de contraseña */
  @keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
  }
  
  .shake {
    animation: shake 0.5s;
  }