/* ═══════════════════════════════════════════════════════════════════════════════
▓ COMPONENTE · PUNTO DE ESTADO — GEMELO VANILLA (hoja autocontenida) ▓
Ficha: design-system/COMPONENTE_DOT.md · Kit hermano: catalogo-cd/components/Dot.jsx
Nace el 2026-08-20.
⛔ POR QUÉ NACE HOY, y el motivo es una lección del proyecto, no una tarea pendiente.
El punto llevaba ficha (7 significados, 2 tamaños, censo de 40 usos) y kit de React —y
**las tres apps son HTML y CSS a secas, así que ninguna podía usar el kit**. Resultado: los
40 puntos del producto están dibujados a mano, cada uno con su clase (`.mc-status-dot`,
`.docs-stat .dot`, `.exv3-rev-ins-dot`, `.mi8-state .dot`…), y por eso el mismo significado
acabó con colores distintos en pantallas distintas.
*Un componente que tu producto no puede usar no está canonizado: está documentado.*
(La frontera la fijó Ricardo el 14-ago con el Input, y es la misma de aquí.)
⛔ Y NACE EN EL MOMENTO EXACTO EN QUE HACÍA FALTA. El 2026-08-20 Ricardo dictó una regla que
afecta a TODOS los puntos del producto —«todos los puntos semánticos van a ir en su color
base, no en variantes profundas»— y la única manera de aplicarla eran cinco ediciones a mano
en tres hojas distintas. Es exactamente el trabajo que un gemelo evita: con él, la regla se
cambia AQUÍ y las apps la heredan copiando un archivo que un gate compara.
⛔ LA REGLA DE COLOR, escrita aquí porque aquí es donde se aplica. Y LO QUE MANDA ES EL FONDO.
DECISION-FUENTE: Ricardo, 2026-08-20 — «El punto solamente se pone en color base cuando no
lleva ningún tipo de relleno ni de fondo. Por ejemplo, en el banner sutil; pero en banners con
relleno tint o con cualquier otro tipo de relleno, el dot va del mismo color que el texto.»
· sobre una superficie SIN relleno (blanco, lienzo, una fila, el banner sutil) → la BASE
· dentro de una pieza CON relleno (pastilla de tinte, banner con fondo, cualquier otro)
→ EL MISMO COLOR QUE EL TEXTO de esa pieza
**El punto no tiene regla propia: sigue la misma condición que el texto, porque comparte fondo
con él** (COMPONENTE_SEMANTICOS §0-quater · COMPONENTE_DOT §1-bis).
⛔ QUÉ CUBRE ESTA HOJA, Y QUÉ NO. Los siete tonos de abajo son los del punto SOBRE LIENZO, que
es donde vive `.exds-dot`. Dentro de una pieza con relleno, el tono **lo impone la pieza** —ella
conoce el color de su propio texto— con una regla suya del tipo
`.mi-pastilla .exds-dot { background: var(--color-X-deep); }`. No se añade aquí un
`[data-sobre-relleno]`: sería pedirle al punto que adivine el fondo de quien lo contiene.
⭐ Y ESTO CORRIGE UN ERROR DE ALCANCE DEL MISMO DÍA. Por la mañana esta hoja decía, sin
condición, «todos los puntos semánticos van en su color base». Aplicada así, los puntos que
viven dentro de pastillas de tinte quedaron en base junto a un texto en `-deep`: la misma
familia pintada con dos tonos dentro de la misma caja, que es justo lo que §0-bis prohíbe.
*Una regla aplicada sin su condición no se está cumpliendo: se está extendiendo.*
El tramo «sobre lienzo» no cambió, y su argumento sigue en pie: REVIERTE la decisión del
2026-08-19, que mandaba lo contrario. Aquel argumento era bueno y no se borra — con las bases,
el punto de «atención» da 1,92:1 sobre blanco, por debajo del 3:1 que WCAG 1.4.11 pide a una
figura. Ricardo conoce ese número y aun así eligió la base, porque el punto de una familia
tiene que ser del color de esa familia. Lo que hace aceptable el intercambio es la condición
dura que este componente ya cumplía: **el punto NUNCA es el único portador del significado —
siempre lleva un texto al lado que dice lo mismo.**
DEPENDE de los tokens del canon (`design-system/colors_and_type.css`). No trae ni un valor
literal propio salvo los respaldos de los tokens de medida: si un token falta, la pieza se ve
mal, y eso es correcto — el componente no puede inventarse el sistema de la app que lo aloja.
⛔ REQUISITO DE MONTAJE, el mismo que el resto de gemelos de este catálogo: la app anfitriona
debe traer un reinicio con `box-sizing: border-box` en `*`. Aquí importa más que en otras
piezas, porque `--anillo` depende de `content-box` DECLARADO y un reinicio ausente cambia el
tamaño del punto, no sólo su caja.
CÓMO SE MONTA:
Rechazado
Marcado completo y sus reglas de accesibilidad: README.md de esta carpeta.
═══════════════════════════════════════════════════════════════════════════════ */
/* ── EL PUNTO ──────────────────────────────────────────────────────────────────── */
.exds-dot {
--exds-dot-d: var(--dot, 8px);
width: var(--exds-dot-d);
height: var(--exds-dot-d);
border-radius: var(--radius-pill, 999px);
flex: none;
display: inline-block;
/* `info` es el reposo, igual que en el kit: un punto sin tono declarado no es un error de
montaje, es un dato sin juicio de valor. */
background: var(--color-info);
}
/* Dos tamaños, no siete. `md` (8) cuando el punto vive sobre el lienzo —fila de lista,
cabecera, tarjeta— y `sm` (6) cuando vive DENTRO de otra pieza —menú, pastilla, viñeta—.
Es el mismo criterio del buscador y de los estados. */
.exds-dot[data-size="sm"] { --exds-dot-d: var(--dot-sm, 6px); }
/* ⛔ EL ANILLO CRECE HACIA FUERA. Con `border-box` el borde se come el relleno y un punto de 8
se convierte en uno de 5 con marco — ya pasó una vez (S276.1). Sólo cuando el punto se pinta
ENCIMA de un ícono, una foto o un fondo con textura; sobre lienzo plano no lleva. */
.exds-dot[data-anillo="true"] {
border: var(--dot-anillo, 1.5px) solid var(--color-surface);
box-sizing: content-box;
}
/* ── LOS SIETE SIGNIFICADOS · un color, un significado ─────────────────────────────
Y ese significado no tiene otro color en otra pantalla, que es el defecto que este
componente existe para cerrar: en el censo del 2026-08-09 había 40 puntos, 16 significados,
18 colores y 7 tamaños, y un solo hex cubría doce significados a la vez.
⛔ SON LOS TONOS DEL PUNTO **SOBRE LIENZO**. Dentro de una pieza con relleno los sustituye la
propia pieza con el color de su texto — ver la cabecera de esta hoja. */
.exds-dot[data-tono="nuevo"] { background: var(--color-emerald); } /* sin leer · novedad */
/* ⛔ UN SOLO VERDE (Ricardo, 2026-08-19): «validado» comparte el esmeralda de la marca — marca
y éxito son la misma idea. De paso cerró un incumplimiento: el accent-green daba 2,89:1 como
relleno y el mínimo es 3:1; el esmeralda da 4,07. */
.exds-dot[data-tono="validado"] { background: var(--color-emerald); } /* correcto · validado */
.exds-dot[data-tono="atencion"] { background: var(--color-warning); } /* atención · en proceso */
.exds-dot[data-tono="problema"] { background: var(--color-error); } /* problema · rechazado */
.exds-dot[data-tono="info"] { background: var(--color-info); } /* informativo · sin juicio */
.exds-dot[data-tono="pendiente"] { background: var(--fg4); } /* pendiente · sin empezar */
.exds-dot[data-tono="inactivo"] { background: var(--fg3-dark); } /* inactivo · bloqueado */
/* ── LA FILA · punto + texto ────────────────────────────────────────────────────────
La separación es 1,5× el diámetro: 12 con el punto de 8, 10 con el de 6. No son dos números
elegidos por separado — es una proporción, y por eso los dos tamaños se ven igual de sueltos. */
.exds-dot-fila {
display: flex;
align-items: flex-start;
gap: var(--dot-gap, 12px);
}
.exds-dot-fila:has(> .exds-dot[data-size="sm"]) { gap: var(--dot-gap-sm, 10px); }
/* ⛔ ALINEADO CON EL CENTRO ÓPTICO DE LA PRIMERA LÍNEA, no con el centro del bloque. En un
título de dos líneas, centrarlo con el bloque lo deja flotando entre las dos y deja de
señalar la primera — que es la que nombra la cosa. `1lh` es lo que declara la ficha; el
respaldo de 1.4em cubre a quien todavía no lo soporte. */
.exds-dot-fila > .exds-dot { margin-top: calc((1.4em - var(--exds-dot-d)) / 2); }
@supports (margin-top: 1lh) {
.exds-dot-fila > .exds-dot { margin-top: calc((1lh - var(--exds-dot-d)) / 2); }
}
/* ⛔ EL PUNTO NO SE ANIMA, Y AQUÍ NO HAY MANERA DE PEDIRLO (Ricardo, 2026-08-10).
La ficha contempla un latido para «esto está pasando AHORA», y de esa línea salió una prop
que se retiró el mismo día: MEDIDO, no hay un solo caso — los 40 puntos del censo tienen
«animado: false», y los únicos puntos que se mueven en las tres apps son los tres del
«escribiendo» del asistente, que son `BoltTyping` y no un punto de estado.
*Una regla escrita para un caso futuro no es una prop: la prop se cosecha el día que algo la
use.* Y un punto que parpadea reclama atención permanente, así que se aprende a ignorarlo.
No hay guarda de `prefers-reduced-motion` porque no hay movimiento que apagar. */