/* ═══════════════════════════════════════════════════════════════
   LPF Tabla — Standings con indicadores de clasificación
   Respeta el color primario del tema vía --lpf-primary
   ═══════════════════════════════════════════════════════════════ */

.lpf-tabla-wrap {
    --lpf-primary  : #38a9ff;   /* sobreescrito inline desde PHP con el color del tema */
    --lpf-semi     : #00C9E4;   /* Semifinales */
    --lpf-playoff  : #00C853;   /* Play-offs */
    font-family    : -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    border-radius  : 12px;
    overflow       : hidden;
    max-width      : 600px;
    margin         : 0 auto;
}

/* ── Tabs ────────────────────────────────────────────────────── */

.lpf-tabla-tabs {
    display      : flex;
    background   : #0B1D3D;
    border-bottom: 2px solid rgba(255,255,255,0.08);
}
.lpf-tabla-tab {
    flex          : 1;
    padding       : 13px 8px;
    background    : transparent;
    border        : none;
    border-bottom : 3px solid transparent;
    margin-bottom : -2px;
    cursor        : pointer;
    font-size     : 12px;
    font-weight   : 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color         : rgba(255,255,255,0.4);
    transition    : color .2s, border-color .2s;
}
.lpf-tabla-tab:hover   { color: #fff; }
.lpf-tabla-tab.is-active { color: #fff; border-color: var(--lpf-primary); }

/* ── Panel ───────────────────────────────────────────────────── */

.lpf-tabla-panel { display: none; }
.lpf-tabla-panel.is-active { display: block; }

/* ── Tabla personalizada ─────────────────────────────────────── */

.lpf-tabla-sp-wrap { background: #fff; overflow: hidden; }

.lpf-tabla-table {
    width          : 100%;
    border-collapse: collapse;
    font-size      : 13px;
}

/* Header */
.lpf-tabla-table thead tr {
    background: #0B1D3D;
}
.lpf-tabla-table thead th {
    color         : rgba(255,255,255,0.55);
    font-size     : 10px;
    font-weight   : 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding       : 10px 8px;
    text-align    : center;
    border        : none;
}
.lpf-tabla-table thead th.lpf-col-name { text-align: left; padding-left: 14px; }
.lpf-tabla-table thead th.lpf-col-rank { width: 36px; }

/* Rows */
.lpf-tabla-table tbody tr {
    border-bottom : 1px solid #f0f2f5;
    border-left   : 4px solid transparent;
    transition    : background 0.15s;
}
.lpf-tabla-table tbody tr:hover { background: #f7f9fc; }

/* ── Indicadores de clasificación ────────────────────────────── */

.lpf-tabla-table tbody tr.lpf-rank-1 { border-left-color: var(--lpf-semi); }
.lpf-tabla-table tbody tr.lpf-rank-2,
.lpf-tabla-table tbody tr.lpf-rank-3 { border-left-color: var(--lpf-playoff); }

/* Highlight del nombre en top 3 */
.lpf-tabla-table tbody tr.lpf-rank-1 .lpf-team-name { color: var(--lpf-semi); font-weight: 700; }
.lpf-tabla-table tbody tr.lpf-rank-2 .lpf-team-name,
.lpf-tabla-table tbody tr.lpf-rank-3 .lpf-team-name { color: var(--lpf-playoff); font-weight: 700; }

/* Highlight del logo en top 3 */
.lpf-tabla-table tbody tr.lpf-rank-1 .lpf-team-logo {
    outline: 2px solid var(--lpf-semi);
    outline-offset: 1px;
}
.lpf-tabla-table tbody tr.lpf-rank-2 .lpf-team-logo,
.lpf-tabla-table tbody tr.lpf-rank-3 .lpf-team-logo {
    outline: 2px solid var(--lpf-playoff);
    outline-offset: 1px;
}

/* Celdas */
.lpf-tabla-table tbody td {
    padding    : 10px 8px;
    text-align : center;
    color      : #6b7280;
    font-size  : 13px;
    font-weight: 500;
    vertical-align: middle;
}
.lpf-tabla-table tbody td.lpf-col-name {
    text-align : left;
    padding-left: 14px;
    color       : #1d2b3a;
    font-weight : 600;
    white-space : nowrap;
}
.lpf-tabla-table tbody td.lpf-col-rank {
    color      : #9ca3af;
    font-size  : 12px;
    font-weight: 700;
}

/* Puntos — columna destacada */
.lpf-tabla-table tbody td:last-of-type { /* PTS column */
    color      : #1d2b3a;
    font-weight: 800;
    font-size  : 14px;
}

/* Logo del equipo */
.lpf-team-logo {
    width        : 22px;
    height       : 22px;
    border-radius: 50%;
    object-fit   : contain;
    margin-right : 8px;
    vertical-align: middle;
}

/* Columna nombre con logo */
.lpf-col-name {
    display: flex; 
    align-items: center;
}
td.lpf-col-name { display: table-cell; }

/* ── Flechas de tendencia ─────────────────────────────────────── */

.lpf-col-trend { width: 28px; }

.lpf-trend {
    font-size  : 13px;
    font-weight: 700;
    display    : inline-block;
}
.lpf-trend--up   { color: #16a34a; }
.lpf-trend--down { color: #dc2626; }
.lpf-trend--same { color: #d1d5db; font-size: 10px; }

/* ── Fallback: SP native table dentro del wrapper ──────────────── */

.lpf-tabla-max-6 .sp-league-table tbody tr:nth-child(n+7) { display: none; }
.lpf-tabla-sp-wrap .sp-league-table { width: 100%; border: none !important; margin: 0; }
.lpf-tabla-sp-wrap .sp-league-table thead tr th { background: #0B1D3D !important; color: rgba(255,255,255,0.55) !important; font-size: 10px !important; padding: 10px 8px !important; border: none !important; }
.lpf-tabla-sp-wrap .sp-league-table tbody tr { border-left: 4px solid transparent; }
.lpf-tabla-sp-wrap .sp-league-table tbody tr:nth-child(1) { border-left-color: var(--lpf-semi); }
.lpf-tabla-sp-wrap .sp-league-table tbody tr:nth-child(2),
.lpf-tabla-sp-wrap .sp-league-table tbody tr:nth-child(3) { border-left-color: var(--lpf-playoff); }
.lpf-tabla-sp-wrap .sp-league-table tbody tr td { padding: 10px 8px !important; border-bottom: 1px solid #f0f2f5 !important; border-top: none !important; vertical-align: middle; }
.lpf-tabla-sp-wrap .sp-league-table tbody tr td.data-name { text-align: left !important; font-weight: 600; color: #1d2b3a; padding-left: 14px !important; }
.lpf-tabla-sp-wrap .sp-table-caption { display: none !important; }

/* ── Leyenda ─────────────────────────────────────────────────── */

.lpf-tabla-legend {
    background : #f8f9fb;
    border-top : 1px solid #eee;
    padding    : 10px 16px;
    display    : flex;
    gap        : 18px;
    flex-wrap  : wrap;
}
.lpf-tabla-legend-item { display: flex; align-items: center; gap: 7px; font-size: 11px; color: #555; }
.lpf-tabla-legend-dot  { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.lpf-tabla-legend-dot--semi    { background: var(--lpf-semi); }
.lpf-tabla-legend-dot--playoff { background: var(--lpf-playoff); }

/* ── Responsive ──────────────────────────────────────────────── */

@media (max-width: 420px) {
    .lpf-tabla-table tbody td, .lpf-tabla-table thead th { padding: 8px 4px !important; font-size: 11px; }
    .lpf-team-logo { width: 18px; height: 18px; margin-right: 5px; }
}