/* Página de prueba del rediseño (nuevo_diseno.py). Usa los colores de
   app.css (var(--…)), así el tema oscuro funciona igual que en el sitio. */

body.nv { margin: 0; background: var(--bg); color: var(--text); }
.nv a { color: var(--verde); }
.nv-prueba { background: var(--verde-suave); color: var(--text); font-size: 13px; text-align: center; padding: 6px 16px; }
.nv-prueba a { font-weight: 600; }

.nv-hd { background: var(--card-bg); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; }
.nv-hd-in { max-width: 1240px; margin: 0 auto; padding: 10px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.nv-marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text) !important; }
.nv-mk { width: 34px; height: 34px; border-radius: 8px; background: var(--verde); color: #fff; display: flex; align-items: center; justify-content: center; font: 800 16px 'Manrope', sans-serif; }
.nv-nom { font: 800 21px 'Manrope', sans-serif; letter-spacing: -.01em; }
.nv-nav { display: flex; flex-wrap: wrap; gap: 4px; }
.nv-nav-a { padding: 9px 12px; border-radius: 8px; font-weight: 600; font-size: 15px; color: var(--text-2) !important; text-decoration: none; }
.nv-nav-a:hover { background: var(--verde-suave); }
.nv-nav-a.on { background: var(--verde-suave); color: var(--verde) !important; }
.nv-buscar { position: relative; flex: 0 1 280px; display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); }
.nv-buscar:focus-within { border-color: var(--verde); }
.nv-buscar svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--text-2); stroke-width: 2; }
.nv-buscar input { flex: 1; min-width: 0; border: 0; background: transparent; font: 14px 'Inter', sans-serif; color: var(--text); outline: none; padding: 9px 0; }
.nv-sug { position: absolute; top: calc(100% + 6px); left: 0; right: 0; min-width: 260px; z-index: 30; background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,.12); padding: 6px; max-height: 70vh; overflow-y: auto; }
.nv-sug[hidden] { display: none; }
.nv-sug-t { margin: 6px 8px 4px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.nv-sug-fila { display: flex; justify-content: space-between; gap: 10px; padding: 10px 8px; border-radius: 8px; text-decoration: none; color: var(--text) !important; min-height: 24px; }
.nv-sug-fila span { color: var(--text-2); font-size: 13px; text-align: right; }
.nv-sug-fila:hover, .nv-sug-fila:focus-visible { background: var(--verde-suave); outline: none; }
.nv-hd-acc { flex: 1 1 auto; display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.nv-ico { width: 40px; height: 40px; border: 1px solid var(--border); background: var(--card-bg); border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.nv-btn { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 8px; font-weight: 700; font-size: 14px; text-decoration: none; }
.nv-btn-p { background: var(--verde); color: #fff !important; }
.nv-btn-s { border: 1px solid var(--border); background: var(--card-bg); color: var(--text) !important; }
html[data-cuenta="si"] [data-solo-sin-cuenta] { display: none !important; }

.nv-main { max-width: 1240px; margin: 0 auto; padding: 22px 24px 40px; display: flex; flex-direction: column; gap: 16px; box-sizing: border-box; }
.nv-tit { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.nv-tit h1 { margin: 0; font: 800 34px/1.05 'Manrope', sans-serif; letter-spacing: -.02em; }
.nv-sub { margin: 4px 0 0; color: var(--text-2); font-size: 14.5px; }
.nv-dias, .nv-ligas { display: flex; flex-wrap: wrap; gap: 6px; }
.nv-chip { font: 600 13.5px 'Inter', sans-serif; color: var(--text); background: var(--card-bg); border: 1px solid var(--border); border-radius: 999px; padding: 7px 13px; min-height: 38px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.nv-chip small { font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.nv-chip.on { background: var(--text); color: var(--card-bg); border-color: var(--text); }
.nv-chip.on small { color: inherit; opacity: .75; }
.nv-chip:focus-visible, .nv-tab:focus-visible, .nv-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.nv-cols { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.nv-lista { flex: 999 1 600px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.nv-lado { flex: 1 1 300px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.nv-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }

.nv-tarjeta { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.nv-tarjeta[hidden] { display: none; }
.nv-t-cab { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--text-2); }
.nv-t-cab .local-time { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.nv-t-liga { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nv-sello { font-weight: 700; color: var(--accent); }
.nv-equipos { display: flex; flex-direction: column; gap: 6px; }
.nv-eq { display: flex; align-items: center; gap: 8px; font-size: 16px; min-width: 0; }
.nv-eq img, .nv-escudo { width: 24px; height: 24px; object-fit: contain; flex: none; }
.nv-escudo { border-radius: 50%; background: var(--border); }
.nv-eq b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nv-tarjeta .resumen-rapido { margin: 0; }
.nv-precio > * { margin: 0; }
.nv-ver { align-self: flex-start; font-weight: 700; font-size: 14px; text-decoration: none; padding: 6px 0; }
.nv-ver:hover { text-decoration: underline; }

.nv-caja { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.nv-caja h2 { margin: 0; font: 800 19px 'Manrope', sans-serif; }
.nv-caja p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.nv-caja .nv-btn { align-self: flex-start; }
.nv-lado .ranking-dia { margin: 0; }
.nv-vacio { color: var(--text-2); font-size: 14px; }
.nv-nota { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-2); }

.nv-explorar { padding: 0; overflow: hidden; }
.nv-tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--border); padding: 0 8px; }
.nv-tab { border: 0; background: none; font: 600 15px 'Inter', sans-serif; color: var(--text-2); padding: 13px 16px; min-height: 48px; border-bottom: 3px solid transparent; cursor: pointer; }
.nv-tab.on { color: var(--text); border-bottom-color: var(--verde); }
.nv-panel { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.nv-panel[hidden] { display: none; }
/* Lo que se reusa ya trae su recuadro: adentro de la pestaña sobra. */
.nv-panel > .buscador-datos, .nv-panel > .ranking-dia { border: 0; box-shadow: none; padding: 0; margin: 0; background: none; }

.nv-volver { align-self: flex-start; font-weight: 600; font-size: 14px; text-decoration: none; padding: 4px 0; }
.nv-tit-acc { display: flex; flex-wrap: wrap; gap: 8px; }
.nv-ranking-liga:empty { display: none; }
/* La lista de partidos de la liga: más ancha que en la página actual, para
   que el cuadro «Pasó / Modelo» no se apriete. */
.nv-liga .explora-workspace { grid-template-columns: minmax(280px, 330px) minmax(0, 1fr); margin: 4px 0 0; }
.nv-liga .explora-agenda > h2 { font: 800 19px 'Manrope', sans-serif; }
@media (min-width: 801px) and (max-width: 1100px) {
  .nv-liga .explora-workspace { grid-template-columns: 270px minmax(0, 1fr); }
}
.nv-ranking-liga > * { margin: 0; }

/* Cara a cara en la página de prueba: botones en vez del desplegable. */
.nv-liga .cara-a-cara[data-nv] .cc-modo { display: none; }
.nv-cara-ctl { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 6px 0 4px; }
.nv-seg { display: flex; align-items: center; flex-wrap: wrap; gap: 0; }
.nv-seg-t { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); margin-right: 8px; }
.nv-seg button { font: 600 13px 'Inter', sans-serif; color: var(--text); background: var(--card-bg); border: 1px solid var(--border); padding: 7px 11px; min-height: 36px; cursor: pointer; margin-left: -1px; }
.nv-seg button:first-of-type { border-radius: 8px 0 0 8px; margin-left: 0; }
.nv-seg button:last-of-type { border-radius: 0 8px 8px 0; }
.nv-seg button.on { background: var(--text); color: var(--card-bg); border-color: var(--text); position: relative; }
.nv-seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; position: relative; }
.nv-liga .cc-tabla td { font-size: 17px; }
.nv-liga .cc-tabla td.cc-mas { color: var(--verde); }

/* Filtros de siempre (app.js) al lado de las ligas, y la caja de búsqueda
   de app.js escondida: la de arriba le pasa el texto. */
.nv-filtrar { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 12px; }
.nv-filtrar .nv-ligas { flex: 1 1 420px; min-width: 0; }
.nv-filtrar .screener { flex: 0 1 auto; margin: 0; }
.nv-filtrar .screener[open] { flex-basis: 100%; }
.nv-filtrar .dias { flex: 1 1 auto; margin: 0; }
.nv #search-box { display: none !important; }
.nv-precios > * { margin: 0; }
.nv-precios h2 { font: 800 19px 'Manrope', sans-serif; }

/* Mi historial: con sesión, las apuestas primero y la cuenta abajo; sin
   sesión, primero entrar o crear la cuenta. */
.nv-hist { display: flex; flex-direction: column; gap: 16px; }
.nv-panel-cuenta { padding: 18px; }
.nv-panel-cuenta > h2 { margin: 0; padding: 0; border: 0; font: 800 22px 'Manrope', sans-serif; }
.nv-panel-cuenta > h2::before, .nv-panel-cuenta > h2::after { display: none; }
.nv-panel-cuenta > .subtitle { font-size: 14px; color: var(--text-2); margin: 0; }
html:not([data-cuenta="si"]) .nv-hist #tab-cuenta { order: -1; }

.nv-pie { border-top: 1px solid var(--border); background: var(--card-bg); }
.nv-pie-in { max-width: 1240px; margin: 0 auto; padding: 18px 24px; display: flex; flex-wrap: wrap; gap: 10px 18px; font-size: 13px; color: var(--text-2); }

@media (min-width: 721px) and (max-width: 1100px) {
  .nv-btn-s[data-solo-sin-cuenta] { display: none; }
  .nv-hd-in { flex-wrap: nowrap; gap: 12px; }
  .nv-nav-a { padding: 8px 9px; }
  .nv-buscar { flex: 1 1 140px; }
  .nv-hd-acc { flex: 0 0 auto; }
}
@media (max-width: 720px) {
  .nv-hd-in { padding: 8px 12px; gap: 8px 10px; }
  .nv-hd-acc { flex: 0 0 auto; margin-left: auto; gap: 6px; }
  .nv-nav { order: 3; width: 100%; overflow-x: auto; flex-wrap: nowrap; gap: 2px; }
  .nv-nav-a { flex: none; padding: 8px 10px; font-size: 14px; }
  .nv-buscar { order: 4; flex: 1 1 100%; }
  .nv-sug { min-width: 0; }
  .nv-btn-s[data-solo-sin-cuenta] { display: none; }
  .nv-btn { min-height: 38px; padding: 0 10px; font-size: 13px; }
  .nv-ico { width: 38px; height: 38px; }
  .nv-nom { font-size: 19px; }
  .nv-main { padding: 16px 16px 32px; }
  .nv-tit h1 { font-size: 28px; }
  .nv-dias, .nv-ligas { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
  .nv-chip { flex: none; }
  .nv-rejilla { grid-template-columns: 1fr; }
  .nv-panel { padding: 12px; }
  .nv-tabs { flex-wrap: nowrap; overflow-x: auto; padding: 0 4px; }
  .nv-tab { flex: none; padding: 12px 12px; font-size: 14px; }
}