/* Optimizaciones adicionales para móviles */
@media (max-width: 768px) {
    /* Mejorar la navegación en móviles */
    nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    nav::-webkit-scrollbar {
        height: 3px;
    }
    
    nav::-webkit-scrollbar-thumb {
        background-color: var(--color-primary);
        border-radius: 3px;
    }
    
    /* Ajustar tamaños de texto para mejor legibilidad */
    p, li {
        font-size: 1.05rem;
    }
    
    /* Mejorar espaciado en blockquotes */
    blockquote {
        padding: var(--spacing-sm);
        margin: var(--spacing-sm) 0;
    }
    
    /* Ajustar espaciado de secciones */
    section {
        margin-bottom: var(--spacing-lg);
        scroll-margin-top: 60px;
    }
    
    /* Hacer que las listas sean más legibles */
    ul, ol {
        padding-left: var(--spacing-sm);
    }
    
    /* Ajustar botón de volver arriba */
    .back-to-top {
        width: 40px;
        height: 40px;
        font-size: 20px;
        bottom: 15px;
        right: 15px;
    }
}

/* Optimizaciones para pantallas muy pequeñas */
@media (max-width: 480px) {
    /* Ajustar header para pantallas pequeñas */
    header {
        padding: var(--spacing-md) 0;
    }
    
    /* Hacer la navegación más compacta */
    nav a {
        padding: var(--spacing-xs) var(--spacing-xs);
        font-size: 0.9rem;
    }
    
    /* Reducir márgenes y padding */
    .container {
        padding: 0 var(--spacing-xs);
    }
    
    section {
        margin-bottom: var(--spacing-md);
    }
    
    /* Ajustar subsecciones */
    .subsection {
        padding-left: var(--spacing-xs);
        margin-bottom: var(--spacing-md);
    }
}

/* Optimizaciones para impresión */
@media print {
    nav, .back-to-top, footer {
        display: none;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.5;
        color: #000;
        background: #fff;
    }
    
    a {
        color: #000;
        text-decoration: underline;
    }
    
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
        page-break-inside: avoid;
    }
    
    p, blockquote, ul, ol, dl, table {
        page-break-inside: avoid;
    }
    
    img {
        max-width: 100% !important;
    }
    
    @page {
        margin: 2cm;
    }
}