/* NFL Pick'em module */

/* Tono compartido en toda la sección NFL — mismo verde/rojo para "ganaste
   puntos" / "no ganaste puntos" en cualquier componente (desglose de
   resultados, pastilla de total, puntos de Picks del grupo), en vez de que
   cada uno reinvente su propio nombre de modificador con el mismo color. */
.nfl-tone-good { color: #4ade80; }
.nfl-tone-bad { color: #f87171; }
.nfl-tone-neutral { color: var(--text-dim); }

/* Flechas ◀▶ de navegación de semana — mismo botón en las 4 pantallas de
   predicciones (Picks, Calendario, Mis resultados, Picks del grupo). */
.nfl-week-nav-arrow {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
}
.nfl-week-nav-arrow:disabled { opacity: .32; cursor: default; }
.nfl-week-nav-row {
  display: flex;
  align-items: center;
  gap: 8px;
  /* Es un ítem de grid (.nfl-results-filters) o flex (.group-pills-wrap) —
     sin esto, min-width:auto por default no lo deja encogerse al ancho del
     contenedor, así que el contenido se corta/cambia de tamaño en vez de
     hacer scroll horizontal internamente (ver .nfl-results-week-filter). */
  min-width: 0;
}
.nfl-week-nav-row > .nfl-results-week-filter,
.nfl-week-nav-row > .group-pills,
.nfl-week-nav-row > .nfl-week-tabs,
.nfl-week-nav-row > .nfl-week-selector {
  flex: 1 1 auto;
  min-width: 0;
}

.home--nfl .nav-card--info {
  min-height: 96px;
}

.home--nfl .nav-row--primary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Durante Pretemporada, el avance de semana queda como aviso de atención. */
.home--nfl #btn-ballot[data-nfl-phase="preseason"] .nav-sub--progress {
  color: var(--gold);
}

.home--nfl .nav-row--info {
  grid-template-columns: 1fr;
}

.home--nfl .home-priority-card {
  border-color: rgba(96, 165, 250, 0.4);
  border-radius: 8px;
  background: rgba(30, 58, 138, 0.24);
  gap: 8px;
}

.home--nfl .home-priority-card:hover {
  border-color: rgba(96, 165, 250, 0.68);
}

.home--nfl .home-priority-kicker,
.home--nfl .home-priority-action {
  color: #bfdbfe;
}

.home--nfl .home-priority-match {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.home--nfl .home-priority-team {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--text);
  font-weight: 800;
}

.home--nfl .home-priority-team--home {
  justify-content: flex-end;
  text-align: right;
}

.home--nfl .home-priority-team--home img {
  order: 2;
}

.home--nfl .home-priority-team img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  flex: 0 0 auto;
}

.home--nfl .home-priority-team span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home--nfl .home-priority-at {
  color: var(--gold);
  font-size: 1.05rem;
}

.home--nfl .home-priority-card strong {
  color: var(--text-dim);
  font-size: 0.78rem;
  text-align: center;
}

/* ── NFL weekly picks ───────────────────────────────────────── */
.nfl-picks-shell {
  gap: 10px;
}

.nfl-week-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 4px 12px 2px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.nfl-picks-shell .nfl-week-tabs {
  display: block;
  overflow: visible;
  padding: 4px 12px 2px;
}

/* El selector ocupa una fila completa; los tres estados quedan debajo con
   margen lateral para que no queden pegados al contenido de la pantalla. */
.nfl-week-navigation {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
  padding-inline: 12px;
}

.nfl-week-selector,
.nfl-pick-view-toggle {
  min-height: 56px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
}

.nfl-week-selector {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px 9px;
}

.nfl-week-selector-col {
  display: grid;
  align-content: center;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
  text-align: center;
}

/* Más chica y sin fondo/borde propio — ya vive dentro de la caja con
   borde de .nfl-week-selector, un botón con su propio chrome se vería
   duplicado. */
.nfl-week-nav-arrow--compact {
  width: 26px;
  height: 26px;
  border: 0;
  background: transparent;
  font-size: .68rem;
}

.nfl-week-selector select {
  width: 100%;
  min-width: 0;
  border: 0;
  appearance: none;
  background: transparent;
  color: #fff3b0;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 850;
  outline: none;
  text-align: center;
  text-align-last: center;
  text-transform: none;
}

.nfl-week-selector small {
  color: var(--text-dim);
  font-size: 0.62rem;
  font-weight: 600;
  text-align: center;
  text-transform: none;
}

@media (max-width: 620px) {
  /* Las tarjetas ya incluyen el margen lateral móvil del shell; duplicarlo
     aquí hacía los filtros más angostos que los partidos. */
  .nfl-week-navigation { padding-inline: 0; }
}

.nfl-pick-view-toggle {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
}

.nfl-pick-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 0;
  border-left: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  font: inherit;
  font-size: 0.66rem;
  font-weight: 800;
  padding: 3px 6px;
  text-align: center;
  touch-action: manipulation;
}

.nfl-pick-view:first-child { border-left: 0; }
.nfl-pick-view strong { color: inherit; font-size: 0.9rem; }
/* Guardados = mismo azul de "predicción seleccionada" (nfl-pick-btn.active);
   Pendientes se queda en amarillo — son estados distintos, no debían verse
   igual solo por estar ambos "activos" como pestaña. */
