/* Yahu · Horizonte — tokens. Generado de tokens/tokens.json; no editar a mano. */
:root, [data-theme="noche"] {
--yh-fondo: #110f0d;
--yh-sup-1: #1a1816;
--yh-sup-2: #1f1d1a;
--yh-sup-3: #262320;
--yh-hundido: #0a0908;
--yh-campo: #1a1816;
--yh-velo: rgba(10, 9, 8, 0.72);
--yh-texto: #f2ead9;
--yh-texto-2: #b8ae9d;
--yh-texto-3: #9a9082;
--yh-texto-inv: #110f0d;
--yh-texto-off: #57534e;
--yh-filete: rgba(242, 234, 217, 0.08);
--yh-filete-fuerte: rgba(242, 234, 217, 0.16);
--yh-borde-control: #71695f;
--yh-boton-fondo: #1c1917;
--yh-boton-borde: rgba(242, 234, 217, 0.14);
--yh-foco: var(--yh-texto);
--yh-naranja: #ff6a1f;
--yh-sobre-naranja: #110f0d;
--yh-senal-texto: #ff6a1f;
--yh-senal-grafico: #ff6a1f;
--yh-senal-suave: #2e1a0f;
--yh-halo: rgba(255, 106, 31, 0.55);
--yh-franja-1: #e2401c;
--yh-franja-2: var(--yh-naranja);
--yh-franja-3: #f5b544;
--yh-fosforo: rgba(255, 106, 31, 0.5);
--yh-barrido: rgba(0, 0, 0, 0.22);
--yh-positivo: #10ec90;
--yh-positivo-suave: #0f2a1e;
--yh-precaucion: #f5b544;
--yh-precaucion-suave: #2e2412;
--yh-critico: #f0523a;
--yh-critico-suave: #2e1512;
--yh-sobre-critico: #110f0d;
--yh-burbuja: #262320;
--yh-burbuja-texto: var(--yh-texto);
--yh-cielo-cenit: #1a1816;
--yh-cielo-base: #0a0908;
--yh-estrella: #f2ead9;
--yh-orbita: rgba(242, 234, 217, 0.32);
--yh-sombra-flotante: inset 0 1px 0 rgba(250, 250, 249, 0.06), 0 24px 48px -16px rgba(0, 0, 0, 0.6);
--yh-brillo-senal: 0 0 0 1px rgba(255, 106, 31, 0.6), 0 0 16px rgba(255, 106, 31, 0.5), 0 0 48px rgba(255, 106, 31, 0.25);
}
:root {
--yh-esp-1: 4px;
--yh-esp-2: 8px;
--yh-esp-3: 12px;
--yh-esp-4: 16px;
--yh-esp-5: 20px;
--yh-esp-6: 24px;
--yh-esp-8: 32px;
--yh-esp-10: 40px;
--yh-esp-14: 56px;
--yh-esp-18: 72px;
--yh-radio-chip: 4px;
--yh-radio-control: 8px;
--yh-radio-campo: 8px;
--yh-radio-ficha: 12px;
--yh-radio-hoja: 16px;
--yh-radio-pildora: 999px;
--yh-toque-min: 44px;
--yh-boton-alto: 40px;
--yh-boton-alto-hoja: 44px;
--yh-campo-alto: 48px;
--yh-barra-alto: 44px;
--yh-pestanas-alto: 50px;
--yh-riel-ancho: 248px;
--yh-columna-ancho: 720px;
--yh-panel-ahora-ancho: 320px;
--yh-t-toque: 90ms;
--yh-t-rapido: 160ms;
--yh-t-base: 240ms;
--yh-t-hoja: 400ms;
--yh-t-hoja-salida: 260ms;
--yh-t-pulso: 1600ms;
--yh-t-orbita-vigilando: 16s;
--yh-t-orbita-pensando: 2.4s;
--yh-curva-llegada: cubic-bezier(0.16, 1, 0.3, 1);
--yh-curva-salida: cubic-bezier(0.5, 0, 0.75, 0);
--yh-curva-hoja: cubic-bezier(0.32, 0.72, 0, 1);
--yh-curva-pulso: cubic-bezier(0.37, 0, 0.63, 1);
--font-display: "Saira", ui-sans-serif, system-ui, sans-serif;
--font-texto: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
--font-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
@font-face { font-family: "Saira"; src: url("../fonts/saira-wdth-wght.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../fonts/geist-wght.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url("../fonts/space-mono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url("../fonts/space-mono-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
.display-1 { font-family: var(--font-display); font-size: 40px; line-height: 42px; font-weight: 600; letter-spacing: -0.01em; }
.display-2 { font-family: var(--font-display); font-size: 28px; line-height: 32px; font-weight: 600; letter-spacing: -0.01em; }
.titulo { font-family: var(--font-display); font-size: 20px; line-height: 24px; font-weight: 600; letter-spacing: 0; }
.subtitulo { font-family: var(--font-texto); font-size: 16px; line-height: 22px; font-weight: 600; letter-spacing: -0.01em; }
.chat { font-family: var(--font-texto); font-size: 17px; line-height: 26px; font-weight: 400; letter-spacing: -0.01em; }
.cuerpo { font-family: var(--font-texto); font-size: 15px; line-height: 22px; font-weight: 400; }
.apoyo { font-family: var(--font-texto); font-size: 14px; line-height: 20px; font-weight: 400; }
.boton { font-family: var(--font-texto); font-size: 14px; line-height: 20px; font-weight: 500; }
.pestana { font-family: var(--font-texto); font-size: 11px; line-height: 13px; font-weight: 500; }
.mono-s { font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 400; letter-spacing: 0.06em; }
.mono-m { font-family: var(--font-mono); font-size: 13px; line-height: 20px; font-weight: 400; }
.reloj { font-family: var(--font-mono); font-size: 40px; line-height: 44px; font-weight: 700; letter-spacing: -0.02em; }
/* Yahu · Horizonte — la base: las tres voces, la capa retro, el movimiento compartido y el logo.
Un solo tema: noche. Todo color y medida sale de tokens.css. Lo que necesita JavaScript
(descifrar, relojes, estrellas) vive en js/nucleo.js. */
.yh {
font-family: var(--font-texto);
color: var(--yh-texto);
background: var(--yh-fondo);
color-scheme: dark;
font-variant-numeric: tabular-nums;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
.yh *,
.yh *::before,
.yh *::after { box-sizing: border-box; }
/* ——— Las tres voces ———
Display: Saira extendida, la rotulación de la era espacial (Eurostile, NASA 1975).
Los estilos display-1, display-2 y titulo la llevan aunque falte `yh-display`. */
.yh-display,
.display-1,
.display-2,
.titulo {
font-family: var(--font-display);
font-variation-settings: "wdth" 125;
text-wrap: balance;
}
/* Rótulos, telemetría y bitácora: Space Mono en MAYÚSCULAS, abierta +0.06em. */
.yh-mono {
font-family: var(--font-mono);
text-transform: uppercase;
letter-spacing: 0.06em;
}
/* Código: identificadores, comandos, valores. Minúsculas tal cual, sin tracking. */
.yh-codigo {
font-family: var(--font-mono);
text-transform: none;
letter-spacing: 0;
font-variant-ligatures: none;
}
/* Dentro de una frase la mono va a 0.86 em para igualar la altura de x de Geist. */
.yh-codigo-en-linea { font-size: 0.86em; }
/* Una tecla: ⌘K, Esc, Enter. */
.yh-tecla {
display: inline-grid;
place-items: center;
min-width: 20px;
height: 20px;
padding: 0 5px;
border: 1px solid var(--yh-filete-fuerte);
border-bottom-width: 2px;
border-radius: var(--yh-radio-chip);
background: var(--yh-sup-3);
color: var(--yh-texto-2);
font-family: var(--font-mono);
font-size: 11px;
line-height: 1;
letter-spacing: 0;
}
/* El cursor de bloque de Yahu cuando escribe: naranja, parpadea cada segundo. */
.yh-cursor {
display: inline-block;
width: 0.55em;
height: 1.1em;
margin-inline-start: 2px;
vertical-align: text-bottom;
background: var(--yh-senal-grafico);
box-shadow: 0 0 8px var(--yh-fosforo);
animation: yh-cursor 1s steps(1) infinite;
}
@keyframes yh-cursor { 50% { opacity: 0; } }
/* Con dedo, los botones crecen a la zona táctil de Apple (44 y 48 en hojas). */
@media (pointer: coarse) {
:root { --yh-boton-alto: 44px; --yh-boton-alto-hoja: 48px; }
}
/* ═══ La capa retro ═══ */
/* Pantalla CRT: líneas de barrido, viñeta y un parpadeo casi imperceptible.
Va en un contenedor (la traza, la consola, la llamada, el horizonte). */
.yh-crt { position: relative; isolation: isolate; }
.yh-crt::after {
content: "";
position: absolute;
inset: 0;
z-index: 3;
border-radius: inherit;
pointer-events: none;
background:
radial-gradient(130% 100% at 50% 50%, transparent 62%, rgba(0, 0, 0, 0.38) 100%),
repeating-linear-gradient(to bottom, var(--yh-barrido) 0 1px, transparent 1px 3px);
animation: yh-crt-parpadeo 5.2s steps(1) infinite;
}
@keyframes yh-crt-parpadeo { 0%, 100% { opacity: 1; } 47% { opacity: 0.86; } 48% { opacity: 1; } 83% { opacity: 0.92; } 84% { opacity: 1; } }
/* Encender: la pantalla nace de una línea horizontal brillante, como un tubo. Una vez. */
.yh-enciende { animation: yh-enciende 620ms var(--yh-curva-llegada) backwards; transform-origin: 50% 50%; }
@keyframes yh-enciende {
0% { transform: scale(0.6, 0.004); filter: brightness(4); opacity: 0.4; }
35% { transform: scale(1, 0.004); filter: brightness(3); opacity: 1; }
100% { transform: none; filter: none; opacity: 1; }
}
/* Fósforo: el texto naranja brilla en la pantalla. Sólo sobre yh-hundido y el cielo. */
.yh-fosforo { text-shadow: 0 0 10px var(--yh-fosforo); }
/* Esquinas de visor: cuatro escuadras de 10 px en las esquinas, como un retículo. */
.yh-esquinas { position: relative; --yh-esquina: var(--yh-texto-3); }
.yh-esquinas::before {
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
--l: 10px;
background:
linear-gradient(var(--yh-esquina), var(--yh-esquina)) top left / var(--l) 1px,
linear-gradient(var(--yh-esquina), var(--yh-esquina)) top left / 1px var(--l),
linear-gradient(var(--yh-esquina), var(--yh-esquina)) top right / var(--l) 1px,
linear-gradient(var(--yh-esquina), var(--yh-esquina)) top right / 1px var(--l),
linear-gradient(var(--yh-esquina), var(--yh-esquina)) bottom left / var(--l) 1px,
linear-gradient(var(--yh-esquina), var(--yh-esquina)) bottom left / 1px var(--l),
linear-gradient(var(--yh-esquina), var(--yh-esquina)) bottom right / var(--l) 1px,
linear-gradient(var(--yh-esquina), var(--yh-esquina)) bottom right / 1px var(--l);
background-repeat: no-repeat;
}
/* Papel cuadriculado de plano técnico: retícula de 24 px. */
.yh-reticula {
background-image:
linear-gradient(rgba(242, 234, 217, 0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(242, 234, 217, 0.045) 1px, transparent 1px);
background-size: 24px 24px;
background-position: -1px -1px;
}
/* Franjas de misión: rojo, naranja y ámbar, 4 px cada una con 2 px de aire. */
.yh-franjas {
display: block;
height: 16px;
background: linear-gradient(to bottom,
var(--yh-franja-1) 0 4px, transparent 4px 6px,
var(--yh-franja-2) 6px 10px, transparent 10px 12px,
var(--yh-franja-3) 12px 16px);
}
.yh-franjas--vertical {
width: 16px;
height: auto;
background: linear-gradient(to right,
var(--yh-franja-1) 0 4px, transparent 4px 6px,
var(--yh-franja-2) 6px 10px, transparent 10px 12px,
var(--yh-franja-3) 12px 16px);
}
/* Que corran: las franjas se dibujan de izquierda a derecha al montar. */
.yh-franjas--entra { animation: yh-franjas 900ms var(--yh-curva-llegada) backwards; transform-origin: left; }
@keyframes yh-franjas { from { transform: scaleX(0); } }
/* Cinta de telemetría: el contenido va dos veces dentro de `.yh-cinta-pista` y corre sin fin. */
.yh-cinta {
overflow: hidden;
white-space: nowrap;
-webkit-mask: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
mask: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.yh-cinta-pista { display: inline-flex; gap: 2.5em; padding-right: 2.5em; animation: yh-cinta 38s linear infinite; }
.yh-cinta:hover .yh-cinta-pista { animation-play-state: paused; }
@keyframes yh-cinta { to { transform: translateX(-50%); } }
/* ═══ Movimiento compartido ═══
Entrar: de desenfocado y 6 px abajo a nítido. `--i` escalona hermanos de 60 en 60 ms. */
.yh-entra {
animation: yh-entra 560ms var(--yh-curva-llegada) backwards;
animation-delay: calc(var(--i, 0) * 60ms);
}
@keyframes yh-entra {
from { opacity: 0; transform: translateY(6px); filter: blur(6px); }
to { opacity: 1; transform: none; filter: none; }
}
/* Cascada: los hijos de una lista entran uno tras otro (hasta el décimo; los demás, juntos). */
.yh-cascada > * { animation: yh-entra 560ms var(--yh-curva-llegada) backwards; animation-delay: calc(var(--i, 10) * 60ms); }
.yh-cascada > :nth-child(1) { --i: 0; }
.yh-cascada > :nth-child(2) { --i: 1; }
.yh-cascada > :nth-child(3) { --i: 2; }
.yh-cascada > :nth-child(4) { --i: 3; }
.yh-cascada > :nth-child(5) { --i: 4; }
.yh-cascada > :nth-child(6) { --i: 5; }
.yh-cascada > :nth-child(7) { --i: 6; }
.yh-cascada > :nth-child(8) { --i: 7; }
.yh-cascada > :nth-child(9) { --i: 8; }
/* Revelar un titular display: más lento y con más desenfoque. */
.yh-revela {
animation: yh-revela 800ms var(--yh-curva-llegada) backwards;
animation-delay: calc(var(--i, 0) * 90ms);
}
@keyframes yh-revela {
from { opacity: 0; transform: translateY(0.18em) scale(0.985); filter: blur(14px); }
to { opacity: 1; transform: none; filter: none; }
}
/* Un dato que cambia: el número nuevo sube en su lugar. */
.yh-cambia { animation: yh-cambia 320ms var(--yh-curva-llegada); }
@keyframes yh-cambia {
from { opacity: 0; transform: translateY(40%); }
to { opacity: 1; transform: none; }
}
/* Lo vivo late: un anillo de halo que se abre y se apaga. */
.yh-late { animation: yh-late 1.6s var(--yh-curva-pulso) infinite; }
@keyframes yh-late {
0% { box-shadow: 0 0 0 0 var(--yh-halo); }
70%, 100% { box-shadow: 0 0 0 7px rgba(255, 106, 31, 0); }
}
/* ═══ El logo ═══
. La luz gira alrededor de tu centro (56, 64). */
.yh-logo { display: block; flex: none; width: var(--yh-logo-tam, 24px); height: var(--yh-logo-tam, 24px); overflow: visible; }
.yh-logo-luz { fill: var(--yh-naranja); transform-box: view-box; transform-origin: 56px 64px; }
.yh-logo-tu { fill: var(--yh-texto); transform-box: view-box; transform-origin: 56px 64px; }
.yh-logo-firma { display: inline-flex; align-items: center; gap: 0.35em; color: var(--yh-texto); text-decoration: none; }
.yh-logo-firma .yh-logo { --yh-logo-tam: 1.3em; margin-inline-start: -0.12em; }
.yh-logo-nombre {
font-family: var(--font-display);
font-variation-settings: "wdth" 125;
font-weight: 600;
letter-spacing: 0.01em;
line-height: 1;
}
/* Amanecer: al montar, la luz sale de detrás de ti y tú apareces. Una vez. */
.yh-logo--amanece .yh-logo-luz { animation: yh-logo-luz 1100ms var(--yh-curva-llegada) backwards; }
.yh-logo--amanece .yh-logo-tu { animation: yh-logo-tu 700ms var(--yh-curva-llegada) backwards; }
@keyframes yh-logo-luz { from { opacity: 0; transform: rotate(-200deg) scale(0.7); } to { opacity: 1; transform: none; } }
@keyframes yh-logo-tu { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: none; } }
/* Llamando: la luz te rodea, una vuelta cada 1.6 s, mientras Yahu está al teléfono. */
.yh-logo--llama .yh-logo-luz { animation: yh-logo-gira 1.6s linear infinite; }
@keyframes yh-logo-gira { to { transform: rotate(360deg); } }
/* Te necesita: la luz respira. */
.yh-logo--necesita .yh-logo-luz { animation: yh-logo-respira var(--yh-t-pulso) var(--yh-curva-pulso) infinite alternate; }
@keyframes yh-logo-respira { to { opacity: 0.45; } }
/* El foco: nunca naranja */
.yh :focus-visible { outline: 2px solid var(--yh-foco); outline-offset: 2px; }
/* El cielo: sólo en la llamada, la bienvenida, los estados vacíos y la portada */
.yh-cielo {
background: radial-gradient(120% 70% at 50% -10%, var(--yh-cielo-cenit) 0%, var(--yh-cielo-base) 62%);
color: var(--yh-texto);
}
@media (prefers-reduced-motion: reduce) {
.yh *,
.yh *::before,
.yh *::after {
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
transition-duration: 1ms !important;
}
.yh-crt::after { animation: none; }
}
/* Yahu · Orbita. Extraído del design system Horizonte; la guía está en el artifact
(components/Orbita/README.md). Necesita tokens.css y base.css. */
/* ═══ órbita: núcleo ═══
La marca y el indicador de estado. Una elipse de excentricidad 0.6 girada
−23.44°, trazada a 1 px. Tú eres el cuerpo, en el foco; Yahu es el satélite.
El script calcula la geometría y la posición (ecuación de Kepler por Newton);
aquí sólo va la apariencia. Fuente: Orbita/preview.html; PildoraEstado y
Navegacion llevan una copia idéntica. */
.yh-orbita {
--yh-orbita-tam: 20px;
position: relative;
display: inline-block;
flex: none;
width: var(--yh-orbita-tam);
height: var(--yh-orbita-tam);
vertical-align: middle;
}
.yh-orbita-traza {
position: absolute;
inset: 0;
overflow: visible;
}
.yh-orbita-traza ellipse {
fill: none;
stroke: var(--yh-orbita);
stroke-width: 1;
vector-effect: non-scaling-stroke;
}
.yh-orbita--blanca .yh-orbita-traza ellipse { stroke: var(--yh-texto); }
/* El punteado significa «todavía no»: en pausa o sin conexión. */
.yh-orbita[data-estado="pausa"] .yh-orbita-traza ellipse { stroke-dasharray: 1.5 2; }
.yh-orbita--grande[data-estado="pausa"] .yh-orbita-traza ellipse { stroke-dasharray: 2 3; }
.yh-orbita-cuerpo,
.yh-orbita-onda,
.yh-orbita-satelite {
position: absolute;
left: 0;
top: 0;
border-radius: 50%;
}
/* Tú: un disco en texto-3. Desde 64 px, la luz de Yahu lo ilumina por el
lado que lo mira, más mientras más cerca está (∝ 1/r²). */
.yh-orbita-cuerpo {
overflow: hidden;
background: var(--yh-texto-3);
transition: box-shadow 600ms var(--yh-curva-salida);
}
.yh-orbita-luz { display: none; }
/* El horizonte: desde 64 px tú eres un disco negro con canto de luz, como el
agujero de eventide; en los tamaños chicos sigues siendo un punto en texto-3. */
.yh-orbita--grande .yh-orbita-cuerpo {
background: var(--yh-cielo-base);
box-shadow: inset 0 0 0 1px var(--yh-filete-fuerte), 0 0 0 1px var(--yh-orbita);
}
/* Cuando Yahu está vivo, su órbita se enciende: un anillo naranja con halo. */
.yh-orbita--grande:is([data-estado="pensando"], [data-estado="necesita"], [data-estado="contacto"]) .yh-orbita-traza ellipse {
stroke: var(--yh-senal-grafico);
}
.yh-orbita--grande:is([data-estado="pensando"], [data-estado="necesita"], [data-estado="contacto"]) .yh-orbita-traza {
filter: drop-shadow(0 0 3px var(--yh-halo)) drop-shadow(0 0 12px var(--yh-halo));
}
.yh-orbita--grande .yh-orbita-luz {
display: block;
position: absolute;
inset: 0;
border-radius: inherit;
opacity: var(--yh-orbita-luz, 0);
background: radial-gradient(circle var(--yh-orbita-alcance, 8px) at var(--yh-orbita-lx, 50%) var(--yh-orbita-ly, 50%), var(--yh-senal-grafico), transparent);
}
/* Contacto: el borde del cuerpo queda encendido; al colgar se enfría en 600 ms. */
.yh-orbita--encendida .yh-orbita-cuerpo {
box-shadow: 0 0 0 1px var(--yh-senal-grafico), var(--yh-brillo-senal);
transition-duration: 280ms;
transition-timing-function: var(--yh-curva-llegada);
}
.yh-orbita-onda {
opacity: 0;
pointer-events: none;
box-shadow: inset 0 0 0 1px var(--yh-senal-grafico);
}
.yh-orbita-onda--sale { animation: yh-orbita-onda 900ms var(--yh-curva-llegada); }
@keyframes yh-orbita-onda {
from { opacity: 0.5; transform: scale(1); }
to { opacity: 0; transform: scale(2.2); }
}
/* Yahu: el satélite naranja. Brilla sólo cuando está vivo. */
.yh-orbita-satelite { background: var(--yh-senal-grafico); }
.yh-orbita[data-estado="pensando"] .yh-orbita-satelite,
.yh-orbita[data-estado="contacto"] .yh-orbita-satelite { box-shadow: var(--yh-brillo-senal); }
.yh-orbita-satelite::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
opacity: 0;
box-shadow: var(--yh-brillo-senal);
}
/* Te necesita: estacionado en el perigeo, su brillo respira. */
.yh-orbita--aparcada .yh-orbita-satelite::after { opacity: 1; }
.yh-orbita--aparcada[data-vivo] .yh-orbita-satelite::after {
animation: yh-orbita-respira var(--yh-t-pulso) var(--yh-curva-pulso) infinite alternate;
}
@keyframes yh-orbita-respira {
from { opacity: 1; }
to { opacity: 0.35; }
}
/* En pausa: satélite hueco en texto-3. */
.yh-orbita[data-estado="pausa"] .yh-orbita-satelite {
background: transparent;
box-shadow: inset 0 0 0 1px var(--yh-texto-3);
}
@media (prefers-reduced-motion: reduce) {
.yh-orbita-onda--sale { animation: none; }
}
/* ═══ fin del núcleo de la órbita ═══ */
/* ═══ órbita: firma ═══
La órbita de 20 px junto a «Yahu» en Saira extendida 600 a 18 px.
Fuente: Orbita/preview.html. */
.yh-orbita-firma {
display: inline-flex;
align-items: center;
gap: var(--yh-esp-2);
}
.yh-orbita-nombre {
font-family: var(--font-display);
font-weight: 600;
font-size: 18px;
line-height: 1;
letter-spacing: -0.01em;
font-variation-settings: "wdth" 125;
color: var(--yh-texto);
}
/* ═══ fin de la firma ═══ */
/* Yahu · PildoraEstado. Extraído del design system Horizonte; la guía está en el artifact
(components/PildoraEstado/README.md). Necesita tokens.css y base.css. */
/* ═══ órbita: firma ═══
La órbita de 20 px junto a «Yahu» en Saira extendida 600 a 18 px.
Fuente: Orbita/preview.html. */
.yh-orbita-firma {
display: inline-flex;
align-items: center;
gap: var(--yh-esp-2);
}
.yh-orbita-nombre {
font-family: var(--font-display);
font-weight: 600;
font-size: 18px;
line-height: 1;
letter-spacing: -0.01em;
font-variation-settings: "wdth" 125;
color: var(--yh-texto);
}
/* ═══ fin de la firma ═══ */
/* ═══ píldora: estilos ═══
Una píldora de 32 px con zona táctil de 44 que dice qué hace Yahu: sup-2 con
filete fuerte y luz de canto. El indicador es la órbita de 14 px (el estado de Yahu) o un punto
de 8 px (una llamada o la salud de una conexión). Fuente:
PildoraEstado/preview.html; Navegacion lleva una copia idéntica. */
.yh-pildora-estado {
--yh-pildora-estado-fondo: var(--yh-sup-2);
--yh-pildora-estado-sombra: inset 0 0 0 1px var(--yh-filete-fuerte), var(--yh-sombra-flotante);
position: relative;
display: inline-flex;
align-items: center;
gap: var(--yh-esp-2);
height: 32px;
padding: 0 var(--yh-esp-3);
border: 0;
border-radius: var(--yh-radio-pildora);
background: var(--yh-pildora-estado-fondo);
box-shadow: var(--yh-pildora-estado-sombra);
color: var(--yh-texto-2);
font: inherit;
white-space: nowrap;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: transform var(--yh-t-toque) var(--yh-curva-llegada);
}
/* La zona táctil llega a 44 px sin agrandar la cápsula. */
.yh-pildora-estado::before {
content: "";
position: absolute;
inset: calc((32px - var(--yh-toque-min)) / 2) 0;
}
.yh-pildora-estado:active { transform: scale(0.97); }
.yh-pildora-estado--orbita { padding-left: var(--yh-esp-2); }
.yh-pildora-estado-punto {
flex: none;
width: 8px;
height: 8px;
border-radius: 50%;
background: currentColor;
}
/* Te necesita: señal-texto sobre señal-suave (5.77:1). */
.yh-pildora-estado--necesita {
--yh-pildora-estado-fondo: var(--yh-senal-suave);
--yh-pildora-estado-sombra: none;
color: var(--yh-senal-texto);
}
/* En llamada: el punto vivo respira y el texto va en primario. */
.yh-pildora-estado--llamada { color: var(--yh-texto); }
.yh-pildora-estado--llamada .yh-pildora-estado-punto {
background: var(--yh-senal-grafico);
box-shadow: var(--yh-brillo-senal);
animation: yh-pildora-estado-respira var(--yh-t-pulso) var(--yh-curva-pulso) infinite alternate;
}
@keyframes yh-pildora-estado-respira {
from { opacity: 1; }
to { opacity: 0.35; }
}
/* Sin acceso: el punto y la palabra en crítico, nunca sólo el color. */
.yh-pildora-estado--critico {
--yh-pildora-estado-fondo: var(--yh-critico-suave);
--yh-pildora-estado-sombra: none;
color: var(--yh-critico);
}
/* ═══ fin de la píldora ═══ */
/* Yahu · Boton. Extraído del design system Horizonte; la guía está en el artifact
(components/Boton/README.md). Necesita tokens.css y base.css. */
/* ——— Botón ———
La tipografía la pone la clase `boton` (14/20, 500). Los selectores llevan
`.yh` delante para ganarle a `.boton` sin depender del orden de las hojas. */
.yh .yh-boton {
position: relative;
isolation: isolate;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
height: var(--yh-boton-alto);
min-width: var(--yh-boton-alto);
margin: 0;
padding: 0 16px;
border: 1px solid var(--yh-boton-borde);
border-radius: var(--yh-radio-control);
background: var(--yh-boton-fondo);
color: var(--yh-texto);
text-decoration: none;
white-space: nowrap;
overflow: hidden;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
transition:
transform var(--yh-t-toque) var(--yh-curva-llegada),
background-color var(--yh-t-rapido) var(--yh-curva-llegada),
border-color var(--yh-t-rapido) var(--yh-curva-llegada),
color var(--yh-t-rapido) var(--yh-curva-llegada);
}
/* Con dedo la zona táctil llega a 44 sin agrandar el botón. */
.yh .yh-boton::after { content: ""; position: absolute; inset: calc((var(--yh-boton-alto) - 44px) / 2) 0; }
.yh .yh-boton--con-flecha { padding-right: 12px; }
/* La flecha: → lleva a otra pantalla, ↗ sale de la app. Se desliza 2 px al pasar. */
.yh-boton-flecha {
width: 14px;
height: 14px;
flex: none;
fill: none;
stroke: currentColor;
stroke-width: 1.75;
stroke-linecap: round;
stroke-linejoin: round;
transition: transform var(--yh-t-rapido) var(--yh-curva-llegada);
}
.yh-boton-icono { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
/* Variantes */
.yh .yh-boton--primario { border-color: transparent; background: var(--yh-texto); color: var(--yh-texto-inv); }
/* Yahu: el principal con su punto vivo. Suelta a Yahu («Sí, llama»). */
.yh .yh-boton--yahu { border-color: transparent; background: var(--yh-texto); color: var(--yh-texto-inv); padding-left: 14px; }
.yh .yh-boton--yahu::before {
content: "";
width: 7px;
height: 7px;
flex: none;
border-radius: 50%;
background: var(--yh-naranja);
box-shadow: 0 0 0 0 var(--yh-halo);
animation: yh-boton-late 1.6s var(--yh-curva-pulso) infinite;
}
@keyframes yh-boton-late {
0% { box-shadow: 0 0 0 0 var(--yh-halo); }
70%, 100% { box-shadow: 0 0 0 7px rgba(255, 106, 31, 0); }
}
.yh .yh-boton--peligro { color: var(--yh-critico); }
.yh .yh-boton--fantasma { border-color: transparent; background: transparent; padding: 0 10px; color: var(--yh-texto-2); }
/* Enlace con flecha: sin caja, como «Talk to an engineer →». */
.yh .yh-boton--enlace { height: auto; min-width: 0; padding: 4px 0; border: 0; background: none; border-radius: var(--yh-radio-chip); }
.yh .yh-boton--icono { width: var(--yh-boton-alto); padding: 0; }
.yh .yh-boton--hoja { height: var(--yh-boton-alto-hoja); }
@media (hover: hover) and (pointer: fine) {
.yh .yh-boton--compacto { height: 32px; padding: 0 12px; }
}
/* Pasar el cursor */
@media (hover: hover) {
.yh .yh-boton:hover { border-color: rgba(250, 250, 249, 0.24); background: var(--yh-sup-2); }
.yh .yh-boton--primario:hover, .yh .yh-boton--yahu:hover { border-color: transparent; background: #ded4c1; }
.yh .yh-boton--fantasma:hover { background: var(--yh-sup-1); color: var(--yh-texto); }
.yh .yh-boton--enlace:hover { background: none; color: var(--yh-texto); }
.yh .yh-boton--peligro:hover { background: var(--yh-critico-suave); border-color: rgba(240, 82, 58, 0.4); }
.yh .yh-boton:hover .yh-boton-flecha--ir { transform: translateX(2px); }
.yh .yh-boton:hover .yh-boton-flecha--salir { transform: translate(2px, -2px); }
}
/* Presionado. `yh-boton--presionado` sólo existe para enseñar el estado en esta vista. */
.yh .yh-boton:active:not(:disabled), .yh .yh-boton--presionado { transform: scale(.97); }
/* Foco: el anillo real lo pone bundle.css con :focus-visible; esta clase sólo lo enseña. */
.yh .yh-boton--foco { outline: 2px solid var(--yh-foco); outline-offset: 2px; }
.yh .yh-boton:disabled, .yh .yh-boton[aria-disabled="true"] {
border-color: transparent;
background: var(--yh-sup-1);
color: var(--yh-texto-off);
cursor: not-allowed;
transform: none;
}
.yh .yh-boton:disabled::before { animation: none; background: var(--yh-texto-off); }
/* ——— Mantener para confirmar ———
Para lo irreversible: se llena de izquierda a derecha mientras lo sostienes
(1.2 s); si sueltas antes, se vacía. Al llenarse se confirma y la palomita
se dibuja. Con teclado: sostén Espacio o Enter. */
.yh .yh-boton--mantener { --yh-boton-relleno: var(--yh-critico); --yh-boton-sobre: var(--yh-sobre-critico); justify-content: center; }
.yh .yh-boton--mantener.yh-boton--de-yahu { --yh-boton-relleno: var(--yh-naranja); --yh-boton-sobre: var(--yh-sobre-naranja); }
.yh-boton-carga {
position: absolute;
inset: 0;
z-index: -1;
background: var(--yh-boton-relleno);
transform-origin: left center;
transform: scaleX(0);
transition: transform 220ms var(--yh-curva-salida);
}
.yh .yh-boton--mantener[data-estado="sosteniendo"] .yh-boton-carga { transform: scaleX(1); transition: transform 1200ms linear; }
.yh .yh-boton--mantener[data-estado="listo"] .yh-boton-carga { transform: scaleX(1); transition: none; }
.yh .yh-boton--mantener[data-estado="listo"] { color: var(--yh-boton-sobre); border-color: transparent; }
.yh-boton-palomita { display: none; }
.yh .yh-boton--mantener[data-estado="listo"] .yh-boton-palomita { display: block; stroke-dasharray: 20; stroke-dashoffset: 20; animation: yh-boton-traza 320ms var(--yh-curva-llegada) forwards; }
@keyframes yh-boton-traza { to { stroke-dashoffset: 0; } }
/* El texto que queda sobre el relleno se recorta en su color, como la cuenta de Confirmación. */
.yh-boton-texto-sobre {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--yh-boton-sobre);
clip-path: inset(0 100% 0 0);
transition: clip-path 220ms var(--yh-curva-salida);
pointer-events: none;
}
.yh .yh-boton--mantener[data-estado="sosteniendo"] .yh-boton-texto-sobre { clip-path: inset(0 0 0 0); transition: clip-path 1200ms linear; }
.yh .yh-boton--mantener[data-estado="listo"] .yh-boton-texto-sobre { display: none; }
@media (pointer: coarse) {
.yh .yh-boton--compacto { height: var(--yh-boton-alto); }
}
@media (prefers-reduced-motion: reduce) {
.yh .yh-boton:active:not(:disabled), .yh .yh-boton--presionado { transform: none; opacity: .88; }
.yh .yh-boton--yahu::before { animation: none; }
}
/* Yahu · CampoTexto. Extraído del design system Horizonte; la guía está en el artifact
(components/CampoTexto/README.md). Necesita tokens.css y base.css. */
/* ——— Campo de texto ———
Etiqueta con `apoyo` en 600, valor con `chat` (17 px: Safari no hace zoom al enfocar).
Los selectores llevan `.yh` delante para ganarle a las clases de texto. */
.yh-campo-texto { display: grid; gap: var(--yh-esp-2); min-width: 0; }
.yh .yh-campo-texto-etiqueta { font-weight: 600; color: var(--yh-texto-2); }
.yh .yh-campo-texto-control {
display: block;
width: 100%;
height: var(--yh-campo-alto);
margin: 0;
padding: 0 var(--yh-esp-4);
border: 1px solid var(--yh-borde-control);
border-radius: var(--yh-radio-campo);
background: var(--yh-campo);
color: var(--yh-texto);
font-variant-numeric: tabular-nums;
appearance: none;
-webkit-appearance: none;
transition: border-color var(--yh-t-rapido) var(--yh-curva-llegada);
}
.yh-campo-texto-control::placeholder { color: var(--yh-texto-3); opacity: 1; }
/* Teléfonos y códigos: Space Mono a 17 px, sin pasar a mayúsculas lo que escribes */
.yh .yh-campo-texto-mono { font-family: var(--font-mono); }
.yh .yh-campo-texto-control[aria-invalid="true"] { border-color: var(--yh-critico); }
.yh .yh-campo-texto-ayuda { margin: 0; color: var(--yh-texto-2); }
.yh .yh-campo-texto-error {
display: flex;
align-items: flex-start;
gap: var(--yh-esp-2);
margin: 0;
color: var(--yh-critico);
}
.yh-campo-texto-icono {
width: 16px;
height: 16px;
margin-block-start: 2px; /* centra 16 px en la línea de 20 */
flex: none;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.yh-campo-texto-icono .yh-campo-texto-punto { fill: currentColor; stroke: none; }
/* La mono dentro de una frase va a 0.83 em */
.yh-campo-texto-dato { font-family: var(--font-mono); font-size: .83em; }
/* Foco: el anillo real lo pone bundle.css con :focus-visible; esta clase sólo lo enseña. */
.yh .yh-campo-texto-foco { outline: 2px solid var(--yh-foco); outline-offset: 2px; }
/* Yahu · EntradaChat. Extraído del design system Horizonte; la guía está en el artifact
(components/EntradaChat/README.md). Necesita tokens.css y base.css. */
/* ——— Entrada de chat ——— */
.yh-entrada-chat {
display: flex;
align-items: flex-end;
gap: var(--yh-esp-2);
margin: 0;
}
/* El texto usa la clase `chat` (17/26): 26 + 2 × 10 de padding + 2 de borde = 48 */
.yh .yh-entrada-chat-campo {
display: block;
flex: 1 1 auto;
min-width: 0;
min-height: var(--yh-campo-alto);
max-height: calc(6 * 26px + 2 * 10px + 2px); /* 6 líneas; después, scroll */
margin: 0;
padding: 10px var(--yh-esp-5);
border: 1px solid var(--yh-borde-control);
border-radius: var(--yh-radio-control);
background: var(--yh-campo);
color: var(--yh-texto);
font-variant-numeric: tabular-nums;
resize: none;
overflow-y: hidden;
scrollbar-width: thin;
scrollbar-color: var(--yh-borde-control) transparent;
}
.yh-entrada-chat-campo::placeholder { color: var(--yh-texto-3); opacity: 1; }
/* Cuando pasa de una línea deja de ser cápsula */
.yh .yh-entrada-chat-campo-varias { border-radius: var(--yh-radio-ficha); }
.yh-entrada-chat-enviar {
display: grid;
place-items: center;
flex: none;
width: var(--yh-toque-min);
height: var(--yh-toque-min);
/* centrado contra la primera línea del campo de 48 */
margin: 0 0 calc((var(--yh-campo-alto) - var(--yh-toque-min)) / 2);
padding: 0;
border: 0;
border-radius: var(--yh-radio-control);
background: var(--yh-texto);
color: var(--yh-texto-inv);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
transition:
background-color var(--yh-t-rapido) var(--yh-curva-llegada),
color var(--yh-t-rapido) var(--yh-curva-llegada),
transform var(--yh-t-toque) var(--yh-curva-llegada);
}
.yh-entrada-chat-enviar:active:not(:disabled) { transform: scale(.97); }
/* Vacío: no hay nada que enviar */
.yh-entrada-chat-enviar:disabled { background: var(--yh-sup-3); color: var(--yh-texto-off); cursor: default; }
.yh-entrada-chat-icono {
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.yh-entrada-chat-icono-detener { fill: currentColor; stroke: none; }
.yh-entrada-chat-enviar[data-modo="detener"] .yh-entrada-chat-icono-enviar,
.yh-entrada-chat-enviar:not([data-modo="detener"]) .yh-entrada-chat-icono-detener { display: none; }
@media (prefers-reduced-motion: reduce) {
.yh-entrada-chat-enviar:active:not(:disabled) { transform: none; opacity: .88; }
}
/* Yahu · TurnoChat. Extraído del design system Horizonte; la guía está en el artifact
(components/TurnoChat/README.md). Necesita tokens.css y base.css. */
/* ——— Turno de chat ——— */
.yh-turno-chat-hilo {
display: flex;
flex-direction: column;
gap: var(--yh-esp-5); /* 20 px entre turnos */
max-width: var(--yh-columna-ancho);
margin: 0;
}
.yh-turno-chat-turno {
display: flex;
flex-direction: column;
gap: var(--yh-esp-1); /* 4 px dentro de un turno */
min-width: 0;
margin: 0;
animation: yh-turno-chat-llega var(--yh-t-base) var(--yh-curva-llegada) both;
}
/* Todo nace de su origen: Yahu desde su rótulo, tú desde el campo de abajo a la derecha */
.yh-turno-chat-yahu { align-items: flex-start; transform-origin: 0 0; }
.yh-turno-chat-tuyo { align-items: flex-end; transform-origin: 100% 100%; }
.yh .yh-turno-chat-rotulo,
.yh .yh-turno-chat-meta { margin: 0; color: var(--yh-texto-3); }
.yh .yh-turno-chat-texto { margin: 0; max-width: 34em; color: var(--yh-texto); text-wrap: pretty; }
.yh .yh-turno-chat-bitacora { margin: 0; padding: 0; list-style: none; color: var(--yh-texto-2); }
.yh-turno-chat-grupo {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: var(--yh-esp-1);
width: 100%;
}
.yh .yh-turno-chat-burbuja {
max-width: 80%;
margin: 0;
padding: 10px 14px; /* medida exacta del sistema, fuera de la escala de 4 */
border-radius: var(--yh-radio-ficha);
background: var(--yh-burbuja);
color: var(--yh-burbuja-texto);
overflow-wrap: anywhere;
}
/* La última burbuja del grupo apunta a su hora */
.yh .yh-turno-chat-burbuja:last-child { border-bottom-right-radius: var(--yh-radio-chip); }
/* No se envió: crítico, con ícono y con una salida */
.yh .yh-turno-chat-fallo {
display: flex;
align-items: center;
gap: var(--yh-esp-2);
color: var(--yh-critico);
}
.yh-turno-chat-icono {
width: 16px;
height: 16px;
flex: none;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.yh-turno-chat-icono .yh-turno-chat-punto { fill: currentColor; stroke: none; }
.yh-turno-chat-reintentar {
position: relative;
margin: 0;
padding: 0;
border: 0;
background: none;
color: inherit;
font: inherit;
font-variation-settings: inherit;
text-transform: inherit;
text-decoration: underline;
text-underline-offset: 2px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
/* Zona táctil de 44 px alrededor de una palabra de 16 px de alto */
.yh-turno-chat-reintentar::before { content: ""; position: absolute; inset: -14px -8px; }
/* Yahu escribiendo: cursor de bloque naranja de 0.5 × 1.1 em que parpadea cada segundo */
.yh-turno-chat-cursor {
display: inline-block;
width: .5em;
height: 1.1em;
margin-inline-start: .1em;
vertical-align: -.2em;
background: var(--yh-senal-texto);
animation: yh-turno-chat-parpadeo 1s steps(1) infinite;
}
@keyframes yh-turno-chat-llega { from { opacity: 0; transform: scale(.985); } }
@keyframes yh-turno-chat-funde { from { opacity: 0; } }
@keyframes yh-turno-chat-parpadeo { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
.yh-turno-chat-turno { animation-name: yh-turno-chat-funde; }
.yh-turno-chat-cursor { animation: none; }
}
/* Yahu · Confirmacion. Extraído del design system Horizonte; la guía está en el artifact
(components/Confirmacion/README.md). Necesita tokens.css y base.css. */
/* entradas: --yh-confirmacion-tope, --yh-confirmacion-curva-hoja — las pone el script de la hoja al abrirla. */
/* ——— Confirmación ———
La tipografía la ponen las clases de estilo (titulo, cuerpo, apoyo, boton,
mono-s, mono-m). Los selectores llevan `.yh` delante para ganarles sin
depender del orden de las hojas. */
.yh .yh-confirmacion {
/* Medidas exactas del sistema (§8), fuera de la escala de 4 a propósito */
--yh-confirmacion-radio: var(--yh-radio-ficha);
--yh-confirmacion-relleno: var(--yh-esp-4);
--yh-confirmacion-recibo-relleno: 14px;
--yh-confirmacion-clave: 72px;
/* Radio concéntrico: max(6 px, radio del contenedor − su padding). 6 en la tarjeta, 12 en la hoja. */
--yh-confirmacion-radio-dentro: max(var(--yh-radio-chip), calc(var(--yh-confirmacion-radio) - var(--yh-confirmacion-relleno)));
container: yh-confirmacion / inline-size;
position: relative;
width: 100%;
max-width: 560px;
margin: 0;
padding: var(--yh-confirmacion-relleno);
border: 1px solid transparent;
border-radius: var(--yh-confirmacion-radio);
background: var(--yh-sup-1);
color: var(--yh-texto);
}
/* La ficha sube del fondo con un filete */
.yh-confirmacion { border-color: var(--yh-filete); }
/* Cabecera: la bitácora de Yahu en mono, con la órbita estacionada */
.yh .yh-confirmacion-cabecera {
display: flex;
align-items: center;
gap: var(--yh-esp-2);
min-width: 0;
margin: 0;
color: var(--yh-texto-3);
}
.yh .yh-confirmacion-pide { color: var(--yh-senal-texto); }
/* Ya resuelta: deja de pedir y queda el folio */
.yh .yh-confirmacion:is([data-estado="aprobado"], [data-estado="rechazado"]) :is(.yh-confirmacion-pide, .yh-confirmacion-vence) { display: none; }
/* La órbita de 12 px, el tamaño de Orbita para una línea mono-s, con su geometría:
tú en el foco y Yahu estacionado en el perigeo */
.yh .yh-confirmacion-orbita { position: relative; flex: none; width: 12px; height: 12px; }
.yh .yh-confirmacion-orbita svg { position: absolute; inset: 0; overflow: visible; }
.yh .yh-confirmacion-orbita ellipse { fill: none; stroke: var(--yh-orbita); stroke-width: 1; vector-effect: non-scaling-stroke; }
.yh .yh-confirmacion-orbita-cuerpo,
.yh .yh-confirmacion-orbita-satelite { position: absolute; border-radius: 50%; }
.yh .yh-confirmacion-orbita-cuerpo { left: 2.7px; top: 6.36px; width: 1.5px; height: 1.5px; background: var(--yh-texto-3); }
.yh .yh-confirmacion-orbita-satelite { left: -.12px; top: 6.5px; width: 3px; height: 3px; background: var(--yh-senal-grafico); }
.yh .yh-confirmacion-orbita-satelite::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: var(--yh-brillo-senal);
animation: yh-confirmacion-respira var(--yh-t-pulso) var(--yh-curva-pulso) infinite alternate;
}
/* Contando: ya tiene tu sí, la luz se queda fija. Resuelta: se apaga. */
.yh .yh-confirmacion[data-estado="contando"] .yh-confirmacion-orbita-satelite::after { animation: none; }
.yh .yh-confirmacion:is([data-estado="aprobado"], [data-estado="rechazado"]) .yh-confirmacion-orbita-satelite::after { animation: none; box-shadow: none; }
@keyframes yh-confirmacion-respira { to { opacity: .35; } }
/* Título: verbo y objeto exactos. 24/28 a 125 % cuando la tarjeta es ancha. */
.yh .yh-confirmacion-titulo { margin: var(--yh-esp-2) 0 0; color: var(--yh-texto); }
.yh .yh-confirmacion-titulo:focus { outline: none; }
.yh .yh-confirmacion-titulo:focus-visible { outline: 2px solid var(--yh-foco); outline-offset: 2px; }
@container yh-confirmacion (min-width: 440px) {
.yh .yh-confirmacion-titulo { font-size: 24px; line-height: 28px; }
}
/* El recibo: al pie de la letra, hundido, con la columna de claves en mono */
.yh .yh-confirmacion-recibo {
display: grid;
grid-template-columns: var(--yh-confirmacion-clave) minmax(0, 1fr);
align-items: baseline;
gap: var(--yh-esp-2) var(--yh-esp-3);
margin: var(--yh-esp-3) 0 0;
padding: var(--yh-confirmacion-recibo-relleno);
border-radius: var(--yh-confirmacion-radio-dentro);
background: var(--yh-hundido);
}
.yh .yh-confirmacion-recibo dt { color: var(--yh-texto-3); }
.yh .yh-confirmacion-recibo dd { min-width: 0; margin: 0; color: var(--yh-texto); overflow-wrap: break-word; }
/* Los cambios, como diff: «−» en texto-3 tachado, «+» en texto con el signo en señal */
.yh .yh-confirmacion-diff { display: grid; gap: var(--yh-esp-1); }
.yh .yh-confirmacion-diff > span { display: flex; gap: var(--yh-esp-2); }
.yh .yh-confirmacion-signo { flex: none; }
.yh .yh-confirmacion-diff-menos { color: var(--yh-texto-3); }
.yh .yh-confirmacion-diff-menos del { text-decoration: line-through 1px currentColor; }
.yh .yh-confirmacion-diff-mas ins { color: var(--yh-texto); text-decoration: none; }
.yh .yh-confirmacion-diff-mas .yh-confirmacion-signo { color: var(--yh-senal-texto); }
/* Debajo del recibo: el porqué con su fuente, la regla que lo detuvo y la consecuencia */
.yh .yh-confirmacion-porque { margin: var(--yh-esp-3) 0 0; color: var(--yh-texto-2); text-wrap: pretty; }
.yh .yh-confirmacion-fuente { margin: var(--yh-esp-1) 0 0; color: var(--yh-texto-3); }
.yh .yh-confirmacion-regla {
width: fit-content;
max-width: 100%;
margin: var(--yh-esp-3) 0 0;
padding: var(--yh-esp-1) var(--yh-esp-2);
border-radius: var(--yh-radio-chip);
background: var(--yh-sup-3);
color: var(--yh-texto-2);
text-wrap: balance;
}
.yh .yh-confirmacion-consecuencia {
display: flex;
align-items: flex-start;
gap: var(--yh-esp-2);
margin: var(--yh-esp-3) 0 0;
color: var(--yh-texto-2);
}
.yh .yh-confirmacion-consecuencia .yh-confirmacion-icono { color: var(--yh-texto-3); }
/* Precaución: ámbar sobre su fondo suave, siempre con ícono */
.yh .yh-confirmacion-consecuencia--precaucion {
padding: var(--yh-esp-2) var(--yh-esp-3);
border-radius: var(--yh-confirmacion-radio-dentro);
background: var(--yh-precaucion-suave);
color: var(--yh-precaucion);
}
.yh .yh-confirmacion-consecuencia--precaucion .yh-confirmacion-icono { color: currentColor; }
.yh .yh-confirmacion:is([data-estado="aprobado"], [data-estado="rechazado"]) .yh-confirmacion-consecuencia { display: none; }
.yh .yh-confirmacion-icono {
width: 20px;
height: 20px;
flex: none;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.yh .yh-confirmacion-icono--chico { width: 16px; height: 16px; }
.yh .yh-confirmacion-icono .yh-confirmacion-punto { fill: currentColor; stroke: none; }
/* ——— El pie: botones, cuenta para deshacer, bitácora o el porqué del rechazo ——— */
.yh .yh-confirmacion-pie { margin-top: var(--yh-esp-4); }
.yh .yh-confirmacion-acciones { display: flex; gap: var(--yh-esp-3); }
.yh .yh-confirmacion-boton {
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
gap: var(--yh-esp-2);
min-height: var(--yh-boton-alto-hoja);
min-width: var(--yh-toque-min);
margin: 0;
padding: 0 var(--yh-esp-5);
border: 1px solid transparent;
border-radius: var(--yh-radio-control);
background: transparent;
color: var(--yh-texto);
white-space: nowrap;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
transition:
transform var(--yh-t-toque) var(--yh-curva-llegada),
background-color var(--yh-t-rapido) var(--yh-curva-llegada);
}
.yh .yh-confirmacion-boton--secundario { border-color: var(--yh-boton-borde); background: var(--yh-boton-fondo); }
/* El verbo que suelta a Yahu: el principal blanco con su punto vivo, y toma el resto del ancho */
.yh .yh-confirmacion-boton--senal {
flex: 1 1 auto;
background: var(--yh-texto);
color: var(--yh-texto-inv);
}
.yh .yh-confirmacion-boton--senal::before {
content: "";
width: 7px;
height: 7px;
flex: none;
border-radius: 50%;
background: var(--yh-naranja);
animation: yh-confirmacion-late 1.6s var(--yh-curva-pulso) infinite;
}
@keyframes yh-confirmacion-late {
0% { box-shadow: 0 0 0 0 var(--yh-halo); }
70%, 100% { box-shadow: 0 0 0 7px rgba(255, 106, 31, 0); }
}
.yh .yh-confirmacion-boton:active { transform: scale(.97); }
.yh .yh-confirmacion-boton--secundario:active { background: var(--yh-sup-3); }
@media (hover: hover) {
.yh .yh-confirmacion-boton--secundario:hover { border-color: rgba(250, 250, 249, 0.24); background: var(--yh-sup-2); }
.yh .yh-confirmacion-boton--senal:hover { background: #ded4c1; }
}
/* La barra que se vacía en 5 s. Dos capas con la misma geometría: la de abajo en
texto sobre la superficie y la de arriba, recortada a lo que queda, en tinta sobre
naranja; así ningún tramo del texto pierde contraste. */
.yh .yh-confirmacion-cuenta {
--yh-confirmacion-resto: 1;
position: relative;
flex: 1 1 auto;
min-width: 0;
height: var(--yh-boton-alto-hoja);
border-radius: var(--yh-radio-control);
background: var(--yh-boton-fondo);
box-shadow: inset 0 0 0 1px var(--yh-boton-borde);
}
.yh .yh-confirmacion-cuenta-capa {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
gap: var(--yh-esp-1);
padding: 0 var(--yh-esp-1) 0 var(--yh-esp-4);
border-radius: inherit;
color: var(--yh-texto);
white-space: nowrap;
}
.yh .yh-confirmacion-cuenta-capa--relleno {
background: var(--yh-naranja);
color: var(--yh-sobre-naranja);
pointer-events: none;
clip-path: inset(0 calc((1 - var(--yh-confirmacion-resto)) * 100%) 0 0 round var(--yh-radio-control));
transition: clip-path 1s linear;
}
.yh .yh-confirmacion-deshacer {
display: inline-flex;
align-items: center;
height: var(--yh-toque-min);
margin: 0;
padding: 0 var(--yh-esp-3);
border: 0;
border-radius: var(--yh-radio-control);
background: none;
color: inherit;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
/* El anillo de foco de «Deshacer» se dibuja también en la capa naranja */
.yh .yh-confirmacion-cuenta:has(.yh-confirmacion-deshacer:focus-visible) .yh-confirmacion-cuenta-capa--relleno .yh-confirmacion-deshacer {
outline: 2px solid var(--yh-foco);
outline-offset: 2px;
}
/* Bitácora al resolverse: «› aprobado por ti · 8:54» con la palomita en SVG */
.yh .yh-confirmacion-bitacoras { display: grid; gap: var(--yh-esp-1); }
.yh .yh-confirmacion-bitacora {
display: flex;
align-items: center;
gap: var(--yh-esp-2);
margin: 0;
color: var(--yh-texto-2);
}
.yh .yh-confirmacion-bitacora > span:last-child { text-wrap: pretty; }
.yh .yh-confirmacion-palomita { color: var(--yh-positivo); }
.yh .yh-confirmacion-bitacora .yh-confirmacion-icono:not(.yh-confirmacion-palomita) { color: var(--yh-texto-3); }
/* Rechazar pregunta por qué */
.yh .yh-confirmacion-motivos { display: grid; gap: var(--yh-esp-3); margin: 0; }
.yh .yh-confirmacion-pregunta { margin: 0; font-weight: 600; }
.yh .yh-confirmacion-opciones { display: grid; gap: var(--yh-esp-2); }
.yh .yh-confirmacion-opciones .yh-confirmacion-boton { min-height: var(--yh-boton-alto); padding: 0 var(--yh-esp-4); }
@container yh-confirmacion (min-width: 420px) {
.yh .yh-confirmacion-opciones { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
}
.yh .yh-confirmacion-ayuda { margin: 0; color: var(--yh-texto-2); text-wrap: pretty; }
.yh .yh-confirmacion-fantasma {
justify-self: start;
display: inline-flex;
align-items: center;
gap: var(--yh-esp-2);
min-height: var(--yh-toque-min);
margin: 0 0 0 calc(var(--yh-esp-3) * -1);
padding: 0 var(--yh-esp-3);
border: 0;
border-radius: var(--yh-radio-control);
background: none;
color: var(--yh-texto);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background-color var(--yh-t-rapido) var(--yh-curva-llegada);
}
.yh .yh-confirmacion-fantasma:active { background: var(--yh-sup-3); }
@media (hover: hover) and (pointer: fine) {
.yh .yh-confirmacion-fantasma:hover { background: var(--yh-sup-3); }
}
/* Todo nace de su origen: el pie nuevo crece desde el botón que lo cambió */
.yh .yh-confirmacion-entra {
transform-origin: 50% 100%;
animation: yh-confirmacion-entra var(--yh-t-base) var(--yh-curva-llegada) both;
}
@keyframes yh-confirmacion-entra { from { opacity: 0; transform: scale(.985); } }
@keyframes yh-confirmacion-funde { from { opacity: 0; } }
.yh .yh-confirmacion-oculto {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* ——— La hoja: