:root {
    --primary-color: #0284c7;
    --radius: 12px;
    --shadow: 0 1px 2px 0 rgb(0 0 0/0.05);
    --card-border: 1px solid rgb(207 231 251 / 92%);
    --muted: #64748b;
    --bg: #ffffff;
    --wpx-weather-forecast-image-size: 2rem;
    --grid-column-gap: 1rem;
    --grid-row-gap: 1rem;
    --grid-gap: 1rem;
    --grid-gap-x: 1rem;
    --grid-gap-y: 1rem;
    --grid-gap-x: 1rem;
    --station-marker-fill: #ffffff;
    --station-marker-stroke: #b1b2b2;
    --station-marker-icon: #b1b2b2;
    --station-marker-text: #0f172a;
}

.flex {
    display: flex;
}
.flex-1 {
    flex: 1 1 auto;
}

.wpx-chart-controller {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.wpx-chart-controller--select {
    position: relative;
    display: inline-flex;
    flex-direction: column;
}

.wpx-chart-controller-select-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
    background: none;
    border: 1px solid #ccc;
    width: 100%;
    text-align: left;
    white-space: nowrap;
}

.wpx-chart-controller-select-arrow {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.wpx-chart-controller--select.is-open .wpx-chart-controller-select-arrow {
    transform: rotate(180deg);
}

.wpx-chart-controller-select-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    margin-top: 4px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.wpx-chart-controller-select-dropdown button {
    border: none;
    border-radius: 0px;
}

.wpx-chart-controller--select.is-open .wpx-chart-controller-select-dropdown {
    display: flex;
    flex-direction: column;
}

.wpx-chart-controller-select-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 16px;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.wpx-chart-controller-select-option:hover {
    background-color: #f5f5f5;
}

.wpx-chart-controller-select-option.is-selected {
    font-weight: 600;
}

.wpx-chart-controller-select-option-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.wpx-weather-forecast {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.wpx-weather-forecast-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.wpx-weather-forecast-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--grid-gap, 1rem);
    grid-gap: var(--grid-gap, 1rem);
}
.wpx-weather-forecast-item-icon {
    width: 5em;
    height: 5em;
}