.nfl-pick-view.active[data-nfl-pick-view="saved"] { background: rgba(30,64,175,0.34); color: #dbeafe; }
.nfl-pick-view.active[data-nfl-pick-view="pending"] { background: rgba(245,197,24,0.14); color: #fff3b0; }
.nfl-pick-view.active[data-nfl-pick-view="closed"] { background: rgba(239,68,68,0.16); color: #fecaca; }
.nfl-pick-view:not(.active)[data-nfl-pick-view="pending"] strong { color: var(--gold); }
.nfl-pick-view:not(.active)[data-nfl-pick-view="closed"] strong { color: #fca5a5; }
.nfl-week-empty { margin-top: 6px; }

/* Mis resultados NFL siempre compara las tres categorías en una sola fila. */
#nfl-results-body .prog-mini-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#nfl-results-body .prog-mini-chip {
  min-width: 0;
  padding-inline: 5px;
  text-align: center;
}

.nfl-week-tab {
  min-width: 116px;
  min-height: 42px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  color: var(--text);
  display: grid;
  gap: 2px;
  align-content: center;
  padding: 5px 8px;
  text-align: left;
  font: inherit;
  cursor: pointer;
  scroll-snap-align: start;
  touch-action: manipulation;
}

.nfl-week-tab span {
  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1.2;
  /* Labels largos ("Semana 1 de Pretemporada") pueden envolver a una segunda
     línea — nunca deben arrastrar consigo el rango de fecha, que vive en su
     propio <small> aparte (nfl-week-tab-range). */
  white-space: normal;
}

.nfl-week-tab small {
  color: var(--text-dim);
  font-size: 0.62rem;
  font-weight: 500;
  line-height: 1.2;
}

.nfl-week-tab-range {
  white-space: nowrap;
}

.nfl-week-tab.active {
  border-color: rgba(245,197,24,0.7);
  background: rgba(245,197,24,0.14);
  box-shadow: 0 4px 16px rgba(245,197,24,0.08);
}

.nfl-week-tab.active span {
  color: #fff3b0;
  font-weight: 800;
}

.nfl-week-tab.active small {
  color: rgba(253,230,138,0.74);
}

/* Líderes de división/Campeones de conferencia: no es una semana real, así
   que un borde punteado la distingue del resto de tabs en la misma fila. */
.nfl-week-tab--official {
  border-style: dashed;
  align-content: center;
  justify-items: center;
}
.nfl-week-tab--official span {
  text-align: center;
}

.nfl-match-list {
  padding-top: 4px;
}

.nfl-match-card {
  border-radius: 8px;
  display: grid;
  gap: 10px;
  /* Compensa el ballot-header sticky para que scrollIntoView() no la
     deje tapada al enfocar el siguiente partido tras guardar un pick. */
  scroll-margin-top: calc(80px + var(--safe-top, 0px));
}

.nfl-match-card:not(.locked):hover {
  border-color: var(--border);
  box-shadow: none;
}

.nfl-match-card.is-in-progress,
.nfl-match-card.is-in-progress:hover {
  border-color: rgba(248, 113, 113, .9);
  box-shadow: inset 0 0 0 1px rgba(248, 113, 113, .28);
}

.nfl-match-topline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  color: var(--text-dim);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.nfl-match-topline > span:nth-child(2) {
  min-width: 0;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
}

.nfl-slot-badge {
  justify-self: start;
  width: max-content;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid rgba(245,197,24,0.36);
  border-radius: 6px;
  background: rgba(245,197,24,0.1);
  color: #fde68a;
  padding: 3px 7px;
  font-weight: 900;
  text-overflow: ellipsis;
}

.nfl-teams-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 6px;
}

.nfl-team {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 4px;
  color: var(--text);
  font-weight: 800;
  text-align: center;
}

.nfl-team-pick {
  min-height: 122px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  padding: 12px 8px;
  font: inherit;
  cursor: pointer;
}

.nfl-team-pick.active {
  border-color: rgba(96,165,250,0.82);
  background: rgba(30,64,175,0.34);
  color: #dbeafe;
}

.nfl-team-pick:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.nfl-team small {
  color: var(--text-dim);
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
}

.nfl-team img,
.nfl-team-fallback {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  object-fit: contain;
}

.nfl-team span:last-child {
  max-width: 100%;
  overflow-wrap: break-word;
  font-size: 1.08rem;
  font-weight: 800;
  line-height: 1.15;
}

/* Nombres de un solo bloque ("Commanders", "Buccaneers") no caben a 1.25rem
   en pantallas angostas y terminan partidos a media palabra
   (overflow-wrap los fuerza). Achicar la fuente en mobile evita el corte
   en vez de solo esconderlo. */
@media (max-width: 400px) {
  .nfl-team img,
  .nfl-team-fallback {
    width: 44px;
    height: 44px;
  }

  .nfl-team span:last-child {
    font-size: 1.02rem;
  }
}

.nfl-pick-controls {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* Acerca la fecha/horario (dentro de .nfl-match-topline) a los equipos —
   el gap de 10px de .nfl-match-card entre tarjetas hermanas se sentía
   como un salto. Solo aplica en Predicciones: el selector exige que le
   siga .nfl-pick-controls, exclusivo de esta pantalla. */
.nfl-match-topline + .nfl-pick-controls {
  margin-top: -4px;
}

.nfl-pick-controls.is-locked {
  opacity: 0.78;
}

.nfl-control-group {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.nfl-control-group--margin[hidden] {
  display: none;
}

.nfl-control-group--winner {
  gap: 8px;
}

.nfl-control-label {
  width: 100%;
  color: #fde68a;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
}

.nfl-control-heading {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 5px;
}

.nfl-control-heading .nfl-control-label {
  width: auto;
}

.nfl-total-reference {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas:
    "caption info"
    "line info";
  justify-items: center;
  align-content: center;
  gap: 0 4px;
}

.nfl-line-caption {
  grid-area: caption;
  color: var(--text-dim);
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
}

.nfl-total-reference .nfl-line-callout { grid-area: line; }
.nfl-total-reference .nfl-control-info { grid-area: info; align-self: center; }

.nfl-over-under-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 5px;
}

.nfl-control-info {
  position: relative;
  flex: 0 0 auto;
}

.nfl-control-info summary {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 0.68rem;
  font-weight: 800;
  list-style: none;
}

.nfl-control-info summary::-webkit-details-marker {
  display: none;
}

.nfl-control-info p {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  z-index: 4;
  width: min(250px, calc(100vw - 56px));
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #111817;
  color: var(--text-dim);
  padding: 9px 10px;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  box-shadow: 0 12px 28px rgba(0,0,0,0.38);
}

.nfl-control-info p strong,
.nfl-control-info p span {
  display: block;
}

.nfl-control-info p strong {
  margin-bottom: 4px;
  color: var(--text);
  font-weight: 700;
}

.nfl-line-callout {
  width: auto;
  border: 0;
  background: transparent;
  color: #fde68a;
  padding: 0;
  font-size: 1.65rem;
  font-weight: 900;
  line-height: 1;
}

.nfl-line-unavailable {
  margin: 0;
  padding: 8px 10px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
  color: var(--text-dim);
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
}

.nfl-segmented {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.nfl-segmented--over-under {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.nfl-segmented--margin {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.nfl-pick-btn {
  min-width: 0;
  min-height: 40px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  color: var(--text);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1.15;
  cursor: pointer;
  overflow-wrap: anywhere;
  padding: 8px 7px;
  touch-action: manipulation;
}

.nfl-team-pick {
  touch-action: manipulation;
}

.nfl-pick-btn.active {
  border-color: rgba(96,165,250,0.82);
  background: rgba(30,64,175,0.34);
  color: #dbeafe;
}

.nfl-pick-btn > span,
.nfl-pick-btn > small {
  display: block;
}

.nfl-pick-btn > span {
  font-size: 1rem;
  font-weight: 800;
}

.nfl-pick-btn--tie {
  width: auto;
  min-height: 40px;
  align-self: center;
  display: grid;
  place-items: center;
  padding: 6px 8px;
}

.nfl-pick-btn--tie > span { font-size: 1rem; }

.nfl-over-under-row .nfl-pick-btn {
  min-height: 56px;
  padding-block: 6px;
}

.nfl-segmented--over-under .nfl-pick-btn,
.nfl-segmented--margin .nfl-pick-btn {
  min-height: 38px;
  padding-block: 6px;
}

.nfl-pick-btn > small {
  margin-top: 3px;
  color: var(--text-dim);
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.25;
}

.nfl-pick-btn.active > small {
  color: #bfdbfe;
}

.nfl-pick-btn:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.nfl-match-footer {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding-top: 2px;
}

.nfl-save-pick {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(248,113,113,0.76);
  border-radius: 8px;
  background: rgba(220,38,38,0.82);
  color: #fff1f2;
  padding: 8px 12px;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 800;
  cursor: pointer;
}

.nfl-save-pick:hover:not(:disabled) {
  border-color: #fca5a5;
  background: #ef4444;
}

.nfl-save-pick:disabled {
  cursor: not-allowed;
  border-color: rgba(248,113,113,0.24);
  background: rgba(127,29,29,0.22);
  color: rgba(254,202,202,0.5);
  opacity: 1;
}

.nfl-save-pick.is-saved {
  border-color: rgba(74,222,128,0.38);
  background: rgba(34,197,94,0.1);
  color: #4ade80;
  opacity: 1;
}

.nfl-clear-pick {
  min-height: 28px;
  border: 0;
  background: transparent;
  color: rgba(252,165,165,0.82);
  padding: 3px 8px;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 600;
  cursor: pointer;
}

.nfl-clear-pick:hover {
  color: #f87171;
}

.nfl-match-state {
  display: grid;
  justify-items: center;
  gap: 5px;
  text-align: center;
}

.nfl-match-state strong {
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 800;
}

.nfl-match-state small {
  color: var(--text-dim);
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1.3;
}

.nfl-live-state {
  color: #f87171 !important;
}

/* ── Finished match breakdown ───────────────────────────────── */
.nfl-result-card,
.nfl-public-result-card {
  display: grid;
  gap: 10px;
  padding: 14px;
}

/* Ya no es un banner rojo aparte — vive dentro del recuadro azul de
   puntos, con la misma tipografía que Resultado/Altas-Bajas/Margen
   (.nfl-result-item-title), centrado. */
.nfl-result-no-pick {
  margin: 8px 0 0;
  color: var(--text-dim);
  font-size: 0.74rem;
  font-weight: 700;
  text-align: center;
}

.nfl-result-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  color: var(--text-dim);
  font-size: 0.6rem;
  font-weight: 600;
}

.nfl-result-date-day,
.nfl-result-date-time {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nfl-result-date-time {
  font-weight: 700;
}

.nfl-final-scoreboard {
  display: grid;
  gap: 9px;
  text-align: center;
}

.nfl-final-score-line {
  display: grid;
  grid-template-columns: fit-content(42%) auto fit-content(42%);
  justify-content: center;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-size: 1.08rem;
  font-weight: 700;
}

.nfl-final-team {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.nfl-final-team--away {
  justify-content: flex-start;
  text-align: left;
}

.nfl-final-team--home {
  justify-content: flex-end;
  text-align: right;
}

.nfl-final-team span {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Resultados: logo + nombre agrupados y centrados como una unidad; el
   marcador queda al lado, centrado verticalmente contra ese grupo. */
.nfl-result-card .nfl-final-team,
.nfl-public-result-card .nfl-final-team {
  gap: 12px;
}

.nfl-final-team-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.nfl-final-team-name {
  font-size: 0.86rem;
  font-weight: 700;
}

.nfl-final-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0 2px;
}

.nfl-final-center-status {
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.nfl-final-team img,
.nfl-final-team .nfl-team-logo-placeholder {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  object-fit: contain;
}

.nfl-final-team.is-winner,
.nfl-final-team.is-winner strong {
  color: #4ade80;
}

.nfl-final-team.is-tied,
.nfl-final-team.is-tied strong {
  color: #e2e8f0;
}

.nfl-final-tie {
  width: fit-content;
  margin: -2px auto 0;
  border: 1px solid rgba(148,163,184,0.32);
  border-radius: 6px;
  color: #cbd5e1;
  padding: 2px 7px;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
}

.nfl-final-team-score {
  flex: 0 0 auto;
  font-size: 1.35rem;
  font-weight: 800;
}

.nfl-final-score-line b {
  color: var(--gold);
  font-size: 1rem;
}

.nfl-final-facts {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  overflow-x: auto;
  color: var(--text-dim);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
}

.nfl-final-facts-group {
  flex: 0 0 auto;
  white-space: nowrap;
}

.nfl-final-facts-divider {
  flex: 0 0 auto;
  width: 1px;
  height: 12px;
  background: var(--border);
}

.nfl-final-fact-highlight {
  color: var(--gold);
  font-weight: 700;
}

/* 3 filas explícitas (título / valor / puntos), cada una un grid de 3
   columnas — así el título, el valor y los puntos de las 3 categorías
   quedan alineados entre sí sin importar que una tenga más o menos
   contenido que otra (ej. estado "anulada" vs uno normal). */
.nfl-result-breakdown {
  display: grid;
  gap: 6px 0;
  padding: 8px 0 12px;
}

.nfl-result-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}

/* Results cards keep the score line legible on narrow player screens.
   .nfl-public-result-card (nfl-results.js) reusa el mismo lenguaje visual
   que .nfl-result-card (results-ui.js), así que comparte estos overrides. */
.nfl-result-card .nfl-final-scoreboard,
.nfl-public-result-card .nfl-final-scoreboard {
  gap: 10px;
}

.nfl-result-card .nfl-final-score-line,
.nfl-public-result-card .nfl-final-score-line {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 14px;
}

.nfl-result-card .nfl-final-team span,
.nfl-public-result-card .nfl-final-team span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nfl-result-card .nfl-final-team img,
.nfl-result-card .nfl-final-team .nfl-team-logo-placeholder,
.nfl-public-result-card .nfl-final-team img,
.nfl-public-result-card .nfl-final-team .nfl-team-logo-placeholder {
  width: 38px;
  height: 38px;
  flex-basis: 38px;
}

/* El marcador debe ocupar el mismo alto que el grupo logo+nombre de al
   lado (~38px logo + nombre), no quedar como un número chico perdido
   junto a un logo grande. */
.nfl-result-card .nfl-final-team-score,
.nfl-public-result-card .nfl-final-team-score {
  font-size: 2.8rem;
  line-height: 1;
}

.nfl-result-card .nfl-final-facts {
  font-size: 0.72rem;
  font-weight: 650;
  padding: 12px 0 4px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

/* El ganador queda con el color normal; el marcador del equipo que perdió
   se apaga para que el ojo vaya directo al que ganó. El acierto del pick
   ("tu pronóstico fue correcto") ya se muestra con el check verde en el
   desglose de abajo, no aquí. */
.nfl-result-card .nfl-final-team-score.is-losing-score,
.nfl-public-result-card .nfl-final-team-score.is-losing-score {
  color: var(--text-dim);
  opacity: 0.6;
}

/* ── Desglose: una columna por categoría, centrada, separada por una
   línea vertical fina — el check/color de los puntos ya dice si acertó. */
.nfl-result-row > * + * {
  border-left: 1px solid var(--border);
}

.nfl-result-item-title,
.nfl-result-item-value,
.nfl-result-item-badge,
.nfl-result-item-note,
.nfl-result-item-points {
  justify-self: center;
  padding: 0 8px;
  text-align: center;
}

.nfl-result-item-title {
  color: var(--text-dim);
  font-size: 0.74rem;
  font-weight: 700;
}

.nfl-result-item-value {
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 800;
}

.nfl-result-item-badge {
  width: fit-content;
  border-radius: 5px;
  background: rgba(251, 191, 36, 0.14);
  color: #fbbf24;
  padding: 2px 6px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.nfl-result-item-note {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.3;
}

.nfl-result-item-points {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.76rem;
  font-weight: 700;
}


/* Su propio bloque con fondo, separado visualmente del marcador deportivo
   de arriba — "tus puntos" (predicciones) vs. el resultado del partido en
   sí no deben leerse como la misma sección. */
/* Mismo azul que "predicción seleccionada" (.nfl-pick-btn.active) — así el
   bloque de tus puntos se lee como una extensión directa de tus picks, no
   como chrome neutro. */
.nfl-result-points-area {
  margin-top: 2px;
  border: 1px solid rgba(96,165,250,0.82);
  border-radius: 10px;
  background: rgba(30,64,175,0.34);
  padding: 10px 12px;
}

.nfl-result-points-summary {
  margin: 0 0 8px;
  color: #bfdbfe;
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
}

.nfl-result-points-tally {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text);
}


/* ── Picks del grupo NFL ─────────────────────────────────────────────────── */
.nfl-group-picks-shell {
  display: grid;
  gap: 10px;
}

.nfl-group-picks-note,
.nfl-group-match-summary {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.74rem;
  font-weight: 600;
}

.nfl-group-match-list {
  display: grid;
  gap: 10px;
}

.nfl-group-match-card {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
}

.nfl-group-topline {
  margin: 0;
}

/* Mismo marcador que Resultados (match-card-parts.js), pero más chico —
   aquí es contexto para la lista de picks del grupo, no el protagonista
   de la pantalla. */
.nfl-group-scoreboard .nfl-final-team img,
.nfl-group-scoreboard .nfl-final-team .nfl-team-logo-placeholder {
  width: 28px;
  height: 28px;
  flex-basis: 28px;
}

.nfl-group-scoreboard .nfl-final-team-name { font-size: 0.76rem; }
.nfl-group-scoreboard .nfl-final-team-score { font-size: 1.5rem; }
.nfl-group-scoreboard .nfl-result-date-day,
.nfl-group-scoreboard .nfl-result-date-time { font-size: 0.62rem; }
.nfl-group-scoreboard .nfl-final-facts { font-size: 0.68rem; }

/* Filtro por partido — igual patrón que .nfl-week-tabs, una fila con
   scroll horizontal en vez de apilar los picks de los 16 partidos de la
   semana de un jalón. */
.nfl-group-match-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 2px 0 8px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.nfl-group-match-chip {
  flex: 0 0 auto;
  min-width: 64px;
  display: grid;
  place-items: center;
  gap: 3px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  color: var(--text-dim);
  padding: 7px 10px;
  text-align: center;
  scroll-snap-align: start;
}

.nfl-group-match-chip.is-active {
  border-color: var(--gold-dim);
  background: rgba(245,197,24,0.1);
  color: var(--text);
}

.nfl-group-match-chip.is-final {
  border-color: rgba(74,222,128,0.45);
  background: rgba(74,222,128,0.1);
}

.nfl-group-match-chip.is-final.is-active {
  border-color: #4ade80;
  background: rgba(74,222,128,0.16);
}

.nfl-group-match-chip-teams {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.68rem;
  font-weight: 800;
}

.nfl-group-match-chip-teams img,
.nfl-group-match-chip-teams .nfl-team-logo-placeholder {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.nfl-group-match-chip-status {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.nfl-group-player-list {
  border-top: 1px solid rgba(255,255,255,0.08);
}

.nfl-group-player {
  display: grid;
  gap: 2px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.nfl-group-player:last-child { border-bottom: 0; }

.nfl-group-player.is-me {
  margin: 0 -5px;
  padding: 8px 5px;
  background: rgba(245,197,24,0.08);
}

.nfl-group-player-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.nfl-group-player-head > strong {
  color: var(--text);
  font-size: 0.98rem;
  min-width: 0;
}

.nfl-group-player-head > strong small {
  color: var(--gold);
  font-size: 0.72rem;
}

.nfl-group-player p {
  margin: 0;
  min-width: 0;
  color: var(--text-dim);
  font-size: 0.72rem;
  line-height: 1.35;
}

.nfl-group-player p b {
  color: var(--text);
  font-weight: 700;
}

.nfl-group-player-points {
  flex: 0 0 auto;
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 1.05rem;
  font-weight: 800;
}

/* Dos tonos: rojo = no ganó nada, verde = ganó puntos (aunque no el
   máximo posible). El color lo pone .nfl-tone-good/.nfl-tone-bad
   (compartido); este selector solo agrega el fondo de la pastilla. */
.nfl-group-player-points.nfl-tone-good { background: #14532d; }
.nfl-group-player-points.nfl-tone-bad { background: #450a0a; }

@media (max-width: 620px) {
  .nfl-pick-controls {
    grid-template-columns: 1fr;
  }

  .nfl-result-card,
  .nfl-public-result-card { gap: 7px; }
  .nfl-result-card .nfl-final-score-line,
  .nfl-public-result-card .nfl-final-score-line { font-size: 0.94rem; }
  .nfl-result-card .nfl-final-team,
  .nfl-public-result-card .nfl-final-team { gap: 8px; }
  .nfl-result-card .nfl-final-team img,
  .nfl-result-card .nfl-final-team .nfl-team-logo-placeholder,
  .nfl-public-result-card .nfl-final-team img,
  .nfl-public-result-card .nfl-final-team .nfl-team-logo-placeholder {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }
  .nfl-result-card .nfl-final-team-score,
  .nfl-public-result-card .nfl-final-team-score { font-size: 2.2rem; }
  .nfl-final-team-name { font-size: 0.74rem; }
  .nfl-result-card .nfl-final-facts { font-size: 0.66rem; gap: 6px; }
  .nfl-result-item-value,
  .nfl-result-item-points { font-size: 0.72rem; }
  .nfl-group-player p { font-size: 0.69rem; }
}

/* ── Palco VIP: feed NFL ────────────────────────────────────────────────── */
.nfl-sa-editor-shell {
  width: min(760px, 100%);
  margin: 0 auto;
  padding: 16px 16px 36px;
  box-sizing: border-box;
}

.nfl-sa-editor-intro {
  padding: 4px 0 14px;
}

.nfl-sa-editor-kicker,
.nfl-sa-field > span {
  color: var(--gold);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nfl-sa-editor-intro h2 {
  margin: 5px 0 4px;
  font-size: 1.12rem;
}

.nfl-sa-editor-intro p,
.nfl-sa-empty p {
  color: var(--text-dim);
  font-size: 0.82rem;
  line-height: 1.45;
}

.nfl-sa-phase-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 12px;
}

.nfl-sa-phase-tab {
  min-height: 36px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255,255,255,0.025);
  color: var(--text-dim);
  cursor: pointer;
  font-family: var(--font);
  font-size: 0.72rem;
  font-weight: 800;
  touch-action: manipulation;
}

.nfl-sa-phase-tab.is-active {
  border-color: rgba(245, 197, 24, 0.62);
  background: rgba(245, 197, 24, 0.1);
  color: var(--gold);
}
.nfl-sa-phase-tab.is-current-stage { color: var(--text); }
.nfl-sa-phase-tab__active-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 5px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 8px rgba(74, 222, 128, .65);
  vertical-align: middle;
}

.nfl-sa-active-stage {
  display: block;
  margin-top: 4px;
  color: #86efac;
  font-size: 0.72rem;
  font-weight: 800;
}

.nfl-sa-btn {
  min-height: 40px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255,255,255,0.035);
  color: var(--text-dim);
  cursor: pointer;
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 800;
  touch-action: manipulation;
}

.nfl-sa-empty {
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255,255,255,0.025);
  padding: 11px 12px;
}

.nfl-sa-empty h3 {
  margin: 0 0 4px;
  font-size: 0.9rem;
}

.nfl-sa-empty p { margin: 0; }
.nfl-sa-empty--error { border-color: rgba(248,113,113,0.45); }

.nfl-sa-week {
  margin-top: 16px;
}

.nfl-sa-match-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}


.nfl-sa-match-list {
  display: grid;
  gap: 12px;
}

.nfl-sa-kickoff-group {
  display: grid;
  gap: 6px;
}

.nfl-sa-kickoff-group-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid rgba(245, 197, 24, 0.24);
  border-radius: 8px;
  background: rgba(13, 18, 28, 0.96);
  color: var(--text-dim);
  font-size: 0.7rem;
  text-transform: capitalize;
}

.nfl-sa-kickoff-group-header span,
.nfl-sa-kickoff-group-header strong {
  color: var(--gold);
  font-size: 0.86rem;
  font-weight: 800;
}

.nfl-sa-kickoff-group-header small {
  color: var(--text-dim);
}

.nfl-sa-kickoff-group-matches {
  display: grid;
  gap: 6px;
}

/* Contenedor de partido — compacto a propósito: con el calendario completo
   cargado (~272 partidos/temporada) cada semana muestra muchas tarjetas, así
   que el padding y los elementos internos (ver más abajo) se recortan para
   que quepan más partidos sin scroll excesivo. */
.nfl-sa-match {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255,255,255,0.025);
  padding: 9px 10px;
}

/* Reemplaza el badge grande "Publicado" — un punto es suficiente cuando
   ya no compite por espacio con el chevron/botón en la fila de acciones.
   Vive en el <article>, no en el <summary>, para seguir visible tanto
   cerrada como abierta la tarjeta. */
.nfl-sa-card-status-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.25);
}

.nfl-sa-match--published {
  border-left: 3px solid rgba(74,222,128,0.7);
  background: rgba(74,222,128,0.05);
}

.nfl-sa-match--live {
  border-color: rgba(248, 113, 113, 0.88);
  box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.18), 0 0 18px rgba(248, 113, 113, 0.1);
}

.nfl-sa-match--live .nfl-result-state--live {
  background: rgba(248, 113, 113, 0.12);
  border-color: rgba(248, 113, 113, 0.72);
  color: #fca5a5;
  animation: nfl-sa-live-pulse 1.8s ease-in-out infinite;
}

@keyframes nfl-sa-live-pulse {
  50% { opacity: 0.62; }
}

/* Score simulado: solo para pruebas del botón "Restablecer scores
   simulados" en Palco VIP — debe ser imposible confundirlo con un score
   real, tanto en el borde de la tarjeta como en el banner explícito. */
.nfl-sa-match--simulated {
  border: 2px solid #f59e0b;
  background: rgba(245,158,11,0.08);
}

.nfl-sa-simulated-banner {
  margin: -9px -10px 8px;
  padding: 4px 10px;
  background: #f59e0b;
  color: #1a1200;
  font-weight: 700;
  font-size: 12px;
  text-align: center;
  letter-spacing: 0.02em;
  border-radius: 8px 8px 0 0;
}

/* Sin publicar: atenuada, para que salte a la vista qué falta publicar
   dentro de la semana/ronda activa. */
.nfl-sa-match--unpublished {
  opacity: 0.62;
}

.nfl-sa-match--unpublished:hover,
.nfl-sa-match--unpublished:focus-within {
  opacity: 1;
}

.nfl-sa-publish-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px 12px 10px;
}

/* Herramientas de prueba (simular semana): nunca aparece en producción real
   (ver IS_STAGING en super-admin-matches.js). Colapsado por default y con
   fondo rojo — escriben datos falsos directo a Firestore, así que un clic
   accidental mientras se navega la lista real de partidos es justo lo que
   el colapsable evita. */
/* Mismo alto/ancho que .nfl-sa-sync-panel (margin-top, border-radius,
   padding y font-size del summary calcados de ahí) — la única diferencia
   es el rojo en vez del dorado, para que el peligro se lea de inmediato
   sin que el tamaño del colapsable delate cuál es "el importante". */
.nfl-sa-test-toolbar {
  margin-top: 10px;
  border: 1px solid rgba(239, 68, 68, 0.45);
  border-radius: 10px;
  background: rgba(239, 68, 68, 0.1);
}
.nfl-sa-test-toolbar > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.nfl-sa-test-toolbar > summary::-webkit-details-marker { display: none; }
.nfl-sa-test-toolbar > summary::after {
  content: '▾';
  color: #fca5a5;
  transition: transform 0.15s;
}
.nfl-sa-test-toolbar[open] > summary::after { transform: rotate(180deg); }
.nfl-sa-test-toolbar-help {
  margin: 0 14px 8px;
  padding: 0 0 0 18px;
  color: var(--text-dim);
  font-size: 0.72rem;
  line-height: 1.4;
}
.nfl-sa-test-toolbar-help li + li {
  margin-top: 4px;
}
.nfl-sa-test-toolbar-help strong {
  color: var(--text);
}
.nfl-sa-test-toolbar .nfl-sa-publish-filter {
  margin: 0 14px 10px;
  flex-wrap: wrap;
}

.nfl-sa-test-toolbar .nfl-sa-publish-counter {
  color: #fca5a5;
}

.nfl-sa-publish-counter {
  color: var(--text-dim);
  font-size: 0.72rem;
  font-weight: 800;
}

.nfl-sa-publish-filter {
  display: flex;
  gap: 4px;
}

.nfl-week-tab small {
  display: block;
  color: var(--text-dim);
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.2;
}

.nfl-week-tab.active small { color: inherit; }
.nfl-week-tab-title,
.nfl-week-tab-range { display: block; }
.nfl-week-tab-range { margin-top: 3px; }

.nfl-sa-week + .nfl-sa-stage-control { margin-top: 14px; }

.nfl-sa-filter-tab {
  min-height: 30px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,0.025);
  color: var(--text-dim);
  cursor: pointer;
  font-family: var(--font);
  font-size: 0.68rem;
  font-weight: 800;
  padding: 4px 12px;
  touch-action: manipulation;
}

.nfl-sa-filter-tab.active {
  border-color: rgba(245, 197, 24, 0.62);
  background: rgba(245, 197, 24, 0.1);
  color: var(--gold);
}

/* Tinte por conferencia (solo postemporada): borde + acento izquierdo sutil.
   No altera logos, botones ni textos de estado. */
.nfl-sa-card--nfc {
  border-color: rgba(59, 130, 246, 0.5);
  border-left: 3px solid rgba(59, 130, 246, 0.8);
}

.nfl-sa-card--afc {
  border-color: rgba(239, 68, 68, 0.5);
  border-left: 3px solid rgba(239, 68, 68, 0.8);
}

.nfl-team-logo-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px dashed var(--border);
  font-size: 0.9em;
  opacity: 0.6;
}

