body {
  background: linear-gradient(-45deg, #121714, #1B2221, #2A3A37, #567A71, #393E46, #202524, #1A2524, #101312);
  background-size: 400% 400%;
  background-repeat: no-repeat;
  animation: gradient 10s ease infinite;
  min-height: 100vh;
  margin: 0;
  font-family: 'Inter', sans-serif;
  transition: all 0.3 ease-in;
  font-size: clamp(12px, 1.2vw, 15px);
}

@keyframes gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.container-fluid:nth-child(2){
    padding-top: 4.5rem;
    padding-top: 60px;
    background-color: #101312;
    border-bottom: 1px solid #ecf4d5;
    color: #ecf4d5;
}
.clickable-row {
    text-decoration: none;
    color: inherit;
    display: table-row;
    transition: all 0.2s ease-in;
}

.clickable-row:hover {
    background-color: #101312 !important;
    cursor: pointer;
}
.clickable-row:hover td {
    background-color: #f7fcea !important;
}

.clickable-cell {
    padding: 12px;
    border-top: 1px solid #dee2e6;
}

.icon-name {
    display: flex;
    align-items: center;
    gap: 10px;
}

.icon-name img {
    vertical-align: middle;
}

thead tr th{
    background: transparent !important;
    color: #ecf4d5 !important;
}

.code{
    color: rgba(0, 0, 0, 0.521);    
    padding-left: 5px;
}

tbody .tr{
    border-radius: 50px;
}
.no-wrap {
  white-space: nowrap;
}

.btncolapse{
    color: #ecf4d5;
    width: 100%;
    background-color: transparent;
    border-radius: 1rem;
    padding: 2.5px 0;
}
.btncolapse:focus svg{
    transform: rotate(180deg);
}

.btncolapse svg {
    transition: transform 0.3s ease;
}

.btncolapse.rotated svg {
    transform: rotate(180deg);
}

/* Contenedor general de la tabla con bordes redondeados */
table#setTable {
    border-collapse: separate; /* importante para que funcionen los bordes redondeados */
    border-spacing: 0; /* opcional para quitar espacios entre celdas */
    border: 1px solid #dee2e6; /* borde suave alrededor de la tabla */
    border-radius: 12px; /* bordes redondeados */
    overflow: hidden; /* para que los bordes redondeados funcionen en conjunto */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* sombra sutil para dar profundidad */
}

/* Ajustes generales para la tabla */
table#setTable {
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #3a4a42; /* borde oscuro y suave */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); /* sombra más marcada para destacar */
    background-color: #1a2524; /* fondo oscuro para la tabla */
    color: #ecf4d5; /* texto claro */
}

/* Cabecera */
table#setTable thead tr th {
    background-color: #2a3a37; /* fondo más oscuro en cabecera */
    color: #ecf4d5 !important;
    border-bottom: 1px solid #3a4a42;
}

/* Bordes redondeados en cabecera */
table#setTable thead tr th:first-child {
    border-top-left-radius: 12px;
}

table#setTable thead tr th:last-child {
    border-top-right-radius: 12px;
}

/* Filas pares e impares con tonos ligeramente diferentes */
table#setTable tbody tr:nth-child(odd) {
    background-color: #23322f; /* un verde oscuro más suave */
    color: #dbe6cd;
}

table#setTable tbody tr:nth-child(even) {
    background-color: #1a2524; /* fondo más oscuro */
    color: #ecf4d5;
}

/* Hover para filas */
table#setTable tbody tr:hover {
    background-color: #f7fcea !important; /* amarillo suave para destacar */
    color: #101312 !important;
}

/* Bordes redondeados en la última fila */
table#setTable tbody tr:last-child td:first-child {
    border-bottom-left-radius: 12px;
}

table#setTable tbody tr:last-child td:last-child {
    border-bottom-right-radius: 12px;
}

/* Padding para celdas */
table#setTable th,
table#setTable td {
    vertical-align: middle;
}

/* Opcional: cursor pointer para filas clicables */
.clickable-row {
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}
table#setTable tbody tr {
    border-bottom: 1px solid #a3b18a; /* color verde claro suave */
}

/* Quitar borde a la última fila para que no haya doble borde */
table#setTable tbody tr:last-child {
    border-bottom: none;
}