/* =====================================================================
   Ticopa Hub · rediseño «Marcador» (r17) · 20) Liga (posiciones) y Club
   Acerca estas dos pantallas a la maqueta aprobada: cabecera en tarjeta con degradado violeta,
   botones redondeados DENTRO de la cabecera, pestañas compactas, tabla en tarjeta y
   «Herramientas del DT» en tarjetas con degradado. Solo CSS: el contenido y las funciones no cambian.
   ===================================================================== */

/* ---------- Ancho: en pantallas anchas la página usa el espacio (sin huecos a los lados) ---------- */
@media (min-width: 1280px) {
  body.marcador .main-container[data-ticopa-vista-key^="liga::"],
  body.marcador .main-container[data-ticopa-vista-key^="club::"] { max-width: 1680px !important; }
}
@media (min-width: 2200px) {
  body.marcador .main-container[data-ticopa-vista-key^="liga::"],
  body.marcador .main-container[data-ticopa-vista-key^="club::"] { max-width: 2000px !important; }
}

/* ================= LIGA ================= */
html body .liga-header {
  background:
    radial-gradient(90% 140% at 100% 0%, rgba(255, 45, 85, .20), transparent 55%),
    linear-gradient(125deg, #3b2a9e 0%, #241b78 42%, #17134d 100%) !important;
  border: 1px solid rgba(180, 157, 255, .28) !important;
  border-radius: 18px !important;
  padding: 22px 22px 86px !important;
  margin: 0 !important;
}
html body .liga-header > div:first-child { display: none !important; }
html body .liga-header > div:nth-child(2) { gap: 18px !important; align-items: center !important; }
html body .liga-header img { width: 76px !important; height: 76px !important; padding: 8px !important; border-radius: 16px !important; }
html body .liga-header h1 { font: 800 clamp(34px, 4.4vw, 64px)/.92 var(--f-display) !important; letter-spacing: 0 !important; }
html body .liga-header span { font: 600 15px/1.3 var(--f-texto) !important; margin-top: 8px !important; }

/* «Compartir torneo» y «Inscripción / check-in» se ven dentro de la cabecera, en una fila */
html body .main-container[data-ticopa-vista-key^="liga::"] > [data-share-tournament] {
  position: relative; z-index: 3; display: flex !important; align-items: center; justify-content: center; gap: 8px;
  height: 44px; min-height: 44px; margin: -66px 0 0 22px !important; width: fit-content !important; max-width: calc(50% - 30px);
  padding: 0 16px !important; border-radius: 12px !important; box-sizing: border-box;
  background: rgba(11, 10, 36, .45) !important; border: 1px solid rgba(180, 157, 255, .35) !important; color: var(--texto) !important;
  font: 700 14px var(--f-datos) !important; letter-spacing: 0 !important; text-transform: none !important; box-shadow: none !important;
}
html body .main-container[data-ticopa-vista-key^="liga::"] .liga-layout-grid { margin-top: 0 !important; }
html body .liga-right-col > #ticopa-participation-entry {
  position: relative; z-index: 3; display: flex !important; align-items: center; justify-content: center; gap: 8px;
  height: 44px; min-height: 44px; width: auto !important; max-width: calc(50% - 30px); box-sizing: border-box;
  margin: -44px 22px 0 auto !important; padding: 0 18px !important; border-radius: 12px !important;
  background: var(--rojo) !important; color: #fff !important; border: 0 !important; box-shadow: 0 6px 18px rgba(255, 45, 85, .30) !important;
  font: 700 14px var(--f-datos) !important; letter-spacing: 0 !important; text-transform: none !important;
}
html body .liga-right-col { overflow: visible !important; }

/* Pestañas: compactas, en una sola fila, subrayado rojo */
html body .liga-tabs-wrap { margin: 26px 0 14px !important; border-bottom: 1px solid var(--linea) !important; gap: 0 2px !important; flex-wrap: nowrap !important; overflow-x: auto; }
html body .liga-tabs-wrap .nav-tabs { flex: none !important; flex-wrap: nowrap !important; gap: 2px !important; margin: 0 !important; padding: 0 !important; }
html body .liga-tabs-wrap .tab-btn {
  border: 0 !important; border-bottom: 3px solid transparent !important; border-radius: 0 !important; background: transparent !important;
  color: var(--suave) !important; font: 600 15px var(--f-datos) !important; letter-spacing: 0 !important; text-transform: none !important;
  padding: 10px 12px 11px !important; min-height: 44px; white-space: nowrap; box-shadow: none !important; margin: 0 0 -1px !important;
}
html body .liga-tabs-wrap .tab-btn.activo { color: var(--texto) !important; border-bottom-color: var(--rojo) !important; font-weight: 700 !important; }
html body .liga-tabs-wrap .tab-btn .ticopa-ui-icon { display: none !important; }

