/* =================================================================== */
/* ESTILOS PARA TABLAS HTML - SISTEMA DE DISEÑO                      */
/* Compatible con TYPO3 13.4 + Bootstrap 5                            */
/* =================================================================== */

/* ------------------------------------ */
/* VARIABLES LOCALES                    */
/* ------------------------------------ */
:root {
    --table-border-radius: 16px;
    --table-padding-y: 16px;
    --table-padding-x: 24px;
    --table-padding-x-mobile: 16px;
    --table-border-color: var(--Neutral-80);
    --table-header-font-size: 18px;
    --table-header-font-size-mobile: 16px;
    --table-min-width-first-col: 200px;
}

/* ------------------------------------ */
/* CONTENEDOR PRINCIPAL - FIGURE        */
/* ------------------------------------ */

figure.table {
    margin: 32px 0;
    border-radius: var(--table-border-radius);
    overflow: hidden;
    border: 1px solid var(--table-border-color);
    box-shadow: 0 2px 8px rgba(var(--Neutral-0-rgb), 0.08);
}

figure.table .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ------------------------------------ */
/* ESTILOS BASE DE TABLA                */
/* ------------------------------------ */

/* Aplicar a TODAS las tablas dentro de figure.table */
figure.table table,
figure.table table.table,
figure.table table.contenttable {
    width: 100%;
    margin-bottom: 0 !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    overflow: hidden !important;
    background-color: var(--Neutral-100) !important;

    /* Reset de variables Bootstrap */
    --bs-table-bg: transparent !important;
    --bs-table-accent-bg: transparent !important;
    --bs-table-striped-bg: transparent !important;
    --bs-table-active-bg: transparent !important;
    --bs-table-hover-bg: transparent !important;
    --bs-table-color: var(--Neutral-10) !important;
    --bs-table-border-color: transparent !important;
}

/* Quitar bordes de Bootstrap */
figure.table table > :not(caption) > * > * {
    border-bottom-width: 0 !important;
    padding: var(--table-padding-y) var(--table-padding-x) !important;
}

/* ------------------------------------ */
/* ENCABEZADOS CON THEAD (PRODUCCIÓN)   */
/* ------------------------------------ */

/* Para tablas con thead real (servidor producción) */
figure.table table thead,
figure.table table.contenttable thead {
    background-color: var(--Primario-40) !important;
}

figure.table table thead tr,
figure.table table.contenttable thead tr {
    border: none !important;
}

figure.table table thead th,
figure.table table.contenttable thead th {
    padding: var(--table-padding-y) var(--table-padding-x) !important;
    background-color: var(--Primario-40) !important;
    color: var(--Neutral-100) !important;
    font-weight: 700 !important;
    font-size: var(--table-header-font-size) !important;
    text-align: left !important;
    vertical-align: middle !important;
    border: none !important;
}

/* ------------------------------------ */
/* PRIMERA FILA COMO ENCABEZADO (LOCAL) */
/* ------------------------------------ */

/* Para tablas sin thead (ambiente local) - Primera fila del tbody actúa como header */
figure.table table:not(:has(thead)) tbody tr:first-child,
figure.table table.table:not(:has(thead)) tbody tr:first-child {
    background-color: var(--Primario-40) !important;
}

figure.table table:not(:has(thead)) tbody tr:first-child td,
figure.table table.table:not(:has(thead)) tbody tr:first-child td {
    background-color: var(--Primario-40) !important;
    color: var(--Neutral-100) !important;
    font-weight: 700 !important;
    font-size: var(--table-header-font-size) !important;
    padding: var(--table-padding-y) var(--table-padding-x) !important;
    text-align: left !important;
    vertical-align: middle !important;
    border: none !important;
}

/* ------------------------------------ */
/* CUERPO DE TABLA - TBODY              */
/* ------------------------------------ */

/* Estilos generales para todas las celdas del tbody */
figure.table table tbody td,
figure.table table.contenttable tbody td {
    padding: var(--table-padding-y) var(--table-padding-x) !important;
    color: var(--Neutral-10) !important;
    font-size: var(--paragraph-font-size-large) !important;
    font-weight: var(--paragraph-font-weight) !important;
    text-align: left !important;
    vertical-align: middle !important;
    border: none !important;
    background-color: transparent !important;
}

/* Bordes entre filas */
figure.table table tbody tr,
figure.table table.contenttable tbody tr {
    border-top: 1px solid var(--table-border-color) !important;
}

/* Primera fila del tbody con thead no tiene borde superior */
figure.table table:has(thead) tbody tr:first-child,
figure.table table.contenttable tbody tr:first-child {
    border-top: none !important;
}

/* Primera columna con ancho mínimo */
figure.table table tbody td:first-child,
figure.table table thead th:first-child,
figure.table table.contenttable tbody td:first-child,
figure.table table.contenttable thead th:first-child {
    min-width: var(--table-min-width-first-col) !important;
}

