Embed responsivo.

<figure class="ui-sample ui-embed" data-embed="responsive"><div class="ui-embed__frame ui-embed__frame--wide"><iframe title="Resumen del catálogo de datos COCHID" srcdoc="&lt;!doctype html&gt;&lt;html lang=&#x27;es&#x27;&gt;&lt;meta charset=&#x27;utf-8&#x27;&gt;&lt;style&gt;body{margin:0;padding:18px;color:#172028;background:#eef3f6;font:14px sans-serif}dl{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}div{border-top:1px solid #87939c;padding-top:8px}dt{font-size:11px;color:#56616b}dd{margin:3px 0;font-size:20px}table{width:100%;border-collapse:collapse;margin-top:20px;font-size:13px}caption{text-align:left;font-weight:600;padding-bottom:6px}th,td{text-align:left;padding:6px 12px 6px 0;border-bottom:1px solid #c9d1d6}th{font-size:11px;color:#56616b;font-weight:600}&lt;/style&gt;&lt;strong&gt;Catálogo de datos COCHID · septiembre de 2026&lt;/strong&gt;&lt;dl&gt;&lt;div&gt;&lt;dt&gt;Series publicadas&lt;/dt&gt;&lt;dd&gt;7.984&lt;/dd&gt;&lt;/div&gt;&lt;div&gt;&lt;dt&gt;Regiones con datos&lt;/dt&gt;&lt;dd&gt;16 de 16&lt;/dd&gt;&lt;/div&gt;&lt;div&gt;&lt;dt&gt;Series al día&lt;/dt&gt;&lt;dd&gt;98%&lt;/dd&gt;&lt;/div&gt;&lt;/dl&gt;&lt;table&gt;&lt;caption&gt;Últimas series actualizadas&lt;/caption&gt;&lt;thead&gt;&lt;tr&gt;&lt;th&gt;Serie&lt;/th&gt;&lt;th&gt;Fuente&lt;/th&gt;&lt;th&gt;Actualizada&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;Desocupación regional&lt;/td&gt;&lt;td&gt;INE&lt;/td&gt;&lt;td&gt;26-09-2026&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Ejecución presupuestaria&lt;/td&gt;&lt;td&gt;DIPRES&lt;/td&gt;&lt;td&gt;25-09-2026&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Matrícula escolar por comuna&lt;/td&gt;&lt;td&gt;MINEDUC&lt;/td&gt;&lt;td&gt;24-09-2026&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/html&gt;" loading="lazy"></iframe></div><figcaption><span>Fuente: servicio COCHID · vista 1</span><a href="#abrir-embed">Abrir vista completa</a></figcaption></figure>

<figure class="ui-sample ui-embed border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-embed="responsive"><div class="ui-embed__frame ui-embed__frame--wide"><iframe title="Resumen del catálogo de datos COCHID" srcdoc="&lt;!doctype html&gt;&lt;html lang=&#x27;es&#x27;&gt;&lt;meta charset=&#x27;utf-8&#x27;&gt;&lt;style&gt;body{margin:0;padding:18px;color:#172028;background:#eef3f6;font:14px sans-serif}dl{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}div{border-top:1px solid #87939c;padding-top:8px}dt{font-size:11px;color:#56616b}dd{margin:3px 0;font-size:20px}table{width:100%;border-collapse:collapse;margin-top:20px;font-size:13px}caption{text-align:left;font-weight:600;padding-bottom:6px}th,td{text-align:left;padding:6px 12px 6px 0;border-bottom:1px solid #c9d1d6}th{font-size:11px;color:#56616b;font-weight:600}&lt;/style&gt;&lt;strong&gt;Catálogo de datos COCHID · septiembre de 2026&lt;/strong&gt;&lt;dl&gt;&lt;div&gt;&lt;dt&gt;Series publicadas&lt;/dt&gt;&lt;dd&gt;7.984&lt;/dd&gt;&lt;/div&gt;&lt;div&gt;&lt;dt&gt;Regiones con datos&lt;/dt&gt;&lt;dd&gt;16 de 16&lt;/dd&gt;&lt;/div&gt;&lt;div&gt;&lt;dt&gt;Series al día&lt;/dt&gt;&lt;dd&gt;98%&lt;/dd&gt;&lt;/div&gt;&lt;/dl&gt;&lt;table&gt;&lt;caption&gt;Últimas series actualizadas&lt;/caption&gt;&lt;thead&gt;&lt;tr&gt;&lt;th&gt;Serie&lt;/th&gt;&lt;th&gt;Fuente&lt;/th&gt;&lt;th&gt;Actualizada&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;Desocupación regional&lt;/td&gt;&lt;td&gt;INE&lt;/td&gt;&lt;td&gt;26-09-2026&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Ejecución presupuestaria&lt;/td&gt;&lt;td&gt;DIPRES&lt;/td&gt;&lt;td&gt;25-09-2026&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Matrícula escolar por comuna&lt;/td&gt;&lt;td&gt;MINEDUC&lt;/td&gt;&lt;td&gt;24-09-2026&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/html&gt;" loading="lazy"></iframe></div><figcaption class="text-sm text-slate-600"><span>Fuente: servicio COCHID · vista 1</span><a class="underline underline-offset-4" href="#abrir-embed">Abrir vista completa</a></figcaption></figure>

