/* =====================================================================
   Ticopa Hub · r17 «moderno» (31/10) · HUB PÚBLICO
   Pedido de Piero: «Algunas cosas se ven outdated. Algo le está faltando. Hay que hacerlo un poco más chévere».
   Solo presentación, dentro de la estética «Marcador»: degradados violeta, títulos condensados, rojo para acciones, celeste y verde de acento.
   No cambia contenido, tamaños de la barra superior ni lógica. Se carga DESPUÉS de 22 (colores de tablas) y 23 (efectos): los respeta.
   Tokens --m-* acordados con el portal admin y Finanzas (scratchpad r17moderno/ACUERDOS.md): el mismo bloque :root en los dos.
   ===================================================================== */
:root {
  --m-cristal: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));
  --m-tarjeta: linear-gradient(160deg, #1a1748 0%, #14123a 60%, #120f33 100%);
  --m-cabecera: radial-gradient(120% 140% at 0% 0%, rgba(139, 92, 246, .34), transparent 55%), radial-gradient(90% 120% at 100% 100%, rgba(255, 45, 85, .16), transparent 60%), linear-gradient(135deg, #231d63, #15123d);
  --m-borde: rgba(180, 157, 255, .14);
  --m-borde-fuerte: rgba(180, 157, 255, .28);
  --m-acento: linear-gradient(90deg, #8b5cf6, #ff2d55);
  --m-r-chip: 999px; --m-r-ctl: 10px; --m-r-card: 16px; --m-r-hero: 20px;
  --m-sombra-1: inset 0 1px 0 rgba(255, 255, 255, .04), 0 6px 18px -10px rgba(8, 4, 30, .8);
  --m-sombra-2: inset 0 1px 0 rgba(255, 255, 255, .06), 0 18px 40px -22px rgba(76, 40, 190, .65);
  --m-brillo-rojo: 0 8px 22px -10px rgba(255, 45, 85, .7);
}

/* ---------- 0. Fondo: un resplandor violeta muy suave arriba (antes: azul noche plano) ---------- */
body.marcador {
  background:
    radial-gradient(1100px 520px at 70% -180px, rgba(115, 68, 240, .16), transparent 70%),
    radial-gradient(800px 420px at -10% 110%, rgba(255, 45, 85, .05), transparent 70%),
    var(--noche) !important;
  background-attachment: fixed !important;
}
::selection { background: rgba(139, 92, 246, .45); color: #fff; }

/* ---------- 1. Barra superior (solo color, borde y radio: el acomodo lo arregla la rama claude/r17-revision-final) ---------- */
body.marcador .navbar {
  background: linear-gradient(180deg, rgba(14, 12, 44, .94), rgba(11, 10, 36, .86)) !important;
  border-bottom: 1px solid var(--m-borde) !important;
  box-shadow: 0 10px 30px -24px rgba(115, 68, 240, .9) !important;
}
body.marcador #input-buscador {
  background-color: rgba(255, 255, 255, .035) !important; border-color: var(--m-borde) !important; border-radius: 12px !important;
  transition: border-color .15s ease, background-color .15s ease;
}
body.marcador #input-buscador:hover { border-color: var(--m-borde-fuerte) !important; }
body.marcador #input-buscador:focus { background-color: rgba(11, 10, 36, .8) !important; border-color: var(--violeta) !important; }
body.marcador #btn-world-cabecera { border-color: rgba(180, 157, 255, .45) !important; box-shadow: 0 6px 18px -10px rgba(139, 92, 246, .8); }
body.marcador #btn-portal-sesion, body.marcador .btn-cuenta-cabecera { background: linear-gradient(135deg, #8257f5, #6a3be6) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 6px 18px -10px rgba(115, 68, 240, .9) !important; letter-spacing: .01em !important; }
body.marcador #mobileToggle, body.marcador .btn-lupa-cabecera { border-color: var(--m-borde) !important; background: rgba(255, 255, 255, .03) !important; }

/* Barra de abajo (celular): el activo con una pastilla violeta y el ícono rojo */
.marcador-nav-inf { background: linear-gradient(180deg, rgba(20, 17, 58, .96), rgba(11, 10, 36, .98)) !important; border-top: 1px solid var(--m-borde) !important; }
.marcador-nav-inf a[aria-current] { background: rgba(139, 92, 246, .14); }
.marcador-nav-inf a[aria-current]::before { content: ""; position: absolute; top: -6px; width: 26px; height: 3px; border-radius: 0 0 3px 3px; background: var(--m-acento); }
.marcador-nav-inf a { position: relative; }

/* ---------- 2. Menú lateral (computadora) ---------- */
@media (min-width: 1024px) {
  body.marcador .marcador-riel {
    background: radial-gradient(140% 40% at 0% 0%, rgba(139, 92, 246, .16), transparent 60%), linear-gradient(180deg, #120f36, #0c0b29) !important;
    border-right: 1px solid var(--m-borde) !important;
  }
}
.marcador-riel nav p { font: 600 12px var(--f-texto) !important; letter-spacing: .01em; color: var(--tenue); padding: 14px 12px 6px !important; }
.marcador-riel nav a, .marcador-riel nav button { min-height: 40px; border-radius: var(--m-r-ctl); transition: background-color .15s ease, color .15s ease; position: relative; }
.marcador-riel nav a:hover, .marcador-riel nav button:hover { background: rgba(139, 92, 246, .08); }
.marcador-riel nav a[aria-current] { background: rgba(139, 92, 246, .16) !important; box-shadow: none !important; color: #fff; }
.marcador-riel nav a[aria-current]::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--m-acento); }
.marcador-riel nav a[aria-current] svg { color: var(--rojo-texto); }
.marcador-riel nav a.torneo img { border-radius: 6px; }
.marcador-riel nav a .etq-3d { background: var(--m-acento); color: #fff; }

/* ---------- 3. Cabeceras de página (Torneos, Calendario, Liga, Club, Jugador, Partido, Noticias, Mi cuenta) ---------- */
/* Mismo bloque en todas: degradado violeta con un toque rojo, radio 20, borde suave y una línea de acento abajo a la izquierda. */
html body :is(.mc-cabecera, .liga-header, .club-profile-header:not(:has(.tab-btn, .club-nav-full, .nav-tabs)), .cuenta-entrada) {
  background: var(--m-acento) left clamp(18px, 3vw, 32px) top 0 / 72px 3px no-repeat, var(--m-cabecera) !important;
  border: 1px solid var(--m-borde-fuerte) !important;
  border-radius: var(--m-r-hero) !important;
  box-shadow: var(--m-sombra-2) !important;
}
html body :is(.mc-cabecera, .liga-header) :is(h1, .mc-d1, .mc-d2) { letter-spacing: -.005em; text-wrap: balance; }
html body .mc-cabecera p, html body .liga-header span { color: var(--suave); }
/* Partido: la cabecera vieja tenía fondo plano */
html body .club-profile-header { overflow: hidden; }
/* Mi cuenta: título sin mayúsculas forzadas de tamaño enorme */
html body .cuenta-entrada .cuenta-titulo { font-family: var(--f-display) !important; font-weight: 800 !important; letter-spacing: -.005em !important; }

/* Títulos de sección: sin el espaciado de letras «de otra época» */
html body :is(.seccion-cabecera h3, .registered-teams-section h3, .home-streams h3, .home-streams .hs-titulo) { letter-spacing: .005em !important; }
html body :is(.club-social-section, .club-social-hero, .jugador-inscripciones, .perfil-wrapper .card) h3 { letter-spacing: .01em !important; }
html body :is(.club-social-eyebrow, .portal-kicker, .editorial-kicker) { letter-spacing: .06em !important; }

/* ---------- 4. Tarjetas ---------- */
html body :is(.card, .mc-tarjeta, .torneo-activo-card, .editorial-card, .club-social-section, .cuenta-seccion, .preinscripcion-card, .mc-herr, .registered-teams-section, .home-streams, #news-slider-container) {
  border-color: var(--m-borde) !important;
  border-radius: var(--m-r-card) !important;
}
html body :is(.card, .mc-tarjeta, .torneo-activo-card, .cuenta-seccion, .preinscripcion-card, .registered-teams-section, .home-streams):not(.liga-header):not(.cuenta-entrada) {
  background-image: var(--m-cristal) !important;
  box-shadow: var(--m-sombra-1) !important;
}
html body .ticopa-modal-box, html body .modal-content { border-color: var(--m-borde-fuerte) !important; box-shadow: 0 30px 80px -30px rgba(76, 40, 190, .7) !important; }
html body .torneo-activo-card { transition: border-color .18s ease, background-color .18s ease; }
html body .torneo-activo-card:hover { border-color: var(--m-borde-fuerte) !important; }
html body .torneo-activo-card .ta-estado { letter-spacing: .03em; }
html body .editorial-card { background-image: var(--m-cristal), linear-gradient(160deg, #1a1748, #14123a) !important; box-shadow: var(--m-sombra-1) !important; }
html body .editorial-card.editorial-principal { box-shadow: var(--m-sombra-2) !important; }

/* ---------- 5. Botones: rojo para la acción, violeta suave para lo secundario ---------- */
html body :is(.hero-btn, .btn-primary, .mc-btn, .btn-secondary, .btn-danger) { border-radius: var(--m-r-ctl) !important; letter-spacing: .01em !important; }
html body .mc-btn-rojo, html body .hero-btn.liga-exportar-tabla,
html body :is(.hero-btn, .btn-primary):not(.btn-secondary):not([class*="semantic-"]):not(.ticopa-action-success):not(.ticopa-action-danger):not([style*="background"]) {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), var(--m-brillo-rojo) !important;
}
html body .btn-secondary:not(.hero-btn):not(.tab-btn):not(.filtro-btn):not(.mc-btn):not(.btn-danger):not(.ticopa-action-danger):not(.ticopa-action-success):not(.semantic-delete):not(.semantic-remove):not(.semantic-reject):not(.semantic-cancel):not(.semantic-logout):not(.semantic-accept):not(.semantic-save):not(.semantic-add):not(.semantic-generate):not(.semantic-verify):not(.semantic-login):not(.semantic-import) {
  background: rgba(139, 92, 246, .10) !important; border-color: var(--m-borde-fuerte) !important;
}
html body .btn-secondary:not(.hero-btn):not(.tab-btn):not(.filtro-btn):not(.mc-btn):not(.btn-danger):not(.ticopa-action-danger):not(.ticopa-action-success):not(.semantic-delete):not(.semantic-remove):not(.semantic-reject):not(.semantic-cancel):not(.semantic-logout):not(.semantic-accept):not(.semantic-save):not(.semantic-add):not(.semantic-generate):not(.semantic-verify):not(.semantic-login):not(.semantic-import):hover {
  background: rgba(139, 92, 246, .18) !important; border-color: rgba(180, 157, 255, .45) !important;
}
html body .mc-btn-linea { background: rgba(139, 92, 246, .08) !important; border-color: var(--m-borde-fuerte) !important; }
html body .mc-btn-violeta { background: linear-gradient(135deg, #8257f5, #6a3be6) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 8px 22px -12px rgba(115, 68, 240, .9) !important; }
/* Foco visible con el violeta de la marca (teclado) */
html body :is(a, button, .tab-btn, .mc-chip, .filtro-btn, [tabindex]):focus-visible { outline: 2px solid var(--violeta-texto) !important; outline-offset: 2px; }

/* ---------- 6. Pestañas de página: subrayado con el degradado violeta → rojo ---------- */
html body :is(.nav-tabs, .liga-tabs-wrap, .club-nav-full) { border-bottom-color: var(--m-borde) !important; }
html body .tab-btn { transition: color .15s ease; }
html body .tab-btn:is(.activo, .active) { border-image: var(--m-acento) 1 !important; font-weight: 700 !important; }
/* las rayitas de 23-marcador-efectos.css hacen el mismo papel en Liga y Noticias: allí no se duplica */
html body :is(.liga-tabs-wrap, .editorial-tabs) .tab-btn:is(.activo, .active) { border-image: none !important; }

/* ---------- 7. Chips y filtros: píldoras; el elegido en violeta (igual que 22-marcador-color.css) ---------- */
html body :is(.mc-chip, .filtro-btn) { border-radius: var(--m-r-chip) !important; border-color: var(--m-borde-fuerte) !important; background: rgba(255, 255, 255, .03) !important; }
html body :is(.mc-chip, .filtro-btn):not([aria-pressed="true"]):not(.activo):not(.active):hover { background: rgba(139, 92, 246, .12) !important; color: var(--texto) !important; }
html body .filtro-btn:is(.activo, .active) { background: var(--violeta-boton, #7344f0) !important; border-color: var(--violeta, #8b5cf6) !important; color: #fff !important; }
html body .mc-chip[aria-pressed="true"] { box-shadow: 0 6px 16px -10px rgba(115, 68, 240, .9) !important; }
html body :is(.mc-est, .est-vivo, .est-ok, .est-espera, .est-info) { border-radius: var(--m-r-chip); font-family: var(--f-texto); font-weight: 600; font-size: 12.5px; }
html body .mc-etq { border-radius: 6px; }
html body .hs-canal { border-radius: var(--m-r-chip) !important; letter-spacing: .02em; }

/* ---------- 8. Tablas: envoltura redondeada, cabecera con fondo suave, filas con aire ---------- */
html body .table-responsive { border: 1px solid var(--m-borde); border-radius: var(--m-r-card); background: rgba(11, 10, 36, .25); }
html body #liga-posiciones .table-responsive, html body .liga-right-col .table-responsive { border: 0; background: transparent; }
html body :is(.pro-table, .table-responsive > table, .standings-table) thead th {
  background: rgba(255, 255, 255, .025) !important; font: 700 12px var(--f-datos) !important; letter-spacing: .04em !important;
}
html body :is(.pro-table, .table-responsive > table) td { border-bottom-color: rgba(180, 157, 255, .08) !important; }
html body :is(.pro-table, .table-responsive > table) tbody tr:last-child td { border-bottom: 0 !important; }
html body .standings-table tbody tr:nth-child(odd) { background-color: rgba(255, 255, 255, .012); }
html body .standings-table td { border-bottom: 1px solid rgba(180, 157, 255, .07) !important; }

/* ---------- 9. Estados vacíos: aviso tranquilo con un círculo violeta (sin cajas de borde duro) ---------- */
html body :is(.mc-vacio, .editorial-empty, .club-social-empty, .team-chat-empty, .jugador-inscripciones-vacio, .vitrina-vacia, .fmt-empty, .club-sorteo-empty, .portal-search-empty) {
  display: grid; justify-items: center; gap: 10px; text-align: center;
  padding: 28px 18px !important; border: 1px dashed var(--m-borde-fuerte) !important; border-radius: var(--m-r-card) !important;
  background: radial-gradient(60% 90% at 50% 0%, rgba(139, 92, 246, .08), transparent 70%) !important;
  color: var(--suave) !important; font: 500 15px/1.45 var(--f-texto) !important; letter-spacing: 0 !important;
}
html body :is(.mc-vacio, .editorial-empty, .club-social-empty, .team-chat-empty, .jugador-inscripciones-vacio, .vitrina-vacia, .fmt-empty, .club-sorteo-empty)::before {
  content: ""; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(139, 92, 246, .14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b49dff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12h8'/%3E%3C/svg%3E") center / 22px no-repeat;
  box-shadow: inset 0 0 0 1px var(--m-borde-fuerte);
}

/* ---------- 10. Carga: esqueletos con brillo en vez de «Cargando…» ---------- */
@keyframes m-brillo { from { background-position: -320px 0, 0 0; } to { background-position: calc(100% + 320px) 0, 0 0; } }
/* Bloque de carga de cualquier pantalla: tres renglones grises con un brillo que pasa. El texto sigue ahí para lectores de pantalla. */
html body .super-loader {
  position: relative; min-height: 168px; border-radius: var(--m-r-card); overflow: hidden; padding: 0 !important;
  border: 1px solid var(--m-borde);
  background:
    linear-gradient(90deg, transparent, rgba(180, 157, 255, .10), transparent) 0 0 / 320px 100% no-repeat,
    linear-gradient(var(--sup-2), var(--sup-2)) 20px 24px / 38% 18px no-repeat,
    linear-gradient(var(--sup-2), var(--sup-2)) 20px 60px / calc(100% - 40px) 12px no-repeat,
    linear-gradient(var(--sup-2), var(--sup-2)) 20px 84px / 82% 12px no-repeat,
    linear-gradient(var(--sup-2), var(--sup-2)) 20px 120px / 30% 28px no-repeat,
    var(--sup-1) !important;
}
@media (prefers-reduced-motion: no-preference) {
  html body .super-loader { animation: m-brillo 1.4s linear infinite; }
}
html body .super-loader > .loader-ring { display: none !important; }
html body .super-loader > .loader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html body .skeleton { background: linear-gradient(90deg, var(--sup-2) 0%, #2a2570 50%, var(--sup-2) 100%) 0 0 / 200% 100% !important; border-radius: 8px !important; }
/* Cargador de pantalla completa: sin la palabra «CARGANDO» en mayúsculas; quedan los tres puntos */
html body .ticopa-global-loader .ticopa-loader-copy { font: 600 14px var(--f-texto) !important; letter-spacing: .02em !important; text-transform: none !important; color: var(--suave) !important; }

/* ---------- 11. Cierre de página («pie»): el bloque de la comunidad del Inicio queda como banda final ---------- */
html body .home-comunidad, html body .home-membresia {
  border: 1px solid var(--m-borde) !important; border-radius: var(--m-r-hero) !important;
  background: var(--m-acento) center bottom / 72px 3px no-repeat, radial-gradient(70% 140% at 50% 120%, rgba(139, 92, 246, .22), transparent 70%), linear-gradient(180deg, #16133f, #100e30) !important;
  box-shadow: var(--m-sombra-1) !important;
}
html body .home-comunidad .hm-titulo { letter-spacing: .005em !important; }
html body .home-comunidad .hm-boton { color: var(--violeta-texto) !important; letter-spacing: .02em !important; }
/* Todas las pantallas terminan con una línea fina violeta (antes el contenido se cortaba en seco) */
body.marcador .main-container::after {
  content: ""; display: block; height: 1px; margin: 40px auto 8px; max-width: 520px;
  background: linear-gradient(90deg, transparent, rgba(180, 157, 255, .35), transparent);
}

/* ---------- 12. Detalles que delatan «otra época» ---------- */

html body hr { border: 0; height: 1px; background: var(--m-borde); }
html body ::-webkit-scrollbar-thumb { background: #3a3487; border-radius: 8px; }
html body ::-webkit-scrollbar-track { background: transparent; }

/* ---------- 13. Formato de oración (decisión del coordinador, 31/10): botones, menús y chips sin mayúsculas forzadas por CSS ----------
   Los textos ESCRITOS en mayúsculas los pasa a oración js/modules/41-texto-oracion.js. Los títulos de sección pueden seguir en mayúsculas. */
html body :is(button, .hero-btn, .btn-primary, .btn-secondary, .btn-danger, .mc-btn, .tab-btn, .filtro-btn, .mc-chip, .hs-canal,
  .marcador-riel a, .marcador-nav-inf a, .sidebar-menu a, .ta-estado, .ta-tag, .mc-est, .club-social-status, .editorial-kicker, .club-social-eyebrow, .tcm-etiqueta) {
  text-transform: none !important;
}

/* ---------- r17 · «Torneos en curso»: tus torneos primero + punto «en vivo» (Piero 02/11) ---------- */
.punto-vivo { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--rojo, #ff2d55); margin-left: 8px; vertical-align: middle; flex: none; }
.punto-vivo.hoy { animation: punto-vivo-pulso 1.8s ease-out infinite; }
@keyframes punto-vivo-pulso { 0% { box-shadow: 0 0 0 0 rgba(255, 45, 85, .55); } 70% { box-shadow: 0 0 0 7px rgba(255, 45, 85, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 45, 85, 0); } }
@media (prefers-reduced-motion: reduce) { .punto-vivo.hoy { animation: none; } }
.marcador-riel nav p.torneos-tit { display: flex; align-items: center; }
.marcador-riel nav a.torneo.suyo, body.marcador .sidebar-menu li.suyo > a { background: rgba(255, 45, 85, .10); box-shadow: inset 3px 0 0 var(--rojo, #ff2d55); color: var(--texto, #f4f3ff); }
.marcador-riel nav a.torneo.suyo:hover, body.marcador .sidebar-menu li.suyo > a:hover { background: rgba(255, 45, 85, .18); }
.etq-tu-club { margin-left: auto; flex: none; font: 700 10.5px/18px var(--f-datos, inherit); font-style: normal; letter-spacing: .02em; padding: 0 7px; border-radius: 9px; background: var(--rojo, #ff2d55); color: #fff; white-space: nowrap; }
body.marcador .sidebar-menu li.suyo > a .etq-tu-club { margin-left: 8px; }
.marcador-riel nav { grid-template-columns: minmax(0, 1fr); }
.marcador-riel nav a.torneo.suyo > span { flex: 0 1 auto; }