/* ============================================================
   1. CONTENEDOR PRINCIPAL Y FONDO DINÁMICO DE ALTA FLUIDEZ
   ============================================================ */

.views-bootstrap-tabs {
    position: relative;
    display: grid !important;
    grid-template-columns: 280px minmax(0, 1fr);
    column-gap: 45px;
    align-items: start;
    
    width: 100%;
    max-width: 1150px;
    margin: 35px auto;
    padding: 35px 40px 45px;
    box-sizing: border-box;

    background-color: #ffffff;
    border: none;
    border-radius: 22px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.views-bootstrap-tabs::marker {
    display: none;
}

/* Layer de fondo en GPU (Animación de orbe) */
.views-bootstrap-tabs::before {
    content: "";
    position: absolute;
    top: -20%;
    left: -20%;
    width: 140%;
    height: 140%;
    pointer-events: none;
    z-index: 0;

    background-image:
        /* Círculos grandes base */
        radial-gradient(circle at 15% 30%, rgba(205, 0, 0, 0.03) 0 60px, transparent 60.5px),
        radial-gradient(circle at 85% 25%, rgba(168, 20, 20, 0.025) 0 90px, transparent 90.5px),
        radial-gradient(circle at 50% 80%, rgba(205, 0, 0, 0.025) 0 75px, transparent 75.5px),
        
        /* Círculos medios */
        radial-gradient(circle at 50% 35%, rgba(205, 0, 0, 0.02) 0 65px, transparent 65.5px),
        radial-gradient(circle at 45% 60%, rgba(168, 20, 20, 0.02) 0 85px, transparent 85.5px),

        /* Partículas / destellos */
        radial-gradient(circle at 31% 24%, rgba(205, 0, 0, 0.15) 0 5px, transparent 5.5px),
        radial-gradient(circle at 75% 48%, rgba(205, 0, 0, 0.12) 0 5px, transparent 5.5px),
        radial-gradient(circle at 89% 65%, rgba(205, 0, 0, 0.14) 0 4px, transparent 4.5px),
        radial-gradient(circle at 23% 76%, rgba(205, 0, 0, 0.12) 0 4px, transparent 4.5px),

        /* Destellos centrales y esquinas */
        radial-gradient(circle at 50% 20%, rgba(168, 20, 20, 0.14) 0 6px, transparent 6.5px),
        radial-gradient(circle at 42% 45%, rgba(205, 0, 0, 0.12) 0 5px, transparent 5.5px),
        radial-gradient(circle at 58% 55%, rgba(168, 20, 20, 0.10) 0 5px, transparent 5.5px),
        radial-gradient(circle at 48% 30%, rgba(205, 0, 0, 0.15) 0 8px, transparent 8.5px),
        radial-gradient(circle at 55% 42%, rgba(168, 20, 20, 0.12) 0 9px, transparent 9.5px),
        radial-gradient(circle at 18% 15%, rgba(205, 0, 0, 0.15) 0 7px, transparent 7.5px),
        radial-gradient(circle at 82% 80%, rgba(168, 20, 20, 0.15) 0 8px, transparent 8.5px);

    background-repeat: no-repeat;
    will-change: transform;
    animation: orbitaFondo 16s ease-in-out infinite alternate;
}

/* Círculo adicional flotante */
.views-bootstrap-tabs::after {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    bottom: -100px;
    left: -80px;
    border-radius: 50%;
    background: rgba(168, 20, 20, 0.025);
    pointer-events: none;
    z-index: 0;
    will-change: transform;
    animation: globoFlotante 10s ease-in-out infinite;
}


/* ============================================================
   2. TÍTULO Y DECORACIÓN DE ENCABEZADO
   ============================================================ */

.views-bootstrap-tabs > h3 {
    position: relative;
    z-index: 5;
    grid-column: 1 / -1;
    margin: 0 0 30px;
    color: #cd0000;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.views-bootstrap-tabs > h3::after {
    content: "—";
    display: block;
    width: 65px;
    height: 4px;
    margin-top: 12px;
    background: #cd0000;
    border-radius: 10px;
}

/* Anillo animado continuo */
.views-bootstrap-tabs > h3::before {
    content: "";
    position: absolute;
    left: 55%;
    top: 15px;
    width: 75px;
    height: 75px;
    border: 2px dashed rgba(205, 0, 0, 0.12);
    border-radius: 50%;
    pointer-events: none;
    will-change: transform;
    animation: aroGiro 12s linear infinite;
}


/* ============================================================
   3. TIMELINE / COLUMNA DE HORAS (NAV-TABS) - ALINEACIÓN GRID
   ============================================================ */

.views-bootstrap-tabs > .nav-tabs {
    position: relative;
    z-index: 5;
    display: grid !important;
    grid-auto-rows: 78px;
    row-gap: 0;
    align-content: start;
    
    width: 280px;
    min-width: 280px;
    margin: 0;
    padding: 10px 0;
    border: none !important;
    background: transparent !important;
    animation: none !important;
    transform: none !important;
}

.views-bootstrap-tabs > .nav-tabs::before,
.views-bootstrap-tabs > .nav-tabs::after {
    display: none !important;
}

/* Contenedor del ítem de hora */
.views-bootstrap-tabs > .nav-tabs > li {
    position: relative;
    display: flex !important;
    align-items: center;
    width: 100%;
    height: 78px !important;
    min-height: 78px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
}

/* Línea vertical del timeline */
.views-bootstrap-tabs > .nav-tabs > li::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 24px;
    width: 2px;
    background: rgba(205, 0, 0, 0.18);
    z-index: 1;
}

/* Punto indicador neutro */
.views-bootstrap-tabs > .nav-tabs > li::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 15px;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    box-sizing: border-box;
    background: #ffffff;
    border: 3px solid #cd0000;
    border-radius: 50%;
    z-index: 4;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease, box-shadow 0.3s ease;
}

/* Botón/Enlace de Hora */
.views-bootstrap-tabs > .nav-tabs > li > a,
.views-bootstrap-tabs > .nav-tabs > li > a:focus,
.views-bootstrap-tabs > .nav-tabs > li > a:active {
    position: relative;
    display: flex !important;
    align-items: center;
    width: 100%;
    height: 78px !important;
    min-height: 78px !important;
    margin: 0;
    padding: 8px 10px 8px 48px !important;
    box-sizing: border-box;
    
    color: #888888 !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 10px !important;
    
    font-size: 12.5px !important;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.28s ease, background 0.28s ease, box-shadow 0.28s ease, color 0.28s ease;
}

.views-bootstrap-tabs > .nav-tabs > li > a::after {
    display: none !important;
}

/* HOVER: Horario */
.views-bootstrap-tabs > .nav-tabs > li:hover > a {
    color: #cd0000 !important;
    background: rgba(205, 0, 0, 0.07) !important;
    transform: translateX(6px);
    box-shadow: 0 6px 18px rgba(205, 0, 0, 0.10);
}

.views-bootstrap-tabs > .nav-tabs > li:hover::after {
    background: #cd0000 !important;
    transform: translateY(-50%) scale(1.22) !important;
    box-shadow: 0 0 0 5px rgba(205, 0, 0, 0.08), 0 0 14px rgba(205, 0, 0, 0.25);
}

/* SELECCIONADO / ACTIVO */
.views-bootstrap-tabs > .nav-tabs > li.active > a,
.views-bootstrap-tabs > .nav-tabs > li.active > a:hover,
.views-bootstrap-tabs > .nav-tabs > li.active > a:focus,
.views-bootstrap-tabs > .nav-tabs > li.active > a:active {
    color: #cd0000 !important;
    background: rgba(205, 0, 0, 0.09) !important;
    font-weight: 700 !important;
    border: none !important;
    outline: none !important;
    transform: translateX(6px);
    box-shadow: 0 7px 20px rgba(205, 0, 0, 0.10);
}

