/* Talachita: styles are isolated to the quiniela route. Original brand assets stay untouched. */
body.vista-quiniela {
  --qn-bg: #fafafa;
  --qn-surface: #ffffff;
  --qn-aside: #f1f3f5;
  --qn-card: #ffffff;
  --qn-line: #dce2e9;
  --qn-border: #b9c5d3;
  --qn-text: #09204b;
  --qn-muted: #53647e;
  --qn-accent: #006fc9;
  --qn-active: #0089ed;
  --qn-selected: #e6f4ff;
  --qn-hover: #f0f7fc;
  --qn-disabled: #e5e9ee;
  --qn-disabled-text: #69768a;
  --qn-positive: #206e43;
  --qn-action-text: #ffffff;
  --bg: var(--qn-bg);
  --surface: var(--qn-surface);
  --surface-2: var(--qn-aside);
  --line: var(--qn-line);
  --text: var(--qn-text);
  --muted: var(--qn-muted);
  --canvas-text: var(--qn-text);
  --canvas-muted: var(--qn-muted);
  --gold: var(--qn-accent);
  --gold-2: var(--qn-accent);
  --green: var(--qn-positive);
  background: var(--qn-bg);
  color: var(--qn-text);
  color-scheme: light;
}

body.vista-quiniela[data-qn-theme="oscuro"] {
  --qn-bg: #101a21;
  --qn-surface: #14212b;
  --qn-aside: #17252f;
  --qn-card: #17252e;
  --qn-line: #2c414f;
  --qn-border: #59707f;
  --qn-text: #f3f7fa;
  --qn-muted: #acc0cf;
  --qn-accent: #5dd8fc;
  --qn-active: #42d2f6;
  --qn-selected: #12384b;
  --qn-hover: #1c303d;
  --qn-disabled: #2b3b48;
  --qn-disabled-text: #b0becc;
  --qn-positive: #81dda3;
  --qn-action-text: #062c3c;
  color-scheme: dark;
}

