/* =====================================================================
   Ticopa Hub · rediseño «Marcador» (r17) · 2) Estructura y navegación
   Celular: barra de arriba compacta + barra de navegación abajo.
   Computadora (≥1024 px): menú lateral fijo de 252 px + barra de arriba con buscador ancho.
   ===================================================================== */

/* ---------- Barra de arriba ---------- */
body.marcador .navbar {
  background: rgba(11, 10, 36, .92) !important;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea) !important;
  box-shadow: none !important;
  padding: 8px 0 !important;
}
body.marcador .logo-text { font: 800 24px/1 var(--f-display) !important; letter-spacing: .02em !important; color: var(--texto) !important; text-shadow: none !important; }
body.marcador .logo-sub { font: 600 11px var(--f-datos) !important; letter-spacing: .08em !important; color: var(--tenue) !important; }
body.marcador .logo-space img { height: 38px !important; border-radius: 0 !important; }
body.marcador #input-buscador {
  background: var(--sup-1) !important; border: 1px solid var(--linea) !important; border-radius: var(--r-m) !important;
  color: var(--texto) !important; height: 44px; padding: 0 14px 0 40px !important; font: 500 15px var(--f-texto) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239792c8' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: 12px center !important; background-size: 18px !important;
}
body.marcador #input-buscador::placeholder { color: var(--tenue); }
body.marcador #btn-world-cabecera {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; justify-content: center; padding: 0 12px;
  border-radius: 22px; color: var(--texto) !important; text-decoration: none !important;
  background: linear-gradient(120deg, rgba(115, 68, 240, .55), rgba(255, 45, 85, .4)) !important; border: 1px solid var(--violeta) !important;
  font: 700 15px var(--f-datos) !important; letter-spacing: 0 !important;
}
body.marcador #btn-world-cabecera .bw-largo { text-transform: none; }
body.marcador #btn-world-cabecera .bw-sub { font: 600 12px var(--f-datos); color: var(--suave); }
body.marcador #btn-portal-sesion, body.marcador .btn-cuenta-cabecera {
  min-height: 44px; border-radius: 22px !important; background: var(--violeta-boton) !important; color: #fff !important; border: 0 !important;
  font: 700 14px var(--f-datos) !important; letter-spacing: .01em !important; padding: 0 16px !important; box-shadow: none !important; text-transform: none;
}
body.marcador #mobileToggle, body.marcador .btn-lupa-cabecera {
  min-width: 44px; min-height: 44px; border-radius: var(--r-m) !important; background: transparent !important; color: var(--suave) !important;
  border: 1px solid var(--linea) !important; font: 700 13px var(--f-datos) !important; align-items: center; justify-content: center; gap: 6px; padding: 0 10px !important;
}
body.marcador #mobileToggle:hover, body.marcador .btn-lupa-cabecera:hover { background: var(--sup-2) !important; color: var(--texto) !important; }
body.marcador .nav-ticker-wrapper { background: var(--sup-1) !important; border: 1px solid var(--linea) !important; border-radius: var(--r-m) !important; }

/* ---------- Barra de navegación de abajo (celular) ---------- */
.marcador-nav-inf {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: rgba(14, 12, 44, .97); border-top: 1px solid var(--linea);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.marcador-nav-inf a { display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 52px; color: var(--tenue); font: 600 12px var(--f-datos); text-decoration: none; border-radius: var(--r-m); }
.marcador-nav-inf a[aria-current] { color: var(--texto); }
.marcador-nav-inf a[aria-current] svg { color: var(--rojo); }
.marcador-nav-inf a:active { background: var(--sup-2); }
body.marcador { padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important; }
body.marcador.portal-activo .marcador-nav-inf, body.marcador.portal-activo .marcador-riel { display: none !important; }
body.marcador #stream-flotante { bottom: calc(80px + env(safe-area-inset-bottom)) !important; }

/* ---------- Menú lateral (computadora) ---------- */
.marcador-riel { display: none; }
.marcador-riel a { text-decoration: none; }
.marcador-riel .marca { display: flex; align-items: center; gap: 12px; color: var(--texto); padding: 0 8px; }
.marcador-riel .marca img { width: 44px; height: 44px; }
.marcador-riel .marca b { font: 800 26px/1 var(--f-display); display: block; }
.marcador-riel .marca small { font: 600 12px var(--f-datos); color: var(--tenue); }
.marcador-riel nav { display: grid; gap: 2px; }
.marcador-riel nav p { font: 600 13px var(--f-datos); color: var(--tenue); padding: 12px 12px 4px; margin: 0; }
.marcador-riel nav a, .marcador-riel nav button {
  display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 12px; width: 100%;
  border-radius: var(--r-m); color: var(--suave); font: 600 15px var(--f-texto); background: none; border: 0; cursor: pointer; text-align: left;
}
.marcador-riel nav a:hover, .marcador-riel nav button:hover { background: var(--sup-1); color: var(--texto); }
.marcador-riel nav a[aria-current] { background: var(--sup-2); color: var(--texto); box-shadow: inset 3px 0 0 var(--rojo); }
.marcador-riel nav a > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.marcador-riel nav a.torneo { font-size: 14px; min-height: 38px; }
.marcador-riel nav a.torneo img { width: 22px; height: 22px; object-fit: contain; border-radius: 4px; background: var(--sup-2); flex: none; }
.marcador-riel nav a .etq-3d { margin-left: auto; font: 700 11px/18px var(--f-datos); font-style: normal; background: var(--rojo); color: var(--tinta); padding: 0 7px; border-radius: 9px; }
.marcador-riel nav a.externo > span { display: grid; line-height: 1.15; }
.marcador-riel nav a.externo b { font-weight: 600; color: var(--texto); }
.marcador-riel nav a.externo small { font: 500 12px var(--f-datos); color: var(--tenue); overflow: hidden; text-overflow: ellipsis; }
.marcador-riel nav a.externo > svg:last-child { margin-left: auto; color: var(--tenue); flex: none; }
.marcador-riel svg { flex: none; }

@media (min-width: 1024px) {
  body.marcador .marcador-nav-inf { display: none; }
  body.marcador { padding-bottom: 0 !important; padding-left: 252px !important; }
  body.marcador .marcador-riel {
    display: flex; flex-direction: column; gap: 20px;
    position: fixed; top: 0; left: 0; bottom: 0; width: 252px; z-index: 1001; overflow-y: auto; overscroll-behavior: contain;
    padding: 24px 16px; background: linear-gradient(180deg, #110f33, #0d0c2b); border-right: 1px solid var(--linea);
    scrollbar-width: thin;
  }
  body.marcador .navbar .logo-space { display: none !important; }
  body.marcador .navbar { padding: 12px 0 !important; }
  body.marcador .nav-container { display: flex !important; align-items: center; gap: 14px; max-width: none !important; padding-inline: 32px !important; }
  body.marcador .nav-actions.search-container { flex: 1 1 auto; justify-content: flex-end; flex-wrap: nowrap; }
  body.marcador #input-buscador { order: -1; flex: 0 1 460px !important; width: auto !important; max-width: 460px !important; margin-right: auto; display: block !important; }
  body.marcador .nav-ticker-wrapper { flex: 0 1 380px; order: 0; }
  body.marcador #mobileToggle, body.marcador .btn-lupa-cabecera { display: none !important; }
  body.marcador .main-container, body.marcador .hero-section { max-width: 1240px !important; padding-inline: 32px !important; }
  body.marcador #search-results { left: 32px !important; right: auto !important; width: min(560px, 60vw) !important; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  body.marcador .nav-container { flex-wrap: wrap !important; }
  body.marcador .nav-ticker-wrapper { flex: 1 0 100%; order: 5; }
}

/* Tablet (561-1279): «Partidos por revisar» no se encoge ni se encima con la cabecera; el buscador cede el espacio. */
@media (min-width: 561px) and (max-width: 1279px) {
  body.marcador .ticopa-review-shortcuts { flex: 0 0 auto; min-width: max-content; }
  body.marcador .ticopa-review-shortcuts .tar-header-button { width: auto; max-width: none; white-space: nowrap; padding: 8px 12px; }
  body.marcador #btn-world-cabecera, body.marcador #btn-portal-sesion { flex: 0 0 auto; white-space: nowrap; }
  body.marcador #btn-world-cabecera .bw-sub { display: none; }
  body.marcador .logo-text-box { display: none; }
  body.marcador #input-buscador { flex: 1 1 44px !important; min-width: 44px !important; width: auto !important; }
}

/* ---------- Barra de arriba en celular ---------- */
@media (max-width: 1023px) {
  body.marcador #btn-world-cabecera .bw-sub { display: none; }
}
/* Cabecera sin saltos: la barra recuerda el alto que tuvo la ultima vez (lo guarda 08-marcador-arranque.js) y lo reserva desde el primer cuadro; asi los botones que llegan despues
   (Partidos por revisar, cambio de modo) llenan un espacio que ya estaba y el inicio no baja. */
@media (max-width: 1279px) { body.marcador .navbar { box-sizing: border-box; min-height: var(--cab-min, 0px); } }
/* 1024-1279 px (menu lateral + barra de arriba): los botones de la barra pasan a una segunda fila en vez de salirse por la izquierda y quedar tapados por el menu (ES | EN desaparecia). */
@media (min-width: 1024px) and (max-width: 1279px) {
  body.marcador .nav-actions.search-container { flex-wrap: wrap !important; row-gap: 8px; min-width: 0; }
}
/* Tablet (561-1023 px): el logo queda a la izquierda y los botones se reparten en filas dentro de su propio espacio (antes iban todos en una sola fila y se encimaban: «Partidos por revisar», ES|EN, mundo, sesion). */
@media (min-width: 561px) and (max-width: 1023px) {
  body.marcador .nav-container { display: flex !important; flex-wrap: wrap !important; align-items: flex-start !important; gap: 12px !important; }
  body.marcador .nav-container .logo-space { flex: none; }
  body.marcador .nav-actions.search-container { flex: 1 1 0 !important; min-width: 0 !important; display: flex !important; flex-wrap: wrap !important; justify-content: flex-end; align-items: center; gap: 8px !important; }
  body.marcador .nav-actions > * { min-width: 0; max-width: 100%; position: static !important; }
  body.marcador .nav-actions #ticopa-review-shortcuts { flex: 1 1 100%; order: 8; display: flex; justify-content: flex-end; }
  body.marcador .nav-actions .tar-header-button { white-space: nowrap; }
  body.marcador .nav-actions .ticopa-account-mode { order: 9; flex: 1 1 100%; width: auto; }
  body.marcador #input-buscador { order: 10; flex: 1 1 100% !important; width: 100% !important; max-width: none !important; }
  body.marcador #mobileToggle { order: 3; }
  body.marcador #mobileToggle .mc-texto-menu { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* la palabra «Menu» se salia del boton y quedaba cortada: solo queda el icono (el lector de pantalla la sigue leyendo) */
  body.marcador #mobileToggle { position: relative; overflow: hidden; }
  body.marcador #btn-portal-sesion, body.marcador #btn-world-cabecera { white-space: nowrap; }
  body.marcador .nav-ticker-wrapper { flex: 1 0 100% !important; order: 5; }
}
@media (max-width: 560px) {
  /* Fila de arriba: logo · ES|EN · (espacio) · mundo · lupa · cuenta · menú. El selector tiene su propia celda (antes se encimaba con el mundo). */
  body.marcador .nav-container { grid-template-columns: auto auto minmax(0, 1fr) auto auto auto auto !important; grid-template-areas: "logo idioma . world lupa cuenta menu" "review review review review review review review" "accountmode accountmode accountmode accountmode accountmode accountmode accountmode" "buscar buscar buscar buscar buscar buscar buscar" "ticker ticker ticker ticker ticker ticker ticker" !important; gap: 4px !important; align-items: center; }
  body.marcador .logo-text-box .logo-sub { display: none; }
  body.marcador [data-ticopa-idioma] { grid-area: idioma; display: block; }
  body.marcador .ticopa-idioma { height: 36px; padding: 2px; gap: 2px; box-sizing: border-box; }
  body.marcador .ticopa-idioma button { min-width: 28px; min-height: 30px; padding: 0 5px; font-size: 11px; line-height: 1; }
  body.marcador .ticopa-idioma .ticopa-ui-icon { display: none !important; }
  body.marcador #btn-world-cabecera { padding: 0 !important; width: 40px; min-width: 40px; min-height: 40px; height: 40px; }
  body.marcador #btn-world-cabecera .bw-largo, body.marcador #btn-world-cabecera .bw-corto { display: none !important; }
  /* Botón de sesión: tamaño de botón normal (mismo alto que los demás). «COMPROBANDO SESIÓN…» y «INICIAR SESIÓN» caben en dos líneas chicas. */
  body.marcador #btn-portal-sesion { justify-self: end !important; width: 90px; max-width: 90px; height: 40px; min-height: 40px; padding: 0 6px !important; font-size: 11px !important; line-height: 1.1 !important; white-space: normal !important; text-align: center; overflow: hidden; }
  body.marcador #btn-portal-sesion .ticopa-ui-icon { display: none !important; }
  body.marcador #mobileToggle { width: 40px; min-width: 40px; height: 40px; min-height: 40px; padding: 0 !important; }
  body.marcador .btn-lupa-cabecera { width: 40px; min-width: 40px; height: 40px; min-height: 40px; }
  body.marcador #btn-world-cabecera { grid-area: world; } body.marcador #btn-portal-sesion { grid-area: cuenta; } body.marcador #btn-lupa { grid-area: lupa; } body.marcador #mobileToggle { grid-area: menu; }
}

/* ---------- Menú «Más opciones» (el de siempre, con estilo nuevo) ---------- */
body.marcador .sidebar-menu { background: #110f33 !important; border-left: 1px solid var(--linea) !important; box-shadow: -20px 0 50px rgba(5, 4, 20, .7) !important; z-index: 10001 !important; }
body.marcador .sidebar-menu h2 { font: 800 26px var(--f-display) !important; color: var(--texto) !important; letter-spacing: .02em; }
body.marcador .sidebar-menu > div:first-child { border-bottom-color: var(--linea) !important; }
body.marcador .sidebar-menu li a { text-transform: none !important; font: 600 15px var(--f-texto) !important; border-radius: var(--r-m); border-bottom: 0 !important; color: var(--suave) !important; }
body.marcador .sidebar-menu li a:hover { background: var(--sup-2) !important; color: var(--texto) !important; border-left: 0 !important; padding-left: 10px !important; }
body.marcador .sidebar-menu li[style*="border-top"] { border-top-color: var(--linea) !important; }
body.marcador .sidebar-menu strong { font-family: var(--f-datos) !important; color: var(--tenue) !important; font-size: 13px !important; }
body.marcador #closeSidebar { min-width: 44px; min-height: 44px; }

/* Insignia «En vivo / Reconectando» y avisos fijos: encima de la barra de abajo en celular */
body.marcador > [style*="position: fixed"][style*="bottom: 12px"] { font-family: var(--f-datos) !important; background: var(--sup-2) !important; border: 1px solid var(--linea) !important; }
@media (max-width: 1023px) {
  body.marcador > [style*="position: fixed"][style*="bottom: 12px"] { bottom: calc(78px + env(safe-area-inset-bottom)) !important; }
  body.marcador > [style*="position: fixed"][style*="bottom: 54px"] { bottom: calc(120px + env(safe-area-inset-bottom)) !important; }
}

/* ---------- r17 arreglos (30/10): «Partidos por revisar» igual en todas las páginas y compacto; «Menú» solo como texto para lectores ---------- */
html body.marcador .ticopa-review-shortcuts .tar-header-button[class],
html body.marcador .ticopa-review-shortcuts .tar-header-button.ticopa-action[class] {
  background: rgba(22, 31, 46, .96) !important; border: 1px solid #d6b45c !important; color: #f5d982 !important;
  font: 700 13px/1.1 var(--f-datos) !important; box-shadow: none !important; text-transform: none !important;
}
body.marcador .ticopa-review-shortcuts .tar-header-button .ticopa-ui-icon { display: none !important; }
body.marcador #mobileToggle .mc-texto-menu { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 560px) {
  body.marcador .nav-actions #ticopa-review-shortcuts { justify-self: start; width: auto; }
  body.marcador .nav-actions #ticopa-review-shortcuts .tar-header-button { min-height: 32px; height: 32px; padding: 0 14px; font-size: 12px !important; white-space: nowrap; border-radius: 16px; }
}

/* ---------- r17 arreglos: «Consultar reglamento» flotante, en un círculo que no tapa botones ---------- */
body.marcador .ticopa-rules-help-button {
  position: fixed; right: 8px; bottom: 64px; z-index: 900; width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%;
  font-size: 0; line-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: var(--sup-2, #121b2a); border: 1px solid #d7b453; color: #f5d982; box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
}
body.marcador .ticopa-rules-help-button .ticopa-ui-icon { display: none !important; }
body.marcador .ticopa-rules-help-button::before {
  content: ""; width: 22px; height: 22px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5a2 2 0 0 1 2-2h13v16H6a2 2 0 0 0-2 2z'/%3E%3Cpath d='M4 19V5'/%3E%3Cpath d='M9 8h6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5a2 2 0 0 1 2-2h13v16H6a2 2 0 0 0-2 2z'/%3E%3Cpath d='M4 19V5'/%3E%3Cpath d='M9 8h6'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (max-width: 1023px) { body.marcador .ticopa-rules-help-button { right: 12px; bottom: calc(124px + env(safe-area-inset-bottom)); } }

/* r17 revisión final (31/10): barra de arriba con perfil Superadmin. «Partidos por revisar» y «Solicitudes por revisar» se encogían (flex 1 1 auto)
   y su texto se salía y se encimaba con «MI CUENTA». Ahora los botones no se encogen, son más compactos y el que cede espacio es el buscador. */
@media (min-width: 1024px) {
  body.marcador .navbar .nav-actions { gap: 8px !important; min-width: 0; }
  body.marcador .navbar .nav-actions > * { flex-shrink: 0; }
  body.marcador .navbar #input-buscador { flex: 1 1 220px !important; min-width: 120px !important; width: auto !important; }
  body.marcador .navbar .ticopa-review-shortcuts { display: flex; gap: 6px; flex-shrink: 0; }
  body.marcador .navbar .ticopa-review-shortcuts .tar-header-button { flex: 0 0 auto !important; font-size: 12px !important; padding: 8px 10px !important; height: 40px !important; min-height: 0 !important; letter-spacing: 0 !important; white-space: nowrap; }
}
@media (min-width: 1024px) and (max-width: 1799px) {
  body.marcador .navbar .btn-world-cabecera .bw-sub { display: none !important; }
}

/* r17e (31/10): «Mis reportes (n)» del DT/jugador en celular. Antes caía en la celda libre de la fila de arriba (entre ES|EN y el mundo), su texto se partía en
   tres líneas y se montaba sobre el selector de idioma y el mundo. En 360 px la fila de arriba ya va llena (logo · ES|EN · mundo · lupa · cuenta · menú),
   así que pasa a la segunda fila, la misma de «Partidos por revisar», como píldora compacta en una sola línea, alineada a la derecha (debajo de «Mi cuenta»);
   así tampoco se encima si esa fila trae los botones del Superadmin, que van a la izquierda. En computadora no cambia nada. */
@media (max-width: 560px) {
  body.marcador .nav-actions #ticopa-dt-review-button {
    grid-area: review; justify-self: end; align-self: center; width: auto; max-width: 100%; min-width: 0;
    height: 32px; min-height: 32px; padding: 0 14px !important; margin: 0;
    font: 700 12px/1 var(--f-datos) !important; letter-spacing: 0 !important; text-transform: none !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 16px;
  }
}
/* Tablet (561-1023 px): misma píldora en una sola línea dentro de la fila de botones. */
@media (min-width: 561px) and (max-width: 1023px) {
  body.marcador .nav-actions #ticopa-dt-review-button { white-space: nowrap; flex: 0 0 auto; }
}