/* =====================================================
   FootStatLab — Home Redesign v4 (Dark-first)
   Goal: Trading terminal + ESPN energy (more color + depth)
   Safe override layer on top of fs.css
   ===================================================== */

:root{
  --bg-main:#070B14;
  --bg-deep:#050812;
  --card:#0E1628;
  --card2:#101C33;
  --card3:#0B1222;
  --line: rgba(255,255,255,.08);

  --cyan:#22d3ee;
  --blue:#3b82f6;
  --violet:#8b5cf6;
  --emerald:#10b981;
  --amber:#f59e0b;
  --rose:#fb7185;

  --glow-cyan: 0 0 0 1px rgba(34,211,238,.18), 0 0 28px rgba(34,211,238,.14);
  --glow-blue: 0 0 0 1px rgba(59,130,246,.18), 0 0 28px rgba(59,130,246,.14);
  --glow-emerald: 0 0 0 1px rgba(16,185,129,.18), 0 0 28px rgba(16,185,129,.14);
  --glow-violet: 0 0 0 1px rgba(139,92,246,.18), 0 0 28px rgba(139,92,246,.14);
  --glow-amber: 0 0 0 1px rgba(245,158,11,.18), 0 0 28px rgba(245,158,11,.14);
}

body{
  background:
    radial-gradient(1200px 700px at 15% -10%, rgba(34,211,238,.10), transparent 55%),
    radial-gradient(900px 600px at 110% 10%, rgba(139,92,246,.10), transparent 60%),
    radial-gradient(800px 520px at 50% 110%, rgba(16,185,129,.08), transparent 60%),
    linear-gradient(180deg, var(--bg-deep), var(--bg-main));
}

/* ===== Layout: remove sidebar, move nav to top ===== */
.app{ grid-template-columns: 1fr !important; }
.aside{ display:none !important; }
.main{ padding: 26px 22px 60px; max-width: 1240px; margin: 0 auto; }

@media (max-width: 900px){
  .main{ padding: 18px 14px 48px; }
}

/* ===== Topbar: brand + center nav ===== */
.topbar{
  background: rgba(5,8,18,.78) !important;
  border-bottom: 1px solid var(--line) !important;
}
.topbar .topbar-left{
  display:flex; align-items:center; gap:10px;
}
.fsl-brand{
  display:flex; align-items:center; gap:10px;
  font-family: var(--font-head);
  font-weight: 800;
  letter-spacing: -.4px;
}

/* Brand (logo) */
.fsl-brand .brand-mark{
  height: 36px;
  width: 36px;
  flex: 0 0 36px;
  filter: drop-shadow(0 0 18px rgba(45,212,191,.18));
}
.fsl-brand .brand-text{
  display:inline-flex;
  align-items:baseline;
  gap:0;
  font-weight: 800;
  font-size: 18px;
  line-height: 1;
  letter-spacing: -0.6px;
}
.fsl-brand .brand-foot{ color: var(--text); }
.fsl-brand .brand-stat{ color: var(--cyan); }
.fsl-brand .brand-lab{ color: var(--emerald); }

/* Accessibility helper */
.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip: rect(0,0,0,0);
  white-space:nowrap; border:0;
}

.nav-top{
  position: relative;
  display:flex;
  align-items:center;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.02);
  border-radius: 999px;
}

