/* EMA Metrologistics — sección Noticias. Reutiliza los tokens de site.css
   (--bg, --panel, --line, --text, --muted, --sky, --r-md, --t, --ease):
   así el modo oscuro/claro de la web ya vale para esta sección sin
   duplicar ninguna regla de color. */

.news-card__date{display:block;color:var(--muted);font-size:.85rem;margin-bottom:.3rem}
.news-card__link{color:inherit;text-decoration:none;display:block}
.news-card__link:hover .card__title{color:var(--sky)}

.news-feed__status{color:var(--muted)}
.news-feed__status[data-news-state="error"]{color:var(--error)}

/* ---------------------------------------------------------------------
   Desde fuentes oficiales: tarjetas por tema (maqueta C aprobada).
   news.js calcula el tema de cada noticia y pone .news-feed-card--t-<tema>;
   la portada es una foto propia por tema (.news-cover--photo, nunca de
   terceros) o, si no la hay, patrón CSS + icono SVG propio.
   --------------------------------------------------------------------- */
.news-feed{
  --nc-cover-a:#0d2749;--nc-cover-b:#06111f;--nc-cover-ink:#eef3fb;--nc-cover-line:rgba(255,255,255,.14);
  --nc-tint:#8cc3ff;
}
:root[data-theme="light"] .news-feed{--nc-cover-a:#16396a;--nc-cover-b:#0b1f3f}

/* Tinte por tema: tonos apagados dentro de la gama azul noche */
.news-feed-card--t-lng,.news-chip--t-lng{--nc-tint:#7cc8e8}
.news-feed-card--t-nuclear,.news-chip--t-nuclear{--nc-tint:#b3a6e4}
.news-feed-card--t-emissions,.news-chip--t-emissions{--nc-tint:#a9b9cc}
.news-feed-card--t-renewables,.news-chip--t-renewables{--nc-tint:#8cc9a8}
.news-feed-card--t-electricity,.news-chip--t-electricity{--nc-tint:#d9c98c}
.news-feed-card--t-refining,.news-chip--t-refining{--nc-tint:#a6b6f5}
.news-feed-card--t-transport,.news-chip--t-transport{--nc-tint:#8fb0d8}
.news-feed-card--t-crude,.news-chip--t-crude{--nc-tint:#cfae7a}
.news-feed-card--t-gas,.news-chip--t-gas{--nc-tint:#8cc3ff}
.news-feed-card--t-consumption,.news-chip--t-consumption{--nc-tint:#d6a9c6}
.news-feed-card--t-other,.news-chip--t-other{--nc-tint:#9fb3d1}

/* ---------- Filtros: una fila; grupos alineados a la izquierda con su rótulo al lado ---------- */
.news-filters{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:flex-start;gap:.7rem 2.2rem;min-width:0;margin:1.4rem 0 1.6rem;padding:0 0 1.2rem;border-bottom:1px solid var(--line)}
.news-filters[hidden]{display:none}
.news-filters__group{display:flex;align-items:flex-start;gap:.75rem;min-width:0;max-width:100%}
.news-filters__label{flex:none;display:flex;align-items:center;min-height:36px;font:600 .72rem/1 var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.news-filters__scroller{display:flex;flex-wrap:wrap;gap:.45rem;min-width:0}
.news-chip{display:inline-flex;align-items:center;gap:.45rem;flex:none;min-height:36px;padding:.35rem .8rem;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--text-2);font:600 .84rem/1 var(--font-body);white-space:nowrap;cursor:pointer;transition:border-color var(--t) var(--ease),background-color var(--t) var(--ease),color var(--t) var(--ease)}
.news-chip:hover{border-color:var(--line-2);color:var(--text)}
.news-chip:focus-visible{outline:2px solid var(--sky);outline-offset:2px}
.news-chip[aria-pressed="true"]{background:var(--chip-bg);border-color:var(--sky);color:var(--strong)}
.news-chip .icon{width:16px;height:16px;flex:none;color:var(--nc-tint)}
.news-chip__n{font-size:.74rem;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.news-chip[aria-pressed="true"] .news-chip__n{color:var(--sky)}
:root[data-theme="light"] .news-chip .icon{color:color-mix(in srgb,var(--nc-tint) 45%,#0b1a2f)}

.news-feed__empty{margin:0;padding:1.4rem;border:1px dashed var(--line-2);border-radius:var(--r-lg);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem 1.2rem}
.news-feed__empty[hidden]{display:none}
.news-feed__empty-text{margin:0;color:var(--text-2)}

/* ---------- Rejilla: 3 / 2 / 1 columnas. news.js pone los spans que cierran filas completas ---------- */
.news-grid{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
.news-filters:not([hidden]) + .news-grid,.news-filters:not([hidden]) ~ .news-grid{margin-top:0}
.news-grid[hidden]{display:none}
.news-feed-card{position:relative;display:flex;flex-direction:column;min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--elev);transition:border-color var(--t) var(--ease),transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.news-feed-card[hidden]{display:none}
.news-feed-card:hover{border-color:var(--line-2);transform:translateY(-3px);box-shadow:var(--shadow)}
.news-feed-card:focus-within{border-color:var(--line-2)}
.news-feed-card--lead{grid-column:span 2}
.news-feed-card--lead-full{grid-column:1/-1}
.news-feed-card--fill-lg{grid-column:span 2}

/* ---------- Portada generada ---------- */
.news-cover{position:relative;isolation:isolate;flex:none;height:168px;overflow:hidden;color:var(--nc-cover-ink);
  background:
    radial-gradient(120% 90% at 88% 30%,color-mix(in srgb,var(--nc-tint) 30%,transparent),transparent 62%),
    linear-gradient(155deg,var(--nc-cover-a),var(--nc-cover-b));
}
/* Destacada: portada solo algo más alta que las demás; el espacio lo gana el texto */
.news-feed-card--lead .news-cover{height:clamp(220px,19vw,250px)}
/* Capa de patrón, desvanecida hacia la izquierda para que el chip respire */
.news-cover::before{content:"";position:absolute;inset:0;z-index:-2;opacity:.55;
  -webkit-mask-image:linear-gradient(100deg,transparent 12%,#000 70%);mask-image:linear-gradient(100deg,transparent 12%,#000 70%)}
/* Línea base: se enciende en rojo (único acento) al pasar el ratón o con el foco */
.news-cover::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:color-mix(in srgb,var(--nc-tint) 45%,transparent);transition:background-color var(--t) var(--ease)}
.news-feed-card:hover .news-cover::after,.news-feed-card:focus-within .news-cover::after{background:var(--red)}
/* ---------- Foto propia por tema ----------
   La foto cubre toda la portada (también cuando la rejilla estira la destacada: nunca queda
   portada vacía), encuadrada hacia la derecha porque las fotos dejan tranquilo el lado izquierdo,
   donde va el chip. Encima, un velo azul noche fijo (no depende del tema claro/oscuro: las
   portadas son siempre oscuras) más denso arriba (chip y sello) y abajo a la derecha (icono).
   Contraste del texto de los chips en el peor caso (foto blanca pura, borde inferior del chip,
   donde el velo ya baja a .42): bajo el chip de tema el fondo queda en ~#616c7c y su texto
   #eef3fb sobre el fondo del chip (.72) da ~12,9:1; bajo el sello, ~#8b9199 y #d3e0f3 sobre .6
   da ~7,4:1. AA pide 4,5:1. */
.news-cover--photo::before{content:none}
.news-cover__media{position:absolute;inset:0;z-index:-2;display:block;overflow:hidden}
.news-cover__img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:72% 50%;
  transform:scale(1);transition:transform 1.2s var(--ease)}
.news-feed-card:hover .news-cover__img,.news-feed-card:focus-within .news-cover__img{transform:scale(1.03)}
.news-cover__veil{position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  linear-gradient(180deg,rgba(6,17,31,.74) 0,rgba(6,17,31,.42) 26%,rgba(6,17,31,.12) 55%,rgba(6,17,31,.5) 100%),
  radial-gradient(60% 80% at 100% 100%,rgba(6,17,31,.45),transparent 70%),
  linear-gradient(90deg,rgba(11,31,63,.38),rgba(11,31,63,.08) 65%)}
.news-cover--photo .news-topic{background:rgba(6,17,31,.72)}
.news-cover--photo .news-seal{background:rgba(6,17,31,.6);color:#d3e0f3}
.news-cover--photo .news-cover__mark{background:rgba(6,17,31,.58)}

.news-feed-card--t-lng .news-cover::before{background:repeating-radial-gradient(circle at 78% 120%,transparent 0 13px,color-mix(in srgb,var(--nc-tint) 55%,transparent) 13px 14px)}
.news-feed-card--t-nuclear .news-cover::before{background:repeating-radial-gradient(circle at 82% 45%,transparent 0 9px,color-mix(in srgb,var(--nc-tint) 50%,transparent) 9px 10px)}
.news-feed-card--t-emissions .news-cover::before{background:radial-gradient(circle,color-mix(in srgb,var(--nc-tint) 60%,transparent) 1.6px,transparent 2.2px) 0 0/20px 20px}
.news-feed-card--t-renewables .news-cover::before{background:repeating-linear-gradient(135deg,transparent 0 14px,color-mix(in srgb,var(--nc-tint) 45%,transparent) 14px 15px)}
.news-feed-card--t-electricity .news-cover::before{background:
  linear-gradient(color-mix(in srgb,var(--nc-tint) 40%,transparent) 1px,transparent 1px) 0 0/24px 24px,
  linear-gradient(90deg,color-mix(in srgb,var(--nc-tint) 40%,transparent) 1px,transparent 1px) 0 0/24px 24px}
.news-feed-card--t-refining .news-cover::before{background:repeating-linear-gradient(90deg,transparent 0 18px,color-mix(in srgb,var(--nc-tint) 45%,transparent) 18px 19px,transparent 19px 26px,color-mix(in srgb,var(--nc-tint) 25%,transparent) 26px 27px)}
.news-feed-card--t-transport .news-cover::before{background:repeating-linear-gradient(0deg,transparent 0 16px,color-mix(in srgb,var(--nc-tint) 40%,transparent) 16px 17px,transparent 17px 21px,color-mix(in srgb,var(--nc-tint) 40%,transparent) 21px 22px)}
.news-feed-card--t-crude .news-cover::before{background:repeating-radial-gradient(ellipse 140% 90% at 95% 110%,transparent 0 11px,color-mix(in srgb,var(--nc-tint) 45%,transparent) 11px 12px)}
.news-feed-card--t-gas .news-cover::before{background:radial-gradient(circle,color-mix(in srgb,var(--nc-tint) 65%,transparent) 1px,transparent 1.6px) 0 0/12px 12px}
.news-feed-card--t-consumption .news-cover::before{background:
  repeating-linear-gradient(45deg,transparent 0 17px,color-mix(in srgb,var(--nc-tint) 40%,transparent) 17px 18px),
  repeating-linear-gradient(-45deg,transparent 0 17px,color-mix(in srgb,var(--nc-tint) 40%,transparent) 17px 18px)}
.news-feed-card--t-other .news-cover::before{background:
  linear-gradient(color-mix(in srgb,var(--nc-tint) 30%,transparent) 1px,transparent 1px) 0 0/12px 12px,
  linear-gradient(90deg,color-mix(in srgb,var(--nc-tint) 30%,transparent) 1px,transparent 1px) 0 0/12px 12px}

/* Icono grande (marca de agua recortada) + icono nítido. La variante ancha va solo en el
   tamaño en que la tarjeta ocupa de verdad 2 columnas o más (ver las media queries): --fill-lg
   es ancha en escritorio y --fill-md en tableta; fuera de ahí son tarjetas de 1 columna. */
.news-cover__ghost{position:absolute;right:-6%;bottom:-34%;width:62%;max-width:230px;height:auto;color:var(--nc-tint);opacity:.13;z-index:-1;pointer-events:none}
.news-cover__mark{position:absolute;right:1.1rem;bottom:1rem;width:56px;height:56px;padding:12px;color:var(--nc-tint);border:1px solid color-mix(in srgb,var(--nc-tint) 40%,transparent);border-radius:50%;background:rgba(6,17,31,.45);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.news-feed-card--lead .news-cover__mark{width:72px;height:72px;padding:16px;right:1.4rem;bottom:1.4rem}

.news-cover__top{position:absolute;inset:.9rem .9rem auto .9rem;display:flex;justify-content:space-between;align-items:flex-start;gap:.5rem}
.news-topic{display:inline-flex;align-items:center;gap:.45rem;min-width:0;padding:.32rem .65rem .32rem .5rem;border-radius:999px;background:rgba(6,17,31,.62);border:1px solid var(--nc-cover-line);font:700 .72rem/1.1 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--nc-cover-ink)}
.news-topic__dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--nc-tint);box-shadow:0 0 0 3px color-mix(in srgb,var(--nc-tint) 22%,transparent)}
.news-seal{display:inline-flex;align-items:center;gap:.35rem;flex:none;padding:.3rem .55rem;border-radius:var(--r-sm);border:1px solid var(--nc-cover-line);background:rgba(6,17,31,.4);font:700 .7rem/1 var(--font-head);letter-spacing:.06em;color:#c7d6ee;white-space:nowrap}
.news-seal .icon{width:13px;height:13px}

/* ---------- Cuerpo ---------- */
.news-feed-card__body{display:flex;flex-direction:column;flex:1;min-width:0;padding:1.15rem 1.25rem 1.1rem}
.news-feed-card--lead .news-feed-card__body{padding:1.4rem 1.6rem 1.3rem}
.news-feed-card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin:0 0 .55rem;font-size:.8rem;color:var(--muted);max-width:none}
.news-feed-card__meta time{font-weight:600;font-variant-numeric:tabular-nums}
.news-feed-card__lang{display:inline-block;padding:.12rem .38rem;border:1px solid var(--line-2);border-radius:4px;font:700 .64rem/1 var(--font-body);letter-spacing:.08em;color:var(--text-2)}
.news-feed-card__title{font-family:var(--font-head);font-size:1.14rem;font-weight:700;line-height:1.22;letter-spacing:-.01em;margin:0 0 .6rem;overflow-wrap:anywhere}
.news-feed-card--lead .news-feed-card__title{font-size:clamp(1.4rem,1rem + 1.1vw,1.85rem);line-height:1.15;margin-bottom:.8rem}
.news-feed-card__link{color:var(--text);text-decoration:none;transition:color var(--t) var(--ease)}
/* El titular hace clicable la tarjeta entera sin anidar enlaces */
.news-feed-card__link::after{content:"";position:absolute;inset:0;z-index:1}
.news-feed-card:hover .news-feed-card__link{color:var(--sky)}
/* Foco visible en toda la tarjeta; sin :has() se queda el anillo del propio enlace */
@supports selector(:has(*)){
  .news-feed-card__link:focus-visible{outline:none}
  .news-feed-card:has(.news-feed-card__link:focus-visible){outline:2px solid var(--sky);outline-offset:3px}
}
.news-feed-card__summary{margin:0 0 1rem;color:var(--text-2);font-size:.9rem;line-height:1.55;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;max-width:none}
.news-feed-card--lead .news-feed-card__summary{font-size:1rem;line-height:1.6;-webkit-line-clamp:5;line-clamp:5}

.news-feed-card__foot{margin-top:auto;padding-top:.8rem;border-top:1px solid var(--line);font-size:.74rem;line-height:1.45;color:var(--muted)}
.news-feed-card__foot p{margin:0;max-width:none}
.news-feed-card__source{display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .45rem}
.news-feed-card__source-name{font-weight:700;color:var(--text-2)}
.news-feed-card__sep{opacity:.6}
.news-feed-card__license a{position:relative;z-index:2;color:var(--muted);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:2px}
.news-feed-card__license a:hover{color:var(--sky);text-decoration-color:currentColor}
.news-feed-card__foot .news-feed-card__attr{margin-top:.2rem}

/* ---------- Escritorio: 3 columnas ---------- */
@media (min-width:1001px){
  .news-feed-card--lead .news-cover__ghost,.news-feed-card--fill-lg .news-cover__ghost{width:40%;max-width:280px;bottom:-45%}
  /* Destacada de 2 columnas + la tarjeta que comparte su fila (--beside): la rejilla estira
     las dos al alto de la más alta. En vez de abrir un hueco entre el resumen y el pie, ese
     alto sobrante lo absorbe la portada (patrón, nunca vacía) y el cuerpo queda compacto.
     La de al lado parte de la misma portada que la destacada y muestra 5 líneas de resumen,
     así las dos alturas casi coinciden y la portada apenas crece. */
  .news-feed-card--beside .news-cover{height:clamp(220px,19vw,250px)}
  /* Con foto, la destacada (y la de su fila, que iguala su alto) enseña la imagen más grande */
  .news-feed-card--lead .news-cover--photo,.news-feed-card--beside .news-cover--photo{height:clamp(250px,22vw,290px)}
  .news-feed-card--lead .news-cover,.news-feed-card--beside .news-cover{flex:1 0 auto}
  .news-feed-card--lead .news-feed-card__body,.news-feed-card--beside .news-feed-card__body{flex:none}
  .news-feed-card--beside .news-feed-card__summary{-webkit-line-clamp:5;line-clamp:5}
}
/* ---------- Tableta: 2 columnas ---------- */
@media (min-width:681px) and (max-width:1000px){
  .news-feed-card--lead .news-cover__ghost,.news-feed-card--fill-md .news-cover__ghost{width:40%;max-width:280px;bottom:-45%}
}
@media (max-width:1000px){
  .news-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .news-feed-card--lead,.news-feed-card--lead-full{grid-column:1/-1}
  .news-feed-card--fill-lg{grid-column:auto}
  .news-feed-card--fill-md{grid-column:1/-1}
  .news-feed-card--lead .news-cover{height:220px}
  .news-feed-card--lead .news-cover--photo{height:260px}
}
/* ---------- Móvil: 1 columna y cada grupo de filtros en una línea desplazable ----------
   overflow-x:auto recorta también en vertical: el padding del desplazable (5px) cubre el
   anillo de foco de los chips (outline 2px + outline-offset 2px) sin cortarlo. */
@media (max-width:680px){
  .news-grid{grid-template-columns:minmax(0,1fr);gap:1rem}
  .news-feed-card--fill-md{grid-column:auto}
  .news-cover{height:140px}
  .news-feed-card--lead .news-cover{height:180px}
  .news-feed-card--lead .news-cover--photo{height:200px}
  .news-feed-card--lead .news-feed-card__body{padding:1.15rem 1.25rem 1.1rem}
  .news-feed-card--lead .news-feed-card__title{font-size:1.3rem}
  .news-feed-card--lead .news-cover__mark{width:56px;height:56px;padding:12px;right:1.1rem;bottom:1rem}

  .news-filters{flex-direction:column;flex-wrap:nowrap;gap:.55rem}
  .news-filters__group{width:100%;align-items:center;gap:.6rem}
  .news-filters__label{min-width:3.6rem}
  .news-filters__scroller{flex:1 1 auto;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;padding:5px;margin:-5px}
  .news-filters__scroller::-webkit-scrollbar{display:none}
  .news-chip{scroll-snap-align:start;font-size:.8rem;padding:.3rem .7rem}
  /* Pista de que hay más opciones: se difumina el borde que esconde contenido */
  .news-filters__scroller[data-more-end]{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 2.75rem),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 2.75rem),transparent)}
  .news-filters__scroller[data-more-start]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 2.75rem);mask-image:linear-gradient(90deg,transparent,#000 2.75rem)}
  .news-filters__scroller[data-more-start][data-more-end]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 2.75rem,#000 calc(100% - 2.75rem),transparent);mask-image:linear-gradient(90deg,transparent,#000 2.75rem,#000 calc(100% - 2.75rem),transparent)}
}
@media (prefers-reduced-motion:reduce){
  .news-feed-card,.news-feed-card:hover{transition:none;transform:none}
  .news-chip,.news-feed-card__link,.news-cover::after{transition:none}
  .news-cover__img,.news-feed-card:hover .news-cover__img,.news-feed-card:focus-within .news-cover__img{transition:none;transform:none}
}

.news-feed__fallback{list-style:none;margin:.8rem 0 0;padding:0;display:grid;gap:.4rem}
.news-feed__fallback a{color:var(--sky)}

.news-article__meta{color:var(--muted);display:flex;gap:1rem;flex-wrap:wrap;margin:.4rem 0 1.6rem}
.news-article__sources{margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.news-article__sources ul{list-style:none;padding:0;margin:.8rem 0 0;display:grid;gap:.5rem}
.news-article__sources a{color:var(--sky)}
/* Vista previa de borradores (build.py --drafts, siempre con noindex): que nadie confunda la maqueta con una nota publicada */
.news-draft{border:1px solid var(--error);border-radius:var(--r-sm);color:var(--error);padding:.6rem .9rem;margin:0 0 1.2rem;font-weight:600}
.news-draft--badge{display:inline-block;padding:.1rem .5rem;margin:0 0 .5rem;font-size:.78rem}