Cambios del 06/02/2026

Co-authored-by: Cursor <cursoragent@cursor.com>

Custom/installer/custom.css

@@ -3565,6 +3565,7 @@ body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) table.realt
 
 /* Ocultar imagen solo en estos botones (texto con ::before); los logos (Tabs, LoadingBox) se mantienen */
 #vicidial_form #DiaLControl > a > img,
+#vicidial_form #DiaLControl > img,
 #vicidial_form #RecorDControl > a > img,
 #vicidial_form #RecorDControl > img,
 #vicidial_form #StRecorDControl > img,
@@ -3573,7 +3574,9 @@ body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) table.realt
 #vicidial_form #WebFormSpanTwo > img,
 #vicidial_form #WebFormSpanTwo > a > img,
 #vicidial_form #ParkControl > img,
+#vicidial_form #ParkControl > a > img,
 #vicidial_form #XferControl > img,
+#vicidial_form #HangupControl > a > img,
 #vicidial_form #HangupControl > img,
 #vicidial_form #SendDTMF > a > img {
     display: none !important;
@@ -3585,17 +3588,23 @@ body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) table.realt
 }
 /* Texto en lugar de imagen solo en estos botones (logos NO) */
 #vicidial_form #DiaLControl > a::before { content: "Dial Next Number"; }
+#vicidial_form #DiaLControl > a:has(img[alt="You are paused"])::before { content: "YOU ARE PAUSED"; }
+#vicidial_form #DiaLControl > a:has(img[alt="You are active"])::before { content: "YOU ARE ACTIVE"; }
+/* Cuando DiaLControl solo tiene img (sin <a>): mostrar texto para no ver la imagen */
+#vicidial_form #DiaLControl:not(:has(> a))::before { content: "Dial Next Number"; }
 #vicidial_form #RecorDControl > a:not(:has(img[alt="Stop Recording"]))::before { content: "Start Recording"; }
 #vicidial_form #RecorDControl > a:has(img[alt="Stop Recording"])::before { content: "Stop Recording"; }
 #vicidial_form #StRecorDControl::before { content: "Start Stereo Recording"; }
 #vicidial_form #WebFormSpan::before { content: "Web Form"; }
 #vicidial_form #WebFormSpanTwo::before { content: "Web Form 2"; }
 #vicidial_form #ParkControl::before { content: "Park Call"; }
+#vicidial_form #ParkControl:has(> a)::before { content: "Grab Parked Call"; }
 #vicidial_form #XferControl::before { content: "Transfer - Conference"; }
 #vicidial_form #HangupControl::before { content: "Hangup Customer"; }
 #vicidial_form #SendDTMF > a::before { content: "Send DTMF"; }
 /* Contenedores de botones con texto: display para que se vea el ::before */
 #vicidial_form #DiaLControl > a,
+#vicidial_form #DiaLControl:not(:has(> a)),
 #vicidial_form #RecorDControl > a,
 #vicidial_form #SendDTMF > a { display: inline-block !important; }
 #vicidial_form #StRecorDControl,
@@ -3606,6 +3615,7 @@ body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) table.realt
 #vicidial_form #HangupControl { display: inline-block !important; }
 /* Estilo del texto (::before) solo en estos botones */
 #vicidial_form #DiaLControl > a::before,
+#vicidial_form #DiaLControl:not(:has(> a))::before,
 #vicidial_form #RecorDControl > a::before,
 #vicidial_form #SendDTMF a::before,
 #vicidial_form #StRecorDControl::before,
@@ -3793,6 +3803,7 @@ body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) table.realt
     box-shadow: 2px 0 8px rgba(0, 0, 0, 0.04);
 }
 #vicidial_form #DiaLControl > a,
+#vicidial_form #DiaLControl:not(:has(> a)),
 #vicidial_form #RecorDControl > a,
 #vicidial_form #SendDTMF > a {
     display: block;
@@ -3836,6 +3847,41 @@ body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) table.realt
     transform: translateY(-1px);
     box-shadow: var(--vdc-shadow);
 }
+/* DiaLControl: amarillo cuando paused, verde cuando active; texto en mayúsculas */
+#vicidial_form #DiaLControl > a:has(img[alt="You are paused"]) {
+    background: #FDD835 !important;
+    border-color: #F9A825 !important;
+    color: #1a1a1a !important;
+}
+#vicidial_form #DiaLControl > a:has(img[alt="You are paused"])::before {
+    color: #1a1a1a !important;
+    text-transform: uppercase;
+}
+#vicidial_form #DiaLControl > a:has(img[alt="You are paused"]):hover {
+    background: #F9A825 !important;
+    border-color: #F57F17 !important;
+    color: #1a1a1a !important;
+}
+#vicidial_form #DiaLControl > a:has(img[alt="You are paused"]):hover::before {
+    color: #1a1a1a !important;
+}
+#vicidial_form #DiaLControl > a:has(img[alt="You are active"]) {
+    background: var(--color-primary-medium, #008B8B) !important;
+    border-color: var(--color-primary-dark, #2E7D7D) !important;
+    color: #fff !important;
+}
+#vicidial_form #DiaLControl > a:has(img[alt="You are active"])::before {
+    color: #fff !important;
+    text-transform: uppercase;
+}
+#vicidial_form #DiaLControl > a:has(img[alt="You are active"]):hover {
+    background: var(--color-primary-dark, #2E7D7D) !important;
+    border-color: #1a5a5a !important;
+    color: #fff !important;
+}
+#vicidial_form #DiaLControl > a:has(img[alt="You are active"]):hover::before {
+    color: #fff !important;
+}
 #vicidial_form #RecorDControl > a:hover {
     background: #1b5e20;
     border-color: #1b5e20;
