/* JDServer-Webs v6.1 — Módulo 4: Temperatura & Humedad (aislado) */
:root{
  --mth-gap: 14px;
  --mth-radius: 18px;
  --mth-shadow: 0 10px 30px rgba(0,0,0,.22);
  --mth-border: rgba(255,255,255,.08);
  --mth-card-bg: rgba(255,255,255,.04);
}

html[data-theme="light"],
body[data-theme="light"],
.theme-light{
  --mth-border: rgba(0,0,0,.08);
  --mth-card-bg: rgba(0,0,0,.03);
  --mth-shadow: 0 10px 30px rgba(0,0,0,.10);
}

#models-temp-hum{
  margin-top: var(--mth-gap);
}

#models-temp-hum .mth-head{
  display:flex; align-items:center; justify-content:space-between;
  gap: 10px; margin-bottom: var(--mth-gap);
}

#models-temp-hum .mth-head h3{
  margin:0;
}

#models-temp-hum .mth-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr); /* 2×2 en escritorio */
  gap: var(--mth-gap);
}

#models-temp-hum .mth-card{
  border: 1px solid var(--mth-border);
  border-radius: var(--mth-radius);
  overflow: hidden;
  background: var(--mth-card-bg);
  box-shadow: var(--mth-shadow);
  display:flex; flex-direction:column;
  min-height: 320px; /* altura agradable */
}

#models-temp-hum .mth-card header{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border-bottom:1px solid var(--mth-border);
}

#models-temp-hum .mth-card header .title{
  font-weight:600; opacity:.95;
}

#models-temp-hum .mth-card .mth-embed{
  position: relative; flex:1; min-height: 260px;
}

#models-temp-hum .mth-card iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}

/* Responsive */
@media (max-width: 980px){
  #models-temp-hum .mth-grid{ grid-template-columns: 1fr; } /* 1 por fila en móvil */
}