.nfl-sa-override {
  flex: 0 0 auto;
  color: #fcd34d;
  font-size: 0.66rem;
  font-weight: 800;
}

.nfl-sa-inline-help { display: inline-flex; align-items: center; gap: 5px; color: var(--text-dim); font-size: .7rem; }
.nfl-sa-tooltip-wrap { position: relative; display: inline-flex; }
.nfl-sa-help { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #93c5fd; font: inherit; font-size: .88rem; cursor: help; }
.nfl-sa-help:hover, .nfl-sa-help:focus-visible { background: rgba(96,165,250,.12); color: #bfdbfe; outline: none; }
.nfl-sa-tooltip { position: absolute; z-index: 4; top: calc(100% + 5px); left: 0; width: min(280px, 72vw); padding: 9px 10px; border: 1px solid rgba(96,165,250,.35); border-radius: 9px; background: #0b1411; box-shadow: 0 10px 24px rgba(0,0,0,.32); color: var(--text); font-size: .72rem; font-weight: 500; line-height: 1.4; text-transform: none; letter-spacing: 0; }
.nfl-sa-tooltip[hidden] { display: none; }

/* Contenedor de las dos filas (equipos+kickoff, línea+spread) — cada fila
   define su propio grid-template-columns (--teams, --markets); esto solo
   las apila. display:grid con columnas aquí (regla vieja de cuando los
   <label> eran hijos directos) las ponía lado a lado a la mitad del ancho
   cada una — la causa real de que el input de kickoff se viera desfasado. */
.nfl-sa-config-fields {
  display: grid;
  gap: 7px;
}

.nfl-sa-field {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.nfl-sa-config-fields .nfl-sa-field > span {
  color: var(--gold);
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.nfl-sa-input {
  width: 100%;
  /* Sin esto, un <input type="datetime-local"> respeta su ancho mínimo
     intrínseco (el widget nativo) en vez de encogerse a la columna del
     grid, y se sale por la derecha de la tarjeta — min-width:0 en el
     <label> contenedor no alcanza, tiene que ir en el input mismo. */
  min-width: 0;
  min-height: 34px;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 0.86rem;
  padding: 5px 8px;
}

.nfl-sa-input:focus {
  outline: none;
  border-color: #60a5fa;
}

.nfl-sa-input:disabled {
  cursor: not-allowed;
  color: var(--text-dim);
  opacity: 0.7;
}

.nfl-sa-field--tbd .nfl-sa-input::placeholder {
  color: var(--text-dim);
  font-style: italic;
}

.nfl-sa-schedule-warning {
  margin: 8px 0 0;
  color: #fcd34d;
  font-size: 0.67rem;
  font-weight: 600;
  line-height: 1.35;
}

.nfl-sa-advancing-hint {
  margin: 8px 0 0;
  color: #93c5fd;
  font-size: 0.7rem;
  font-weight: 700;
}

.nfl-sa-match-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: 8px;
}

.nfl-sa-btn {
  min-height: 34px;
  padding: 7px 11px;
}

.nfl-sa-btn--primary {
  border-color: rgba(96,165,250,0.5);
  background: rgba(37,99,235,0.24);
  color: #bfdbfe;
}

.nfl-sa-btn:disabled {
  cursor: default;
  opacity: 0.65;
}

/* Ocultar/Publicar del resumen colapsado: clases propias, sin compartir
   --ghost/--published con nada más — la vez anterior, reusar --ghost (una
   clase, declarada después en el archivo) le ganaba el cascade al rojo
   sin importar qué tan específica se hiciera esta regla. Cero ambigüedad
   ahora: estas dos clases no las usa ningún otro botón. */
.nfl-sa-btn--hide {
  border-color: rgba(248, 113, 113, 0.45);
  background: rgba(248, 113, 113, 0.1);
  color: #fca5a5;
}

.nfl-sa-btn--show {
  border-color: rgba(74, 222, 128, 0.45);
  background: rgba(74, 222, 128, 0.1);
  color: #86efac;
}

.nfl-sa-btn--danger {
  border-color: rgba(248, 113, 113, 0.45);
  background: rgba(248, 113, 113, 0.1);
  color: #fca5a5;
}

.nfl-sa-btn--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--text-dim);
}

.nfl-sa-interesting-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.nfl-sa-spread {
  color: var(--text-dim);
  font-size: 0.78rem;
  font-weight: 700;
}

.nfl-badge {
  display: inline-flex;
  align-items: center;
  width: max-content;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 0.68rem;
  font-weight: 900;
}

.nfl-badge--interesting {
  border: 1px solid rgba(245,197,24,0.36);
  background: rgba(245,197,24,0.1);
  color: #fde68a;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.nfl-badge--api {
  border: 1px solid rgba(74, 222, 128, 0.4);
  background: rgba(74, 222, 128, 0.08);
  color: #86efac;
}

.nfl-badge--manual {
  border: 1px solid rgba(148, 163, 184, 0.36);
  background: rgba(148, 163, 184, 0.08);
  color: var(--text-dim);
}

/* ── Configuración: total/spread protagonistas + detalles colapsados ──── */

/* Tarjeta de Configuración: equipos/logos visibles pero compactos — con el
   calendario completo cargado, cada semana muestra decenas de tarjetas y el
   tamaño "protagonista" original (logos 42px, línea 1.55rem) las hacía
   demasiado altas para navegar la lista completa. */
.nfl-sa-config-card .nfl-final-scoreboard {
  padding: 1px 0 6px;
  gap: 4px;
}

/* Fila colapsada de la tarjeta — toda la tarjeta vive dentro de un solo
   <details>, con el badge/matchup/hora/línea/spread/publicar/chevron
   visibles sin abrirla. */
.nfl-sa-card-toggle {
  margin: -9px -10px;
  padding: 9px 10px;
}

.nfl-sa-card-summary {
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  list-style: none;
}

.nfl-sa-card-summary::-webkit-details-marker {
  display: none;
}

.nfl-sa-card-summary-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.nfl-sa-card-summary-row--top {
  justify-content: center;
  position: relative;
}

/* El badge de tipo de partido (JUE/PLAYOFF/etc.) queda chico a propósito —
   el protagonista de esta fila son los logos, no la etiqueta. Posición
   absoluta para no descentrar el enfrentamiento cuando el badge es angosto. */
.nfl-sa-card-summary-row--top .nfl-slot-badge {
  position: absolute;
  left: 0;
  font-size: 0.6rem;
  padding: 2px 5px;
}

.nfl-sa-card-summary-matchup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.nfl-sa-card-summary-matchup img,
.nfl-sa-card-summary-matchup .nfl-team-logo-placeholder {
  width: 44px;
  height: 44px;
}

.nfl-sa-card-summary-matchup b {
  color: var(--text-dim);
  font-size: 0.76rem;
}

.nfl-sa-card-summary-market {
  color: var(--text-dim);
  font-size: 0.72rem;
}

.nfl-sa-card-summary-market strong {
  color: var(--text);
  font-weight: 800;
}

/* Mismo alto que los logos (44px) — display:flex + align-items:center
   centra el número dentro de esa caja en vez de solo agrandar la fuente
   y desalinear el renglón. */
.nfl-sa-card-summary-score {
  display: inline-flex;
  align-items: center;
  height: 44px;
  color: var(--text);
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1;
}

.nfl-sa-card-summary-status {
  font-size: 0.76rem;
  font-weight: 800;
}

.nfl-sa-card-summary-status--live {
  color: #f87171;
}

.nfl-sa-card-summary-row--markets {
  justify-content: center;
}

/* Grid de 3 columnas en vez de flex: En vivo a la izquierda, chevron
   centrado (con espacio propio a los lados para que su área de clic sea
   más grande, no pegado al botón) y Ocultar/Publicar a la derecha —
   lejos del chevron a propósito, para no confundir los dos toques. */
.nfl-sa-card-summary-row--actions {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
}

.nfl-sa-card-summary-status-slot {
  justify-self: start;
}

.nfl-sa-card-summary-publish {
  justify-self: end;
}

.nfl-sa-card-summary-chevron {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--text-dim);
  transition: transform 0.15s ease;
}

.nfl-sa-card-toggle[open] .nfl-sa-card-summary-chevron {
  transform: rotate(180deg);
}

.nfl-sa-card-body {
  padding-top: 8px;
}

.nfl-sa-card-body > .nfl-final-tie,
.nfl-sa-card-body > .nfl-sa-override {
  display: block;
  width: fit-content;
  margin: 0 auto 8px;
  text-align: center;
}

.nfl-sa-card-divider {
  margin: 10px 0;
  border: 0;
  border-top: 1px solid var(--border);
}

.nfl-sa-card-section-title {
  margin: 0 0 8px;
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 800;
}

.nfl-sa-config-fields-row--teams {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

/* Kickoff en su propia fila a ancho completo, no metido en la fila de
   equipos — un <input type="datetime-local"> tiene un ancho mínimo
   intrínseco (el widget nativo) que en 1/3 de la tarjeta lo hacía
   desbordarse sin importar cuánto min-width:0 se le pusiera alrededor. */
.nfl-sa-field--full {
  margin-top: 7px;
}

.nfl-sa-config-fields-row--markets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 7px;
}

.nfl-sa-result-edit-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.nfl-sa-result-edit-fields .nfl-sa-result-edit-controls {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

@media (max-width: 620px) {
  .nfl-sa-config-fields-row--teams,
  .nfl-sa-config-fields-row--markets,
  .nfl-sa-result-edit-fields {
    grid-template-columns: 1fr;
  }
}

.nfl-sa-card-kickoff {
  display: grid;
  gap: 2px;
  justify-items: center;
  margin: 0 0 4px;
  color: var(--text-dim);
  font-size: 0.72rem;
  font-weight: 600;
  text-align: center;
}

.nfl-sa-card-kickoff small {
  color: var(--text-dim);
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: capitalize;
}

/* Línea/spread: mismo contenido de antes, ahora en segundo plano — menos
   contraste que el marcador/equipos de arriba. */
.nfl-sa-card-secondary {
  opacity: 0.86;
}

.nfl-sa-card-secondary .nfl-sa-config-total-value {
  font-size: 1.05rem;
  color: var(--text-dim);
}

.nfl-sa-card-secondary .nfl-sa-config-label {
  color: var(--text-dim);
}

.nfl-sa-config-highlights {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}

.nfl-sa-config-highlights--split {
  flex-wrap: wrap;
}

.nfl-sa-config-total {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 8px;
  text-align: center;
}

.nfl-sa-config-label {
  flex-basis: 100%;
  color: var(--gold);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.nfl-sa-config-total-value {
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--text);
}

.nfl-sa-config-divider {
  align-self: stretch;
  width: 1px;
  background: var(--border);
}

.nfl-sa-interesting-info {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  text-align: center;
}

.nfl-sa-btn--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.nfl-sa-btn--icon svg {
  flex: 0 0 auto;
}

/* Naranja a propósito — lo distingue de un vistazo del resto de paneles
   dorados/verdes de esta pantalla (es el único que toca un servicio
   externo de pago con créditos limitados, no configuración local). */
.nfl-sa-sync-panel {
  margin-top: 10px;
  border: 1px solid rgba(249, 115, 22, 0.32);
  border-radius: 10px;
  background: rgba(249, 115, 22, 0.08);
}

.nfl-sa-sync-summary-toggle {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #fdba74;
}

.nfl-sa-sync-summary-toggle::-webkit-details-marker {
  display: none;
}

.nfl-sa-sync-summary-toggle::after {
  content: '▾';
  transition: transform 0.15s ease;
  color: var(--text-dim);
}

.nfl-sa-sync-panel[open] > .nfl-sa-sync-summary-toggle::after {
  transform: rotate(180deg);
}

/* Badge de saldo en el summary — visible siempre, colapsado o no */
.nfl-sa-sync-quota {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-dim);
  background: rgba(245, 197, 24, 0.08);
  border: 1px solid rgba(245, 197, 24, 0.2);
  border-radius: 20px;
  padding: 2px 8px;
  white-space: nowrap;
}

/* Detalle del reset, visible cuando el panel está abierto */
.nfl-sa-sync-quota-detail {
  padding: 8px 14px;
  border-bottom: 1px solid rgba(245, 197, 24, 0.1);
  margin-bottom: 4px;
}

.nfl-sa-sync-quota-reset {
  font-size: 0.7rem;
  color: var(--text-dim);
  line-height: 1.4;
}

.nfl-sa-sync-phase-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  padding: 0 14px 10px;
}

