/* BIE NHL SHADOW — Auditor de Jornadas e Historial de Resultados
 * Arquitectura visual derivada de BIE Black Label (Inter / #0a1115 / #111c22 / #e6c48c / #edf3f3).
 * Compatible con escritorio y móvil (viewport >= 320px).
 */
.nj-root {
  --nj-bg: #0a1115;
  --nj-card: #111c22;
  --nj-card-hover: #15232b;
  --nj-line: #ffffff17;
  --nj-line-light: #ffffff26;
  --nj-gold: #e6c48c;
  --nj-gold-glow: #e6c48c22;
  --nj-dim: #a0b0b7;
  --nj-text: #edf3f3;
  --nj-hit: #9cce78;
  --nj-miss: #df8e8e;
  --nj-review: #e1bd78;
  color: var(--nj-text);
  font-family: Inter, 'Segoe UI', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 20px 80px;
  box-sizing: border-box;
  background: var(--nj-bg);
}
.nj-root * { box-sizing: border-box; }
.nj-root button, .nj-root input { font: inherit; }
.nj-root button {
  min-height: 44px;
  cursor: pointer;
  background: #142128;
  color: #e4ecee;
  border: 1px solid var(--nj-line);
  padding: 10px 18px;
  border-radius: 6px;
  transition: all 0.15s ease-in-out;
}
.nj-root button:hover:not(:disabled) {
  background: #1c2c36;
  border-color: var(--nj-gold);
}
.nj-root button:disabled { opacity: .4; cursor: default; }
.nj-root button:focus-visible, .nj-root summary:focus-visible {
  outline: 2px solid var(--nj-gold);
  outline-offset: 3px;
}

/* Cabecera */
.nj-root .nj-head {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--nj-line);
}
.nj-root .nj-eyebrow {
  display: inline-block;
  color: var(--nj-gold);
  font-size: 11px;
  letter-spacing: 2.2px;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.nj-root .nj-badge-shadow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(230, 196, 140, 0.12);
  color: var(--nj-gold);
  border: 1px solid rgba(230, 196, 140, 0.35);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 3px 8px;
  border-radius: 4px;
  margin-left: 10px;
  vertical-align: middle;
}
.nj-root h1 {
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.1;
  letter-spacing: -1.5px;
  margin: 10px 0 8px;
  color: #ffffff;
  font-weight: 800;
}
.nj-root .nj-head p {
  color: var(--nj-dim);
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
  max-width: 760px;
}

/* Navegación de pestañas */
.nj-root .nj-result-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 18px 0;
  border-bottom: 1px solid var(--nj-line);
}
.nj-root .nj-result-tabs button {
  position: relative;
  background: #111c22;
  border: 1px solid var(--nj-line);
  border-radius: 8px;
  min-height: 52px;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: var(--nj-dim);
}
.nj-root .nj-result-tabs [aria-pressed=true] {
  background: linear-gradient(145deg, rgba(230, 196, 140, 0.14), rgba(230, 196, 140, 0.04));
  color: #ffffff;
  border-color: var(--nj-gold);
}
.nj-root .nj-result-tabs [aria-pressed=true]:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 25%;
  width: 50%;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--nj-gold);
}

