/*
 * evento.css
 * CSS estatico separado desde demo_cliente/modulos/evento.php
 * Fecha: 2026-05-11
 * Nota: los estilos que usan variables PHP se mantienen dentro de evento.php.
 */

/* ===== CSS movido desde modulos/evento.php - bloque 1, linea original 319 ===== */
/* Estilo para pantallas con ancho entre 320px y 490px (vista de tel�fono) */
    @media (min-width: 320px) and (max-width: 490px) {
        .mapouter {
            position: relative;
            /*left: 16px;*/
        }
    }

    /* Estilo para pantallas con ancho mayor o igual a 490px (vista de tablet y web) */
    @media (min-width: 491px) {
        .mapouter {
            position: relative;

        }
    }

    #btn-grabar {
        position: relative;
        left: 10px;
        top: 30px;
        width: 30%;
    }

    #load {
        width: 200px;
        height: 200px;
    }

    @media (min-width: 380px) {
        #load {
            width: 100px;
            height: 100px;
        }
    }

    #chart { width: 100%; height: 700px; margin: 20px 0; }
  #selection-info {
      background: #f8f9fa;
      padding: 15px;
      margin: 10px 0;
      border-radius: 8px;
      border: 1px solid #e9ecef;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 10px;
  }
  #selection-info strong {
      font-size: 1.1em;
      color: #333;
  }
  button {
      /*padding: 8px 16px;*/
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-weight: bold;
      transition: background 0.2s;
  }
  #confirm-reservation {
      background: #28a745;
      color: white;
      display: none;
  }
  #confirm-reservation:hover {
      background: #218838;
  }
  #clear-selection {
      background: #dc3545;
      color: white;
      display: none;
  }
  #clear-selection:hover {
      background: #c82333;
  }
  .status-info {
      margin-top: 10px;
      font-size: 0.9em;
      color: #666;
  }
  #mapaAsientos #chart{
    width: 100%;
  }

/* ===== TikTok Lazy + Placeholder (mejor UX) ===== */
.ts365-extras .ts365-video-placeholder{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#111;
  color:#fff;
  z-index:2;
  text-align:center;
  padding:18px;
}
.ts365-extras .ts365-spinner{
  width:34px;
  height:34px;
  border:3px solid rgba(255,255,255,.25);
  border-top-color:#fff;
  border-radius:50%;
  animation: ts365spin 1s linear infinite;
  margin:0 auto 10px auto;
}
@keyframes ts365spin{ to{ transform: rotate(360deg); } }
.ts365-extras .ts365-btn-play{
  margin-top:10px;
  padding:8px 14px;
  border-radius:10px;
  border:0;
  cursor:pointer;
  font-weight:600;
}


/* ===== CSS movido desde modulos/evento.php - bloque 2, linea original 468 ===== */
body {
            font-family: 'Arial', sans-serif;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
        }

        #boton_ruleta {
            padding: 15px 30px;
            font-size: 16px;
            background-color: #3498db;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        #boton_ruleta:hover {
            background-color: #2980b9;
            transform: scale(1.05);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }

        #boton_ruleta i {
            margin-right: 8px;
        }

        


        .countdown-container {
            display: flex;
            flex-wrap: nowrap;
            /* Mantener en una sola línea */
            gap: 20px;
            padding: 20px;
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.1);
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
            overflow-x: auto;
            /* En caso de que sea demasiado ancho, permite desplazamiento horizontal */
            justify-content: center;
            text-align: center;
        }

        .hidden {
            display: none;
        }

        .countdown {
            text-align: center;
            color: white;
        }

        .time {
            font-size: 4rem;
            background: rgba(0, 0, 0, 0.3);
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 10px;
        }

        .label {
            font-size: 1.2rem;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: #01b1d7 !important;
        }

        /* Responsividad para pantallas más pequeñas */
        @media (max-width: 768px) {
            .time {
                font-size: 3rem;
                padding: 15px;
            }

            .label {
                font-size: 1rem;
            }
            #descripcionEven{
                height: 140px !important;
                max-height: 140px !important;
                overflow-y: auto !important;
                resize: none !important;
                border-radius: 15px;
                -webkit-overflow-scrolling: touch;
            }
            /* Usa el alto dinámico real del teléfono (Android friendly) */
            #mapaAsientos .modal-dialog{
                margin: 8px !important;
                height: calc(100dvh - 16px) !important;
                max-height: calc(100dvh - 16px) !important;
            }

            #mapaAsientos .modal-content{
                height: 100% !important;
                max-height: 100% !important;
                display: flex !important;
                flex-direction: column !important;
            }

            #mapaAsientos .modal-body{
                flex: 1 1 auto !important;
                overflow-y: auto !important;
                -webkit-overflow-scrolling: touch;
            }

            /* Si tienes footer con botones */
            #mapaAsientos .modal-footer{
                padding-right: 90px !important;
                display: flex !important;
                flex-direction: column !important;
                align-items: flex-start !important;   /* <- CLAVE */
                text-align: left !important;           /* <- CLAVE */
                gap: 8px !important;
            }

            #mapaAsientos .modal-footer .btn{
                width: 100% !important;
                text-align: center !important;
                margin: 0 !important;                  /* <- evita desalineación */
            }

            #mapaAsientos .seatmap-footer-meta{
                width: 100%;
                background: #f8fafc;
                border: 1px solid #e2e8f0;
                border-radius: 14px;
                padding: 12px 14px;
                box-sizing: border-box;
            }

            #mapaAsientos .seatmap-counter{
                font-size: 15px;
                font-weight: 700;
                color: #0f172a;
                margin-bottom: 4px;
            }

            #mapaAsientos .seatmap-helper{
                font-size: 13px;
                color: #475569;
                line-height: 1.35;
            }

            #mapaAsientos .modal-footer{
                border-top: 1px solid #e5e7eb !important;
                background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
                padding: 16px 22px 20px !important;
            }

            #mapaAsientos .seatmap-footer-wrap{
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 18px;
                flex-wrap: wrap;
            }

            #mapaAsientos .seatmap-status{
                display: flex;
                align-items: center;
                gap: 14px;
                flex-wrap: wrap;
            }

            #mapaAsientos .seatmap-counter-pill{
                display: inline-flex;
                align-items: center;
                gap: 10px;
                min-height: 52px;
                padding: 10px 16px;
                border-radius: 18px;
                background: linear-gradient(135deg, #eff6ff 0%, #eef2ff 100%);
                border: 1px solid #bfdbfe;
                box-shadow: 0 10px 24px rgba(37, 99, 235, 0.10);
            }

            #mapaAsientos .seatmap-counter-icon{
                width: 34px;
                height: 34px;
                border-radius: 12px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
                color: #fff;
                font-size: 14px;
                box-shadow: 0 8px 20px rgba(37, 99, 235, 0.24);
            }

            #mapaAsientos .seatmap-counter{
                font-size: 15px;
                font-weight: 800;
                color: #0f172a;
                margin-bottom: 2px;
            }

            #mapaAsientos .seatmap-helper{
                font-size: 12px;
                color: #475569;
                line-height: 1.35;
            }

            #mapaAsientos .seatmap-actions{
                display: flex;
                align-items: center;
                justify-content: flex-end;
                gap: 12px;
                margin-left: auto;
            }

            #mapaAsientos .btn-seatmap{
                border: 0 !important;
                border-radius: 16px !important;
                min-height: 56px;
                padding: 12px 20px !important;
                font-weight: 800 !important;
                font-size: 15px !important;
                letter-spacing: -.01em;
                display: inline-flex !important;
                align-items: center;
                justify-content: center;
                gap: 10px;
                box-shadow: 0 14px 30px rgba(15, 23, 42, 0.14);
                transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease, filter .18s ease;
            }

            #mapaAsientos .btn-seatmap:hover{
                transform: translateY(-2px);
                filter: saturate(1.04);
            }

            #mapaAsientos .btn-seatmap:focus{
                outline: none !important;
                box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14), 0 14px 30px rgba(15, 23, 42, 0.14) !important;
            }

            #mapaAsientos .btn-seatmap .btn-seatmap-icon{
                width: 34px;
                height: 34px;
                border-radius: 12px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                font-size: 14px;
                flex: 0 0 auto;
            }

            #mapaAsientos .btn-seatmap .btn-seatmap-copy{
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                line-height: 1.05;
                text-align: left;
            }

            #mapaAsientos .btn-seatmap .btn-seatmap-title{
                font-size: 15px;
                font-weight: 800;
            }

            #mapaAsientos .btn-seatmap .btn-seatmap-subtitle{
                font-size: 11px;
                font-weight: 600;
                opacity: .86;
                margin-top: 4px;
            }

            #mapaAsientos .btn-seatmap-primary{
                min-width: 220px;
                background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 52%, #0ea5e9 100%) !important;
                color: #fff !important;
            }

            #mapaAsientos .btn-seatmap-primary .btn-seatmap-icon{
                background: rgba(255,255,255,.18);
                color: #fff;
            }

            #mapaAsientos .btn-seatmap-primary[disabled]{
                opacity: .6;
                box-shadow: none;
                filter: grayscale(.1);
            }

            #mapaAsientos .btn-seatmap-secondary{
                min-width: 180px;
                background: #ffffff !important;
                color: #0f172a !important;
                border: 1px solid #dbe2ea !important;
                box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
            }

            #mapaAsientos .btn-seatmap-secondary .btn-seatmap-icon{
                background: #eff3f7;
                color: #334155;
            }

            #mapaAsientos .modal-body{
                position: relative;
            }

            #mapaAsientos .seatmap-sync-overlay{
                position: absolute;
                inset: 0;
                background: rgba(255,255,255,.76);
                backdrop-filter: blur(4px);
                z-index: 20;
                display: none;
                align-items: center;
                justify-content: center;
                padding: 18px;
            }

            #mapaAsientos .seatmap-sync-overlay.is-active{
                display: flex;
            }

            #mapaAsientos .seatmap-sync-card{
                width: min(420px, 100%);
                background: rgba(255,255,255,.96);
                border: 1px solid #dbeafe;
                border-radius: 22px;
                box-shadow: 0 30px 60px rgba(15,23,42,.16);
                padding: 24px 22px;
                text-align: center;
            }

            #mapaAsientos .seatmap-sync-spinner{
                width: 52px;
                height: 52px;
                margin: 0 auto 14px;
                border-radius: 50%;
                border: 4px solid #dbeafe;
                border-top-color: #2563eb;
                animation: seatmapSpin 0.9s linear infinite;
            }

            #mapaAsientos .seatmap-sync-title{
                font-size: 18px;
                font-weight: 800;
                color: #0f172a;
                margin-bottom: 8px;
            }

            #mapaAsientos .seatmap-sync-text{
                font-size: 14px;
                line-height: 1.45;
                color: #475569;
            }

            @keyframes seatmapSpin{
                to{ transform: rotate(360deg); }
            }

            /* El chart no debe forzar más alto que el body */
            #mapaAsientos #chart{
                height: 62dvh !important;   /* ajusta 58–70 según tu diseño */
                min-height: 380px !important;
            }
        }

        @media (max-width: 768px) {
            #mapaAsientos .modal-footer{
                padding: 14px !important;
            }

            #mapaAsientos .seatmap-footer-wrap{
                align-items: stretch;
            }

            #mapaAsientos .seatmap-status,
            #mapaAsientos .seatmap-actions{
                width: 100%;
            }

            #mapaAsientos .seatmap-actions{
                display: grid !important;
                grid-template-columns: 1fr !important;
                gap: 10px !important;
                margin-left: 0 !important;
                justify-items: start !important;
            }

            #mapaAsientos .btn-seatmap-primary,
            #mapaAsientos .btn-seatmap-secondary{
                max-width: calc(100% - 58px) !important;
            }
        }

        @media (max-width: 480px) {
            .time {
                font-size: 2rem;
                padding: 10px;
            }

            .label {
                font-size: 0.8rem;
            }

            .countdown-container {
                gap: 10px;
                /* Espaciado más pequeño entre elementos */
            }
        }

        .row-centered {
            text-align: center;
        }

        .row-centered>[class*="col-"] {
            display: inline-block;
            float: none;
            text-align: left;
            /* opcional */
            vertical-align: middle;
        }
        #mapa-contenedor-zoom {
        /* Centrado si es necesario */
        text-align: center;
        /* Evita que el contenedor se deforme */
        position: relative;
        /* Asegura que el overflow no cause scroll no deseado */
        overflow: visible;
        /* Mantiene el tamaño natural */
        max-width: 100%;
    }

    #medidas_mapa {
        /* Evita estilos previos que puedan interferir */
        margin: 0;
        padding: 0;
        transform-origin: center center !important;
        will-change: transform;
        backface-visibility: hidden;
    }

    .carousel-wrapper {
    max-width: 1200px; /* Ancho máximo del carrusel */
    margin: 30px auto; /* Márgenes superior/inferior y centrado */
    padding: 0 15px;   /* Espacio en los laterales en móviles */
    box-sizing: border-box;
    }

    .carousel-container {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    background: #000;
    }

    .carousel1 {
    display: flex;
    transition: transform 0.6s ease-in-out;
    height: 400px; /* Altura fija del carrusel */
    width: 100%;
    }

    .carousel1 img {
    width: 100%;
    height: 100%;
    /*object-fit: cover;*/ /* Mantiene la imagen completa y centrada */
    flex-shrink: 0;
    }

    .carousel-dots {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
    }

    .carousel-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background-color 0.3s ease;
    }

    .carousel-dot.active {
    background-color: #fff;
    }

    /* Responsivo: Reduce tamaño en pantallas pequeñas */
    @media (max-width: 768px) {
    .carousel-wrapper {
        padding: 0 10px;
    }
    .carousel1 {
        height: 250px;
    }
    }

    @media (max-width: 480px) {
    .carousel1 {
        height: 200px;
    }
    }
    #chart {
        width: 100%;
        max-width: 800px;
        height: 400px;
        margin: 0 auto;
    }

    .seat-label {
        font-size: 10px !important;
        line-height: 1.2 !important;
        white-space: pre-line !important;
    }

    #guardarBtn {
        margin-top: 20px;
        padding: 10px 20px;
        background: #007bff;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }
    #guardarBtn:hover {
        background: #0056b3;
    }
    .toast { position: fixed; right: 16px; bottom: 16px; background: #111; color:#fff; padding:10px 14px; border-radius:10px; opacity:.95; display:none; z-index:9999;}
    /* Contenedor para hacer scroll horizontal solo si es necesario */
    .table-responsive-wrapper {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* suaviza scroll en iOS */
        padding-bottom: 10px;
    }

    /* Asegurar que la tabla no rompa el layout */
    #tablePrice {
        min-width: 100%; /* asegura que ocupe todo el contenedor */
        width: auto;      /* permite crecer si es necesario, pero dentro del scroll */
        border-collapse: collapse !important;
    }
    @media (max-width: 767px) {
        #contPrice {
            padding-left: 0 !important;
            padding-right: 0 !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
        }
         /* Forzar que los selects y botones no expandan la tabla */
        #tablePrice select,
        #tablePrice input,
        #tablePrice button,
        #tablePrice .boton_ip {
            max-width: 143px; /* o el valor que necesites */
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .contenedor-descripcion-evento,
        .descripcion-evento-scroll {
            max-height: none !important;
            overflow: visible !important;
        }
    }
    /* Ajuste específico para iOS y móviles pequeños */
    @media screen and (max-width: 767px) {
        /* Reducir fuente en toda la tabla */
        #tablePrice,
        #tablePrice td,
        #tablePrice th,
        #tablePrice span,
        #tablePrice select,
        #tablePrice .btn {
            font-size: 10px !important;
            line-height: 1.2 !important;
        }

        /* Asegurar que los selects no sean anchos */
        #tablePrice select.canti_ip {
            width: 60px !important;
            padding: 2px 4px !important;
            font-size: 11px !important;
        }

        /* Ajustar paddings internos */
        #tablePrice td {
            padding: 6px 4px !important;
        }

        /* Evitar que los botones o textos se expandan */
        .btn-ip,
        .boton_ip,
        #botonAbrir {
            font-size: 11px !important;
            padding: 4px 6px !important;
            min-width: auto !important;
            white-space: nowrap;
        }

        /* Si hay columnas fijas como precios o descripciones */
        #datePrev,
        #spanLoCar,
        .tdLocali span {
            white-space: normal !important;
            word-break: break-word !important;
            width: 137px;
        }
    }

    /* Solución extra solo para iOS */
    @supports (-webkit-touch-callout: none) {
        @media screen and (max-width: 767px) {
            #tablePrice {
                font-size: 11.5px !important;
            }
            #tablePrice select.canti_ip {
                font-size: 10.5px !important;
            }
        }
    }
   @media (min-width: 768px) {
        #contenedor-descripcion-evento {
            height: 420px;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        #descripcionEven {
            flex: 1 1 auto;
            min-height: 0;
            width: 100%;
            color: #01b3d5;
            background-color: transparent;
            font-weight: bold;
            border-radius: 15px;
            overflow-y: auto;
            overflow-x: hidden;
            padding-right: 8px;
            word-break: break-word;
        }
    }
    #mapa-contenedor-zoom,
    #mapa-contenedor-zoom * {
        overflow: visible !important;
    }
    html, body {
        width: 100%;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: auto !important; /* evita momentum scroll */
    }
    /* FIX: permite scroll normal de la página */
    html, body{
    height: auto !important;
    min-height: 100% !important;
    }

    body{
    display: block !important;
    align-items: initial !important;
    justify-content: initial !important;
    }

    /* ===== Seatmap footer buttons: mismo diseño en web y móvil ===== */
    #mapaAsientos .modal-footer{
        border-top: 1px solid #e5e7eb !important;
        background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
        padding: 16px 22px 20px !important;
    }

    #mapaAsientos .seatmap-footer-wrap{
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 18px !important;
        flex-wrap: wrap !important;
    }

    #mapaAsientos .seatmap-status{
        display: flex !important;
        align-items: center !important;
        gap: 14px !important;
        flex-wrap: wrap !important;
    }

    #mapaAsientos .seatmap-counter-pill{
        display: inline-flex !important;
        align-items: center !important;
        gap: 10px !important;
        min-height: 58px !important;
        padding: 12px 18px !important;
        border-radius: 18px !important;
        background: linear-gradient(135deg, #eff6ff 0%, #eef2ff 100%) !important;
        border: 1px solid #bfdbfe !important;
        box-shadow: 0 10px 24px rgba(37, 99, 235, 0.10) !important;
        box-sizing: border-box !important;
    }

    #mapaAsientos .seatmap-counter-icon{
        width: 38px !important;
        height: 38px !important;
        border-radius: 13px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
        color: #fff !important;
        font-size: 15px !important;
        box-shadow: 0 8px 20px rgba(37, 99, 235, 0.24) !important;
        flex: 0 0 auto !important;
    }

    #mapaAsientos .seatmap-counter{
        font-size: 15px !important;
        font-weight: 800 !important;
        color: #0f172a !important;
        margin-bottom: 2px !important;
    }

    #mapaAsientos .seatmap-helper{
        font-size: 12px !important;
        color: #475569 !important;
        line-height: 1.35 !important;
    }

    #mapaAsientos .seatmap-actions{
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 12px !important;
        margin-left: auto !important;
    }

    #mapaAsientos .btn-seatmap{
        border: 0 !important;
        border-radius: 18px !important;
        min-height: 56px !important;
        padding: 12px 22px !important;
        font-weight: 800 !important;
        font-size: 15px !important;
        letter-spacing: -.01em !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        box-shadow: 0 14px 30px rgba(15, 23, 42, 0.14) !important;
        transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease, filter .18s ease !important;
        text-decoration: none !important;
        text-align: left !important;
    }

    #mapaAsientos .btn-seatmap:hover{
        transform: translateY(-2px) !important;
        filter: saturate(1.04) !important;
    }

    #mapaAsientos .btn-seatmap:focus{
        outline: none !important;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14), 0 14px 30px rgba(15, 23, 42, 0.14) !important;
    }

    #mapaAsientos .btn-seatmap .btn-seatmap-icon{
        width: 34px !important;
        height: 34px !important;
        border-radius: 12px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 14px !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        position: static !important;
        left: auto !important;
        transform: none !important;
    }

    #mapaAsientos .btn-seatmap .btn-seatmap-copy{
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;
        line-height: 1.05 !important;
        text-align: left !important;
        min-width: 0 !important;
        margin: 0 !important;
        position: static !important;
        left: auto !important;
        transform: none !important;
    }

    #mapaAsientos .btn-seatmap .btn-seatmap-title{
        font-size: 15px !important;
        font-weight: 800 !important;
        white-space: nowrap !important;
    }

    #mapaAsientos .btn-seatmap .btn-seatmap-subtitle{
        font-size: 11px !important;
        font-weight: 600 !important;
        opacity: .86 !important;
        margin-top: 4px !important;
        white-space: nowrap !important;
    }

    #mapaAsientos .btn-seatmap-primary{
        min-width: 305px !important;
        background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 52%, #60a5fa 100%) !important;
        color: #fff !important;
    }

    #mapaAsientos .btn-seatmap-primary .btn-seatmap-icon{
        background: rgba(255,255,255,.18) !important;
        color: #fff !important;
    }

    #mapaAsientos .btn-seatmap-primary[disabled]{
        opacity: .72 !important;
        box-shadow: none !important;
        filter: grayscale(.05) !important;
    }

    #mapaAsientos .btn-seatmap-secondary{
        min-width: 210px !important;
        background: #ffffff !important;
        color: #0f172a !important;
        border: 1px solid #dbe2ea !important;
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08) !important;
    }

    #mapaAsientos .btn-seatmap-secondary .btn-seatmap-icon{
        background: #eff3f7 !important;
        color: #334155 !important;
    }

    @media (max-width: 768px) {
        #mapaAsientos .modal-dialog{
            margin: 8px !important;
            height: calc(100dvh - 16px) !important;
            max-height: calc(100dvh - 16px) !important;
        }

        #mapaAsientos .modal-content{
            height: 100% !important;
            max-height: 100% !important;
            display: flex !important;
            flex-direction: column !important;
        }

        #mapaAsientos .modal-body{
            flex: 1 1 auto !important;
            overflow-y: auto !important;
            -webkit-overflow-scrolling: touch !important;
            position: relative !important;
        }

        #mapaAsientos .modal-footer{
            padding: 14px 14px 14px 14px !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: stretch !important;
            text-align: left !important;
            gap: 12px !important;
        }

        #mapaAsientos .modal-footer .btn{
            width: 100% !important;
            margin: 0 !important;
        }

        #mapaAsientos .seatmap-footer-wrap{
            width: 100% !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: stretch !important;
            justify-content: flex-start !important;
            gap: 12px !important;
        }

        #mapaAsientos .seatmap-status,
        #mapaAsientos .seatmap-actions{
            width: 100% !important;
        }

        #mapaAsientos .seatmap-status{
            display: block !important;
        }

        #mapaAsientos .seatmap-counter-pill{
            width: 100% !important;
            min-height: 0 !important;
            padding: 11px 14px !important;
            border-radius: 17px !important;
        }

        #mapaAsientos .seatmap-actions{
            display: grid !important;
            grid-template-columns: 1fr !important;
            gap: 12px !important;
            margin-left: 0 !important;
        }

        #mapaAsientos .btn-seatmap,
        #mapaAsientos .btn-seatmap-primary,
        #mapaAsientos .btn-seatmap-secondary{
            width: calc(100% - 70px) !important;
            max-width: calc(100% - 70px) !important;
            min-width: 0 !important;
            min-height: 48px !important;
            border-radius: 17px !important;
            padding: 10px 16px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: flex-start !important;
            text-align: left !important;
            gap: 10px !important;
        }

        #mapaAsientos .btn-seatmap .btn-seatmap-icon{
            width: 30px !important;
            height: 30px !important;
            border-radius: 10px !important;
            font-size: 13px !important;
            margin: 0 !important;
            position: static !important;
            left: auto !important;
        }

        #mapaAsientos .btn-seatmap .btn-seatmap-copy{
            display: flex !important;
            flex-direction: column !important;
            justify-content: center !important;
            align-items: flex-start !important;
            text-align: left !important;
            margin: 0 !important;
            position: static !important;
            left: auto !important;
            min-width: 0 !important;
        }

        #mapaAsientos .btn-seatmap .btn-seatmap-title{
            font-size: 14px !important;
        }

        #mapaAsientos .btn-seatmap .btn-seatmap-subtitle{
            font-size: 10px !important;
            white-space: normal !important;
        }
    }