/* Sliding pill — se mueve con JS */
.nav-top .nav-pill{
  position: absolute;
  top: 5px;
  bottom: 5px;
  border-radius: 999px;
  background: linear-gradient(135deg, #10b981, #0fcfb0 55%, #22d3ee);
  box-shadow: 0 0 0 1px rgba(16,185,129,.20), 0 4px 18px rgba(16,185,129,.20);
  /* Spring easing suave: accelera al salir, decelera con micro-rebote al llegar */
  transition:
    left   .42s cubic-bezier(.25, 1.35, .45, 1),
    width  .35s cubic-bezier(.25, 1.15, .45, 1),
    opacity .20s ease;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  will-change: left, width;
}
.nav-top .nav-pill.ready{ opacity: 1; }
/* Cuando el pill aparece por primera vez: pequeño scale-in */
.nav-top .nav-pill.ready:not(.moved){
  animation: pillAppear .30s cubic-bezier(.34,1.4,.64,1) forwards;
}
@keyframes pillAppear{
  from{ opacity:0; transform:scaleX(.7); }
  to  { opacity:1; transform:scaleX(1); }
}
/* Fade-in suave de página completa */
@keyframes pageFadeIn{
  from{ opacity:0; transform:translateY(4px); }
  to  { opacity:1; transform:translateY(0); }
}
body{
  animation: pageFadeIn .22s ease forwards;
}

.nav-top a{
  position: relative;
  z-index: 1;
  padding: 8px 12px;
  border-radius: 999px;
  /* Inactivos bien visibles */
  color: rgba(228,234,255,.75);
  font-weight: 600;
  font-size: 13px;
  border: 1px solid transparent;
  /* color activo → inactivo: espera a que el pill salga (.20s delay) */
  transition: color .15s ease .20s;
}
.nav-top a:hover{
  color: #e4eaff;
}
/* Al activarse: oscurecer inmediatamente (sin delay) */
.nav-top a.active{
  color: #061510;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  transition: color .10s ease 0s;
}

@media (max-width: 980px){
  .nav-top{ display:none; } /* mobile keeps simple (brand + auth) */
}

/* ===== Results/Table screens: match Home visual language ===== */
section.card{
  border-radius: 22px;
  border: 1px solid var(--line);
  background:
    radial-gradient(900px 420px at 0% 0%, rgba(34,211,238,.10), transparent 60%),
    radial-gradient(700px 360px at 100% 30%, rgba(139,92,246,.08), transparent 62%),
    rgba(14,22,40,.62);
  box-shadow: 0 18px 60px rgba(0,0,0,.32);
  padding: 22px 22px;
}
section.card h2{
  font-family: var(--font-head);
  font-weight: 800;
  letter-spacing: -.8px;
  margin: 0;
}

/* Filters as "terminal" controls */
.filters{
  margin-top: 14px !important;
  gap: 10px !important;
}
.filters select, .filters input{
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(0,0,0,.20) !important;
  padding: 10px 12px !important;
  min-width: 150px;
}
.filters select:focus, .filters input:focus{
  border-color: rgba(34,211,238,.35) !important;
  box-shadow: var(--glow-cyan) !important;
}

/* Auth button in topbar — same gradient as CTA */
.btn-auth{
  border-radius: 999px !important;
  padding: 8px 18px !important;
  border: none !important;
  background: linear-gradient(135deg, #10b981, #0fcfb0 55%, #22d3ee) !important;
  color: #061510 !important;
  font-weight: 800 !important;
  box-shadow: 0 0 0 1px rgba(16,185,129,.25), 0 4px 20px rgba(16,185,129,.22);
  transition: transform .15s, box-shadow .15s, filter .15s;
}
.btn-auth:hover{
  filter: brightness(1.08) !important;
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(16,185,129,.35), 0 6px 24px rgba(16,185,129,.30) !important;
}

/* ===== Modal: center + new style ===== */
dialog.modal{
  width: min(520px, 92vw);
  padding: 0;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  background:
    radial-gradient(900px 420px at 0% 0%, rgba(34,211,238,.12), transparent 55%),
    radial-gradient(700px 360px at 100% 20%, rgba(139,92,246,.10), transparent 58%),
    rgba(10,16,30,.92);
  box-shadow: 0 28px 80px rgba(0,0,0,.55);
  position: fixed;
  inset: 0;
  margin: auto;
  overflow: hidden;
}
dialog.modal::backdrop{
  background: rgba(2,6,16,.66);
  backdrop-filter: blur(10px);
}
.modal-header{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.modal-header strong{
  font-family: var(--font-head);
  font-weight: 900;
  letter-spacing: -.4px;
}
.btn-modal-close{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(210,225,255,.88);
  border-radius: 999px;
  padding: 8px 12px;
  cursor: pointer;
  font-weight: 800;
}
.btn-modal-close:hover{ border-color: rgba(34,211,238,.28); box-shadow: var(--glow-cyan); }

dialog.modal .content{
  padding: 16px 18px 18px;
}

dialog.modal .tabs{
  display:flex;
  gap: 8px;
  padding: 6px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  border-radius: 999px;
  margin: 12px 0 14px;
}
dialog.modal .tabs button{
  flex: 1 1 0;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(210,225,255,.78);
  padding: 10px 12px;
  cursor: pointer;
  font-weight: 800;
}
dialog.modal .tabs button.active{
  color: #071016;
  background: linear-gradient(135deg, rgba(16,185,129,.95), rgba(34,211,238,.75));
  box-shadow: var(--glow-emerald);
}

/* Inputs inside modal */
dialog.modal input{
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.20);
  color: rgba(240,248,255,.92);
  padding: 10px 12px;
}
dialog.modal input:focus{
  outline: none;
  border-color: rgba(34,211,238,.35);
  box-shadow: var(--glow-cyan);
}

/* ===== Home blocks ===== */
.home{
  display:flex;
  flex-direction:column;
  gap: 22px;
}

.hero{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 22px;
  align-items: stretch;
}
@media (max-width: 980px){
  .hero{ grid-template-columns: 1fr; }
}

.hero-copy{
  padding: 28px 28px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background:
    radial-gradient(900px 420px at 0% 0%, rgba(34,211,238,.12), transparent 60%),
    radial-gradient(700px 360px at 100% 40%, rgba(139,92,246,.10), transparent 60%),
    rgba(14,22,40,.72);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  position: relative;
  overflow:hidden;
}
.hero-copy:before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(600px 260px at 20% 0%, rgba(34,211,238,.18), transparent 60%),
    radial-gradient(520px 240px at 100% 30%, rgba(59,130,246,.12), transparent 62%);
  opacity:.35;
  pointer-events:none;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(16,185,129,.28);
  background: rgba(16,185,129,.10);
  color: rgba(167,243,208,.95);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 11px;
  position: relative;
  z-index: 1;
}
.pill .live-dot{
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--emerald);
  box-shadow: 0 0 16px rgba(16,185,129,.55);
}

