Laboratorio completo de componentes.

<div class="ui-sample"><a class="skip-link" href="#contenido-principal">Saltar al contenido principal</a><p id="contenido-principal">Encuesta Nacional de Empleo: resultados por región y trimestre móvil.</p></div>

<header class="ui-sample ui-site-header" data-site-header><a class="ui-lockup" href="#inicio" aria-label="Compañía de Innovación de Santiago, inicio"><svg class="ui-lockup__mark" viewBox="0 0 200 200" fill="none" stroke="currentColor" aria-hidden="true"><circle cx="100" cy="100" r="92" stroke-width="4"></circle><circle cx="100" cy="100" r="56" stroke-width="18"></circle></svg><strong>COMPAÑÍA<br>DE INNOVACIÓN<br>DE SANTIAGO</strong></a><span role="separator"></span><strong>Style v10</strong><nav aria-label="Navegación principal"><a aria-current="page" href="#actual">Documentación</a><a href="#kit">Kit</a></nav><a href="#cuenta">Ingresar</a></header>

<div class="ui-sample ui-lockup" data-namebrand-lockup data-brand="cis"><svg class="ui-lockup__mark" viewBox="0 0 200 200" fill="none" stroke="currentColor" aria-hidden="true"><circle cx="100" cy="100" r="92" stroke-width="4"></circle><circle cx="100" cy="100" r="56" stroke-width="18"></circle></svg><strong>COMPAÑÍA<br>DE INNOVACIÓN<br>DE SANTIAGO</strong></div>

<div class="ui-sample ui-context-title" data-context-title><span class="ui-lockup"><svg class="ui-lockup__mark" viewBox="0 0 200 200" fill="none" stroke="currentColor" aria-hidden="true"><circle cx="100" cy="100" r="92" stroke-width="4"></circle><circle cx="100" cy="100" r="56" stroke-width="18"></circle></svg><strong>COMPAÑÍA<br>DE INNOVACIÓN<br>DE SANTIAGO</strong></span><span role="separator"></span><h2>Style v10</h2></div>

<nav class="ui-sample ui-nav" aria-label="Navegación principal"><a href="#inicio">Inicio</a><a href="#actual" aria-current="page">Documentación</a><a href="#productos">Productos</a><a href="#contacto">Contacto</a></nav>

<div class="gr-subnav" data-cis-secondary="v1"><div class="container gr-subnav__inner"><a class="gr-subnav__nombre" href="#producto">Mapas</a><details class="gr-subnav__menu" open><summary>Explorar</summary><nav aria-label="Navegación de Mapas"><a href="#seccion-0" aria-current="page">Explorar</a><a href="#seccion-1">Capas</a><a href="#seccion-2">Leyenda</a><a href="#seccion-3">Fuentes</a><a href="#seccion-4">Método</a><a href="#seccion-5">Descargas</a><a href="#seccion-6">Ayuda</a></nav></details></div></div>

<details class="ui-sample ui-mobile-menu" data-mobile-menu><summary>Menú</summary><nav aria-label="Navegación móvil"><a aria-current="page" href="#inicio">Inicio</a><a href="#productos">Productos</a><a href="#documentacion">Documentación</a><a href="#cuenta">Cuenta</a></nav></details>

<div class="ui-sample ui-account ui-actions" data-account-menu><a class="btn btn--quiet" href="#ingresar">Iniciar sesión</a><a class="btn btn--primary" href="#crear-cuenta">Crear cuenta</a></div>

<nav class="ui-sample ui-nav" aria-label="Ecosistema"><strong>Sitios relacionados</strong><a href="#cis">Compañía de Innovación de Santiago</a><a href="#cds">Círculo de Santiago</a><a href="#cochid">Compañía Chilena de Inteligencia de Datos</a><a href="#marca">Firmas y Documentos</a></nav>

<nav class="ui-sample ui-breadcrumbs" aria-label="Ruta de navegación"><ol><li><a href="#inicio">Inicio</a></li><li><a href="#kit">Kit</a></li><li aria-current="page">Componentes</li></ol></nav>

<nav class="ui-sample ui-sidebar-nav" data-sidebar-nav="true" aria-label="Documentación"><details><summary>Fundamentos</summary><a href="#color">Color</a><a href="#tipo">Tipografía</a></details><details open=""><summary>Componentes</summary><a href="#acciones" aria-current="page">Acciones</a><a href="#datos">Datos</a></details></nav>

<nav class="ui-sample ui-toc" aria-label="En esta página"><strong>En esta página</strong><ol><li><a href="#resumen">Resumen</a></li><li><a href="#metodologia">Metodología</a></li><li><a aria-current="location" href="#resultados">Resultados</a></li><li><a href="#limitaciones">Limitaciones</a></li></ol></nav>

<div class="ui-sample ui-tabs" role="tablist" aria-label="Representación"><button role="tab" aria-selected="true" aria-controls="panel-html-0">HTML</button><button role="tab" aria-selected="false" aria-controls="panel-react-0">React</button><button role="tab" aria-selected="false">JSON</button></div>

<nav class="ui-sample ui-nav" data-pagination="true" aria-label="Paginación"><a rel="prev" href="?page=1">Anterior</a><a href="?page=1">1</a><a aria-current="page" href="?page=2">2</a><a href="?page=3">3</a><a rel="next" href="?page=3">Siguiente</a></nav>

<nav class="ui-sample ui-bottom-nav" data-bottom-nav="true" aria-label="Navegación inferior"><a aria-current="page" href="#inicio">Inicio</a><a href="#buscar">Buscar</a><a href="#guardados">Guardados</a><a href="#cuenta">Ingresar</a></nav>

<div class="ui-sample"><a class="ui-back-link" rel="prev" href="#anterior">← Volver a componentes</a></div>

<footer class="ui-sample ui-site-footer" data-site-footer data-footer-owner="cis"><div class="ui-site-footer__brand"><span class="ui-lockup"><svg class="ui-lockup__mark" viewBox="0 0 200 200" fill="none" stroke="currentColor" aria-hidden="true"><circle cx="100" cy="100" r="92" stroke-width="4"></circle><circle cx="100" cy="100" r="56" stroke-width="18"></circle></svg><strong>COMPAÑÍA<br>DE INNOVACIÓN<br>DE SANTIAGO</strong></span><p>Operación tecnológica y productos digitales.</p></div><nav aria-label="Legal"><strong>Legal</strong><a href="#privacidad">Privacidad</a><a href="#terminos">Términos</a><a href="#mapa">Mapa del sitio</a></nav><nav aria-label="Recursos"><strong>Recursos</strong><a href="#docs">Documentación</a><a href="#archivo">Archivo</a><a href="#estado">Estado</a></nav><div class="ui-site-footer__owner"><span>Una compañía de</span><strong>Círculo de Santiago SpA</strong><small>© 2026 · RUT 78.384.591-1</small></div></footer>

<button class="ui-sample btn btn--secondary ui-theme-toggle" data-theme-toggle type="button" aria-pressed="false"><span class="ui-theme-toggle__icon" aria-hidden="true">◐</span><span data-theme-label>Usar tema oscuro</span></button>

<figure class="ui-sample ui-avatar" data-avatar="true"><span aria-hidden="true">MI</span><figcaption><strong>Martín Illanes</strong><small>Administrador</small></figcaption></figure>

<details class="ui-sample ui-app-launcher" data-app-launcher><summary class="btn btn--secondary">Aplicaciones</summary><nav aria-label="Aplicaciones de la Compañía"><a href="#datos"><strong>Datos</strong><span>Catálogo COCHID</span></a><a href="#documentos"><strong>Firmas y Documentos</strong><span>Contratos y archivo</span></a><a href="#inbox"><strong>Inbox</strong><span>Mensajería</span></a><a href="#mapa"><strong>Mapas</strong><span>Territorio</span></a></nav></details>

<a class="ui-sample ui-back-link" data-back-to-top href="#contenido">↑ Volver arriba</a>

<div class="ui-sample ui-actions"><button class="btn btn--primary" data-variant="primary" type="button">Guardar cambios</button></div>

<div class="ui-sample ui-actions"><button class="btn btn--secondary" data-variant="secondary" type="button">Vista previa</button></div>

<div class="ui-sample ui-actions"><button class="btn btn--quiet" data-variant="quiet" type="button">Ver detalles</button></div>

<div class="ui-sample ui-actions"><button class="btn btn--destructive" data-variant="destructive" type="button">Eliminar registro</button></div>

<div class="ui-sample ui-actions"><button class="btn btn--icon" type="button" aria-label="Abrir filtros" title="Abrir filtros"><span aria-hidden="true">≡</span></button><span>Abrir filtros</span></div>

<div class="ui-sample ui-actions" role="group" aria-label="Vista de resultados"><button class="btn is-active" type="button" aria-pressed="true">Tabla</button><button class="btn" type="button" aria-pressed="false">Mapa</button></div>

<div class="ui-sample ui-actions" data-split-button><button class="btn btn--primary" type="button">Publicar</button><details class="ui-overlay-panel" data-dropdown-action><summary class="btn btn--secondary" aria-label="Más opciones de publicación">Más</summary><div><button type="button">Programar</button><button type="button">Guardar borrador</button></div></details></div>

<details class="ui-sample ui-overlay-panel" data-dropdown-action><summary class="btn btn--secondary">Acciones</summary><div><button type="button">Duplicar</button><button type="button">Archivar</button><button type="button">Descargar</button></div></details>

<div class="ui-sample ui-actions" role="toolbar" aria-label="Edición del documento"><button class="btn btn--icon" type="button" aria-label="Negrita" title="Negrita" aria-pressed="false"><b aria-hidden="true">N</b></button><button class="btn btn--icon" type="button" aria-label="Cursiva" title="Cursiva" aria-pressed="false"><i aria-hidden="true">K</i></button><span role="separator" aria-orientation="vertical"></span><button class="btn btn--secondary" type="button">Insertar enlace</button></div>

<div class="ui-sample ui-actions"><a class="btn btn--secondary" href="data:text/csv;charset=utf-8,codigo,region%0A15,Arica%20y%20Parinacota%0A01,Tarapac%C3%A1%0A02,Antofagasta%0A03,Atacama%0A04,Coquimbo%0A05,Valpara%C3%ADso%0A13,Metropolitana%0A06,O%27Higgins%0A07,Maule%0A16,%C3%91uble%0A08,Biob%C3%ADo%0A09,La%20Araucan%C3%ADa%0A14,Los%20R%C3%ADos%0A10,Los%20Lagos%0A11,Ays%C3%A9n%0A12,Magallanes%0A" download="regiones-de-chile.csv">Descargar CSV</a><small>CSV · 16 regiones · 0,2 KB</small></div>

<div class="ui-sample ui-actions"><code>https://datos.cochid.cl/serie/184</code><button class="btn btn--secondary" type="button" data-copy-value="https://datos.cochid.cl/serie/184">Copiar</button><span role="status"></span></div>

