/* ==========================================================================
   Codealo - Routes Page Styles
   Estilos específicos para la página de Routes
   ========================================================================== */

/* Code blocks específicos de Routes */
.code-block {
    font-size: 12px;
    line-height: 1.4;
    white-space: pre;
    word-break: normal;
    overflow-wrap: normal;
}

.code-pre {
    padding: 0.4rem;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Scroll suave en iOS */
}

/* Fix crítico: permite que los elementos del grid y flex se encojan */
.grid > * {
    min-width: 0;
}

/* Fix para contenedores flex que contienen pre/code */
.flex-1 {
    min-width: 0;
    max-width: 100%;
}

/* Asegura que el contenedor space-y-4 no desborde */
.space-y-4 {
    max-width: 100%;
}

/* Clase helper para API cards - aplicar overflow control */
.api-card-content {
    max-width: 100%;
    overflow: hidden;
}

.api-card-content pre {
    max-width: 100%;
}

/* Mobile menu: drawer from the right */
#mobile-menu-wrapper.mobile-menu-open #mobile-menu {
    transform: translateX(0);
}

#mobile-menu-wrapper.mobile-menu-open #mobile-menu-backdrop {
    opacity: 1;
    pointer-events: auto;
}

/* Fix para contenedores de API cards en móvil */
@media (max-width: 640px) {
    .code-pre {
        font-size: 10px;
    }
    
    .code-block {
        font-size: 10px;
    }
}