/* =============================================================================
   Weather Alert ES — Frontend Styles v1.1.0
   ============================================================================= */

:root {
  --wae-bg:        #1a202e;
  --wae-surface:   #2a3448;
  --wae-surface2:  #323d54;
  --wae-border:    rgba(255,255,255,.08);
  --wae-text:      #e2e8f0;
  --wae-muted:     #94a3b8;
  --wae-accent:    #38bdf8;
  --wae-radius:    1rem;
  --wae-shadow:    0 4px 24px rgba(0,0,0,.35);
  --wae-font:      'Geist','DM Sans',system-ui,sans-serif;
}

[class^="wae-"],[class*=" wae-"] { box-sizing:border-box; font-family:var(--wae-font); color:var(--wae-text); }

/* ── Skeleton ─────────────────────────────────────────────────────────────── */
@keyframes wae-shimmer {
  0%   { background-position:-400px 0 }
  100% { background-position: 400px 0 }
}
.wae-skeleton {
  background:linear-gradient(90deg,var(--wae-surface) 25%,var(--wae-surface2) 50%,var(--wae-surface) 75%);
  background-size:800px 100%;
  animation:wae-shimmer 1.4s ease infinite;
  border-radius:var(--wae-radius);
}
.wae-skeleton--tall { height:160px; width:100%; }
.wae-skeleton--card { height:210px; width:110px; flex-shrink:0; border-radius:var(--wae-radius); }

