/*
 * GB Packers · Roster Sync — Box Score Shortcode
 * Archivo: assets/boxscore.css
 *
 * Todos los estilos del shortcode [gbrs_boxscore] están aquí.
 * Puedes editarlos desde WP → Apariencia → Editor de archivos del tema,
 * o directamente en wp-content/plugins/plugin-output/assets/boxscore.css
 *
 * La CABECERA del partido (escudos, marcador y parcial) vive aparte, en
 * assets/game-header.css, porque las crónicas la usan sin el resto: aquí solo
 * queda su ajuste de márgenes en la ficha del evento (sección 10).
 *
 * Secciones:
 *   1. Base
 *   4. Secciones y títulos
 *   5. Cabeceras de columna (con color de equipo)
 *   6. Tablas de estadísticas
 *   7. Anotadores
 *   8. Estadísticas de equipo
 *   9. Responsive
 *  10. Ficha del partido (SportsPress) + overrides del tema
 */


/* ─────────────────────────────────────────────────────────────────────────────
   1. BASE
───────────────────────────────────────────────────────────────────────────── */

.gbrs-boxscore {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.88em;
    max-width: 1100px;
    margin: 0 auto;
    color: #222;
}

.gbrs-boxscore-empty {
    color: #999;
    font-style: italic;
}


/* ─────────────────────────────────────────────────────────────────────────────
   4. SECCIONES Y TÍTULOS
───────────────────────────────────────────────────────────────────────────── */

.gbrs-bs-section {
    margin: 32px 0;
}

/* Título de sección (ANOTADORES, JUEGO DE PASE...)
   OJO: la @font-face de UltimatumBold declara font-weight: normal. Poner 700
   o 900 hace que el navegador sintetice la negrita y se deforme. */
.gbrs-bs-section-title {
    font-family: "UltimatumBold", "Poppins", sans-serif;
    font-weight: normal;
    font-size: 1.35em;
    color: #10301f;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 2px solid #10301f;
    padding-bottom: 6px;
    margin-bottom: 14px;
}

/* Subtítulo dentro de una sección (Retornos de saque / despeje) */
.gbrs-bs-subsection-label {
    font-family: "UltimatumBold", "Poppins", sans-serif;
    font-weight: normal;
    font-size: 1em;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 12px 0 6px;
}

/* Grid de dos columnas (visitante | local) */
.gbrs-bs-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    min-width: 0;
}

/* CLAVE para el scroll horizontal: por defecto un elemento de grid usa
   min-width: auto, es decir, no puede encogerse por debajo del ancho natural
   de su contenido. La columna se estiraba hasta el ancho de la tabla (440px
   en un móvil de 390) y era la PÁGINA la que desbordaba, en vez de hacer
   scroll la tabla. Con min-width: 0 la columna se ajusta al hueco y el
   desbordamiento pasa a .gbrs-bs-table-scroll, que es donde debe estar. */
.gbrs-bs-col {
    min-width: 0;
}


/* ─────────────────────────────────────────────────────────────────────────────
   5. CABECERAS DE COLUMNA
   Sin fondo — texto con color primario del equipo, logo a la izquierda.
   Los colores se inyectan como variables CSS desde PHP:
     --gbrs-color-left / --gbrs-alt-left   (equipo visitante)
     --gbrs-color-right / --gbrs-alt-right  (equipo local)
───────────────────────────────────────────────────────────────────────────── */

.gbrs-bs-col-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: "UltimatumBold", "Poppins", sans-serif;
    font-weight: normal;
    font-size: 1.9em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 6px 4px;
    margin-bottom: 8px;
    background: transparent;
    border-bottom: 2px solid currentColor;
}

