html .table,
.datatable-table {
    color: var(--ds-table-text-color);
    border-color: var(--ds-table-border-color);
}

html .view-content.row thead {
    border-color: var(--ds-border-color);
}

html .view-content.row thead th {
    color: var(--ds-text-color);
}

html .table tr th a {
    color: var(--ds-text-color);
}

html .table tr th a,
html .table tr td a {
    font-family: var(--ds-font-narrow-family);
}

.table tr th a:hover {
    color: var(--ds-text-color-hover);
}

.view-header,
.view-empty {
    font-family: var(--ds-font-narrow-family);
    font-size: .9em;
}



html tr td,
tr th {
    border-color: var(--ds-border-color);
    font-family: var(--ds-font-narrow-family);
    font-size: 1.1em;
}

.view-filters {
    display: flex;
    flex-direction: row;
    width: 100%;
    flex-wrap: wrap;
    border: 0;
    box-shadow: 0 0 5px var(--ds-background-color);
    padding: 1rem;
    margin-bottom: 1.5rem;
    border-radius: 4px;
    background-color: var(--ds-secondary-background-color);
    align-items: center;
    font-family: var(--ds-font-narrow-family);
    font-size: .9em;
}

.view-filters .views-exposed-form .flex-wrap {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 1rem;
}

.view-filters .form-actions {
    display: flex;
    gap: 1rem;
    flex-direction: row;
}

.view-filters label {
    font-family: var(--ds-font-title-family);
    font-size: .9em;
}


.view-filters input,
.view-filters select {
    font-family: var(--ds-font-narrow-family);
    font-size: .9em;
}

.view-filters .form-actions .form-control.btn.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
    color: #ffffff;
    border: 1px solid transparent;
}

.view-filters .form-actions .form-control.btn.btn-primary:hover {
    background-color: #0056b3;
    border-color: #0056b3;
    color: #ffffff;
}

.view-content.row thead {
    border: 1px solid #dee2e6;
    border-bottom: 4px solid #dee2e6;
}

.view-content.row thead th {
    background-color: #f8f9fa;
    font-weight: bold;
    color: #343a40;
    align-self: center;
    padding: 0;
}

.view-content .table>thead,
.datatable-table>thead {
    vertical-align: middle;
}

.view-content.row tbody tr {
    background-color: var(--ds-secondary-background-color);
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--ds-border-color);
    border-radius: 4px;
    transition: all 0.2s ease-in-out;
}

.view-content.row tbody tr:nth-child(even) {
    background-color: var(--ds-secondary-background-color);
}

.view-content.row tbody tr:hover {
    background-color: var(--ds-tertiary-background-color);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.view-content.row tbody tr td {
    border: none;
    vertical-align: middle;
}

/************* Campos de la tabla *************/
.view-content.row tbody tr .views-field.views-field-field-status span {
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    color: #ffffff;
    background-color: #6c757d;
    /* Gris por defecto */
}

.view-content.row tbody tr .views-field.views-field-field-status span.pending {
    background-color: var(--ds-perte-c-yellow);
    /* Amarillo */
    color: #000000;
}

.view-content.row tbody tr .views-field.views-field-field-status span.investigation {
    background-color: #6c757d;
    /* Gris */
    color: #ffffff;
}

.view-content.row tbody tr .views-field.views-field-field-status span.analysis {
    background-color: #007bff;
    /* Azul oscuro */
    color: #ffffff;
}

.view-content.row tbody tr .views-field.views-field-field-status span.resolution {
    background-color: var(--ds-perte-c-green);
    /* Verde */
    color: #ffffff;
}

.view-content.row tbody tr .views-field.views-field-edit-node {}

.view-content.row tbody tr .views-field.views-field-edit-node a::before {
    content: "\f044";
    /* Código Unicode del ícono de lápiz */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    display: none;
    /* Ocultar el ícono porque lo está poniendo x2, en el ::before y en svg... Raro */
}

.table tr th a {
    color: #343a40;
    width: 100%;
    height: 100%;
    display: block;
    padding: 0.75rem;
}

/* Texto directamente a pelo <th>Texto</th> */
.table tr th:not(:has(a)) {
    color: #343a40;
    padding: 0.5rem;
    display: table-cell;
}

table tr th a:hover {
    color: #0056b3;
    text-decoration: none;
}

table tr th .tablesort {
    background: none;
}

table tr th a:not(:has(.tablesort))::after {
    content: "\f0dc";
    /* Código Unicode del ícono de flecha */
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    margin-left: 0.5rem;
}

table tr th .tablesort.tablesort--asc::after {
    content: "\f0de";
    /* Código Unicode del ícono de flecha hacia arriba */
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
}

table tr th .tablesort.tablesort--desc::after {
    content: "\f0dd";
    /* Código Unicode del ícono de flecha hacia abajo */
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
}

tr.selected td {
    background: var(--ds-perte-c-blue-light);
}

#block-perte-content .view-content.row thead th.views-field-views-bulk-operations-bulk-form,
#block-perte-content .view-content.row tbody td.views-field-views-bulk-operations-bulk-form {
    padding: 10px 0 0 0;
    text-align: center;

}