/*
Group 2xx: Thunderstorm
01d.png 	01n.png 	clear sky
02d.png 	02n.png 	few clouds
03d.png 	03n.png 	scattered clouds
04d.png 	04n.png 	broken clouds
09d.png 	09n.png 	shower rain
10d.png 	10n.png 	rain
11d.png 	11n.png 	thunderstorm
13d.png 	13n.png 	snow
50d.png 	50n.png 	mist

200	Thunderstorm	thunderstorm with light rain	 11d
201	Thunderstorm	thunderstorm with rain	 11d
202	Thunderstorm	thunderstorm with heavy rain	 11d
210	Thunderstorm	light thunderstorm	 11d
211	Thunderstorm	thunderstorm	 11d
212	Thunderstorm	heavy thunderstorm	 11d
221	Thunderstorm	ragged thunderstorm	 11d
230	Thunderstorm	thunderstorm with light drizzle	 11d
231	Thunderstorm	thunderstorm with drizzle	 11d
232	Thunderstorm	thunderstorm with heavy drizzle	 11d
Group 3xx: Drizzle
300	Drizzle	light intensity drizzle	 09d
301	Drizzle	drizzle	 09d
302	Drizzle	heavy intensity drizzle	 09d
310	Drizzle	light intensity drizzle rain	 09d
311	Drizzle	drizzle rain	 09d
312	Drizzle	heavy intensity drizzle rain	 09d
313	Drizzle	shower rain and drizzle	 09d
314	Drizzle	heavy shower rain and drizzle	 09d
321	Drizzle	shower drizzle	 09d
Group 5xx: Rain
500	Rain	light rain	 10d
501	Rain	moderate rain	 10d
502	Rain	heavy intensity rain	 10d
503	Rain	very heavy rain	 10d
504	Rain	extreme rain	 10d
511	Rain	freezing rain	 13d
520	Rain	light intensity shower rain	 09d
521	Rain	shower rain	 09d
522	Rain	heavy intensity shower rain	 09d
531	Rain	ragged shower rain	 09d
Group 6xx: Snow
600	Snow	light snow	 13d
601	Snow	snow	 13d
602	Snow	heavy snow	 13d
611	Snow	sleet	 13d
612	Snow	light shower sleet	 13d
613	Snow	shower sleet	 13d
615	Snow	light rain and snow	 13d
616	Snow	rain and snow	 13d
620	Snow	light shower snow	 13d
621	Snow	shower snow	 13d
622	Snow	heavy shower snow	 13d
Group 7xx: Atmosphere
701	Mist	mist	 50d
711	Smoke	smoke	 50d
721	Haze	haze	 50d
731	Dust	sand/dust whirls	 50d
741	Fog	fog	 50d
751	Sand	sand	 50d
761	Dust	dust	 50d
762	Ash	volcanic ash	 50d
771	Squall	squalls	 50d
781	Tornado	tornado	 50d
Group 800: Clear
800	Clear	clear sky	 01d
 01n
Group 80x: Clouds
801	Clouds	few clouds: 11-25%	 02d
 02n
802	Clouds	scattered clouds: 25-50%	 03d
 03n
803	Clouds	broken clouds: 51-84%	 04d
 04n
804	Clouds	overcast clouds: 85-100%	 04d
 04n
*/
/*
wi-day-sunny
f00d

wi-day-cloudy
f002

wi-day-cloudy-gusts
f000

wi-day-cloudy-windy
f001

wi-day-fog
f003

wi-day-hail
f004

wi-day-haze
f0b6

wi-day-lightning
f005

wi-day-rain
f008

wi-day-rain-mix
f006

wi-day-rain-wind
f007

wi-day-showers
f009

wi-day-sleet
f0b2

wi-day-sleet-storm
f068

wi-day-snow
f00a

wi-day-snow-thunderstorm
f06b

wi-day-snow-wind
f065

wi-day-sprinkle
f00b

wi-day-storm-showers
f00e

wi-day-sunny-overcast
f00c

wi-day-thunderstorm
f010

wi-day-windy
f085

wi-solar-eclipse
f06e

wi-hot
f072

wi-day-cloudy-high
f07d

wi-day-light-wind
f0c4
*/

.wpx-weather-forecast-icon-01d:before  {
    content: "\f00d";
}
.wpx-weather-forecast-icon-01n:before {
content: "\f00d";
}
.wpx-weather-forecast-icon-02d:before {
content: "\f002";
}
.wpx-weather-forecast-icon-02n:before {
content: "\f002";
}
.wpx-weather-forecast-icon-03d:before {
content: "\f000";
}
.wpx-weather-forecast-icon-03n:before {
content: "\f000";
}
.wpx-weather-forecast-icon-04d:before {
content: "\f001";
}
.wpx-weather-forecast-icon-04n:before {
content: "\f001";
}
.wpx-weather-forecast-icon-09d:before {
content: "\f008";
}
.wpx-weather-forecast-icon-09n:before {
content: "\f008";
}
.wpx-weather-forecast-icon-10d:before {
content: "\f01a";
}
.wpx-weather-forecast-icon-10n:before {
content: "\f01a";
}
.wpx-weather-forecast-icon-11d:before {
content: "\f06b";
}
.wpx-weather-forecast-icon-11n:before {
content: "\f06b";
}
.wpx-weather-forecast-icon-13d:before {
content: "\f00a";
}
.wpx-weather-forecast-icon-13n:before  {
content: "\f00a";
}
.wpx-weather-forecast-icon-50d:before {
content: "\f003";
}
.wpx-weather-forecast-icon-50n:before {
content: "\f003";
}

.wpx-weather-forecast-icon svg {
    background: #f8fafc;
    border-radius: 50%;
    padding: 0em;
    width: 3em;
    height: 3em;
}


.card {
    background:#fff;
    border-radius:var(--radius);
    border:var(--card-border);
    box-shadow:var(--shadow);
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    overflow:hidden;
}
.card .card-header{ padding:1em;margin:0;display:flex;align-items:center;gap:1rem; }
.card .card-header .wpx-stations-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 1.25em;
    border-radius: 50%;
    min-width: 1.8em;
    min-height: 1.8em;
}
.card .card-body { padding:1em;margin:0;}
.card .card-footer { padding:1em;margin:0;}