<nav class="ui-sample ui-actions ui-share-actions" aria-label="Compartir"><a class="btn btn--secondary" href="mailto:?subject=Serie%20COCHID"><svg class="ui-action-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M3 5h18v14H3zM3 6l9 7 9-7"></path></svg><span>Correo</span></a><a class="btn btn--secondary" href="#copiar-enlace"><svg class="ui-action-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M9 15l6-6M7 17H5a4 4 0 010-8h4M17 7h2a4 4 0 010 8h-4"></path></svg><span>Copiar enlace</span></a><a class="btn btn--secondary" href="#insertar"><svg class="ui-action-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M8 7l-5 5 5 5M16 7l5 5-5 5M14 4l-4 16"></path></svg><span>Insertar</span></a></nav>

<div class="ui-sample ui-actions ui-bulk-actions" data-selection-count="3"><strong>3 filas seleccionadas</strong><button class="btn btn--secondary" type="button"><svg class="ui-action-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M12 3v12M7 10l5 5 5-5M4 20h16"></path></svg><span>Exportar</span></button><button class="btn btn--secondary" type="button"><svg class="ui-action-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M4 5h16v14H4zM8 9h8M8 13h5"></path></svg><span>Asignar</span></button><button class="btn btn--destructive" type="button"><svg class="ui-action-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M5 7h14M9 7V4h6v3M8 10v7M12 10v7M16 10v7"></path></svg><span>Eliminar</span></button><button class="btn btn--quiet" type="button"><svg class="ui-action-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M5 5l14 14M19 5L5 19"></path></svg><span>Cancelar selección</span></button></div>

<section class="ui-sample ui-command" role="dialog" aria-modal="true" aria-labelledby="command-title-0"><header><strong id="command-title-0">Ir a una sección</strong><kbd>Esc</kbd></header><label class="sr-only" for="command-query-0">Buscar comando</label><input class="input" id="command-query-0" placeholder="Escribe un comando" value=""/><ul role="listbox" aria-label="Resultados"><li role="option" aria-selected="true">Abrir documentación</li><li role="option">Crear documento</li><li role="option">Revisar servicios</li></ul></section>

<div class="ui-sample"><button class="btn btn--secondary" type="button" data-dialog-open="dialog-0">Publicar</button><dialog class="ui-dialog" id="dialog-0" aria-labelledby="dialog-title-0" open=""><header><h3 id="dialog-title-0">Publicar versión</h3><button class="btn btn--icon" type="button" data-dialog-close="true" aria-label="Cerrar diálogo">×</button></header><p>La versión quedará visible para los consumidores autorizados.</p><footer><button class="btn btn--primary" type="button">Publicar versión</button><button class="btn btn--secondary" type="button" data-dialog-close="true">Cancelar</button></footer></dialog></div>

<aside class="ui-sample ui-drawer" data-drawer="true" aria-labelledby="drawer-title-0"><header><h3 id="drawer-title-0">Filtros</h3><button class="btn btn--icon" type="button" aria-label="Cerrar panel">×</button></header><div><p>248 conjuntos de datos coinciden con la búsqueda.</p><label><input type="checkbox" checked=""/> Con fuente declarada</label><label><input type="checkbox"/> Con cobertura regional</label></div><footer><button class="btn btn--primary" type="button">Aplicar filtros</button><button class="btn btn--quiet" type="button">Limpiar</button></footer></aside>

<div class="ui-sample ui-accordion" data-accordion><details open><summary><span>Qué incluye el servicio</span><span aria-hidden="true">+</span></summary><p>Acceso, soporte y actualizaciones de contrato.</p></details><details><summary><span>Cómo se factura</span><span aria-hidden="true">+</span></summary><p>Período, IVA y renovación aparecen antes de confirmar.</p></details></div>

<div class="ui-sample ui-tooltip" data-tooltip="true"><button class="btn btn--secondary" type="button" aria-describedby="tip-0">Cobertura</button><span id="tip-0" role="tooltip">16 regiones · mayo a julio de 2026</span></div>

<div class="ui-sample ui-popover" data-popover="true"><button class="btn btn--secondary" type="button" data-popover-trigger="true" aria-expanded="false" aria-controls="popover-0">Fuente</button><aside id="popover-0" hidden=""><strong>INE · Encuesta Nacional de Empleo</strong><p>mayo a julio de 2026 · 16 regiones</p><a href="#fuente">Abrir publicación</a></aside></div>

<fieldset class="ui-sample ui-form"><legend>Datos de contacto</legend><label for="form-field-0">Correo electrónico <span aria-hidden="true">*</span></label><input class="input" id="form-field-0" type="email" aria-describedby="form-field-0-help" value="martin@example.cl"><small id="form-field-0-help">Se usará para enviar la boleta.</small></fieldset>

<div class="ui-sample ui-form"><label for="text-input-0">Nombre del proyecto</label><input class="input" id="text-input-0" type="text" maxLength="50" aria-describedby="text-input-0-help" value="Mapa de Santiago"/><small id="text-input-0-help">Usa un nombre que se entienda fuera del equipo.</small></div>

<div class="ui-sample ui-form"><label for="textarea-0">Descripción</label><textarea class="input" id="textarea-0" rows="4" aria-describedby="textarea-0-help">Serie mensual con cobertura regional.</textarea><small id="textarea-0-help">Explica contenido, fuente y período.</small></div>

<div class="ui-sample ui-form"><label for="select-native-0">Región</label><select class="input" id="select-native-0"><option value="">Selecciona una región</option><option selected="">Región Metropolitana</option><option>Valparaíso</option></select></div>

<div class="ui-sample ui-form ui-combobox" data-combobox-runtime="v1"><label for="combobox-0">Dataset</label><div><input class="input" id="combobox-0" role="combobox" aria-expanded="false" aria-controls="combobox-0-options" aria-autocomplete="list" value=""><button class="btn btn--secondary" type="button" data-combobox-toggle="true" aria-controls="combobox-0" aria-label="Mostrar datasets">Mostrar</button></div><section class="ui-combobox__panel" data-combobox-panel="true" hidden="" aria-label="Opciones de Dataset"><header><strong>Dataset</strong><button class="btn btn--secondary" type="button" data-combobox-close="true" aria-label="Cerrar opciones de Dataset">Cerrar</button></header><ul id="combobox-0-options" role="listbox" hidden="" aria-label="Dataset"><li id="combobox-0-option-0" role="option" tabindex="-1" aria-selected="true">Empleo regional</li><li id="combobox-0-option-1" role="option" tabindex="-1">Empleo nacional</li><li id="combobox-0-option-2" role="option" tabindex="-1">Ingresos del trabajo</li></ul></section><small>Escribe el valor o abre la lista.</small></div>

<label class="ui-sample ui-choice" for="checkbox-0"><input id="checkbox-0" type="checkbox"><span>Incluir series descontinuadas</span></label>

<fieldset class="ui-sample ui-form ui-radio-group"><legend>Formato de descarga</legend><div><label><input type="radio" name="format-0" checked="" value="csv"/><span>CSV</span></label><label><input type="radio" name="format-0" value="json"/><span>JSON</span></label><label><input type="radio" name="format-0" value="xlsx"/><span>XLSX</span></label></div></fieldset>

<div class="ui-sample ui-switch-row"><button id="switch-0" role="switch" type="button" aria-checked="false"><span class="ui-switch-track" aria-hidden="true"><i></i></span><span>Notificaciones por correo</span></button><small data-switch-status>Desactivadas</small></div>

<div class="ui-sample ui-range"><div><label for="range-0">Opacidad de la capa</label><output for="range-0">40%</output></div><input id="range-0" type="range" min="0" max="100" value="40" step="10"></div>

<div class="ui-sample ui-form"><label for="date-picker-0">Fecha de publicación</label><input class="input" id="date-picker-0" type="date" min="2026-01-01" max="2026-12-31" value="2026-08-25"/></div>

<fieldset class="ui-sample ui-form" data-date-range="true"><legend>Período</legend><label for="date-range-0-from">Desde</label><input class="input" id="date-range-0-from" type="date" value="2026-01-01"/><label for="date-range-0-to">Hasta</label><input class="input" id="date-range-0-to" type="date" value="2026-08-25"/></fieldset>

<form class="ui-sample ui-form" role="search" action="#resultados"><label for="search-field-0">Buscar en documentación</label><div><input class="input" id="search-field-0" type="search" value=""><button class="btn btn--primary" type="submit">Buscar</button></div><small>Busca componentes, decisiones y contratos.</small></form>

<form class="ui-sample ui-filter-bar" data-filter-bar="true"><fieldset><legend>Filtrar licitaciones</legend><div><label for="filter-bar-0-estado">Estado<select class="input" id="filter-bar-0-estado" name="estado"><option value="">Todos</option><option value="publicada">Publicada</option><option value="cerrada">Cerrada</option><option value="adjudicada">Adjudicada</option><option value="desierta">Desierta</option></select></label><label for="filter-bar-0-region">Región<select class="input" id="filter-bar-0-region" name="region"><option value="">Todas</option><option value="metropolitana">Metropolitana de Santiago</option><option value="valparaiso">Valparaíso</option><option value="biobio">Biobío</option></select></label><label for="filter-bar-0-anio">Año de publicación<select class="input" id="filter-bar-0-anio" name="anio"><option value="">Todos</option><option value="2026">2026</option><option value="2025">2025</option><option value="2024">2024</option></select></label><label for="filter-bar-0-monto">Monto estimado<select class="input" id="filter-bar-0-monto" name="monto"><option value="">Cualquiera</option><option value="menos-100">Menos de 100 UTM</option><option value="100-1000">Entre 100 y 1.000 UTM</option><option value="mas-1000">Más de 1.000 UTM</option></select></label></div></fieldset><div class="ui-actions"><button class="btn btn--primary" type="submit">Aplicar filtros</button><button class="btn btn--quiet" type="reset">Limpiar</button><p>Sin filtros aplicados</p></div></form>

<div class="ui-sample ui-form ui-autocomplete"><label for="autocomplete-0">Comuna</label><input class="input" id="autocomplete-0" list="autocomplete-0-options" autoComplete="off" value=""/><datalist id="autocomplete-0-options"><option value="Santiago"></option><option value="Estación Central"></option><option value="San Miguel"></option></datalist><small>Escribe al menos dos letras para ver las comunas que coinciden.</small></div>

<fieldset class="ui-sample ui-form ui-tag-input" data-tag-input><legend>Etiquetas</legend><ul><li><span>datos</span><button type="button" data-tag-remove aria-label="Quitar datos">×</button></li></ul><label for="tag-input-0">Agregar etiqueta</label><input class="input" id="tag-input-0" placeholder="Escribe una etiqueta"><small>Presiona Enter para agregar.</small></fieldset>

