schedule.html

---
layout: default
title: "Itinerario del Evento VRTon | Programa Completo de Actividades"
description: "Consulta el programa completo de actividades de VRTon. Descubre talleres, demostraciones de realidad
virtual, charlas técnicas y eventos especiales para la Teletón Chile."
keywords: "itinerario VRTon, programa actividades VR, talleres realidad virtual, demostraciones VR, eventos Teletón
Chile, charlas técnicas VR, networking virtual, ceremonia apertura, stream benéfico"
image: "/assets/icons/icon-512x512.webp"
translation_modules: ["common", "pages/schedule"]
---

<div class="schedule-page">
    <div class="container">

        <!-- Page Header -->
        <div class="page-header">
            <h1 class="page-title" data-i18n="schedule.title">Itinerario del Evento</h1>
            <p class="page-description" data-i18n="schedule.description">
                Consulta el programa completo de actividades de VRTon. Descubre talleres, demostraciones de realidad
                virtual, charlas técnicas y eventos especiales para la Teletón Chile.
            </p>
        </div>

        <!-- Schedule Container -->
        <div class="schedule-container" id="schedule-container">

            <!-- Loading State -->
            <div id="schedule-loading" class="schedule-loading">
                <div class="loading-content">
                    <i class="fas fa-spinner fa-spin"></i>
                    <p data-i18n="schedule.loading">Cargando itinerario...</p>
                </div>
            </div>

            <!-- Current Time Indicator -->
            <div id="current-time-indicator" class="current-time-indicator" style="display: none;">
                <div class="current-time-content">
                    <i class="fas fa-clock"></i>
                    <span data-i18n="schedule.current_time">Hora actual</span>
                    <strong id="current-time-display">--:--</strong>
                    <span class="timezone-label">(UTC-3, Chile)</span>
                </div>
            </div>

            <!-- Filtros -->
            <div id="schedule-toolbar" class="schedule-toolbar" style="display:none;">
                <div class="toolbar-group">
                    <label for="section-filter" class="toolbar-label" data-i18n="schedule.filters.section">
                        Sección
                    </label>
                    <select id="section-filter" class="toolbar-select">
                        
                    </select>
                </div>

                
                <div class="toolbar-group">
                    <label class="toolbar-label" data-i18n="schedule.filters.view_mode">
                        Vista
                    </label>
                    <div class="toolbar-chips">
                        <button class="chip-button chip-button-active" data-view-mode="full">
                            <i class="fas fa-stream"></i>
                            <span data-i18n="schedule.filters.view_full">Completo</span>
                        </button>
                        <button class="chip-button" data-view-mode="main">
                            <i class="fas fa-star"></i>
                            <span data-i18n="schedule.filters.view_main">Solo principal</span>
                        </button>
                        <button class="chip-button" data-view-mode="secondary">
                            <i class="fas fa-layer-group"></i>
                            <span data-i18n="schedule.filters.view_secondary">Solo secundaria</span>
                        </button>
                    </div>
                </div>
            </div>

            <!-- Schedule Table -->
            <div id="schedule-table" class="schedule-table" style="display: none;">
                <div class="schedule-header">
                    <div class="section-header">
                        <span data-i18n="schedule.section">Sección</span>
                    </div>
                    <div class="schedule-time-column">
                        <h3 data-i18n="schedule.time">Hora</h3>
                    </div>
                    <div class="schedule-activity-column">
                        <h3 data-i18n="schedule.main_activity">Actividad Principal</h3>
                    </div>
                    <div class="schedule-activity-column">
                        <h3 data-i18n="schedule.second_activity">Actividad Secundaria</h3>
                    </div>
                </div>

                <!-- Grid con scroll -->
                <div class="schedule-grid-wrapper">
                    <div id="schedule-grid" class="schedule-grid">
                        
                    </div>
                </div>
            </div>
            <div id="current-time-line" class="current-time-line"></div>
        </div>

        <script src="/scripts/schedule.min.js" defer></script>

        <style>
            .schedule-page {
                padding-top: calc(var(--header-height) + 40px);
                min-height: 100vh;
                padding-left: 0;
                padding-right: 0;
                padding-bottom: 40px;
                background: var(--light-color);
            }

            .schedule-page .container {
                max-width: 1200px;
                margin: 0 auto;
                padding: 20px;
            }

            .page-header {
                text-align: center;
                padding: 40px 20px 40px;
                background: var(--white);
                border-radius: var(--border-radius);
                box-shadow: var(--shadow-light);
                margin-bottom: 30px;
            }

            .page-title {
                font-size: 2.5rem;
                font-weight: 700;
                color: var(--dark-color);
                margin-bottom: 15px;
            }

            .page-description {
                font-size: 1.1rem;
                color: var(--text-light);
                max-width: 800px;
                margin: 0 auto;
                line-height: 1.6;
            }

            .schedule-container {
                margin-bottom: 40px;
            }

            .schedule-loading {
                display: flex;
                justify-content: center;
                align-items: center;
                min-height: 300px;
            }

            .loading-content {
                text-align: center;
                color: var(--text-color);
            }

            .loading-content i {
                font-size: 2rem;
                color: var(--primary-color);
                margin-bottom: 15px;
                display: block;
            }

            .current-time-indicator {
                background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
                color: white;
                padding: 12px 18px;
                border-radius: var(--border-radius);
                margin-bottom: 20px;
                text-align: center;
                box-shadow: var(--shadow-medium);
            }

            .current-time-content {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                font-size: 1rem;
            }

            /* Toolbar filtros */
            .schedule-toolbar {
                background: var(--white);
                border-radius: var(--border-radius);
                box-shadow: var(--shadow-light);
                padding: 15px 20px;
                margin-bottom: 15px;
                display: flex;
                flex-wrap: wrap;
                gap: 15px 25px;
                align-items: center;
                justify-content: space-between;
            }

            .toolbar-group {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                gap: 8px 12px;
            }

            .toolbar-label {
                font-size: 0.9rem;
                font-weight: 600;
                color: var(--text-light);
                text-transform: uppercase;
                letter-spacing: 0.5px;
            }

            .toolbar-select {
                min-width: 180px;
                padding: 8px 12px;
                border-radius: 999px;
                border: 1px solid #dde2e7;
                background: var(--light-color);
                font-size: 0.9rem;
                color: var(--text-color);
                outline: none;
                transition: var(--transition-normal);
            }

            .toolbar-select:focus {
                border-color: var(--primary-color);
                box-shadow: 0 0 0 2px rgba(227, 6, 19, 0.1);
                background: var(--white);
            }

            .toolbar-chips {
                display: flex;
                flex-wrap: wrap;
                gap: 8px;
            }

            .chip-button {
                display: inline-flex;
                align-items: center;
                gap: 6px;
                padding: 6px 12px;
                border-radius: 999px;
                border: 1px solid transparent;
                background: var(--light-color);
                color: var(--text-color);
                font-size: 0.85rem;
                font-weight: 500;
                cursor: pointer;
                transition: var(--transition-normal);
            }

            .chip-button i {
                font-size: 0.85rem;
            }

            .chip-button:hover {
                background: #edf1f5;
            }

            .chip-button-active {
                background: var(--primary-color);
                color: var(--white);
                border-color: var(--primary-color);
                box-shadow: var(--shadow-light);
            }

            /* Tabla / grid principal */
            .schedule-table {
                background: var(--white);
                border-radius: var(--border-radius);
                overflow: hidden;
                box-shadow: var(--shadow-medium);
                padding: 20px 25px 25px;
                box-sizing: border-box;
            }

            .schedule-header {
                display: grid;
                grid-template-columns: 80px 120px 1fr 1fr;
                background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
                color: white;
                font-weight: 600;
                font-size: 0.95rem;
            }

            .schedule-header .section-header {
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 16px 10px;
                border-right: 1px solid rgba(255, 255, 255, 0.25);
            }

            .schedule-header h3 {
                margin: 0;
                padding: 16px 10px;
                text-align: center;
                border-right: 1px solid rgba(255, 255, 255, 0.25);
            }

            .schedule-header h3:last-child {
                border-right: none;
            }

            .schedule-grid-wrapper {
                max-height: none;
                overflow-y: visible;
                padding: 0;
                background: var(--light-color);
            }

            .schedule-grid {
                display: grid;
                grid-template-columns: 80px 120px 1fr 1fr;
                grid-auto-rows: 60px;
                position: relative;
                row-gap: 6px !important;
            }

            
            .time-row-bg {
                grid-column: 1 / -1;
                border-bottom: 1px solid #edf1f5;
                background: rgba(255, 255, 255, 0.85);
            }

            .time-row-bg:nth-child(2n) {
                background: rgba(248, 249, 251, 0.95);
            }

            .time-row-bg.current-time-row {
                background: rgba(253, 92, 99, 0.08);
            }

            /* Secciones (columna 1) */
            .section-cell {
                grid-column: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 4px;
                position: relative;
            }

            .section-label-text {
                writing-mode: vertical-rl;
                transform: rotate(180deg);
                text-transform: uppercase;
                font-size: 0.7rem;
                font-weight: 700;
                letter-spacing: 1px;
                color: #ffffff;
                text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
            }

            /* Hora (columna 2) */
            .time-cell {
                grid-column: 2;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 0.85rem;
                font-weight: 600;
                color: var(--text-color);
                position: relative;
                z-index: 2;
            }

            .time-cell.current-time {
                color: var(--primary-color);
            }

            /* Actividades (col 3 y 4) */
            .activity-slot {
                padding: 10px 6px !important;
                display: flex;
                align-items: stretch;
                justify-content: stretch;
                z-index: 3;
                padding-top: 30px !important;
                padding-bottom: 30px !important;
                padding-left: 6px !important;
                padding-right: 6px !important;
                align-self: start;
            }

            .activity-slot-main {
                grid-column: 3;
            }

            .activity-slot-secondary {
                grid-column: 4;
            }

            .activity-card {
                background: var(--white);
                border-radius: 10px;
                padding: 10px 12px;
                width: 100%;
                box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
                border-left: 4px solid var(--secondary-color);
                display: flex;
                flex-direction: column;
                justify-content: center;
                gap: 4px;
                font-size: 0.85rem;
                transition: var(--transition-normal);
                margin: 4px 0 !important;
                min-height: 60px;
                align-items: center;
            }

            .activity-card:hover {
                transform: translateY(-2px);
                box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
            }

            .activity-card.special {
                border-left-color: var(--accent-color);
                background: linear-gradient(135deg,
                        rgba(255, 204, 0, 0.08),
                        var(--white));
            }

            .activity-card h4 {
                margin: 0;
                color: var(--dark-color);
                font-size: 0.9rem;
                font-weight: 700;
                text-align: center;
                margin-bottom: 8px;
            }

            .activity-card p {
                margin: 0;
                color: var(--text-light);
                text-align: center;
                font-size: 0.8rem;
                line-height: 1.4;
            }

            .activity-meta {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 8px;
                margin-top: 2px;
            }

            .activity-duration {
                font-size: 0.75rem;
                color: var(--primary-color);
                font-weight: 600;
            }

            .special-badge {
                background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
                color: white;
                padding: 2px 8px;
                border-radius: 999px;
                font-size: 0.7rem;
                font-weight: 700;
                display: inline-flex;
                align-items: center;
                gap: 4px;
                white-space: nowrap;
            }

            .special-badge i {
                font-size: 0.75rem;
            }

            .no-activity-pill {
                font-size: 0.75rem;
                color: var(--text-muted);
                font-style: italic;
                display: flex;
                align-items: center;
                justify-content: center;
                opacity: 0.7;
            }

            @media (max-width: 992px) {
                .schedule-page {
                    padding-top: calc(var(--header-height-mobile) + 20px);
                }

                .page-header {
                    padding: 30px 15px;
                }

                .page-title {
                    font-size: 2rem;
                }

                .schedule-grid-wrapper {
                    max-height: 600px;
                }
            }

            @media (max-width: 768px) {

                .schedule-header,
                .schedule-grid {
                    grid-template-columns: 60px 70px 1fr;
                }

                .schedule-header h3:last-child {
                    display: none;
                }

                .activity-slot-secondary {
                    display: none;
                }

                .schedule-toolbar {
                    flex-direction: column;
                    align-items: flex-start;
                }

                .toolbar-group {
                    width: 100%;
                    justify-content: space-between;
                }

                .toolbar-select {
                    flex: 1;
                }
            }

            @media (max-width: 480px) {
                .schedule-page .container {
                    padding: 10px;
                }

                .schedule-grid {
                    grid-auto-rows: 30px;
                }

                .time-cell {
                    font-size: 0.8rem;
                }

                .activity-card h4 {
                    font-size: 0.85rem;
                }

                .activity-card p {
                    font-size: 0.75rem;
                }
            }

            /* Para actividades de 30 minutos */
            .activity-card[data-duration="30"] {
                padding-top: 8px;
                padding-bottom: 8px;
                min-height: 60px;  /* Ajustamos para que ocupe 2 slots */
                gap: 2px;
            }

            /* Para actividades de 60 minutos */
            .activity-card[data-duration="60"] {
                padding-top: 12px;
                padding-bottom: 12px;
                min-height: 125px;  /* Actividad de 60 minutos ocupa 3 slots */
                gap: 4px;
            }

            /* Para actividades de 120 minutos */
            .activity-card[data-duration="120"] {
                padding-top: 14px;
                padding-bottom: 14px;
                min-height: 255px;  /* Actividad de 120 minutos ocupa 5 slots */
                gap: 6px;
            }

            /* Para actividades de 180 minutos */
            .activity-card[data-duration="180"] {
                padding-top: 16px;
                padding-bottom: 16px;
                min-height: 380px;  /* Actividad de 180 minutos ocupa 7 slots */
                gap: 8px;
            }

            /* Ajuste de la grilla */
            .schedule-grid {
                grid-auto-rows: 60px; /* Cada fila representa 30 minutos */
            }

            .activity-card[data-duration="30"] {
                height: auto !important;
            }

            /* Línea roja de tiempo actual */
            .current-time-line {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 3px;
                background-color: #e30613;
                z-index: 10;
                transform: translateY(0);
                transition: all 1s ease;
            }

        </style>
    </div>
</div>