/* ═══════════════════════════════════════════════════════════════════════
   LPF SP Overrides — Mejoras visuales para shortcodes nativos de SP
   Afecta: [league_table], [team_standings], [event_blocks], [countdown]
   Usa var(--lpf-primary) inyectado desde PHP (color del tema Alchemists)
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    --lpf-primary : #38a9ff;
    --lpf-semi    : #00C9E4;
    --lpf-playoff : #00C853;
}

/* ════════════════════════════════════════════════════════════════════════
   1. TABLA DE POSICIONES — [league_table] / [team_standings]
      Clases SP:        .sp-template-league-table  .sp-league-table
      Clases Alchemists: .table-standings  .widget_league_table
   ════════════════════════════════════════════════════════════════════════ */

/* ── Título de la tabla: sin fondo, centrado ── */
.sp-template-league-table .sp-table-caption,
.sp-template-standings .sp-table-caption {
    display        : block !important;
    background     : transparent !important;
    text-align     : center !important;
    font-size      : 13px !important;
    font-weight    : 700 !important;
    letter-spacing : 0.3px !important;
    text-transform : uppercase !important;
    padding        : 12px 18px !important;
    margin         : 0 !important;
    border-radius  : 0 !important;
}

/* ── Header de columnas ── */
.sp-template-league-table thead tr,
.sp-template-standings thead tr,
.table-standings thead tr {
    background: #0B1D3D !important;
}
.sp-template-league-table thead th,
.sp-template-standings thead th,
.table-standings thead th {
    color          : rgba(255,255,255,0.55) !important;
    font-size      : 10px !important;
    font-weight    : 700 !important;
    letter-spacing : 0.4px !important;
    padding        : 10px 8px !important;
    border         : none !important;
    background     : transparent !important;
    text-transform : uppercase !important;
}

/* ── FILAS BASE ── */
/* ── Filas base: transparente — respeta el fondo del contenedor del tema ── */
.sp-template-league-table tbody tr,
.sp-template-standings tbody tr,
.table-standings tbody tr {
    background   : transparent;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    border-left  : 4px solid transparent;
    transition   : background 0.15s;
}

/* ── RANK 1 = #304fff | RANK 2-3 = #39b23d ──────────────────────────── */
/* Solo cuando la tabla tiene exactamente 6 equipos                        */
/* (la clase .lpf-table-6teams la añade JavaScript en wp_footer)           */

.sp-template-league-table.lpf-table-6teams tbody tr:nth-child(1),
.sp-template-standings.lpf-table-6teams tbody tr:nth-child(1),
.table-standings.lpf-table-6teams tbody tr:nth-child(1) {
    background        : #304fff !important;
    border-left-color : #304fff !important;
}

.sp-template-league-table.lpf-table-6teams tbody tr:nth-child(2),
.sp-template-league-table.lpf-table-6teams tbody tr:nth-child(3),
.sp-template-standings.lpf-table-6teams tbody tr:nth-child(2),
.sp-template-standings.lpf-table-6teams tbody tr:nth-child(3),
.table-standings.lpf-table-6teams tbody tr:nth-child(2),
.table-standings.lpf-table-6teams tbody tr:nth-child(3) {
    background        : #39b23d !important;
    border-left-color : #39b23d !important;
}

/* ── Texto blanco en filas 1, 2, 3 (legible sobre fondos de color) ── */
.sp-template-league-table.lpf-table-6teams tbody tr:nth-child(1) td,
.sp-template-league-table.lpf-table-6teams tbody tr:nth-child(1) td a,
.sp-template-league-table.lpf-table-6teams tbody tr:nth-child(2) td,
.sp-template-league-table.lpf-table-6teams tbody tr:nth-child(2) td a,
.sp-template-league-table.lpf-table-6teams tbody tr:nth-child(3) td,
.sp-template-league-table.lpf-table-6teams tbody tr:nth-child(3) td a,
.sp-template-standings.lpf-table-6teams tbody tr:nth-child(1) td,
.sp-template-standings.lpf-table-6teams tbody tr:nth-child(1) td a,
.sp-template-standings.lpf-table-6teams tbody tr:nth-child(2) td,
.sp-template-standings.lpf-table-6teams tbody tr:nth-child(2) td a,
.sp-template-standings.lpf-table-6teams tbody tr:nth-child(3) td,
.sp-template-standings.lpf-table-6teams tbody tr:nth-child(3) td a,
.table-standings.lpf-table-6teams tbody tr:nth-child(1) td,
.table-standings.lpf-table-6teams tbody tr:nth-child(1) td a,
.table-standings.lpf-table-6teams tbody tr:nth-child(2) td,
.table-standings.lpf-table-6teams tbody tr:nth-child(2) td a,
.table-standings.lpf-table-6teams tbody tr:nth-child(3) td,
.table-standings.lpf-table-6teams tbody tr:nth-child(3) td a {
    color      : #ffffff !important;
    font-weight: 700 !important;
}

