/* Réplica de Telegram (tema claro con fondo verde) dentro del .device de la landing. */
.screen.tg{position:relative; height:600px; display:flex; flex-direction:column; color:#111; font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' fill='none' stroke='%23335a2a' stroke-opacity='.14' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 14l4 8 9 1-7 6 2 9-8-5-8 5 2-9-7-6 9-1z'/%3E%3Ccircle cx='112' cy='26' r='9'/%3E%3Cpath d='M58 80c6-10 16-10 20 0s14 10 20 0'/%3E%3Cpath d='M128 112c-6-8-18 0-10 8l10 10 10-10c8-8-4-16-10-8z'/%3E%3Crect x='22' y='110' width='22' height='16' rx='4'/%3E%3Cpath d='M82 128v14M75 135h14'/%3E%3C/svg%3E") 0 0/160px,
    linear-gradient(165deg,#d8dc8f 0%,#9cc38a 38%,#7fb38a 62%,#b9d197 100%)}
.tg-status{display:flex; justify-content:space-between; align-items:center; padding:13px 24px 4px; font-size:13px; font-weight:650; color:#1b2a1b; font-variant-numeric:tabular-nums}
.tg-icons{display:inline-flex; gap:6px; align-items:center}
.tg-head{display:flex; align-items:center; gap:6px; padding:4px 8px 6px}
.tg-circ{flex:none; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; color:#222; background:rgba(255,255,255,.82); box-shadow:0 1px 3px rgba(0,0,0,.12)}
.tg-title{flex:1; min-width:0; display:flex; align-items:center; gap:9px; padding:3px 12px 3px 3px; border-radius:24px; background:rgba(255,255,255,.82); box-shadow:0 1px 3px rgba(0,0,0,.12)}
.tg-ava{flex:none; width:36px; height:36px; border-radius:50%; background:#fff url(/kala/assets/logo-kala.png) 2px 50%/auto 92% no-repeat; box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.tg-title b{display:block; font-size:15.5px; line-height:1.15}
.tg-sub{display:block; font-size:12.5px; color:#707a84}
.tg-sub.typing{color:#3a8ee6}
.tg-thread{flex:1; display:flex; flex-direction:column; gap:5px; padding:8px 10px 6px; overflow-y:auto; scrollbar-width:none; scroll-behavior:smooth;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 16px); mask-image:linear-gradient(to bottom,transparent 0,#000 16px)}
.tg-thread::-webkit-scrollbar{display:none}
.tg-b{position:relative; max-width:82%; padding:6px 10px 7px 11px; border-radius:16px; font-size:14px; line-height:1.38; box-shadow:0 1px 1px rgba(0,0,0,.14); animation:pop .3s cubic-bezier(.2,.9,.3,1.2); overflow-wrap:anywhere}
.tg-b b{font-weight:600}
.tg-in{align-self:flex-start; background:#fff; border-bottom-left-radius:5px}
.tg-out{align-self:flex-end; background:#effdde; border-bottom-right-radius:5px}
.tg-meta{float:right; position:relative; top:7px; margin-left:10px; display:inline-flex; align-items:center; gap:2px; font-size:11px; line-height:1; color:#9aa6b2}
.tg-out .tg-meta{color:#5fae57}
.tg-cmd{color:#3a8ee6}
.tg-bar{white-space:nowrap; letter-spacing:-.5px; color:#5fae57}
.tg-chip{align-self:center; margin:4px 0; padding:3px 11px; border-radius:12px; background:rgba(62,96,56,.38); color:#fff; font-size:12.5px; font-weight:600}
.tg-voice{display:flex; align-items:center; gap:8px; padding-right:12px}
.tg-play{flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:#5fae57; color:#fff}
.tg-vw{display:flex; flex-direction:column; gap:3px}
.tg-wave{display:flex; align-items:flex-end; gap:2px; height:18px}
.tg-wave i{display:block; width:2px; border-radius:1px; background:#79bb6f}
.tg-dur{font-size:11px; color:#5fae57}
.tg-fileh{display:flex; align-items:center; gap:10px; margin-bottom:5px}
.tg-docic{flex:none; width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:#3a8ee6; color:#fff}
.tg-docinfo b{display:block; font-size:14px}
.tg-docinfo small{font-size:12px; color:#8a96a3}
.tg-fwd{position:absolute; right:-36px; bottom:2px; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:rgba(40,70,40,.32); color:#fff}
.tg-kb{align-self:flex-start; width:92%; display:flex; flex-direction:column; gap:4px; margin:-1px 0 3px; animation:pop .3s ease}
.tg-kb-row{display:flex; gap:4px}
.tg-kb-btn{flex:1; min-width:0; padding:9px 6px; border-radius:10px; text-align:center; font-size:12.5px; font-weight:600; color:#fff; background:rgba(52,88,58,.5); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:transform .15s, filter .15s}
.tg-kb-undo .tg-kb-btn{background:#c9654f; padding:10px}
.tg-kb-facturar .tg-kb-btn{background:#3a8ee6; padding:10px}
.tg-kb-btn.tap{filter:brightness(1.35); transform:scale(.95)}
.tg-kb-btn.ok{background:#3fa463} .tg-kb-btn.bad{background:#c9654f}
.tg-kb.ido{opacity:0; transform:scale(.96); transition:opacity .25s, transform .25s}
.tg-composer{display:flex; align-items:flex-end; gap:6px; margin:4px 8px 12px; padding:5px; border-radius:24px; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.14)}
.tg-menu{flex:none; display:inline-flex; align-items:center; gap:5px; padding:8px 12px; border-radius:20px; background:#3a8ee6; color:#fff; font-size:13.5px; font-weight:650}
.tg-emoji{flex:none; width:32px; height:36px; display:grid; place-items:center; color:#8a96a3}
.tg-field{flex:1; min-width:0; padding:8px 2px; font-size:15px; line-height:1.3; max-height:64px; overflow:hidden}
.tg-ph{color:#a3acb5}
.has-text .tg-ph{display:none}
.tg-caret{display:inline-block; width:1.5px; height:17px; margin:0 1px; vertical-align:-3px; background:#3a8ee6; animation:tgcaret 1s steps(1) infinite}
@keyframes tgcaret{50%{opacity:0}}
.tg-rec{display:none; flex:1; align-items:center; gap:8px; padding:8px 4px; font-size:14.5px; font-variant-numeric:tabular-nums}
.tg-rec-dot{width:9px; height:9px; border-radius:50%; background:#e5484d; animation:tgrec 1s infinite}
@keyframes tgrec{50%{opacity:.25}}
.tg-rec-hint{margin-left:auto; color:#8a96a3; font-size:12.5px; white-space:nowrap}
.recording .tg-menu,.recording .tg-emoji,.recording .tg-field{display:none}
.recording .tg-rec{display:flex}
.tg-action{flex:none; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:#3a8ee6; color:#fff; transition:transform .15s ease, box-shadow .2s ease}
.tg-action .i-send{display:none}
.tg-action[data-mode="send"] .i-send{display:grid}
.tg-action[data-mode="send"] .i-mic{display:none}
.tg-action[data-mode="rec"]{transform:scale(1.25); box-shadow:0 0 0 8px rgba(58,142,230,.22)}
.tg-action.press{transform:scale(.86)}
@media (max-width:400px){ .screen.tg{height:560px} .tg-rec-hint{display:none} .tg-b{font-size:13.5px} }
@media (prefers-reduced-motion:reduce){ .tg-b,.tg-kb,.tg-caret,.tg-rec-dot{animation:none} .tg-thread{scroll-behavior:auto} }

.tg-down{position:absolute; right:12px; bottom:68px; z-index:3; width:38px; height:38px; padding:0; border:0; border-radius:50%; display:grid; place-items:center; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.22); cursor:pointer; -webkit-tap-highlight-color:transparent}
.tg-down[hidden]{display:none}
.tg-down.has-new::after{content:""; position:absolute; top:-1px; right:-1px; width:11px; height:11px; border-radius:50%; background:#3a8ee6; box-shadow:0 0 0 2px #fff}