/* ═══════════════════════════════════════════════════════════════════
   Componente de filas de partido (fixture-row) + toolbar + destacado.
   ÚNICA implementación visual, cargada por templates/index.html (portada)
   y templates/partidos.html (Próximos/Resultados) -- antes este CSS vivía
   solo en static/portada.css bajo selectores "body.portada ..." y, al
   cargarse portada.css en /partidos sin ese body.portada, casi ninguna
   regla de aquí llegaba a aplicarse: filas de una sola línea en móvil,
   columna estrecha en escritorio, colores sin pintar (quedaban los de
   abajo, .pt-tabs/estilos propios de partidos.html). Movido aquí
   23-oct-2026 (pedido de Andrés tras comparar producción a 390/900/1280px).

   El JS que rellena estas filas es static/fixtures.js (Fixtures.*), también
   compartido. Los tokens de color (--pn-*) se definen aquí bajo .fx-theme;
   index.html pone esa clase en <body> (junto con "portada", que sigue
   llevando el resto del look exclusivo de la portada en portada.css) y
   partidos.html la pone en un div que envuelve el toolbar y las listas.
   ═══════════════════════════════════════════════════════════════════ */

/* En móvil, .page-wrap (16px de margen lateral fijo) deja menos ancho que
   .main-content de la portada (que baja a .6rem bajo 768px) -- mismo texto
   cortado más en /partidos que en la portada a 390/400px. Igualado aquí al
   padding lateral real de la portada en ese ancho (pedido de Andrés
   23-oct-2026). */
@media (max-width: 768px) {
    .pf-fixtures-main { padding-left: .6rem; padding-right: .6rem; }
}

.fx-theme {
    --pn-bg: #08090b;
    --pn-surface: #121417;
    --pn-surface-2: #1a1d21;
    --pn-surface-3: #23272c;
    --pn-line: rgba(255,255,255,.08);
    --pn-line-2: rgba(255,255,255,.18);
    --pn-ink: #ffffff;
    --pn-ink-2: #c9ccd1;
    --pn-ink-3: #9ba0a7;
    --pn-accent: var(--brand-yellow);
    --pn-on-accent: #000000;
    --pn-accent-ink: var(--brand-yellow);
    --pn-focus: var(--brand-yellow);
    --pn-inverse: #ffffff;
    --pn-on-inverse: #000000;
    --pn-fav-row: rgba(255,218,0,.05);
    --pn-win: #3ddc84;  --pn-win-bg: rgba(61,220,132,.14);
    --pn-loss: #ff6b5e; --pn-loss-bg: rgba(255,107,94,.15);
    --pn-draw-bg: rgba(255,255,255,.09);
    --bg-primary: var(--pn-bg);
    --bg-card: var(--pn-surface);
    --bg-card-hover: var(--pn-surface-3);
    --border-card: var(--pn-line);
    --gray-100: var(--pn-ink);
    --gray-200: var(--pn-ink);
    --gray-300: var(--pn-ink-2);
    --gray-400: var(--pn-ink-3);
    --gray-500: var(--pn-ink-3);
    --gray-600: var(--pn-surface-2);
}
[data-theme="light"] .fx-theme {
    --pn-bg: #f3f3f1;
    --pn-surface: #ffffff;
    --pn-surface-2: #f6f6f4;
    --pn-surface-3: #ececea;
    --pn-line: rgba(0,0,0,.10);
    --pn-line-2: rgba(0,0,0,.22);
    --pn-ink: #0a0a0b;
    --pn-ink-2: #3b3e43;
    --pn-ink-3: #5f636a;
    --pn-accent-ink: #0a0a0b;
    --pn-focus: #0a0a0b;
    --pn-inverse: #0a0a0b;
    --pn-on-inverse: #ffffff;
    --pn-fav-row: rgba(255,218,0,.12);
    --pn-win: #12703a;  --pn-win-bg: #e2f3e8;
    --pn-loss: #b42318; --pn-loss-bg: #fde9e7;
    --pn-draw-bg: #ececea;
}

