/* Colores que dependen del tema */
:root[data-bs-theme="light"] .bg-index {
  background-color: #f8f9fa; /* claro */
}

:root[data-bs-theme="dark"] .bg-index {
  background-color: #2b3035; /* oscuro */
}

:root[data-bs-theme="light"] .bg-principal {
  background-color: #4CEF6A; /* Verde claro */
}

:root[data-bs-theme="dark"] .bg-principal {
  background-color: #3dbe55; /* Verde oscuro */
}

:root[data-bs-theme="light"] .btn-principal {
  background-color: #4CEF6A;
}

:root[data-bs-theme="dark"] .btn-principal {
  background-color: #3dbe55;
}

.btn-principal {
  color: white;
}

.btn-principal-hover:hover {
  background-color: #3dbe55;
  color: white;
}

/* Resto de tu CSS */
.logo {
  max-width: 9rem;
}

@media (min-width: 768px) {
  .col-index {
    height: 100vh;
  }
  .row-index {
    height: calc(100vh - 15%);
  }
}

.table-container {
  overflow-x: auto;
  max-width: 100%;
}

body {
  overflow-x: hidden;
}
.card{
   transition: transform 0.3s ease-in-out; /* Smooth transition */
}
.card:hover{
  transform: scale(1.1); /* Scales the box to 120% of its original size */
}
textarea {
  resize: none;
}