/* width */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #ffffff00;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #AAB7CF;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #788aac;
}

/*
estructuro correctamente
mis diapositivas
*/

/*ninguna iamgen se selecciona o arrastra*/
img {
  user-select: none;
  -webkit-user-drag: none; /* Evita arrastrar en navegadores WebKit como Chrome y Safari */
}

/*Fondos*/

#fondoVideo {
    position: relative;
    height: 100%;
    width: 100%;
    /*background-color: antiquewhite;*/
    overflow: hidden;
}

#fondoBlanco {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: #ffffff98;
    top: 0;
    overflow: hidden;
}

#fondoCirculo {
    position: absolute;
    height: 100%;
    width: 100%;
    /*background-color: #f9535398;*/
    top: 0;
    overflow: hidden;
}

#fondoParticulas {
    position: absolute;
    height: 100%;
    width: 100%;
    /*background-color: #f9535398;*/
    top: 0;
    overflow: hidden;
}

/*Porporcional mateniendo aspecto 16:9*/
.contenedorCentral {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.contenedorCentral>.marco {
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    /*overflow: hidden;*/
    /*background: #b44c4c5c;*/
    transition: all 0.5s ease-in-out;
}

/* ✅ Usamos .marco.proporcional y .marco.total */
.contenedorCentral>.marco.proporcional {
    aspect-ratio: 16 / 9;
}

.contenedorCentral>.marco.total {
    width: 100%;
    height: 100%;
}

/* Truco para mantener la proporción en pantallas más anchas */
@media (min-aspect-ratio: 16/9) {
    .contenedorCentral>.marco.proporcional {
        height: 100%;
        width: auto;
    }
}

/********************************************************************/

/*presentoVideo*/
#presentoVideo {
    display: none;
    position: absolute;
    height: 100%;
    width: 100%;
    /*background-color: #1b9c4498;*/
    top: 0;
    overflow: hidden;
}

/*Presentacion*/
#presentoDiapos {
    /*display: none;*/
    position: absolute;
    height: 100%;
    width: 100%;
    /*background-color: #b0171798;*/
    top: 0;
    overflow: hidden;
}

/*Cortinas*/

#cortinaEsquinas {
    position: absolute;
    height: 100%;
    width: 100%;
    /*background-color: #f9535398;*/
    top: 0;
    overflow: hidden;
    /* No se puede seleccionar */
    user-select: none;
    /* Ignora clics, como si no estuviera */
    pointer-events: none;
}

#cortinaParticulas {
    position: absolute;
    height: 100%;
    width: 100%;
    /*background-color: #f9535398;*/
    top: 0;
    overflow: hidden;
    /* No se puede seleccionar */
    user-select: none;
    /* Ignora clics, como si no estuviera */
    pointer-events: none;
}

#cortinaPizarra {
    position: absolute;
    height: 100%;
    width: 100%;
    /*background-color: #f9535398;*/
    top: 0;
    overflow: hidden;
}

#laPizarra {
    height: 100%;
    width: 100%;
}

/* menu de navegacion de diapos */

#cortinaMenuLista {
    /*menu inicia oculto*/
    display: none;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    overflow: hidden;
}

#cortinaMenuBtn {
    position: absolute;
    /*background-color: #f9535398;*/
    top: 10px;
    left: 30px;
}

#cortinaMenuLista .contenedor {
    height: 100%;
    width: 100%;
    background-color: #8e98a798;
    overflow: hidden;
    padding: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

#cortinaMenuLista .cuadro {
    background-color: #fff;
    border-radius: 1rem;
    border: 2px solid #9d9fa8;
    min-height: 200px;
    width: 100%;
    height: 90%;
    max-width: 800px;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
    padding: 1rem;
}

#cortinaMenuLista .lista {
    height: 93%;
    width: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
}

#cortinaMenuLista .grid-responsive {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Dos columnas iguales */
}

#cortinaMenuLista .item {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    padding: 0.5rem;
    /*texto del boton no se sombrea*/
    user-select: none;
    cursor: pointer;
}

