/* One compact row keeps observations and official notices accessible in both views. */
body { grid-template-rows:auto auto minmax(0,1fr) auto; }
/* Forecast stays neutral. Published SMN notices use their official severity color. */
.weatherRibbon { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px 18px; min-width:0; padding:8px 20px; background:#f4f9fb; border-bottom:1px solid #ccdee5; color:#244b53; }
.weatherForecastOverview { display:grid; grid-template-columns:minmax(130px,190px) minmax(0,570px); gap:16px; align-items:center; min-width:0; }
.weatherForecastHeading { min-width:0; }
.weatherForecastHeading strong { display:block; font-size:12px; line-height:1.4; }
.weatherForecastHeading > span { display:block; margin-top:3px; font-size:10px; line-height:1.4; color:#55727a; }
.weatherMiniDays { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; min-width:0; }
.weatherMiniDay { display:grid; grid-template-columns:32px minmax(0,1fr); align-items:center; column-gap:6px; padding:5px 9px; border:1px solid #d6e6eb; background:#fff; border-radius:10px; min-width:0; }
.weatherMiniLabel { font-size:11px; color:#4f6c73; text-transform:capitalize; }
.weatherMiniRain { font-size:16px; line-height:1.3; color:#145e79; white-space:nowrap; }
.weatherMiniCondition { grid-column:1/-1; font-size:10px; line-height:1.4; color:#536f78; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.weatherForecastEmpty { grid-column:1/-1; font-size:12px; margin:7px 0; color:#52727d; }
.weatherRibbonActions { display:grid; gap:4px; justify-items:end; max-width:170px; }
.weatherRibbon button { min-height:42px; border:1px solid #b8cfd6; border-radius:8px; background:#fff; color:#17566b; padding:7px 12px; font:inherit; font-size:12px; font-weight:650; cursor:pointer; }
.weatherSmnStatus { font-size:10px; line-height:1.3; text-align:right; color:#58717a; }
.weatherVerifiedAlert { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border:1px solid #d58288; border-left:4px solid #b72f34; border-radius:9px; background:#fff1ef; color:#8d2228; }
.weatherVerifiedAlert[hidden] { display:none!important; }
.weatherRibbonCopy { min-width:0; font-size:12px; line-height:1.4; }
.weatherRibbonCopy strong,.weatherRibbonCopy span { display:block; }
.weatherRibbonCopy span { font-size:11px; }
.weatherVerifiedAlert button { flex-shrink:0; color:#9b202b; border-color:#cd777d; }
.weatherVerifiedAlert[data-level="Moderate"] { background:#fff7d9; border-color:#dfbd57; border-left-color:#bd8b00; color:#604800; }
.weatherVerifiedAlert[data-level="Moderate"] button { color:#604800; border-color:#b69537; }
.weatherVerifiedAlert[data-level="Severe"] { background:#fff0df; border-color:#df9c57; border-left-color:#bd6000; color:#743900; }
.weatherVerifiedAlert[data-level="Severe"] button { color:#743900; border-color:#bf8141; }
.weatherVerifiedAlert[data-level="Unknown"],.weatherVerifiedAlert[data-level="Minor"] { background:#f4f9fb; border-color:#b8cfd6; border-left-color:#6e939e; color:#244b53; }
.weatherVerifiedAlert:is([data-level="Unknown"],[data-level="Minor"]) button { color:#244b53; border-color:#b8cfd6; }
/* Tiny CSS weather symbols: decorative, WMO-driven, no video/canvas or network assets. */
.weatherGlyph { position:relative; display:block; width:30px; height:30px; grid-row:1/3; }
.weatherGlyph i { position:absolute; display:none; }
.weatherGlyph .wx-sun { width:15px; height:15px; top:5px; left:6px; border-radius:50%; background:#edb53c; box-shadow:0 0 0 3px #fff1bf; }
.weatherGlyph .wx-cloud { width:24px; height:10px; top:12px; left:2px; border-radius:8px; background:#a2bac6; }
.weatherGlyph .wx-cloud::before { content:""; position:absolute; width:14px; height:14px; border-radius:50%; top:-6px; left:7px; background:inherit; }
.weatherGlyph .wx-drops { width:2px; height:5px; top:23px; left:7px; border-radius:2px; background:#388fc1; box-shadow:6px 1px #388fc1,12px -1px #388fc1; transform:rotate(15deg); }
.weatherGlyph .wx-bolt { top:18px; left:12px; width:8px; height:12px; background:#c2941d; clip-path:polygon(45% 0,100% 0,63% 40%,100% 40%,0 100%,25% 52%,0 52%); }
.weatherGlyph .wx-fog { left:2px; top:22px; width:24px; height:2px; background:#98adb5; box-shadow:0 4px #98adb5; }
.weatherGlyph .wx-unknown { inset:2px; font:600 22px/28px sans-serif; text-align:center; color:#8097a0; }
.weatherGlyph[data-kind="sun"] .wx-sun { display:block; animation:weatherSun 5s ease-in-out infinite; }
.weatherGlyph[data-kind="cloud"] .wx-sun { display:block; top:3px; left:11px; }
.weatherGlyph:is([data-kind="cloud"],[data-kind="rain"],[data-kind="storm"],[data-kind="snow"],[data-kind="fog"]) .wx-cloud { display:block; animation:weatherCloud 5s ease-in-out infinite; }
.weatherGlyph:is([data-kind="rain"],[data-kind="snow"]) .wx-drops { display:block; animation:weatherDrops 1.8s ease-in-out infinite; }
.weatherGlyph[data-kind="storm"] .wx-bolt { display:block; }
.weatherGlyph[data-kind="snow"] .wx-drops { height:3px; width:3px; border-radius:50%; background:#69a6ba; }
.weatherGlyph[data-kind="fog"] .wx-fog,.weatherGlyph[data-kind="unknown"] .wx-unknown { display:block; }
@keyframes weatherCloud { 0%,100% {transform:translateX(-1px)} 50% {transform:translateX(2px)} }
@keyframes weatherSun { 0%,100% {transform:scale(.9)} 50% {transform:scale(1.06)} }
@keyframes weatherDrops { 0% {transform:translateY(-1px) rotate(15deg);opacity:.5} 70% {opacity:1} 100% {transform:translateY(3px) rotate(15deg);opacity:.5} }
@media(prefers-reduced-motion:reduce) { .weatherGlyph i { animation:none!important; } }
.weatherLevel { display:inline-block; padding:1px 6px; margin-left:5px; border-radius:4px; background:#edece8; color:#333; }
.weatherLevel[data-level="Moderate"] { background:#ffe896; color:#5c4600; }
.weatherLevel[data-level="Severe"] { background:#ffd4a8; color:#713500; }
.weatherLevel[data-level="Extreme"] { background:#b32936; color:#fff; }
/* Three short views, one set of controls, no duplicated measurements. */
.weatherDialog { box-sizing:border-box; width:min(600px,calc(100vw - 24px)); max-height:calc(100dvh - 28px); padding:0; border:1px solid #cadbd5; border-radius:18px; color:#183b3d; background:#fff; box-shadow:0 16px 70px #183b3d40; overflow:auto; overscroll-behavior:contain; }
.weatherDialog::backdrop { background:#122f3c70; }
.weatherDialogHeading { position:sticky; top:0; z-index:2; display:block; padding:16px 20px 12px; background:#fff; border-bottom:1px solid #e1e9e5; }
.weatherDialogTop { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.weatherDialog h2 { margin:0; font-size:22px; text-transform:none; letter-spacing:-.4px; }
.weatherDialogTop p { margin:4px 0 0; font-size:12px; color:#60766f; }
.weatherDialogHeading #weatherClose { min-width:44px; min-height:44px; border:1px solid #d7e4de; border-radius:11px; background:#f7faf8; color:#244a46; cursor:pointer; }
.weatherTabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; padding:4px; margin-top:14px; background:#edf3f0; border-radius:11px; }
.weatherTabs button { min-height:42px; border:0; border-radius:8px; background:transparent; color:#506a62; font:inherit; font-size:13px; cursor:pointer; }
.weatherTabs button[aria-selected="true"] { background:#fff; color:#175a51; font-weight:700; box-shadow:0 2px 7px #183b3d13; }
.weatherTabs button[data-state="alert"] { color:#a02432; }
.weatherTabs button[data-state="alert"][aria-selected="true"] { background:#fff1ee; }
#weatherReportContent { padding:0 20px 16px; }
.weatherPanel { padding:20px 0 14px; }
.weatherPanel[hidden] { display:none!important; }
.weatherPanel h3 { font-size:21px; margin:0 0 4px; line-height:1.3; }
.weatherHint { margin:6px 0; font-size:12px; line-height:1.5; color:#60766f; }
.weatherPanel .field { display:grid; gap:7px; margin:18px 0 12px; font-size:12px; color:#48655c; }
.weatherDialog select { width:100%; min-width:0; min-height:46px; border:1px solid #c1d5cb; background:#fff; border-radius:9px; padding:9px 11px; font:inherit; font-size:14px; color:#244841; }
.aemsaReading { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:16px 0 12px; }
.aemsaReading div { min-width:0; padding:16px 13px; border:1px solid #cce1e3; border-radius:12px; background:#f0f8fa; }
.aemsaReading dt { color:#436774; font-size:12px; }
.aemsaReading dd { margin:8px 0 0; color:#125c75; font-size:clamp(23px,4vw,34px); font-weight:650; letter-spacing:-.6px; overflow-wrap:anywhere; }
.weatherConditions { font-size:15px; color:#325b59; margin:10px 0; }
.weatherTimestamp { font-size:11px; line-height:1.5; color:#60766f; margin:8px 0; }
.weatherPrimary { width:100%; min-height:44px; margin:14px 0 5px; border:1px solid #b9d5d4; border-radius:9px; background:#e9f5f3; color:#17605b; font:inherit; font-size:13px; font-weight:600; cursor:pointer; }
.weatherPrimary:disabled { opacity:.55; cursor:default; }
.weatherEmpty { font-size:17px; margin:22px 0 8px; }
.weatherDays { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:15px 0; }
.weatherDays .weatherDay { margin:0; padding:14px 9px; border:1px solid #dbe6df; border-radius:11px; background:#f7faf8; text-align:center; }
.weatherDays strong { font-size:13px; text-transform:capitalize; }
.weatherDays .weatherDayRain { font-size:23px; font-weight:650; color:#12617a; margin:15px 0 2px; }
.weatherDays span,.weatherDays small { display:block; font-size:10px; color:#5d756b; line-height:1.4; }
.weatherDays p:not(.weatherDayRain) { font-size:11px; line-height:1.4; margin:10px 0; }
.weatherNoticeState { padding:20px 16px; margin:18px 0 12px; background:#f2f6f4; border:1px solid #d6e3dc; border-radius:12px; }
.weatherNoticeState strong { display:block; font-size:17px; line-height:1.4; }
.weatherNoticeState p { margin-top:8px; color:#60766f; font-size:12px; line-height:1.5; }
.weatherNoticeState[data-state="partial"],.weatherNoticeState[data-state="unavailable"] { background:#fff7e7; border-color:#ebd69b; }
.weatherSourceLink { display:inline-block; font-size:12px; color:#176974; padding:8px 0; }
.weatherMore { border-top:1px solid #e1e9e5; margin-top:4px; }
.weatherMore > summary { padding:15px 0; font-size:12px; color:#496e62; cursor:pointer; }
.weatherMore p,.weatherMore .weatherModel > div { font-size:12px; line-height:1.55; margin:8px 0; }
.weatherMore .weatherModel { border:0; border-top:1px solid #e3ebe6; padding:9px 0; margin:5px 0; }
.weatherMore .weatherModel > summary { cursor:pointer; font-size:12px; font-weight:600; }
.weatherMore a { color:#136c7a; font-size:12px; }
.weatherMore .weatherRefresh { font-size:12px; margin-top:10px; }
.weatherAutoUpdate { margin:6px 0 0; font-size:10px; color:#698077; text-align:center; }
.weatherPanel .officialAlert { font-size:13px; line-height:1.5; }
.weatherPanel .officialAlert summary { min-height:32px; font-weight:650; cursor:pointer; }
.weatherPanel .officialAlert p { margin:10px 0; }
.weatherPanel .officialAlert a { color:#166c78; }
.aemsaStationPopup { max-width:240px; font-size:13px; line-height:1.5; }
.aemsaStationPopup strong { display:block; }
.aemsaStationPopup button { display:block; margin-top:8px; min-height:38px; border:1px solid #b8d6da; border-radius:6px; background:#edf7f8; color:#135668; cursor:pointer; }
/* In map-only view keep the forecast in document flow rather than covering controls. */
body.map-focus { display:flex; flex-direction:column; }
.map-focus .weatherRibbon { position:relative; z-index:900; flex-shrink:0; }
.map-focus .appShell,.map-focus .appShell.panelCollapsed { flex:1; height:auto; min-height:0; }
.map-focus .mapArea { height:100%; }
@media(max-width:1000px) {
  .weatherForecastOverview { grid-template-columns:1fr; gap:5px; }
  .weatherForecastHeading { display:flex; justify-content:space-between; gap:8px; align-items:baseline; }
  .weatherForecastHeading > span { margin:0; }
}
@media(max-width:600px) {
  .weatherRibbon { padding:6px 8px; gap:6px 8px; }
  .weatherForecastHeading { display:block; }
  .weatherForecastHeading strong { font-size:11px; }
  .weatherForecastHeading > span { font-size:9px; margin-top:1px; }
  .weatherMiniDays { gap:4px; }
  .weatherMiniDay { grid-template-columns:22px minmax(0,1fr); gap:0 2px; padding:4px; border-radius:7px; }
  .weatherMiniLabel { font-size:10px; }
  .weatherMiniRain { font-size:12px; }
  .weatherMiniCondition { font-size:9px; }
  .weatherGlyph { width:22px; transform:scale(.8); transform-origin:left center; }
  .weatherRibbonActions { max-width:80px; }
  .weatherSmnStatus { font-size:9px; }
  .weatherRibbon button { min-height:44px; padding:6px 8px; font-size:11px; }
  .weatherRibbonCopy { font-size:11px; }
  .weatherRibbonCopy span { font-size:10px; }
  .weatherVerifiedAlert { padding:7px; gap:6px; }

  .weatherDialog { max-height:calc(100dvh - 16px); width:calc(100vw - 16px); }
  .weatherDialogHeading { padding:12px 14px 9px; }
  #weatherReportContent { padding:0 14px 12px; }
  .weatherTabs { margin-top:11px; }
  .weatherTabs button { font-size:12px; }
  .weatherPanel { padding-top:16px; }
  .weatherPanel h3 { font-size:19px; }
  .aemsaReading div { padding:13px 10px; }
  .aemsaReading dt { font-size:11px; }
  .weatherDays { gap:5px; }
  .weatherDays .weatherDay { padding:12px 6px; }
  .weatherDays .weatherDayRain { font-size:20px; }
}

/* Today at a glance; the complete three-day forecast remains in the report.
   Verified alerts are separate and never hidden by this compact presentation. */
@media(max-width:768px),(max-height:520px){
  .weatherRibbon{padding:4px 8px;gap:4px 8px}
  .weatherForecastOverview{display:grid;grid-template-columns:minmax(68px,1fr) minmax(100px,1fr);align-items:center;gap:5px}
  .weatherForecastHeading{display:block}
  .weatherForecastHeading strong{font-size:10px;line-height:1.3}
  .weatherForecastHeading>span{display:none}
  .weatherMiniDays{display:block}
  .weatherMiniDay{grid-template-columns:22px minmax(0,1fr);gap:0 3px;padding:0;border:0;border-radius:0;background:transparent}
  .weatherMiniDay:not(:first-child){display:none}
  .weatherMiniLabel{font-size:10px}.weatherMiniRain{font-size:13px}
  .weatherMiniRain::after{content:' / día';font-size:9px;font-weight:400}
  .weatherMiniCondition{font-size:9px}
  .weatherGlyph{width:22px;transform:scale(.75);transform-origin:left center}
  .weatherRibbonActions{max-width:76px;gap:2px}
  .weatherRibbon button{min-height:44px;padding:5px 8px;font-size:10px}
  .weatherSmnStatus{font-size:8px;line-height:1.2;max-width:76px}
  .weatherVerifiedAlert{padding:7px;gap:6px}
}