/* ============================================================================ VOICE WIDGET — TEMA S1gnal Dental ============================================================================ Variante de marca del motor de voz S1GNAL para S1gnal Dental (sistema operativo dental) y sus clínicas cliente. NO es un reemplazo de widget/voice-widget.css — se carga DESPUÉS de ese archivo y sobreescribe únicamente variables y selectores de color/tipografía/superficie. No toca layout, animación ni comportamiento (eso vive en voice-widget.js). Fuente de verdad de marca: s1gnal-dental-puente-brandkit.html (V1.1, "Puente" — la vigente; ver LEEME.md sección "Qué brand kit se aplicó y por qué"). Orden de carga requerido en el HTML del cliente: ============================================================================ */ /* ---------------------------------------------------------------------- 1. TOKENS — se definen UNA vez aquí. Todo lo demás en este archivo los referencia; ningún literal de color o medida se repite suelto. Paleta exacta del brand kit S1gnal Dental Puente V1.1, sin inventar tonos: Tinta #172428 · Verde S1gnal Dental #0E7C63 · Cielo clínico #93C5D8 · Señal #C84E3E · Niebla #F1F3F0 · Papel #FFFFFF Más --line #C8D0CD: no es uno de los 6 colores de trabajo del kit, pero SÍ está definido en :root de ambos brandkit.html como hairline neutro — se reutiliza tal cual, no se inventa. ---------------------------------------------------------------------- */ .signal-launcher, .signal-panel { /* Color de marca S1gnal Dental — hex + canal RGB (para armar rgba() sin repetir el literal hexadecimal ni el literal rgb en cada regla). */ --mo-ink: #172428; --mo-ink-rgb: 23, 36, 40; /* Tinta: marca, texto, fondos de foco */ --mo-s1gnal-dental: #0e7c63; --mo-s1gnal-dental-rgb: 14, 124, 99; /* Verde S1gnal Dental: avance, acción, estados sanos */ --mo-sky: #93c5d8; --mo-sky-rgb: 147, 197, 216; /* Cielo clínico: información, respiro */ --mo-signal: #c84e3e; --mo-signal-rgb: 200, 78, 62; /* Señal: SOLO estado de grabación/atención — nunca fondo dominante ni texto */ --mo-mist: #f1f3f0; --mo-mist-rgb: 241, 243, 240; /* Niebla: superficies de trabajo */ --mo-paper: #ffffff; --mo-paper-rgb: 255, 255, 255; /* Papel: lectura */ --mo-line: #c8d0cd; /* hairline neutro, tal como aparece en :root del brand kit */ /* Ritmo de espaciado — proporción áurea (φ=1.618) expresada como pasos Fibonacci en px, tal como documenta el brand kit. Definido una sola vez; nunca se escribe "1.618" suelto en una regla. */ --mo-space-1: 8px; --mo-space-2: 13px; --mo-space-3: 21px; --mo-space-4: 34px; --mo-space-5: 55px; --mo-space-6: 89px; /* Espacio icono → wordmark documentado explícitamente en el brand kit Puente ("19.4 / Espacio de icono a wordmark") — no es un paso Fibonacci genérico, es la medida exacta del kit y se respeta tal cual. */ --mo-icon-gap: 19.4px; /* Tipografía S1gnal Dental. Manrope para marca/titulares (SemiBold–ExtraBold), Source Sans 3 para texto. Se cargan por a Google Fonts en embed-s1gnal-dental.html (mismo mecanismo que usa el propio brand kit). */ --mo-display: "Manrope", ui-sans-serif, system-ui, sans-serif; --mo-text: "Source Sans 3", ui-sans-serif, system-ui, sans-serif; /* -------- Remapeo de las variables del motor (--sg-*) -------- */ /* --sg-amber gobernaba: LED encendido, CTAs, el "1" del wordmark. En S1GNAL ese trabajo es "señal activa". En S1gnal Dental el trabajo equivalente de "avance / acción / estado sano" es el Verde S1gnal Dental, NO la Señal — la Señal queda reservada exclusivamente para el estado de grabación (ver sección 3, .talk.listening). */ --sg-amber: var(--mo-s1gnal-dental); --sg-hot: var(--mo-sky); /* acento puntual — Cielo clínico, ya está en la paleta de 6, no se inventa */ --sg-dim: rgba(var(--mo-s1gnal-dental-rgb), .38); /* estela: mismo Verde S1gnal Dental a menor opacidad, no un hex nuevo */ --sg-off: rgba(var(--mo-ink-rgb), .10); /* segmento en reposo: Tinta a muy baja opacidad sobre superficie clara */ --sg-black: var(--mo-paper); /* superficie fija de la cápsula: S1gnal Dental es marca de superficie clara (Papel), no CRT oscuro */ --sg-ink: var(--mo-mist); /* fondos internos hundidos (pastilla del símbolo, escáner): Niebla */ --sg-phosphor: var(--mo-ink); /* texto principal: Tinta sobre Papel */ --sg-steel: rgba(var(--mo-ink-rgb), .62); /* texto secundario: Tinta a menor opacidad, no un gris inventado */ --sg-line: var(--mo-line); --sg-1: var(--mo-space-1); --sg-2: var(--mo-space-2); --sg-3: var(--mo-space-3); --sg-4: var(--mo-space-4); --sg-5: var(--mo-space-5); --sg-display: var(--mo-display); /* El motor usa IBM Plex Mono para etiquetas/estados pequeños. S1gnal Dental no define una tipografía monoespaciada — no se agrega una tercera fuente: se resuelve con Source Sans 3 en mayúsculas + tracking, como ya hace el propio brand kit para sus eyebrows. */ --sg-mono: var(--mo-text); --sg-text: var(--mo-text); } /* ---------------------------------------------------------------------- 2. Símbolo del launcher: NO se usa "La Ranura" (símbolo propio de S1GNAL) ni se recolorea el logotipo de encendido. Ver embed-s1gnal-dental.html: el launcher usa el signo Puente real (SVG vectorial, sin redibujar) en vez del contenedor .mk-slit con segmentos LED. Esta regla solo evita que, si por error queda el markup de .mk-slit en alguna copia, se pinte con el ámbar original en vez de quedar en blanco/transparente. ---------------------------------------------------------------------- */ .mk-slit { border-color: rgba(var(--mo-paper-rgb), .5); background: transparent; } .mk-slit i { background: var(--sg-off); } /* ---------------------------------------------------------------------- 3. Selectores con literales de color hardcodeados en el motor original (rgba(255,176,0, …) escrito directo en vez de var(--sg-amber)). Se redeclaran aquí referenciando los tokens --mo-*-rgb definidos arriba — ningún hex ni rgb nuevo, solo los ya declarados en la sección 1. ---------------------------------------------------------------------- */ .signal-launcher { border-color: rgba(var(--mo-s1gnal-dental-rgb), .35); background: var(--mo-paper); color: var(--mo-ink); box-shadow: 0 14px 34px rgba(var(--mo-ink-rgb), .16), 0 0 20px rgba(var(--mo-s1gnal-dental-rgb), .10); } .signal-launcher:hover, .signal-launcher:focus-visible { border-color: rgba(var(--mo-s1gnal-dental-rgb), .7); box-shadow: 0 18px 40px rgba(var(--mo-ink-rgb), .2), 0 0 26px rgba(var(--mo-s1gnal-dental-rgb), .18); } .signal-launcher:focus-visible { outline-color: var(--mo-s1gnal-dental); } .signal-launcher .launcher-action { color: var(--mo-s1gnal-dental); } .signal-panel { border-color: var(--mo-line); box-shadow: 0 24px 80px rgba(var(--mo-ink-rgb), .22); } /* Filete superior del panel: en el motor original es la marca ámbar fija. En S1gnal Dental usa Verde S1gnal Dental (avance), consistente con --sg-amber remapeado. */ .signal-panel::before { background: var(--mo-s1gnal-dental); box-shadow: 0 0 10px rgba(var(--mo-s1gnal-dental-rgb), .35); } .signal-panel .lockup { font-family: var(--mo-display); } .signal-panel .lockup b { color: var(--mo-s1gnal-dental); } .signal-panel .status-dot { background: var(--mo-s1gnal-dental); box-shadow: 0 0 7px rgba(var(--mo-s1gnal-dental-rgb), .6); } .signal-panel .close:hover, .signal-panel .close:focus-visible { background: rgba(var(--mo-s1gnal-dental-rgb), .1); color: var(--mo-ink); } .signal-panel .reactor { background: var(--mo-mist); box-shadow: inset 0 0 0 1px rgba(var(--mo-ink-rgb), .08); } .signal-panel .reactor::before, .signal-panel .reactor::after { opacity: .5; } .signal-panel .reactor::before { border-color: var(--mo-s1gnal-dental); } .signal-panel .reactor::after { border-color: var(--mo-s1gnal-dental); } .signal-panel .reactor-state { color: rgba(var(--mo-ink-rgb), .45); } .signal-panel .message { border-left-color: rgba(var(--mo-s1gnal-dental-rgb), .35); } .signal-panel .user-line b { color: rgba(var(--mo-ink-rgb), .5); } .signal-panel .chip { border-color: rgba(var(--mo-ink-rgb), .16); color: rgba(var(--mo-ink-rgb), .62); } .signal-panel .chip:hover, .signal-panel .chip:focus-visible { border-color: rgba(var(--mo-s1gnal-dental-rgb), .55); color: var(--mo-ink); } .signal-panel .utility { border-color: rgba(var(--mo-ink-rgb), .16); color: rgba(var(--mo-ink-rgb), .62); } .signal-panel .utility:hover, .signal-panel .utility:focus-visible { border-color: rgba(var(--mo-s1gnal-dental-rgb), .5); color: var(--mo-ink); } /* --- Botón de hablar: estado normal en Verde S1gnal Dental (avanza / acción) --- */ .signal-panel .talk { border-color: rgba(var(--mo-s1gnal-dental-rgb), .55); background: var(--mo-mist); color: var(--mo-s1gnal-dental); box-shadow: 0 0 0 5px rgba(var(--mo-s1gnal-dental-rgb), .05); } .signal-panel .talk:hover, .signal-panel .talk:focus-visible { border-color: var(--mo-s1gnal-dental); } /* --- Estado "grabando" (escuchando activamente): el ÚNICO lugar donde entra la Señal, tal como indica la instrucción de marca — nunca como fondo dominante ni como texto. Aquí es el borde/halo del botón y el ícono (currentColor), no una superficie llena ni una etiqueta de texto en Señal. */ .signal-panel .talk.listening { background: var(--mo-mist); color: var(--mo-signal); border-color: var(--mo-signal); box-shadow: 0 0 0 6px rgba(var(--mo-signal-rgb), .12), 0 0 26px rgba(var(--mo-signal-rgb), .22); } .signal-panel .panel-cta { border-color: rgba(var(--mo-s1gnal-dental-rgb), .4); color: var(--mo-s1gnal-dental); } .signal-panel .panel-cta:hover, .signal-panel .panel-cta:focus-visible { background: rgba(var(--mo-s1gnal-dental-rgb), .1); border-color: var(--mo-s1gnal-dental); } .signal-panel .notice { color: rgba(var(--mo-ink-rgb), .55); } /* ---------------------------------------------------------------------- 4. LÍMITE CONOCIDO — no cubierto por CSS, documentado en LEEME.md. El barrido animado del escáner (#voice-pixels) y el brillo de sus segmentos se pintan con estilos inline generados por voice-widget.js (constantes SEG_OFF/SEG_DIM/SEG_ON/SEG_HOT y un rgba(255,176,0,…) fijo para el resplandor — ver esa función). Un archivo CSS no puede sobreescribir un estilo inline sin !important, y hacerlo ahí rompería la rampa de mezcla de color que calcula el JS frame a frame. Este tema NO fuerza esos !important: en vez de una rampa de color rota, la animación se ve en el ámbar original de S1GNAL dentro del panel hasta que exista una versión de voice-widget.js con esas constantes parametrizadas por marca. Ver "Decisiones abiertas" en LEEME.md. ---------------------------------------------------------------------- */ /* ---------------------------------------------------------------------- 5. Modo adaptativo (reventa a clínicas cliente de S1gnal Dental). El wordmark, el signo Puente y el estado de grabación en Señal NUNCA cambian de color en este modo — igual que el motor original protege su ámbar. ---------------------------------------------------------------------- */ [data-signal-theme="adaptive"] .signal-launcher, [data-signal-theme="adaptive"] .signal-panel { background: var(--signal-surface, var(--mo-paper)); border-color: var(--signal-surface-border, rgba(var(--mo-s1gnal-dental-rgb), .35)); } /* ---------------------------------------------------------------------- 6. Signo Puente en el launcher (ver embed-s1gnal-dental.html). Guardrail del brand kit: nunca baja de 16px, nunca se estira/inclina, la barra central siempre horizontal. 22px aquí por comodidad de toque en móvil — sigue por encima del mínimo de 16px. ---------------------------------------------------------------------- */ .mo-puente-mark { width: 22px; height: 22px; flex: 0 0 auto; color: var(--mo-ink); } .mo-puente-mark svg { display: block; width: 100%; height: 100%; } /* * Rampa del escáner de voz. * * El motor pintaba estos segmentos con constantes ámbar dentro del JS, fuera * del alcance de cualquier tema: el único elemento que el visitante mira fijo * quedaba con el dorado de S1GNAL. El motor ahora lee estas variables, así que * la rampa la manda la marca. * * La lectura, de apagado a pico: hairline en reposo, Verde S1gnal Dental cuando hay voz * (avance, que es justo su trabajo en el kit) y Cielo clínico en el pico. Los * tres colores ya existen en la paleta de seis; no se inventa ninguno. * Se declaran como canales sueltos porque el JS interpola por canal. */ :root { --vw-seg-off: 200 208 205; /* Línea #c8d0cd — reposo sobre Niebla */ --vw-seg-dim: 127 179 162; /* Verde S1gnal Dental aclarado — la estela */ --vw-seg-on: 14 124 99; /* Verde S1gnal Dental #0e7c63 — hay voz */ --vw-seg-hot: 147 197 216; /* Cielo clínico #93c5d8 — el pico */ --vw-seg-glow: 14 124 99; /* El halo respira en verde, nunca en Señal */ }