/* 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);
  }
}

/* Índices que no aplican en las condiciones actuales */
.idx-na{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:2px 9px;
  border-radius:999px;
  border:1px solid var(--border);
  background:color-mix(in oklab, var(--card) 80%, transparent);
  color:var(--muted);
  font-size:.9rem;
  font-weight:600;
}


/* PATCH JDS indices badges clean mobile v6.3.1
   - Badges más limpios tipo píldora
   - En móvil ocultamos la etiqueta secundaria: Confort / Nivell UV / Risc
   - Evita dobles líneas raras y deja solo el estado: Calor intens, Nul, Risc alt...
*/
#indices-page .idx-card-header{
  align-items:flex-start;
}

#indices-page .idx-card-header > div:first-child{
  min-width:0;
  flex:1 1 auto;
}

#indices-page .idx-level-badge{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:34px;
  padding:6px 12px;
  border-radius:999px;
  font-size:.78rem;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.46),
    0 4px 12px rgba(15,23,42,.055);
}

#indices-page .idx-level-badge span{
  font-size:.72rem;
  font-weight:650;
  opacity:.68;
  line-height:1;
}

#indices-page .idx-level-badge strong{
  font-size:.86rem;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
}

/* WM-33A: integra los índices históricos en una superficie visual única. */
.idx-details-shell{
  position:relative;
  overflow:hidden;
  margin:0 0 24px;
  border:1px solid color-mix(in oklab, var(--brand) 42%, var(--border));
  border-radius:24px;
  background:linear-gradient(145deg,
    color-mix(in oklab, var(--card) 88%, var(--brand-50)),
    color-mix(in oklab, var(--card) 94%, var(--brand-accent) 6%));
  box-shadow:var(--shadow-1);
  padding:22px;
}

.idx-details-shell::before{
  content:"";
  position:absolute;
  inset:0 0 auto auto;
  width:280px;
  height:180px;
  pointer-events:none;
  background:radial-gradient(circle at 100% 0,
    color-mix(in oklab, var(--brand-accent) 22%, transparent),
    transparent 70%);
}

.idx-details-shell > #indices-now,
.idx-details-shell > #indices-gallery,
.idx-details-shell > #indices-guide{
  position:relative;
}

.idx-details-shell > #indices-now{
  margin-top:0;
}

.idx-details-shell > #indices-gallery,
.idx-details-shell > #indices-guide{
  margin-top:22px;
  padding-top:20px;
  border-top:1px solid color-mix(in oklab, var(--border) 78%, transparent);
}

.idx-details-shell .idx-card,
.idx-details-shell .idx-guide-block{
  border-radius:18px;
  background:color-mix(in oklab, var(--card) 94%, transparent);
  box-shadow:0 4px 16px rgba(15,23,42,.04);
}

@media (max-width:640px){
  .idx-details-shell{
    border-radius:20px;
    padding:16px;
  }

  .idx-details-shell > #indices-gallery,
  .idx-details-shell > #indices-guide{
    margin-top:18px;
    padding-top:18px;
  }
}

/* Colores algo más suaves, menos “cartel de emergencia” */
#indices-page .idx-level-none{
  background:color-mix(in oklab, var(--card) 72%, #94a3b8 28%);
  color:#334155;
  border-color:rgba(148,163,184,.38);
}

#indices-page .idx-level-low{
  background:color-mix(in oklab, var(--card) 70%, #10b981 30%);
  color:#047857;
  border-color:rgba(16,185,129,.34);
}

#indices-page .idx-level-moderate{
  background:color-mix(in oklab, var(--card) 68%, #f59e0b 32%);
  color:#92400e;
  border-color:rgba(245,158,11,.38);
}

#indices-page .idx-level-high{
  background:color-mix(in oklab, var(--card) 70%, #ef4444 30%);
  color:#b91c1c;
  border-color:rgba(239,68,68,.36);
}

#indices-page .idx-level-veryhigh{
  background:color-mix(in oklab, var(--card) 68%, #d946ef 32%);
  color:#9d174d;
  border-color:rgba(217,70,239,.38);
}

#indices-page .idx-level-extreme{
  background:linear-gradient(135deg, #111827, #374151);
  color:#f9fafb;
  border-color:rgba(249,250,251,.42);
}

/* En móvil: una sola idea dentro del badge. Mucho más limpio. */
@media (max-width: 640px){
  #indices-page .idx-card-header{
    gap:12px;
  }

  #indices-page .idx-level-badge{
    min-height:32px;
    padding:7px 12px;
    max-width:48%;
  }

  #indices-page .idx-level-badge span{
    display:none;
  }

  #indices-page .idx-level-badge strong{
    font-size:.84rem;
  }
}

/* En pantallas muy estrechas, bajamos un pelín para evitar apretujones */
@media (max-width: 380px){
  #indices-page .idx-level-badge{
    padding:6px 10px;
  }

  #indices-page .idx-level-badge strong{
    font-size:.80rem;
  }
}


/* PATCH JDS indices badges same desktop mobile v6.3.2
   Misma filosofía en escritorio y móvil:
   - Ocultamos la etiqueta secundaria del badge: Confort / Nivell UV / Risc
   - Dejamos solo el estado: Comfortable, Nul, Risc moderat...
*/
#indices-page .idx-level-badge span{
  display:none !important;
}

#indices-page .idx-level-badge{
  gap:0 !important;
  min-width:auto;
  padding-inline:14px;
}

#indices-page .idx-level-badge strong{
  font-size:.86rem;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
}