.hero-title{
  font-family: var(--font-head);
  font-weight: 800;
  letter-spacing: -1.2px;
  margin-top: 14px;
  font-size: clamp(38px, 4.1vw, 58px);
  line-height: 1.02;
  position: relative;
  z-index: 1;
}
.hero-title .grad{
  background: linear-gradient(135deg, var(--emerald), var(--cyan));
  -webkit-background-clip: text;
  background-clip:text;
  color: transparent;
}
.hero-sub{
  margin-top: 14px;
  max-width: 52ch;
  color: rgba(210,225,255,.75);
  font-size: 15px;
  position: relative;
  z-index: 1;
}

.hero-cta{ display:flex; gap: 12px; align-items:center; margin-top: 18px; position: relative; z-index: 1; flex-wrap: wrap; }
.btn-cta{
  background: linear-gradient(135deg, #10b981, #0fcfb0 55%, #22d3ee) !important;
  border-color: rgba(16,185,129,.22) !important;
  color: #061510 !important;
  font-weight: 800 !important;
  box-shadow: var(--glow-emerald);
}
.btn-cta:hover{ transform: translateY(-1px); filter: brightness(1.07); }

.hero-kpis{
  display:flex; gap: 18px; flex-wrap: wrap;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.06);
  position: relative; z-index: 1;
}
.kpi{
  min-width: 150px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.14);
}
.kpi .num{
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -.6px;
}
.kpi .lab{
  font-size: 11px;
  color: rgba(210,225,255,.68);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-top: 2px;
}

.hero-panel{
  border-radius: 22px;
  border: 1px solid var(--line);
  background:
    radial-gradient(700px 420px at 0% 30%, rgba(59,130,246,.10), transparent 60%),
    radial-gradient(520px 340px at 100% 0%, rgba(245,158,11,.10), transparent 60%),
    rgba(16,28,51,.62);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  padding: 18px;
  overflow:hidden;
  position: relative;
}
.hero-panel .panel-head{
  display:flex; align-items:center; justify-content: space-between;
  padding: 6px 6px 12px;
}
.panel-badge{
  display:inline-flex; align-items:center; gap: 8px;
  font-size: 12px;
  font-weight: 800;
  color: rgba(210,225,255,.75);
}
.panel-badge .dot{
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--cyan);
  box-shadow: 0 0 18px rgba(34,211,238,.55);
}
.panel-tag{
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(245,158,11,.25);
  background: rgba(245,158,11,.10);
  color: rgba(253,230,138,.9);
}

.live-list{ display:flex; flex-direction: column; gap: 10px; }
.live-item{
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(0,0,0,.16);
  border-radius: 16px;
  padding: 12px 12px;
  display:flex;
  justify-content: space-between;
  gap: 12px;
  align-items:center;
  transition: transform .15s, border-color .15s, background .15s;
}
.live-item:hover{
  transform: translateY(-1px);
  border-color: rgba(34,211,238,.18);
  background: rgba(0,0,0,.22);
}
/* ===== Hero panel · Última jornada analizada ===== */
.last-round-shell{
  min-height: 544px;
}

