/* Shared phone panel (v10/v11/v12); independent of SIP media. */
.wp10-orb{display:none;position:relative;isolation:isolate;overflow:hidden;flex:none;width:42px;height:42px;border-radius:50%;margin-right:11px;background:var(--dt-voice-orb)}
.wp10.has-transcription .wp10-orb{display:block}
.wp10-orb::before{content:'';position:absolute;inset:-10%;background:var(--dt-orb-teal);border-radius:50%;animation:wp12-orb 4s ease-in-out both}
.wp10-orb[data-live=true]{transform:scale(calc(1 + var(--wp-voice-level,0)*.14));transition:transform 80ms ease-out}
.wp10-orb[data-live=true]::before{animation:none;transform:rotate(calc(var(--wp-voice-level,0)*160deg)) scale(calc(1 + var(--wp-voice-level,0)*.16));transition:transform 80ms ease-out}
.wp10-orb[data-speaker=user]::before{background:var(--dt-orb-amber)}
.wp10-orb[data-speaker=both]::before{background:var(--dt-orb-v4lime)}
@media(prefers-reduced-motion:reduce){.wp10-orb[data-live=true],.wp10-orb[data-live=true]::before{transform:none!important}}
.wp10-orb::after{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(ellipse at 30% 20%,color-mix(in srgb,var(--dt-on-color) 65%,transparent),transparent 52%);box-shadow:inset 0 0 6px color-mix(in srgb,var(--dt-on-color) 30%,transparent)}
@keyframes wp12-orb{from{transform:rotate(-80deg) scale(.9)}to{transform:rotate(80deg) scale(1)}}
body.wp10-enabled.wf-crm.wf-phone .phone.js-phone.phone--opened,
body.wp10-enabled .phone.js-phone,
body.wp10-enabled .phone.js-phone.phone--opened {
    position:fixed!important;left:-10000px!important;top:0!important;right:auto!important;bottom:auto!important;
    width:1px!important;height:1px!important;min-height:1px!important;max-height:1px!important;overflow:hidden!important;
    opacity:0!important;pointer-events:none!important;display:block!important;visibility:visible!important;transform:none!important;
}
body.wp10-enabled .phone.js-phone .phone__body,
body.wp10-enabled #webphoneiframe {width:1px!important;height:1px!important;min-height:1px!important;display:block!important}
body.wp10-enabled #wfIsland,body.wp10-enabled #wfPhoneNotice,body.wp10-enabled #wfPhoneHost,
body.wp10-enabled #webphone_noti_incomingcalldiv {display:none!important}
.wp10 {
    --wp-bg:var(--dt-surface,#fff);--wp-fg:var(--dt-text,#111110);--wp-muted:var(--dt-muted,#5f5f5c);
    --wp-line:var(--dt-border,#e8e8e7);--wp-surface:var(--dt-surface-2,#eeeeec);--wp-hover:var(--dt-hover,#f4f4f3);--wp-blue:var(--dt-cta,#111110);
    /* 26-10 (Marc): el panel cuelga del bloque derecho del topbar (bajo el icono, como la campana) y, con la columna de Dalia abierta,
       se corre a su izquierda (body.dalia-docked → right = --dalia-dock-w + 10). z 2995: por encima de modales y de la hoja de Dalia en
       móvil (z 2990: una entrante no puede quedar debajo) y por debajo del topbar (3000): sus desplegables (campana, perfil) abren encima */
    position:fixed;z-index:2995;top:calc(var(--dt-topbar-h,44px) + 6px);right:10px;width:360px;max-width:calc(100vw - 20px);max-height:calc(100dvh - var(--dt-topbar-h,44px) - 16px);
    display:flex;flex-direction:column;overflow:hidden;background:var(--wp-bg);color:var(--wp-fg);
    border:1px solid var(--wp-line);border-radius:16px;box-shadow:none;
    font-family:var(--font-sans,inherit);font-size:14px;line-height:1.45;text-align:left;
}
.wp10[hidden],.wp10 [hidden] {display:none!important}
.wp10 *, .wp10 *:before,.wp10 *:after {box-sizing:border-box}
.wp10 button,.wp10 input,.wp10 select {font-family:inherit;font-size:inherit;color:inherit}
.wp10 button {cursor:pointer;touch-action:manipulation}
.wp10 button:disabled {cursor:default;opacity:.42}
.wp10 button:focus-visible,.wp10 input:focus-visible,.wp10 select:focus-visible {outline:2px solid var(--wp-blue);outline-offset:3px}
.wp10 button {border:0;background:none}
.wp10 button svg {flex-shrink:0}
.wp10-header {display:flex;align-items:center;justify-content:space-between;padding:18px 20px 16px;flex-shrink:0}
.wp10-brand {display:flex;flex-direction:column;gap:4px}.wp10-brand strong {font-size:15px;font-weight:600;letter-spacing:-.2px}
.wp10 .wp10-icon {display:grid;place-items:center;width:32px;height:32px;border-radius:8px;padding:0;color:var(--wp-muted)}
.wp10 .wp10-icon:hover {background:var(--wp-surface);color:var(--wp-fg)}
.wp10-connection {display:flex;align-items:center;gap:6px;font-size:11px;font-weight:400;color:var(--wp-muted)}
.wp10-dot {width:5px;height:5px;border-radius:50%;background:var(--wp-muted)}.wp10-connection[data-ready=true] .wp10-dot{background:var(--dt-success,#16835b)}
.wp10-tabs {display:flex;justify-content:space-between;padding:0 24px;border-bottom:1px solid var(--wp-line);gap:24px;flex-shrink:0}
.wp10-tabs button {padding:11px 0 13px;color:var(--wp-muted);font-size:12px;position:relative;border-radius:0;font-weight:500}
.wp10-tabs button[aria-selected=true] {color:var(--wp-fg);font-weight:600}
.wp10-tabs button[aria-selected=true]:after {content:'';position:absolute;bottom:-1px;height:2px;border-radius:2px;left:0;right:0;background:var(--wp-fg)}
.wp10-content {padding:18px 20px 12px;overflow:auto;overscroll-behavior:contain;min-height:0;scrollbar-width:thin;scrollbar-color:var(--wp-line) transparent}
.wp10-label {display:block;font-size:11px;font-weight:550;color:var(--wp-muted);margin:0 0 7px}
.wp10 select {height:40px;width:100%;border:1px solid var(--wp-line);border-radius:9px;padding:0 12px;background:var(--wp-bg);font-size:12px;outline-offset:2px}
.wp10 select:disabled{opacity:.55}.wp10-caller{margin-bottom:20px}
.wp10-cid-hint{margin:14px auto 0;max-width:280px;font-size:11px;color:var(--dt-warning,#b86513);line-height:1.5;text-align:center}
.wp10-number {position:relative;display:grid;grid-template-columns:32px minmax(0,1fr) 32px;align-items:center;gap:8px 0;margin:0 0 18px}
.wp10-number input {grid-column:2;width:100%;min-width:0;padding:8px 0;text-align:center;background:none;border:0;font-size:25px;font-weight:500;letter-spacing:-.7px;font-variant-numeric:tabular-nums;outline-offset:3px}
.wp10-number input::placeholder {font-size:16px;letter-spacing:-.2px;color:var(--wp-muted);font-weight:400;opacity:1}
.wp10-number .wp10-icon{grid-column:3;width:32px}.wp10-number .wp10-icon svg{width:18px}
.wp10-keypad {display:grid;grid-template-columns:repeat(3,60px);justify-content:center;gap:10px 24px;padding:0 0 20px}
.wp10-keypad button {display:flex;flex-direction:column;align-items:center;justify-content:center;height:60px;border-radius:50%;color:var(--wp-fg);padding:0;background:var(--wp-surface);transition:background-color var(--dt-dur-1,110ms),transform var(--dt-dur-1,110ms)}
.wp10-keypad button:hover {background:var(--wp-hover)}.wp10-keypad button:active{background:var(--wp-line)}
.wp10-keypad button>span {font-size:25px;font-weight:400;line-height:1.05;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.wp10-keypad small {display:block;min-height:11px;font-size:8px;font-weight:550;line-height:1;letter-spacing:1.1px;margin-top:5px;color:var(--wp-muted)}
.wp10 .wp10-action {display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--wp-line);padding:10px 12px;border-radius:9px;font-size:12px;font-weight:550;min-height:40px;line-height:1.3}
.wp10 .wp10-action:hover:not(:disabled) {background:var(--wp-surface)}
.wp10 .wp10-wide {width:100%}
.wp10 .wp10-primary {background:var(--dt-cta,#111110);color:var(--dt-cta-fg,#fff);border-color:transparent;min-height:43px}
.wp10 .wp10-primary:hover:not(:disabled) {background:var(--dt-cta-hover,#2b2b29);border-color:transparent}
.wp10-dial-actions{display:flex;justify-content:center}
.wp10 .wp10-dial-call{width:60px;height:60px;min-height:60px;padding:0;border-radius:50%;transition:background-color var(--dt-dur-1,110ms),transform var(--dt-dur-1,110ms)}
.wp10-dial-call svg{width:24px;height:24px}
.wp10-dial-call span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.wp10-keypad button:active:not(:disabled),.wp10-dial-call:active:not(:disabled){transform:scale(.95)}
.wp10 .wp10-secondary {background:var(--wp-surface)}
.wp10 .wp10-danger {background:#dc3f4d;border-color:#dc3f4d;color:#fff}
.wp10 .wp10-danger:hover:not(:disabled) {background:#c9303e;border-color:#c9303e}
.wp10 .wp10-danger svg {transform:rotate(135deg)}
.wp10 .wp10-danger-soft {color:#cf3746;border-color:#edbfc5;background:transparent}
.wp10 .wp10-danger-soft:hover:not(:disabled) {background:#dc3f4d0d}
.wp10-hint {font-size:10px;line-height:1.5;text-align:center;color:var(--wp-muted);margin:12px 0 0}
.wp10-search {display:flex;align-items:center;gap:9px;padding:10px 12px;border:1px solid var(--wp-line);border-radius:9px;color:var(--wp-muted);margin-bottom:12px}
.wp10-search svg {width:16px;height:16px}.wp10-search input {width:100%;padding:0;border:0;background:none;outline-offset:8px;font-size:12px;min-width:0}.wp10-search input::placeholder{color:var(--wp-muted)}
.wp10-list {min-height:310px}.wp10-row {display:flex;width:100%;align-items:center;gap:11px;padding:13px 0;border-radius:0!important;border-bottom:1px solid var(--wp-line)!important;text-align:left}
.wp10-row:hover {background:var(--wp-surface)}.wp10-row>svg {width:16px;height:16px;color:var(--wp-muted);margin-right:4px}
.wp10-row-avatar {display:grid;place-items:center;width:33px;height:33px;background:var(--wp-surface);border:1px solid var(--wp-line);border-radius:10px;font-size:12px;font-weight:550;flex-shrink:0}
.wp10-row-body {display:block;flex:1;min-width:0}.wp10-row-body strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;font-weight:550;line-height:1.4}.wp10-row-body small{display:block;color:var(--wp-muted);font-size:10px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wp10-history-icon {display:grid;place-items:center;flex-shrink:0;width:28px;height:28px;color:var(--wp-muted)}.wp10-history-icon svg{width:16px;height:16px}.wp10-history-icon.is-missed{color:#bc4c55}.wp10-missed{color:#bc4c55}.wp10-row-meta{color:var(--wp-muted);font-size:10px;font-variant-numeric:tabular-nums;max-width:75px;text-align:right}
/* 26-10: la fila de Recientes es un <div> con botones (llamar, ficha/crear contacto, copiar) */
.wp10-row-actions{display:flex;gap:2px;flex-shrink:0}
.wp10 .wp10-row-actions button{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;color:var(--wp-muted)}
.wp10 .wp10-row-actions button:hover{background:var(--wp-hover);color:var(--wp-fg)}.wp10-row-actions button svg{width:16px;height:16px}
.wp10-section-hint {color:var(--wp-muted);font-size:11px;margin:0 0 6px}
.wp10-empty {display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;min-height:290px;padding:30px 20px;color:var(--wp-muted);gap:12px}
.wp10-empty>svg{width:27px;height:27px;opacity:.65}.wp10-empty strong{font-size:13px;font-weight:500;color:var(--wp-fg)}.wp10-empty p{font-size:12px;line-height:1.6;margin:0;max-width:235px}
.wp10-call {text-align:center;padding:16px;border:0;border-radius:12px}
.wp10-call-summary{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:10px;text-align:left;margin-bottom:20px}
.wp10-avatar {display:grid;place-items:center;grid-row:1/4;width:40px;height:40px;border-radius:50%;background:var(--wp-surface);font-size:14px;font-weight:600}
.wp10-call h2 {grid-column:2;font-size:15px;font-weight:600;letter-spacing:-.2px;margin:0;line-height:1.4;overflow-wrap:anywhere}.wp10-call-number{grid-column:2;font-size:11px;color:var(--wp-muted);margin:3px 0 0;font-variant-numeric:tabular-nums}.wp10-call-number:empty{display:none}
.wp10-call-cid{grid-column:2;margin:3px 0 0;font-size:11px;color:var(--wp-muted);overflow-wrap:anywhere}.wp10-call-cid:empty{display:none}
.wp10-call-status {grid-column:2;display:flex;flex-wrap:wrap;align-items:center;gap:7px;width:fit-content;max-width:100%;margin:10px 0 0;padding:5px 8px;border-radius:999px;background:var(--wp-surface);font-size:11px;color:var(--wp-muted)}.wp10-call-status time {font-variant-numeric:tabular-nums;color:var(--wp-fg)}.wp10-call-status time:empty{display:none}
.wp10-call-activity{display:flex;align-items:center;gap:2px;height:14px;color:var(--dt-success,#16835b)}
.wp10-call-activity i{display:block;width:2px;height:10px;border-radius:2px;background:currentColor}
.wp10-call-contact{display:flex;justify-content:center;gap:8px;margin:10px 0 10px} /* 07-11 (Marc, «o hazlo más pequeño»): vista de entrante más compacta */ /* 26-10: Ver ficha / Crear contacto (18px abajo: .wp10-call-actions no deja hueco arriba) */
.wp10-call-actions {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin-bottom:24px}
.wp10-call-actions .wp10-action {flex-direction:column;border:0;background:transparent;gap:8px;min-height:74px;font-size:10px;padding:4px 0;border-radius:8px}
.wp10-call-actions .wp10-action svg{width:44px;height:44px;padding:12px;border-radius:50%;background:var(--wp-surface)}
.wp10-call-actions .wp10-action:hover:not(:disabled){background:transparent}
.wp10-call-actions .wp10-action:hover:not(:disabled) svg{background:var(--wp-hover)}
.wp10-call-actions .wp10-action[aria-pressed=true] svg{background:var(--dt-cta);color:var(--dt-cta-fg)}
.wp10-call-actions .wp10-action[aria-pressed=true]:hover:not(:disabled) svg{background:var(--dt-cta-hover)}
.wp10-tones {border-top:1px solid var(--wp-line);padding-top:12px;margin-bottom:14px}.wp10-tones-label{color:var(--wp-muted);font-size:11px;margin-bottom:10px}.wp10-tones .wp10-keypad{padding:0;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.wp10-tones .wp10-keypad button{height:40px;border-radius:8px}.wp10-tones .wp10-keypad button>span{font-size:19px}
.wp10-transfer {padding:14px;text-align:left;border:1px solid var(--wp-line);border-radius:11px;margin:0 0 16px;background:var(--wp-surface)}.wp10-transfer select{background:var(--wp-bg);margin-bottom:9px}.wp10-transfer .wp10-label{color:var(--wp-fg);font-size:11px}
.wp10-consult {border:1px solid var(--wp-line);padding:16px;border-radius:12px;text-align:left;margin-bottom:18px}.wp10-consult>strong{font-size:13px}.wp10-consult>p{font-size:11px;color:var(--wp-muted);line-height:1.5;margin:6px 0 14px}.wp10-consult-actions{display:flex;gap:7px}.wp10-consult-actions .wp10-action{flex:1;font-size:10px;padding:9px 6px}.wp10-consult-actions svg{width:15px;height:15px}
.wp10-incoming {display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px;margin-bottom:4px} /* 07-11 (Marc): arriba, bajo el número */
.wp10-offline {text-align:center;padding:35px 10px 25px}.wp10-offline-icon{display:grid;place-items:center;margin:0 auto 20px;width:56px;height:56px;background:var(--wp-surface);border-radius:17px;color:var(--wp-muted)}.wp10-offline h2{font-size:20px;letter-spacing:-.5px;font-weight:550;margin:0 0 10px}.wp10-offline p{color:var(--wp-muted);font-size:12px;max-width:260px;margin:0 auto 28px;line-height:1.7}
.wp10-footer {flex-shrink:0;padding:14px 24px;border-top:1px solid var(--wp-line);background:var(--wp-surface)}.wp10-notice {color:var(--wp-muted);font-size:11px;line-height:1.6;overflow-wrap:anywhere}.wp10-footer .wp10-action{margin-top:9px}.wp10-footer .wp10-action:first-child{margin-top:0}
@media(min-width:641px){body.dalia-docked .wp10{right:min(calc(var(--dalia-dock-w,420px) + 10px),calc(100vw - 370px))}}
@media(max-width:600px){.wp10{top:calc(var(--dt-topbar-h,48px) + 6px);right:10px;left:auto;width:360px;max-height:calc(100dvh - var(--dt-topbar-h,48px) - 16px)}.wp10-list{min-height:250px}}
@media(max-height:720px){.wp10{max-height:calc(100dvh - var(--dt-topbar-h,44px) - 14px)}.wp10-keypad{grid-template-columns:repeat(3,48px);gap:6px 24px;padding-bottom:14px}.wp10-keypad button{height:48px}.wp10-keypad button>span{font-size:22px}.wp10-content{padding-top:12px}.wp10-number{margin-bottom:12px;gap:4px 0}.wp10-header{padding-top:12px;padding-bottom:10px}.wp10 .wp10-dial-call{width:52px;height:52px;min-height:52px}.wp10-call-status{margin-bottom:20px}}
@media(prefers-reduced-motion:no-preference){.wp10.is-open{animation:wp10-reveal .15s ease-out}@keyframes wp10-reveal{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}}

body.wp10-enabled #callerID[data-webphone-active=true] {color:#3264e8!important;background:#3264e810;border-radius:8px;box-shadow:inset 0 0 0 1px #3264e82b}
body.wp10-enabled #callerID[data-webphone-owned=false] {color:#d97706!important}
[data-bs-theme=dark] body.wp10-enabled #callerID[data-webphone-owned=false] {color:#f59e0b!important}
/* 26-10: punto de estado en el icono del teléfono (off ámbar · loading parpadea · ready verde · call rojo) */
body.wp10-enabled #callerID{position:relative}
body.wp10-enabled #callerID[data-webphone-phase]::after{content:'';position:absolute;right:7px;top:7px;width:7px;height:7px;border-radius:50%;background:#d97706;box-shadow:0 0 0 2px var(--bs-body-bg,#fff)}
body.wp10-enabled #callerID[data-webphone-phase=ready]::after{background:#16a34a}
body.wp10-enabled #callerID[data-webphone-phase=call]::after{background:#dc2626}
body.wp10-enabled #callerID[data-webphone-phase=loading]::after{animation:wp10-blink 1.1s ease-in-out infinite}
@keyframes wp10-blink{50%{opacity:.25}}

.wp10-network {margin-top:20px;padding-top:6px;border-top:1px solid var(--wp-line)}
.wp10 .wp10-network-open {display:flex;align-items:center;gap:8px;width:100%;min-height:40px;padding:8px 2px;color:var(--wp-muted);font-size:12px;text-align:left;border-radius:6px}
.wp10 .wp10-network-open:hover{color:var(--wp-fg);background:var(--wp-hover)}
.wp10-network-open>svg {width:14px;height:14px}.wp10-network-open>svg:last-child{margin-left:auto;width:12px;height:12px}.wp10-network-open[aria-expanded=true]>svg:last-child{transform:rotate(90deg)}
#wp10-network-detail {padding:10px 0 4px}.wp10 .wp10-assist{display:flex;width:100%;min-height:36px;align-items:center;justify-content:space-between;gap:12px;padding:0;text-align:left;font-size:12px}
.wp10-switch{width:28px;height:16px;background:var(--wp-line);border-radius:10px;padding:2px;flex-shrink:0}.wp10-switch:after{content:'';display:block;width:12px;height:12px;border-radius:50%;background:var(--wp-bg);box-shadow:0 1px 3px #0002}.wp10-assist[aria-pressed=true] .wp10-switch{background:var(--wp-blue)}.wp10-assist[aria-pressed=true] .wp10-switch:after{transform:translateX(12px);background:var(--dt-cta-fg,#fff)}
.wp10-network-hint{font-size:10px;color:var(--wp-muted);margin:7px 0 12px}.wp10-network-result{font-size:10px;color:var(--wp-muted);margin-top:11px;line-height:1.6}.wp10-network-result:empty{display:none}.wp10-route{display:flex;justify-content:space-between;gap:12px}.wp10-route strong{font-weight:550;color:var(--wp-fg)}.wp10-network-result dl{display:flex;gap:16px;flex-wrap:wrap;margin:8px 0 0}.wp10-network-result dl:empty{display:none}.wp10-network-result dt{font-weight:400;font-size:9px}.wp10-network-result dd{font-variant-numeric:tabular-nums;color:var(--wp-fg);margin:0;font-size:11px}
/* 26-10 (Marc): inputs del panel sin la caja global del CRM (datalyse-modern.css pinta fondo+borde en input[type=tel|search] con !important) */
#webphone-panel .wp10-number input[type="tel"],#webphone-panel .wp10-search input[type="search"]{--dt-field-surface:transparent;--dt-field-bg:transparent;--dt-field-hover:transparent;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;height:auto!important}
#webphone-panel .wp10-number:focus-within{background:var(--dt-hover);border-radius:10px}
@media(forced-colors:active){#webphone-panel .wp10-number:focus-within{outline:1px solid Highlight!important}}
.wp10 .wp10-number input[type="tel"]{padding:8px 0!important}.wp10 .wp10-search input[type="search"]{padding:0!important}
.wp10-search:focus-within{border-color:var(--wp-blue)}
/* selector de país (banderas de /cssyapp/flag-icons.css, perezosas) */
#wp10-view-dial{position:relative}
.wp10-country{display:flex;grid-column:1/-1;justify-self:center;align-items:center;gap:6px;height:32px;padding:0 8px;border:0;border-radius:8px;background:transparent;color:var(--wp-muted);font-size:12px;font-weight:500;font-variant-numeric:tabular-nums;cursor:pointer}
.wp10-country:hover{background:var(--wp-hover)}.wp10-country>svg{width:14px;height:14px;color:var(--wp-muted);transform:rotate(90deg)}
.wp10-country .fi,.wp10-country-row .fi{width:20px;height:15px;border-radius:3px;flex-shrink:0;background-size:cover}
.wp10-country-pop{position:absolute;top:36px;left:0;right:0;z-index:6;padding:10px;border:1px solid var(--dt-border-strong);border-radius:12px;background:var(--wp-bg);box-shadow:none}
.wp10-country-pop .wp10-search{margin-bottom:8px}
.wp10-country-list{max-height:250px;overflow:auto;overscroll-behavior:contain}
.wp10-country-row{display:flex;align-items:center;gap:10px;width:100%;padding:9px 8px;border:0;background:none;border-radius:8px;text-align:left;font-size:12px;color:inherit;cursor:pointer}
.wp10-country-row:hover,.wp10-country-row[aria-selected="true"]{background:var(--wp-surface)}
.wp10-country-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wp10-country-code{color:var(--wp-muted);font-variant-numeric:tabular-nums}

@media(prefers-reduced-motion:no-preference){
    .wp10-call-activity i{animation:wp10-activity 1.4s ease-in-out infinite alternate;transform-origin:center}
    .wp10-call-activity i:nth-child(2){animation-delay:-.65s}
    .wp10-call-activity i:nth-child(3){animation-delay:-1.1s}
    .wp10-call-activity i:nth-child(4){animation-delay:-.3s}
    #wp10-network-detail:not([hidden]){animation:wp10-reveal .16s ease-out}
    @keyframes wp10-activity{from{transform:scaleY(.4)}to{transform:scaleY(1)}}
}
@media(prefers-reduced-motion:reduce){
    .wp10 *, .wp10 *::before, .wp10 *::after{animation:none!important;transition:none!important}
    .wp10-keypad button:active:not(:disabled),.wp10-dial-call:active:not(:disabled){transform:none}
}

/* 26-10 (Marc): barra de llamada en el topbar (#webphone-callbar, la pinta panel.js delante del icono del teléfono). Dirección de diseño:
   línea de 1 px, sin sombra, tinta y grises; el rojo solo en Colgar/Rechazar y el verde en Contestar y en el punto de estado */
.wp10-bar{display:flex;align-items:center;gap:1px;height:32px;max-width:min(640px,52vw);margin-right:4px!important;padding:0 2px 0 0;border:1px solid var(--dt-border-strong,#cfd3da);border-radius:8px;background:var(--dt-surface,#fff);font-family:inherit;font-size:12.5px;line-height:1}
.wp10-bar[hidden]{display:none!important}
.wp10-bar .wp10-bar-info{display:flex;align-items:center;gap:7px;min-width:0;height:30px;padding:0 10px;border:0;border-radius:7px;background:none;color:var(--dt-text,#20242c);font:inherit;font-weight:550;cursor:pointer}
.wp10-bar .wp10-bar-info:hover{background:var(--dt-hover,#eef0f4)}
.wp10-bar-dot{flex:none;width:7px;height:7px;border-radius:50%;background:#16a34a}
.wp10-bar[data-phase=incoming] .wp10-bar-dot,.wp10-bar[data-phase=calling] .wp10-bar-dot{animation:wp10-blink 1.1s ease-in-out infinite}
.wp10-bar[data-phase=held] .wp10-bar-dot{background:#d97706}
.wp10-bar-who{min-width:0;max-width:360px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* 07-11 (Marc): el número completo, sin cortar */
.wp10-bar-state,.wp10-bar-time{color:var(--dt-muted,#747b88)!important;font-weight:450;font-variant-numeric:tabular-nums;white-space:nowrap}
.wp10-bar-state:empty,.wp10-bar-time:empty{display:none}
.wp10-bar-actions{display:flex;flex:none;gap:1px}
.wp10-bar-actions[hidden]{display:none!important}
.wp10-bar .wp10-bar-actions button{display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:7px;background:none;color:var(--dt-muted,#747b88);cursor:pointer}
.wp10-bar .wp10-bar-actions button:hover:not(:disabled){background:var(--dt-hover,#eef0f4);color:var(--dt-text,#20242c)}
.wp10-bar .wp10-bar-actions button[aria-pressed=true]{background:var(--dt-active,#e4e7ec);color:var(--dt-text,#20242c)}
.wp10-bar .wp10-bar-actions button:disabled{opacity:.4;cursor:default}
.wp10-bar .wp10-bar-actions button svg{width:16px;height:16px}
.wp10-bar .wp10-bar-actions [data-wp-bar=hangup],.wp10-bar .wp10-bar-actions [data-wp-bar=reject]{color:#dc2626}
.wp10-bar .wp10-bar-actions [data-wp-bar=hangup]:hover:not(:disabled),.wp10-bar .wp10-bar-actions [data-wp-bar=reject]:hover:not(:disabled){background:#dc26261a;color:#b91c1c}
.wp10-bar .wp10-bar-actions [data-wp-bar=hangup] svg{transform:rotate(135deg)}
.wp10-bar .wp10-bar-more{margin-left:1px;padding-left:1px;border-left:1px solid var(--dt-border,#e8e8e7)} /* 07-11 (Marc): flechita que baja el panel */
.wp10-bar .wp10-bar-actions [data-wp-bar=toggle] svg{transform:rotate(90deg);transition:transform var(--dt-dur-1,110ms) var(--dt-ease,ease)}
.wp10-bar .wp10-bar-actions [data-wp-bar=toggle][aria-expanded=true] svg{transform:rotate(-90deg)}
.wp10-bar .wp10-bar-actions [data-wp-bar=accept]{color:#16a34a}
.wp10-bar .wp10-bar-actions [data-wp-bar=accept]:hover:not(:disabled){background:#16a34a1a;color:#15803d}
@media(max-width:640px){.wp10-bar{max-width:calc(100vw - 215px)}.wp10-bar-state{display:none}.wp10-bar-who{max-width:150px}.wp10-bar .wp10-bar-info{padding:0 7px;gap:6px}}

/* Shared caller picker floats above the phone, outside its scrolling panel. */
.wp10-caller-dropdown{z-index:3000!important}
.wp10 .wp10-caller .dui-select{width:100%}
/* Match shared dropdown surfaces; focus belongs to the search container. */
.wp10 .wp10-country-pop{background:var(--dt-overlay,var(--wp-bg));border-color:var(--wp-line);color:var(--wp-fg)}
#webphone-panel .wp10-country-pop .wp10-search,
#webphone-panel .wp10-country-pop .wp10-search:focus-within{background:var(--wp-surface);border-color:transparent!important;outline:0!important;box-shadow:none!important}
#webphone-panel .wp10-country-pop .wp10-search input[type="search"],
#webphone-panel .wp10-country-pop .wp10-search input[type="search"]:is(:hover,:focus,:focus-visible,:active){border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important}
#webphone-panel .wp10-country-pop .wp10-search:focus-within{background:var(--wp-hover)}
@media(forced-colors:active){#webphone-panel .wp10-country-pop .wp10-search:focus-within{outline:1px solid Highlight!important}}
.wp10 .wp10-country-row:hover,.wp10 .wp10-country-row[aria-selected="true"]{background:var(--wp-hover)}

/* === ElevenLabs v4 Compact Vertical Mini-Phone + Expandable Topbar Pill === */
.wp10 {
    /* 08-11 (Marc, con el panel medido en su Chrome: 268 px y el número con 107 px, «apenas caben 8 números»): este !important fijaba
       268 px y se tragó TODOS los anchos pedidos el 07-11 (400 → 440 → 480 → 540 → 600, reglas sin !important más abajo, que nunca
       se aplicaron). El ancho del panel se decide AQUÍ: 360 px (un poco más ancho que los 268 que se veían); en ventanas estrechas
       lo recorta max-width (100vw - 20px) */
    width: 360px !important;
    border-radius: 18px !important;
    border: 0 !important;
    box-shadow: 0 18px 42px -10px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.04) !important;
}
.wp10-header {
    padding: 12px 14px 10px !important;
}
.wp10-brand strong {
    font-size: 13.5px !important;
    letter-spacing: -0.02em !important;
}
.wp10-tabs {
    margin: 0 12px 6px !important;
    padding: 3px !important;
    border-bottom: 0 !important;
    background: var(--dt-surface-2) !important;
    border-radius: 9px !important;
    gap: 2px !important;
}
.wp10-tabs button {
    flex: 1 1 0 !important;
    padding: 5px 6px !important;
    border-radius: 7px !important;
    font-size: 11px !important;
    text-align: center !important;
}
.wp10-tabs button[aria-selected="true"] {
    background: var(--wp-bg, #ffffff) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important;
}
.wp10-tabs button[aria-selected="true"]::after {
    display: none !important;
}
.wp10-content {
    padding: 10px 14px 12px !important;
}
.wp10-caller {
    margin-bottom: 12px !important;
}
.wp10-number {
    margin: 0 0 10px !important;
}
.wp10-number input {
    font-size: 20px !important;
    padding: 4px 0 !important;
}
.wp10-keypad {
    grid-template-columns: repeat(3, 44px) !important;
    gap: 8px 16px !important;
    padding: 0 0 12px !important;
}
.wp10-keypad button {
    height: 44px !important;
    background: transparent;
    border: 0;
}
.wp10-keypad button > span {
    font-size: 18px !important;
}
.wp10-keypad small {
    font-size: 7px !important;
    margin-top: 2px !important;
}
.wp10 .wp10-dial-call {
    width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
}
.wp10 .wp10-dial-call svg {
    width: 20px !important;
    height: 20px !important;
}
.wp10-list {
    min-height: 230px !important;
}
@media (min-width: 641px) {
    body.dalia-docked .wp10 {
        right: min(calc(var(--dalia-dock-w, 360px) + 12px), calc(100vw - 280px)) !important;
    }
}

/* Expandable Topbar Phone Pill (#callerID.wp-top-pill) */
#botonwebphonetoparri #callerID.wp-top-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0 !important;
    height: 30px !important;
    padding: 0 9px !important;
    border-radius: 999px !important;
    border: 1px solid var(--dt-border-strong) !important;
    background: var(--dt-surface) !important;
    color: var(--dt-text) !important;
    box-shadow: none !important;
    transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1) !important;
    overflow: hidden !important;
}
#botonwebphonetoparri #callerID.wp-top-pill .wp-top-pill__label {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    font-size: 11.5px;
    font-weight: 500;
    transition: max-width 0.22s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.18s ease, margin 0.18s ease;
}
#botonwebphonetoparri #callerID.wp-top-pill .wp-top-pill__bars {
    display: inline-flex;
    align-items: center;
    gap: 1.5px;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-width 0.22s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.18s ease, margin 0.18s ease;
}
#botonwebphonetoparri #callerID.wp-top-pill .wp-top-pill__bars i {
    display: block;
    width: 1.5px;
    height: 9px;
    border-radius: 99px;
    background: currentColor;
}
#botonwebphonetoparri #callerID.wp-top-pill:hover,
#botonwebphonetoparri #callerID.wp-top-pill:focus-visible,
#botonwebphonetoparri #callerID.wp-top-pill[data-webphone-active="true"],
#botonwebphonetoparri #callerID.wp-top-pill[data-webphone-phase="call"] {
    padding: 0 11px !important;
    border-color: var(--dt-border-strong) !important;
}
#botonwebphonetoparri #callerID.wp-top-pill:hover,
#botonwebphonetoparri #callerID.wp-top-pill:focus-visible {
    background: var(--dt-surface-2) !important;
}
#botonwebphonetoparri #callerID.wp-top-pill[data-webphone-active="true"] {
    background: var(--dt-cta) !important;
    border-color: var(--dt-border-strong) !important;
    color: var(--dt-cta-fg) !important;
    box-shadow: none !important;
}
#botonwebphonetoparri #callerID.wp-top-pill[data-webphone-active="true"]:hover {
    background: var(--dt-cta-hover) !important;
}
#botonwebphonetoparri #callerID.wp-top-pill:is(.text-danger, [data-webphone-owned="false"]) {
    color: var(--dt-danger) !important;
}
#botonwebphonetoparri #callerID.wp-top-pill:focus-visible {
    outline: 2px solid var(--dt-focus);
    outline-offset: 2px;
}
@media (forced-colors: active) {
    #botonwebphonetoparri #callerID.wp-top-pill:focus-visible { outline-color: Highlight; }
}
#botonwebphonetoparri #callerID.wp-top-pill:hover .wp-top-pill__label,
#botonwebphonetoparri #callerID.wp-top-pill:focus-visible .wp-top-pill__label,
#botonwebphonetoparri #callerID.wp-top-pill[data-webphone-active="true"] .wp-top-pill__label,
#botonwebphonetoparri #callerID.wp-top-pill[data-webphone-phase="call"] .wp-top-pill__label {
    max-width: 72px;
    opacity: 1;
    margin-left: 6px;
}
#botonwebphonetoparri #callerID.wp-top-pill[data-webphone-phase="call"] .wp-top-pill__bars {
    max-width: 18px;
    opacity: 1;
    margin-left: 5px;
}
.wp10-bar {
    height: 30px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(15, 15, 16, 0.12) !important;
    padding: 0 4px 0 2px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}
.wp10-bar .wp10-bar-info {
    height: 26px !important;
    border-radius: 999px !important;
}
.wp10-bar .wp10-bar-actions button {
    width: 26px !important;
    height: 26px !important;
    border-radius: 999px !important;
}


/* ===== 07-11 (Marc): «selector de país a la derecha del número y lo demás opciones en una tuerca al lado de la X, para ahorrar espacio de largo» =====
   El país va en la misma fila que el número (antes ocupaba una fila entera) y «Más opciones» (Llamar desde, Conexión asistida,
   Comprobar conexión) ya no es un bloque al pie: es la tuerca de la cabecera, que abre un popover bajo ella. */
.wp10-header-acts{display:flex;align-items:center;gap:2px}
.wp10 .wp10-header .wp10-icon[data-wp-action=network][aria-expanded=true]{background:var(--wp-surface);color:var(--wp-fg)}
.wp10 .wp10-network{position:absolute;top:62px;right:12px;left:12px;z-index:7;margin:0;padding:12px 14px 10px;border:1px solid var(--dt-border-strong,#cfd3da);border-radius:12px;background:var(--dt-overlay,var(--wp-bg));box-shadow:none}
.wp10 .wp10-network[hidden]{display:none!important}
.wp10 #wp10-network-detail{padding:0}
.wp10 .wp10-number{grid-template-columns:auto minmax(0,1fr) 32px;gap:0 6px} /* 07-11 (Marc, segundo aviso): el país a la IZQUIERDA del número */
.wp10 .wp10-number input[type="tel"]{grid-column:2;text-align:left!important;padding:8px 4px!important}
.wp10 .wp10-country{grid-column:1;justify-self:start;height:30px;padding:0 6px;border:0;border-radius:8px}
.wp10 .wp10-number .wp10-icon{grid-column:3}
.wp10 .wp10-country-pop{top:44px}

/* ===== 07-11 (Marc, tarde): «un poco más ancho que apenas me cabe el número», «Llamar en verde y Colgar en gris o casi negro, que cuelgo sin querer» ===== */
.wp10{min-height:0} /* 08-11: sin alto mínimo («hazlo menos largo»): el panel mide lo que mide su contenido. El ANCHO lo fija el bloque compacto de arriba (360 px !important); los 400 → 600 que se escribieron aquí el 07-11 nunca se aplicaron */
.wp10-bar-who{max-width:540px}
.wp10-content{flex:1 1 auto}
.wp10 .wp10-number input[type="tel"]{font-size:19px!important;letter-spacing:-.3px} /* 08-11 (Marc): «el texto más pequeño»; antes 22 */
.wp10 .wp10-dial-call,.wp10 .wp10-incoming .wp10-primary{background:#16a34a;border-color:#16a34a;color:#fff}
.wp10 .wp10-dial-call:hover:not(:disabled),.wp10 .wp10-incoming .wp10-primary:hover:not(:disabled){background:#15803d;border-color:#15803d}
.wp10 .wp10-danger{background:#3f3f46;border-color:#3f3f46;color:#fff}
.wp10 .wp10-danger:hover:not(:disabled){background:#27272a;border-color:#27272a}
.wp10 .wp10-danger-soft{color:#52525b;border-color:var(--wp-line);background:transparent}
.wp10 .wp10-danger-soft:hover:not(:disabled){background:var(--wp-hover)}
.wp10-bar .wp10-bar-actions [data-wp-bar=hangup],.wp10-bar .wp10-bar-actions [data-wp-bar=reject]{color:#52525b}
.wp10-bar .wp10-bar-actions [data-wp-bar=hangup]:hover:not(:disabled),.wp10-bar .wp10-bar-actions [data-wp-bar=reject]:hover:not(:disabled){background:var(--dt-hover,#eef0f4);color:#18181b}
[data-bs-theme="dark"] .wp10-bar .wp10-bar-actions [data-wp-bar=hangup],[data-bs-theme="dark"] .wp10-bar .wp10-bar-actions [data-wp-bar=reject]{color:#a1a1aa}
[data-bs-theme="dark"] .wp10-bar .wp10-bar-actions [data-wp-bar=hangup]:hover:not(:disabled),[data-bs-theme="dark"] .wp10-bar .wp10-bar-actions [data-wp-bar=reject]:hover:not(:disabled){color:#fafafa}
/* 08-11 (Marc, «lo de las notificaciones mejor ponlo donde dice Disponible para llamar»): el aviso (Llamando…, El cliente ha colgado,
   Número copiado…) se pinta en el texto de estado de la cabecera, junto al punto; una línea, con puntos suspensivos si no cabe */
.wp10 .wp10-brand{min-width:0;flex:1 1 auto}
.wp10 .wp10-connection{min-width:0}
.wp10 .wp10-connection [data-wp-id=connection-text]{display:block;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 08-11 (Marc, «altura máxima 500 px y que haga scroll si hay más contactos o llamadas, con su respectivo buscador»): el panel no pasa
   de 500 px; en Contactos y Recientes el buscador queda fijo y es la lista la que hace scroll */
.wp10{max-height:min(500px,calc(100dvh - var(--dt-topbar-h,44px) - 16px))}
.wp10 .wp10-list{overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--wp-line) transparent}
/* 08-11 (Marc, «salen dos scroll, el de la lista y ese que no debería»): en Contactos y Recientes el contenido NO hace scroll; la
   sección es una columna flex y la lista ocupa lo que queda bajo el buscador, así solo hay una barra, la de la lista */
.wp10 .wp10-content:has(> [data-wp-id=contacts-view]:not([hidden])),.wp10 .wp10-content:has(> [data-wp-id=history-view]:not([hidden])){display:flex;flex-direction:column;overflow:hidden}
.wp10 [data-wp-id=contacts-view]:not([hidden]),.wp10 [data-wp-id=history-view]:not([hidden]){display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.wp10 [data-wp-id=contacts-view] .wp10-search,.wp10 [data-wp-id=history-view] .wp10-search{flex:0 0 auto}
.wp10 .wp10-list{flex:1 1 auto;min-height:0!important;max-height:none}
/* Keep large dial targets, without decorative boxes. Hover and keyboard focus remain visible. */
.wp10 [data-wp-id=dial-view] .wp10-keypad{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;padding:0 0 14px!important;justify-content:stretch}
.wp10 [data-wp-id=dial-view] .wp10-keypad button{height:56px!important;border-radius:12px!important;border:0!important;background:transparent!important;box-shadow:none!important}
.wp10 [data-wp-id=dial-view] .wp10-keypad button:hover:not(:disabled){background:var(--wp-hover)!important}
.wp10 [data-wp-id=dial-view] .wp10-keypad button>span{font-size:22px!important}
.wp10 [data-wp-id=dial-view] .wp10-keypad small{font-size:8px!important;margin-top:3px!important;letter-spacing:1px}
/* 08-11 (Marc, «la zona donde está el teléfono tiene que ser más ancha, se ve cortado el teléfono»): cuando el panel no cabe a lo
   ancho (ventana o pantalla estrecha: el ancho lo limita 100vw - 20px), el país pasa a su propia línea encima del número y el número
   ocupa todo el ancho; en escritorio (600 px) el país sigue a la izquierda del número */
@media(max-width:600px){
  .wp10 .wp10-number{grid-template-columns:minmax(0,1fr) 32px;gap:4px 6px}
  .wp10 .wp10-country{grid-column:1/-1;justify-self:start}
  .wp10 .wp10-number input[type="tel"]{grid-column:1}
  .wp10 .wp10-number .wp10-icon{grid-column:2}
  .wp10 .wp10-country-pop{top:36px}
}

/* Incoming/active calls stay actionable while a composer dialog is open.
   The compact callbar lives inside the topbar, which the shell normally lowers
   behind modal backdrops. Raise only headers containing a visible callbar;
   unrelated header controls remain noninteractive until the modal closes. */
body.wp10-enabled.modal-open :is(.topbar, .app-header, .header, .navbar.topbar):has(#webphone-callbar:not([hidden])) {
  z-index: 3000 !important;
  pointer-events: none;
}
body.wp10-enabled.modal-open :is(.topbar, .app-header, .header, .navbar.topbar):has(#webphone-callbar:not([hidden])) * {
  pointer-events: none;
}
body.wp10-enabled.modal-open :is(.topbar, .app-header, .header, .navbar.topbar):has(#webphone-callbar:not([hidden])) #webphone-callbar,
body.wp10-enabled.modal-open :is(.topbar, .app-header, .header, .navbar.topbar):has(#webphone-callbar:not([hidden])) #webphone-callbar * {
  pointer-events: auto;
}

.wp10.has-transcription{max-height:min(720px,calc(100dvh - var(--dt-topbar-h,44px) - 16px))}

/* The phone is usable only after preparation and SIP registration finish. */
.wp10-loading{display:flex;align-items:center;justify-content:center;min-height:180px;color:var(--dt-muted)}
.wp10-loading-spinner{width:28px;height:28px;border:3px solid var(--dt-surface-2);border-top-color:var(--dt-muted);border-radius:50%;animation:wp10-loading-spin 1s linear infinite}
@keyframes wp10-loading-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.wp10-loading-spinner{animation:none}}