/* ===== TS365 EVENTO MODERNO 2026 ===== */
:root{
  --ts-orange:#ff7a00;
  --ts-orange-2:#ff9b22;
  --ts-blue:#0d223f;
  --ts-cyan:#01b3d5;
  --ts-bg:#f5f7fb;
  --ts-text:#142033;
  --ts-muted:#667085;
  --ts-card:#ffffff;
  --ts-line:#e8eef6;
  --ts-shadow:0 18px 45px rgba(13,34,63,.10);
  --ts-shadow-soft:0 10px 30px rgba(13,34,63,.08);
}
html,body{background:var(--ts-bg)!important;color:var(--ts-text)!important;}
#cuerpoEventos{background:var(--ts-bg)!important;padding:22px 0 50px!important;}
.arrows,.arrows-small,#contenedor-menu-pasos,#contenedor-mini-menu{display:none!important;height:0!important;overflow:hidden!important;margin:0!important;padding:0!important;}
.ts365-event-page{width:min(1210px,calc(100% - 38px));margin:0 auto;}
.ts365-hero{position:relative;min-height:430px;border-radius:28px;overflow:hidden;background:#111;box-shadow:var(--ts-shadow);margin:18px 0 24px;isolation:isolate;}
.ts365-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.ts365-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,16,32,.88) 0%,rgba(6,16,32,.56) 44%,rgba(6,16,32,.08) 100%),linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.45));z-index:1;}
.ts365-hero-content{position:relative;z-index:2;min-height:430px;display:flex;flex-direction:column;justify-content:flex-end;padding:44px 48px;color:#fff;max-width:760px;}
.ts365-eyebrow{display:inline-flex;width:max-content;align-items:center;gap:8px;background:rgba(255,122,0,.16);border:1px solid rgba(255,122,0,.42);color:#fff;padding:9px 14px;border-radius:999px;font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px;backdrop-filter:blur(8px);}
.ts365-hero-title{font-size:clamp(31px,4.6vw,62px);line-height:1.02;margin:0 0 17px;font-weight:950;letter-spacing:-.045em;text-shadow:0 10px 28px rgba(0,0,0,.25);}
.ts365-event-meta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:25px;}
.ts365-meta-pill{display:inline-flex;align-items:center;gap:9px;border-radius:16px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.18);padding:10px 13px;font-weight:800;backdrop-filter:blur(8px);}
.ts365-hero-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;}
.ts365-primary-btn{border:0!important;border-radius:999px!important;background:linear-gradient(135deg,var(--ts-orange),var(--ts-orange-2))!important;color:#fff!important;padding:15px 28px!important;font-weight:950!important;box-shadow:0 16px 30px rgba(255,122,0,.30)!important;text-decoration:none!important;display:inline-flex;align-items:center;gap:10px;transition:.22s ease!important;}
.ts365-primary-btn:hover{transform:translateY(-2px);filter:saturate(1.04);color:#fff!important;text-decoration:none!important;}
.ts365-note{background:#fff;border:1px solid var(--ts-line);border-left:5px solid var(--ts-orange);border-radius:20px;padding:18px 20px;margin-bottom:22px;box-shadow:var(--ts-shadow-soft);font-weight:750;color:#334155;line-height:1.55;}
.ts365-main-grid{display:grid;grid-template-columns:1fr;gap:22px;align-items:start;margin-bottom:24px;}
.ts365-main-grid > *{min-width:0;width:100%;}
.ts365-card-modern{background:var(--ts-card);border:1px solid var(--ts-line);border-radius:24px;box-shadow:var(--ts-shadow-soft);overflow:hidden;}
.ts365-card-body{padding:26px;}
.ts365-section-kicker{color:var(--ts-orange);font-size:12px;font-weight:950;letter-spacing:.13em;text-transform:uppercase;margin-bottom:8px;}
.ts365-section-title{color:var(--ts-blue);font-size:clamp(22px,2.5vw,34px);line-height:1.12;font-weight:950;margin:0 0 18px;letter-spacing:-.035em;}
.ts365-desc{font-size:15px;line-height:1.72;color:#334155;max-height:510px;overflow:auto;padding-right:8px;}
.ts365-desc::-webkit-scrollbar{width:7px}.ts365-desc::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:999px}
.ts365-info-list{display:grid;gap:12px;margin:0;padding:0;list-style:none;}
.ts365-info-list li{display:flex;gap:12px;align-items:flex-start;padding:13px 14px;border-radius:16px;background:#f8fafc;border:1px solid #eef2f7;color:#334155;font-weight:750;}
.ts365-info-list i{color:var(--ts-orange);font-size:16px;margin-top:2px;min-width:18px;text-align:center;}
.ts365-promo{margin-top:18px;padding:15px;border-radius:18px;background:linear-gradient(135deg,#fff7ed,#fff);border:1px solid #fed7aa;color:#9a3412;font-weight:850;text-align:center;}
.ts365-localidades-card{position:relative;top:auto;width:100%;}
.ts365-localidades-head{padding:22px 24px;background:linear-gradient(135deg,var(--ts-blue),#132d52);color:#fff;}
.ts365-localidades-head h2{margin:0;font-size:25px;font-weight:950;letter-spacing:-.02em;}
.ts365-localidades-head p{margin:6px 0 0;color:rgba(255,255,255,.76);font-weight:650;}
#video{margin:0!important;}
#contPrice{width:100%!important;float:none!important;margin:0!important;padding:24px!important;background:#fff!important;border-radius:0 0 24px 24px!important;box-shadow:none!important;color:var(--ts-text)!important;scroll-margin-top:155px;}
#contPrice table,#tablePrice{border-collapse:separate!important;border-spacing:0 12px!important;width:100%!important;min-width:0!important;}
#tablePrice tr{background:#fff!important;border-radius:18px!important;box-shadow:0 8px 22px rgba(13,34,63,.08)!important;transition:.2s ease!important;}
#tablePrice tr:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(13,34,63,.12)!important;}
#tablePrice td,#tablePrice th{border:0!important;border-top:1px solid #eef2f7!important;border-bottom:1px solid #eef2f7!important;padding:14px 15px!important;vertical-align:middle!important;background:#fff!important;color:#0f172a!important;font-size:14px!important;}
#tablePrice td:first-child{border-left:1px solid #eef2f7!important;border-radius:18px 0 0 18px!important;font-weight:950!important;color:var(--ts-blue)!important;}
#tablePrice td:last-child{border-right:1px solid #eef2f7!important;border-radius:0 18px 18px 0!important;font-weight:950!important;color:var(--ts-orange)!important;}
#tablePrice select.canti_ip,#tablePrice select{border:1px solid #dbe7f3!important;border-radius:12px!important;min-height:42px!important;padding:8px 12px!important;background:#fff!important;color:#0f172a!important;font-weight:800!important;}
#tablePrice .btn,#tablePrice button,.boton_ip,#botonAbrir{border:0!important;border-radius:999px!important;background:linear-gradient(135deg,var(--ts-orange),var(--ts-orange-2))!important;color:#fff!important;font-weight:950!important;padding:11px 16px!important;box-shadow:0 10px 22px rgba(255,122,0,.25)!important;}
.ts365-extras{width:min(1210px,calc(100% - 38px))!important;margin:24px auto!important;padding:0!important;}
.ts365-extras .ts365-wrap{gap:22px!important;}
.ts365-extras .ts365-card{background:#fff;border:1px solid var(--ts-line);border-radius:24px;box-shadow:var(--ts-shadow-soft);padding:14px;overflow:hidden;}
.ts365-extras .ts365-title.panel{background:transparent!important;border:0!important;color:var(--ts-blue)!important;font-size:17px!important;font-weight:950!important;text-align:left!important;padding:5px 6px 12px!important;margin:0!important;box-shadow:none!important;}
.ts365-extras .ts365-title.panel::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ts-orange);margin-right:8px;vertical-align:middle;}
.ts365-extras .ts365-frame{border-radius:18px!important;height:390px!important;background:#0f172a!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)!important;}
.ts365-extras .ts365-frame-spotify{background:#fff!important;height:auto!important;}
.carousel-wrapper{width:min(1210px,calc(100% - 38px))!important;max-width:none!important;margin:24px auto!important;padding:0!important;}
.carousel-container{border-radius:26px!important;box-shadow:var(--ts-shadow)!important;}
.carousel1{height:420px!important;background:#111!important;}
.carousel1 img{object-fit:cover!important;}
.contenedor-evento{width:min(1210px,calc(100% - 38px));margin:26px auto!important;background:#fff;border-radius:24px;box-shadow:var(--ts-shadow-soft);padding:20px!important;}
.fila-redes-sociales{margin-bottom:14px;}
.icono-red-social{background:var(--ts-blue)!important;color:#fff!important;border-radius:14px!important;min-height:50px!important;margin-right:7px!important;text-align:center!important;}
.end-social h2,#artista-red-social{font-size:16px!important;color:var(--ts-blue)!important;font-weight:900!important;}
@media(max-width:991px){
  .ts365-event-page{width:min(100% - 24px,760px);} .ts365-hero{min-height:360px;border-radius:24px;margin-top:12px}.ts365-hero-content{min-height:360px;padding:30px 24px}.ts365-main-grid{display:flex;flex-direction:column}.ts365-localidades-card{position:relative;top:auto;order:-1;width:100%}.ts365-info-card{width:100%}.ts365-extras{width:min(100% - 24px,760px)!important}.ts365-extras .ts365-frame{height:315px!important}.carousel-wrapper{width:min(100% - 24px,760px)!important}.carousel1{height:260px!important}.contenedor-evento{width:min(100% - 24px,760px)!important}
}
@media(max-width:767px){
  #cuerpoEventos{padding-top:10px!important}.ts365-hero{min-height:315px;border-radius:20px}.ts365-hero::after{background:linear-gradient(180deg,rgba(6,16,32,.18),rgba(6,16,32,.86))}.ts365-hero-content{min-height:315px;padding:24px 18px}.ts365-event-meta{gap:8px}.ts365-meta-pill{width:100%;font-size:12px;padding:10px 12px}.ts365-primary-btn{width:100%;justify-content:center}.ts365-card-body{padding:20px}.ts365-section-title{font-size:24px}.ts365-desc{max-height:none;overflow:visible;font-size:14px}.ts365-localidades-head{padding:19px 20px}#contPrice{padding:14px!important}.ts365-extras .ts365-frame{height:285px!important}.ts365-extras .ts365-frame-spotify iframe{height:352px!important}#tablePrice,#tablePrice tbody,#tablePrice tr,#tablePrice td{display:block!important;width:100%!important}#tablePrice tr{margin-bottom:14px!important;border:1px solid #eef2f7!important;border-radius:18px!important;overflow:hidden!important}#tablePrice td{border:0!important;border-radius:0!important;padding:10px 13px!important;text-align:left!important}#tablePrice td:first-child{border-radius:0!important;background:#f8fafc!important}#tablePrice td:last-child{border-radius:0!important}.carousel1{height:220px!important}
}
/* ===== CORRECCION 2026-05-11: LOCALIDADES E INTERVALOS SIN HUECOS ===== */
.ts365-main-grid{grid-template-columns:1fr!important;}
.ts365-info-card,.ts365-localidades-card{width:100%!important;max-width:100%!important;}
.ts365-localidades-card{position:relative!important;top:auto!important;margin-top:0!important;}
.ts365-localidades-head{border-radius:24px 24px 0 0;}
.ts365-localidades-card .row{margin-left:0!important;margin-right:0!important;}
.ts365-localidades-card [class*="col-"]{min-width:0;}
.ts365-localidades-card #video{display:block!important;width:100%!important;}
.ts365-localidades-card .cnt_pr_1{display:block!important;width:100%!important;max-width:100%!important;}
.ts365-localidades-card .intervalos-wrap{box-shadow:none!important;border:0!important;border-radius:0!important;padding:24px!important;background:#fff!important;}
.ts365-localidades-card .intervalos-header{align-items:center!important;margin-bottom:18px!important;}
.ts365-localidades-card .intervalos-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:16px!important;}
.ts365-localidades-card .intervalos-card{border-radius:18px!important;padding:18px!important;background:#fbfdff!important;}
.ts365-localidades-card .calendar-input,.ts365-localidades-card .intervalos-select{width:100%!important;min-height:48px!important;border-radius:14px!important;}
.ts365-localidades-card .intervalos-localidades{margin-top:18px!important;}
.ts365-localidades-card .flatpickr-calendar{z-index:999999!important;}
#tablePrice{table-layout:auto!important;}
#tablePrice td:nth-child(1){width:28%!important;}
#tablePrice td:nth-child(2){width:42%!important;}
#tablePrice td:nth-child(3){width:16%!important;text-align:center!important;}
#tablePrice td:nth-child(4){width:14%!important;text-align:right!important;white-space:nowrap!important;}
@media(max-width:767px){
  .ts365-localidades-card{order:-1!important;}
  .ts365-localidades-card .intervalos-wrap{padding:16px!important;}
  .ts365-localidades-card .intervalos-header{display:block!important;}
  .ts365-localidades-card .intervalos-badge{display:inline-block!important;margin-top:10px!important;}
  .ts365-localidades-card .intervalos-grid{grid-template-columns:1fr!important;}
}


/* ===== FIX FINAL 2026-05-11: HUECOS / CALENDARIO / SCROLL DESCRIPCION ===== */
@media (min-width: 992px){
  .ts365-main-grid{
    display:grid!important;
    grid-template-columns:minmax(0, 1fr) minmax(390px, 430px)!important;
    gap:26px!important;
    align-items:start!important;
  }
  .ts365-info-card,.ts365-localidades-card{width:100%!important;max-width:100%!important;}
  .ts365-info-card .ts365-card-body{max-height:585px!important;overflow:hidden!important;}
  .ts365-info-card .ts365-desc,.ts365-info-card #descripcionEven{max-height:430px!important;overflow-y:auto!important;overflow-x:hidden!important;padding-right:10px!important;}
  .ts365-localidades-card #tablePrice,
  .ts365-localidades-card #tablePrice tbody,
  .ts365-localidades-card #tablePrice tr,
  .ts365-localidades-card #tablePrice td{display:block!important;width:100%!important;}
  .ts365-localidades-card #tablePrice{border-spacing:0!important;}
  .ts365-localidades-card #tablePrice tr{margin-bottom:12px!important;border:1px solid #eef2f7!important;border-radius:18px!important;overflow:hidden!important;}
  .ts365-localidades-card #tablePrice td{border:0!important;border-radius:0!important;padding:10px 13px!important;text-align:left!important;}
  .ts365-localidades-card #tablePrice td:first-child{background:#f8fafc!important;font-size:13px!important;}
  .ts365-localidades-card #tablePrice td:last-child{text-align:right!important;font-size:16px!important;}
  .ts365-localidades-card .intervalos-wrap{padding-bottom:34px!important;}
}
@media (max-width: 991px){
  .ts365-main-grid{display:flex!important;flex-direction:column!important;gap:22px!important;}
  .ts365-localidades-card{order:0!important;}
  .ts365-info-card .ts365-desc,.ts365-info-card #descripcionEven{max-height:430px!important;overflow-y:auto!important;overflow-x:hidden!important;padding-right:8px!important;}
}
.ts365-card-modern,.ts365-localidades-card,.ts365-localidades-card .intervalos-wrap,.ts365-localidades-card .intervalos-card,.ts365-localidades-card #video,.ts365-localidades-card #contPrice{overflow:visible!important;}
.ts365-localidades-card{z-index:20!important;}
.ts365-localidades-card .intervalos-wrap{position:relative!important;z-index:25!important;}
.ts365-localidades-card .flatpickr-calendar,.flatpickr-calendar.open{z-index:9999999!important;}
.ts365-localidades-card .intervalos-grid{overflow:visible!important;}
#cuerpoEventos{padding-top:0!important;margin-top:0px!important;}
.ts365-event-page{margin-top:0!important;}
.ts365-hero{margin-top:0!important;}
@media (max-width: 991px){#cuerpoEventos{margin-top:25px!important;}}


/* ===== CSS movido desde modulos/evento.php - bloque 3, linea original 1851 ===== */
.row-centered-flex {
                            display: flex;
                            justify-content: center;
                            flex-wrap: nowrap;
                            gap: 20px;
                        }
                        .row-centered-flex > [class*="col-"] {
                            float: none !important;
                        }

                        /* En pantallas pequeñas (ej. móviles), desactivar flex */
                        @media (max-width: 768px) {
                            .row-centered-flex {
                                display: block !important;
                            }
                        }


/* ===== CSS movido desde modulos/evento.php - bloque 4, linea original 1888 ===== */
/* ===== TS365 EXTRAS: MAPA / SPOTIFY / VIDEO ===== */
.ts365-extras{ width:100%; margin:0 auto; padding:0; }
.ts365-extras .ts365-wrap{ display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch; gap:20px; }
.ts365-extras .ts365-card{ width:100%; max-width:680px; }
.ts365-extras .ts365-title{ width:100%; margin:0 0 8px 0 !important; text-align:center; font-weight:700; }
.ts365-extras .ts365-frame{ width:100%; height:360px; border-radius:12px; overflow:hidden; background:#000; position:relative; display:flex; align-items:center; justify-content:center; }
.ts365-extras .ts365-frame iframe,
.ts365-extras .ts365-frame img,
.ts365-extras .ts365-frame video{ width:100% !important; height:100% !important; border:0 !important; display:block; }
.ts365-extras .ts365-frame img{ object-fit:contain; background:#111; }
.ts365-extras .ts365-frame-spotify{ height:auto; background:transparent; }
.ts365-extras .ts365-frame-spotify iframe{ height:352px !important; }
.ts365-extras #mapa-contenedor-zoom{ width:100%; height:100%; position:relative; }
.ts365-extras #mapa-contenedor-zoom img{ width:100% !important; height:100% !important; object-fit:contain; }

/* Overlay para activar sonido al primer click */
.ts365-sound-overlay{ position:absolute; inset:0; z-index:30; background:rgba(0,0,0,.58); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; text-align:center; padding:18px; }
.ts365-sound-overlay:hover{ background:rgba(0,0,0,.72); }
.ts365-sound-box{ background:rgba(0,0,0,.68); padding:18px 22px; border-radius:18px; font-weight:800; font-size:16px; box-shadow:0 12px 30px rgba(0,0,0,.35); line-height:1.25; }
.ts365-sound-icon{ font-size:38px; display:block; margin-bottom:8px; }
.ts365-sound-small{ display:block; font-size:12px; font-weight:600; opacity:.86; margin-top:6px; }

@media (min-width:992px){
  .ts365-extras .ts365-wrap.cols-1 .ts365-card{ flex:0 0 66%; max-width:66%; }
  .ts365-extras .ts365-wrap.cols-2 .ts365-card{ flex:0 0 calc(50% - 20px); max-width:calc(50% - 20px); }
  .ts365-extras .ts365-wrap.cols-3 .ts365-card{ flex:0 0 calc(33.333% - 20px); max-width:calc(33.333% - 20px); }
}
@media (max-width:991px){
  .ts365-extras .ts365-card{ max-width:100%; }
  .ts365-extras .ts365-frame{ height:320px; }
  .ts365-extras .ts365-frame-spotify iframe{ height:352px !important; }
}


/* ===== CSS movido desde modulos/evento.php - bloque 5, linea original 2188 ===== */
.gmap_canvas {
                                                        overflow: hidden;
                                                        background: none !important;
                                                        height: 350;
                                                        width: 50%;
                                                        margin-top: 25px;
                                                    }
                                                
/* ===== FIX DEFINITIVO TS365: dos modelos de evento, sin huecos y sin calendario cortado ===== */
@media (min-width: 992px){
  .ts365-main-grid{
    display:grid!important;
    grid-template-columns:minmax(0, 1fr) minmax(430px, 430px)!important;
    gap:26px!important;
    align-items:start!important;
  }

  /* La descripcion no debe crecer infinito: el texto largo scrollea dentro */
  .ts365-info-card{
    align-self:start!important;
  }
  .ts365-info-card .ts365-card-body{
    max-height:560px!important;
    overflow:hidden!important;
  }
  .ts365-info-card .ts365-desc,
  .ts365-info-card #descripcionEven{
    max-height:410px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding-right:12px!important;
  }

  /* La columna de compra no puede crecer infinito si hay muchas localidades */
  .ts365-localidades-card{
    align-self:start!important;
    overflow:visible!important;
  }
  .ts365-localidades-card #contPrice{
    max-height:430px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding:20px!important;
    border-radius:0 0 24px 24px!important;
  }
  .ts365-localidades-card #contPrice::-webkit-scrollbar,
  .ts365-info-card #descripcionEven::-webkit-scrollbar,
  .ts365-info-card .ts365-desc::-webkit-scrollbar{width:7px!important;}
  .ts365-localidades-card #contPrice::-webkit-scrollbar-thumb,
  .ts365-info-card #descripcionEven::-webkit-scrollbar-thumb,
  .ts365-info-card .ts365-desc::-webkit-scrollbar-thumb{background:#cbd5e1!important;border-radius:999px!important;}

  /* En sidebar angosto los intervalos deben ir verticales, no en 2 columnas */
  .ts365-localidades-card .intervalos-wrap{
    overflow:visible!important;
    padding:22px!important;
  }
  .ts365-localidades-card .intervalos-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:14px!important;
    overflow:visible!important;
  }
  .ts365-localidades-card .intervalos-card{
    overflow:visible!important;
    padding:16px!important;
  }
  .ts365-localidades-card .calendar-input,
  .ts365-localidades-card .intervalos-select{
    width:100%!important;
    min-width:0!important;
    height:48px!important;
    min-height:48px!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
  }

  /* Tabla vieja convertida en cards compactas dentro del scroll */
  .ts365-localidades-card #tablePrice,
  .ts365-localidades-card #tablePrice tbody,
  .ts365-localidades-card #tablePrice tr,
  .ts365-localidades-card #tablePrice td{
    display:block!important;
    width:100%!important;
  }
  .ts365-localidades-card #tablePrice{border-spacing:0!important;}
  .ts365-localidades-card #tablePrice tr{
    margin-bottom:12px!important;
    border:1px solid #eef2f7!important;
    border-radius:18px!important;
    overflow:hidden!important;
    box-shadow:0 8px 22px rgba(13,34,63,.07)!important;
  }
  .ts365-localidades-card #tablePrice td{
    border:0!important;
    border-radius:0!important;
    padding:10px 13px!important;
    text-align:left!important;
  }
  .ts365-localidades-card #tablePrice td:first-child{
    background:#f8fafc!important;
    font-size:13px!important;
    color:#0d223f!important;
  }
  .ts365-localidades-card #tablePrice td:last-child{
    text-align:right!important;
    font-size:16px!important;
    color:#ff7a00!important;
  }

  /* Si hay intervalos, el calendario debe flotar por encima y no cortarse */
  .flatpickr-calendar,
  .flatpickr-calendar.open{
    z-index:99999999!important;
  }
}

@media (max-width: 991px){
  .ts365-main-grid{
    display:flex!important;
    flex-direction:column!important;
    gap:20px!important;
  }
  .ts365-localidades-card{
    order:0!important;
    overflow:visible!important;
  }
  .ts365-info-card .ts365-desc,
  .ts365-info-card #descripcionEven{
    max-height:420px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding-right:8px!important;
  }
  .ts365-localidades-card #contPrice{
    max-height:none!important;
    overflow:visible!important;
  }
  .ts365-localidades-card .intervalos-grid{
    grid-template-columns:1fr!important;
  }
}

/* Ajuste superior: sin hueco antes del hero, pero sin comerse el contenido */
#cuerpoEventos{
  padding-top:0!important;
}
.ts365-event-page{
  margin-top:0!important;
}
.ts365-hero{
  margin-top:0!important;
}


/* ===== CSS movido desde modulos/evento.php - bloque 6, linea original 4260 ===== */
/* ===== TS365 ORDEN FINAL: compra/localidades arriba full width, descripcion al final ===== */
.ts365-main-grid{
  display:block!important;
  width:100%!important;
}
.ts365-localidades-card{
  width:100%!important;
  max-width:100%!important;
  margin:0 auto 28px auto!important;
  position:relative!important;
  top:auto!important;
}
.ts365-localidades-card .ts365-localidades-head{
  border-radius:24px 24px 0 0!important;
}
.ts365-localidades-card .intervalos-wrap{
  padding:34px 42px!important;
  overflow:visible!important;
}
.ts365-localidades-card .intervalos-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:18px!important;
  overflow:visible!important;
}
.ts365-localidades-card .intervalos-card{
  min-width:0!important;
  overflow:visible!important;
}
.ts365-localidades-card #contPrice{
  max-height:none!important;
  overflow:visible!important;
  padding:22px!important;
}
.ts365-desc-final-section{
  margin-top:26px!important;
}
.ts365-desc-final-section .ts365-info-card{
  width:100%!important;
  max-width:100%!important;
}
.ts365-desc-final-section .ts365-card-body{
  max-height:none!important;
}
.ts365-desc-final-section #descripcionEven,
.ts365-desc-final-section .ts365-desc{
  max-height:480px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding-right:12px!important;
}
.flatpickr-calendar,.flatpickr-calendar.open{z-index:99999999!important;}
@media (min-width:992px){
  .ts365-localidades-card #tablePrice{
    width:100%!important;
  }
}
@media (max-width:991px){
  .ts365-localidades-card .intervalos-wrap{padding:18px!important;}
  .ts365-localidades-card .intervalos-grid{grid-template-columns:1fr!important;}
  .ts365-desc-final-section #descripcionEven,
  .ts365-desc-final-section .ts365-desc{max-height:none!important;overflow:visible!important;}
}

/* ===== FIX MOVIL: descripcion final completa, sin texto cortado =====
   En celulares el texto de "Sobre el evento" queda al final de la pagina.
   Por eso no debe tener alto fijo ni overflow hidden; debe crecer completo
   y el scroll debe hacerlo la pagina normal. */
@media (max-width: 767px){
  html,
  body,
  #top{
    height:auto!important;
    min-height:100%!important;
    max-height:none!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    position:static!important;
    -webkit-overflow-scrolling:touch!important;
  }

  #cuerpoEventos,
  .ts365-event-page,
  .ts365-desc-final-section,
  .ts365-desc-final-section .ts365-info-card,
  .ts365-desc-final-section .ts365-card-modern,
  .ts365-desc-final-section .ts365-card-body{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
  }

  .ts365-desc-final-section #descripcionEven,
  .ts365-desc-final-section .ts365-desc,
  #descripcionEven.descripcion-evento-scroll{
    display:block!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
    padding-right:0!important;
    word-break:break-word!important;
    white-space:normal!important;
  }

  .ts365-desc-final-section{
    padding-bottom:110px!important;
  }
}

/* =========================================================
   FIX FINAL MOBILE: precios alineados y botón sin invadir precio
   - Todos los precios quedan en la misma columna derecha.
   - El botón "Elegir Asientos" queda en su columna y no tapa el precio.
   - El color tomate/naranja del precio se mantiene siempre.
   ========================================================= */
@media (max-width: 767px){
  .ts365-localidades-card #tablePrice,
  #tablePrice{
    width:100%!important;
    table-layout:fixed!important;
    border-collapse:collapse!important;
  }

  .ts365-localidades-card #tablePrice tbody,
  #tablePrice tbody{
    display:block!important;
    width:100%!important;
  }

  .ts365-localidades-card #tablePrice tr,
  #tablePrice tr{
    display:grid!important;
    grid-template-columns:76px minmax(0,1fr) 74px 68px!important;
    align-items:center!important;
    column-gap:6px!important;
    width:100%!important;
    margin:0!important;
    padding:9px 8px!important;
    border:0!important;
    border-bottom:1px solid #e6eef6!important;
    border-radius:0!important;
    overflow:visible!important;
    background:#fff!important;
  }

  .ts365-localidades-card #tablePrice td,
  #tablePrice td{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:auto!important;
    min-width:0!important;
    max-width:100%!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    overflow:visible!important;
    text-align:center!important;
    line-height:1.12!important;
    word-break:normal!important;
  }

  .ts365-localidades-card #tablePrice td:nth-child(1),
  #tablePrice td:nth-child(1){
    justify-content:flex-start!important;
    text-align:left!important;
    color:#ff5a00!important;
    font-size:10px!important;
    font-weight:800!important;
  }

  .ts365-localidades-card #tablePrice td:nth-child(2),
  #tablePrice td:nth-child(2){
    color:#00a9df!important;
    font-size:10px!important;
    font-weight:800!important;
    text-align:center!important;
  }

  .ts365-localidades-card #tablePrice td:nth-child(3),
  #tablePrice td:nth-child(3){
    justify-content:center!important;
  }

  .ts365-localidades-card #tablePrice td:nth-child(4),
  .ts365-localidades-card #tablePrice td:last-child,
  #tablePrice td:nth-child(4),
  #tablePrice td:last-child{
    justify-content:flex-end!important;
    text-align:right!important;
    color:#ff5a00!important;
    font-size:13px!important;
    font-weight:900!important;
    white-space:nowrap!important;
    z-index:5!important;
  }

  .ts365-localidades-card #tablePrice select,
  .ts365-localidades-card #tablePrice select.canti_ip,
  #tablePrice select,
  #tablePrice select.canti_ip{
    width:54px!important;
    min-width:54px!important;
    max-width:54px!important;
    height:34px!important;
    min-height:34px!important;
    padding:4px 6px!important;
    font-size:12px!important;
    border-radius:6px!important;
    color:#00a9df!important;
    background:#fff!important;
    box-shadow:none!important;
  }

  .ts365-localidades-card #tablePrice button,
  .ts365-localidades-card #tablePrice .btn,
  .ts365-localidades-card #tablePrice .boton_ip,
  .ts365-localidades-card #tablePrice #botonAbrir,
  #tablePrice button,
  #tablePrice .btn,
  #tablePrice .boton_ip,
  #tablePrice #botonAbrir{
    width:74px!important;
    min-width:74px!important;
    max-width:74px!important;
    height:34px!important;
    min-height:34px!important;
    padding:4px 5px!important;
    border-radius:6px!important;
    background:#00a9df!important;
    background-image:none!important;
    color:#fff!important;
    font-size:10px!important;
    font-weight:800!important;
    line-height:1.05!important;
    white-space:normal!important;
    box-shadow:none!important;
    overflow:hidden!important;
    text-align:center!important;
    position:relative!important;
    z-index:1!important;
  }

  /* Por si el precio viene dentro de un span o enlace, forzar tomate. */
  .ts365-localidades-card #tablePrice td:last-child *,
  #tablePrice td:last-child *{
    color:#ff5a00!important;
    font-weight:900!important;
    white-space:nowrap!important;
  }
}