.nfl-sa-sync-phase-tab {
  min-height: 34px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255,255,255,0.025);
  color: var(--text-dim);
  cursor: pointer;
  font-family: var(--font);
  font-size: 0.7rem;
  font-weight: 800;
  touch-action: manipulation;
}

.nfl-sa-sync-phase-tab.is-active {
  border-color: rgba(245, 197, 24, 0.62);
  background: rgba(245, 197, 24, 0.1);
  color: var(--gold);
}

.nfl-sa-api-plan {
  margin: 0 14px 10px;
  padding: 10px 12px;
  border: 1px solid rgba(74, 222, 128, 0.28);
  border-radius: 8px;
  background: rgba(74, 222, 128, 0.055);
}

.nfl-sa-api-plan--sync-before,
.nfl-sa-api-plan--sync-after {
  border-color: rgba(245, 197, 24, 0.55);
  background: rgba(245, 197, 24, 0.08);
}

.nfl-sa-api-plan-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.nfl-sa-api-plan-heading div {
  display: grid;
  gap: 2px;
}

.nfl-sa-api-plan-heading small,
.nfl-sa-api-plan-heading > span {
  color: var(--text-dim);
  font-size: 0.68rem;
}

.nfl-sa-api-plan-heading strong {
  color: var(--text);
  font-size: 0.8rem;
  text-transform: capitalize;
}

