/* Detalle de Noticia */

/* Tipografia para todo el articulo (titulo, meta, resumen, cuerpo), en
   Helvetica Neue — misma logica que .noticias-section en noticias.css:
   los controles de interfaz (botones, el formulario lateral) ya
   declaran su propia font-family o son inputs/botones nativos que no
   heredan. */
.noticia-detalle-section {
    /* Mismo tono que .noticias-section en el listado, para que el detalle
       de la noticia use el mismo fondo y no quede en blanco puro (sin
       separacion de las tarjetas blancas de foto/resumen/formulario). */
    background: var(--color-light-gray);
    font-family: var(--font-noticias);
}

.noticia-detalle-section h1,
.noticia-detalle-section h2,
.noticia-detalle-section h3 {
    font-family: var(--font-noticias);
}

.noticia-detalle-layout {
    display: grid;
    grid-template-columns: minmax(0, 800px) 320px;
    justify-content: center;
    align-items: start;
    gap: 56px;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 40px;
}

.noticia-detalle-container {
    width: 100%;
    max-width: 800px;
    padding: calc(var(--header-height) + 48px) 0 90px;
}

/* Mismo mecanismo que .noticias-cta-slot en noticias.css: un contenedor
   sticky + flex en columna, para que el formulario quede centrado en la
   pantalla mientras se hace scroll sin poder quedar tapado bajo el header
   en articulos cortos (ver el comentario largo alla). */
.noticia-detalle-sidebar {
    /* Mismo cambio que .noticias-cta-slot en noticias.css: un sticky
       simple en vez de centrar el formulario en un contenedor casi del
       alto de la pantalla, para que quede alineado arriba junto con el
       articulo en vez de verse corrido hacia abajo. */
    position: sticky;
    top: calc(var(--header-height) + 24px);
}

.noticia-detalle-head {
    /* El body del sitio usa text-align:justify por defecto; aqui se
       corta esa herencia porque en titulos y bloques cortos el justify
       deja espacios muy irregulares entre palabras. */
    text-align: left;
    margin-bottom: 44px;
}

.noticia-detalle-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 17px;
    color: var(--color-medium-gray);
    margin: 0 0 14px;
}

.noticia-detalle-breadcrumb a {
    color: var(--color-medium-gray);
    transition: color 150ms ease;
}

.noticia-detalle-breadcrumb a:hover {
    color: var(--color-primary);
}

.noticia-detalle-head h1 {
    font-size: clamp(1.9rem, 3.2vw, 2.65rem);
    line-height: 1.15;
    text-wrap: balance;
    margin: 0 0 18px;
}

.noticia-detalle-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    padding-bottom: 20px;
    margin-bottom: 26px;
    border-bottom: 1px solid rgba(17, 17, 17, 0.1);
}

.noticia-detalle-meta-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.noticia-detalle-meta-acciones {
    display: flex;
    align-items: center;
    gap: 18px;
}

.noticia-detalle-stats {
    display: flex;
    align-items: center;
    gap: 18px;
}

.noticia-detalle-stats .noticia-stat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.88rem;
    color: var(--color-medium-gray);
}

.noticia-detalle-fecha,
.noticia-detalle-lectura {
    font-size: 0.85rem;
    color: var(--color-medium-gray);
}

.noticia-detalle-separador {
    color: rgba(17, 17, 17, 0.25);
}

.noticia-detalle-share {
    position: relative;
    display: flex;
    align-items: center;
}

.noticia-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(17, 17, 17, 0.14);
    border-radius: 999px;
    background: var(--color-white);
    color: var(--color-medium-gray);
    cursor: pointer;
    transition: border-color 150ms ease, color 150ms ease;
}

.noticia-share-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.noticia-share-feedback {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    padding: 6px 12px;
    background: var(--color-dark);
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: 0.75rem;
    white-space: nowrap;
    border-radius: var(--border-radius-sm);
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease;
}

.noticia-share-feedback.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Foto principal + resumen como una sola pieza visual (mismo radio en
   las esquinas compartidas), en vez de dos cajas separadas con un hueco
   entre ellas: el resumen queda "pegado" al pie de la foto. */