.last-round-panel{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.lr-sub{
  color: rgba(210,225,255,.72);
  font-size: 13px;
  line-height: 1.4;
  padding: 0 6px 2px;
}

.lr-kpis{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 2px;
}

.lr-kpi{
  border: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(220px 120px at 0% 0%, rgba(34,211,238,.10), transparent 70%),
    rgba(255,255,255,.03);
  border-radius: 16px;
  padding: 12px 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.lr-kpi-num{
  font-family: var(--font-head);
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -1px;
  color: #f8fbff;
  text-shadow: 0 0 18px rgba(34,211,238,.12);
}

.lr-kpi-lab{
  margin-top: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(210,225,255,.62);
}

.lr-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.lr-item{
  display:block;
  text-decoration:none;
  color:inherit;
  border: 1px solid rgba(255,255,255,.07);
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.015)),
    rgba(0,0,0,.16);
  border-radius: 16px;
  padding: 12px 13px;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.lr-item:hover{
  transform: translateY(-1px);
  border-color: rgba(34,211,238,.18);
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
  background:
    linear-gradient(180deg, rgba(34,211,238,.03), rgba(255,255,255,.015)),
    rgba(0,0,0,.19);
}

.lr-item-top,
.lr-item-mid,
.lr-item-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.lr-item-mid,
.lr-item-bottom{
  margin-top: 8px;
}

.lr-teams{
  min-width:0;
  font-weight: 800;
  font-size: 15px;
  color: #f5f9ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lr-teams span{
  color: rgba(210,225,255,.45);
  font-weight: 700;
  margin: 0 4px;
}

.lr-league{
  flex-shrink:0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(180,198,228,.82);
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid rgba(110,130,170,.16);
  background: rgba(72,97,145,.15);
}

.lr-strategy{
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #57f0d0;
  border: 1px solid rgba(45,212,191,.22);
  background: rgba(45,212,191,.12);
  padding: 5px 8px;
  border-radius: 999px;
}

.lr-signal{
  flex:1;
  min-width:0;
  font-size: 12px;
  font-weight: 700;
  color: rgba(235,242,255,.88);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lr-score{
  flex-shrink:0;
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -.5px;
  color: #ffffff;
}

.lr-confidence{
  font-size: 12px;
  color: rgba(196,214,238,.72);
  font-weight: 700;
}

.lr-outcome{
  flex-shrink:0;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
}

.lr-outcome.ok{
  color: #9cf3cf;
  border-color: rgba(16,185,129,.26);
  background: rgba(16,185,129,.12);
}

.lr-outcome.miss{
  color: #f4b4c2;
  border-color: rgba(244,63,94,.24);
  background: rgba(244,63,94,.10);
}

.lr-empty{
  border: 1px dashed rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  border-radius: 18px;
  padding: 20px 16px;
  color: rgba(210,225,255,.72);
}

.lr-empty-title{
  font-weight: 800;
  color: #eef5ff;
  margin-bottom: 6px;
}

.lr-empty-text{
  font-size: 13px;
  line-height: 1.45;
}

.lr-cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top: 4px;
  padding: 10px 2px 0;
  color: var(--cyan);
  font-size: 13px;
  font-weight: 800;
  text-decoration:none;
}

.lr-cta:hover{
  text-decoration: underline;
}

@media (max-width: 980px){
  .last-round-shell{
    min-height: auto;
  }
}

@media (max-width: 560px){
  .lr-kpis{
    grid-template-columns: 1fr;
  }

  .lr-item-top,
  .lr-item-mid,
  .lr-item-bottom{
    flex-direction: column;
    align-items: flex-start;
  }

  .lr-league,
  .lr-score,
  .lr-outcome{
    align-self: flex-start;
  }
}
.team{
  display:flex; align-items:center; gap: 10px;
  min-width: 0;
}
.badge{
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(210,225,255,.78);
  background: rgba(255,255,255,.03);
}
.badge.good{ border-color: rgba(16,185,129,.25); background: rgba(16,185,129,.10); color: rgba(167,243,208,.95); }
.badge.warn{ border-color: rgba(245,158,11,.25); background: rgba(245,158,11,.10); color: rgba(253,230,138,.95); }
.badge.ml{ border-color: rgba(139,92,246,.25); background: rgba(139,92,246,.10); color: rgba(221,214,254,.95); }

.score{
  font-family: var(--font-head);
  font-weight: 800;
  letter-spacing: -.6px;
  font-size: 18px;
  white-space: nowrap;
}
.meta{
  display:flex; align-items:center; gap: 8px;
  flex-wrap: wrap;
  justify-content:flex-end;
}

/* ===== Radar row ===== */
.radar{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 980px){
  .radar{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .radar{ grid-template-columns: 1fr; }
}

.radar-card{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.02);
  padding: 14px 14px;
  position: relative;
  overflow:hidden;
}
.radar-card:before{
  content:"";
  position:absolute; inset:-2px;
  opacity:.32;
  background: radial-gradient(520px 220px at 0% 0%, rgba(34,211,238,.18), transparent 60%);
  pointer-events:none;
}
.radar-card.blue:before{ background: radial-gradient(520px 220px at 0% 0%, rgba(59,130,246,.18), transparent 60%); }
.radar-card.violet:before{ background: radial-gradient(520px 220px at 0% 0%, rgba(139,92,246,.18), transparent 60%); }
.radar-card.amber:before{ background: radial-gradient(520px 220px at 0% 0%, rgba(245,158,11,.18), transparent 60%); }
.radar-card .title{
  font-weight: 800;
  font-family: var(--font-head);
  letter-spacing: -.4px;
  position: relative;
  z-index:1;
}
.radar-card .desc{
  color: rgba(210,225,255,.70);
  font-size: 12px;
  margin-top: 4px;
  position: relative;
  z-index:1;
}
.radar-card .big{
  margin-top: 10px;
  font-family: var(--font-head);
  font-weight: 800;
  letter-spacing: -.6px;
  font-size: 22px;
  position: relative;
  z-index:1;
}

/* ===== Home two-column sections ===== */
.home-rows{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 18px;
}
@media (max-width: 980px){
  .home-rows{ grid-template-columns: 1fr; }
}

.block{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(15,23,42,.55);
  box-shadow: 0 16px 50px rgba(0,0,0,.28);
  padding: 18px;
  overflow:hidden;
  position: relative;
}
.block .h{
  font-family: var(--font-head);
  font-weight: 800;
  letter-spacing: -.6px;
  font-size: 18px;
}
.block .sub{
  color: rgba(210,225,255,.70);
  font-size: 12px;
  margin-top: 4px;
}

.home-leagues{
  display:flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin-top: 12px;
  overflow-x: auto;
  padding: 2px 2px 10px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  /* Altura máxima compacta — scroll horizontal cubre todos los países */
  max-height: 130px;
}
.home-leagues::-webkit-scrollbar{ height: 6px; }
.home-leagues::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.12); border-radius: 999px; }
.home-leagues::-webkit-scrollbar-track{ background: rgba(0,0,0,.15); border-radius: 999px; }