.nfl-sa-api-plan-windows {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 8px 0;
}

.nfl-sa-api-plan-windows span {
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: var(--text);
  font-size: 0.68rem;
}

.nfl-sa-api-plan p {
  margin: 0 0 4px;
  color: var(--gold);
  font-size: 0.76rem;
  font-weight: 700;
}

.nfl-sa-api-plan-empty {
  margin: 0 14px 10px;
  color: var(--text-dim);
  font-size: 0.68rem;
  line-height: 1.45;
}

.nfl-sa-sync-guide {
  margin: 0 14px 10px;
  padding: 11px 12px;
  border: 1px solid rgba(245, 197, 24, 0.3);
  border-radius: 8px;
  background: rgba(245, 197, 24, 0.055);
}

.nfl-sa-sync-guide strong {
  color: var(--gold);
  font-size: 0.76rem;
}

.nfl-sa-sync-guide p,
.nfl-sa-sync-guide ul {
  margin: 6px 0 0;
  color: var(--text-dim);
  font-size: 0.7rem;
  line-height: 1.45;
}

.nfl-sa-sync-guide ul {
  display: grid;
  gap: 3px;
  padding-left: 17px;
}

.nfl-sa-sync-guide b { color: var(--text); }

.nfl-sa-sync-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 0 14px 14px;
}

