/* Windy look (Carlos, 2026-10-20): Windy's map chrome over Climalerta's features.
   Tokens read off windy.com: gray panels rgba(77,77,77,.85), menu red #9d0300,
   timeline gold #d49500, icon cream #fff3e1, system font, white outlined labels. */
body.map-first {
  --map-glass: rgba(58,58,58,.95); --map-edge: rgba(255,255,255,.12);
  --wx-panel: rgba(77,77,77,.85); --wx-gold: #d49500; --wx-cream: #fff3e1; --wx-red: #9d0300;
  --wx-bottom: 0px;
  --font-head: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: var(--font-head);
  font-family: var(--font-head);
}
body.map-first.wx-on { --wx-bottom: calc(66px + env(safe-area-inset-bottom)); }
body.map-first .leaflet-container { background: #8e8e8e; font-family: var(--font-head); }
.wx-base { filter: brightness(2.15) contrast(1.05) saturate(0); }
.wx-labels { filter: brightness(1.5); }
.wx-field, .wx-dots { position: absolute; left: 0; top: 0; pointer-events: none; }

/* Top: Windy's gray search panel; locate lives at its right edge. */
body.map-first #shellTop, body.map-first #shellCornerL { display: none; }
body.map-first #mapSearch { top: 0; left: 0; right: 0; width: auto; padding: max(6px, env(safe-area-inset-top)) 6px 4px; background: var(--wx-panel); filter: none; color: #fff; z-index: 65; }
body.map-first #mapSearch #worldPlaceForm { display: flex; align-items: center; gap: 2px; padding: 0; background: transparent; border-radius: 0; }
body.map-first #mapSearch input { flex: 1; min-height: 44px; padding: 4px 6px 4px 38px; border: 0; border-radius: 0; color: #fff; font-size: 1.2rem; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4'%3E%3Ccircle cx='10' cy='10' r='7'/%3E%3Cpath d='m15 15 6 6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 6px center / 24px; }
body.map-first #mapSearch input::placeholder { color: rgba(255,255,255,.7); }
body.map-first #mapSearch input::-webkit-search-cancel-button { filter: invert(1); }
body.map-first #mapSearch button[type=submit] { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
body.map-first #mapSearch #btnLocate { flex: 0 0 48px; min-width: 48px; min-height: 44px; padding: 0; margin: 0; border: 0; background: transparent; box-shadow: none; font-size: 0; color: var(--wx-cream); }
body.map-first #mapSearch #btnLocate::before { content: '⌖'; font-size: 2rem; line-height: 1; text-shadow: 0 0 4px #000; }
body.map-first #mapLocalSummary { margin: 0; padding: 4px 8px 6px; gap: 10px; background: transparent; border: 0; border-radius: 0; }
body.map-first .map-location-icon { color: var(--wx-cream); font-size: 1.3rem; }
body.map-first #mapSelectedPlace { font-family: var(--font-head); font-weight: 600; font-size: .95rem; }
body.map-first #mapLocalStatus { color: #e4e4e4; }
body.map-first #mapSearchFeedback { background: #3c3c3c; border-radius: 0; }

/* Alerts banner: a Windy gray panel under the search panel. */
body.map-first #shellOverlays { top: calc(108px + env(safe-area-inset-top)); left: 8px; right: 8px; max-width: 460px; }
body.map-first .ac-tira { top: calc(108px + env(safe-area-inset-top)) !important; left: 8px; right: 8px; max-width: 460px; background: var(--wx-panel); border: 0; border-radius: 4px; box-shadow: 0 0 4px #0008; }

/* Right: white icon column (Windy's home/search/pin/heart) and the red menu button. */
body.map-first #shellActions { left: auto; right: 4px; bottom: calc(var(--wx-bottom) + 70px); width: auto; transform: none; filter: drop-shadow(0 0 3px rgba(0,0,0,.85)); }
body.map-first #shellActions #primaryNav { flex-direction: column; gap: 2px; padding: 0; background: none; border: 0; box-shadow: none; }
body.map-first #shellActions #primaryNav .btn { position: relative; width: 50px; min-width: 50px; min-height: 46px; padding: 0; background: none; border: 0; font-size: 0; color: transparent; }
body.map-first #shellActions #primaryNav .btn::before { content: ''; position: absolute; inset: 10px 12px; background: var(--wx-cream); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
body.map-first #shellActions #primaryNav [aria-pressed=true]::before { background: var(--wx-gold); }
body.map-first #primaryNav [data-primary-section=preparar] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cpath d='M12 1v3M12 20v3M1 12h3M20 12h3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); }
body.map-first #primaryNav [data-primary-section=nationwideAlerts] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2 1 21h22L12 2zm-1 7h2v6h-2V9zm0 8h2v2h-2v-2z'/%3E%3C/svg%3E"); }
body.map-first #primaryNav [data-primary-section=map] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 2 12h3v8h5v-5h4v5h5v-8h3L12 3z'/%3E%3C/svg%3E"); }
body.map-first #primaryNav [data-primary-section=preparationPanel] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z'/%3E%3C/svg%3E"); }
body.map-first #shellCornerR { left: auto; right: 4px; bottom: calc(var(--wx-bottom) + 12px); max-width: none; }
#wxMenuBtn { display: grid; place-items: center; width: 50px; height: 50px; margin-right: 0; padding: 0; border: 0; border-radius: 50%; background: var(--wx-red); color: #fff; font-size: 1.7rem; line-height: 1; box-shadow: 0 0 4px #000; cursor: pointer; }

/* Menu: Windy's dark right sheet with layer tiles. */
#wxMenu { position: fixed; top: 0; right: 0; bottom: 0; z-index: 120; width: min(340px, 82vw); overflow: auto; padding: max(14px, env(safe-area-inset-top)) 14px 24px; background: #3c3c3c; color: #fff; box-shadow: 0 0 18px #000a; transform: translateX(105%); visibility: hidden; transition: transform .2s, visibility .2s; }
body.wx-menu-open #wxMenu { transform: none; visibility: visible; }
#wxMenu .wx-menu-head { display: flex; align-items: center; gap: 12px; min-height: 48px; }
#wxMenu .wx-close { flex: 0 0 44px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--wx-red); color: #fff; font-size: 1.2rem; box-shadow: 0 0 4px #000; cursor: pointer; }
#wxMenu #shellBrand { margin: 0; color: #fff; }
#wxMenu .wx-menu-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
#wxMenu .wx-menu-tools > * { position: static; margin: 0; }
#wxMenu .wx-menu-tools :is(.pill, .btn, button) { min-height: 40px; border: 0; border-radius: 20px; background: #4d4d4d; color: #fff; font-size: .78rem; box-shadow: none; }
#wxMenu .wx-menu-tools .hidden { display: none; }
#wxMenu .wx-menu-title { margin: 16px 0 10px; font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #cfcfcf; }
body.map-first #wxMenu #shellBars { position: static; display: block; width: auto; max-height: none; overflow: visible; padding: 0; top: auto; right: auto; }
body.map-first #wxMenu #shellBars .layer-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 10px; }
body.map-first #wxMenu #shellBars .layer-chip { display: flex; flex-direction: column; align-items: stretch; gap: 6px; width: auto; min-height: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; color: #fff; font-size: .78rem; line-height: 1.2; text-align: left; }
body.map-first #wxMenu #shellBars .layer-chip > span:last-child { flex: none; }
body.map-first #wxMenu #shellBars .swatch { flex: none; width: 100%; height: 56px; border: 2px solid transparent; border-radius: 9px; background: linear-gradient(135deg, #5b5b5b, #2f2f2f); color: #fff; font-size: 1.6rem; text-shadow: 0 0 4px #000; }
body.map-first #wxMenu #shellBars .layer-chip.active .swatch { border-color: var(--wx-gold); }
body.map-first #wxMenu #shellBars .layer-chip.active { color: var(--wx-gold); }
body.map-first #wxMenu #shellBars [data-layer=wind] .swatch { background: linear-gradient(135deg, #4a94a9, #53a553 40%, #a19d51 65%, #af5088); }
body.map-first #wxMenu #shellBars [data-layer=waves] .swatch { background: linear-gradient(135deg, #329eba, #3868c0 40%, #8c3ca5 70%, #c4489e); }
body.map-first #wxMenu #shellBars [data-layer=rain] .swatch { background: linear-gradient(135deg, #5c6f80, #3a7bd5 55%, #5ac8fa); }
body.map-first #wxMenu #shellBars [data-layer=quakes] .swatch { background: linear-gradient(135deg, #5a3a22, #e8590c); }
body.map-first #wxMenu #shellBars [data-layer=flood] .swatch { background: linear-gradient(135deg, #1c4966, #3896ff); }
body.map-first #wxMenu #shellBars [data-layer=shelters] .swatch { background: linear-gradient(135deg, #234d2c, #5fb36b); }
body.map-first #wxMenu #shellBars [data-layer=health] .swatch { background: linear-gradient(135deg, #5e1b25, #e5484d); }
body.map-first #wxMenu #shellBars [data-layer=reportes] .swatch { background: linear-gradient(135deg, #5b2333, #ff6b6b); }
body.map-first #wxMenu #shellBars [data-layer=pets] .swatch { background: linear-gradient(135deg, #4b3a6b, #d9a6f5); }
body.map-first #wxMenu #shellBars [data-layer=zonas] .swatch { background: linear-gradient(135deg, #5c1a1a, #ff4d4d); }
body.map-first #wxMenu #shellBars [data-layer=agua] .swatch { background: linear-gradient(135deg, #1a4a5c, #4dc3ff); }
body.map-first #wxMenu #shellBars [data-layer=acopios] .swatch { background: linear-gradient(135deg, #5c4a1a, #ffb84d); }
body.map-first #wxMenu #moreLayers { margin-top: 14px; }
body.map-first #wxMenu #moreLayers > summary { min-height: 44px; padding: 12px; border: 0; border-radius: 0; background: none; text-align: center; font-size: 1rem; }
body.map-first #wxMenu #mapSourceDetails { position: static; width: auto; margin-top: 18px; border: 0; border-radius: 10px; background: #4f4f66; box-shadow: none; }

/* Bottom: Windy's timeline (play, day strip, gold time bubble) and legend bar. */
.wx-bottom { position: absolute; left: 0; right: 0; bottom: 0; z-index: 60; padding-bottom: env(safe-area-inset-bottom); background: #3c3c3c; color: #fff; font-family: var(--font-head); user-select: none; }
.wx-bottom[hidden] { display: none; }
.wx-status { position: absolute; left: 10px; bottom: calc(100% + 40px); font-size: .75rem; text-shadow: 0 0 3px #000, 0 0 3px #000; pointer-events: none; }
.wx-status:empty { display: none; }
.wx-time { display: flex; height: 44px; }
.wx-play { flex: 0 0 48px; border: 0; background: #3c3c3c; color: var(--wx-cream); font-size: 1.4rem; text-shadow: 1px 1px 1px #000a; cursor: pointer; }
.wx-track { position: relative; flex: 1; touch-action: none; cursor: pointer; }
.wx-track:focus-visible { outline: 2px solid var(--wx-gold); outline-offset: -2px; }
.wx-days { display: flex; height: 100%; overflow: hidden; }
.wx-days span { flex: none; overflow: hidden; padding: 0 6px; white-space: nowrap; text-overflow: ellipsis; text-align: center; line-height: 44px; font-size: 1rem; text-transform: capitalize; background: #3c3c3c; }
.wx-days span:nth-child(odd) { background: #4d4d4d; }
.wx-cursor { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--wx-gold); pointer-events: none; }
.wx-bubble { position: absolute; bottom: 100%; left: 0; padding: 3px 14px; border-radius: 9px 9px 0 0; background: var(--wx-gold); color: #fff; font-size: 1.05rem; white-space: nowrap; box-shadow: 0 0 4px #0008; }
.wx-legend { position: relative; height: 22px; }
.wx-legend-bar { position: absolute; inset: 0; }
.wx-legend-labels { position: relative; display: flex; height: 100%; }
.wx-legend-labels span { flex: 1; text-align: center; line-height: 22px; font-size: .75rem; text-shadow: 0 0 2px #000, 0 0 2px #000; }

/* Map controls and cards move clear of the timeline. */
body.map-first .leaflet-bottom { bottom: var(--wx-bottom); }
body.map-first .leaflet-control-attribution { background: #3c3c3cd9; color: #ddd; }
body.map-first .leaflet-control-attribution a { color: #ddd; }
body.map-first #shellMap .leaflet-top.leaflet-left { top: 50%; bottom: auto; left: auto; right: 8px; transform: translateY(-50%); }
body.map-first #shellMap .leaflet-control-zoom a { background: var(--wx-panel); border-color: var(--map-edge); color: #fff; }
body.map-first .map-incident .leaflet-popup-content-wrapper { border-radius: 6px; }
body.map-first .map-incident .leaflet-popup-content a { color: #ffd36b; }
body.map-first #primaryNav [aria-pressed=true] { color: var(--wx-gold); }
body.map-first :is(button,input,summary,a):focus-visible { outline-color: var(--wx-gold); }
body.map-first #drawer { background: #353535; }
body.map-first #drawerHead { background: #3c3c3c; border-color: rgba(255,255,255,.08); }
@media (max-width: 879px) {
  body.map-first #shellMap .leaflet-control-zoom { display: none; }
  body.map-first .map-incident { bottom: calc(var(--wx-bottom) + 12px) !important; }
  body.map-first #mapLeyenda { bottom: calc(var(--wx-bottom) + 12px); }
}
@media (min-width: 880px) {
  body.map-first #mapSearch { right: auto; width: 400px; border-radius: 0 0 8px 0; }
  body.map-first #shellOverlays, body.map-first .ac-tira { top: 116px !important; right: auto; width: 400px; }
  body.map-first .map-incident { top: 116px !important; }
  body.map-first #mapLeyenda { bottom: calc(var(--wx-bottom) + 12px); }
  .wx-legend { width: 420px; margin-left: auto; }
  body.map-first.panel-abierto .wx-bottom { left: 410px; }
}
@media (prefers-reduced-motion: reduce) { #wxMenu { transition: none; } }