/* ============================================================
   Vías Verdes Murcia v7 — Modal de Clima (R3a)
   ------------------------------------------------------------
   Rediseño high-end del modal de clima/aire siguiendo el handoff §5.7.
   Superficie SÓLIDA (sin glass pesado en el contenido), marca verde
   (#4A8C3F / #1A4A18), tipografía Manrope, double-bezel en los tiles,
   hairlines + sombras difusas, eyebrow tags y motion físico.

   Todas las clases con prefijo .wx- para no colisionar.
   NO toca: #weatherModal, #weatherModalClose, .modal-tab[data-tab],
   .modal-tab-content, [data-via], [data-day] (contrato de tests).
   ============================================================ */

:root {
  /* Marca: referencia los tokens del kit (.vvb-*) como fuente única (con fallback) */
  --wx-green: var(--vvb-green, #4A8C3F);
  --wx-green-dark: var(--vvb-green-dark, #1A4A18);
  --wx-green-light: #8DBA8A;
  --wx-green-soft: var(--color-brand-soft, #EAF1E7);
  --wx-green-softer: var(--color-brand-softer, #F4F8F2);
  --wx-ink: var(--text-primary, #1c2418);
  --wx-ink-soft: var(--text-secondary, #4F6661);
  --wx-line: var(--line, #E1E6DC);
  --wx-amber: var(--vvb-amber, #E8A13A);
  --wx-red: var(--vvb-red, #D6473B);
  --wx-sky: var(--vvb-sky, #3E89C9);
  --wx-white: #ffffff;
  --wx-sunset: #d98a3a;
  /* superficies adaptables (claro por defecto; ver bloque dark-theme) */
  --wx-surface: var(--surface, #ffffff); /* fondo del modal (para los fades del scroller) */
  --wx-card: var(--surface, #ffffff);    /* núcleo de tiles/bezels */
  --wx-chip-bg: #ffffff;          /* fondo de chip inactivo */
  --wx-chip-border: rgba(26, 74, 24, .14);
  --wx-scroll: #d4dccd;           /* thumb del scroll horizontal */
  --wx-track: #eceee7;            /* pista de barras (polen) */
  --wx-icon-disc: radial-gradient(circle at 38% 32%, #ffffff, #eef3ec); /* disco bajo iconos 3D */
  /* hairline + bezel tokens (propios del componente) */
  --wx-hairline: rgba(26, 74, 24, .08);
  --wx-hairline-2: rgba(26, 74, 24, .12);
  --wx-inset-hi: inset 0 1px 1px rgba(255, 255, 255, .5);
  --wx-shadow-tile: var(--shadow-card, 0 1px 3px rgba(20, 30, 15, .05));
  --wx-shadow-soft: var(--shadow-popover, 0 6px 22px rgba(15, 30, 12, .08));
  --wx-ease: cubic-bezier(.32, .72, 0, 1);
  --wx-font: 'Manrope', system-ui, sans-serif;
}

/* ---------- Shell del cuerpo: superficie sólida + fade-up ---------- */
#weatherModal .modal-content { background: var(--wx-surface); max-width: 520px; }
#weatherModalBody { max-height: 78vh; overflow-y: auto; }

.wx-modal {
  font-family: var(--wx-font);
  color: var(--wx-ink);
  background: var(--wx-surface);
  /* macro-whitespace dentro de lo razonable */
  padding: 18px 18px 20px;
  animation: wxFadeUp .42s var(--wx-ease) both;
}
@keyframes wxFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Header sólido del modal (rediseño del shell) */
.wx-header {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px;
  background: linear-gradient(135deg, var(--wx-green), var(--wx-green-dark));
  color: #fff;
}
.wx-header-ic {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .16);
  box-shadow: var(--wx-inset-hi);
}
.wx-header-ic svg { width: 22px; height: 22px; }
.wx-header-tt { flex: 1; min-width: 0; }
.wx-header-title { margin: 0; font-size: 17px; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; }
.wx-header-sub { font-size: 12.5px; font-weight: 600; opacity: .85; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Eyebrow tag (label de sección microscópico) ---------- */
.wx-eyebrow {
  display: inline-block;
  font-size: 10.5px; font-weight: 800; line-height: 1;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--wx-green-dark);
  background: var(--wx-green-soft);
  padding: 5px 9px; border-radius: 999px;
  margin: 18px 0 10px;
}
.wx-eyebrow:first-child { margin-top: 6px; }

/* ---------- Etiqueta "elige…" sobre los selectores ---------- */
.wx-pick-lb { margin: 2px 0 8px; }

/* ---------- Scroller con affordance (degradado en los bordes) ----------
   El wrapper recorta y pinta un fade a izquierda/derecha para indicar que
   hay más contenido desplazable. La pista en sí lleva el overflow. */
.wx-scroller { position: relative; margin: 0 -4px; }
.wx-scroller::before, .wx-scroller::after {
  content: ''; position: absolute; top: 0; bottom: 8px; width: 26px;
  pointer-events: none; z-index: 2; opacity: 0; transition: opacity .25s var(--wx-ease);
}
.wx-scroller::before { left: 0; background: linear-gradient(90deg, var(--wx-surface) 18%, transparent); }
.wx-scroller::after  { right: 0; background: linear-gradient(270deg, var(--wx-surface) 18%, transparent); }
.wx-scroller.has-left::before { opacity: 1; }
.wx-scroller.has-right::after { opacity: 1; }

.wx-vias { display: flex; gap: 8px; overflow-x: auto; padding: 2px 4px 8px; scrollbar-width: thin; scroll-snap-type: x proximity; }
.wx-vias .wmodal-chip { scroll-snap-align: start; }

/* Scroll horizontal compartido (vías / días / por-horas) */
.wx-vias::-webkit-scrollbar, .wx-days::-webkit-scrollbar, .wx-hourly::-webkit-scrollbar { height: 6px; }
.wx-vias::-webkit-scrollbar-track, .wx-days::-webkit-scrollbar-track, .wx-hourly::-webkit-scrollbar-track { background: transparent; }
.wx-vias::-webkit-scrollbar-thumb, .wx-days::-webkit-scrollbar-thumb, .wx-hourly::-webkit-scrollbar-thumb { background: var(--wx-scroll); border-radius: 99px; }
.wx-vias::-webkit-scrollbar-thumb:hover, .wx-days::-webkit-scrollbar-thumb:hover, .wx-hourly::-webkit-scrollbar-thumb:hover { background: var(--wx-green-light); }

/* Chips de vía y de día comparten base (selectores legacy .wmodal-chip + data-via/data-day) */
.wmodal-chip {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 38px; padding: 8px 14px; border-radius: 999px;
  font-family: var(--wx-font); font-size: 13px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
  border: 1.5px solid var(--wx-chip-border);
  background: var(--wx-chip-bg); color: var(--wx-ink);
  box-shadow: var(--wx-shadow-tile), var(--wx-inset-hi);
  transition: transform .2s var(--wx-ease), background .2s var(--wx-ease),
              color .2s var(--wx-ease), border-color .2s var(--wx-ease), box-shadow .2s var(--wx-ease);
}
.wmodal-chip:hover { transform: translateY(-1px); border-color: var(--wx-vc, var(--wx-green-light)); box-shadow: var(--wx-shadow-soft), var(--wx-inset-hi); }
.wmodal-chip:active { transform: scale(.97); }
.wmodal-chip-dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
  background: var(--wx-vc, var(--wx-green));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--wx-vc, var(--wx-green)) 22%, transparent);
}
.wmodal-chip.is-active {
  border-color: var(--wx-vc, var(--wx-green));
  background: var(--wx-vc, var(--wx-green));
  color: #fff;
  box-shadow: 0 5px 16px color-mix(in srgb, var(--wx-vc, var(--wx-green)) 40%, transparent), var(--wx-inset-hi);
}
.wmodal-chip.is-active .wmodal-chip-dot { background: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.4); }

/* ---------- Segmented (tabs Tiempo / Aire) — reusa .modal-tabs legacy ---------- */
#weatherModal .modal-tabs {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 3px; padding: 3px; margin: 4px 0 16px;
  background: var(--wx-green-soft); border-radius: 13px;
  box-shadow: inset 0 1px 2px rgba(26, 74, 24, .06);
}
#weatherModal .modal-tab {
  flex: none; padding: 9px 8px; border-radius: 10px; border: none; cursor: pointer;
  font-family: var(--wx-font); font-size: 13px; font-weight: 700;
  color: var(--wx-ink-soft); background: transparent;
  transition: background .25s var(--wx-ease), color .25s var(--wx-ease), box-shadow .25s var(--wx-ease);
}
#weatherModal .modal-tab:hover { background: rgba(255, 255, 255, .55); color: var(--wx-ink); }
#weatherModal .modal-tab.active {
  background: var(--wx-card); color: var(--wx-green-dark);
  box-shadow: var(--wx-shadow-tile), var(--wx-inset-hi);
}
#weatherModal .modal-tab-content { display: none; animation: wxFadeUp .34s var(--wx-ease) both; }
#weatherModal .modal-tab-content.active { display: block; }

/* ---------- Selector de día (tiles) ---------- */
.wx-days { display: flex; gap: 8px; overflow-x: auto; padding: 2px 4px 8px; margin-bottom: 14px; scrollbar-width: thin; scroll-snap-type: x proximity; }
.wx-day {
  flex: 1 0 auto; min-width: 66px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-height: 44px; padding: 10px 7px; border-radius: 16px; cursor: pointer;
  border: 1.5px solid var(--wx-chip-border); background: var(--wx-chip-bg); color: var(--wx-ink);
  box-shadow: var(--wx-shadow-tile), var(--wx-inset-hi);
  scroll-snap-align: start;
  transition: transform .2s var(--wx-ease), border-color .2s var(--wx-ease), background .2s var(--wx-ease), box-shadow .2s var(--wx-ease);
}
.wx-day:hover { transform: translateY(-2px); border-color: var(--wx-green-light); box-shadow: var(--wx-shadow-soft), var(--wx-inset-hi); }
.wx-day-name { font-size: 12px; font-weight: 800; text-transform: capitalize; letter-spacing: -.01em; }
/* contenedor del icono 3D con disco luminoso de fondo */
.wx-day-ic {
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--wx-icon-disc); margin: 1px 0;
}
.wx-day-ic svg { width: 26px; height: 26px; display: block; }
.wx-day-temps { font-size: 11px; font-weight: 800; color: var(--wx-ink-soft); }
.wx-day.is-active {
  border-color: var(--wx-green); background: var(--wx-green); color: #fff;
  box-shadow: 0 6px 18px rgba(74, 140, 63, .38), var(--wx-inset-hi);
}
.wx-day.is-active .wx-day-ic { background: rgba(255, 255, 255, .22); }
.wx-day.is-active .wx-day-temps { color: rgba(255, 255, 255, .9); }

/* ---------- Double-bezel: contenedor exterior + núcleo interior ---------- */
.wx-bezel {
  border-radius: 20px;
  padding: 5px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .9), var(--wx-green-softer));
  border: 1px solid var(--wx-hairline);
  box-shadow: var(--wx-shadow-soft);
}
.wx-bezel-core {
  border-radius: 16px;
  background: var(--wx-card);
  box-shadow: var(--wx-inset-hi), 0 1px 2px rgba(20, 30, 15, .04);
}

/* ---------- HERO (temperatura protagonista) ---------- */
.wx-hero { margin-bottom: 16px; }
.wx-hero-core { display: flex; align-items: center; gap: 18px; padding: 18px 20px; }
.wx-hero-ic {
  width: 84px; height: 84px; border-radius: 22px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 38% 30%, #ffffff, var(--wx-green-soft) 78%);
  box-shadow: var(--wx-inset-hi), inset 0 0 0 1px var(--wx-hairline);
}
.wx-hero-ic svg { width: 60px; height: 60px; display: block; filter: drop-shadow(0 3px 5px rgba(20, 40, 60, .14)); }
.wx-hero-body { flex: 1; min-width: 0; }
.wx-hero-row { display: flex; align-items: baseline; gap: 14px; }
.wx-hero-temp { font-size: 52px; font-weight: 800; line-height: .88; letter-spacing: -.03em; color: var(--wx-ink); font-family: var(--wx-font); }
.wx-hero-minmax { font-size: 12.5px; font-weight: 700; color: var(--wx-ink-soft); line-height: 1.4; white-space: nowrap; }
.wx-hero-cond { font-size: 13.5px; color: var(--wx-ink-soft); font-weight: 600; margin-top: 8px; }

/* ---------- Rejilla 2×2 de condiciones ---------- */
.wx-conds { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin-bottom: 4px; }
.wx-cond { padding: 4px; }
.wx-cond-core { display: flex; align-items: center; gap: 11px; padding: 12px 13px; }
.wx-cond-ic { width: 22px; height: 22px; flex-shrink: 0; }
.wx-cond-ic svg { width: 22px; height: 22px; }
.wx-cond-body { min-width: 0; }
.wx-cond-label { font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--wx-ink-soft); }
.wx-cond-val { font-size: 13.5px; font-weight: 700; color: var(--wx-ink); margin-top: 1px; line-height: 1.3; }

/* ---------- Por horas (scroll horizontal) ---------- */
.wx-hourly { display: flex; gap: 8px; overflow-x: auto; padding: 2px 4px 8px; scrollbar-width: thin; }
.wx-hour {
  flex: 0 0 auto; width: 62px; text-align: center;
  padding: 11px 4px; border-radius: 16px;
  border: 1px solid var(--wx-chip-border); background: var(--wx-card);
  box-shadow: var(--wx-shadow-tile), var(--wx-inset-hi);
  transition: transform .2s var(--wx-ease), border-color .2s var(--wx-ease);
}
.wx-hour:hover { transform: translateY(-2px); border-color: var(--wx-green-light); }
.wx-hour.is-now { border-color: var(--wx-green-light); background: var(--wx-green-soft); }
.wx-hour-t { font-size: 11.5px; font-weight: 800; color: var(--wx-ink-soft); }
.wx-hour svg { width: 30px; height: 30px; margin: 6px auto; display: block; filter: drop-shadow(0 1.5px 2.5px rgba(20, 40, 60, .12)); }
.wx-hour-temp { font-size: 15px; font-weight: 800; color: var(--wx-ink); }
.wx-hour-rain { font-size: 11px; font-weight: 700; color: var(--wx-sky); margin-top: 2px; }

/* ---------- AIRE: hero AQI ---------- */
.wx-aqi { margin-bottom: 4px; }
.wx-aqi-core { display: flex; align-items: center; gap: 16px; padding: 16px 18px; }
.wx-aqi-badge {
  width: 66px; height: 66px; border-radius: 16px; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #fff; background: var(--wx-aqi, var(--wx-green));
  box-shadow: var(--wx-inset-hi), 0 4px 14px color-mix(in srgb, var(--wx-aqi, var(--wx-green)) 35%, transparent);
}
.wx-aqi-num { font-size: 26px; font-weight: 800; line-height: 1; }
.wx-aqi-tag { font-size: 9px; font-weight: 800; letter-spacing: .12em; opacity: .92; margin-top: 2px; }
.wx-aqi-body { flex: 1; min-width: 0; }
.wx-aqi-title { font-size: 16px; font-weight: 800; color: var(--wx-ink); letter-spacing: -.01em; }
.wx-aqi-copy { font-size: 12.5px; color: var(--wx-ink-soft); line-height: 1.45; margin-top: 4px; }

/* Barra semáforo de 5 segmentos */
.wx-semaphore { display: flex; gap: 4px; margin-top: 12px; }
.wx-seg { flex: 1; height: 7px; border-radius: 99px; background: var(--wx-seg-c); opacity: .25; transition: opacity .3s var(--wx-ease), transform .3s var(--wx-ease); }
.wx-seg.is-active { opacity: 1; transform: scaleY(1.25); }

/* ---------- Contaminantes (rejilla 3x2 = 6) ---------- */
.wx-pollutants { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.wx-pollutant { padding: 4px; }
.wx-pollutant-core { padding: 11px 6px; text-align: center; }
.wx-pollutant-l { font-size: 11px; font-weight: 800; color: var(--wx-ink-soft); letter-spacing: .02em; }
.wx-pollutant-v { font-size: 17px; font-weight: 800; color: var(--wx-ink); margin-top: 3px; line-height: 1; }
.wx-pollutant-u { font-size: 9.5px; font-weight: 600; color: var(--wx-ink-soft); margin-top: 3px; }

/* ---------- Polen (filas con barra de progreso) ---------- */
.wx-pollen { display: flex; flex-direction: column; gap: 9px; }
.wx-pollen-row { display: flex; align-items: center; gap: 12px; }
.wx-pollen-ic { width: 18px; height: 18px; flex-shrink: 0; color: var(--wx-pc, var(--wx-green)); }
.wx-pollen-ic svg { width: 18px; height: 18px; }
.wx-pollen-name { flex: 1; font-size: 13.5px; font-weight: 600; color: var(--wx-ink); min-width: 0; }
.wx-pollen-bar { width: 92px; height: 7px; flex-shrink: 0; border-radius: 99px; background: var(--wx-track); overflow: hidden; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .04); }
.wx-pollen-fill { height: 100%; border-radius: 99px; background: var(--wx-pc, var(--wx-green)); transition: width .45s var(--wx-ease); }
.wx-pollen-lvl { width: 70px; text-align: right; flex-shrink: 0; font-size: 12px; font-weight: 800; color: var(--wx-pc, var(--wx-green)); }

/* ---------- Estado de carga / no disponible ---------- */
.wx-msg { padding: 22px 16px; text-align: center; color: var(--wx-ink-soft); font-size: 13px; font-weight: 600; }

/* ---------- Foco visible ---------- */
.wmodal-chip:focus-visible, .wx-day:focus-visible, #weatherModal .modal-tab:focus-visible {
  outline: 2px solid var(--wx-green); outline-offset: 2px;
}

