/* ============================================================================
 * CATÁLOGO: TABLA (VISTA LISTA)
 * Extraído desde styles/style.css para mantener el proyecto más ordenado.
 * ============================================================================ */

/* Ajustes para la tabla sticky header (desktop) */
.catalog-table thead th {
    position: sticky;
    top: var(--table-header-top);
    z-index: 850;

    /* Fondo sólido, oscuro y limpio */
    background: var(--color-superficie-2) !important;

    /* Bordes sutiles, nada agresivo */
    border-top: none;
    border-bottom: 1px solid var(--color-borde);

    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);

    /* Texto normal, volviendo a la elegancia */
    text-transform: none;
    letter-spacing: 0.5px;
    font-family: var(--font-ui);
    /* Volvemos a la fuente sans-serif limpia */
    font-weight: 500;
}

/* ==========================================================================
   VISTA DE LISTA (TABLA DE PARTITURAS)
   ========================================================================== */
.catalog-table-container {
    width: 100%;
    overflow: visible;
    /* IMPORTANTE: overflow rompe position:sticky del thead en desktop */
    background: var(--color-superficie);

    /* Bordes suaves y radius devuelta */
    border-radius: 12px;

    border: 1px solid var(--color-borde);
    /* Borde izquierdo normal */
    border-left: 1px solid var(--color-borde);
}

@media (max-width: 1024px) {
    .catalog-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    .catalog-table thead th {
        position: static;
        top: auto;
        box-shadow: none;
    }
}

.catalog-list {
    padding: 0 24px 48px 24px;
    width: 100%;
}

.catalog-table {
    /* ============================================================
     ANCHOS DE COLUMNAS (TOCAR ACÁ)
     Ajustá estos números (px) y listo.
     Objetivo: que todo entre en una pantalla, estilo Excel.
     ============================================================ */
    --w-piece: 200px;
    --w-year-original: 35px;
    /* Un poco más de aire para el año */
    --w-author: 170px;
    --w-description: 105px;
    --w-source: 150px;
    --w-arranger: 120px;
    --w-instrumentation: 110px;
    --w-genre: 100px;
    /* Aumentado para evitar encimado */
    --w-year-rupulo: 54px;

    width: 100%;
    border-collapse: collapse;
    min-width: 0;
    font-size: 0.85rem;
    table-layout: fixed;
}

.catalog-table th,
.catalog-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--color-borde);
    vertical-align: middle;
    white-space: nowrap;
}

/* BODY (Excel compacto): mostrar toda la info con wrap */
.catalog-table tbody td {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.2;
    padding-top: 6px;
    padding-bottom: 6px;
    vertical-align: top;
}

.catalog-table tbody td.year-col {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
}

/* Map de anchos por columna (header + body)
   Orden de columnas = CATALOG_FIELDS en catalog.js */
.catalog-table th[data-key="fileName"],
.catalog-table td:nth-child(1) {
    width: var(--w-piece);
    max-width: var(--w-piece);
}

.catalog-table th[data-key="yearOriginal"],
.catalog-table td:nth-child(2) {
    width: var(--w-year-original);
    max-width: var(--w-year-original);
}

.catalog-table th[data-key="author"],
.catalog-table td:nth-child(3) {
    width: var(--w-author);
    max-width: var(--w-author);
}

.catalog-table th[data-key="description"],
.catalog-table td:nth-child(4) {
    width: var(--w-description);
    max-width: var(--w-description);
}

.catalog-table th[data-key="source"],
.catalog-table td:nth-child(5) {
    width: var(--w-source);
    max-width: var(--w-source);
}

.catalog-table th[data-key="arranger"],
.catalog-table td:nth-child(6) {
    width: var(--w-arranger);
    max-width: var(--w-arranger);
}

.catalog-table th[data-key="instrumentation"],
.catalog-table td:nth-child(7) {
    width: var(--w-instrumentation);
    max-width: var(--w-instrumentation);
}

.catalog-table th[data-key="genre"],
.catalog-table td:nth-child(8) {
    width: var(--w-genre);
    max-width: var(--w-genre);
}

.catalog-table th[data-key="yearRupulo"],
.catalog-table td:nth-child(9) {
    width: var(--w-year-rupulo);
    max-width: var(--w-year-rupulo);
}

/* Separadores verticales por columna */
.catalog-table th:not(:last-child),
.catalog-table td:not(:last-child) {
    box-shadow: inset -1px 0 0 var(--color-borde);
}

.catalog-table th {
    outline: none;
    overflow: visible !important;
    vertical-align: bottom;
    position: relative;
    z-index: 10;
    height: auto;
    border-bottom: 1px solid var(--color-borde);
}

.catalog-table tbody tr {
    transition: background-color 0.1s ease;
    position: static;
    z-index: auto;
}

.catalog-table tbody tr:nth-child(even) {
    background: rgba(var(--color-marca-rgb), 0.035);
}

.catalog-table tbody tr:hover,
.catalog-table tbody tr:focus-visible {
    background-color: rgba(var(--color-marca-rgb), 0.10);
}

/* Cuando el usuario usa teclado, desactivar hover accidental sobre filas */
body.using-keyboard .catalog-table tbody tr:hover:not(:focus-visible) {
    transform: none;
    box-shadow: none;
    background: var(--color-superficie);
    /* Reset background */
    z-index: 0;
}

.catalog-table tbody tr:focus {
    outline: none;
}

.catalog-table tbody tr:focus-visible {
    z-index: 1;
    box-shadow: inset 2px 0 0 var(--color-marca);
    outline: 1px solid rgba(var(--color-marca-rgb), 0.45);
    outline-offset: -1px;
}

.catalog-table th:hover {
    color: var(--color-texto);
}

.catalog-table thead th .th-sort-label {
    color: var(--color-encabezado-tabla, var(--color-texto));
}

.catalog-table th.sort-asc,
.catalog-table th.sort-desc {
    color: var(--color-encabezado-tabla, var(--color-marca));
    background: var(--color-superficie-2);
    border-bottom-color: rgba(var(--color-encabezado-tabla-rgb, var(--color-marca-rgb)), 0.85);
    box-shadow: inset 0 -2px 0 rgba(var(--color-encabezado-tabla-rgb, var(--color-marca-rgb)), 0.45);
}

.catalog-table th.sort-asc::after {
    content: ' ↑';
    display: inline-block;
    margin-left: 4px;
}

.catalog-table th.sort-desc::after {
    content: ' ↓';
    display: inline-block;
    margin-left: 4px;
}

.catalog-table th.year-col,
.catalog-table td.year-col {
    padding-left: 6px;
    padding-right: 6px;
}

.catalog-table .title-cell {
    font-weight: 500;
    color: var(--color-texto);
}

.catalog-table .description-cell {
    max-width: 100%;
    color: var(--color-texto-suave);
}

.catalog-table .year {
    display: inline-block;
    line-height: 1.05;
    font-weight: 600;
}

/* ==========================================================================
   RESPONSIVE (MÓVIL): TABLA EN SCROLL + SIN STICKY THEAD
   ========================================================================== */
@media (max-width: 768px) {
    .catalog-list {
        padding: 0;
    }

    .catalog-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        border-radius: 0;
        border: none;
    }

    .catalog-table th,
    .catalog-table td {
        padding: 14px 16px;
    }

    .catalog-table thead th {
        position: static;
        top: auto;
        z-index: auto;
        box-shadow: none;
    }
}