/* ==========================================================================
   SUBACABUR — modulo publico de NOTICIAS.

   Se carga DESPUES de subacabur.css y reutiliza sus variables (--suba-*): la
   paleta del brief vive alli y aqui no se redefine ni un color suelto.
     azul marino #041B3B · azul medio #0F3A6B · dorado #C8A44D (del logo)
     blanco       #FFFFFF · gris claro  #F5F5F5

   MOVIL PRIMERO: todo el archivo describe la pantalla estrecha y dos consultas
   de medios (48rem y 64rem) van anadiendo columnas.

   NINGUNA regla de este archivo se puede mover a un atributo style=""
   ni a una etiqueta <style> sin nonce: la CSP real prohibe 'unsafe-inline'.

   La seccion «Cuerpo del articulo» estiliza HTML que escribio un redactor y que
   Sanitizer::html() ya redujo a la lista blanca del nucleo. Por eso los
   selectores se declaran uno por uno bajo .not-articulo__cuerpo: solo pueden
   llegar esas etiquetas y ninguna otra.
   ========================================================================== */

:root {
    --not-radio: 12px;
    --not-radio-corto: 8px;
    --not-sombra: 0 1px 2px rgba(4, 27, 59, .06), 0 10px 30px rgba(4, 27, 59, .09);
    --not-sombra-alta: 0 2px 6px rgba(4, 27, 59, .10), 0 18px 44px rgba(4, 27, 59, .16);
    --not-transicion: 160ms ease;

    --not-proporcion: 3 / 2;
    --not-lectura: 46rem;
}

/* --- Contenedor de lectura ------------------------------------------------ */

/* Un artículo se lee mejor en columna estrecha: 65-75 caracteres por línea. */
.suba-contenedor--estrecho {
    max-width: var(--not-lectura);
}

/* --- Ruta de navegacion --------------------------------------------------- */

.not-migas {
    background: var(--suba-blanco);
    border-bottom: 1px solid var(--suba-borde);
    font-size: .86rem;
}

.not-migas__lista {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .5rem;
    margin: 0;
    padding-block: .7rem;
    padding-inline: 0;
    list-style: none;
    color: var(--suba-tinta-tenue);
}

.not-migas__elemento + .not-migas__elemento::before {
    content: "/";
    margin-right: .5rem;
    color: var(--suba-borde);
}

.not-migas__elemento a {
    color: var(--suba-verde-medio);
    text-decoration: none;
}

.not-migas__elemento a:hover,
.not-migas__elemento a:focus-visible {
    text-decoration: underline;
}

/* --- Cabecera del listado ------------------------------------------------- */

.not-cabecera {
    background: linear-gradient(150deg, var(--suba-verde-oscuro), var(--suba-verde-medio));
    color: var(--suba-blanco);
    padding-block: 2.75rem;
}

.not-cabecera__antetitulo {
    margin: 0 0 .4rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--suba-dorado);
}

.not-cabecera__titulo {
    margin: 0 0 .6rem;
    font-size: clamp(1.7rem, 4vw, 2.5rem);
    line-height: 1.15;
}

.not-cabecera__bajada {
    margin: 0;
    max-width: 46rem;
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .88);
}

/* --- Secciones ------------------------------------------------------------ */

.not-seccion { padding-block: 2.25rem; }

.not-seccion--relacionadas {
    background: var(--suba-gris-claro);
    border-top: 1px solid var(--suba-borde);
}

.not-seccion__titulo {
    margin: 0 0 1.2rem;
    font-size: 1.35rem;
    color: var(--suba-verde-oscuro);
}

.not-resultados__recuento {
    margin: 0 0 1.1rem;
    font-size: .9rem;
    color: var(--suba-tinta-tenue);
}

/* --- Rejilla de tarjetas -------------------------------------------------- */

.not-rejilla {
    display: grid;
    gap: 1.2rem;
    grid-template-columns: 1fr;
}

.not-tarjeta {
    background: var(--suba-blanco);
    border: 1px solid var(--suba-borde);
    border-radius: var(--not-radio);
    box-shadow: var(--not-sombra);
    overflow: hidden;
    transition: transform var(--not-transicion), box-shadow var(--not-transicion);
}

.not-tarjeta:hover,
.not-tarjeta:focus-within {
    transform: translateY(-2px);
    box-shadow: var(--not-sombra-alta);
}