/* ── TABLA DE 12 EQUIPOS (.lpf-table-12teams) ── */
/* Solo rank 1 y 2 en azul #304fff                */
.sp-template-league-table.lpf-table-12teams tbody tr:nth-child(1),
.sp-template-league-table.lpf-table-12teams tbody tr:nth-child(2),
.sp-template-standings.lpf-table-12teams tbody tr:nth-child(1),
.sp-template-standings.lpf-table-12teams tbody tr:nth-child(2),
.table-standings.lpf-table-12teams tbody tr:nth-child(1),
.table-standings.lpf-table-12teams tbody tr:nth-child(2) {
    background        : #304fff !important;
    border-left-color : #304fff !important;
}
.sp-template-league-table.lpf-table-12teams tbody tr:nth-child(1) td,
.sp-template-league-table.lpf-table-12teams tbody tr:nth-child(1) td a,
.sp-template-league-table.lpf-table-12teams tbody tr:nth-child(2) td,
.sp-template-league-table.lpf-table-12teams tbody tr:nth-child(2) td a,
.sp-template-standings.lpf-table-12teams tbody tr:nth-child(1) td,
.sp-template-standings.lpf-table-12teams tbody tr:nth-child(1) td a,
.sp-template-standings.lpf-table-12teams tbody tr:nth-child(2) td,
.sp-template-standings.lpf-table-12teams tbody tr:nth-child(2) td a,
.table-standings.lpf-table-12teams tbody tr:nth-child(1) td,
.table-standings.lpf-table-12teams tbody tr:nth-child(1) td a,
.table-standings.lpf-table-12teams tbody tr:nth-child(2) td,
.table-standings.lpf-table-12teams tbody tr:nth-child(2) td a {
    color      : #ffffff !important;
    font-weight: 700 !important;
}

/* ── Hover solo en filas no coloreadas ── */
.sp-template-league-table tbody tr:nth-child(n+4):hover,
.sp-template-standings tbody tr:nth-child(n+4):hover,
.table-standings tbody tr:nth-child(n+4):hover {
    background: rgba(255,255,255,0.05) !important;
}

/* ── Nombre del equipo — heredar color de la fila (blanco si coloreada) ── */
.sp-template-league-table tbody tr:nth-child(1) td.data-name,
.sp-template-standings tbody tr:nth-child(1) td.data-name,
.table-standings tbody tr:nth-child(1) td.data-name,
.table-standings tbody tr:nth-child(1) td.data-name a {
    font-weight: 700 !important;
}
.sp-template-league-table tbody tr:nth-child(2) td.data-name,
.sp-template-league-table tbody tr:nth-child(3) td.data-name,
.sp-template-standings tbody tr:nth-child(2) td.data-name,
.sp-template-standings tbody tr:nth-child(3) td.data-name,
.table-standings tbody tr:nth-child(2) td.data-name,
.table-standings tbody tr:nth-child(3) td.data-name,
.table-standings tbody tr:nth-child(2) td.data-name a,
.table-standings tbody tr:nth-child(3) td.data-name a {
    font-weight: 700 !important;
}

/* ── Logo top 3 — sin outline (el escudo no necesita borde adicional) ── */
.sp-template-league-table.lpf-table-6teams tbody tr:nth-child(1) td.data-name img,
.table-standings.lpf-table-6teams tbody tr:nth-child(1) img.team-logo {
    outline: none !important;
    border-radius: 50%;
}
.sp-template-league-table.lpf-table-6teams tbody tr:nth-child(2) td.data-name img,
.sp-template-league-table.lpf-table-6teams tbody tr:nth-child(3) td.data-name img,
.table-standings.lpf-table-6teams tbody tr:nth-child(2) img.team-logo,
.table-standings.lpf-table-6teams tbody tr:nth-child(3) img.team-logo {
    outline: none !important;
    border-radius: 50%;
}

/* ── "POS" header: ocultar texto (SportsPress no tiene opción UI para esto) ── */
.sp-league-table thead th.data-rank,
.sp-league-table thead th:first-child {
    font-size  : 0 !important;
    color      : transparent !important;
    user-select: none;
    min-width  : 28px;
}

