/* Quitar el color de fondo de las filas impares (odd) y pares (even) */
table.dataTable tbody tr {
    background-color: var(--color-bg-card, #ffffff);
}

/* Quitar el fondo de los emcabezados de las columnas */
table.dataTable thead th {
    color: var(--color-text-primary, #1e293b);
    background-color: var(--color-bg-secondary, #f8fafc);
}

/* Opcional: Si quieres que al pasar el mouse se resalte (hover) */
table.dataTable tbody tr:hover {
    background-color: var(--color-bg-secondary, #f8fafc);
}

/* Quitar el sombreado azul que DataTables aplica a veces al ordenar columnas */
table.dataTable.display tbody tr.odd > .sorting_1,
table.dataTable.display tbody tr.even > .sorting_1 {
    background-color: transparent;
}

table.dt-search-0 {
    background-color: transparent;
}

/* agregar una linea debajo de cada fila*/
tbody tr {
    cursor: pointer;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
}

/* Efecto visual al pasar el mouse (hover) */
tbody tr:hover {
    background-color: var(--color-bg-secondary, #f8fafc);
}

/*Agregar una linea debajo de los encabezados*/
thead th {
    color: var(--color-teal, #008fb3);
    border-bottom: 1px solid var(--color-border, #00000011);
}

/* Reglas específicas para botones dinámicos creados desde JS */
.atender_btn,
.confirmar_btn,
.finalizar_btn,
.editar_btn,
.activar_btn,
.eliminar_btn,
.cancelar_btn {
    transition: background-color .16s ease, transform .12s ease, color .12s ease;
    cursor: pointer;
}

.atender_btn:hover, .editar_btn:hover {
    background-color: #bfdbfe;
    color: #1e40af;
    transform: translateY(-1px);
}

.confirmar_btn:hover, .finalizar_btn:hover, .activar_btn:hover {
    background-color: #bbf7d0;
    color: #065f46;
    transform: translateY(-1px);
}

.cancelar_btn:hover, .eliminar_btn:hover {
    background-color: #fecaca;
    color: #7f1d1d;
    transform: translateY(-1px);
}