/**
 * TELÉFONO del sistema F — componente compartido (`web/f/_telefono.twig`,
 * motor `f/f-telefono.js`). Lo usan la home («Desde el móvil · a viva
 * voz», con la biblioteca de procesos) y `/plataforma`.
 *
 * Reproduce un proceso como la app de Claude: compositor que recibe lo
 * dictado → tu mensaje → bloque de herramientas de iERP → tarjeta →
 * respuesta. El reposo (sin JS o con movimiento reducido) es el primer
 * proceso pintado entero desde el servidor.
 */
/* Teléfono: objeto físico, oscuro en los dos temas (excepción a los
   tokens). Paleta cálida de app de asistente: neutros tostados y un
   acento terracota para la voz. */
.f-home-phone { position: relative; justify-self: center; align-self: center; width: 100%; max-width: 380px; }
.f-home-phone__ring {
  position: absolute; left: 50%; top: 46%;
  width: 520px; height: 520px; margin: -260px 0 0 -260px;
  border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--f-sig) 50%, transparent);
  pointer-events: none;
}
.f-home-phone__ring--aqua { border-color: color-mix(in oklab, var(--f-aqua) 50%, transparent); }
.f-home-phone__body {
  --f-home-ph: #262624;
  --f-home-ph2: #30302d;
  --f-home-ph-ink: #f3f1ea;
  --f-home-ph-dim: #a9a59b;
  --f-home-ph-line: rgba(255, 255, 255, 0.09);
  --f-home-ph-acc: #d97757;
  position: relative;
  aspect-ratio: 9 / 19;
  border-radius: 48px;
  background: var(--f-home-ph);
  color: var(--f-home-ph-ink);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 40px 120px -20px color-mix(in oklab, var(--f-sig) 55%, transparent), inset 0 0 0 6px #171716;
  padding: 24px 16px 18px;
  display: flex; flex-direction: column; gap: 10px;
  overflow: hidden;
}
.f-home-phone__notch { align-self: center; width: 92px; height: 24px; flex: none; border-radius: 999px; background: #000; }
.f-home-phone__top {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px 10px;
  border-bottom: 1px solid var(--f-home-ph-line);
}
.f-home-phone__app { font-size: 14px; font-weight: 500; }
.f-home-phone__conn {
  display: flex; align-items: center; gap: 6px; padding: 4px 9px; font-size: 9.5px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.06); color: var(--f-home-ph-dim);
}
.f-home-phone__led { width: 6px; height: 6px; border-radius: 50%; background: #34d399; animation: f-blink 2.4s ease-in-out infinite; }
.f-home-phone__screen {
  position: relative; flex: 1; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 36px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 36px);
}
.f-home-phone__hola {
  position: absolute; left: 0; right: 0; top: 42%; margin: 0; text-align: center;
  font-size: 21px; letter-spacing: -0.02em; color: var(--f-home-ph-ink);
  opacity: 0; transform: translateY(6px); transition: opacity 0.4s ease, transform 0.4s var(--f-ease); pointer-events: none;
}
.f-home-phone__screen.is-vacia .f-home-phone__hola { opacity: 0.9; transform: none; }
.f-home-phone__feed { display: flex; flex-direction: column; gap: 10px; padding: 0 4px; font-size: 13px; line-height: 1.45; transition: opacity 0.35s ease, transform 0.35s var(--f-ease); }
.f-home-phone__feed.is-out { opacity: 0; transform: translateY(-14px); }

/* Mensajes */
.f-home-msg { margin: 0; }
.f-home-msg--me {
  align-self: flex-end; max-width: 86%; padding: 9px 13px;
  border-radius: 18px; background: #3a3935; color: var(--f-home-ph-ink);
}
.f-home-msg--ai { max-width: 96%; color: var(--f-home-ph-ink); }
.f-home-msg__w { opacity: 0; transition: opacity 0.18s ease; }
.f-home-msg__w.is-in { opacity: 1; }

