/* ─── Listado de noticias ─────────────────────────────────────────────── */

.news-list-page,
.news-article-page {
    max-width: 960px;
    margin: 40px auto;
    padding: 20px;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 10px;
    color: #fff;
}

/* El listado es una rejilla de tarjetas: aprovecha todo el ancho disponible
   entre los anuncios laterales. El detalle se queda en 960px para que la
   línea de texto no sea demasiado larga y se lea cómoda. */
.news-list-page {
    max-width: 1140px;
}

.news-page-title {
    width: 100%;
    text-align: center;
    color: var(--one-piece-yellow);
    font-family: 'Pirata One', cursive;
}

.news-intro {
    margin-bottom: 30px;
    opacity: 0.85;
    line-height: 1.6;
    text-align: center;
}

.news-empty {
    text-align: center;
    opacity: 0.8;
    padding: 40px 0;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 20px;
}

/* Tablet: 2 por fila. (Móvil: 1 por fila, en el media query de <=600px.) */
@media (max-width: 900px) {
    .news-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.news-card {
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    overflow: hidden;
    color: #fff;
    text-decoration: none;
    transition: transform 0.15s, border-color 0.15s;
}

.news-card:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 215, 0, 0.4);
}

.news-card-cover {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #111;
}

.news-card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.news-cover-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e9dcc3, #d8c39f);
}

.news-cover-placeholder img {
    width: 34%;
    height: auto;
    opacity: 0.9;
}

.news-card-body {
    padding: 14px 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.news-card-date,
.news-article-date {
    font-size: 0.8rem;
    opacity: 0.65;
}

.news-card-title {
    font-family: 'Pirata One', cursive;
    font-size: 1.4rem;
    color: var(--one-piece-yellow);
    line-height: 1.25;
}

.news-card-excerpt {
    font-size: 0.92rem;
    opacity: 0.85;
    line-height: 1.5;
    flex: 1;
}

.news-card-tags,
.news-article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.news-tag-chip {
    font-size: 0.75rem;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(255, 215, 0, 0.12);
    border: 1px solid rgba(255, 215, 0, 0.3);
    color: var(--one-piece-yellow);
    text-transform: lowercase;
}

.news-card-readmore {
    margin-top: auto;
    font-weight: 600;
    color: var(--one-piece-yellow);
    font-size: 0.88rem;
}

.news-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 36px;
}

.news-page-link {
    color: var(--one-piece-yellow);
    font-weight: 600;
    text-decoration: none;
}

.news-page-link:hover {
    text-decoration: underline;
}

.news-page-current {
    opacity: 0.75;
    font-size: 0.9rem;
}

/* ─── Detalle de noticia ──────────────────────────────────────────────── */

.news-cta {
    text-align: center;
    margin: 10px 0 20px;
}

.news-cta--top {
    text-align: left;
}

.news-cta a {
    color: var(--one-piece-yellow);
    font-weight: 600;
    text-decoration: none;
}

.news-cta a:hover {
    text-decoration: underline;
}

.news-article-cover {
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
    max-height: 420px;
}

.news-article-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.news-article-title {
    font-family: 'Pirata One', cursive;
    color: var(--one-piece-yellow);
    font-size: 2.2rem;
    line-height: 1.2;
    margin-bottom: 8px;
}

.news-article-date {
    display: block;
    margin-bottom: 12px;
}

.news-article-tags {
    margin-bottom: 16px;
}

.news-fallback-notice {
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 0.88rem;
    opacity: 0.9;
    margin-bottom: 20px;
}

.news-body {
    line-height: 1.7;
    font-size: 1.02rem;
    /* contiene las imágenes con float (news-img-pos-left/right) para que el
       fondo/borde de .news-list-page no colapse por debajo de ellas */
    overflow: auto;
}

.news-body p {
    margin: 0 0 16px;
}

.news-body h2,
.news-body h3 {
    color: var(--one-piece-yellow);
    margin: 28px 0 12px;
}

.news-body a {
    color: var(--one-piece-yellow);
    text-decoration: underline;
}

