/* ====== ESTILOS ENCAPSULADOS ====== */
.wrap {
  display: flex;
  justify-content: center; /* centra horizontal */
  align-items: flex-start; /* o 'center' si quieres también vertical */
  padding: 1rem;           /* opcional, margen interno */
  background-color: white;
}

.areasuperficie.widget{
	flex: 0 1 70%;   /* ocupa 70% del ancho disponible */
  max-width: 780px;
  --_bg:#fff; --_ink:#111; --_muted:#6b6b6b;
  --_surface:#1976d2; --_plane:#c62828;
  --_radius:14px; --_shadow:0 1px 2px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.06);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--_ink); background:var(--_bg);
  display:grid; gap:12px;
}
.areasuperficie.widget .frame{background:#fff; border-radius:var(--_radius); box-shadow:var(--_shadow); padding:12px; display:grid; gap:10px}
.areasuperficie.widget .titlebar{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
.areasuperficie.widget .label{font-weight:700}
.areasuperficie.widget .legend{display:inline-flex; gap:14px; flex-wrap:wrap; font-size:13px; color:var(--_muted)}
.areasuperficie.widget .dot{width:12px; height:12px; border-radius:999px; display:inline-block}
.areasuperficie.widget .dot.surface{background:var(--_surface); opacity:.85; border:1px solid #0d47a1}
.areasuperficie.widget .dot.plane{background:var(--_plane); opacity:.75; border:1px solid #8b1c1c}
.areasuperficie.widget .dot.point{background:#000; opacity:.7}
.areasuperficie.widget .controls{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.areasuperficie.widget .control{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; background:#f6f7f9; font-size:14px}
.areasuperficie.widget .control input[type=range]{accent-color:#1976d2}
.areasuperficie.widget .hint{font-size:12px; color:var(--_muted)}
.areasuperficie.widget .stage {
  position: relative;
  width: min(686px,70%);   /* ancho reducido */
  aspect-ratio: 1.25/1;
  border: 1px solid #eceff1;
  border-radius: var(--_radius);
  overflow: clip;
  background: linear-gradient(#fff,#fafafa);

  margin-inline: auto;   /* 👈 centra horizontalmente dentro del frame */
}