/* ============================================
   News Detail View - Estilos para Panel de Detalle
   VERSIÓN 4.1 - Soporte para Noticias y Artículos
   ============================================ */

/* === Contenedor Principal === */
.news-detail-container {
    display: none;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 1rem; /* Reducido de 2rem a 1rem */
    overflow: hidden;
    height: auto;
    min-height: auto;
}

.news-detail-container.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   GRID LAYOUT PARA VISTA DE DETALLE
   Cuando se activa el detalle, reorganizar el grid
   ============================================ */

/* Activar grid cuando el detalle está visible */
.news-content .container.detail-view-active {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 1.5rem; /* Reducido de 2rem a 1.5rem */
    align-items: start;
}

/* Elementos en el grid cuando el detalle está activo */
.news-content .container.detail-view-active > #loading,
.news-content .container.detail-view-active > #error-message {
    grid-column: 1 / -1;
    grid-row: 1;
}

/* NOTICIAS - Contenedores originales */
.news-content .container.detail-view-active > .news-detail-container {
    grid-column: 1;
    grid-row: 2;
}

.news-content .container.detail-view-active > .news-grid {
    grid-column: 1;
    grid-row: 3;
}

/* ARTÍCULOS - Mismo comportamiento que Noticias */
.news-content .container.detail-view-active > #article-detail-container {
    grid-column: 1;
    grid-row: 2;
}

.news-content .container.detail-view-active > #articles-list-container {
    grid-column: 1;
    grid-row: 3;
}

/* SIDEBAR - Aplica a ambos (Noticias y Artículos) */
.news-content .container.detail-view-active > .news-sidebar {
    grid-column: 2;
    grid-row: 2 / span 2; /* Empieza a la altura del detalle */
}

/* === Header con Botón Cerrar === */
.news-detail-header {
    display: flex;
    justify-content: flex-end;
    padding: 1rem 1.5rem;
    background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
}

.close-detail-btn {
    background: #e74c3c;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.close-detail-btn:hover {
    background: #c0392b;
    transform: translateY(-2px);
    box-shadow: 0 3px 10px rgba(231, 76, 60, 0.3);
}

.close-detail-btn:active {
    transform: translateY(0);
}

/* === Artículo Principal === */
.news-detail-article {
    padding: 2rem 3rem 1rem; /* Reducir padding inferior */
}