/* ── Compact Widget ───────────────────────────────────────────────────────── */
.wae-widget {
  background:var(--wae-bg); border:1px solid var(--wae-border);
  border-radius:var(--wae-radius); padding:1.25rem;
  box-shadow:var(--wae-shadow); min-height:120px; position:relative; overflow:hidden;
}
.wae-widget__loading { position:absolute; inset:0; border-radius:var(--wae-radius); }
.wae-widget__content { display:flex; flex-direction:column; gap:.75rem; }
.wae-widget__main    { display:flex; align-items:center; gap:1rem; }
.wae-widget__icon-temp { display:flex; flex-direction:column; align-items:center; gap:.15rem; }
.wae-widget__icon    { font-size:2.5rem; line-height:1; }
.wae-widget__temp    { font-size:1.75rem; font-weight:700; color:var(--wae-accent); }
.wae-widget__info    { display:flex; flex-direction:column; gap:.25rem; }
.wae-widget__condition { font-size:.9rem; color:var(--wae-muted); }
.wae-widget__city    { font-size:1rem; font-weight:600; }
.wae-widget__details { display:flex; gap:1.25rem; font-size:.8rem; color:var(--wae-muted); }
.wae-widget__details span { display:flex; align-items:center; gap:.3rem; }
.wae-widget__updated { font-size:.7rem; color:var(--wae-muted); text-align:right; }
.wae-widget__error   { font-size:.85rem; color:#f87171; padding:.5rem; background:rgba(239,68,68,.1); border-radius:.5rem; }

/* ── Full Forecast ────────────────────────────────────────────────────────── */
.wae-full {
  background:var(--wae-bg); border:1px solid var(--wae-border);
  border-radius:var(--wae-radius); padding:1.75rem; box-shadow:var(--wae-shadow);
}
.wae-full__header { margin-bottom:1.25rem; }
.wae-full__current-content { display:flex; flex-wrap:wrap; gap:.75rem 1.5rem; align-items:flex-start; }
.wae-full__city-name { width:100%; font-size:1rem; color:var(--wae-muted); }
.wae-full__temp-row  { display:flex; align-items:center; gap:.6rem; }
.wae-full__icon-big  { font-size:3rem; line-height:1; }
.wae-full__temp-big  { font-size:3.5rem; font-weight:800; color:var(--wae-accent); line-height:1; }
.wae-full__condition-text { font-size:1rem; color:var(--wae-muted); align-self:flex-end; margin-bottom:.35rem; }
.wae-full__meta {
  width:100%; display:flex; flex-wrap:wrap; gap:.5rem 1.25rem;
  margin-top:.75rem; padding-top:.75rem; border-top:1px solid var(--wae-border);
  font-size:.85rem; color:var(--wae-muted);
}
.wae-full__meta strong { color:var(--wae-text); }
.wae-full__forecast-label {
  font-size:.75rem; text-transform:uppercase; letter-spacing:.1em;
  color:var(--wae-muted); margin:1.25rem 0 .6rem;
}
.wae-full__cards-loading,
.wae-full__cards {
  display:flex; gap:.75rem; overflow-x:auto; padding-bottom:.5rem;
  scrollbar-width:thin; scrollbar-color:var(--wae-surface2) transparent;
}
.wae-full__error { font-size:.85rem; color:#f87171; padding:.5rem; background:rgba(239,68,68,.1); border-radius:.5rem; }

/* Day cards */
.wae-day-card {
  background:var(--wae-surface); border:1px solid var(--wae-border);
  border-radius:var(--wae-radius); padding:1rem .75rem; min-width:105px; flex-shrink:0;
  display:flex; flex-direction:column; align-items:center; gap:.35rem;
  transition:background .2s, transform .15s; cursor:default;
}
.wae-day-card:hover { background:var(--wae-surface2); transform:translateY(-2px); }
.wae-day-card__dow       { font-size:.7rem; text-transform:uppercase; letter-spacing:.07em; color:var(--wae-muted); text-align:center; }
.wae-day-card__icon      { font-size:1.8rem; line-height:1; }
.wae-day-card__condition { font-size:.68rem; color:var(--wae-muted); text-align:center; max-width:90px; line-height:1.3; }
.wae-day-card__temp-max  { font-size:1.1rem; font-weight:700; color:#f97316; }
.wae-day-card__temp-min  { font-size:.85rem; color:var(--wae-muted); }
.wae-day-card__rain      { font-size:.75rem; color:var(--wae-accent); }

/* ── Boletim Narrativo ────────────────────────────────────────────────────── */
.wae-narrative {
  margin:1.25rem 0;
  background:var(--wae-surface);
  border:1px solid var(--wae-border);
  border-left:3px solid var(--wae-accent);
  border-radius:var(--wae-radius);
  padding:1.25rem 1.5rem;
}
.wae-narrative__loading { display:flex; flex-direction:column; gap:.5rem; }
.wae-narrative__content {
  font-size:.92rem;
  line-height:1.75;
  color:var(--wae-text);
}
.wae-narrative__content strong { color:#f0f4ff; }
.wae-narrative__content em     { color:var(--wae-muted); font-style:normal; font-size:.85rem; }
.wae-narrative__content hr     { border:none; border-top:1px solid var(--wae-border); margin:.75rem 0; }
.wae-narrative__error { font-size:.82rem; color:var(--wae-muted); font-style:italic; }

/* ── Alerts ───────────────────────────────────────────────────────────────── */
.wae-alerts { display:flex; flex-direction:column; gap:.75rem; }
.wae-alerts__empty {
  color:var(--wae-muted); font-size:.9rem; padding:1rem;
  background:var(--wae-surface); border-radius:var(--wae-radius); text-align:center;
}
.wae-alerts__demo-badge {
  font-size:.8rem; padding:.6rem 1rem;
  background:rgba(250,204,21,.1); border:1px dashed #facc15;
  border-radius:var(--wae-radius); color:var(--wae-muted); margin-bottom:.5rem;
}
.wae-alert-card { border-radius:var(--wae-radius); padding:1rem 1.25rem; display:flex; flex-direction:column; gap:.5rem; box-shadow:0 2px 10px rgba(0,0,0,.25); }
.wae-alert-card__header { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.wae-alert-card__icon   { font-size:1.4rem; }
.wae-alert-card__severity { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; padding:.15rem .5rem; background:rgba(0,0,0,.25); border-radius:9999px; }
.wae-alert-card__title  { font-weight:600; font-size:.95rem; }
.wae-alert-card__body   { font-size:.85rem; opacity:.92; line-height:1.55; }
.wae-alert-card__period { font-size:.75rem; opacity:.75; display:flex; gap:1rem; flex-wrap:wrap; }

/* ── Breaking News ────────────────────────────────────────────────────────── */
@keyframes wae-ticker { 0%{transform:translateX(100%)} 100%{transform:translateX(-100%)} }
.wae-breaking {
  display:flex; align-items:center; overflow:hidden;
  padding:.5rem 0; position:relative; z-index:9999; width:100%;
}
.wae-breaking__label {
  flex-shrink:0; font-size:.72rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.1em; padding:0 1rem; display:flex; align-items:center; gap:.4rem;
  white-space:nowrap; border-right:2px solid rgba(255,255,255,.3);
}
.wae-breaking--demo .wae-breaking__label { font-style:italic; opacity:.85; }
.wae-breaking__ticker-wrap { flex:1; overflow:hidden; }
.wae-breaking__ticker {
  display:inline-flex; align-items:center; white-space:nowrap;
  animation:wae-ticker 24s linear infinite; gap:.75rem; padding:0 1rem;
  font-size:.85rem; font-weight:600;
}
.wae-breaking:hover .wae-breaking__ticker { animation-play-state:paused; }
.wae-breaking__sep  { opacity:.45; }
.wae-breaking__close {
  flex-shrink:0; background:none; border:none; cursor:pointer; color:inherit;
  opacity:.65; padding:0 .75rem; font-size:1rem; transition:opacity .2s;
}
.wae-breaking__close:hover { opacity:1; }

/* ── Source ───────────────────────────────────────────────────────────────── */
.wae-full__source { margin-top:1.1rem; font-size:.72rem; color:var(--wae-muted); text-align:right; }
.wae-full__source a { color:var(--wae-accent); text-decoration:none; }
.wae-full__source a:hover { text-decoration:underline; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width:480px) {
  .wae-full { padding:1rem; }
  .wae-full__temp-big { font-size:2.75rem; }
  .wae-day-card { min-width:82px; padding:.75rem .5rem; }
  .wae-narrative { padding:1rem; }
}