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

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

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

.ef-date-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin:0 0 18px;
  padding:12px 14px;
  border:1px solid color-mix(in srgb, var(--brand) 22%, var(--border));
  border-radius:20px;
  color:var(--text);
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--brand) 10%, var(--card)) 0%,
      color-mix(in srgb, var(--brand-2, var(--brand)) 7%, var(--card)) 100%);
  box-shadow:
    0 10px 28px rgba(2,6,23,.06),
    0 0 0 1px color-mix(in srgb, var(--brand) 5%, transparent) inset;
}

.ef-date-intro{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:max-content;
}

.ef-date-icon{
  display:grid;
  flex:0 0 auto;
  width:42px;
  height:42px;
  place-items:center;
  border:1px solid color-mix(in srgb, var(--brand) 28%, var(--border));
  border-radius:14px;
  color:var(--brand);
  background:color-mix(in srgb, var(--card) 84%, transparent);
  box-shadow:0 4px 14px rgba(2,6,23,.06);
}

.ef-date-icon svg{
  width:23px;
  height:23px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.ef-date-title{
  font-size:.98rem;
  font-weight:750;
  letter-spacing:-.01em;
  white-space:nowrap;
}

.ef-date-controls{
  display:flex;
  align-items:stretch;
  justify-content:flex-end;
  gap:8px;
  min-width:0;
}

.ef-date-field{
  display:grid;
  align-content:center;
  gap:1px;
  min-height:46px;
  padding:5px 11px 4px;
  border:1px solid color-mix(in srgb, var(--brand) 20%, var(--border));
  border-radius:14px;
  background:color-mix(in srgb, var(--card) 92%, transparent);
  box-shadow:0 2px 8px rgba(2,6,23,.04);
}

.ef-date-month{ min-width:154px; }
.ef-date-day{ min-width:78px; }

.ef-date-field-label{
  color:var(--muted);
  font-size:.68rem;
  font-weight:650;
  line-height:1;
}

.ef-date-select{
  width:100%;
  min-width:0;
  margin:0;
  padding:1px 20px 1px 0;
  border:0;
  outline:0;
  color:var(--text);
  -webkit-text-fill-color:var(--text);
  background:transparent;
  font:inherit;
  font-size:.94rem;
  font-weight:700;
  line-height:1.25;
  color-scheme:light dark;
}

.ef-date-select option{
  color:var(--text);
  background:var(--card);
}

.ef-date-field:focus-within,
.ef-date-nav:focus-visible,
.ef-date-today:focus-visible{
  border-color:color-mix(in srgb, var(--brand) 58%, var(--border));
  outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 24%, transparent);
}

.ef-date-nav,
.ef-date-today{
  min-height:46px;
  border:1px solid color-mix(in srgb, var(--brand) 24%, var(--border));
  border-radius:14px;
  color:var(--text);
  background:color-mix(in srgb, var(--card) 92%, transparent);
  box-shadow:0 2px 8px rgba(2,6,23,.04);
  cursor:pointer;
  transition:transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.ef-date-nav{
  width:46px;
  padding:0;
  font-size:1.75rem;
  line-height:1;
}

.ef-date-today{
  min-width:68px;
  padding:0 13px;
  font-size:.86rem;
  font-weight:750;
}

.ef-date-nav:hover,
.ef-date-today:hover:not(:disabled){
  border-color:color-mix(in srgb, var(--brand) 50%, var(--border));
  background:color-mix(in srgb, var(--brand) 13%, var(--card));
  box-shadow:0 5px 14px rgba(2,6,23,.08);
  transform:translateY(-1px);
}

.ef-date-today:disabled{
  cursor:default;
  color:color-mix(in srgb, var(--muted) 72%, transparent);
  border-color:var(--border);
  background:color-mix(in srgb, var(--card) 72%, transparent);
  box-shadow:none;
}

.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-date-toolbar{
    align-items:stretch;
    gap:11px;
    padding:12px;
    border-radius:18px;
  }

  .ef-date-intro{
    min-width:0;
  }

  .ef-date-icon{
    width:40px;
    height:40px;
    border-radius:13px;
  }

  .ef-date-controls{
    flex:1 1 auto;
  }

  .ef-date-month{
    flex:1 1 142px;
    min-width:124px;
  }

  .ef-date-day{
    flex:0 1 78px;
    min-width:70px;
  }

  .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;
  }
}

@media (max-width: 560px){
  .ef-date-toolbar{
    display:grid;
  }

  .ef-date-controls{
    display:grid;
    grid-template-columns:44px minmax(0, 1fr) minmax(72px, .58fr) 44px;
    gap:7px;
  }

  .ef-date-field,
  .ef-date-nav,
  .ef-date-today{
    min-height:46px;
  }

  .ef-date-previous{ grid-column:1; grid-row:1; }
  .ef-date-month{ grid-column:2; grid-row:1; min-width:0; }
  .ef-date-day{ grid-column:3; grid-row:1; min-width:0; }
  .ef-date-day .ef-date-select{ padding-right:6px; }
  .ef-date-next{ grid-column:4; grid-row:1; }
  .ef-date-today{ grid-column:2 / 4; grid-row:2; }

  .ef-date-nav{
    width:44px;
  }
}

@media (prefers-reduced-motion: reduce){
  .ef-date-nav,
  .ef-date-today{
    transition:none;
  }
}