/* =========================================================================
   TicketCity.mx — Capa de optimización móvil
   Archivo: css/tc-movil.css        Versión 1.0

   REGLA DE ORO DE ESTE ARCHIVO
   -------------------------------------------------------------------------
   Ni un solo píxel visible cambia. Aquí no hay colores, ni tamaños de
   fuente, ni márgenes, ni proporciones nuevas. Todo lo que sigue es:

     · prevención de desbordamiento horizontal,
     · ampliación INVISIBLE de las áreas táctiles,
     · pistas de rendimiento para el motor de render (containment,
       aceleración por GPU, decodificación asíncrona),
     · respeto a las preferencias de accesibilidad del sistema.

   Va SIEMPRE en último lugar, después de style_redesign.css y de
   tc-flujo.css, para que pueda corregir sin recurrir a !important.
   ========================================================================= */


/* =========================================================================
   1. DESBORDAMIENTO HORIZONTAL
   -------------------------------------------------------------------------
   overflow-x: clip corta el excedente SIN crear un contenedor de scroll.
   Eso importa: 'hidden' habría roto position: sticky y habría vuelto
   inestables los botones flotantes (position: fixed). Se declara 'hidden'
   antes como respaldo para navegadores viejos y 'clip' después, que gana
   en los que lo soportan.
   ========================================================================= */
