/**
 * Portal14 Partidos — estilos frontend (carrusel + listado).
 * Diseño limpio inspirado en calendarios de clubes profesionales.
 */

.ifs-p14 {
    --ifs-verde: #2FA04E;
    --ifs-verde-osc: #22833B;
    --ifs-navy: #0e1b2c;
    --ifs-navy-2: #16273d;
    --ifs-borde: #e5e8ec;
    --ifs-txt: #12202f;
    --ifs-txt-suave: #6b7787;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--ifs-txt);
    max-width: 100%;
}
.ifs-p14 *,
.ifs-p14 *::before,
.ifs-p14 *::after { box-sizing: border-box; }

.ifs-p14-vacio {
    padding: 24px;
    text-align: center;
    color: var(--ifs-txt-suave);
    background: #f6f7f9;
    border-radius: 12px;
}
.ifs-p14-aviso {
    padding: 14px 18px;
    background: #fff8e1;
    border: 1px solid #f0d98a;
    border-radius: 8px;
    color: #7a5b00;
    font-size: 14px;
}

/* ======================================================================
 * CARRUSEL
 * ==================================================================== */
.ifs-carrusel {
    position: relative;
    padding: 0 44px;
}
.ifs-car-viewport {
    /* Scroll horizontal nativo: permite arrastrar con el dedo en móvil / trackpad,
       y las flechas siguen funcionando moviendo scrollLeft. */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: none;      /* Firefox */
    -ms-overflow-style: none;   /* IE/Edge */
}
.ifs-car-viewport::-webkit-scrollbar {
    display: none;              /* Chrome/Safari */
}
.ifs-car-track {
    display: flex;
    gap: 16px;
}

.ifs-car-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: var(--ifs-verde);
    color: #fff;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    z-index: 3;
    box-shadow: 0 4px 12px rgba(0,0,0,.18);
    transition: background .2s, opacity .2s;
}
.ifs-car-nav:hover { background: var(--ifs-verde-osc); }
.ifs-car-nav:disabled { opacity: .35; cursor: default; }
.ifs-car-prev { left: 0; }
.ifs-car-next { right: 0; }

/* Tarjeta */
.ifs-card {
    /* Muestran 3 tarjetas completas y un trozo de la 4ª (peek) para indicar que hay más a la derecha. */
    flex: 0 0 calc((100% - 32px - 56px) / 3);
    min-width: 240px;
    background: var(--ifs-navy);
    background: linear-gradient(160deg, var(--ifs-navy-2), var(--ifs-navy));
    color: #fff;
    border-radius: 14px;
    padding: 18px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 6px 18px rgba(14,27,44,.12);
}