@media (max-width: 720px) {
  .nfl-sa-sync-columns {
    grid-template-columns: 1fr;
  }
}

.nfl-sa-sync-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.15);
}

.nfl-sa-sync-col--all {
  border-color: rgba(245, 197, 24, 0.28);
  background: rgba(245, 197, 24, 0.06);
}

.nfl-sa-sync-icon {
  color: #4ade80;
  line-height: 0;
}

.nfl-sa-sync-title {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text);
}

.nfl-sa-sync-text {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.76rem;
  line-height: 1.4;
}

.nfl-sa-sync-cost {
  color: var(--text-dim);
  font-size: 0.7rem;
}

.nfl-sa-sync-col .nfl-sa-btn {
  width: 100%;
  text-align: center;
}

.nfl-sa-sync-status {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 2px;
  font-size: 0.7rem;
  color: var(--text-dim);
}

.nfl-sa-sync-status span:first-child {
  color: var(--text);
}

.nfl-sa-result-state {
  width: max-content;
  justify-self: end;
  padding: 4px 8px;
  border: 1px solid rgba(252, 211, 77, 0.45);
  border-radius: 999px;
  color: #fde68a;
  font-size: 0.78rem;
}

.nfl-sa-result-state.is-final {
  border-color: rgba(74, 222, 128, 0.48);
  color: #86efac;
}

