/* JDServer-Webs v6.1 — modules/models/models.css (radar-look)
   - Misma estética que Radar: tarjetas, cabecera, pills, alturas
   - 2 columnas en escritorio, 1 en móvil
*/

#models{ margin:16px 0 28px; }
#models > h3{ font-weight:600; margin:0 0 12px; }

/* Grid como radar */
.models-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
@media (min-width:980px){
  .models-grid{ grid-template-columns:1fr 1fr; }
}

/* Tarjeta radar-like */
.model-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-1);
  overflow:hidden;
  display:grid;
  grid-template-rows:auto 1fr auto; /* head + embed + meta */
  min-width:0;
  transition:transform .2s ease, box-shadow .2s ease;
}
.model-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-2); }

/* Cabecera tipo radar: título a la izq, pills a la dcha */
.model-head{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border-bottom:1px solid var(--border);
}
.model-title{
  font:600 13px/1.2 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--text);
}

/* Pills (tabs) como radar */
.model-tabs{
  display:flex;
  gap:8px;
}
.model-tab{
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text);
  border-radius:999px;
  padding:6px 10px;
  font:600 12px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
}
.model-tab.active{
  background:rgba(var(--brand-rgb),.08);
  border-color:rgba(var(--brand-rgb),.25);
}

/* Contenedor mapa (mismo estilo que radar iframe) */
.model-embed{
  position:relative;
  width:100%;
  height:380px;
  overflow:hidden;
}
@media (min-width:1200px){
  .model-embed{ height:420px; }
}
.model-iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

/* Pie meta como radar */
.model-meta{
  padding:8px 12px;
  border-top:1px solid var(--border);
  font:12px/1.2 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--muted);
}