:root {
    --color-fondo: #1c1c1c;
    --color-primary: #212f3d;
    --color-secondary: #0a3d40;
    --color-terceario: #05b9b0;
    --color-texto: #ffffff;
    --color-rgba: 0 0 15px rgba(5, 185, 176, 0.3);
}

/* Contenedor de la tabla */
.card-tables {
  overflow-x: auto; /* Habilita el desplazamiento horizontal */
  -webkit-overflow-scrolling: touch; /* Para mejorar la experiencia en dispositivos móviles */
  padding: 20px; /* Agrega algo de espacio dentro de la tarjeta */
  background-color: var(--color-secondary);
  border-radius: 8px; /* Bordes redondeados para la tarjeta */
  box-shadow: var(--color-rgba);
}

/* Estilos para la tabla */
table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px; /* Esto asegura que la tabla tenga un tamaño mínimo y no se estire demasiado */
}

table, th, td {
  border: 1px solid #ddd;
}

th, td {
  padding: 10px;
  text-align: left;
}

th {
  background-color: var(--color-secondary);
  color: var(--color-texto);
}

td {
  background-color: none;
}

tr:nth-child(even) {
  background-color: none; /* Alterna el color de fondo de las filas */
}

/* Contenedor para los botones */
.action-buttons {
  display: flex; /* Hace que los botones estén en una fila */
  gap: 10px; /* Espacio entre los botones */
  justify-content: flex-start; /* Alinea los botones al principio de la fila */
}

/* Estilo base para los botones */
.btn-action {
  display: inline-block;
  padding: 8px 15px; /* Espaciado interno */
  color: var(--color-texto);
  text-decoration: none;
  border-radius: 10px; /* Bordes redondeados */
  transition: background-color 0.3s ease; /* Transición suave para el hover */
  width: 110px;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* Estilos específicos para cada botón */

/* Botón Editar */
.btn-editar {
  background-color: #028482; /* Verde azulado */
}

.btn-editar:hover {
  background-color: #028482; /* Un tono más claro para el hover */
}

/* Botón Bloquear */
.btn-bloquear {
  background-color: #e74c3c; /* Rojo */
}

.btn-bloquear:hover {
  background-color: #c0392b; /* Rojo más oscuro para el hover */
}

/* Botón Desbloquear */
.btn-desbloquear {
  background-color: #2ecc71; /* Verde */
}

.btn-desbloquear:hover {
  background-color: #27ae60; /* Verde más oscuro para el hover */
}

/* Botón Renovar */
.btn-renovar {
  background-color: #f39c12; /* Amarillo/Anaranjado */
}

.btn-renovar:hover {
  background-color: #e67e22; /* Anaranjado más oscuro para el hover */
}

/* Botón Excluir */
.btn-excluir {
  background-color: #e74c3c; /* Rojo */
}

.btn-excluir:hover {
  background-color: #c0392b; /* Rojo más oscuro para el hover */
}

/* Estilos opcionales para el hover */
.btn-action:active {
  background-color: #026d60; /* Tono más oscuro cuando se hace clic */
}


    .dropdown {
      position: relative;
      display: inline-block;
    }

    .dropdown-toggle {
      background-color: #3498db;
      color: white;
      padding: 6px 12px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

    .dropdown-menu {
      display: none;
      position: absolute;
      background-color: #2c3e50;
      min-width: 160px;
      box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
      z-index: 1;
      border-radius: 12px;
      left: -100px;
    }

    .dropdown-menu a {
      color: white;
      padding: 8px 12px;
      text-decoration: none;
      display: block;
      font-size: 14px;
    }

    .dropdown-menu a:hover {
      background-color: #34495e;
    }

    .dropdown.show .dropdown-menu {
      display: block;
    }