/* Videollamada de "Los Rulos" con aspecto de llamada entrante de iPhone (póster del contacto a pantalla completa).
   Se superpone a la invitación hasta que termina el vídeo. */
html.ll-lock, html.ll-lock body { overflow: hidden; }

#llamada {
  --ll-green: #34c759; --ll-red: #ff3b30; --ll-ink: #2C4530;
  position: fixed; inset: 0; z-index: 2147483000;
  display: flex; align-items: center; justify-content: center;
  background: #050806; color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  transition: opacity .6s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none; -webkit-user-select: none;
}
#llamada.ll-out, #llamada.ll-pre { opacity: 0; pointer-events: none; }
#llamada.ll-out { transition-duration: .35s; } /* al terminar, la invitación aparece casi al instante */
#llamada[hidden] { display: none; }

.ll-phone { position: relative; width: 100%; max-width: 480px; height: 100vh; height: 100dvh; overflow: hidden; background: #0b100d; }
@media (min-width: 520px) and (min-height: 760px) {
  .ll-phone { height: min(100dvh - 48px, 880px); border-radius: 44px; box-shadow: 0 0 0 10px #1b1e1c, 0 0 0 11px #3a3f3c, 0 30px 80px rgba(0,0,0,.6); }
}

/* Póster del contacto: la foto a pantalla completa, con degradados arriba y abajo para que se lean los textos y botones. */
.ll-poster { position: absolute; inset: 0; overflow: hidden; background: #1a1d1b; transition: opacity .5s ease; }
#llamada[data-state="boot"] .ll-poster { opacity: 0; }
.ll-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58% 42%; }
.ll-poster::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 36%;
  background: linear-gradient(180deg, rgba(8,12,10,.62) 0%, rgba(8,12,10,.28) 55%, rgba(8,12,10,0) 100%); }
.ll-poster::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40%;
  background: linear-gradient(180deg, rgba(8,12,10,0) 0%, rgba(8,12,10,.55) 45%, rgba(8,12,10,.9) 100%); }

/* Pantallas: solo una visible a la vez, según data-state del contenedor. */
.ll-screen { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .5s ease; }
#llamada[data-state="ring"] .ll-ring,
#llamada[data-state="call"] .ll-call { opacity: 1; pointer-events: auto; }

/* ---------- Llamada entrante ---------- */
.ll-ring { display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: max(72px, calc(env(safe-area-inset-top) + 56px)) 24px max(30px, env(safe-area-inset-bottom)); }
.ll-name { margin: 0; font-size: 46px; font-weight: 700; letter-spacing: -.02em; line-height: 1.05; color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.45); }
.ll-sub { margin: 8px 0 0; font-size: 21px; font-weight: 500; color: rgba(255,255,255,.85); text-shadow: 0 1px 10px rgba(0,0,0,.45); }
.ll-dots span { animation: llDot 1.4s infinite both; }
.ll-dots span:nth-child(2) { animation-delay: .2s; } .ll-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes llDot { 0%, 80%, 100% { opacity: .15; } 30% { opacity: 1; } }
.ll-hint { margin: 14px 0 0; min-height: 1.5em; font-size: 18px; font-weight: 500; color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.5); transition: opacity .25s; }

.ll-bottom { margin-top: auto; width: 100%; max-width: 380px; display: flex; flex-direction: column; align-items: center; gap: 34px; }

/* "Recordármelo" y "Mensaje", como en el iPhone */
.ll-quick { width: 100%; display: flex; justify-content: space-between; padding: 0 6px; }
.ll-q { display: flex; flex-direction: column; align-items: center; gap: 9px; background: none; border: 0; color: #fff; cursor: pointer; padding: 0;
  font: 400 14px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif; }
.ll-q .ic { width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.2); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.ll-q:active .ic { background: rgba(255,255,255,.36); }
.ll-q svg { width: 25px; height: 25px; }

/* Deslizar para responder, a todo el ancho */
.ll-slider { --p: 0; position: relative; width: 100%; height: 76px; border-radius: 38px; overflow: hidden;
  background: rgba(255,255,255,.22); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
  display: flex; align-items: center; justify-content: center; }
