/* JDServer-Webs v6.3 — modules/indices/indices.css
 * Índices meteorológicos (Heat index, Wind chill, UV, Fire risk…)
 * - Estilo Apple/Aurora, coherente con air.css y live/summary
 * - Layout responsive en cards
 */

#indices-page .page-title{
  margin: 4px 0 16px 0;
}

/* ==== Bloque principal (resumen actual) =============================== */

#indices-now{
  margin-top: 10px;
}

.idx-main-grid{
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.5fr);
  align-items: stretch;
}

.idx-card{
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 16px;
  padding: 14px 14px 12px;
  box-shadow: var(--shadow-2);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
}

.idx-card-header{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.idx-card-title{
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.idx-card-sub{
  margin: 0;
  font-size: .86rem;
  color: var(--muted);
}

/* Valor grande principal */
.idx-main-value{
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 1.1;
}

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

/* Línea secundaria / etiqueta tipo “feels like X” */
.idx-secondary{
  font-size: .92rem;
  color: var(--muted);
}

/* Pequeñas métricas en fila */
.idx-row{
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 4px;
}

.idx-chip{
  font-size: .8rem;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--card) 70%, transparent);
}

/* Card grande para “confort térmico” */
.idx-card-lg{
  grid-column: span 1;
}

/* ==== Galería de índices (cards secundarias) ========================= */

#indices-gallery{
  margin-top: 22px;
}

.idx-gallery-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.idx-gallery-title{
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.idx-gallery-sub{
  margin: 0;
  font-size: .86rem;
  color: var(--muted);
}

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

.idx-mini{
  font-size: .86rem;
}

.idx-mini .idx-card-title{
  font-size: .9rem;
}

.idx-mini-main{
  font-size: 1.4rem;
  font-weight: 600;
}

.idx-mini-main span{
  font-size: .95rem;
  opacity: .75;
  margin-left: 2px;
}

.idx-mini-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-top: 4px;
}

.idx-meta-item{
  font-size: .78rem;
  color: var(--muted);
}

/* ==== Bloque guía / wiki ============================================= */

#indices-guide{
  margin-top: 26px;
}

.idx-guide-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.idx-guide-title{
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.idx-guide-sub{
  margin: 0;
  font-size: .86rem;
  color: var(--muted);
}

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

.idx-guide-block{
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: var(--shadow-1, 0 2px 6px rgba(0,0,0,.04));
  font-size: .9rem;
}

.idx-guide-block h3{
  margin: 0 0 6px 0;
  font-size: .95rem;
}

.idx-guide-block p{
  margin: 0 0 4px 0;
}

.idx-guide-block ul{
  margin: 4px 0 0 1.1rem;
  padding: 0;
  font-size: .86rem;
}

/* ==== Badges de nivel de riesgo ===================================== */

.idx-level-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 500;
  border: 1px solid transparent;
}

/* Colores base (se pueden adaptar a la marca via variables si se quiere) */
:root{
  --idx-level-none-bg:   #e5e7eb;
  --idx-level-none-fg:   #111827;

  --idx-level-low-bg:    #d1fae5;
  --idx-level-low-fg:    #065f46;

  --idx-level-moderate-bg:#fef3c7;
  --idx-level-moderate-fg:#92400e;

  --idx-level-high-bg:   #fee2e2;
  --idx-level-high-fg:   #b91c1c;

  --idx-level-veryhigh-bg:#fee2ff;
  --idx-level-veryhigh-fg:#9d174d;

  --idx-level-extreme-bg:#111827;
  --idx-level-extreme-fg:#f9fafb;
}

.idx-level-none{
  background: var(--idx-level-none-bg);
  color: var(--idx-level-none-fg);
  border-color: color-mix(in oklab, var(--idx-level-none-fg) 12%, transparent);
}

.idx-level-low{
  background: var(--idx-level-low-bg);
  color: var(--idx-level-low-fg);
  border-color: color-mix(in oklab, var(--idx-level-low-fg) 12%, transparent);
}

.idx-level-moderate{
  background: var(--idx-level-moderate-bg);
  color: var(--idx-level-moderate-fg);
  border-color: color-mix(in oklab, var(--idx-level-moderate-fg) 18%, transparent);
}

.idx-level-high{
  background: var(--idx-level-high-bg);
  color: var(--idx-level-high-fg);
  border-color: color-mix(in oklab, var(--idx-level-high-fg) 18%, transparent);
}

.idx-level-veryhigh{
  background: var(--idx-level-veryhigh-bg);
  color: var(--idx-level-veryhigh-fg);
  border-color: color-mix(in oklab, var(--idx-level-veryhigh-fg) 22%, transparent);
}

.idx-level-extreme{
  background: var(--idx-level-extreme-bg);
  color: var(--idx-level-extreme-fg);
  border-color: var(--idx-level-extreme-fg);
}

/* ==== Responsive ====================================================== */

@media (max-width: 960px){
  .idx-main-grid{
    grid-template-columns: minmax(0, 1fr);
  }
  .idx-card-lg{
    grid-column: auto;
  }
  .idx-gallery-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .idx-guide-grid{
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px){
  .idx-gallery-grid{
    grid-template-columns: minmax(0, 1fr);
  }
}