/* Bloque de herramientas (como el uso de herramientas de la app) */
.f-home-tools { border: 1px solid var(--f-home-ph-line); border-radius: 12px; background: rgba(255, 255, 255, 0.025); overflow: hidden; }
.f-home-tools__h {
  display: flex; align-items: center; gap: 7px; padding: 7px 10px;
  font-size: 11px; color: var(--f-home-ph-dim); border-bottom: 1px solid var(--f-home-ph-line);
}
.f-home-tools__ico {
  width: 13px; height: 13px; flex: none; background: currentColor;
  -webkit-mask: var(--f-home-i-plug) center / contain no-repeat; mask: var(--f-home-i-plug) center / contain no-repeat;
}
.f-home-tool { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; }
.f-home-tool + .f-home-tool { border-top: 1px solid var(--f-home-ph-line); }
.f-home-tool__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.f-home-tool__a { font-size: 9.5px; color: var(--f-home-ph-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: none; letter-spacing: 0; }
.f-home-tool__l { font-size: 11.5px; }
.f-home-tool__st {
  width: 14px; height: 14px; flex: none; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.18); border-top-color: var(--f-home-ph-ink);
  animation: f-home-spin 0.8s linear infinite;
}
.f-home-tool.is-done .f-home-tool__st {
  border: 0; border-radius: 0; animation: f-home-tick 0.35s var(--f-ease) both; background: #34d399;
  -webkit-mask: var(--f-home-i-ok) center / contain no-repeat; mask: var(--f-home-i-ok) center / contain no-repeat;
}
@keyframes f-home-spin { to { transform: rotate(360deg); } }
@keyframes f-home-tick { from { transform: scale(0.4); opacity: 0; } to { transform: none; opacity: 1; } }