.home-league{
  flex: 0 0 116px;
  scroll-snap-align: start;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(0,0,0,.18);
  padding: 10px 8px;
  text-align:center;
  text-decoration: none;
  color: inherit;
  transition: transform .15s, border-color .15s, background .15s;
  cursor: pointer;
}
.home-league:hover{
  transform: translateY(-2px);
  border-color: rgba(34,211,238,.28);
  background: rgba(34,211,238,.05);
  box-shadow: 0 0 0 1px rgba(34,211,238,.10), 0 8px 24px rgba(0,0,0,.3);
}
.home-league .flag{
  width: 28px;
  height: 20px;
  border-radius: 5px;
  display: inline-block;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 4px 12px rgba(0,0,0,.35);
}
.home-league .name{ font-weight: 800; margin-top: 6px; font-size: 11px; color: rgba(226,232,255,.85); }
.home-league .meta{ justify-content:center; margin-top: 5px; }
.home-league .mini-pill{ font-size: 9.5px; padding: 3px 7px; }

/* v7 overrides */
.block .home-leagues{display:flex !important; flex-wrap:nowrap !important;}
.block .home-leagues .home-league{
  flex: 0 0 116px !important;
  min-width: 116px !important;
  max-width: 116px !important;
  padding: 10px 8px !important;
}
@media (max-width: 520px){
  .block .home-leagues .home-league{flex:0 0 110px !important; min-width:110px !important; max-width:110px !important;}
}


