/* ══════════════════════════════════════════════════════════════════════════
   LPF Calendario — Shortcode [lpf_calendario]
   Grid: 2 columnas desktop / 1 columna mobile
   Colores controlados con CSS custom properties inyectadas desde PHP.
   ══════════════════════════════════════════════════════════════════════════ */

.lpf-cal {
    background : var(--lpf-bg, #0A1628);
    border-radius: 14px;
    padding    : 20px 18px;
    width      : 100%;
    max-width  : 100%;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
    box-sizing : border-box;
}
.lpf-cal *, .lpf-cal *::before, .lpf-cal *::after { box-sizing: inherit; }

/* ── Sección de cada jornada ─────────────────────────────────────────── */

.lpf-cal-jornada {
    margin-bottom : 28px;
    padding-bottom: 20px;
    border-bottom : 1px solid rgba(255,255,255,0.06);
}
.lpf-cal-jornada:last-child {
    margin-bottom : 0;
    padding-bottom: 0;
    border-bottom : none;
}

/* ── Encabezado de jornada ───────────────────────────────────────────── */

.lpf-cal-header {
    display       : flex;
    align-items   : center;
    gap           : 12px;
    margin-bottom : 14px;
}

.lpf-cal-title {
    color        : var(--lpf-text, #ffffff);
    font-size    : 16px;
    font-weight  : 800;
    letter-spacing: 0.3px;
    line-height  : 1;
}

.lpf-cal-badge {
    background    : var(--lpf-badge-bg, #00C853);
    color         : var(--lpf-badge-txt, #003300);
    font-size     : 10px;
    font-weight   : 700;
    letter-spacing: 0.6px;
    padding       : 3px 9px;
    border-radius : 4px;
    text-transform: uppercase;
    line-height   : 1;
    flex-shrink   : 0;
}

/* ── Grid de partidos ────────────────────────────────────────────────── */
/* Mobile: 1 columna. Desktop (≥640px): 2 columnas.                      */

.lpf-cal-matches-grid {
    display              : grid;
    grid-template-columns: 1fr;        /* Mobile: columna única */
    gap                  : 8px;
}

/* ── Tarjeta de partido ──────────────────────────────────────────────── */

.lpf-cal-match {
    background   : var(--lpf-surface, #0D1E38);
    border-radius: 10px;
    padding      : 12px 10px;
    display      : flex;
    align-items  : center;
    gap          : 8px;
}

/* ── Equipo (logo + abreviatura) ─────────────────────────────────────── */

.lpf-cal-team {
    display       : flex;
    flex-direction: column;
    align-items   : center;
    gap           : 5px;
    width         : 54px;
    flex-shrink   : 0;
}

.lpf-cal-logo {
    width        : 42px;
    height       : 42px;
    object-fit   : contain;
    border-radius: 50%;
    display      : block;
}

.lpf-cal-logo-ph {
    width           : 42px;
    height          : 42px;
    background      : rgba(255,255,255,0.1);
    border-radius   : 50%;
    display         : flex;
    align-items     : center;
    justify-content : center;
    color           : var(--lpf-text, #fff);
    font-size       : 13px;
    font-weight     : 700;
}

.lpf-cal-abbr {
    color        : var(--lpf-text, #fff);
    font-size    : 11px;
    font-weight  : 700;
    letter-spacing: 0.3px;
    text-align   : center;
}

/* ── Centro de la tarjeta ────────────────────────────────────────────── */

.lpf-cal-center {
    flex          : 1;
    display       : flex;
    flex-direction: column;
    align-items   : center;
    gap           : 5px;
    min-width     : 0;
}

/* Fecha del partido (reemplaza los separadores de día) */
.lpf-cal-match-date {
    color         : var(--lpf-day, #00C9E4);
    font-size     : 9px;
    font-weight   : 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

/* Píldora de hora — partido pendiente */
.lpf-cal-time-pill {
    background    : var(--lpf-accent, #00C9E4);
    color         : var(--lpf-accent-txt, #001820);
    font-size     : 13px;
    font-weight   : 800;
    padding       : 5px 14px;
    border-radius : 20px;
    letter-spacing: 0.3px;
    white-space   : nowrap;
}

/* Marcador — partido jugado */
.lpf-cal-score {
    display    : flex;
    align-items: center;
    gap        : 10px;
    color      : var(--lpf-text, #fff);
    font-size  : 24px;
    font-weight: 800;
    line-height: 1;
}
.lpf-cal-score-sep {
    color      : var(--lpf-muted, #7B92B0);
    font-weight: 300;
    font-size  : 20px;
}
.lpf-cal-score-label {
    color         : var(--lpf-muted, #7B92B0);
    font-size     : 9px;
    font-weight   : 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-align    : center;
}

/* Estadio */
.lpf-cal-venue {
    color         : var(--lpf-muted, #7B92B0);
    font-size     : 9px;
    font-weight   : 500;
    text-align    : center;
    letter-spacing: 0.2px;
    max-width     : 140px;
    line-height   : 1.3;
}

/* Botón CTA */
.lpf-cal-cta {
    display        : inline-block;
    background     : var(--lpf-cta-bg, #0055CC);
    color          : var(--lpf-cta-txt, #ffffff) !important;
    text-decoration: none !important;
    font-size      : 10px;
    font-weight    : 700;
    letter-spacing : 0.4px;
    text-transform : uppercase;
    padding        : 5px 14px;
    border-radius  : 5px;
    transition     : opacity 0.18s, transform 0.12s;
    white-space    : nowrap;
}
.lpf-cal-cta:hover  { opacity: 0.85; transform: translateY(-1px); }
.lpf-cal-cta:active { transform: translateY(0); opacity: 0.75; }

/* Estado vacío */
.lpf-cal-empty {
    color     : rgba(255,255,255,0.4);
    text-align: center;
    padding   : 24px;
    font-size : 14px;
}

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════ */

/* ── Desktop: 2 columnas ──────────────────────────────────────────────── */
@media (min-width: 640px) {

    .lpf-cal-matches-grid {
        grid-template-columns: repeat(2, 1fr);  /* 2 columnas */
        gap: 10px;
    }

    .lpf-cal-title     { font-size: 17px; }
    .lpf-cal-logo,
    .lpf-cal-logo-ph   { width: 46px; height: 46px; }
    .lpf-cal-time-pill { font-size: 14px; }
    .lpf-cal-score     { font-size: 26px; }
    .lpf-cal-venue     { font-size: 10px; max-width: 160px; }
    .lpf-cal-abbr      { font-size: 12px; }
}

/* ── Pantallas muy pequeñas ───────────────────────────────────────────── */
@media (max-width: 360px) {
    .lpf-cal            { padding: 12px 10px; }
    .lpf-cal-team       { width: 44px; }
    .lpf-cal-logo,
    .lpf-cal-logo-ph    { width: 36px; height: 36px; }
    .lpf-cal-score      { font-size: 20px; }
    .lpf-cal-time-pill  { font-size: 12px; padding: 4px 10px; }
    .lpf-cal-cta        { font-size: 9px; padding: 4px 10px; }
}