/* ===== FINAL MOBILE FIX ===== */

@media (max-width: 420px) {

    .ticket-row,
    #tablePrice tr {
        align-items: center !important;
    }

    #tablePrice td {
        vertical-align: middle !important;
    }

    .btn-elegir-asientos,
    .btn_asiento,
    .elegir_asiento,
    .span-open-label {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 36px !important;
        min-width: 90px !important;
        padding: 0 10px !important;
        border-radius: 6px !important;
        font-size: 12px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    #datePrev,
    .price,
    .precio {
        color: #ff5a00 !important;
        font-weight: 700 !important;
        font-size: 14px !important;
        text-align: right !important;
        white-space: nowrap !important;
    }

}

/* ===== FIX 2026-05-13: HERO CON CARRUSEL activo1 + IMAGEN SIN CORTE ===== */
.ts365-hero{
  position:relative!important;
  overflow:hidden!important;
  background:#000!important;
}
.ts365-hero-carousel{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  z-index:0!important;
  background:#000!important;
}
.ts365-hero-slide{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  opacity:0!important;
  transition:opacity .7s ease-in-out!important;
  z-index:0!important;
  background:#000!important;
}
.ts365-hero-slide.active{
  opacity:1!important;
  z-index:1!important;
}
.ts365-hero-img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  background:#000!important;
  z-index:0!important;
}
.ts365-hero-content{
  position:relative!important;
  z-index:2!important;
}
.ts365-hero::after{
  z-index:1!important;
  pointer-events:none!important;
}

