/* Estilos aislados para la página de Noticias
   Todas las clases comienzan con el prefijo 'news-' para evitar colisiones.
   No se modifican variables globales ni estilos base. */

.news-accordion {
    max-width: 1100px; /* ampliar ancho para mayor lectura */
    margin: 0 auto;
    padding: 8px; /* espaciado interno para respirar */
}

.news-empty {
    padding: 24px;
    color: rgba(255,255,255,0.92);
    text-align: center;
}

.news-item {
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;

    /* ANTES */
    /* background: rgba(6,12,28,0.36); */

    /* DESPUÉS */
    background: rgba(14, 20, 34, 0.94);

    border: 1px solid rgba(102, 240, 255, 0.18);
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.45),
        inset 0 0 0 1px rgba(255,255,255,0.02);
}

.news-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px 20px;
    background: linear-gradient(150deg, rgba(24,40,80,0.18), rgba(42,191,207,1));
    color: rgba(255,255,255,0.95); /* asegurar contraste del texto */
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: 1.08rem;
    gap: 12px;
}

.news-header:focus {
    outline: 3px solid rgba(100,150,255,0.30);
    outline-offset: 3px;
}

.news-title { font-weight: 600; }
.news-meta { font-size: 0.9rem; opacity: 0.86; color: rgba(230,240,255,0.9); }

.news-body {
    padding: 0 20px;
    background: transparent;
    color: rgba(235,240,255,0.95);
    overflow: hidden;
    transition: max-height 320ms ease, padding 240ms ease, color 200ms ease;
    max-height: 0px;
    padding-top: 0;
    padding-bottom: 0;
}

.news-body.news-open {
    padding-top: 14px;
    padding-bottom: 18px;
}

.news-body img { max-width: 100%; height: auto; display: block; }

/* Asegurar que los iframes se adapten dentro del contenedor sin romper layout */
.news-body iframe { max-width: 100%; }

/* Transición suave para el contenido interno */
.news-body > * { transition: opacity 200ms ease; }

/* Hacer que el título ocupe más espacio y sea claramente clickeable */
.news-header .news-title { flex: 1 1 auto; }

/* Responsive: en pantallas pequeñas mantener ancho cómodo */
@media (max-width: 768px) {
    .news-accordion { max-width: 100%; padding: 6px; }
    .news-item { margin-bottom: 10px; }
    .news-header { padding: 12px 14px; font-size: 1rem; }
    .news-body { padding: 0 14px; }
}

/* === Anulaciones específicas para mantener efectos de título pero eliminar el fondo ===
   Estas reglas se aplican solo dentro de la página de noticias gracias a `.news-page`.
   No se tocan pseudo-elementos (::before, ::after) ni `.colecciones-title`. */
/* Noticias: reutiliza colecciones-flag pero SIN caja */
/* Reset visual del título tipo colecciones SOLO en /noticias */
.news-page .colecciones-flag {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;

    /* eliminar efecto vidrio */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    /* quitar forma de tarjeta */
    padding: 0 !important;
    border-radius: 0 !important;

    /* apagar animaciones del flag */
    animation: none !important;

    position: relative;
}

/* Quitar completamente la línea superior (::before) */
.news-page .colecciones-flag::before {
    content: none !important;
}

/* Evitar efectos hover heredados */
.news-page .colecciones-flag:hover {
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    border: none !important;
}

/* Línea inferior elegante */
.news-page .colecciones-flag::after {
    content: "";
    position: absolute;

    left: 10%;
    right: 10%;
    bottom: -6px;

    height: 2px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(214,178,106,0.75),
        transparent
    );

    opacity: 0.85;
    filter: blur(0.4px);
    pointer-events: none;
}