/* ==========================================================================
   Yanapaq · Hoja de estilos maestra (tema tipo Flashscore)
   Contiene: variables, header, layout (sidebar+main), calendario,
   tarjetas de liga, filas de partido (estado | equipos | goles | espacio),
   detalle de partido (mdetail-*) y utilidades.
   ========================================================================== */

:root{
  --fs-bg:#edf0f5;
  --fs-card-bg:#ffffff;
  --fs-border:#e2e7ee;
  --fs-text:#101f2d;
  --fs-text-dim:#6c7c8c;
  --fs-blue:#0b6fd6;
  --fs-hover:#f1f7ff;
  --fs-league-bg:#f5f8fc;
  /* Barra superior clara: el logotipo es oscuro y sobre el azul marino no se
     veia, y el resto del sitio ya era claro. `--fs-dark-panel` guarda el
     azul marino para los bloques que si quieren ser oscuros (cabecera del
     detalle de partido). */
  --fs-header-bg:#ffffff;
  --fs-header-border:#dde3ea;
  --fs-dark-panel:#0a1f36;
  --fs-live:#e01b1b;
  --fs-green:#12a150;
  --fs-score-font:'Arial Black', Arial, sans-serif;
  --fs-sidebar-w:232px;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--fs-bg);
  color:var(--fs-text);
  font-family:Arial, Helvetica, sans-serif;
  font-size:14px;
  line-height:1.4;
}

a{ color:inherit; }

/* ============================ HEADER ============================ */
.fs-header{
  background:var(--fs-header-bg);
  color:var(--fs-text);
  position:sticky;
  top:0;
  z-index:60;
  border-bottom:1px solid var(--fs-header-border);
  box-shadow:0 1px 3px rgba(16,31,45,.06);
}
.fs-header-inner{
  max-width:1240px;
  margin:0 auto;
  padding:0 16px;
  height:54px;
  display:flex;
  align-items:center;
  gap:26px;
}
.fs-logo{
  display:flex;
  align-items:center;
  flex:none;
  text-decoration:none;
}
.fs-logo img{
  display:block;
  height:30px;
  width:auto;
}
/* Boton hamburguesa: solo existe en movil */
.fs-burger{
  display:none;
  margin-left:auto;
  width:38px; height:38px; padding:0;
  align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--fs-border); border-radius:8px;
  color:var(--fs-text); cursor:pointer;
}
.fs-burger svg{ width:20px; height:20px; display:block; }
.fs-burger:hover{ background:var(--fs-hover); }
/* En escritorio no envuelve nada: los hijos se comportan como antes */
.fs-menu{ display:contents; }