/* === Metadata === */
.detail-meta {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.detail-source {
    background: linear-gradient(135deg, #0066cc 0%, #0052a3 100%);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-date {
    color: #666;
    font-size: 0.875rem;
    font-weight: 600;
}

/* Estilo sobrio para nombre de fuente (SIN background) */
.detail-source-text {
    display: inline-block;
    color: var(--text-primary, #333);
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* === Título === */
.detail-title {
    font-size: 2rem;
    line-height: 1.3;
    color: #2c3e50;
    margin-bottom: 2rem;
    font-weight: 700;
}

/* === Resumen === */
.detail-summary {
    color: #333;
    line-height: 1.8;
    font-size: 1.0625rem;
    margin-bottom: 2rem;
}

.detail-summary p {
    margin-bottom: 1.25rem;
    text-align: justify;
}

.detail-summary p:last-child {
    margin-bottom: 0;
}

/* === Acciones === */
.detail-actions {
    display: flex;
    gap: 1rem;
    padding-top: 1.5rem; /* Reducido de 2rem */
    padding-bottom: 0.5rem; /* Agregar padding inferior pequeño */
    border-top: 2px solid #e0e0e0;
}

/* Usar el mismo estilo estándar del grid */
.detail-actions .read-more-btn {
    display: inline-flex;
    align-items: center;
    color: var(--primary-color, #0066cc);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.detail-actions .read-more-btn:hover {
    color: var(--secondary-color, #0052a3);
    gap: 0.5rem;
}

/* ============================================
   NOTICIAS RELACIONADAS - TARJETAS INDIVIDUALES
   ============================================ */

/* Modificador para tarjetas de noticias relacionadas */
.related-news-individual {
    position: relative;
}

/* Badge discreto de "Noticia Relacionada" */
.related-news-badge {
    background: #f8f9fa; /* Mismo color del fondo de tarjeta */
    color: #7f8c8d; /* Gris discreto */
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: left; /* Alineado a la izquierda */
    border-bottom: 1px solid #e0e0e0;
}

.related-news-individual:hover {
    transform: translateY(-3px);
}

/* Badge de Score en header */
.related-score-badge {
    background: #00a86b;
    color: white;
    padding: 0.375rem 0.75rem;
    border-radius: 15px;
    font-size: 0.75rem;
    font-weight: 700;
}

/* Badges de Similitud */
.similarity-badges {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}

.similarity-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 10px;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.badge-cve {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    color: white;
}

.badge-threat {
    background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
    color: white;
}

.badge-product {
    background: linear-gradient(135deg, #f39c12 0%, #d68910 100%);
    color: white;
}

.badge-category {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    color: white;
}

/* Ajustar espaciado del body para tarjetas compactas */
.related-news-individual .news-card-body {
    padding: 1rem 1.5rem;
}

.related-news-individual .news-card-body p {
    margin-bottom: 0;
    font-size: 0.875rem;
    line-height: 1.5;
}

/* ============================================
   ESTADOS: LOADING Y ERROR
   ============================================ */

.detail-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    min-height: 300px;
}

.detail-loading .spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #0066cc;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 1rem;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.detail-loading p {
    color: #666;
    font-size: 1.125rem;
    font-weight: 600;
}

.detail-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}

.detail-error h3 {
    color: #e74c3c;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

.detail-error .btn-secondary {
    background: #95a5a6;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.3s ease;
}

.detail-error .btn-secondary:hover {
    background: #7f8c8d;
    transform: translateY(-2px);
}

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

@media (max-width: 968px) {
    .news-detail-article {
        padding: 1.5rem 2rem 1rem; /* Ajustar padding inferior */
    }
    
    .detail-title {
        font-size: 1.75rem;
    }
    
    .detail-summary {
        font-size: 1rem;
    }
}

@media (max-width: 768px) {
    .news-detail-article {
        padding: 1.5rem 1.25rem 0.75rem; /* Reducir padding inferior en móvil */
    }
    
    .news-detail-header {
        padding: 1rem;
    }
    
    .detail-title {
        font-size: 1.5rem;
    }
    
    .detail-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .detail-actions {
        flex-direction: column;
        padding-top: 1rem; /* Reducir en móvil */
        padding-bottom: 0.5rem;
    }
    
    .detail-actions .read-more-btn {
        width: 100%;
        justify-content: center;
    }
    
    .related-news-badge {
        font-size: 0.625rem;
        padding: 0.375rem 0.75rem;
    }
    
    /* Tarjetas relacionadas más compactas en mobile */
    .related-news-individual .news-card-body {
        padding: 0.875rem 1rem;
    }
    
    .similarity-badges {
        margin-top: 0.5rem;
    }
    
    /* Reducir gap en móvil */
    .news-content .container.detail-view-active {
        gap: 1rem;
    }
}

/* ============================================
   DARK MODE SUPPORT
   ============================================ */

@media (prefers-color-scheme: dark) {
    .news-detail-container {
        background: #2a2a2a;
    }
    
    .news-detail-header {
        background: #1a1a1a;
        border-bottom-color: #4a4a4a;
    }
    
    .detail-title {
        color: #ecf0f1;
    }
    
    .detail-summary {
        color: #bdc3c7;
    }
    
    .detail-date {
        color: #95a5a6;
    }
    
    .detail-actions {
        border-top-color: #4a4a4a;
    }
    
    .related-news-individual {
        background: #2a2a2a;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    .news-detail-header,
    .detail-actions,
    .similarity-badges,
    .related-news-badge {
        display: none;
    }
    
    .news-detail-article {
        padding: 0;
    }
    
    .news-detail-container {
        box-shadow: none;
        border: 1px solid #ddd;
    }
    
    .related-news-individual {
        page-break-inside: avoid;
    }
}

/* ============================================
   ANIMACIONES
   ============================================ */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.related-news-individual {
    animation: fadeIn 0.4s ease-out;
}

/* ============================================
   ACCESIBILIDAD
   ============================================ */

.detail-actions a:focus,
.close-detail-btn:focus {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
}

.similarity-badge:focus {
    outline: 2px solid white;
    outline-offset: 2px;
}