<div class="ui-sample ui-form ui-file-input"><label for="file-input-0">Archivo de datos</label><input class="input" id="file-input-0" type="file" accept=".csv,text/csv" aria-describedby="file-input-0-help"><small id="file-input-0-help">Selecciona o arrastra un CSV de hasta 10 MB.</small></div>

<div class="ui-sample ui-dropzone" data-upload-dropzone><input id="upload-dropzone-0" type="file" accept=".csv,text/csv"><label for="upload-dropzone-0"><span class="ui-dropzone__icon" aria-hidden="true">↑</span><strong>Arrastra un CSV aquí</strong><span>o selecciónalo desde tu equipo · máximo 10 MB</span></label><button class="btn btn--secondary" type="button">Seleccionar archivo</button></div>

<form class="ui-sample ui-form" data-multi-step-form><p>Paso 1 de 3</p><ol><li aria-current="step"><b>1</b><span>Cuenta</span></li><li aria-current="false"><b>2</b><span>Organización</span></li><li><b>3</b><span>Confirmación</span></li></ol><label for="multi-step-form-0">Correo electrónico</label><input class="input" id="multi-step-form-0" type="email"><div><button class="btn btn--secondary" type="button" disabled>Anterior</button><button class="btn btn--primary" type="submit">Continuar</button></div></form>

<form class="ui-sample ui-form ui-validation-context" data-component-context="form-validation"><section class="ui-feedback ui-validation-summary" data-validation-summary="true" role="alert" aria-labelledby="validation-summary-0-title"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"></circle><path d="M12 7v6M12 17h.01"></path></svg><div><h3 id="validation-summary-0-title">Antes de continuar</h3><ul><li><a href="#validation-summary-0-email">Ingresa un correo válido</a></li><li><a href="#validation-summary-0-terms">Acepta los términos</a></li></ul></div></section><label for="validation-summary-0-email">Correo electrónico<input class="input" id="validation-summary-0-email" type="email" aria-invalid="true" aria-describedby="validation-summary-0-email-error" value=""/><small id="validation-summary-0-email-error">Ingresa un correo con nombre y dominio.</small></label><label class="ui-choice" for="validation-summary-0-terms"><input id="validation-summary-0-terms" type="checkbox" aria-invalid="true"/><span>Acepto los términos y la política de privacidad</span></label><div class="ui-actions"><button class="btn btn--primary" type="submit">Continuar</button><button class="btn btn--secondary" type="button">Guardar borrador</button></div></form>

<div class="ui-sample ui-inline-edit" data-inline-edit="true"><div><strong>Título del dataset</strong><span>Empleo regional</span></div><button class="btn btn--secondary" type="button">Editar</button></div>

<section class="ui-sample ui-auth-stage" data-auth-source="cis-auth-authentik" data-login-card="true"><div class="ui-auth-shell"><header class="ui-auth-brand"><svg class="ui-lockup__mark" viewBox="0 0 200 200" fill="none" stroke="currentColor" aria-hidden="true"><circle cx="100" cy="100" r="92" stroke-width="4"></circle><circle cx="100" cy="100" r="56" stroke-width="18"></circle></svg><strong>COMPAÑÍA<br>DE INNOVACIÓN<br>DE SANTIAGO</strong></header><div class="ui-auth-body"><h3>Iniciar sesión</h3><p>Accede con una cuenta de la Compañía. Volverás al servicio solicitado.</p><div class="ui-auth-providers"><button class="ui-provider-pill" type="button"><span class="ui-provider-mark ui-provider-mark--google" aria-hidden="true"><svg viewBox="0 0 24 24" aria-hidden="true"><path fill="#4285f4" d="M21.6 12.2c0-.7-.1-1.4-.2-2H12v3.9h5.4a4.6 4.6 0 0 1-2 3v2.6h3.3c1.9-1.8 2.9-4.4 2.9-7.5Z"></path><path fill="#34a853" d="M12 22c2.7 0 5-.9 6.7-2.3l-3.3-2.6c-.9.6-2.1 1-3.4 1a5.9 5.9 0 0 1-5.5-4.1H3.1v2.6A10 10 0 0 0 12 22Z"></path><path fill="#fbbc05" d="M6.5 14a6 6 0 0 1 0-3.9V7.4H3.1a10 10 0 0 0 0 9.2L6.5 14Z"></path><path fill="#ea4335" d="M12 6a5.4 5.4 0 0 1 3.8 1.5l2.9-2.9A9.7 9.7 0 0 0 12 2a10 10 0 0 0-8.9 5.4l3.4 2.7A5.9 5.9 0 0 1 12 6Z"></path></svg></span><span>Continuar con Google</span></button><button class="ui-provider-pill" type="button"><span class="ui-provider-mark ui-provider-mark--microsoft" aria-hidden="true"><i></i><i></i><i></i><i></i></span><span>Continuar con Microsoft</span></button></div><div class="ui-auth-separator"><span>o usa tu correo</span></div><label for="auth-login-email-0">Correo electrónico</label><input class="input" id="auth-login-email-0" type="email" autocomplete="email"><button class="btn btn--primary" type="button">Continuar</button><a class="ui-auth-recovery" href="#recuperar">¿Problemas con tu cuenta?</a><p class="ui-auth-enroll">¿Necesitas una cuenta? <a href="#registro">Crear cuenta</a></p></div><footer>Compañía de Innovación de Santiago</footer></div></section>

<div class="ui-sample ui-auth-fragment" data-auth-source="cis-auth-authentik" data-auth-provider="true"><button class="ui-auth-provider ui-provider-pill" type="button" aria-describedby="auth-provider-button-0-help"><span class="ui-provider-mark ui-provider-mark--google" aria-hidden="true"><svg viewBox="0 0 24 24" aria-hidden="true"><path fill="#4285f4" d="M21.6 12.2c0-.7-.1-1.4-.2-2H12v3.9h5.4a4.6 4.6 0 0 1-2 3v2.6h3.3c1.9-1.8 2.9-4.4 2.9-7.5Z"></path><path fill="#34a853" d="M12 22c2.7 0 5-.9 6.7-2.3l-3.3-2.6c-.9.6-2.1 1-3.4 1a5.9 5.9 0 0 1-5.5-4.1H3.1v2.6A10 10 0 0 0 12 22Z"></path><path fill="#fbbc05" d="M6.5 14a6 6 0 0 1 0-3.9V7.4H3.1a10 10 0 0 0 0 9.2L6.5 14Z"></path><path fill="#ea4335" d="M12 6a5.4 5.4 0 0 1 3.8 1.5l2.9-2.9A9.7 9.7 0 0 0 12 2a10 10 0 0 0-8.9 5.4l3.4 2.7A5.9 5.9 0 0 1 12 6Z"></path></svg></span><span>Continuar con Google</span></button><small id="auth-provider-button-0-help">Al terminar, vuelves a la página en la que estabas.</small></div>

<form class="ui-sample ui-auth-fragment" data-auth-source="cis-auth-authentik" data-auth-email-step="true" action="/auth/login" method="post"><a class="btn btn--quiet" href="#metodos">Volver a otros métodos</a><h3>Continuar con correo</h3><label for="auth-email-step-0">Correo electrónico</label><input class="input" id="auth-email-step-0" type="email" autoComplete="email" required="" name="email"/><button class="btn btn--primary" type="submit">Continuar</button></form>

<nav class="ui-sample ui-auth-mode" data-auth-source="cis-auth-authentik" data-auth-mode-switch aria-label="Cuenta"><a href="#entrar" aria-current="page">Iniciar sesión</a><a href="#registro" aria-current="false">Crear cuenta</a></nav>

<form class="ui-sample ui-auth-fragment" data-auth-source="cis-auth-authentik" data-recovery-form="true"><h3>Recuperar acceso</h3><p>Si el correo corresponde a una cuenta, enviaremos instrucciones. No confirmamos si la cuenta existe.</p><label for="recovery-form-0">Correo electrónico</label><input class="input" id="recovery-form-0" type="email" autoComplete="email" value=""/><button class="btn btn--primary" type="submit">Enviar instrucciones</button><a class="btn btn--quiet" href="#login">Volver a iniciar sesión</a></form>

<section class="ui-sample ui-auth-status ui-auth-status--progress" data-auth-source="cis-auth-authentik" data-auth-callback-status="true" role="status"><span class="ui-auth-status__symbol" aria-hidden="true">↻</span><div><strong>Completando el acceso</strong><p>Estamos validando tu inicio de sesión. En unos segundos vuelves al producto.</p><code>/auth/callback</code><a class="btn btn--quiet" href="#reintentar">Volver al producto</a></div></section>

<section class="ui-sample ui-auth-status ui-auth-status--warning" data-auth-source="cis-auth-authentik" data-session-expired><span class="ui-auth-status__symbol" aria-hidden="true">i</span><div><strong>Tu sesión terminó</strong><p>Pasó el tiempo de inactividad permitido. Conservamos el destino, no el contenido sensible del formulario.</p><div class="ui-actions"><a class="btn btn--primary" href="/auth/login?return_to=%2Fdocumentos%2F184">Volver a iniciar sesión</a><a class="btn btn--quiet" href="#inicio">Ir al inicio</a></div></div></section>

<form class="ui-sample ui-auth-fragment" data-auth-source="cis-auth-authentik" data-registration-form="true" action="/auth/register" method="post"><h3>Crear cuenta</h3><p>Con la misma cuenta entras a los demás servicios de la Compañía.</p><label for="registration-form-0-name">Nombre</label><input class="input" id="registration-form-0-name" autoComplete="name" required="" name="name"/><label for="registration-form-0-email">Correo electrónico</label><input class="input" id="registration-form-0-email" type="email" autoComplete="email" required="" name="email"/><label class="ui-choice"><input type="checkbox" required=""/><span>Acepto los términos y la política de privacidad</span></label><button class="btn btn--primary" type="submit">Crear cuenta</button><a class="btn btn--quiet" href="#login">Ya tengo una cuenta</a></form>

<div class="ui-sample ui-auth-fragment" data-auth-source="cis-auth-authentik" data-password-field="true"><label for="password-field-0">Contraseña</label><div class="ui-password-row"><input class="input" id="password-field-0" type="password" autoComplete="current-password" aria-describedby="password-field-0-help" required=""/><button class="btn btn--secondary" type="button" aria-controls="password-field-0" aria-pressed="false">Mostrar</button></div><small id="password-field-0-help">Es la misma contraseña que usas en los demás productos de la Compañía.</small></div>

<section class="ui-sample ui-auth-status ui-auth-status--success" data-auth-source="cis-auth-authentik" data-email-verification role="status"><span class="ui-auth-status__symbol" aria-hidden="true">✓</span><div><h3>Revisa tu correo</h3><p>Enviamos un enlace a martin@example.cl. Puedes cerrar esta ventana.</p><div class="ui-actions"><button class="btn btn--secondary" type="button">Enviar otro enlace</button><a class="btn btn--quiet" href="#correo">Cambiar correo</a></div></div></section>