/* Fila de estado del partido + fuente del resultado */
.nfl-sa-result-state-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 4px 0 6px;
  flex-wrap: wrap;
}

.nfl-result-state {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid rgba(252, 211, 77, 0.4);
  color: #fde68a;
}
.nfl-result-state--final {
  border-color: rgba(74, 222, 128, 0.48);
  color: #86efac;
}
.nfl-result-state--live {
  border-color: rgba(251, 146, 60, 0.5);
  color: #fdba74;
}
.nfl-result-state--pending {
  border-color: rgba(148, 163, 184, 0.3);
  color: var(--text-dim);
}

.nfl-sa-result-source {
  font-size: 0.68rem;
  color: var(--text-dim);
  font-style: italic;
}

.nfl-sa-result-capture-hint {
  margin: 0 0 8px;
  color: var(--text-dim);
  font-size: 0.68rem;
  line-height: 1.35;
}

@media (max-width: 480px) {
  .nfl-sa-override { max-width: 88px; text-align: right; }
}
.nfl-conference-champions {
  display: grid;
  gap: 18px;
}

.nfl-conference-intro {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.88rem;
  line-height: 1.5;
}

.nfl-conference-points-reminder {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(245, 197, 24, 0.08);
  color: var(--text-dim);
  font-size: 0.78rem;
  text-align: center;
}

/* Tabs AFC/NFC — antes las dos conferencias se apilaban una tras otra y
   había que hacer scroll por las 16 tarjetas de ambas para llegar al botón
   de guardar; ahora se ve una conferencia a la vez. */
.nfl-conference-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 10px 0;
}

.nfl-conference-tab {
  min-height: 42px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text-dim);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 800;
  cursor: pointer;
}

/* Rojo/azul en vez del emoji 🔴/🔵 que llevaban antes — misma identidad
   AFC/NFC, sin repetir el mismo par de emojis en cada pantalla. */
.nfl-conference-tab[data-conference-tab="AFC"].is-active {
  border-color: rgba(248, 113, 113, 0.7);
  background: rgba(248, 113, 113, 0.14);
  color: #fecaca;
}

.nfl-conference-tab[data-conference-tab="NFC"].is-active {
  border-color: rgba(96, 165, 250, 0.7);
  background: rgba(96, 165, 250, 0.14);
  color: #bfdbfe;
}

.nfl-conference-pick {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}

.nfl-conference-pick__subtitle {
  margin: 0;
  padding: 14px 16px 0;
  color: var(--text-dim);
  font-size: 0.74rem;
}

.nfl-conference-team-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 12px;
}

