/* Demo 25 · Recepción y atención al cliente por voz (05-10-2026): el teléfono de la línea del negocio, en oscuro (negro y gris, nada de azul) */
.d-voz .vz-tel{ background:#0b0b0c; color:#f5f5f7; }
.d-voz .vz-tel .m-barra, .d-voz .vz-tel .m-iconos{ color:#f5f5f7; }
.d-voz .vz-logo{ background:var(--tinta); color:#fff; }
.d-voz .vz-logo .ico{ width:26px; height:26px; }

/* Pila de estados: se ve solo el último que ha salido (número → nombre · entrante → en llamada → finalizada · quién habla) */
.vz-pila > span:has(~ span:not(.oculto)){ display:none; }

.vz-cab{ flex:none; padding:8px 22px 0; }
.vz-linea{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:500; color:rgba(245,245,247,.55); }
.vz-linea .ico{ width:12px; height:12px; }

.vz-quien{ flex:none; display:grid; grid-template-columns:52px minmax(0,1fr); grid-template-rows:auto auto; column-gap:12px; row-gap:3px; align-items:center; padding:12px 22px 14px; }
.vz-av{ grid-row:1 / span 2; position:relative; width:52px; height:52px; border-radius:50%; background:#2a2a2d; color:rgba(245,245,247,.7); display:grid; place-items:center; transition:background .4s; }
.vz-av .ico{ width:24px; height:24px; }
.vz-av > span{ display:none; font-size:16px; font-weight:600; color:var(--tinta); }
.vz-av.con-nombre{ background:var(--verde); }
.vz-av.con-nombre > span{ display:block; }
.vz-av.con-nombre .ico{ display:none; }
.vz-tel:not(.en-llamada) .vz-av::before, .vz-tel:not(.en-llamada) .vz-av::after{ content:''; position:absolute; inset:0; border-radius:50%; border:2px solid rgba(60,193,160,.55); animation:vzAro 1.6s ease-out infinite; }
.vz-tel:not(.en-llamada) .vz-av::after{ animation-delay:.8s; }
@keyframes vzAro{ from{ transform:scale(1); opacity:.9; } to{ transform:scale(1.55); opacity:0; } }
.vz-nombre{ font-size:19px; font-weight:600; letter-spacing:-.02em; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vz-sub{ font-size:12.5px; color:rgba(245,245,247,.6); }
.vz-sub i{ font-style:normal; color:#f5f5f7; }
.vz-sub .vz-fin{ color:#ff8b8f; }

/* Quién habla y su onda */
.vz-habla{ flex:none; padding:0 22px 12px; }
.vz-hab{ display:flex; align-items:center; justify-content:space-between; gap:12px; height:28px; }
.vz-hab b{ font-size:11.5px; font-weight:600; white-space:nowrap; }
.vz-hab.a{ color:var(--verde); }
.vz-hab.c{ color:#b4b4bb; }
.vz-hab.espera{ color:rgba(245,245,247,.4); }
.vz-onda{ display:flex; align-items:center; gap:3px; height:26px; }
.vz-onda i{ width:3px; height:var(--h, 14px); border-radius:2px; background:currentColor; transform-origin:50% 50%; animation:vzOnda .82s ease-in-out infinite alternate; }
.vz-onda i:nth-child(3n){ --h:22px; animation-delay:-.2s; } .vz-onda i:nth-child(3n+1){ --h:12px; animation-delay:-.5s; } .vz-onda i:nth-child(4n){ --h:26px; animation-delay:-.35s; }
.vz-onda i:nth-child(5n){ --h:8px; animation-delay:-.65s; } .vz-onda i:nth-child(7n){ --h:18px; animation-delay:-.1s; }
@keyframes vzOnda{ from{ transform:scaleY(.22); } to{ transform:scaleY(1); } }
.vz-hab.espera .vz-onda i{ animation:none; transform:scaleY(.18); }
.vz-tel:has(.vz-fin:not(.oculto)) .vz-habla{ opacity:.3; }
.vz-tel:has(.vz-fin:not(.oculto)) .vz-onda i{ animation:none; transform:scaleY(.18); }

/* Transcripción en directo: cada palabra se enciende al ritmo del audio */
.vz-trans{ flex:1; min-height:0; overflow:hidden; position:relative; margin:0 12px; padding:10px; border-radius:14px; background:#151517; }
.vz-trans-cab{ display:flex; align-items:center; gap:6px; margin:0 0 8px 2px; font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:rgba(245,245,247,.42); }
.vz-trans-cab .ico{ width:12px; height:12px; }
.vz-trans ol{ display:flex; flex-direction:column; gap:7px; }
.vz-l{ padding:7px 9px 8px; border-radius:10px; font-size:12.4px; line-height:1.42; }
.vz-l.a{ background:rgba(60,193,160,.13); }
.vz-l.c{ background:rgba(255,255,255,.065); }
.vz-l-q{ display:block; margin-bottom:2px; font-size:10.5px; font-weight:600; font-variant-numeric:tabular-nums; }
.vz-l.a .vz-l-q{ color:var(--verde); }
.vz-l.c .vz-l-q{ color:#b4b4bb; }
.vz-l p{ margin:0; color:#ececef; }
.vz-l.entra .w{ animation:vzPalabra .28s ease both; animation-delay:var(--d); }
@keyframes vzPalabra{ from{ opacity:.14; } to{ opacity:1; } }

/* Botones de la llamada: suena (rechazar / coger) → en llamada (silencio, altavoz, colgar) */
.vz-pie{ flex:none; display:flex; justify-content:center; gap:26px; padding:14px 0 20px; }
.vz-b{ width:50px; height:50px; border-radius:50%; display:grid; place-items:center; background:#2a2a2d; color:#f5f5f7; }
.vz-b .ico{ width:21px; height:21px; }
.vz-b.no, .vz-b.colgar{ background:#e5484d; }
.vz-b.colgar .ico{ transform:rotate(135deg); }
.vz-b.si{ background:var(--verde); color:var(--tinta); animation:vzLlama 1s ease-in-out infinite; }
@keyframes vzLlama{ 0%,100%{ transform:none; } 25%{ transform:rotate(-9deg); } 75%{ transform:rotate(9deg); } }
.vz-tel:not(.en-llamada) .vz-b.en{ display:none; }
.vz-tel.en-llamada .vz-b.no, .vz-tel.en-llamada .vz-b.si{ display:none; }
.vz-tel:has(.vz-fin:not(.oculto)) .vz-pie{ visibility:hidden; }

/* Al colgar: el WhatsApp de confirmación que le ha mandado */
.vz-wa{ position:absolute; z-index:2; left:12px; right:12px; bottom:16px; padding:10px 12px 11px; border-radius:14px; background:#fff; color:#111b21; box-shadow:0 18px 40px -14px rgba(0,0,0,.7); }
.vz-wa-cab{ display:flex; align-items:center; gap:7px; }
.vz-wa-cab .ico{ width:17px; height:17px; color:#25d366; flex:none; }
.vz-wa-cab b{ font-size:12px; font-weight:600; }
.vz-wa-cab time{ margin-left:auto; font-size:10.5px; color:#667781; }
.vz-wa p{ margin:5px 0 0; font-size:12.2px; line-height:1.42; color:#3b4a54; }

/* La ficha en tu app */
.d-voz .fi-lista > div{ grid-template-columns:104px 1fr; }
.vz-chip-fin{ margin-left:auto; align-self:flex-start; display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:500; padding:4px 9px; border-radius:999px; background:var(--verde-agua); color:var(--verde-osc); white-space:nowrap; }
.vz-chip-fin .ico{ width:11px; height:11px; stroke-width:2.6; }
.d-voz .fi-origen .ico{ color:var(--verde-osc); }
.d-voz .fi-recu .ico{ width:14px; height:14px; }
.vz-res .fi-bloque-cab .chip-ok .ico{ stroke-width:2; }