@@ -3916,6 +3962,59 @@ body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) table.realt
 #vicidial_form #HangupControl:hover::before {
     color: var(--color-text-light) !important;
 }
+/* Hangup Customer en rojo cuando hay llamada activa (tiene <a>) */
+#vicidial_form #HangupControl:has(> a) {
+    position: relative !important;
+    background: #c62828 !important;
+    border-color: #b71c1c !important;
+    color: #fff !important;
+}
+/* El <a> ocupa todo el botón para que el clic funcione (la img está oculta y el enlace colapsaría) */
+#vicidial_form #HangupControl > a {
+    position: absolute !important;
+    top: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    width: 100% !important;
+    height: 100% !important;
+    display: block !important;
+    z-index: 1 !important;
+    pointer-events: auto !important;
+    cursor: pointer !important;
+}
+#vicidial_form #HangupControl:has(> a)::before {
+    color: #fff !important;
+    pointer-events: none !important; /* que el clic llegue al <a> */
+}
+#vicidial_form #HangupControl:has(> a):hover {
+    background: #b71c1c !important;
+    border-color: #8e0000 !important;
+    color: #fff !important;
+}
+#vicidial_form #HangupControl:has(> a):hover::before {
+    color: #fff !important;
+}
+/* Park Call / Grab Parked Call: cuando tiene <a>, el enlace debe ocupar todo el botón para que el clic funcione */
+#vicidial_form #ParkControl:has(> a) {
+    position: relative !important;
+}
+#vicidial_form #ParkControl > a {
+    position: absolute !important;
+    top: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    width: 100% !important;
+    height: 100% !important;
+    display: block !important;
+    z-index: 1 !important;
+    pointer-events: auto !important;
+    cursor: pointer !important;
+}
+#vicidial_form #ParkControl:has(> a)::before {
+    pointer-events: none !important;
+}
 #vicidial_form #DiaLControl,
 #vicidial_form #RecorDControl,
 #vicidial_form #RecorDMute,
@@ -4051,23 +4150,30 @@ body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) table.realt
     margin-right: 300px !important;
 }
 
-/* Footer del agente: fixed al fondo de la ventana para que se vea igual en todas las resoluciones */
+/* Footer del agente: flotando abajo a la derecha (como Dialable Leads a la izquierda) */
 #vicidial_form #MaiNfooterspan {
-    position: static !important;
-    width: 100% !important;
-    max-width: 100% !important;
-    padding: 0 8px 8px !important;
-    margin-bottom: -1050px !important;
-    background-color: transparent !important;
+    z-index: 99 !important;
+    position: fixed !important;
+    left: auto !important;
+    right: 16px !important;
+    top: auto !important;
+    bottom: 16px !important;
+    width: auto !important;
+    max-width: calc(100vw - 32px) !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    background: transparent !important;
 }
 #vicidial_form #MaiNfooter {
-    background: var(--color-bg-white) !important;
-    padding: 12px 16px !important;
-    margin-top: 0 !important;
-    margin-bottom: 0 !important;
-    width: 100% !important;
+    background: var(--color-bg-lighter, #E0F7FA) !important;
+    padding: 8px 14px !important;
+    margin: 0 !important;
+    width: auto !important;
     max-width: 100% !important;
-    box-sizing: border-box;
+    box-sizing: border-box !important;
+    border: 1px solid var(--color-primary-light, #20B2AA) !important;
+    border-radius: var(--vdc-radius-sm, 6px) !important;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important;
 }
 #vicidial_form #MaiNfooter font,
 #vicidial_form #MaiNfooter .body_small {
@@ -4077,9 +4183,12 @@ body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) table.realt
 }
 #vicidial_form #MaiNfooter a {
     color: var(--color-primary-medium, #008B8B) !important;
-    padding: 2px 6px;
-    border-radius: 4px;
-    transition: background var(--vdc-transition);
+    padding: 2px 6px !important;
+    border-radius: 4px !important;
+    transition: background var(--vdc-transition) !important;
+}
+#vicidial_form #MaiNfooter a:hover {
+    background: var(--bg-decorative-1) !important;
 }
 /* Ocultar fila de debug (busycallsdebug) debajo de STATUS en el panel principal */
 #vicidial_form #MainTable tr:has(#busycallsdebug),
