/* css/tables.css */

.jornada-table,
.standings-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
    /* Ligeramente más pequeño para ayudar a encajar */
    table-layout: auto;
    background-color: var(--color-surface-light, #ffffff);
    /* FONDO BLANCO OPACO */
    color: var(--color-text-on-light);
    /* TEXTO OSCURO */
}

/* Encabezados de tabla */
.jornada-table th,
.standings-table th {
    background: linear-gradient(135deg, var(--color-primary-magenta, #B91C4A) 0%, var(--color-primary-magenta-darker, #93123A) 100%);
    color: var(--color-white);
    padding: 9px 7px;
    /* Más compacto */
    font-weight: 600;
    text-align: center;
    font-size: 0.7rem;
    /* Relativo al font-size de la tabla */
    letter-spacing: 0.2px;
    border-bottom: 2px solid var(--color-primary-magenta-darker, #93123A);
    white-space: nowrap;
}

/* Celdas de tabla */
.jornada-table td,
.standings-table td {
    padding: 7px 5px;
    /* Más compacto */
    text-align: center;
    font-size: 0.7rem;
    color: var(--color-text-on-light);
    font-weight: 500;
    white-space: normal;
    border-bottom: 1px solid var(--color-light-gray-border-on-light, #dee2e6);
}

/* Filas de tabla */
.jornada-table tbody tr:nth-child(even),
.standings-table tbody tr:nth-child(even) {
    background-color: var(--color-table-row-even, #f5f5f7);
    /* Gris muy claro para filas pares */
}

.jornada-table tbody tr:hover,
.standings-table tbody tr:hover {
    background-color: rgba(var(--color-primary-magenta-rgb, 185, 28, 74), 0.08);
    /* Hover magenta muy sutil */
}

/* Estilos específicos de celdas */
.team-cell {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    /* Reducido */
    text-align: left;
    color: var(--color-text-on-light);
}

.team-logo-small {
    width: 18px;
    /* Más pequeño */
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--color-light-gray-border-on-light, #dee2e6);
    background-color: var(--color-white);
    flex-shrink: 0;
}

.team-name {
    color: var(--color-text-on-light);
}

.score-cell {
    font-weight: bold;
    color: var(--color-primary-magenta, #B91C4A);
    white-space: nowrap;
}

.standings-table .position,
.standings-table td:first-child {
    font-weight: bold;
    color: var(--color-primary-magenta, #B91C4A);
}

.standings-table .points,
.standings-table td:last-child {
    font-weight: bold;
    color: var(--color-accent-pink, #D94A78);
    font-size: 1.1em;
    /* Relativo a la celda */
}

/* === Media Queries para Responsividad en Móviles === */
@media (max-width: 768px) {

    .jornada-table,
    .standings-table {
        font-size: 0.42em;
        /* ¡TEXTO MUY PEQUEÑO PARA QUE TODO QUEPA! Ajusta críticamente */
        min-width: 0;
        table-layout: auto;
        word-break: break-word;
    }

    .jornada-table th,
    .standings-table th {
        padding: 4px 2px;
        /* Padding mínimo */
        font-size: 1em;
        /* Relativo al nuevo font-size de la tabla */
        white-space: normal;
        /* Permitir que los encabezados se partan */
    }

    .jornada-table td,
    .standings-table td {
        padding: 3px 1px;
        /* Padding mínimo */
    }

    /* Ocultar columnas "Jornada", "Goles V." y "Categoría" en la tabla de jornadas en móvil */
    .jornada-table .col-jornada,
    .jornada-table .col-goles-hide-mobile,
    .jornada-table .col-categoria {
        display: none;
    }

    .team-logo-small {
        width: 10px;
        height: 10px;
    }

    /* Logos muy muy pequeños */
    .team-cell {
        gap: 2px;
    }

    .score-cell {
        font-size: 1em;
    }

    /* Para la tabla de posiciones, todas las columnas se muestran pero encogidas */
}