<form class="ui-sample ui-auth-fragment" data-auth-source="cis-auth-authentik" data-mfa-challenge="true"><h3>Verificación en dos pasos</h3><p>Ingresa el código de seis dígitos de tu aplicación.</p><label for="mfa-challenge-0">Código de verificación</label><input class="input ui-one-time-code" id="mfa-challenge-0" inputMode="numeric" autoComplete="one-time-code" pattern="[0-9]{6}" required="" value=""/><button class="btn btn--primary" type="submit">Verificar</button><a class="btn btn--quiet" href="#backup">Usar un código de recuperación</a></form>

<form class="ui-sample ui-auth-fragment" data-auth-source="cis-auth-authentik" data-backup-code="true"><h3>Código de recuperación</h3><p>Cada código se usa una sola vez. No lo compartas.</p><label for="backup-code-0">Código</label><input class="input ui-one-time-code" id="backup-code-0" autoComplete="one-time-code" required="" value=""/><button class="btn btn--primary" type="submit">Continuar</button><a class="btn btn--quiet" href="#mfa">Volver al segundo factor</a></form>

<section class="ui-sample ui-form ui-account-chooser" data-account-chooser="true"><header><h3>Elige una cuenta</h3><p>Continuarás a Firmas y Documentos.</p></header><ul><li><button class="ui-account-choice" type="button" aria-current="true"><span class="ui-account-choice__icon"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="8" r="4"></circle><path d="M4 21c0-4 3-7 8-7s8 3 8 7"></path></svg></span><span class="ui-account-choice__copy"><strong>Martín Illanes</strong><small>martin@example.cl · innovacionsantiago.cl</small></span><span class="ui-account-choice__badge">Última usada</span><svg class="ui-account-choice__arrow" viewBox="0 0 24 24" aria-hidden="true"><path d="m9 5 7 7-7 7"></path></svg></button></li><li><button class="ui-account-choice" type="button" aria-current="false"><span class="ui-account-choice__icon ui-account-choice__icon--cochid"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="5" y="5" width="14" height="14"></rect><path d="M9 19v-5h6v5M9 9h.01M15 9h.01"></path></svg></span><span class="ui-account-choice__copy"><strong>Cuenta de revisión</strong><small>revision@example.cl · COCHID</small></span><span class="ui-account-choice__badge">Última usada</span><svg class="ui-account-choice__arrow" viewBox="0 0 24 24" aria-hidden="true"><path d="m9 5 7 7-7 7"></path></svg></button></li></ul><button class="btn btn--secondary" type="button"><svg class="ui-action-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M12 5v14M5 12h14"></path></svg>Usar otra cuenta</button></section>

<section class="ui-sample ui-form ui-consent" data-oauth-consent="true"><header class="ui-consent-app"><span aria-hidden="true"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 5h14v10H9l-4 4V5Z"></path><path d="M9 9h6M9 12h4"></path></svg></span><div><h3>Comentario solicita acceso</h3><p>Conectará con tu cuenta de la Compañía.</p></div></header><p>La aplicación podrá:</p><ul class="ui-permission-list"><li><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="8" r="3"></circle><path d="M6 20c0-3 2-6 6-6s6 3 6 6"></path></svg><span><strong>Leer tu identidad básica</strong><small>Nombre, correo y organización activa.</small></span></li><li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 4h14v16H5zM8 8h8M8 12h6"></path></svg><span><strong>Mantener una sesión en este dispositivo</strong><small>La sesión seguirá abierta hasta que la cierres.</small></span></li></ul><p class="ui-consent__limit">No podrá enviar ni publicar sin una aprobación separada.</p><p class="ui-consent__consequence" data-rejection-consequence="true">Si cancelas, volverás a Comentario sin conectar esta cuenta.</p><div class="ui-actions"><button class="btn btn--primary" type="button">Permitir acceso</button><button class="btn btn--quiet" type="button">Cancelar</button></div></section>

<section class="ui-sample ui-feedback" data-logout-confirmation><h3>Cerrar sesión</h3><p>Cerrarás esta sesión y volverás a la portada del producto.</p><form class="ui-actions" action="/auth/logout" method="post"><button class="btn btn--primary" type="submit">Cerrar sesión</button><a class="btn btn--secondary" href="#cuenta">Cancelar</a></form></section>

<section class="ui-sample ui-feedback" data-account-locked="true" role="alert"><h3>Cuenta bloqueada temporalmente</h3><p>Hubo varios intentos fallidos. Podrás volver a intentar en 14 minutos.</p><div class="ui-actions"><a class="btn btn--primary" href="#soporte">Contactar soporte</a><a class="btn btn--secondary" href="#inicio">Volver al inicio</a></div></section>

<section class="ui-sample ui-feedback" data-auth-error="true" role="alert"><h3>No pudimos iniciar la sesión</h3><p>El proveedor canceló o venció la solicitud. No se creó una sesión.</p><code>AUT-408 · solicitud 7F2A</code><div class="ui-actions"><a class="btn btn--primary" href="/auth/login">Intentar otra vez</a><a class="btn btn--secondary" href="#soporte">Solicitar ayuda</a></div></section>

<figure class="ui-sample ui-sequential-ramp" data-sequential-ramp="true"><ol><li><span class="ui-sequential-ramp__swatch" data-step="1" aria-hidden="true"></span><span>Menor valor</span></li><li><span class="ui-sequential-ramp__swatch" data-step="2" aria-hidden="true"></span><span>Valor intermedio</span></li><li><span class="ui-sequential-ramp__swatch" data-step="3" aria-hidden="true"></span><span>Mayor valor</span></li></ol><figcaption>Rampa secuencial de ejemplo, sin datos reales.</figcaption></figure>

<p class="ui-sample" data-metric-inline>Desocupación regional: <strong>8,1%</strong> <span>período may-jul 2026</span></p>

<dl class="ui-sample metric-strip" data-metric-strip="true"><div><dt>Personas ocupadas</dt><dd>9.384.210</dd></div><div><dt>Desocupación</dt><dd>8,1%</dd></div><div><dt>Participación</dt><dd>61,8%</dd></div></dl>

<div class="ui-sample ui-data" data-data-table="true"><table><caption>Desocupación por región · may-jul 2026</caption><thead><tr><th scope="col">Región</th><th scope="col" data-numeric="true">Tasa</th><th scope="col" data-numeric="true">Variación anual</th></tr></thead><tbody><tr><th scope="row">Valparaíso</th><td data-numeric="true">8,1%</td><td data-numeric="true">+0,3 pp</td></tr><tr><th scope="row">Biobío</th><td data-numeric="true">7,6%</td><td data-numeric="true">−0,2 pp</td></tr></tbody></table><small>Fuente: INE · ENE</small></div>

<div class="ui-sample ui-data" data-responsive-table="true"><table><caption>Servicios por comuna</caption><thead><tr><th>Comuna</th><th>Buses activos</th><th>Actualización</th></tr></thead><tbody><tr><th>Santiago</th><td data-label="Buses activos">1.260</td><td data-label="Actualización">18:24 CLT</td></tr><tr><th>Maipú</th><td data-label="Buses activos">842</td><td data-label="Actualización">18:23 CLT</td></tr></tbody></table></div>

<div class="ui-sample ui-data"><table><caption>Conjuntos de datos publicados</caption><thead><tr><th scope="col" aria-sort="ascending"><button class="btn btn--quiet" type="button">Nombre ↑</button></th><th scope="col"><button class="btn btn--quiet" type="button">Actualización</button></th></tr></thead><tbody><tr><td>Empleo</td><td>25 ago 2026</td></tr><tr><td>Transporte</td><td>24 ago 2026</td></tr></tbody></table></div>

<div class="ui-sample ui-data" data-comparison-table="true"><table><caption>Comparación de planes</caption><thead><tr><th scope="col">Capacidad</th><th scope="col">Base</th><th scope="col">Equipo</th></tr></thead><tbody><tr><th scope="row">Usuarios</th><td>1</td><td>10</td></tr><tr><th scope="row">Exportaciones</th><td>50/mes</td><td>Ilimitadas</td></tr><tr><th scope="row">Soporte</th><td>Correo</td><td>Prioritario</td></tr></tbody></table></div>

<dl class="ui-sample ui-data" data-data-list="true"><div><dt>Empleo regional</dt><dd>Serie mensual · 2010–2026</dd></div><div><dt>Fuente</dt><dd>INE · Encuesta Nacional de Empleo</dd></div><div><dt>Cobertura</dt><dd>16 regiones</dd></div></dl>

<dl class="ui-sample ui-data" data-key-value-list="true"><div><dt>Identificador</dt><dd><code>dataset-ene-184</code></dd></div><div><dt>Licencia</dt><dd>CC BY 4.0</dd></div><div><dt>Huella SHA-256</dt><dd><code>4e2a…78bd</code></dd></div></dl>

<ol class="ui-sample ui-timeline" data-timeline="true"><li><time dateTime="2026-08-25T17:16:00-04:00">17:16</time><strong>Extracción terminada</strong><span>842 filas</span></li><li><time dateTime="2026-08-25T17:18:00-04:00">17:18</time><strong>Validación</strong><span>Sin anomalías</span></li><li><time dateTime="2026-08-25T17:20:00-04:00">17:20</time><strong>Publicación</strong><span>Completa</span></li></ol>

<span class="ui-sample badge badge--ok" data-status="operativo"><span aria-hidden="true">●</span> Operativo</span>

<span class="ui-sample badge badge--ok" data-quality="validado" title="Cobertura y sumas verificadas">Calidad: validado</span>

<cite class="ui-sample badge" data-source-badge="true"><a href="#fuente-ine">INE · ENE</a> · <span>actualización mensual</span></cite>

<p class="ui-sample" data-freshness="true"><strong class="badge badge--ok">Actualizado</strong> <time dateTime="2026-08-25T18:24:40-04:00">18:24:40 CLT</time> · <span>Fuente: DTPM · posiciones GPS de buses</span></p>

