/* ==========================================================================
   GRIDIRÓN — Laboratorio de líneas NFL
   Componente propio. Todo el CSS está limitado a #gridiron-lab.
   Ajusta el bloque de variables para adaptarlo al tema.
   ========================================================================== */

#gridiron-lab {
  /* --- color --- */
  --gl-ink: #0f1720;
  --gl-ink-soft: #5b6671;
  --gl-surface: #ffffff;
  --gl-surface-2: #f4f7f9;
  --gl-surface-3: #eaeff3;
  --gl-line: #dde4ea;
  --gl-accent: #0b6b3a;
  --gl-accent-soft: #e6f2eb;
  --gl-chalk: #d97706;
  --gl-chalk-soft: #fdf3e3;
  --gl-pos: #0e7a4a;
  --gl-neg: #b3261e;
  --gl-bar: #b9c7d2;
  --gl-bar-key: #0b6b3a;

  /* --- tipografía --- */
  --gl-font: inherit;
  --gl-font-num: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
  --gl-fs-base: 1rem;
  --gl-fs-sm: 0.875rem;
  --gl-fs-xs: 0.78rem;
  --gl-fs-lg: 1.15rem;
  --gl-fs-xl: 1.6rem;

  /* --- forma --- */
  --gl-radius: 10px;
  --gl-radius-sm: 6px;
  --gl-gap: 16px;
  --gl-pad: 18px;
  --gl-shadow: 0 1px 2px rgba(15, 23, 32, 0.06), 0 8px 24px rgba(15, 23, 32, 0.06);

  box-sizing: border-box;
  display: block;
  margin: 2.5rem 0;
  padding: 0;
  color: var(--gl-ink);
  font-family: var(--gl-font);
  font-size: var(--gl-fs-base);
  line-height: 1.55;
  background: var(--gl-surface);
  border: 1px solid var(--gl-line);
  border-radius: var(--gl-radius);
  box-shadow: var(--gl-shadow);
  overflow: hidden;
}

#gridiron-lab *,
#gridiron-lab *::before,
#gridiron-lab *::after { box-sizing: border-box; }

#gridiron-lab [hidden] { display: none !important; }

/* --------------------------------------------------------------- cabecera */

#gridiron-lab .gl-head {
  position: relative;
  padding: var(--gl-pad);
  background: var(--gl-ink);
  color: #fff;
  border-bottom: 3px solid var(--gl-chalk);
}

/* detalle de marca: líneas de yardas de la cabecera */
#gridiron-lab .gl-head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 10px;
  background-image: repeating-linear-gradient(
    to right,
    rgba(255, 255, 255, 0.55) 0,
    rgba(255, 255, 255, 0.55) 1px,
    transparent 1px,
    transparent 20px
  );
  opacity: 0.45;
  pointer-events: none;
}

#gridiron-lab .gl-kicker {
  margin: 0 0 4px;
  font-size: var(--gl-fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gl-chalk);
}

#gridiron-lab .gl-title {
  margin: 0 0 6px;
  font-size: var(--gl-fs-xl);
  line-height: 1.2;
  color: #fff;
}

#gridiron-lab .gl-lead {
  margin: 0;
  max-width: 62ch;
  font-size: var(--gl-fs-sm);
  color: rgba(255, 255, 255, 0.78);
}

#gridiron-lab .gl-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 14px;
}

#gridiron-lab .gl-toolbar label {
  font-size: var(--gl-fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.7);
}

/* ----------------------------------------------------------------- pestañas */

#gridiron-lab .gl-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  background: var(--gl-surface-2);
  border-bottom: 1px solid var(--gl-line);
}

#gridiron-lab .gl-tab {
  flex: 1 1 auto;
  min-height: 48px;
  padding: 12px 14px;
  font: inherit;
  font-size: var(--gl-fs-sm);
  font-weight: 600;
  color: var(--gl-ink-soft);
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}