export interface EmbedResponsivoProps {
  /** Nombre accesible del `<iframe>`: qué muestra la vista incorporada. */
  title?: string;
  /** Dirección de la vista incorporada; si la pasas sin `srcDoc`, no se emite el documento de ejemplo. */
  src?: string;
  /** Documento HTML completo para el `<iframe>` (atributo `srcdoc`); tiene prioridad sobre `src`. */
  srcDoc?: string;
  /** Restricciones del `<iframe>` (atributo `sandbox`), por ejemplo `"allow-scripts"`. */
  sandbox?: string;
  /** Proporción del marco: `wide` es 16:9 (tableros, series); `paper` es 3:4 (páginas). */
  frame?: "wide" | "paper";
  /** Línea de fuente del pie: servicio que produce la vista y versión. */
  source?: string;
  /** Enlace a la vista completa fuera del marco; sin él no se muestra el enlace. */
  href?: string;
  linkLabel?: string;
  className?: string;
}

const DOCUMENTO =
  "<!doctype html><html lang='es'><meta charset='utf-8'><style>body{margin:0;padding:18px;color:#172028;background:#eef3f6;font:14px sans-serif}dl{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}div{border-top:1px solid #87939c;padding-top:8px}dt{font-size:11px;color:#56616b}dd{margin:3px 0;font-size:20px}table{width:100%;border-collapse:collapse;margin-top:20px;font-size:13px}caption{text-align:left;font-weight:600;padding-bottom:6px}th,td{text-align:left;padding:6px 12px 6px 0;border-bottom:1px solid #c9d1d6}th{font-size:11px;color:#56616b;font-weight:600}</style><strong>Catálogo de datos COCHID · septiembre de 2026</strong><dl><div><dt>Series publicadas</dt><dd>7.984</dd></div><div><dt>Regiones con datos</dt><dd>16 de 16</dd></div><div><dt>Series al día</dt><dd>98%</dd></div></dl><table><caption>Últimas series actualizadas</caption><thead><tr><th>Serie</th><th>Fuente</th><th>Actualizada</th></tr></thead><tbody><tr><td>Desocupación regional</td><td>INE</td><td>26-09-2026</td></tr><tr><td>Ejecución presupuestaria</td><td>DIPRES</td><td>25-09-2026</td></tr><tr><td>Matrícula escolar por comuna</td><td>MINEDUC</td><td>24-09-2026</td></tr></tbody></table></html>";

/**
 * Embed responsivo: marco con proporción fija para incorporar una vista de otro servicio (tablero, serie, mapa) con su fuente y el enlace a la vista completa.
 *
 * El `<iframe>` carga en diferido (`loading="lazy"`) y necesita `title`. Pasa `src` para una dirección o `srcDoc` para un documento HTML ya saneado.
 *
 * @example <EmbedResponsivo title="Tablero de empleo regional" src="https://datos.cochid.cl/vistas/empleo" source="Fuente: servicio COCHID · vista 2" href="https://datos.cochid.cl/empleo" />
 */
export function EmbedResponsivo({
  title = "Resumen del catálogo de datos COCHID",
  src,
  srcDoc,
  sandbox,
  frame = "wide",
  source = "Fuente: servicio COCHID · vista 1",
  href = "#abrir-embed",
  linkLabel = "Abrir vista completa",
  className,
}: EmbedResponsivoProps) {
  const documento = srcDoc ?? (src ? undefined : DOCUMENTO);
  const enlace = linkLabel && href ? <a href={href}>{linkLabel}</a> : null;
  return (
    <figure className={["ui-embed", className].filter(Boolean).join(" ")} data-embed="responsive">
      <div className={`ui-embed__frame ui-embed__frame--${frame}`}>
        <iframe title={title} src={src} srcDoc={documento} sandbox={sandbox} loading="lazy"></iframe>
      </div>
      {source || enlace ? (
        <figcaption>
          {source ? <span>{source}</span> : null}
          {enlace}
        </figcaption>
      ) : null}
    </figure>
  );
}