.grid3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 14px;
}
@media (max-width: 560px){
  .grid3{ grid-template-columns: 1fr; }
}
.strategy-card{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(0,0,0,.18);
  padding: 14px;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.strategy-card:hover{
  transform: translateY(-1px);
  border-color: rgba(34,211,238,.18);
  box-shadow: var(--glow-blue);
}
.strategy-card .top{ display:flex; align-items:center; justify-content:space-between; gap: 10px; }
.strategy-card .name{
  font-family: var(--font-head);
  font-weight: 800;
  letter-spacing: -.4px;
}
.strategy-card .mini{
  display:flex; gap: 8px; flex-wrap: wrap;
  margin-top: 10px;
}
.mini-pill{
  font-size: 11px;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(210,225,255,.78);
}

.promo{
  margin-top: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.07);
  padding: 16px;
  background:
    radial-gradient(560px 240px at 0% 0%, rgba(139,92,246,.18), transparent 65%),
    rgba(0,0,0,.16);
}
.promo .row{ display:flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.promo .tag{
  font-size: 11px; font-weight: 800; letter-spacing:.12em; text-transform:uppercase;
  padding: 6px 10px; border-radius: 999px;
  border: 1px solid rgba(139,92,246,.25);
  background: rgba(139,92,246,.10);
  color: rgba(221,214,254,.95);
}

.premium-banner{
  border-radius: 24px;
  border: 1px solid rgba(245,158,11,.22);
  background:
    radial-gradient(720px 280px at 0% 0%, rgba(245,158,11,.18), transparent 62%),
    radial-gradient(620px 300px at 100% 0%, rgba(34,211,238,.12), transparent 64%),
    rgba(0,0,0,.18);
  padding: 22px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  box-shadow: var(--glow-amber);
}
.premium-banner .title{
  font-family: var(--font-head);
  font-weight: 950;
  letter-spacing: -.8px;
  font-size: 26px;
  margin-bottom: 4px;
}
.premium-banner .bullets{
  display:flex; gap: 10px; flex-wrap: wrap;
  margin-top: 10px;
}
.premium-banner .bullets .mini-pill{ border-color: rgba(245,158,11,.20); background: rgba(245,158,11,.08); color: rgba(253,230,138,.95); }
.premium-banner .price{
  font-family: var(--font-head);
  font-weight: 950;
  font-size: 40px;
  letter-spacing: -1px;
}
.premium-banner .price small{ font-size: 14px; font-weight: 800; color: rgba(253,230,138,.85); }


/* Numeric alignment for trading-style stats */
.num, .kpi .num, .price, .metric, .badge, .pct{ font-variant-numeric: tabular-nums; }

/* =========================
   RESULTADOS / CLASIFICACIÓN — Terminal look
   ========================= */

#resultados.card,
#clasificacion.card{
  max-width: 1180px;
  margin-inline: auto;
}

#resultados .filters,
#clasificacion .filters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

#resultados .filters select,
#clasificacion .filters select{
  min-width: 160px;
  height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(10,14,24,.55);
  color: rgba(235,245,255,.92);
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
}

#resultados .filters select:focus,
#clasificacion .filters select:focus{
  border-color: rgba(65,195,255,.55);
  box-shadow: 0 0 0 3px rgba(65,195,255,.12);
}

#resultados .btn-primary,
#clasificacion .btn-primary{
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(135deg, rgba(0,255,184,.92), rgba(65,195,255,.92));
  color: #061018;
  font-weight: 800;
  letter-spacing: .2px;
  box-shadow: 0 10px 26px rgba(0,255,184,.12), 0 10px 26px rgba(65,195,255,.10);
}

.results-toolbar{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}
.results-search{ flex: 0 0 320px; max-width: 420px; }
.results-search input{
  width:100%;
  height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(10,14,24,.55);
  color: rgba(235,245,255,.92);
  outline: none;
}
.results-search input:focus{
  border-color: rgba(0,255,184,.45);
  box-shadow: 0 0 0 3px rgba(0,255,184,.10);
}
.results-hint{
  color: rgba(210,225,240,.55);
  font-size: 12px;
  line-height: 1.2;
}

#boxResultados,
#boxClasificacion{
  margin-top: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(6,10,18,.55);
  overflow: auto;
  max-height: 68vh;
}

#boxResultados .table,
#boxClasificacion .table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
}

#boxResultados .table thead th,
#boxClasificacion .table thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .08em;
  color: rgba(190,210,230,.72);
  background: rgba(8,14,26,.92);
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 12px 14px;
}