.fs-nav{ display:flex; gap:2px; }
.fs-nav-link{
  color:var(--fs-text-dim);
  text-decoration:none;
  font-size:.82rem;
  font-weight:600;
  padding:7px 12px;
  border-radius:6px;
  transition:background .12s, color .12s;
  white-space:nowrap;
}
.fs-nav-link:hover{ color:var(--fs-text); background:var(--fs-hover); }
.fs-nav-link.active{ color:#fff; background:var(--fs-blue); }

/* Usuario / login a la derecha del header */
.fs-nav-user{ display:flex; align-items:center; gap:8px; margin-left:auto; }
.fs-nav-name{ color:var(--fs-text); font-size:.8rem; font-weight:600; white-space:nowrap; }
.fs-nav-cuenta{ text-decoration:none; padding:6px 8px; border-radius:6px; transition:background .12s; }
.fs-nav-cuenta:hover{ background:var(--fs-hover); color:var(--fs-text); }
.fs-nav-cta{ background:var(--fs-blue); color:#fff !important; }
.fs-nav-cta:hover{ background:#2f6fb5; }
.fs-vip-badge{
  background:linear-gradient(135deg,#f7b733,#fc4a1a);
  color:#fff; font-size:.65rem; font-weight:800;
  padding:3px 8px; border-radius:10px; letter-spacing:.3px;
  white-space:nowrap;
}

/* ============================ LAYOUT ============================ */
.fs-layout{
  max-width:1240px;
  margin:0 auto;
  padding:16px;
  display:flex;
  gap:16px;
  align-items:flex-start;
}
.fs-sidebar{
  width:var(--fs-sidebar-w);
  flex:0 0 var(--fs-sidebar-w);
  background:var(--fs-card-bg);
  border:1px solid var(--fs-border);
  border-radius:8px;
  padding:6px;
  position:sticky;
  top:70px;
  max-height:calc(100vh - 86px);
  overflow-y:auto;
}
/* Titulo de la pagina principal. En el SEO es la unica etiqueta h1 que
   tiene el dashboard, y lleva la palabra "partidos" que es lo que busca
   quien llega. El subtitulo va dentro, en un span, para que el h1 sea
   una sola etiqueta: dos h1 en la misma pagina confunden al rastreador. */
.fs-h1{
  font-size:1.05rem;
  font-weight:900;
  color:var(--fs-text);
  margin:0 0 10px;
  letter-spacing:-.2px;
}
.fs-h1-sub{
  display:block;
  font-size:.76rem;
  font-weight:600;
  color:var(--fs-text-dim);
  letter-spacing:0;
  margin-top:2px;
}

.fs-main{
  flex:1 1 auto;
  /* En el layout en columna, min-width:0 no frena el eje horizontal: eso
     hace max-width. Sin esto el bloque se estiraba a 560px dentro de un
     contenedor de 480, y toda la pagina generaba scroll horizontal con una
     franja de fondo vacia a la derecha. */
  min-width:0;
  max-width:100%;
}

/* ============================ SIDEBAR ============================ */
.fs-sidebar-title{
  font-size:.67rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.4px;
  color:var(--fs-text-dim);
  padding:12px 8px 6px;
}
.fs-sidebar-item{
  display:flex;
  align-items:center;
  gap:9px;
  padding:8px;
  border-radius:6px;
  text-decoration:none;
  color:var(--fs-text);
  font-size:.82rem;
  transition:background .12s;
}
.fs-sidebar-item:hover{ background:var(--fs-hover); }
.fs-sidebar-item.active{ background:var(--fs-hover); color:var(--fs-blue); font-weight:700; }
.fs-sidebar-item .count{
  margin-left:auto;
  font-size:.67rem;
  font-weight:700;
  color:var(--fs-text-dim);
  background:var(--fs-league-bg);
  border:1px solid var(--fs-border);
  border-radius:10px;
  padding:1px 7px;
  flex:0 0 auto;
}
/* Banderas emoji GRANDES y visibles */
.fs-flag{
  font-size:1.35rem;
  line-height:1;
  width:1.55em;
  text-align:center;
  flex:0 0 auto;
}
.fs-flag-world{
  font-size:1.15rem;
  line-height:1;
  width:1.55em;
  text-align:center;
  flex:0 0 auto;
}
/* Banderas servidas como imagen desde el propio servidor (Reino Unido):
   no dependen de la fuente del navegador ni del sistema */
.flag-img{
  width:22px;
  height:15px;
  object-fit:cover;
  border-radius:2px;
  vertical-align:middle;
  box-shadow:0 0 0 1px rgba(0,0,0,.08);
}

/* ============================ CALENDARIO ============================ */
.fs-cal-bar{
  display:flex;
  align-items:stretch;
  background:var(--fs-card-bg);
  border:1px solid var(--fs-border);
  border-radius:8px;
  margin-bottom:12px;
  min-height:46px;
  position:relative;
}
/* min-width:0 es necesario: sin el, el elemento flex no puede encogerse por
   debajo de su contenido y empuja toda la barra a 560px, lo que provoca
   scroll horizontal y una franja de fondo vacia a la derecha. */
.fs-tabs-bar{ display:flex; flex:1; min-width:0; overflow-x:auto; }
.fs-tabs-bar::-webkit-scrollbar{ display:none; }
.fs-tab{
  display:flex;
  align-items:center;
  padding:0 15px;
  font-size:.72rem;
  font-weight:700;
  color:var(--fs-text-dim);
  text-decoration:none;
  border-bottom:3px solid transparent;
  transition:background .12s, color .12s;
  white-space:nowrap;
}
.fs-tab:hover{ color:var(--fs-text); background:var(--fs-hover); }
.fs-tab.active{ color:var(--fs-blue); border-bottom-color:var(--fs-blue); }

/* Navegador de fecha (alineado a la columna CLASIFICACIÓN) */
.fs-date-nav{
  display:flex;
  align-items:center;
  gap:2px;
  padding:0 8px;
  border-left:1px solid var(--fs-border);
  position:relative;
  flex:0 0 auto;
}
/* 'Recientes': ordena por hora lo que queda por jugar, ignorando la fecha
   que marcan las flechas. El activo se pinta con el mismo azul que las
   pestañas, para que se vea que es un filtro encendido. */
.fs-btn-recientes{
  display:flex;
  align-items:center;
  gap:4px;
  height:28px;
  padding:0 9px;
  margin-right:4px;
  border-radius:6px;
  border:1px solid var(--fs-border);
  background:var(--fs-card-bg);
  color:var(--fs-text);
  font-size:.7rem;
  font-weight:700;
  text-decoration:none;
  white-space:nowrap;
}
.fs-btn-recientes:hover{ background:#f2f6fb; }
.fs-btn-recientes.active{
  background:var(--fs-blue);
  border-color:var(--fs-blue);
  color:#fff;
}

/* Liga al lado de la hora en la lista plana de Recientes. Una sola linea.
   La columna no tiene ancho fijo sino que lo fija el servidor con la
   medida del nombre de liga mas largo de la lista (--w-liga), de modo que
   la columna de los equipos arranca siempre en la misma vertical. Con el
   ancho creciendo por fila, cada partido empezaba en un sitio distinto. */
.fs-match-plano .fs-match-status{
  width:var(--w-liga, 22ch);
  flex:0 0 var(--w-liga, 22ch);
  align-items:flex-start;
  padding-right:14px;
}
.fs-lg-mini{
  display:flex;
  align-items:center;
  gap:4px;
  min-width:0;
  font-size:.62rem;
  font-weight:600;
  color:var(--fs-text-dim);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.fs-lg-mini img{ width:14px; height:14px; flex:0 0 auto; }

.fs-match-plano .fs-match-team{ min-height:26px; }

.fs-date-arrow{
  display:flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:6px;  text-decoration:none;
  color:var(--fs-text-dim);
  font-size:1.2rem;
  line-height:1;
  transition:background .12s, color .12s;
}
.fs-date-arrow:hover{ background:var(--fs-hover); color:var(--fs-blue); }
.fs-date-current{
  display:flex;
  align-items:center;
  gap:6px;
  border:none;
  background:transparent;
  cursor:pointer;
  padding:6px 10px;
  border-radius:6px;
  font-size:.8rem;
  font-weight:700;
  color:var(--fs-text);
  font-family:inherit;
  transition:background .12s;
}
.fs-date-current:hover{ background:var(--fs-hover); }
.fs-date-cal{ font-size:.95rem; }
.fs-date-dow{ font-size:.67rem; font-weight:800; color:var(--fs-blue); text-transform:uppercase; letter-spacing:.3px; }
.fs-date-menu{
  display:none;
  position:absolute;
  right:0;
  top:calc(100% + 4px);
  background:var(--fs-card-bg);
  border:1px solid var(--fs-border);
  border-radius:8px;
  box-shadow:0 10px 28px rgba(10,31,54,.18);
  padding:6px;
  min-width:200px;
  max-height:320px;
  overflow-y:auto;
  z-index:80;
}
.fs-date-menu.open{ display:block; }
.fs-date-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:6px;
  text-decoration:none;
  color:var(--fs-text);
  font-size:.82rem;
}
.fs-date-item:hover{ background:var(--fs-hover); }
.fs-date-item.active{ background:var(--fs-hover); color:var(--fs-blue); font-weight:700; }
.fs-date-item .di-dow{ width:34px; font-weight:700; font-size:.7rem; text-transform:uppercase; color:var(--fs-text-dim); }
.fs-date-item.active .di-dow{ color:var(--fs-blue); }
.fs-date-item .di-date{ width:56px; }
.fs-date-item .di-hoy{
  margin-left:auto;
  font-size:.6rem;
  font-weight:800;
  color:#fff;
  background:var(--fs-green);
  padding:2px 8px;
  border-radius:8px;
}

/* ============================ TARJETA DE LIGA ============================ */
.fs-league{
  background:var(--fs-card-bg);
  border:1px solid var(--fs-border);
  border-radius:8px;
  margin-bottom:10px;
  overflow:hidden;
}
.fs-league-header{
  display:flex;
  align-items:center;
  gap:9px;
  padding:9px 12px;
  background:var(--fs-league-bg);
  border-bottom:1px solid var(--fs-border);
  font-size:.78rem;
  font-weight:700;
  color:var(--fs-text);
}
.lg-arrow{ cursor:pointer; color:var(--fs-text-dim); font-size:.68rem; width:14px; text-align:center; flex:0 0 auto; }
.league-logo{ width:16px; height:16px; object-fit:contain; flex:0 0 auto; }
.league-flag{ font-size:1.15rem; line-height:1; flex:0 0 auto; }
.lg-standings-link{
  margin-left:auto;
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.3px;
  color:var(--fs-blue);
  text-decoration:none;
  background:#e8f0fe;
  padding:4px 11px;
  border-radius:6px;
  flex:0 0 auto;
}
.lg-standings-link:hover{ background:#d6e4fb; }
.league-matches{ display:block; }

/* ============================ FILA DE PARTIDO ============================ */
.fs-match{
  display:flex;
  align-items:stretch;
  border-bottom:1px solid var(--fs-border);
  cursor:pointer;
  transition:background .12s;
}
.fs-match:last-child{ border-bottom:none; }
.fs-match:hover{ background:var(--fs-hover); }

.fs-match-status{
  width:100px;
  flex:0 0 100px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  padding:8px 8px 8px 12px;
  text-align:center;
}

/* Dia y hora del partido, en la misma linea: "Sab 17/10 · 11.30" */
.fs-when{
  align-self:flex-start;
  display:flex;
  align-items:center;
  gap:4px;
  font-size:.63rem;
  font-weight:700;
  color:var(--fs-text-dim);
  text-transform:uppercase;
  letter-spacing:.2px;
  white-space:nowrap;
}
.fs-when .fw-dow{ color:var(--fs-blue); }
.fs-when .fw-sep{ opacity:.45; font-weight:400; }
.fs-when .fw-hora{ color:var(--fs-blue); }
.fs-when .di-hoy{ text-transform:none; letter-spacing:0; }
.live-time{ font-size:.8rem; font-weight:700; color:var(--fs-live); }
/* Minuto del partido en vivo: sin el texto VIVO, mismo tamano que FINALIZADO */
.live-minuto{
  display:inline-block;
  font-size:.55rem;
  font-weight:800;
  letter-spacing:.2px;
  color:#fff;
  background:var(--fs-live);
  padding:3px 7px;
  border-radius:8px;
  animation:pulse 1.6s infinite;
}
.live-badge{
  font-size:.5rem; font-weight:800; color:#fff; background:var(--fs-live);
  padding:1px 6px; border-radius:8px; animation:pulse 1.2s infinite;
}
.ft-badge{ font-size:.55rem; font-weight:800; letter-spacing:.2px; color:var(--fs-text-dim); background:#eef1f5; padding:3px 7px; border-radius:8px; }
/* Aplazado, cancelado o anulado: ya no se juega como estaba previsto */
.ft-badge.fin-alt{ background:#fdecec; color:#a33; }
.ns-time{ font-size:.85rem; font-weight:700; color:var(--fs-blue); }

.fs-match-body{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:6px 10px;
}
.fs-match-team{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:26px;
  padding:2px 0;
  font-size:.82rem;
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
}
.fs-match-team > span{ min-width:0; overflow:hidden; text-overflow:ellipsis; }
.fs-match-team.winner{ font-weight:700; }
.fs-team-logo{ width:18px; height:18px; object-fit:contain; flex:0 0 auto; }

/* Goles: columna propia, ANTES del espacio de CLASIFICACIÓN */
.fs-match-goals{
  width:46px;
  flex:0 0 46px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:6px 0;
}
.goal-row{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:26px;
  font-weight:800;
  font-size:.85rem;
  line-height:1;
  color:var(--fs-text-dim);
}
.goal-row.gw{ color:var(--fs-text); }
/* Espacio que deja la columna de goles a la izquierda de CLASIFICACIÓN */
.fs-match-spacer{ width:132px; flex:0 0 132px; }

/* ============================ ESTADO VACÍO / FOOTER ============================ */
.fs-empty{
  background:var(--fs-card-bg);
  border:1px solid var(--fs-border);
  border-radius:8px;
  padding:60px 20px;
  text-align:center;
  color:var(--fs-text-dim);
}
.fs-empty-icon{ font-size:2rem; margin-bottom:8px; }
.fs-empty-text{ font-size:.9rem; }
.fs-empty-link{
  margin-top:12px; display:inline-block;
  background:var(--fs-blue); color:#fff;
  text-decoration:none; font-size:.82rem; font-weight:700;
  padding:8px 18px; border-radius:6px;
}
.fs-empty-link:hover{ background:#2f6fb5; color:#fff; }

/* Aviso de ventana cuando hay filtro activo */
.fs-window-note{
  font-size:.78rem; color:var(--fs-text-dim);
  padding:2px 2px 10px;
}
.fs-window-note a{ color:var(--fs-blue); font-weight:700; text-decoration:none; }
.fs-window-note a:hover{ text-decoration:underline; }

/* Bloque de proximos partidos de las ligas principales */
.fs-next-block{
  margin-top:18px;
  padding-top:14px;
  border-top:2px dashed var(--fs-border);
}
.fs-next-title{
  font-size:.78rem;
  font-weight:700;
  color:var(--fs-text-dim);
  text-transform:uppercase;
  letter-spacing:.3px;
  padding:0 2px 10px;
}
.fs-next-title strong{ color:var(--fs-blue); }

/* ============================ H2H ============================ */
.h2h-row{
  display:flex; align-items:center; gap:8px;
  padding:7px 8px; border-bottom:1px solid var(--fs-border);
}
.h2h-row:last-child{ border-bottom:none; }
.h2h-fecha{
  flex:0 0 54px; font-size:.66rem; font-weight:700;
  color:var(--fs-text-dim); letter-spacing:.2px;
}
.h2h-liga{
  flex:0 0 96px; display:flex; align-items:center; gap:5px;
  min-width:0; font-size:.65rem; color:var(--fs-text-dim);
}
.h2h-liga span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.h2h-equipos{ flex:0 1 46%; min-width:0; display:flex; flex-direction:column; gap:5px; }
.h2h-eq{ display:flex; align-items:center; gap:6px; font-size:.74rem; font-weight:500; min-width:0; }
.h2h-eq span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.h2h-goles{
  flex:1 1 auto; display:flex; flex-direction:column; gap:3px;
  align-items:center; justify-content:center;
}
.h2h-goles .goal-row{ font-size:.74rem; font-weight:600; min-height:18px; line-height:18px; }
/* El ganador de la fila: su nombre y sus goles en negrita, sin color, como
   el resto del texto del sitio. Los goles van en 600 y el ganador en 800
   porque antes estaban todos en 800 y el resalte no se distinguia. */
.h2h-eq span.win{ font-weight:800; }
.h2h-goles .goal-row.win{ font-weight:800; }
.h2h-res{
  flex:0 0 22px; height:22px; border-radius:4px; color:#fff;
  font-size:.68rem; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}

/* ============================ ACCESO (login / registro) ============================ */
.auth-wrap{
  min-height:calc(100vh - 130px);
  display:flex; align-items:center; justify-content:center;
  padding:28px 16px;
  background:linear-gradient(160deg,#f4f7fb 0%,#e6edf6 100%);
}
.auth-card{
  width:100%; max-width:390px;
  background:#fff;
  border:1px solid var(--fs-border);
  border-radius:14px;
  padding:30px 28px 26px;
  box-shadow:0 14px 36px rgba(10,31,54,.09);
}
.auth-logo{ display:block; text-align:center; margin-bottom:12px; }
.auth-logo img{ display:inline-block; height:66px; width:auto; }
.auth-titulo{ font-size:1.2rem; font-weight:800; text-align:center; letter-spacing:.2px; }
.auth-sub{ font-size:.79rem; color:var(--fs-text-dim); text-align:center;
  line-height:1.5; margin:6px 0 22px; }
.auth-error{
  background:#fdecec; color:#a33; font-size:.8rem; font-weight:600;
  padding:10px 12px; border-radius:8px; margin-bottom:14px;
  border-left:3px solid #d33;
}
.auth-campo{ margin-bottom:14px; }
.auth-campo label{
  display:block; font-size:.68rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.5px; color:var(--fs-text-dim); margin-bottom:5px;
}
.auth-campo label span{ color:#9aa7b4; }
.auth-campo input{
  width:100%; padding:11px 12px; font-size:.9rem;
  border:1px solid var(--fs-border); border-radius:8px;
  background:#fbfcfe; color:var(--fs-text); font-family:inherit;
  transition:border-color .12s, background .12s;
}
.auth-campo input:focus{ outline:none; border-color:var(--fs-blue); background:#fff;
  box-shadow:0 0 0 3px rgba(31,92,161,.10); }
.auth-btn{
  width:100%; padding:12px; margin-top:4px;
  font-size:.82rem; font-weight:800; letter-spacing:.6px; text-transform:uppercase;
  background:var(--fs-blue); color:#fff; border:none; border-radius:8px;
  cursor:pointer; transition:background .12s, transform .05s;
}
.auth-btn:hover{ background:#2f6fb5; }
.auth-btn:active{ transform:translateY(1px); }
.auth-pie{
  margin-top:20px; padding-top:16px; border-top:1px solid var(--fs-border);
  font-size:.8rem; text-align:center; color:var(--fs-text-dim);
}
.auth-pie a{ color:var(--fs-blue); font-weight:700; text-decoration:none; }
.auth-pie a:hover{ text-decoration:underline; }
/* Campo de contraseña con ojito pegado a la derecha, semitransparente.
   position:relative en .auth-pass es lo que mantiene el boton dentro del
   campo: sin esa regla el ojo se suelta y queda flotando en la pagina. */
.auth-pass{ position:relative; }
.auth-pass input{ padding-right:40px; }
.auth-ojo{
  position:absolute; right:5px; top:50%; transform:translateY(-50%);
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  padding:0; background:transparent; border:none; border-radius:7px; cursor:pointer;
  color:var(--fs-text-dim); opacity:.45;
  transition:opacity .12s, background .12s, color .12s;
}
.auth-ojo svg{ width:18px; height:18px; display:block; }
.auth-ojo .ojo-cerrar{ display:none; }
.auth-ojo.on .ojo-abrir{ display:none; }
.auth-ojo.on .ojo-cerrar{ display:block; }
.auth-ojo:hover{ opacity:.85; background:#eef2f7; }
.auth-ojo:focus-visible{ opacity:1; outline:2px solid var(--fs-blue); outline-offset:1px; }
.auth-ojo.on{ opacity:1; color:var(--fs-blue); }

/* ============================ MI CUENTA ============================ */
.mc-wrap{ max-width:1000px; margin:0 auto; padding:20px 16px 40px; }
.mc-titulo-pagina{ font-size:1.15rem; font-weight:800; letter-spacing:.5px; margin:0 0 16px; }
.mc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:16px; }
@media (max-width:760px){ .mc-grid{ grid-template-columns:1fr; } }
.mc-card{
  background:var(--fs-card-bg); border:1px solid var(--fs-border);
  border-radius:10px; padding:16px 18px;
}
.mc-card-tit{
  font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.5px;
  color:var(--fs-text-dim); margin-bottom:12px;
}
.mc-datos{ margin:0; }
.mc-datos dt{ font-size:.7rem; color:var(--fs-text-dim); font-weight:600; margin-top:9px; }
.mc-datos dt:first-child{ margin-top:0; }
.mc-datos dd{ margin:2px 0 0; font-size:.88rem; font-weight:600; }
.mc-nota{ font-size:.72rem; color:var(--fs-text-dim); font-weight:400; margin-left:6px; }
.mc-chip{
  display:inline-block; font-size:.7rem; font-weight:800; padding:3px 10px;
  border-radius:10px; background:#eef1f5; color:#5b6b7c;
}
.mc-chip.vip{ background:linear-gradient(135deg,#f7b733,#fc4a1a); color:#fff; }

.mc-vip{
  background:linear-gradient(135deg,#0a1f33 0%,#123c5e 100%); color:#fff;
  border-radius:12px; padding:22px;
}
.mc-vip.activo{ background:linear-gradient(135deg,#0d3b21 0%,#166b3a 100%); }
.mc-vip-cab{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.mc-vip-emoji{ font-size:2rem; line-height:1; }
.mc-vip-titulo{ font-size:1.1rem; font-weight:800; }
.mc-vip-sub{ font-size:.78rem; opacity:.75; margin-top:2px; }
.mc-vip-lista{ margin:0 0 18px; padding-left:18px; font-size:.84rem; line-height:1.9; }
.mc-vip-lista strong{ color:#ffd166; }
.mc-vip-btn{
  display:inline-block; background:linear-gradient(135deg,#f7b733,#fc4a1a);
  color:#1a1a1a; font-weight:800; font-size:.9rem; letter-spacing:.5px;
  text-transform:uppercase; padding:13px 34px; border-radius:9px; text-decoration:none;
  box-shadow:0 6px 18px rgba(252,74,26,.32); transition:transform .1s, box-shadow .1s;
}
.mc-vip-btn:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(252,74,26,.42); color:#1a1a1a; }
.mc-vip-nota{ margin-top:12px; font-size:.74rem; opacity:.7; line-height:1.6; }
.mc-vip-secundario{
  display:inline-block; margin-top:14px; font-size:.74rem; font-weight:700;
  color:rgba(255,255,255,.65); text-decoration:none; border-bottom:1px dotted rgba(255,255,255,.4);
}
.mc-vip-secundario:hover{ color:#fff; }

/* Aviso general de la pagina de cuenta */
.mc-msg{
  background:#eef5fd; color:#1f5ca1; border-left:3px solid var(--fs-blue);
  padding:10px 14px; border-radius:6px; font-size:.79rem; font-weight:600;
  margin-bottom:14px;
}

/* Formularios de datos y de contraseña */
.mc-form{ display:flex; flex-direction:column; gap:10px; }
.mc-form label{ display:flex; flex-direction:column; gap:4px; }
.mc-form label > span{
  font-size:.68rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.3px; color:var(--fs-text-dim);
}
.mc-form input{
  padding:9px 11px; font-size:.85rem; font-family:inherit;
  border:1px solid var(--fs-border); border-radius:6px;
  background:#fbfcfe; color:var(--fs-text);
}
.mc-form input:focus{
  outline:none; border-color:var(--fs-blue); background:#fff;
  box-shadow:0 0 0 3px rgba(31,92,161,.10);
}
.mc-btn{
  margin-top:4px; padding:10px; font-size:.76rem; font-weight:800;
  letter-spacing:.4px; text-transform:uppercase; border:none; border-radius:6px;
  background:var(--fs-blue); color:#fff; cursor:pointer; transition:background .12s;
}
.mc-btn:hover{ background:#2f6fb5; }

/* Bloque de pago VIP */
.mc-pago-aviso{
  background:#eef5fd; color:#1f5ca1; border-left:3px solid var(--fs-blue);
  padding:9px 12px; border-radius:6px; font-size:.78rem; font-weight:600; margin-bottom:12px;
}
.mc-pago-estado{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  border-radius:8px; padding:12px 14px; }
.mc-pago-estado-tit{ font-size:.85rem; font-weight:800; margin-bottom:8px; }
.mc-pago-estado-fila{ display:flex; justify-content:space-between; gap:10px;
  font-size:.76rem; padding:3px 0; }
.mc-pago-estado-fila span{ opacity:.7; }
.mc-pago-estado-nota{ margin-top:9px; font-size:.72rem; opacity:.7; line-height:1.6; }

.mc-pago-paso{ display:flex; gap:10px; margin-bottom:14px; }
.mc-num, .mc-pago-num{
  flex:none; width:22px; height:22px; border-radius:50%;
  background:rgba(255,255,255,.18); color:#fff;
  font-size:.72rem; font-weight:800;
  display:flex; align-items:center; justify-content:center; margin-top:1px;
}
.mc-pago-txt{ font-size:.8rem; line-height:1.6; }
.mc-pago-numero{
  display:flex; align-items:center; gap:10px; margin-top:7px;
  background:rgba(0,0,0,.25); border-radius:7px; padding:8px 10px;
}
.mc-pago-numero span{ font-size:1rem; font-weight:800; letter-spacing:.5px; flex:1; }
.mc-copiar{
  background:#fff; color:#1a1a1a; border:none; border-radius:5px;
  padding:5px 12px; font-size:.7rem; font-weight:800; cursor:pointer; text-transform:uppercase;
}
.mc-copiar:hover{ background:#e6e6e6; }
.mc-pago-titular{ font-size:.7rem; opacity:.65; margin-top:5px; }

.mc-pago-form{ display:flex; gap:10px; margin-bottom:14px; }
.mc-pago-campos{ flex:1; display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.mc-pago-campos label{ display:flex; flex-direction:column; gap:4px; }
.mc-pago-campos label span{ font-size:.68rem; font-weight:700; opacity:.8; }
.mc-pago-campos label em{ font-style:normal; font-weight:400; opacity:.6; }
.mc-pago-campos select, .mc-pago-campos input{
  padding:8px 9px; font-size:.8rem; font-family:inherit; border-radius:6px;
  border:1px solid rgba(255,255,255,.25); background:#fff; color:var(--fs-text);
}
.mc-pago-campos select:focus, .mc-pago-campos input:focus{
  outline:none; border-color:var(--fs-blue); box-shadow:0 0 0 3px rgba(31,92,161,.18);
}
.mc-pago-ancho{ grid-column:1 / -1; }
.mc-pago-btn{ grid-column:1 / -1; margin-top:2px; }
@media (max-width:520px){ .mc-pago-campos{ grid-template-columns:1fr; } }

/* Pie de pagina: el aviso de edad va en todas las paginas, que es lo que
   exigen las plataformas de anuncios antes de aprobar una cuenta para un
   sitio de pronosticos. */
.fs-footer{
  max-width:1240px;
  margin:0 auto;
  padding:22px 16px 44px;
  color:var(--fs-text-dim);
  font-size:.76rem;
  text-align:center;
  border-top:1px solid var(--fs-border);
  margin-top:28px;
}
.fs-foot-aviso{
  font-weight:700;
  color:var(--fs-text);
  margin-bottom:12px;
}
.fs-foot-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px 18px;
  margin-bottom:14px;
}
.fs-foot-links a{ color:var(--fs-blue); text-decoration:none; font-weight:700; }
.fs-foot-links a:hover{ text-decoration:underline; }
.fs-foot-fin{ font-size:.72rem; }

/* ====================== PAGINAS LEGALES ====================== */
.lg-wrap{
  max-width:760px;
  margin:0 auto;
  padding:26px 18px 10px;
}
.lg-title{
  font-size:1.5rem;
  font-weight:900;
  color:var(--fs-text);
  margin:0 0 18px;
}
.lg-wrap h2{
  font-size:.95rem;
  font-weight:800;
  color:var(--fs-text);
  margin:22px 0 8px;
  padding-bottom:5px;
  border-bottom:1px solid var(--fs-border);
}
.lg-wrap p,
.lg-wrap li{
  font-size:.88rem;
  line-height:1.65;
  color:var(--fs-text);
  margin:0 0 10px;
}
.lg-wrap ul{ padding-left:20px; margin:0 0 12px; }
.lg-wrap li{ margin-bottom:7px; }
.lg-wrap strong{ font-weight:800; }
.lg-aviso{
  display:block;
  padding:11px 14px;
  border-radius:9px;
  background:#fff3f3;
  border:1px solid #f2c9c9;
  color:#8b1f1f;
  font-weight:800;
  font-size:.88rem;
  margin:0 0 18px;
}
.lg-fin{
  margin-top:26px !important;
  padding-top:12px;
  border-top:1px solid var(--fs-border);
  font-size:.78rem !important;
  color:var(--fs-text-dim) !important;
}
@media (max-width:520px){
  .lg-title{ font-size:1.25rem; }
  .lg-wrap{ padding:20px 15px 8px; }
}

/* ====================== PAGINA DE LIGA ====================== */
/* /liga/<id>/: clasificacion y proximos partidos de cada competicion.
   Las tablas se estiran al ancho de la columna, con la de los partidos
   por delante de la de la clasificacion, que es lo que mas se lee. */
.lg-nav{
  display:flex;
  flex-wrap:wrap;
  gap:6px 16px;
  margin:0 0 18px;
  padding-bottom:12px;
  border-bottom:1px solid var(--fs-border);
}
.lg-nav a{
  font-size:.78rem;
  font-weight:700;
  color:var(--fs-blue);
  text-decoration:none;
}
.lg-nav a:hover{ text-decoration:underline; }

.lg-tabla{
  width:100%;
  border-collapse:collapse;
  font-size:.8rem;
  margin:0 0 22px;
}
.lg-tabla th{
  text-align:left;
  font-size:.66rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.3px;
  color:var(--fs-text-dim);
  padding:0 8px 7px;
  border-bottom:1px solid var(--fs-border);
}
.lg-tabla td{
  padding:8px;
  border-bottom:1px solid #eef2f7;
}
.lg-tabla tr:last-child td{ border-bottom:none; }
.lg-tabla tbody tr:hover{ background:#f8fafc; }
.lg-fecha{ white-space:nowrap; color:var(--fs-text-dim); font-weight:600; }
.lg-partido a{ color:var(--fs-text); font-weight:700; text-decoration:none; }
.lg-partido a:hover{ color:var(--fs-blue); }
.lg-pct{ text-align:right; font-weight:800; color:var(--fs-blue); }
.lg-pos{ color:var(--fs-text-dim); font-weight:700; width:26px; }
.lg-eq{ display:flex; align-items:center; gap:7px; font-weight:600; }
.lg-eq img{ width:18px; height:18px; object-fit:contain; }
.lg-pts{ font-weight:800; text-align:right; }
.lg-vacio{
  padding:16px;
  background:#f8fafc;
  border:1px solid var(--fs-border);
  border-radius:9px;
  font-size:.85rem;
  color:var(--fs-text-dim);
  margin:0 0 22px;
}
@media (max-width:560px){
  .lg-tabla{ font-size:.74rem; }
  .lg-tabla th, .lg-tabla td{ padding:7px 5px; }
}

/* ============================ DETALLE DE PARTIDO ============================ */
.mdetail-tab{
  flex:1;
  padding:11px 10px;
  border:none;
  background:var(--fs-card-bg);
  font-size:.8rem;
  font-weight:700;
  color:var(--fs-text-dim);
  cursor:pointer;
  border-bottom:3px solid transparent;
  transition:background .12s, color .12s;
}
.mdetail-tab:hover{ background:var(--fs-hover); color:var(--fs-text); }
.mdetail-tab.active{ color:var(--fs-blue); border-bottom-color:var(--fs-blue); }
.mdetail-content{ display:none; }
.mdetail-content.active{ display:block; }
.mdetail-subtab{
  flex:1;
  padding:8px 4px;
  border:none;
  background:var(--fs-card-bg);
  font-size:.7rem;
  font-weight:600;
  color:var(--fs-text-dim);
  cursor:pointer;
  border-bottom:2px solid transparent;
  transition:background .12s, color .12s;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mdetail-subtab:hover{ background:var(--fs-hover); }
.mdetail-subtab.active{ color:var(--fs-blue); border-bottom-color:var(--fs-blue); }
.mdetail-subcontent{ display:none; }
.mdetail-subcontent.active{ display:block; }

/* Filas de H2H (reutilizan .fs-match con columnas propias) */
.fs-match-teams{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  padding:0 8px;
}
.fs-match-teams .fs-team{ flex:1 1 0; display:flex; align-items:center; min-width:0; }
.fs-match-teams .fs-team.home{ justify-content:flex-end; }
.fs-match-teams .fs-team.away{ justify-content:flex-start; }
.fs-team-name{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fs-match-teams .fs-match-score{ flex:0 0 auto; font-weight:800; font-size:.82rem; }
.dash{ color:var(--fs-text-dim); margin:0 3px; }
.fs-match-time{ flex:0 0 70px; text-align:center; font-size:.72rem; color:var(--fs-text-dim); align-self:center; }
.fs-match-pred{ flex:0 0 96px; text-align:center; align-self:center; }

/* ============================ ANIMACIÓN ============================ */
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

/* ============================ RESPONSIVE ============================ */
@media (max-width:900px){
  .fs-layout{ flex-direction:column; }
  .fs-sidebar{ width:100%; flex:1 1 auto; position:static; max-height:none; }
  .fs-match-spacer{ display:none; }
  .fs-tabs-bar{ overflow-x:auto; }

  /* Barra superior: logo y hamburguesa en una linea, y el resto desplegado
     debajo. Antes todos los enlaces cabian en la misma fila y quedaba todo
     pegado. */
  /* Boton mas grande y redondo */
  .fs-burger{ display:flex; width:42px; height:42px; border-radius:50%; }
  .fs-burger svg{ width:22px; height:22px; }
  .fs-logo img{ height:26px; }

  /* El panel se ancla bajo el boton, alineado a la derecha, y se ajusta al
     ancho del texto mas largo. Asi el fondo del elemento seleccionado mide
     lo mismo en todos los enlaces y no queda fondo sobrando a la derecha. */
  .fs-menu{
    display:none;
    position:absolute; top:100%; right:10px;
    min-width:max-content; width:auto; max-width:calc(100% - 20px);
    margin-left:0;
    background:var(--fs-card-bg);
    border:1px solid var(--fs-border);
    border-radius:10px;
    box-shadow:0 10px 26px rgba(10,31,45,.16);
    padding:6px;
    z-index:70;
  }
  .fs-header.menu-abierto .fs-menu{ display:block; }

  .fs-nav{
    flex-direction:column; align-items:stretch; gap:2px;
    overflow:visible; margin-top:0;
    border-top:none; padding-top:0;
  }
  .fs-nav-link{ justify-content:flex-start; padding:9px 12px; font-size:.88rem; }

  .fs-nav-user{
    flex-direction:column; align-items:stretch; gap:6px;
    margin-left:0; padding:6px 0 0;
    border-top:1px solid var(--fs-border); margin-top:4px;
  }
  .fs-nav-name{ text-align:left; padding:6px 12px; }
  /* Los dos botones como items de lista, no como barras estiradas con el
     texto centrado en medio de mucho fondo sobrando. */
  .fs-nav-cta{ text-align:left; }
}


/* ============================ MIS APUESTAS ============================ */
.ma-cab{ max-width:1500px; margin:0 auto; padding:20px 16px 6px;
  display:flex; align-items:center; justify-content:space-between; gap:12px; }
.ma-titulo{ font-size:1.15rem; font-weight:800; letter-spacing:.5px; margin:0; }
.ma-btn-editar, .ma-btn-volver{
  padding:8px 16px; font-size:.74rem; font-weight:800; letter-spacing:.4px;
  text-transform:uppercase; border-radius:7px; cursor:pointer; text-decoration:none;
  border:1px solid var(--fs-blue); background:transparent; color:var(--fs-blue);
  transition:background .12s, color .12s;
}
.ma-btn-editar:hover, .ma-btn-volver:hover{ background:var(--fs-blue); color:#fff; }

.ma-msg{ max-width:1500px; margin:0 auto 10px; padding:10px 14px; font-size:.79rem;
  font-weight:600; background:#eef5fd; color:#1f5ca1; border-left:3px solid var(--fs-blue);
  border-radius:6px; }

.ma-vacio{ max-width:640px; margin:50px auto; text-align:center; font-size:.92rem;
  font-weight:600; color:var(--fs-text-dim); }
.ma-vacio-sub{ font-size:.78rem; font-weight:400; margin-top:8px; line-height:1.6; }

/* Rejilla de 4 columnas: 2 parejas de [editar | resultado] */
.ma-grid{ max-width:1500px; margin:0 auto; padding:6px 16px 40px;
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; align-items:start; }
.ma-grid-liga{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.ma-celda-vacia{ min-height:1px; }

.ma-tarjeta{ background:var(--fs-card-bg); border:1px solid var(--fs-border);
  border-radius:10px; overflow:hidden; }
.ma-resultado{ background:#fbfcfe; }

.ma-cab-tarjeta{ display:flex; align-items:center; gap:7px; padding:9px 12px;
  border-bottom:1px solid var(--fs-border); background:#fff; }
.ma-lg{ font-size:.7rem; font-weight:800; color:var(--fs-text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ma-fecha{ margin-left:auto; font-size:.66rem; color:var(--fs-text-dim); white-space:nowrap; }

.ma-equipos{ display:flex; align-items:center; gap:8px; padding:11px 12px;
  border-bottom:1px solid var(--fs-border); }
.ma-eq{ display:flex; align-items:center; gap:6px; flex:1; min-width:0; font-size:.78rem;
  font-weight:700; }
.ma-eq img{ width:20px; height:20px; object-fit:contain; flex:none; }
.ma-eq span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ma-eq-der{ justify-content:flex-end; text-align:right; }
.ma-vs{ font-size:.64rem; font-weight:800; color:var(--fs-text-dim); flex:none; }

/* Filas de mercado con desplegable */
.ma-form{ padding:4px 0; }
.ma-fila{ padding:7px 12px; border-bottom:1px solid #f0f3f7; }
.ma-fila:last-of-type{ border-bottom:none; }
.ma-fila-cab{ display:flex; align-items:baseline; justify-content:space-between; gap:8px;
  margin-bottom:4px; }
.ma-fila-nom{ font-size:.68rem; font-weight:700; color:var(--fs-text-dim);
  text-transform:uppercase; letter-spacing:.3px; }
.ma-pct{ font-size:.76rem; font-weight:800; color:var(--fs-blue); flex:none; }

.ma-control{ position:relative; }
.ma-select{ width:100%; padding:7px 9px; font-size:.76rem; font-family:inherit;
  border:1px solid var(--fs-border); border-radius:6px; background:#fff;
  color:var(--fs-text); cursor:pointer; }
.ma-select:focus{ outline:none; border-color:var(--fs-blue);
  box-shadow:0 0 0 3px rgba(31,92,161,.10); }
.ma-select:disabled{ background:#f4f6f9; color:var(--fs-text-dim); cursor:not-allowed; }

.ma-pie-form{ padding:10px 12px; }
.ma-btn-guardar{ width:100%; padding:9px; font-size:.72rem; font-weight:800;
  letter-spacing:.4px; text-transform:uppercase; background:var(--fs-blue); color:#fff;
  border:none; border-radius:6px; cursor:pointer; transition:background .12s; }
.ma-btn-guardar:hover{ background:#2f6fb5; }
.ma-bloqueado-txt{ display:block; text-align:center; font-size:.7rem; font-weight:600;
  color:#a15c00; background:#fff6e8; border:1px dashed #e0b978; border-radius:6px;
  padding:8px; }

/* La tarjeta bloqueada se muestra en solo lectura hasta pulsar Editar todo */
.ma-tarjeta.ma-bloqueada .ma-select:not(:disabled){ opacity:.55; }
.ma-tarjeta.ma-bloqueada .ma-btn-guardar{ display:none; }
.ma-tarjeta.ma-editando .ma-select:disabled{ opacity:1; }
.ma-tarjeta.ma-editando .ma-bloqueado-txt{ display:none; }

/* Borde que se enciende 3s cuando llegas desde un enlace de Pronosticos */
.ma-tarjeta.ma-destacada{ border-color:var(--fs-blue);
  box-shadow:0 0 0 3px rgba(59,130,246,.18); }

/* Aviso de ventana de apuesta */
.ma-aviso{ display:flex; align-items:flex-start; gap:8px; padding:9px 12px;
  border-radius:9px; background:#fff8e6; border:1px solid #f2dfab;
  font-size:.72rem; line-height:1.5; color:#7a5b12; font-weight:600;
  margin-bottom:14px; }
.ma-aviso b{ font-weight:800; }

/* Tarjeta de resultados */
.ma-fila-res{ display:flex; align-items:center; gap:8px; padding:7px 12px;
  border-bottom:1px solid #f0f3f7; font-size:.74rem; }
.ma-nombre-mercado{ font-size:.65rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.3px; color:var(--fs-text-dim); flex:none; width:88px; }
.ma-elegido{ flex:1; min-width:0; font-weight:600; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.ma-marca{ flex:none; font-weight:900; width:18px; text-align:center; }
.ma-ok{ color:#1a8a4a; }
.ma-no{ color:#c0392b; }
.ma-pend{ color:#b8c2cc; }

.ma-resumen{ padding:12px; text-align:center; background:#f4f7fb;
  border-top:1px solid var(--fs-border); }
.ma-resumen-txt{ font-size:.82rem; font-weight:600; color:var(--fs-text-dim); }
.ma-resumen-txt strong{ font-size:1.02rem; color:var(--fs-text); }
.ma-resumen-sub{ display:block; font-size:.66rem; color:#93a1b0; margin-top:2px; }

/* Selector de liga */
.ma-selector{ max-width:1500px; margin:0 auto 14px; padding:0 16px; }
.ma-selector-form select{ width:100%; max-width:420px; padding:9px 11px; font-size:.82rem;
  font-family:inherit; border:1px solid var(--fs-border); border-radius:7px;
  background:#fff; color:var(--fs-text); cursor:pointer; }
.ma-selector-form select:focus{ outline:none; border-color:var(--fs-blue);
  box-shadow:0 0 0 3px rgba(31,92,161,.10); }

@media (max-width:1200px){
  .ma-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .ma-grid-liga{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:760px){
  .ma-grid, .ma-grid-liga{ grid-template-columns:minmax(0,1fr); }
  .ma-celda-vacia{ display:none; }
  .ma-nombre-mercado{ width:74px; }
}

/* ==========================================================================
   Combinadas (solo admin) · prefijo cb-
   Los boletos que el motor publica cada medianoche para los partidos de
   mañana, su historial con tracking y la comparativa con la línea base.
   Se apoya en las mismas variables del tema (--fs-*).
   ========================================================================== */

.cb-wrap{ max-width:1500px; margin:0 auto; padding:0 16px 48px; }

.cb-cab{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin:4px 0 14px; }
.cb-titulo{ margin:0; font-size:1rem; font-weight:800; letter-spacing:.4px;
  text-transform:uppercase; }
.cb-sub{ font-size:.72rem; color:var(--fs-text-dim); }

/* Aviso del dia: como se genero el lote de mañana. */
.aviso-dia{ background:var(--fs-card-bg); border:1px solid var(--fs-border);
  border-left:3px solid var(--fs-blue); border-radius:9px; padding:11px 14px;
  margin-bottom:18px; font-size:.72rem; line-height:1.55; color:var(--fs-text-dim); }
.aviso-dia b{ color:var(--fs-text); }
.aviso-dia ul{ margin:7px 0 0; padding-left:17px; }
.aviso-dia li{ margin:2px 0; }

/* Cabecera de seccion desplegable. */
.sec-cab{ display:flex; align-items:center; gap:10px; background:var(--fs-dark-panel);
  color:#fff; padding:9px 13px; border-radius:9px 9px 0 0; margin:20px 0 0;
  cursor:pointer; user-select:none; }
.sec-cab:only-of-type{ margin-top:0; }
.sec-flecha{ flex:none; font-size:.68rem; transition:transform .15s; }
.sec-cab.cerrado .sec-flecha{ transform:rotate(-90deg); }
.sec-nombre{ font-weight:800; font-size:.78rem; letter-spacing:.4px;
  text-transform:uppercase; white-space:nowrap; }
.sec-ficha{ font-size:.65rem; color:#9fb3c8; white-space:nowrap; }
.sec-resumen{ margin-left:auto; display:flex; gap:16px; flex-wrap:wrap; }
.sec-resumen span{ display:flex; flex-direction:column; align-items:flex-end;
  line-height:1.15; }
.sec-resumen .s-k{ font-size:.55rem; text-transform:uppercase; letter-spacing:.4px;
  color:#9fb3c8; }
.sec-resumen b{ font-size:.78rem; font-variant-numeric:tabular-nums; }
.sec-resumen b.verde{ color:#4ade80; }
.sec-resumen b.rojo{ color:#f87171; }
.sec-resumen b.gris{ color:#cbd5e1; }

.cb-bloque{ display:none; padding:12px; background:var(--fs-league-bg);
  border:1px solid var(--fs-border); border-top:none;
  border-radius:0 0 9px 9px; }
.cb-bloque.abierto{ display:block; }

.cb-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
  gap:12px; }

.cb-vacio{ background:var(--fs-card-bg); border:1px dashed var(--fs-border);
  border-radius:9px; padding:26px 16px; text-align:center;
  font-size:.78rem; color:var(--fs-text-dim); }

/* --------------------------------------------------------------- boleto */

.bet{ background:var(--fs-card-bg); border:1px solid var(--fs-border);
  border-radius:10px; overflow:hidden; }
.bet-cab{ display:flex; align-items:center; gap:8px; padding:8px 12px;
  background:#f4f7fb; border-bottom:1px solid var(--fs-border); flex-wrap:wrap; }
.bet-tipo{ font-size:.68rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.3px; }
.bet-fecha{ margin-left:auto; font-size:.65rem; color:var(--fs-text-dim);
  white-space:nowrap; }
.fallo-chip{ font-size:.58rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.3px; background:#fdeceb; color:#c0392b; border-radius:4px;
  padding:2px 6px; white-space:nowrap; }
.estado{ font-size:.58rem; font-weight:800; letter-spacing:.4px;
  border-radius:4px; padding:2px 6px; white-space:nowrap; }
.estado.win{ background:#e3f6ea; color:#0f7a3d; }
.estado.loss{ background:#fdeceb; color:#c0392b; }
.estado.pend{ background:#eef1f6; color:var(--fs-text-dim); }
.estado.anul{ background:#f2f2f4; color:#8a8f98; }

.patas{ padding:2px 0; }
.pata{ display:flex; align-items:center; gap:8px; padding:7px 12px;
  border-bottom:1px solid #f0f3f7; font-size:.73rem; }
.pata:last-child{ border-bottom:none; }
.marca{ flex:none; width:15px; text-align:center; font-weight:900; }
.marca.ok{ color:#12a150; }
.marca.no{ color:#c0392b; }
.marca.es{ color:#b8c2cc; }
.marca.anul{ color:#9aa3ad; }
.pata-eq{ flex:1; min-width:0; }
.pata-eq .eq{ font-weight:700; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
.pata-eq .mk{ font-size:.67rem; color:var(--fs-text-dim); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.pata-eq .mk b{ color:var(--fs-text); font-weight:600; }
.pata-real{ flex:none; font-size:.65rem; color:var(--fs-text-dim);
  white-space:nowrap; font-variant-numeric:tabular-nums; }
.pata-odd{ flex:none; font-weight:800; font-variant-numeric:tabular-nums; }
.tag-cambio{ flex:none; font-size:.55rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.3px; color:var(--fs-blue); background:#dbeafc;
  border-radius:3px; padding:1px 5px; }
.tag-repro{ flex:none; font-size:.55rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.3px; color:#8a5a00; background:#fdf1d6;
  border-radius:3px; padding:1px 5px; }
.tag-susp{ flex:none; font-size:.55rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.3px; color:#7d3c98; background:#f3e8f8;
  border-radius:3px; padding:1px 5px; }
.tag-anul{ flex:none; font-size:.55rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.3px; color:#5d6672; background:#eceef1;
  border-radius:3px; padding:1px 5px; }
.aviso-chip{ font-size:.58rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.3px; background:#fdf1d6; color:#8a5a00; border-radius:4px;
  padding:2px 6px; white-space:nowrap; }

.bet-pie{ display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:8px 12px; border-top:1px solid var(--fs-border); background:#fbfcfe; }
.pie-bloque{ display:flex; flex-direction:column; gap:1px; }
.pie-bloque .k{ font-size:.58rem; text-transform:uppercase; letter-spacing:.3px;
  color:var(--fs-text-dim); }
.pie-bloque .v{ font-size:.8rem; font-weight:800; font-variant-numeric:tabular-nums; }
.pie-bloque.total .v{ color:var(--fs-blue); font-size:.95rem; }
.v.verde{ color:#12a150; }
.v.rojo{ color:#c0392b; }
.v.gris{ color:var(--fs-text-dim); font-weight:700; }
.pie-nota{ margin-left:auto; font-size:.63rem; color:var(--fs-text-dim); }
.pie-nota b{ font-weight:800; }

/* -------------------------------------------------------------- filtros */

.cb-filtros{ display:flex; gap:6px; flex-wrap:wrap; margin:0 0 14px; }
.cb-filtro{ padding:5px 12px; border-radius:999px; border:1px solid var(--fs-border);
  background:var(--fs-card-bg); font-size:.71rem; font-weight:700;
  color:var(--fs-text-dim); text-decoration:none; }
.cb-filtro:hover{ color:var(--fs-text); border-color:#c9d4e0; }
.cb-filtro.activo{ background:var(--fs-blue); border-color:var(--fs-blue); color:#fff; }

/* ---------------------------------------------------------- ligas de mañana */

.cb-tabla{ width:100%; border-collapse:collapse; background:var(--fs-card-bg);
  border:1px solid var(--fs-border); border-radius:9px; overflow:hidden;
  font-size:.72rem; }
.cb-tabla th{ background:#f4f7fb; text-align:left; padding:8px 10px;
  font-size:.6rem; text-transform:uppercase; letter-spacing:.3px;
  color:var(--fs-text-dim); border-bottom:1px solid var(--fs-border);
  white-space:nowrap; }
.cb-tabla td{ padding:8px 10px; border-bottom:1px solid #f0f3f7;
  vertical-align:top; font-variant-numeric:tabular-nums; }
.cb-tabla tr:last-child td{ border-bottom:none; }
.cb-liga-nom{ font-weight:700; }
.cb-liga-sub{ font-size:.61rem; color:var(--fs-text-dim); margin-top:1px; }
.cb-num{ text-align:right; white-space:nowrap; }
.liga-est{ font-size:.58rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.3px; border-radius:4px; padding:2px 6px; white-space:nowrap; }
.liga-est.entra{ background:#e3f6ea; color:#0f7a3d; }
.liga-est.parcial{ background:#fff6e8; color:#a15c00; }
.liga-est.no{ background:#fdeceb; color:#c0392b; }
.liga-est.sin{ background:#eef1f6; color:var(--fs-text-dim); }

/* ------------------------------------------------------------ comparativa */

.cmp-intro{ font-size:.73rem; line-height:1.6; color:var(--fs-text-dim);
  margin-bottom:14px; }
.cmp-intro b{ color:var(--fs-text); }
.cmp-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:12px; margin-bottom:16px; }
.cmp-cuadro{ background:var(--fs-card-bg); border:1px solid var(--fs-border);
  border-radius:9px; padding:12px; }
.cmp-cuadro .cmp-kt{ font-size:.6rem; text-transform:uppercase; letter-spacing:.3px;
  color:var(--fs-text-dim); margin-bottom:8px; }
.cmp-2x2{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.cmp-cel{ background:var(--fs-league-bg); border:1px solid var(--fs-border);
  border-radius:7px; padding:9px; text-align:center; }
.cmp-cel .n{ font-size:1.1rem; font-weight:800; font-variant-numeric:tabular-nums; }
.cmp-cel .t{ font-size:.58rem; text-transform:uppercase; letter-spacing:.3px;
  color:var(--fs-text-dim); margin-top:2px; }
.cmp-cel.verde .n{ color:#12a150; }
.cmp-cel.rojo .n{ color:#c0392b; }
.cmp-muestra{ margin-top:10px; }
.cmp-muestra-barra{ height:8px; border-radius:99px; background:#eef1f6; overflow:hidden; }
.cmp-muestra-barra i{ display:block; height:100%; background:var(--fs-blue); }
.cmp-muestra-txt{ font-size:.62rem; color:var(--fs-text-dim); margin-top:5px; }

.cmp-par{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;
  margin-bottom:14px; }
.cmp-par-cab{ font-size:.62rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.3px; color:var(--fs-text-dim); margin-bottom:6px; }
.cmp-par-cab.mod{ color:var(--fs-blue); }

@media (max-width:820px){
  .cb-grid{ grid-template-columns:minmax(0,1fr); }
  .cmp-par{ grid-template-columns:minmax(0,1fr); }
  .sec-resumen{ gap:10px; }
  .sec-ficha{ display:none; }
}