<figure class="ui-sample ui-chart" data-renderer="cochid-graphs" data-chart="line"><figcaption>Tasa de desocupación nacional · trimestres móviles 2026</figcaption><svg viewBox="0 0 320 120" aria-hidden="true"><path d="M40 20H305M40 60H305" class="ui-chart__guia"></path><path d="M40 100H305" class="ui-chart__eje"></path><text x="34" y="23" text-anchor="end" class="ui-chart__rotulo ui-chart__rotulo--chico">9,0%</text><text x="34" y="63" text-anchor="end" class="ui-chart__rotulo ui-chart__rotulo--chico">8,0%</text><text x="34" y="103" text-anchor="end" class="ui-chart__rotulo ui-chart__rotulo--chico">7,0%</text><polyline points="64,60 111.2,44 158.4,36 205.6,24 252.8,32 300,40" class="ui-chart__linea"></polyline><circle cx="300" cy="40" r="4" class="ui-chart__serie"></circle><text x="64" y="113" text-anchor="middle" class="ui-chart__rotulo ui-chart__rotulo--chico">Dic-feb</text><text x="111.2" y="113" text-anchor="middle" class="ui-chart__rotulo ui-chart__rotulo--chico">Ene-mar</text><text x="158.4" y="113" text-anchor="middle" class="ui-chart__rotulo ui-chart__rotulo--chico">Feb-abr</text><text x="205.6" y="113" text-anchor="middle" class="ui-chart__rotulo ui-chart__rotulo--chico">Mar-may</text><text x="252.8" y="113" text-anchor="middle" class="ui-chart__rotulo ui-chart__rotulo--chico">Abr-jun</text><text x="300" y="113" text-anchor="middle" class="ui-chart__rotulo ui-chart__rotulo--chico">May-jul</text></svg><p>Fuente: INE · Encuesta Nacional de Empleo · dic 2025-jul 2026 · porcentaje</p><details><summary>Ver datos</summary><table><thead><tr><th>Trimestre móvil</th><th>Tasa</th></tr></thead><tbody><tr><th>Dic-feb</th><td>8,0%</td></tr><tr><th>Ene-mar</th><td>8,4%</td></tr><tr><th>Feb-abr</th><td>8,6%</td></tr><tr><th>Mar-may</th><td>8,9%</td></tr><tr><th>Abr-jun</th><td>8,7%</td></tr><tr><th>May-jul</th><td>8,5%</td></tr></tbody></table></details></figure>

<figure class="ui-sample ui-chart" data-renderer="cochid-graphs" data-chart="bar"><figcaption>Tasa de desocupación por región · may-jul 2026</figcaption><svg viewBox="0 0 320 120" aria-hidden="true"><path d="M20 100H305" class="ui-chart__eje"></path><rect x="55" y="28.8" width="42" height="71.2" class="ui-chart__serie"></rect><rect x="139" y="39.2" width="42" height="60.8" class="ui-chart__serie"></rect><rect x="223" y="64" width="42" height="36" class="ui-chart__serie"></rect><text x="76" y="23.8" text-anchor="middle" class="ui-chart__rotulo">8,9%</text><text x="160" y="34.2" text-anchor="middle" class="ui-chart__rotulo">7,6%</text><text x="244" y="59" text-anchor="middle" class="ui-chart__rotulo">4,5%</text><text x="76" y="113" text-anchor="middle" class="ui-chart__rotulo">Metropolitana</text><text x="160" y="113" text-anchor="middle" class="ui-chart__rotulo">Biobío</text><text x="244" y="113" text-anchor="middle" class="ui-chart__rotulo">Los Lagos</text></svg><p>Fuente: INE · Encuesta Nacional de Empleo · may-jul 2026 · porcentaje de la fuerza de trabajo</p><details><summary>Ver datos</summary><table><thead><tr><th>Región</th><th>Tasa</th></tr></thead><tbody><tr><th>Metropolitana</th><td>8,9%</td></tr><tr><th>Biobío</th><td>7,6%</td></tr><tr><th>Los Lagos</th><td>4,5%</td></tr></tbody></table></details></figure>

<figure class="ui-sample ui-chart" data-renderer="cochid-graphs" data-chart="stacked"><figcaption>Personas desocupadas por sexo · trimestres móviles 2026</figcaption><svg viewBox="0 0 320 120" aria-hidden="true"><path d="M20 100H240" class="ui-chart__eje"></path><rect x="40" y="65.6" width="44" height="34.4" class="ui-chart__serie"></rect><rect x="40" y="26.8" width="44" height="38.8" class="ui-chart__serie ui-chart__serie--2"></rect><rect x="110" y="66" width="44" height="34" class="ui-chart__serie"></rect><rect x="110" y="28.4" width="44" height="37.6" class="ui-chart__serie ui-chart__serie--2"></rect><rect x="180" y="66.8" width="44" height="33.2" class="ui-chart__serie"></rect><rect x="180" y="30" width="44" height="36.8" class="ui-chart__serie ui-chart__serie--2"></rect><text x="62" y="21.8" text-anchor="middle" class="ui-chart__rotulo ui-chart__rotulo--chico">915</text><text x="132" y="23.4" text-anchor="middle" class="ui-chart__rotulo ui-chart__rotulo--chico">895</text><text x="202" y="25" text-anchor="middle" class="ui-chart__rotulo ui-chart__rotulo--chico">875</text><text x="62" y="113" text-anchor="middle" class="ui-chart__rotulo ui-chart__rotulo--chico">Mar-may</text><text x="132" y="113" text-anchor="middle" class="ui-chart__rotulo ui-chart__rotulo--chico">Abr-jun</text><text x="202" y="113" text-anchor="middle" class="ui-chart__rotulo ui-chart__rotulo--chico">May-jul</text><rect x="250" y="44" width="10" height="10" class="ui-chart__serie ui-chart__serie--2"></rect><text x="265" y="53" class="ui-chart__rotulo ui-chart__rotulo--chico">Hombres</text><rect x="250" y="64" width="10" height="10" class="ui-chart__serie"></rect><text x="265" y="73" class="ui-chart__rotulo ui-chart__rotulo--chico">Mujeres</text></svg><p>Fuente: INE · Encuesta Nacional de Empleo · mar-jul 2026 · miles de personas</p><details><summary>Ver datos</summary><table><thead><tr><th>Trimestre móvil</th><th>Mujeres</th><th>Hombres</th><th>Total</th></tr></thead><tbody><tr><th>Mar-may</th><td>430</td><td>485</td><td>915</td></tr><tr><th>Abr-jun</th><td>425</td><td>470</td><td>895</td></tr><tr><th>May-jul</th><td>415</td><td>460</td><td>875</td></tr></tbody></table></details></figure>

<figure class="ui-sample ui-chart" data-renderer="cochid-graphs" data-chart="sparkline"><figcaption>Precio del cobre · promedio mensual · feb-ago 2026</figcaption><svg viewBox="0 0 320 120" aria-hidden="true"><polyline points="8,94.4 52,72 96,83.2 140,44.8 184,52.8 228,27.2 272,35.2" class="ui-chart__linea"></polyline><circle cx="272" cy="35.2" r="4" class="ui-chart__serie"></circle><text x="280" y="39.2" class="ui-chart__valor ui-chart__valor--fuerte">4,58</text></svg><p>Fuente: Cochilco · Bolsa de Metales de Londres · dólares por libra</p><details><summary>Ver datos</summary><table><thead><tr><th>Mes</th><th>Dólares por libra</th></tr></thead><tbody><tr><th>Feb</th><td>4,21</td></tr><tr><th>Mar</th><td>4,35</td></tr><tr><th>Abr</th><td>4,28</td></tr><tr><th>May</th><td>4,52</td></tr><tr><th>Jun</th><td>4,47</td></tr><tr><th>Jul</th><td>4,63</td></tr><tr><th>Ago</th><td>4,58</td></tr></tbody></table></details></figure>

<figure class="ui-sample ui-chart" data-renderer="cochid-graphs" data-chart="heatmap"><figcaption>Tasa de desocupación por región y trimestre móvil · 2026</figcaption><svg viewBox="0 0 320 120" aria-hidden="true"><text x="117" y="10" text-anchor="middle" class="ui-chart__rotulo ui-chart__rotulo--chico">Feb-abr</text><text x="173" y="10" text-anchor="middle" class="ui-chart__rotulo ui-chart__rotulo--chico">Mar-may</text><text x="229" y="10" text-anchor="middle" class="ui-chart__rotulo ui-chart__rotulo--chico">Abr-jun</text><text x="285" y="10" text-anchor="middle" class="ui-chart__rotulo ui-chart__rotulo--chico">May-jul</text><text x="84" y="35" text-anchor="end" class="ui-chart__rotulo ui-chart__rotulo--chico">Metropolitana</text><rect x="90" y="16" width="54" height="30" class="ui-chart__serie" fill-opacity="0.5"></rect><text x="117" y="35" text-anchor="middle" class="ui-chart__valor">8,3%</text><rect x="146" y="16" width="54" height="30" class="ui-chart__serie" fill-opacity="0.53"></rect><text x="173" y="35" text-anchor="middle" class="ui-chart__valor">8,5%</text><rect x="202" y="16" width="54" height="30" class="ui-chart__serie" fill-opacity="0.56"></rect><text x="229" y="35" text-anchor="middle" class="ui-chart__valor">8,7%</text><rect x="258" y="16" width="54" height="30" class="ui-chart__serie" fill-opacity="0.59"></rect><text x="285" y="35" text-anchor="middle" class="ui-chart__valor">8,9%</text><text x="84" y="67" text-anchor="end" class="ui-chart__rotulo ui-chart__rotulo--chico">Valparaíso</text><rect x="90" y="48" width="54" height="30" class="ui-chart__serie" fill-opacity="0.6"></rect><text x="117" y="67" text-anchor="middle" class="ui-chart__valor">9,0%</text><rect x="146" y="48" width="54" height="30" class="ui-chart__serie" fill-opacity="0.59"></rect><text x="173" y="67" text-anchor="middle" class="ui-chart__valor">8,9%</text><rect x="202" y="48" width="54" height="30" class="ui-chart__serie" fill-opacity="0.54"></rect><text x="229" y="67" text-anchor="middle" class="ui-chart__valor">8,6%</text><rect x="258" y="48" width="54" height="30" class="ui-chart__serie" fill-opacity="0.52"></rect><text x="285" y="67" text-anchor="middle" class="ui-chart__valor">8,4%</text><text x="84" y="99" text-anchor="end" class="ui-chart__rotulo ui-chart__rotulo--chico">Biobío</text><rect x="90" y="80" width="54" height="30" class="ui-chart__serie" fill-opacity="0.31"></rect><text x="117" y="99" text-anchor="middle" class="ui-chart__valor">6,9%</text><rect x="146" y="80" width="54" height="30" class="ui-chart__serie" fill-opacity="0.35"></rect><text x="173" y="99" text-anchor="middle" class="ui-chart__valor">7,2%</text><rect x="202" y="80" width="54" height="30" class="ui-chart__serie" fill-opacity="0.39"></rect><text x="229" y="99" text-anchor="middle" class="ui-chart__valor">7,5%</text><rect x="258" y="80" width="54" height="30" class="ui-chart__serie" fill-opacity="0.4"></rect><text x="285" y="99" text-anchor="middle" class="ui-chart__valor">7,6%</text></svg><p>Fuente: INE · Encuesta Nacional de Empleo · feb-jul 2026 · porcentaje</p><details><summary>Ver datos</summary><table><thead><tr><th>Región</th><th>Feb-abr</th><th>Mar-may</th><th>Abr-jun</th><th>May-jul</th></tr></thead><tbody><tr><th>Metropolitana</th><td>8,3%</td><td>8,5%</td><td>8,7%</td><td>8,9%</td></tr><tr><th>Valparaíso</th><td>9,0%</td><td>8,9%</td><td>8,6%</td><td>8,4%</td></tr><tr><th>Biobío</th><td>6,9%</td><td>7,2%</td><td>7,5%</td><td>7,6%</td></tr></tbody></table></details></figure>

<figure class="ui-sample ui-chart" data-renderer="cochid-graphs" data-chart="choropleth"><figcaption>Pobreza por ingresos por comuna · Gran Concepción · 2022</figcaption><svg viewBox="0 0 320 120" aria-hidden="true"><path d="M40 18L78 27L100 60L82 102L34 90L22 51Z" class="ui-chart__bloque" fill-opacity="0.25"></path><path d="M103 24L151 16L182 40L174 94L120 106L98 60Z" class="ui-chart__bloque" fill-opacity="0.55"></path><path d="M186 29L218 43L230 81L200 104L177 86Z" class="ui-chart__bloque" fill-opacity="0.9"></path><text x="59.3" y="56" text-anchor="middle" class="ui-chart__valor ui-chart__valor--chico">Concepción</text><text x="59.3" y="68" text-anchor="middle" class="ui-chart__valor ui-chart__valor--chico">5,1%</text><text x="138" y="54.7" text-anchor="middle" class="ui-chart__valor ui-chart__valor--chico">Talcahuano</text><text x="138" y="66.7" text-anchor="middle" class="ui-chart__valor ui-chart__valor--chico">7,4%</text><text x="202.2" y="66.6" text-anchor="middle" class="ui-chart__valor ui-chart__valor--chico ui-chart__valor--inverso">Coronel</text><text x="202.2" y="78.6" text-anchor="middle" class="ui-chart__valor ui-chart__valor--chico ui-chart__valor--inverso">10,2%</text><rect x="246" y="34" width="10" height="10" class="ui-chart__serie" fill-opacity="0.25"></rect><text x="261" y="43" class="ui-chart__rotulo ui-chart__rotulo--chico">Menos de 6%</text><rect x="246" y="54" width="10" height="10" class="ui-chart__serie" fill-opacity="0.55"></rect><text x="261" y="63" class="ui-chart__rotulo ui-chart__rotulo--chico">6% a 9%</text><rect x="246" y="74" width="10" height="10" class="ui-chart__serie" fill-opacity="0.9"></rect><text x="261" y="83" class="ui-chart__rotulo ui-chart__rotulo--chico">Más de 9%</text></svg><p>Fuente: Ministerio de Desarrollo Social y Familia · estimación comunal · 2022 · porcentaje de personas</p><details><summary>Ver datos</summary><table><thead><tr><th>Comuna</th><th>Pobreza por ingresos</th></tr></thead><tbody><tr><th>Concepción</th><td>5,1%</td></tr><tr><th>Talcahuano</th><td>7,4%</td></tr><tr><th>Coronel</th><td>10,2%</td></tr></tbody></table></details></figure>

<figure class="ui-sample ui-chart" data-renderer="cochid-graphs" data-chart="network"><figcaption>Proyectos en comisiones unidas · Senado · 2026</figcaption><svg viewBox="0 0 320 120" aria-hidden="true"><path d="M160 60L70 28" stroke-width="5"></path><path d="M160 60L250 28" stroke-width="4"></path><path d="M160 60L82 96" stroke-width="3"></path><path d="M160 60L240 96" stroke-width="2"></path><path d="M70 28L82 96" stroke-width="2"></path><path d="M250 28L240 96" stroke-width="1"></path><circle cx="160" cy="60" r="12"></circle><circle cx="70" cy="28" r="8.5"></circle><circle cx="250" cy="28" r="7"></circle><circle cx="82" cy="96" r="7"></circle><circle cx="240" cy="96" r="5.5"></circle><g fill="currentColor" font-size="7"><text x="160" y="44" text-anchor="middle">Hacienda</text><text x="58" y="30.5" text-anchor="end">Trabajo</text><text x="261" y="30.5">Economía</text><text x="71" y="98.5" text-anchor="end">Educación</text><text x="249" y="98.5">Salud</text></g></svg><p>Fuente: Senado de Chile · tramitación legislativa · ene-ago 2026 · número de proyectos</p><details><summary>Ver datos</summary><table><thead><tr><th>Comisiones</th><th>Proyectos</th></tr></thead><tbody><tr><th>Hacienda y Trabajo</th><td>5</td></tr><tr><th>Hacienda y Economía</th><td>4</td></tr><tr><th>Hacienda y Educación</th><td>3</td></tr><tr><th>Hacienda y Salud</th><td>2</td></tr><tr><th>Trabajo y Educación</th><td>2</td></tr><tr><th>Economía y Salud</th><td>1</td></tr></tbody></table></details></figure>

<figure class="ui-sample ui-chart" data-renderer="cochid-graphs" data-chart="donut"><figcaption>Ocupados por sector económico · may-jul 2026</figcaption><svg viewBox="0 0 320 120" aria-hidden="true"><g transform="rotate(-90 70 60)"><circle cx="70" cy="60" r="38" class="ui-chart__arco" stroke-dasharray="162.7 238.8"></circle><circle cx="70" cy="60" r="38" class="ui-chart__arco ui-chart__arco--2" stroke-dasharray="50.5 238.8" stroke-dashoffset="-164.7"></circle><circle cx="70" cy="60" r="38" class="ui-chart__arco ui-chart__arco--3" stroke-dasharray="19.5 238.8" stroke-dashoffset="-217.3"></circle></g><rect x="136" y="36" width="10" height="10" class="ui-chart__serie"></rect><text x="152" y="45" class="ui-chart__rotulo">Servicios · 69%</text><rect x="136" y="56" width="10" height="10" class="ui-chart__serie ui-chart__serie--2"></rect><text x="152" y="65" class="ui-chart__rotulo">Industria y construcción · 22%</text><rect x="136" y="76" width="10" height="10" class="ui-chart__serie ui-chart__serie--3"></rect><text x="152" y="85" class="ui-chart__rotulo">Agricultura y pesca · 9%</text></svg><p>Fuente: INE · Encuesta Nacional de Empleo · may-jul 2026 · porcentaje de los ocupados</p><details><summary>Ver datos</summary><table><thead><tr><th>Sector</th><th>Participación</th></tr></thead><tbody><tr><th>Servicios</th><td>69%</td></tr><tr><th>Industria y construcción</th><td>22%</td></tr><tr><th>Agricultura y pesca</th><td>9%</td></tr></tbody></table></details></figure>

<figure class="ui-sample ui-chart" data-renderer="cochid-graphs" data-chart="scatter"><figcaption>Participación laboral y desocupación por región · may-jul 2026</figcaption><svg viewBox="0 0 320 120" aria-hidden="true"><path d="M44 96H305M44 12V96" class="ui-chart__eje"></path><text x="40" y="15" text-anchor="end" class="ui-chart__rotulo ui-chart__rotulo--chico">10%</text><text x="40" y="99" text-anchor="end" class="ui-chart__rotulo ui-chart__rotulo--chico">6%</text><text x="50" y="18" class="ui-chart__rotulo ui-chart__rotulo--chico">desocupación</text><text x="44" y="110" text-anchor="middle" class="ui-chart__rotulo ui-chart__rotulo--chico">52%</text><text x="174" y="110" text-anchor="middle" class="ui-chart__rotulo ui-chart__rotulo--chico">participación laboral</text><text x="300" y="110" text-anchor="middle" class="ui-chart__rotulo ui-chart__rotulo--chico">66%</text><circle cx="265.3" cy="35.1" r="4" class="ui-chart__serie"></circle><circle cx="232.3" cy="66.6" r="4" class="ui-chart__serie"></circle><circle cx="175.7" cy="45.6" r="4" class="ui-chart__serie"></circle><circle cx="109.8" cy="62.4" r="4" class="ui-chart__serie"></circle><circle cx="95.2" cy="77.1" r="4" class="ui-chart__serie"></circle><text x="265.3" y="27" text-anchor="middle" class="ui-chart__rotulo ui-chart__rotulo--chico">Metropolitana</text><text x="239.3" y="69.6" class="ui-chart__rotulo ui-chart__rotulo--chico">Antofagasta</text><text x="182.7" y="48.6" class="ui-chart__rotulo ui-chart__rotulo--chico">Valparaíso</text><text x="116.8" y="65.4" class="ui-chart__rotulo ui-chart__rotulo--chico">Biobío</text><text x="102.2" y="80.1" class="ui-chart__rotulo ui-chart__rotulo--chico">La Araucanía</text></svg><p>Fuente: INE · Encuesta Nacional de Empleo · may-jul 2026 · porcentaje</p><details><summary>Ver datos</summary><table><thead><tr><th>Región</th><th>Tasa de participación</th><th>Tasa de desocupación</th></tr></thead><tbody><tr><th>Metropolitana</th><td>64,1%</td><td>8,9%</td></tr><tr><th>Antofagasta</th><td>62,3%</td><td>7,4%</td></tr><tr><th>Valparaíso</th><td>59,2%</td><td>8,4%</td></tr><tr><th>Biobío</th><td>55,6%</td><td>7,6%</td></tr><tr><th>La Araucanía</th><td>54,8%</td><td>6,9%</td></tr></tbody></table></details></figure>

<figure class="ui-sample ui-chart" data-renderer="cochid-graphs" data-chart="sankey"><figcaption>Solicitudes de acceso a la información pública · municipalidad · 2025</figcaption><svg viewBox="0 0 320 120" aria-hidden="true"><path d="M14 14C66 14 66 10 118 10L118 83.6C66 83.6 66 87.6 14 87.6Z" class="ui-chart__flujo"></path><path d="M14 87.6C66 87.6 66 91.6 118 91.6L118 110C66 110 66 106 14 106Z" class="ui-chart__flujo"></path><path d="M128 10C176 10 176 8 224 8L224 67.8C176 67.8 176 69.8 128 69.8Z" class="ui-chart__flujo"></path><path d="M128 69.8C176 69.8 176 75.8 224 75.8L224 89.6C176 89.6 176 83.6 128 83.6Z" class="ui-chart__flujo"></path><rect x="4" y="14" width="10" height="92" class="ui-chart__serie"></rect><rect x="118" y="10" width="10" height="73.6" class="ui-chart__serie"></rect><rect x="118" y="91.6" width="10" height="18.4" class="ui-chart__serie"></rect><rect x="224" y="8" width="10" height="59.8" class="ui-chart__serie"></rect><rect x="224" y="75.8" width="10" height="13.8" class="ui-chart__serie"></rect><text x="4" y="10" class="ui-chart__valor ui-chart__valor--chico">Ingresadas · 1.200</text><text x="132" y="49.8" class="ui-chart__valor ui-chart__valor--chico">Respondidas · 960</text><text x="132" y="103.8" class="ui-chart__valor ui-chart__valor--chico">Derivadas · 240</text><text x="238" y="40.9" class="ui-chart__valor ui-chart__valor--chico">Entregadas · 780</text><text x="238" y="85.7" class="ui-chart__valor ui-chart__valor--chico">Denegadas · 180</text></svg><p>Fuente: registro de solicitudes de transparencia pasiva · 2025 · número de solicitudes</p><details><summary>Ver datos</summary><table><thead><tr><th>Origen</th><th>Destino</th><th>Solicitudes</th></tr></thead><tbody><tr><th>Ingresadas</th><td>Respondidas</td><td>960</td></tr><tr><th>Ingresadas</th><td>Derivadas</td><td>240</td></tr><tr><th>Respondidas</th><td>Entregadas</td><td>780</td></tr><tr><th>Respondidas</th><td>Denegadas</td><td>180</td></tr></tbody></table></details></figure>

