 :root {
   --violeta-medio: #7e56a2;
   --violeta-oscuro: #672e90;
   --gris-purpura: #808094;
   --blanco: #f4f4f8;
   --violeta-hover: #532371;
   --gris: #f4f0f0;
   --gris-oscuro: #dcdcdc;
   --table-success: #DFF0D8;
 }
 .color-purple{color: #7e56a2;}
 .bg-purple-medium{background-color: var(--violeta-medio);color: var(--blanco);}
.color-white{color: var(--blanco);}
 
/* Footer */
  html {
      position: relative;
      min-height: 100%;
  }

 body.login {
   background: linear-gradient(to right, var(--violeta-medio), var(--gris-purpura));
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: 'Segoe UI', sans-serif;
 }

 body {
  background-color: #f4f0f0;
 }

 .login-card {
   background: white;
   border-radius: 15px;
   padding: 40px 30px;
   width: 100%;
   max-width: 400px;
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
   animation: fadeIn 0.8s ease-in-out;
 }

 .login-title {
   font-weight: 700;
   font-size: 1.8rem;
   color: var(--violeta-oscuro);
   text-align: center;
   margin-bottom: 20px;
 }

 .form-control {
   border-radius: 10px;
   padding-left: 40px;
   border: 1px solid #ccc;
 }

 .form-group {
   position: relative;
 }

 .form-group i {
   position: absolute;
   left: 15px;
   top: 50%;
   transform: translateY(-50%);
   color: #808094;
 }

 .btn-custom {
   background-color: var(--violeta-oscuro);
   border: none;
   border-radius: 10px;
   font-weight: 600;
   color: #fff;
   transition: background-color 0.3s ease;
 }

 .btn-custom:hover {
   background-color: var(--violeta-hover);
 }

 a {
   color: var(--violeta-oscuro)
 }

 a:hover {
   color: var(--violeta-hover);
   text-decoration: underline;
 }

 .footer-text {
   margin-top: 1rem;
   text-align: center;
   font-size: 0.9rem;
   color: #555;
 }

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
      padding-top: 10px;
    height: 70px;
    background-color: var(--violeta-medio);
    color: var(--blanco);
}

 .navbar {
   background-color: var(--violeta-medio);
   padding: 1rem 2rem;
 }

 .navbar .navbar-brand,
 .navbar .nav-link {
   color: var(--blanco) !important;
 }

 .card {
   /* border-left: 5px solid var(--violeta-oscuro); */
   border-radius: 8px;
   transition: transform 0.2s ease;
 }

 .card.card-hover:hover {
   transform: translateY(-5px);
 }

 .card h5 {
   color: var(--violeta-oscuro);
 }

 .card p {
   color: var(--gris-purpura);
 }

 /* 
.btn {
    background-color: var(--violeta-oscuro);
    color: var(--blanco);
}

.btn:hover {
    background-color: #4f1b75;
} */

 .text-white {
   color: var(--blanco);
 }

 .bg-gris {
   background-color: var(--gris);
 }
 .table-success {
   background-color: var(--table-success);
   color: #3c763d;
 }

 @keyframes fadeIn {
   from {
     opacity: 0;
     transform: translateY(30px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }