/* Estilos mejorados para el reproductor de video */
       .video-filmstrip {
        position: relative;
        padding-bottom: 56.25%;
        height: 0;
        overflow: hidden;
        border-radius: 12px;
        background: #1a1a1a;
        box-shadow: 0 8px 30px rgba(0,0,0,0.3);
        border: 2px solid #333;
    }

    .video-filmstrip::before,
    .video-filmstrip::after {
        content: '';
        position: absolute;
        top: 0;
        width: 40px;
        height: 100%;
        background: repeating-linear-gradient(
            180deg,
            #666 0px,
            #666 20px,
            transparent 20px,
            transparent 40px
        );
        z-index: 2;
    }

    .video-filmstrip::before { left: -15px; }
    .video-filmstrip::after { right: -15px; }

    .video-container {
        position: absolute;
        top: 5%;
        left: 5%;
        width: 90%;
        height: 90%;
        border-radius: 8px;
        overflow: hidden;
        z-index: 1;
    }

    /* Estilos mejorados para la lista de temas */
    .topics-panel {
        background: white;
        border-radius: 12px;
        padding: 20px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }

    .topic-card {
        margin-bottom: 12px;
        border-radius: 8px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        background: white;
        border: 1px solid #e0e0e0;
    }

    .topic-card:not(:last-child) {
        border-bottom: 2px solid #f0f0f0;
    }

    .topic-card:hover {
        box-shadow: 0 6px 20px rgba(33, 150, 243, 0.15);
        transform: translateY(-2px);
      /* border-color: #90caf9; */
        border-color: #ee9f5f;
        border-radius: 5px 8px 0 0;
    }

    .topic-card.active {
        /* border-left: 4px solid #2196F3;
        border-color: #90caf9; */
        border-left: 4px solid #EA710A;
        border-color: #eb9044;
    }

    .topic-header {
        cursor: pointer;
        /* padding: 18px; */
        padding: 8px 18px;
        display: flex;
        align-items: center;
        /*background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);*/
        /*background:linear-gradient(135deg, #90caf9 0%, #c5e2fa 50%);*/
        /* background:linear-gradient(135deg, #e8730b 0%, #ea9853 50%); */
        /* background: linear-gradient(135deg, #e8dfd9 0%, #e8e4e1 50%); */
        background: linear-gradient(135deg, #e9e5e2 0%, #e8e4e1 50%);
        /* border-radius: 8px 8px 0 0; */
        border-radius: 5px 8px 0 0;
    }

    .topic-header-content {
        flex: 1;
        margin-right: 15px;
    }

    .topic-time {
        /* background: #e3f2fd; */
        background: #eed5c2;;
        /* color: #2196F3; */
        color: #EF7106;

        padding: 6px 12px;
        border-radius: 20px;
        font-weight: 600;
        font-size: 0.85em;
    }

    .topic-details {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s ease-out;
        background: #fdfdfd;
        border-radius: 0 0 8px 8px;
    }

    .topic-card.expanded .topic-details {
        max-height: 1000px;
        padding: 18px;
        border-top: 1px solid #eee;
    }

    .resource-item {
        border: 1px solid #e0e0e0;
        border-radius: 6px;
        padding: 12px;
        margin: 8px 0;
        transition: all 0.2s ease;
    }

    .resource-item:hover {
        background: #f5fbff;
        border-color: #90caf9;
        
    }

    .progress-container {
        height: 4px;
        background: #e0e0e0;
        border-radius: 2px;
        overflow: hidden;
        margin-top: 15px;
    }

    .progress-bar {
        height: 100%;
        /* background: linear-gradient(90deg, #2196F3 0%, #64b5f6 100%); */
        background: linear-gradient(90deg, #EF7106  0%, #F99C4E     100%);
        transition: width 0.5s ease;
    }