#boxResultados .table tbody td,
#boxClasificacion .table tbody td{
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  color: rgba(235,245,255,.92);
}

#boxResultados .table tbody tr:nth-child(2n) td,
#boxClasificacion .table tbody tr:nth-child(2n) td{ background: rgba(255,255,255,.02); }

#boxResultados .table tbody tr:hover td,
#boxClasificacion .table tbody tr:hover td{ background: rgba(65,195,255,.06); }

#boxResultados .table tbody td:first-child{ font-variant-numeric: tabular-nums; color: rgba(210,225,240,.88); }

.btn-stats{
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(65,195,255,.12);
  color: rgba(235,245,255,.92);
}
.btn-stats:hover{ background: rgba(65,195,255,.18); }


/* ===== HOME LIVEBOX — Última jornada ===== */
.home-livebox {
  margin-top: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.07);
  background:
    radial-gradient(500px 180px at 0% 100%, rgba(34,211,238,.09), transparent 65%),
    rgba(0,0,0,.16);
  padding: 12px 14px;
  overflow: hidden;
}

.hlb-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: rgba(210,225,255,.55);
  margin-bottom: 10px;
}
.hlb-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--cyan, #22d3ee);
  box-shadow: 0 0 0 3px rgba(34,211,238,.18);
  animation: pulse-dot 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes pulse-dot {
  0%,100% { box-shadow: 0 0 0 2px rgba(34,211,238,.18); }
  50%      { box-shadow: 0 0 0 5px rgba(34,211,238,.08); }
}

.hlb-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.hlb-match {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.05);
  transition: background .15s;
}
.hlb-match:hover { background: rgba(34,211,238,.05); }

