/* Componente: Resumen — adelanto en la portada, sobre el rojo. */

.resumen {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: var(--p-panel);
    border: 1px solid var(--p-borde);
    border-radius: var(--radio-sm);
    padding: 1.15rem 1.25rem;
    min-height: 0;   /* sin esto el contenido impide que la tarjeta encoja */
}

.resumen-bloque {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.resumen-bloque + .resumen-bloque {
    padding-top: 0.9rem;
    border-top: 1px solid var(--p-linea);
}

.resumen-cabecera {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}
.resumen-titulo {
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--p-acento);
}
.resumen-mas {
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--p-acento);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s;
}
.resumen-mas:hover { color: var(--p-tinta); }

.resumen-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }

.resumen-item a,
.resumen-item-cuerpo {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    text-decoration: none;
    color: inherit;
}

.resumen-miniatura {
    width: 2.75rem;
    height: 2.75rem;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 4px;
    background: var(--p-panel-alto);
}

.resumen-item-texto {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}
.resumen-item-titulo {
    font-size: var(--t-sm);
    line-height: 1.35;
    color: var(--p-tinta);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.resumen-item a:hover .resumen-item-titulo { text-decoration: underline; }
.resumen-item-pie {
    font-size: var(--t-xs);
    color: var(--p-tinta-tenue);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* La fecha, algo mas marcada que el texto que la acompana.
   Comparte linea con la sumilla y sin esto las dos cosas se leian como una sola
   frase; con un poco mas de peso y menos claro, el ojo la separa sola. */
.resumen-item-fecha {
    font-weight: 600;
    color: var(--p-tinta-suave, var(--p-tinta-tenue));
    white-space: nowrap;
}

.resumen-espera,
.resumen-vacio {
    font-size: var(--t-sm);
    color: var(--p-tinta-debil);
    font-style: italic;
}

/* ---------- filas de espera ---------- */
.resumen-lista[data-cargando] .resumen-miniatura.esq {
    width: 2.75rem;
    height: 2.75rem;
}
.resumen-lista[data-cargando] .resumen-item-titulo.esq { width: 100%; }


@media (min-width: 901px) {
    .portada-texto .resumen-lista {
        flex: 1;
        min-height: 0;
        gap: 0.5rem;
    }

    .portada-texto .resumen-item {
        flex: 0 0 auto;
        display: flex;
    }
    .portada-texto .resumen-item a,
    .portada-texto .resumen-item-cuerpo {
        flex: 1;
        align-items: center;   /* la foto y el texto, centrados entre si */
    }

    .portada-texto .resumen-miniatura,
    .portada-texto .resumen-lista[data-cargando] .resumen-miniatura.esq {
        width: 2.75rem;
        height: 2.75rem;
        aspect-ratio: auto;
        flex-shrink: 0;
        object-fit: cover;
    }
}

.portada-texto .resumen-item-titulo {
    font-size: var(--t-xs);
    line-height: 1.35;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}
.portada-texto .resumen-item-pie { font-size: 0.625rem; }
.portada-texto .resumen-cabecera { margin-bottom: 0.4rem; }
.portada-texto .resumen-titulo { font-size: var(--t-sm); }

/* ---------- pantallas bajas ----------
 *
 * Aqui habia dos reglas que escondian filas segun el alto de la ventana: de
 * 860 px para abajo se caia la tercera, y de 700 para abajo tambien la segunda.
 * En un portatil de 1366x768 al navegador le quedan unos 640 px utiles, asi que
 * la portada acababa enseñando UNA norma y UNA noticia.
 *
 * Medido sobre la portada de verdad a esa altura, no calculado: cada lista
 * dispone de 192 px y las tres filas ocupan 153 y 163. Sobran casi 30 px. Es
 * decir, el recorte no estaba ahorrando nada --y no podia ahorrarlo: el alto
 * de la tarjeta no lo manda la ventana, lo manda la columna de la derecha
 * (buscador, clima e ICEN), que es mas alta. Esconder filas solo quitaba
 * contenido a cambio de cero pixeles.
 *
 * Asi que las tres se quedan. Lo que sigue son dos redes, no recortes.
 *
 * Y todo va dentro de min-width: 901px a proposito. Por debajo de eso la
 * portada se apila y se desplaza, la tarjeta ya no compite por el alto, y las
 * reglas viejas --que no llevaban anchura-- dejaban a un telefono de 360x640
 * con una sola fila sin ninguna necesidad. */

@media (min-width: 901px) {
    /* Red 1: pase lo que pase, la lista no se derrama fuera de la tarjeta.
     *
     * El caso malo existe y esta medido: si el clima y el ICEN faltan a la vez
     * --fallo de la API del tiempo, por ejemplo-- la columna derecha encoge, la
     * tarjeta baja a 158 px y a una de las dos listas le faltan 5. Sin esto
     * esos 5 px se pintan por encima del borde de la tarjeta, que se lee como
     * un defecto. Con esto se recorta el faldon de la ultima fila --la sumilla
     * y la fecha, que es lo accesorio: el titular va arriba y se lee entero--.
     *
     * No es lo mismo que esconder la fila: la tercera noticia sigue estando,
     * con su titular y su enlace. */
    .portada-texto .resumen-lista { overflow: hidden; }
}

/* Red 2: en la franja de los portatiles se aprieta el interlineado de la lista
 * lo justo para que ese caso malo deje de serlo.
 *
 * De 0,5 a 0,35 rem son 4,8 px recuperados entre las dos separaciones, que
 * cubren los 5 que faltaban. Es un ajuste que no se ve: las filas siguen
 * separadas, solo que un pelo menos. */
@media (min-width: 901px) and (max-height: 860px) {
    .portada-texto .resumen-lista { gap: 0.35rem; }
}

/* Y cuando la pantalla es de verdad baja, se APRIETA la fila en vez de
 * borrarla. Lo que se cede va de menos a mas util: primero la sumilla y la
 * fecha --el titular ya dice de que va--, luego una linea del titular, y por
 * ultimo la miniatura. Una fila pasa de unos 49 px a unos 26, con lo que las
 * tres caben en lo que antes ocupaban dos.
 *
 * La miniatura del esqueleto encoge con la de verdad: si no, la seccion
 * reservaria 44 px y al llegar los datos daria el salto que el esqueleto
 * existe justamente para evitar. */
@media (min-width: 901px) and (max-height: 620px) {
    .portada-texto .resumen { padding: 0.85rem 1rem; gap: 0.7rem; }
    .portada-texto .resumen-bloque + .resumen-bloque { padding-top: 0.6rem; }
    .portada-texto .resumen-cabecera { margin-bottom: 0.25rem; }
    .portada-texto .resumen-lista { gap: 0.3rem; }

    .portada-texto .resumen-item-pie { display: none; }

    .portada-texto .resumen-item-titulo {
        -webkit-line-clamp: 1;
        line-clamp: 1;
    }

    .portada-texto .resumen-miniatura,
    .portada-texto .resumen-lista[data-cargando] .resumen-miniatura.esq {
        width: 2rem;
        height: 2rem;
    }
}