.ll-track-text { position: relative; padding-left: 60px; font-size: 20px; font-weight: 400; opacity: calc(1 - var(--p) * 1.7);
  background: linear-gradient(90deg, rgba(255,255,255,.5) 0%, #fff 48%, rgba(255,255,255,.5) 100%); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: llShimmer 2.6s linear infinite; }
@keyframes llShimmer { 0% { background-position: 220% 0; } 100% { background-position: -220% 0; } }
.ll-handle { position: absolute; left: 5px; top: 5px; width: 66px; height: 66px; border-radius: 50%; border: 0; padding: 0;
  background: var(--ll-green); color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.3); cursor: grab; touch-action: none; transform: translateX(var(--x, 0px)); }
.ll-handle:active { cursor: grabbing; }
.ll-handle.snap { transition: transform .28s cubic-bezier(.2,.9,.3,1); }
.ll-handle:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.ll-handle svg { width: 32px; height: 32px; }

.ll-skip { position: absolute; top: max(14px, env(safe-area-inset-top)); right: 14px; z-index: 3;
  background: rgba(255,255,255,.2); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  color: #fff; border: 0; border-radius: 999px; font: 600 13px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
  padding: 9px 14px; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .4s; }
.ll-skip.on { opacity: 1; pointer-events: auto; }

/* ---------- En llamada (vídeo) ---------- */
.ll-call { background: #000; }
.ll-call video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.ll-callbar { position: absolute; top: 0; left: 0; right: 0; padding: max(16px, env(safe-area-inset-top)) 20px 36px;
  display: flex; flex-direction: column; align-items: center; gap: 2px; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,0)); }
.ll-callname { font-size: 20px; font-weight: 600; letter-spacing: -.005em; }
.ll-timer { font-size: 14px; color: rgba(255,255,255,.75); font-variant-numeric: tabular-nums; }
.ll-loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: rgba(0,0,0,.4); font-size: 18px; color: rgba(255,255,255,.9); transition: opacity .3s; pointer-events: none; }
.ll-loading.off { opacity: 0; }
.ll-spin { width: 30px; height: 30px; border-radius: 50%; border: 3px solid rgba(255,255,255,.3); border-top-color: #fff; animation: llSpin .8s linear infinite; }
@keyframes llSpin { to { transform: rotate(360deg); } }

.ll-tap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 4; border: 0; padding: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 14px; background: none; color: #fff; }
.ll-tap[hidden], .ll-err[hidden] { display: none; }
.ll-tap .ic { width: 92px; height: 92px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.22); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 8px 30px rgba(0,0,0,.4); }
.ll-tap svg { width: 44px; height: 44px; margin-left: 5px; }
.ll-tap .tx { font-size: 18px; font-weight: 500; text-shadow: 0 1px 10px rgba(0,0,0,.6); }
.ll-err { position: absolute; left: 20px; right: 20px; top: 50%; transform: translateY(-50%); z-index: 4; padding: 22px 20px 18px; border-radius: 26px;
  background: rgba(40,40,42,.78); -webkit-backdrop-filter: blur(28px) saturate(1.5); backdrop-filter: blur(28px) saturate(1.5); text-align: center; }
.ll-err p { margin: 0 0 16px; font-size: 17px; line-height: 1.35; }
.ll-err .row { display: flex; flex-direction: column; gap: 10px; }
.ll-err button { border: 0; border-radius: 14px; padding: 14px; font: 600 16px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
  background: var(--ll-green); color: #fff; cursor: pointer; }
.ll-err button.alt { background: rgba(255,255,255,.18); }
.ll-panel { position: absolute; left: 16px; right: 16px; bottom: max(18px, env(safe-area-inset-bottom)); z-index: 3;
  display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 42px;
  background: rgba(40,40,42,.55); -webkit-backdrop-filter: blur(28px) saturate(1.6); backdrop-filter: blur(28px) saturate(1.6); }
.ll-ctl { width: 64px; height: 64px; border-radius: 50%; border: 0; padding: 0; color: #fff; cursor: pointer;
  background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; }
.ll-ctl:active { filter: brightness(.8); }
.ll-ctl svg { width: 28px; height: 28px; }
.ll-sound .off-ic { display: none; } .ll-sound.is-muted .on-ic { display: none; } .ll-sound.is-muted .off-ic { display: block; }
.ll-sound.is-muted { background: #fff; color: #1c1c1e; }
.ll-hang { background: var(--ll-red); }
.ll-hang svg { transform: rotate(135deg); }

@media (prefers-reduced-motion: reduce) {
  .ll-dots span, .ll-track-text, .ll-spin { animation: none; }
  .ll-screen, #llamada { transition-duration: .01s; }
}
@media (max-height: 700px) {
  .ll-ring { padding-top: 44px; } .ll-name { font-size: 38px; }
  .ll-bottom { gap: 22px; }
}