/* Navegación 2026 (aprobada 30-oct · navegacion.js). Va DESPUÉS de las demás hojas: unifica sin tocarlas.
   · Dos letras: Saira (títulos y cifras grandes) + Montserrat (todo lo demás). La mono se fue: su variable apunta a Montserrat.
   · Botones de una sola familia (estilo iPhone): rojo lleno = la acción principal · gris suave = todo lo demás · texto · rojo suave = peligro.
   · Rieles de pestañas: cápsula gris centrada, el elegido negro se infla con rebote (jelly). Un solo negro por pantalla.
   · Barra lateral retráctil (computador) y la barra de arriba como encabezado de cada sección. */
:root, body { --g-mono: 'Montserrat', system-ui, sans-serif !important; --jelly: cubic-bezier(.34, 1.56, .64, 1); --lado: 232px; }
body { font-variant-numeric: tabular-nums; }
/* La mesa (y la consola y la planilla) NO cambian: conservan su letra de cifras, sus botones y su ancho. */
.mesa-capa, .pl-capa, #msPantalla, #p-cancha, body.es-consola { --g-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace !important; }
body.lado-corto { --lado: 76px; }

/* ── Presionar: todo se aplasta y rebota ── */
body:not(.con-mesa):not(.es-consola):not(:has(#p-cancha.active)) .btn, body:not(.con-mesa):not(.es-consola):not(:has(#p-cancha.active)) .nav-btn, body:not(.con-mesa):not(.es-consola):not(:has(#p-cancha.active)) .lado a, body:not(.con-mesa):not(.es-consola):not(:has(#p-cancha.active)) .lado button, body:not(.con-mesa):not(.es-consola):not(:has(#p-cancha.active)) .tema-btn, body:not(.con-mesa):not(.es-consola):not(:has(#p-cancha.active)) #btnAdmin, body:not(.con-mesa):not(.es-consola):not(:has(#p-cancha.active)) .ju-tj, body:not(.con-mesa):not(.es-consola):not(:has(#p-cancha.active)) .ju-selb, body:not(.con-mesa):not(.es-consola):not(:has(#p-cancha.active)) .tj-nueva { transition: transform .45s var(--jelly), background .2s, color .2s, border-color .2s; }
body:not(.con-mesa):not(.es-consola):not(:has(#p-cancha.active)) .btn:active, body:not(.con-mesa):not(.es-consola):not(:has(#p-cancha.active)) .nav-btn:active, body:not(.con-mesa):not(.es-consola):not(:has(#p-cancha.active)) .lado a:active, body:not(.con-mesa):not(.es-consola):not(:has(#p-cancha.active)) .lado button:active, body:not(.con-mesa):not(.es-consola):not(:has(#p-cancha.active)) .tema-btn:active, body:not(.con-mesa):not(.es-consola):not(:has(#p-cancha.active)) #btnAdmin:active, body:not(.con-mesa):not(.es-consola):not(:has(#p-cancha.active)) .ju-tj:active, body:not(.con-mesa):not(.es-consola):not(:has(#p-cancha.active)) .ju-selb:active, body:not(.con-mesa):not(.es-consola):not(:has(#p-cancha.active)) .tj-nueva:active { transform: scale(.93); transition-duration: .08s; }

/* ── Botones: una familia ── */
body:not(.con-mesa):not(.es-consola):not(:has(#p-cancha.active)) .btn { border: 0 !important; border-radius: 12px !important; min-height: 44px; padding: 0 18px; font: 700 14px var(--g-sans) !important; letter-spacing: 0 !important; text-transform: none !important; box-shadow: none !important; }
body:not(.con-mesa):not(.es-consola):not(:has(#p-cancha.active)) .btn-sm { min-height: 36px; border-radius: 10px !important; padding: 0 14px; font-size: 13px !important; }
body:not(.con-mesa):not(.es-consola):not(:has(#p-cancha.active)) .btn-primario { background: var(--marca) !important; color: #fff !important; }
body:not(.con-mesa):not(.es-consola):not(:has(#p-cancha.active)) .btn-secundario, body:not(.con-mesa):not(.es-consola):not(:has(#p-cancha.active)) .btn-plano, body:not(.con-mesa):not(.es-consola):not(:has(#p-cancha.active)) .btn-claro { background: color-mix(in srgb, var(--tinta) 8%, transparent) !important; color: var(--tinta) !important; }
body:not(.con-mesa):not(.es-consola):not(:has(#p-cancha.active)) .btn-secundario:hover, body:not(.con-mesa):not(.es-consola):not(:has(#p-cancha.active)) .btn-plano:hover, body:not(.con-mesa):not(.es-consola):not(:has(#p-cancha.active)) .btn-claro:hover { background: color-mix(in srgb, var(--tinta) 13%, transparent) !important; }
body:not(.con-mesa):not(.es-consola):not(:has(#p-cancha.active)) .btn-fan { background: transparent !important; color: var(--marca) !important; }
body:not(.con-mesa):not(.es-consola):not(:has(#p-cancha.active)) .btn-peligro { background: color-mix(in srgb, #dc2626 10%, transparent) !important; color: #dc2626 !important; }
body:not(.con-mesa):not(.es-consola):not(:has(#p-cancha.active)) .btn.btn-mas { padding: 0 18px !important; gap: 6px; }
body:not(.con-mesa):not(.es-consola):not(:has(#p-cancha.active)) .btn.btn-mas .mas { background: none !important; width: auto !important; height: auto !important; font: 700 18px/1 var(--g-sans); margin: 0 !important; }
body:not(.con-mesa):not(.es-consola):not(:has(#p-cancha.active)) .btn.btn-mas .mas::before, body:not(.con-mesa):not(.es-consola):not(:has(#p-cancha.active)) .btn.btn-mas::after { display: none !important; }

/* ── Campos estilo iPhone (en toda la app y en Entrar) ── */
.campo input:not([type=checkbox]):not([type=radio]), .campo select, .campo textarea, .acc-form input[type=text], .acc-form input[type=password], .acc-form input[type=email] {
  background: color-mix(in srgb, var(--tinta) 6%, transparent) !important; border: 1.5px solid transparent !important; border-radius: 12px !important;
  min-height: 48px; padding: 0 14px !important; font: 500 15px var(--g-sans) !important; box-shadow: none !important; transition: border-color .2s, background .2s; }
.campo textarea { padding: 12px 14px !important; }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--tinta) !important; background: var(--papel) !important; outline: none; }
.campo label { font: 700 13px var(--g-sans) !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--tinta) !important; }

/* ── Rieles de pestañas (torneo, jornadas, jornada, días del horario, Entrar) ── */
.tn-tabs, .jor-tabs, .ev-tabs:not([hidden]), .tn-dias {
  display: flex !important; width: fit-content; max-width: 100%; margin-inline: auto; background: var(--hundido); border-radius: 999px;
  padding: 6px !important; gap: 4px !important; border-bottom: 0 !important; overflow-x: auto; scrollbar-width: none; }
.tn-tabs .nav-btn, .jor-tabs .nav-btn, .ev-tabs .nav-btn, .tn-dias .tn-dia {
  flex: none; border: 0 !important; border-radius: 999px !important; background: transparent !important; padding: 9px 16px !important;
  transition: transform .55s var(--jelly), background .25s, color .25s, margin .55s var(--jelly) !important; }
.tn-tabs .nav-btn::after, .jor-tabs .nav-btn::after, .ev-tabs .nav-btn::after, .tn-dias .tn-dia::after { display: none !important; }
.tn-tabs .nav-btn.active, .jor-tabs .nav-btn.active, .ev-tabs .nav-btn.active, .ev-tabs .nav-btn[aria-selected="true"], .tn-dias .tn-dia.on {
  background: var(--tinta) !important; color: var(--papel, #fff) !important; transform: scale(1.12); margin: 0 6px; }
.tn-dias .tn-dia.on small { color: rgba(255, 255, 255, .7) !important; }
.jelly-i { transform: translateX(-5px); } .jelly-d { transform: translateX(5px); }
/* El selector chico de Partidos (Lista · Por cancha | Todos · Faltan · Jugados): el mismo riel, más pequeño */
.hz-ctl .seg { background: var(--hundido) !important; border-radius: 999px !important; padding: 4px !important; gap: 2px !important; }
.hz-ctl .seg > button { border: 0 !important; border-radius: 999px !important; padding: 0 12px !important; min-height: 32px !important; transition: transform .55s var(--jelly), background .25s, color .25s !important; }
.hz-ctl .seg > button[aria-pressed="true"] { background: var(--papel) !important; color: var(--tinta) !important; box-shadow: 0 1px 3px rgba(10, 20, 38, .14) !important; }
/* Entrar / Crear cuenta */
.acc-tabs { display: flex !important; width: 100%; background: var(--hundido); border-radius: 999px; padding: 5px; gap: 4px; border: 0 !important; }
.acc-tab { flex: 1; border: 0 !important; border-radius: 999px !important; background: transparent !important; padding: 10px 14px !important; font: 700 14px var(--g-sans) !important;
  color: var(--tinta-2) !important; transition: transform .55s var(--jelly), background .25s, color .25s; }
.acc-tab.active { background: var(--tinta) !important; color: var(--papel, #fff) !important; transform: scale(1.04); }
.acc-tab::after { display: none !important; }
.acc-op span { border-radius: 14px !important; }
.acc-entrar { width: 100%; min-height: 50px; font-size: 15px !important; }
.acc-tit { font: italic 900 30px/1.05 var(--g-disp, 'Saira') !important; text-transform: uppercase; }

/* ── Barra lateral (computador) ── */
.lado, .nav-miga, .nav-acc { display: none; }
@media (min-width: 900px) {
  body.is-admin:not(.es-landing):not(.con-mesa):not(:has(#msPantalla, #p-cancha.active)) { padding-left: var(--lado); transition: padding-left .45s var(--jelly); }
  body.is-admin:not(.es-landing):not(.con-mesa):not(:has(#msPantalla, #p-cancha.active)) .barra .marca, body.is-admin:not(.es-landing):not(.con-mesa):not(:has(#msPantalla, #p-cancha.active)) .barra .nav-app, body.is-admin:not(.es-landing):not(.con-mesa):not(:has(#msPantalla, #p-cancha.active)) .barra .g-idioma { display: none; }
  body.is-admin:not(.es-landing):not(.con-mesa):not(:has(#msPantalla, #p-cancha.active)) .lado { display: flex; }
  body.is-admin:not(.es-landing):not(.con-mesa):not(:has(#msPantalla, #p-cancha.active)) .barra-in { height: 76px !important; padding: 0 32px !important; }
  body.is-admin:not(.es-landing):not(.con-mesa):not(:has(#msPantalla, #p-cancha.active)) .nav-acc { display: flex; }
  body.is-admin:not(.es-landing):not(.con-mesa):not(:has(#msPantalla, #p-cancha.active)) .nav-copiado, body.is-admin:not(.es-landing):not(.con-mesa):not(:has(#msPantalla, #p-cancha.active)) .tn-volver { display: none !important; }

  .lado { position: fixed; z-index: 60; inset: 0 auto 0 0; width: var(--lado); flex-direction: column; gap: 4px; padding: 18px 12px;
    background: var(--papel, #fff); border-right: 1px solid var(--linea); transition: width .45s var(--jelly); overflow: hidden; }
  .lado-cab { display: flex; align-items: center; margin: 2px 6px 22px; min-height: 34px; }
  .lado-cab img { height: 28px; width: auto; }
  .lado-cab .g { display: none; height: 30px; }
  .lado a:not(.solo-admin), body.nivel-admin .lado a.solo-admin { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--tinta-2);
    text-decoration: none; font: 700 14px var(--g-sans); white-space: nowrap; }
  .lado a:hover { background: var(--hundido); color: var(--tinta); }
  .lado a.activo { background: var(--hundido); color: var(--tinta); }   /* suave: el negro de la pantalla es el del riel */
  .lado svg { width: 20px; height: 20px; flex: none; }
  .lado-sep { flex: 1; }
  .lado-ayuda { display: flex; gap: 8px; border-top: 1px solid var(--linea); padding-top: 12px; }
  .lado-ayuda button, .lado-plegar { display: flex; align-items: center; gap: 10px; border: 1px solid var(--linea); background: var(--papel, #fff); color: var(--tinta);
    border-radius: 10px; padding: 9px 11px; font: 700 13px var(--g-sans); white-space: nowrap; cursor: pointer; }
  .lado-ayuda .soporte { flex: 1; min-width: 0; }
  .lado-ayuda .soporte img { width: 26px; height: 30px; object-fit: contain; flex: none; }
  .lado-plegar { margin-top: 8px; justify-content: center; color: var(--tinta-2); font-weight: 600; font-size: 12px; }
  .lado-plegar svg { transition: transform .45s var(--jelly); }
  /* Retraída: solo íconos */
  body.lado-corto .lado { padding: 18px 10px; }
  body.lado-corto .lado-cab { justify-content: center; margin-inline: 0; }
  body.lado-corto .lado-cab .w, body.lado-corto .lado .tx { display: none !important; }
  body.lado-corto .lado-cab .g { display: block; }
  body.lado-corto .lado a { justify-content: center; padding: 11px 0; }
  body.lado-corto .lado-ayuda { flex-direction: column; align-items: center; }
  body.lado-corto .lado-ayuda button { justify-content: center; padding: 9px; width: 46px; }
  body.lado-corto .lado-plegar svg { transform: rotate(180deg); }
}

/* ── Barra de arriba: título de la sección (y su padre) + acciones ── */
body.is-admin:not(.es-landing):not(.con-mesa):not(:has(#msPantalla, #p-cancha.active)) .nav-miga { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.nav-miga .pad { font: 600 13px var(--g-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); text-decoration: none; white-space: nowrap; }
.nav-miga .pad::after { content: ' ›'; }
.nav-miga .pad:hover { color: var(--tinta); }
.nav-miga b { font: italic 900 26px/1 var(--g-disp, 'Saira'); text-transform: uppercase; color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-acc { gap: 10px; align-items: center; margin-right: 6px; }
/* El título de la página ya está arriba (no el del torneo, que va junto a su escudo, ni el saludo de Mi club) */
body.is-admin:not(.es-landing):not(.con-mesa):not(:has(#msPantalla, #p-cancha.active)) .pag-cab:not(.tn-cab) > div > .pag-tit { display: none; }
@media (min-width: 900px) { body.is-admin:not(.es-landing):not(.con-mesa):not(:has(#msPantalla, #p-cancha.active)) .pag-cab:not(.tn-cab):not(:has(.rot)):not(:has(.btn:not(.nav-copiado))) { display: none; } }
/* Celular: arriba el título (como en iPhone) en vez del logo; dentro de un torneo o jornada, «‹ Jornadas» para volver */
@media (max-width: 899px) {
  body.is-admin:not(.es-landing):not(.con-mesa):not(:has(#msPantalla, #p-cancha.active)) .barra .marca, body.is-admin:not(.es-landing):not(.con-mesa):not(:has(#msPantalla, #p-cancha.active)) .tn-volver { display: none !important; }
  .nav-miga b { font-size: 24px; }
  .nav-miga.con-padre b { display: none; }
  .nav-miga.con-padre .pad { font: 700 16px var(--g-sans); letter-spacing: 0; text-transform: none; color: var(--tinta); }
  .nav-miga.con-padre .pad::before { content: '‹ '; font-size: 20px; } .nav-miga.con-padre .pad::after { content: none; }
  /* La barra de abajo: lo elegido en oscuro, sin rayita de color */
  .ap-tabbar button.on::before { display: none !important; }
}

/* ── Encabezado del torneo: escudo a la izquierda; rótulo, nombre y estado a su lado; botones arriba ── */
.tn-cab { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "esc kick kick" "esc tit tit" "esc est btn"; column-gap: 18px; row-gap: 6px; align-items: center; }
.tn-cab .tn-quien { display: contents; }
.tn-cab .tn-esc { grid-area: esc; align-self: center; width: 88px !important; height: 88px !important; font-size: 26px; }
.tn-cab .tn-kick { grid-area: kick; }
.tn-cab .pag-tit { grid-area: tit; margin: 0; }
.tn-cab .tn-estado { grid-area: est; }
.tn-cab .tn-btns { grid-area: btn; display: flex; gap: 10px; }
@media (max-width: 760px) {
  .tn-cab { grid-template-columns: auto minmax(0, 1fr) !important; grid-template-areas: "esc kick" "tit tit" "est est" "btn btn" !important; column-gap: 12px; }
  .tn-cab .tn-esc { width: 40px !important; height: 40px !important; font-size: 14px; }
  .tn-cab .pag-tit { font-size: 30px !important; line-height: 1.02; }
  .tn-cab .tn-btns { display: grid !important; grid-template-columns: 1fr 1fr; }
  .tn-cab .tn-btns:has(> :only-child) { grid-template-columns: 1fr; }
  .tn-tabs, .jor-tabs, .ev-tabs:not([hidden]), .tn-dias { width: 100%; justify-content: flex-start; scroll-snap-type: x proximity; }
  .tn-tabs .nav-btn, .jor-tabs .nav-btn, .ev-tabs .nav-btn, .tn-dias .tn-dia { padding: 8px 12px !important; font-size: 10px !important; letter-spacing: .08em !important; scroll-snap-align: center; }
  .tn-tabs .nav-btn.active, .jor-tabs .nav-btn.active, .ev-tabs .nav-btn.active { transform: scale(1.06); margin: 0 3px; }
  .jor-tabs .nav-btn { flex: 1 1 0; }
}

/* ── Jornadas y Torneos: 3 columnas iguales, la primera es «+» con Elso (tarjetaMas, tablero.js) ── */
#jornadasBody .tjs { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-auto-rows: 1fr; gap: 16px !important; }
.tj-nueva { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 100%; padding: 18px 12px; cursor: pointer;
  border: 2px dashed color-mix(in srgb, var(--tinta) 38%, transparent); border-radius: 10px; background: var(--papel); color: var(--tinta); font: 800 15px var(--g-sans); }
.tj-nueva:hover { border-color: var(--tinta); }
.tj-nueva .elso-pie { --h: 128px !important; }
.tj-nueva > i { width: 40px; height: 40px; border-radius: 50%; background: var(--marca); color: #fff; display: grid; place-items: center; font: 700 26px/1 var(--g-sans); font-style: normal; }
.tj-nueva > span { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.tj-nueva small { font: 500 12.5px var(--g-sans); color: var(--tinta-2); text-align: center; max-width: 26ch; }
@media (max-width: 900px) {
  #jornadasBody .tjs { grid-template-columns: minmax(0, 1fr) !important; }
  .tj-nueva { flex-direction: row; justify-content: flex-start; text-align: left; gap: 14px; padding: 12px 16px; min-height: 0; }
  .tj-nueva .elso-pie { --h: 64px !important; }
  .tj-nueva > i { order: 3; margin-left: auto; width: 36px; height: 36px; font-size: 22px; flex: none; }
  .tj-nueva > span { align-items: flex-start; gap: 2px; }
  .tj-nueva small { text-align: left; font-size: 12px; }
  #jornadasBody .tj-por { height: 96px !important; padding: 12px 14px !important; }
  .ju-barra { grid-template-columns: 1fr 1fr !important; }
  .ju-barra .ju-sel:first-child { grid-column: auto !important; }
}

/* ── Todo al ancho de la página ── */
#torneoBody .tn-cue > .tarjeta { max-width: none !important; }
.marco-cue:has(#p-staff.active) { max-width: 1760px !important; padding: 0 28px !important; }
#staffBody { max-width: none !important; }

/* ── Staff · «¿Quién hace qué?»: título de sección y tres tarjetas iguales con Elso grande ── */
.st-roles { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; overflow: visible !important; }
.st-roles .st-elso { grid-column: 1 / -1; background: none !important; border: 0 !important; padding: 0 !important; display: block !important; }
.st-roles .st-quien { font: 800 20px var(--g-sans) !important; }
.st-rol { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; gap: 14px !important;
  background: var(--papel) !important; border: 1px solid var(--linea) !important; border-radius: 20px !important; padding: 28px 24px 26px !important; }
.st-rol > span:last-child { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.st-rol b { font: 800 18px var(--g-sans) !important; }
.st-rol small { font: 500 14px/1.45 var(--g-sans) !important; color: var(--tinta-2) !important; max-width: 30ch; }
.st-rol-elso { height: auto !important; width: auto !important; justify-content: center !important; }
.st-rol-elso .elso-pie { --h: 160px !important; }
@media (max-width: 760px) {
  .st-roles { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .st-rol { flex-direction: row !important; text-align: left !important; padding: 16px !important; }
  .st-rol > span:last-child { align-items: flex-start; }
  .st-rol-elso { width: 120px !important; flex: none !important; }
  .st-rol-elso .elso-pie { --h: 96px !important; }
}

/* ── Pantallas vacías: Elso grande ── */
.vacio-elso img { height: 210px !important; width: auto !important; max-width: 100% !important; }
.vacio-elso { padding-block: 36px !important; }
@media (max-width: 760px) { .vacio-elso img { height: 160px !important; } }

/* ── Fila de partido: la columna del centro mide lo que lleva («● en vivo · Cancha 2» no se monta sobre los escudos) ── */
.fp.fp-calma { grid-template-columns: minmax(0, 1fr) minmax(78px, auto) minmax(0, 1fr) !important; }
.fp-calma .fp-c { padding-inline: 4px; }

/* ── Ventanas de Soporte y Reportar un error ── */
.nav-velo { position: fixed; inset: 0; z-index: 200; background: rgba(10, 20, 38, .45); display: none; place-items: center; padding: 16px; }
.nav-velo.abierto { display: grid; }
.nav-v { width: min(440px, 100%); background: var(--papel, #fff); color: var(--tinta); border-radius: 18px; overflow: hidden; animation: nav-entra .5s var(--jelly); }
@keyframes nav-entra { from { transform: scale(.7); } to { transform: scale(1); } }
.nav-vcab { display: flex; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--linea); }
.nav-vcab h3 { flex: 1; margin: 0; font: 700 17px var(--g-sans); text-transform: none; letter-spacing: 0; }
.nav-vcab button { border: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--hundido); color: var(--tinta); cursor: pointer; }
.nav-vcu { padding: 20px; }
.nav-vcu > img { display: block; width: 110px; margin: 0 auto 10px; }
.nav-vcu p { text-align: center; color: var(--tinta-2); margin: 0 0 16px; font-size: 13.5px; }
.nav-vcu .nav-adj { text-align: left; font-size: 11.5px; margin: 8px 0 0; }
.nav-op { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.nav-op a { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 8px; border: 1px solid var(--linea); border-radius: 14px; background: var(--hundido);
  color: var(--tinta); text-decoration: none; transition: transform .45s var(--jelly); }
.nav-op a:active { transform: scale(.93); }
.nav-op svg { width: 28px; height: 28px; }
.nav-op small { font: 500 11px var(--g-sans); color: var(--tinta-2); }
.nav-vcu textarea { width: 100%; min-height: 110px; border-radius: 12px; border: 1px solid var(--linea); background: var(--hundido); color: var(--tinta); padding: 12px; font: inherit; }
.nav-vpie { padding: 14px 20px; border-top: 1px solid var(--linea); display: flex; justify-content: flex-end; }