/* Tarjeta de resultado */
.f-home-card { border-radius: 14px; padding: 11px 12px; display: flex; flex-direction: column; gap: 5px; }
.f-home-card--doc { background: #f6f4ee; color: #1f1e1d; }
.f-home-card--ok { background: color-mix(in oklab, #34d399 16%, var(--f-home-ph)); border: 1px solid color-mix(in oklab, #34d399 40%, transparent); }
.f-home-card--lista { background: var(--f-home-ph2); border: 1px solid var(--f-home-ph-line); }
.f-home-card--cifra { background: color-mix(in oklab, var(--f-sig) 24%, var(--f-home-ph)); border: 1px solid color-mix(in oklab, var(--f-sig) 50%, transparent); }
.f-home-card__row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.f-home-card__row--base { align-items: baseline; }
.f-home-card__k { font-size: 9px; opacity: 0.7; }
.f-home-card__st { font-size: 9px; padding: 2px 6px; border-radius: 999px; background: rgba(127, 127, 127, 0.16); white-space: nowrap; }
.f-home-card--doc .f-home-card__st { background: #dcefe6; color: #0f6b52; }
.f-home-card__t { font-size: 14px; font-weight: 500; letter-spacing: -0.01em; }
.f-home-card__d { font-size: 11.5px; opacity: 0.75; }
.f-home-card__n { font-size: 19px; letter-spacing: -0.03em; white-space: nowrap; }
.f-home-card--cifra .f-home-card__n { font-size: 24px; }

/* Entradas (las pone el JS en orden) */
.f-js .f-home-phone__feed .is-pend { opacity: 0; transform: translateY(8px) scale(0.985); }
.f-home-phone__feed > * { transition: opacity 0.4s var(--f-ease), transform 0.4s var(--f-ease); }

/* Compositor */
.f-home-comp { flex: none; }
.f-home-comp__box {
  display: flex; flex-direction: column; gap: 10px; padding: 11px 12px 9px;
  border-radius: 22px; background: var(--f-home-ph2); border: 1px solid var(--f-home-ph-line);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.f-home-comp__txt {
  min-height: 19px; font-size: 13px; line-height: 1.45; color: var(--f-home-ph-dim);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.f-home-comp.is-escribe .f-home-comp__txt { color: var(--f-home-ph-ink); }
.f-home-comp.is-escribe .f-home-comp__txt::after {
  content: ""; display: inline-block; width: 2px; height: 14px; margin-inline-start: 2px; vertical-align: -2px;
  background: var(--f-home-ph-acc); animation: f-blink 0.9s steps(2) infinite;
}
.f-home-comp.is-dicta .f-home-comp__box { border-color: color-mix(in oklab, var(--f-home-ph-acc) 55%, transparent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--f-home-ph-acc) 14%, transparent); }
.f-home-comp__bar { display: flex; align-items: center; gap: 10px; }
.f-home-comp__plus, .f-home-comp__mic, .f-home-comp__go { flex: none; }
.f-home-comp__plus, .f-home-comp__mic { width: 18px; height: 18px; background: var(--f-home-ph-dim); }
.f-home-comp__plus { -webkit-mask: var(--f-home-i-plus) center / contain no-repeat; mask: var(--f-home-i-plus) center / contain no-repeat; }
.f-home-comp__mic { margin-inline-start: auto; -webkit-mask: var(--f-home-i-mic) center / contain no-repeat; mask: var(--f-home-i-mic) center / contain no-repeat; }
.f-home-comp__go {
  position: relative; width: 30px; height: 30px; border-radius: 50%; background: var(--f-home-ph-ink);
  transition: background-color 0.25s ease, transform 0.25s var(--f-ease);
}
.f-home-comp__go::before {
  content: ""; position: absolute; inset: 7px; background: var(--f-home-ph);
  -webkit-mask: var(--f-home-i-voz) center / contain no-repeat; mask: var(--f-home-i-voz) center / contain no-repeat;
}
.f-home-comp.is-dicta .f-home-comp__go { background: var(--f-home-ph-acc); }
.f-home-comp.is-dicta .f-home-comp__go::before { background: #fff; }
.f-home-comp.is-envia .f-home-comp__go { background: var(--f-home-ph-acc); transform: scale(0.88); }
.f-home-comp.is-envia .f-home-comp__go::before { background: #fff; -webkit-mask-image: var(--f-home-i-up); mask-image: var(--f-home-i-up); }
.f-home-comp__waves { display: flex; align-items: center; gap: 3px; height: 18px; opacity: 0; transition: opacity 0.25s ease; }
.f-home-comp.is-dicta .f-home-comp__waves { opacity: 1; }
.f-home-comp__w { width: 3px; height: 18px; border-radius: 2px; background: var(--f-home-ph-acc); transform: scaleY(0.25); }
.f-home-comp.is-dicta .f-home-comp__w { animation: f-wave 0.9s ease-in-out var(--f-dl, 0s) infinite; }
.f-home-comp__w--1 { --f-dl: 0.12s; }
.f-home-comp__w--2 { --f-dl: 0.24s; }
.f-home-comp__w--3 { --f-dl: 0.36s; }
.f-home-comp__w--4 { --f-dl: 0.48s; }
.f-home-phone__sample { display: block; margin-top: 14px; text-align: end; }

/* Iconos de línea (máscaras; `img-src data:` lo permite la CSP). */
.f-home-phone {
  --f-home-i-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  --f-home-i-mic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0M12 18v3'/%3E%3C/svg%3E");
  --f-home-i-voz: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M4 10v4M8 7v10M12 4v16M16 7v10M20 10v4'/%3E%3C/svg%3E");
  --f-home-i-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M6 11l6-6 6 6'/%3E%3C/svg%3E");
  --f-home-i-ok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --f-home-i-plug: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 2v5M15 2v5M6 7h12v4a6 6 0 0 1-12 0zM12 17v5'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  .f-home-phone__feed, .f-home-phone__feed > *, .f-home-msg__w { transition: none; }
}