/* Carrusel inferior: imagen completa sin recorte */
.carousel-container,
.carousel1{
  background:#000!important;
}
.carousel1 img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  background:#000!important;
  flex-shrink:0!important;
}

.ts365-hero,
.carousel-container{
    background: transparent !important;
}

.ts365-hero-slide{
    position:absolute;
    inset:0;
    opacity:0;
    transition:opacity .7s ease;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

.ts365-hero-slide::before{
    content:"";
    position:absolute;
    inset:0;
    background:inherit;
    filter:blur(18px);
    transform:scale(1.12);
    opacity:.65;
}

.ts365-hero-slide::after{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.35);
}

.ts365-hero-slide.active{
    opacity:1;
    z-index:1;
}

.ts365-hero-img{
    position:relative;
    z-index:2;
    width:100%;
    height:100%;
    object-fit:contain !important;
    object-position:center;
    background:transparent !important;
}

.ts365-hero,
.carousel-container{
    background: transparent !important;
}

.ts365-hero-slide{
    background-image: var(--bg) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.ts365-hero-slide::before{
    content:"";
    position:absolute;
    inset:0;
    background-image: var(--bg);
    background-size: cover;
    background-position: center;
    filter: blur(22px);
    transform: scale(1.15);
    opacity: .95;
    z-index: 0;
}

.ts365-hero-slide::after{
    content:"";
    position:absolute;
    inset:0;
    background: rgba(0,0,0,.38);
    z-index: 1;
}

.ts365-hero-img{
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    background: transparent !important;
}

/* ===== FIX HERO Y CARRUSEL SIN FONDO NEGRO ===== */

.ts365-hero,
.carousel-container,
.carousel1{
    background: transparent !important;
}

.ts365-hero-slide{
    position:absolute !important;
    inset:0 !important;
    opacity:0;
    transition:opacity .6s ease;
    overflow:hidden;
}

.ts365-hero-slide.active{
    opacity:1;
    z-index:2;
}

.ts365-hero-slide::before{
    content:"";
    position:absolute;
    inset:0;
    background-image: var(--bg) !important;
    background-size: cover !important;
    background-position:center !important;
    filter: blur(25px);
    transform: scale(1.15);
    opacity:.95;
    z-index:0;
}

.ts365-hero-slide::after{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.40);
    z-index:1;
}

.ts365-hero-img{
    position:relative !important;
    z-index:2 !important;
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    object-position:center !important;
    background:transparent !important;
}

.carousel1 img{
    object-fit:contain !important;
    background:transparent !important;
}

/* HERO superior y carrusel inferior proporción 1200x600 */
.ts365-hero,
.carousel-container{
    width: min(1210px, calc(100% - 38px)) !important;
    aspect-ratio: 2 / 1 !important;
    height: auto !important;
    min-height: unset !important;
    max-height: unset !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border-radius: 28px !important;
    overflow: hidden !important;
    background: #f5f7fb !important;
}

/* Imagen llena el contenedor */
.ts365-hero-img,
.carousel1 img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    background: transparent !important;
}

/* Slides del hero */
.ts365-hero-carousel,
.ts365-hero-slide{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

/* Contenido del hero encima */
.ts365-hero-content{
    min-height: unset !important;
    height: 100% !important;
}

/* Carrusel inferior */
.carousel1{
    height: 100% !important;
}

/* Responsive móvil */
@media(max-width: 767px){
    .ts365-hero,
    .carousel-container{
        width: calc(100% - 24px) !important;
        aspect-ratio: 2 / 1 !important;
        border-radius: 20px !important;
    }
}

.ts365-hero,
.carousel-container{
    aspect-ratio: 2 / 1 !important;
    height:auto !important;
    overflow:hidden !important;
    background:#f5f7fb !important;
}

.ts365-hero-slide,
.ts365-carousel-slide{
    position:relative;
    width:100%;
    height:100%;
    flex:0 0 100%;
    overflow:hidden;
    background-image:var(--bg);
    background-size:cover;
    background-position:center;
}

.ts365-hero-slide::before,
.ts365-carousel-slide::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:var(--bg);
    background-size:cover;
    background-position:center;
    filter:blur(28px);
    transform:scale(1.18);
    opacity:.9;
}

.ts365-hero-slide::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(6,16,32,.78),rgba(6,16,32,.25));
    z-index:1;
}

.ts365-hero-img,
.ts365-carousel-img{
    position:relative !important;
    z-index:2 !important;
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    object-position:center !important;
    background:transparent !important;
}

.carousel1{
    height:100% !important;
    display:flex !important;
}

/* ===== APP 365 MINI CTA EN HERO ===== */

.ts365-hero-actions{
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    gap:12px !important;
}

.ts365-app-mini{
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
    padding:10px 14px !important;
    border-radius:18px !important;
    background:rgba(255,255,255,.14) !important;
    border:1px solid rgba(255,255,255,.22) !important;
    backdrop-filter:blur(12px) !important;
    -webkit-backdrop-filter:blur(12px) !important;
    color:#fff !important;
    box-shadow:0 10px 24px rgba(0,0,0,.18) !important;
}

.ts365-app-text{
    font-size:13px !important;
    font-weight:850 !important;
    line-height:1.25 !important;
    max-width:235px !important;
    color:#fff !important;
}

.ts365-app-buttons{
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
}

.ts365-store-btn{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:6px !important;
    min-height:34px !important;
    padding:0 12px !important;
    border-radius:999px !important;
    background:#fff !important;
    color:#0d223f !important;
    font-size:12px !important;
    font-weight:950 !important;
    text-decoration:none !important;
    white-space:nowrap !important;
    box-shadow:none !important;
}

.ts365-store-btn i{
    font-size:14px !important;
    color:#0d223f !important;
}

.ts365-store-btn:hover{
    background:#ff8c00 !important;
    color:#fff !important;
    text-decoration:none !important;
}

.ts365-store-btn:hover i{
    color:#fff !important;
}

@media(max-width:767px){
    .ts365-app-mini{
        width:100% !important;
        flex-direction:column !important;
        align-items:flex-start !important;
    }

    .ts365-app-text{
        max-width:100% !important;
    }

    .ts365-app-buttons{
        width:100% !important;
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
    }

    .ts365-store-btn{
        width:100% !important;
    }
}

/* HERO SIMPLE: solo botones */
.ts365-hero-content-simple{
    max-width:none !important;
    justify-content:flex-end !important;
    align-items:flex-start !important;
    padding:44px 48px !important;
}

.ts365-hero-content-simple .ts365-hero-actions{
    z-index:5 !important;
}

/* Info del evento movida abajo */
.ts365-info-evento-final{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin:0 0 22px 0;
}

.ts365-info-evento-final div{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 14px;
    border-radius:14px;
    background:#f8fafc;
    border:1px solid #e8eef6;
    color:#0d223f;
    font-weight:800;
    font-size:10px;
}

.ts365-info-evento-final i{
    color:#ff7a00;
}

@media(max-width:767px){
    .ts365-hero-content-simple{
        padding:24px 18px !important;
    }

    /*.ts365-info-evento-final{
        display:grid;
        grid-template-columns:1fr;
    }*/
}

/* FIX MOBILE HERO APP + BOTON COMPRAR */
@media (max-width: 767px){

    .ts365-hero{
        min-height: 340px !important;
    }

    .ts365-hero-content-simple{
        height: 100% !important;
        padding: 0 14px 18px 14px !important;
        display: flex !important;
        justify-content: flex-end !important;
    }

    .ts365-hero-actions{
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .ts365-primary-btn{
        width: 100% !important;
        height: 48px !important;
        padding: 0 18px !important;
        justify-content: center !important;
        font-size: 14px !important;
        order: 1 !important;
    }

    .ts365-app-mini{
        width: 100% !important;
        order: 2 !important;
        padding: 12px !important;
        gap: 10px !important;
        border-radius: 18px !important;
    }

    .ts365-app-text{
        font-size: 12px !important;
        line-height: 1.25 !important;
        max-width: 100% !important;
    }

    .ts365-app-buttons{
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .ts365-store-btn{
        width: 100% !important;
        min-height: 40px !important;
        font-size: 12px !important;
    }
}
/* FIX MOBILE: imagen más visible, menos oscuro y botones más pequeños */
@media (max-width: 767px){

    .ts365-hero::after,
    .ts365-hero-slide::after{
        background: linear-gradient(
            180deg,
            rgba(0,0,0,.05) 0%,
            rgba(0,0,0,.08) 45%,
            rgba(0,0,0,.28) 100%
        ) !important;
    }

    .ts365-hero{
        min-height: 290px !important;
        border-radius: 18px !important;
    }

    .ts365-hero-content-simple{
        padding: 0 12px 12px 12px !important;
    }

    .ts365-hero-actions{
        gap: 8px !important;
    }

    .ts365-primary-btn{
        width: 78% !important;
        height: 42px !important;
        min-height: 42px !important;
        margin: 0 auto !important;
        font-size: 13px !important;
        padding: 0 14px !important;
        box-shadow: 0 8px 18px rgba(255,122,0,.28) !important;
    }

    .ts365-app-mini{
        width: 86% !important;
        margin: 0 auto !important;
        padding: 9px 10px !important;
        border-radius: 14px !important;
        background: rgba(10,20,35,.60) !important;
        gap: 8px !important;
    }

    .ts365-app-text{
        font-size: 11px !important;
        line-height: 1.15 !important;
    }

    .ts365-store-btn{
        min-height: 34px !important;
        height: 34px !important;
        font-size: 11px !important;
        padding: 0 8px !important;
    }

    .ts365-store-btn i{
        font-size: 12px !important;
    }
}
/* FIX FINAL: imagen del hero sin oscurecer en ninguna vista */
.ts365-hero::after,
.ts365-hero-slide::after{
    display:none !important;
    content:none !important;
    background:none !important;
}

.ts365-hero-img,
.ts365-carousel-img,
.carousel1 img{
    filter:none !important;
    opacity:1 !important;
}

/* Mantener botones legibles sin oscurecer toda la imagen */
.ts365-primary-btn,
.ts365-app-mini{
    position:relative !important;
    z-index:10 !important;
}

/* Bloque app más discreto */
.ts365-app-mini{
    background:rgba(10,20,35,.72) !important;
}

/* En móvil también sin oscurecer */
@media(max-width:767px){
    .ts365-hero::after,
    .ts365-hero-slide::after{
        display:none !important;
        content:none !important;
        background:none !important;
    }

    .ts365-hero-img{
        filter:none !important;
        opacity:1 !important;
    }
}

/* FIX iPHONE / SAFARI: mostrar botones app */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 767px){

    .ts365-hero{
      min-height: 360px !important;
      height: auto !important;
      overflow: hidden !important;
    }

    .ts365-hero-content,
    .ts365-hero-content-simple{
      position: absolute !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 14px !important;
      height: auto !important;
      min-height: 0 !important;
      padding: 0 14px !important;
      z-index: 50 !important;
      display: block !important;
    }

    .ts365-hero-actions{
      display: grid !important;
      grid-template-columns: 1fr !important;
      gap: 8px !important;
      width: 100% !important;
    }

    .ts365-primary-btn{
      width: 78% !important;
      margin: 0 auto !important;
      height: 42px !important;
      min-height: 42px !important;
      font-size: 13px !important;
      display: flex !important;
      visibility: visible !important;
      opacity: 1 !important;
    }

    .ts365-app-mini{
      width: 86% !important;
      margin: 0 auto !important;
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
      padding: 10px !important;
      border-radius: 16px !important;
      background: rgba(10,20,35,.78) !important;
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
      z-index: 60 !important;
    }

    .ts365-app-text{
      display: block !important;
      color: #fff !important;
      font-size: 11px !important;
      line-height: 1.2 !important;
      margin-bottom: 8px !important;
    }

    .ts365-app-buttons{
      display: grid !important;
      grid-template-columns: 1fr 1fr !important;
      gap: 8px !important;
      width: 100% !important;
    }

    .ts365-store-btn{
      display: flex !important;
      visibility: visible !important;
      opacity: 1 !important;
      height: 36px !important;
      min-height: 36px !important;
      font-size: 11px !important;
      background: #fff !important;
      color: #0d223f !important;
    }
  }
}

/* FIX iPHONE SAFARI: segundo carrusel */
.carousel-container{
    overflow:hidden !important;
}

.carousel1{
    display:flex !important;
    flex-wrap:nowrap !important;
    width:100% !important;
    height:auto !important;
    aspect-ratio:2 / 1 !important;
    transform:translate3d(0,0,0);
}

.ts365-carousel-slide{
    position:relative !important;
    flex:0 0 100% !important;
    min-width:100% !important;
    width:100% !important;
    height:100% !important;
    overflow:hidden !important;
}

.ts365-carousel-img,
.carousel1 img{
    display:block !important;
    width:100% !important;
    min-width:100% !important;
    max-width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center center !important;
    flex:0 0 100% !important;
}

/* FIX VIDEO EVENTO EN MÓVIL */
@media (max-width: 767px){

    .ts365-extras .ts365-card{
        width: calc(100% - 24px) !important;
        max-width: calc(100% - 24px) !important;
        margin: 0 auto 18px auto !important;
        padding: 14px !important;
        border-radius: 22px !important;
    }

    .ts365-extras .ts365-frame-video{
        width: 100% !important;
        height: 520px !important;
        min-height: 520px !important;
        max-height: none !important;
        border-radius: 18px !important;
        overflow: hidden !important;
        background: #000 !important;
    }

    .ts365-extras .ts365-frame-video iframe,
    .ts365-extras .ts365-frame-video video,
    .ts365-extras .ts365-frame-video blockquote,
    .ts365-extras .ts365-frame-video .tiktok-embed{
        width: 100% !important;
        height: 100% !important;
        min-height: 520px !important;
        max-height: none !important;
        display: block !important;
    }

    .ts365-extras .ts365-title.panel{
        font-size: 15px !important;
        margin-bottom: 12px !important;
    }
}
/* =========================================================
   TEMAS CONFIGURABLES POR EVENTO - 2026-05-13
   Campos usados en linkEventos:
   - tema_evento: claro | oscuro | azul | morado | arena
   - color_fondo_evento: color HEX opcional (#05070d, #061b33, etc.)
   ========================================================= */

#cuerpoEventos{
    background: var(--ts-bg-custom, var(--ts-bg, #f5f7fb)) !important;
    transition: background .25s ease;
}

#cuerpoEventos.tema-evento-claro{
    --ts-bg:#f5f7fb;
    --ts-card:#ffffff;
    --ts-text:#142033;
    --ts-muted:#667085;
    --ts-line:#e8eef6;
    --ts-card-shadow:0 18px 45px rgba(13,34,63,.10);
}

#cuerpoEventos.tema-evento-oscuro{
    --ts-bg:#05070d;
    --ts-card:#101827;
    --ts-text:#ffffff;
    --ts-muted:#d7dee9;
    --ts-line:rgba(255,255,255,.13);
    --ts-card-shadow:0 22px 65px rgba(0,0,0,.45);
}

#cuerpoEventos.tema-evento-azul{
    --ts-bg:#061b33;
    --ts-card:#ffffff;
    --ts-text:#102033;
    --ts-muted:#475569;
    --ts-line:#dbeafe;
    --ts-card-shadow:0 20px 55px rgba(3,18,38,.28);
}

#cuerpoEventos.tema-evento-morado{
    --ts-bg:#160b2e;
    --ts-card:#ffffff;
    --ts-text:#17142a;
    --ts-muted:#575066;
    --ts-line:#eadcff;
    --ts-card-shadow:0 20px 55px rgba(30,10,60,.30);
}

#cuerpoEventos.tema-evento-arena{
    --ts-bg:#f3eadc;
    --ts-card:#ffffff;
    --ts-text:#231b14;
    --ts-muted:#6b5b4b;
    --ts-line:#ead9c2;
    --ts-card-shadow:0 18px 45px rgba(89,65,37,.13);
}

/* Fondo de las zonas antiguas que quedaban con colores sueltos */
html body #cuerpoEventos,
#cuerpoEventos .ts365-event-page,
#cuerpoEventos #contenedor-localidades,
#cuerpoEventos .contenedor-evento,
#cuerpoEventos .ts365-extras{
    background: transparent !important;
}

/* Tarjetas principales adaptadas al tema */
#cuerpoEventos .ts365-card-modern,
#cuerpoEventos .ts365-extras .ts365-card,
#cuerpoEventos .ts365-desc-final-section .ts365-info-card,
#cuerpoEventos .ts365-note,
#cuerpoEventos .carousel-container,
#cuerpoEventos .contenedor-evento{
    background: var(--ts-card) !important;
    border-color: var(--ts-line) !important;
    box-shadow: var(--ts-card-shadow, var(--ts-shadow-soft, 0 10px 30px rgba(13,34,63,.08))) !important;
}

#cuerpoEventos .ts365-section-title,
#cuerpoEventos .ts365-extras .ts365-title.panel,
#cuerpoEventos .ts365-info-evento-final div,
#cuerpoEventos .ts365-note,
#cuerpoEventos .end-social h2,
#cuerpoEventos #artista-red-social{
    color: var(--ts-text) !important;
}

