/* Llamadas y videollamadas de Imperio Chat: negro profundo, oro como detalle, cristal oscuro.
   Teléfono vertical por defecto; horizontal, tableta y computador se ajustan abajo sin volver a pintar nada. */
.ll-capa{
  --ll-oro:#d4a64a;--ll-oro-claro:#f3d27a;--ll-borde:#d4a64a4d;--ll-cristal:#0e0c0ba8;--ll-texto:#f7f0e4;--ll-tenue:#f7f0e4b8;
  --ll-sup:env(safe-area-inset-top,0px);--ll-inf:env(safe-area-inset-bottom,0px);--ll-izq-s:env(safe-area-inset-left,0px);--ll-der-s:env(safe-area-inset-right,0px);
  --ll-b:62px;--ll-pip-sup:118px;--ll-pip-inf:124px;
  position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;overflow:hidden;color:var(--ll-texto);background:#050505;
  -webkit-tap-highlight-color:transparent;animation:ll-entra .28s ease-out;isolation:isolate
}
.ll-capa [hidden]{display:none!important}
.ll-capa .ico{width:22px;height:22px;stroke-width:1.7}
.ll-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Fondo: negro con arcos dorados finos y algunos destellos, sin imágenes externas. */
.ll-fondo{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:radial-gradient(85% 55% at 50% 32%,#241b10 0%,#0d0b08 52%,#050505 100%)}
.ll-fondo::before{content:"";position:absolute;inset:-25%;opacity:.95;animation:ll-deriva 22s ease-in-out infinite alternate;background:
  radial-gradient(115% 58% at 0% 100%,transparent 57.6%,#d4a64a40 57.9%,transparent 58.5%),
  radial-gradient(118% 62% at 0% 100%,transparent 61.4%,#d4a64a26 61.6%,transparent 62.1%),
  radial-gradient(125% 64% at 100% 0%,transparent 59.5%,#d4a64a33 59.8%,transparent 60.4%),
  radial-gradient(128% 70% at 100% 0%,transparent 64%,#d4a64a1c 64.2%,transparent 64.7%)}
.ll-fondo::after{content:"";position:absolute;inset:0;opacity:.7;animation:ll-destello 6s ease-in-out infinite alternate;background:
  radial-gradient(circle at 12% 18%,#f3d27a 0 1px,transparent 2.5px),radial-gradient(circle at 86% 24%,#f3d27a 0 1.2px,transparent 3px),
  radial-gradient(circle at 78% 70%,#f3d27a 0 1px,transparent 2.5px),radial-gradient(circle at 20% 64%,#f3d27a 0 .8px,transparent 2px),
  radial-gradient(circle at 92% 46%,#f3d27a 0 .8px,transparent 2px)}

/* Marca */
.ll-logo{display:flex;flex-direction:column;align-items:center;gap:3px;flex:none;pointer-events:none}
.ll-logo img{width:40px;height:40px;filter:drop-shadow(0 0 12px #d4a64a59)}
.ll-logo span{display:flex;flex-direction:column;align-items:center;line-height:1}
.ll-logo b{font-family:var(--font-display,Georgia,"Times New Roman",serif);font-weight:600;font-size:18px;letter-spacing:.3em;margin-right:-.3em;color:#e9c56f;background:linear-gradient(180deg,#fff1c4,#d4a64a 62%,#a87a2a);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ll-logo small{margin-top:5px;margin-right:-.55em;font-size:9px;letter-spacing:.55em;color:#d4a64ac7}

/* Identidad: retrato con aro dorado, nombre y estado */
.ll-identidad{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;min-width:0;max-width:min(92vw,560px)}
.ll-halo{position:relative;flex:none;border-radius:50%;padding:4px;background:conic-gradient(from 200deg,#fff1c4,#d4a64a,#7a5214,#d4a64a,#fff1c4);box-shadow:0 0 30px #d4a64a59,0 0 90px #d4a64a1f;transition:box-shadow .4s}
.ll-halo::after{content:"";position:absolute;inset:-13px;border-radius:50%;border:1px solid #d4a64a38;pointer-events:none}
.ll-sonando::before{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid #f3d27a;opacity:0;animation:ll-pulso 2.2s ease-out infinite;pointer-events:none}
.ll-avatar{width:clamp(136px,40vw,196px);aspect-ratio:1;border-radius:50%;overflow:hidden;display:grid;place-items:center;border:3px solid #050505;background:radial-gradient(circle at 35% 30%,#3b2b17,#110c07)}
.ll-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.ll-avatar span{font-family:var(--font-display,Georgia,serif);font-size:clamp(44px,12vw,62px);color:var(--ll-oro-claro);letter-spacing:.04em}
.ll-quieto .ll-avatar{width:104px}.ll-quieto .ll-avatar span{font-size:36px}
.ll-nombre{margin:20px 0 0;font-size:clamp(28px,7.6vw,40px);font-weight:500;line-height:1.12;color:#fff;letter-spacing:.005em;overflow-wrap:anywhere;text-shadow:0 2px 20px #000b}
.ll-estado{margin:0;min-height:1.4em;font-size:clamp(15px,4vw,18px);color:var(--ll-tenue);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.ll-salida-actual{margin:4px 0 0;font-size:12.5px;color:#d4a64ad1;letter-spacing:.03em}

/* Onda de audio: suena al recibir; en llamada solo se mueve cuando la otra persona habla. */
.ll-onda{display:flex;align-items:center;justify-content:center;gap:4px;height:38px;margin-top:16px}
.ll-onda i{display:block;width:3px;height:calc(var(--h) * 100%);border-radius:3px;background:linear-gradient(180deg,#fff1c4,#d4a64a);opacity:.9;transform:scaleY(.4);animation:ll-onda 1.25s ease-in-out infinite;animation-delay:calc(var(--i) * -.085s)}
.ll-voz .ll-onda i{animation:none;transform:scaleY(.22);opacity:.45;transition:transform .3s,opacity .3s}
.ll-voz.ll-hablan .ll-onda i{animation:ll-onda 1.1s ease-in-out infinite;animation-delay:calc(var(--i) * -.07s);opacity:.9}
.ll-voz.ll-hablan .ll-halo{box-shadow:0 0 36px #d4a64a99,0 0 100px #d4a64a3d}

/* Botones redondos */
.ll-btn{position:relative;display:flex;flex-direction:column;align-items:center;gap:9px;min-width:68px;padding:0;border:0;background:none;color:var(--ll-texto);font:inherit;font-size:13px;line-height:1.2;cursor:pointer;touch-action:manipulation}
.ll-btn-ico{width:var(--ll-b);height:var(--ll-b);flex:none;border-radius:50%;display:grid;place-items:center;color:var(--ll-texto);border:1px solid var(--ll-borde);background:radial-gradient(circle at 50% 28%,#2b2520d9,#0c0a09eb);box-shadow:inset 0 1px 0 #ffffff17,0 6px 18px #0008;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:transform .12s,background .2s,border-color .2s,box-shadow .2s,color .2s}
.ll-btn .ico{width:24px;height:24px}
.ll-btn-texto{color:var(--ll-tenue);white-space:nowrap}
.ll-btn:hover .ll-btn-ico{border-color:#d4a64aad;box-shadow:inset 0 1px 0 #ffffff1f,0 0 0 4px #d4a64a17,0 8px 22px #0009}
.ll-btn:active .ll-btn-ico{transform:scale(.92)}
.ll-btn:focus-visible{outline:none}
.ll-btn:focus-visible .ll-btn-ico{outline:2px solid var(--ll-oro-claro);outline-offset:4px}
.ll-btn.ll-activo .ll-btn-ico{color:#1a1206;border-color:#ffe6a3;background:linear-gradient(160deg,#ffe6a3,#d4a64a 55%,#a77a2b);box-shadow:0 0 24px #d4a64a6b,inset 0 1px 0 #fff6}
.ll-btn.ll-apagado .ll-btn-ico{color:#121010;border-color:#f7f0e4;background:#f7f0e4}
.ll-btn.ll-activo .ll-btn-texto,.ll-btn.ll-apagado .ll-btn-texto{color:var(--ll-texto)}
.ll-btn.ll-no-disponible,.ll-redondo.ll-no-disponible{opacity:.42}
.ll-btn:disabled{opacity:.4;cursor:not-allowed}
.ll-btn.ll-rojo .ll-btn-ico,.ll-btn.ll-colgar .ll-btn-ico{color:#fff;border-color:#ff8a90;background:radial-gradient(circle at 50% 28%,#ff535c,#cf0f1d);box-shadow:0 10px 28px #e0242f66,inset 0 1px 0 #fff5}
.ll-btn.ll-rojo:hover .ll-btn-ico,.ll-btn.ll-colgar:hover .ll-btn-ico{box-shadow:0 0 0 5px #e0242f2e,0 10px 30px #e0242f80}
.ll-btn.ll-verde .ll-btn-ico{color:#fff;border-color:#86f2ad;background:radial-gradient(circle at 50% 28%,#43e27f,#13a145);box-shadow:0 10px 28px #1db95466,inset 0 1px 0 #fff5}
.ll-btn.ll-verde:hover .ll-btn-ico{box-shadow:0 0 0 5px #1db9542e,0 10px 30px #1db95480}
.ll-rojo .ico,.ll-colgar .ico,.ll-verde .ico{fill:currentColor;stroke-width:1.2}
.ll-grande{--ll-b:clamp(74px,21vw,86px);font-size:15px}
.ll-grande .ico{width:32px;height:32px}
.ll-redondo{width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center;padding:0;border:1px solid var(--ll-borde);background:var(--ll-cristal);color:var(--ll-texto);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);cursor:pointer;transition:border-color .2s,transform .12s,color .2s}
.ll-redondo:hover{border-color:#d4a64aad}.ll-redondo:active{transform:scale(.93)}
.ll-redondo:focus-visible{outline:2px solid var(--ll-oro-claro);outline-offset:3px}
.ll-redondo.ll-activo{color:var(--ll-oro-claro);border-color:var(--ll-oro)}
.ll-redondo.ll-chico{width:36px;height:36px}.ll-redondo.ll-chico .ico{width:18px;height:18px}
.ll-pildora{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 24px;border-radius:999px;border:1px solid var(--ll-borde);background:var(--ll-cristal);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:var(--ll-texto);font:inherit;font-size:15px;cursor:pointer;transition:border-color .2s,background .2s,transform .12s}
.ll-pildora .ico{width:20px;height:20px;color:var(--ll-oro-claro)}
.ll-pildora:hover{border-color:#d4a64aad;background:#1a1612cc}.ll-pildora:active{transform:scale(.97)}
.ll-pildora:focus-visible{outline:2px solid var(--ll-oro-claro);outline-offset:3px}
.ll-boton-oro,.ll-boton-cristal{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:50px;padding:0 24px;border-radius:999px;font:inherit;font-size:15px;font-weight:600;cursor:pointer;transition:transform .12s,box-shadow .2s,border-color .2s}
.ll-boton-oro{border:1px solid #ffe6a3;background:linear-gradient(160deg,#ffe6a3,#d4a64a 55%,#a77a2b);color:#1a1206;box-shadow:0 8px 24px #d4a64a40}
.ll-boton-oro:hover{box-shadow:0 0 0 4px #d4a64a2e,0 10px 28px #d4a64a59}
.ll-boton-cristal{border:1px solid var(--ll-borde);background:var(--ll-cristal);color:var(--ll-texto);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.ll-boton-cristal:hover{border-color:#d4a64aad}
.ll-boton-oro:active,.ll-boton-cristal:active{transform:scale(.97)}
.ll-boton-oro:focus-visible,.ll-boton-cristal:focus-visible,.ll-boton-texto:focus-visible{outline:2px solid var(--ll-oro-claro);outline-offset:3px}
.ll-boton-oro:disabled,.ll-boton-cristal:disabled{opacity:.5;cursor:not-allowed}
.ll-boton-oro .ico,.ll-boton-cristal .ico{width:19px;height:19px}
.ll-boton-texto{min-height:44px;padding:0 16px;border:0;background:none;color:var(--ll-tenue);font:inherit;font-size:14px;cursor:pointer;text-decoration:underline;text-underline-offset:4px;text-decoration-color:#d4a64a80}

/* 1 y 3. Llamada entrante (voz y videollamada) */
.ll-entrante-cuerpo,.ll-problema-cuerpo{position:relative;z-index:1;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:18px;overflow:auto;
  padding:calc(26px + var(--ll-sup)) calc(20px + var(--ll-der-s)) calc(26px + var(--ll-inf)) calc(20px + var(--ll-izq-s))}
.ll-entrante-cuerpo>*,.ll-problema-cuerpo>*{animation:ll-sube .55s cubic-bezier(.2,.8,.2,1) both}
.ll-entrante-cuerpo>:nth-child(2),.ll-problema-cuerpo>:nth-child(2){animation-delay:.08s}
.ll-entrante-cuerpo>:nth-child(3),.ll-problema-cuerpo>:nth-child(3){animation-delay:.18s}
.ll-entrante-cuerpo>:nth-child(4){animation-delay:.26s}
.ll-entrante-cuerpo .ll-identidad,.ll-problema-cuerpo .ll-identidad{margin:auto 0}
.ll-entrante-acciones{display:flex;justify-content:center;gap:clamp(70px,28vw,160px);width:100%}
.ll-entrante-extra{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.ll-fondo-foto{background:#050505}
.ll-fondo-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.04);animation:ll-respira 10s ease-in-out infinite alternate}
.ll-fondo-foto::before{display:none}
.ll-fondo-foto::after{z-index:1;opacity:1;animation:none;background:linear-gradient(180deg,#050505e0 0%,#05050540 24%,#05050500 42%,#050505a6 64%,#050505f5 100%)}
.ll-fondo-iniciales{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--font-display,Georgia,serif);font-size:62vmin;color:#d4a64a1a;filter:blur(3px)}
.ll-entrante-video .ll-identidad{margin:auto 0 0}
.ll-entrante-video .ll-nombre{margin-top:0}

/* Problemas: permisos, sin cámara, ocupado, conexión */
.ll-problema-ico{display:grid;place-items:center;width:58px;height:58px;margin-top:18px;border-radius:50%;border:1px solid var(--ll-borde);background:var(--ll-cristal);color:var(--ll-oro-claro)}
.ll-problema-ico .ico{width:26px;height:26px}
.ll-problema-titulo{margin-top:14px;font-size:clamp(22px,6vw,30px)}
.ll-problema-texto{margin:4px 0 0;max-width:430px;font-size:15px;line-height:1.55;color:var(--ll-tenue)}
.ll-problema-acciones{display:flex;flex-direction:column;align-items:stretch;gap:10px;width:min(100%,360px)}

/* 2 y 10. Llamada de voz activa */
.ll-voz{position:relative;z-index:1;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:14px;overflow:auto;
  padding:calc(14px + var(--ll-sup)) calc(20px + var(--ll-der-s)) calc(22px + var(--ll-inf)) calc(20px + var(--ll-izq-s))}
.ll-voz .ll-identidad{margin:auto 0}
.ll-controles-voz{display:flex;flex-direction:column;align-items:center;gap:clamp(20px,4.2vh,36px);width:100%;max-width:420px}
.ll-rejilla-botones{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(16px,3.2vh,28px) clamp(8px,5vw,30px);justify-items:center;width:100%}
.ll-rejilla-botones>*{grid-column:span 2}
.ll-rejilla-botones>:nth-child(4):nth-last-child(2){grid-column:2/span 2}
.ll-controles-voz .ll-colgar{--ll-b:clamp(72px,20vw,82px)}
.ll-controles-voz .ll-colgar .ico{width:34px;height:34px}
.ll-controles-voz .ll-colgar .ll-btn-texto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.ll-personas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:440px;margin-top:12px}
.ll-persona{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:11.5px;color:var(--ll-tenue)}
.ll-persona-avatar{width:46px;height:46px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:#1c1712;color:var(--ll-oro-claro);font-size:15px;border:1.5px solid #d4a64a59;transition:border-color .2s,box-shadow .2s}
.ll-persona-avatar img{width:100%;height:100%;object-fit:cover}
.ll-persona.hablando .ll-persona-avatar{border-color:var(--ll-oro-claro);box-shadow:0 0 16px #d4a64a8c}
.ll-persona-mas{justify-content:center;width:46px;height:46px;border-radius:50%;border:1px dashed #d4a64a59}

/* Barra de arriba (volver, nombre y duración, pantalla completa, Más) */
.ll-arriba{position:absolute;z-index:4;inset:0 0 auto 0;display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"volver logo der" "titulo titulo titulo";align-items:center;column-gap:12px;
  padding:calc(10px + var(--ll-sup)) calc(14px + var(--ll-der-s)) 14px calc(14px + var(--ll-izq-s));pointer-events:none;transition:opacity .35s,transform .35s}
.ll-arriba>*{pointer-events:auto}
.ll-arriba>[data-ll="minimizar"],.ll-arriba>[data-ll="girar"]{grid-area:volver}
.ll-logo-arriba{grid-area:logo;justify-self:center;pointer-events:none}
.ll-logo-arriba img{width:30px;height:30px}.ll-logo-arriba b{font-size:14px}.ll-logo-arriba small{font-size:7.5px}
.ll-arriba-der{grid-area:der;display:flex;gap:8px;justify-self:end}
.ll-titulo{grid-area:titulo;display:none;flex-direction:column;gap:3px;min-width:0;margin-top:10px}
.ll-titulo b{font-size:clamp(20px,5.6vw,26px);font-weight:500;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 12px #000d}
.ll-titulo span{font-size:14px;color:var(--ll-tenue);font-variant-numeric:tabular-nums;text-shadow:0 1px 8px #000d}
.ll-modo-voz .ll-logo-arriba,.ll-modo-voz .ll-solo-video,.ll-modo-video .ll-solo-voz{display:none}
.ll-modo-video .ll-arriba{background:linear-gradient(180deg,#050505c2 0%,#05050566 60%,#05050500 100%)}
.ll-modo-video .ll-titulo{display:flex}
.ll-modo-video.ll-sin-remotos .ll-titulo{display:none}

/* 4. Videollamada activa: video remoto a pantalla completa */
.ll-escenario{position:absolute;inset:0;z-index:0;display:none;background:#050505}
.ll-modo-video .ll-escenario{display:block}
.ll-modo-video>.ll-fondo{opacity:.6}
.ll-rejilla{position:absolute;inset:0;display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));grid-auto-rows:minmax(0,1fr);
  padding:calc(var(--ll-sup) + 112px) calc(10px + var(--ll-der-s)) calc(var(--ll-inf) + 116px) calc(10px + var(--ll-izq-s))}
.ll-rejilla[data-n="0"]{display:none}
.ll-rejilla[data-n="1"]{padding:0;gap:0;grid-template-columns:1fr}
.ll-rejilla[data-n="2"]{grid-template-columns:1fr}
.ll-tile{position:relative;min-height:0;overflow:hidden;display:grid;place-items:center;border-radius:20px;border:1px solid #d4a64a29;background:radial-gradient(circle at 50% 40%,#1d1711,#070605);transition:border-color .25s,box-shadow .25s}
.ll-rejilla[data-n="1"] .ll-tile{border:0;border-radius:0}
.ll-tile.hablando{border-color:var(--ll-oro);box-shadow:0 0 0 1px var(--ll-oro),0 0 22px #d4a64a4d}
.ll-rejilla[data-n="1"] .ll-tile.hablando{box-shadow:none}
.ll-tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none;background:#000}
.ll-tile.ll-encajar video{object-fit:contain}
.ll-tile.con-video video{display:block}
.ll-tile.con-video .ll-tile-avatar{display:none}
.ll-tile-avatar{width:clamp(96px,32%,180px);aspect-ratio:1;border-radius:50%;overflow:hidden;display:grid;place-items:center;font-family:var(--font-display,Georgia,serif);font-size:clamp(30px,7vw,52px);color:var(--ll-oro-claro);background:radial-gradient(circle at 35% 30%,#3b2b17,#110c07);box-shadow:0 0 0 3px #050505,0 0 0 5px var(--ll-oro),0 0 44px #d4a64a3d}
.ll-tile-avatar img{width:100%;height:100%;object-fit:cover}
.ll-tile-nombre{position:absolute;left:12px;bottom:12px;max-width:calc(100% - 24px);padding:4px 11px;border-radius:999px;border:1px solid #d4a64a33;background:#0a0908b3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ll-rejilla[data-n="1"] .ll-tile-nombre{display:none}
.ll-tile.sin-mic .ll-tile-nombre::after{content:" · sin micrófono";color:var(--ll-oro-claro)}
.ll-tile-pantalla{background:#000}
.ll-rejilla.ll-con-pantalla{grid-template-rows:minmax(0,3fr);grid-auto-rows:minmax(0,1fr)}
.ll-con-pantalla .ll-tile-pantalla{grid-column:1/-1}
.ll-persona-nombre{max-width:72px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Esperando a la otra persona con la cámara puesta: la propia cámara de fondo y el nombre encima. */
.ll-modo-video .ll-voz{display:none}
.ll-modo-video.ll-sin-remotos .ll-voz{display:flex;position:absolute;inset:0;background:linear-gradient(180deg,#050505a6,#05050500 38%,#05050500 58%,#050505b3);pointer-events:none}
.ll-modo-video .ll-voz .ll-controles-voz,.ll-modo-video .ll-voz .ll-logo-voz,.ll-modo-video .ll-voz .ll-onda{display:none}
.ll-modo-video .ll-voz .ll-avatar{width:clamp(96px,28vw,132px)}

/* Ventana con la propia cámara (PiP) */
.ll-propia{position:absolute;z-index:3;width:clamp(100px,28vw,136px);aspect-ratio:var(--ll-pip-ar,3 / 4);max-height:36vh;border-radius:18px;overflow:hidden;background:#000;border:1.5px solid var(--ll-oro);
  box-shadow:0 0 0 1px #050505,0 12px 32px #000b,0 0 22px #d4a64a2e;touch-action:none;cursor:grab;transition:box-shadow .2s,width .3s,top .25s,bottom .25s}
.ll-propia[data-esquina^="arriba"]{top:calc(var(--ll-sup) + var(--ll-pip-sup))}
.ll-propia[data-esquina^="abajo"]{bottom:calc(var(--ll-inf) + var(--ll-pip-inf))}
.ll-propia[data-esquina$="der"]{right:calc(12px + var(--ll-der-s))}
.ll-propia[data-esquina$="izq"]{left:calc(12px + var(--ll-izq-s))}
.ll-propia video{width:100%;height:100%;object-fit:cover;display:block}
.ll-propia video.ll-espejo{transform:scaleX(-1)}
.ll-propia.ll-arrastrando{cursor:grabbing;transition:none;box-shadow:0 0 0 1px #050505,0 20px 46px #000d,0 0 30px #d4a64a59}
.ll-propia.ll-girando{animation:ll-voltear .65s cubic-bezier(.4,0,.2,1)}
.ll-propia:focus-visible{outline:2px solid var(--ll-oro-claro);outline-offset:3px}
.ll-controles-ocultos .ll-propia{--ll-pip-sup:22px}
.ll-modo-video.ll-sin-remotos .ll-propia{inset:0;width:auto;height:auto;max-height:none;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none;cursor:default;z-index:0}
.ll-modo-voz .ll-propia{display:none}

/* Barra de controles de video: cristal oscuro, colgar al centro y siempre visible */
.ll-controles-video{position:absolute;z-index:4;left:50%;bottom:calc(14px + var(--ll-inf));transform:translateX(-50%);display:none;align-items:center;justify-content:center;gap:clamp(6px,2.6vw,22px);
  width:max-content;max-width:calc(100% - 16px);padding:12px clamp(10px,3.6vw,26px);border-radius:32px;border:1px solid var(--ll-borde);background:linear-gradient(180deg,#1b1713b8,#0a0908de);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);box-shadow:inset 0 1px 0 #ffffff12,0 18px 50px #000b;transition:background .35s,border-color .35s,box-shadow .35s}
.ll-modo-video .ll-controles-video{display:flex}
.ll-controles-video .ll-btn{--ll-b:clamp(48px,13vw,58px);min-width:0;gap:6px;font-size:11.5px;transition:opacity .3s,transform .3s}
.ll-controles-video .ll-colgar{--ll-b:clamp(62px,17vw,72px)}
.ll-controles-video .ll-colgar .ico{width:30px;height:30px}
.ll-controles-ocultos .ll-arriba{opacity:0;transform:translateY(-14px)}
.ll-controles-ocultos .ll-arriba>*{pointer-events:none}
.ll-controles-ocultos .ll-controles-video{background:transparent;border-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.ll-controles-ocultos .ll-controles-video .ll-btn:not(.ll-colgar){opacity:0;transform:translateY(12px);pointer-events:none}
.ll-controles-ocultos .ll-controles-video .ll-colgar .ll-btn-texto{opacity:0}
/* Teléfono angosto: los seis botones de la barra caben sin encimarse (desde 320 px de ancho). */
@media (max-width:420px){
  .ll-controles-video{gap:clamp(3px,1.2vw,8px);padding:10px clamp(6px,2.4vw,12px)}
  .ll-controles-video .ll-btn{--ll-b:clamp(40px,11.5vw,48px);flex:none;font-size:10.5px}
  .ll-controles-video .ll-colgar{--ll-b:clamp(50px,14vw,60px)}
  .ll-controles-video .ll-colgar .ico{width:26px;height:26px}
  .ll-controles-video .ll-btn .ico{width:21px;height:21px}
}

/* Avisos de conexión */
.ll-avisos{position:absolute;z-index:5;left:50%;top:calc(var(--ll-sup) + 66px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;width:max-content;max-width:calc(100% - 24px);pointer-events:none}
.ll-modo-video .ll-avisos{top:calc(var(--ll-sup) + 118px)}
.ll-aviso{pointer-events:auto;display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:8px;min-height:36px;padding:7px 14px;border-radius:999px;border:1px solid var(--ll-borde);background:#0d0b0ae0;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font:inherit;font-size:13px;color:var(--ll-texto);box-shadow:0 8px 24px #0009;animation:ll-sube .3s ease both}
.ll-aviso .ico{width:16px;height:16px;color:var(--ll-oro-claro)}
.ll-aviso-alerta{border-color:#ffb34773}.ll-aviso-alerta .ico{color:#ffb347}
.ll-aviso-oro{border-color:var(--ll-oro)}
.ll-aviso button{min-height:30px;margin-left:4px;padding:0 12px;border:0;border-radius:999px;background:var(--ll-oro);color:#1a1206;font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.ll-aviso-boton{cursor:pointer;font-weight:600;color:#1a1206;border-color:#ffe6a3;background:linear-gradient(160deg,#ffe6a3,#d4a64a)}
.ll-aviso-boton .ico{color:#1a1206}
.ll-aviso:focus-visible,.ll-aviso button:focus-visible{outline:2px solid var(--ll-oro-claro);outline-offset:2px}
.ll-girador{width:14px;height:14px;border-radius:50%;border:2px solid #ffb34759;border-top-color:#ffb347;animation:ll-gira .8s linear infinite}

/* 5. Hojas inferiores (Más, salida de audio, mensaje rápido): cristal negro con borde dorado fino */
.ll-hoja{position:absolute;z-index:6;left:50%;bottom:calc(10px + var(--ll-inf));transform:translateX(-50%);display:flex;flex-direction:column;width:min(calc(100% - 20px),440px);max-height:min(78vh,640px);overflow:hidden;
  border-radius:28px;border:1px solid #d4a64a66;background:linear-gradient(180deg,#1c1814e6,#0b0a09f2);-webkit-backdrop-filter:blur(24px) saturate(1.2);backdrop-filter:blur(24px) saturate(1.2);
  box-shadow:inset 0 1px 0 #ffffff14,0 -12px 60px #000c;animation:ll-hoja .34s cubic-bezier(.2,.8,.2,1) both}
.ll-hoja-asa{flex:none;width:42px;height:4px;margin:10px auto 0;border-radius:4px;background:#f7f0e440}
.ll-hoja-cabeza{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 14px 6px 22px}
.ll-hoja-cabeza h3{margin:0;font-size:16px;font-weight:500;color:#fff;letter-spacing:.02em}
.ll-hoja-lista{display:flex;flex-direction:column;overflow:auto;overscroll-behavior:contain;padding:2px 10px 14px}
.ll-item{display:flex;align-items:center;gap:14px;width:100%;min-height:58px;padding:8px 12px;border:0;border-radius:16px;background:none;color:var(--ll-texto);font:inherit;text-align:left;cursor:pointer;transition:background .15s}
.ll-hoja-lista>.ll-item+.ll-item{box-shadow:inset 0 1px 0 #d4a64a1c}
.ll-item:hover{background:#ffffff0d}
.ll-item:focus-visible{outline:2px solid var(--ll-oro-claro);outline-offset:-2px}
.ll-item:disabled{opacity:.5;cursor:not-allowed}
.ll-item .ll-btn-ico{width:42px;height:42px;box-shadow:inset 0 1px 0 #ffffff12}
.ll-item .ico{width:20px;height:20px}
.ll-item.ll-activo .ll-btn-ico{color:#1a1206;border-color:#ffe6a3;background:linear-gradient(160deg,#ffe6a3,#d4a64a 55%,#a77a2b)}
.ll-item.ll-apagado .ll-btn-ico{color:#121010;border-color:#f7f0e4;background:#f7f0e4}
.ll-item.ll-no-disponible{opacity:.5}
.ll-item-texto{display:flex;flex-direction:column;gap:2px;min-width:0}
.ll-item .ll-btn-texto{font-size:15px;color:var(--ll-texto);white-space:normal}
.ll-item-estado{font-size:12px;color:#d4a64ac4}
.ll-item-estado:empty{display:none}
.ll-hoja-extra{display:flex;flex-direction:column;margin:2px 0 4px 18px;padding-left:10px;border-left:1px solid #d4a64a33}
.ll-hoja-nota{margin:6px 22px 20px;font-size:14px;line-height:1.45;color:var(--ll-tenue)}
.ll-agregar-avatar{flex:none;width:42px;height:42px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:#1c1712;color:var(--ll-oro-claro);font-size:15px;border:1.5px solid #d4a64a59}
.ll-agregar-avatar img{width:100%;height:100%;object-fit:cover}
.ll-agregar-persona .ll-item-texto{flex:1}
.ll-agregar-llamar{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;color:#1a1206;background:linear-gradient(160deg,#ffe6a3,#d4a64a 55%,#a77a2b)}
.ll-agregar-llamar .ico{width:18px;height:18px}
.ll-agregar-persona.ll-no-disponible{cursor:default}
.ll-agregar-persona[data-enviando] .ll-agregar-llamar{opacity:.5}
.ll-hoja-abierta .ll-controles-video{opacity:0;pointer-events:none}
.ll-rapido-propio{display:flex;gap:8px;padding:2px 14px 16px}
.ll-rapido-propio input{flex:1;min-width:0;min-height:48px;padding:0 18px;border-radius:999px;border:1px solid var(--ll-borde);background:#050505b8;color:var(--ll-texto);font:inherit;font-size:15px}
.ll-rapido-propio input::placeholder{color:#f7f0e480}
.ll-rapido-propio input:focus{outline:none;border-color:var(--ll-oro);box-shadow:0 0 0 3px #d4a64a2e}
.ll-entrante .ll-hoja,.ll-problema .ll-hoja{z-index:6}

/* Fin de la llamada */
.ll-fin .ll-controles-voz,.ll-fin .ll-arriba,.ll-fin .ll-avisos,.ll-fin .ll-escenario,.ll-fin .ll-propia,.ll-fin .ll-controles-video{display:none!important}
.ll-fin .ll-halo{filter:grayscale(.55);opacity:.85;box-shadow:none}
.ll-fin .ll-onda{visibility:hidden}
.ll-fin .ll-estado{color:var(--ll-oro-claro);font-size:17px}
.ll-fin-acciones{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;animation:ll-sube .35s ease both}

/* 18. Llamada minimizada: barra flotante sobre el chat */
.ll-capa.ll-minimizada{display:none}
.ll-mini{position:fixed;z-index:95;left:50%;top:calc(84px + env(safe-area-inset-top,0px));transform:translateX(-50%);display:flex;align-items:center;gap:6px;max-width:calc(100vw - 20px);padding:5px;border-radius:999px;
  border:1px solid var(--oro,#d4a64a);background:linear-gradient(160deg,#1c1814f5,#0a0908fa);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 12px 36px #0009,0 0 20px #d4a64a2e;color:#f7f0e4;animation:ll-baja .3s ease both}
.ll-mini[hidden]{display:none}
.ll-mini-volver{display:flex;align-items:center;gap:10px;min-width:0;min-height:44px;padding:0 12px 0 0;border:0;border-radius:999px;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.ll-mini-avatar{flex:none;width:40px;height:40px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:#1c1712;color:#f3d27a;font-size:13px;border:1.5px solid #d4a64a}
.ll-mini-avatar img{width:100%;height:100%;object-fit:cover}
.ll-mini-texto{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.ll-mini-texto b{max-width:46vw;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ll-mini-texto>span{display:flex;align-items:center;gap:6px;font-size:12px;color:#f3d27ad9;font-variant-numeric:tabular-nums;white-space:nowrap}
.ll-punto{width:7px;height:7px;border-radius:50%;background:#1db954;box-shadow:0 0 8px #1db954;animation:ll-late 1.6s ease-in-out infinite}
.ll-mini-colgar{flex:none;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:radial-gradient(circle at 50% 28%,#ff535c,#cf0f1d);color:#fff;cursor:pointer;box-shadow:0 6px 16px #e0242f59}
.ll-mini-colgar .ico{width:20px;height:20px;fill:currentColor}
.ll-mini-volver:focus-visible,.ll-mini-colgar:focus-visible{outline:2px solid #f3d27a;outline-offset:2px}
@media (min-width:1024px){.ll-mini{top:102px}}

/* 18b. Llamada entrante flotante: la misma tarjeta arriba en teléfono, tableta y computador; la app sigue usable detrás */
.ll-capa.ll-flotante{inset:calc(10px + var(--ll-sup)) auto auto 50%;width:min(460px,calc(100vw - 16px));overflow:visible;background:none;transform:translateX(-50%);animation:ll-baja .34s cubic-bezier(.2,.9,.3,1.15) both}
.ll-flot{position:relative;display:flex;align-items:center;gap:10px;padding:10px;border-radius:24px;border:1px solid #d4a64a8c;
  background:radial-gradient(130% 160% at 0% 0%,#3d0c17 0%,#170b0c 46%,#090807 100%);
  box-shadow:0 18px 44px #000b,0 0 0 1px #050505,0 0 28px #d4a64a2e}
.ll-flot::before{content:"";position:absolute;inset:0 18% auto;height:1px;background:linear-gradient(90deg,transparent,#f3d27a8c,transparent);pointer-events:none}
.ll-flot-quien{display:flex;align-items:center;gap:12px;flex:1;min-width:0;min-height:52px;padding:0 4px 0 0;border:0;border-radius:18px;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.ll-flot-halo{position:relative;flex:none;border-radius:50%;padding:2px;background:conic-gradient(from 200deg,#fff1c4,#d4a64a,#7a5214,#d4a64a,#fff1c4);box-shadow:0 0 16px #d4a64a4d}
.ll-flot-avatar{width:48px;height:48px;border-radius:50%;overflow:hidden;display:grid;place-items:center;border:2px solid #0a0807;background:radial-gradient(circle at 35% 30%,#3b2b17,#110c07);color:var(--ll-oro-claro);font-family:var(--font-display,Georgia,serif);font-size:17px;letter-spacing:.04em}
.ll-flot-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.ll-flot-texto{display:flex;flex-direction:column;gap:2px;min-width:0;line-height:1.2}
.ll-flot-marca{display:flex;align-items:center;gap:5px;font-size:9.5px;font-weight:600;letter-spacing:.24em;color:#d4a64ad9}
.ll-flot-marca img{width:13px;height:13px;flex:none}
.ll-flot-texto b{font-family:var(--font-display,Georgia,serif);font-size:17px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ll-flot-estado{display:flex;align-items:center;gap:5px;min-width:0;font-size:12.5px;color:#f3d27ae0}
.ll-flot-estado>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ll-capa .ll-flot-estado .ico{width:14px;height:14px;flex:none}
.ll-flot-botones{display:flex;gap:10px;flex:none}
.ll-flot-btn{width:50px;height:50px;display:grid;place-items:center;padding:0;border:1px solid;border-radius:50%;color:#fff;cursor:pointer;touch-action:manipulation;transition:transform .12s,box-shadow .2s}
.ll-capa .ll-flot-btn .ico{width:23px;height:23px;fill:currentColor;stroke-width:1.2}
.ll-flot-rechazar{border-color:#ff8a90;background:radial-gradient(circle at 50% 28%,#ff535c,#cf0f1d);box-shadow:0 6px 18px #e0242f59,inset 0 1px 0 #fff5}
.ll-flot-aceptar{border-color:#86f2ad;background:radial-gradient(circle at 50% 28%,#43e27f,#13a145);box-shadow:0 6px 18px #1db95459,inset 0 1px 0 #fff5;animation:ll-llama 1.8s ease-out infinite}
.ll-flot-btn:active{transform:scale(.92)}
.ll-flot-btn:focus-visible,.ll-flot-quien:focus-visible{outline:2px solid var(--ll-oro-claro);outline-offset:3px}
@keyframes ll-llama{0%{box-shadow:0 6px 18px #1db95459,0 0 0 0 #43e27f80}70%,100%{box-shadow:0 6px 18px #1db95459,0 0 0 10px #43e27f00}}

/* Imagen en imagen del sistema (app de Android): solo el video */
.ll-pip-sistema .ll-arriba,.ll-pip-sistema .ll-controles-video,.ll-pip-sistema .ll-propia,.ll-pip-sistema .ll-avisos,.ll-pip-sistema .ll-hoja,
.ll-pip-sistema .ll-controles-voz,.ll-pip-sistema .ll-logo-voz,.ll-pip-sistema .ll-onda,.ll-pip-sistema .ll-salida-actual{display:none!important}
.ll-pip-sistema .ll-rejilla{padding:0;gap:2px}
.ll-pip-sistema .ll-nombre{font-size:16px;margin-top:8px}
.ll-pip-sistema .ll-avatar{width:72px}

/* Mientras hay una llamada a la vista, los avisos de la app salen arriba y por encima de ella. */
body:has(>.ll-capa:not(.ll-minimizada):not(.ll-flotante)) .toast{z-index:100;top:calc(12px + env(safe-area-inset-top,0px));bottom:auto}

/* 7. Teléfono horizontal (16:9): todo en una fila, el video detrás */
/* Teléfono vertical de poca altura (9:16 con barras del sistema, tamaño de pantalla ampliado): todo cabe sin desplazar,
   así los seis botones (también «Videollamada») y el de colgar se ven siempre. */
@media (orientation:portrait) and (max-height:780px){
  .ll-voz{gap:8px;padding-top:calc(10px + var(--ll-sup));padding-bottom:calc(14px + var(--ll-inf))}
  .ll-voz .ll-logo img{width:30px;height:30px}
  .ll-voz .ll-logo b{font-size:14px}
  .ll-voz .ll-logo small{margin-top:3px;font-size:7.5px}
  .ll-voz .ll-avatar{width:clamp(84px,17vh,150px)}
  .ll-voz .ll-avatar span{font-size:clamp(30px,6vh,52px)}
  .ll-voz .ll-halo::after{inset:-9px}
  .ll-voz .ll-nombre{margin-top:clamp(8px,2vh,16px);font-size:clamp(22px,4.4vh,32px)}
  .ll-voz .ll-estado{font-size:15px}
  .ll-voz .ll-onda{height:24px;margin-top:6px}
  .ll-voz .ll-personas{margin-top:6px}
  .ll-controles-voz{gap:clamp(10px,2.2vh,20px)}
  .ll-rejilla-botones{gap:clamp(8px,1.8vh,16px) clamp(8px,5vw,30px)}
  .ll-rejilla-botones .ll-btn{--ll-b:clamp(48px,8.4vh,60px);gap:6px;font-size:12.5px}
  .ll-controles-voz .ll-colgar{--ll-b:clamp(58px,10vh,72px)}
  .ll-entrante-cuerpo{gap:10px;padding-top:calc(16px + var(--ll-sup));padding-bottom:calc(16px + var(--ll-inf))}
  .ll-entrante-cuerpo .ll-logo img{width:32px;height:32px}
  .ll-entrante-cuerpo .ll-avatar{width:clamp(96px,20vh,170px)}
  .ll-entrante-cuerpo .ll-nombre{margin-top:clamp(10px,2.4vh,20px);font-size:clamp(24px,4.6vh,36px)}
  .ll-entrante-cuerpo .ll-onda{height:28px;margin-top:8px}
  .ll-entrante-cuerpo .ll-grande{--ll-b:clamp(64px,11vh,86px)}
}
@media (orientation:portrait) and (max-height:560px){
  .ll-voz .ll-logo,.ll-entrante-cuerpo .ll-logo{display:none}
  .ll-voz .ll-onda,.ll-entrante-cuerpo .ll-onda{display:none}
}

@media (orientation:landscape) and (max-height:540px){
  .ll-capa{--ll-b:50px;--ll-pip-sup:70px;--ll-pip-inf:92px}
  .ll-logo img{width:30px;height:30px}.ll-logo b{font-size:14px}.ll-logo small{font-size:7.5px}
  .ll-avatar{width:clamp(92px,24vh,124px)}.ll-avatar span{font-size:36px}
  .ll-nombre{margin-top:12px;font-size:clamp(22px,6vh,28px)}
  .ll-onda{height:24px;margin-top:8px}
  .ll-entrante-cuerpo,.ll-problema-cuerpo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr auto;align-items:center;justify-items:center;column-gap:24px;
    padding:calc(12px + var(--ll-sup)) calc(24px + var(--ll-der-s)) calc(12px + var(--ll-inf)) calc(24px + var(--ll-izq-s))}
  .ll-entrante-cuerpo .ll-logo,.ll-problema-cuerpo .ll-logo{grid-column:1/-1;justify-self:start}
  .ll-entrante-cuerpo .ll-identidad,.ll-problema-cuerpo .ll-identidad{grid-column:1;grid-row:2;margin:0}
  .ll-entrante-acciones,.ll-problema-acciones{grid-column:2;grid-row:2;gap:clamp(36px,8vw,80px)}
  .ll-entrante-extra{grid-column:2;grid-row:3}
  .ll-grande{--ll-b:68px}
  .ll-voz{flex-direction:row;justify-content:center;gap:clamp(24px,7vw,90px);padding:calc(10px + var(--ll-sup)) calc(24px + var(--ll-der-s)) calc(10px + var(--ll-inf)) calc(24px + var(--ll-izq-s))}
  .ll-voz .ll-logo-voz{position:absolute;left:calc(70px + var(--ll-izq-s));top:calc(8px + var(--ll-sup))}
  .ll-voz .ll-identidad{margin:0}
  .ll-controles-voz{max-width:340px;gap:14px}
  .ll-rejilla-botones{gap:12px 18px}
  .ll-controles-voz .ll-colgar{--ll-b:60px}
  .ll-arriba{grid-template-columns:auto auto 1fr auto;grid-template-areas:"volver titulo . der";padding-top:calc(8px + var(--ll-sup))}
  .ll-logo-arriba{display:none}
  .ll-titulo{margin-top:0}
  .ll-titulo b{font-size:19px}
  .ll-propia{width:auto;height:min(40vh,170px);max-height:none}
  .ll-rejilla{padding:calc(var(--ll-sup) + 64px) calc(10px + var(--ll-der-s)) calc(var(--ll-inf) + 92px) calc(10px + var(--ll-izq-s))}
  .ll-rejilla[data-n="2"]{grid-template-columns:1fr 1fr}
  .ll-controles-video{padding:8px 18px;bottom:calc(8px + var(--ll-inf))}
  .ll-controles-video .ll-btn{--ll-b:46px;font-size:10.5px}
  .ll-controles-video .ll-colgar{--ll-b:56px}
  .ll-avisos,.ll-modo-video .ll-avisos{top:calc(var(--ll-sup) + 58px)}
  .ll-hoja{max-height:calc(100vh - 20px)}
}

/* 8. Tableta: más espacio, controles más separados y PiP proporcional */
@media (min-width:700px) and (min-height:600px){
  .ll-capa{--ll-b:70px;--ll-pip-sup:128px;--ll-pip-inf:140px}
  .ll-logo img{width:46px;height:46px}.ll-logo b{font-size:20px}
  .ll-avatar{width:clamp(180px,24vw,230px)}.ll-avatar span{font-size:68px}
  .ll-nombre{font-size:clamp(34px,4.4vw,44px)}
  .ll-estado{font-size:18px}
  .ll-grande{--ll-b:92px}
  .ll-btn{font-size:14px}
  .ll-controles-voz{max-width:500px}
  .ll-rejilla-botones{gap:30px 44px}
  .ll-controles-voz .ll-colgar{--ll-b:88px}
  .ll-arriba{grid-template-columns:auto auto 1fr auto;grid-template-areas:"volver logo . der" "titulo titulo . .";padding:calc(18px + var(--ll-sup)) calc(22px + var(--ll-der-s)) 18px calc(22px + var(--ll-izq-s))}
  .ll-logo-arriba{justify-self:start;flex-direction:row;gap:10px}
  .ll-logo-arriba span{align-items:flex-start}
  .ll-titulo b{font-size:30px}.ll-titulo span{font-size:15px}
  .ll-redondo{width:50px;height:50px}
  .ll-propia{width:clamp(170px,22vw,250px);border-radius:20px}
  .ll-rejilla{gap:12px;padding:calc(var(--ll-sup) + 140px) calc(18px + var(--ll-der-s)) calc(var(--ll-inf) + 132px) calc(18px + var(--ll-izq-s))}
  .ll-rejilla[data-n="2"]{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
  .ll-controles-video{gap:clamp(18px,3vw,34px);padding:14px 34px;bottom:calc(22px + var(--ll-inf))}
  .ll-controles-video .ll-btn{--ll-b:62px;font-size:12.5px}
  .ll-controles-video .ll-colgar{--ll-b:76px}
  .ll-hoja{left:auto;right:calc(22px + var(--ll-der-s));transform:none;bottom:calc(var(--ll-inf) + 156px);width:400px;animation-name:ll-hoja-lado}
  .ll-hoja-abierta .ll-controles-video{opacity:1;pointer-events:auto}
  .ll-entrante .ll-hoja,.ll-problema .ll-hoja{left:50%;right:auto;transform:translateX(-50%);bottom:calc(24px + var(--ll-inf));animation-name:ll-hoja}
  .ll-avisos{top:calc(var(--ll-sup) + 84px)}
  .ll-modo-video .ll-avisos{top:calc(var(--ll-sup) + 140px)}
}
/* Tableta horizontal: retrato a un lado y controles al otro, aprovechando el ancho */
@media (min-width:900px) and (orientation:landscape) and (pointer:coarse){
  .ll-voz{flex-direction:row;justify-content:center;gap:clamp(60px,10vw,160px);padding-top:calc(90px + var(--ll-sup))}
  .ll-voz .ll-logo-voz{position:absolute;left:50%;top:calc(18px + var(--ll-sup));transform:translateX(-50%)}
  .ll-voz .ll-identidad{margin:0}
  .ll-entrante-cuerpo{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr auto;align-items:center;justify-items:center}
  .ll-entrante-cuerpo .ll-logo{grid-column:1/-1}
  .ll-entrante-cuerpo .ll-identidad{grid-column:1;grid-row:2;margin:0}
  .ll-entrante-acciones{grid-column:2;grid-row:2}
  .ll-entrante-extra{grid-column:2;grid-row:3}
}

/* 9. Computador: la llamada ocupa el área principal y el menú lateral sigue a la vista */
.ll-capa.ll-escritorio{inset:var(--ll-arr,0px) 0 0 var(--ll-izq,0px);margin:14px;border-radius:26px;border:1px solid #d4a64a59;box-shadow:0 30px 80px #000b,0 0 0 1px #050505;--ll-sup:0px;--ll-inf:0px;--ll-izq-s:0px;--ll-der-s:0px}
.ll-escritorio .ll-logo-arriba{display:none}
.ll-escritorio .ll-arriba{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"volver titulo der";padding:18px 20px}
.ll-escritorio .ll-titulo{margin-top:0}
.ll-escritorio .ll-titulo b{font-size:24px}
.ll-escritorio{--ll-pip-sup:86px;--ll-pip-inf:120px}
.ll-escritorio .ll-rejilla{padding:84px 18px 120px}
.ll-escritorio .ll-rejilla[data-n="1"]{padding:0}
.ll-escritorio .ll-avisos{top:24px}
.ll-escritorio.ll-modo-video .ll-avisos{top:84px}
.ll-escritorio .ll-hoja{bottom:136px;max-height:max(300px,calc(100% - 400px))}
.ll-escritorio .ll-item{min-height:50px;padding-block:5px}
.ll-capa.ll-pantalla-completa{inset:0;margin:0;border:0;border-radius:0}
@media (min-width:1024px) and (pointer:fine){
  .ll-capa{--ll-b:60px}
  .ll-avatar{width:clamp(170px,16vw,220px)}
  .ll-propia{width:clamp(220px,19vw,300px);--ll-pip-ar:16 / 9}
  .ll-controles-video .ll-btn{--ll-b:56px}
  .ll-controles-video .ll-colgar{--ll-b:68px}
  .ll-controles-voz{max-width:460px}
  .ll-rejilla-botones{gap:24px 40px}
  .ll-controles-voz .ll-colgar{--ll-b:76px}
  .ll-entrante-acciones{gap:150px}
}
@media (min-width:1600px){
  .ll-propia{width:min(20vw,360px)}
  .ll-controles-video{gap:30px;padding:16px 38px}
}

/* Animaciones */
@keyframes ll-entra{from{opacity:0}to{opacity:1}}
@keyframes ll-sube{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes ll-baja{from{opacity:0;transform:translate(-50%,-12px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes ll-hoja{from{opacity:0;transform:translate(-50%,36px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes ll-hoja-lado{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes ll-pulso{0%{transform:scale(1);opacity:.85}100%{transform:scale(1.38);opacity:0}}
@keyframes ll-onda{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
@keyframes ll-deriva{from{transform:translate3d(-2%,1%,0) rotate(-1deg)}to{transform:translate3d(2%,-1%,0) rotate(1deg)}}
@keyframes ll-destello{from{opacity:.35}to{opacity:.8}}
@keyframes ll-respira{from{transform:scale(1.04)}to{transform:scale(1.1)}}
@keyframes ll-voltear{0%{transform:perspective(700px) rotateY(0)}45%{transform:perspective(700px) rotateY(88deg);filter:blur(4px) brightness(.6)}55%{transform:perspective(700px) rotateY(-88deg);filter:blur(4px) brightness(.6)}100%{transform:perspective(700px) rotateY(0)}}
@keyframes ll-gira{to{transform:rotate(360deg)}}
@keyframes ll-late{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){
  .ll-capa,.ll-capa *,.ll-mini{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .ll-onda i{transform:scaleY(.5)}
}
@media (forced-colors:active){
  .ll-btn-ico,.ll-redondo,.ll-pildora,.ll-hoja,.ll-controles-video,.ll-propia,.ll-mini{border:1px solid CanvasText}
  .ll-btn.ll-activo .ll-btn-ico,.ll-item.ll-activo .ll-btn-ico{outline:3px solid Highlight}
}