/* ------------------------------------ */
/* COLORES DE FILAS ALTERNADAS          */
/* ------------------------------------ */

/* PARA TABLAS CON THEAD (PRODUCCIÓN) */
/* Filas impares - Fondo blanco */
figure.table table:has(thead) tbody tr:nth-child(odd),
figure.table table.contenttable tbody tr:nth-child(odd) {
    background-color: var(--Neutral-100) !important;
}

figure.table table:has(thead) tbody tr:nth-child(odd) td,
figure.table table.contenttable tbody tr:nth-child(odd) td {
    background-color: var(--Neutral-100) !important;
}

/* Filas pares - Fondo azul claro */
figure.table table:has(thead) tbody tr:nth-child(even),
figure.table table.contenttable tbody tr:nth-child(even) {
    background-color: var(--Primario-98) !important;
}

figure.table table:has(thead) tbody tr:nth-child(even) td,
figure.table table.contenttable tbody tr:nth-child(even) td {
    background-color: var(--Primario-98) !important;
}

/* PARA TABLAS SIN THEAD (LOCAL) */
/* Ajustar el conteo para ignorar la primera fila que actúa como header */
figure.table table:not(:has(thead)) tbody tr:nth-child(odd):not(:first-child) {
    background-color: var(--Primario-98) !important;
}

figure.table table:not(:has(thead)) tbody tr:nth-child(odd):not(:first-child) td {
    background-color: var(--Primario-98) !important;
}

figure.table table:not(:has(thead)) tbody tr:nth-child(even):not(:first-child) {
    background-color: var(--Neutral-100) !important;
}

figure.table table:not(:has(thead)) tbody tr:nth-child(even):not(:first-child) td {
    background-color: var(--Neutral-100) !important;
}

/* ------------------------------------ */
/* EFECTOS HOVER                        */
/* ------------------------------------ */

/* PARA TABLAS CON THEAD */
/* Hover en filas impares */
figure.table table:has(thead) tbody tr:nth-child(odd):hover,
figure.table table.contenttable tbody tr:nth-child(odd):hover {
    background-color: var(--Neutral-90) !important;
}

figure.table table:has(thead) tbody tr:nth-child(odd):hover td,
figure.table table.contenttable tbody tr:nth-child(odd):hover td {
    background-color: var(--Neutral-90) !important;
    transition: background-color var(--transition-hover);
}