/* --- Tarjeta BLANCA (resultados pasados y partidos futuros lejanos, sin contador) --- */
.ifs-card--blanco {
    background: #f4f6f8;
    color: var(--ifs-txt);
    border: 1px solid var(--ifs-borde);
    box-shadow: 0 4px 14px rgba(14,27,44,.07);
}
.ifs-card--blanco .ifs-card-comp { color: var(--ifs-verde-osc); }
.ifs-card--blanco .ifs-card-jor {
    color: var(--ifs-txt-suave);
    background: rgba(14,27,44,.06);
}
.ifs-card--blanco .ifs-eq-nombre { color: var(--ifs-txt); }
.ifs-card--blanco .ifs-vs { color: var(--ifs-txt-suave); }
.ifs-card--blanco .ifs-res { color: var(--ifs-txt); }
.ifs-card--blanco .ifs-res span { color: var(--ifs-txt-suave); }
.ifs-card--blanco .ifs-card-meta { color: var(--ifs-txt-suave); }
.ifs-card--blanco .ifs-card-nota { color: var(--ifs-txt-suave); }
.ifs-card--blanco .ifs-escudo { background: #fff; border: 1px solid var(--ifs-borde); }
/* Los resultados finales van sobre blanco puro para diferenciarlos del gris de los futuros. */
.ifs-card--blanco.ifs-card-final { background: #ffffff; }

/* --- Tarjeta VERDE (todos los partidos por venir: los 2 con cuenta atrás y el resto) --- */
/* Degradado navy -> verde (el que le encantó al cliente). */
.ifs-card--verde {
    background: #235a40;
    background: linear-gradient(155deg, #16273d 0%, #235a40 55%, var(--ifs-verde) 100%);
    color: #fff;
    box-shadow: 0 6px 18px rgba(14,27,44,.22);
}
.ifs-card--verde .ifs-card-comp { color: #6be08f; }
.ifs-card--verde .ifs-card-jor { color: rgba(255,255,255,.85); background: rgba(255,255,255,.14); }
/* Botón de entradas blanco con texto verde oscuro para máximo contraste. */
.ifs-card--verde .ifs-card-btn {
    background: #ffffff;
    color: var(--ifs-verde-osc) !important;
}
.ifs-card--verde .ifs-card-btn:hover {
    background: #eafff0;
    color: var(--ifs-verde-osc) !important;
}
.ifs-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.ifs-card-comp {
    font-weight: 700;
    color: var(--ifs-verde);
}
.ifs-card-jor {
    color: rgba(255,255,255,.7);
    background: rgba(255,255,255,.08);
    padding: 2px 8px;
    border-radius: 20px;
}

/* Cuenta atrás */
.ifs-card-count {
    display: flex;
    justify-content: center;
    gap: 6px;
}
.ifs-cd-bloque {
    background: rgba(255,255,255,.08);
    border-radius: 8px;
    padding: 6px 0;
    flex: 1;
    text-align: center;
}
.ifs-cd-num {
    display: block;
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
}
.ifs-cd-lab {
    display: block;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: rgba(255,255,255,.6);
    margin-top: 3px;
}

/* Equipos */
.ifs-card-equipos {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.ifs-eq {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    min-width: 0;
}
.ifs-eq-nombre {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
}
.ifs-escudo {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.ifs-escudo img {
    max-width: 82%;
    max-height: 82%;
    object-fit: contain;
}
.ifs-escudo-txt {
    font-weight: 800;
    font-size: 15px;
    color: var(--ifs-navy);
}
.ifs-card-marcador {
    flex: 0 0 auto;
    padding: 0 4px;
}
.ifs-vs {
    font-size: 13px;
    font-weight: 700;
    color: rgba(255,255,255,.55);
}
.ifs-res {
    font-size: 24px;
    font-weight: 800;
    white-space: nowrap;
}
.ifs-res span { color: rgba(255,255,255,.5); }

.ifs-card-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: center;
    font-size: 12px;
    color: rgba(255,255,255,.75);
}
.ifs-card-fecha { font-weight: 600; }
.ifs-card-nota {
    margin: 0;
    font-size: 12px;
    color: rgba(255,255,255,.65);
    text-align: center;
}
.ifs-card-btn {
    display: block;
    text-align: center;
    text-decoration: none;
    padding: 10px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 13px;
    background: var(--ifs-verde);
    color: #fff !important;
    transition: background .2s;
}
.ifs-card-btn:hover { background: var(--ifs-verde-osc); }

/* ======================================================================
 * LISTADO
 * ==================================================================== */
.ifs-listado {
    border: 1px solid var(--ifs-borde);
    border-radius: 14px;
    padding: 8px 10px;
}
.ifs-lista-sep {
    padding: 16px 8px 8px;
}
.ifs-lista-sep span {
    display: inline-block;
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--ifs-verde-osc);
    background: rgba(47,160,78,.1);
    padding: 6px 16px;
    border-radius: 20px;
}
.ifs-lista-row {
    display: grid;
    grid-template-columns: 130px 1fr auto 1fr;
    align-items: center;
    gap: 14px;
    padding: 18px 12px;
    border-bottom: 1px solid var(--ifs-borde);
}
.ifs-lista-row:last-child { border-bottom: none; }
.ifs-lr-fecha {
    display: flex;
    flex-direction: column;
    font-size: 14px;
    color: var(--ifs-txt-suave);
}
.ifs-lr-dia { font-weight: 700; color: var(--ifs-txt); font-size: 15px; }
.ifs-lr-jor { font-size: 13px; margin-top: 2px; }
.ifs-lr-local,
.ifs-lr-visit {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.ifs-lr-local { justify-content: flex-end; text-align: right; }
.ifs-lr-visit { justify-content: flex-start; }
.ifs-lr-nombre {
    font-size: 18px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ifs-listado .ifs-escudo {
    width: 46px;
    height: 46px;
    background: #f2f4f6;
}
.ifs-listado .ifs-escudo-txt {
    font-size: 14px;
    color: var(--ifs-navy);
}
.ifs-lr-marcador {
    min-width: 78px;
    text-align: center;
}
.ifs-lr-marcador .ifs-res {
    color: var(--ifs-txt);
    font-size: 24px;
}
.ifs-lr-hora {
    font-size: 16px;
    font-weight: 700;
    color: var(--ifs-verde-osc);
    background: #f2f4f6;
    padding: 6px 12px;
    border-radius: 6px;
}

/* ======================================================================
 * RESPONSIVE
 * ==================================================================== */
@media (max-width: 900px) {
    /* 2 tarjetas + trozo de la 3ª (peek). */
    .ifs-card { flex-basis: calc((100% - 16px - 44px) / 2); }
}
@media (max-width: 600px) {
    .ifs-carrusel { padding: 0 36px; }
    /* 1 tarjeta + trozo de la siguiente (peek). */
    .ifs-card { flex-basis: calc(100% - 42px); min-width: 0; }
    /* Móvil: cada partido como tarjeta vertical, sin cortar nombres.
       Fecha arriba · equipo local · marcador · equipo visitante. */
    .ifs-listado { padding: 6px 8px; }
    .ifs-lista-sep { padding: 14px 4px 6px; }
    .ifs-lista-sep span { font-size: 14px; padding: 6px 14px; }
    .ifs-lista-row {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 16px 14px;
        text-align: left;
    }
    .ifs-lr-fecha {
        order: 1;
        flex-direction: row;
        align-items: baseline;
        gap: 8px;
        font-size: 14px;
    }
    .ifs-lr-dia { font-size: 15px; }
    .ifs-lr-local,
    .ifs-lr-visit {
        order: 2;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 12px;
        text-align: left;
        min-width: 0;
    }
    /* El equipo local tiene el nombre antes del escudo en el HTML; con
       row-reverse mostramos el escudo a la izquierda igual que el visitante. */
    .ifs-lr-local { flex-direction: row-reverse; justify-content: flex-end; }
    .ifs-lr-visit { order: 4; }
    .ifs-lr-marcador {
        order: 3;
        align-self: center;
        min-width: 0;
    }
    .ifs-lr-nombre {
        font-size: 16px;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        line-height: 1.25;
    }
    .ifs-lr-marcador .ifs-res { font-size: 26px; }
    .ifs-lr-hora { font-size: 16px; }
}