.fwe-centers-ui { width: 100%; }

/* Filters */
.fwe-ui-filters{
  display:grid;
  grid-template-columns: 1fr 180px 180px auto auto;
  gap:10px;
  align-items:center;
  margin-bottom:12px;
}

.fwe-ui-filters input,
.fwe-ui-filters select{
  width:100%;
  padding:10px 12px;
  border:1px solid rgba(0,0,0,.15);
  border-radius:10px;
}

.fwe-ui-filters button{
  padding:10px 12px;
  border-radius:10px;
  cursor:pointer;
}

/* Meta top */
.fwe-ui-meta{
  display:flex;
  gap:14px;
  margin:10px 0 14px;
  font-size:14px;
  opacity:.85;
}

/* Cards grid */
.fwe-cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
}

.fwe-card{
  display:block;
  padding:14px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:14px;
  text-decoration:none;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, outline-color .12s ease;
}

.fwe-card-title{ font-weight:700; margin-bottom:6px; }
.fwe-card-meta{ font-size:13px; opacity:.85; margin-bottom:8px; }
.fwe-card-slug code{ font-size:12px; opacity:.8; }

.fwe-ui-empty{
  padding:14px;
  border:1px dashed rgba(0,0,0,.25);
  border-radius:12px;
  opacity:.8;
}

/* Active card */
.fwe-card.is-active{
  outline:2px solid rgba(0,0,0,.15);
  box-shadow: 0 0 0 3px rgba(0,0,0,.12) inset;
  transform: translateY(-1px);
}

.fwe-card .fwe-card-actions{ margin-top:10px; }
.fwe-card .fwe-card-link{ text-decoration: underline; }

/* Forecast inside card */
.fwe-card-forecast{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(0,0,0,.08);
  font-size:13px;
  opacity:.95;
}

.fwe-forecast-loading{ opacity:.75; }
.fwe-forecast-error{ opacity:.75; }

.fwe-forecast-row{
  display:flex;
  gap:8px;
  align-items:center;
  margin-bottom:6px;
}

.fwe-forecast-badge{
  padding:2px 10px;
  border-radius:999px;
  font-weight:700;
  font-size:12px;
  line-height:1.8;
  display:inline-block;
}

.fwe-forecast-badge.is-ok{ background:#e9f7ee; }
.fwe-forecast-badge.is-windy{ background:#fff3cd; }
.fwe-forecast-badge.is-snowy{ background:#e7f1ff; }
.fwe-forecast-badge.is-muted{ background:#f1f3f5; }

.fwe-forecast-label{ font-weight:600; opacity:.9; }

.fwe-forecast-metrics{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  opacity:.9;
}

/* Forecast panel (si lo usas arriba del listado) */
.fwe-forecast-summary{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  padding:10px 0;
  border-bottom:1px solid rgba(0,0,0,.08);
  margin-bottom:10px;
}
.fwe-forecast-metric{ opacity:.9; }


/* Forecast grande (debajo del mapa) */
.fwe-ui-forecast {
  margin: 16px 0 18px;
}

.fwe-forecast.fwe-forecast-big {
  padding: 14px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 14px;
}

.fwe-forecast-days {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.fwe-forecast-day {
  padding: 10px;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 12px;
}


.fwe-forecast-actions {
  margin: 10px 0 14px;
}

.fwe-forecast-link {
  font-weight: 600;
  text-decoration: underline;
}


/* --- Forecast horizontal slider (days as columns) --- */
.fwe-forecast-days {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 8px 2px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.fwe-forecast-day {
  flex: 0 0 190px;           /* ancho de cada "columna" */
  scroll-snap-align: start;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  padding: 10px;
  background: #fff;
}

.fwe-forecast-days::-webkit-scrollbar {
  height: 8px;
}
.fwe-forecast-days::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.15);
  border-radius: 999px;
}



/* =========================
   Forecast slider – cards
   ========================= */

.fwe-forecast-days {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x mandatory;
}

.fwe-forecast-day {
  background: #2b2f36; /* 🔥 fondo oscuro */
  color: #f1f1f1;
  min-width: 140px;
  padding: 14px 12px;
  border-radius: 12px;
  scroll-snap-align: start;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
}


.fwe-forecast-date {
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 0.9rem;
  color: #ffffff;
}

.fwe-forecast-row {
  font-size: 0.85rem;
  margin-bottom: 6px;
  color: #d6d6d6;
}

.fwe-forecast-day:hover {
  background: #323844;
  transition: background 0.2s ease;
}


/* Forecast days: slider + drag */
.fwe-forecast-days {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 6px 2px 10px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}

.fwe-forecast-days.is-dragging {
  cursor: grabbing;
}

.fwe-forecast-days::-webkit-scrollbar {
  height: 8px;
}
.fwe-forecast-days::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.15);
  border-radius: 999px;
}

/* Day card */
.fwe-forecast-day {
  min-width: 150px;
  background: #2b2f36;
  color: #f1f1f1;
  padding: 14px 12px;
  border-radius: 12px;
  scroll-snap-align: start;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}

.fwe-forecast-day * { user-select: none; }

.fwe-forecast-date {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  margin-bottom: 10px;
  font-size: 0.92rem;
  color: #fff;
}

.fwe-forecast-icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.fwe-forecast-row {
  font-size: 0.85rem;
  margin-bottom: 6px;
  color: #d6d6d6;
}


.fwe-ui-top { margin: 16px 0; }

.fwe-top-title{
  font-weight: 700;
  font-size: 18px;
  margin: 0 0 10px 0;
}

.fwe-top-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 900px){
  .fwe-top-grid{ grid-template-columns: 1fr; }
}

.fwe-top-card{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  border-radius: 14px;
  padding: 12px;
  cursor: pointer;
}

.fwe-top-card:hover{
  background: rgba(255,255,255,.09);
}

.fwe-top-card-head{
  display:flex;
  justify-content: space-between;
  align-items:center;
  margin-bottom: 6px;
  opacity:.9;
}

.fwe-top-rank{ font-weight: 700; }
.fwe-top-score{ font-weight: 700; }

.fwe-top-title{ font-weight: 800; font-size: 16px; }
.fwe-top-meta{ opacity:.8; font-size: 12px; margin-top: 4px; }

.fwe-top-actions a{
  display:inline-block;
  margin-top: 8px;
  text-decoration: underline;
}

.fwe-mini-score{
  margin-top: 6px;
  opacity: .75;
  font-size: 12px;
}

.fwe-flash { animation: fweFlash 700ms ease; }
@keyframes fweFlash {
  0% { transform: scale(1); }
  30% { transform: scale(1.01); }
  100% { transform: scale(1); }
}

.fwe-card-badges { display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.fwe-chip {
  font-size: 12px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.06);
  white-space: nowrap;
}
.fwe-chip.is-snowy { background: rgba(0,120,255,.12); }
.fwe-chip.is-ok { background: rgba(0,160,80,.12); }
.fwe-chip.is-windy { background: rgba(255,140,0,.14); }







@media (max-width: 1024px) {
  .fwe-forecast-days { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .fwe-forecast-days { grid-template-columns: 1fr; }
}


/* Responsive */
@media (max-width: 1024px) {
  .fwe-ui-filters{ grid-template-columns: 1fr 1fr; }
  .fwe-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .fwe-ui-filters{ grid-template-columns: 1fr; }
  .fwe-cards{ grid-template-columns: 1fr; }
}