#cuerpoEventos .ts365-desc,
#cuerpoEventos #descripcionEven,
#cuerpoEventos .ts365-info-list li{
    color: var(--ts-muted) !important;
}

/* Tema oscuro: que no se vea como parches negros y blancos */
#cuerpoEventos.tema-evento-oscuro .ts365-card-modern,
#cuerpoEventos.tema-evento-oscuro .ts365-extras .ts365-card,
#cuerpoEventos.tema-evento-oscuro .ts365-desc-final-section .ts365-info-card,
#cuerpoEventos.tema-evento-oscuro .ts365-note,
#cuerpoEventos.tema-evento-oscuro .contenedor-evento{
    background:#101827 !important;
    color:#ffffff !important;
    border:1px solid rgba(255,255,255,.13) !important;
}

#cuerpoEventos.tema-evento-oscuro .ts365-section-title,
#cuerpoEventos.tema-evento-oscuro .ts365-extras .ts365-title.panel,
#cuerpoEventos.tema-evento-oscuro .ts365-note,
#cuerpoEventos.tema-evento-oscuro .end-social h2,
#cuerpoEventos.tema-evento-oscuro #artista-red-social{
    color:#ffffff !important;
}

#cuerpoEventos.tema-evento-oscuro .ts365-desc,
#cuerpoEventos.tema-evento-oscuro #descripcionEven,
#cuerpoEventos.tema-evento-oscuro .ts365-info-list li{
    color:#e8eef7 !important;
}

#cuerpoEventos.tema-evento-oscuro .ts365-info-evento-final div,
#cuerpoEventos.tema-evento-oscuro .ts365-info-list li{
    background:rgba(255,255,255,.08) !important;
    border-color:rgba(255,255,255,.14) !important;
    color:#ffffff !important;
}

/* La tabla de precios se mantiene blanca para legibilidad incluso en tema oscuro */
#cuerpoEventos.tema-evento-oscuro #contPrice,
#cuerpoEventos.tema-evento-oscuro #tablePrice,
#cuerpoEventos.tema-evento-oscuro #tablePrice tbody,
#cuerpoEventos.tema-evento-oscuro #tablePrice tr,
#cuerpoEventos.tema-evento-oscuro #tablePrice td{
    background:#ffffff !important;
    color:#0f172a !important;
}

#cuerpoEventos.tema-evento-oscuro #tablePrice td:first-child,
#cuerpoEventos.tema-evento-oscuro #tablePrice td:nth-child(2){
    color:#00a9df !important;
}

#cuerpoEventos.tema-evento-oscuro #tablePrice td:last-child,
#cuerpoEventos.tema-evento-oscuro #tablePrice td:last-child *{
    color:#ff5a00 !important;
}

/* Header de localidades siempre corporativo */
#cuerpoEventos .ts365-localidades-head{
    background:linear-gradient(135deg,#0d223f,#132d52) !important;
    color:#ffffff !important;
}

#cuerpoEventos .ts365-localidades-head h2,
#cuerpoEventos .ts365-localidades-head p{
    color:#ffffff !important;
}

/* Si el tema usa fondo fuerte, dejamos las imágenes y hero con aire */
#cuerpoEventos.tema-evento-oscuro .ts365-hero,
#cuerpoEventos.tema-evento-azul .ts365-hero,
#cuerpoEventos.tema-evento-morado .ts365-hero{
    box-shadow:0 22px 65px rgba(0,0,0,.42) !important;
}

/* Compatibilidad Chrome/Safari: también pinta body cuando existe el tema */
body:has(#cuerpoEventos.tema-evento-oscuro){ background:#05070d !important; }
body:has(#cuerpoEventos.tema-evento-azul){ background:#061b33 !important; }
body:has(#cuerpoEventos.tema-evento-morado){ background:#160b2e !important; }
body:has(#cuerpoEventos.tema-evento-arena){ background:#f3eadc !important; }
body:has(#cuerpoEventos.tema-evento-claro){ background:#f5f7fb !important; }

/* Evita que el fondo negro se vea como bloque sucio alrededor del carrusel */
#cuerpoEventos .carousel-wrapper,
#cuerpoEventos .ts365-main-grid,
#cuerpoEventos .ts365-desc-final-section{
    background:transparent !important;
}

/* =========================================================
   FIX TEMAS EN TABLA DE LOCALIDADES AJAX (adaptable_text.php)
   La tabla llega por AJAX dentro de #contPrice, por eso se fuerza
   aquí según el tema elegido en linkEventos.tema_evento.
   ========================================================= */

#cuerpoEventos{
  --ts-table-bg:#ffffff;
  --ts-table-row:#ffffff;
  --ts-table-text:#0f172a;
  --ts-table-muted:#00a9df;
  --ts-table-price:#ff5a00;
  --ts-table-line:#dbeaf5;
  --ts-table-tab-bg:#ffffff;
  --ts-table-tab-active:#58bfd8;
  --ts-table-tab-text:#00a9df;
}

#cuerpoEventos.tema-evento-oscuro,
#cuerpoEventos.tema-evento-azul,
#cuerpoEventos.tema-evento-morado{
  --ts-table-bg:rgba(16,24,39,.96);
  --ts-table-row:rgba(11,18,32,.92);
  --ts-table-text:#f8fafc;
  --ts-table-muted:#67e8f9;
  --ts-table-price:#ff9b22;
  --ts-table-line:rgba(255,255,255,.14);
  --ts-table-tab-bg:rgba(255,255,255,.06);
  --ts-table-tab-active:#00a9df;
  --ts-table-tab-text:#ffffff;
}

#cuerpoEventos.tema-evento-arena,
#cuerpoEventos.tema-evento-claro{
  --ts-table-bg:#ffffff;
  --ts-table-row:#ffffff;
  --ts-table-text:#0f172a;
  --ts-table-muted:#00a9df;
  --ts-table-price:#ff5a00;
  --ts-table-line:#dbeaf5;
  --ts-table-tab-bg:#ffffff;
  --ts-table-tab-active:#58bfd8;
  --ts-table-tab-text:#00a9df;
}

/* Contenedor de precios/localidades */
#cuerpoEventos #contPrice,
#cuerpoEventos .ts365-localidades-card #contPrice{
  background:var(--ts-table-bg) !important;
  color:var(--ts-table-text) !important;
  border-color:var(--ts-table-line) !important;
}

/* Pestañas de formas de pago / fechas */
#cuerpoEventos #contPrice .nav-tabs,
#cuerpoEventos #contPrice ul.nav,
#cuerpoEventos .ts365-localidades-card .nav-tabs,
#cuerpoEventos .ts365-localidades-card ul.nav{
  border-bottom:1px solid var(--ts-table-line) !important;
  background:var(--ts-table-bg) !important;
  /*padding-left:18px !important;*/
}

#cuerpoEventos #contPrice .nav-tabs > li > a,
#cuerpoEventos #contPrice ul.nav > li > a,
#cuerpoEventos .ts365-localidades-card .nav-tabs > li > a,
#cuerpoEventos .ts365-localidades-card ul.nav > li > a{
  background:var(--ts-table-tab-bg) !important;
  color:var(--ts-table-tab-text) !important;
  border-color:var(--ts-table-line) !important;
  font-weight:800 !important;
}

#cuerpoEventos #contPrice .nav-tabs > li.active > a,
#cuerpoEventos #contPrice ul.nav > li.active > a,
#cuerpoEventos .ts365-localidades-card .nav-tabs > li.active > a,
#cuerpoEventos .ts365-localidades-card ul.nav > li.active > a{
  background:var(--ts-table-tab-active) !important;
  color:#ffffff !important;
  border-color:var(--ts-table-tab-active) !important;
}

/* Tabla completa generada en adaptable_text.php */
#cuerpoEventos #tablePrice,
#cuerpoEventos #tablePrice tbody,
#cuerpoEventos #tablePrice tr,
#cuerpoEventos #tablePrice td,
#cuerpoEventos #tablePrice th{
  background:var(--ts-table-row) !important;
  border-color:var(--ts-table-line) !important;
  color:var(--ts-table-text) !important;
}

#cuerpoEventos #tablePrice tr{
  box-shadow:0 8px 22px rgba(0,0,0,.10) !important;
}

#cuerpoEventos #tablePrice td:first-child,
#cuerpoEventos #tablePrice td:nth-child(2),
#cuerpoEventos #tablePrice .tdLocali,
#cuerpoEventos #tablePrice #tdLoCar,
#cuerpoEventos #tablePrice .tdLo{
  color:var(--ts-table-muted) !important;
}

#cuerpoEventos #tablePrice td:last-child,
#cuerpoEventos #tablePrice #datePrev,
#cuerpoEventos #tablePrice td:last-child *{
  color:var(--ts-table-price) !important;
}

#cuerpoEventos #tablePrice select,
#cuerpoEventos #tablePrice input,
#cuerpoEventos #tablePrice .canti_ip{
  background:var(--ts-table-bg) !important;
  color:var(--ts-table-text) !important;
  border:1px solid var(--ts-table-line) !important;
}

/* Botones internos de localidades */
#cuerpoEventos #tablePrice button,
#cuerpoEventos #tablePrice .btn,
#cuerpoEventos #tablePrice .boton_ip,
#cuerpoEventos #tablePrice #botonAbrir,
#cuerpoEventos #tablePrice .span-open-label{
  background:#00a9df !important;
  background-image:none !important;
  color:#ffffff !important;
  border-color:#00a9df !important;
}

/* Botón final agregar tickets */
#cuerpoEventos #btn-comprar,
#cuerpoEventos #btnAgregar,
#cuerpoEventos .agregarTickets,
#cuerpoEventos input[value*="AGREGAR"],
#cuerpoEventos button[id*="comprar"],
#cuerpoEventos button[id*="agregar"]{
  background:linear-gradient(135deg,#ff7a00,#ff5a00) !important;
  color:#ffffff !important;
  border-color:#ff7a00 !important;
}

/* En temas oscuros, la tarjeta de localidades ya no debe quedar con cuerpo blanco */
#cuerpoEventos.tema-evento-oscuro .ts365-localidades-card,
#cuerpoEventos.tema-evento-azul .ts365-localidades-card,
#cuerpoEventos.tema-evento-morado .ts365-localidades-card{
  background:rgba(16,24,39,.96) !important;
  border-color:rgba(255,255,255,.14) !important;
}

#cuerpoEventos.tema-evento-oscuro .ts365-localidades-card #contPrice,
#cuerpoEventos.tema-evento-azul .ts365-localidades-card #contPrice,
#cuerpoEventos.tema-evento-morado .ts365-localidades-card #contPrice{
  border-radius:0 0 24px 24px !important;
}

/* TABLA LOCALIDADES EN TEMA OSCURO */
#cuerpoEventos.tema-evento-oscuro .ts365-localidades-card #contPrice,
#cuerpoEventos.tema-evento-oscuro .ts365-localidades-card table,
#cuerpoEventos.tema-evento-oscuro .ts365-localidades-card tbody{
    background:#101827 !important;
}

#cuerpoEventos.tema-evento-oscuro .ts365-localidades-card #tablePrice tr{
    background:#151f31 !important;
    border-color:rgba(255,255,255,.10) !important;
}

#cuerpoEventos.tema-evento-oscuro .ts365-localidades-card #tablePrice td{
    background:#151f31 !important;
    border-color:rgba(255,255,255,.08) !important;
    color:#eaf0f7 !important;
}

#cuerpoEventos.tema-evento-oscuro .ts365-localidades-card #tablePrice td:first-child,
#cuerpoEventos.tema-evento-oscuro .ts365-localidades-card #tablePrice td:nth-child(2){
    color:#38d9ff !important;
}

#cuerpoEventos.tema-evento-oscuro .ts365-localidades-card #tablePrice td:last-child,
#cuerpoEventos.tema-evento-oscuro .ts365-localidades-card #tablePrice td:last-child *{
    color:#ff8a1c !important;
}

#cuerpoEventos.tema-evento-oscuro .ts365-localidades-card select{
    background:#0b1220 !important;
    color:#fff !important;
    border:1px solid rgba(255,255,255,.22) !important;
}

#cuerpoEventos.tema-evento-oscuro .ts365-localidades-card .nav-tabs,
#cuerpoEventos.tema-evento-oscuro .ts365-localidades-card .tab-content{
    background:#101827 !important;
}

#cuerpoEventos.tema-evento-oscuro .ts365-localidades-card .nav-tabs > li > a{
    background:#151f31 !important;
    color:#fff !important;
    border-color:rgba(255,255,255,.15) !important;
}

#cuerpoEventos.tema-evento-oscuro .ts365-localidades-card .nav-tabs > li.active > a{
    background:#00a9df !important;
    color:#fff !important;
}

/* FIX HEADER: login y carrito consistentes */
.header,
#header,
.menu,
.navbar,
.contenedor-menu{
    min-height: 86px !important;
    max-height: 86px !important;
}

.btn-login,
.iniciar-sesion,
#btn-login,
.login-button{
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    padding: 0 22px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
}

.btn-login i,
.iniciar-sesion i,
#btn-login i,
.login-button i{
    line-height: 1 !important;
    margin-right: 8px !important;
}

.carrito,
#carrito,
.icon-cart,
.cart-icon{
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

/* Reduce el alto visual del header en páginas internas */
body #top,
body header{
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}
/* =========================================================
   FIX FINAL EXTRAS MOBILE - MAPA / SPOTIFY / VIDEO
   - El bloque usa el mismo ancho visual que localidades
   - El mapa se muestra completo y más grande en móvil
   - Evita doble reducción de ancho en .ts365-extras + .ts365-card
   ========================================================= */
@media (max-width: 767px){
  #cuerpoEventos .ts365-extras{
    width:100% !important;
    max-width:100% !important;
    margin:24px auto !important;
    padding:0 14px !important;
    box-sizing:border-box !important;
  }

  #cuerpoEventos .ts365-extras .ts365-wrap{
    width:100% !important;
    max-width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:18px !important;
    margin:0 !important;
    padding:0 !important;
  }

  #cuerpoEventos .ts365-extras .ts365-card{
    width:100% !important;
    max-width:100% !important;
    flex:0 0 auto !important;
    margin:0 auto 18px auto !important;
    padding:14px !important;
    border-radius:22px !important;
    box-sizing:border-box !important;
  }

  #cuerpoEventos .ts365-extras .ts365-title.panel{
    font-size:18px !important;
    line-height:1.15 !important;
    padding:4px 0 12px 0 !important;
    margin:0 !important;
    text-align:left !important;
  }

  /* MAPA: imagen completa, grande y ocupando todo el ancho interior de la card */
  #cuerpoEventos .ts365-extras .ts365-frame-mapa{
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    aspect-ratio:auto !important;
    padding:0 !important;
    margin:0 !important;
    border-radius:18px !important;
    background:#0b1220 !important;
    overflow:hidden !important;
    display:block !important;
  }

  #cuerpoEventos .ts365-extras .ts365-frame-mapa #mapa-contenedor-zoom{
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    display:block !important;
    overflow:hidden !important;
    margin:0 !important;
    padding:0 !important;
    transform:none !important;
  }

  #cuerpoEventos .ts365-extras .ts365-frame-mapa img,
  #cuerpoEventos .ts365-extras .ts365-frame-mapa #medidas_mapa{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    display:block !important;
    object-fit:contain !important;
    object-position:center center !important;
    margin:0 auto !important;
    border-radius:18px !important;
    background:#0b1220 !important;
  }

  #cuerpoEventos .ts365-extras .ts365-frame-mapa iframe{
    width:100% !important;
    height:360px !important;
    min-height:360px !important;
    border:0 !important;
    display:block !important;
    border-radius:18px !important;
  }

  /* Spotify aprovecha el mismo ancho */
  #cuerpoEventos .ts365-extras .ts365-frame-spotify{
    width:100% !important;
    height:auto !important;
    border-radius:18px !important;
    background:transparent !important;
  }

  #cuerpoEventos .ts365-extras .ts365-frame-spotify iframe{
    width:100% !important;
    height:380px !important;
    min-height:380px !important;
    border-radius:18px !important;
  }

  /* Video: contenedor ancho; TikTok vertical / YouTube horizontal sin verse chato */
  #cuerpoEventos .ts365-extras .ts365-frame-video{
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    border-radius:18px !important;
    overflow:hidden !important;
    background:#000 !important;
    display:block !important;
  }

  #cuerpoEventos .ts365-extras .ts365-frame-video iframe,
  #cuerpoEventos .ts365-extras .ts365-frame-video video{
    width:100% !important;
    height:520px !important;
    min-height:520px !important;
    max-height:none !important;
    display:block !important;
    border:0 !important;
    border-radius:18px !important;
    background:#000 !important;
  }
}

@media (max-width: 390px){
  #cuerpoEventos .ts365-extras{
    padding-left:10px !important;
    padding-right:10px !important;
  }

  #cuerpoEventos .ts365-extras .ts365-card{
    padding:12px !important;
    border-radius:20px !important;
  }

  #cuerpoEventos .ts365-extras .ts365-frame-mapa,
  #cuerpoEventos .ts365-extras .ts365-frame-mapa img,
  #cuerpoEventos .ts365-extras .ts365-frame-mapa #medidas_mapa{
    border-radius:16px !important;
  }
}

/* =========================================================
   FIX FINAL EXTRAS FULL WIDTH MOBILE
   Mapa / Spotify / Video deben aprovechar todo el ancho igual que localidades
   ========================================================= */

/* Desktop/tablet: el bloque de extras usa el mismo ancho visual que localidades */
#cuerpoEventos .ts365-extras{
  width:min(1210px, calc(100vw - 48px)) !important;
  max-width:min(1210px, calc(100vw - 48px)) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:0 !important;
  padding-right:0 !important;
  box-sizing:border-box !important;
}

#cuerpoEventos .ts365-extras .ts365-wrap{
  width:100% !important;
  max-width:100% !important;
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:stretch !important;
  justify-content:center !important;
  gap:22px !important;
  box-sizing:border-box !important;
}

#cuerpoEventos .ts365-extras .ts365-card{
  box-sizing:border-box !important;
  overflow:hidden !important;
}

@media (min-width: 992px){
  #cuerpoEventos .ts365-extras .ts365-wrap.cols-1 .ts365-card{
    flex:0 0 100% !important;
    max-width:100% !important;
  }

  #cuerpoEventos .ts365-extras .ts365-wrap.cols-2 .ts365-card{
    flex:0 0 calc(50% - 11px) !important;
    max-width:calc(50% - 11px) !important;
  }

  #cuerpoEventos .ts365-extras .ts365-wrap.cols-3 .ts365-card{
    flex:0 0 calc(33.333% - 15px) !important;
    max-width:calc(33.333% - 15px) !important;
  }
}

/* Mobile: rompe el ancho del padre angosto y se alinea al viewport/localidades */
@media (max-width: 767px){
  #cuerpoEventos .ts365-extras{
    width:calc(100vw - 22px) !important;
    max-width:calc(100vw - 22px) !important;
    margin-left:calc(50% - 50vw + 11px) !important;
    margin-right:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }

  #cuerpoEventos .ts365-extras .ts365-wrap,
  #cuerpoEventos .ts365-extras .ts365-wrap.cols-1,
  #cuerpoEventos .ts365-extras .ts365-wrap.cols-2,
  #cuerpoEventos .ts365-extras .ts365-wrap.cols-3{
    width:100% !important;
    max-width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    gap:20px !important;
    margin:0 !important;
    padding:0 !important;
  }

  #cuerpoEventos .ts365-extras .ts365-card,
  #cuerpoEventos .ts365-extras .ts365-wrap.cols-1 .ts365-card,
  #cuerpoEventos .ts365-extras .ts365-wrap.cols-2 .ts365-card,
  #cuerpoEventos .ts365-extras .ts365-wrap.cols-3 .ts365-card{
    width:100% !important;
    max-width:100% !important;
    flex:0 0 auto !important;
    margin:0 !important;
    padding:12px !important;
    border-radius:22px !important;
  }

  #cuerpoEventos .ts365-extras .ts365-title.panel{
    font-size:19px !important;
    line-height:1.15 !important;
    padding:4px 4px 10px !important;
    margin:0 !important;
  }

  /* Mapa: imagen grande, completa y sin quedar chata */
  #cuerpoEventos .ts365-extras .ts365-frame-mapa,
  #cuerpoEventos .ts365-extras .ts365-frame:first-child{
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    padding:0 !important;
    border-radius:18px !important;
    background:#0b1220 !important;
    display:block !important;
    overflow:hidden !important;
  }

  #cuerpoEventos .ts365-extras .ts365-frame-mapa img,
  #cuerpoEventos .ts365-extras .ts365-frame-mapa #medidas_mapa,
  #cuerpoEventos .ts365-extras #mapa-contenedor-zoom img,
  #cuerpoEventos .ts365-extras .ts365-card img#medidas_mapa{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    display:block !important;
    object-fit:contain !important;
    object-position:center center !important;
    margin:0 auto !important;
    border-radius:18px !important;
    background:#0b1220 !important;
  }

  #cuerpoEventos .ts365-extras #mapa-contenedor-zoom{
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    display:block !important;
    overflow:hidden !important;
    border-radius:18px !important;
  }

  /* Spotify usa todo el ancho de la tarjeta */
  #cuerpoEventos .ts365-extras .ts365-frame-spotify{
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    background:transparent !important;
    border-radius:18px !important;
    overflow:hidden !important;
    display:block !important;
  }

  #cuerpoEventos .ts365-extras .ts365-frame-spotify iframe{
    width:100% !important;
    height:380px !important;
    min-height:380px !important;
    max-height:none !important;
    display:block !important;
    border:0 !important;
    border-radius:18px !important;
  }

  /* Video: YouTube horizontal / TikTok vertical, ambos con ancho completo */
  #cuerpoEventos .ts365-extras .ts365-frame-video{
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    background:#000 !important;
    border-radius:18px !important;
    overflow:hidden !important;
    display:block !important;
  }

  #cuerpoEventos .ts365-extras .ts365-frame-video iframe,
  #cuerpoEventos .ts365-extras .ts365-frame-video video{
    width:100% !important;
    height:520px !important;
    min-height:520px !important;
    max-height:none !important;
    display:block !important;
    border:0 !important;
    border-radius:18px !important;
    background:#000 !important;
  }

  #cuerpoEventos .ts365-extras .ts365-frame-video blockquote,
  #cuerpoEventos .ts365-extras .ts365-frame-video .tiktok-embed{
    width:100% !important;
    min-width:100% !important;
    max-width:100% !important;
    margin:0 auto !important;
  }
}

@media (max-width: 390px){
  #cuerpoEventos .ts365-extras{
    width:calc(100vw - 14px) !important;
    max-width:calc(100vw - 14px) !important;
    margin-left:calc(50% - 50vw + 7px) !important;
  }

  #cuerpoEventos .ts365-extras .ts365-card{
    padding:10px !important;
    border-radius:20px !important;
  }
}


#cuerpoEventos .ts365-extras .ts365-wrap{
    width:100% !important;
    max-width:100% !important;
    margin:0 auto !important;
    box-sizing:border-box !important;

    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;

    gap:22px !important;
    align-items:stretch !important;
}

/* evita que se desborde */
#cuerpoEventos .ts365-extras .ts365-card{
    min-width:0 !important;
    width:100% !important;
}

/* tablet */
@media (max-width: 991px){
    #cuerpoEventos .ts365-extras .ts365-wrap{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }
}

/* móvil */
@media (max-width: 767px){
    #cuerpoEventos .ts365-extras .ts365-wrap{
        grid-template-columns:1fr !important;
    }
}

/* =========================================================
   FIX DEFINITIVO 2026-05-13: EXTRAS CENTRADOS SIN CORTE
   Mapa / Spotify / Video toman el ancho real del contenedor.
   Corrige el quiebre desde 992px donde las cards quedaban angostas
   por reglas anteriores de flex/max-width.
   ========================================================= */
#cuerpoEventos .ts365-extras{
  width:min(1210px, calc(100vw - 48px)) !important;
  max-width:min(1210px, calc(100vw - 48px)) !important;
  margin:24px auto !important;
  padding:0 !important;
  box-sizing:border-box !important;
  overflow:visible !important;
}

#cuerpoEventos .ts365-extras .ts365-wrap,
#cuerpoEventos .ts365-extras .ts365-wrap.cols-1,
#cuerpoEventos .ts365-extras .ts365-wrap.cols-2,
#cuerpoEventos .ts365-extras .ts365-wrap.cols-3{
  width:100% !important;
  max-width:100% !important;
  margin:0 auto !important;
  padding:0 !important;
  box-sizing:border-box !important;
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:22px !important;
  align-items:stretch !important;
  justify-items:stretch !important;
  justify-content:center !important;
  overflow:visible !important;
}

#cuerpoEventos .ts365-extras .ts365-card,
#cuerpoEventos .ts365-extras .ts365-wrap.cols-1 .ts365-card,
#cuerpoEventos .ts365-extras .ts365-wrap.cols-2 .ts365-card,
#cuerpoEventos .ts365-extras .ts365-wrap.cols-3 .ts365-card{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  flex:none !important;
  flex-basis:auto !important;
  justify-self:stretch !important;
  margin:0 !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
}

#cuerpoEventos .ts365-extras .ts365-frame,
#cuerpoEventos .ts365-extras .ts365-frame-mapa,
#cuerpoEventos .ts365-extras .ts365-frame-spotify,
#cuerpoEventos .ts365-extras .ts365-frame-video{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}

@media (max-width: 991px){
  #cuerpoEventos .ts365-extras{
    width:min(760px, calc(100vw - 24px)) !important;
    max-width:min(760px, calc(100vw - 24px)) !important;
  }

  #cuerpoEventos .ts365-extras .ts365-wrap,
  #cuerpoEventos .ts365-extras .ts365-wrap.cols-1,
  #cuerpoEventos .ts365-extras .ts365-wrap.cols-2,
  #cuerpoEventos .ts365-extras .ts365-wrap.cols-3{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 767px){
  #cuerpoEventos .ts365-extras{
    width:calc(100vw - 22px) !important;
    max-width:calc(100vw - 22px) !important;
    margin-left:calc(50% - 50vw + 11px) !important;
    margin-right:0 !important;
  }

  #cuerpoEventos .ts365-extras .ts365-wrap,
  #cuerpoEventos .ts365-extras .ts365-wrap.cols-1,
  #cuerpoEventos .ts365-extras .ts365-wrap.cols-2,
  #cuerpoEventos .ts365-extras .ts365-wrap.cols-3{
    grid-template-columns:1fr !important;
    gap:20px !important;
  }
}

@media (max-width: 390px){
  #cuerpoEventos .ts365-extras{
    width:calc(100vw - 14px) !important;
    max-width:calc(100vw - 14px) !important;
    margin-left:calc(50% - 50vw + 7px) !important;
  }
}

/* =========================================================
   FIX REAL FINAL 2026-05-13: EXTRAS CENTRADOS Y ADAPTATIVOS
   - NO cambia el contenedor Bootstrap a col-12. Mantiene col-10.
   - Si hay 3 extras: 3 columnas iguales.
   - Si hay 2 extras: 2 columnas grandes, centradas, aprovechando el ancho.
   - Si hay 1 extra: ocupa el ancho disponible.
   - En móvil: 1 columna centrada dentro del mismo margen del contenido.
   ========================================================= */

/* Mantener el mismo ancho visual que la tabla/localidades: col-10 centrado */
#cuerpoEventos #contenedor-localidades > .row{
    margin-left:0 !important;
    margin-right:0 !important;
    display:flex !important;
    justify-content:center !important;
    flex-wrap:wrap !important;
}

#cuerpoEventos #contenedor-localidades > .row > .col-xs-10.col-md-10{
    float:none !important;
    width:83.33333333% !important;
    max-width:1210px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:0 !important;
    padding-right:0 !important;
    box-sizing:border-box !important;
}

#cuerpoEventos .ts365-extras{
    width:100% !important;
    max-width:100% !important;
    margin:24px auto !important;
    padding:0 !important;
    box-sizing:border-box !important;
    overflow:visible !important;
}

#cuerpoEventos .ts365-extras .ts365-wrap,
#cuerpoEventos .ts365-extras .ts365-wrap.cols-1,
#cuerpoEventos .ts365-extras .ts365-wrap.cols-2,
#cuerpoEventos .ts365-extras .ts365-wrap.cols-3{
    width:100% !important;
    max-width:100% !important;
    margin:0 auto !important;
    padding:0 !important;
    box-sizing:border-box !important;
    display:grid !important;
    gap:22px !important;
    align-items:stretch !important;
    justify-items:stretch !important;
    justify-content:center !important;
    overflow:visible !important;
}

/* 1, 2 o 3 elementos: cada caso usa todo el ancho disponible */
#cuerpoEventos .ts365-extras .ts365-wrap.cols-1{
    grid-template-columns:1fr !important;
}

#cuerpoEventos .ts365-extras .ts365-wrap.cols-2{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
}

#cuerpoEventos .ts365-extras .ts365-wrap.cols-3{
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
}

/* Fallback si por alguna razon no llega cols-1/2/3 */
#cuerpoEventos .ts365-extras .ts365-wrap:not(.cols-1):not(.cols-2):not(.cols-3){
    grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)) !important;
}

#cuerpoEventos .ts365-extras .ts365-card,
#cuerpoEventos .ts365-extras .ts365-wrap.cols-1 .ts365-card,
#cuerpoEventos .ts365-extras .ts365-wrap.cols-2 .ts365-card,
#cuerpoEventos .ts365-extras .ts365-wrap.cols-3 .ts365-card{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    flex:none !important;
    flex-basis:auto !important;
    justify-self:stretch !important;
    align-self:stretch !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
}

#cuerpoEventos .ts365-extras .ts365-frame,
#cuerpoEventos .ts365-extras .ts365-frame-mapa,
#cuerpoEventos .ts365-extras .ts365-frame-spotify,
#cuerpoEventos .ts365-extras .ts365-frame-video{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
}

/* Desktop mediano: si 3 ya no entran cómodos, pasa a 2 columnas */
@media (min-width:768px) and (max-width:1199px){
    #cuerpoEventos .ts365-extras .ts365-wrap.cols-3{
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Móvil: una sola columna, centrada, SIN pegarse a la izquierda */
@media (max-width:767px){
    #cuerpoEventos #contenedor-localidades > .row > .col-xs-10.col-md-10{
        width:83.33333333% !important;
        max-width:520px !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }

    #cuerpoEventos .ts365-extras{
        width:100% !important;
        max-width:100% !important;
        margin:24px auto !important;
        padding:0 !important;
    }

    #cuerpoEventos .ts365-extras .ts365-wrap,
    #cuerpoEventos .ts365-extras .ts365-wrap.cols-1,
    #cuerpoEventos .ts365-extras .ts365-wrap.cols-2,
    #cuerpoEventos .ts365-extras .ts365-wrap.cols-3{
        grid-template-columns:1fr !important;
        gap:20px !important;
    }

    #cuerpoEventos .ts365-extras .ts365-card{
        padding:14px !important;
        border-radius:22px !important;
    }
}

/* Celulares muy angostos: usa un poquito mas de ancho, pero sigue centrado */
@media (max-width:390px){
    #cuerpoEventos #contenedor-localidades > .row > .col-xs-10.col-md-10{
        width:88% !important;
    }
}

/* =========================================================
   FIX HERO SUPERIOR 2026-05-13
   - Ya no es carrusel.
   - Las imágenes activo1 salen una debajo de otra.
   - Solo la primera imagen muestra Comprar entradas + App.
   - En móvil la imagen se ve completa, sin recortarse.
   ========================================================= */
.ts365-hero.ts365-hero-vertical{
    position:relative !important;
    min-height:0 !important;
    height:auto !important;
    overflow:visible !important;
    background:transparent !important;
    box-shadow:none !important;
    border-radius:0 !important;
    margin:18px 0 24px !important;
    isolation:auto !important;
}

.ts365-hero.ts365-hero-vertical::after{
    display:none !important;
    content:none !important;
}

.ts365-hero-stack{
    width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    gap:14px !important;
}

.ts365-hero-item{
    position:relative !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    overflow:hidden !important;
    border-radius:28px !important;
    background:#111 !important;
    box-shadow:var(--ts-shadow) !important;
}

.ts365-hero-vertical .ts365-hero-img{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    height:auto !important;
    max-width:100% !important;
    display:block !important;
    object-fit:contain !important;
    z-index:1 !important;
}

.ts365-hero-vertical .ts365-hero-content-simple{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    z-index:3 !important;
    min-height:0 !important;
    max-width:none !important;
    width:100% !important;
    padding:18px 22px !important;
    display:flex !important;
    align-items:flex-end !important;
    justify-content:center !important;
    pointer-events:none !important;
    background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.55) 100%) !important;
}

.ts365-hero-vertical .ts365-hero-actions{
    width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px !important;
    pointer-events:auto !important;
}

.ts365-hero-vertical .ts365-primary-btn{
    width:min(320px,90%) !important;
    justify-content:center !important;
    text-align:center !important;
}

.ts365-hero-vertical .ts365-app-mini{
    width:min(330px,92%) !important;
    margin:0 auto !important;
}

@media (max-width:767px){
    .ts365-hero.ts365-hero-vertical{
        margin:10px 0 18px !important;
    }

    .ts365-hero-stack{
        gap:12px !important;
    }

    .ts365-hero-item{
        border-radius:14px !important;
    }

    .ts365-hero-vertical .ts365-hero-content-simple{
        padding:10px 10px 12px !important;
    }

    .ts365-hero-vertical .ts365-primary-btn{
        width:min(280px,88%) !important;
        padding:12px 18px !important;
        font-size:13px !important;
    }

    .ts365-hero-vertical .ts365-app-mini{
        width:min(285px,90%) !important;
        padding:9px 10px !important;
        border-radius:16px !important;
    }

    .ts365-hero-vertical .ts365-store-btn{
        padding:8px 12px !important;
        font-size:12px !important;
    }
}

/* =========================================================
   FIX FINAL 2026-05-14: HERO VERTICAL SIN TAPAR TEXTO
   - Las imagenes activo1 van una debajo de otra.
   - El CTA de comprar/app pertenece SOLO a la primera imagen.
   - El CTA ya NO se monta encima de la imagen ni tapa textos del arte.
   - Desktop: boton + app quedan en una franja elegante integrada al card.
   - Movil: todo queda compacto y centrado debajo de la primera imagen.
   ========================================================= */
.ts365-hero.ts365-hero-vertical{
    position:relative !important;
    min-height:0 !important;
    height:auto !important;
    overflow:visible !important;
    background:transparent !important;
    box-shadow:none !important;
    border-radius:0 !important;
    margin:18px 0 24px !important;
    isolation:auto !important;
}

.ts365-hero.ts365-hero-vertical::after,
.ts365-hero.ts365-hero-vertical .ts365-hero-item::before,
.ts365-hero.ts365-hero-vertical .ts365-hero-item::after{
    display:none !important;
    content:none !important;
}

.ts365-hero-stack{
    width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    gap:14px !important;
}

.ts365-hero-item{
    position:relative !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    overflow:hidden !important;
    border-radius:28px !important;
    background:#0f172a !important;
    box-shadow:var(--ts-shadow) !important;
}

.ts365-hero-vertical .ts365-hero-img{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    height:auto !important;
    max-width:100% !important;
    display:block !important;
    object-fit:contain !important;
    object-position:center center !important;
    z-index:1 !important;
}

/* CTA integrado como franja inferior del primer card: no tapa la imagen */
.ts365-hero-vertical .ts365-hero-content-simple{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    top:auto !important;
    z-index:3 !important;
    min-height:0 !important;
    max-width:none !important;
    width:100% !important;
    padding:18px 22px !important;
    margin:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    pointer-events:auto !important;
    background:linear-gradient(135deg,#101827 0%,#0b1220 58%,#111827 100%) !important;
    border-top:1px solid rgba(255,255,255,.10) !important;
}

.ts365-hero-vertical .ts365-hero-actions{
    width:100% !important;
    max-width:920px !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:center !important;
    gap:16px !important;
    flex-wrap:wrap !important;
    pointer-events:auto !important;
}

.ts365-hero-vertical .ts365-primary-btn{
    width:min(330px,100%) !important;
    min-height:54px !important;
    justify-content:center !important;
    text-align:center !important;
    margin:0 !important;
    flex:0 0 auto !important;
}

.ts365-hero-vertical .ts365-app-mini{
    width:auto !important;
    max-width:520px !important;
    margin:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:14px !important;
    flex-wrap:wrap !important;
    background:rgba(255,255,255,.08) !important;
    border:1px solid rgba(255,255,255,.14) !important;
    box-shadow:0 18px 40px rgba(0,0,0,.24) !important;
}

.ts365-hero-vertical .ts365-app-text{
    max-width:210px !important;
    text-align:left !important;
    color:#fff !important;
    font-weight:850 !important;
    line-height:1.15 !important;
}

.ts365-hero-vertical .ts365-app-buttons{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px !important;
    flex-wrap:wrap !important;
}

.ts365-hero-vertical .ts365-store-btn{
    white-space:nowrap !important;
}

@media (max-width:991px){
    .ts365-hero.ts365-hero-vertical{
        margin:12px 0 20px !important;
    }

    .ts365-hero-stack{
        gap:12px !important;
    }

    .ts365-hero-item{
        border-radius:20px !important;
    }

    .ts365-hero-vertical .ts365-hero-content-simple{
        padding:14px 14px 16px !important;
    }

    .ts365-hero-vertical .ts365-hero-actions{
        max-width:100% !important;
        gap:12px !important;
    }
}

@media (max-width:767px){
    .ts365-hero.ts365-hero-vertical{
        margin:10px 0 18px !important;
    }

    .ts365-hero-stack{
        gap:12px !important;
    }

    .ts365-hero-item{
        border-radius:14px !important;
    }

    .ts365-hero-vertical .ts365-hero-content-simple{
        padding:12px 10px 14px !important;
    }

    .ts365-hero-vertical .ts365-hero-actions{
        flex-direction:column !important;
        gap:10px !important;
    }

    .ts365-hero-vertical .ts365-primary-btn{
        width:min(295px,92%) !important;
        min-height:48px !important;
        padding:12px 18px !important;
        font-size:13px !important;
    }

    .ts365-hero-vertical .ts365-app-mini{
        width:min(310px,92%) !important;
        max-width:min(310px,92%) !important;
        padding:10px 10px !important;
        border-radius:18px !important;
        gap:8px !important;
    }

    .ts365-hero-vertical .ts365-app-text{
        max-width:100% !important;
        width:100% !important;
        text-align:center !important;
        font-size:11px !important;
    }

    .ts365-hero-vertical .ts365-app-buttons{
        width:100% !important;
        gap:8px !important;
    }

    .ts365-hero-vertical .ts365-store-btn{
        flex:1 1 0 !important;
        min-width:0 !important;
        justify-content:center !important;
        padding:8px 10px !important;
        font-size:11px !important;
    }
}

/* =========================================================
   TS365 EVENTO - ORDEN FINAL 2026-05-14
   1) imagenes activo1 una debajo de otra
   2) carrusel activo ancho completo
   3) informacion evento
   4) localidades sin tocar estructura interna
   5) videos/extras
   6) descripcion
   ========================================================= */
#cuerpoEventos .ts365-event-page{
    width:min(1210px, calc(100% - 32px)) !important;
    max-width:1210px !important;
    margin:0 auto !important;
}

#cuerpoEventos .ts365-hero.ts365-hero-vertical{
    width:100% !important;
    max-width:100% !important;
    margin:18px auto 18px !important;
    padding:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    border:0 !important;
    overflow:visible !important;
    aspect-ratio:auto !important;
}

#cuerpoEventos .ts365-hero-stack{
    display:flex !important;
    flex-direction:column !important;
    gap:14px !important;
    width:100% !important;
}

#cuerpoEventos .ts365-hero-item{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:auto !important;
    overflow:hidden !important;
    border-radius:24px !important;
    background:#fff !important;
    box-shadow:0 18px 44px rgba(13,34,63,.12) !important;
    position:relative !important;
}

#cuerpoEventos .ts365-hero-img{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    min-height:0 !important;
    object-fit:contain !important;
    object-position:center center !important;
    border-radius:inherit !important;
}

/* CTA/app solo encima de la primera imagen activo1 */
#cuerpoEventos .ts365-hero-content-simple{
    position:absolute !important;
    inset:auto 22px 22px 22px !important;
    z-index:5 !important;
    pointer-events:none !important;
}
#cuerpoEventos .ts365-hero-actions,
#cuerpoEventos .ts365-hero-actions *{
    pointer-events:auto !important;
}

/* Carrusel activo: mismo ancho que las imagenes superiores */
#cuerpoEventos .carousel-wrapper{
    width:min(1210px, calc(100% - 32px)) !important;
    max-width:1210px !important;
    margin:0 auto 18px !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
}

#cuerpoEventos .carousel-container{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    border-radius:24px !important;
    background:#fff !important;
    box-shadow:0 18px 44px rgba(13,34,63,.12) !important;
    aspect-ratio:auto !important;
    position:relative !important;
}

#cuerpoEventos .carousel1{
    display:flex !important;
    width:100% !important;
    transition:transform .45s ease !important;
    align-items:flex-start !important;
}

#cuerpoEventos .ts365-carousel-slide{
    flex:0 0 100% !important;
    width:100% !important;
    max-width:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:#fff !important;
}

#cuerpoEventos .ts365-carousel-img{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center center !important;
    border-radius:24px !important;
}

#cuerpoEventos .carousel-dots{
    position:absolute !important;
    left:50% !important;
    bottom:14px !important;
    transform:translateX(-50%) !important;
    z-index:6 !important;
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    gap:8px !important;
    padding:6px 10px !important;
    border-radius:999px !important;
    background:rgba(0,0,0,.18) !important;
    width:auto !important;
}

#cuerpoEventos .carousel-dot{
    width:10px !important;
    height:10px !important;
    border-radius:50% !important;
    background:rgba(255,255,255,.65) !important;
    cursor:pointer !important;
}
#cuerpoEventos .carousel-dot.active{
    background:#ff6b00 !important;
}

/* Informacion del evento antes de localidades */
#cuerpoEventos .ts365-event-info-block{
    width:min(1210px, calc(100% - 32px)) !important;
    max-width:1210px !important;
    margin:0 auto 18px !important;
}

#cuerpoEventos .ts365-info-card-top,
#cuerpoEventos .ts365-description-card-final{
    width:100% !important;
    border-radius:24px !important;
    overflow:hidden !important;
}

#cuerpoEventos .ts365-info-note{
    margin-top:16px !important;
    padding:16px 18px !important;
    border:1px solid rgba(0,174,239,.16) !important;
    border-radius:16px !important;
    background:#f7fbff !important;
    color:#061d3a !important;
    font-weight:700 !important;
    line-height:1.55 !important;
}

/* Localidades: solo acomodamos el contenedor exterior, no tocamos tabla, botones ni precios */
#cuerpoEventos .ts365-main-grid{
    width:min(1210px, calc(100% - 32px)) !important;
    max-width:1210px !important;
    margin:0 auto 18px !important;
    display:block !important;
    grid-template-columns:none !important;
}

#cuerpoEventos .ts365-localidades-card{
    width:100% !important;
    max-width:100% !important;
}

/* Videos / extras: ocupan el ancho disponible segun cantidad 1, 2 o 3 */
#cuerpoEventos #contenedor-localidades{
    width:min(1210px, calc(100% - 32px)) !important;
    max-width:1210px !important;
    margin:0 auto 18px !important;
    padding:0 !important;
}

#cuerpoEventos #contenedor-localidades > .row,
#cuerpoEventos #contenedor-localidades .ts365-extras-col{
    margin-left:0 !important;
    margin-right:0 !important;
    width:100% !important;
    max-width:100% !important;
    float:none !important;
    padding-left:0 !important;
    padding-right:0 !important;
}

#cuerpoEventos .ts365-extras{
    width:100% !important;
    margin:0 auto 18px !important;
}

#cuerpoEventos .ts365-wrap{
    width:100% !important;
    max-width:100% !important;
    display:grid !important;
    gap:18px !important;
    align-items:stretch !important;
}
#cuerpoEventos .ts365-wrap.cols-1{ grid-template-columns:1fr !important; }
#cuerpoEventos .ts365-wrap.cols-2{ grid-template-columns:repeat(2, minmax(0, 1fr)) !important; }
#cuerpoEventos .ts365-wrap.cols-3{ grid-template-columns:repeat(3, minmax(0, 1fr)) !important; }

#cuerpoEventos .ts365-card{
    width:100% !important;
    max-width:100% !important;
}

#cuerpoEventos .ts365-desc-final-section{
    width:min(1210px, calc(100% - 32px)) !important;
    max-width:1210px !important;
    margin:0 auto 24px !important;
}

@media (max-width:767px){
    #cuerpoEventos .ts365-event-page,
    #cuerpoEventos .carousel-wrapper,
    #cuerpoEventos .ts365-event-info-block,
    #cuerpoEventos .ts365-main-grid,
    #cuerpoEventos #contenedor-localidades,
    #cuerpoEventos .ts365-desc-final-section{
        width:calc(100% - 20px) !important;
        max-width:calc(100% - 20px) !important;
    }

    #cuerpoEventos .ts365-hero-stack{ gap:10px !important; }
    #cuerpoEventos .ts365-hero-item,
    #cuerpoEventos .carousel-container,
    #cuerpoEventos .ts365-carousel-img,
    #cuerpoEventos .ts365-info-card-top,
    #cuerpoEventos .ts365-description-card-final{
        border-radius:14px !important;
    }

    #cuerpoEventos .ts365-hero-content-simple{
        inset:auto 10px 10px 10px !important;
    }

    #cuerpoEventos .carousel-dots{
        bottom:8px !important;
        gap:6px !important;
        padding:5px 8px !important;
    }

    #cuerpoEventos .carousel-dot{
        width:8px !important;
        height:8px !important;
    }

    #cuerpoEventos .ts365-wrap.cols-1,
    #cuerpoEventos .ts365-wrap.cols-2,
    #cuerpoEventos .ts365-wrap.cols-3{
        grid-template-columns:1fr !important;
    }
}

/* =========================================================
   PARCHE REAL FINAL: CTA de la primera imagen SIN tapar el arte
   - Las imagenes activo1 siguen una debajo de otra.
   - Comprar/App queda pegado a la primera imagen, pero debajo del arte.
   - Evita el bloque negro gigante en desktop y mobile.
   ========================================================= */
#cuerpoEventos .ts365-hero.ts365-hero-vertical,
#cuerpoEventos .ts365-hero.ts365-hero-vertical *{
    box-sizing:border-box !important;
}

#cuerpoEventos .ts365-hero-vertical .ts365-hero-item{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    aspect-ratio:auto !important;
    overflow:hidden !important;
}

#cuerpoEventos .ts365-hero-vertical .ts365-hero-img{
    position:relative !important;
    inset:auto !important;
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    aspect-ratio:auto !important;
    object-fit:contain !important;
    object-position:center center !important;
    flex:0 0 auto !important;
    z-index:1 !important;
}

#cuerpoEventos .ts365-hero-vertical .ts365-hero-content-simple{
    position:relative !important;
    inset:auto !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    max-width:100% !important;
    min-height:0 !important;
    height:auto !important;
    padding:14px 18px !important;
    margin:0 !important;
    background:linear-gradient(135deg,#0b1426 0%,#101827 100%) !important;
    border:0 !important;
    border-top:1px solid rgba(255,255,255,.10) !important;
    box-shadow:none !important;
    transform:none !important;
    z-index:2 !important;
    pointer-events:auto !important;
}

#cuerpoEventos .ts365-hero-vertical .ts365-hero-content-simple::before,
#cuerpoEventos .ts365-hero-vertical .ts365-hero-content-simple::after{
    display:none !important;
    content:none !important;
}

#cuerpoEventos .ts365-hero-vertical .ts365-hero-actions{
    width:100% !important;
    max-width:860px !important;
    min-height:0 !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:center !important;
    gap:14px !important;
    flex-wrap:wrap !important;
    padding:0 !important;
    margin:0 auto !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
}

#cuerpoEventos .ts365-hero-vertical .ts365-primary-btn{
    width:min(320px,100%) !important;
    min-height:52px !important;
    margin:0 !important;
    flex:0 0 auto !important;
}

#cuerpoEventos .ts365-hero-vertical .ts365-app-mini{
    width:auto !important;
    max-width:520px !important;
    min-height:0 !important;
    margin:0 !important;
    padding:10px 14px !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:center !important;
    gap:12px !important;
    flex-wrap:wrap !important;
}

#cuerpoEventos .ts365-hero-vertical .ts365-app-text{
    max-width:220px !important;
    text-align:left !important;
    line-height:1.15 !important;
}

/* Carrusel del mismo ancho y adaptable a imagen horizontal, cuadrada o vertical */
#cuerpoEventos .carousel-wrapper{
    width:min(1210px, calc(100% - 32px)) !important;
    max-width:1210px !important;
}
#cuerpoEventos .carousel-container,
#cuerpoEventos .carousel1,
#cuerpoEventos .ts365-carousel-slide{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    aspect-ratio:auto !important;
}
#cuerpoEventos .ts365-carousel-img{
    width:100% !important;
    height:auto !important;
    max-height:none !important;
    object-fit:contain !important;
}

@media (max-width:767px){
    #cuerpoEventos .ts365-hero-vertical .ts365-hero-content-simple{
        position:relative !important;
        inset:auto !important;
        padding:12px 10px !important;
    }
    #cuerpoEventos .ts365-hero-vertical .ts365-hero-actions{
        flex-direction:column !important;
        gap:9px !important;
        max-width:100% !important;
    }
    #cuerpoEventos .ts365-hero-vertical .ts365-primary-btn{
        width:min(295px,92%) !important;
        min-height:48px !important;
    }
    #cuerpoEventos .ts365-hero-vertical .ts365-app-mini{
        width:min(310px,94%) !important;
        max-width:min(310px,94%) !important;
        padding:9px 10px !important;
        gap:8px !important;
    }
    #cuerpoEventos .ts365-hero-vertical .ts365-app-text{
        width:100% !important;
        max-width:100% !important;
        text-align:center !important;
        font-size:11px !important;
    }
    #cuerpoEventos .ts365-hero-vertical .ts365-app-buttons{
        width:100% !important;
        display:flex !important;
        justify-content:center !important;
        gap:8px !important;
        flex-wrap:wrap !important;
    }
}

/* =========================================================
   FIX 2026-05-14: TEXTO DINAMICO SIN CORTARSE
   El texto que viene desde base de datos puede ser largo.
   Por eso se eliminan alturas maximas y overflow hidden en
   informacion del evento, nota inicial y descripcion.
   ========================================================= */
#cuerpoEventos .ts365-info-card,
#cuerpoEventos .ts365-info-card-top,
#cuerpoEventos .ts365-info-card .ts365-card-body,
#cuerpoEventos .ts365-info-card-top .ts365-card-body,
#cuerpoEventos .ts365-event-info-block,
#cuerpoEventos .ts365-info-evento-final,
#cuerpoEventos .ts365-description-card-final,
#cuerpoEventos .ts365-description-card-final .ts365-card-body{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:visible !important;
}

#cuerpoEventos .ts365-info-note,
#cuerpoEventos .ts365-info-card .ts365-info-note,
#cuerpoEventos .ts365-info-card-top .ts365-info-note,
#cuerpoEventos #descripcionEven,
#cuerpoEventos .ts365-desc,
#cuerpoEventos .ts365-desc-final{
    display:block !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:visible !important;
    overflow-y:visible !important;
    overflow-x:hidden !important;
    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:anywhere !important;
    line-height:1.55 !important;
}

@media (max-width:767px){
    #cuerpoEventos .ts365-info-card,
    #cuerpoEventos .ts365-info-card-top,
    #cuerpoEventos .ts365-info-card .ts365-card-body,
    #cuerpoEventos .ts365-info-card-top .ts365-card-body,
    #cuerpoEventos .ts365-info-evento-final,
    #cuerpoEventos .ts365-description-card-final,
    #cuerpoEventos .ts365-description-card-final .ts365-card-body{
        height:auto !important;
        max-height:none !important;
        overflow:visible !important;
    }

    #cuerpoEventos .ts365-info-note{
        width:100% !important;
        max-width:100% !important;
        padding:14px 14px !important;
        font-size:13px !important;
        line-height:1.6 !important;
        height:auto !important;
        max-height:none !important;
        overflow:visible !important;
        white-space:normal !important;
        word-break:normal !important;
        overflow-wrap:anywhere !important;
    }
}

/* =========================================================
   FIX FINAL TEMA OSCURO UNIFICADO + LOCALIDADES AJAX
   2026-05-14
   Objetivo:
   - Un solo color oscuro en toda la página.
   - La tabla de localidades que viene desde adaptable_text.php
     no debe quedar con líneas/blancos cuando el tema es oscuro.
   ========================================================= */

#cuerpoEventos.tema-evento-oscuro{
    --ts-dark-unico:#101827;
    --ts-bg:#101827;
    --ts-card:#101827;
    --ts-text:#ffffff;
    --ts-muted:#e8eef7;
    --ts-line:#223047;
    --ts-table-bg:#101827;
    --ts-table-row:#101827;
    --ts-table-text:#ffffff;
    --ts-table-muted:#38d9ff;
    --ts-table-price:#ff8a1c;
    --ts-table-line:#223047;
    --ts-table-tab-bg:#101827;
    --ts-table-tab-active:#00a9df;
    --ts-table-tab-text:#ffffff;
    background:#101827 !important;
}

html:has(#cuerpoEventos.tema-evento-oscuro),
body:has(#cuerpoEventos.tema-evento-oscuro){
    background:#101827 !important;
}

/* Unifica todas las tarjetas/secciones oscuras */
#cuerpoEventos.tema-evento-oscuro .ts365-event-page,
#cuerpoEventos.tema-evento-oscuro .ts365-main-grid,
#cuerpoEventos.tema-evento-oscuro .ts365-card-modern,
#cuerpoEventos.tema-evento-oscuro .ts365-card,
#cuerpoEventos.tema-evento-oscuro .ts365-info-card,
#cuerpoEventos.tema-evento-oscuro .ts365-desc-final-section,
#cuerpoEventos.tema-evento-oscuro .ts365-desc-final-section .ts365-info-card,
#cuerpoEventos.tema-evento-oscuro .ts365-extras,
#cuerpoEventos.tema-evento-oscuro .ts365-extras .ts365-card,
#cuerpoEventos.tema-evento-oscuro .ts365-localidades-card,
#cuerpoEventos.tema-evento-oscuro .contenedor-evento,
#cuerpoEventos.tema-evento-oscuro .carousel-wrapper,
#cuerpoEventos.tema-evento-oscuro .carousel-container,
#cuerpoEventos.tema-evento-oscuro .ts365-note{
    background:#101827 !important;
    color:#ffffff !important;
    border-color:#223047 !important;
}

#cuerpoEventos.tema-evento-oscuro .ts365-card-modern *,
#cuerpoEventos.tema-evento-oscuro .ts365-localidades-card *,
#cuerpoEventos.tema-evento-oscuro .ts365-extras *,
#cuerpoEventos.tema-evento-oscuro .ts365-desc-final-section *{
    border-color:#223047;
}

