/* Nucleo: AvisosNovedad — el panel de lo recien publicado. */

.novedad-panel {
    position: fixed;
    right: 1rem;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    z-index: 1900;

    display: flex;
    flex-direction: column;
    width: min(22rem, calc(100vw - 2rem));

    /* Por debajo del visor de PDF (2000), a proposito: quien esta leyendo un
       documento a pantalla completa no necesita esto encima. Al cerrarlo, sigue
       ahi. */
}

/* ---------- la cabecera: globo, plegar y cerrar todas ---------- */

.novedad-cabecera {
    display: flex;
    align-items: center;
    gap: 0.4rem;

    padding: 0.35rem 0.5rem;
    margin-bottom: 0.4rem;

    background: var(--tinta);
    color: #fff;
    border-radius: 999px;
    box-shadow: var(--sombra);
}

/* Con una sola tarjeta la cabecera sobra: el globo diria "1", no hay nada que
   plegar, y "cerrar todas" es la misma X que ya lleva la tarjeta. */
.novedad-panel[data-solas="1"] .novedad-cabecera { display: none; }

.novedad-globo {
    flex: 0 0 auto;
    min-width: 1.4rem;
    height: 1.4rem;
    padding: 0 0.35rem;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: var(--marca);
    color: #fff;
    border-radius: 999px;

    font-family: var(--sans);
    font-size: 0.6875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.novedad-cabecera-txt {
    flex: 1 1 auto;
    font-family: var(--sans);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.novedad-accion {
    flex: 0 0 auto;
    border: none;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    border-radius: 999px;
    padding: 0.2rem 0.55rem;

    font-family: var(--sans);
    font-size: 0.6875rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.novedad-accion:hover,
.novedad-accion:focus-visible { background: rgba(255, 255, 255, 0.28); }
.novedad-accion.es-cerrar:hover,
.novedad-accion.es-cerrar:focus-visible { background: var(--marca); }

/* ---------- la lista ---------- */

.novedad-lista {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    /* Desplegada puede tener treinta: que no se coma la pantalla y se pueda
       recorrer. Plegada solo hay una a la vista, asi que esto no estorba. */
    max-height: min(60vh, 32rem);
    overflow-y: auto;

    /* Sitio para la sombra del mazo, que asoma por ARRIBA de la primera. */
    padding-top: 0.6rem;
}

/* ---------- plegada: el mazo ---------- */

/* Solo se ve la ultima. Las demas siguen en el DOM --no se pierde ninguna-- y
   vuelven con "Ver las N". */
.novedad-panel[data-plegado] .novedad-lista {
    overflow: visible;
    cursor: pointer;
}

.novedad-panel[data-plegado] .novedad:not(:last-child) { display: none; }

/* Las hojas de detras, con sombras apiladas en vez de elementos de mentira.
   Cada par es un borde claro sobre un relleno blanco, encogido y subido: de
   lejos se lee como otra tarjeta debajo. Dos como mucho; a partir de ahi lo
   que informa es el globo, no el grosor del mazo. */
.novedad-panel[data-plegado][data-varias="1"] .novedad:last-child {
    box-shadow:
        0 -0.3rem 0 -0.07rem var(--superficie),
        0 -0.3rem 0 0 var(--borde),
        var(--sombra);
}

.novedad-panel[data-plegado][data-varias="2"] .novedad:last-child {
    box-shadow:
        0 -0.3rem 0 -0.07rem var(--superficie),
        0 -0.3rem 0 0 var(--borde),
        0 -0.6rem 0 -0.14rem var(--superficie),
        0 -0.6rem 0 -0.07rem var(--borde),
        var(--sombra);
}

/* ---------- la tarjeta ---------- */

.novedad {
    position: relative;
    padding: 0.7rem 0.85rem 0.75rem;

    background: var(--superficie);
    border: 1px solid var(--borde);
    border-left: 3px solid var(--marca);
    border-radius: var(--radio-sm);
    box-shadow: var(--sombra);

    /* Entra deslizandose desde la derecha. */
    opacity: 0;
    transform: translateX(1.5rem);
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.novedad.puesta { opacity: 1; transform: none; }
.novedad.se-va { opacity: 0; transform: translateX(1.5rem); }

/* El filete de la izquierda distingue el origen de un vistazo, sin leer. */
.novedad.es-noticia { border-left-color: var(--tinta-suave); }
.novedad.es-informe,
.novedad.es-comunicado { border-left-color: var(--ambar); }

.novedad-rotulo {
    display: block;
    /* Hueco para la X, que va flotando a la derecha de esta linea. */
    padding-right: 1.6rem;

    font-family: var(--sans);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--marca-hondo);
    margin-bottom: 0.3rem;
}

.novedad.es-noticia .novedad-rotulo { color: var(--tinta-suave); }
.novedad.es-informe .novedad-rotulo,
.novedad.es-comunicado .novedad-rotulo { color: var(--ambar-hondo); }

.novedad-cuerpo {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
}

.novedad-img {
    flex: 0 0 auto;
    width: 3.25rem;
    height: 3.25rem;
    object-fit: cover;
    border-radius: var(--radio-sm);
    background: var(--fondo);
}

/* Sin esto el texto no se deja encoger y la tarjeta se ensancha hasta
   desbordar. */
.novedad-texto { min-width: 0; }

.novedad-titulo {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;

    font-family: var(--sans);
    font-size: var(--t-sm);
    font-weight: 600;
    line-height: 1.3;
    color: var(--tinta);
    text-decoration: none;
}

a.novedad-titulo:hover,
a.novedad-titulo:focus-visible { color: var(--marca); text-decoration: underline; }

.novedad-sumilla {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;

    margin: 0.25rem 0 0;
    font-size: var(--t-xs);
    line-height: 1.4;
    color: var(--tinta-media);
}

/* ---------- la X de cada tarjeta ---------- */

/* Se veia poco: gris claro, trece pixeles y en una esquina vacia. Ahora tiene
   fondo propio y tinta de verdad, asi que se encuentra sin buscarla, y el area
   de acierto es de 1.6rem aunque el aspa siga siendo pequeña -- en tactil una
   diana de doce pixeles se falla mas de lo que se acierta. */
.novedad-cerrar {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;

    width: 1.6rem;
    height: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid var(--borde);
    background: var(--fondo);
    border-radius: 50%;
    cursor: pointer;
    color: var(--tinta-media);
    font-size: 0.75rem;
    line-height: 1;
    padding: 0;
}

.novedad-cerrar:hover,
.novedad-cerrar:focus-visible {
    background: var(--marca);
    border-color: var(--marca);
    color: #fff;
}

/* ---------- movil ---------- */
@media (max-width: 480px) {
    .novedad-panel {
        right: 0.75rem;
        left: 0.75rem;
        width: auto;
    }
}

/* ---------- quien pide menos movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
    .novedad {
        transition: none;
        opacity: 1;
        transform: none;
    }
    .novedad.se-va { opacity: 0; }
}