/* One continuous, white brand area accommodates the unmodified multicolour logos. */
body.vista-quiniela .app-header {
  position: relative;
  height: auto;
  min-height: 102px;
  padding: 12px max(28px, calc((100vw - 1384px) / 2));
  padding-top: max(12px, env(safe-area-inset-top));
  background: #ffffff;
  border-bottom: 1px solid #e1e6ed;
  box-shadow: none;
  backdrop-filter: none;
  color: #09204b;
  gap: 12px;
  color-scheme: light;
}
body.vista-quiniela .app-header::before { display: none; }
body.vista-quiniela .app-header .brand { gap: 20px; min-width: 0; color: #09204b; }
body.vista-quiniela .app-header .brand-logo {
  width: 100px;
  height: 75px;
  object-fit: contain;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  filter: none;
  flex: none;
}
body.vista-quiniela .app-header .brand-text strong { color: #09204b; }
body.vista-quiniela .app-header .brand-slogan { font-size: 19px; letter-spacing: 2px; }
body.vista-quiniela .app-header .search-bar {
  width: min(265px, 24vw);
  min-height: 44px;
  background: #ffffff;
  border: 1px solid #dce2e9;
  border-radius: 6px;
  color: #53647e;
  box-shadow: none;
}
body.vista-quiniela .app-header .search-bar input { color: #09204b; }
body.vista-quiniela .app-header .search-bar input::placeholder { color: #53647e; opacity: 1; }
body.vista-quiniela .app-header .search-bar svg { color: #53647e; }
body.vista-quiniela .app-header .icon-btn {
  width: 44px;
  height: 44px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: #ffffff;
  color: #09204b;
}
body.vista-quiniela .app-header .icon-btn:hover { background: #f0f4f8; border-color: #dce2e9; }
body.vista-quiniela .view { max-width: 1440px; padding: 0; animation: none; }
body.vista-quiniela .qn-page { min-width: 0; }
body.vista-quiniela .qn-patros-caja { margin: 0; background: #ffffff; }
body.vista-quiniela .qn-patros-caja .sponsor-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 96px;
  padding: 15px 32px;
  overflow: visible;
  background: #ffffff;
  border: 0;
  border-bottom: 1px solid #e1e6ed;
  border-radius: 0;
  box-shadow: none;
  color-scheme: light;
}
body.vista-quiniela .qn-patros-caja .sponsor-strip > span { color: #53647e; }
body.vista-quiniela .qn-patros-caja .sponsor-strip > a {
  flex: 1 1 0;
  min-width: 0;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.vista-quiniela .qn-patros-caja .sponsor-strip .s-logo {
  width: auto;
  max-width: 100%;
  height: 60px;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  background: transparent;
  filter: none;
  mix-blend-mode: normal;
}

/* Quiet navigation; the upcoming and previous rounds remain one click apart. */
body.vista-quiniela .qn-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 76px;
  padding: 0 32px;
  border-bottom: 1px solid var(--qn-line);
  background: var(--qn-surface);
}
body.vista-quiniela .qn-nav-brand { display: flex; align-items: center; gap: 20px; min-width: 0; }
body.vista-quiniela .qn-brand-title {
  margin: 0;
  font-family: var(--font);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 1px;
  line-height: 1.25;
  color: var(--qn-text);
  text-shadow: none;
}
body.vista-quiniela .qn-nav-meta { padding-left: 20px; border-left: 1px solid var(--qn-border); font-size: 14px; color: var(--qn-muted); }
body.vista-quiniela .qn-nav-actions { display: flex; align-items: center; gap: 18px; min-width: 0; }
body.vista-quiniela .qn-chips { display: flex; align-self: stretch; gap: 12px; margin: 0; padding: 0; min-width: 0; overflow-x: auto; }
body.vista-quiniela .qn-chips .chip {
  display: inline-flex;
  justify-content: center;
  gap: 5px;
  min-height: 76px;
  padding: 18px 10px 14px;
  border: 0;
  border-bottom: 4px solid transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--qn-muted);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transform: none;
}
body.vista-quiniela .qn-chips .chip.active,
body.vista-quiniela .qn-chips .chip[aria-pressed="true"] { border-bottom-color: var(--qn-active); color: var(--qn-text); }
body.vista-quiniela .qn-chips .chip span { color: var(--qn-muted); }
body.vista-quiniela .qn-chips .chip.active span { color: var(--qn-accent); }
body.vista-quiniela .qn-chips .chip:hover { background: var(--qn-hover); color: var(--qn-text); }
body.vista-quiniela .qn-theme { display: inline-flex; flex: none; gap: 2px; padding: 3px; border: 1px solid var(--qn-line); border-radius: 7px; }
body.vista-quiniela .qn-theme button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 44px;
  min-height: 44px;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--qn-muted);
  font-size: 14px;
  font-weight: 600;
}
body.vista-quiniela .qn-theme button[aria-pressed="true"] { background: var(--qn-selected); color: var(--qn-accent); border-color: var(--qn-border); }
body.vista-quiniela .qn-theme button svg { width: 17px; height: 17px; }
body.vista-quiniela .qn-account { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; color: var(--qn-muted); font-size: 14px; white-space: nowrap; }
body.vista-quiniela .qn-account:hover { color: var(--qn-accent); }
body.vista-quiniela .qn-account svg { width: 20px; height: 20px; }

/* Information to the left, an uninterrupted ballot to the right. */
body.vista-quiniela .qn-layout { display: grid; grid-template-columns: 275px minmax(0, 1fr); align-items: stretch; }
body.vista-quiniela .qn-sidebar { min-width: 0; padding: 38px 30px; background: var(--qn-aside); border-right: 1px solid var(--qn-line); }
body.vista-quiniela .qn-info-block { padding: 0 0 25px; margin: 0 0 26px; border-bottom: 1px solid var(--qn-line); }
body.vista-quiniela .qn-info-block:last-child { margin-bottom: 0; padding-bottom: 0; border: 0; }
body.vista-quiniela .qn-sidebar .eyebrow,
body.vista-quiniela .qn-info-label,
body.vista-quiniela .qn-info-block h4 { display: block; margin: 0; color: var(--qn-muted); font-family: var(--font); font-size: 12px; font-weight: 500; letter-spacing: 1.1px; text-transform: uppercase; }
body.vista-quiniela .qn-sidebar .qn-cierre { flex: initial; background: transparent; color: var(--qn-text); border-radius: 0; font-size: inherit; font-weight: inherit; }
body.vista-quiniela .qn-jor-nombre { margin: 9px 0 15px; font-size: clamp(42px, 4.2vw, 56px); font-family: var(--font-display); line-height: 1.14; letter-spacing: -1.3px; color: var(--qn-text); }
body.vista-quiniela .qn-status { display: flex; align-items: center; gap: 9px; margin: 12px 0 0; color: var(--qn-muted); font-size: 14px; }
body.vista-quiniela .qn-status::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--qn-active); border-radius: 50%; }
body.vista-quiniela .qn-status:not(.qn-status-open)::before { background: var(--qn-muted); }
body.vista-quiniela .qn-date { display: block; margin: 10px 0 4px; color: var(--qn-text); font-size: 23px; font-weight: 650; line-height: 1.35; letter-spacing: -.7px; }
body.vista-quiniela .qn-time { margin: 0; color: var(--qn-muted); font-size: 15px; }
body.vista-quiniela .qn-cuenta { margin: 12px 0 0; color: var(--qn-text); font-size: 15px; line-height: 1.5; }
body.vista-quiniela .qn-cuenta b { font-weight: 500; }
body.vista-quiniela .qn-prize-list { display: grid; gap: 13px; list-style: none; padding: 0; margin: 19px 0 16px; font-size: 15px; }
body.vista-quiniela .qn-prize-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: var(--qn-muted); }
body.vista-quiniela .qn-prize-list strong { color: var(--qn-text); font-variant-numeric: tabular-nums; font-weight: 650; }
body.vista-quiniela .qn-premios { border: 0; padding: 0; margin: 16px 0; font-size: 15px; color: var(--qn-muted); line-height: 1.6; }
body.vista-quiniela .qn-sidebar-note { margin: 12px 0 0; font-size: 14px; color: var(--qn-muted); line-height: 1.7; }
body.vista-quiniela .qn-sidebar a { color: var(--qn-accent); text-decoration: underline; text-underline-offset: 3px; }
body.vista-quiniela .qn-participant-summary > p { margin: 0; color: var(--qn-muted); font-size: 14px; }
body.vista-quiniela .qn-participant-summary > .qn-sidebar-note { margin-top: 12px; }
body.vista-quiniela .qn-ver-participantes { min-height: 44px; padding: 2px 0; border: 0; background: none; color: var(--qn-accent); font: inherit; text-decoration: underline; text-underline-offset: 3px; }
body.vista-quiniela .qn-stage { min-width: 0; padding: 32px 32px 40px; background: var(--qn-bg); }
body.vista-quiniela .qn-form-h { margin: 0 0 5px; color: var(--qn-text); font-family: var(--font); font-size: 28px; font-weight: 700; letter-spacing: -1px; line-height: 1.25; text-transform: none; }
body.vista-quiniela .qn-inst { margin: 0 0 20px; color: var(--qn-muted); font-size: 15px; line-height: 1.6; }
body.vista-quiniela .qn-colheads { display: grid; grid-template-columns: minmax(0, 1fr) 98px minmax(0, 1fr); gap: 12px; margin: 0 12px 8px 56px; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .8px; text-align: center; color: var(--qn-muted); }
body.vista-quiniela .qn-partidos { border: 1px solid var(--qn-line); border-radius: 8px; overflow: visible; }
body.vista-quiniela .qn-partidos > .muted { margin: 20px; }
body.vista-quiniela .qn-fila {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  grid-template-areas: none;
  align-items: stretch;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--qn-line);
}
body.vista-quiniela .qn-fila:last-child { border-bottom: 0; }
body.vista-quiniela .qn-number { display: flex; align-items: center; justify-content: center; color: var(--qn-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
body.vista-quiniela .qn-lev { display: grid; grid-area: auto; grid-template-columns: minmax(0, 1fr) 98px minmax(0, 1fr); gap: 12px; min-width: 0; }
body.vista-quiniela .qn-cubo {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 76px;
  padding: 11px 13px;
  border: 1px solid var(--qn-line);
  border-radius: 6px;
  background: var(--qn-card);
  color: var(--qn-text);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  box-shadow: none;
  transition: border-color .12s ease, background-color .12s ease;
}
body.vista-quiniela .qn-cubo:hover { background: var(--qn-hover); border-color: var(--qn-border); }
body.vista-quiniela .qn-cubo .qn-esc { width: 46px; height: 46px; border: 0; border-radius: 0; object-fit: contain; padding: 0; filter: none; mix-blend-mode: normal; }
body.vista-quiniela .qn-cubo .qn-esc-ini { border: 1px solid var(--qn-border); border-radius: 4px; color: var(--qn-muted); font-family: var(--font-display); }
body.vista-quiniela .qn-team-name { min-width: 0; flex: 1; white-space: normal; overflow-wrap: anywhere; }
body.vista-quiniela .qn-option-mark { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 20px; margin-left: auto; border-radius: 50%; background: var(--qn-active); color: var(--qn-action-text); font-size: 13px; font-weight: 800; opacity: 0; }
body.vista-quiniela .qn-option-mark svg { width: 14px; height: 14px; }
body.vista-quiniela .qn-cubo[aria-pressed="true"] { border-color: var(--qn-active); background: var(--qn-selected); color: var(--qn-text); box-shadow: inset 0 0 0 1px var(--qn-active); }
body.vista-quiniela .qn-cubo[aria-pressed="true"] .qn-option-mark { opacity: 1; }
body.vista-quiniela .qn-cubo[data-v="E"] { flex-direction: column; justify-content: center; gap: 1px; padding: 8px 24px 8px 8px; color: var(--qn-muted); text-align: center; }
body.vista-quiniela .qn-cubo[data-v="E"] .qn-option-letter { font-size: 19px; line-height: 1.2; font-weight: 600; }
body.vista-quiniela .qn-cubo[data-v="E"] .qn-option-label { font-size: 14px; }
body.vista-quiniela .qn-cubo[data-v="E"] .qn-option-mark { position: absolute; right: 6px; top: calc(50% - 10px); }
body.vista-quiniela .qn-cubo[data-v="E"][aria-pressed="true"] { color: var(--qn-text); }
body.vista-quiniela .qn-cubo:disabled { cursor: wait; }

/* The primary action becomes available when every match has a prediction. */
body.vista-quiniela .qn-envio { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 18px 24px; padding-top: 24px; margin-top: 26px; border-top: 1px solid var(--qn-line); }
body.vista-quiniela .qn-progress-wrap { flex: 1 1 250px; max-width: 580px; }
body.vista-quiniela .qn-progress-text { display: block; margin: 0 0 8px; font-size: 15px; font-weight: 600; color: var(--qn-text); }
body.vista-quiniela .qn-progress { display: block; width: 100%; height: 8px; overflow: hidden; border: 0; border-radius: 10px; background: var(--qn-line); color: var(--qn-active); appearance: none; -webkit-appearance: none; }
body.vista-quiniela .qn-progress::-webkit-progress-bar { background: var(--qn-line); border-radius: 10px; }
body.vista-quiniela .qn-progress::-webkit-progress-value { background: var(--qn-active); border-radius: 10px; }
body.vista-quiniela .qn-progress::-moz-progress-bar { background: var(--qn-active); border-radius: 10px; }
body.vista-quiniela .qn-progress-help { margin: 8px 0 0; color: var(--qn-muted); font-size: 14px; }
body.vista-quiniela .qn-page .btn { min-height: 46px; border-radius: 6px; box-shadow: none; font-size: 14px; justify-content: center; }
body.vista-quiniela .qn-page .btn-gold,
body.vista-quiniela .qn-review-toggle { border: 1px solid var(--qn-accent); background: var(--qn-accent); color: var(--qn-action-text); }
body.vista-quiniela .qn-review-toggle { flex: 0 0 auto; min-width: 200px; min-height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 14px; padding: 13px 22px; border-radius: 6px; font-size: 15px; font-weight: 600; }
body.vista-quiniela .qn-page .btn:hover,
body.vista-quiniela .qn-review-toggle:hover { box-shadow: none; }
body.vista-quiniela .qn-page .btn:disabled,
body.vista-quiniela .qn-review-toggle:disabled { opacity: 1; cursor: not-allowed; background: var(--qn-disabled); color: var(--qn-disabled-text); border-color: var(--qn-disabled); box-shadow: none; }
body.vista-quiniela .qn-review { flex-basis: 100%; width: 100%; margin-top: 4px; padding: 22px; border: 1px solid var(--qn-line); border-radius: 7px; background: var(--qn-surface); }
body.vista-quiniela .qn-review h3,
body.vista-quiniela .qn-review-title { margin: 0 0 6px; color: var(--qn-text); font-family: var(--font); font-size: 20px; text-transform: none; letter-spacing: -.3px; }
body.vista-quiniela .qn-review-list { list-style: decimal; margin: 15px 0 20px; padding: 0 0 0 22px; font-size: 15px; }
body.vista-quiniela .qn-review-list li { padding: 9px 0; border-bottom: 1px solid var(--qn-line); color: var(--qn-muted); }
body.vista-quiniela .qn-review-list li strong { display: block; color: var(--qn-text); font-weight: 600; }
body.vista-quiniela .qn-review-list li:last-child { border-bottom: 0; }
body.vista-quiniela .qn-login,
body.vista-quiniela .qn-ok { width: 100%; border: 1px solid var(--qn-line); border-radius: 6px; background: var(--qn-aside); padding: 18px; }
body.vista-quiniela .qn-ya { margin-bottom: 22px; padding: 15px 18px; border-left: 3px solid var(--qn-active); background: var(--qn-selected); color: var(--qn-text); }
body.vista-quiniela .qn-faltan { margin: 0; }
body.vista-quiniela .qn-account-note { padding: 26px 28px; text-align: center; color: var(--qn-muted); font-size: 15px; border-top: 1px solid var(--qn-line); background: var(--qn-surface); }
body.vista-quiniela .qn-account-note p { margin: 0; }
body.vista-quiniela .qn-account-note a { display: flex; align-items: center; justify-content: center; width: fit-content; margin: 0 auto; min-height: 44px; color: var(--qn-accent); text-decoration: underline; text-underline-offset: 3px; }

/* Participants stay available without competing with the ballot. */
body.vista-quiniela .qn-participants { margin-top: 30px; padding-top: 4px; border-top: 1px solid var(--qn-line); }
body.vista-quiniela .qn-participants summary { display: list-item; padding: 15px 0; min-height: 48px; color: var(--qn-accent); cursor: pointer; font-size: 14px; }
body.vista-quiniela .qn-participants .panel,
body.vista-quiniela .qn-stage > #qnLista { margin: 0; padding: 8px 0 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
body.vista-quiniela #qnLista h3 { font-family: var(--font); font-size: 20px; color: var(--qn-text); text-transform: none; letter-spacing: -.4px; }
body.vista-quiniela .qn-nicks { gap: 10px 20px; margin: 15px 0; }
body.vista-quiniela .qn-nick { border: 0; border-radius: 0; background: none; padding: 0; font-size: 14px; font-weight: 500; color: var(--qn-text); }
body.vista-quiniela .qn-busca { max-width: 360px; margin: 20px 0; }
body.vista-quiniela .qn-busca input { min-height: 46px; font-size: 16px; border-radius: 6px; border-color: var(--qn-border); background: var(--qn-card); color: var(--qn-text); }
body.vista-quiniela .qn-busca input::placeholder { color: var(--qn-muted); opacity: 1; }
body.vista-quiniela .qn-scroll { position: relative; max-width: 100%; border: 1px solid var(--qn-line); border-radius: 6px; scrollbar-color: var(--qn-border) var(--qn-bg); }
body.vista-quiniela .qn-tabla { font-size: 14px; }
body.vista-quiniela .qn-tabla th,
body.vista-quiniela .qn-tabla td { padding: 12px 10px; border-color: var(--qn-line); }
body.vista-quiniela .qn-tabla .qn-col-nick { min-width: 150px; max-width: 190px; padding-left: 14px; background: var(--qn-bg); }
body.vista-quiniela .qn-tabla thead th,
body.vista-quiniela .qn-tabla thead .qn-col-nick { background: var(--qn-aside); }
body.vista-quiniela .qn-th-esc { gap: 5px; }
body.vista-quiniela .qn-th-esc .qn-esc { width: 28px; height: 28px; border-radius: 0; }
body.vista-quiniela .qn-marc { margin: 5px 0 1px; font-size: 15px; }
body.vista-quiniela .qn-gana { color: var(--qn-accent); font-size: 15px; }
body.vista-quiniela .qn-gana.qn-pend { color: var(--qn-muted); opacity: 1; }
body.vista-quiniela .qn-tabla .qn-si { background: #1f7a3d; color: #ffffff; }
body.vista-quiniela .qn-tabla .qn-pts-7 { background: #ffe27a; color: #4a3a00; }
body.vista-quiniela .qn-tabla .qn-pts-6 { background: #bdeffb; color: #064252; }
body.vista-quiniela .qn-tabla .qn-pts-5 { background: #d7d9a8; color: #3d3f10; }
body.vista-quiniela .qn-tabla .qn-pts-4 { background: #ffd0a1; color: #5c2f00; }
body.vista-quiniela .qn-tabla .qn-pts-0 { background: #e7e3df; color: #5a534d; }

/* The complete, original promotional artwork follows the playing area. */
body.vista-quiniela .qn-promo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 54px;
  margin: 0;
  padding: 36px 40px;
  background: #ffffff;
  border-top: 1px solid #e1e6ed;
  border-bottom: 1px solid #e1e6ed;
  color: #09204b;
  color-scheme: light;
}
body.vista-quiniela .qn-promo .qn-hero-logo { width: 340px; max-width: 45%; height: auto; border-radius: 0; border: 0; padding: 0; object-fit: contain; filter: none; box-shadow: none; }
body.vista-quiniela .qn-promo .qn-hero-txt { flex: 0 1 470px; min-width: 0; }
body.vista-quiniela .qn-promo .eyebrow { color: #53647e; font-size: 12px; text-shadow: none; }
body.vista-quiniela .qn-promo .qn-titulo,
body.vista-quiniela .qn-promo-title { margin: 7px 0 12px; color: #09204b; font-family: var(--font-display); font-size: 32px; letter-spacing: .5px; text-shadow: none; }
body.vista-quiniela .qn-promo .qn-lema { color: #53647e; font-size: 15px; line-height: 1.7; text-shadow: none; }
body.vista-quiniela .qn-footer { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 24px; padding: 23px 28px; color: var(--qn-muted); font-size: 14px; background: var(--qn-surface); }
body.vista-quiniela .qn-footer p { margin: 0; }
body.vista-quiniela .qn-footer a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: 3px; }
body.vista-quiniela .qn-porton { margin: 36px auto; background: var(--qn-surface); box-shadow: none; border-color: var(--qn-line); }
body.vista-quiniela .qn-state { min-height: 300px; padding: 1px 24px 30px; }
body.vista-quiniela .qn-porton .qn-cod { min-height: 52px; color: var(--qn-text); }
body.vista-quiniela .qn-page [hidden] { display: none !important; }
body.vista-quiniela :is(a, button, input, summary, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--qn-accent); outline-offset: 3px; }
body.vista-quiniela .app-header :is(a, button, input):focus-visible { outline-color: #006fc9; }
body.vista-quiniela .qn-patros-caja a:focus-visible { outline-color: #006fc9; }
body.vista-quiniela .bottom-nav { background: var(--qn-surface); border-top-color: var(--qn-line); backdrop-filter: none; }
body.vista-quiniela .bottom-nav .nav-item { color: var(--qn-muted); }
body.vista-quiniela .bottom-nav .nav-item.active { color: var(--qn-accent); }

@media (max-width: 1220px) {
  body.vista-quiniela .app-header .brand-slogan { font-size: 16px; letter-spacing: 1.6px; }
  body.vista-quiniela .qn-nav { flex-wrap: wrap; gap: 0 20px; padding-top: 12px; }
  body.vista-quiniela .qn-nav-brand { min-height: 42px; }
  body.vista-quiniela .qn-nav-actions { margin-left: auto; }
  body.vista-quiniela .qn-chips .chip { min-height: 62px; }
  body.vista-quiniela .qn-layout { grid-template-columns: 248px minmax(0, 1fr); }
  body.vista-quiniela .qn-sidebar { padding: 32px 24px; }
  body.vista-quiniela .qn-stage { padding: 30px 24px 36px; }
  body.vista-quiniela .qn-cubo { padding: 10px; gap: 10px; font-size: 15px; }
  body.vista-quiniela .qn-cubo .qn-esc { width: 40px; height: 40px; }
  body.vista-quiniela .qn-colheads { grid-template-columns: minmax(0, 1fr) 84px minmax(0, 1fr); gap: 9px; }
  body.vista-quiniela .qn-lev { grid-template-columns: minmax(0, 1fr) 84px minmax(0, 1fr); gap: 9px; }
  body.vista-quiniela .qn-option-mark { width: 18px; height: 18px; font-size: 12px; }
  body.vista-quiniela .qn-cubo[data-v="E"] .qn-option-mark { right: 5px; top: calc(50% - 9px); }
}

@media (max-width: 960px) {
  body.vista-quiniela .app-header { min-height: 84px; padding: 10px 20px; }
  body.vista-quiniela .app-header .brand { gap: 12px; }
  body.vista-quiniela .app-header .brand-logo { width: 84px; height: 63px; }
  body.vista-quiniela .app-header .brand-slogan { font-size: 14px; letter-spacing: 1.3px; }
  body.vista-quiniela .app-header .search-bar { width: 180px; }
  body.vista-quiniela .qn-patros-caja .sponsor-strip { min-height: 84px; gap: 16px; padding: 12px 20px; }
  body.vista-quiniela .qn-patros-caja .sponsor-strip .s-logo { height: 48px; }
  body.vista-quiniela .qn-patros-caja .sponsor-strip > a { min-height: 48px; }
  body.vista-quiniela .qn-nav { padding-left: 24px; padding-right: 24px; }
  body.vista-quiniela .qn-nav-actions { width: 100%; margin-left: 0; justify-content: space-between; }
  body.vista-quiniela .qn-chips { margin-right: auto; }
  body.vista-quiniela .qn-layout { grid-template-columns: 210px minmax(0, 1fr); }
  body.vista-quiniela .qn-sidebar { padding: 30px 20px; }
  body.vista-quiniela .qn-stage { padding: 30px 20px; }
  body.vista-quiniela .qn-jor-nombre { font-size: 44px; }
  body.vista-quiniela .qn-date { font-size: 21px; }
  body.vista-quiniela .qn-info-block { margin-bottom: 24px; padding-bottom: 23px; }
  body.vista-quiniela .qn-fila { grid-template-columns: 20px minmax(0, 1fr); gap: 7px; padding: 9px 8px; }
  body.vista-quiniela .qn-colheads { margin-left: 36px; margin-right: 8px; grid-template-columns: minmax(0, 1fr) 66px minmax(0, 1fr); gap: 7px; }
  body.vista-quiniela .qn-lev { grid-template-columns: minmax(0, 1fr) 66px minmax(0, 1fr); gap: 7px; }
  body.vista-quiniela .qn-cubo { flex-direction: column; gap: 8px; justify-content: center; min-height: 116px; padding: 12px 8px; text-align: center; }
  body.vista-quiniela .qn-cubo .qn-esc { width: 40px; height: 40px; }
  body.vista-quiniela .qn-team-name { flex: none; font-size: 14px; }
  body.vista-quiniela .qn-option-mark { position: absolute; top: 5px; right: 5px; }
  body.vista-quiniela .qn-cubo[data-v="E"] { padding: 12px 4px; }
  body.vista-quiniela .qn-cubo[data-v="E"] .qn-option-mark { top: 5px; right: 5px; }
  body.vista-quiniela .qn-review-toggle { flex: 1 1 auto; min-height: 48px; }
  body.vista-quiniela .qn-promo { gap: 30px; padding: 28px; }
}

@media (max-width: 700px) {
  body.vista-quiniela .app-header { padding: 8px 16px; min-height: 74px; gap: 7px; }
  body.vista-quiniela .app-header .brand-logo { width: 76px; height: 57px; }
  body.vista-quiniela .app-header .brand-text { display: none; }
  body.vista-quiniela .app-header .search-bar { flex: 1; width: auto; min-width: 0; max-width: 290px; padding: 8px 10px; }
  body.vista-quiniela .app-header .search-bar input { min-width: 0; font-size: 16px; }
  body.vista-quiniela .app-header .icon-btn { width: 44px; }
  body.vista-quiniela .qn-nav { padding: 12px 18px 0; gap: 7px; }
  body.vista-quiniela .qn-nav-brand { min-height: 34px; gap: 14px; }
  body.vista-quiniela .qn-brand-title { font-size: 20px; }
  body.vista-quiniela .qn-nav-meta { padding-left: 14px; font-size: 14px; }
  body.vista-quiniela .qn-nav-actions { flex-wrap: wrap; gap: 4px 12px; }
  body.vista-quiniela .qn-chips { order: 3; flex-basis: 100%; width: 100%; gap: 12px; }
  body.vista-quiniela .qn-chips .chip { flex: 1; min-height: 54px; font-size: 14px; padding: 12px 7px 8px; }
  body.vista-quiniela .qn-theme { margin-right: auto; }
  body.vista-quiniela .qn-theme button { padding: 5px 10px; }
  body.vista-quiniela .qn-account { font-size: 14px; }
  body.vista-quiniela .qn-layout { display: block; }
  body.vista-quiniela .qn-sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 24px 20px; border-right: 0; border-bottom: 1px solid var(--qn-line); }
  body.vista-quiniela .qn-info-block { min-width: 0; padding: 0; margin: 0; border: 0; }
  body.vista-quiniela .qn-info-block:nth-child(n + 3) { padding-top: 18px; border-top: 1px solid var(--qn-line); }
  body.vista-quiniela .qn-jor-nombre { font-size: 40px; margin: 7px 0 10px; }
  body.vista-quiniela .qn-status { margin-top: 10px; font-size: 14px; gap: 7px; }
  body.vista-quiniela .qn-sidebar .eyebrow,
  body.vista-quiniela .qn-info-label,
  body.vista-quiniela .qn-info-block h4 { font-size: 12px; letter-spacing: .7px; }
  body.vista-quiniela .qn-date { font-size: 20px; letter-spacing: -.5px; }
  body.vista-quiniela .qn-time { font-size: 14px; }
  body.vista-quiniela .qn-cuenta { margin-top: 6px; font-size: 15px; color: var(--qn-text); }
  body.vista-quiniela .qn-prize-list { margin: 13px 0; gap: 7px; font-size: 15px; }
  body.vista-quiniela .qn-sidebar-note { font-size: 14px; line-height: 1.6; }
  body.vista-quiniela .qn-stage { padding: 26px 18px 30px; }
  body.vista-quiniela .qn-form-h { font-size: 25px; letter-spacing: -.8px; }
  body.vista-quiniela .qn-inst { font-size: 14px; margin-bottom: 18px; }
  body.vista-quiniela .qn-colheads { margin-left: 0; margin-right: 0; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); font-size: 12px; }
  body.vista-quiniela .qn-partidos { border: 0; border-radius: 0; }
  body.vista-quiniela .qn-fila { position: relative; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 20px 0 12px; }
  body.vista-quiniela .qn-fila:first-child { padding-top: 16px; }
  body.vista-quiniela .qn-number { position: absolute; top: 1px; left: 1px; font-size: 12px; line-height: 16px; }
  body.vista-quiniela .qn-lev { grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); gap: 7px; }
  body.vista-quiniela .qn-cubo { min-height: 120px; gap: 8px; padding: 12px 7px; border-color: var(--qn-border); }
  body.vista-quiniela .qn-cubo .qn-esc { width: 42px; height: 42px; }
  body.vista-quiniela .qn-team-name { font-size: 14px; line-height: 1.35; }
  body.vista-quiniela .qn-option-mark { width: 18px; height: 18px; }
  body.vista-quiniela .qn-cubo[data-v="E"] .qn-option-label { font-size: 14px; }
  body.vista-quiniela .qn-envio { margin-top: 18px; padding-top: 20px; gap: 18px; }
  body.vista-quiniela .qn-progress-wrap { flex-basis: 100%; max-width: none; }
  body.vista-quiniela .qn-review-toggle { width: 100%; min-height: 50px; }
  body.vista-quiniela .qn-review { padding: 17px; }
  body.vista-quiniela .qn-review-list { font-size: 15px; }
  body.vista-quiniela .qn-participants { margin-top: 24px; }
  body.vista-quiniela .qn-account-note { padding: 21px 20px; font-size: 15px; }
  body.vista-quiniela .qn-promo { flex-direction: column; gap: 22px; padding: 30px 24px; text-align: center; }
  body.vista-quiniela .qn-promo .qn-hero-logo { width: 360px; max-width: 100%; }
  body.vista-quiniela .qn-promo .qn-hero-txt { flex: auto; width: 100%; max-width: 430px; }
  body.vista-quiniela .qn-promo .qn-titulo,
  body.vista-quiniela .qn-promo-title { font-size: 26px; }
  body.vista-quiniela .qn-promo .qn-lema { font-size: 14px; }
  body.vista-quiniela .qn-footer { padding: 18px 22px; gap: 0 18px; font-size: 14px; }
  body.vista-quiniela .qn-porton { margin: 24px auto; }
  body.vista-quiniela .qn-state { padding: 1px 18px 24px; }
}

@media (max-width: 360px) {
  body.vista-quiniela .app-header { padding-left: 10px; padding-right: 10px; gap: 3px; }
  body.vista-quiniela .app-header .brand-logo { width: 64px; height: 49px; }
  body.vista-quiniela .app-header .search-bar { padding-left: 7px; padding-right: 7px; }
  body.vista-quiniela .app-header .search-bar svg { width: 16px; }
  body.vista-quiniela .qn-sidebar { padding: 20px 14px; gap: 15px; }
  body.vista-quiniela .qn-jor-nombre { font-size: 36px; }
  body.vista-quiniela .qn-date { font-size: 18px; }
  body.vista-quiniela .qn-stage { padding-left: 12px; padding-right: 12px; }
  body.vista-quiniela .qn-lev,
  body.vista-quiniela .qn-colheads { grid-template-columns: minmax(0, 1fr) 58px minmax(0, 1fr); gap: 6px; }
  body.vista-quiniela .qn-cubo { min-height: 126px; padding-left: 5px; padding-right: 5px; }
  body.vista-quiniela .qn-team-name { font-size: 13px; }
  body.vista-quiniela .qn-patros-caja .sponsor-strip { gap: 10px 18px; }
}

/* MN-07: la tira del pie se ve también aquí. En la computadora ocupa el alto de la barra (64 px) y el
   cuerpo le deja ese aire; en el celular van las DOS barras apiladas (la tira de 44 px sobre el menú). */
@media (min-width: 920px) { body.vista-quiniela:not(.con-tira) { padding-bottom: 0; } }
@media (max-width: 919px) { body.vista-quiniela.con-tira { padding-bottom: calc(var(--nav-h) + 44px + env(safe-area-inset-bottom)); } }
@media (prefers-reduced-motion: reduce) {
  body.vista-quiniela *, body.vista-quiniela *::before, body.vista-quiniela *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media (prefers-contrast: more) {
  body.vista-quiniela .qn-cubo { border-color: var(--qn-muted); }
  body.vista-quiniela .qn-cubo[aria-pressed="true"] { outline: 2px solid var(--qn-accent); outline-offset: -3px; }
  body.vista-quiniela .qn-tabla .qn-si { background: #145c2c; }
}

/* ===================== v116 · arreglos de lo que ve el participante =====================
   Recetas del contrato de diseño (R1, R2, R6, R7) y pisos de letra (R3). Nada se rediseña: se
   reacomodan las piezas de siempre y se suben tamaños. */

/* R2 · La boleta en la primera pantalla. El lateral va partido en dos <aside>: jornada y cierre ANTES
   de la boleta, premios y participantes DESPUÉS. En escritorio se ven como una sola columna, igual
   que antes: el filete entre las dos cajas es el mismo de .qn-info-block. */
body.vista-quiniela .qn-layout { grid-template-rows: auto 1fr; }
body.vista-quiniela .qn-sidebar { grid-column: 1; }
body.vista-quiniela .qn-stage { grid-column: 2; grid-row: 1 / span 2; }
body.vista-quiniela .qn-sidebar.qn-sidebar-a { grid-row: 1; padding-bottom: 0; }
body.vista-quiniela .qn-sidebar.qn-sidebar-b { grid-row: 2; padding-top: 0; }
body.vista-quiniela .qn-sidebar-a .qn-info-block:last-child { margin-bottom: 26px; padding-bottom: 25px; border-bottom: 1px solid var(--qn-line); }

/* R7 · Pestañas que caben: el nombre del torneo no se encima y las jornadas viejas van plegadas. */
body.vista-quiniela .qn-nav-brand { flex: none; }
body.vista-quiniela .qn-nav-meta { white-space: nowrap; }
/* "Jornadas anteriores" vive al final de la boleta (publico-16): es el mismo desplegable .qn-participants
   de "Ya jugaron", sin estilo propio más que el de sus pestañas. */
body.vista-quiniela .qn-anteriores .qn-chips { flex-wrap: wrap; overflow: visible; gap: 0 12px; padding-bottom: 6px; }
body.vista-quiniela .qn-anteriores .qn-chips .chip { flex: 0 1 auto; min-height: 50px; padding: 12px 8px 10px; }

/* R1 · Resultados: el número del partido arriba de sus escudos (el mismo 01-07 de la boleta) y la
   leyenda de cómo se lee la tabla. */
body.vista-quiniela .qn-tabla .qn-number { position: static; display: block; margin: 0 0 4px; font-size: 12px; line-height: 1.2; }
body.vista-quiniela .qn-desliza { display: none; }
/* R6 · Tu fila, resaltada (en todas las anchuras) y tu resultado arriba de la tabla. */
body.vista-quiniela .qn-tabla tr.qn-yo > .qn-col-nick { background: var(--qn-selected); box-shadow: inset 3px 0 0 var(--qn-active); }
body.vista-quiniela .qn-ya p { margin: 6px 0 0; color: var(--qn-text); font-size: 15px; line-height: 1.5; }
body.vista-quiniela .qn-ya p.muted { color: var(--qn-muted); }
body.vista-quiniela .qn-ya .qn-account { color: var(--qn-accent); text-decoration: underline; text-underline-offset: 3px; }
body.vista-quiniela .qn-ya .qn-prize-list { margin: 12px 0 10px; }
body.vista-quiniela .qn-ya .qn-prize-list li span { color: var(--qn-text); }
body.vista-quiniela .qn-ya .btn { margin-top: 4px; }
body.vista-quiniela .qn-ok .btn + .btn, body.vista-quiniela .qn-ok .btn + p + .btn { margin-top: 10px; }
body.vista-quiniela .qn-nota, body.vista-quiniela .qn-porton-nota { font-size: 14px; }
body.vista-quiniela .qn-porton-nota { margin: 12px 0 0; text-align: center; }
body.vista-quiniela .vc-nota-codigo { margin: 8px 0 0; font-size: 14px; }
body.vista-quiniela .qn-porton .qn-ya { margin: 4px 0 14px; }
/* El error persistente también se lee en el tema oscuro de la quiniela (el rojo de la casa daba 3:1). */
body.vista-quiniela[data-qn-theme="oscuro"] .qn-cod-err { color: #ff9a8f; }
/* Los enlaces de "¿Dudas?" y de reintentar se tocan con el dedo: 44 px como el resto de la quiniela. */
body.vista-quiniela .qn-footer a, body.vista-quiniela .vc-dudas a { min-height: 44px; }
body.vista-quiniela .qn-page .empty .btn { margin-top: 6px; }

@media (max-width: 919px) {
  /* Lo que se desliza a la vista al abrir la revisión (Enviar o Entrar) no queda bajo la barra fija
     del pie (64 px), que en el celular se come el borde de abajo de la pantalla. */
  body.vista-quiniela #qnEnviar,
  body.vista-quiniela .qn-login { scroll-margin-bottom: calc(var(--nav-h) + 16px + env(safe-area-inset-bottom)); }
}

@media (max-width: 700px) {
  /* R2 en celular: la boleta sube; las dos mitades del lateral conservan su rejilla de 2 columnas. */
  body.vista-quiniela .qn-sidebar.qn-sidebar-a { padding: 18px 20px 20px; }
  body.vista-quiniela .qn-stage { padding-top: 22px; }
  body.vista-quiniela .qn-sidebar.qn-sidebar-b { padding: 24px 20px; border-top: 1px solid var(--qn-line); border-bottom: 0; }
  body.vista-quiniela .qn-sidebar-a .qn-info-block:last-child { margin: 0; padding: 0; border: 0; }
  /* "Mis VAROAMIGOS" cabe en el mismo renglón que el tema y "Mi cuenta": se lee "VAROAMIGOS" con su
     estrella y el nombre accesible completo se conserva en el enlace. */
  body.vista-quiniela .qn-nav-actions { gap: 4px 10px; }
  body.vista-quiniela .qn-account { gap: 6px; }
  body.vista-quiniela .qn-account .qn-sm-oculto { display: none; }
  /* R1 · Puntos siempre a la vista: la columna que decide queda pegada a la derecha, sin barrer. */
  body.vista-quiniela .qn-tabla .qn-pts,
  body.vista-quiniela .qn-tabla .qn-pts-h { position: sticky; right: 0; z-index: 1; box-shadow: -1px 0 0 var(--qn-line); }
  body.vista-quiniela .qn-tabla .qn-pts-h { background: var(--qn-aside); }
  body.vista-quiniela .qn-tabla .qn-col-nick { min-width: 112px; max-width: 132px; overflow: hidden; text-overflow: ellipsis; }
  body.vista-quiniela .qn-desliza { display: inline; }
  body.vista-quiniela .qn-ya { padding: 14px 16px; }
}

@media (max-width: 360px) {
  body.vista-quiniela .qn-sidebar.qn-sidebar-a { padding: 18px 14px 20px; }
  body.vista-quiniela .qn-sidebar.qn-sidebar-b { padding: 20px 14px; }
}

/* ===================== v117 · minuta del 19-sep: lo que ve el participante =====================
   Todo con los tokens --qn-* (funciona en los dos temas) y las piezas de siempre. */

/* MN-07 · Patrocinadores arriba: el MISMO banner de la portada (.top-sponsors), blanco en los dos temas
   (contrato 2.1: los logos multicolor se ven sin alterar). Dos logos por página en el celular, tres en
   tableta y cuatro o cinco en la computadora; flechas de 44 px; 96 px de alto como máximo en el celular
   para que la boleta siga en la primera pantalla (receta R2). */
body.vista-quiniela .qn-patros-caja .top-sponsors { margin: 0; padding: 26px 58px 8px; border: 0; border-bottom: 1px solid #e1e6ed; border-radius: 0; background: #ffffff; box-shadow: none; color-scheme: light; }
body.vista-quiniela .qn-patros-caja .top-sponsors::before { display: none; }
body.vista-quiniela .qn-patros-caja .ts-tag { top: 6px; left: 16px; color: #53647e; font-family: var(--font); font-size: 12px; font-weight: 600; letter-spacing: 1px; }
body.vista-quiniela .qn-patros-caja .ts-slide { flex-basis: 25%; min-width: 25%; min-height: 76px; }
body.vista-quiniela .qn-patros-caja .ts-logo { height: 64px; max-width: 92%; border-radius: 0; filter: none; }
body.vista-quiniela .qn-patros-caja .ts-arrow { width: 44px; height: 44px; border: 1px solid #dce2e9; background: #ffffff; color: #09204b; font-size: 26px; box-shadow: none; }
body.vista-quiniela .qn-patros-caja .ts-arrow:hover { background: #f0f4f8; color: #09204b; }
body.vista-quiniela .qn-patros-caja .ts-prev { left: 7px; }
body.vista-quiniela .qn-patros-caja .ts-next { right: 7px; }
body.vista-quiniela .qn-patros-caja :is(a, button):focus-visible { outline: 3px solid #006fc9; outline-offset: -3px; }
@media (min-width: 1200px) { body.vista-quiniela .qn-patros-caja .ts-slide { flex-basis: 20%; min-width: 20%; } }
@media (max-width: 959px) { body.vista-quiniela .qn-patros-caja .ts-slide { flex-basis: 33.333%; min-width: 33.333%; } }
@media (max-width: 700px) {
  body.vista-quiniela .qn-patros-caja .top-sponsors { padding: 24px 50px 4px; }
  body.vista-quiniela .qn-patros-caja .ts-slide { flex-basis: 50%; min-width: 50%; min-height: 60px; padding: 2px 6px; }
  body.vista-quiniela .qn-patros-caja .ts-logo { height: 52px; }
  body.vista-quiniela .qn-patros-caja .ts-prev { left: 3px; }
  body.vista-quiniela .qn-patros-caja .ts-next { right: 3px; }
}

/* MN-07 · La tira del pie vuelve a verse aquí: lo que se desliza a la vista al abrir la revisión (Enviar
   o Entrar) queda POR ENCIMA de las dos barras fijas, que se quedan con el toque de lo que tapan. */
@media (max-width: 919px) {
  body.vista-quiniela.con-tira #qnEnviar,
  body.vista-quiniela.con-tira .qn-login { scroll-margin-bottom: calc(var(--nav-h) + 44px + 16px + env(safe-area-inset-bottom)); }
}
@media (min-width: 920px) {
  body.vista-quiniela.con-tira #qnEnviar,
  body.vista-quiniela.con-tira .qn-login { scroll-margin-bottom: calc(var(--nav-h) + 16px); }
}

/* MN-03 · La hora de cada partido, arriba de sus cubos y junto a su número. */
body.vista-quiniela .qn-hora { grid-column: 2; grid-row: 1; align-self: center; color: var(--qn-muted); font-size: 14px; font-weight: 600; line-height: 1.35; font-variant-numeric: tabular-nums; }
body.vista-quiniela .qn-fila.qn-con-hora { row-gap: 7px; }
body.vista-quiniela .qn-fila.qn-con-hora > .qn-number { grid-column: 1; grid-row: 1; }
body.vista-quiniela .qn-fila.qn-con-hora > .qn-lev { grid-column: 2; grid-row: 2; }
/* Partido que ya empezó: la fila se apaga (control apagado: fondo --qn-disabled) pero los nombres se
   siguen LEYENDO, con --qn-muted (AA medido en los dos temas), y debajo va el porqué. La elección que
   ya había mandado la persona se queda marcada, en gris. */
body.vista-quiniela .qn-fila-nota { grid-column: 2; margin: 0; color: var(--qn-muted); font-size: 14px; line-height: 1.45; }
body.vista-quiniela .qn-cerrado .qn-cubo,
body.vista-quiniela .qn-cerrado .qn-cubo:hover { background: var(--qn-disabled); border-color: var(--qn-disabled); color: var(--qn-muted); box-shadow: none; cursor: not-allowed; }
body.vista-quiniela .qn-cerrado .qn-cubo .qn-esc-ini { color: var(--qn-muted); border-color: var(--qn-border); }
body.vista-quiniela .qn-cerrado .qn-cubo[aria-pressed="true"] { border-color: var(--qn-muted); box-shadow: inset 0 0 0 1px var(--qn-muted); color: var(--qn-text); }
body.vista-quiniela .qn-cerrado .qn-cubo[aria-pressed="true"] .qn-option-mark { opacity: 1; background: var(--qn-muted); color: var(--qn-card); }
body.vista-quiniela .qn-cerrado .qn-cubo[data-v="E"] { color: var(--qn-muted); }
body.vista-quiniela .qn-cerrado .qn-cubo[data-v="E"][aria-pressed="true"] { color: var(--qn-text); }
body.vista-quiniela .qn-review-list li.qn-review-cerrado strong { color: var(--qn-muted); font-weight: 500; }
body.vista-quiniela .qn-regla { margin: 10px 0 0; color: var(--qn-text); font-size: 15px; line-height: 1.45; }
body.vista-quiniela .qn-aviso-cierre strong { font-weight: 600; }

/* MN-02 · "Así van jugando": porcentajes por partido para quien ya jugó. El dato va ESCRITO; la barra es
   adorno (L --qn-accent, E --qn-border, V --qn-text, separadas por 2 px de --qn-card). */
body.vista-quiniela .qn-reparto { margin: 4px 0 18px; }
body.vista-quiniela #qnLista .qn-reparto h3 { margin: 6px 0 6px; }
body.vista-quiniela .qn-reparto h3 .muted { font-weight: 400; font-size: 16px; }
body.vista-quiniela .qn-rep-tuyo-total { margin: 0 0 14px; padding: 10px 14px; border-left: 3px solid var(--qn-active); background: var(--qn-selected); color: var(--qn-text); font-size: 15px; }
body.vista-quiniela .qn-rep-lista { list-style: none; margin: 0; padding: 0; border: 1px solid var(--qn-line); border-radius: 8px; background: var(--qn-card); }
body.vista-quiniela .qn-rep-fila { padding: 12px 14px; border-bottom: 1px solid var(--qn-line); }
body.vista-quiniela .qn-rep-fila:last-child { border-bottom: 0; }
body.vista-quiniela .qn-rep-cab { display: flex; align-items: baseline; gap: 10px; color: var(--qn-text); font-size: 15px; font-weight: 600; line-height: 1.4; }
body.vista-quiniela .qn-rep-cab .qn-number { position: static; flex: none; display: inline; font-size: 14px; line-height: 1.4; }
body.vista-quiniela .qn-rep-barra { display: flex; gap: 2px; height: 10px; margin: 9px 0 7px; border-radius: 5px; overflow: hidden; background: var(--qn-card); }
body.vista-quiniela .qn-rep-barra > span { display: block; min-width: 0; }
body.vista-quiniela .qn-rep-l { background: var(--qn-accent); }
body.vista-quiniela .qn-rep-e { background: var(--qn-border); }
body.vista-quiniela .qn-rep-v { background: var(--qn-text); }
body.vista-quiniela .qn-rep-txt { margin: 6px 0 0; color: var(--qn-text); font-size: 15px; line-height: 1.5; }
body.vista-quiniela .qn-rep-txt b { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
body.vista-quiniela .qn-rep-tuyo { color: var(--qn-muted); }
body.vista-quiniela .qn-rep-datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 10px 0; }
body.vista-quiniela .qn-rep-datos .qn-rep-dato { display: flex; flex-direction: column; gap: 6px; padding: 9px 10px; border-top: 2px solid var(--qn-line); color: var(--qn-text); font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
body.vista-quiniela .qn-rep-datos .qn-rep-dato b { margin-top: auto; font-size: 22px; line-height: 1.15; font-variant-numeric: tabular-nums; }
body.vista-quiniela .qn-rep-datos .qn-rep-elegido { border-top-color: var(--qn-accent); background: var(--qn-selected); }
body.vista-quiniela .qn-rep-sub { margin: 20px 0 4px; color: var(--qn-text); font-size: 16px; font-weight: 700; }
body.vista-quiniela .qn-rep-pocos { color: var(--qn-text); }

/* "Elige tu quiniela": la misma identidad Talachita en tarjetas compactas. Se llega a Jugar sin que
   una portada enorme ocupe la primera pantalla; los logos reales se ven completos sobre blanco. */
body.vista-quiniela .qn-elige { padding: 26px 0 10px; }
body.vista-quiniela .qn-elige-lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; list-style: none; margin: 0; padding: 0; }
@media (min-width: 700px) { body.vista-quiniela .qn-elige-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
body.vista-quiniela .qn-elige-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--qn-line); border-radius: 8px; background: var(--qn-surface); color: var(--qn-text); text-decoration: none; transition: border-color .12s ease; }
body.vista-quiniela .qn-elige-card:hover { border-color: var(--qn-active); }
body.vista-quiniela .qn-elige-card.qn-elige-ultima { border-color: var(--qn-active); box-shadow: inset 0 0 0 1px var(--qn-active); }
body.vista-quiniela .qn-elige-portada { display: block; height: 100px; overflow: hidden; background: #0c0e12; }
body.vista-quiniela .qn-elige-portada img { display: block; width: 100%; height: 100%; object-fit: cover; }
body.vista-quiniela .qn-elige-cuerpo { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; flex: 1; padding: 14px 18px; }
body.vista-quiniela .qn-elige-identidad { display: flex; align-items: center; gap: 14px; width: 100%; }
body.vista-quiniela .qn-elige-logo { flex: none; width: 96px; height: 64px; padding: 3px; object-fit: contain; background: #ffffff; border: 1px solid #dce2e9; border-radius: 6px; filter: none; }
body.vista-quiniela .qn-elige-marca { padding: 3px 9px; border-left: 3px solid var(--qn-active); background: var(--qn-selected); color: var(--qn-text); font-size: 14px; font-weight: 600; }
body.vista-quiniela .qn-elige-nombre { min-width: 0; color: var(--qn-text); font-family: var(--font-display); font-size: 26px; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
body.vista-quiniela .qn-elige-desc { color: var(--qn-muted); font-size: 15px; line-height: 1.5; }
body.vista-quiniela .qn-elige-estado { color: var(--qn-text); font-size: 14px; font-weight: 600; line-height: 1.45; }
body.vista-quiniela .qn-elige-cta { display: inline-flex; align-items: center; justify-content: space-between; align-self: stretch; gap: 12px; min-height: 44px; margin-top: auto; border-top: 1px solid var(--qn-line); color: var(--qn-accent); font-size: 16px; font-weight: 700; }
body.vista-quiniela .qn-elige-card:focus-visible { outline: 3px solid var(--qn-accent); outline-offset: 3px; }
/* La puerta de entrada conserva la identidad y explica el siguiente paso sin tapar las tarjetas. */
body.vista-quiniela .qn-nav-logo { flex: none; width: 60px; height: 40px; padding: 2px; object-fit: contain; background: #fff; border-radius: 4px; }
body.vista-quiniela .qn-como { margin: 22px 0 4px; padding: 18px 20px; border: 1px solid var(--qn-line); border-radius: 8px; background: var(--qn-aside); }
body.vista-quiniela .qn-como h4 { font-size: 18px; margin: 0 0 10px; }
body.vista-quiniela .qn-como ol { display: flex; flex-wrap: wrap; gap: 12px 36px; margin: 0; padding-left: 20px; font-size: 15px; }
body.vista-quiniela .qn-como p { margin: 12px 0 0; font-size: 14px; color: var(--qn-muted); }
@media (min-width: 900px) {
  body.vista-quiniela .qn-elige-una { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 0 24px; }
  body.vista-quiniela .qn-elige-una > h3, body.vista-quiniela .qn-elige-una > .qn-inst { grid-column: 1 / -1; }
  body.vista-quiniela .qn-elige-una .qn-elige-lista { grid-template-columns: minmax(0, 1fr); }
  body.vista-quiniela .qn-elige-una .qn-como { align-self: start; margin-top: 0; }
  body.vista-quiniela .qn-elige-una .qn-como ol { display: grid; gap: 14px; }
}
body.vista-quiniela .qn-reglas-casos { border-bottom: 1px solid var(--qn-line); padding: 0 0 12px; margin-bottom: 16px; }
body.vista-quiniela .qn-reglas-casos summary { min-height: 44px; padding: 12px 0; cursor: pointer; font-size: 15px; font-weight: 600; color: var(--qn-text); }
body.vista-quiniela .qn-reglas-casos p { font-size: 14px; color: var(--qn-muted); line-height: 1.5; margin: 0 0 10px; }
@media (max-width: 700px) { body.vista-quiniela .qn-nav-logo { width: 42px; height: 30px; } body.vista-quiniela .qn-nav-brand { gap: 8px; } }

/* MN-05 · Premio del patrocinador en el lateral: su texto y el logo del negocio, completo sobre blanco
   en los dos temas, con su nombre. Y el aviso al ganador en "Cómo te fue". */
body.vista-quiniela .qn-premio-patro .qn-premios { margin: 12px 0 0; color: var(--qn-text); }
body.vista-quiniela .qn-premio-marca { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin: 10px 0 0; color: var(--qn-text); font-size: 15px; font-weight: 600; }
body.vista-quiniela .qn-premio-logo-caja { flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 4px 6px; background: #ffffff; border: 1px solid #dce2e9; border-radius: 6px; }
body.vista-quiniela .qn-premio-logo { display: block; height: 40px; width: auto; max-width: 120px; object-fit: contain; filter: none; }
body.vista-quiniela .qn-ya p.qn-premio-ganaste { margin: 8px 0 0; }

/* MN-04 · "Otras quinielas": en las acciones de la barra en la computadora; en el celular, en el renglón
   de la marca (sin sumar un renglón que baje la boleta). Solo se ve uno de los dos. */
body.vista-quiniela .qn-otras-cel { display: none; }
@media (max-width: 700px) {
  body.vista-quiniela .qn-otras-esc { display: none; }
  body.vista-quiniela .qn-otras-cel { display: inline-flex; margin-left: auto; }
  body.vista-quiniela .qn-nav-varias .qn-nav-brand { flex: 1 1 auto; }
  body.vista-quiniela .qn-nav-varias .qn-nav-meta { display: none; }
  /* En "cada partido a su hora" la hora de cada partido ya está en su fila: la nota del último partido
     solo alargaba el lateral y bajaba la boleta en el celular. */
  body.vista-quiniela .qn-cierre .qn-nota-ultimo { display: none; }
}
/* estilo-17 · Mientras la barra no quepa en un renglón, "Otras quinielas" va en el renglón de la marca (la
   pieza del celular): en las acciones se comía ~138 px y la franja de pestañas, la única que se encoge,
   recortaba "Jornada 6 · Resultados" (o la jornada abierta) sin ninguna señal. De 1221 a 1440 la barra se
   parte en dos renglones como bajo 1220, solo cuando hay varias quinielas. */
@media (min-width: 701px) and (max-width: 1440px) {
  body.vista-quiniela .qn-otras-esc { display: none; }
  body.vista-quiniela .qn-otras-cel { display: inline-flex; margin-left: auto; }
  body.vista-quiniela .qn-nav-varias { flex-wrap: wrap; gap: 0 20px; padding-top: 12px; }
  body.vista-quiniela .qn-nav-varias .qn-nav-brand { flex: 1 1 auto; min-height: 42px; }
  body.vista-quiniela .qn-nav-varias .qn-nav-actions { margin-left: auto; }
  body.vista-quiniela .qn-nav-varias .qn-chips .chip { min-height: 62px; }
}
/* estilo-17 · R7 en tableta: las pestañas bajan a su propio renglón, como en el celular (ya en v116
   "Resultados" quedaba al 0 % a 800 px con una sola quiniela). Hasta 1000 px y no 980: con la barra de
   desplazamiento clásica de Windows (15 px) la página mide menos que la ventana y de 981 a 994 volvía a
   recortarse. */
@media (min-width: 701px) and (max-width: 1000px) {
  body.vista-quiniela .qn-nav .qn-chips { order: 3; flex-basis: 100%; width: 100%; }
  body.vista-quiniela .qn-theme { margin-right: auto; }
}
/* estilo-17 · Red de seguridad: si con otra letra (la del sistema en Mac o iPad es más ancha) el renglón no
   alcanza, la última pieza baja de renglón en vez de recortar las pestañas sin avisar. Mientras cabe, nada
   cambia. */
@media (min-width: 701px) {
  body.vista-quiniela .qn-nav-actions { flex-wrap: wrap; }
}

@media (max-width: 700px) {
  body.vista-quiniela .qn-fila.qn-con-hora,
  body.vista-quiniela .qn-fila.qn-con-hora:first-child { padding-top: 12px; row-gap: 8px; }
  /* Sin grid-row: un hijo absoluto de una rejilla con celda asignada se mide desde ESA celda, no desde
     la fila, y el número quedaba 12 px debajo de su hora. */
  body.vista-quiniela .qn-fila.qn-con-hora > .qn-number { grid-column: auto; grid-row: auto; top: 12px; line-height: 19px; }
  body.vista-quiniela .qn-hora { grid-column: 1; grid-row: auto; padding-left: 26px; line-height: 19px; }
  body.vista-quiniela .qn-fila.qn-con-hora > .qn-lev { grid-column: 1; grid-row: auto; }
  body.vista-quiniela .qn-fila-nota { grid-column: 1; margin-top: 8px; }
  body.vista-quiniela .qn-rep-fila { padding: 12px; }
  body.vista-quiniela .qn-elige { padding-top: 20px; }
}

/* ===================== v117 · arreglos de la verificación: lo que ve el participante =====================
   Mismas piezas y tokens de siempre (--qn-*); nada nuevo se inventa. */

/* publico-01 · "Quiniela registrada" se lleva al tope de la pantalla con aire. La cabecera de la quiniela no
   es pegajosa (position: relative), así que no hace falta sumar --header-h. */
body.vista-quiniela .qn-ok { scroll-margin-top: 16px; }
body.vista-quiniela .qn-ok-tit { display: inline-block; }
/* publico-03 · "Ver cómo van jugando" y "Ver participantes" dejan la lista arriba, con el mismo aire. */
body.vista-quiniela #qnParticipantes > summary,
body.vista-quiniela #qnLista { scroll-margin-top: 16px; }
/* publico-16 · "Ver cómo van jugando" va antes de COMPARTIR: el aire de 10 px queda entre los dos, y arriba le
   basta el del texto (12 px): así cabe entero sobre la tira también a 360x800. */
body.vista-quiniela .qn-ya .qn-ir-reparto { margin-top: 0; }
body.vista-quiniela .qn-ya .qn-ir-reparto:not([hidden]) + .btn { margin-top: 10px; }
/* publico-15 · "Cambiar mis selecciones" deja el título de la boleta al tope, con el mismo aire. */
body.vista-quiniela #qnFormTitulo { scroll-margin-top: 16px; }

/* publico-06 · Chips que caben en el celular: el nombre arriba y qué hacer abajo, en los mismos 54 px. Tres
   caben sin cortar palabras; con más, bajan de renglón (nunca se esconden a media palabra). */
body.vista-quiniela .qn-chips .chip span.qn-chip-nom { color: inherit; }
@media (max-width: 700px) {
  body.vista-quiniela .qn-nav .qn-chips { flex-wrap: wrap; overflow: visible; }
  body.vista-quiniela .qn-nav .qn-chips .chip { flex-direction: column; align-items: center; gap: 0; padding: 9px 6px 7px; line-height: 1.15; }
  body.vista-quiniela .qn-nav .qn-chips .chip .qn-chip-punto { display: none; }
}

/* publico-02, estilo-02 · Los partidos que ya empezaron van DESPUÉS de los que se pueden marcar, plegados
   (el mismo desplegable de "Ya jugaron"). En el celular la fila empezada se compacta: su número, su hora y
   la nota que nombra el partido; los tres cubos apagados (120 px) ya no empujan nada. */
body.vista-quiniela .qn-empezados { margin-top: 16px; }
body.vista-quiniela .qn-empezados summary span { color: var(--qn-muted); }
body.vista-quiniela .qn-empezados > .qn-partidos { margin-top: 4px; }
@media (max-width: 700px) {
  body.vista-quiniela .qn-fila.qn-cerrado .qn-lev { display: none; }
  body.vista-quiniela .qn-fila.qn-cerrado .qn-fila-nota { margin-top: 2px; }
  /* estilo-01 · En "Próximo partido" van dos equipos, no una fecha: a 20 px se partía en 2 o 3 renglones. */
  body.vista-quiniela .qn-cierre .qn-date.qn-prox { margin-top: 6px; font-size: 17px; line-height: 1.3; letter-spacing: -.2px; }
  /* R2 otra vez: la tira del pie volvió (MN-07) y quita 44 px de pantalla útil. Se recuperan en los aires de
     arriba de la boleta (mismas piezas, mismo orden), para que el primer cubo asome con holgura. */
  body.vista-quiniela .qn-sidebar.qn-sidebar-a { padding-top: 14px; padding-bottom: 14px; }
  body.vista-quiniela .qn-stage { padding-top: 14px; }
  body.vista-quiniela .qn-form .qn-inst { margin-bottom: 12px; }
}

/* Selector móvil: portada breve, identidad real y acción separada, con la misma paleta de la boleta. */
@media (max-width: 700px) {
  body.vista-quiniela .qn-elige-portada { height: 60px; }
  body.vista-quiniela .qn-elige-lista { gap: 14px; }
  body.vista-quiniela .qn-elige-cuerpo { padding: 12px 14px; gap: 7px; }
  body.vista-quiniela .qn-elige-logo { width: 78px; height: 52px; }
  body.vista-quiniela .qn-elige-nombre { font-size: 23px; }
  body.vista-quiniela .qn-rep-datos { gap: 5px; }
  body.vista-quiniela .qn-rep-datos .qn-rep-dato { padding: 8px 6px; }
}
/* estilo-08 · El aviso de arriba ("todavía no tiene jornadas" / "ya no está disponible") con el mismo aire
   que el título de la pantalla de elegir, y sin doble hueco antes de ese título. */
body.vista-quiniela .qn-state > .qn-ya:first-child { margin-top: 26px; }
body.vista-quiniela .qn-state > .qn-ya + .qn-elige { padding-top: 4px; }
@media (max-width: 700px) { body.vista-quiniela .qn-state > .qn-ya:first-child { margin-top: 20px; } }

/* estilo-12 · "Así van jugando": cada opción ("Gana Medio Sitio 15 %") se lee de un jalón. */
body.vista-quiniela .qn-rep-op { display: inline-block; max-width: 100%; }
/* publico-11 · El motivo de un partido que acaba de empezar, arriba de "Enviar" (debajo lo tapaba la tira). */
body.vista-quiniela #qnRecien .qn-cod-err { margin: 0 0 12px; }

/* publico-16 · En el celular angosto (bajo 400 px) el grupo Claro/Oscuro, "Mi cuenta" y "VAROAMIGOS" no
   cabían en un renglón: VAROAMIGOS bajaba a un tercero y la barra crecía 48 px. Se ve solo el botón que
   ofrece el OTRO tema (con su nombre accesible "Tema oscuro"/"Tema claro"); al tocarlo, app.js pasa el foco
   al que aparece. */
@media (max-width: 400px) {
  body.vista-quiniela .qn-theme button[aria-pressed="true"] { display: none; }
}

/* R2, auditoría v118 · 375x667: jornada y estado siempre visibles; el detalle del cierre se despliega
   sin reducir letra, quitar patrocinadores ni ocultar los nombres de los equipos. Fuera del teléfono
   corto, se conserva la columna informativa completa del diseño aprobado. */
body.vista-quiniela .qn-jornada-toggle { display: none; }
body.vista-quiniela .qn-jornada-detalles { display: contents; }
@media (max-width: 700px) {
  body.vista-quiniela .app-header { min-height: 64px; padding-top: 7px; padding-bottom: 7px; }
  body.vista-quiniela .app-header .brand-logo { width: 60px; height: 45px; }
  body.vista-quiniela .qn-patros-caja .top-sponsors { padding-top: 22px; padding-bottom: 2px; }
  body.vista-quiniela .qn-patros-caja .ts-slide { min-height: 44px; }
  body.vista-quiniela .qn-patros-caja .ts-logo { height: 40px; }
  body.vista-quiniela .qn-patros-caja .ts-arrow { top: calc(50% + 12px); }
  body.vista-quiniela .qn-nav { padding-top: 4px; gap: 0; }
  body.vista-quiniela .qn-nav-actions { gap: 0 10px; }
  body.vista-quiniela .qn-theme { padding: 0; }
  body.vista-quiniela .qn-nav .qn-chips .chip { min-height: 44px; padding-top: 5px; padding-bottom: 4px; }
  body.vista-quiniela .qn-sidebar.qn-sidebar-a { display: block; padding: 0 18px; }
  body.vista-quiniela .qn-jornada-toggle { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0 12px; width: 100%; min-height: 64px; padding: 8px 0; border: 0; background: transparent; color: var(--qn-text); font: inherit; text-align: left; cursor: pointer; }
  body.vista-quiniela .qn-toggle-nombre { font-family: var(--font-display); font-size: 24px; font-weight: 600; line-height: 1.2; }
  body.vista-quiniela .qn-toggle-accion { justify-self: end; color: var(--qn-accent); font-size: 14px; }
  body.vista-quiniela .qn-toggle-estado { grid-column: 1 / -1; color: var(--qn-text); font-size: 15px; line-height: 1.4; }
  body.vista-quiniela .qn-jornada-detalles { display: none; }
  body.vista-quiniela .qn-resumen-abierto .qn-jornada-detalles { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; padding: 8px 0 14px; }
  body.vista-quiniela .qn-stage { padding-top: 6px; }
  body.vista-quiniela .qn-form-h { margin-bottom: 3px; font-size: 20px; letter-spacing: -.4px; }
  body.vista-quiniela .qn-form .qn-inst { margin-bottom: 6px; }
  /* La regla sigue visible en el resumen del teléfono corto; en todas las otras pantallas se
     conserva también en la instrucción original, justo antes de elegir los partidos. */
  body.vista-quiniela .qn-inst-cierre { display: none; }
  body.vista-quiniela .qn-colheads { margin-bottom: 4px; }
  body.vista-quiniela .qn-fila.qn-con-hora, body.vista-quiniela .qn-fila.qn-con-hora:first-child { padding-top: 8px; row-gap: 4px; }
  body.vista-quiniela .qn-fila.qn-con-hora > .qn-number { top: 8px; }
  body.vista-quiniela .qn-cubo { min-height: 78px; gap: 2px; padding-top: 6px; padding-bottom: 6px; }
  body.vista-quiniela .qn-cubo .qn-esc { width: 24px; height: 24px; }
}