@@ -4305,7 +4414,11 @@ body[data-vdc-theme="dark"] #vicidial_form #MaiNfooter .body_small {
 }
 
 /* ========== Overlay "Your session has been disabled" (AgenTDisablEBoX) ========== */
+body:has(#AgenTDisablEBoX[style*="visibility: visible"]) {
+    overflow: hidden !important;
+}
 #AgenTDisablEBoX {
+    position: fixed !important;
     left: 0 !important;
     top: 0 !important;
     width: 100vw !important;
@@ -4314,9 +4427,10 @@ body[data-vdc-theme="dark"] #vicidial_form #MaiNfooter .body_small {
     display: flex !important;
     align-items: center !important;
     justify-content: center !important;
-    background: rgba(0, 0, 0, 0.4) !important;
+    background: rgba(0, 0, 0, 0.45) !important;
     backdrop-filter: blur(4px);
     overflow: hidden;
+
 }
 #AgenTDisablEBoX > table {
     width: auto !important;
@@ -4438,6 +4552,7 @@ body:has(#NoneInSessionBox[style*="visibility: visible"]) {
 }
 #NoneInSessionBox {
     display: flex !important;
+    position: fixed !important;
     align-items: center;
     justify-content: center;
     left: 0 !important;
@@ -4506,6 +4621,7 @@ body:has(#DeactivateDOlDSessioNSpan[style*="visibility: visible"]) {
 }
 #DeactivateDOlDSessioNSpan {
     display: flex !important;
+    position: fixed !important;
     align-items: center;
     justify-content: center;
     left: 0 !important;
