/* ===== CORRECCIONES ESPECÍFICAS PARA MÓVIL - NOTICIAS ===== */
/* Instituto Universitario del Sur - Fix COMPLETO para layout móvil de noticias */
/* VERSIÓN ESPECÍFICA - Corrige tanto página principal como artículos individuales */

/* ===== CORRECCIONES PARA PÁGINA PRINCIPAL DE NOTICIAS (noticias.html) ===== */
@media (max-width: 768px) {
    /* CONTENEDOR PRINCIPAL DE NOTICIAS - aprovechar todo el ancho */
    .grid.grid-cols-1.md\:grid-cols-2.xl\:grid-cols-3 {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        padding: 0 1rem !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* TARJETAS DE NOTICIAS - expandir al ancho completo en móvil */
    .grid article,
    .grid .card-hover,
    article.bg-white.rounded-xl.shadow-md {
        max-width: 100% !important; /* Eliminar max-w-sm */
        width: 100% !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }
    
    /* CONTENIDO DE LAS TARJETAS - mejor distribución del espacio */
    article .p-4 {
        padding: 1.25rem !important;
    }
    
    /* TÍTULOS DE LAS TARJETAS - más grandes en móvil */
    article h3.text-lg {
        font-size: 1.375rem !important;
        line-height: 1.4 !important;
        margin-bottom: 0.75rem !important;
    }
    
    /* DESCRIPCIÓN DE LAS TARJETAS - más espacio y mejor legibilidad */
    article p.text-gray-600.text-sm {
        font-size: 1rem !important;
        line-height: 1.6 !important;
        margin-bottom: 1rem !important;
    }
    
    /* HERO SECTION - aprovechar todo el ancho */
    .hero-bg {
        padding: 2rem 1rem !important;
        text-align: center !important;
    }
    
    .hero-bg h1 {
        font-size: 2rem !important;
        line-height: 1.3 !important;
        margin-bottom: 1rem !important;
    }
}

/* ===== CORRECCIONES PARA ARTÍCULOS INDIVIDUALES DE NOTICIAS ===== */
@media (max-width: 768px) {
    /* RESET COMPLETO para artículos individuales */
    body {
        overflow-x: hidden !important;
        width: 100% !important;
    }
    
    /* CONTENEDORES PRINCIPALES - sin restricciones de ancho */
    main.max-w-7xl,
    section.max-w-7xl {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }
    
    /* BOTÓN VOLVER - tamaño compacto y bien posicionado */
    .enlace-volver {
        margin-bottom: 1.5rem !important;
        display: block !important;
        width: fit-content !important;
        max-width: none !important;
    }
    
    .enlace-volver a {
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        padding: 0.5rem 1rem !important;
        font-size: 0.875rem !important;
        color: #1e3a8a !important;
        text-decoration: none !important;
        border-radius: 0.5rem !important;
        background: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
        transition: all 0.3s ease !important;
        width: auto !important;
        white-space: nowrap !important;
    }
    
    .enlace-volver a:hover {
        background: #e2e8f0 !important;
        border-color: #1e3a8a !important;
        color: #1e3a8a !important;
    }
    
    .enlace-volver i {
        font-size: 0.875rem !important;
        color: #1e3a8a !important;
    }
    
    .enlace-volver span {
        font-weight: 500 !important;
        color: #1e3a8a !important;
    }
    
    /* LAYOUT PRINCIPAL DEL ARTÍCULO - columna única en móvil */
    .flex.flex-col.lg\:flex-row {
        flex-direction: column !important;
        gap: 2rem !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* COLUMNA PRINCIPAL DEL CONTENIDO */
    .lg\:w-2\/3 {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        margin: 0 !important;
        padding: 0 !important;
        order: 1 !important;
    }
    
    /* SIDEBAR */
    .lg\:w-1\/3 {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        margin: 0 !important;
        padding: 0 !important;
        margin-top: 2rem !important;
        order: 2 !important;
    }
    
    /* TÍTULO DEL ARTÍCULO */
    h1.text-3xl.md\:text-4xl,
    h1.text-4xl.lg\:text-5xl {
        font-size: 1.875rem !important;
        line-height: 1.3 !important;
        margin-bottom: 1rem !important;
        word-wrap: break-word !important;
        text-align: left !important;
    }
    
    /* DESCRIPCIÓN DEL ARTÍCULO */
    p.text-xl.text-gray-600,
    p.text-lg.text-gray-600 {
        font-size: 1.125rem !important;
        line-height: 1.6 !important;
        margin-bottom: 1.5rem !important;
        text-align: left !important;
        word-wrap: break-word !important;
    }
    
    /* METADATOS DEL ARTÍCULO */
    .flex.items-center.space-x-4.mb-4,
    .flex.items-center.space-x-4.mb-6 {
        flex-wrap: wrap !important;
        gap: 0.75rem !important;
        margin-bottom: 1.5rem !important;
        justify-content: flex-start !important;
        align-items: center !important;
    }
    
    /* ETIQUETAS DE CATEGORÍA */
    .bg-green-100.text-green-800,
    .bg-blue-100.text-blue-800,
    .bg-purple-100.text-purple-800,
    .bg-yellow-100.text-yellow-800,
    .bg-pink-100.text-pink-800 {
        font-size: 0.875rem !important;
        padding: 0.25rem 0.75rem !important;
        border-radius: 9999px !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
    }
    
    /* TEXTO DE METADATOS */
    .text-sm.text-gray-500 {
        font-size: 0.875rem !important;
        color: #6b7280 !important;
        white-space: nowrap !important;
    }
    
    /* IMAGEN DESTACADA DEL ARTÍCULO */
    .featured-image,
    .w-full.h-64.md\:h-96,
    .w-full.h-48.md\:h-64.lg\:h-96 {
        width: 100% !important;
        height: 250px !important;
        object-fit: cover !important;
        border-radius: 0.75rem !important;
        margin: 1.5rem 0 !important;
    }
    
    /* CONTENIDO DEL ARTÍCULO */
    .article-content,
    .prose,
    .prose-lg {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    
    .article-content p,
    .prose p {
        font-size: 1rem !important;
        line-height: 1.7 !important;
        margin-bottom: 1.25rem !important;
        text-align: left !important;
        word-wrap: break-word !important;
        color: #374151 !important;
    }
    
    /* SECCIONES DESTACADAS DEL ARTÍCULO */
    .bg-gradient-to-r.from-green-50.to-blue-50,
    .bg-green-50.border-l-4.border-green-500,
    .bg-blue-50.border-l-4.border-blue-500 {
        margin: 1.5rem 0 !important;
        padding: 1.25rem !important;
        border-radius: 0.75rem !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* GALERÍA DE IMÁGENES */
    .grid.grid-cols-1.md\:grid-cols-2.gap-6,
    .grid.grid-cols-1.md\:grid-cols-2.gap-4 {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
        margin: 1.5rem 0 !important;
        width: 100% !important;
    }
    
    .gallery-image {
        width: 100% !important;
        height: 200px !important;
        object-fit: cover !important;
        border-radius: 0.75rem !important;
        margin-bottom: 1rem !important;
    }
    
    /* SIDEBAR - WIDGETS Y TARJETITAS - CORRECCIÓN ESPECÍFICA PARA MÓVIL */
    aside {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    
    aside .bg-white.rounded-xl.shadow-md {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 1.5rem 0 !important;
        padding: 1.5rem !important;
        box-sizing: border-box !important;
        display: block !important;
        background: #ffffff !important;
        border-radius: 0.75rem !important;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* TÍTULOS DE LAS TARJETITAS */
    aside h3 {
        font-size: 1.25rem !important;
        font-weight: 700 !important;
        margin-bottom: 1rem !important;
        color: #1e3a8a !important;
        text-align: left !important;
        width: 100% !important;
    }
    
    /* CONTENEDOR DE ARTÍCULOS RELACIONADOS */
    aside .space-y-4 {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* TARJETITAS DE ARTÍCULOS RELACIONADOS - CORRECCIÓN COMPLETA */
    aside .space-y-4 > div,
    aside .space-y-4 .flex.items-center.space-x-3 {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 1rem !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 1rem !important;
        background: #f8fafc !important;
        border-radius: 0.75rem !important;
        border: 1px solid #e2e8f0 !important;
        transition: all 0.3s ease !important;
        box-sizing: border-box !important;
        text-decoration: none !important;
    }
    
    aside .space-y-4 .flex.items-center.space-x-3:hover {
        background: #f1f5f9 !important;
        border-color: #cbd5e1 !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* ICONOS EN TARJETITAS - POSICIÓN FIJA */
    aside .space-y-4 .flex.items-center.space-x-3 i {
        font-size: 1.5rem !important;
        color: #1e3a8a !important;
        min-width: 2.5rem !important;
        width: 2.5rem !important;
        height: 2.5rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        flex-shrink: 0 !important;
        background: rgba(30, 58, 138, 0.1) !important;
        border-radius: 50% !important;
        margin: 0 !important;
    }
    
    /* CONTENIDO DE TEXTO EN TARJETITAS */
    aside .space-y-4 .flex.items-center.space-x-3 div {
        flex: 1 !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    aside .space-y-4 .flex.items-center.space-x-3 h4 {
        font-size: 1rem !important;
        font-weight: 600 !important;
        color: #1f2937 !important;
        margin: 0 0 0.25rem 0 !important;
        line-height: 1.4 !important;
        text-align: left !important;
        width: 100% !important;
    }
    
    aside .space-y-4 .flex.items-center.space-x-3 p {
        font-size: 0.875rem !important;
        color: #6b7280 !important;
        margin: 0 !important;
        text-align: left !important;
        width: 100% !important;
    }
    
    /* ETIQUETAS (TAGS) - CORRECCIÓN ESPECÍFICA */
    aside .flex.flex-wrap.gap-2 {
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.75rem !important;
        margin: 1rem 0 0 0 !important;
        padding: 0 !important;
        justify-content: flex-start !important;
        align-items: center !important;
    }
    
    aside .flex.flex-wrap.gap-2 span {
        padding: 0.5rem 1rem !important;
        font-size: 0.875rem !important;
        font-weight: 600 !important;
        border-radius: 9999px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        display: inline-block !important;
        text-align: center !important;
        margin: 0 !important;
    }
    
    /* INFORMACIÓN DEL PROGRAMA - CORRECCIÓN ESPECÍFICA */
    aside .space-y-4 .flex.items-center.space-x-3:nth-child(n) {
        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
        border-left: 4px solid #f59e0b !important;
        padding: 1.25rem !important;
        margin: 0 0 1rem 0 !important;
        width: 100% !important;
    }
    
    /* BOTONES DE CALL TO ACTION - CORRECCIÓN ESPECÍFICA */
    aside .flex.flex-col.space-y-2 {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
        margin: 1.5rem 0 0 0 !important;
        padding: 0 !important;
    }
    
    aside .flex.flex-col.space-y-2 a {
        width: 100% !important;
        max-width: 100% !important;
        padding: 1rem 1.5rem !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        text-align: center !important;
        border-radius: 0.75rem !important;
        text-decoration: none !important;
        transition: all 0.3s ease !important;
        box-sizing: border-box !important;
        display: block !important;
        margin: 0 !important;
    }
    
    /* OVERRIDE ESPECÍFICO PARA ASEGURAR ANCHO COMPLETO */
    aside > * {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* ESPACIADO ENTRE SECCIONES DEL SIDEBAR */
    aside > .bg-white.rounded-xl.shadow-md {
        margin-bottom: 2rem !important;
    }
    
    aside > .bg-white.rounded-xl.shadow-md:last-child {
        margin-bottom: 0 !important;
    }
    
    /* CORRECCIÓN PARA CONTENEDORES ANIDADOS */
    aside .bg-white.rounded-xl.shadow-md > * {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* CORRECCIÓN PARA FLEX CONTAINERS EN SIDEBAR */
    aside .flex {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* RESET COMPLETO PARA SIDEBAR EN MÓVIL */
    aside,
    aside * {
        box-sizing: border-box !important;
    }
    
    /* OVERRIDE ULTRA-ESPECÍFICO PARA SIDEBAR COMPLETO EN MÓVIL */
    body aside,
    body main aside,
    body .lg\:w-1\/3 {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
    }
    
    /* TARJETITAS DEL SIDEBAR - OVERRIDE ULTRA-ESPECÍFICO */
    body aside .bg-white.rounded-xl.shadow-md,
    body .lg\:w-1\/3 .bg-white.rounded-xl.shadow-md,
    body main aside .bg-white.rounded-xl.shadow-md {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 1.5rem 0 !important;
        padding: 1.5rem !important;
        display: block !important;
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        box-sizing: border-box !important;
    }
    
    /* CONTENIDO DENTRO DE LAS TARJETITAS - ULTRA-ESPECÍFICO */
    body aside .bg-white.rounded-xl.shadow-md .space-y-4,
    body .lg\:w-1\/3 .bg-white.rounded-xl.shadow-md .space-y-4 {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
        box-sizing: border-box !important;
    }
    
    /* ITEMS INDIVIDUALES DENTRO DE LAS TARJETITAS */
    body aside .space-y-4 > div,
    body aside .space-y-4 .flex,
    body .lg\:w-1\/3 .space-y-4 > div,
    body .lg\:w-1\/3 .space-y-4 .flex {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        padding: 1rem !important;
        background: #f8fafc !important;
        border-radius: 0.75rem !important;
        box-sizing: border-box !important;
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
    }
}

/* ===== CORRECCIONES ADICIONALES PARA DISPOSITIVOS MUY PEQUEÑOS ===== */
@media (max-width: 480px) {
    main.max-w-7xl,
    section.max-w-7xl {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    
    h1.text-3xl.md\:text-4xl {
        font-size: 1.5rem !important;
        line-height: 1.4 !important;
    }
    
    .enlace-volver a {
        padding: 0.375rem 0.75rem !important;
        font-size: 0.8rem !important;
    }
    
    .gallery-image {
        height: 180px !important;
    }
}

/* ===== CORRECCIONES ADICIONALES PARA DISPOSITIVOS MUY PEQUEÑOS ===== */
@media (max-width: 480px) {
    main.max-w-7xl,
    section.max-w-7xl {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    
    h1.text-3xl.md\:text-4xl {
        font-size: 1.5rem !important;
        line-height: 1.4 !important;
    }
    
    .enlace-volver a {
        padding: 0.375rem 0.75rem !important;
        font-size: 0.8rem !important;
    }
    
    .gallery-image {
        height: 180px !important;
    }
}