#gridiron-lab .gl-tab:hover { background: var(--gl-surface-3); color: var(--gl-ink); }

#gridiron-lab .gl-tab[aria-selected="true"] {
  color: var(--gl-ink);
  background: var(--gl-surface);
  border-bottom-color: var(--gl-accent);
}

/* ------------------------------------------------------------------ paneles */

#gridiron-lab .gl-panel { padding: var(--gl-pad); }

#gridiron-lab .gl-sub {
  margin: 26px 0 10px;
  font-size: var(--gl-fs-lg);
  line-height: 1.3;
}

#gridiron-lab .gl-panel > .gl-sub:first-child { margin-top: 0; }

#gridiron-lab .gl-note {
  margin: 8px 0 0;
  font-size: var(--gl-fs-xs);
  color: var(--gl-ink-soft);
}

/* ------------------------------------------------------------------- campos */

#gridiron-lab .gl-grid {
  display: grid;
  gap: var(--gl-gap);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

#gridiron-lab .gl-field { display: flex; flex-direction: column; gap: 5px; }

#gridiron-lab .gl-field label {
  font-size: var(--gl-fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gl-ink-soft);
}

#gridiron-lab input[type="text"],
#gridiron-lab select {
  width: 100%;
  min-height: 44px;
  padding: 9px 11px;
  font-family: var(--gl-font-num);
  font-size: 16px; /* evita el zoom automático en iOS */
  line-height: 1.3;
  color: var(--gl-ink);
  background: var(--gl-surface);
  border: 1px solid var(--gl-line);
  border-radius: var(--gl-radius-sm);
  appearance: none;
}

#gridiron-lab select { background-color: var(--gl-surface-2); cursor: pointer; }

#gridiron-lab input[type="text"]:hover,
#gridiron-lab select:hover { border-color: #b9c7d2; }

#gridiron-lab input[type="text"]:focus-visible,
#gridiron-lab select:focus-visible,
#gridiron-lab .gl-tab:focus-visible,
#gridiron-lab summary:focus-visible {
  outline: 3px solid var(--gl-chalk);
  outline-offset: 2px;
}

#gridiron-lab .gl-toolbar select {
  min-height: 40px;
  width: auto;
  min-width: 150px;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.28);
}

#gridiron-lab .gl-toolbar select option { color: var(--gl-ink); background: #fff; }

/* ---------------------------------------------------------------- resultado */

#gridiron-lab .gl-cards {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-top: 18px;
}

#gridiron-lab .gl-card {
  padding: 14px;
  background: var(--gl-surface-2);
  border: 1px solid var(--gl-line);
  border-left: 3px solid var(--gl-accent);
  border-radius: var(--gl-radius-sm);
}

#gridiron-lab .gl-card--key { border-left-color: var(--gl-chalk); background: var(--gl-chalk-soft); }

#gridiron-lab .gl-card dt {
  font-size: var(--gl-fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gl-ink-soft);
}

#gridiron-lab .gl-card dd > span { display: block; }

#gridiron-lab .gl-card dd {
  margin: 4px 0 0;
  font-family: var(--gl-font-num);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

#gridiron-lab .gl-card small {
  display: block;
  margin-top: 3px;
  font-family: var(--gl-font);
  font-size: var(--gl-fs-xs);
  font-weight: 400;
  color: var(--gl-ink-soft);
}

#gridiron-lab .gl-pos { color: var(--gl-pos); }
#gridiron-lab .gl-neg { color: var(--gl-neg); }

#gridiron-lab .gl-verdict {
  margin-top: 16px;
  padding: 13px 15px;
  font-size: var(--gl-fs-sm);
  background: var(--gl-surface-2);
  border: 1px solid var(--gl-line);
  border-left: 4px solid var(--gl-ink-soft);
  border-radius: var(--gl-radius-sm);
}

#gridiron-lab .gl-verdict--good { border-left-color: var(--gl-pos); background: var(--gl-accent-soft); }
#gridiron-lab .gl-verdict--bad { border-left-color: var(--gl-neg); background: #fdeceb; }