.card .card-footer > * {
    text-align: right;
    color: var(--footer-text-color, #999);
    font-size: 0.8em;
}

.wpx-stations-datatable-wrapper .wpx-stations-datatable-header-title-wrap{display:flex;align-items:center;gap:.5rem;}
.wpx-stations-datatable-wrapper .wpx-stations-datatable-header-title-wrap .card-title{margin:0;}
.wpx-stations-datatable-wrapper .wpx-stations-datatable-header-icon,
.wpx-ranking-wrapper .wpx-stations-datatable-header-icon {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color: #ffffff;
    background-color:  #0284c7;
    line-height:1;
    font-size: 1.25em;
    border-radius: 50%;
    min-width: 1.8em;
    min-height: 1.8em;
}
.wpx-stations-datatable-wrapper .wpx-stations-datatable-header-icon svg{width:1em;height:1em;}
.wpx-stations-datatable-wrapper .wpx-stations-datatable-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    text-decoration:none;
    line-height:1;
}
.wpx-stations-datatable-wrapper .wpx-stations-datatable-link:hover{text-decoration:underline;}
.wpx-stations-datatable-wrapper .wpx-stations-datatable-link-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    line-height:1;
}
.wpx-stations-datatable-wrapper .wpx-stations-datatable-link-icon svg{width:1em;height:1em;}
.card .top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px; flex: 1 0 auto; width: 100%;}
.card .city{font-weight:700;font-size:16px}
.card .meta{color:var(--muted);font-size:13px;margin-top:6px}
.card .temp-row{display:flex;align-items:center;gap:14px;}
.card .deg{font-size:42px;font-weight:700;color:#0f1724}
.card .icon{width:72px;height:72px;display:flex;align-items:center;justify-content:center;border-radius:12px}
.card .details{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.card .pill{background:#f8fafc;padding:8px 10px;border-radius:999px;font-size:13px;color:var(--muted);border:1px solid rgba(15,23,42,0.03)}
.card .footer{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:13px;margin-top:12px}
.card.elementor-post__cover {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.card .wpx-weather-forecast-icon-image {
    width: 3em;
    height: 3em;
}

.wpx-open-weather-daily-forecast-card .wpx-weather-forecast-carousel {
    overflow: hidden;
    padding: 0.25rem 0.125rem;
}

.wpx-open-weather-daily-forecast-card .wpx-weather-forecast-carousel .swiper-wrapper {
    display: flex;
    align-items: stretch;
    gap: var(--grid-gap, 1rem);
    grid-gap: var(--grid-gap, 1rem);
}

.wpx-open-weather-daily-forecast-card .wpx-weather-forecast-slide {
    width: clamp(120px, 24vw, 155px);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.35rem;
    padding: 0.75rem 0.625rem;
    text-align: center;
}

.wpx-open-weather-daily-forecast-card .wpx-weather-forecast-slide-day {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #0f172a;
    text-transform: uppercase;
}

.wpx-open-weather-daily-forecast-card .wpx-weather-forecast-slide-date {
    font-size: 0.75rem;
    color: #475569;
}

.wpx-open-weather-daily-forecast-card .wpx-weather-forecast-item-icon {
    width: auto;
    height: auto;
    line-height: 1;
}

.wpx-open-weather-daily-forecast-card .wpx-weather-forecast-item-icon i {
    font-size: 1.8rem;
    color: #0f172a;
}

.wpx-open-weather-daily-forecast-card .wpx-weather-forecast-item-icon .wpx-weather-forecast-icon-image {
    width: var(--wpx-weather-forecast-image-size, 2rem);
    height: var(--wpx-weather-forecast-image-size, 2rem);
    object-fit: contain;
}

.wpx-open-weather-daily-forecast-card .wpx-weather-forecast-slide-temps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    font-size: 0.9rem;
}

.wpx-open-weather-daily-forecast-card .wpx-weather-forecast-item-max {
    font-weight: 700;
    color: #0f172a;
}

.wpx-open-weather-daily-forecast-card .wpx-weather-forecast-item-min {
    font-weight: 600;
    color: #64748b;
}

.wpx-open-weather-daily-forecast-card .wpx-weather-forecast-slide-description {
    font-size: 0.72rem;
    color: #475569;
    line-height: 1.2;
}

.wpx-open-weather-daily-forecast-card .wpx-weather-forecast-empty {
    color: #64748b;
    font-size: 0.85rem;
}

.wpx-open-weather-daily-forecast-card .wpx-weather-forecast-carousel-nav {
    margin-top: 0.7rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.4rem;
}

.wpx-open-weather-daily-forecast-card .wpx-weather-forecast-carousel-prev,
.wpx-open-weather-daily-forecast-card .wpx-weather-forecast-carousel-next {
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 999px;
    width: 32px;
    height: 32px;
    line-height: 1;
    background: #fff;
    color: #0f172a;
    cursor: pointer;
    padding: 0;
    font-size: 1.2rem;
}

.wpx-open-weather-daily-forecast-card .wpx-weather-forecast-carousel-pagination {
    margin-top: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wpx-open-weather-daily-forecast-card .wpx-weather-forecast-carousel-pagination .swiper-pagination-bullet {
    width: 6px;
    height: 6px;
    opacity: 0.35;
}

.wpx-open-weather-daily-forecast-card .wpx-weather-forecast-carousel-pagination .swiper-pagination-bullet-active {
    opacity: 1;
    background: #0f172a;
}

.wpx-leaflet-attributes {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0em;
    overflow-x: auto;
    border-top: 1px solid #e2e8f0;
}

button.wpx-leaflet-tab {
    appearance: none;
    background: transparent;
    color: #475569;
    position: relative;
    min-width: 70px;
    padding: 0.55rem 0.6rem 0.5rem;
    cursor: pointer;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    flex: 1 0 auto;

    border-width: 0px 1px 0px 0px;
    padding: 0.5em;
    border-radius: 0px !important;
    border-color: #dfdfdf;
}

.wpx-leaflet-tab[data-tooltip]:hover::after,
.wpx-leaflet-tab[data-tooltip]:focus-visible::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    transform: translateX(-50%);
    background: #0f172a;
    color: #ffffff;
    padding: 0.3rem 0.5rem;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.15;
    white-space: nowrap;
    pointer-events: none;
    z-index: 15;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.25);
}

.wpx-leaflet-tab[data-tooltip]:hover::before,
.wpx-leaflet-tab[data-tooltip]:focus-visible::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(100% + 4px);
    transform: translateX(-50%);
    border-width: 6px 5px 0 5px;
    border-style: solid;
    border-color: #0f172a transparent transparent transparent;
    pointer-events: none;
    z-index: 15;
}

.wpx-leaflet-tab:hover {
    color: #0f172a;
    background: rgba(148, 163, 184, 0.12);
}

.wpx-leaflet-tab.is-active {
    color: #0284c7;
    border-bottom-color: #0284c7;
    background: #ffffff;
}

.wpx-leaflet-tab__icon i {
    font-size: 18px;
    line-height: 1;
}

.wpx-leaflet-tab__label {
    font-size: 10px;
    white-space: nowrap;
}


.wpx-leaflet-divicon {
    background: transparent;
    border: 0;
}

.station-marker-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 80px;
    height: 54px;
    pointer-events: auto;
    font-family: inherit;
}