/* --gbrs-ink-* es el color del equipo ya ajustado para leerse sobre blanco */
.gbrs-col-left  { color: var(--gbrs-ink-left,  #1a1a1a); border-color: var(--gbrs-ink-left,  #1a1a1a); }
.gbrs-col-right { color: var(--gbrs-ink-right, #10301f); border-color: var(--gbrs-ink-right, #10301f); }

/* Mini logo en la cabecera de columna */
.gbrs-bs-col-logo {
    width: 50px;
    height: 50px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Texto vacío cuando no hay datos */
.gbrs-bs-empty-col {
    color: #aaa;
    font-style: italic;
    font-size: 0.82em;
    padding: 6px 0;
}


/* ─────────────────────────────────────────────────────────────────────────────
   6. TABLAS DE ESTADÍSTICAS
───────────────────────────────────────────────────────────────────────────── */

.gbrs-bs-table-wrap {
    overflow-x: auto;
}

.gbrs-bs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1em;
    min-width: 260px;
}

/* Dentro del wrapper de scroll, la tabla no debe forzar 100% — crece según contenido */
.gbrs-bs-table-wrap .gbrs-bs-table {
    width: auto;
    min-width: 100%;
}

/* Cabecera de la tabla — color primario del equipo */
.gbrs-bs-table thead tr {
    background: #2c2c2c;
    color: #fff;
}

/* Fondo = color principal del equipo. El texto lo decide PHP calculando la
   luminancia del fondo (WCAG): blanco sobre el negro de Pittsburgh, negro
   sobre un color claro. */
.gbrs-table-left  thead tr { background: var(--gbrs-color-left,  #1a1a1a); color: var(--gbrs-text-left,  #fff); }
.gbrs-table-right thead tr { background: var(--gbrs-color-right, #10301f); color: var(--gbrs-text-right, #fff); }

.gbrs-table-left  thead th { color: var(--gbrs-text-left,  #fff); }
.gbrs-table-right thead th { color: var(--gbrs-text-right, #fff); }

.gbrs-bs-table thead th {
    padding: 6px 9px;
    text-align: center;
    font-weight: 600;
    white-space: nowrap;
    font-size: 0.84em;
    letter-spacing: 0.02em;
}

/* Filas alternas */
.gbrs-bs-table tbody tr:nth-child(even) {
    background: #f6f6f6;
}

.gbrs-bs-table tbody tr:hover {
    background: #edf3ef;
}

.gbrs-bs-table td {
    padding: 6px 9px;
    text-align: center;
    border-bottom: 1px solid #ebebeb;
}

/* Columna de nombre de jugador */
.gbrs-bs-player-name {
    text-align: left !important;
    font-weight: 600;
    white-space: nowrap;
}

.gbrs-bs-name-col {
    text-align: left !important;
}

/* Número de dorsal junto al nombre */
.gbrs-bs-jersey {
    color: #aaa;
    font-weight: 400;
    font-size: 0.84em;
    margin-left: 4px;
}

/* Nombre del pasador entre paréntesis en anotadores */
.gbrs-bs-passer {
    color: #888;
    font-size: 0.84em;
    margin-left: 3px;
}


/* ─────────────────────────────────────────────────────────────────────────────
   7. ANOTADORES
───────────────────────────────────────────────────────────────────────────── */

.gbrs-bs-scorers-table .gbrs-bs-player-name {
    min-width: 130px;
}


/* ─────────────────────────────────────────────────────────────────────────────
   8. ESTADÍSTICAS DE EQUIPO
───────────────────────────────────────────────────────────────────────────── */

.gbrs-bs-team-stats-table {
    max-width: 540px;
}

.gbrs-bs-team-stats-table .gbrs-bs-stat-label {
    text-align: left;
    font-weight: 600;
    color: #555;
}


/* ─────────────────────────────────────────────────────────────────────────────
   9. RESPONSIVE
───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 700px) {
    .gbrs-bs-two-col {
        grid-template-columns: 1fr;
    }
}

/* ── Tablas con scroll horizontal + columna nombre sticky (estilo ESPN) ── */
@media (max-width: 700px) {

    /* El wrapper exterior NO tiene overflow — necesario para que sticky funcione */
    .gbrs-bs-table-wrap {
        overflow: visible;
        min-width: 0;
    }

    /* El div interior es el que hace scroll */
    .gbrs-bs-table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        min-width: 0;
    }

    /* La tabla de estadísticas de equipo no lleva div de scroll interior
       (no es de dos columnas), así que aquí scrollea el propio wrapper. */
    .gbrs-bs-team-stats-section .gbrs-bs-table-wrap {
        overflow-x: auto;
    }

    /* La tabla mantiene su ancho natural */
    .gbrs-bs-table {
        min-width: unset;
        width: auto;
        white-space: nowrap;
    }

    /* Columna de nombre: sticky anclada al scroll container */
    .gbrs-bs-table .gbrs-bs-player-name,
    .gbrs-bs-table .gbrs-bs-name-col,
    .gbrs-bs-table thead th:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        white-space: nowrap;
    }

    /* Fondos opacos para que no se vea el contenido deslizándose detrás.
       Con !important porque el tema también pinta estas celdas. */
    .gbrs-bs-table tbody tr:nth-child(odd)  .gbrs-bs-player-name,
    .gbrs-bs-table tbody tr:nth-child(odd)  .gbrs-bs-name-col { background: #ffffff !important; }

    .gbrs-bs-table tbody tr:nth-child(even) .gbrs-bs-player-name,
    .gbrs-bs-table tbody tr:nth-child(even) .gbrs-bs-name-col { background: #f6f6f6 !important; }

    /* Sombra sutil para indicar que hay más contenido */
    .gbrs-bs-table .gbrs-bs-player-name,
    .gbrs-bs-table .gbrs-bs-name-col {
        box-shadow: 2px 0 4px -1px rgba(0,0,0,0.12);
    }
}


/* ─────────────────────────────────────────────────────────────────────────────
   10. FICHA DEL PARTIDO (SportsPress) + OVERRIDES DEL TEMA
   Estas reglas solo se aplican en el single de sp_event cuando el partido
   YA tiene box score importado (clase gbrs-has-boxscore en el <body>, que
   añade GBRS_Boxscore::body_class). Los partidos sin box score conservan
   intacta la salida nativa de SportsPress.
───────────────────────────────────────────────────────────────────────────── */

/* Se ocultan los contenedores .sp-section-content completos, no solo las
   tablas: cada uno arrastra su título (h4.sp-table-caption) y sus márgenes,
   que si no dejarían huecos en blanco.

   · logos    → escudos de 400×400, los sustituye la cabecera del box score
   · details  → Fecha / Hora / Liga / Temporada  ┐ reproducidos en la línea
   · venue    → Recinto                          ┘ .gbrs-bs-meta de abajo
   · results  → columnas 1 2 3 4 OT TD vacías y "Win/Loss" en inglés;
                el linescore del box score las sustituye con datos reales

   Para recuperar cualquiera de ellos, quita su selector de esta lista. */
body.gbrs-has-boxscore .sp-section-content-logos,
body.gbrs-has-boxscore .sp-section-content-details,
body.gbrs-has-boxscore .sp-section-content-venue,
body.gbrs-has-boxscore .sp-section-content-results,
body.gbrs-has-boxscore .sp-event-performance-tables {
    display: none !important;
}

/* Red de seguridad: si SportsPress cambia el wrapper, la plantilla en sí
   sigue oculta. */
body.gbrs-has-boxscore .sp-template-event-logos,
body.gbrs-has-boxscore .sp-template-event-details,
body.gbrs-has-boxscore .sp-template-event-venue,
body.gbrs-has-boxscore .sp-template-event-results,
body.gbrs-has-boxscore .sp-template-event-statistics {
    display: none !important;
}

/* Separación del box score respecto al contenido de la ficha */
body.gbrs-has-boxscore .gbrs-boxscore {
    margin-top: 24px;
}

/* ── Overrides del tema Gridiron ──────────────────────────────────────────── */

/* IMPORTANTE — por qué hay tantos !important aquí:
   Gridiron pinta TODOS los <th> de la página con background #101010 y color
   #a6a6a6, y los <td> con color #797e87. Como esas reglas van sobre la propia
   celda, tapaban el fondo que nosotros poníamos en el <tr>: todas las
   cabeceras salían del mismo gris oscuro y el color del equipo no se veía.
   La solución es pintar la celda, no la fila, y hacerlo con prioridad. */

/* Cabecera con el color del equipo. El genérico va primero para que los
   selectores por equipo lo sobrescriban. */
.gbrs-boxscore .gbrs-bs-table thead th {
    background: #10301f !important;
    color: #ffffff !important;
}

.gbrs-boxscore .gbrs-table-left thead th {
    background: var(--gbrs-color-left, #1a1a1a) !important;
    color: var(--gbrs-text-left, #ffffff) !important;
}

.gbrs-boxscore .gbrs-table-right thead th {
    background: var(--gbrs-color-right, #10301f) !important;
    color: var(--gbrs-text-right, #ffffff) !important;
}

/* Texto del cuerpo de las tablas de estadísticas. */
.gbrs-boxscore .gbrs-bs-table tbody td {
    color: #222222 !important;
}

/* Filas alternas: el tema también fija fondos en tbody tr */
.gbrs-boxscore .gbrs-bs-table tbody tr:nth-child(odd)  { background: #ffffff !important; }
.gbrs-boxscore .gbrs-bs-table tbody tr:nth-child(even) { background: #f6f6f6 !important; }

/* Gridiron aplica border-left global a td + td: rompe las tablas del box score */
.gbrs-boxscore .gbrs-bs-table td + td,
.gbrs-boxscore .gbrs-bs-table th + th {
    border-left: 0 !important;
}

/* El tema añade márgenes y fondos a table/th/td dentro del contenido */
.gbrs-boxscore table {
    margin: 0 !important;
    background: transparent !important;
}

.gbrs-boxscore th,
.gbrs-boxscore td {
    vertical-align: middle;
}

/* Los títulos de sección son h3: el tema Gridiron les mete su propio
   margen superior y su tamaño. Conservamos UltimatumBold. */
.gbrs-boxscore .gbrs-bs-section-title {
    margin-top: 0 !important;
}