@charset "UTF-8";
@import url('base.css');
@import url('./modules/layout.css');
@import url('./modules/fonts.css');
@import url('./modules/constantes.css');

:root{
    --max-width:900px;
    --gap:20px;
    --title-color:var(--color-primary,#0b66c3);
    --text:#222;
    --muted:#666;
    --radius:10px;
    --bg:#fff;
}

.detalle-noticia{
    max-width: var(--max-width);
    margin: 9rem auto 0 auto;
    padding: 1rem;
    box-sizing: border-box;
    color: var(--text);
}

/* volver al listado */
.detalle-noticia .volver {
    display: inline-block;
    margin-bottom: 1rem;
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
}

.detalle-noticia .volver:hover { 
    text-decoration: underline; 
    color: var(--title-color); 
}

/* título */
.detalle-noticia h1{
    margin: 0 0 1rem;
    font-size: 2rem;
    color: var(--title-color);
    line-height: 1.1;
    /* altura fija aproximada (2 líneas). Ajusta si necesitas más/menos. */
    overflow: hidden;
}

/* imagen principal centrada y responsiva */
.detalle-noticia .detalle-thumb{
    display:flex;
    justify-content:center;
    margin-bottom: 1.25rem;
}
.detalle-noticia .detalle-thumb img{
    width:100%;
    max-width:100%;
    height:auto;
    border-radius: var(--radius);
    object-fit: cover;
    box-shadow: 0 6px 20px rgba(16,24,40,0.06);
}

/* cuerpo del contenido */
.detalle-noticia .detalle-contenido{
    background: transparent;
    color: var(--text);
    font-size: 1rem;
    line-height: 1.75;
    word-wrap: break-word;
}

/* párrafos, listas, imágenes internas y enlaces */
.detalle-noticia .detalle-contenido p{ 
    margin: 0 0 1rem; 
}

.detalle-noticia .detalle-contenido ul, .detalle-noticia .detalle-contenido ol{ 
    margin: 0 0 1rem 1.2rem; 
}

.detalle-noticia .detalle-contenido img{ 
    max-width:100%; 
    height:auto; 
    display:block; 
    margin: 0.75rem 0; 
    border-radius:6px; 
}

.detalle-noticia .detalle-contenido a{ 
    color: var(--title-color); 
    text-decoration: underline; 
}


/* Responsive */
@media (max-width: 900px){
    .detalle-noticia{ 
        margin: 2.5rem 1rem; 
        padding: 0; 
    }
    .detalle-noticia h1{ 
        font-size: 1.6rem; 
        -webkit-line-clamp:2; 
        max-height:3.6rem; 
    }
}
@media (max-width: 480px){
    .detalle-noticia h1{ 
        font-size: 1.4rem; 
        -webkit-line-clamp:2; 
        max-height:3.2rem; 
    }
    .detalle-noticia .detalle-contenido{ 
        font-size: 0.98rem; 
        line-height:1.6; 
    }
}