/* Hover en filas pares */
figure.table table:has(thead) tbody tr:nth-child(even):hover,
figure.table table.contenttable tbody tr:nth-child(even):hover {
    background-color: var(--Primario-98, #C4D7FC) !important;
}

figure.table table:has(thead) tbody tr:nth-child(even):hover td,
figure.table table.contenttable tbody tr:nth-child(even):hover td {
    background-color: var(--Primario-98, #C4D7FC) !important;
    transition: background-color var(--transition-hover);
}

/* PARA TABLAS SIN THEAD */
/* No aplicar hover a la primera fila (header) */
figure.table table:not(:has(thead)) tbody tr:first-child:hover td {
    background-color: var(--Primario-40) !important;
}

/* Hover considerando el desplazamiento por el header */
figure.table table:not(:has(thead)) tbody tr:nth-child(even):not(:first-child):hover {
    background-color: var(--Neutral-90) !important;
}

figure.table table:not(:has(thead)) tbody tr:nth-child(even):not(:first-child):hover td {
    background-color: var(--Neutral-90) !important;
    transition: background-color var(--transition-hover);
}

figure.table table:not(:has(thead)) tbody tr:nth-child(odd):not(:first-child):hover {
    background-color: var(--Primario-98, #C4D7FC) !important;
}

figure.table table:not(:has(thead)) tbody tr:nth-child(odd):not(:first-child):hover td {
    background-color: var(--Primario-98, #C4D7FC) !important;
    transition: background-color var(--transition-hover);
}

/* ------------------------------------ */
/* TABLAS CON DATOS NUMÉRICOS           */
/* ------------------------------------ */

.table-numeric tbody td {
    text-align: left !important;
}

.table-numeric tbody tr:first-child td {
    font-weight: 700 !important;
}

/* ------------------------------------ */
/* COLUMNA FIJA EN MOBILE               */
/* ------------------------------------ */

@media (max-width: 767px) {
    .table-sticky-first {
        display: block;
        position: relative;
    }

    .table-sticky-first tbody td:first-child,
    .table-sticky-first thead th:first-child {
        position: sticky !important;
        left: 0 !important;
        z-index: 10 !important;
        background-color: inherit !important;
        box-shadow: 2px 0 4px rgba(var(--Neutral-0-rgb), 0.1) !important;
    }
}

/* ------------------------------------ */
/* RESPONSIVE - MOBILE                   */
/* ------------------------------------ */

@media (max-width: 576px) {
    /* Headers con thead */
    figure.table table thead th,
    figure.table table.contenttable thead th {
        font-size: var(--table-header-font-size-mobile) !important;
        padding: var(--table-padding-y) var(--table-padding-x-mobile) !important;
    }

    /* Headers sin thead (primera fila) */
    figure.table table:not(:has(thead)) tbody tr:first-child td {
        font-size: var(--table-header-font-size-mobile) !important;
        padding: var(--table-padding-y) var(--table-padding-x-mobile) !important;
    }

    /* Celdas del body */
    figure.table table tbody td,
    figure.table table.contenttable tbody td {
        font-size: var(--paragraph-font-size-medium) !important;
        padding: var(--table-padding-y) var(--table-padding-x-mobile) !important;
    }

    /* Mantener ancho mínimo primera columna */
    figure.table table tbody td:first-child,
    figure.table table thead th:first-child,
    figure.table table.contenttable tbody td:first-child,
    figure.table table.contenttable thead th:first-child {
        min-width: var(--table-min-width-first-col) !important;
    }
}

/* Para pantallas muy pequeñas < 320px */
@media (max-width: 320px) {
    figure.table table tbody td:first-child,
    figure.table table thead th:first-child,
    figure.table table.contenttable tbody td:first-child,
    figure.table table.contenttable thead th:first-child {
        min-width: var(--table-min-width-first-col) !important;
    }

    figure.table table tbody td:not(:first-child),
    figure.table table thead th:not(:first-child),
    figure.table table.contenttable tbody td:not(:first-child),
    figure.table table.contenttable thead th:not(:first-child) {
        white-space: nowrap;
        width: auto;
    }
}

/* ------------------------------------ */
/* TABLAS DE EXCEPCIONES                */
/* ------------------------------------ */

.exception-table thead,
.exception-table.contenttable thead {
    background-color: var(--Primario-40) !important;
}

.exception-table tbody tr,
.exception-table.contenttable tbody tr {
    border-top: 1px solid var(--table-border-color) !important;
}

.exception-table .exception-name {
    font-weight: 600 !important;
    color: var(--Neutral-20) !important;
}

.exception-table .exception-value {
    text-align: right !important;
    font-weight: 700 !important;
    color: var(--Primario-50) !important;
}

/* ------------------------------------ */
/* TABLAS DE DATOS TEMPORALES           */
/* ------------------------------------ */

.data-table thead th,
.data-table.contenttable thead th {
    text-align: center !important;
}

.data-table thead th:first-child,
.data-table.contenttable thead th:first-child {
    text-align: left !important;
}

.data-table tbody td,
.data-table.contenttable tbody td {
    text-align: center !important;
}

.data-table tbody td:first-child,
.data-table.contenttable tbody td:first-child {
    text-align: left !important;
    font-weight: 600 !important;
}

.data-table .date-cell {
    color: var(--Neutral-50) !important;
}

.data-table .amount-cell {
    font-weight: 600 !important;
    color: var(--Neutral-20) !important;
}

.data-table .percentage-cell {
    color: var(--Primario-50) !important;
    font-weight: 700 !important;
}

/* ------------------------------------ */
/* ACCESIBILIDAD                        */
/* ------------------------------------ */

/* Focus visible para navegación con teclado */
figure.table table tbody tr:focus-within,
figure.table table.contenttable tbody tr:focus-within {
    outline: 2px solid var(--Complementario-60);
    outline-offset: -2px;
}

/* ------------------------------------ */
/* UTILIDADES                           */
/* ------------------------------------ */

/* Clases para alineación */
.text-left {
    text-align: left !important;
}

.text-center {
    text-align: center !important;
}

.text-right {
    text-align: right !important;
}

/* Scroll horizontal suave */
figure.table,
figure.table .table-responsive {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* ------------------------------------ */
/* FALLBACK PARA TABLAS SIN FIGURE      */
/* ------------------------------------ */

/* Si la tabla no está en figure.table */
.table-container {
    border-radius: var(--table-border-radius);
    overflow: hidden;
    border: 1px solid var(--table-border-color);
    box-shadow: 0 2px 8px rgba(var(--Neutral-0-rgb), 0.08);
}

.table-container table.table tbody tr:first-child,
.table-container table.contenttable tbody tr:first-child {
    background-color: var(--Primario-40) !important;
}

.table-container table.table tbody tr:first-child td,
.table-container table.contenttable tbody tr:first-child td {
    background-color: var(--Primario-40) !important;
    color: var(--Neutral-100) !important;
    font-weight: 700 !important;
    font-size: var(--table-header-font-size) !important;
}