/* ---------- prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .wx-modal, #weatherModal .modal-tab-content { animation: none; }
  .wmodal-chip, .wx-day, .wx-hour, .wx-seg, .wx-pollen-fill,
  #weatherModal .modal-tab { transition: none; }
  .wmodal-chip:hover, .wx-day:hover, .wx-hour:hover { transform: none; }
}

/* ---------- Móvil ---------- */
@media (max-width: 600px) {
  .wx-modal { padding: 14px 14px 18px; }
  .wx-hero-core { gap: 14px; padding: 16px; }
  .wx-hero-ic { width: 72px; height: 72px; border-radius: 18px; }
  .wx-hero-ic svg { width: 52px; height: 52px; }
  .wx-hero-temp { font-size: 46px; }
}

/* ---------- v8: hero «cielo» (texto claro sobre degradado por condición) ---------- */
.wx-hero--sky .wx-hero-core { color: #fff; }
.wx-hero--sky .wx-hero-temp, .wx-hero--sky .wx-hero-minmax { color: #fff; text-shadow: 0 1px 2px rgba(10, 18, 8, .3); }
.wx-hero--sky .wx-hero-cond { color: #fff; background: var(--scrim-text, rgba(10, 18, 8, .55)); display: inline-block; padding: 3px 10px; border-radius: 999px; font-weight: 700; }
.wx-hero--sky .wx-hero-ic { color: #fff; }
.wx-aqi-strip { margin-top: 12px; }

/* ---------- v8: escritorio (≥1025px) — popover anclado bajo el control de clima ---------- */
@media (min-width: 1025px) {
  #weatherModal { pointer-events: none; }
  /* La .modal-overlay base no tiene estilos propios (div de 0px): aquí se le da
     geometría para que el clic-fuera cierre con el mapa visible (sin scrim). */
  #weatherModal .modal-overlay { position: fixed; inset: 0; background: transparent; pointer-events: auto; }
  #weatherModal .modal-content {
    pointer-events: auto;
    position: fixed; top: 168px; right: max(12px, env(safe-area-inset-right));
    left: auto; bottom: auto; transform: none; margin: 0;
    width: 400px; max-width: 400px;
    border-radius: 22px;
    /* overflow visible para que la flecha (::before, top -7px) no quede recortada;
       el recorte redondeado pasa a los dos hijos (cabecera y cuerpo). */
    overflow: visible;
    box-shadow: var(--shadow-popover, 0 20px 60px rgba(15, 30, 12, .3));
  }
  #weatherModal .modal-content::before {
    content: ""; position: absolute; top: -7px; right: 28px; width: 14px; height: 14px;
    background: var(--color-brand, #4A8C3F); /* funde con la cabecera verde */
    transform: rotate(45deg); border-radius: 2px;
  }
  #weatherModal .wx-header { border-radius: 22px 22px 0 0; }
  #weatherModalBody { max-height: min(64vh, 620px); border-radius: 0 0 22px 22px; }
}

/* ============================================================
   DARK THEME — el modal hereda <html data-theme="dark">.
   Sobrescribimos solo los tokens de superficie/tinta del componente;
   la marca verde y los degradados de los iconos 3D se mantienen.
   ============================================================ */
[data-theme="dark"] {
  --wx-ink: #ECF3F0;
  --wx-ink-soft: #AEC2BB;
  --wx-line: rgba(141, 186, 138, .22);
  --wx-hairline: rgba(141, 186, 138, .16);
  --wx-hairline-2: rgba(141, 186, 138, .24);
  --wx-green-soft: rgba(141, 186, 138, .16);
  --wx-green-softer: rgba(141, 186, 138, .08);
  --wx-surface: #14201d;
  --wx-card: #1d2c28;
  --wx-chip-bg: #243430;
  --wx-chip-border: rgba(141, 186, 138, .26);
  --wx-scroll: rgba(141, 186, 138, .32);
  --wx-track: rgba(141, 186, 138, .16);
  --wx-icon-disc: radial-gradient(circle at 38% 32%, #283a35, #1b2925);
  --wx-inset-hi: inset 0 1px 1px rgba(255, 255, 255, .06);
  --wx-shadow-tile: 0 1px 3px rgba(0, 0, 0, .35);
  --wx-shadow-soft: 0 8px 24px rgba(0, 0, 0, .45);
}
[data-theme="dark"] .wx-bezel {
  background: linear-gradient(180deg, rgba(141, 186, 138, .12), rgba(141, 186, 138, .04));
}
[data-theme="dark"] #weatherModal .modal-tabs {
  background: rgba(141, 186, 138, .12);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3);
}
[data-theme="dark"] #weatherModal .modal-tab.active { color: var(--wx-green-light); }
[data-theme="dark"] #weatherModal .modal-tab:hover { background: rgba(255, 255, 255, .06); color: var(--wx-ink); }
[data-theme="dark"] .wx-eyebrow { color: var(--wx-green-light); background: rgba(141, 186, 138, .14); }
[data-theme="dark"] .wx-day.is-active .wx-day-temps { color: rgba(255, 255, 255, .92); }
[data-theme="dark"] .wmodal-chip:focus-visible,
[data-theme="dark"] .wx-day:focus-visible,
[data-theme="dark"] #weatherModal .modal-tab:focus-visible { outline-color: var(--wx-green-light); }