.not-tarjeta__enlace {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.not-tarjeta__marco {
    position: relative;
    aspect-ratio: var(--not-proporcion);
    background: var(--suba-gris-claro);
    overflow: hidden;
}

.not-tarjeta__imagen {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Relleno de la noticia sin portada: la inicial del titular sobre la paleta. */
.not-tarjeta__relleno {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--suba-blanco);
    background: linear-gradient(150deg, var(--suba-verde-oscuro), var(--suba-verde-medio));
}

.not-tarjeta__cuerpo {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    flex: 1 1 auto;
    padding: 1rem 1.1rem 1.2rem;
}

.not-tarjeta__meta {
    margin: 0;
    font-size: .78rem;
    letter-spacing: .02em;
    color: var(--suba-tinta-tenue);
}

.not-tarjeta__autor { color: var(--suba-verde-medio); }

.not-tarjeta__titulo {
    margin: 0;
    font-size: 1.08rem;
    line-height: 1.35;
    color: var(--suba-verde-oscuro);
}

.not-tarjeta__resumen {
    margin: 0;
    font-size: .92rem;
    line-height: 1.55;
    color: var(--suba-tinta);
}

.not-tarjeta__mas {
    margin-top: auto;
    padding-top: .4rem;
    font-size: .84rem;
    font-weight: 700;
    color: var(--suba-verde-medio);
}

.not-tarjeta__enlace:hover .not-tarjeta__mas,
.not-tarjeta__enlace:focus-visible .not-tarjeta__mas {
    text-decoration: underline;
}

/* --- Listado vacio -------------------------------------------------------- */

.not-vacio {
    padding: 2.5rem 1.25rem;
    text-align: center;
    background: var(--suba-blanco);
    border: 1px dashed var(--suba-borde);
    border-radius: var(--not-radio);
}

.not-vacio__titulo {
    margin: 0 0 .5rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--suba-verde-oscuro);
}

.not-vacio__texto {
    margin: 0 auto 1.2rem;
    max-width: 34rem;
    line-height: 1.6;
    color: var(--suba-tinta-tenue);
}

.not-vacio__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    justify-content: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* --- Botones -------------------------------------------------------------- */

.not-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .6rem 1.1rem;
    font: inherit;
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--suba-verde-oscuro);
    background: var(--suba-blanco);
    border: 1px solid var(--suba-borde);
    border-radius: 999px;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--not-transicion), border-color var(--not-transicion);
}

.not-boton:hover,
.not-boton:focus-visible {
    background: var(--suba-gris-claro);
    border-color: var(--suba-verde-medio);
    color: var(--suba-verde-oscuro);
    text-decoration: none;
}

.not-boton--principal {
    color: var(--suba-blanco);
    background: var(--suba-verde-oscuro);
    border-color: var(--suba-verde-oscuro);
}

.not-boton--principal:hover,
.not-boton--principal:focus-visible {
    color: var(--suba-blanco);
    background: var(--suba-verde-medio);
    border-color: var(--suba-verde-medio);
}

.not-boton--tenue { color: var(--suba-verde-medio); }

/* --- Articulo ------------------------------------------------------------- */

.not-articulo__cabecera { padding-block: 2rem 1.4rem; }

.not-articulo__titulo {
    margin: 0 0 .7rem;
    font-size: clamp(1.6rem, 4.2vw, 2.4rem);
    line-height: 1.2;
    color: var(--suba-verde-oscuro);
}

.not-articulo__firma {
    margin: 0 0 1rem;
    font-size: .88rem;
    color: var(--suba-tinta-tenue);
}

.not-articulo__autor { color: var(--suba-verde-medio); }

.not-articulo__entradilla {
    margin: 0;
    padding-left: .9rem;
    border-left: 3px solid var(--suba-dorado);
    font-size: 1.08rem;
    line-height: 1.6;
    color: var(--suba-tinta);
}

.not-articulo__portada { margin: 0 0 1.8rem; }

.not-articulo__imagen {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--not-radio);
    background: var(--suba-gris-claro);
}

.not-articulo__pendiente {
    margin: 0;
    padding: 1.5rem;
    text-align: center;
    color: var(--suba-tinta-tenue);
    background: var(--suba-gris-claro);
    border-radius: var(--not-radio);
}

.not-articulo__pie {
    margin: 2rem 0 2.5rem;
    text-align: center;
}

/* --- Cuerpo del articulo -------------------------------------------------
   Solo llegan aqui las etiquetas de Sanitizer::ALLOWED_TAGS: cualquier otra se
   desenvolvio al guardar y su texto quedo suelto en el parrafo.
   ------------------------------------------------------------------------- */

.not-articulo__cuerpo {
    font-size: 1.02rem;
    line-height: 1.75;
    color: var(--suba-tinta);
    overflow-wrap: break-word;
}

.not-articulo__cuerpo > :first-child { margin-top: 0; }
.not-articulo__cuerpo > :last-child { margin-bottom: 0; }

.not-articulo__cuerpo p { margin: 0 0 1.15rem; }

.not-articulo__cuerpo h2,
.not-articulo__cuerpo h3,
.not-articulo__cuerpo h4 {
    margin: 2rem 0 .8rem;
    line-height: 1.25;
    color: var(--suba-verde-oscuro);
}

.not-articulo__cuerpo h2 { font-size: 1.45rem; }
.not-articulo__cuerpo h3 { font-size: 1.22rem; }
.not-articulo__cuerpo h4 { font-size: 1.08rem; }

.not-articulo__cuerpo strong,
.not-articulo__cuerpo b { font-weight: 700; }

.not-articulo__cuerpo a {
    color: var(--suba-verde-medio);
    text-decoration: underline;
    text-underline-offset: .15em;
}

