:root {
  --bg: #f4f7fb;
  --panel: #ffffff;
  --panel-2: #f8fafc;
  --text: #0f172a;
  --muted: #64748b;
  --line: #e2e8f0;
  --shadow: 0 12px 30px rgba(15, 23, 42, .08);
  --local: #138a4b;
  --local-bg: #eaf8f0;
  --draw: #d97706;
  --draw-bg: #fff7e6;
  --away: #2563eb;
  --away-bg: #edf4ff;
  --danger: #b42318;
  --danger-bg: #fff1f0;
  --warn: #b45309;
  --warn-bg: #fff7ed;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, input, select { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.app-shell { width: min(100%, 940px); margin: 0 auto; padding: 0 16px 28px; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 22px 2px 14px; }
.topbar h1 { margin: 0; font-size: 1.6rem; letter-spacing: -.03em; }
.eyebrow { margin: 0 0 4px; color: var(--muted); font-size: .71rem;font-weight:800; letter-spacing: .11em; text-transform: uppercase; }
.icon-btn {
  width: 44px; height: 44px; display: inline-grid; place-items: center; border: 1px solid var(--line);
  border-radius: 14px; background: var(--panel); color: var(--text); font-size: 1.35rem;
  box-shadow: 0 5px 18px rgba(15, 23, 42, .06);
}
.icon-btn.small { width: 36px; height: 36px; border-radius: 11px; }
.icon-btn:focus-visible, .info-btn:focus-visible, select:focus-visible, input:focus-visible, .match-card:focus-visible {
  outline: 3px solid rgba(37, 99, 235, .25); outline-offset: 2px;
}

.hero { display: flex; gap: 16px; align-items: flex-end; justify-content: space-between; padding: 22px; border-radius: 22px; background: #0f172a; color: #fff; box-shadow: var(--shadow); }
.hero h2 { margin: 0; max-width: 700px; font-size: clamp(1.24rem, 4vw, 1.95rem); line-height: 1.15; letter-spacing: -.035em; }
.hero-kicker { margin: 0 0 7px; color: #bfdbfe; font-weight: 800; font-size: .82rem; }
.hero-copy { margin: 10px 0 0; max-width: 620px; color: #cbd5e1; font-size: .9rem; line-height: 1.5; }
.status-pill { flex: 0 0 auto; padding: 8px 11px; border-radius: 999px; background: rgba(255,255,255,.1); color: #e2e8f0; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.status-pill.ok { background: rgba(34,197,94,.16); color: #bbf7d0; }
.status-pill.bad { background: rgba(239,68,68,.16); color: #fecaca; }

.view-tabs { display: inline-flex; gap: 5px; margin: 16px 0 0; padding: 4px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.view-tab { border: 0; border-radius: 10px; padding: 9px 14px; background: transparent; color: var(--muted); font-size: .8rem;font-weight:800; }
.view-tab.active { background: #0f172a; color: #fff; box-shadow: 0 4px 12px rgba(15,23,42,.12); }

.filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 0; }
.filters label { min-width: 0; }
.filters label span { display: block; margin: 0 0 6px 2px; color: var(--muted); font-size: .75rem; font-weight: 800; }
.filters select, .filters input { width: 100%; min-height: 46px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); color: var(--text); padding: 0 12px; font-size: 16px; }
.search-field { grid-column: 1 / -1; }

.summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-bottom: 22px; }
.summary article { padding: 13px 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); text-align: center; }
.summary span { display: block; color: var(--muted); font-size: .72rem; font-weight: 800; }
.summary strong { display: block; margin-top: 3px; font-size: 1.35rem; }

.list-section { margin-top: 6px; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.section-head h2, .section-head h3 { margin: 0; letter-spacing: -.02em; }
.section-head.compact { align-items: center; }
.muted { color: var(--muted); font-size: .84rem; }
.matches-list { display: grid; gap: 10px; }

.match-card { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); color: inherit; text-align: left; box-shadow: 0 5px 16px rgba(15, 23, 42, .04); }
.match-card:hover { border-color: #cbd5e1; transform: translateY(-1px); }
.match-card h3 { margin: 5px 0 7px; font-size: 1rem; letter-spacing: -.015em; }
.match-meta { display: flex; flex-wrap: wrap; gap: 6px 9px; color: var(--muted); font-size: .78rem; }
.match-side { min-width: 150px; text-align: right; }
.confidence { display: block; margin-top: 7px; font-size: .84rem; font-weight: 800; color: var(--text); }
.recommendation-tag { display: block; margin-top: 5px; font-size: .68rem;font-weight:800; line-height: 1.2; text-transform: uppercase; }
.recommendation-tag.unstable { color: var(--warn); }
.recommendation-tag.neutral { color: var(--muted); }

.pick-badge { display: inline-grid; min-width: 38px; min-height: 30px; place-items: center; padding: 4px 10px; border-radius: 999px; font-size: .86rem;font-weight:800; }
.pick-badge.local { color: var(--local); background: var(--local-bg); }
.pick-badge.draw { color: var(--draw); background: var(--draw-bg); }
.pick-badge.away { color: var(--away); background: var(--away-bg); }
.pick-badge.neutral { color: var(--muted); background: #f1f5f9; }

.state-card { padding: 22px; border: 1px dashed #cbd5e1; border-radius: 16px; background: rgba(255,255,255,.6); color: var(--muted); text-align: center; }
.state-card.error { color: var(--danger); background: var(--danger-bg); border-color: #fecaca; }
footer { display: flex; justify-content: center; margin-top: 28px; padding: 18px 20px; border-radius: 20px; background: #0f172a; color: #e2e8f0; font-size: .76rem; font-weight: 600; line-height: 1.5; text-align: center; box-shadow: var(--shadow); }

.detail-dialog { width: min(820px, calc(100% - 18px)); max-height: calc(100% - 18px); padding: 0; border: 0; border-radius: 24px; background: transparent; }
.detail-dialog::backdrop, .info-dialog::backdrop { background: rgba(15,23,42,.68); backdrop-filter: blur(3px); }
.dialog-card { max-height: calc(100vh - 18px); overflow: auto; background: var(--bg); border-radius: 24px; padding: 18px; }
.dialog-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.dialog-head h2 { margin: 0 0 5px; font-size: 1.25rem; }

.recommendation-hero { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 14px; padding: 16px; border: 1px solid var(--line); border-left: 5px solid #94a3b8; border-radius: 18px; background: var(--panel); }
.recommendation-hero.unstable { border-left-color: var(--warn); background: linear-gradient(90deg, var(--warn-bg), var(--panel) 46%); }
.recommendation-main > span, .recommendation-pick > span { display: block; color: var(--muted); font-size: .7rem;font-weight:800; letter-spacing: .08em; }
.recommendation-main > strong { display: block; margin-top: 5px; font-size: 1.03rem; }
.recommendation-main > small { display: block; margin-top: 5px; color: var(--muted); line-height: 1.35; }
.recommendation-pick { min-width: 100px; text-align: right; }
.recommendation-pick > strong { display: block; margin-top: 6px; font-size: 1rem; }
.recommendation-pick .pick-badge { margin-top: 6px; }

.model-card { margin-top: 10px; padding: 15px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); }
.model-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.model-title h3 { margin: 0; font-size: .95rem; letter-spacing: .05em; }
.prob-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin-top: 13px; }
.prob { padding: 10px 5px; border-radius: 12px; background: var(--panel-2); text-align: center; border: 1px solid transparent; }
.prob.local { background: var(--local-bg); }
.prob.draw { background: var(--draw-bg); }
.prob.away { background: var(--away-bg); }
.prob span { display: block; font-size: .7rem; color: var(--muted);font-weight:800; }
.prob strong { display: block; margin-top: 2px; font-size: .96rem; }
.model-meta { display: flex; justify-content: space-between; gap: 8px; margin-top: 11px; color: var(--muted); font-size: .72rem; }
.model-meta.multi { flex-wrap: wrap; }
.model-meta b { color: var(--text); }

.analysis-strip { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-top: 10px; }
.analysis-strip > div { padding: 11px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.analysis-strip span { display: block; color: var(--muted); font-size: .68rem; font-weight: 800; }
.analysis-strip strong { display: block; margin-top: 4px; font-size: .86rem; overflow-wrap: anywhere; }

.result-real-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.result-real-values { display: grid; grid-template-columns: repeat(2, minmax(0, auto)); gap: 14px 28px; align-items: center; }
.result-real-card span { display: block; color: var(--muted); font-size: .68rem;font-weight:800; letter-spacing: .08em; }
.result-real-card strong { display: block; margin-top: 3px; font-size: .95rem; }
.info-btn { border: 0; background: transparent; color: var(--muted); font-size: 1.05rem; padding: 4px; border-radius: 999px; }
.title-with-info { display: flex; align-items: center; gap: 4px; }

.profile-section { margin-top: 12px; padding: 15px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); }
.profile-head { margin-bottom: 10px; }
.legend { display: flex; gap: 11px; flex-wrap: wrap; color: var(--muted); font-size: .72rem; font-weight: 800; }
.dot { width: 8px; height: 8px; display: inline-block; border-radius: 50%; margin-right: 4px; }
.dot.local { background: var(--local); }
.dot.away { background: var(--away); }
.profile-column-head { display: grid; grid-template-columns: minmax(160px,1fr) auto; gap: 12px; padding: 0 10px 7px; color: var(--muted); font-size: .66rem;font-weight:800; text-transform: uppercase; }
.profile-rows { display: grid; gap: 7px; }
.profile-row { display: grid; grid-template-columns: minmax(160px,1fr) auto; gap: 12px; align-items: center; padding: 11px; border-radius: 13px; background: var(--panel-2); }
.profile-name { font-size: .82rem; }
.profile-value { font-size: .81rem; font-weight: 800; }
.local-text { color: var(--local); }
.away-text { color: var(--away); }
.profile-diff, .mini-diff { justify-self: end; padding: 4px 7px; border-radius: 999px; font-size: .76rem;font-weight:800; }
.profile-diff.local, .mini-diff.local { color: var(--local); background: var(--local-bg); }
.profile-diff.away, .mini-diff.away { color: var(--away); background: var(--away-bg); }
.profile-diff.neutral, .mini-diff.neutral { color: var(--muted); background: #eef2f7; }
.profile-bar { grid-column: 1 / -1; margin-top: 2px; }
.compare-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; height: 6px; }
.compare-half { position: relative; overflow: hidden; border-radius: 999px; background: #e9eef5; }
.compare-half.left .fill { margin-left: auto; }
.compare-half.right .fill { margin-right: auto; }
.fill { display: block; height: 100%; border-radius: 999px; }
.fill.local { background: var(--local); }
.fill.away { background: var(--away); }
.compare-bar.unavailable { opacity: .35; }
.compact-diffs { display: flex; flex-wrap: wrap; gap: 4px; }
.window-bars { grid-column: 1 / -1; display: grid; gap: 4px; }
.window-bar-line { display: grid; grid-template-columns: 18px 1fr; gap: 5px; align-items: center; color: var(--muted); font-size: .63rem; font-weight: 800; }
.profile-note { margin: 11px 1px 0; color: var(--muted); font-size: .69rem; line-height: 1.45; }

.info-dialog { width: min(620px, calc(100% - 24px)); padding: 0; border: 0; border-radius: 20px; background: transparent; }
.info-card { max-height: calc(100vh - 40px); overflow: auto; padding: 18px; border-radius: 20px; background: var(--panel); color: var(--text); box-shadow: var(--shadow); }
.info-card.compact-info { max-width: 480px; margin: auto; }
.info-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.info-head h3 { margin: 0; }
.info-card p { line-height: 1.55; }
.info-card dl { display: grid; grid-template-columns: minmax(140px,.7fr) 1.3fr; gap: 7px 12px; }
.info-card dt {font-weight:800; }
.info-card dd { margin: 0; color: var(--muted); line-height: 1.4; }

@media (max-width: 680px) {
  .app-shell { padding-left: 12px; padding-right: 12px; }
  .hero { align-items: flex-start; flex-direction: column; padding: 18px; }
  .filters { grid-template-columns: 1fr 1fr; }
  .search-field { grid-column: 1 / -1; }
  .summary { gap: 6px; }
  .summary article { padding: 11px 6px; border-radius: 13px; }
  .match-card { padding: 14px; }
  .match-side { min-width: 120px; }
  .dialog-card { padding: 14px; }
  .analysis-strip { grid-template-columns: 1fr 1fr; }
  .profile-column-head { display: grid; grid-template-columns: minmax(0,1fr) auto; padding-left: 4px; padding-right: 4px; }
  .profile-row { grid-template-columns: minmax(0,1fr) auto; gap: 10px; }
  .profile-name { font-size: .86rem; }
  .profile-diff { align-self: center; }
}

@media (max-width: 430px) {
  .filters { grid-template-columns: 1fr; }
  .search-field { grid-column: auto; }
  .recommendation-hero { grid-template-columns: 1fr; }
  .recommendation-pick { display: flex; align-items: center; gap: 8px; min-width: 0; text-align: left; }
  .recommendation-pick > span, .recommendation-pick > strong { margin: 0; }
  .match-card { grid-template-columns: minmax(0,1fr) 112px; gap: 8px; }
  .recommendation-tag { font-size: .62rem; }
  .summary strong { font-size: 1.15rem; }
  .profile-row { grid-template-columns: minmax(0,1fr) auto; }
  .info-card dl { grid-template-columns: 1fr; }
  .info-card dd { margin-bottom: 5px; }
}

/* ===== V3.6 · orden + color por favorito + recordatorios ===== */


/* La tarjeta abre el detalle del encuentro. */
.match-card {
  position: relative;
  grid-template-columns: minmax(0, 1fr);
  padding: 0;
  gap: 0;
  overflow: hidden;
}
.match-open {
  min-width: 0;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 14px;
  align-items: center;
  padding: 16px 10px 16px 16px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}
.match-open:focus-visible {
  outline: 3px solid rgba(37, 99, 235, .25);
  outline-offset: -3px;
}

.match-side > .pick-badge { margin-right: 0; }




/* La recomendación usa el color del favorito: H verde, A azul, D naranja. */
.recommendation-tag.local { color: var(--local); }
.recommendation-tag.away { color: var(--away); }
.recommendation-tag.draw { color: var(--draw); }
.recommendation-hero.local { border-left-color: var(--local); background: linear-gradient(90deg, var(--local-bg), var(--panel) 46%); }
.recommendation-hero.away { border-left-color: var(--away); background: linear-gradient(90deg, var(--away-bg), var(--panel) 46%); }
.recommendation-hero.draw { border-left-color: var(--draw); background: linear-gradient(90deg, var(--draw-bg), var(--panel) 46%); }

.toast {
  position: fixed;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 9999;
  width: min(92vw, 520px);
  transform: translateX(-50%);
  padding: 12px 14px;
  border-radius: 14px;
  background: #0f172a;
  color: #f8fafc;
  box-shadow: 0 16px 40px rgba(15,23,42,.28);
  font-size: .82rem;
  font-weight: 750;
  text-align: center;
}
.toast.error { background: #7f1d1d; color: #fee2e2; }

@media (max-width: 680px) {
  .match-open { grid-template-columns: minmax(0, 1fr) 120px; padding: 14px 10px 14px 14px; gap: 8px; }
  
  .match-side > .pick-badge { margin-right: 0; }
}

@media (max-width: 430px) {
  .match-card { grid-template-columns: minmax(0, 1fr); }
  .match-open { grid-template-columns: minmax(0, 1fr) 112px; }
  
  .match-side > .pick-badge { margin-right: 0; }
}

/* ===== V3.8 · integración GLOBAL CORE ===== */
.view-tab-link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; color: inherit; }
.global-core-entry { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 12px; padding: 15px; border: 1px solid #c7d2fe; border-radius: 18px; background: #eef2ff; }
.global-core-entry h3 { margin: 2px 0 4px; font-size: .95rem; }
.global-core-entry p { margin: 0; }
.primary-link { display: inline-flex; align-items: center; justify-content: center; padding: 10px 14px; border-radius: 12px; background: #0f172a; color: #fff; text-decoration: none; font-size: .78rem;font-weight:800; white-space: nowrap; }
@media (max-width: 680px) {
  .global-core-entry { align-items: stretch; flex-direction: column; }
  .primary-link { width: 100%; }
}


/* V4.2 · Tipografía BET */
body, input, select, textarea { font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
h1,h2,h3,h4,.view-tab,.primary-link,.pick-badge,.recommendation-tag,.recommendation-hero strong,.summary strong,.model-card strong,button { font-family: 'Manrope','Inter',system-ui,sans-serif; }


/* =========================================================
   V4.3 · BETPRO · navegación unificada + alta legibilidad
   ========================================================= */
.app-shell{width:min(100%,1400px);padding:0 22px 30px}
.topbar{min-height:76px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;padding:0 18px;position:sticky;top:0;z-index:40;background:rgba(7,18,34,.97);border:1px solid rgba(96,165,250,.20);border-top:0;border-radius:0 0 22px 22px;box-shadow:0 8px 24px rgba(15,23,42,.10);backdrop-filter:blur(18px);overflow:hidden}
.main-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#f8fafc;min-width:max-content}.main-brand-mark{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(145deg,#1c7dff,#46d9ff);font-family:'Manrope',sans-serif;font-weight:800;font-style:italic;color:#03101d;box-shadow:0 0 24px rgba(47,128,255,.28)}.main-brand strong{font-family:'Manrope','Inter',sans-serif;font-size:1.3rem;letter-spacing:-.035em}
.main-nav{display:flex;justify-content:center;gap:10px;min-width:0}.main-nav .view-tab{padding:10px 14px;border:0;border-radius:12px;background:transparent;color:#a9bfd3;font-family:'Manrope','Inter',sans-serif;font-size:.76rem;font-weight:800;letter-spacing:.02em;text-decoration:none}.main-nav .view-tab:hover,.main-nav .view-tab.active{color:#fff;background:rgba(37,99,235,.22);box-shadow:inset 0 0 0 1px rgba(96,165,250,.20)}
.topbar .icon-btn{background:#0d2036;border-color:#234969;color:#7dd3fc;box-shadow:none}
.hero{margin-top:22px;padding:28px;border:1px solid #183b5c;border-radius:24px;background:linear-gradient(135deg,#081626,#0d2742 55%,#0a1b2f);box-shadow:0 16px 36px rgba(15,23,42,.13);position:relative;overflow:hidden}.hero:after{content:"";position:absolute;right:-80px;top:-130px;width:330px;height:330px;border:1px solid rgba(66,215,255,.10);border-radius:50%;box-shadow:0 0 0 42px rgba(66,215,255,.025),0 0 0 84px rgba(47,128,255,.02)}.hero>*{position:relative;z-index:1}.hero h2{font-family:'Manrope','Inter',sans-serif;font-size:clamp(1.7rem,4vw,3.25rem);line-height:1;letter-spacing:-.055em}.hero-kicker{color:#38bdf8;font-family:'Manrope','Inter',sans-serif;font-size:.67rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase}.hero-copy{color:#c4d2df;font-size:.92rem}.status-pill{border:1px solid rgba(125,211,252,.20);background:rgba(14,165,233,.10);color:#d5f3ff}.status-pill.ok{color:#b8f5d4;background:rgba(19,138,75,.18);border-color:rgba(74,222,128,.24)}
footer{background:#0f172a;color:#fff;font-family:'Inter',sans-serif;font-weight:500}
@media(max-width:760px){.app-shell{padding:0 12px 24px}.topbar{grid-template-columns:1fr auto;gap:10px;padding:10px 4px}.main-nav{grid-column:1/-1;order:3;justify-content:flex-start;overflow-x:auto;padding:2px 0 4px;scrollbar-width:none}.main-nav::-webkit-scrollbar{display:none}.main-nav .view-tab{flex:0 0 auto}.hero{margin-top:12px;padding:18px}.hero h2{font-size:2rem}}

/* =========================================================
   V4.5 · UI REFINADA
   Logo BETPRO · hero compacto · mayor legibilidad PC
   filtros dependientes · footer global · navegación móvil
   ========================================================= */
.brand-logo{
  display:block;
  width:auto;
  height:46px;
  max-width:min(260px,32vw);
  object-fit:contain;
}
.hero.hero-compact{
  min-height:92px;
  padding:16px 20px;
  align-items:center;
}
.hero.hero-compact h2{
  max-width:820px;
  font-size:clamp(1.35rem,2.2vw,2.05rem);
  line-height:1.05;
}
.hero.hero-compact .hero-copy{margin-top:6px;font-size:.86rem;line-height:1.35}
.hero.hero-compact .status-pill{padding:7px 10px;font-size:.7rem}
.filters{grid-template-columns:repeat(5,minmax(0,1fr))}
.match-filter-field{min-width:0}

/* Footer único de BETPRO */
.betpro-footer{
  display:block;
  margin-top:30px;
  padding:18px 22px;
  border:0;
  border-radius:18px;
  background:#071222;
  color:#d7e2ec;
  text-align:left;
  box-shadow:0 10px 28px rgba(15,23,42,.10);
}
.betpro-footer-inner{max-width:1180px;margin:0 auto}
.betpro-footer-title{margin:0 0 7px;color:#fbbf24;font-family:'Manrope','Inter',sans-serif;font-size:.82rem;font-weight:800}
.betpro-footer-copy{margin:0;color:#d7e2ec;font-size:.76rem;line-height:1.55;font-weight:500}
.betpro-footer-copy strong{color:#fff}
.betpro-footer-brand{margin:13px 0 0;padding-top:12px;border-top:1px solid rgba(203,213,225,.18);color:#fff;font-family:'Manrope','Inter',sans-serif;font-size:.73rem;font-weight:750}

/* Navegación móvil global */
.mobile-main-nav{display:none}

/* Mayor legibilidad SOLO en escritorio */
@media (min-width:1024px){
  body{font-size:17px}
  .main-nav .view-tab{font-size:.86rem;padding:11px 16px}
  .filters label span{font-size:.82rem}
  .filters select,.filters input{font-size:16px;min-height:48px}
  .summary span{font-size:.78rem}.summary strong{font-size:1.48rem}
  .section-head h2{font-size:1.42rem}.muted{font-size:.9rem}
  .match-card h3{font-size:1.08rem}.match-meta{font-size:.84rem}.confidence{font-size:.91rem}.recommendation-tag{font-size:.73rem}
  .recommendation-main>strong{font-size:1.12rem}.recommendation-main>small{font-size:.86rem}
  .prob span{font-size:.75rem}.prob strong{font-size:1.06rem}.model-meta{font-size:.79rem}
  .profile-name{font-size:.9rem}.profile-value{font-size:.88rem}.profile-note{font-size:.76rem}
  .global-core-entry h3{font-size:1.03rem}.primary-link{font-size:.84rem}
  .betpro-footer-title{font-size:.9rem}.betpro-footer-copy{font-size:.82rem}.betpro-footer-brand{font-size:.8rem}
}

@media (max-width:1100px) and (min-width:681px){
  .filters{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width:760px){
  .brand-logo{height:40px;max-width:180px}
  .app-shell{padding-bottom:96px}
  .hero.hero-compact{
    min-height:72px;
    margin-top:12px;
    padding:12px 14px;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:10px;
    align-items:center;
  }
  .hero.hero-compact h2{font-size:1.08rem;line-height:1.12}
  .hero.hero-compact .hero-copy{margin-top:4px;font-size:.74rem;line-height:1.3}
  .hero.hero-compact .status-pill{padding:6px 8px;font-size:.6rem}
  .filters{grid-template-columns:1fr 1fr}
  .match-filter-field{grid-column:1/-1}
  .mobile-main-nav{
    position:fixed;
    left:0;right:0;bottom:0;z-index:70;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:4px;
    padding:7px 8px calc(7px + env(safe-area-inset-bottom));
    border-top:1px solid #173653;
    background:rgba(7,18,34,.97);
    backdrop-filter:blur(18px);
  }
  .mobile-main-nav button,.mobile-main-nav a{
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    padding:6px 3px;
    border:0;
    border-radius:11px;
    background:transparent;
    color:#d7e2ec;
    text-decoration:none;
    font-family:'Manrope','Inter',sans-serif;
    font-size:.58rem;
    font-weight:800;
  }
  .mobile-main-nav button span,.mobile-main-nav a span{color:#fff;font-size:1.45rem;line-height:1}
  .mobile-main-nav .active{color:#fff;background:rgba(37,99,235,.24)}
  .betpro-footer{margin-bottom:8px;padding:16px 15px}
  .betpro-footer-copy{font-size:.71rem}.betpro-footer-title{font-size:.78rem}.betpro-footer-brand{font-size:.7rem}
  .recommendation-main>small{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
}
@media(max-width:430px){
  .filters{grid-template-columns:1fr}
  .match-filter-field{grid-column:auto}
  .hero.hero-compact{grid-template-columns:1fr auto}
  .hero.hero-compact .status-pill{max-width:112px;white-space:normal;text-align:center}
}

/* V4.5 · Tema Automático / Claro / Oscuro */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.topbar-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:max-content}
.theme-control select{
  height:38px;
  max-width:116px;
  padding:0 28px 0 10px;
  border:1px solid #234969;
  border-radius:11px;
  background:#0d2036;
  color:#dff5ff;
  font-family:'Manrope','Inter',sans-serif;
  font-size:.68rem;
  font-weight:750;
  outline:none;
}
.theme-control select:focus-visible{outline:3px solid rgba(56,189,248,.24);outline-offset:2px}

html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#06101d;
  --panel:#0b1727;
  --panel-2:#0e1d31;
  --text:#edf6ff;
  --muted:#9bb0c5;
  --line:#1b3854;
  --shadow:0 12px 30px rgba(0,0,0,.24);
  --local-bg:rgba(19,138,75,.18);
  --draw-bg:rgba(217,119,6,.16);
  --away-bg:rgba(37,99,235,.18);
  --danger-bg:rgba(180,35,24,.16);
  --warn-bg:rgba(180,83,9,.16);
}
html[data-theme="dark"] body{background:linear-gradient(180deg,#06101d,#081626 45%,#06101d)}
html[data-theme="dark"] .filters select,
html[data-theme="dark"] .filters input,
html[data-theme="dark"] .summary article,
html[data-theme="dark"] .match-card,
html[data-theme="dark"] .model-card,
html[data-theme="dark"] .analysis-strip>div,
html[data-theme="dark"] .result-real-card,
html[data-theme="dark"] .profile-section,
html[data-theme="dark"] .info-card{background:var(--panel);color:var(--text)}
html[data-theme="dark"] .state-card{background:rgba(11,23,39,.72);border-color:#284762}
html[data-theme="dark"] .profile-row{background:var(--panel-2)}
html[data-theme="dark"] .profile-diff.neutral,
html[data-theme="dark"] .mini-diff.neutral{background:#17304a;color:#a7b9ca}
html[data-theme="dark"] .compare-half{background:#17304a}
html[data-theme="dark"] .global-core-entry{background:#0d2036;border-color:#24527a;color:#edf6ff}
html[data-theme="dark"] .primary-link{background:#2563eb}
html[data-theme="dark"] .info-btn{color:#a8bed2}
html[data-theme="dark"] .betpro-footer{border:1px solid #173653}

@media(max-width:760px){
  .theme-control select{height:34px;max-width:98px;padding-left:8px;font-size:.61rem}
}
@media(max-width:760px){
  .brand-logo{height:36px;max-width:140px}
  .theme-control select{max-width:82px}
}

/* =========================================================
   V4.6 · IDENTIDAD PROFESIONAL OSCURA
   Tipografía real, datos alineados y navegación móvil única
   ========================================================= */
html{color-scheme:dark}
body,input,select,textarea{font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-synthesis:none}
h1,h2,h3,h4,.view-tab,.primary-link,.pick-badge,.recommendation-tag,.recommendation-hero strong,.summary strong,button{font-family:'Manrope','Inter',system-ui,sans-serif;font-synthesis:none}
.summary strong,.confidence,.prob strong,.model-meta b,.profile-value,.profile-diff,.result-real-card strong{font-variant-numeric:tabular-nums}
.topbar-actions{min-width:auto}

@media(max-width:760px){
  .main-nav{display:none}
  .topbar{grid-template-columns:minmax(0,1fr) auto;min-height:60px;padding:9px 10px}
  .brand-logo{height:38px;max-width:150px}
  .filters label span{font-size:.76rem}
  .section-head h2{font-size:1.16rem}
  .muted{font-size:.78rem}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}



/* BETPRO 4.8 · carga comercial sin retrasar la respuesta real */
.analysis-loader{display:grid;gap:14px;overflow:hidden;position:relative}
.analysis-loader-brand{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.analysis-loader-brand span{font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#5eb7ff}
.analysis-loader-brand strong{font-family:Manrope,Inter,sans-serif;font-size:1rem}
.analysis-loader-engines{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.analysis-loader-engines span{display:flex;align-items:center;gap:7px;padding:9px 10px;border:1px solid rgba(94,183,255,.16);border-radius:10px;background:rgba(8,22,40,.45);font-size:.76rem;font-weight:700;opacity:.42;animation:betproEnginePulse 1.5s ease-in-out infinite;animation-delay:calc(var(--i) * 120ms)}
.analysis-loader-engines span::before{content:'✓';display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:rgba(94,183,255,.13);color:#72c7ff;font-size:.68rem;flex:0 0 18px}
.analysis-loader-footer{font-size:.78rem;color:var(--muted,#94a3b8);position:relative;padding-top:9px}
.analysis-loader-footer::before{content:'';position:absolute;top:0;left:0;width:100%;height:2px;border-radius:99px;background:linear-gradient(90deg,transparent,currentColor,transparent);opacity:.6;transform:translateX(-70%);animation:betproScan 1.25s ease-in-out infinite}
.history-more-wrap{display:flex;justify-content:center;padding:18px 0 4px}
.history-more-btn{border:1px solid rgba(94,183,255,.32);background:rgba(8,22,40,.72);color:inherit;border-radius:12px;padding:11px 18px;font:700 .86rem Inter,sans-serif;cursor:pointer}
.history-more-btn:hover{border-color:rgba(94,183,255,.65);transform:translateY(-1px)}
.history-more-btn:disabled{opacity:.55;cursor:wait;transform:none}
@keyframes betproEnginePulse{0%,100%{opacity:.42;transform:translateY(0)}45%{opacity:1;transform:translateY(-1px)}}
@keyframes betproScan{0%{transform:translateX(-80%)}100%{transform:translateX(80%)}}
@media(max-width:760px){.analysis-loader-engines{grid-template-columns:1fr 1fr}.analysis-loader-engines span:last-child{grid-column:1/-1}.analysis-loader-brand{align-items:flex-start;flex-direction:column;gap:5px}}
@media(prefers-reduced-motion:reduce){.analysis-loader-engines span,.analysis-loader-footer::before{animation:none;opacity:1}}