.hlb-teams {
  font-size: 12px;
  color: rgba(226,232,255,.80);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hlb-teams b {
  color: white;
  font-family: var(--font-head);
  font-weight: 900;
  letter-spacing: 1px;
  margin: 0 4px;
}

.hlb-badge {
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 999px;
  flex-shrink: 0;
  letter-spacing: .4px;
}
.hlb-ft   { background: rgba(255,255,255,.06); color: rgba(210,225,255,.55); border: 1px solid rgba(255,255,255,.08); }
.hlb-live { background: rgba(16,185,129,.15);  color: #6ee7b7;               border: 1px solid rgba(16,185,129,.25); }
.hlb-sched{ background: rgba(14,165,233,.10);  color: rgba(125,211,252,.85); border: 1px solid rgba(14,165,233,.18); }

.hlb-cta {
  display: block;
  margin-top: 10px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(34,211,238,.75);
  text-align: right;
  text-decoration: none;
  transition: color .15s;
}
.hlb-cta:hover { color: var(--cyan, #22d3ee); }

/* ══════════════════════════════════════════════════════════
   WIDGET AVISOS — alerts-widget
   ══════════════════════════════════════════════════════════ */
.alerts-widget{
  margin-top: 14px;
  border-radius: 18px;
  border: 1px solid var(--border2);
  background: var(--panel-soft);
  overflow: hidden;
}
.alerts-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--border);
}
.alerts-header-left{
  display: flex;
  align-items: center;
  gap: 7px;
}
.alerts-icon{
  width: 26px; height: 26px;
  border-radius: 7px;
  background: rgba(245,158,11,.12);
  border: 1px solid rgba(245,158,11,.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; flex-shrink: 0;
}
.alerts-title{
  font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .5px;
}
.alerts-badge{
  font-size: 9px; font-weight: 800;
  letter-spacing: .4px; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px;
  background: rgba(245,158,11,.10);
  border: 1px solid rgba(245,158,11,.28);
  color: #fbbf24;
}
.alerts-week{
  font-size: 10px; color: var(--muted); font-weight: 600;
}

/* Lista */
.alerts-list{ padding: 4px 0; }
.alert-item{
  display: flex; flex-direction: column; gap: 7px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background .15s;
  text-decoration: none; color: inherit;
}
.alert-item:last-child{ border-bottom: none; }
.alert-item:hover{ background: rgba(255,255,255,.03); }

.alert-match{
  display: flex; align-items: center;
  justify-content: space-between; gap: 8px;
}
.alert-teams{
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700; flex: 1; min-width: 0;
}
.alert-team{
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.alert-vs{
  font-size: 9px; font-weight: 600;
  color: var(--muted); flex-shrink: 0;
}
.alert-meta{
  display: flex; align-items: center; gap: 5px; flex-shrink: 0;
}
.alert-date{ font-size: 10px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.alert-league{
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px;
  color: var(--muted);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  padding: 2px 5px; border-radius: 4px;
}

/* Badges estrategia */
.alert-strategies{ display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.strat-badge{
  font-size: 9px; font-weight: 800;
  letter-spacing: .3px; text-transform: uppercase;
  padding: 2px 7px; border-radius: 5px;
  white-space: nowrap;
}
.sb-igualados{ background:rgba(14,207,176,.10); border:1px solid rgba(14,207,176,.3); color:#0fcfb0; }
.sb-over25   { background:rgba(34,197,94,.10);  border:1px solid rgba(34,197,94,.3);  color:#4ade80; }
.sb-under25  { background:rgba(59,130,246,.10); border:1px solid rgba(59,130,246,.3);  color:#60a5fa; }
.sb-btts     { background:rgba(168,85,247,.10); border:1px solid rgba(168,85,247,.3);  color:#c084fc; }
.sb-rachas   { background:rgba(236,72,153,.10); border:1px solid rgba(236,72,153,.3);  color:#f472b6; }
.sb-tras10   { background:rgba(245,158,11,.10); border:1px solid rgba(245,158,11,.3);  color:#fbbf24; }
.sb-ventaja  { background:rgba(99,102,241,.10); border:1px solid rgba(99,102,241,.3);  color:#818cf8; }
.sb-corners  { background:rgba(249,115,22,.10); border:1px solid rgba(249,115,22,.3);  color:#fb923c; }
.sb-reaccion { background:rgba(20,184,166,.10); border:1px solid rgba(20,184,166,.3);  color:#2dd4bf; }

/* Dot de confianza */
.score-dot{
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.score-high  { background:#4ade80; box-shadow:0 0 5px rgba(74,222,128,.5); }
.score-medium{ background:#fbbf24; box-shadow:0 0 5px rgba(251,191,36,.5); }

/* Chip odds */
.odds-chip{
  font-size: 9px; font-weight: 700; color: var(--muted);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  padding: 2px 5px; border-radius: 4px; letter-spacing: .2px;
}
.odds-eq{ color:#0fcfb0; border-color:rgba(14,207,176,.25); }

/* Estados especiales */
.alerts-loading{
  display: flex; align-items: center; justify-content: center;
  gap: 5px; padding: 20px;
}
.alerts-loading-dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--muted); opacity: .4;
  animation: alertsDot .9s ease-in-out infinite;
}
.alerts-loading-dot:nth-child(2){ animation-delay: .15s; }
.alerts-loading-dot:nth-child(3){ animation-delay: .30s; }
@keyframes alertsDot{
  0%,100%{ transform:translateY(0); opacity:.4; }
  50%{ transform:translateY(-4px); opacity:1; }
}
.alerts-empty, .alerts-lock{
  padding: 20px 16px; text-align: center;
  display: flex; flex-direction: column;
  align-items: center; gap: 7px;
}
.alerts-empty-icon, .alerts-lock-icon{ font-size: 22px; opacity: .45; }
.alerts-empty-text, .alerts-lock-text{
  font-size: 12px; color: var(--muted); line-height: 1.5;
}
.alerts-lock-cta{
  font-size: 11px; font-weight: 800;
  color: #fbbf24;
  background: rgba(245,158,11,.10);
  border: 1px solid rgba(245,158,11,.28);
  padding: 6px 14px; border-radius: 8px;
  text-decoration: none; margin-top: 2px;
  transition: filter .15s;
}
.alerts-lock-cta:hover{ filter: brightness(1.15); }
.alerts-footer{
  padding: 8px 16px;
  border-top: 1px solid var(--border);
}
.alerts-footer-note{
  font-size: 10px; color: var(--muted);
}

/* ── Scroll interno del widget de avisos ── */
.alerts-list {
  max-height: 420px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(45,212,191,.25) transparent;
}
.alerts-list::-webkit-scrollbar { width: 4px; }
.alerts-list::-webkit-scrollbar-track { background: transparent; }
.alerts-list::-webkit-scrollbar-thumb {
  background: rgba(45,212,191,.25);
  border-radius: 2px;
}
.alerts-list::-webkit-scrollbar-thumb:hover {
  background: rgba(45,212,191,.45);
}

/* ── Fix alineación vertical columnas home ── */
.home-rows { align-items: start; }