/* Pantalla de llamada (modo llamada): la usan el chat de clientes (chat.html) y el asistente del panel.
   El comportamiento vive en /cliente/llamada.js; aquí solo el aspecto. Todo cuelga de .c-llamada. */
.c-llamada{position:fixed;inset:0;z-index:70;display:none;color:#fff;background:radial-gradient(130% 75% at 50% 0%,#1E4468 0%,#102A43 48%,#071826 100%);padding:calc(14px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) calc(18px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));overflow:hidden;outline:none;font-family:inherit}
.c-llamada.on{display:flex;justify-content:center}
@media (prefers-reduced-motion:no-preference){.c-llamada.on{animation:callIn .26s ease-out}@keyframes callIn{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}}
.c-llamada .cw{width:100%;max-width:560px;display:flex;flex-direction:column;min-height:0}
.c-llamada .c-head{display:flex;align-items:center;gap:10px}
.c-llamada .c-av{width:38px;height:38px;border-radius:50%;background:linear-gradient(140deg,#5ED3C6,#087F73);display:grid;place-items:center;font-weight:800;font-size:17px;flex:none;box-shadow:0 0 0 2px rgba(255,255,255,.08)}
.c-llamada .c-name{font-weight:700;font-size:15px;line-height:1.2}
.c-llamada .c-place{font-size:12px;opacity:.68;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-llamada .c-tools{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}
.c-llamada .c-cc{height:28px;min-width:34px;border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;border-radius:7px;font-family:inherit;font-size:11px;font-weight:700;letter-spacing:.05em;cursor:pointer}
.c-llamada.nocaps .c-cc{opacity:.45}
.c-llamada .c-time{display:flex;align-items:center;gap:7px;height:28px;padding:0 10px;border-radius:999px;background:rgba(255,255,255,.08);font:600 13px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}
.c-llamada .c-dot{width:7px;height:7px;border-radius:50%;background:#5ED3C6}
.c-llamada.live .c-dot{animation:dot 1.8s ease-out infinite}
@keyframes dot{0%{box-shadow:0 0 0 0 rgba(94,211,198,.65)}100%{box-shadow:0 0 0 7px rgba(94,211,198,0)}}
.c-llamada .c-chip{align-self:center;margin-top:14px;display:flex;align-items:center;gap:8px;padding:7px 14px 7px 10px;border-radius:999px;background:rgba(25,181,165,.16);border:1px solid rgba(94,211,198,.45);color:#D9FBF6;font-size:13px}
.c-llamada .c-chip[hidden]{display:none}
.c-llamada .c-chip svg{width:16px;height:16px;flex:none;color:#5ED3C6}
.c-llamada .c-chip b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.02em;font-weight:700}
@media (prefers-reduced-motion:no-preference){.c-llamada .c-chip:not([hidden]){animation:drop .3s ease-out}@keyframes drop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}}
.c-llamada .c-stage{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.c-llamada .c-orb{width:min(74vw,320px,42vh);height:min(74vw,320px,42vh);display:block}
.c-llamada .c-state{font-size:15px;font-weight:600;letter-spacing:.01em;opacity:.88;min-height:1.4em;text-align:center}
.c-llamada .c-caps{align-self:center;width:100%;max-width:520px;height:7.2em;margin-top:10px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;text-align:center;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 38%);mask-image:linear-gradient(to bottom,transparent 0,#000 38%);text-wrap:balance}
.c-llamada.nocaps .c-caps{visibility:hidden}
.c-llamada .cap-prev{font-size:14px;line-height:1.35;opacity:.42;margin-bottom:6px}
.c-llamada .cap-cur{font-size:19px;line-height:1.38;font-weight:500}
.c-llamada .cap-prev.who-yo,.c-llamada .cap-cur.who-yo{color:#BDEFE7}
.c-llamada .cap-cur.live{opacity:.82}
.c-llamada .c-hint{font-size:13px;opacity:.62;text-align:center;min-height:1.3em;margin:8px 0 4px;transition:opacity .5s}
.c-llamada .c-ctrl{display:flex;justify-content:center;align-items:flex-start;gap:clamp(26px,10vw,52px);padding-top:8px}
.c-llamada .cb{display:flex;flex-direction:column;align-items:center;gap:8px;background:none;border:0;padding:0;color:#fff;cursor:pointer;font-family:inherit;font-size:12px;font-weight:500;letter-spacing:.01em}
.c-llamada .cb[hidden]{display:none}
.c-llamada .cb .ci{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12);transition:background .15s,transform .1s,color .15s}
.c-llamada .cb:hover .ci{background:rgba(255,255,255,.18)}
.c-llamada .cb:active .ci{transform:scale(.94)}
.c-llamada .cb svg{width:24px;height:24px}
.c-llamada .cb .lbl{opacity:.85}
.c-llamada .cb.hang .ci{width:68px;height:68px;margin-top:-4px;background:#E5484D}
.c-llamada .cb.hang:hover .ci{background:#F05A5F}
.c-llamada .cb.hang svg{width:30px;height:30px}
.c-llamada .cb.on .ci{background:#fff;color:var(--navy,#102A43)}
.c-llamada .cb .off{display:none} .c-llamada .cb.on .on-i{display:none} .c-llamada .cb.on .off{display:block}
.c-llamada .cb:focus-visible{outline:none} .c-llamada .cb:focus-visible .ci{outline:3px solid #5ED3C6;outline-offset:3px}
@media (max-height:640px){.c-llamada .c-orb{width:min(60vw,220px,34vh);height:min(60vw,220px,34vh)}.c-llamada .c-caps{height:5.6em}.c-llamada .cap-cur{font-size:17px}}