/* ── Celdas de datos ── */
.sp-template-league-table tbody td,
.sp-template-standings tbody td,
.table-standings tbody td {
    border        : none !important;
    border-bottom : 1px solid rgba(255,255,255,0.08) !important;
    text-align    : center !important;
    padding       : 10px 8px !important;
    /* NO color override — respetar el color configurado en la plantilla */
    font-size     : 13px !important;
    vertical-align: middle !important;
}
.sp-template-league-table tbody td.data-name,
.sp-template-standings tbody td.data-name,
.table-standings tbody td.data-name {
    text-align  : left !important;
    padding-left: 14px !important;
    /* NO color override — heredar del tema */
    font-weight : 600 !important;
}
.sp-template-league-table tbody td.data-name a,
.sp-template-standings tbody td.data-name a,
.table-standings tbody td.data-name a {
    color: inherit !important;
    text-decoration: none !important;
}
/* Puntos — bold sin cambiar color */
.sp-template-league-table tbody td.data-pts,
.sp-template-league-table tbody td.data-sp_pts,
.sp-template-standings tbody td.data-pts,
.table-standings td.data-pts,
.table-standings td.team-standings__total-points {
    /* NO color override */
    font-weight: 800 !important;
    font-size  : 14px !important;
}
/* Logo inline en tabla SP */
.sp-template-league-table tbody td.data-name img,
.sp-template-standings tbody td.data-name img {
    width: 22px !important; height: 22px !important;
    border-radius: 50% !important; object-fit: contain !important;
    margin-right: 8px !important; vertical-align: middle !important;
}

/* DataTables: ocultar controles innecesarios */
.sp-template-league-table .dataTables_filter,
.sp-template-league-table .dataTables_length,
.sp-template-league-table .dataTables_info { display: none !important; }

/* ── Leyenda de clasificación (dentro del wrapper de la tabla) ── */
.lpf-sp-legend {
    display         : flex;
    justify-content : center;
    gap             : 20px;
    padding         : 8px 16px;
    background      : #ffffff;
    border-top      : 1px solid #e5e7eb;
    margin-top      : 0 !important;
    margin-bottom   : 20px !important;
    flex-wrap       : wrap;
    font-family     : inherit;
}
.lpf-sp-legend-item {
    display    : flex;
    align-items: center;
    gap        : 6px;
    font-size  : 11px;
    color      : #333333;
}