<figure class="ui-sample ui-chart" data-renderer="cochid-graphs" data-chart="radar"><figcaption>Evaluación de la atención municipal · encuesta a vecinos · 2026</figcaption><svg viewBox="0 0 320 120" aria-hidden="true"><path d="M160 18L201.8 48.4L185.9 97.6L134.1 97.6L118.2 48.4ZM160 40L180.9 55.2L172.9 79.8L147.1 79.8L139.1 55.2Z" class="ui-chart__guia"></path><path d="M160 62L160 18M160 62L201.8 48.4M160 62L185.9 97.6M160 62L134.1 97.6M160 62L118.2 48.4" class="ui-chart__guia"></path><polygon points="160,25 183.4,54.4 178.6,87.6 144,84.1 127.4,51.4" class="ui-chart__area"></polygon><text x="160" y="13" text-anchor="middle" class="ui-chart__rotulo ui-chart__rotulo--chico">Trato · 4,2</text><text x="208.5" y="49.2" class="ui-chart__rotulo ui-chart__rotulo--chico">Tiempo de espera · 2,8</text><text x="190" y="112.3" class="ui-chart__rotulo ui-chart__rotulo--chico">Información · 3,6</text><text x="130" y="112.3" text-anchor="end" class="ui-chart__rotulo ui-chart__rotulo--chico">Resolución · 3,1</text><text x="111.5" y="49.2" text-anchor="end" class="ui-chart__rotulo ui-chart__rotulo--chico">Canales en línea · 3,9</text></svg><p>Fuente: encuesta de satisfacción de usuarios · 2026 · promedio en escala de 0 a 5</p><details><summary>Ver datos</summary><table><thead><tr><th>Dimensión</th><th>Promedio</th></tr></thead><tbody><tr><th>Trato</th><td>4,2</td></tr><tr><th>Tiempo de espera</th><td>2,8</td></tr><tr><th>Información</th><td>3,6</td></tr><tr><th>Resolución</th><td>3,1</td></tr><tr><th>Canales en línea</th><td>3,9</td></tr></tbody></table></details></figure>

<figure class="ui-sample ui-chart" data-renderer="cochid-graphs" data-chart="gauge"><figcaption>Ejecución del presupuesto municipal · al 31 de julio de 2026</figcaption><svg viewBox="0 0 320 120" aria-hidden="true"><path d="M98 86A62 62 0 0 1 222 86" class="ui-chart__pista"></path><path d="M98 86A62 62 0 0 1 163.9 24.1" class="ui-chart__avance"></path><path d="M172.9 37.7L179.1 14.5" class="ui-chart__meta"></path><path d="M160 86L162.8 42.1" class="ui-chart__aguja"></path><circle cx="160" cy="86" r="5" class="ui-chart__pivote"></circle><text x="185" y="12" class="ui-chart__rotulo ui-chart__rotulo--chico">Meta 58,3%</text><text x="98" y="101" text-anchor="middle" class="ui-chart__rotulo ui-chart__rotulo--chico">0%</text><text x="222" y="101" text-anchor="middle" class="ui-chart__rotulo ui-chart__rotulo--chico">100%</text><text x="160" y="112" text-anchor="middle" class="ui-chart__valor ui-chart__valor--grande">52,0%</text></svg><p>Fuente: informe de ejecución presupuestaria · julio 2026 · porcentaje del presupuesto vigente</p><details><summary>Ver datos</summary><table><thead><tr><th>Indicador</th><th>Valor</th></tr></thead><tbody><tr><th>Gasto ejecutado</th><td>52,0%</td></tr><tr><th>Meta al 31 de julio</th><td>58,3%</td></tr></tbody></table></details></figure>

<figure class="ui-sample ui-chart" data-renderer="cochid-graphs" data-chart="treemap"><figcaption>Generación eléctrica por fuente · Sistema Eléctrico Nacional · 2025</figcaption><svg viewBox="0 0 320 120" aria-hidden="true"><rect x="10" y="10" width="180" height="53.3" class="ui-chart__bloque"></rect><text x="17" y="25" class="ui-chart__valor ui-chart__valor--inverso ui-chart__valor--fuerte">Solar</text><text x="17" y="38" class="ui-chart__valor ui-chart__valor--inverso">32%</text><rect x="10" y="63.3" width="180" height="46.7" class="ui-chart__bloque"></rect><text x="17" y="78.3" class="ui-chart__valor ui-chart__valor--inverso ui-chart__valor--fuerte">Térmica</text><text x="17" y="91.3" class="ui-chart__valor ui-chart__valor--inverso">28%</text><rect x="190" y="10" width="120" height="62.5" class="ui-chart__bloque"></rect><text x="197" y="25" class="ui-chart__valor ui-chart__valor--inverso ui-chart__valor--fuerte">Hidráulica</text><text x="197" y="38" class="ui-chart__valor ui-chart__valor--inverso">25%</text><rect x="190" y="72.5" width="120" height="37.5" class="ui-chart__bloque"></rect><text x="197" y="87.5" class="ui-chart__valor ui-chart__valor--inverso ui-chart__valor--fuerte">Eólica</text><text x="197" y="100.5" class="ui-chart__valor ui-chart__valor--inverso">15%</text></svg><p>Fuente: Coordinador Eléctrico Nacional · generación bruta 2025 · porcentaje del total</p><details><summary>Ver datos</summary><table><thead><tr><th>Fuente</th><th>Participación</th></tr></thead><tbody><tr><th>Solar</th><td>32%</td></tr><tr><th>Térmica</th><td>28%</td></tr><tr><th>Hidráulica</th><td>25%</td></tr><tr><th>Eólica</th><td>15%</td></tr></tbody></table></details></figure>

<figure class="ui-sample ui-chart" data-renderer="cochid-graphs" data-chart="funnel"><figcaption>Postulaciones al Fondo de Desarrollo Vecinal · convocatoria 2026</figcaption><svg viewBox="0 0 320 120" aria-hidden="true"><text x="4" y="31" class="ui-chart__rotulo">Postulados</text><rect x="110" y="14" width="190" height="26" class="ui-chart__serie"></rect><text x="205" y="31" text-anchor="middle" class="ui-chart__valor ui-chart__valor--inverso ui-chart__valor--fuerte">148</text><text x="4" y="63" class="ui-chart__rotulo">Admisibles</text><rect x="133.1" y="46" width="143.8" height="26" class="ui-chart__serie"></rect><text x="205" y="63" text-anchor="middle" class="ui-chart__valor ui-chart__valor--inverso ui-chart__valor--fuerte">112</text><text x="4" y="95" class="ui-chart__rotulo">Financiados</text><rect x="175.5" y="78" width="59.1" height="26" class="ui-chart__serie"></rect><text x="205" y="95" text-anchor="middle" class="ui-chart__valor ui-chart__valor--inverso ui-chart__valor--fuerte">46</text></svg><p>Fuente: registro municipal de postulaciones · convocatoria 2026 · número de proyectos</p><details><summary>Ver datos</summary><table><thead><tr><th>Etapa</th><th>Proyectos</th><th>Porcentaje de los postulados</th></tr></thead><tbody><tr><th>Postulados</th><td>148</td><td>100%</td></tr><tr><th>Admisibles</th><td>112</td><td>76%</td></tr><tr><th>Financiados</th><td>46</td><td>31%</td></tr></tbody></table></details></figure>

<svg class="ui-kit-icon" data-kit-icon="search" viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" role="img" aria-label="Buscar"><path d="m21 21-4.34-4.34"></path><circle cx="11" cy="11" r="8"></circle></svg>

<span class="ui-family-chip" data-family="estado"><svg class="ui-kit-icon" data-kit-icon="landmark" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><path d="M10 18v-7"></path><path d="M11.119 2.205a2 2 0 0 1 1.762 0l7.84 3.846A.5.5 0 0 1 20.5 7h-17a.5.5 0 0 1-.22-.949z"></path><path d="M14 18v-7"></path><path d="M18 18v-7"></path><path d="M3 22h18"></path><path d="M6 18v-7"></path></svg><span>Política</span></span>

<h2 class="ui-family-heading"><span class="ui-family-square" data-family="dinero"><svg class="ui-kit-icon" data-kit-icon="trending-up" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><path d="M16 7h6v6"></path><path d="m22 7-8.5 8.5-5-5L2 17"></path></svg></span><span>Economía</span></h2>

<div class="ui-wall-legend" role="region" aria-label="Leyenda de la página" tabindex="0"><ul><li><svg class="ui-kit-icon" data-kit-icon="lightbulb" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"></path><path d="M9 18h6"></path><path d="M10 22h4"></path></svg><span class="ui-wall-legend__swatch" data-environment="trabajo" aria-hidden="true"></span><span>Trabajo: herramientas</span></li><li data-family="dinero"><svg class="ui-kit-icon" data-kit-icon="calculator" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><rect width="16" height="20" x="4" y="2" rx="2"></rect><line x1="8" x2="16" y1="6" y2="6"></line><line x1="16" x2="16" y1="14" y2="18"></line><path d="M16 10h.01"></path><path d="M12 10h.01"></path><path d="M8 10h.01"></path><path d="M12 14h.01"></path><path d="M8 14h.01"></path><path d="M12 18h.01"></path><path d="M8 18h.01"></path></svg><span>Dinero: economía</span></li><li data-family="saber"><svg class="ui-kit-icon" data-kit-icon="book-open" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><path d="M12 5v16"></path><path d="M20.001 19A2 2 0 0022 17V5a2 2 0 00-1.999-2L16 3.002A5 5 0 0012 5a5 5 0 00-4-2H4a2 2 0 00-2 2v12a2 2 0 001.999 2H8a5 5 0 014 2 5 5 0 014-2z"></path></svg><span>Saber: investigación</span></li><li data-state="info"><svg class="ui-kit-icon" data-kit-icon="info" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M12 16v-4"></path><path d="M12 8h.01"></path></svg><span>Información disponible</span></li><li data-state="safe"><svg class="ui-kit-icon" data-kit-icon="circle-check" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="m9 12 2 2 4-4"></path></svg><span>Datos verificados</span></li><li><svg class="ui-kit-icon" data-kit-icon="user" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg><span>Cuenta y acceso</span></li></ul></div>

<header class="ui-sample ui-content" data-page-header="true"><h2>Componentes</h2><p>Patrones canónicos con ejemplos y código copiable.</p><nav aria-label="Acciones de página"><a class="btn btn--primary" href="#accion">Abrir inventario</a></nav></header>

<header class="ui-sample ui-content" data-article-header="true"><h2>Santiago cambia a escala de barrio</h2><p>Un recorrido por las decisiones que cambian el espacio público y su evidencia.</p><div><a rel="author" href="#autor">Sebastián Illanes</a> · <time dateTime="2026-08-25">25 de agosto de 2026</time> · 4 min</div></header>

<article class="ui-sample ui-content" data-article-body><p>La escala de barrio permite comparar cambios que se pierden en un promedio comunal.</p><h3>Cómo se midió</h3><p>El análisis usa la misma unidad, período y cobertura para cada observación. Los vacíos se distinguen de los ceros.</p><p><a href="#fuente">Consulta la serie y su metodología</a>.</p></article>

<p class="ui-sample" data-byline>Por <a rel="author" href="#sebastian">Sebastián Illanes</a> · <time datetime="2026-08-25">25 ago 2026</time></p>

<p class="ui-sample" data-image-credit>Imagen: <a href="#obra">Martín Illanes</a> · 2026</p>

<figure class="ui-sample ui-content" data-figure-caption="true"><svg role="img" aria-label="Trama de 24 manzanas; siete aparecen marcadas con cambio" width="100%" height="160" viewBox="0 0 316 160" fill="none" stroke="currentColor" stroke-width="1"><rect x="4" y="4" width="31" height="44"></rect><rect x="43" y="4" width="31" height="44"></rect><rect x="82" y="4" width="31" height="44" fill="currentColor" fill-opacity="0.35"></rect><rect x="121" y="4" width="31" height="44"></rect><rect x="160" y="4" width="31" height="44"></rect><rect x="199" y="4" width="31" height="44" fill="currentColor" fill-opacity="0.35"></rect><rect x="238" y="4" width="31" height="44"></rect><rect x="277" y="4" width="31" height="44"></rect><rect x="4" y="56" width="31" height="44"></rect><rect x="43" y="56" width="31" height="44" fill="currentColor" fill-opacity="0.35"></rect><rect x="82" y="56" width="31" height="44" fill="currentColor" fill-opacity="0.35"></rect><rect x="121" y="56" width="31" height="44"></rect><rect x="160" y="56" width="31" height="44"></rect><rect x="199" y="56" width="31" height="44"></rect><rect x="238" y="56" width="31" height="44" fill="currentColor" fill-opacity="0.35"></rect><rect x="277" y="56" width="31" height="44"></rect><rect x="4" y="108" width="31" height="44"></rect><rect x="43" y="108" width="31" height="44"></rect><rect x="82" y="108" width="31" height="44"></rect><rect x="121" y="108" width="31" height="44" fill="currentColor" fill-opacity="0.35"></rect><rect x="160" y="108" width="31" height="44"></rect><rect x="199" y="108" width="31" height="44" fill="currentColor" fill-opacity="0.35"></rect><rect x="238" y="108" width="31" height="44"></rect><rect x="277" y="108" width="31" height="44"></rect></svg><figcaption><strong>Figura 1.</strong> Cambio observado por manzana, enero a junio de 2026. Fuente: Catastro municipal.</figcaption></figure>

<blockquote class="ui-sample ui-content"><p>“El mapa debe explicar tanto lo que muestra como lo que omite.”</p><footer><cite>Nota metodológica del proyecto</cite></footer></blockquote>

<aside class="ui-sample ui-content" data-margin-note aria-label="Nota 1"><sup>1</sup><p>Un cero indica medición sin casos; un vacío indica ausencia de dato.</p></aside>

<section class="ui-sample ui-content" data-bibliography="true"><h3>Referencias</h3><ol><li>Instituto Nacional de Estadísticas. <cite>Boletín de empleo</cite>, 2026.</li><li>COCHID. <cite>Serie regional armonizada</cite>, versión 3.</li></ol></section>

<article class="ui-sample ui-content" data-source-card="true"><header><strong>INE · Encuesta Nacional de Empleo</strong> <span class="badge">Fuente primaria</span></header><dl><div><dt>Período</dt><dd>may-jul 2026</dd></div><div><dt>Cobertura</dt><dd>16 regiones</dd></div><div><dt>Licencia</dt><dd>Uso con atribución</dd></div></dl><a href="#fuente">Abrir publicación original</a></article>

<nav class="ui-sample ui-content" aria-label="Contenido relacionado"><h3>También puedes leer</h3><ul><li><a href="#metodo">Cómo se construyó la serie regional</a></li><li><a href="#mapa">Mapa de cambios por comuna</a></li></ul></nav>

<article class="ui-sample ui-content" data-editorial-card="true"><header><span>Crónica</span><h3><a href="#articulo">Santiago cambia a escala de barrio</a></h3></header><p>Qué calles, plazas y ciclovías cambiaron en los barrios del centro durante 2026 y qué datos usaron los municipios para decidirlo.</p><footer><a rel="author" href="#autor">Sebastián Illanes</a> · 4 min</footer></article>

<form class="ui-sample ui-content" data-newsletter-signup="true" action="#suscribir"><h3>Comentario por correo</h3><p>Una edición cuando exista algo que valga la pena leer.</p><label for="newsletter-0">Correo electrónico</label><input class="input" id="newsletter-0" type="email" autoComplete="email" required=""/><button class="btn btn--primary" type="submit">Suscribirme</button> <small>Incluye enlace para cancelar la suscripción.</small></form>

<section class="ui-sample ui-content" data-ticker="true" aria-label="Actualizaciones"><strong>Ahora</strong><ul><li><time datetime="2026-08-25T18:20:00-04:00">18:20</time> <span>Se publica el índice de actividad regional</span></li><li><time datetime="2026-08-25T18:08:00-04:00">18:08</time> <span>Nueva actualización de transporte</span></li></ul></section>

<section class="ui-sample ui-content" data-agenda="true"><h3>Agenda de hoy</h3><ol><li><time dateTime="2026-08-25T10:00:00-04:00">10:00</time> <span>Sesión del Concejo Municipal</span> <a href="#evento">Ver fuente</a></li><li><time dateTime="2026-08-25T18:30:00-04:00">18:30</time> <span>Conversatorio sobre ciudad</span> <a href="#evento-2">Detalles</a></li></ol></section>

<section class="ui-sample ui-content" data-weather="true"><header><strong>Santiago</strong> <time dateTime="2026-08-25T18:00:00-04:00">18:00 CLT</time></header><p><b>18 °C</b> · despejado</p><dl><div><dt>Máxima</dt><dd>21 °C</dd></div><div><dt>Viento</dt><dd>9 km/h SO</dd></div></dl><small>Fuente: Dirección Meteorológica de Chile</small></section>

<aside class="ui-state-notice" data-state="caution"><svg class="ui-kit-icon" data-kit-icon="triangle-alert" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"></path><path d="M12 9v4"></path><circle cx="12" cy="17" r="1.1" fill="currentColor" stroke="none"></circle></svg><div><strong class="ui-state-notice__title">Precaución: cobertura parcial</strong><div class="ui-state-notice__body">Falta una región en este corte. Consulta la fecha y la fuente.</div></div></aside>

<aside class="ui-sample ui-feedback ui-notice" data-notice="action" role="alert" aria-live="assertive"><div><strong>No pudimos guardar</strong><p>Los campos se conservan; vuelve a intentar.</p><div class="ui-actions"><button class="btn btn--secondary" type="button">Reintentar</button></div></div><button class="btn btn--icon" type="button" aria-label="Cerrar aviso" data-notice-close="">×</button></aside>

<aside class="ui-sample ui-feedback ui-notice" data-notice="quiet" role="status" aria-live="polite"><div><strong>Cambios guardados</strong><p>Puedes seguir trabajando.</p></div></aside>

<section class="ui-sample ui-feedback ui-state" data-ui-state="empty" role="status" aria-live="polite"><h3>No hay resultados</h3><p>Prueba otra búsqueda o quita los filtros.</p></section>

<section class="ui-sample ui-feedback" role="status" data-severity="info"><span class="badge">Aviso</span> <strong>Nueva versión disponible</strong><p>Puedes revisar los cambios antes de actualizar.</p><a class="btn btn--quiet" href="#detalle">Ver detalle</a></section>

<section class="ui-sample ui-feedback" role="alert" data-severity="warning"><span class="badge badge--warn">Advertencia</span> <strong>Cobertura parcial</strong><p>Falta la Región de Aysén en este corte.</p><a class="btn btn--quiet" href="#detalle">Ver detalle</a></section>

<section class="ui-sample ui-feedback" role="alert" data-severity="error"><span class="badge badge--err">Error</span> <strong>No se guardaron los cambios</strong><p>Otra persona guardó una versión más reciente. Revisa las diferencias y vuelve a guardar.</p><a class="btn btn--quiet" href="#detalle">Ver detalle</a></section>

<section class="ui-sample ui-feedback" role="status" data-severity="success"><span class="badge badge--ok">Listo</span> <strong>Documento guardado</strong><p>La versión 4 quedó registrada con su código de verificación.</p><a class="btn btn--quiet" href="#detalle">Ver detalle</a></section>

<aside class="ui-sample ui-feedback" data-toast="true" role="status" aria-live="polite"><div><strong>Cambios guardados</strong><p>Versión 4 · 18:24 CLT</p></div><button class="btn btn--icon" type="button" aria-label="Cerrar notificación">×</button></aside>

<p class="ui-sample" data-inline-status="true" data-tone="success" role="status"><span aria-hidden="true">✓</span> Todos los cambios están guardados</p>

<div class="ui-sample ui-progress-row" data-progress-bar><div class="ui-progress-row__header"><label for="progress-0">Importando 6.842 filas</label><output for="progress-0">32%</output></div><progress id="progress-0" value="32" max="100">32%</progress><small>Sin errores detectados</small></div>

<div class="ui-sample ui-spinner-frame" data-spinner role="status"><span class="ui-spinner" aria-hidden="true"></span><span>Cargando resultados</span></div>

<div class="ui-sample ui-skeleton"><div data-skeleton aria-hidden="true"><span></span><span></span><span></span></div><span class="sr-only" role="status">Cargando contenido</span></div>

<section class="ui-sample ui-loading-panel" data-loading-overlay="true" aria-busy="true" aria-live="polite"><span class="ui-spinner" aria-hidden="true"></span><div class="ui-loading-panel__copy"><strong>Generando vista previa</strong><p>Puedes cancelar sin perder tus cambios.</p></div><div class="ui-loading-panel__actions"><button class="btn btn--quiet" type="button">Cancelar</button></div></section>