.station-marker-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-width: 54px;
    max-width: 78px;
    height: 34px;
    padding: 0 0.55rem;
    border-radius: 999px;
    background: var(--station-marker-fill, #ffffff);
    border: 1px solid var(--station-marker-stroke, #b1b2b2);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
    line-height: 1;
}

.station-marker-glyph {
    color: var(--station-marker-icon, #0284c7);
    font-size: 0.72rem;
    font-weight: 800;
}

.station-marker-value {
    color: var(--station-marker-text, #0f172a);
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 48px;
}

.station-marker-tip {
    width: 14px;
    height: 14px;
    margin-top: -2px;
    transform: rotate(45deg);
    background: var(--station-marker-fill, #ffffff);
    border-right: 1px solid var(--station-marker-stroke, #b1b2b2);
    border-bottom: 1px solid var(--station-marker-stroke, #b1b2b2);
}

.wpx-marker-svg svg {
    width: 72px;
    height: 94px;
}

.wpx-marker-svg circle {
    fill: #ffffff;
    stroke: #0ea5e9;
    stroke-width: 4;
}

.wpx-marker-svg path {
    fill: #ffffff;
    stroke: #0ea5e9;
    stroke-width: 4;
}

.wpx-marker-svg__icon {
    font-size: 16px;
    font-weight: 700;
    fill: #0284c7;
}

.wpx-marker-svg__value {
    font-size: 12px;
    font-weight: 700;
    fill: #0f172a;
}

/* Color bar legend */
.wpx-colorbar-control {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.15);
    border: 1px solid rgba(15, 23, 42, 0.08);
    padding: 0.5rem 0.75rem;
    min-width: 180px;
    max-width: 260px;
    pointer-events: none;
}

.wpx-colorbar-label {
    font-size: 0.68rem;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.3rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wpx-colorbar-bar {
    height: 10px;
    border-radius: 999px;
    width: 100%;
    margin-bottom: 0.25rem;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.1);
}

.wpx-colorbar-minmax {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wpx-colorbar-min,
.wpx-colorbar-max {
    font-size: 0.68rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1;
}

/* ─── Datatable Controller ────────────────────────────────────────────────── */

.wpx-datatable-controller {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.wpx-datatable-controller-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 18px;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--primary-color, #0284c7);
    background-color: transparent;
    border: 1.5px solid var(--primary-color, #0284c7);
    border-radius: 999px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    white-space: nowrap;
    appearance: none;
    -webkit-appearance: none;
}

.wpx-datatable-controller-btn:hover:not(.is-active) {
    background-color: color-mix(in srgb, var(--primary-color, #0284c7) 10%, transparent);
}

.wpx-datatable-controller-btn.is-active {
    background-color: var(--primary-color, #0284c7);
    color: #ffffff;
    border-color: var(--primary-color, #0284c7);
    box-shadow: 0 2px 6px -1px rgba(2, 132, 199, 0.35);
}

.wpx-datatable-controller-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1em;
    line-height: 1;
}

.wpx-datatable-controller-btn-icon svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
}

.wpx-datatable-controller-btn-label {
    line-height: 1;
}

/* ─── Ranking (Tabla de estaciones) – Grupos / Filtros ─────────────────────── */

.wpx-ranking-groups {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding-top: 0;
    padding-bottom: 1rem;
}

.wpx-ranking-groups-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 18px;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--primary-color, #0284c7);
    background-color: transparent;
    border: 1.5px solid var(--primary-color, #0284c7);
    border-radius: 999px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    white-space: nowrap;
    appearance: none;
    -webkit-appearance: none;
}

.wpx-ranking-groups-btn:hover:not(.is-active) {
    background-color: color-mix(in srgb, var(--primary-color, #0284c7) 10%, transparent);
}

.wpx-ranking-groups-btn.is-active {
    background-color: var(--primary-color, #0284c7);
    color: #ffffff;
    border-color: var(--primary-color, #0284c7);
    box-shadow: 0 2px 6px -1px rgba(2, 132, 199, 0.35);
}

/* Cabeceras agrupadas (Temperatura, Hum, Viento, Precipitación) */
.wpx-ranking-table-grouped-headers .wpx-ranking-header-row-group th {
    vertical-align: middle;
    text-align: center;
}

.wpx-ranking-table-grouped-headers .wpx-ranking-th-group {
    font-weight: 600;
    background-color: color-mix(in srgb, var(--primary-color, #0284c7) 8%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--primary-color, #0284c7) 20%, transparent);
}

.wpx-ranking-table-grouped-headers .wpx-ranking-header-row-sub th {
    font-weight: 500;
    font-size: 0.875em;
}

.wpx-aemet-alert-banner {
    padding: 1em;
    display: flex;
    box-shadow: var(--shadow);
    border:var(--card-border);
}

.wpx-aemet-alert-content {
    flex: 1 auto;
}

.wpx-aemet-alert-icon {
    padding: 1em;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wpx-aemet-alert-link {
    background: transparent;
    border: 1px solid #000;
    justify-content: center;
    align-items: center;
    display: flex;
    padding: 0em 2em;
}

.wpx-aemet-alerts-widget .card-body {
    padding: 0;
    margin: 0;
}

.wpx-aemet-legend.leaflet-control {
    background: #fff;
    padding: 0.75em;
    border-radius: 10px;
}
.elementor-widget-wpx-windy-leaflet-map .card-body {
    padding: 0;
    margin: 0;
}

/* ── AEMET Maritime Widgets ────────────────────────── */

.wpx-aemet-maritime-widget {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.wpx-aemet-maritime-grid {
    display: grid;
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.wpx-aemet-maritime-card {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
    transition: box-shadow .2s;
}

.wpx-aemet-maritime-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, .16);
}

.wpx-aemet-maritime-card-header {
    display: flex;
    align-items: center;
    padding: 12px 18px;
    background-color: #fff;
}

.wpx-aemet-maritime-card-zone-name {
    font-weight: 700;
    font-size: 14px;
    line-height: 1.3;
}

.wpx-aemet-maritime-card-body {
    flex: 1;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: #fff;
}

.wpx-aemet-maritime-card-text {
    font-size: 13px;
    color: #444;
    line-height: 1.6;
    margin: 0;
}

.wpx-aemet-maritime-situacion,
.wpx-aemet-maritime-aviso,
.wpx-aemet-maritime-tendencia {
    padding: 14px 18px;
    border-radius: 10px;
    line-height: 1.5;
}

.wpx-aemet-maritime-situacion {
    background-color: #fff;
    padding:1em;
}

.wpx-aemet-maritime-aviso {
    background-color: #FFDE6E;
}

.wpx-aemet-maritime-tendencia {
    background-color: #f0fdf4;
    border-left: 4px solid #16a34a;
}

.wpx-aemet-maritime-situacion strong,
.wpx-aemet-maritime-aviso strong,
.wpx-aemet-maritime-tendencia strong {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
}

.wpx-aemet-maritime-situacion p,
.wpx-aemet-maritime-aviso p,
.wpx-aemet-maritime-tendencia p {
    margin: 0 0 6px;
    font-size: 13px;
    color: #333;
}

.wpx-aemet-maritime-dates {
    font-size: 12px;
    color: #777;
}

.wpx-aemet-maritime-subzone {
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 10px;
}

.wpx-aemet-maritime-subzone:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.wpx-aemet-maritime-subzone-name {
    font-weight: 600;
    font-size: 13px;
    color: #0369a1;
    padding: 6px 10px;
    border-radius: 6px;
    background-color: #e0f2fe;
    margin-bottom: 6px;
}

.wpx-aemet-maritime-footer {
    text-align: right;
    padding: 4px 0;
}

.wpx-aemet-maritime-empty {
    padding: 16px;
    text-align: center;
    color: #888;
}

.wpx-aemet-maritime-title {
    margin: 0 0 4px;
}

@media (max-width: 768px) {
    .wpx-aemet-maritime-grid {
        grid-template-columns: 1fr !important;
    }

    .wpx-aemet-alert-banner {
        flex-direction: column;
        width: 90%;
    }

    .wpx-aemet-alert-link {
        padding: 1em 2em;
        margin-top: 1em;
    }
}


.leaflet-container {
    z-index: 80;
}

.wpx-chart-controller.is-disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* ─── Chart loading overlay ────────────────────────────────────────────── */
.wpx-stations-chart-container {
    position: relative;
    min-height: 120px;
}
.wpx-stations-chart-loader {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    background: rgba(255, 255, 255, .6);
    pointer-events: none;
    z-index: 2;
    color: currentColor;
}
.wpx-stations-chart-container.is-loading .wpx-stations-chart-loader {
    display: flex;
}
.wpx-stations-chart-spinner {
    width: 24px;
    height: 24px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    opacity: .6;
    animation: wpx-stations-chart-spin .9s linear infinite;
}
.wpx-stations-chart-loader-text {
    font-size: .9em;
    opacity: .8;
}
@keyframes wpx-stations-chart-spin {
    to { transform: rotate(360deg); }
}