#cuerpoEventos.tema-evento-oscuro .ts365-section-title,
#cuerpoEventos.tema-evento-oscuro .ts365-title,
#cuerpoEventos.tema-evento-oscuro .ts365-title.panel,
#cuerpoEventos.tema-evento-oscuro .ts365-info-evento-final div,
#cuerpoEventos.tema-evento-oscuro .ts365-note,
#cuerpoEventos.tema-evento-oscuro #descripcionEven,
#cuerpoEventos.tema-evento-oscuro .ts365-desc,
#cuerpoEventos.tema-evento-oscuro .end-social h2,
#cuerpoEventos.tema-evento-oscuro #artista-red-social{
    color:#ffffff !important;
}

/* Localidades: adaptable_text.php llega por AJAX dentro de #contPrice */
#cuerpoEventos.tema-evento-oscuro #contPrice,
#cuerpoEventos.tema-evento-oscuro #contenedor-localidades,
#cuerpoEventos.tema-evento-oscuro .ts365-localidades-card #contPrice,
#cuerpoEventos.tema-evento-oscuro .tab-content,
#cuerpoEventos.tema-evento-oscuro .tab-pane,
#cuerpoEventos.tema-evento-oscuro .table-responsive{
    background:#101827 !important;
    color:#ffffff !important;
    border-color:#223047 !important;
}

#cuerpoEventos.tema-evento-oscuro #contPrice table,
#cuerpoEventos.tema-evento-oscuro #contPrice .table,
#cuerpoEventos.tema-evento-oscuro #tablePrice,
#cuerpoEventos.tema-evento-oscuro #tablePrice thead,
#cuerpoEventos.tema-evento-oscuro #tablePrice tbody,
#cuerpoEventos.tema-evento-oscuro #tablePrice tfoot,
#cuerpoEventos.tema-evento-oscuro #tablePrice tr,
#cuerpoEventos.tema-evento-oscuro #tablePrice th,
#cuerpoEventos.tema-evento-oscuro #tablePrice td,
#cuerpoEventos.tema-evento-oscuro .table > thead > tr > th,
#cuerpoEventos.tema-evento-oscuro .table > tbody > tr > th,
#cuerpoEventos.tema-evento-oscuro .table > tfoot > tr > th,
#cuerpoEventos.tema-evento-oscuro .table > thead > tr > td,
#cuerpoEventos.tema-evento-oscuro .table > tbody > tr > td,
#cuerpoEventos.tema-evento-oscuro .table > tfoot > tr > td,
#cuerpoEventos.tema-evento-oscuro .table-bordered,
#cuerpoEventos.tema-evento-oscuro .table-bordered > thead > tr > th,
#cuerpoEventos.tema-evento-oscuro .table-bordered > tbody > tr > th,
#cuerpoEventos.tema-evento-oscuro .table-bordered > tfoot > tr > th,
#cuerpoEventos.tema-evento-oscuro .table-bordered > thead > tr > td,
#cuerpoEventos.tema-evento-oscuro .table-bordered > tbody > tr > td,
#cuerpoEventos.tema-evento-oscuro .table-bordered > tfoot > tr > td{
    background:#101827 !important;
    color:#ffffff !important;
    border-color:#223047 !important;
    box-shadow:none !important;
}

/* Quita líneas blancas heredadas por estilos inline/bootstrap */
#cuerpoEventos.tema-evento-oscuro #tablePrice tr,
#cuerpoEventos.tema-evento-oscuro #tablePrice td,
#cuerpoEventos.tema-evento-oscuro #tablePrice th{
    border-top:1px solid #223047 !important;
    border-bottom:1px solid #223047 !important;
}

/* Colores de textos de localidades conservando identidad */
#cuerpoEventos.tema-evento-oscuro #tablePrice td:first-child,
#cuerpoEventos.tema-evento-oscuro #tablePrice td:nth-child(2),
#cuerpoEventos.tema-evento-oscuro #tablePrice .tdLocali,
#cuerpoEventos.tema-evento-oscuro #tablePrice #tdLoCar,
#cuerpoEventos.tema-evento-oscuro #tablePrice .tdLo{
    color:#38d9ff !important;
}

#cuerpoEventos.tema-evento-oscuro #tablePrice td:last-child,
#cuerpoEventos.tema-evento-oscuro #tablePrice td:last-child *,
#cuerpoEventos.tema-evento-oscuro #tablePrice #datePrev{
    color:#ff8a1c !important;
}

/* Selects/cantidad en oscuro */
#cuerpoEventos.tema-evento-oscuro #tablePrice select,
#cuerpoEventos.tema-evento-oscuro #tablePrice input,
#cuerpoEventos.tema-evento-oscuro #tablePrice .canti_ip{
    background:#101827 !important;
    color:#ffffff !important;
    border:1px solid #223047 !important;
}

/* Pestañas dentro de localidades */
#cuerpoEventos.tema-evento-oscuro #contPrice .nav-tabs,
#cuerpoEventos.tema-evento-oscuro #contPrice ul.nav,
#cuerpoEventos.tema-evento-oscuro .ts365-localidades-card .nav-tabs,
#cuerpoEventos.tema-evento-oscuro .ts365-localidades-card ul.nav{
    background:#101827 !important;
    border-bottom:1px solid #223047 !important;
}

#cuerpoEventos.tema-evento-oscuro #contPrice .nav-tabs > li > a,
#cuerpoEventos.tema-evento-oscuro #contPrice ul.nav > li > a,
#cuerpoEventos.tema-evento-oscuro .ts365-localidades-card .nav-tabs > li > a,
#cuerpoEventos.tema-evento-oscuro .ts365-localidades-card ul.nav > li > a{
    background:#101827 !important;
    color:#ffffff !important;
    border-color:#223047 !important;
}

#cuerpoEventos.tema-evento-oscuro #contPrice .nav-tabs > li.active > a,
#cuerpoEventos.tema-evento-oscuro #contPrice ul.nav > li.active > a,
#cuerpoEventos.tema-evento-oscuro .ts365-localidades-card .nav-tabs > li.active > a,
#cuerpoEventos.tema-evento-oscuro .ts365-localidades-card ul.nav > li.active > a{
    background:#00a9df !important;
    color:#ffffff !important;
    border-color:#00a9df !important;
}

/* Tema claro: aseguramos que vuelva a su estilo claro */
#cuerpoEventos.tema-evento-claro #contPrice,
#cuerpoEventos.tema-evento-claro #contPrice table,
#cuerpoEventos.tema-evento-claro #tablePrice,
#cuerpoEventos.tema-evento-claro #tablePrice tbody,
#cuerpoEventos.tema-evento-claro #tablePrice tr,
#cuerpoEventos.tema-evento-claro #tablePrice td,
#cuerpoEventos.tema-evento-arena #contPrice,
#cuerpoEventos.tema-evento-arena #contPrice table,
#cuerpoEventos.tema-evento-arena #tablePrice,
#cuerpoEventos.tema-evento-arena #tablePrice tbody,
#cuerpoEventos.tema-evento-arena #tablePrice tr,
#cuerpoEventos.tema-evento-arena #tablePrice td{
    background:#ffffff !important;
    border-color:#dbeaf5 !important;
}

/* =========================
   INFO NOTE - TEMA OSCURO
========================= */

body:has(#cuerpoEventos.tema-evento-oscuro) .ts365-info-note,
#cuerpoEventos.tema-evento-oscuro .ts365-info-note{

    background: #101827 !important;
    color: #e5eefc !important;
    border: 1px solid rgba(255,255,255,.08) !important;

}

/* texto interno */
body:has(#cuerpoEventos.tema-evento-oscuro) .ts365-info-note *,
#cuerpoEventos.tema-evento-oscuro .ts365-info-note *{

    color: #e5eefc !important;

}

/* =========================
   TEMA OSCURO UNIFICADO
========================= */

body:has(#cuerpoEventos.tema-evento-oscuro),
html:has(#cuerpoEventos.tema-evento-oscuro),
body:has(#cuerpoEventos.tema-evento-oscuro) #cuerpoEventos,
#cuerpoEventos.tema-evento-oscuro {
    background: #101827 !important;
}

/* contenedores principales */
#cuerpoEventos.tema-evento-oscuro .ts365-event-page,
#cuerpoEventos.tema-evento-oscuro .ts365-main-grid,
#cuerpoEventos.tema-evento-oscuro .ts365-section,
#cuerpoEventos.tema-evento-oscuro .ts365-info-card,
#cuerpoEventos.tema-evento-oscuro .ts365-card,
#cuerpoEventos.tema-evento-oscuro .ts365-localidades,
#cuerpoEventos.tema-evento-oscuro .tab-content,
#cuerpoEventos.tema-evento-oscuro .tab-pane,
#cuerpoEventos.tema-evento-oscuro table,
#cuerpoEventos.tema-evento-oscuro tbody,
#cuerpoEventos.tema-evento-oscuro tr,
#cuerpoEventos.tema-evento-oscuro td {
    background-color: #101827 !important;
}

/* líneas de tabla */
#cuerpoEventos.tema-evento-oscuro table,
#cuerpoEventos.tema-evento-oscuro td,
#cuerpoEventos.tema-evento-oscuro tr {
    border-color: rgba(255,255,255,.08) !important;
}

@media (min-width:768px) and (max-width:991px){

    #cuerpoEventos{
        padding-top:78px!important;
    }

}

@media (min-width:992px) and (max-width:1198px){

    #cuerpoEventos{
        padding-top:83px!important;
    }

}
/* =========================================================
   FIX MINIMO 2026-05-15: quitar fondo negro del MAPA
   Mantiene la estructura original del ZIP. No cambia tamaños
   ni distribución; solo reemplaza el relleno negro del mapa.
   ========================================================= */
#cuerpoEventos .ts365-extras .ts365-frame-mapa,
#cuerpoEventos .ts365-extras .ts365-frame-mapa #mapa-contenedor-zoom,
#cuerpoEventos .ts365-extras .ts365-frame-mapa #medidas_mapa,
#cuerpoEventos .ts365-extras .ts365-frame-mapa img{
    background:#ffffff !important;
}

/* Si alguna regla anterior pinta el frame general oscuro, en mapa se fuerza blanco */
#cuerpoEventos .ts365-extras .ts365-frame.ts365-frame-mapa{
    background:#ffffff !important;
}

/* ===== FIX SIMETRIA 3 BLOQUES ===== */
@media (min-width: 992px){

  .ts365-extras .ts365-wrap.cols-3{
    display:flex !important;
    align-items:stretch !important;
  }

  .ts365-extras .ts365-wrap.cols-3 .ts365-card{
    display:flex !important;
    flex-direction:column !important;
  }

  .ts365-extras .ts365-wrap.cols-3 .ts365-frame{
    height:420px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:#fff !important;
  }

  .ts365-extras .ts365-wrap.cols-3 .ts365-frame img,
  .ts365-extras .ts365-wrap.cols-3 .ts365-frame iframe,
  .ts365-extras .ts365-wrap.cols-3 .ts365-frame video{
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    border-radius:18px !important;
  }

  /* spotify mismo tamaño visual */
  .ts365-extras .ts365-wrap.cols-3 .ts365-frame-spotify iframe{
    height:420px !important;
    min-height:420px !important;
  }

}

/* FIX: mapa más lleno cuando hay 3 bloques */
@media (min-width: 992px){
  .ts365-extras .ts365-wrap.cols-3 #mapa-contenedor-zoom img{
    object-fit:cover !important;
  }
}
/* =========================================================
   APP CTA FLOTANTE HERO - 365 Ticket
   Muestra la descarga de la app arriba a la izquierda del afiche,
   sin dañar el botón principal y adaptado a desktop/tablet/móvil.
   ========================================================= */
#cuerpoEventos .ts365-hero-item{
    position:relative !important;
    overflow:hidden !important;
}

#cuerpoEventos .ts365-app-floating-card{
    position:absolute !important;
    left:22px !important;
    top:22px !important;
    z-index:6 !important;
    width:min(315px, calc(100% - 44px)) !important;
    min-height:176px !important;
    display:flex !important;
    align-items:center !important;
    gap:14px !important;
    padding:18px 18px 18px 16px !important;
    border-radius:18px !important;
    background:rgba(255,255,255,.96) !important;
    border:1px solid rgba(255,255,255,.75) !important;
    color:#111827 !important;
    box-shadow:0 18px 45px rgba(4,12,28,.24) !important;
    backdrop-filter:blur(12px) !important;
    -webkit-backdrop-filter:blur(12px) !important;
}

#cuerpoEventos .ts365-app-badge{
    position:absolute !important;
    left:10px !important;
    top:10px !important;
    width:22px !important;
    height:22px !important;
    border-radius:50% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:#fff7ed !important;
    color:#ff7a00 !important;
    font-size:10px !important;
    box-shadow:0 5px 15px rgba(255,122,0,.22) !important;
}

#cuerpoEventos .ts365-app-close{
    position:absolute !important;
    right:12px !important;
    top:10px !important;
    width:24px !important;
    height:24px !important;
    border:0 !important;
    background:transparent !important;
    color:#111827 !important;
    font-size:25px !important;
    line-height:22px !important;
    font-weight:300 !important;
    cursor:pointer !important;
    opacity:.82 !important;
    padding:0 !important;
}

#cuerpoEventos .ts365-app-phone{
    width:76px !important;
    min-width:76px !important;
    height:128px !important;
    border-radius:18px !important;
    background:linear-gradient(180deg,#0d1424 0%,#111827 55%,#ff7a00 145%) !important;
    border:4px solid #171717 !important;
    box-shadow:0 10px 20px rgba(0,0,0,.24) !important;
    position:relative !important;
    overflow:hidden !important;
    margin-top:8px !important;
}

#cuerpoEventos .ts365-phone-top{
    width:28px !important;
    height:4px !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.22) !important;
    margin:7px auto 11px !important;
}

#cuerpoEventos .ts365-phone-logo{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:3px !important;
    color:#fff !important;
    font-weight:900 !important;
    font-size:15px !important;
    letter-spacing:-.5px !important;
}
#cuerpoEventos .ts365-phone-logo i{color:#ff7a00 !important;font-size:14px !important;}

#cuerpoEventos .ts365-phone-line{
    height:7px !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.18) !important;
    margin:10px auto 0 !important;
}
#cuerpoEventos .ts365-phone-line-1{width:54px !important;}
#cuerpoEventos .ts365-phone-line-2{width:42px !important;margin-top:6px !important;}

#cuerpoEventos .ts365-phone-grid{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:5px !important;
    width:54px !important;
    margin:13px auto 0 !important;
}
#cuerpoEventos .ts365-phone-grid span{
    display:block !important;
    height:22px !important;
    border-radius:7px !important;
    background:linear-gradient(135deg,rgba(255,122,0,.9),rgba(255,184,77,.72)) !important;
}

#cuerpoEventos .ts365-app-copy{
    flex:1 1 auto !important;
    min-width:0 !important;
    padding-top:10px !important;
}
#cuerpoEventos .ts365-app-copy strong{
    display:block !important;
    padding-right:22px !important;
    color:#111827 !important;
    font-size:16px !important;
    line-height:1.16 !important;
    font-weight:900 !important;
    letter-spacing:-.25px !important;
}
#cuerpoEventos .ts365-app-copy strong span{color:#ff7a00 !important;}
#cuerpoEventos .ts365-app-copy p{
    margin:10px 0 12px !important;
    color:#1f2937 !important;
    font-size:12.8px !important;
    line-height:1.35 !important;
    font-weight:600 !important;
}

#cuerpoEventos .ts365-app-floating-buttons{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px !important;
}
#cuerpoEventos .ts365-store-dark{
    min-height:34px !important;
    padding:0 12px !important;
    border-radius:8px !important;
    background:#050505 !important;
    color:#fff !important;
    font-size:11px !important;
    font-weight:850 !important;
    box-shadow:0 8px 18px rgba(0,0,0,.18) !important;
}
#cuerpoEventos .ts365-store-dark i{color:#fff !important;}
#cuerpoEventos .ts365-store-dark:hover{background:#ff7a00 !important;color:#fff !important;}

@media (max-width:991px){
    #cuerpoEventos .ts365-app-floating-card{
        left:14px !important;
        top:14px !important;
        width:min(286px, calc(100% - 28px)) !important;
        min-height:152px !important;
        padding:14px !important;
        gap:11px !important;
        border-radius:16px !important;
    }
    #cuerpoEventos .ts365-app-phone{
        width:64px !important;
        min-width:64px !important;
        height:108px !important;
        border-radius:15px !important;
    }
    #cuerpoEventos .ts365-app-copy strong{font-size:14px !important;}
    #cuerpoEventos .ts365-app-copy p{font-size:11.5px !important;margin:7px 0 9px !important;}
    #cuerpoEventos .ts365-store-dark{min-height:31px !important;font-size:10px !important;padding:0 9px !important;}
}

@media (max-width:575px){
    #cuerpoEventos .ts365-app-floating-card{
        position:relative !important;
        left:auto !important;
        top:auto !important;
        width:calc(100% - 18px) !important;
        min-height:0 !important;
        margin:-8px auto 0 !important;
        z-index:7 !important;
        transform:none !important;
        border-radius:16px !important;
        padding:11px 12px !important;
        box-shadow:0 12px 30px rgba(4,12,28,.18) !important;
    }
    #cuerpoEventos .ts365-app-phone{
        width:48px !important;
        min-width:48px !important;
        height:78px !important;
        border-width:3px !important;
        border-radius:12px !important;
        margin-top:0 !important;
    }
    #cuerpoEventos .ts365-phone-top,
    #cuerpoEventos .ts365-phone-line,
    #cuerpoEventos .ts365-phone-grid{display:none !important;}
    #cuerpoEventos .ts365-phone-logo{height:100% !important;font-size:13px !important;}
    #cuerpoEventos .ts365-app-copy{padding-top:0 !important;}
    #cuerpoEventos .ts365-app-copy strong{font-size:13px !important;padding-right:22px !important;}
    #cuerpoEventos .ts365-app-copy p{font-size:11px !important;margin:4px 0 7px !important;}
    #cuerpoEventos .ts365-app-floating-buttons{gap:6px !important;}
    #cuerpoEventos .ts365-store-dark{min-height:28px !important;border-radius:7px !important;font-size:9.5px !important;padding:0 8px !important;}
}

.carousel-dots::before,
.carousel-dots::after{
    display:none !important;
    content:none !important;
}