/* ------------------------------------------------------------------- tablas */

#gridiron-lab .gl-scroll {
  margin-top: 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--gl-line);
  border-radius: var(--gl-radius-sm);
}

#gridiron-lab table {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-size: var(--gl-fs-sm);
}

#gridiron-lab caption {
  padding: 10px 12px;
  font-size: var(--gl-fs-xs);
  text-align: left;
  color: var(--gl-ink-soft);
  background: var(--gl-surface-2);
  border-bottom: 1px solid var(--gl-line);
}

#gridiron-lab th,
#gridiron-lab td {
  padding: 8px 12px;
  text-align: right;
  border-bottom: 1px solid var(--gl-line);
}

#gridiron-lab th:first-child,
#gridiron-lab td:first-child { text-align: left; }

#gridiron-lab thead th {
  font-size: var(--gl-fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gl-ink-soft);
  background: var(--gl-surface-2);
  white-space: nowrap;
}

#gridiron-lab tbody td { font-family: var(--gl-font-num); }
#gridiron-lab tbody tr:last-child td { border-bottom: 0; }
#gridiron-lab tbody tr.gl-row-key { background: var(--gl-chalk-soft); font-weight: 700; }
#gridiron-lab tbody tr.gl-row-now { background: var(--gl-accent-soft); font-weight: 700; }

/* --------------------------------------------------------------- histograma */

#gridiron-lab .gl-chart {
  margin-top: 16px;
  padding: 14px 12px 8px;
  background: var(--gl-surface-2);
  border: 1px solid var(--gl-line);
  border-radius: var(--gl-radius-sm);
}

#gridiron-lab .gl-plot {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 1px;
  height: 168px;
  padding-bottom: 2px;
  border-bottom: 2px solid var(--gl-ink-soft);
}

#gridiron-lab .gl-col { position: relative; flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; }

#gridiron-lab .gl-col i {
  display: block;
  width: 100%;
  min-height: 1px;
  background: var(--gl-bar);
  border-radius: 2px 2px 0 0;
}

#gridiron-lab .gl-col--key i { background: var(--gl-bar-key); }
#gridiron-lab .gl-col--line i { background: var(--gl-chalk); }

#gridiron-lab .gl-axis {
  display: flex;
  gap: 1px;
  margin-top: 5px;
  font-family: var(--gl-font-num);
  font-size: 10px;
  color: var(--gl-ink-soft);
}

#gridiron-lab .gl-axis span { flex: 1 1 0; text-align: center; }

#gridiron-lab .gl-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 10px;
  font-size: var(--gl-fs-xs);
  color: var(--gl-ink-soft);
}

#gridiron-lab .gl-legend span { display: inline-flex; align-items: center; gap: 6px; }
#gridiron-lab .gl-legend b { display: inline-block; width: 12px; height: 12px; border-radius: 2px; }
#gridiron-lab .gl-legend .gl-sw1 { background: var(--gl-bar); }
#gridiron-lab .gl-legend .gl-sw2 { background: var(--gl-bar-key); }
#gridiron-lab .gl-legend .gl-sw3 { background: var(--gl-chalk); }

/* ------------------------------------------------- selecciones del teaser */

#gridiron-lab .gl-leg {
  margin-top: 14px;
  padding: 14px;
  background: var(--gl-surface-2);
  border: 1px solid var(--gl-line);
  border-radius: var(--gl-radius-sm);
}

#gridiron-lab .gl-leg-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}

#gridiron-lab .gl-leg-num {
  font-size: var(--gl-fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gl-ink-soft);
}

#gridiron-lab .gl-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: var(--gl-fs-xs);
  font-weight: 700;
  border-radius: 999px;
  background: var(--gl-surface-3);
  color: var(--gl-ink);
}

