/* JDServer-Webs v6.4 — modules/recap/recap.css
 * Resumen semanal / mensual ("Clima local")
 * - Estética Apple-ish, coherente con air/indices
 */

#recap-page{
  margin: 18px 0 64px;
}

/* ----- Cabecera general (título + rango + resumen corto) ----- */

.recap-header{
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow-1);
  padding: 14px 18px 18px;
  margin-bottom: 16px;
}

.recap-topline{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.recap-top-main{
  min-width: 0;
}

.recap-subtitle{
  margin: 4px 0 0;
  font-size: .92rem;
  color: var(--muted);
}

/* Botones 7 / 30 días */

.recap-range-switch{
  display: inline-flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.recap-pill{
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  padding: 6px 14px;
  font-size: .88rem;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
}

.recap-pill:hover{
  background: var(--brand-50, color-mix(in oklab, var(--brand) 12%, transparent));
  border-color: var(--brand-200, color-mix(in oklab, var(--brand) 30%, transparent));
}

.recap-pill.active{
  background: linear-gradient(180deg, var(--brand-accent, var(--brand)), var(--brand));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}

/* Línea período / estación / BBDD + texto auto */

.recap-meta-row{
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr);
  gap: 14px;
  margin-top: 12px;
  font-size: .9rem;
}

.recap-meta-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.recap-tag{
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: .82rem;
  background: var(--bg-elevated, var(--card));
}

.recap-text{
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
}

/* ----- Grid principal: clima medio + precipitación ----- */

.recap-main-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 16px;
  margin-bottom: 18px;
}

.recap-card{
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow-1);
  padding: 14px 18px 16px;
}

.recap-card-header{
  margin-bottom: 10px;
}

.recap-card-title{
  margin: 0;
  font-size: 1.02rem;
}

.recap-card-sub{
  margin: 3px 0 0;
  font-size: .88rem;
  color: var(--muted);
}

/* Valor gordo + chips */

.recap-main-value{
  font-size: 2.1rem;
  font-weight: 600;
  line-height: 1.1;
  margin-top: 6px;
}

.recap-main-unit{
  font-size: 1.1rem;
  margin-left: 4px;
}

.recap-chips-row{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.recap-chip{
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: .84rem;
}

/* ----- Momentos destacados ----- */

.recap-highlights{
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow-1);
  padding: 14px 18px 18px;
  margin-top: 16px;
}

.recap-high-header{
  margin-bottom: 10px;
}

.recap-high-title{
  margin: 0;
  font-size: 1.02rem;
}

.recap-high-sub{
  margin: 3px 0 0;
  font-size: .88rem;
  color: var(--muted);
}

.recap-high-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.recap-high-item{
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg-elevated, var(--card));
  padding: 10px 12px;
}

.recap-high-label{
  font-size: .88rem;
  font-weight: 500;
}

.recap-high-dt{
  font-size: .82rem;
  color: var(--muted);
  margin-top: 2px;
}

.recap-high-value{
  margin-top: 4px;
  font-size: .95rem;
}

/* Estado vacío / error */

.recap-empty{
  font-size: .9rem;
  color: var(--muted);
}

/* ----- Bloque wiki / explicación ----- */

.recap-wiki{
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow-1);
  padding: 14px 18px 18px;
  margin-top: 16px;
}

.recap-wiki-head{
  margin-bottom: 10px;
}

.recap-wiki-title{
  margin: 0;
  font-size: 1.02rem;
}

.recap-wiki-sub{
  margin: 3px 0 0;
  font-size: .88rem;
  color: var(--muted);
}

.recap-wiki-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr);
  gap: 14px;
  margin-top: 10px;
}

.recap-wiki-block h4{
  margin: 0 0 6px;
  font-size: .96rem;
}

.recap-wiki-block p{
  margin: 3px 0;
  font-size: .87rem;
  color: var(--muted);
}

.recap-wiki-block ul{
  margin: 6px 0 0 1.1rem;
  padding: 0;
  font-size: .86rem;
  color: var(--muted);
}

/* ----- Gráficos ----- */

.recap-charts{
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow-1);
  padding: 14px 18px 18px;
  margin-top: 16px;
}

.recap-charts-head{
  margin-bottom: 10px;
}

.recap-charts-title{
  margin: 0;
  font-size: 1.02rem;
}

.recap-charts-sub{
  margin: 3px 0 0;
  font-size: .88rem;
  color: var(--muted);
}

.recap-charts-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr);
  gap: 16px;
  margin-top: 10px;
}

.recap-chart-card{
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg-elevated, var(--card));
  padding: 10px 12px 14px;
}

.recap-chart-card h4{
  margin: 0 0 6px;
  font-size: .95rem;
}

/* Que los canvas se adapten al ancho disponible */
.recap-chart-card canvas{
  display: block;
  width: 100%;
  max-height: 280px;
}

/* ----- Centrado del módulo recap en el layout ----- */

#recap-page,
#recap-page .recap-root,
#recap-page .recap-shell {
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}

/* ----- Responsive ----- */

@media (max-width: 880px){
  .recap-meta-row{
    grid-template-columns: minmax(0, 1fr);
  }
  .recap-main-grid{
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px){
  .recap-high-grid{
    grid-template-columns: minmax(0, 1fr);
  }
  .recap-wiki-grid{
    grid-template-columns: minmax(0, 1fr);
  }
  .recap-charts-grid{
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 520px){
  .recap-header{
    padding-inline: 12px;
  }
  .recap-card,
  .recap-highlights,
  .recap-wiki,
  .recap-charts{
    padding-inline: 12px;
  }
  .recap-main-value{
    font-size: 1.8rem;
  }
}