Componentes · variantes de controles
Botones, enlaces, campos y la tarjeta de entrada
Cada fila abre con lo que hay desplegado hoy, bajado de los sitios en vivo y de
core-style/v7, con la procedencia anotada. Debajo van cinco variantes numeradas, todas
renderizadas de verdad. Elige por número: 1.v3, 3.v2, y con eso armo el cambio.
Nada de esta página está aplicado a ningún sitio.
Radios
Las cinco variantes usan 2px, como pediste y como ya hace la tarjeta decidida. Lo desplegado
no coincide: --radius: 0 en superficies y --radius-ctl: 6px en
.input. Si eliges 2px hay que corregir el token, no solo esta página.
Cinco controles no existen
No hay casilla, radio, interruptor, control segmentado ni buscador en v7 ni en
ninguno de los seis sitios revisados. Sus filas no traen "desplegado" porque no hay nada que traer, y
ese hueco es la decisión más grande de la página.
Sin navegador
En el servidor no hay navegador instalado, así que no vi esta página renderizada. Las medidas
salen copiadas del CSS en vivo y de componentes/v3.html, no inventadas. El anidamiento sí
está validado con html.parser.
1 · Botones
Siete estados por variante: primario, secundario, terciario, destructivo, con icono, deshabilitado y cargando. Cada variante es una postura completa del sistema, no una diferencia de un píxel, porque lo que hay que elegir es la voz del botón.
desplegado
core-style/v7/base/components.css:9-35 · catalogo.css:97-104 · circulodesantiago.cl/_next/static/css/5cf19aa23c03f9be.css · periodismo2.cl chunk 0z._jk18xsp59.css · bajado 2026-08-05
v7 .btn
v7 .btn--ghost
v7 .btn--sm
catálogo .btn--primary
catálogo .btn--ghost
cds .btn
cds .btn.primary
periodismo2 (tailwind)
Cuatro botones distintos con el mismo nombre. .btn significa tres
cosas incompatibles según el sitio: sans relleno de tinta en v7, mono en versalita con
contorno en catálogo, y contorno por defecto con .primary relleno en CDS. Periodismo2 vive
fuera del sistema, en Tailwind, con rojo #dc2626 y radio 6px. Además ningún sitio tiene
botón destructivo, deshabilitado ni de carga: esos tres estados hay que inventarlos, no rescatarlos.
v1
primario
secundario
terciario
destructivo
con icono
deshabilitado
cargando
Tinta llena, en sansEs la voz de v7 con radio 2px. El primario es
negro, el secundario contorno, el terciario texto subrayado. Conviene si quieres que la jerarquía la marque
el relleno y que el acento de marca quede solo para enlaces y datos.
v2
primario
secundario
terciario
destructivo
con icono
deshabilitado
cargando
Mono en versalitaEs la voz que ya corre en catálogo: JetBrains 11,5px, 700, versalita con tracking .08em, sin radio. Conviene si quieres que el botón se lea como una etiqueta de sistema y no como un botón de aplicación de consumo. Pierde legibilidad en textos largos.
v3
primario
secundario
terciario
destructivo
con icono
deshabilitado
cargando
Contorno primeroLa voz de circulodesantiago.cl: por defecto todo es contorno sobre papel, y el relleno queda reservado al primario. Conviene en páginas con muchos botones seguidos, donde el relleno repetido ensucia. El riesgo es que primario y secundario se confundan a distancia.
v4
primario
secundario
terciario
destructivo
con icono
deshabilitado
cargando
Acento llenoEl primario toma el color de la marca del sitio, el secundario su versión suave. Conviene cuando el botón es la acción central de la página, como pagar o firmar, y quieres que se distinga de un solo golpe de vista entre las tres marcas del grupo.
v5
primario
secundario
terciario
destructivo
con icono
deshabilitado
cargando
PíldoraRadio 999px, la única forma redonda que el sistema ya admite y que hoy
usan el chip de sesión y .gr-login__enter. Conviene si quieres que el botón se lea como
acción liviana de barra. Choca de frente con la geometría recta del resto.
2 · Enlaces
Cinco convenciones completas de subrayado, color y marca de enlace externo. El foco visible es igual en las cinco, porque ya es una convención decidida en producción: contorno de 2px del color de acento separado 2px. En la página está simulado con una clase, no es un foco real de teclado.
desplegado
core-style/v7/base/tokens.css:159-164 · base/chrome.css .gr-nav__link · base/components.css:101-112 · firmasydocumentos.cl/firmas.css · catalogo.css · bajado 2026-08-05
v7 base · a en prosa
registro de documentos
firmasydocumentos · a
registro de documentos
.gr-nav__link
Verificar
.gr-nav__link.is-active
Verificar
v7 .card__link
Visitar el sitio
cds .card-link
Visitar el sitio
foco visible (simulado)
registro de documentos
Dos cosas que faltan y una que sobra. No existe estado deshabilitado de enlace
en ningún sitio, y los enlaces externos salen con target="_blank" rel="noopener" pero
sin ninguna marca visual: quien lee no sabe que va a salir del sitio. Lo que sobra es duplicación:
la regla de foco visible está escrita a mano en catalogo.css y en firmas.css por
separado, no en v7/base. Lo dejo anotado, no lo toqué.
v1
en prosa
Cada documento inscrito recibe un número y un código de verificación propio.
navegaciónVerificar
activoRegistro
externoflow.cl
deshabilitadoActas de directorio
foco (simulado)código de verificación
Color heredado, subrayado siempreEs literalmente lo que dice
v7/base/tokens.css: el enlace no cambia de color, solo lleva subrayado de 1px separado 2px, y
el externo no se marca. Conviene si quieres prosa sobria y sin ruido de color. El costo es que un enlace
dentro de un párrafo largo cuesta ver.
v2
en prosa
Cada documento inscrito recibe un número y un código de verificación propio.
navegaciónVerificar
activoRegistro
externoflow.cl
deshabilitadoActas de directorio
foco (simulado)código de verificación
Acento con subrayadoLo que ya hace firmasydocumentos.cl, más una flecha de salida en los externos. Conviene para páginas informativas donde el enlace es la acción principal y quieres que se vea. El acento cambia por marca, así que el mismo texto se ve azul en la Compañía Chilena de Inteligencia de Datos y navy en CIS.
v3
en prosa
Cada documento inscrito recibe un número y un código de verificación propio.
navegaciónVerificar
activoRegistro
externoflow.cl
deshabilitadoActas de directorio
foco (simulado)código de verificación
Subrayado solo al pasarEn reposo el enlace es texto en tinta; el subrayado aparece al pasar el cursor, y el activo se marca con un fondo suave de acento. Conviene en interfaces densas, tipo panel, donde hay enlaces en cada fila. No conviene en prosa: sin subrayado no hay señal.
v4
en prosa
Cada documento inscrito recibe un número y un código de verificación propio.
navegaciónVerificar
activoRegistro
externoflow.cl
deshabilitadoActas de directorio
foco (simulado)código de verificación
Texto en tinta, subrayado de acentoEl texto conserva el contraste de la tinta y el color de marca vive en el subrayado de 2px separado 3px. El activo de navegación se marca con un punto en vez de una línea. Conviene si quieres marca sin sacrificar legibilidad de lectura larga.
v5
en prosa
Cada documento inscrito recibe un número y un código de verificación propio.
navegaciónVerificar
activoRegistro
externoflow.cl
deshabilitadoActas
foco (simulado)código de verificación
Mono en versalita para lo que es acciónLa prosa sigue con subrayado normal,
pero todo enlace que sea navegación o acción pasa a JetBrains en versalita, que es la voz de
.card__link. Conviene si quieres separar por tipografía lo que se lee de lo que se pulsa.
Es la opción más marcada y la que más cambia el aire de la navegación.
3 · Campos de texto
Seis estados por variante: normal, con foco, con error, deshabilitado, solo lectura y con prefijo. El foco está simulado con una clase para que se vea sin tener que pulsar el campo.
desplegado
core-style/v7/base/components.css:164-179 · catalogo.css .support-form input · componentes/v3.html .lc input · periodismo2.cl (tailwind) · bajado 2026-08-05
v7 .input · radio 6px
v7 .input:focus (simulado)
catálogo · radio 0
login v3 · radio 2px
login v3 :focus (simulado)
periodismo2 (tailwind)
Tres radios distintos para el mismo campo: 6px en v7, 0 en catálogo,
2px en la tarjeta de entrada. Y dos tratamientos de foco incompatibles: anillo de sombra en v7
contra contorno interior de 2px en el login. No existe estado de error en ninguna parte: el formulario
de soporte del catálogo valida con el navegador y no tiene estilo propio de campo inválido.
v1
normal
con foco (simulado)
con error
deshabilitado
solo lectura
con prefijo
Caja de 1px, radio 2pxEs la del login que ya elegiste: 38px de alto, borde de línea, foco como contorno interior de acento. Conviene si quieres que el campo sea la misma caja que el botón y que todo el sistema tenga un solo radio. Es la opción coherente con la tarjeta de entrada.
v2
normal
con foco (simulado)
con error
deshabilitado
solo lectura
con prefijo
Anillo de foco, radio 6pxEs exactamente lo que hay en v7 hoy: el
foco no desplaza nada porque es una sombra de 3px al 12% del acento. Conviene si te importa más no mover
el layout al enfocar que unificar el radio. Choca con el 2px que pediste para el resto.
v3
normal
con foco (simulado)
con error
deshabilitado
solo lectura
con prefijo
Solo línea inferiorSin caja: una línea de 1px que engorda a 2px de acento al enfocar. Es lo más cerca del principio de la casa, donde el separador dominante es el borde. Conviene en formularios largos, donde cuatro cajas seguidas pesan mucho. El área de pulsación queda menos evidente.
v4
normal
con foco (simulado)
con error
deshabilitado
solo lectura
con prefijo
Campo hundidoEn reposo el campo es del color del papel y solo al enfocar sube a blanco con borde de acento. Conviene sobre tarjetas blancas, donde un campo blanco sobre blanco se pierde. El efecto secundario es que deshabilitado y normal se parecen demasiado.
v5
normal
con foco (simulado)
con error
deshabilitado
solo lectura
con prefijo
Etiqueta incrustada en el bordeLa etiqueta va en mono versalita montada sobre la línea superior del campo. Conviene en formularios apretados, porque ahorra una línea por campo y deja la etiqueta visible aunque el campo tenga contenido. Exige etiquetas cortas, de dos o tres palabras.
4 · Área de texto
Lo único desplegado es el cuerpo del formulario de soporte del catálogo.
desplegado
catalogo.innovacionsantiago.cl/catalogo.css · .support-form textarea (rows=4, maxlength=5000) · bajado 2026-08-05
catálogo · sin radio
Hereda del mismo bloque que input y select: mismo borde, mismo
relleno, sin radio. No hay contador, ni estado de error, ni límite visible aunque el campo tiene
maxlength de 5.000 caracteres.
v1
La misma caja que el campoBorde de 1px, radio 2px, alto mínimo de 78px y redimensionable en vertical. Conviene por defecto: un área de texto no debería ser un componente aparte, solo un campo más alto.
v2
Con contador monoEl límite deja de ser una sorpresa al enviar. Conviene donde
hay maxlength real, como el formulario de soporte. Necesita una línea de JavaScript en el
sitio que lo use; en esta página el número es fijo.
v3
Solo línea inferiorLa versión del campo v3 llevada al área de texto. Conviene si eliges esa familia para los campos; suelta pero coherente. El área editable queda poco delimitada cuando el texto es largo.
v4
Con barra mono arribaUna franja pegada al borde superior que declara qué acepta el campo. Conviene donde el contenido tiene reglas, como el editor de actas o un campo que guarda Markdown. Suma altura sin sumar función.
v5
Alto fijo, sin agarradera132px de alto, del color del papel y sin redimensionar. Conviene cuando el formulario está dentro de una tarjeta estrecha y no quieres que el usuario rompa el layout arrastrando la esquina.
5 · Desplegable
Lo desplegado es el select de categoría del formulario de soporte, sin ninguna
personalización de la flecha.
desplegado
catalogo.innovacionsantiago.cl/catalogo.css · .support-form select · bajado 2026-08-05
catálogo · flecha del navegador
La flecha la dibuja el navegador, así que se ve distinta en cada sistema operativo y no responde al modo oscuro de la misma forma. Es el único desplegable del ecosistema fuera de los que monta React en datos.cochid.cl.
v1
Flecha propia, radio 2pxSe apaga la flecha del navegador y se dibuja una de trazo, igual a la del resto de los iconos. Conviene por defecto: es el único modo de que el control se vea igual en Linux, en Windows y en el teléfono.
v2
Nativo, sin tocarLo que hay hoy en catálogo. Conviene si prefieres cero mantenimiento y que el control se comporte exactamente como el usuario espera en su sistema. El costo es que la página se ve distinta según el navegador.
v3
Flecha en monoUna letra de JetBrains en vez de un icono de trazo. Conviene si quieres la voz mono presente también en los controles, como ya pasa en las etiquetas y en los tags. Es menos legible que un icono a tamaños chicos.
v4
Solo línea inferiorVa con la variante 3 de campos. Conviene en filtros dentro de una barra, donde el desplegable tiene que pesar poco. No conviene en un formulario que se envía, porque parece texto y no control.
v5
PíldoraRadio 999px con borde fuerte. Conviene solo como filtro de una lista, junto a los chips del catálogo, nunca dentro de un formulario. Es la forma que ya usa el chip de sesión.
6 · Casilla
Marca la primera de cada variante para ver el estado activo. Son casillas reales, sin
JavaScript: el dibujo sale de appearance:none más :checked.
no existe
grep de type="checkbox" en los seis sitios y en v7/base/*.css · 0 resultados · 2026-08-09
No hay ninguna casilla en el sistema desplegado.
lo más cercano: la del navegador, sin estilo
Lo de arriba es la casilla por defecto del navegador, que no responde al acento de marca ni al modo oscuro y se ve distinta en cada sistema. Es lo que aparecería hoy si alguien pusiera una casilla en cualquier sitio del grupo.
v1
Cuadrada de tinta, radio 2pxMarcada se rellena de tinta con el visto en color papel. Conviene por defecto: es el mismo par tinta/papel del botón primario y el mismo radio del resto.
v2
Rellena de acentoIgual que v1 pero con el color de la marca del sitio. Conviene si quieres que una lista larga de casillas marcadas se lea de un vistazo. Cambia de color entre las tres marcas del grupo.
v3
La del navegador, teñidaSe deja el control nativo y solo se le pasa
accent-color. Conviene si te importa más el comportamiento nativo que el dibujo. La forma
sigue siendo la del sistema operativo, así que el radio no lo controlas.
v4
Solo el visto, sin rellenoEl fondo no cambia: se colorean el borde y el visto. Conviene sobre fondos con textura, como la tarjeta de entrada, donde un cuadrado relleno pesa mucho. La diferencia entre marcada y no marcada es más sutil.
v5
Tarjeta seleccionableLa casilla vive dentro de una tarjeta que se ilumina
entera al marcar. Conviene cuando la opción necesita una línea de explicación, como elegir tipo de firma.
Usa el selector :has(), que hoy está en todos los navegadores vigentes.
7 · Radio
Cada variante es un grupo independiente, así que puedes cambiar la selección en una sin tocar las otras.
no existe
grep de type="radio" en los seis sitios y en v7/base/*.css · 0 resultados · 2026-08-09
No hay ningún radio en el sistema desplegado.
lo más cercano: el del navegador, sin estilo
Mismo diagnóstico que la casilla: hoy saldría el control del navegador, ajeno al acento y al modo oscuro.
v1
Punto de tintaAnillo de 16px con punto interior de tinta. Conviene por defecto, y es el par exacto de la casilla v1.
v2
Punto de acentoEl punto y el anillo toman el color de la marca. Conviene si también eliges la casilla v2, para que casilla y radio hablen igual.
v3
El del navegador, teñidoControl nativo con accent-color. Conviene
por la misma razón que en la casilla, y arrastra el mismo costo: la forma la decide el sistema.
v4
Anillo rellenoSe invierte: el círculo entero se llena de acento y el punto queda en papel. Conviene si necesitas que la opción elegida se vea desde lejos, en una lista de más de cinco.
v5
Tarjeta seleccionableEl par de la casilla v5, para elegir entre opciones que necesitan explicarse. Conviene en el paso de tipo de documento o de plan. Ocupa mucho más alto.
8 · Interruptor
Un interruptor aplica el cambio al momento; una casilla espera al botón de guardar. Si el formulario tiene "Guardar", la respuesta correcta casi siempre es una casilla, no esto.
no existe
grep de role="switch" y de patrones de switch en los seis sitios y en v7/base/*.css · 0 resultados · 2026-08-09
No hay ningún interruptor en el sistema desplegado.
Ni siquiera hay uno cercano que mostrar. El botón de tema, que sería el candidato
natural, está resuelto en los seis sitios como botón cuadrado de 34px con dos iconos
(.gr-nav__theme), no como interruptor.
v1
Píldora de tinta38 por 22px, encendido relleno de tinta. Conviene por defecto: la píldora es la única forma redonda que el sistema ya acepta, y el par tinta/papel es el del botón primario.
v2
Píldora de acentoEncendido en color de marca, que es la convención que la gente ya conoce de otros sistemas. Conviene si el interruptor va en un panel con varios seguidos y necesitas leer rápido cuáles están activos.
v3
Rectangular, radio 2pxEl mismo gesto pero con la geometría recta de la casa. Conviene si te molesta meter una forma redonda; el costo es que se parece más a una casilla y pierde parte de la señal de "esto se aplica al tiro".
v4
Con rótulos en monoEl estado se nombra, no solo se dibuja. Conviene en pantallas de operación, donde equivocarse cuesta caro y el color por sí solo no basta. Ocupa más ancho y no traduce bien al castellano si insistes en usar palabras.
v5
Discreto32 por 18px, para que el control no domine la fila. Conviene en listas largas de ajustes, donde diez interruptores grandes se comen la pantalla. Queda bajo el mínimo cómodo de pulsación en el teléfono si no lo acompañas del rótulo.
9 · Control segmentado
Dos o tres opciones excluyentes que se ven todas a la vez. Ya hay uno propuesto y aprobado
en componentes/v3.html para el paso "Entrar o crear cuenta" (L11), pero todavía no está
desplegado en ninguna parte.
no existe
catalogo.css .chip / .chip.is-active · datos.cochid.cl nav aria-current="page" · bajado 2026-08-05
No hay control segmentado desplegado. Lo más cercano son dos filas de opciones excluyentes que hacen su trabajo.
catálogo · fila de chips, uno activo
datos.cochid · píldoras de navegación (tailwind)
Los chips del catálogo son botones sueltos separados por 8px, no un control
segmentado: no comparten caja ni anuncian que son excluyentes. Los de datos.cochid.cl son píldoras de radio 6px con
aria-current, de otra familia visual.
v1
Caja con activo de acentoEs el que ya aprobaste en L11: borde de 1px, radio 2px, activo relleno del acento. Conviene mantenerlo, porque cambiarlo obliga a rehacer el paso de correo que ya quedó decidido.
v2
Activo de tintaLo mismo con el activo en negro. Conviene si reservas el acento para los botones de acción y no quieres que un selector compita con ellos dentro de la misma tarjeta.
v3
Subrayado, sin cajaSin recuadro: solo una línea inferior y el activo marcado con 2px de acento. Conviene arriba de un contenido ancho, como una tabla o un gráfico, donde una caja partiría la página en dos. Se lee como pestañas, no como interruptor.
v4
Mono en versalitaLa misma caja pero con la voz mono del sistema, como los encabezados de tabla. Conviene en pantallas de datos, donde ya todo lo estructural habla en JetBrains. Solo aguanta etiquetas de una palabra.
v5
Píldora dentro de píldoraRiel redondeado con el activo también redondeado. Conviene como filtro liviano sobre un gráfico. Es la variante que más se aleja de la geometría recta de la casa.
10 · Buscador
Hay dos respuestas desplegadas y ninguna es del sistema: un campo de Tailwind en periodismo2 y un botón que abre una paleta con atajo en datos.cochid.
no existe en v7
periodismo2.cl input[type=search] (tailwind, rounded-lg) · datos.cochid.cl botón "Buscar (Ctrl+K)" · v7/base/*.css sin componente de búsqueda · bajado 2026-08-05
periodismo2 · fuera del sistema
datos.cochid · botón de paleta
El de periodismo2 es radio 8px con fondo gris al 80%, colores fijos de Tailwind
que no leen los tokens del grupo: en modo oscuro se resuelve con clases dark: propias. El de
datos.cochid.cl no es un campo sino un disparador de paleta con Ctrl+K. Elegir uno de los cinco de abajo
significa además decidir cuál de esos dos se reescribe.
v1
Lupa dentro, radio 2pxEl campo de texto del sistema con una lupa a la izquierda. Conviene por defecto: es el mismo control de la fila 3 y no agrega vocabulario nuevo.
v2
Con botón adosadoLa acción queda explícita. Conviene cuando la búsqueda pega contra el servidor y no filtra en vivo, porque avisa que hay que enviar. Ocupa más ancho del que suele haber en una barra.
v3
Disparador de paletaNo es un campo: es un botón que abre la búsqueda completa, con el atajo escrito en mono. Es lo que ya hace datos.cochid. Conviene cuando la búsqueda es global y merece pantalla propia. Exige construir la paleta.
v4
Solo línea inferiorVa con la variante 3 de campos. Conviene cuando el buscador vive dentro de una página de contenido y no debe competir con el titular. Es el que menos se ve como control.
v5
PíldoraRadio 999px, la forma que la barra ya usa en el chip de sesión. Conviene si el buscador vive en la barra superior y quieres que se lea como parte del chrome y no del contenido.
11 · La tarjeta de entrada
La estructura está decidida y no se toca: tres botones al mismo nivel con el correo al
final, textura de anillos y lockup completo. Lo que sigue son variantes de piezas, una por tarjeta.
Ojo con la primera celda: L01 está decidida pero no desplegada. Lo que corre hoy en
auth.innovacionsantiago.cl es la hoja de Authentik custom.css v1.8, con el defecto ya reportado
de que el botón de Microsoft muestra el logo de Google.
decidida
componentes/v3.html · L01 · marcado y medidas copiados sin cambios (max-width 310px, .sso 42px, anillos .09 a 150%)
L01 tal cual
Compañía deInnovación deSantiago
Entrar al grupo
para continuar a docs.circulodesantiago.cl
Continuar con Google Continuar con Microsoft Continuar con correoLos logos de Google y Microsoft van dibujados en línea con sus colores oficiales, sin
CDN. La regla .rings svg{stroke-width:4} viaja con el marcado: sin ella el trazo de 1px del SVG
renderiza medio píxel y la textura desaparece a 0,09 de opacidad.
v1
Compañía deInnovación deSantiago
Entrar al grupo
para continuar a docs.circulodesantiago.cl
Continuar con Google Continuar con Microsoft Continuar con correoPieza: la texturaAnillos al 0,17 de opacidad y al 190% en vez de 0,09 al 150%. Conviene si al verla en pantalla grande la textura te quedó demasiado tímida. El riesgo es que compita con los tres botones, que son lo único que hay que mirar.
v2
Compañía deInnovación deSantiago
Entrar al grupo
para continuar a docs.circulodesantiago.cl
Continuar con Google Continuar con Microsoft Continuar con correoPieza: el lockupMark y namebrand en horizontal, alineados a la izquierda, con el mark a 42px. Conviene si quieres recuperar unos 30px de alto para que la tarjeta entre completa en un teléfono chico. Rompe la simetría central del resto de la tarjeta.
v3
Compañía deInnovación deSantiago
Entrar al grupo
para continuar a docs.circulodesantiago.cl
Continuar con Google Continuar con Microsoft Continuar con correoPieza: los botonesLogo y texto alineados a la izquierda en vez de centrados. Conviene porque los tres logos quedan en la misma columna vertical y el ojo baja recto. Es lo que hacen Google y Microsoft en sus propios flujos. Se ve menos simétrico dentro de una tarjeta centrada.
v4
Compañía deInnovación deSantiago
Entrar al grupo
para continuar a docs.circulodesantiago.cl
Continuar con Google Continuar con Microsoft Continuar con correoPieza: la elevaciónSe saca la sombra y queda solo el borde de 1px, en tinta fuerte. Conviene por doctrina: en este sistema el separador dominante es el borde, no la sombra, y la sombra estaba autorizada solo para modal y login. Sin sombra la tarjeta se pega al fondo texturado.
v5
Compañía deInnovación deSantiago
Entrar al grupo
para continuar a docs.circulodesantiago.cl
Continuar con Google Continuar con Microsoft Continuar con correoAl entrar aceptas los términos y la política de privacidad de Compañía de Innovación de Santiago SpA · RUT 78.384.591-1
Pieza: el pie legalUna línea en mono a 10px bajo los botones, separada por un borde. Conviene porque es lo que la pantalla de consentimiento de Google espera encontrar y porque hoy esa información no está en ninguna parte del flujo. Suma unos 45px de alto.
Cómo elegir. Dime fila y número: 1.v3, 3.v1,
9.v1. Puedes mezclar entre filas, aunque hay tres pares que conviene mantener
juntos: campo y área de texto, casilla y radio, y campo y buscador.
Procedencia. Todo lo marcado como desplegado se bajó con curl
de los seis sitios el 2026-08-05 y se leyó de
/srv/projects/core/core-style/v7/base/. Los archivos consultados fueron
tokens.css, components.css, chrome.css,
catalogo.css, firmas.css, el CSS de Next de circulodesantiago.cl y el
de periodismo2.cl.