.fx-theme .fade-in { animation: none; opacity: 1; transform: none; }
.fx-theme .fx-hoy, .fx-theme .badge-en-juego, .fx-theme .fx-score.score-en-juego,
.fx-theme .badge-esperando, .fx-theme .fixture-row.en-juego, .fx-theme .update-badge .dot { animation: none; }
@media (prefers-reduced-motion: reduce) {
    .fx-theme *, .fx-theme *::before, .fx-theme *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
.fx-theme a:focus-visible, .fx-theme button:focus-visible, .fx-theme summary:focus-visible, .fx-theme input:focus-visible {
    outline: 2px solid var(--pn-focus); outline-offset: 2px; border-radius: 8px;
}

/* ═══ CONTROLES: alcance (Todo el club/Solo favoritos) + navegación semanal ═══ */
.pf-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; max-width: 900px; margin: 0 auto 1rem; }
@media (max-width: 1023px) {
    .pf-toolbar {
        position: sticky; top: var(--header-h, 72px); z-index: 40;
        background: var(--pn-bg); padding-top: 8px; padding-bottom: 8px;
        max-width: none; border-bottom: 1px solid var(--pn-line);
    }
}
.pf-scope { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--pn-surface); border: 1px solid var(--pn-line); }
.pf-scope button { min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--pn-ink-2); font: 600 .8rem Inter, sans-serif; cursor: pointer; white-space: nowrap; }
.pf-scope button:hover { color: var(--pn-ink); }
.pf-scope button[aria-pressed="true"] { background: var(--pn-inverse); color: var(--pn-on-inverse); }
.pf-scope button .fa-star { font-size: .7rem; }
.fx-theme .week-nav { display: flex; align-items: center; gap: 4px; margin: 0; max-width: none; }
.fx-theme .week-btn { width: 44px; height: 44px; font-size: .78rem; background: transparent; border: 1px solid var(--pn-line-2); color: var(--pn-ink); border-radius: 999px; cursor: pointer; }
.fx-theme .week-btn:hover { background: var(--pn-surface-3); color: var(--pn-ink); border-color: var(--pn-line-2); }
.fx-theme .week-label { min-width: 118px; text-align: center; font-size: .8rem; font-weight: 700; color: var(--pn-ink); }
@media (max-width: 560px) {
    .pf-scope { flex: 1 1 100%; }
    .pf-scope button { flex: 1; }
    .fx-theme .week-nav { flex: 1 1 100%; justify-content: space-between; }
}

/* ═══ LISTAS DE PARTIDOS ═══ */
.fx-theme .fixture-list { background: var(--pn-surface); border: 1px solid var(--pn-line); border-radius: 12px; margin-bottom: 0; overflow: hidden; }
.fx-theme .date-separator { background: var(--pn-surface-2); color: var(--pn-ink-2); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; padding: 8px 14px; border-bottom: 1px solid var(--pn-line); }
.fx-theme .fixture-row { display: grid; grid-template-columns: auto minmax(0,1fr) auto minmax(0,1fr) auto; align-items: center; gap: .6rem; padding: .65rem 1rem; border-left: 3px solid transparent; border-bottom: 1px solid var(--pn-line); text-decoration: none; color: inherit; }
.fx-theme .fixture-row:last-child { border-bottom: 0; }
.fx-theme .fixture-row.clickable { cursor: pointer; }
.fx-theme .fixture-row.win, .fx-theme .fixture-row.loss, .fx-theme .fixture-row.draw,
.fx-theme .fixture-row.upcoming { border-left-color: transparent; border-left-style: solid; }
.fx-theme .fixture-row.en-juego { border-left-color: var(--pn-loss) !important; }
.fx-theme .fixture-row.es-hoy { background: transparent; }
.fx-theme .fixture-row:hover { background: var(--pn-surface-2); }
.fx-theme .fixture-row.is-fav-row { border-left-color: var(--brand-yellow) !important; background: var(--pn-fav-row); }
.fx-theme .fixture-row.is-bye { opacity: .6; border-left-color: var(--pn-ink-3); border-left-style: solid; }
.fx-theme .fixture-row.is-bye .fx-vs, .fx-theme .fixture-row.is-bye .fx-team, .fx-theme .fixture-row.is-bye .fx-time { color: var(--pn-ink-3); }
.fx-fav { color: var(--brand-yellow); margin-right: 4px; font-size: .62rem; }

/* Categoría: etiqueta neutra y legible, igual para todas las competiciones
   (antes /partidos la pintaba en verde -- color propio del diseño de
   tarjetas anterior, nunca de este componente). */
.fx-theme .fx-badge, .fx-theme .fx-badge.femenino, .fx-theme .fx-badge.aficionado, .fx-theme .fx-badge.juvenil,
.fx-theme .fx-badge.cadete, .fx-theme .fx-badge.infantil, .fx-theme .fx-badge.alevin, .fx-theme .fx-badge.benjamin {
    background: var(--pn-surface-3); color: var(--pn-ink-2); border-radius: 4px; font-size: .76rem; letter-spacing: .02em; max-width: 160px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: .2rem .5rem;
}
.fx-theme .fx-team { display: flex; align-items: center; min-width: 0; gap: 6px; font-size: .92rem; color: var(--pn-ink-2); }
.fx-theme .fx-team.home { justify-content: flex-end; }
.fx-theme .fx-team.is-club { color: var(--pn-ink); font-weight: 700; }
.fx-theme .fx-team > img, .fx-theme .fx-team > .team-avatar, .fx-theme .fx-team > .fx-fav { flex: none; }
.fx-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-l { flex: none; white-space: pre; }
/* vs/marcador: nunca amarillo ni verde -- neutro, igual que la portada
   (bug real corregido 23-oct-2026: /partidos los pintaba con --brand-yellow/
   --green propios de .pt-tabs/.pt-tab, que colaban por especificidad). */
.fx-theme .fx-vs { color: var(--pn-ink-3); font-size: .64rem; font-weight: 700; letter-spacing: .08em; }
.fx-theme .fx-score, .fx-theme .fx-score.win, .fx-theme .fx-score.loss, .fx-theme .fx-score.draw {
    font: 800 1.12rem/1 'Barlow Condensed', sans-serif; color: var(--pn-ink); letter-spacing: .04em; font-variant-numeric: tabular-nums; min-width: 54px; text-align: center;
}
.fx-theme .fx-score.score-en-juego { color: var(--pn-loss) !important; }
.fx-theme .fx-time { color: var(--pn-ink); font-weight: 600; font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 4px; justify-self: end; }
.fx-theme .fx-actions { display: flex; align-items: center; gap: .5rem; justify-self: end; }
.fx-theme .fx-acta, .fx-theme .fx-wa { color: var(--pn-ink-3); opacity: 1; font-size: .82rem; text-decoration: none; }
.fx-theme .fx-acta:hover, .fx-theme .fx-wa:hover { color: var(--pn-ink); opacity: 1; }
.fx-theme .fx-maps { filter: grayscale(1); opacity: .75; text-decoration: none; cursor: pointer; }
.fx-theme .fx-hoy { background: var(--brand-yellow); color: #000; padding: 1px 7px; border-radius: 5px; font-size: .64rem; font-weight: 800; margin-left: 6px; }
.fx-theme .fx-fav-subhead {
    display: flex; align-items: center; gap: 6px; padding: 6px 1rem .3rem;
    font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--pn-accent-ink);
}
.fx-theme .fx-fav-subhead .fa-star { color: var(--brand-yellow); font-size: .62rem; }
.fx-theme .fx-fav-subhead-rest { color: var(--pn-ink-3); font-weight: 700; }
.fx-theme .fx-time-tbd { color: var(--pn-ink-3); font-weight: 500; font-style: italic; font-size: .82em; }
.fx-n-short { display: none; }
.fx-out { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 5px; font: 800 .74rem/1 'Barlow Condensed', sans-serif; }
.fx-out-win { background: var(--pn-win-bg); color: var(--pn-win); }
.fx-out-loss { background: var(--pn-loss-bg); color: var(--pn-loss); }
.fx-out-draw { background: var(--pn-draw-bg); color: var(--pn-ink-2); }
.fx-theme .badge-en-juego { background: var(--pn-loss); color: #fff; padding: 1px 7px; border-radius: 5px; font-size: .64rem; font-weight: 800; }
.fx-theme .meteo-badge { background: var(--pn-surface-2); border-radius: 5px; padding: 1px 6px; font-size: .68rem; }

/* Móvil: la categoría pasa a una línea propia encima del partido (2 líneas
   por fila) -- antes /partidos lo metía todo en una sola línea porque esta
   media query entera vivía bajo "body.portada .fixture-row", que /partidos
   nunca lleva. */
@media (max-width: 560px) {
    .fx-theme .fixture-row {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
        grid-template-areas: "cat cat cat cat" "home mid away act";
        row-gap: 3px; column-gap: .4rem; padding: .5rem .7rem .55rem .6rem;
    }
    .fx-theme .fixture-row > .fx-badge, .fx-theme .fixture-row > .badge-en-juego {
        grid-area: cat; display: inline-block !important; justify-self: start; max-width: 100%;
        padding: 0; background: transparent; color: var(--pn-ink-3); font-size: .76rem; letter-spacing: .02em;
    }
    .fx-theme .fixture-row > .badge-en-juego { padding: 1px 7px; background: var(--pn-loss); color: #fff; }
    .fx-theme .fixture-row > .fx-team.home { grid-area: home; }
    .fx-theme .fixture-row > .fx-vs, .fx-theme .fixture-row > .fx-score { grid-area: mid; }
    .fx-theme .fixture-row > .fx-team.away { grid-area: away; }
    .fx-theme .fixture-row > .fx-time, .fx-theme .fixture-row > .fx-actions { grid-area: act; }
    .fx-theme .fx-team { font-size: .9rem; }
    .fx-theme .fx-score { min-width: 46px; }
    .fx-theme .fixture-row.upcoming {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        grid-template-areas: "cat cat time" "home mid away";
    }
    .fx-theme .fixture-row.upcoming > .fx-time { grid-area: time; justify-self: end; font-size: .78rem; }
    .fx-n-full { display: none; }
    .fx-n-short { display: inline; }
}

/* ═══ BOTONES (compartidos: destacado, paneles de favoritos) ═══ */
.pf-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 40px; padding: 0 16px; border: 1px solid var(--brand-yellow); border-radius: 999px;
    background: var(--brand-yellow); color: var(--pn-on-accent); font: 700 .82rem Inter, sans-serif;
    cursor: pointer; white-space: nowrap; text-decoration: none;
}
[data-theme="light"] .pf-btn { border-color: rgba(0,0,0,.22); }
.pf-btn:hover { box-shadow: inset 0 0 0 2px rgba(0,0,0,.85); }
.pf-btn[disabled] { background: var(--pn-surface-3); border-color: var(--pn-line-2); color: var(--pn-ink-3); box-shadow: none; cursor: progress; }
.pf-btn-ghost { background: transparent; color: var(--pn-ink); border-color: var(--pn-line-2); }
.pf-btn-ghost:hover { background: var(--pn-surface-3); box-shadow: none; }

/* ═══ PARTIDO DESTACADO (próximo partido de "Tus equipos") ═══ */
.pf-destacado {
    max-width: 900px; margin: 0 auto 1.4rem; padding: 12px 16px 14px;
    background: var(--pn-surface); border: 1px solid var(--pn-line-2); border-radius: 16px;
}
.pf-destacado[hidden] { display: none; }
.pf-dest-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pf-dest-label { display: inline-flex; align-items: center; font-size: .64rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--pn-ink-2); }
.pf-dest-label::before { content: ""; width: 14px; height: 3px; margin-right: 8px; border-radius: 2px; background: var(--brand-yellow); flex-shrink: 0; }
.pf-dest-rel { flex-shrink: 0; padding: 2px 8px; border-radius: 999px; background: var(--pn-surface-3); color: var(--pn-ink); font-size: .7rem; font-weight: 700; }
.pf-dest-eq { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 6px 0 12px; min-width: 0; }
.pf-dest-eq strong { font: 800 1.15rem/1.1 'Barlow Condensed', sans-serif; letter-spacing: .02em; color: var(--pn-ink); }
.pf-dest-eq span { font-size: .76rem; font-weight: 600; color: var(--pn-ink-3); text-transform: uppercase; letter-spacing: .03em; }
.pf-dest-teams { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: 8px; }
.pf-dest-team { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; min-width: 0; }
.pf-dest-team .team-escudo, .pf-dest-team .team-avatar { width: 46px; height: 46px; margin: 0; font-size: .8rem; }
.pf-dest-name { font: 800 1.08rem/1.18 'Barlow Condensed', sans-serif; letter-spacing: .01em; color: var(--pn-ink-2); overflow-wrap: break-word; hyphens: manual; }
.pf-dest-team.is-ours .pf-dest-name { color: var(--pn-ink); text-decoration: underline; text-decoration-color: var(--brand-yellow); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.pf-dest-role { font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--pn-ink-3); }
.pf-dest-mid { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 76px; max-width: 108px; padding-top: 4px; text-align: center; }
.pf-dest-time-sm { font-size: 1.35rem; line-height: 1.1; padding-top: 6px; white-space: nowrap; }
.pf-dest-time { font: 800 2.1rem/1 'Barlow Condensed', sans-serif; color: var(--pn-ink); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.pf-dest-date { font-size: .74rem; font-weight: 600; color: var(--pn-ink-2); }
.pf-dest-mid .pf-st { margin-bottom: 4px; text-align: center; }
.pf-dest-foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--pn-line); }
.pf-dest-campo {
    flex: 1 1 auto; min-width: 0; min-height: 40px; display: inline-flex; align-items: center; gap: 7px;
    padding: 0 4px; border: 0; background: transparent; color: var(--pn-ink-2); font: 600 .78rem Inter, sans-serif;
    text-align: left; cursor: pointer; text-decoration: underline; text-decoration-color: var(--pn-line-2); text-underline-offset: 3px;
}
.pf-dest-campo span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-dest-campo i, .pf-dest-casa i { color: var(--pn-ink-3); }
.pf-dest-casa { flex: 1 1 auto; font-size: .78rem; font-weight: 600; color: var(--pn-ink-2); }
.pf-dest-cta { margin-left: auto; flex: 0 0 auto; }
.pf-dest-cta i { font-size: .72rem; }
.pf-st { display: inline-flex; align-items: center; gap: 5px; padding: 1px 7px; border-radius: 5px; font-size: .66rem; font-weight: 700; background: var(--pn-surface-3); color: var(--pn-ink-2); }
.pf-st-live { background: var(--pn-loss-bg); color: var(--pn-loss); }
.pf-st-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
@media (min-width: 640px) {
    .pf-destacado { padding: 14px 22px 16px; }
    .pf-dest-name { font-size: 1.35rem; }
    .pf-dest-team .team-escudo, .pf-dest-team .team-avatar { width: 56px; height: 56px; }
    .pf-dest-time { font-size: 2.6rem; }
    .pf-dest-mid { min-width: 120px; max-width: 160px; }
    .pf-dest-time-sm { font-size: 1.6rem; }
}

.fx-theme .empty-state { background: var(--pn-surface); border: 1px solid var(--pn-line); border-radius: 12px; color: var(--pn-ink-3); padding: 2rem; text-align: center; }
.fx-theme .empty-state i { color: var(--pn-ink-3); font-size: 1.6rem; }

/* Esqueleto de carga -- varias filas reales (no una caja única), para que
   se note que está cargando la lista y no otra cosa (pedido de Andrés
   23-oct-2026). Misma clase que ya usaba la portada (.skel-rows), ahora con
   el marcado de varias filas en vez de una caja sola -- ver fixtures.js
   skeletonRows(). */
.skel-rows { display: flex; flex-direction: column; gap: 1px; border-radius: 12px; overflow: hidden; border: 1px solid var(--pn-line); }
.skel-rows .skeleton { height: 54px; border-radius: 0; }

.fx-theme .week-btn, .fx-theme .fx-wa, .fx-theme .fx-maps, .fx-theme .fx-acta, .fx-theme .fixture-row {
    transition: color .15s ease, background-color .15s ease;
}