/* Ficha de partido (rediseño) · colores de la federación + tokens del sitio (tema claro/oscuro) */
.fx { --fx-c: var(--fed-primary, #810202); --fx-bg: var(--bg-body, #f0ede6); --fx-card: var(--bg-surface, #fff); --fx-tx: var(--text-main, #0a0a0c);
  --fx-mu: var(--text-muted, rgba(0,0,0,.55)); --fx-ln: var(--border-main, rgba(0,0,0,.08)); --fx-soft: var(--bg-surface-2, #f4f2ee);
  --fx-cond: 'Bebas Neue', Impact, sans-serif; color: var(--fx-tx); font-family: Inter, system-ui, sans-serif; padding-bottom: 32px; }
.fx a { color: inherit; }
.fx#content { float: none; clear: both; padding-top: 0; margin: 0; background: var(--fx-bg); }
.fx h2 { margin: 0; font: 400 26px/1 var(--fx-cond); letter-spacing: 1px; }

/* ── Marcador ── */
.fx-hero { position: relative; overflow: hidden; color: #fff; background: var(--fed-header-gradient, var(--fx-c)); background-color: var(--fx-c); }
/* Sin velo oscuro: el mismo color de federación que las cabeceras de listados, grupos y equipos */
.fx-hero::after { content: ''; position: absolute; inset: 0; opacity: .08; background-image: repeating-linear-gradient(45deg, #fff 0 2px, transparent 2px 20px); pointer-events: none; }
/* 13-oct-2026: foto del tipo de competición, con el resplandor de la federación (--fed-aur1/2 de header.php) por encima */
.fx-hero-foto { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; opacity: .3; pointer-events: none; }
.fx-hero::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(95% 105% at 0% 0%, color-mix(in srgb, var(--fed-aur1, #810202) 88%, transparent), transparent 76%),
    radial-gradient(80% 95% at 100% 0%, color-mix(in srgb, var(--fed-aur2, #d4a326) 62%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(10,10,12,.55) 0%, rgba(10,10,12,.5) 45%, rgba(10,10,12,.6) 65%, rgba(10,10,12,.92) 100%); }
.fx-hero .fx-circ { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.fx-hero .fx-circ.ok { background: #fff; }
.fx-eq-txt b, .fx-res { text-shadow: 0 2px 14px rgba(0,0,0,.45); }
.fx-hero-in { position: relative; z-index: 2; max-width: 1000px; margin: 0 auto; padding: 14px 20px 20px; }
/* Barra de la web y marcador en un solo bloque (como categoría y grupo): la barra va transparente encima del degradado */
body.ficha-nueva .logobar { position: absolute; top: 0; left: 0; right: 0; z-index: 20; background: transparent; box-shadow: none; }
body.ficha-nueva .logobar::before, body.ficha-nueva .logobar::after { display: none; }
body.ficha-nueva .fx-hero-in { padding-top: var(--fx-top, 96px); }
@media (max-width: 899px) { body.ficha-nueva .fx-hero-in { padding-top: var(--fx-top, 140px); } }
.fx-hero-top { display: flex; align-items: center; gap: 10px; }
.fx-comp { flex: 1; min-width: 0; text-decoration: none; line-height: 1.25; }
.fx-comp span { display: block; font-size: 11px; font-weight: 800; letter-spacing: 1.5px; color: rgba(255,255,255,.7); }
.fx-comp b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-comp:hover b { text-decoration: underline; }
.fx-comp b em { font-style: normal; font-weight: 500; opacity: .75; }
.fx-circ { flex: 0 0 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.16); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.fx-circ.ok { background: #fff; color: var(--fx-c); }
.fx-marcador { margin-top: 18px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 6px; text-align: center; }
.fx-eq { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; min-width: 0; }
.fx-eq-txt b { display: block; font: 400 22px/1 var(--fx-cond); letter-spacing: .3px; }
.fx-eq-txt small { display: block; margin-top: 6px; font-size: 12px; line-height: 1.5; color: rgba(255,255,255,.82); }
.fx-escudo { position: relative; width: 68px; height: 68px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(0,0,0,.25); overflow: hidden; }
.fx-escudo:has(img) .fx-escudo-ini { display: none; }
.fx-escudo-ini { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--fed-primary, #0a0a0c); color: #fff; font: 400 calc(var(--fx-ini, 28px)) / 1 "Bebas Neue", Impact, sans-serif; letter-spacing: 1px; }
.fx-alin-vacio .fx-escudo-ini { --fx-ini: 24px; }
.fx-escudo img { width: 52px; height: 52px; object-fit: contain; }
.fx-centro { padding-top: 6px; display: flex; flex-direction: column; align-items: center; }
.fx-res { font: 400 80px/.85 var(--fx-cond); letter-spacing: 2px; white-space: nowrap; }
.fx-res i { font-style: normal; color: rgba(255,255,255,.45); padding: 0 4px; }
.fx-res .pierde { color: rgba(255,255,255,.6); }
.fx-res-hora { font-size: 56px; }
.fx-res-txt { font-size: 30px; }
.fx-estado { margin-top: 8px; padding: 4px 10px; border-radius: 10px; background: rgba(255,255,255,.18); font-size: 11px; font-weight: 800; letter-spacing: 1.5px; }
.fx-estado.provisional { background: rgba(255,255,255,.92); color: var(--fx-c); }
.fx-vivo { margin-bottom: 6px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; letter-spacing: 1px; }
.fx-pulso { width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.35); animation: fx-pulso 1.6s ease-in-out infinite; }
@keyframes fx-pulso { 50% { opacity: .5; transform: scale(.8); } }
.fx-aviso-override { margin: 12px 0 0; text-align: center; font-size: 13px; font-weight: 700; }
.fx-meta { margin: 16px 0 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: rgba(255,255,255,.82); }
.fx-meta a { font-weight: 700; color: #fff; }
.fx-meta-arb { display: none; }

.fx-informa-franja { display: flex; align-items: center; gap: 10px; padding: 10px 20px; background: var(--fed-accent, #FFC72C); color: #0a0a0c; font-size: 13px; font-weight: 600; }
.fx-av { flex: 0 0 30px; height: 30px; border-radius: 50%; background: #0a0a0c; color: #fff; font: 400 14px/30px var(--fx-cond); text-align: center; }

/* ── Cuerpo ── */
.fx-cuerpo { max-width: 1240px; margin: 0 auto; }
.fx-tabs { position: sticky; top: 0; z-index: 5; display: flex; overflow-x: auto; background: var(--fx-card); border-bottom: 1px solid var(--fx-ln); padding: 0 12px; scrollbar-width: none; }
.fx-tabs button { flex: 0 0 auto; min-height: 50px; padding: 0 14px; border: 0; border-bottom: 3px solid transparent; background: none; font: 600 14px Inter, sans-serif; color: var(--fx-mu); cursor: pointer; }
.fx-tabs [aria-selected="true"] { color: var(--fx-tx); font-weight: 800; border-bottom-color: var(--fx-c); }
.fx-panel, .fx-lado { padding: 0 16px; }
.fx-sec { margin-top: 18px; }
.fx-informa { margin-top: 16px; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 16px; border-radius: 20px; background: #0a0a0c; color: #fff !important; text-decoration: none; }
.fx-informa b { font: 400 26px/1 var(--fx-cond); }
.fx-informa span { grid-column: 1; font-size: 13px; color: rgba(255,255,255,.7); }
.fx-informa em { grid-column: 2; grid-row: 1 / 3; font-style: normal; padding: 12px 14px; border-radius: 14px; background: var(--fed-accent, #FFC72C); color: #0a0a0c; font-size: 13px; font-weight: 800; }
.fx-eventos { list-style: none; margin: 10px 0 0; padding: 6px 0; background: var(--fx-card); border: 1px solid var(--fx-ln); border-radius: 20px; }
.fx-ev { display: grid; grid-template-columns: 1fr 56px 1fr; align-items: center; min-height: 52px; padding: 4px 12px; border-top: 1px solid var(--fx-ln); }
.fx-ev:first-child { border-top: 0; }
.fx-ev .l { text-align: right; }
.fx-ev .c { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.fx-ev-q { font-size: 13px; font-weight: 700; line-height: 1.3; }
.fx-ev-q a { text-decoration: none; }
.fx-ev-q a:hover { color: var(--fx-c); }
.fx-ev-q small { display: block; font-size: 11px; font-weight: 600; color: var(--fx-mu); }
.fx-ev.es-gol .fx-ev-q small { color: var(--fx-c); font-weight: 800; }
.fx-ev-min { font-size: 11px; font-weight: 800; color: var(--fx-mu); }
.fx-ev-ic { width: 26px; height: 26px; border-radius: 50%; background: var(--fx-tx) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.6'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5l3.5 2.6-1.3 4.1H9.8L8.5 10.1z'/%3E%3C/svg%3E") center / 18px no-repeat; color: #fff; font: 800 10px/26px Inter, sans-serif; text-align: center; }
.fx-ev-ic.penalti, .fx-ev-ic.propia { background-image: none; }
.fx-ev-ic.penalti { background-color: #2E7D32; }
.fx-ev-ic.propia { background-color: #8a8a8a; }
.fx-ev-ic.t { width: 13px; height: 18px; border-radius: 3px; background-image: none; margin: 4px 0; }
.fx-ev-ic.t.amarilla { background-color: #f0ce00; }
.fx-ev-ic.t.roja { background-color: #d9322a; }
.fx-ev-ic.t.amarilla_roja { background: linear-gradient(90deg, #f0ce00 50%, #d9322a 50%); }
.fx-vacio { margin-top: 10px; padding: 18px; border-radius: 20px; border: 1px dashed var(--fx-ln); background: var(--fx-card); font-size: 13px; color: var(--fx-mu); }
.fx-vacio b { display: block; font-size: 15px; color: var(--fx-tx); margin-bottom: 4px; }
.fx-nota { margin: 10px 0 0; font-size: 12px; color: var(--fx-mu); text-align: center; }
.fx-fuente { margin: 14px 0 0; font-size: 11px; color: var(--fx-mu); text-align: center; }

.fx-alins { margin-top: 18px; display: grid; grid-template-columns: 1fr; gap: 12px; }
.fx-alin { background: var(--fx-card); border: 1px solid var(--fx-ln); border-radius: 20px; overflow: hidden; }
.fx-alin h3 { margin: 0; padding: 12px 16px; font: 800 14px/1.3 Inter, system-ui, sans-serif; color: var(--fx-tx); text-align: left; text-transform: none; letter-spacing: 0; background: none; border-bottom: 3px solid var(--fx-c); }
.fx-alin.visit h3 { border-bottom-color: var(--fx-tx); }
.fx-alin h4 { margin: 0; padding: 10px 16px 4px; font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--fx-mu); }
.fx-alin ul { list-style: none; margin: 0; padding: 0; }
.fx-alin li { min-height: 38px; padding: 0 16px; display: flex; align-items: center; gap: 10px; font-size: 13px; border-top: 1px solid var(--fx-ln); }
.fx-alin .d { flex: 0 0 22px; font-weight: 800; color: var(--fx-mu); }
.fx-alin .n { flex: 1; min-width: 0; }
.fx-alin .n a { text-decoration: none; }
.fx-alin .x { display: flex; gap: 3px; }
.fx-ic-gol { width: 16px; height: 16px; border-radius: 50%; background: var(--fx-tx) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5l3.5 2.6-1.3 4.1H9.8L8.5 10.1z'/%3E%3C/svg%3E") center / 13px no-repeat; }
.fx-ic-t { width: 9px; height: 13px; border-radius: 2px; background: #f0ce00; }
.fx-ic-t.roja { background: #d9322a; }
.fx-ic-t.amarilla_roja { background: linear-gradient(90deg, #f0ce00 50%, #d9322a 50%); }
.fx-alin-falta { margin: 0; padding: 14px 16px; font-size: 13px; color: var(--fx-mu); }
.fx-alin-vacio { margin-top: 18px; padding: 24px 20px; border-radius: 20px; background: var(--fx-card); border: 1px solid var(--fx-ln); text-align: center; }
.fx-alin-vacio-esc { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 14px; }
.fx-alin-vacio-esc span:not(.fx-escudo) { font: 400 22px/1 var(--fx-cond); color: var(--fx-mu); }
.fx-alin-vacio .fx-escudo { width: 56px; height: 56px; box-shadow: 0 2px 8px rgba(0,0,0,.12); border: 1px solid var(--fx-ln); }
.fx-alin-vacio .fx-escudo img { width: 42px; height: 42px; }
.fx-alin-vacio b { display: block; font: 400 24px/1.1 var(--fx-cond); letter-spacing: .5px; }
.fx-alin-vacio p { margin: 6px auto 0; max-width: 40ch; font-size: 13px; line-height: 1.45; color: var(--fx-mu); }
.fx-panel[data-fx-panel="clasificacion"], .fx-panel[data-fx-panel="h2h"] { padding-top: 14px; }

/* ── Lateral ── */
.fx-lado { display: flex; flex-direction: column; gap: 16px; margin-top: 22px; }
.fx-card { background: var(--fx-card); border: 1px solid var(--fx-ln); border-radius: 20px; overflow: hidden; }
.fx-card-cab { padding: 14px 16px 8px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.fx-card-cab h2 { font-size: 24px; }
.fx-card-cab a { font-size: 12px; font-weight: 800; color: var(--fx-c) !important; }
.fx-card-in { padding: 0 16px 14px; }
.fx-mapa { position: relative; height: 130px; overflow: hidden; background: #e8e6e1; }
.fx-mapa-tiles { position: absolute; width: 768px; height: 768px; }
.fx-mapa-tiles img { position: absolute; max-width: none; }
.fx-pin { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -22px 0 0 -11px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--fx-c); box-shadow: 0 4px 10px rgba(0,0,0,.3); }
.fx-datos { list-style: none; margin: 0; padding: 0; }
.fx-datos li { min-height: 54px; padding: 8px 16px; display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--fx-ln); }
.fx-datos .i { flex: 0 0 34px; height: 34px; border-radius: 50%; background: var(--fx-soft); display: flex; align-items: center; justify-content: center; font-size: 15px; }
.fx-datos .t { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; }
.fx-datos .t small { display: block; font-size: 12px; font-weight: 500; color: var(--fx-mu); }
.fx-datos a { font-size: 12px; font-weight: 800; color: var(--fx-c) !important; white-space: nowrap; }
.fx-tabla-fila { display: grid; grid-template-columns: 26px 1fr 30px 34px 34px; gap: 6px; align-items: center; min-height: 42px; padding: 0 16px; border-top: 1px solid var(--fx-ln); font-size: 13px; }
.fx-tabla-fila > span:nth-child(n+3), .fx-tabla-fila b { text-align: center; }
.fx-tabla-fila b { text-align: right; }
.fx-tabla-th { min-height: 30px; border-top: 0; font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--fx-mu); }
.fx-tabla-eq { display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-tabla-eq i { flex: 0 0 8px; height: 8px; border-radius: 50%; }
.fx-tabla-fila.es-local, .fx-tabla-fila.es-visit { font-weight: 700; background: color-mix(in srgb, var(--fx-c) 9%, transparent); }
.fx-tabla-fila.es-local i { background: var(--fx-c); }
.fx-tabla-fila.es-visit i { background: var(--fx-tx); }
.fx-tabla-salto { text-align: center; font-size: 12px; color: var(--fx-mu); border-top: 1px solid var(--fx-ln); line-height: 22px; }
.fx-racha { min-height: 44px; display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; border-top: 1px solid var(--fx-ln); }
.fx-racha:first-child { border-top: 0; }
.fx-racha > span:first-child { flex: 1; min-width: 0; }
.fx-racha-r { display: flex; gap: 4px; }
.fx-racha-r i { width: 24px; height: 24px; border-radius: 7px; color: #fff; font: 800 11px/24px Inter, sans-serif; text-align: center; font-style: normal; }
.r-v, .fx-barra .v { background: #2E7D32; }
.r-e, .fx-barra .e { background: #9a958b; }
.r-d, .fx-barra .d { background: #d9322a; }
.fx-arb { padding: 10px 0; border-top: 1px solid var(--fx-ln); }
.fx-arb:first-child { border-top: 0; padding-top: 0; }
.fx-arb > div:first-child { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.fx-arb > div:first-child span { color: var(--fx-mu); font-weight: 600; white-space: nowrap; }
.fx-barra { margin-top: 8px; display: flex; gap: 2px; height: 8px; border-radius: 4px; overflow: hidden; }

/* ── Escritorio: marcador grande y dos columnas ── */
@media (min-width: 900px) {
  .fx-hero-in { padding: 18px 32px 26px; }
  .fx-marcador { margin-top: 22px; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
  .fx-eq.local { flex-direction: row-reverse; justify-content: flex-start; text-align: right; }
  .fx-eq.visit { flex-direction: row; justify-content: flex-start; text-align: left; }
  .fx-eq { gap: 18px; }
  .fx-escudo { flex: 0 0 96px; width: 96px; height: 96px; --fx-ini: 38px; }
  .fx-escudo img { width: 74px; height: 74px; }
  .fx-eq-txt b { font-size: 38px; }
  .fx-eq-txt small { font-size: 13px; }
  .fx-res { font-size: 112px; letter-spacing: 3px; }
  .fx-meta { font-size: 13px; }
  .fx-meta-arb { display: inline; }
  .fx-cuerpo { padding: 24px 32px 0; display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
  .fx-tabs { position: static; border: 1px solid var(--fx-ln); border-radius: 18px; }
  .fx-panel, .fx-lado { padding: 0; }
  .fx-lado { margin-top: 0; position: sticky; top: 16px; }
  .fx-alins { grid-template-columns: 1fr 1fr; }
  .fx-ev { min-height: 56px; padding: 4px 20px; grid-template-columns: 1fr 64px 1fr; }
  .fx-ev-q { font-size: 14px; }
}
.fx-datos .t .fx-ver-campo { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 12.5px; font-weight: 800; color: #15803d; text-decoration: none; }
.fx-datos .t .fx-ver-campo:hover { text-decoration: underline; }
.fx-mj { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 12px 14px; border-radius: 16px; background: #14161c; color: #fff !important; text-decoration: none !important; font-size: 12.5px; }
.fx-mj > span { flex: 1; min-width: 0; color: rgba(255,255,255,.75); }
.fx-mj b { display: block; font-size: 14px; color: #fff; }
.fx-mj em { flex: none; font-style: normal; padding: 8px 12px; border-radius: 10px; background: var(--fed-accent, #FFC72C); color: #0a0a0c; font-size: 12px; font-weight: 800; }

.fx-alin-vacio .fx-escudo { flex: 0 0 56px; width: 56px !important; height: 56px !important; aspect-ratio: 1; border-radius: 50%; overflow: hidden; }
.fx-alin-vacio .fx-escudo img { width: 42px !important; height: 42px !important; object-fit: contain; }

/* Zonas de la clasificación (ascenso, promoción, descenso): pastilla de color en la posición */
.fx-tabla-fila[class*="zona-"] > span:first-child { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 6px; font-weight: 800; }
.fx-tabla-fila.zona-asc > span:first-child { background: var(--zona-asc, #16a34a); color: var(--zona-asc-t, #fff); }
.fx-tabla-fila.zona-prom-asc > span:first-child { background: var(--zona-pasc, #dcfce7); color: var(--zona-pasc-t, #15803d); }
.fx-tabla-fila.zona-prom-desc > span:first-child { background: var(--zona-pdesc, #ffedd5); color: var(--zona-pdesc-t, #c2410c); }
.fx-tabla-fila.zona-desc > span:first-child { background: var(--zona-desc, #dc2626); color: var(--zona-desc-t, #fff); }
/* Leyenda con el mismo margen lateral que las filas (16px); antes iba pegada a los bordes de la tarjeta (18-oct-2026) */
.fx-tabla .zonas-leyenda { margin: 0; padding: 12px 16px 14px; border-top: 1px solid var(--fx-ln); font-size: 11px; gap: 4px 12px; }
/* Móvil: «El partido» y árbitro solo en la pestaña Resumen (11-oct-2026) */
@media (max-width: 899px) { body.fx-no-resumen .fx-lado { display: none; } }