/* Campeones de conferencia lista los 16 equipos de la conferencia — 2
   columnas eran 8 filas de scroll; 4 columnas se ve la conferencia
   completa de un jalón. */
.nfl-conference-team-grid--champions {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.nfl-conference-divisions {
  display: grid;
  gap: 14px;
  padding: 14px;
}

.nfl-conference-divisions--division-leaders {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.nfl-conference-division h4 {
  margin: 0 0 8px;
  color: var(--text-dim);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nfl-conference-division .nfl-conference-team-grid {
  padding: 0;
}

.nfl-conference-team {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-content: center;
  gap: 4px;
  min-height: 84px;
  padding: 10px 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--text);
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition: opacity 0.2s;
}

.nfl-conference-team img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.nfl-conference-team strong {
  max-width: 100%;
  overflow: hidden;
  font-size: 0.76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nfl-conference-team.is-selected {
  border-color: #e5b84e;
  background: rgba(229, 184, 78, 0.14);
  box-shadow: inset 0 0 0 1px rgba(229, 184, 78, 0.22);
}

.nfl-conference-team:disabled {
  cursor: default;
  opacity: 0.68;
}

/* Ya hay un pick guardado en este grupo (división/conferencia) — el resto de
   sus opciones se atenúan para que el elegido destaque, en vez de competir
   visualmente con siete equipos que ya no aplican. */
.nfl-conference-team.is-dimmed {
  opacity: 0.3;
}
.nfl-conference-team.is-dimmed:hover {
  opacity: 0.6;
}

@media (max-width: 560px) {
  .nfl-conference-team-grid {
    grid-template-columns: 1fr;
  }

  .nfl-conference-team-grid--division-leaders {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nfl-conference-team-grid--champions {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Sprint 128: el acceso no expulsa de picks. La tarjeta explica el desbloqueo
   mientras calendario, resultados y tarjetas continúan visibles. */
.nfl-access-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 14px 0;
  padding: 16px;
  border: 1px solid rgba(229, 184, 78, .5);
  border-radius: 14px;
  background: linear-gradient(120deg, rgba(229, 184, 78, .15), rgba(16, 27, 20, .9));
}

.nfl-access-card--home {
  margin: 0 0 14px;
}

.nfl-access-card--preseason { border-color: rgba(122, 184, 138, .55); }
.nfl-access-card strong, .nfl-access-card b { color: var(--gold, #e5b84e); }
.nfl-access-card p { margin: 5px 0; color: rgba(242, 241, 233, .82); }
.nfl-access-card .preseason-practice-note {
  display: flex;
  gap: 7px;
  margin: 0 0 10px;
  padding: 7px 10px;
  border-left: 2px solid rgba(122, 184, 138, .7);
  color: rgba(242, 241, 233, .72);
}
.nfl-access-card small { color: rgba(242, 241, 233, .62); }
.nfl-access-card__action { display: grid; gap: 8px; min-width: 180px; text-align: right; }
.nfl-access-card__action .profile-btn { justify-content: center; }

@media (max-width: 620px) {
  .nfl-access-card { align-items: stretch; flex-direction: column; }
  .nfl-access-card__action { min-width: 0; text-align: left; }
}
.nfl-public-results-body { padding: 14px 0 32px; }

/* ── Standings por división (Resultados) ─────────────────────────────── */
.nfl-standings-body { padding: 8px 0 32px; display: grid; gap: 10px; }
.nfl-standings-body .nfl-conference-tabs { margin: 0; }
.nfl-standings-note { margin: 0; color: var(--text-dim); font-size: .7rem; text-align: center; }
.nfl-standings-conference {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface);
}
.nfl-standings-division { display: grid; gap: 2px; }
.nfl-standings-division-head {
  display: grid;
  grid-template-columns: 1fr repeat(3, 28px);
  align-items: center;
  padding: 6px 4px;
  color: var(--text-dim);
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.nfl-standings-division-head .nfl-standings-col { text-align: center; }
.nfl-standings-row {
  display: grid;
  grid-template-columns: 26px 1fr repeat(3, 28px);
  align-items: center;
  gap: 8px;
  padding: 7px 4px;
  border-top: 1px solid var(--border);
  font-size: .84rem;
}
.nfl-standings-logo { width: 22px; height: 22px; object-fit: contain; }
.nfl-standings-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.nfl-standings-row .nfl-standings-col { text-align: center; color: var(--text-dim); font-weight: 700; }
.nfl-standings-row.is-fav {
  background: rgba(245,197,24,0.1);
  border-left: 3px solid var(--gold);
  padding-left: 1px;
  border-radius: 0 6px 6px 0;
}
.nfl-standings-row.is-fav .nfl-standings-name { color: var(--gold); font-weight: 800; }
.nfl-results-filters { display: grid; gap: 10px; }
.nfl-results-filter--wide { grid-column: 1 / -1; }
.nfl-results-stage-filter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.nfl-results-stage { min-height: 42px; padding: 8px 4px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text-dim); font: inherit; font-size: .76rem; font-weight: 800; line-height: 1.1; }
.nfl-results-stage.is-selected { border-color: rgba(245,197,24,0.7); background: rgba(245,197,24,0.14); color: #fff3b0; }
.nfl-results-week-filter { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.nfl-results-week-filter:empty { display: none; }
.nfl-results-week { flex: 0 0 auto; min-height: 34px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 17px; background: var(--surface); color: var(--text-dim); font: inherit; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.nfl-results-week.is-selected { border-color: rgba(245,197,24,0.7); background: rgba(245,197,24,0.14); color: #fff3b0; }
#nfl-results-week-pills.group-pills {
  display: flex;
  justify-content: flex-start;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}
#nfl-results-week-pills .ko-stage-pill { flex: 0 0 auto; }

.nfl-results-team-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(118px, .42fr); gap: 10px; align-items: end; }
.nfl-results-team-field { min-width: 0; display: grid; gap: 6px; color: var(--text-dim); font-size: .72rem; font-weight: 800; }
.nfl-results-team-picker { position: relative; min-width: 0; }
.nfl-results-team-picker summary,
.nfl-results-my-team { min-height: 46px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; font-size: .82rem; font-weight: 800; }
.nfl-results-team-picker summary { display: flex; align-items: center; gap: 8px; padding: 8px 10px; cursor: pointer; list-style: none; }
.nfl-results-team-picker summary::-webkit-details-marker { display: none; }
.nfl-results-team-picker summary::after { content: '▾'; margin-left: auto; color: var(--text-dim); }
.nfl-results-team-picker[open] summary::after { transform: rotate(180deg); }
.nfl-results-team-picker img,
.nfl-results-team-options img,
.nfl-results-my-team img { width: 26px; height: 26px; object-fit: contain; flex: 0 0 26px; }
.nfl-results-team-options { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0; max-height: min(340px, 55vh); overflow-y: auto; padding: 6px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-strong, #101910); box-shadow: 0 16px 34px rgba(0, 0, 0, .45); }
.nfl-results-team-options button { width: 100%; display: flex; align-items: center; gap: 9px; padding: 8px; border: 0; border-radius: 8px; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.nfl-results-team-options button:hover,
.nfl-results-team-options button[aria-selected="true"] { background: rgba(245, 197, 24, .12); color: var(--yellow, #f5c518); }
.nfl-results-my-team { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 10px; cursor: pointer; border-color: rgba(245, 197, 24, .42); }
.nfl-results-my-team:hover { background: rgba(245, 197, 24, .1); }
.nfl-results-count { margin: 16px 0 8px; color: var(--text-dim); font-size: .78rem; }
.nfl-public-results-list { display: grid; gap: 10px; }
.nfl-results-day-group + .nfl-results-day-group { margin-top: 18px; }
.nfl-results-day-heading {
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  color: var(--yellow, #f5c518);
  font-size: .82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.nfl-public-result-card { border: 1px solid var(--border); border-radius: 13px; background: var(--surface); }