/* App WEB de voz · NEGRO REAL + orbe AURORA del portfolio + aurora ambiente. * Subset autocontenido del orbe de web/sx.css (mismos tokens --orb-* y estados * data-state) para mantener la app aislada y no depender del CSS de la landing. * Acento de la APP autenticada = ESMERALDA (#45D98C): plan, botón activo, cuota. */ :root { /* Orbe aurora (canónico · idéntico a sx.css). */ --orb-cyan: #5CDBFC; --orb-violet: #8275F7; --orb-pink: #F76EC9; --orb-peach: #FCC766; --orb-core: #EAF0FF; --dur-orb: 7000ms; --ease-in-out: cubic-bezier(.4, 0, .2, 1); /* Acento de la app autenticada. */ --emerald: #45D98C; --emerald-dim: rgba(69, 217, 140, 0.16); --ink: #EAF0FF; --muted: #B6C0DC; --faint: #7A86A8; } * { box-sizing: border-box; } html, body { margin: 0; min-height: 100%; background: #000; /* negro real */ color: var(--ink); font-family: "Inter", system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; } body { position: relative; overflow-x: hidden; } /* ── Aurora ambiente (fondo vivo, muy sutil) ── */ .aurora { position: fixed; inset: -20% -10% auto -10%; height: 70vh; z-index: 0; pointer-events: none; filter: blur(80px); opacity: 0.5; background: radial-gradient(40% 50% at 22% 30%, rgba(92,219,252,0.30) 0%, transparent 70%), radial-gradient(38% 46% at 78% 20%, rgba(130,117,247,0.30) 0%, transparent 70%), radial-gradient(34% 40% at 55% 60%, rgba(69,217,140,0.18) 0%, transparent 70%); animation: aurora-drift 22s var(--ease-in-out) infinite alternate; } @keyframes aurora-drift { from { transform: translateY(-4%) scale(1); } to { transform: translateY(4%) scale(1.06); } } /* ── Topbar ── */ .topbar { position: relative; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; max-width: 760px; margin: 0 auto; } .brand { font-weight: 700; letter-spacing: .01em; font-size: 18px; } .acct { display: flex; align-items: center; gap: 12px; } .who { font-size: 13px; color: var(--muted); max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .plan-badge { font-size: 12px; font-weight: 600; letter-spacing: .03em; color: var(--emerald); background: var(--emerald-dim); border: 1px solid rgba(69,217,140,0.34); padding: 4px 11px; border-radius: 999px; } /* ── Layout principal ── */ .wrap { position: relative; z-index: 10; min-height: calc(100vh - 56px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; padding: 24px 20px 56px; } /* ── ORBE (subset de sx.css) ── */ .orb-wrap { position: relative; width: 220px; height: 220px; display: grid; place-items: center; isolation: isolate; } .orb { --orb-warm: 0.10; width: 100%; aspect-ratio: 1; border-radius: 50%; position: relative; isolation: isolate; /* ORBE AURORA CANÓNICO · réplica fiel del SXOrb de la app (idéntico a sx.css). meshColors SXOrb: cyan arriba (12h) · violet der (3h) · magenta abajo (6h) · peach izq (9h) · núcleo luminoso casi blanco al centro. Aurora BALANCEADA, sin "eclipse" (centro oscuro). Tokens --orb-* = hex EXACTOS de SaelyxUI/SXColor.swift. */ background: radial-gradient(22% 22% at 36% 30%, rgba(252,199,102, calc(0.42 + var(--orb-warm) * 0.45)) 0%, rgba(255,255,255,0.24) 40%, rgba(255,255,255,0) 64%), radial-gradient(66% 66% at 50% 2%, var(--orb-cyan) 0%, rgba(92,219,252,0) 60%), radial-gradient(60% 60% at 14% 16%, var(--orb-violet) 0%, rgba(130,117,247,0) 58%), radial-gradient(58% 58% at 98% 46%, var(--orb-violet) 0%, rgba(130,117,247,0) 60%), radial-gradient(64% 64% at 2% 52%, var(--orb-peach) 0%, rgba(252,199,102,0) 60%), radial-gradient(70% 70% at 46% 100%, var(--orb-pink) 0%, rgba(247,110,201,0) 62%), radial-gradient(58% 58% at 12% 96%, var(--orb-pink) 0%, rgba(247,110,201,0) 60%), radial-gradient(56% 56% at 96% 92%, var(--orb-cyan) 0%, rgba(92,219,252,0) 58%), radial-gradient(58% 56% at 48% 44%, color-mix(in srgb, var(--orb-core), var(--orb-peach) calc(var(--orb-warm) * 45%)) 0%, color-mix(in srgb, var(--orb-core), transparent 22%) 30%, rgba(234,240,255,0) 66%), radial-gradient(120% 120% at 50% 46%, color-mix(in srgb, var(--orb-core), var(--orb-cyan) 40%) 0%, color-mix(in srgb, var(--orb-violet), var(--orb-cyan) 30%) 100%); filter: saturate(1.04); box-shadow: inset 0 -22% 48px -28px rgba(40,28,72,0.30), inset 0 24% 50px -28px rgba(255,255,255,0.34), inset 0 0 0 2px rgba(234,240,255,0.50), inset 0 0 26px -2px rgba(234,240,255,0.34), 0 0 92px -14px rgba(130,117,247,0.40); animation: orb-breathe calc(var(--dur-orb) * 1.1) var(--ease-in-out) infinite; } .orb-halo { position: absolute; inset: -20%; border-radius: 50%; z-index: -1; background: conic-gradient(from 215deg at 50% 50%, rgba(92,219,252,0.50), rgba(130,117,247,0.50), rgba(247,110,201,0.46), rgba(252,199,102,0.42), rgba(92,219,252,0.50)); filter: blur(54px); opacity: 0.72; animation: orb-breathe calc(var(--dur-orb) * 1.3) var(--ease-in-out) infinite; } @keyframes orb-breathe { 0%,100% { transform: scale(1); opacity: .94; } 50% { transform: scale(1.03); opacity: 1; } } /* Estados (turn-taking) · idénticos a sx.css */ .orb[data-state="idle"] { --orb-warm: 0.10; filter: saturate(1.0) brightness(1.0); } .orb[data-state="listening"] { --orb-warm: 0.18; filter: saturate(1.04) brightness(1.06); animation-duration: calc(var(--dur-orb) * .45); } .orb[data-state="thinking"] { --orb-warm: 0.04; filter: saturate(.96) brightness(.99); animation-duration: calc(var(--dur-orb) * .7); } .orb[data-state="speaking"] { --orb-warm: 0.30; filter: saturate(1.08) brightness(1.08); animation-duration: calc(var(--dur-orb) * .5); box-shadow: inset 0 -22% 48px -28px rgba(40,28,72,0.28), inset 0 24% 50px -28px rgba(255,255,255,0.38), inset 0 0 0 2px rgba(234,240,255,0.54), inset 0 0 26px -2px rgba(234,240,255,0.38), 0 0 122px -10px rgba(247,110,201,0.48); } /* ── Controles ── */ .status { min-height: 22px; font-size: 15px; color: var(--muted); text-align: center; margin: 0; } .talk { appearance: none; cursor: pointer; border: 1px solid rgba(69,217,140,0.42); background: var(--emerald-dim); color: var(--ink); font: 600 16px/1 "Inter", system-ui, sans-serif; letter-spacing: .02em; padding: 14px 38px; border-radius: 999px; transition: background .2s, border-color .2s, transform .1s, box-shadow .2s; } .talk:hover:not(:disabled) { background: rgba(69,217,140,0.24); border-color: rgba(69,217,140,0.6); box-shadow: 0 0 28px -8px rgba(69,217,140,0.5); } .talk:active:not(:disabled) { transform: scale(.97); } .talk:disabled { opacity: .45; cursor: not-allowed; } .talk.on { background: rgba(247,110,201,0.18); border-color: rgba(247,110,201,0.5); box-shadow: 0 0 28px -8px rgba(247,110,201,0.5); } /* ── Cuota / plan ── */ .quota { display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 20px; } .quota-text { font-size: 13px; color: var(--faint); } .quota-bar { width: min(280px, 70vw); height: 6px; border-radius: 999px; background: rgba(234,240,255,0.08); overflow: hidden; } .quota-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--emerald), #6FE3A6); border-radius: 999px; transition: width .4s var(--ease-in-out); } /* ── Debug log (plegado por defecto) ── */ .debug { width: min(560px, 92vw); margin-top: 4px; } .debug summary { cursor: pointer; font-size: 12px; color: var(--faint); letter-spacing: .04em; text-transform: uppercase; } #log { max-height: 160px; overflow: auto; margin-top: 10px; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: #6E7894; border-top: 1px solid rgba(234,240,255,0.08); padding-top: 10px; } #log div { white-space: pre-wrap; word-break: break-word; } @media (prefers-reduced-motion: reduce) { .orb, .orb-halo, .aurora { animation: none; } }