/* Mercados de fichajes: chips compactos en fila */
html body .mc-mercados { gap: 10px !important; margin-bottom: 14px !important; }
html body .mc-mercados > div { padding: 12px 14px !important; border-radius: 14px !important; background: linear-gradient(160deg, #1f1a5c, #14123a 75%) !important; }
html body .mc-mercados strong { font-size: 24px !important; line-height: 1 !important; }

/* Tabla: tarjeta con degradado suave y cabecera compacta */
html body .liga-right-col .standings-table-actions,
html body .liga-right-col .standings-table { font-size: 15px; }
html body #liga-posiciones > .card, html body #liga-posiciones .table-container, html body #liga-posiciones .standings-card {
  background: linear-gradient(170deg, #1b1754, #121036 60%) !important; border: 1px solid var(--linea) !important; border-radius: 18px !important;
  padding: 14px !important; box-shadow: none !important;
}
html body .standings-table thead th { font: 600 13px var(--f-datos) !important; color: var(--tenue) !important; text-transform: none !important; letter-spacing: 0 !important; padding-block: 10px !important; }
html body .standings-table td { height: 48px; }
html body .standings-table tbody tr { background: transparent !important; }
html body .standings-table tbody tr:nth-child(odd) { background: rgba(139, 92, 246, .06) !important; }
html body .standings-table tbody tr:first-child td:first-child { box-shadow: inset 3px 0 0 var(--ok); }
html body .hero-btn.liga-exportar-tabla { border-radius: 12px !important; min-height: 40px; padding: 0 14px !important; font: 700 14px var(--f-datos) !important; text-transform: none !important; letter-spacing: 0 !important; background: transparent !important; color: var(--texto) !important; border: 1px solid var(--linea-fuerte) !important; box-shadow: none !important; }

@media (max-width: 560px) {
  html body .liga-header { padding: 18px 16px 80px !important; border-radius: 16px !important; }
  html body .liga-header img { width: 60px !important; height: 60px !important; }
  html body .liga-header h1 { font-size: clamp(30px, 9vw, 40px) !important; }
  html body .main-container[data-ticopa-vista-key^="liga::"] > [data-share-tournament] { margin: -62px 0 0 16px !important; width: calc(50% - 22px) !important; max-width: none; padding: 0 8px !important; font-size: 13px !important; }
  html body .liga-right-col > #ticopa-participation-entry { margin: -44px 16px 0 auto !important; width: calc(50% - 22px) !important; max-width: none; padding: 0 8px !important; font-size: 13px !important; }
  html body .liga-tabs-wrap { margin-top: 22px !important; }
  html body .liga-tabs-wrap .tab-btn { padding: 10px 10px 11px !important; font-size: 14px !important; }
  html body .mc-mercados { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; }
  html body .mc-mercados > div { padding: 10px !important; }
  html body .mc-mercados strong { font-size: 18px !important; }
  html body .mc-mercados > div > span, html body .mc-mercados small { font-size: 11px !important; }
}

/* ================= CLUB ================= */
html body .perfil-wrapper { border: 0 !important; background: transparent !important; overflow: visible !important; box-shadow: none !important; }
/* Cabecera del club: tarjeta violeta, escudo a la izquierda, nombre grande, botones debajo */
html body .perfil-wrapper div[style*="min-height: 250px"] { min-height: 0 !important; padding: 0 !important; align-items: stretch !important; border: 0 !important; background: transparent !important; overflow: visible !important; }
html body .perfil-wrapper div[style*="min-height: 250px"] > div[style*="gap:25px"] {
  padding: 24px !important; box-sizing: border-box;
  border: 1px solid rgba(180, 157, 255, .28) !important; border-radius: 18px !important;
  background:
    radial-gradient(80% 140% at 100% 0%, rgba(255, 45, 85, .22), transparent 55%),
    linear-gradient(125deg, #3b2a9e 0%, #241b78 42%, #17134d 100%) !important;
}
html body .perfil-wrapper div[style*="min-height: 250px"] > div[style*="position:absolute"] { display: none !important; }
html body .perfil-wrapper div[style*="min-height: 250px"] > div[style*="gap:25px"] { justify-content: flex-start !important; align-items: center !important; gap: 20px !important; margin: 0 !important; width: 100%; flex-wrap: wrap !important; }
html body .perfil-wrapper div[style*="min-height: 250px"] > div[style*="gap:25px"] > div[style*="border-radius: 50%"] {
  width: 104px !important; height: 104px !important; min-width: 104px !important; border-radius: 22px !important; padding: 10px !important;
  background: transparent !important; box-shadow: none !important; box-sizing: border-box;   /* Piero 03/11: solo el logo, sin el cuadro de color encima */
}
/* El escudo se veía «lavado»: el HTML viejo le pone mix-blend-mode: screen y una sombra fuerte. Se muestra tal cual. */
html body .perfil-wrapper div[style*="min-height: 250px"] > div[style*="gap:25px"] > div[style*="border-radius: 50%"] > img { mix-blend-mode: normal !important; filter: none !important; }
html body .perfil-wrapper div[style*="min-height: 250px"] > div[style*="gap:25px"] > div[style*="min-width:240px"] > div:first-child { font: 800 clamp(38px, 4.6vw, 68px)/.92 var(--f-display) !important; text-shadow: none !important; letter-spacing: 0 !important; }
html body .perfil-wrapper div[style*="min-height: 250px"] > div[style*="gap:25px"] > div[style*="min-width:240px"] > div:nth-child(2) { color: var(--suave) !important; font: 600 15px var(--f-texto) !important; letter-spacing: 0 !important; margin-top: 8px !important; }
html body .perfil-wrapper div[style*="min-height: 250px"] div[style*="gap:10px"] { justify-content: flex-start !important; gap: 10px !important; }
html body .perfil-wrapper div[style*="min-height: 250px"] div[style*="gap:10px"] > .hero-btn,
html body .perfil-wrapper div[style*="min-height: 250px"] div[style*="gap:10px"] > a {
  min-height: 44px; display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box;
  padding: 0 16px !important; border-radius: 12px !important; font: 700 14px var(--f-datos) !important; letter-spacing: 0 !important; text-transform: none !important;
  background: rgba(11, 10, 36, .45) !important; border: 1px solid rgba(180, 157, 255, .35) !important; color: var(--texto) !important; backdrop-filter: none !important; box-shadow: none !important;
}
@media (min-width: 900px) {
  html body .perfil-wrapper div[style*="min-height: 250px"] > div[style*="gap:25px"] { padding: 28px 32px !important; }
  html body .perfil-wrapper div[style*="min-height: 250px"] > div[style*="gap:25px"] > div[style*="gap:10px"] { margin-left: auto; }
}
/* Pestañas del club: compactas, a la izquierda, subrayado rojo */
html body .club-nav-full { background: transparent !important; box-shadow: none !important; border-top: 0 !important; margin-top: 14px; }
html body .club-nav-full .tab-btn {
  flex: 0 0 auto !important; padding: 10px 14px 11px !important; min-height: 44px; background: transparent !important; color: var(--suave) !important;
  font: 600 15px var(--f-datos) !important; text-transform: none !important; letter-spacing: 0 !important; border-bottom: 3px solid transparent !important; box-shadow: none !important;
}
html body .club-nav-full .tab-btn.activo { color: var(--texto) !important; border-bottom-color: var(--rojo) !important; font-weight: 700 !important; }
html body .club-nav-full .tab-btn .ticopa-ui-icon { display: none !important; }
html body .perfil-wrapper .club-tab-content { padding-inline: 0 !important; }

/* ---------- Herramientas del DT: tarjetas como las de la maqueta ---------- */
html body .mc-herramientas { margin: 18px 0 6px !important; gap: 12px; }
html body .mc-herramientas > .mc-t-sec { font: 700 22px/1.1 var(--f-datos); }
html body .mc-herramientas > .mc-t-sec .mc-etq { font: 600 12px var(--f-datos); padding: 3px 10px; border-radius: 999px; background: rgba(139, 92, 246, .22); color: var(--violeta-texto); }
html body .mc-herr-rejilla { gap: 12px; }
@media (min-width: 700px) { html body .mc-herr-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1500px) { html body .mc-herr-rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
html body .mc-herr {
  position: relative; overflow: hidden; gap: 8px; padding: 18px 18px 16px; border-radius: 18px;
  border: 1px solid rgba(180, 157, 255, .28);
  background: radial-gradient(110% 120% at 100% 0%, rgba(139, 92, 246, .28), transparent 60%), linear-gradient(160deg, #2a2180 0%, #1a1658 50%, #131040 100%);
}
html body .mc-herr[data-ranura="el11"] { background: radial-gradient(110% 120% at 100% 0%, rgba(0, 212, 255, .16), transparent 60%), linear-gradient(160deg, #2a2180 0%, #1a1658 50%, #131040 100%); border-color: rgba(180, 157, 255, .35); }
html body .mc-herr.mc-herr-ia { border-color: rgba(255, 92, 122, .45); background: radial-gradient(120% 130% at 100% 0%, rgba(255, 45, 85, .30), transparent 58%), linear-gradient(160deg, #33238f 0%, #1f1868 50%, #15113f 100%); }
html body .mc-herr > .mc-etq { font: 700 12px var(--f-datos); padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .10); color: var(--texto); letter-spacing: 0; text-transform: none; }
html body .mc-herr > .mc-etq.mc-etq-nuevo { background: var(--rojo); color: #fff; }
html body .mc-herr h3 { font: 800 clamp(28px, 2.4vw, 36px)/.95 var(--f-display); letter-spacing: 0; text-transform: none; }
html body .mc-herr p { font: 500 15px/1.4 var(--f-texto); color: var(--suave); max-width: 60ch; }
html body .mc-herr .mc-btn { margin-top: 8px; min-height: 44px; padding: 0 18px; border-radius: 12px; font: 700 15px var(--f-datos); letter-spacing: 0; text-transform: none; }
@media (max-width: 560px) {
  html body .perfil-wrapper div[style*="min-height: 250px"] > div[style*="gap:25px"] { padding: 18px 16px !important; }
  html body .perfil-wrapper div[style*="min-height: 250px"] > div[style*="gap:25px"] > div[style*="border-radius: 50%"] { width: 84px !important; height: 84px !important; min-width: 84px !important; }
  html body .perfil-wrapper div[style*="min-height: 250px"] > div[style*="gap:25px"] > div[style*="min-width:240px"] > div:first-child { font-size: 40px !important; }
  html body .perfil-wrapper div[style*="min-height: 250px"] div[style*="gap:10px"] { flex-direction: row !important; flex-wrap: nowrap !important; max-width: none !important; }
  html body .perfil-wrapper div[style*="min-height: 250px"] div[style*="gap:10px"] > .hero-btn,
  html body .perfil-wrapper div[style*="min-height: 250px"] div[style*="gap:10px"] > a { flex: 1 1 0 !important; width: auto !important; padding: 0 8px !important; font-size: 13px !important; text-align: center; }
  html body .mc-herramientas { margin: 14px 0 4px !important; }
  html body .mc-herr { padding: 16px; }
}

/* r17 revisión final (31/10): para un admin, entre la cabecera y «Compartir torneo» va el bloque «Gestión del torneo». El botón subía 66 px
   (pensado para quedar dentro de la cabecera) y se encimaba sobre el texto de ese bloque. Con el bloque presente, el botón queda en su propia
   fila DEBAJO del bloque (con «Inscripción / check-in» a la derecha, como siempre) y la cabecera ya no guarda el hueco de abajo. */
html body .main-container[data-ticopa-vista-key^="liga::"] > .liga-header:has(+ .league-operation-bar) { padding-bottom: 22px !important; }
html body .main-container[data-ticopa-vista-key^="liga::"] > .league-operation-bar + [data-share-tournament] { margin: 16px 0 0 22px !important; }
@media (max-width: 560px) {
  html body .main-container[data-ticopa-vista-key^="liga::"] > .liga-header:has(+ .league-operation-bar) { padding-bottom: 18px !important; }
  html body .main-container[data-ticopa-vista-key^="liga::"] > .league-operation-bar + [data-share-tournament] { margin: 14px 0 0 16px !important; }
}

/* r17e (31/10): en celular «Inscribirse / check-in» se partía en «check-» / «in» (el botón mide la mitad del ancho). En celular queda en una sola línea:
   sin el ícono del trofeo y con letra de 12 px cabe desde 360 px; si algún idioma no cabe, se recorta con «…» en vez de partirse. */
@media (max-width: 560px) {
  html body .liga-right-col > #ticopa-participation-entry { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis; gap: 0 !important; padding: 0 6px !important; font-size: 12px !important; }
  html body .liga-right-col > #ticopa-participation-entry .ticopa-ui-icon { display: none !important; }
}

/* r17 (03/11): en celular, legacy 05-overrides-responsive.css le pone max-width:92px !important a TODO .search-input (era para el buscador de la cabecera).
   Eso cortaba campos de formularios y ventanas (chat del club, «Crear imagen», fichajes). Solo el buscador de la cabecera queda angosto. */
@media (max-width: 768px) {
  html body .search-input { max-width: 100% !important; }
  html body .nav-actions .search-input, html body .search-container > .search-input { max-width: 92px !important; }
}
/* Botón × de la ventana «Fichar fácil»: área de toque de 44 px */
html body .mc-ff-x { min-width: 44px; min-height: 44px; font-size: 1.5rem; line-height: 1; }