/* ============================================================================ voice-docs.css — la documentación de VOICE (/documentation). Se monta ENCIMA de voice.css y reusa sus tokens (`--v-tinta`, `--v-lima`, `--v-acento`…). Eso obliga a que el de esta página declare las variables, y por eso el generador aplica `#vd-raiz` con la misma lista que `#vmarketing`: sin ellas un color no resuelve y se pinta negro sobre negro, que es el fallo que este proyecto ya cazó una vez y no se ve hasta que alguien abre la página al lado del logo. Prefijo `vd-` para no pisar ni el sitio (`site.css`) ni el producto (`v-`). REGLA QUE NO SE NEGOCIA AQUÍ: cero propiedades físicas sin su gemelo lógico. El árabe es uno de los ocho idiomas, no un caso raro, y un `padding-left` en una tabla deja la cabecera a un lado y los datos al otro. Se usa `start`/`end`, `margin-inline`, `border-inline-start`. ========================================================================= */ body { --v-tinta: var(--tinta, #111714); --v-suave: var(--gris-txt, #5d6861); --v-linea: var(--linea, #dfe4df); --v-linea2: var(--linea-2, #cbd3ca); --v-panel: var(--panel, #fafbf8); --v-fondo2: var(--fondo-2, #e9ece5); --v-lima: var(--lima, #b8ff4a); --v-limad: var(--lima-deep, #457a12); --v-acento: var(--verde, #2b6251); } .vd-hero { padding: 26px 0 30px; border-bottom: 1px solid var(--v-linea); margin-bottom: 30px } .vd-hero h1 { font-size: clamp(2rem, 4.2vw, 3rem); line-height: 1.05; margin: .25em 0 .3em; letter-spacing: -.02em } .vd-hero .lead { font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.6; max-width: 62ch; color: var(--v-suave) } /* El índice se queda pegado en pantallas anchas y pasa a ser una tira horizontal en móvil: un índice de nueve entradas apilado sobre el contenido obliga a hacer scroll para llegar al primer párrafo. */ .vd-grid { display: grid; gap: 42px; grid-template-columns: 220px minmax(0, 1fr); align-items: start; padding-bottom: 70px } .vd-toc { position: sticky; top: 84px } .vd-toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px } .vd-toc a { display: block; padding: 7px 12px; border-radius: 8px; font-size: .92rem; color: var(--v-suave); text-decoration: none; border-inline-start: 2px solid transparent } .vd-toc a:hover { background: var(--v-fondo2); color: var(--v-tinta); border-inline-start-color: var(--v-limad) } .vd-main { min-width: 0 } .vd-sec { padding: 6px 0 34px; scroll-margin-top: 84px } .vd-sec h2 { font-size: clamp(1.35rem, 2.3vw, 1.8rem); margin: 0 0 .45em; letter-spacing: -.01em } .vd-sec h3 { font-size: 1.02rem; margin: 26px 0 10px; color: var(--v-acento) } .vd-lead { max-width: 68ch; color: var(--v-suave); line-height: 1.65; margin: 0 0 20px } .vd-sec p { max-width: 68ch; line-height: 1.65 } .vd-nota { color: var(--v-suave); font-size: .9rem; line-height: 1.6; margin-top: 14px } .vd-aviso { border: 1px solid var(--v-limad); background: color-mix(in srgb, var(--v-lima) 12%, transparent); border-radius: 12px; padding: 14px 17px; margin: 18px 0; line-height: 1.6 } .vd-aviso b { color: var(--v-tinta) } .vd-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 72ch } .vd-lista li { padding: 14px 16px; border: 1px solid var(--v-linea); border-radius: 12px; background: var(--v-panel); line-height: 1.6 } .vd-lista b { color: var(--v-tinta) } /* La tabla hace scroll DENTRO de su caja. Un desbordamiento horizontal de la página ya costó una caza en este repo y no vuelve. */ .vd-tabla-wrap { overflow-x: auto; border: 1px solid var(--v-linea); border-radius: 14px; background: var(--v-panel); margin: 14px 0 } .vd-tabla { width: 100%; border-collapse: collapse; font-size: .93rem; min-width: 460px } .vd-tabla-min { min-width: 330px } .vd-tabla th, .vd-tabla td { text-align: start; padding: 11px 15px; border-bottom: 1px solid var(--v-linea); vertical-align: top; line-height: 1.55 } .vd-tabla th { font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; color: var(--v-suave); font-weight: 700; white-space: nowrap } .vd-tabla tbody tr:last-child td { border-bottom: 0 } .vd-tabla tbody tr:hover { background: var(--v-fondo2) } /* `unicode-bidi: isolate` en el código: en árabe un «*72» entre texto RTL se reordena y sale «72*». Aislado, se lee como lo que es. 🔴 El selector cubre TODA la sección (`.vd-sec code`) y no sólo las tablas y los párrafos, que es como estaba hasta el 2026-08-16. Ese día los códigos que viven DENTRO de una frase pasaron a envolverse también (antes eran texto plano, y en árabe el asterisco es un carácter neutro cuya posición la decide el contexto), y buena parte de esa prosa vive en las tarjetas `

` de `.vd-lista` — que no son `p` y se habrían quedado fuera. Una regla que cubre menos de lo que hay es la misma figura que un comprobador que mira menos de lo que existe. */ .vd-sec code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em; background: var(--v-fondo2); border-radius: 6px; padding: 2px 7px; white-space: nowrap; unicode-bidi: isolate } .vd-code { background: color-mix(in srgb, var(--v-tinta) 93%, transparent); color: #e9edf5; border-radius: 14px; padding: 18px 20px; overflow-x: auto; font-size: .84rem; line-height: 1.7; margin: 16px 0; max-width: 100% } .vd-code code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre; background: none; padding: 0; unicode-bidi: isolate } .vd-volver { margin-top: 34px } /* ── los carriles ────────────────────────────────────────────────────────── La página es una sola URL con cuatro lectores distintos dentro (quien empieza, quien contesta el teléfono, quien dirige y quien integra). El carril es el único sitio donde se les habla por separado, así que tiene que verse ANTES que la primera sección y no confundirse con un

de sección: por eso va en versalitas y con una regla encima, no más grande. / .vd-carril { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--v-limad); font-weight: 700; margin: 46px 0 4px; padding-top: 22px; border-top: 2px solid var(--v-linea2) } .vd-carril:first-child { margin-top: 0; padding-top: 0; border-top: 0 } .vd-toc-h { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--v-suave); font-weight: 700; margin: 16px 0 5px; padding-inline-start: 12px } .vd-toc-h:first-child { margin-top: 0 } / ── la insignia de verificación ─────────────────────────────────────────── Dice cómo se ha comprobado cada capacidad. Va PEGADA a lo que califica —en el

o en su celda— porque una leyenda al pie se lee como decoración. `vd-ins-no` («todavía sin ejercitar») es la única que cambia de color, y no es alarma: es la que el lector tiene que poder distinguir de un vistazo. El resto son grados de «probado» y compiten entre sí por atención sin aportar. El color NO es el único portador del significado — el texto lo dice— porque una insignia que sólo se distingue por el color no existe para quien no lo distingue. / .vd-ins { display: inline-block; vertical-align: middle; margin-inline-start: 9px; font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; padding: 3px 8px; border-radius: 999px; white-space: nowrap; color: var(--v-limad); background: color-mix(in srgb, var(--v-lima) 20%, transparent); border: 1px solid color-mix(in srgb, var(--v-limad) 35%, transparent) } .vd-ins-no { color: #7a5a12; background: color-mix(in srgb, #e8a317 16%, transparent); border-color: color-mix(in srgb, #e8a317 45%, transparent) } .vd-sec h2 .vd-ins { position: relative; top: -2px } / En una celda de tabla la insignia va sola y sin margen de arranque. */ .vd-tabla td > .vd-ins:only-child { margin-inline-start: 0 } @media (max-width: 900px) { .vd-grid { grid-template-columns: minmax(0, 1fr); gap: 22px } .vd-toc { position: static } .vd-toc ul { display: flex; flex-wrap: wrap; gap: 6px } .vd-toc a { border: 1px solid var(--v-linea); border-radius: 999px; padding: 6px 13px; font-size: .86rem } .vd-toc a:hover { border-color: var(--v-limad) } .vd-toc-h { padding-inline-start: 0 } .vd-carril { margin-top: 34px } }