/* El mapa conserva sus colores NOAA; cabecera, controles y aviso heredan la marca del sitio. */
.gu-elnino{margin:24px 0;background:var(--gu-surface);color:var(--gu-ink);font-family:var(--gu-font-ui)}
.gu-elnino:first-child{margin-top:0}
.gu-elnino:last-child{margin-bottom:0}
.gu-section--ads:has(>.gu-wide>.gu-elnino:first-child){padding-top:0}
.gu-section--ads:has(>.gu-wide>.gu-elnino:last-child){padding-bottom:0}
.gu-elnino [hidden]{display:none!important}
.gu-elnino-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:18px;background:var(--gu-surface)}
.gu-elnino-heading h2{color:var(--gu-ink);font:700 31px/1.2 var(--gu-font-ui);margin:0;letter-spacing:-.5px}
.gu-elnino-heading h2:before{width:9px;height:27px;background:var(--gu-green)}
.gu-elnino-heading p{font-size:14px;line-height:1.4;color:var(--gu-muted);margin:5px 0 0 21px}
.gu-elnino-date{display:flex;align-items:center;gap:12px;text-align:right;flex-shrink:0;font-size:12px;line-height:1.3;color:var(--gu-muted)}
.gu-elnino-date time{display:block;color:var(--gu-ink);font-size:20px;font-weight:700}
.gu-elnino-date a{color:var(--gu-action);font-size:12px;text-decoration:underline;text-underline-offset:2px}
.gu-elnino-map{position:relative;background:var(--gu-soft);color:var(--gu-ink);border:1px solid var(--gu-line);border-radius:5px 5px 0 0;overflow:hidden}
.gu-elnino-canvas{position:relative;aspect-ratio:1084/196}
.gu-elnino-canvas img,.gu-elnino-canvas svg{display:block;width:100%;height:100%;position:absolute;inset:0;border-radius:0;object-fit:fill}
.gu-elnino-grid path{stroke:#557684;stroke-opacity:.18;stroke-width:.7;stroke-dasharray:3 3;fill:none}
.gu-elnino-grid text{fill:#fff;paint-order:stroke;stroke:#58798380;stroke-width:4;font:bold 15px Arial,sans-serif}
.gu-elnino-regions rect{stroke:#42483e;stroke-width:2;fill:transparent;vector-effect:non-scaling-stroke}
.gu-elnino-regions text{font:bold 13px Arial,sans-serif;fill:#2f3832}
.gu-elnino-state{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;background:var(--gu-soft);color:var(--gu-muted);text-align:center;padding:10px;font-size:14px;line-height:1.3}
.gu-elnino button{font:inherit;cursor:pointer;touch-action:manipulation}
.gu-elnino-state button{padding:4px 12px;border:1px solid var(--gu-action);border-radius:4px;background:var(--gu-surface);color:var(--gu-action)}
.gu-elnino-controls{display:flex;gap:16px;align-items:center;padding:12px 16px;border-top:1px solid var(--gu-line);background:var(--gu-soft)}
.gu-elnino-months{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px;flex:1;min-width:0}
.gu-elnino-month{border:1px solid var(--gu-control-line);background:var(--gu-surface);border-radius:4px;min-width:24px;min-height:36px;padding:4px;color:var(--gu-action)}
.gu-elnino-month span{font-size:12px;font-weight:700;white-space:nowrap}
.gu-elnino-month:hover{background:var(--gu-pale)}
.gu-elnino-month[aria-current=date]{color:var(--gu-surface);background:var(--gu-action);border-color:var(--gu-action)}
.gu-elnino-play{padding:6px 12px;border:1px solid var(--gu-action);border-radius:4px;background:var(--gu-action);color:var(--gu-surface);min-height:36px;font-size:13px!important;font-weight:700!important}
.gu-elnino-play:hover{background:var(--gu-deep);border-color:var(--gu-deep)}
.gu-elnino-footer{padding:12px 16px;background:var(--gu-pale);color:var(--gu-ink);border:1px solid var(--gu-line);border-top:0;border-radius:0 0 5px 5px}
.gu-elnino-footer p{font-size:12px;line-height:1.5;margin:0}
.gu-elnino-footer strong{color:var(--gu-deep)}
.gu-elnino-footer [data-warning]{margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--gu-control-line);font-weight:600}
.gu-elnino-footer a{color:var(--gu-action);text-decoration:underline;text-underline-offset:2px}
.gu-elnino button:focus-visible,.gu-elnino a:focus-visible{outline:3px solid var(--gu-deep);outline-offset:2px}
@media(max-width:900px){
 .gu-elnino-heading{align-items:flex-start;gap:12px;flex-direction:column}
 .gu-elnino-date{text-align:left;gap:8px}
 .gu-elnino-date time{font-size:18px}
}
@media(max-width:700px){
 .gu-elnino-heading{margin-bottom:16px}
 .gu-elnino-heading h2{font-size:25px}
 .gu-elnino-heading h2:before{width:5px;height:22px}
 .gu-elnino-heading p{margin-left:17px;font-size:13px}
 .gu-elnino-canvas:has([data-raster][hidden]){min-height:84px}
 .gu-elnino-state{font-size:12px}
 .gu-elnino-controls{flex-wrap:wrap;justify-content:flex-end;gap:10px;padding:12px}
 .gu-elnino-months{flex:1 1 100%;grid-auto-flow:row;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-columns:auto}
 .gu-elnino-footer{padding:12px}
 .gu-elnino-footer p{font-size:11px}
}