/* Punto indicador activo */
.views-bootstrap-tabs > .nav-tabs > li.active::after {
    width: 20px;
    height: 20px;
    left: 15px;
    background: #cd0000 !important;
    border: 3px solid #ffffff;
    box-shadow: 0 0 0 5px rgba(205, 0, 0, 0.08), 0 0 15px rgba(205, 0, 0, 0.35);
    animation: pulsoActivo 2s ease-in-out infinite;
}


/* ============================================================
   4. CONTENIDO DEL EVENTO (TAB-CONTENT Y TAB-PANE)
   ============================================================ */

.views-bootstrap-tabs > .tab-content {
    position: relative;
    z-index: 5;
    display: grid !important;
    grid-auto-rows: 78px;
    row-gap: 0;
    align-content: start;
    
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Panel de evento alineado al horario */
.views-bootstrap-tabs .tab-pane {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    opacity: 1 !important;
    position: relative;
    z-index: 2;
    
    min-height: 78px !important;
    height: auto;
    margin: 0 !important;
    padding: 6px 20px !important;
    box-sizing: border-box;
    overflow: visible;

    border: none;
    border-left: 3px solid rgba(205, 0, 0, 0.2) !important;
    transition: transform 0.28s ease, background 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

/* Hover en el evento */
.views-bootstrap-tabs .tab-pane:hover {
    transform: translateX(6px);
    background: rgba(205, 0, 0, 0.035) !important;
    border-left-color: rgba(205, 0, 0, 0.55) !important;
    border-radius: 0 10px 10px 0;
    box-shadow: 0 6px 18px rgba(205, 0, 0, 0.08);
}

/* Panel destacado opcional */
.views-bootstrap-tabs .tab-pane.pane-destacado {
    border-left-color: #cd0000 !important;
    transform: translateX(6px);
    background: rgba(205, 0, 0, 0.02);
    border-radius: 0 8px 8px 0;
}

/* Título del evento */
.views-bootstrap-tabs .views-field-title h5 {
    margin: 0 !important;
    padding: 0 !important;
    color: #570808;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    transition: color 0.25s ease, transform 0.25s ease;
}

.views-bootstrap-tabs .tab-pane:hover .views-field-title h5 {
    color: #a81414;
    transform: translateX(3px);
}

/* Ubicación del evento */
.views-bootstrap-tabs .views-field-field-ubicacion-del-evento {
    margin-top: 6px;
    color: #787878;
    font-size: 13.5px;
    line-height: 1.35;
}


/* ============================================================
   5. DECORACIONES 
   ============================================================ */

/* Rombo Flotante */
.views-bootstrap-tabs > .tab-content::before {
    content: "◆";
    position: absolute;
    top: 22px;
    right: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    color: #cd0000;
    background: rgba(205, 0, 0, 0.05);
    border-radius: 50%;
    font-size: 14px;
    will-change: transform;
    animation: romboOnda 3.5s ease-in-out infinite;
}

/* Puntos en Movimiento */
.views-bootstrap-tabs > .tab-content::after {
    content: "";
    position: absolute;
    right: 80px;
    bottom: 22px;
    width: 6px;
    height: 6px;
    background: #cd0000;
    border-radius: 50%;
    opacity: 0.25;
    box-shadow:
        22px -12px 0 rgba(205, 0, 0, 0.18),
        40px 4px 0 rgba(205, 0, 0, 0.12);
    will-change: transform;
    animation: puntosFlotantesAmp 4s ease-in-out infinite;
}

/* Estrella Giratoria */
.views-bootstrap-tabs > .tab-content > .tab-pane::before {
    content: "✦";
    position: absolute;
    right: 22%;
    bottom: 15px;
    color: rgba(205, 0, 0, 0.22);
    font-size: 18px;
    will-change: transform, opacity;
    animation: estrellaVelo 3.5s ease-in-out infinite;
    pointer-events: none;
}

/* Ráfaga Dinámica */
.views-bootstrap-tabs > .tab-content > .tab-pane::after {
    content: "";
    position: absolute;
    right: 10%;
    top: 20px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #cd0000;
    opacity: 0.25;
    box-shadow:
        0 -22px 0 rgba(205, 0, 0, 0.15),
        0 22px 0 rgba(205, 0, 0, 0.15),
        -22px 0 0 rgba(205, 0, 0, 0.15),
        22px 0 0 rgba(205, 0, 0, 0.15);
    will-change: transform, opacity;
    animation: ráfagaLatido 4s ease-in-out infinite;
    pointer-events: none;
}


/* ============================================================
   6. KEYFRAMES 
   ============================================================ */

@keyframes orbitaFondo {
    0% { transform: translate3d(-20px, -15px, 0) rotate(0deg) scale(1); }
    50% { transform: translate3d(25px, 20px, 0) rotate(2deg) scale(1.03); }
    100% { transform: translate3d(-15px, 25px, 0) rotate(-2deg) scale(1.01); }
}

@keyframes globoFlotante {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(25px, -20px, 0); }
}

@keyframes aroGiro {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.12); }
    100% { transform: rotate(360deg) scale(1); }
}

@keyframes pulsoActivo {
    0%, 100% { transform: translateY(-50%) scale(1); }
    50% { transform: translateY(-50%) scale(1.18); }
}

@keyframes romboOnda {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
    50% { transform: translate3d(-6px, -8px, 0) rotate(12deg); }
}

@keyframes puntosFlotantesAmp {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(8px, -10px, 0); }
}

@keyframes estrellaVelo {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(0.9); opacity: 0.15; }
    50% { transform: translate3d(-12px, -12px, 0) rotate(45deg) scale(1.3); opacity: 0.6; }
}

@keyframes ráfagaLatido {
    0% { transform: scale(0.5); opacity: 0; }
    50% { transform: scale(1.2); opacity: 0.4; }
    100% { transform: scale(1.6); opacity: 0; }
}


/* ============================================================
   7. RESPONSIVE - TABLET Y CELULAR
   ============================================================ */

@media (max-width: 800px) {
    .views-bootstrap-tabs {
        display: block !important;
        width: calc(100% - 20px);
        margin: 20px auto;
        padding: 25px 20px 35px;
        border-radius: 18px;
    }

    .views-bootstrap-tabs > h3 {
        font-size: 26px;
        margin-bottom: 20px;
    }

    .views-bootstrap-tabs > .nav-tabs,
    .views-bootstrap-tabs > .tab-content {
        display: block !important;
        width: 100%;
        min-width: 0;
    }

    .views-bootstrap-tabs > .nav-tabs > li,
    .views-bootstrap-tabs > .nav-tabs > li > a {
        height: 58px !important;
        min-height: 58px !important;
    }

    .views-bootstrap-tabs > .nav-tabs > li > a {
        padding-left: 50px !important;
    }

    .views-bootstrap-tabs > .tab-content {
        margin-top: 25px;
    }

    .views-bootstrap-tabs .tab-pane {
        height: auto !important;
        min-height: 58px !important;
        margin-bottom: 12px !important;
    }
}

@media (max-width: 500px) {
    .views-bootstrap-tabs {
        width: calc(100% - 20px);
        margin: 15px auto;
        padding: 22px 15px 30px;
    }

    .views-bootstrap-tabs > h3 {
        font-size: 23px;
        margin-bottom: 15px;
    }

    .views-bootstrap-tabs > h3::after {
        width: 50px;
        height: 3px;
    }

    .views-bootstrap-tabs > .nav-tabs > li > a {
        padding: 8px 10px 8px 45px !important;
        font-size: 12px !important;
    }

    .views-bootstrap-tabs .tab-pane {
        min-height: 65px !important;
        height: auto !important;
    }

    .views-bootstrap-tabs .views-field-title h5 {
        padding-right: 10px;
        font-size: 16px !important;
        line-height: 1.35;
    }

    .views-bootstrap-tabs > .tab-content::before,
    .views-bootstrap-tabs > .tab-content::after {
        display: none;
    }
}