/* Tabla_base */
.table-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    isolation: isolate;
    position: relative;
    width: 100%;
    /* min-width: 1328px; */
    max-width: 1400px;
    /* height: 513px; */
    background-color: var(--paleta-principal-blanco-todo-puede-pasar, #FFFFFF);
    border: 1px solid var(--fondos-digitales-fondo-5, #F8F8F8);
    border-radius: 12px;
}

.table-container.basic {
    width: 100%;
    max-width: fit-content;
    align-self: center;
}

/* Cabecera_tabla */
.table-header-desktop {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    /* Allow wrapping to a new line */
    justify-content: space-between;
    align-items: center;
    padding: 8px 24px;
    gap: 24px;
    isolation: isolate;
    width: 100%;
    height: auto;
    /* Adjust height to content */
    min-height: 65px;
    background-color: var(--paleta-principal-blanco-todo-puede-pasar, #FFFFFF);
    border-bottom: 1px solid var(--fondos-digitales-fondo-5, #F8F8F8);
    border-radius: 12px 12px 0px 0px;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
    z-index: 3;
}

.table-container.basic .table-header-desktop {
    background-color: var(--fondos-digitales-fondo-1, #E5E9EA);
}

/* Title */
.table-header-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 24px;
    /* width: 352px; */
    /* Fixed width */
    height: 32px;
    flex: none;
    order: 0;
    flex-grow: 0;
    z-index: 0;
}

.table-header-title span {
    width: 100%;
    height: 32px;
    font-family: 'Sura Sans';
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    color: var(--paleta-complementaria-azul-profundo, #0033A0);
    flex: none;
    order: 1;
    flex-grow: 0;
}

/* Inputs */
.table-header-inputs {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 0px;
    gap: 24px;
    width: auto;
    /* Adapt to available space */
    height: auto;
    /* Adjust height to content */
    flex: 1;
    /* Take remaining space */
    order: 1;
    flex-grow: 1;
    z-index: 0;
}

.table-header-inputs .dropdown-container {
    width: 240px;
}

.table-header-inputs .text-input-container {
    width: 240px;
}

/* Contenedor de la tabla */
.table-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    width: 100%;
    min-height: 448px;
    overflow-x: auto;
    /* Add horizontal scroll */
    overflow-y: hidden;
    /* Prevent vertical scroll */
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
    z-index: 2;
    position: relative;
    /* Ensure positioning context for sticky elements */
}

.table-container.basic .table-content { 
    min-height: auto;
}

.table-content.no-results table {
    display: none;
}

/* Table */
.table-content table {
    width: 100%;
    border-collapse: collapse;
    order: 1;
    /* Ensure table is ordered correctly */
}

.table-content th,
.table-content td {
    padding: 8px;
    text-align: left;
    /* border-bottom: 1px solid var(--fondos-digitales-fondo-4, #DFEAFF); */
}

.table-content th {
    cursor: pointer;
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.table-content th .sort-icon {
    transition: transform 0.3s;
}

.table-content th.sort-desc .sort-icon {
    transform: rotate(180deg);
}

/* Celda principal */
.table-cell-main {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 16px;
    width: 252px;
    min-width: 252px;
    height: 100%;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
    background-color: var(--paleta-principal-blanco-todo-puede-pasar, #FFFFFF);
    /* Ensure background color */
    z-index: 2;
    /* Ensure it stays above other elements */
}

/* Celda_responsiva */
.table-cell {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 8px 8px;
    gap: 8px;
    width: 180px;
    min-width: 180px;
    height: 56px;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}

.table-cell-main.sticky {
    position: sticky;
    /* Make the first column sticky */
    z-index: 3;
    /* Ensure it stays above other elements */
    /* box-shadow: 8px 0px 25px 0px #081A3F14; Add shadow effect */
}

/* Texto */
.table-cell-text {
    width: min-content;
    height: auto;
    font-family: 'Sura Sans';
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    display: flex;
    align-items: center;
    color: #222222;
    flex: none;
    order: 0;
    flex-grow: 1; /* Allow text to occupy available space */
    white-space: normal; /* Allow text to wrap */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limit to 2 lines */
    line-clamp:  2;
    -webkit-box-orient: vertical;
}

/* Texto para celdas de títulos */
.table-row.header .table-cell-text {
    font-weight: 600;
    font-size: 16px;
    color: #222222;
}

/* Arrow Big (icono) */
.table-cell .sort-icon,
.table-cell-main .sort-icon {
    /* display: flex; */
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--paleta-principal-azul-cielo-latino, #2D6DF6);
}

/* Contenedor de filas de la tabla */
.table-rows {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    width: 100%;
    min-height: 392px;
    overflow-y: auto;
    /* Enable vertical scroll */
    overflow-x: auto;
    /* Prevent horizontal scroll on rows */
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
}

.table-container.basic .table-rows { 
    min-height: auto;
}

/* Scrollbar styles for table rows */
.table-rows::-webkit-scrollbar {
    Height: 8px;
}

.table-rows::-webkit-scrollbar-track {
    background-color: var(--fondos-digitales-fondo-5, #F8F8F8);
    /* Fondo del scroll gris claro */
}

.table-rows::-webkit-scrollbar-thumb {
    background-color: var(--tonos-neutros-pantone-429-C, #B4B4B5);
    border-radius: 4px;
}

.table-rows::-webkit-scrollbar-thumb:hover {
    background-color: var(--tonos-neutros-pantone-429-C, #888B8D);
}

/* Fila_tabla */
.table-row {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px 24px;
    gap: 24px;
    width: 100%;
    height: 56px;
    background-color: var(--paleta-principal-blanco-todo-puede-pasar, #FFFFFF);
    border-bottom: 1px solid var(--fondos-digitales-fondo-4, #DFEAFF);
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}

/* Change background color when checkbox is checked */
.table-row:has(input[type="checkbox"]:checked) {
    background-color: var(--fondos-digitales-fondo-1, #E5E9EA);
}

.table-cell-main:has(input[type="checkbox"]:checked) {
    background-color: var(--fondos-digitales-fondo-1, #E5E9EA);
}

.table-row.header:has(input[type="checkbox"]:checked) {
    background-color: var(--paleta-principal-blanco-todo-puede-pasar, #FFFFFF);
}

.table-row.header:has(input[type="checkbox"]:checked) .table-cell-main {
    background-color: var(--paleta-principal-blanco-todo-puede-pasar, #FFFFFF);
}

/* Remove left padding if the row has a main cell */
.table-row:has(.table-cell-main) {
    padding-left: 0;
}

/* Remove left padding if the row has a main cell */
.table-cell-main:has(.custom-checkbox-container) {
    padding-left: 24px;
}

/* Celda_responsiva */
.table-row .table-cell {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 8px 8px;
    gap: 8px;
    width: 180px;
    min-width: 180px;
    height: 100%;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}

.table-row .table-cell-main.sticky {
    position: sticky;
    /* Make the first column sticky */
    left: 0;
    background-color: var(--paleta-principal-blanco-todo-puede-pasar, #FFFFFF);
    /* Ensure background color */
    z-index: 3;
    /* Ensure it stays above other elements */
}

/* Texto */
.table-row .table-cell-text {
    font-family: 'Sura Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: #060618;
}

/* Hover actions */
.table-content th:hover {
    background-color: var(--fondos-digitales-fondo-5, #F8F8F8);
}

.table-row.header .table-cell-main:hover {
    background-color: var(--fondos-digitales-fondo-5, #F8F8F8); /* Change background color on hover */
}

/* Estilos para los íconos de ordenamiento */
.sort-icon {
    display: none;
    /* Oculto por defecto */
    /* margin-left: 8px; */
    transition: transform 0.3s ease;
    vertical-align: middle;
}

/* Íconos visibles cuando hay orden */
.sort-icon.desc {
    display: flex;
    transform: rotate(180deg);
    /* Rotado 180° para orden descendente */
}

.sort-icon.asc {
    display: flex;
    transform: rotate(0deg);
    /* Orientación normal para orden ascendente */
}

/* Styles for no results message */
.no-results-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    text-align: center;
    padding: 24px;
}

.table-container.basic .no-results-container { 
    min-height: 392px;
}

.no-results-container img {
    max-width: 100px;
    margin-bottom: 24px;
}

.no-results-container p {
    font-family: 'Sura Sans';
    font-size: 16px;
    color: var(--paleta-complementaria-azul-profundo, #0033A0);
}

/* Paginador */
.paginator {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    /* Change to column to support vertical expansion */
    justify-content: flex-end;
    align-items: flex-end;
    padding: 10px 24px;
    gap: 24px;
    width: 100%;
    max-width: 1400px;
    background-color: #FFFFFF;
    border-bottom: 1px solid #F8F8F8;
    border-radius: 0px 0px 12px 12px;
    order: 2;
    /* Ensure paginator is ordered correctly */
}

.paginator-content {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding: 0px;
    gap: 16px;
    width: 100%;
    flex-wrap: wrap;
    /* Allow wrapping to a new line */
}

.paginator-navigation {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 8px;
    width: auto;
    /* Adjust width to content */
    height: 32px;
    justify-content: flex-end;
}

.paginator-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    /* Make the icon clickable */
}

.paginator-icon i {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #2D6DF6;
    /* Default color */
}

.paginator-icon.disabled i {
    color: #B4B4B5;
    /* Disabled color */
    cursor: default;
    /* Change cursor for disabled state */
}

.paginator-pages {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.paginator-page {
    width: 32px;
    height: 32px;
    background-color: #FFFFFF;
    border-radius: 30px;
    font-family: 'Sura Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #0033A0;
    cursor: pointer;
    /* Make the page number clickable */
}

.paginator-page.current {
    background-color: #2D6DF6;
    color: #F4F4F4;
}

.paginator-show-pages {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    width: auto;
    /* Adjust width to content */
    height: 36px;
}

.paginator-show-pages .show-text {
    width: 50px;
    max-width: 50px;
    height: 18px;
    font-family: 'Sura Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    display: flex;
    align-items: center;
    color: #333F48;
}

.paginator-show-pages .dropdown-container {
    width: 69px;
    max-width: 69px;
    min-width: 69px;
    height: 40px;
}

.paginator-show-pages .dropdown-select {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px 12px;
    gap: 4px;
    width: 100%;
    height: 100%;
    background-color: #F8F8F8;
    border-radius: 12px;
    border: none;
}

.paginator-show-pages .dropdown-select .dropdown-text {
    /* width: 18px; */
    /* max-width: 20px; */
    /* height: 20px; */
    font-family: var(--desktop-caption-bold-font-family);
    font-style: var(--desktop-caption-bold-font-style);
    font-weight: var(--desktop-caption-bold-font-weight);
    font-size: var(--desktop-caption-bold-font-size);
    line-height: var(--desktop-caption-bold-line-height);
    /* color: #333F48; */
    color: var(--escala-grises-gris-500, #3F3F41);
}

/* Estados del campo dropdown */
/* .paginator-show-pages .dropdown-select:hover {
    border: 1px solid var(--paleta-complementaria-azul-profundo, #26328C);
    box-shadow: 0px 4px 8px 0px rgba(83, 89, 144, 0.80);
} */

.paginator-show-pages .dropdown-select:focus-within {
    border: 1px solid var(--paleta-principal-azul-cielo-latino, #2D6DF6);
}

.paginator-show-pages .dropdown-container.active .dropdown-select {
    border: 1px solid var(--paleta-principal-azul-cielo-latino, #2D6DF6);
}



/* .paginator-show-pages .dropdown-select .dropdown-icon {
    width: 16px;
    height: 16px;
} */

.paginator-show-pages .rows-text {
    width: 96px;
    max-width: 96px;
    height: 16px;
    font-family: 'Sura Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: #333F48;
}

.table-cell-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 8px;
    width: 150px;
    min-width: 150px;
    height: 56px;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
    gap: 12px;
}

.table-cell-actions .button-primario-azul,
.table-cell-actions .button-secundario-azul,
.table-cell-actions .button-primario-amarillo,
.table-cell-actions .button-secundario-peligro,
.table-cell-actions .button-terciario,
.table-cell-actions .button-terciario-peligro {
    min-width: auto;
}

.table-cell-actions .button-terciario {
    min-width: auto;
}

.table-cell-options {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 8px;
    width: 56px; /* Set width to 56px */
    min-width: 56px; /* Set min-width to 56px */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
    gap: 12px;
    position: sticky; /* Make the options column sticky */
    right: 0; /* Stick to the right */
    z-index: 3; /* Ensure it stays above other elements */
    padding-right: 24px;
    background-color: var(--paleta-principal-blanco-todo-puede-pasar, #FFFFFF);
}

/* Remove right padding if the row has a options cell */
.table-row:has(.table-cell-options) {
    padding-right: 0;
}

/* Mobile styles */
@media (max-width: 768px) {
    .table-header-inputs {
        flex-wrap: wrap;
    }

    .table-header-inputs .dropdown-container {
        width: 100%;
        order: 1;
    }

    .table-header-inputs .text-input-container {
        width: 100%;
        order: 0;
    }

    .table-row .table-cell-main.sticky {
        position:static;
    }

    .table-cell-main.sticky {
        position: static;
    }
}

/* ...existing code... */
.selected-count-text {
    display: none;
    font-family: 'Sura Sans';
    font-size: 14px;
    color: var(--paleta-principal-azul-cielo-latino, #2D6DF6);
    margin-right: auto; /* Align to the left */
}

@media (max-width: 768px) {
    .selected-count-text {
        order: -1; /* Move to the first row */
        width: 100%;
        text-align: left;
        margin-bottom: 8px;
    }
}