/* ========== MEJORAS RESPONSIVE PARA MÓVIL ========== */

/* Ajustes generales para móvil */
@media (max-width: 768px) {
    /* Contenedor principal */
    .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
        max-width: 100% !important;
    }
    
    /* Top Header - Ajustes para móvil */
    .top-header {
        min-height: 35px !important;
    }
    
    .top-header-row {
        padding: 8px 0 !important;
        font-size: 12px !important;
    }
    
    .top-header-row .location,
    .top-header-row .date {
        font-size: 11px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* Main Header - Logo más pequeño en móvil */
    .main-header {
        padding: 10px 0 !important;
    }
    
    .main-header .logo img {
        max-width: 140px !important;
        height: auto !important;
    }
    
    /* Menú hamburguesa más visible */
    .menu-toggle {
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 8px !important;
    }
    
    /* Grid de noticias - Una columna en móvil */
    .news-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 0 !important;
    }
    
    /* Cards de noticias - Ancho completo */
    .news-card,
    .news-item {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
    
    /* Imágenes de noticias - Responsive */
    .news-image img,
    .news-card img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9 !important;
        object-fit: cover !important;
    }
    
    /* Títulos de noticias - Tamaño ajustado */
    .news-title,
    .news-card h3 {
        font-size: 18px !important;
        line-height: 1.4 !important;
        margin-bottom: 10px !important;
    }
    
    /* Excerpt de noticias - Más corto en móvil */
    .news-excerpt {
        font-size: 14px !important;
        line-height: 1.5 !important;
        -webkit-line-clamp: 3 !important;
    }
    
    /* Sidebar - Ocultar en móvil o hacer full width */
    .sidebar {
        display: none !important;
    }
    
    /* Hero Section - Altura reducida en móvil */
    .hero-section {
        height: 300px !important;
        border-radius: 12px !important;
        margin-bottom: 30px !important;
    }
    
    /* Video destacado - Ajustes móvil */
    .featured-video-container {
        margin-bottom: 30px !important;
    }
    
    .video-container {
        aspect-ratio: 16 / 9 !important;
        height: auto !important;
    }
    
    /* Ticker de noticias - Scroll horizontal mejorado */
    .ticker-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }
    
    .ticker-container::-webkit-scrollbar {
        display: none !important;
    }
    
    /* Footer - Ajustes móvil */
    .site-footer-main {
        padding: 40px 15px 20px 15px !important;
    }
    
    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
    
    /* Botones - Tamaño táctil adecuado */
    button,
    .btn,
    a.btn {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 12px 20px !important;
        font-size: 16px !important;
    }
    
    /* Formularios - Mejor UX en móvil */
    input,
    textarea,
    select {
        font-size: 16px !important; /* Evita zoom en iOS */
        padding: 12px 15px !important;
    }
    
    /* Modales - Full screen en móvil pequeño */
    .modal-content,
    .preview-modal-content {
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }
}

/* Ajustes para móviles muy pequeños */
@media (max-width: 480px) {
    /* Header más compacto */
    .top-header-row {
        padding: 6px 0 !important;
        font-size: 10px !important;
    }
    
    .main-header {
        padding: 8px 0 !important;
    }
    
    .main-header .logo img {
        max-width: 120px !important;
    }
    
    /* Títulos más pequeños */
    h1 {
        font-size: 24px !important;
    }
    
    h2 {
        font-size: 20px !important;
    }
    
    h3 {
        font-size: 18px !important;
    }
    
    /* Cards más compactas */
    .news-card,
    .news-item {
        padding: 15px !important;
    }
    
    /* Espaciado reducido */
    .main-content {
        padding: 30px 0 40px 0 !important;
    }
    
    /* Hero section más pequeña */
    .hero-section {
        height: 250px !important;
        margin-bottom: 20px !important;
    }
}

/* Ajustes para pantallas muy pequeñas (iPhone SE, etc.) */
@media (max-width: 375px) {
    .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    .main-header .logo img {
        max-width: 100px !important;
    }
    
    .news-title,
    .news-card h3 {
        font-size: 16px !important;
    }
    
    .news-excerpt {
        font-size: 13px !important;
    }
}

/* Mejoras de toque y accesibilidad */
@media (hover: none) and (pointer: coarse) {
    /* Aumentar áreas táctiles en dispositivos táctiles */
    a,
    button,
    .clickable {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    /* Remover hover effects en móvil */
    .news-card:hover,
    .news-item:hover {
        transform: none !important;
    }
}

/* Orientación landscape en móvil */
@media (max-width: 768px) and (orientation: landscape) {
    .hero-section {
        height: 200px !important;
    }
    
    .main-content {
        padding: 20px 0 30px 0 !important;
    }
}