/*! JDServer-Webs — modules/efemeride/efemeride.css */

#efemeride { margin: 12px 0 28px; }

.ef-head{
  display:grid;
  gap:14px;
  margin-bottom:18px;
}

.ef-hero{
  position:relative;
  overflow:hidden;
  overflow:clip;
  isolation:isolate;
  border:1px solid var(--border);
  border-radius:24px;
  background:
    radial-gradient(1200px 300px at 0% 0%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 60%),
    radial-gradient(900px 260px at 100% 100%, color-mix(in srgb, var(--brand-2, var(--brand)) 14%, transparent), transparent 62%),
    var(--card);
  box-shadow: 0 14px 40px rgba(2,6,23,.08);
}

.ef-hero-inner{
  padding:22px 20px;
  display:grid;
  gap:10px;
}

.ef-kicker{
  display:inline-flex;
  width:max-content;
  align-items:center;
  gap:.45rem;
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--card) 88%, transparent);
  padding:.38rem .72rem;
  border-radius:999px;
  font-size:.82rem;
  color:var(--muted);
  backdrop-filter: blur(8px);
}

.ef-title{
  font-size: clamp(1.45rem, 2vw, 2rem);
  line-height:1.08;
  font-weight:800;
  letter-spacing:-.02em;
}

.ef-subtitle{
  color:var(--muted);
  max-width:72ch;
  line-height:1.55;
}

.ef-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:4px;
}

.ef-chip{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.42rem .72rem;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--muted);
  font-size:.84rem;
}

.ef-section{
  margin-top:22px;
}

.ef-section > h3{
  margin:0 0 12px;
  font-size:1.08rem;
  font-weight:700;
  letter-spacing:-.01em;
}

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

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

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

.ef-card,
.ef-text-card,
.ef-mini-chart{
  position:relative;
  overflow:hidden;
  overflow:clip;
  isolation:isolate;
  border:1px solid var(--border);
  border-radius:22px;
  background:var(--card);
  box-shadow: 0 10px 28px rgba(2,6,23,.05);
}

/* KPI cards: tinte suave completo con color del slug */
.ef-card{
  padding:16px 15px;
  border-color: color-mix(in srgb, var(--brand) 14%, var(--border));
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--brand) 8%, var(--card)) 0%,
      color-mix(in srgb, var(--brand) 5%, var(--card)) 100%
    );
  box-shadow:
    0 10px 28px rgba(2,6,23,.05),
    0 0 0 1px color-mix(in srgb, var(--brand) 6%, transparent) inset;
}

.ef-card--hero{
  padding:18px 16px;
  min-height:148px;
}

.ef-card-label{
  position:relative;
  z-index:2;
  font-size:.9rem;
  color:var(--muted);
  margin-bottom:8px;
}

.ef-card-value{
  position:relative;
  z-index:2;
  font-size: clamp(1.55rem, 2.6vw, 2.15rem);
  line-height:1.05;
  font-weight:800;
  letter-spacing:-.03em;
}

.ef-card-unit{
  font-size:.95rem;
  color:var(--muted);
  margin-left:.2rem;
  font-weight:600;
}

.ef-card-sub{
  position:relative;
  z-index:2;
  margin-top:10px;
  color:var(--muted);
  font-size:.9rem;
  line-height:1.45;
}

.ef-card-note{
  position:relative;
  z-index:2;
  margin-top:6px;
  font-size:.83rem;
  color:var(--muted);
}

/* Quitamos el circulito decorativo antiguo */
.ef-card-accent{
  display:none;
}

.ef-rank{
  display:grid;
  gap:8px;
}

.ef-rank-item{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid var(--border);
  background: color-mix(in srgb, var(--card) 88%, transparent);
}

.ef-rank-pos{
  width:28px;
  height:28px;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-size:.82rem;
  font-weight:800;
  color:var(--brand);
  background: color-mix(in srgb, var(--brand) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--brand) 22%, var(--border));
}

.ef-rank-main{
  min-width:0;
}

.ef-rank-title{
  font-weight:650;
  line-height:1.2;
}

.ef-rank-sub{
  margin-top:2px;
  color:var(--muted);
  font-size:.84rem;
}

.ef-rank-val{
  font-weight:800;
  white-space:nowrap;
}

.ef-text-card{
  padding:16px;
}

.ef-text-card p{
  margin:.15rem 0 .65rem;
  line-height:1.6;
}

.ef-bullets{
  display:grid;
  gap:9px;
  margin:0;
  padding:0;
  list-style:none;
}

.ef-bullets li{
  padding:12px 13px;
  border-radius:16px;
  border:1px solid var(--border);
  background: color-mix(in srgb, var(--card) 88%, transparent);
  line-height:1.5;
}

.ef-mini-chart{
  padding:14px;
}

.ef-mini-chart-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}

.ef-mini-chart-title{
  font-weight:700;
}

.ef-mini-chart-meta{
  font-size:.84rem;
  color:var(--muted);
}

.ef-chart-legend{
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
  margin-bottom:10px;
}

.ef-chart-legend-item{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:var(--muted);
  font-size:.84rem;
}

.ef-chart-legend-swatch{
  display:inline-block;
  flex:0 0 auto;
}

.ef-legend-line{
  width:22px;
  height:0;
  border-top:3px solid currentColor;
  border-radius:999px;
}

.ef-legend-bar{
  width:16px;
  height:10px;
  border-radius:4px 4px 0 0;
  background:currentColor;
  opacity:.55;
}

.ef-legend-tmax{ color: var(--brand); }
.ef-legend-tmin{ color: #4f7cff; }
.ef-legend-rain{ color: #7c3aed; }
.ef-legend-pmax{ color: #f59e0b; }
.ef-legend-wind{ color: #ef4444; }

.ef-canvas-wrap{
  position:relative;
  min-height:280px;
  height:280px;
}

.ef-canvas{
  width:100%;
  height:100%;
  display:block;
  border-radius:16px;
}

.ef-empty,
.ef-error{
  border:1px solid var(--border);
  background:var(--card);
  border-radius:22px;
  padding:16px;
  color:var(--muted);
}

.ef-updated{
  margin-top:14px;
  color:var(--muted);
  font-size:.85rem;
}

@media (max-width: 1080px){
  .ef-grid-4{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .ef-grid-3{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px){
  .ef-grid,
  .ef-grid-3,
  .ef-grid-4{
    grid-template-columns:1fr;
  }

  .ef-hero-inner{
    padding:18px 16px;
  }

  .ef-card--hero{
    min-height:unset;
  }

  .ef-section:first-of-type .ef-grid-4,
  .ef-section:nth-of-type(2) .ef-grid-4,
  .ef-section:nth-of-type(4) .ef-grid-4,
  .ef-section:nth-of-type(5) .ef-grid-4{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .ef-mini-chart-head{
    flex-direction:column;
    align-items:flex-start;
  }

  .ef-canvas-wrap{
    min-height:330px;
    height:330px;
  }
}