.not-articulo__cuerpo a:hover,
.not-articulo__cuerpo a:focus-visible { color: var(--suba-verde-oscuro); }

.not-articulo__cuerpo ul,
.not-articulo__cuerpo ol {
    margin: 0 0 1.15rem;
    padding-left: 1.4rem;
}

.not-articulo__cuerpo li { margin-bottom: .4rem; }

.not-articulo__cuerpo blockquote {
    margin: 1.6rem 0;
    padding: .9rem 1.1rem;
    background: var(--suba-gris-claro);
    border-left: 4px solid var(--suba-dorado);
    border-radius: 0 var(--not-radio-corto) var(--not-radio-corto) 0;
    font-size: 1.05rem;
    font-style: italic;
    color: var(--suba-tinta);
}

.not-articulo__cuerpo blockquote p:last-child { margin-bottom: 0; }

.not-articulo__cuerpo hr {
    margin: 2rem 0;
    border: 0;
    border-top: 1px solid var(--suba-borde);
}

.not-articulo__cuerpo figure { margin: 1.6rem 0; }

.not-articulo__cuerpo img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: var(--not-radio-corto);
}

.not-articulo__cuerpo figcaption {
    margin-top: .5rem;
    font-size: .84rem;
    color: var(--suba-tinta-tenue);
}

/* Una tabla ancha se desplaza DENTRO de su envoltorio; el cuerpo de la pagina
   nunca se desplaza en horizontal. */
.not-articulo__cuerpo table {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 1.6rem 0;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: .94rem;
}

.not-articulo__cuerpo th,
.not-articulo__cuerpo td {
    padding: .55rem .7rem;
    text-align: left;
    border-bottom: 1px solid var(--suba-borde);
}

.not-articulo__cuerpo thead th {
    background: var(--suba-gris-claro);
    color: var(--suba-verde-oscuro);
    font-weight: 700;
}

/* --- Compartir ------------------------------------------------------------ */

.not-compartir {
    margin-top: 2.2rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--suba-borde);
}

.not-compartir__rotulo {
    margin: 0 0 .6rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--suba-tinta-tenue);
}

.not-compartir__lista {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.not-compartir__enlace {
    display: inline-flex;
    align-items: center;
    padding: .45rem .9rem;
    font-size: .84rem;
    font-weight: 600;
    color: var(--suba-verde-oscuro);
    background: var(--suba-blanco);
    border: 1px solid var(--suba-borde);
    border-radius: 999px;
    text-decoration: none;
    transition: background var(--not-transicion), border-color var(--not-transicion);
}

.not-compartir__enlace:hover,
.not-compartir__enlace:focus-visible {
    background: var(--suba-gris-claro);
    border-color: var(--suba-verde-medio);
    text-decoration: none;
}

.not-compartir__enlace--whatsapp { border-color: rgba(31, 138, 70, .45); }
.not-compartir__enlace--facebook { border-color: rgba(24, 119, 242, .35); }
.not-compartir__enlace--telegram { border-color: rgba(41, 161, 222, .35); }

/* --- Paginacion ----------------------------------------------------------- */

.not-paginacion {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    justify-content: center;
    margin-top: 2rem;
}

.not-paginacion__lista {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.not-paginacion__paso,
.not-paginacion__numero {
    display: inline-block;
    min-width: 2.4rem;
    padding: .45rem .75rem;
    font-size: .88rem;
    text-align: center;
    color: var(--suba-verde-oscuro);
    background: var(--suba-blanco);
    border: 1px solid var(--suba-borde);
    border-radius: var(--not-radio-corto);
    text-decoration: none;
}

.not-paginacion__paso:hover,
.not-paginacion__numero:hover,
.not-paginacion__paso:focus-visible,
.not-paginacion__numero:focus-visible {
    background: var(--suba-gris-claro);
    border-color: var(--suba-verde-medio);
    text-decoration: none;
}

.not-paginacion__numero.es-vigente {
    color: var(--suba-blanco);
    background: var(--suba-verde-oscuro);
    border-color: var(--suba-verde-oscuro);
}

.not-paginacion__paso.es-inerte {
    color: var(--suba-tinta-tenue);
    background: var(--suba-gris-claro);
    opacity: .55;
}

.not-paginacion__resumen {
    margin: .8rem 0 0;
    text-align: center;
    font-size: .84rem;
    color: var(--suba-tinta-tenue);
}

/* --- Pantallas mayores ---------------------------------------------------- */

@media (min-width: 48em) {
    .not-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .not-cabecera { padding-block: 3.25rem; }
    .not-articulo__cabecera { padding-block: 2.75rem 1.6rem; }
}

@media (min-width: 64em) {
    .not-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .not-articulo__cuerpo { font-size: 1.08rem; }
}

/* Quien pide menos movimiento no recibe el desplazamiento de las tarjetas. */
@media (prefers-reduced-motion: reduce) {
    .not-tarjeta,
    .not-boton,
    .not-compartir__enlace { transition: none; }

    .not-tarjeta:hover,
    .not-tarjeta:focus-within { transform: none; }
}