#markdown-content {
    flex: 1;
    max-width: 650px;/*changed*/
    padding: 20px;
    background: white;
    border-radius: 10px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%; /* Hacer que el contenido no se desborde */
}
#markdown-content h1 {
text-align: center;
color: #007bff;
font-size: 2rem;
}

#markdown-content h2 {
border-bottom: 2px solid #007bff;
padding-bottom: 5px;
}


/* color to code programming*/
/*#markdown-content code {
    display: flex;
    color: #e83bff;
}*/

#markdown-content code {
    color: #e83bff;
    font-family: monospace;
}


#markdown-content pre {
    /*width: 100%;
    max-width: 100%;*/
    overflow-x: auto;
    white-space: pre;
    box-sizing: border-box;
}


#markdown-content pre code {
    white-space: pre;        /* Mantiene formato */
    word-break: normal;
    font-family: monospace;
    color: #e83bff;
}


#toc {
position: fixed;
right: 20px;
top: 100px;
width: 250px;
background: white;
padding: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
border-radius: 5px;
}
 /* Hacer imágenes responsivas */
 #markdown-content img {
     max-width: 100%;
     height: auto;
     display: block;
     margin: 10px auto;
     border-radius: 5px;
     box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
 }

 /* change XD 09_05_25*/
 /* Contenedor principal */
 /*.content-wrapper {
     display: flex;
     flex-direction: row;
     width: 100%;
     max-width: 1200px;
     margin: auto;
     padding: 20px;
 }*/

/* Contenedor principal en dos columnas */
/*.content-wrapper {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
width: 100%;
max-width: 1200px;
margin: auto;
padding: 20px;
}*/
 /* fin XD 09_05_25*/

/* Contenedor principal en dos columnas */
.content-wrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    max-width: 1200px;
    margin: auto;
    padding: 20px;
    box-sizing: border-box; /* Asegura que padding no sume ancho */
}


/* Barra lateral */
.sidebar {
width: 350px;
position: sticky;
top: 10px;
height: 100vh;
overflow-y: auto;
background: #f8f9fa;
padding: 20px;
border-radius: 10px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);


min-width: 250px;
max-width: 350px;
flex-shrink: 0;

}
/*.sidebar {
/*    width: 20%; /* 20% de la pantalla */
/*    max-width: 350px; /* Limita el ancho máximo */
/*    position: sticky;
/*    top: 10px;
/*    height: 100vh;
/*    overflow-y: auto;
/*    background: #f8f9fa;
/*    padding: 20px;
/*    border-radius: 10px;
/*}

/* Estilos para los enlaces del índice */
.sidebar-list {
list-style: none;
padding: 0;
}

.sidebar-list li {
margin: 5px 0;
}

.sidebar-list a {
text-decoration: none;
color: #333;
font-weight: bold;
display: block;
padding: 5px;
transition: 0.3s;
}

.sidebar-list a:hover {  /*over the tittel on the lateral and subtittle */ 
background: #f8a203;  /* when you pass the mouese over the lateral*/ 
color: #fff;
border-radius: 5px;
}


/* Botón para mostrar el menú en móviles */
.menu-btn {
display: none; /* Oculto en escritorio */
position: fixed;
top: 10px;
right: 10px;
z-index: 100;
background: #ff7b00;
color: white;
padding: 10px 15px;
border: none;
cursor: pointer;
border-radius: 5px;
font-size: 18px;
}

.menu-btn:hover {
background: #0bc92b;
}

/* Estilos en pantallas pequeñas */
@media (max-width: 768px) {
.menu-btn {
display: block; /* Se muestra en móviles */
}

.sidebar {
position: fixed;
top: 0;
left: -270px; /* Oculta la barra lateral */
width: 250px;
height: 100vh;
background: #f8f9fa;
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
transition: left 0.3s ease-in-out;
padding: 20px;
z-index: 2000; /* Asegurar que esté por encima de la animación */
}

.sidebar.active {
left: 0; /* Muestra la barra lateral */
}
}


/*----------------------------------------------*/

/* Estilos del botón de tema */
.theme-btn {
    position: fixed;
    top: 50px;
    right: 10px;
    background: #ff9800;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    z-index: 1000;
    transition: 0.3s;
}

.theme-btn:hover {
    background: #f57c00;
}

/* Modo oscuro */
.dark-mode {
    background: #ffffff;  /* fondo*/
    color: #e0e0e0;
}

.dark-mode #markdown-content {
    background: #2a2a2a;
    color: white;
    box-shadow: none;
}

.dark-mode #markdown-content h1,
.dark-mode #markdown-content h2,
.dark-mode #markdown-content h3,
.dark-mode #markdown-content h4{
    color: #ff9800;
}

.dark-mode #markdown-content pre {
    background: #333;
    color: #f1f1f1;
}

.dark-mode #markdown-content code {
    background: #444;
    color: #ffeb3b;
}

.dark-mode .sidebar {
    background: #333;
    color: white;
}

.dark-mode .sidebar-list a {
    color: white;
}

.dark-mode .sidebar-list a:hover {
    background: #ff9800;
}


/*************** button copy ********/
.copy-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #e2860e;
    color: white;
    border: none;
    padding: 5px 10px;
    font-size: 14px;
    cursor: pointer;
    border-radius: 5px;
    opacity: 0.8;
    transition: 0.3s;
}

.copy-btn:hover {
    opacity: 1;
    background: #0056b3;
}
        /* Asegurar que los bloques <pre> tengan posición relativa */
            pre {
            position: relative;
                white-space: pre-wrap; /* Ajusta el código si es muy largo */
        }/*/ change 09_05_2025*/ 

        #markdown-content video {
            display: block;
            max-width: 100%;
            height: auto;  /* Mantiene la proporción original */
            margin: 0 auto;  /* Esto centra el video horizontalmente */
            border-radius: 5px;  /* Opcional: agrega bordes redondeados */
            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);  /* Opcional: sombra */
        }
        @media (max-width: 768px) {
            #markdown-content video {
                width: 100%;
                height: auto; /* Mantiene la proporción */
            }
        }
        #markdown-content .video-comment {
            text-align: center;  /* Centra el texto */
            margin-top: 10px;  /* Espacio entre el video y el comentario */
            font-size: 1rem;  /* Tamaño de fuente del comentario */
            color: #333;  /* Color del texto */
        }
        
/*tovideo*/
        /*.video-wrapper {
            position: relative;
            display: block;
            height: 0;
            padding: 0;
            overflow: hidden;
            padding-bottom: 56.25%;
          }
          .video-wrapper > iframe {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 0;
          }*/

/**          .video-container {
/**            position: relative;
/**            width: 100%;
/**            max-width: 800px;  /* Ajusta el tamaño máximo si lo necesitas */
/**            margin: auto;  /* Centrar el video */
/**            padding-bottom: 56.25%;  /* Proporción 16:9 (alto = ancho * 9 / 16) */
/**            height: 0;
/**            overflow: hidden;
/**        }
/**        
/**        .video-container iframe {
/**            position: absolute;
/**            top: 0;
/**            left: 0;
/**            width: 100%;
/**            height: 100%;
/**        }
/***/

/* fusion360 stl */
  .iframe-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.iframe-container iframe {
    max-width: 100%;
    width: 80%;
    height: 480px;
    border: 0;
}
        
/* Download button */
.download-btn {
    display: inline-block;
    background-color: #007bff;
    color: white;
    padding: 10px 16px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
    transition: background 0.3s;
  }
  
.download-btn:hover {
  background-color: #0056b3;
}