/* Hero acumulado del historial */
.nj-root .nj-history-hero {
  border-left: 3px solid var(--nj-gold);
  background: linear-gradient(105deg, #131f26, #0e171c);
  padding: 24px 28px;
  margin: 22px 0 0;
  border-radius: 0 10px 10px 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.nj-root .nj-history-hero > strong {
  display: block;
  font-size: clamp(48px, 8vw, 76px);
  line-height: 1;
  margin: 18px 0 14px;
  letter-spacing: -2.5px;
  color: var(--nj-gold);
  font-weight: 850;
}
.nj-root .nj-history-hero > p {
  font-size: 13px;
  color: var(--nj-dim);
  line-height: 1.7;
  max-width: 720px;
  margin: 0;
}
.nj-root .nj-history-hero > div {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--nj-line);
  padding-top: 20px;
  margin-top: 20px;
  gap: 12px;
}
.nj-root .nj-history-hero > div > span {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11px;
  color: var(--nj-dim);
  border-right: 1px solid var(--nj-line);
  padding-left: 14px;
}
.nj-root .nj-history-hero > div > span:first-child { padding-left: 0; }
.nj-root .nj-history-hero > div > span:last-child { border: 0; }
.nj-root .nj-history-hero > div b {
  color: #ffffff;
  font-size: 26px;
  line-height: 1;
  font-weight: 800;
}

/* Tarjetas por jornada */
.nj-root .nj-history-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 24px;
}
.nj-root .nj-history-card {
  display: block;
  text-align: left;
  width: 100%;
  background: var(--nj-card);
  border: 1px solid var(--nj-line);
  border-left: 4px solid var(--nj-gold);
  border-radius: 8px;
  padding: 22px 26px;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.nj-root .nj-history-card:hover {
  background: var(--nj-card-hover);
  border-color: var(--nj-line-light);
  border-left-color: #f7d8a6;
  transform: translateY(-2px);
}
.nj-root .nj-history-card > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}
.nj-root .nj-history-card > div > span {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.nj-root .nj-history-card > div > span:last-child { text-align: right; }
.nj-root .nj-history-card small {
  font-size: 10px;
  color: var(--nj-dim);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.nj-root .nj-history-card > div > span:first-child > small {
  color: var(--nj-gold);
  font-weight: 800;
}
.nj-root .nj-history-card b {
  font-size: 22px;
  color: #ffffff;
  font-weight: 800;
}
.nj-root .nj-history-card strong {
  font-size: 34px;
  line-height: 1;
  color: var(--nj-gold);
  font-weight: 850;
}
.nj-root .nj-history-card p {
  font-size: 12px;
  line-height: 1.7;
  color: #c0cfd6;
  padding: 16px 0;
  margin: 0;
  border-bottom: 1px solid var(--nj-line);
}
.nj-root .nj-history-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
  color: var(--nj-dim);
  padding-top: 14px;
}
.nj-root .nj-history-card footer b {
  font-size: 12px;
  color: var(--nj-gold);
}

/* Vista detalle de jornada */
.nj-root .nj-history-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-size: 12px;
  font-weight: 700;
  color: var(--nj-gold);
  background: transparent;
  border: 1px solid var(--nj-line);
  border-radius: 6px;
  padding: 8px 14px;
}
.nj-root .nj-history-back:hover {
  background: rgba(230, 196, 140, 0.1);
  border-color: var(--nj-gold);
}
.nj-root .nj-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--nj-line);
  background: linear-gradient(110deg, #16242b, #111c22);
  border-radius: 8px;
  overflow: hidden;
  margin: 18px 0;
}
.nj-root .nj-stats > div {
  padding: 20px;
  border-right: 1px solid var(--nj-line);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.nj-root .nj-stats > div:last-child { border: 0; }
.nj-root .nj-stats b {
  font-size: 32px;
  letter-spacing: -1px;
  line-height: 1;
  color: var(--nj-gold);
  font-weight: 850;
}
.nj-root .nj-stats span {
  font-size: 11px;
  color: var(--nj-dim);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.nj-root .nj-footnotes {
  font-size: 11px;
  color: var(--nj-dim);
  padding: 4px 0 16px;
  line-height: 1.7;
}

/* Filtros */
.nj-root .nj-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 0 20px;
}
.nj-root .nj-filters button {
  font-size: 11px;
  font-weight: 700;
  padding: 8px 14px;
  min-height: 38px;
  border-radius: 6px;
  background: #111c22;
}
.nj-root .nj-filters [aria-pressed=true] {
  border-color: var(--nj-gold);
  color: var(--nj-gold);
  background: rgba(230, 196, 140, 0.12);
}

/* Rejilla de partidos */
.nj-root .nj-games {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.nj-root .nj-game {
  background: var(--nj-card);
  border: 1px solid var(--nj-line);
  border-top: 4px solid #677d86;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.nj-root .nj-game.nj-hit { border-top-color: var(--nj-hit); }
.nj-root .nj-game.nj-miss { border-top-color: var(--nj-miss); }
.nj-root .nj-game.nj-review { border-top-color: var(--nj-review); }
.nj-root .nj-game.nj-pending { border-top-color: #55707e; }
.nj-root .nj-game.nj-no_pick { border-top-color: #3e505a; }

.nj-root .nj-game-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--nj-line);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--nj-dim);
  text-transform: uppercase;
}
.nj-root .nj-grade { color: var(--nj-gold); }
.nj-root .nj-hit .nj-grade { color: var(--nj-hit); }
.nj-root .nj-miss .nj-grade { color: var(--nj-miss); }
.nj-root .nj-review .nj-grade { color: var(--nj-review); }

/* Encuentro y equipos */
.nj-root .nj-match {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 12px;
  padding: 22px 16px;
  align-items: center;
  text-align: center;
}
.nj-root .nj-club {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.3;
}
.nj-root .nj-crest {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #192730;
  border: 1px solid var(--nj-line-light);
  color: var(--nj-gold);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.5px;
}
.nj-root .nj-score {
  font-size: 26px;
  font-weight: 850;
  letter-spacing: -1px;
  white-space: nowrap;
  color: #ffffff;
}
.nj-root .nj-score > span {
  font-size: 16px;
  color: #6f868e;
  padding: 0 6px;
}
.nj-root .nj-period-tag {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: var(--nj-gold);
  letter-spacing: 1px;
  margin-top: 4px;
}

/* Callout del pronóstico */
.nj-root .nj-game-bottom {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border-top: 1px solid var(--nj-line);
  font-size: 11px;
  color: var(--nj-dim);
  background: rgba(10, 17, 21, 0.4);
}
.nj-root .nj-pick-callout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 14px;
  width: 100%;
}
.nj-root .nj-pick-callout small {
  grid-column: 1 / -1;
  color: var(--nj-gold);
  font-size: 9px;
  letter-spacing: 1.4px;
  font-weight: 800;
  text-transform: uppercase;
}
.nj-root .nj-pick-callout strong {
  color: #ffffff;
  font-size: clamp(16px, 3.5vw, 20px);
  line-height: 1.2;
  font-weight: 800;
}
.nj-root .nj-pick-callout > b {
  color: var(--nj-gold);
  font-size: clamp(20px, 4vw, 26px);
  line-height: 1;
  font-weight: 850;
}
.nj-root .nj-outcome-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  padding-top: 4px;
  border-top: 1px dashed var(--nj-line);
}
.nj-root .nj-outcome-row b { color: #ffffff; }

/* Evidencia auditable */
.nj-root details { border-top: 1px solid var(--nj-line); }
.nj-root summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  gap: 12px;
  padding: 12px 16px;
  font-size: 11px;
  color: var(--nj-gold);
  font-weight: 750;
}
.nj-root summary::-webkit-details-marker { display: none; }
.nj-root .nj-evidence {
  padding: 0 16px 16px;
  font-size: 11px;
  color: var(--nj-dim);
  line-height: 1.7;
}
.nj-root .nj-evidence p { margin: 4px 0; }
.nj-root .nj-evidence b { color: #e4ecee; }
.nj-root code {
  overflow-wrap: anywhere;
  display: block;
  font-size: 9px;
  line-height: 1.7;
  color: #9cb2b9;
  background: #080d10;
  padding: 4px 8px;
  border-radius: 4px;
  margin: 4px 0;
  border: 1px solid var(--nj-line);
}

/* Calendario */
.nj-root .nj-month {
  background: #111b20;
  border: 1px solid var(--nj-line);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
}
.nj-root .nj-month-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.nj-root .nj-month-head h2 {
  font-size: 18px;
  margin: 0;
  text-transform: capitalize;
  color: #ffffff;
}
.nj-root .nj-month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
.nj-root .nj-weekday {
  text-align: center;
  color: var(--nj-dim);
  font-size: 11px;
  font-weight: 700;
  padding: 8px 0;
}
.nj-root .nj-month-grid button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  min-height: 58px;
  padding: 4px;
  border-radius: 6px;
  background: #142128;
  border: 1px solid transparent;
}
.nj-root .nj-month-grid button b { font-size: 13px; color: #ffffff; }
.nj-root .nj-month-grid button small { font-size: 9px; color: var(--nj-dim); }
.nj-root .nj-month-grid [aria-pressed=true] {
  background: rgba(230, 196, 140, 0.15);
  border-color: var(--nj-gold);
}

/* Avisos y alertas */
.nj-root .nj-alert {
  background: rgba(225, 189, 120, 0.1);
  border: 1px solid rgba(225, 189, 120, 0.35);
  border-radius: 8px;
  padding: 14px 18px;
  font-size: 12px;
  color: #f0dbb3;
  margin: 16px 0;
  line-height: 1.6;
}
.nj-root .nj-empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--nj-dim);
  font-size: 13px;
  background: var(--nj-card);
  border: 1px solid var(--nj-line);
  border-radius: 8px;
}
.nj-root .nj-loading {
  text-align: center;
  padding: 48px 20px;
  color: var(--nj-gold);
  font-size: 13px;
  font-weight: 700;
}
.nj-root .nj-note {
  font-size: 11px;
  color: var(--nj-dim);
  line-height: 1.7;
}

/* Adaptación responsive móvil */
@media (max-width: 768px) {
  .nj-root { padding: 16px 14px 60px; }
  .nj-root .nj-games { grid-template-columns: 1fr; }
  .nj-root .nj-stats { grid-template-columns: repeat(2, 1fr); gap: 1px; }
  .nj-root .nj-stats > div { border-right: 0; border-bottom: 1px solid var(--nj-line); }
  .nj-root .nj-history-hero { padding: 18px 20px; }
  .nj-root .nj-history-hero > div { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .nj-root .nj-history-hero > div > span { border-right: 0; padding-left: 0; }
  .nj-root .nj-history-card { padding: 18px 20px; }
  .nj-root .nj-history-card strong { font-size: 28px; }
  .nj-root .nj-history-card b { font-size: 18px; }
  .nj-root .nj-history-card footer { flex-wrap: wrap; }
  .nj-root .nj-month { padding: 12px; }
  .nj-root .nj-month-grid { gap: 3px; }
  .nj-root .nj-month-grid button { min-height: 50px; font-size: 11px; }
}