#page-controls a {
    color: #212529;
    text-decoration: none;
    background-color: transparent;
}

body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
git    overflow-x: hidden; /* Prevenir scroll horizontal */
    width: 100%;
    max-width: 100%;
}

html {
    overflow-x: hidden; /* Prevenir scroll horizontal también en el elemento html */
    max-width: 100%;
}

.wiki-container {
    display: flex;
    min-height: 100vh;
    max-width: 100%;
    overflow-x: hidden;
}

.content {
    flex: 1;
    padding: 20px;
    overflow-x: hidden; /* Prevenir scroll horizontal en el contenido */
    max-width: 100%;
}

/* Control de imágenes y otros elementos que podrían causar scroll */
img, video, iframe, table, pre, .mermaid, .swagger-ui-wrapper {
    max-width: 100%;
    height: auto;
}

/* Mejoras para los bloques de código */
.code-block {
    position: relative;
    max-width: 100%;
    overflow-x: auto; /* Permitir scroll solo dentro de los bloques de código */
}

.code-block .copy-button {
    position: absolute;
    right: 8px;
    top: 8px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 0.8rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
}

.code-block:hover .copy-button {
    opacity: 1;
}

.code-block .copy-button:hover {
    background: #e0e0e0;
}

.code-block .copy-button:active {
    background: #d0d0d0;
}

/* Ajustes para Mermaid */
.mermaid {
    background-color: white;
    border-radius: 4px;
    overflow: auto;
}

/* Swagger UI Container Styles */
.swagger-ui-wrapper {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    height: 100vh;
    background: white;
}

/* Transition between views */
.content, .swagger-ui-wrapper {
    transition: opacity 0.3s ease;
}

/* Swagger UI customizations */
.swagger-ui .information-container {
    margin: 0;
    padding: 20px;
}

.swagger-ui .opblock-tag {
    font-size: 1.2rem;
    margin: 20px 0 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e5e5e5;
}

.swagger-ui .opblock {
    box-shadow: none;
    border: 1px solid #e5e5e5;
    margin-bottom: 15px;
}

.swagger-ui .opblock .opblock-summary {
    border-bottom: 1px solid #e5e5e5;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .swagger-ui .opblock .opblock-summary {
        flex-direction: column;
    }
    
    .swagger-ui .opblock .opblock-summary-path {
        margin-bottom: 10px;
    }
    
    .swagger-ui-wrapper, .content {
        padding: 15px;
    }
}

/* Estilo para el elemento que se está arrastrando */
#nav-links li.dragging {
    opacity: 0.5;
    background-color: #e0e0e0; /* Un color de fondo suave */
}

/* Estilos para indicar dónde se soltará */
#nav-links li.drag-over-top {
    border-top: 2px dashed blue;
}

#nav-links li.drag-over-bottom {
    border-bottom: 2px dashed blue;
}

#nav-links li.drag-over-inside {
    /* Estilo para indicar que se hará hijo */
    background-color: #d0e0ff; /* Un azul claro */
    outline: 1px dashed blue;
}

#nav-links.drag-over-root {
    /* Estilo opcional para cuando se arrastra al espacio vacío de la raíz */
    outline: 2px dashed #ccc;
}

/* Plan modal: reducir tamaño de headings del contenido generado por IA */
.plan-content h1 { font-size: 1rem; font-weight: 600; margin-bottom: .25rem; }
.plan-content h2 { font-size: .9rem; font-weight: 600; margin-bottom: .25rem; }
.plan-content h3 { font-size: .85rem; font-weight: 600; margin-bottom: .2rem; }
.plan-content p, .plan-content li { font-size: .85rem; margin-bottom: .2rem; }
.plan-content ul, .plan-content ol { padding-left: 1.2rem; margin-bottom: .25rem; }

/* Asegurar que los LI tengan algo de espacio para el drop */
#nav-links li {
    position: relative; /* Necesario para algunos cálculos o pseudo-elementos si los usaras */
    margin-bottom: 2px; /* Pequeño espacio entre items */
}

/* Re-habilitar pointer-events para los toggles de submenú si existen */
#nav-links li a.dropdown-toggle {
    pointer-events: auto;
}