/* Ticopa · efectos «Marcador» para el RESTO del Hub (liga, club, partido, calendario, noticias, torneos, jugador, Mi cuenta, El 11, admin).
 * Complementa apps/hub/animaciones/ (versión A), que ya pone las entradas escalonadas (data-anim), la transición de pestañas y el conteo de números.
 * Reglas: solo se mueven transform y opacity (el brillo es una capa ::after que solo cambia su opacidad); los bordes solo cambian de color.
 * Nada cambia el tamaño ni el lugar de nada: después de cargar, el contenido no se corre.
 * Mouse: solo con (hover: hover) y puntero fino, para que en celular no queden «pegados». Toque: :active (un pequeño hundimiento).
 * «Reducir movimiento»: todo vive dentro de prefers-reduced-motion: no-preference. */
@media (prefers-reduced-motion: no-preference) {
  :root { --fx-curva: cubic-bezier(.2, .8, .2, 1); --fx-celeste: var(--info, #00d4ff); --fx-violeta: var(--violeta, #8b5cf6); --fx-rojo: var(--rojo, #ff2d55); }

  /* ---------- 1. Tarjetas: se levantan un poco y se enciende un brillo violeta ---------- */
  :is(.mc-tarjeta-enlace, .mc-torneo, .mc-opcion, .mc-dec-tarjeta, .mc-placa, .mc-mas-item, .editorial-card, .card, .tar-card,
      .club-social-section, .cuenta-seccion, .workspace-quick-card, .mc-exp-fila, .mc-pc-prop) {
    transition: transform .18s var(--fx-curva), border-color .18s ease;
  }
  :is(.mc-tarjeta-enlace, .mc-torneo, .mc-dec-tarjeta, .mc-placa, .editorial-card, .tar-card, .workspace-quick-card) { position: relative; }
  :is(.mc-tarjeta-enlace, .mc-torneo, .mc-dec-tarjeta, .mc-placa, .editorial-card, .tar-card, .workspace-quick-card)::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
    background: radial-gradient(120% 80% at 50% 0%, rgba(139, 92, 246, .16), transparent 60%);
    box-shadow: inset 0 0 0 1px rgba(139, 92, 246, .45), 0 8px 24px -12px rgba(139, 92, 246, .55);
    transition: opacity .2s ease;
  }

  @media (hover: hover) and (pointer: fine) {
    :is(.mc-tarjeta-enlace, .mc-torneo, .mc-dec-tarjeta, .mc-placa, .editorial-card, .tar-card, .workspace-quick-card, .mc-mas-item, .mc-opcion):hover { transform: translateY(-3px); }
    :is(.mc-tarjeta-enlace, .mc-torneo, .mc-dec-tarjeta, .mc-placa, .editorial-card, .tar-card, .workspace-quick-card):hover::after { opacity: 1; }
    :is(.club-social-section, .cuenta-seccion):hover { border-color: var(--linea-fuerte, #463f9a) !important; }
    .mc-exp-fila:hover, .mc-pc-prop:hover { transform: translateX(3px); }

    /* ---------- 2. Filas de tabla: barra de color a la izquierda y el escudo se acerca un poquito ---------- */
    :is(.standings-table, .pro-table, .mc-tray-tabla, .table-responsive > table) tbody tr:hover > :first-child { box-shadow: inset 3px 0 0 var(--fx-violeta); }
    :is(.standings-table, .pro-table) tbody tr:hover img { transform: scale(1.12); }
    /* Los tres primeros de la tabla: celeste; los últimos: rojo (descenso) */
    :is(.standings-table, .pro-table) tbody tr:nth-child(-n+3):hover > :first-child { box-shadow: inset 3px 0 0 var(--fx-celeste); }
    :is(.standings-table, .pro-table) tbody tr:nth-last-child(-n+2):nth-child(n+6):hover > :first-child { box-shadow: inset 3px 0 0 var(--fx-rojo); }

    /* ---------- 3. Botones y pestañas ---------- */
    :is(.mc-btn, .btn-secondary, .filtro-btn, .mc-chip, .mc-ir-hub, .search-input + button):hover { transform: translateY(-1px); }
    :is(.tab-btn, .filtro-btn):not(.active):not(.activo):hover::after { opacity: .55; transform: scaleX(1); }
    .mc-partido-cab:hover .mc-partido-goles { transform: scale(1.06); }
    .match-detail-club-link:hover img, .mc-eq:hover img { transform: scale(1.08) rotate(-2deg); }
    .editorial-card:hover img { transform: scale(1.04); }
    /* El 11: la ficha NO se mueve al pasar el mouse (su transform es el centrado translate(-50%,-50%)); el realce vive en el círculo (el11-estilos.css). */
  }
  :is(.standings-table, .pro-table) tbody tr img, .match-detail-club-link img, .mc-eq img, .mc-partido-goles { transition: transform .2s var(--fx-curva); }
  .editorial-card { overflow: hidden; }
  .editorial-card img { transition: transform .35s var(--fx-curva); }
  :is(.mc-btn, .btn-secondary, .filtro-btn, .mc-chip, .mc-ir-hub, .mc-opcion, .mc-dec-opcion, .mc-mas-item, .search-input + button) { transition: transform .14s var(--fx-curva), background-color .14s ease, border-color .14s ease; }

  /* Subrayado de pestañas: una línea violeta que crece desde el centro (capa aparte, sin mover el texto) */
  :is(.tab-btn, .filtro-btn) { position: relative; }
  :is(.liga-tabs-wrap, .editorial-tabs, .mc-dec-vistas) :is(.tab-btn, .filtro-btn)::after {
    content: ""; position: absolute; left: 14%; right: 14%; bottom: 2px; height: 2px; border-radius: 2px; pointer-events: none;
    background: linear-gradient(90deg, var(--fx-violeta), var(--fx-rojo)); opacity: 0; transform: scaleX(.3);
    transition: opacity .18s ease, transform .22s var(--fx-curva);
  }
  :is(.liga-tabs-wrap, .editorial-tabs, .mc-dec-vistas) :is(.tab-btn, .filtro-btn):is(.active, .activo)::after { opacity: 1; transform: scaleX(1); }

  /* ---------- 4. Al apretar: pequeño hundimiento (mouse y toque) ---------- */
  :is(.mc-tarjeta-enlace, .mc-torneo, .mc-dec-tarjeta, .mc-placa, .editorial-card, .tar-card, .workspace-quick-card, .mc-opcion, .mc-mas-item):active {
    transform: scale(.985); transition-duration: .08s;
  }
  :is(.btn-secondary, .filtro-btn, .mc-chip, .mc-ir-hub, .mc-dec-opcion, .hero-btn, .btn-primary, .search-input + button):active { transform: scale(.96) !important; transition: transform .08s ease-out; }
  :is(.standings-table, .pro-table, .mc-tray-tabla) tbody tr:active > * { opacity: .82; transition: opacity .06s; }
  .el11-puesto:active { transform: scale(.94); }

  /* Celular / pantallas táctiles: el toque se nota con un leve fondo violeta, sin quedarse «levantado» */
  @media (hover: none) {
    :is(.mc-tarjeta-enlace, .mc-torneo, .mc-dec-tarjeta, .mc-placa, .editorial-card, .tar-card, .workspace-quick-card):active::after { opacity: .7; transition-duration: .05s; }
  }
}

/* ---------- Banners y tarjetas grandes con botón (r17zj, Piero 02/11): se tocan ENTEROS, como el de Ticopa World ----------
 * JS: TicopaMarcadorNav.bannerClicable (09-marcador-nav.js) pone la clase, role="button", tabindex=0, Enter y Espacio. Lo usan: Analista táctico del Inicio (.mc-ia),
 * tarjetas de Herramientas del DT (.mc-herr) y «Cosas por decidir» (.mc-dec-entrada).
 * Los colores (borde, sombra, botón más claro) cambian siempre; el levantarse (transform) solo con movimiento permitido. Mouse: solo (hover: hover). */
.mc-banner-clic { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mc-banner-clic .mc-btn { cursor: pointer; }
.mc-banner-clic:focus-visible { outline: 2px solid var(--info, #00d4ff); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .mc-banner-clic:hover, .home-world-link:hover { border-color: var(--violeta, #8b5cf6) !important; box-shadow: 0 10px 28px -14px rgba(139, 92, 246, .65), inset 0 0 0 1px rgba(139, 92, 246, .45); }
  .mc-banner-clic:hover .mc-btn-rojo { background: #ff4a6c !important; }
  .mc-banner-clic:hover .mc-btn-violeta { background: #7f53f5 !important; }
}
@media (prefers-reduced-motion: no-preference) {
  .mc-banner-clic { transition: transform .18s var(--fx-curva, ease), border-color .18s ease, box-shadow .2s ease; }
  @media (hover: hover) and (pointer: fine) { .mc-banner-clic:hover { transform: translateY(-3px); } }
  .mc-banner-clic:active { transform: scale(.985); transition-duration: .08s; }
}