html {
    overflow-x: hidden;
    overflow-x: clip;

    /* Safari en iOS agranda por su cuenta la tipografía al girar el
       teléfono a horizontal. Esto lo desactiva y mantiene los tamaños
       exactamente como los definiste. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* -------------------------------------------------------------------------
   Los elementos de ancho fijo dentro de un contenedor flexible son la causa
   número uno de scroll horizontal en móvil. max-width: 100% sólo actúa
   cuando el elemento YA se estaba saliendo, así que en escritorio no
   cambia absolutamente nada.
   ------------------------------------------------------------------------- */
.main-wrapper img,
.main-wrapper svg:not(.tc-mapa-svg),
.main-wrapper video,
.main-wrapper iframe,
.tc-shell img,
.tc-shell iframe {
    max-width: 100%;
}

/* -------------------------------------------------------------------------
   Ítems flex con texto recortado.

   .venue-text-featured y .event-content-block declaran flex: 1 y contienen
   texto con white-space: nowrap + text-overflow: ellipsis. Un ítem flex
   tiene min-width: auto por defecto, así que se NIEGA a encogerse por
   debajo del ancho de su texto: en lugar de aparecer los puntos
   suspensivos, la tarjeta entera se desborda.

   min-width: 0 devuelve el permiso de encoger y hace que la elipsis que ya
   habías escrito por fin funcione. En pantallas anchas sobra espacio, así
   que el texto se ve idéntico.
   ------------------------------------------------------------------------- */
.event-content-block,
.venue-text-featured,
.event-card .event-content {
    min-width: 0;
}

/* Mismo motivo, en las filas del flujo de compra */
.tc-fila-dato .tc-fila-texto,
.tc-metodo-titulo {
    min-width: 0;
}

/* Palabras muy largas (correos, URLs, nombres de recinto) que empujan el
   layout en pantallas de 320 px */
.tc-fila-lugar,
.footer-contact a,
.tc-dato dd {
    overflow-wrap: break-word;
    word-break: break-word;
}


/* =========================================================================
   2. RENDIMIENTO DE PINTADO
   -------------------------------------------------------------------------
   .fondo-borroso aplica filter: blur(30px) sobre un PNG de ~250 KB, y hay
   uno por cada tarjeta de la cartelera. En un teléfono de gama media eso
   es el gasto más caro de toda la página al hacer scroll.

   contain: paint le dice al navegador que nada de lo que hay dentro de
   .contenedor-imagen puede pintarse fuera de sus límites. Como ese
   contenedor YA tiene overflow: hidden, el resultado en pantalla es
   idéntico, pero el navegador puede saltarse por completo el repintado de
   las tarjetas que están fuera de la vista.
   ========================================================================= */
.contenedor-imagen {
    contain: paint;
}

/* El desenfoque se resuelve una vez en la GPU en lugar de recalcularse en
   cada fotograma de scroll. El transform: scale(1.1) original se conserva
   tal cual; sólo se añade la promoción a capa propia. */
.fondo-borroso,
.fondo-borroso-carrusel {
    will-change: transform;
    backface-visibility: hidden;
}

/* Las imágenes de cartel se decodifican fuera del hilo principal.
   Es el equivalente en CSS del decoding="async" del HTML. */
.contenedor-imagen img,
.tc-poster {
    image-rendering: auto;
}

/* Marcador que aplica script_redesign.js cuando ninguna ruta candidata
   respondió. No es un estado de diseño: es lo que se ve en lugar del icono
   de imagen rota del navegador. */
.tc-img-sin-cartel {
    object-fit: contain;
    opacity: .55;
}


/* =========================================================================
   3. ÁREAS TÁCTILES
   -------------------------------------------------------------------------
   Todo lo de esta sección vive dentro de una consulta que sólo se cumple
   en pantallas táctiles sin puntero fino. En escritorio NADA de esto se
   aplica, así que el ratón sigue comportándose igual que siempre.

   La técnica: un ::after transparente y absoluto que extiende la zona
   sensible al toque hasta los 44 px recomendados, sin tocar el tamaño
   visual del botón ni el flujo del layout. Se extiende sólo en vertical
   para no invadir el área del elemento vecino.
   ========================================================================= */
@media (hover: none) and (pointer: coarse) {

    /* Elimina el retardo de ~300 ms que algunos navegadores móviles
       esperan por si el toque era un doble tap para hacer zoom. */
    a,
    button,
    .pill,
    .btn,
    .btn-obten,
    .btn-gradient,
    .btn-float,
    .theme-switch,
    .nav-link,
    .sponsor-logo,
    [data-url] {
        touch-action: manipulation;
    }

    /* --- Pastillas de categoría: 38 px reales -> 44 px táctiles --- */
    .pills-container .pill {
        position: relative;
    }

    .pills-container .pill::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        min-height: 44px;
        height: 100%;
    }

    /* --- Botón "Obtén tus boletos": ~35 px -> 44 px --- */
    .btn-obten {
        position: relative;
    }

    .btn-obten::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        min-height: 44px;
        height: 100%;
    }

    /* --- Iconos sociales: 19 px reales -> 44 px táctiles ---
       Se crece sólo en vertical. El gap de 15 px del contenedor se respeta,
       así que no hay riesgo de tocar Instagram queriendo tocar Facebook. */
    .social-links a,
    .footer-links a,
    .footer-contact a {
        position: relative;
        display: inline-block;
    }

    .social-links a::after,
    .footer-links a::after,
    .footer-contact a::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        min-height: 44px;
    }

    /* --- Interruptor de tema: 26 px de alto -> 44 px táctiles ---
       Los iconos de sol y luna ya tienen pointer-events: none en
       style_redesign.css, así que no interceptan el toque. */
    .theme-switch {
        position: relative;
    }

    .theme-switch::after {
        content: "";
        position: absolute;
        left: -4px;
        right: -4px;
        top: 50%;
        transform: translateY(-50%);
        min-height: 44px;
    }

    /* --- Flechas del carrusel ---
       Bootstrap ya les da un 15 % del ancho, pero el icono en sí es
       pequeño. Se garantiza el mínimo vertical. */
    .carousel-control-prev,
    .carousel-control-next {
        touch-action: manipulation;
    }

    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        min-width: 32px;
        min-height: 32px;
    }

    /* --- Botón de regreso del flujo de compra --- */
    .tc-back {
        position: relative;
        touch-action: manipulation;
    }

    .tc-back::after {
        content: "";
        position: absolute;
        inset: 50% auto auto 50%;
        width: 44px;
        height: 44px;
        transform: translate(-50%, -50%);
    }

    /* Excepción deliberada: las butacas del plano (.tc-seat, 19 px) NO se
       amplían. Están pegadas unas a otras y un área táctil mayor haría que
       el usuario seleccionara el asiento equivocado. Para ese caso el zoom
       del navegador es la solución correcta, y por eso se reactivó
       user-scalable en el <meta viewport>. */

    /* Los efectos :hover no existen en táctil y en algunos navegadores se
       quedan "pegados" tras el toque. Se neutralizan sólo aquí. */
    .event-card:hover,
    .event-card-featured:hover,
    .btn-gradient:hover,
    .btn-float:hover {
        transform: none;
    }
}


/* =========================================================================
   4. ACCESIBILIDAD Y PREFERENCIAS DEL SISTEMA
   ========================================================================= */

/* style_redesign.css declara una transición en el selector universal (*).
   Eso significa que CADA nodo del documento tiene una animación activa.
   No se toca, porque es lo que hace suave el cambio de tema claro/oscuro,
   pero sí se respeta a quien pidió menos movimiento en los ajustes del
   sistema: para esas personas la página deja de animar y de paso ahorra
   muchísimo trabajo de recálculo en gama baja. */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* El foco por teclado seguía dependiendo de outline: none en inputs y
   botones. :focus-visible sólo se dibuja cuando se navega con teclado,
   nunca al hacer clic o tocar, así que el aspecto con ratón y con dedo
   es exactamente el mismo de siempre. */
input:focus-visible,
button:focus-visible,
a:focus-visible,
.pill:focus-visible {
    outline: 2px solid var(--color-acento);
    outline-offset: 2px;
}