/* ================================
   MODELS CORE — JDServer-Webs v6.1
   Grid 4 modelos + recorte de leyenda inferior Windy
   ================================ */

:root{
  --mm-border: rgba(0,0,0,.12);
  --mm-row-alt: rgba(0,0,0,.04);
  --mm-shadow: 0 10px 30px rgba(0,0,0,.18);
  --mm-crop-bottom: 38px; /* recortamos la franja inferior del iframe */
}

html[data-theme="dark"],
body[data-theme="dark"]{
  --mm-border: rgba(255,255,255,.12);
  --mm-row-alt: rgba(255,255,255,.06);
}

/* Contenedor principal del módulo */
#models-core{
  display:flex;
  flex-direction:column;
  gap:18px;
  margin-top:20px;
}

/* Barra de herramientas (solo capas) */
.models-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:space-between;
}

.models-toolbar .group{ display:flex; flex-wrap:wrap; gap:8px; }

.models-toolbar button{
  padding:6px 12px;
  border-radius:8px;
  border:1px solid var(--mm-border);
  background:var(--mm-row-alt);
  color:inherit;
  cursor:pointer;
}
.models-toolbar button.active{
  background:var(--brand-primary, #38bdf8);
  color:#fff; border-color:transparent;
}

/* Título pequeño sobre cada mapa */
.model-card .model-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 10px; font-weight:600; opacity:.9;
}

/* Rejilla 2×2 de modelos */
.models-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:16px;
}

/* Tarjeta/visor */
.model-card{
  border-radius:18px;
  border:1px solid var(--mm-border);
  box-shadow: var(--mm-shadow);
  overflow:hidden;
  background: transparent;
}

/* Viewport del mapa con recorte inferior */
.models-map{
  position:relative;
  overflow:hidden;
  border-top:1px solid var(--mm-border);
  aspect-ratio: 16 / 9;
}

/* Truco del recorte: ampliamos alto y subimos el iframe */
.models-map iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:calc(100% + var(--mm-crop-bottom));
  border:0;
  transform: translateY(calc(-1 * var(--mm-crop-bottom)));
}

/* Pie meta */
.models-meta{
  text-align:right; font-size:.9rem; opacity:.75;
}

/* Responsive */
@media (max-width: 980px){
  .models-grid{ grid-template-columns: 1fr; }
}