/* =====================================================================
Orbunio · tokens · Sistema 4.0 (fase 1: base) · 2026-10-10
La fuente de verdad es DESIGN.md. Este archivo es su implementación.
Prefijo de variables --orb- · prefijo de clases orb-
Cambios frente a 3.1: tipografía Satoshi + Inter (antes Mona Sans),
escala de Zeuxo, raíles de 0.8px, celdas, radios 4/8/14/18, sombras
"asentadas", línea fina --orb-hair y la técnica de estelas.
===================================================================== */
/* ---------- Fuentes: copias locales (ver recursos/fuentes/LEEME.md) ----------
Satoshi (ITF Free Font License): se puede alojar en nuestras webs, pero los
archivos NO se pasan a terceros ni se suben a repositorios públicos.
Inter (SIL OFL 1.1). */
@font-face { font-family: "Satoshi"; src: url("../recursos/fuentes/web/Satoshi-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("../recursos/fuentes/web/Satoshi-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../recursos/fuentes/web/Inter-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../recursos/fuentes/web/Inter-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../recursos/fuentes/web/Inter-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../recursos/fuentes/web/Inter-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
/* ---------- Tema claro (por defecto) ---------- */
:root, [data-theme="light"] {
--orb-canvas: #F5F4F0; /* blanco roto: fondo de página */
--orb-surface: #FAF9F6; /* superficie: tarjetas, campos, paneles */
--orb-soft: #E9E8E3; /* banda alterna, celdas de ilustración */
--orb-ink: #191919; /* carbón: texto y botón principal */
--orb-muted: #62625F; /* texto de apoyo */
--orb-line: #D3D2CD; /* separador visible */
--orb-hair: #E2E1DC; /* LA línea fina: raíles, celdas, bordes de tarjeta (0.8px) */
--orb-control: #7A7A76; /* borde de campos y del botón secundario, iconos (3:1 o más) */
--orb-faint: #A6A6A1; /* deshabilitado y decoración. Nunca texto legible */
--orb-accent: #191919; --orb-on-accent: #F5F4F0;
--orb-action: #191919; --orb-on-action: #F5F4F0;
--orb-link: #191919; --orb-focus: #191919;
--orb-success: #236A49; --orb-warning: #765A0B; --orb-danger: #AB344B;
--orb-invert-bg: #191919; --orb-invert-ink: #F5F4F0; /* la banda invertida (cierre) */
--orb-btn-sec: #FAF9F6; --orb-btn-sec-hover: #F1F0EC; /* botón secundario (con borde) */
--orb-btn-filo: 0 1px 0 rgb(25 25 25 / .04); /* línea interior de abajo */
--orb-btn-sombra-suave: 0 1px 2px rgb(25 25 25 / .05);
color-scheme: light;
}
/* ---------- Tema oscuro (apps, slides y preferencia del usuario) ---------- */
[data-theme="dark"] {
--orb-canvas: #191919;
--orb-surface: #242424;
--orb-soft: #303030;
--orb-ink: #F5F4F0;
--orb-muted: #BDBDB8;
--orb-line: #484848;
--orb-hair: #2E2E2E;
--orb-control: #93938E;
--orb-faint: #6B6B67;
--orb-accent: #F5F4F0; --orb-on-accent: #191919;
--orb-action: #F5F4F0; --orb-on-action: #191919;
--orb-link: #F5F4F0; --orb-focus: #F5F4F0;
--orb-success: #A7FBD0; --orb-warning: #FDD552; --orb-danger: #FD979C;
--orb-invert-bg: #F5F4F0; --orb-invert-ink: #191919;
--orb-btn-sec: #282828; --orb-btn-sec-hover: #373737;
--orb-btn-filo: 0 -1px 0 rgb(255 255 255 / .06); /* en oscuro, brillo interior arriba */
--orb-btn-sombra-suave: 0 1px 2px rgb(0 0 0 / .24);
color-scheme: dark;
}
/* ---------- Agentes (secundarios): el color vive aquí ---------- */
:root {
--orb-agent-nucleo: #F5F4F0; /* Núcleo: coordina y delega */
--orb-agent-cian: #81FAFC; /* Flujos */
--orb-agent-lila: #E7C3FD; /* Conocimiento */
--orb-agent-ambar: #FDD552; /* Comercial */
--orb-agent-menta: #A7FBD0; /* Operaciones */
--orb-agent-coral: #FD979C; /* Comunicación */
}
/* Terciarios: superficie y tinta de cada agente (chips, estados, palabra de color) */
:root, [data-theme="light"] {
--orb-cian-surface:#E0F5F2; --orb-cian-ink:#006870;
--orb-lila-surface:#F2EBF2; --orb-lila-ink:#684278;
--orb-ambar-surface:#F6EED4; --orb-ambar-ink:#765A0B;
--orb-menta-surface:#E7F5EA; --orb-menta-ink:#236A49;
--orb-coral-surface:#F6E3E1; --orb-coral-ink:#AB344B;
}
[data-theme="dark"] {
--orb-cian-surface:#2A3D3D; --orb-cian-ink:#81FAFC;
--orb-lila-surface:#3A343D; --orb-lila-ink:#E7C3FD;
--orb-ambar-surface:#3D3722; --orb-ambar-ink:#FDD552;
--orb-menta-surface:#303D36; --orb-menta-ink:#A7FBD0;
--orb-coral-surface:#3D2D2E; --orb-coral-ink:#FD979C;
}
/* ---------- Tipografía ---------- */
:root {
--orb-font-display: "Satoshi", "Inter", system-ui, sans-serif; /* solo ≥ 28px, peso 400 */
--orb-font-text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--orb-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
--orb-tracking: -0.025em; /* en TODOS los tamaños; excepción: código y etiquetas mono */
/* escala: tamaño / interlínea en píxeles (nunca proporciones en títulos) */
--orb-display: 72px; --orb-display-lh: 82px; /* portada y cierre */
--orb-h1: 58px; --orb-h1-lh: 68px; /* título de sección */
--orb-h2: 36px; --orb-h2-lh: 46px;
--orb-h3: 32px; --orb-h3-lh: 42px;
--orb-h4: 24px; --orb-h4-lh: 32px; /* Inter 500 */
--orb-sub: 20px; --orb-sub-lh: 28px; /* Inter 500 */
--orb-body: 18px; --orb-body-lh: 28px;
--orb-ui: 16px; --orb-ui-lh: 24px;
--orb-meta: 14px; --orb-meta-lh: 20px;
--orb-micro: 12px; --orb-micro-lh: 18px;
}
@media (max-width: 639px) {
:root {
--orb-display: 44px; --orb-display-lh: 50px;
--orb-h1: 38px; --orb-h1-lh: 44px;
--orb-h2: 30px; --orb-h2-lh: 38px;
--orb-h3: 28px; --orb-h3-lh: 36px;
--orb-h4: 22px; --orb-h4-lh: 30px;
}
}
/* ---------- Espacio y estructura ---------- */
:root {
/* escala de 4px */
--orb-s1: 4px; --orb-s2: 8px; --orb-s3: 12px; --orb-s4: 16px; --orb-s5: 20px; --orb-s6: 24px;
--orb-s8: 32px; --orb-s10: 40px; --orb-s12: 48px; --orb-s16: 64px; --orb-s24: 96px; --orb-s30: 120px; --orb-s40: 160px;
--orb-container: 1200px;
--orb-rail: 0.8px; /* raíles y celdas: 0.8px, no 1px */
--orb-section: 160px; /* bloque de sección (120 en bandas ligeras) */
--orb-gutter: 64px; /* margen lateral escritorio (32 tablet, 20 móvil) */
}
@media (max-width: 959px) { :root { --orb-section: 96px; --orb-gutter: 32px; } }
@media (max-width: 639px) { :root { --orb-section: 64px; --orb-gutter: 20px; } }
/* ---------- Forma y elevación ---------- */
:root {
/* vocabulario de radios: estos y ninguno más (los insets concéntricos se derivan) */
--orb-r-mini: 4px; /* casillas, bloques de código y detalles pequeños */
--orb-r-control: 10px; /* botones y campos: el radio del botón de Abraham (11-10-2026) */
--orb-r-media: 8px; /* imágenes y maquetas */
--orb-r-card: 14px; /* tarjetas */
--orb-r-panel: 18px; /* paneles grandes y modales */
--orb-r-pill: 9999px; /* chips, píldoras, rieles de pestañas */
/* sombras: "asentadas", nunca "lanzadas" */
--orb-shadow-button: inset 0 1px 0 rgb(255 255 255 / .16), 0 1px 2px rgb(25 25 25 / .24); /* brillo arriba + sombra corta */
--orb-shadow-card: 0 1px 3px rgb(25 25 25 / .05), 0 1px 2px -1px rgb(25 25 25 / .05);
--orb-shadow-mockup: 0 25px 50px -12px rgb(25 25 25 / .10);
--orb-shadow-overlay: 0 8px 24px rgb(25 25 25 / .12);
}
/* ---------- Movimiento ---------- */
:root {
--orb-dur-feedback: 160ms; /* hover, pulsar */
--orb-dur-state: 240ms; /* cambiar de estado */
--orb-dur-reveal: 400ms; /* aparecer al hacer scroll */
--orb-ease: cubic-bezier(.2, .7, .2, 1);
--orb-ease-reveal: cubic-bezier(.16, 1, .3, 1);
--orb-orbit: 18s; /* una vuelta de órbita (solo si se pide animación continua) */
}
/* =====================================================================
Base
===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0; background: var(--orb-canvas); color: var(--orb-ink);
font-family: var(--orb-font-text); font-size: var(--orb-body); line-height: var(--orb-body-lh);
letter-spacing: var(--orb-tracking); -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p { margin: 0; }
p { max-width: 60ch; }
a { color: var(--orb-link); text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .45; }
:focus-visible { outline: 2px solid var(--orb-focus); outline-offset: 3px; }
::selection { background: var(--orb-ink); color: var(--orb-canvas); }
pre, code, kbd { font-family: var(--orb-font-mono); }
pre, pre * { letter-spacing: 0; } /* el tracking negativo rompe la rejilla del monoespaciado */
/* ---------- Tipos ---------- */
.orb-display { font: 400 var(--orb-display)/var(--orb-display-lh) var(--orb-font-display); letter-spacing: var(--orb-tracking); }
.orb-h1 { font: 400 var(--orb-h1)/var(--orb-h1-lh) var(--orb-font-display); letter-spacing: var(--orb-tracking); }
.orb-h2 { font: 400 var(--orb-h2)/var(--orb-h2-lh) var(--orb-font-display); letter-spacing: var(--orb-tracking); }
.orb-h3 { font: 400 var(--orb-h3)/var(--orb-h3-lh) var(--orb-font-display); letter-spacing: var(--orb-tracking); }
.orb-h4 { font: 500 var(--orb-h4)/var(--orb-h4-lh) var(--orb-font-text); }
.orb-sub { font: 500 var(--orb-sub)/var(--orb-sub-lh) var(--orb-font-text); }
.orb-lede { font: 400 var(--orb-body)/var(--orb-body-lh) var(--orb-font-text); color: var(--orb-muted); }
.orb-ui { font: 500 var(--orb-ui)/var(--orb-ui-lh) var(--orb-font-text); }
.orb-meta { font: 400 var(--orb-meta)/var(--orb-meta-lh) var(--orb-font-text); color: var(--orb-muted); }
.orb-micro { font: 500 var(--orb-micro)/var(--orb-micro-lh) var(--orb-font-text); }
.orb-label { font: 400 var(--orb-micro)/var(--orb-micro-lh) var(--orb-font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--orb-muted); }
.orb-muted { color: var(--orb-muted); }
/* la palabra destacada: UNA por título, en la tinta de un agente.
Cada título toma el siguiente agente (cian → lila → ámbar → menta → coral);
motor/palabras.js lo reparte solo. En claro se usa la tinta oscura del agente
(legible sobre blanco roto) y en oscuro su color puro. */
.orb-word { color: var(--orb-word, var(--orb-cian-ink)); }
.orb-word.cian { --orb-word: var(--orb-cian-ink); }
.orb-word.lila { --orb-word: var(--orb-lila-ink); }
.orb-word.ambar { --orb-word: var(--orb-ambar-ink); }
.orb-word.menta { --orb-word: var(--orb-menta-ink); }
.orb-word.coral { --orb-word: var(--orb-coral-ink); }
/* "ciclo": cuando una pantalla tiene una sola palabra destacada (la portada),
esa palabra y su chip van cambiando de agente cada 3s (5 agentes = 15s).
Con movimiento reducido se quedan quietos en cian. */
:root { --orb-ciclo: 15s; }
.orb-word.ciclo { animation: orb-ciclo-tinta var(--orb-ciclo) infinite; }
@keyframes orb-ciclo-tinta {
0%, 16% { color: var(--orb-cian-ink); }
20%, 36% { color: var(--orb-lila-ink); }
40%, 56% { color: var(--orb-ambar-ink); }
60%, 76% { color: var(--orb-menta-ink); }
80%, 96% { color: var(--orb-coral-ink); }
100% { color: var(--orb-cian-ink); }
}
/* ---------- La columna dibujada: contenedor con raíles ---------- */
.orb-wrap { width: min(var(--orb-container), calc(100% - 2 * var(--orb-gutter))); margin-inline: auto; }
.orb-column { width: min(var(--orb-container), 100%); margin-inline: auto; border-inline: var(--orb-rail) solid var(--orb-hair); }
@media (max-width: 1023px) { .orb-column { border-inline: 0; } } /* los raíles son lo primero que cae */
.orb-section { padding-block: var(--orb-section); }
.orb-rule { border: 0; border-top: var(--orb-rail) solid var(--orb-hair); margin: 0; }
/* ---------- Celdas, no tarjetas: sin hueco, sin radio, una línea compartida ---------- */
.orb-cells { display: grid; grid-template-columns: repeat(var(--orb-cols, 3), 1fr); gap: 0; border-block: var(--orb-rail) solid var(--orb-hair); }
.orb-cells > * { padding: var(--orb-s8); border-radius: 0; min-width: 0; }
.orb-cells > * + * { border-left: var(--orb-rail) solid var(--orb-hair); }
@media (max-width: 767px) { .orb-cells { grid-template-columns: 1fr; } .orb-cells > * + * { border-left: 0; border-top: var(--orb-rail) solid var(--orb-hair); } }
/* Columnas fijas y VARIAS FILAS: .c2 .c3 .c4 .c6. Cada fila nueva lleva su línea arriba y la
primera celda de cada fila no repite el raíl. En el móvil manda la regla de una (o .m2, dos) por fila. */
.orb-cells.c2 { --orb-cols: 2; } .orb-cells.c3 { --orb-cols: 3; } .orb-cells.c4 { --orb-cols: 4; } .orb-cells.c6 { --orb-cols: 6; }
@media (min-width: 768px) {
.orb-cells.c2 > :nth-child(2n+1), .orb-cells.c3 > :nth-child(3n+1), .orb-cells.c4 > :nth-child(4n+1), .orb-cells.c6 > :nth-child(6n+1) { border-left: 0; }
.orb-cells.c2 > :nth-child(n+3), .orb-cells.c3 > :nth-child(n+4), .orb-cells.c4 > :nth-child(n+5), .orb-cells.c6 > :nth-child(n+7) { border-top: var(--orb-rail) solid var(--orb-hair); }
}
/* .m2: en el móvil, dos por fila (catálogos de agentes, piezas pequeñas) */
@media (max-width: 767px) {
.orb-cells.m2 { grid-template-columns: 1fr 1fr; }
.orb-cells.m2 > * + * { border-top: 0; border-left: 0; }
.orb-cells.m2 > :nth-child(2n) { border-left: var(--orb-rail) solid var(--orb-hair); }
.orb-cells.m2 > :nth-child(n+3) { border-top: var(--orb-rail) solid var(--orb-hair); }
}
/* ---------- BOTONES (el componente de Abraham, 11-10-2026) ----------
Su botón React (Base UI + cva, estilo coss/ui) pasado a CSS con los tokens de Orbunio.
La versión React, tal cual, está en componentes/react/ (con un tema que la viste de Orbunio).
Variantes: (principal) · .ghost (secundario, con borde) · .sutil (sin borde) · .enlace · .peligro
Tamaños: .xs · .sm · (normal) · .lg · .xl (en el móvil cada uno sube un escalón para el dedo)
Solo icono: .icono (+ .xs .sm .lg .xl), siempre con aria-label
Estados: :hover · :active o [aria-pressed="true"] · :disabled · [aria-busy="true"] con .orb-spinner dentro
Un solo botón relleno en todo el sistema: el principal. Peligro va con borde, nunca relleno. */
.orb-button {
--b-alto: 40px; --b-px: 16px; --b-letra: 15px; --b-icono: 18px;
--b-fondo: var(--orb-action); --b-tinta: var(--orb-on-action); --b-borde: var(--orb-action);
--b-hover: color-mix(in srgb, var(--orb-action) 90%, transparent);
--b-sombra: inset 0 1px 0 rgb(255 255 255 / .16), 0 1px 2px color-mix(in srgb, var(--orb-action) 24%, transparent);
--b-pulsado: inset 0 1px 0 rgb(0 0 0 / .08);
--b-filo: none;
position: relative; display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; gap: 8px;
height: var(--b-alto); padding: 0 var(--b-px);
border: 1px solid var(--b-borde); border-radius: var(--orb-r-control);
background: var(--b-fondo); color: var(--b-tinta); box-shadow: var(--b-sombra);
font: 500 var(--b-letra)/1 var(--orb-font-text); letter-spacing: var(--orb-tracking); white-space: nowrap; text-decoration: none;
cursor: pointer; outline: none; user-select: none; -webkit-tap-highlight-color: transparent;
transition: box-shadow var(--orb-dur-feedback) var(--orb-ease), background-color var(--orb-dur-feedback) var(--orb-ease), border-color var(--orb-dur-feedback) var(--orb-ease);
}
.orb-button::before { content: ""; position: absolute; inset: 0; border-radius: calc(var(--orb-r-control) - 1px); pointer-events: none; box-shadow: var(--b-filo); }
.orb-button:hover { background: var(--b-hover); }
.orb-button:active, .orb-button[aria-pressed="true"] { box-shadow: var(--b-pulsado); }
.orb-button:active::before, .orb-button[aria-pressed="true"]::before { box-shadow: none; }
.orb-button:focus-visible { outline: 2px solid var(--orb-focus); outline-offset: 2px; }
.orb-button:disabled, .orb-button[aria-disabled="true"] { opacity: .64; pointer-events: none; cursor: default; box-shadow: none; }
.orb-button > svg, .orb-button .orb-icono { width: var(--b-icono); height: var(--b-icono); margin-inline: -2px; flex-shrink: 0; opacity: .8; pointer-events: none; }
/* zona de toque mínima de 44 px en pantallas táctiles, sin cambiar el dibujo */
@media (pointer: coarse) { .orb-button::after { content: ""; position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 100%; height: 100%; min-width: 44px; min-height: 44px; } }
/* variantes */
.orb-button.ghost, .orb-button.peligro {
--b-fondo: var(--orb-btn-sec); --b-tinta: var(--orb-ink); --b-borde: var(--orb-line);
--b-hover: var(--orb-btn-sec-hover); --b-sombra: var(--orb-btn-sombra-suave); --b-pulsado: none; --b-filo: var(--orb-btn-filo);
background-clip: padding-box;
}
.orb-button.peligro { --b-tinta: var(--orb-danger); --b-hover: color-mix(in srgb, var(--orb-danger) 4%, var(--orb-btn-sec)); }
.orb-button.peligro:hover { border-color: color-mix(in srgb, var(--orb-danger) 32%, var(--orb-line)); }
.orb-button.sutil { --b-fondo: transparent; --b-tinta: var(--orb-ink); --b-borde: transparent; --b-hover: var(--orb-soft); --b-sombra: none; --b-pulsado: none; }
.orb-button.enlace { --b-fondo: transparent; --b-tinta: var(--orb-ink); --b-borde: transparent; --b-hover: transparent; --b-sombra: none; --b-pulsado: none; text-underline-offset: 4px; }
.orb-button.enlace:hover, .orb-button.enlace[aria-pressed="true"] { text-decoration: underline; }
/* tamaños: los mismos en escritorio y en el móvil (ya son cómodos para el dedo).
xl = el botón grande de siempre: 48 px de alto y 24 px de aire a cada lado. */
.orb-button.xs { --b-alto: 28px; --b-px: 10px; --b-letra: 13px; --b-icono: 14px; gap: 6px; }
.orb-button.sm { --b-alto: 32px; --b-px: 12px; --b-letra: 14px; --b-icono: 16px; gap: 6px; }
.orb-button.lg { --b-alto: 44px; --b-px: 20px; --b-letra: 16px; }
.orb-button.xl { --b-alto: 48px; --b-px: 24px; --b-letra: 16px; --b-icono: 20px; gap: 10px; }
.orb-button.icono { width: var(--b-alto); padding: 0; }
.orb-button.compacto { } /* nombre antiguo: hoy es el tamaño normal */
.orb-button.ancho { width: 100%; }
/* cargando: el texto se vuelve transparente y el giro queda en el centro */
.orb-spinner { display: none; position: absolute; inset: 0; margin: auto; width: var(--b-icono, 16px); height: var(--b-icono, 16px); color: var(--b-tinta, currentColor); pointer-events: none; }
.orb-spinner svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; animation: orb-girar .8s linear infinite; }
.orb-button[aria-busy="true"] { color: transparent; pointer-events: none; }
.orb-button[aria-busy="true"] > :not(.orb-spinner) { visibility: hidden; }
.orb-button[aria-busy="true"] .orb-spinner { display: block; }
@keyframes orb-girar { to { transform: rotate(360deg); } }
/* ---------- CAMPOS (rediseño 11-10-2026): el mismo lenguaje que el botón secundario ----------
Superficie, borde suave, sombra corta y un anillo al enfocar. 44 px (como el botón lg).
.sm 36 px · .lg 48 px. Con icono delante: */
.orb-input {
height: 44px; width: 100%; padding: 0 14px;
border: 1px solid var(--orb-line); border-radius: var(--orb-r-control);
background: var(--orb-btn-sec); color: var(--orb-ink); background-clip: padding-box;
box-shadow: var(--orb-btn-sombra-suave);
font: 400 15px/22px var(--orb-font-text); letter-spacing: var(--orb-tracking);
transition: border-color var(--orb-dur-feedback) var(--orb-ease), box-shadow var(--orb-dur-feedback) var(--orb-ease), background-color var(--orb-dur-feedback) var(--orb-ease);
}
.orb-input.sm { height: 36px; padding: 0 12px; font-size: 14px; }
.orb-input.lg { height: 48px; padding: 0 16px; font-size: 16px; }
textarea.orb-input { height: auto; min-height: 128px; padding: 12px 14px; resize: vertical; }
.orb-input::placeholder { color: var(--orb-faint); }
.orb-input:hover { border-color: color-mix(in srgb, var(--orb-ink) 28%, var(--orb-line)); }
.orb-input:focus, .orb-input:focus-visible { outline: none; border-color: var(--orb-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--orb-ink) 12%, transparent); }
.orb-input[aria-invalid="true"] { border-color: var(--orb-danger); }
.orb-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--orb-danger) 18%, transparent); }
.orb-input:disabled { opacity: .64; cursor: not-allowed; box-shadow: none; }
.orb-con-icono { position: relative; display: block; }
.orb-con-icono > .orb-icono, .orb-con-icono > svg { position: absolute; left: 14px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; color: var(--orb-muted); pointer-events: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.orb-con-icono > .orb-input { padding-left: 42px; }
.orb-con-icono > kbd { position: absolute; right: 10px; top: 50%; translate: 0 -50%; padding: 2px 6px; border-radius: var(--orb-r-mini); border: 1px solid var(--orb-line); background: var(--orb-canvas); color: var(--orb-muted); font: 500 12px/16px var(--orb-font-mono); letter-spacing: 0; }
.orb-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: var(--orb-r-pill); font: 500 var(--orb-micro)/var(--orb-micro-lh) var(--orb-font-text); background: var(--orb-soft); color: var(--orb-ink); }
.orb-chip.cian { background: var(--orb-cian-surface); color: var(--orb-cian-ink); }
.orb-chip.lila { background: var(--orb-lila-surface); color: var(--orb-lila-ink); }
.orb-chip.ambar { background: var(--orb-ambar-surface); color: var(--orb-ambar-ink); }
.orb-chip.menta { background: var(--orb-menta-surface); color: var(--orb-menta-ink); }
.orb-chip.coral { background: var(--orb-coral-surface); color: var(--orb-coral-ink); }
/* chip que acompaña a la palabra en ciclo: cambia de agente al mismo ritmo */
.orb-chip.ciclo { background: var(--orb-cian-surface); color: var(--orb-cian-ink); animation: orb-ciclo-chip var(--orb-ciclo) infinite; }
@keyframes orb-ciclo-chip {
0%, 16% { background: var(--orb-cian-surface); color: var(--orb-cian-ink); }
20%, 36% { background: var(--orb-lila-surface); color: var(--orb-lila-ink); }
40%, 56% { background: var(--orb-ambar-surface); color: var(--orb-ambar-ink); }
60%, 76% { background: var(--orb-menta-surface); color: var(--orb-menta-ink); }
80%, 96% { background: var(--orb-coral-surface); color: var(--orb-coral-ink); }
100% { background: var(--orb-cian-surface); color: var(--orb-cian-ink); }
}
.orb-card { background: var(--orb-surface); border: var(--orb-rail) solid var(--orb-hair); border-radius: var(--orb-r-card); box-shadow: var(--orb-shadow-card); padding: var(--orb-s8); }
.orb-agent { display: block; width: 100%; height: auto; }
/* ---------- Estelas (técnica de firma; motor en motor/estelas.js) ----------
Los puntos usan currentColor: heredan el color del texto de donde estén
(tinta en claro, blanco roto en oscuro, el contrario en la banda invertida). */
.orb-vivo circle { animation: orb-latido 2.4s var(--orb-ease) infinite; animation-delay: calc(var(--i) * 90ms); transform-box: fill-box; transform-origin: center; }
@keyframes orb-latido { 0%, 100% { opacity: .35; } 40% { opacity: 1; } }
.orb-gira { animation: orb-gira var(--orb-orbit) linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes orb-gira { to { transform: rotate(360deg); } }
/* ---------- Logo vivo (motor/logo-orbital.js) ----------
Logo completo (esfera + nombre en Satoshi), en cabecera y pie:
Solo la esfera:
Quieto; al pasar el ratón da una vuelta rápida y al salir la deshace.
Tamaño con font-size: el logo completo mide 1em de alto y la esfera sola 1em x 1em.
Color: currentColor, así que vale igual en claro, en oscuro y en la banda invertida. */
.orb-logo { display: inline-flex; align-items: center; gap: .14em; font-size: 44px; color: var(--orb-ink); text-decoration: none; line-height: 1; }
.orb-logo > .orb-marca-svg { display: block; height: 1em; width: auto; overflow: visible; }
.orb-logo img { height: .68em; width: auto; display: block; }
.orb-isotipo { display: inline-block; width: 1em; height: 1em; color: inherit; flex: none; }
.orb-isotipo svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* ---------- Agentes vivos (motor/agentes.js v2) ----------
Mide 1em x 1em (font-size). Dos capas: el cuerpo (una imagen compartida) y los ojos,
lo único que se mueve. Todos parpadean de vez en cuando. Por defecto, al pasar el ratón
miran a un lado y al otro; data-modo="atento" miran a los lados solos (chats, tablas);
"sigue" siguen al cursor (portadas); "fijo" no se mueven. */
.orb-agente { position: relative; display: inline-block; width: 1em; height: 1em; font-size: 160px; flex: none; vertical-align: middle; }
.orb-agente > img, .orb-agente > .mirada, .orb-agente > .mirada > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.orb-agente[data-modo="atento"] > .mirada { animation: orb-mirar 8s var(--orb-ease) infinite; animation-delay: var(--ag-retraso, 0s); }
/* parpadeo: cada agente con su ritmo (--parpadeo y --parpadeo-retraso los pone el motor al montarlo) */
.orb-agente:not([data-modo="fijo"]) > .mirada > .ojos { animation: orb-parpadeo var(--parpadeo, 6s) infinite; animation-delay: var(--parpadeo-retraso, 0s); }
.orb-agente.doble > .mirada > .ojos { animation-name: orb-parpadeo-doble; }
.orb-agente.dormido > .mirada, .orb-agente.dormido > .mirada > .ojos { animation-play-state: paused; }
@keyframes orb-parpadeo { 0%, 96.4%, 100% { transform: scaleY(1); } 98.2% { transform: scaleY(.1); } }
@keyframes orb-parpadeo-doble { 0%, 92.8%, 100% { transform: scaleY(1); } 94.6% { transform: scaleY(.1); } 96.4% { transform: scaleY(1); } 98.2% { transform: scaleY(.1); } }
.orb-agente[data-modo="sigue"] > .mirada { will-change: transform; }
@keyframes orb-mirar {
0%, 16% { transform: translateX(0); }
22%, 36% { transform: translateX(-6.5%); }
42%, 58% { transform: translateX(0); }
64%, 78% { transform: translateX(6.5%); }
84%, 100% { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) { .orb-agente > .mirada, .orb-agente > .mirada > .ojos { animation: none; } }
/* ---------- Aparecer al hacer scroll ---------- */
.orb-reveal { opacity: 0; transform: translateY(var(--orb-travel, 10px)); transition: opacity var(--orb-dur-reveal) var(--orb-ease-reveal), transform var(--orb-dur-reveal) var(--orb-ease-reveal); transition-delay: calc(var(--idx, 0) * 100ms); }
.orb-reveal.is-in { opacity: 1; transform: none; }
/* ---------- Mostrar/ocultar recursos por tema ----------
Utilidad con !important a propósito: ninguna regla de maquetación
(p. ej. "img { display:block }") debe poder mostrar las dos versiones a la vez. */
:root:not([data-theme="dark"]) .orb-dark, [data-theme="dark"] .orb-light { display: none !important; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition-duration: 0ms !important; scroll-behavior: auto !important; }
.orb-reveal { opacity: 1; transform: none; }
}
[hidden] { display: none !important; }