/* Eliminar margin inferior del wrapper de la tabla para acercar la leyenda */
.sp-template-league-table .sp-scrollable-table-wrapper,
.sp-template-standings .sp-scrollable-table-wrapper {
    margin-bottom: 0 !important;
}
.lpf-sp-legend-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.lpf-sp-legend-dot--semi    { background: #304fff; } /* rank 1 = azul */
.lpf-sp-legend-dot--playoff { background: #39b23d; } /* rank 2-3 = verde */

/* ════════════════════════════════════════════════════════════════════════
   2. CALENDARIO DE PARTIDOS — [event_blocks]
   ════════════════════════════════════════════════════════════════════════ */

.sp-template-event-blocks .sp-event-block,
.sp-template-event-blocks .sp-block {
    background    : #0B1D3D !important;
    border        : 1px solid rgba(255,255,255,0.07) !important;
    border-radius : 12px !important;
    transition    : box-shadow .2s;
}
.sp-template-event-blocks .sp-event-block:hover { box-shadow: 0 4px 20px rgba(0,0,0,.4); }

/* Título competición — truncar texto largo */
.sp-template-event-blocks .sp-event-block-head {
    color          : rgba(255,255,255,0.4) !important;
    font-size      : 9px !important;
    font-weight    : 600 !important;
    text-transform : uppercase !important;
    border-bottom  : 1px solid rgba(255,255,255,0.06) !important;
    background     : transparent !important;
    padding        : 7px 14px !important;
    white-space    : nowrap;
    overflow       : hidden;
    text-overflow  : ellipsis;
}

/* Score / hora */
.sp-template-event-blocks .sp-event-main,
.sp-template-event-blocks .sp-event-block-main {
    color: var(--lpf-primary) !important; font-size: 22px !important; font-weight: 800 !important;
}
.sp-template-event-blocks .sp-event-block-time,
.sp-template-event-blocks .sp-event-time {
    background: var(--lpf-primary) !important; color: #001820 !important;
    border-radius: 14px !important; padding: 5px 14px !important;
    font-weight: 800 !important; font-size: 12px !important; display: inline-block !important;
}
.sp-template-event-blocks .sp-event-block-teams .team-name,
.sp-template-event-blocks .sp-event-block-teams h5 {
    color: #fff !important; font-size: 11px !important; font-weight: 700 !important;
}
.sp-template-event-blocks .sp-event-block-venue,
.sp-template-event-blocks .sp-event-venue { color: rgba(255,255,255,0.35) !important; font-size: 10px !important; }
.sp-template-event-blocks a.btn,
.sp-template-event-blocks .sp-event-block-link,
.sp-template-event-blocks .sp-view-all-link {
    background: var(--lpf-primary) !important; color: #fff !important;
    border-radius: 6px !important; border: none !important;
    font-size: 10px !important; font-weight: 700 !important;
    text-transform: uppercase !important; padding: 6px 14px !important;
    text-decoration: none !important; display: inline-block !important;
}

/* ════════════════════════════════════════════════════════════════════════
   3. PRÓXIMO PARTIDO / WIDGET COUNTDOWN NATIVO
      Clases Alchemists: .widget-game-result, .alc-countdown
      Clase SportsPress: .sp-template-countdown
      JS en lpf-overrides.php añade .lpf-proximo-badge y cambia texto del botón
   ════════════════════════════════════════════════════════════════════════ */

/* ── Etiqueta "PRÓXIMO PARTIDO" inyectada por JS ── */
.lpf-proximo-badge {
    text-align    : center;
    font-size     : 10px;
    font-weight   : 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color         : var(--lpf-primary, #38a9ff);
    padding       : 14px 16px 4px;
}

/* ── Título de competición: reducir para dar paso a la badge ── */
.widget-game-result__header,
.widget-game-result__title,
.sp-template-countdown .sp-event-title {
    color         : rgba(255,255,255,0.45) !important;
    font-size     : 9px !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
    text-align    : center !important;
    white-space   : nowrap;
    overflow      : hidden;
    text-overflow : ellipsis;
    padding       : 0 16px !important;
}
.widget-game-result__date {
    color    : rgba(255,255,255,0.4) !important;
    font-size: 9px !important;
    text-align: center !important;
}

/* ── Nombres de equipos ── */
.widget-game-result__team-name,
.sp-template-countdown .sp-team-name {
    color      : #ffffff !important;
    font-size  : 13px !important;
    font-weight: 700 !important;
}

/* ── Venue y matchday ── */
.widget-game-result__venue,
.widget-game-result__matchday,
.sp-template-countdown .sp-event-venue {
    color    : rgba(255,255,255,0.45) !important;
    font-size: 10px !important;
}

/* ── Score (si el partido ya tiene resultado) ── */
.widget-game-result__score { color: var(--lpf-primary) !important; }

/* ── Countdown — cajas separadas estilo app ── */
.alc-countdown {
    display        : flex !important;
    justify-content: center !important;
    gap            : 8px !important;
    padding        : 14px 12px !important;
}
.alc-countdown__item {
    display        : flex !important;
    flex-direction : column !important;
    align-items    : center !important;
    background     : rgba(255,255,255,0.08) !important;
    border-radius  : 8px !important;
    padding        : 10px 14px !important;
    min-width      : 54px !important;
}
.alc-countdown__value {
    display    : block !important;
    font-size  : 26px !important;
    font-weight: 800 !important;
    color      : #ffffff !important;
    line-height: 1 !important;
    font-family: inherit !important;
}
.alc-countdown__label {
    display       : block !important;
    font-size     : 8px !important;
    font-weight   : 600 !important;
    color         : rgba(255,255,255,0.45) !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    margin-top    : 4px !important;
}
.alc-countdown__separator {
    color      : rgba(255,255,255,0.2) !important;
    font-size  : 18px !important;
    align-self : center !important;
    line-height: 1 !important;
}

/* ── Botón (JS cambia texto a DETALLES) ── */
.widget-game-result .btn,
.widget_sp_countdown .btn,
.widget_countdown .btn,
.sp-template-countdown .btn {
    background    : var(--lpf-primary) !important;
    color         : #fff !important;
    border        : none !important;
    border-radius : 6px !important;
    font-size     : 11px !important;
    font-weight   : 700 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    display       : block !important;
    width         : calc(100% - 32px) !important;
    margin        : 4px 16px 16px !important;
    text-align    : center !important;
    padding       : 10px 16px !important;
}

/* ════════════════════════════════════════════════════════════════════════
   4. SCOREBOARD HORIZONTAL (alc-scoreboard)
   ════════════════════════════════════════════════════════════════════════ */

.alc-scoreboard-content {
    background   : #0B1D3D !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
.alc-scoreboard__event { border-right: 1px solid rgba(255,255,255,0.08) !important; }
.alc-scoreboard__event-wrapper {
    color: rgba(255,255,255,0.55) !important;
}
.alc-scoreboard__event-wrapper:hover { background: rgba(255,255,255,0.05) !important; }
.alc-scoreboard__team-name { color: #ffffff !important; }
.alc-scoreboard__result    { color: var(--lpf-primary) !important; }
.alc-scoreboard__meta      { color: rgba(255,255,255,0.45) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   Widget Próximo Partido — estructura .lpf-pcd (generada por JS)
   Reemplaza el contenido del widget nativo .sp-template-countdown
   ═══════════════════════════════════════════════════════════════════════ */

.lpf-pcd {
    text-align : center;
    padding    : 16px 16px 4px;
    color      : #fff;
    font-family: inherit;
    width      : 100%;
    box-sizing : border-box;
    margin     : 0 auto;
}

/* ── Encabezado ── */
.lpf-pcd__header { margin-bottom: 12px; }

.lpf-pcd__label {
    display       : block;
    font-size     : 10px;
    font-weight   : 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color         : var(--lpf-primary, #38a9ff);
    margin-bottom : 4px;
}

.lpf-pcd__jornada {
    display      : block;
    font-size    : 22px;
    font-weight  : 900;
    color        : var(--lpf-primary, #38a9ff);
    letter-spacing: 0.5px;
    line-height  : 1;
}

/* ── Equipos ── */
.lpf-pcd__match {
    display        : flex;
    align-items    : center;
    justify-content: center;
    gap            : 12px;
    margin-bottom  : 16px;
}

.lpf-pcd__team {
    display       : flex;
    flex-direction: column;
    align-items   : center;
    gap           : 7px;
    width         : 80px;
}

.lpf-pcd__logo {
    width        : 60px;
    height       : 60px;
    border-radius: 50%;
    object-fit   : contain;
}
.lpf-pcd__logo--ph {
    background      : rgba(255,255,255,0.1);
    display         : flex;
    align-items     : center;
    justify-content : center;
    font-size       : 16px;
    font-weight     : 700;
}

.lpf-pcd__name {
    font-size  : 11px;
    font-weight: 700;
    color      : #ffffff;
    line-height: 1.2;
}

.lpf-pcd__vs {
    font-size  : 16px;
    font-weight: 700;
    color      : rgba(255,255,255,0.4);
}

/* ── Countdown en cajas ── */
.lpf-pcd__countdown {
    display        : flex;
    justify-content: center;
    gap            : 8px;
    margin-bottom  : 12px;
}

.lpf-pcd__cd-item {
    background   : rgba(255,255,255,0.08);
    border-radius: 8px;
    padding      : 10px 12px;
    min-width    : 54px;
}

.lpf-pcd__cd-val {
    display    : block;
    font-size  : 26px;
    font-weight: 800;
    color      : #fff;
    line-height: 1;
}

.lpf-pcd__cd-lbl {
    display       : block;
    font-size     : 8px;
    font-weight   : 600;
    color         : rgba(255,255,255,0.45);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-top    : 3px;
}

/* ── Meta (fecha + venue) ── */
.lpf-pcd__meta {
    margin-bottom: 14px;
}
.lpf-pcd__date {
    display    : block;
    font-size  : 11px;
    color      : rgba(255,255,255,0.6);
    font-weight: 500;
    margin-bottom: 2px;
}
.lpf-pcd__venue {
    display  : block;
    font-size: 10px;
    color    : rgba(255,255,255,0.38);
}

/* ── Botón DETALLES ── */
.lpf-pcd__btn {
    display        : block;
    background     : var(--lpf-primary, #38a9ff);
    color          : #fff !important;
    text-decoration: none !important;
    font-size      : 12px;
    font-weight    : 700;
    letter-spacing : 1px;
    text-transform : uppercase;
    padding        : 10px 20px;
    border-radius  : 8px;
    margin-bottom  : 12px;
    transition     : opacity 0.15s;
}
.lpf-pcd__btn:hover { opacity: 0.85; }

/* ── Responsive ── */
@media (max-width: 360px) {
    .lpf-pcd__logo { width: 48px; height: 48px; }
    .lpf-pcd__jornada { font-size: 18px; }
    .lpf-pcd__cd-val { font-size: 20px; }
    .lpf-pcd__cd-item { padding: 8px 9px; min-width: 44px; }
}