#cortinaMenuLista .ocupa2 {
    grid-column: span 2;
}

#cortinaMenuLista .orden {
    background-color: #51A2FF;
    padding: 0.5rem;
    border-radius: 10px 0 0 10px;
    height: 100%;
    display: flex;
    align-items: center;
}

#cortinaMenuLista .orden-cap{
    background-color: #3d485e;
}

#cortinaMenuLista .orden-sprint{
    background-color: #536b9a;
}

#cortinaMenuLista .titulo {
    background-color: #788aac;
    width: 100%;
    padding: 0.5rem;
    border-radius: 0 10px 10px 0;
    height: 100%;
    display: flex;
    align-items: center;
}

#cortinaMenuLista .capitulo {
    background-color: #54637f;
}

#cortinaMenuLista .sprint {
    background-color: #5c74a1;
}

#cortinaMenuLista .item:hover>* {
    background-color: #f08725;
}

#cortinaMenuLista .canalActual .titulo {
    background: #f08725;
}

/* Cambia a una sola columna en pantallas pequeñas */
@media (max-width: 700px) {
    #cortinaMenuLista .grid-responsive {
        grid-template-columns: 1fr;
    }
}

/*flechay y play van juntos uno al lado del otro*/

#cortinaContenedor {
    position: absolute;
    bottom: 25px;
    left: 60px;
    display: flex;
    gap: 5px;
}

/* Hacemos que los botones respondan al click */
#cortinaFeclas,
#cortinaPlay {
    color: white;
    border-radius: 4px;
}

/*Linea de tiempo ba por debajo de flechas y play*/
#cortinaLineaTiempo {
    position: absolute;
    /*background-color: #61f95398;*/
    bottom: 60px;
    left: 60px;
}

/* mi pagina */

#cortinaPagina {
    position: absolute;
    /*background-color: #f953f198;*/
    bottom: 20px;
    right: 60px;
}

/*************************************************************************/

/* Estilo inicial para el círculo */
.circle {
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #ff7113a6;
    border-radius: 50%;
    /* que no sea seleccionable */
    /* Estándar (cuando lo soporta) */
    user-drag: none;
    /* Safari/Chrome */
    -webkit-user-drag: none;
    /* No seleccionable */
    user-select: none;
    /* Opcional: los eventos se gestionan en el contenedor */
    pointer-events: none;

    /* Inicialmente pequeño */
    transform: scale(0);
    /* Expandir y luego desvanecerse */
    animation: expand 0.5s forwards, fadeOut 1s 0.5s forwards;
}

/* Animación de expansión del círculo */
@keyframes expand {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(4);
        /* Escala el círculo */
    }
}

/* Animación de desvanecimiento */
@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/**************************************************************/

#btnPlay {
    display: none;
}

#btnFin {
    display: none;
}

/*ahora si los elementos*/

#elCarril {
    display: none;
    background: #cecece;
    height: 7px;
    width: 140px;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;
}

#elTren {
    background: #51A2FF;
    height: 100%;
    width: 50%;
}

.mibtn {
    background: #51A2FF;
    color: #F6F9FF;
    transition: background 0.3s ease;
    cursor: pointer;
    /*texto del boton no se sombrea*/
    user-select: none;
}

.mibtn:hover {
    background: #3E5161;
}

.mibtn:active {
    background: #f08725;
    transition: none;
}

.mibtn:disabled {
    background: #b5b5b5;
}

/*******************************************************************/

.diagramaContenedor {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /*background-color: #f0f0f0;*/
}

.diagramaElemento {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background-color: #ccc;*/
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    transition: background 0.2s;
}

.diagramaElemento img {
    /* Estándar (cuando lo soporta) */
    user-drag: none;
    /* Safari/Chrome */
    -webkit-user-drag: none;
    /* No seleccionable */
    user-select: none;
    /* Opcional: los eventos se gestionan en el contenedor */
    pointer-events: none;
}

/*******************************************************************/