@@ -4513,7 +4629,8 @@ body:has(#DeactivateDOlDSessioNSpan[style*="visibility: visible"]) {
     width: 100vw !important;
     height: 100vh !important;
     min-height: 100vh;
-    background: var(--color-bg-white, #fff) !important;
+    background: rgba(0, 0, 0, 0.45) !important;
+    backdrop-filter: blur(4px);
     z-index: 9999 !important;
 }
 #DeactivateDOlDSessioNSpan table {
@@ -4570,3 +4687,649 @@ body:has(#DeactivateDOlDSessioNSpan[style*="visibility: visible"]) {
     transform: translateY(-1px);
 }
 
+/* ========== Overlays: fijar al viewport para que no se corten al hacer scroll ========== */
+#NeWManuaLDiaLBox,
+#DispoSelectBox,
+#CallBackSelectBox,
+#SearcHForMDisplaYBox,
+#PauseCodeSelectBox,
+#GroupAliasSelectBox,
+#PresetsSelectBox,
+#AlertBox,
+#NoneInSessionBox,
+#DeactivateDOlDSessioNSpan,
+#AgenTDisablEBoX {
+    position: fixed !important;
+}
+/* Overlays de pantalla completa (centrado o cobertura) */
+#NeWManuaLDiaLBox,
+#CallBackSelectBox,
+#SearcHForMDisplaYBox,
+#PauseCodeSelectBox,
+#GroupAliasSelectBox {
+    top: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    width: 100% !important;
+    height: 100% !important;
+    overflow: auto !important;
+}
+
+/* ========== New Manual Dial overlay (NeWManuaLDiaLBox) ========== */
+body:has(#NeWManuaLDiaLBox[style*="visibility: visible"]) {
+    overflow: hidden !important;
+}
+#NeWManuaLDiaLBox {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    left: 0 !important;
+    top: 0 !important;
+    width: 100vw !important;
+    height: 100vh !important;
+    min-height: 100vh;
+    background: rgba(0, 0, 0, 0.45) !important;
+    backdrop-filter: blur(4px);
+    z-index: 65 !important;
+}
+#NeWManuaLDiaLBox > table {
+    width: auto !important;
+    max-width: 480px !important;
+    height: auto !important;
+    min-height: 0 !important;
+    margin: 12px !important;
+    background: var(--color-bg-white, #fff) !important;
+    border: none !important;
+    border-radius: var(--vdc-radius, 8px);
+    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.06);
+    overflow: hidden;
+}
+#NeWManuaLDiaLBox > table > tbody > tr > td {
+    padding: 12px 16px !important;
+    text-align: left !important;
+    vertical-align: top !important;
+    border: none !important;
+    background: transparent !important;
+}
+#NeWManuaLDiaLBox .sd_text,
+#NeWManuaLDiaLBox font.sd_text {
+    font-family: var(--font-family) !important;
+    font-size: 13px !important;
+    font-weight: 600 !important;
+    line-height: 1.3 !important;
+    color: var(--color-primary-dark, #2E7D7D) !important;
+    display: block !important;
+    margin-bottom: 4px !important;
+}
+#NeWManuaLDiaLBox .sh_text,
+#NeWManuaLDiaLBox font.sh_text {
+    font-family: var(--font-family) !important;
+    font-size: 11px !important;
+    line-height: 1.35 !important;
+    color: var(--color-text-dark, #2D2D2D) !important;
+}
+#NeWManuaLDiaLBox .sh_text br {
+    margin: 2px 0;
+}
+#NeWManuaLDiaLBox .body_text,
+#NeWManuaLDiaLBox font.body_text {
+    font-family: var(--font-family) !important;
+    font-size: 12px !important;
+    line-height: 1.35 !important;
+    color: var(--color-text-dark, #2D2D2D) !important;
+}
+/* Form table: más compacto y distribución en grid (2 columnas label|input) */
+#NeWManuaLDiaLBox table table {
+    width: 100% !important;
+    border: none !important;
+    border-collapse: collapse;
+    margin: 6px 0 !important;
+    display: table !important;
+}
+#NeWManuaLDiaLBox table table tr {
+    vertical-align: middle !important;
+}
+#NeWManuaLDiaLBox table table td {
+    padding: 4px 0 !important;
+    border: none !important;
+    vertical-align: middle !important;
+}
+#NeWManuaLDiaLBox table table td[align="right"] {
+    padding-right: 8px !important;
+    width: 1%;
+    white-space: nowrap;
+    font-weight: 500;
+    font-size: 11px !important;
+}
+/* Fila con Group Alias / In-Group / No-Call: distribución horizontal */
+#NeWManuaLDiaLBox .sh_text center {
+    display: flex !important;
+    flex-wrap: wrap !important;
+    gap: 6px 14px !important;
+    justify-content: center !important;
+    align-items: center !important;
+    margin: 6px 0 !important;
+    text-align: center !important;
+}
+#NeWManuaLDiaLBox .sh_text center br {
+    display: none !important;
+}
+#NeWManuaLDiaLBox .sh_text center span {
+    display: inline-block !important;
+}
+/* Inputs más compactos */
+#NeWManuaLDiaLBox input.cust_form {
+    padding: 5px 8px !important;
+    font-family: var(--font-family) !important;
+    font-size: 12px !important;
+    border: 1px solid rgba(0, 0, 0, 0.18) !important;
+    border-radius: 4px;
+    background: var(--color-bg-white, #fff) !important;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+#NeWManuaLDiaLBox input.cust_form:focus {
+    outline: none !important;
+    border-color: var(--color-primary-light, #20B2AA) !important;
+    box-shadow: 0 0 0 2px rgba(32, 178, 170, 0.2);
+}
+/* Checkbox row */
+#NeWManuaLDiaLBox input[type="checkbox"] {
+    margin: 0 4px 0 0 !important;
+    vertical-align: middle;
+}
+/* Action links: más compactos */
+#NeWManuaLDiaLBox .sh_text a,
+#NeWManuaLDiaLBox font.sh_text a {
+    display: inline-block !important;
+    margin: 4px 6px 4px 0 !important;
+    padding: 6px 14px !important;
+    font-family: var(--font-family) !important;
+    font-size: 11px !important;
+    font-weight: 600 !important;
+    border-radius: 4px;
+    text-decoration: none !important;
+    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
+}
+#NeWManuaLDiaLBox .sh_text a[onclick*="NeWManuaLDiaLCalLSubmiT('NOW'"],
+#NeWManuaLDiaLBox font.sh_text a[onclick*="NeWManuaLDiaLCalLSubmiT('NOW'"] {
+    color: var(--color-text-light, #fff) !important;
+    background: var(--color-primary-medium, #008B8B) !important;
+}
+#NeWManuaLDiaLBox .sh_text a[onclick*="NeWManuaLDiaLCalLSubmiT('NOW'"]:hover,
+#NeWManuaLDiaLBox font.sh_text a[onclick*="NeWManuaLDiaLCalLSubmiT('NOW'"]:hover {
+    background: var(--color-primary-dark, #2E7D7D) !important;
+    transform: translateY(-1px);
+}
+#NeWManuaLDiaLBox .sh_text a[onclick*="NeWManuaLDiaLCalLSubmiT('PREVIEW'"],
+#NeWManuaLDiaLBox font.sh_text a[onclick*="NeWManuaLDiaLCalLSubmiT('PREVIEW'"] {
+    color: var(--color-text-light, #fff) !important;
+    background: var(--color-primary-light, #20B2AA) !important;
+}
+#NeWManuaLDiaLBox .sh_text a[onclick*="NeWManuaLDiaLCalLSubmiT('PREVIEW'"]:hover,
+#NeWManuaLDiaLBox font.sh_text a[onclick*="NeWManuaLDiaLCalLSubmiT('PREVIEW'"]:hover {
+    background: var(--color-primary-medium, #f6f8f8) !important;
+    transform: translateY(-1px);
+}
+#NeWManuaLDiaLBox .sh_text a[onclick*="ManualDialHide"],
+#NeWManuaLDiaLBox font.sh_text a[onclick*="ManualDialHide"] {
+    color: var(--color-primary-medium, #008B8B) !important;
+    background: transparent !important;
+    border: 1px solid var(--color-primary-medium, #008B8B);
+}
+#NeWManuaLDiaLBox .sh_text a[onclick*="ManualDialHide"]:hover,
+#NeWManuaLDiaLBox font.sh_text a[onclick*="ManualDialHide"]:hover {
+    background: var(--bg-decorative-1) !important;
+    transform: translateY(-1px);
+}
+
+/* ========== Disposition Call (DispoSelectBox) ========== */
+#DispoSelectBox > table {
+    background: var(--color-bg-lighter, #E0F7FA) !important;
+    border: 1px solid var(--color-primary-lightest, #48D1CC) !important;
+    border-radius: 12px !important;
+    box-shadow: 0 8px 24px var(--shadow-medium, rgba(45, 45, 45, 0.35)) !important;
+    padding: 16px 20px !important;
+    max-width: 100% !important;
+    box-sizing: border-box !important;
+}
+#DispoSelectBox > table > tbody > tr > td {
+    background: transparent !important;
+    padding: 12px 16px !important;
+    text-align: center !important;
+    vertical-align: top !important;
+    border: none !important;
+}
+#DispoSelectBox .sd_text,
+#DispoSelectBox font.sd_text {
+    font-family: var(--font-family) !important;
+    font-size: 15px !important;
+    font-weight: 600 !important;
+    color: var(--color-primary-dark, #2E7D7D) !important;
+    line-height: 1.3 !important;
+}
+#DispoSelectBox .sh_text,
+#DispoSelectBox font.sh_text {
+    font-family: var(--font-family) !important;
+    font-size: 13px !important;
+    line-height: 1.4 !important;
+    color: var(--color-text-dark, #2D2D2D) !important;
+}
+#DispoSelectBox #DispoSelectHAspan a,
+#DispoSelectBox #DispoSelectMaxMin a {
+    display: inline-block !important;
+    margin: 0 6px !important;
+    padding: 6px 12px !important;
+    font-family: var(--font-family) !important;
+    font-size: 12px !important;
+    font-weight: 500 !important;
+    color: var(--color-primary-medium, #008B8B) !important;
+    background: transparent !important;
+    border: 1px solid var(--color-primary-medium, #008B8B) !important;
+    border-radius: 6px !important;
+    text-decoration: none !important;
+    transition: all 0.2s ease !important;
+}
+#DispoSelectBox #DispoSelectHAspan a:hover,
+#DispoSelectBox #DispoSelectMaxMin a:hover {
+    background: var(--bg-decorative-1) !important;
+    color: var(--color-primary-dark, #2E7D7D) !important;
+}
+/* Contenedor y tabla de disposiciones */
+#DispoSelectBox #DispoSelectContent {
+    display: block !important;
+    margin: 12px auto !important;
+    text-align: center !important;
+}
+#DispoSelectBox #DispoSelectContent table {
+    width: auto !important;
+    max-width: 780px !important;
+    margin: 12px auto !important;
+    border-collapse: separate !important;
+    border-spacing: 8px !important;
+    border: none !important;
+}
+#DispoSelectBox #DispoSelectContent table tr:first-child td {
+    font-family: var(--font-family) !important;
+    font-size: 14px !important;
+    font-weight: 600 !important;
+    color: var(--color-primary-dark, #2E7D7D) !important;
+    padding-bottom: 8px !important;
+    border: none !important;
+}
+#DispoSelectBox #DispoSelectContent table td[valign="top"] {
+    background: var(--color-bg-white, #fff) !important;
+    border: 1px solid var(--color-primary-lightest, #48D1CC) !important;
+    border-radius: 8px !important;
+    padding: 12px 14px !important;
+    height: auto !important;
+    min-height: 120px !important;
+    width: 240px !important;
+    vertical-align: top !important;
+    box-shadow: 0 2px 8px var(--shadow-text, rgba(45, 45, 45, 0.2)) !important;
+}
+#DispoSelectBox #DispoSelectContent .log_text a,
+#DispoSelectBox #DispoSelectContent font.log_text a,
+#DispoSelectBox #DispoSelectContent span a,
+#DispoSelectBox #DispoSelectContent font a {
+    display: block !important;
+    font-family: var(--font-family) !important;
+    font-size: 12px !important;
+    padding: 6px 8px !important;
+    margin: 4px 0 !important;
+    color: var(--color-text-dark, #2D2D2D) !important;
+    background: transparent !important;
+    border-radius: 4px !important;
+    text-decoration: none !important;
+    transition: background 0.15s ease, color 0.15s ease !important;
+}
+#DispoSelectBox #DispoSelectContent .log_text a:hover,
+#DispoSelectBox #DispoSelectContent font.log_text a:hover,
+#DispoSelectBox #DispoSelectContent span a:hover,
+#DispoSelectBox #DispoSelectContent font a:hover {
+    background: var(--bg-decorative-1) !important;
+    color: var(--color-primary-dark, #2E7D7D) !important;
+}
+#DispoSelectBox #DispoSelectContent font[style*="BACKGROUND-COLOR"] a,
+#DispoSelectBox #DispoSelectContent b a {
+    background: var(--color-primary-lightest, #48D1CC) !important;
+    color: var(--color-primary-dark, #2E7D7D) !important;
+    font-weight: 600 !important;
+}
+#DispoSelectBox #DispoSelectContent font[style*="BACKGROUND-COLOR"] a:hover,
+#DispoSelectBox #DispoSelectContent b a:hover {
+    background: var(--color-primary-light, #20B2AA) !important;
+    color: var(--color-text-light, #fff) !important;
+}
+/* Checkbox y acciones inferiores */
+#DispoSelectBox input[type="checkbox"] {
+    margin: 0 6px 0 0 !important;
+    vertical-align: middle !important;
+    accent-color: var(--color-primary-medium, #008B8B) !important;
+}
+#DispoSelectBox .sh_text > a[onclick*="DispoSelectContent_create('','ReSET'"],
+#DispoSelectBox .sh_text > a[onclick*="DispoSelect_submit"],
+#DispoSelectBox .sh_text > a[onclick*="WeBForMDispoSelect_submit"] {
+    display: inline-block !important;
+    margin: 6px 8px 6px 0 !important;
+    padding: 8px 16px !important;
+    font-family: var(--font-family) !important;
+    font-size: 12px !important;
+    font-weight: 500 !important;
+    border-radius: 6px !important;
+    text-decoration: none !important;
+    transition: all 0.2s ease !important;
+}
+#DispoSelectBox .sh_text > a[onclick*="DispoSelectContent_create('','ReSET'"] {
+    color: var(--color-primary-medium, #008B8B) !important;
+    background: transparent !important;
+    border: 1px solid var(--color-primary-medium, #008B8B) !important;
+}
+#DispoSelectBox .sh_text > a[onclick*="DispoSelectContent_create('','ReSET'"]:hover {
+    background: var(--bg-decorative-1) !important;
+}
+#DispoSelectBox .sh_text > a[onclick*="DispoSelect_submit"] {
+    color: var(--color-text-light, #fff) !important;
+    background: var(--color-primary-medium, #008B8B) !important;
+    border: 1px solid var(--color-primary-dark, #2E7D7D) !important;
+}
+#DispoSelectBox .sh_text > a[onclick*="DispoSelect_submit"]:hover {
+    background: var(--color-primary-dark, #2E7D7D) !important;
+    transform: translateY(-1px) !important;
+}
+#DispoSelectBox .sh_text > a[onclick*="WeBForMDispoSelect_submit"] {
+    color: var(--color-text-light, #fff) !important;
+    background: var(--color-primary-light, #20B2AA) !important;
+    border: 1px solid var(--color-primary-medium, #008B8B) !important;
+}
+#DispoSelectBox .sh_text > a[onclick*="WeBForMDispoSelect_submit"]:hover {
+    background: var(--color-primary-medium, #008B8B) !important;
+    transform: translateY(-1px) !important;
+}
+
+/* ========== Panel Transfer - Conference (TransferMain) ========== */
+#TransferMain {
+    max-width: 100%;
+    box-sizing: border-box;
+    transform: translateY(-100px);
+    transform: translateX(45px); 
+}
+/* Ocultar imágenes y mostrar texto (mismo truco que sidebar / botones AGC) */
+#TransferMain .body_text > img[alt="Transfer - Conference"],
+#TransferMain #LocalCloser img,
+#TransferMain #HangupXferLine img,
+#TransferMain #ParkXferLine img,
+#TransferMain #HangupBothLines img,
+#TransferMain #Leave3WayCall img,
+#TransferMain #DialBlindTransfer img,
+#TransferMain #DialWithCustomer img,
+#TransferMain #ParkCustomerDial img,
+#TransferMain #DialBlindVMail img,
+#TransferMain #PresetPullDown img,
+#TransferMain #ContactPullDown img,
+#TransferMain img[alt="seconds"],
+#TransferMain img[alt="channel"],
+#TransferMain img[alt="Number to call"] {
+    display: none !important;
+    width: 0 !important;
+    height: 0 !important;
+    overflow: hidden !important;
+}
+/* Texto en lugar de imagen: cabecera */
+#TransferMain .body_text::before {
+    content: "Transfer - Conference";
+    font-family: var(--font-family) !important;
+    font-size: 14px !important;
+    font-weight: 600 !important;
+    color: var(--color-primary-dark, #2E7D7D) !important;
+    margin-right: 0.5em;
+}
+/* Texto en lugar de imagen: botones por id */
+#TransferMain #LocalCloser::before { content: "LOCAL CLOSER"; }
+#TransferMain #HangupXferLine::before { content: "Hangup Xfer Line"; }
+#TransferMain #ParkXferLine::before { content: "Park Xfer Line"; }
+#TransferMain #HangupBothLines::before { content: "Hangup Both Lines"; }
+#TransferMain #Leave3WayCall::before { content: "Leave 3-Way Call"; }
+#TransferMain #DialBlindTransfer::before { content: "Blind Transfer"; }
+#TransferMain #DialWithCustomer::before { content: "Dial With Customer"; }
+#TransferMain #ParkCustomerDial::before { content: "Park Customer Dial"; }
+#TransferMain #DialBlindVMail::before { content: "Transfer VMail"; }
+#TransferMain #PresetPullDown::before { content: "Presets"; }
+#TransferMain #ContactPullDown::before { content: "Contacts"; }
+/* Estilo común del ::before en botones */
+#TransferMain #LocalCloser::before,
+#TransferMain #HangupXferLine::before,
+#TransferMain #ParkXferLine::before,
+#TransferMain #HangupBothLines::before,
+#TransferMain #Leave3WayCall::before,
+#TransferMain #DialBlindTransfer::before,
+#TransferMain #DialWithCustomer::before,
+#TransferMain #ParkCustomerDial::before,
+#TransferMain #DialBlindVMail::before,
+#TransferMain #PresetPullDown::before,
+#TransferMain #ContactPullDown::before {
+    display: inline-block !important;
+    font-family: var(--font-family) !important;
+    font-size: 11px !important;
+    font-weight: 500 !important;
+    white-space: nowrap !important;
+    pointer-events: none !important;
+}
+/* Fila seconds + channel: solo texto como etiquetas */
+#TransferMain table table tbody tr:nth-child(2) td:first-child {
+    display: flex !important;
+    flex-wrap: wrap !important;
+    align-items: center !important;
+    gap: 0.25em 0.5em !important;
+}
+#TransferMain table table tbody tr:nth-child(2) td:first-child::before {
+    content: "seconds";
+    font-family: var(--font-family) !important;
+    font-size: 12px !important;
+    color: var(--color-text-dark, #2D2D2D) !important;
+    order: 0;
+}
+#TransferMain table table tbody tr:nth-child(2) td:first-child input#xferlength {
+    order: 1;
+}
+#TransferMain table table tbody tr:nth-child(2) td:first-child::after {
+    content: "channel";
+    font-family: var(--font-family) !important;
+    font-size: 12px !important;
+    color: var(--color-text-dark, #2D2D2D) !important;
+    margin-left: 0.5em;
+    order: 2;
+}
+#TransferMain table table tbody tr:nth-child(2) td:first-child input#xferchannel {
+    order: 3;
+}
+/* Fila Number to call: solo texto */
+#TransferMain table table tbody tr:nth-child(3) td:first-child::before {
+    content: "Number to call";
+    font-family: var(--font-family) !important;
+    font-size: 12px !important;
+    color: var(--color-text-dark, #2D2D2D) !important;
+    margin-right: 0.5em;
+}
+#TransferMain > table {
+    background: var(--color-bg-lighter, #E0F7FA) !important;
+    border: 1px solid var(--color-primary-lightest, #48D1CC) !important;
+    border-radius: 10px !important;
+    box-shadow: 0 4px 16px var(--shadow-text, rgba(45, 45, 45, 0.2)) !important;
+    padding: 12px 16px !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    border-collapse: separate !important;
+    border-spacing: 0 !important;
+}
+#TransferMain > table > tbody > tr > td {
+    padding: 10px 12px !important;
+    vertical-align: top !important;
+    border: none !important;
+    background: transparent !important;
+    height: auto !important;
+}
+#TransferMain .body_text,
+#TransferMain font.body_text {
+    font-family: var(--font-family) !important;
+    font-size: 13px !important;
+    line-height: 1.4 !important;
+    color: var(--color-text-dark, #2D2D2D) !important;
+}
+#TransferMain .body_tiny,
+#TransferMain font.body_tiny {
+    font-family: var(--font-family) !important;
+    font-size: 11px !important;
+    color: var(--color-text-dark, #2D2D2D) !important;
+}
+#TransferMain .body_small_bold,
+#TransferMain font.body_small_bold {
+    font-family: var(--font-family) !important;
+    font-size: 12px !important;
+    font-weight: 600 !important;
+}
+#TransferMain #XfeRDiaLGrouPSelecteD,
+#TransferMain #XfeRCID {
+    font-weight: 500;
+    color: var(--color-primary-dark, #2E7D7D);
+}
+/* Tabla interna */
+#TransferMain table table {
+    border-collapse: separate !important;
+    border-spacing: 6px 8px !important;
+    border: none !important;
+}
+#TransferMain table table td {
+    padding: 4px 6px !important;
+    vertical-align: middle !important;
+    border: none !important;
+}
+/* Select grupo */
+#TransferMain #XfeRGrouPLisT select,
+#TransferMain select#XfeRGrouP {
+    font-family: var(--font-family) !important;
+    font-size: 12px !important;
+    padding: 6px 10px !important;
+    border: 1px solid rgba(0, 0, 0, 0.18) !important;
+    border-radius: 6px !important;
+    background: var(--color-bg-white, #fff) !important;
+    min-width: 200px !important;
+    max-width: 100% !important;
+}
+#TransferMain select#XfeRGrouP:focus {
+    outline: none !important;
+    border-color: var(--color-primary-light, #20B2AA) !important;
+    box-shadow: 0 0 0 2px rgba(32, 178, 170, 0.2);
+}
+/* Inputs readonly y número */
+#TransferMain input.cust_form {
+    font-family: var(--font-family) !important;
+    font-size: 12px !important;
+    padding: 5px 8px !important;
+    border: 1px solid rgba(0, 0, 0, 0.15) !important;
+    border-radius: 6px !important;
+    background: var(--color-bg-white, #fff) !important;
+}
+#TransferMain input#xferlength { width: 3em !important; }
+#TransferMain input#xferchannel { width: 10em !important; min-width: 100px !important; }
+#TransferMain input#xfernumber { width: 14em !important; min-width: 120px !important; }
+#TransferMain input.cust_form:focus {
+    outline: none !important;
+    border-color: var(--color-primary-light, #20B2AA) !important;
+}
+/* Botones del panel (spans con img o enlace) */
+#TransferMain #LocalCloser,
+#TransferMain #HangupXferLine,
+#TransferMain #ParkXferLine,
+#TransferMain #HangupBothLines,
+#TransferMain #Leave3WayCall,
+#TransferMain #DialBlindTransfer,
+#TransferMain #DialWithCustomer,
+#TransferMain #ParkCustomerDial,
+#TransferMain #DialBlindVMail,
+#TransferMain #PresetPullDown,
+#TransferMain #ContactPullDown {
+    display: inline-block !important;
+    position: relative !important;
+    padding: 6px 8px !important;
+    margin: 0 2px !important;
+    background: var(--color-primary-lightest, #48D1CC) !important;
+    border: 1px solid var(--color-primary-medium, #008B8B) !important;
+    border-radius: 6px !important;
+    vertical-align: middle !important;
+    transition: background 0.2s ease, transform 0.15s ease !important;
+}
+/* Enlaces que rellenan el botón para que el clic funcione (img oculta) */
+#TransferMain #HangupBothLines > a,
+#TransferMain #Leave3WayCall > a,
+#TransferMain #DialWithCustomer > a,
+#TransferMain #ParkCustomerDial > a,
+#TransferMain #PresetPullDown > a,
+#TransferMain #ContactPullDown > a {
+    position: absolute !important;
+    top: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    width: 100% !important;
+    height: 100% !important;
+    display: block !important;
+    z-index: 1 !important;
+    pointer-events: auto !important;
+    cursor: pointer !important;
+}
+#TransferMain #LocalCloser:hover,
+#TransferMain #HangupXferLine:hover,
+#TransferMain #ParkXferLine:hover,
+#TransferMain #HangupBothLines:hover,
+#TransferMain #Leave3WayCall:hover,
+#TransferMain #DialBlindTransfer:hover,
+#TransferMain #DialWithCustomer:hover,
+#TransferMain #ParkCustomerDial:hover,
+#TransferMain #DialBlindVMail:hover,
+#TransferMain #PresetPullDown:hover,
+#TransferMain #ContactPullDown:hover {
+    background: var(--color-primary-light, #20B2AA) !important;
+    transform: translateY(-1px);
+}
+/* (Imágenes de botones ya ocultas arriba; enlaces rellenan el span para clic) */
+#TransferMain #HangupBothLines a,
+#TransferMain #Leave3WayCall a,
+#TransferMain #DialWithCustomer a,
+#TransferMain #ParkCustomerDial a,
+#TransferMain #PresetPullDown a,
+#TransferMain #ContactPullDown a {
+    text-decoration: none !important;
+    color: inherit !important;
+}
+/* Checkboxes */
+#TransferMain input[type="checkbox"] {
+    margin: 0 4px 0 0 !important;
+    vertical-align: middle !important;
+    accent-color: var(--color-primary-medium, #008B8B) !important;
+}
+/* Enlaces D1-D5 y AGENTS */
+#TransferMain .body_tiny a,
+#TransferMain font.body_tiny a,
+#TransferMain #agentdirectlink a,
+#TransferMain .body_small_bold a {
+    display: inline-block !important;
+    padding: 4px 10px !important;
+    margin: 0 2px !important;
+    font-family: var(--font-family) !important;
+    font-size: 11px !important;
+    font-weight: 500 !important;
+    color: var(--color-primary-medium, #008B8B) !important;
+    background: transparent !important;
+    border: 1px solid var(--color-primary-medium, #008B8B) !important;
+    border-radius: 4px !important;
+    text-decoration: none !important;
+    transition: background 0.2s ease, color 0.2s ease !important;
+}
+#TransferMain .body_tiny a:hover,
+#TransferMain font.body_tiny a:hover,
+#TransferMain #agentdirectlink a:hover,
+#TransferMain .body_small_bold a:hover {
+    background: var(--bg-decorative-1) !important;
+    color: var(--color-primary-dark, #2E7D7D) !important;
+}