/* ================================================================
 * CORRECCIONES PARA CARDS DE VIDEO - PÁGINA DE RECURSOS
 * ================================================================ */

/* ================================================================
 * CORRECCIONES PARA VIDEOS Y TUTORIALES
 * ================================================================ */

/* Asegurar que el contenedor principal no se desborde */
.videos-tutoriales-feature {
    overflow: hidden !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
}

/* Contenedor de contenido de video */
.videos-tutoriales-feature .feature-content {
    overflow: hidden !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    max-width: 100% !important;
}

/* Título de la feature */
.videos-tutoriales-feature .feature-title {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
    margin-bottom: 1rem !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}

/* Descripción de la feature */
.videos-tutoriales-feature .feature-description {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    margin-bottom: 1.5rem !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
}

/* Contenedor de categorías de video */
.videos-tutoriales-feature .video-categories {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1rem !important; /* Aumentado el gap para más separación */
    margin-bottom: 1.5rem !important;
    max-width: 100% !important;
}

/* Categorías individuales de video */
.videos-tutoriales-feature .video-category {
    background: var(--surface-glass) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 12px !important;
    padding: 0.75rem 1rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    flex: 1 !important;
    min-width: 160px !important; /* Aumentado para más espacio */
    max-width: calc(50% - 0.375rem) !important; /* Mantener máximo 50% */
    word-wrap: break-word !important;
    word-break: normal !important; /* Cambiar de break-word a normal */
    overflow: hidden !important;
}

/* Nombres de categorías */
.videos-tutoriales-feature .category-name {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    margin: 0 !important;
    word-wrap: break-word !important;
    word-break: normal !important; /* Cambiar de break-word a normal */
    overflow-wrap: break-word !important;
    flex: 1 !important;
    min-width: 0 !important; /* Permitir que se encoja */
    white-space: normal !important; /* Permitir saltos de línea naturales */
}

/* Contador de videos */
.videos-tutoriales-feature .video-count {
    background: var(--accent-primary) !important;
    color: var(--text-on-accent) !important;
    padding: 0.25rem 0.5rem !important;
    border-radius: 8px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    margin-left: auto !important;
    flex-shrink: 0 !important; /* No permitir que se encoja */
    white-space: nowrap !important;
}

/* Mejorar el espaciado interno de las categorías */
.videos-tutoriales-feature .video-category {
    padding: 1rem 1.25rem !important; /* Aumentado padding para más espacio interno */
}

/* Asegurar que los textos tengan suficiente espacio */
.videos-tutoriales-feature .category-name {
    line-height: 1.4 !important; /* Mejorar line-height para legibilidad */
    padding-right: 0.5rem !important; /* Espacio adicional antes del contador */
}

/* ================================================================
 * CORRECCIONES PARA CONTENEDOR DE VIDEO DESKTOP
 * ================================================================ */

/* Contenedor del reproductor de video */
.video-player-container-desktop {
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
    background: var(--surface-secondary, #f8fafc) !important;
    height: fit-content !important;
    max-width: 100% !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
}

/* Iframe del video */
.video-iframe-desktop {
    width: 100% !important;
    height: 280px !important;
    border: none !important;
    display: block !important;
    max-width: 100% !important;
}

/* Información del video */
.video-info-desktop {
    padding: 1.5rem !important;
    background: var(--surface-secondary, #f8fafc) !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}

/* Título del video */
.video-title-desktop {
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    color: var(--text-primary, #1e293b) !important;
    margin: 0 0 0.5rem 0 !important;
    line-height: 1.4 !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
}

/* Estadísticas del video */
.video-stats-desktop {
    font-size: 0.875rem !important;
    color: var(--text-secondary, #64748b) !important;
    margin: 0 !important;
    font-weight: 500 !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
}

/* ================================================================
 * CORRECCIONES PARA ACCIONES DE VIDEO
 * ================================================================ */

/* Contenedor de acciones */
.videos-tutoriales-feature .feature-actions {
    margin-top: auto !important;
    display: flex !important;
    gap: 0.75rem !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    max-width: 100% !important;
}

/* Botones en las acciones */
.videos-tutoriales-feature .feature-actions .btn {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* ================================================================
 * CORRECCIONES RESPONSIVE
 * ================================================================ */

/* Tablet */
@media (max-width: 1024px) {
    .videos-tutoriales-feature {
        gap: 2rem !important;
    }
    
    .videos-tutoriales-feature .video-category {
        min-width: 140px !important; /* Aumentado para más espacio */
        max-width: calc(50% - 0.5rem) !important; /* Ajustado para el nuevo gap */
    }
    
    .video-title-desktop {
        font-size: 1rem !important;
    }
}

/* Mobile */
@media (max-width: 768px) {
    /* Cambiar a layout de una columna */
    .videos-tutoriales-feature {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    
    .videos-tutoriales-feature .feature-media {
        order: -1 !important;
    }
    
    .videos-tutoriales-feature .video-categories {
        flex-direction: column !important;
        gap: 1rem !important; /* Aumentado para más separación */
    }
    
    .videos-tutoriales-feature .video-category {
        min-width: auto !important;
        max-width: 100% !important;
        width: 100% !important;
        padding: 1rem 1.25rem !important; /* Aumentado padding para más espacio */
    }
    
    .videos-tutoriales-feature .category-name {
        font-size: 0.875rem !important;
    }
    
    .video-iframe-desktop {
        height: 200px !important;
    }
    
    .video-info-desktop {
        padding: 1rem !important;
    }
    
    .video-title-desktop {
        font-size: 1rem !important;
    }
    
    .videos-tutoriales-feature .feature-title {
        font-size: 1.25rem !important;
    }
    
    .videos-tutoriales-feature .feature-description {
        font-size: 0.9rem !important;
    }
}

/* Mobile pequeño */
@media (max-width: 480px) {
    .videos-tutoriales-feature {
        gap: 1rem !important;
    }
    
    .videos-tutoriales-feature .feature-title {
        font-size: 1.125rem !important;
    }
    
    .videos-tutoriales-feature .feature-description {
        font-size: 0.875rem !important;
    }
    
    .videos-tutoriales-feature .video-category {
        padding: 0.5rem 0.75rem !important;
    }
    
    .videos-tutoriales-feature .category-name {
        font-size: 0.8rem !important;
    }
    
    .video-iframe-desktop {
        height: 180px !important;
    }
    
    .video-info-desktop {
        padding: 0.875rem !important;
    }
    
    .video-title-desktop {
        font-size: 0.9rem !important;
    }
    
    .video-stats-desktop {
        font-size: 0.8rem !important;
    }
}

/* ================================================================
 * GARANTÍAS GLOBALES PARA EVITAR DESBORDAMIENTO
 * ================================================================ */

/* Asegurar que todos los elementos de texto se ajusten */
.videos-tutoriales-feature * {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Contenedores principales */
.videos-tutoriales-feature,
.video-player-container-desktop,
.video-info-desktop {
    overflow: hidden !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}

/* Textos largos */
.videos-tutoriales-feature h3,
.videos-tutoriales-feature h4,
.videos-tutoriales-feature p,
.video-title-desktop,
.video-stats-desktop {
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    word-break: normal !important; /* Cambiar de break-word a normal */
    hyphens: auto !important;
}