.news-body blockquote {
    border-left: 3px solid var(--one-piece-yellow);
    margin: 16px 0;
    padding: 4px 0 4px 16px;
    opacity: 0.9;
    font-style: italic;
}

.news-body ul,
.news-body ol {
    margin: 0 0 16px;
    padding-left: 28px;
}

.news-body img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 16px 0;
    display: block;
}

/* Vídeo incrustado (YouTube/Vimeo): iframe .ql-video emitido por el editor,
   servido responsive en 16:9. */
.news-body .ql-video {
    display: block;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
    border-radius: 8px;
    margin: 20px 0;
}

/* Línea divisoria (<hr>) para separar secciones del artículo. */
.news-body hr {
    border: none;
    border-top: 1px solid rgba(255, 215, 0, 0.3);
    margin: 28px 0;
}

/* Quill alignment/indent classes, preserved by HtmlSanitizer */
.news-body .ql-align-center { text-align: center; }
.news-body .ql-align-right { text-align: right; }
.news-body .ql-align-justify { text-align: justify; }
.news-body .ql-indent-1 { padding-left: 24px; }
.news-body .ql-indent-2 { padding-left: 48px; }
.news-body .ql-indent-3 { padding-left: 72px; }
.news-body .ql-indent-4 { padding-left: 96px; }

/* Tamaño/posición de imágenes del cuerpo, aplicados desde el editor como
   atributos DIRECTOS del <img> ("imgpos"/"imgwidth"/"imgwrap" de un blot
   "image" de Quill extendido — ver bitacora-noticias.js). Nada de <span>
   envolvente: una versión anterior sí envolvía en un <span> vía formatos de
   ámbito INLINE, pero al ser formatos de rango de texto, escribir justo al
   lado de la imagen hacía que Quill extendiera el formato al texto nuevo
   (igual que la negrita), metiéndolo dentro del mismo contenedor flotado.
   Como atributos del propio blot embed no pueden "sangrar" a texto
   adyacente. Como es una clase real en el propio <img> (no un selector de
   atributo compartido), ya tiene más especificidad que la regla base
   ".news-body img" de arriba sin necesitar ningún truco. */

/* Centro SIEMPRE centrado, "Texto al lado" no tiene efecto aquí (float no
   aplica a un elemento centrado). */
.news-body img.news-img-pos-center {
    display: block;
    float: none;
    margin: 16px auto;
}

/* Izq./Der. por defecto ("Texto al lado" desactivado): en su propia línea,
   sin flotar, pegada al lado correspondiente. */
.news-body img.news-img-pos-left:not(.news-img-wrap-on) {
    display: block;
    float: none;
    margin: 16px auto 16px 0;
}

.news-body img.news-img-pos-right:not(.news-img-wrap-on) {
    display: block;
    float: none;
    margin: 16px 0 16px auto;
}

/* "Texto al lado" activado (clase "news-img-wrap-on"): flota y el texto
   envuelve. Por defecto flota a la IZQUIERDA — también sin ninguna posición
   explícita elegida, para que el checkbox funcione por sí solo y no dependa
   de haber tocado antes Izq./Der. Se excluye Centro a propósito (arriba
   queda siempre centrado, el checkbox no tiene efecto ahí) y Der. tiene su
   propia regla que gana por especificidad. */
.news-body img.news-img-wrap-on:not(.news-img-pos-right):not(.news-img-pos-center) {
    float: left;
    margin: 4px 20px 12px 0;
}

.news-body img.news-img-wrap-on.news-img-pos-right {
    float: right;
    margin: 4px 0 12px 20px;
}

/* Flotada sin tamaño explícito (slider no tocado): que no ocupe todo el ancho,
   si no el texto no tiene sitio real para envolver. */
.news-body img.news-img-wrap-on:not(.news-img-pos-right):not(.news-img-pos-center):not([style*="width"]),
.news-body img.news-img-wrap-on.news-img-pos-right:not([style*="width"]) {
    width: 45%;
}

@media (max-width: 600px) {
    .news-list-page,
    .news-article-page {
        margin: 20px 10px;
        padding: 16px;
    }

    .news-grid {
        grid-template-columns: 1fr;
    }

    .news-article-title {
        font-size: 1.7rem;
    }
}