.noticia-detalle-media {
    margin: 0 0 26px;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}

.noticia-detalle-portada {
    margin: 0;
}

.noticia-detalle-portada img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

.noticia-detalle-resumen {
    margin: 0;
    padding: 22px 26px;
    border-radius: var(--border-radius-md);
    font-size: 16px;
    font-style: italic;
    line-height: 1.6;
    color: var(--color-dark);
}

.noticia-detalle-resumen--pegada {
    border-radius: 0;
}

.noticia-like-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border: 1px solid rgba(17, 17, 17, 0.14);
    border-radius: 999px;
    background: var(--color-white);
    color: var(--color-medium-gray);
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 150ms ease, color 150ms ease;
}

.noticia-like-btn:hover:not(:disabled) {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.noticia-like-btn.is-liked {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.noticia-like-btn.is-liked svg {
    fill: currentColor;
}

.noticia-like-btn:disabled {
    cursor: default;
}

.noticia-contenido {
    /* El body del sitio usa text-align:justify por defecto; en columnas
       angostas sin guionado eso deja rios de espacio entre palabras. */
    text-align: left;
    font-size: 1.05rem;
    line-height: 2;
    color: #444444;
}

.noticia-contenido p {
    margin-bottom: 26px;
}

.noticia-contenido strong,
.noticia-contenido b {
    font-weight: 700;
}

.noticia-contenido em,
.noticia-contenido i {
    font-style: italic;
}

.noticia-contenido a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.noticia-contenido a:hover {
    color: var(--color-primary-hover);
}

/* Lista de fuentes: contenido curado a mano por el autor en su propio
   campo del panel (no se extrae del cuerpo). Un divisor simple y harto
   espacio arriba la separan del cuerpo del articulo. */
.noticia-fuentes {
    margin-top: 56px;
    padding-top: 28px;
    border-top: 1px solid rgba(17, 17, 17, 0.1);
}

.noticia-fuentes h2 {
    font-size: 1.15rem;
    margin: 0 0 16px;
}

.noticia-fuentes-lista {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.noticia-fuentes-lista li {
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--color-medium-gray);
}

.noticia-fuentes-lista a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.noticia-fuentes-lista a:hover {
    color: var(--color-primary-hover);
}

.noticia-fuentes-texto {
    word-break: break-word;
}

.noticia-fuentes-lista svg {
    flex-shrink: 0;
    opacity: 0.7;
}

/* Todas las imagenes del cuerpo (sola o en galeria) comparten la misma
   proporcion 3:2 recortada con object-fit, para que se vean armonicas
   entre si sin importar el tamaño original de cada foto. */

.noticia-imagen-bloque {
    margin: 32px 0;
}

.noticia-imagen-bloque img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
    border-radius: var(--border-radius-lg);
}

.noticia-galeria {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 32px 0;
}

.noticia-galeria img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
    border-radius: var(--border-radius-md);
}

.noticia-video-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 32px 0;
    background: #000;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}

.noticia-video-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Responsive */

@media (max-width: 1100px) {
    .noticia-detalle-layout {
        grid-template-columns: minmax(0, 800px);
    }

    /* Sin columna al lado, no tiene sentido que quede pegado al centro de
       la pantalla: pasa a ser un bloque normal, apilado bajo el articulo. */
    .noticia-detalle-sidebar {
        position: static;
        height: auto;
        display: block;
        margin-top: 48px;
    }
}

@media (max-width: 700px) {
    .noticia-detalle-layout {
        padding: 0 24px;
    }

    .noticia-detalle-container {
        padding: calc(var(--header-height) + 32px) 0 60px;
    }

    .noticia-detalle-head {
        margin-bottom: 32px;
    }

    .noticia-detalle-media {
        margin-bottom: 20px;
    }

    .noticia-detalle-resumen {
        padding: 18px 20px;
    }

    /* En mobile el acceso al formulario ya lo da el boton flotante
       (ver mobileFabs.html); el bloque apilado aqui seria redundante. */
    .noticia-detalle-sidebar {
        display: none;
    }

    .noticia-imagen-bloque,
    .noticia-galeria {
        margin: 24px 0;
    }

    .noticia-galeria {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}