:root{--surface: #141218;--surface-container: #211f26;--surface-container-high: #2b2930;--on-surface: #e6e0e9;--on-surface-variant: #cac4d0;--primary: #d0bcff;--on-primary: #381e72;--primary-container: #4f378b;--on-primary-container: #eaddff;--secondary-container: #4a4458;--on-secondary-container: #e8def8;--error: #f2b8b5;--on-error: #601410;--shape-bubble: 22px}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--surface);color:var(--on-surface);font-family:Google Sans,Roboto,system-ui,sans-serif}m-symbol{font-family:Material Symbols Rounded;font-weight:400;font-style:normal;line-height:1;font-size:40px;white-space:nowrap;direction:ltr;-webkit-font-feature-settings:"liga";font-variation-settings:"FILL" 1,"wght" 500,"GRAD" 0,"opsz" 40}voice-agent{display:flex;flex-direction:column;align-items:center;height:100dvh;max-width:720px;margin:0 auto;padding:16px 16px calc(24px + env(safe-area-inset-bottom));gap:16px}chat-log{flex:1;width:100%;display:flex;flex-direction:column;gap:10px;overflow-y:auto;padding:12px 4px;scroll-behavior:smooth}chat-log:empty:before{content:"Tu conversaci\f3n con el agente aparece ac\e1.";margin:auto;color:var(--on-surface-variant);font-size:15px;text-align:center;max-width:24ch}chat-turn{display:block;max-width:82%;padding:12px 16px;border-radius:var(--shape-bubble);font-size:16px;line-height:1.4;white-space:pre-wrap;word-wrap:break-word;animation:rise .22s cubic-bezier(.2,0,0,1)}chat-turn[who=user]{align-self:flex-end;background:var(--primary-container);color:var(--on-primary-container);border-bottom-right-radius:6px}chat-turn[who=agent]{align-self:flex-start;background:var(--surface-container);color:var(--on-surface);border-bottom-left-radius:6px}mic-button{display:grid;place-items:center;width:96px;height:96px;border-radius:32px;background:var(--primary);color:var(--on-primary);box-shadow:0 6px 18px #00000073;cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;touch-action:none;transition:transform .18s cubic-bezier(.2,0,0,1),background .18s,border-radius .18s}mic-button:active{transform:scale(.94)}voice-agent[state=recording] mic-button{background:var(--error);color:var(--on-error);border-radius:50%}voice-agent[state=thinking] mic-button,voice-agent[state=speaking] mic-button{background:var(--secondary-container);color:var(--on-secondary-container)}voice-agent[state=error] mic-button{background:var(--error);color:var(--on-error)}agent-hint{display:block;min-height:20px;color:var(--on-surface-variant);font-size:14px;text-align:center}voice-pick{display:flex;gap:4px;padding:4px;margin-top:4px;background:var(--surface-container);border-radius:999px}voice-opt{padding:8px 18px;border-radius:999px;font-size:14px;color:var(--on-surface-variant);cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;transition:background .18s cubic-bezier(.2,0,0,1),color .18s}voice-opt[selected=yes]{background:var(--primary);color:var(--on-primary);font-weight:600}duplex-toggle{display:flex;align-items:center;gap:12px;width:100%;max-width:320px;padding:10px 8px 10px 18px;background:var(--surface-container);border-radius:999px;color:var(--on-surface-variant);font-size:14px;cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;transition:background .18s cubic-bezier(.2,0,0,1),color .18s}duplex-toggle[on=yes]{background:var(--secondary-container);color:var(--on-secondary-container);font-weight:600}duplex-switch{margin-left:auto;flex:none;position:relative;width:44px;height:26px;border-radius:999px;background:var(--surface-container-high);transition:background .18s cubic-bezier(.2,0,0,1)}duplex-toggle[on=yes] duplex-switch{background:var(--primary)}duplex-knob{position:absolute;top:4px;left:4px;width:18px;height:18px;border-radius:50%;background:var(--on-surface-variant);transition:left .18s cubic-bezier(.2,0,0,1),background .18s}duplex-toggle[on=yes] duplex-knob{left:22px;background:var(--on-primary)}voice-agent[duplex=on] mic-button{opacity:.4;pointer-events:none}voice-agent[duplex=on] voice-pick{opacity:.4;pointer-events:none}@keyframes rise{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:no-preference){voice-agent[state=recording] mic-button{animation:pulse 1.1s ease-in-out infinite}voice-agent[state=speaking] mic-button{animation:pulse 1.6s ease-in-out infinite}voice-agent[state=thinking] m-symbol{animation:spin 1.4s linear infinite}@keyframes pulse{0%,to{transform:scale(1);box-shadow:0 6px 18px #00000073}50%{transform:scale(1.06);box-shadow:0 8px 26px #0000008c}}@keyframes spin{to{transform:rotate(360deg)}}}