#gridiron-lab .gl-badge--key { background: var(--gl-chalk); color: #fff; }
#gridiron-lab .gl-badge--wong { background: var(--gl-accent); color: #fff; }

#gridiron-lab .gl-leg-out {
  margin: 12px 0 0;
  font-size: var(--gl-fs-sm);
  font-family: var(--gl-font-num);
}

/* --------------------------------------------- carril de yardas (detalle) */

#gridiron-lab .gl-rail {
  position: relative;
  height: 46px;
  margin-top: 14px;
  background: var(--gl-accent);
  background-image: linear-gradient(rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.12));
  border-radius: 4px;
  overflow: hidden;
}

#gridiron-lab .gl-rail-tick {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.35);
}

#gridiron-lab .gl-rail-key {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--gl-chalk);
}

#gridiron-lab .gl-rail-gain {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.42);
}

#gridiron-lab .gl-rail-mark {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #fff;
}

#gridiron-lab .gl-rail-mark--new { background: var(--gl-chalk); }

#gridiron-lab .gl-rail-label {
  position: absolute;
  bottom: 3px;
  font-family: var(--gl-font-num);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.9);
  transform: translateX(-50%);
  white-space: nowrap;
  pointer-events: none;
}

#gridiron-lab .gl-rail-caption {
  margin: 6px 0 0;
  font-size: var(--gl-fs-xs);
  color: var(--gl-ink-soft);
}

/* --------------------------------------------------------- barras margen */

#gridiron-lab .gl-bars { margin-top: 14px; display: grid; gap: 6px; }

#gridiron-lab .gl-bars-row {
  display: grid;
  grid-template-columns: 86px 1fr 74px;
  gap: 10px;
  align-items: center;
  font-size: var(--gl-fs-xs);
}

#gridiron-lab .gl-bars-track {
  height: 16px;
  background: var(--gl-surface-3);
  border-radius: 3px;
  overflow: hidden;
}

#gridiron-lab .gl-bars-fill {
  display: block;
  height: 100%;
  background: var(--gl-accent);
  border-radius: 3px;
  transition: width 0.25s ease;
}

#gridiron-lab .gl-bars-row--now .gl-bars-fill { background: var(--gl-chalk); }
#gridiron-lab .gl-bars-row--now { font-weight: 700; }
#gridiron-lab .gl-bars-val { font-family: var(--gl-font-num); text-align: right; }

/* ------------------------------------------------------------------- pie */

#gridiron-lab .gl-foot {
  padding: var(--gl-pad);
  font-size: var(--gl-fs-xs);
  color: var(--gl-ink-soft);
  background: var(--gl-surface-2);
  border-top: 1px solid var(--gl-line);
}

#gridiron-lab .gl-foot summary {
  font-weight: 700;
  color: var(--gl-ink);
  cursor: pointer;
}

#gridiron-lab .gl-foot p { margin: 8px 0 0; }
#gridiron-lab .gl-foot ul { margin: 8px 0 0; padding-left: 1.15em; }
#gridiron-lab .gl-foot li { margin-bottom: 4px; }
#gridiron-lab .gl-disclaimer { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--gl-line); }

/* -------------------------------------------------------------- móvil */

@media (max-width: 760px) {
  #gridiron-lab { --gl-pad: 14px; --gl-gap: 12px; --gl-fs-xl: 1.3rem; margin: 1.75rem 0; }
  #gridiron-lab .gl-grid { grid-template-columns: 1fr; }
  #gridiron-lab .gl-cards { grid-template-columns: 1fr; }
  #gridiron-lab .gl-tabs { flex-wrap: nowrap; overflow-x: auto; }
  #gridiron-lab .gl-tab { flex: 0 0 auto; }
  #gridiron-lab .gl-plot { height: 140px; }
  #gridiron-lab .gl-bars-row { grid-template-columns: 74px 1fr 62px; }
  #gridiron-lab .gl-toolbar select { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  #gridiron-lab *,
  #gridiron-lab *::before,
  #gridiron-lab *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}