From b9a758716b52e5b81e8c8668c9002ea6805dc43b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sim=C3=B3n=20Hurtado?= Date: Wed, 4 Feb 2026 17:06:12 -0500 Subject: [PATCH] =?UTF-8?q?Estilos=20de=20agente=20e=20instalador:=20custo?= =?UTF-8?q?m=20CSS,=20script=20de=20instalaci=C3=83=C2=B3n=20y=20logos?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Cursor --- Custom/custom.css | 1994 ----------- Custom/installer/LogoAgent.png | Bin 0 -> 19625 bytes Custom/installer/LogoHome.png | Bin 0 -> 29924 bytes Custom/installer/custom.css | 4572 ++++++++++++++++++++++++ Custom/installer/install_custom_css.sh | 455 +++ 5 files changed, 5027 insertions(+), 1994 deletions(-) delete mode 100644 Custom/custom.css create mode 100644 Custom/installer/LogoAgent.png create mode 100644 Custom/installer/LogoHome.png create mode 100644 Custom/installer/custom.css create mode 100644 Custom/installer/install_custom_css.sh diff --git a/Custom/custom.css b/Custom/custom.css deleted file mode 100644 index 9d02227..0000000 --- a/Custom/custom.css +++ /dev/null @@ -1,1994 +0,0 @@ -/* Variables de colores globales - disponibles para todos los componentes */ - -/* -------------------Guia de instalacion--------------------------- -Se isntala en la ruta /agc/css/custom.css <------------------------------ - -Poner clase HTML "class=\"welcome-modern\"" en línea 119 de welcome.php -Poner placeholder=\"Phone Login\" en input - Linea 1737 vicidial.php -Poner placeholder=\"Phone Password\" en input - Linea 1739 vicidial.php -Importar estilos de sidebar de forma globar, agregar (echo "\n";)- linea 1951 admin_header.php - - - ------------------------------------------------------------*/ - - - - :root { - /* Colores principales */ - --color-primary-dark: #00877A; - --color-primary-light: #00C4B4; - --color-primary-medium: #00A896; - --color-primary-lightest: #69E2D6; - --color-text-dark: #2D2D2D; - --color-text-light: #ffffff; - --color-bg-white: #ffffff; - --color-bg-light: #69E2D6; - --color-bg-lighter: #69E2D6; - - /* Colores de sombras */ - --shadow-light: rgba(45, 45, 45, 0.25); - --shadow-medium: rgba(45, 45, 45, 0.35); - --shadow-text: rgba(45, 45, 45, 0.2); - --shadow-primary: rgba(0, 196, 180, 0.3); - --shadow-white: rgba(255, 255, 255, 0.4); - - /* Colores de fondo decorativo */ - --bg-decorative-1: rgba(0, 196, 180, 0.1); - --bg-decorative-2: rgba(0, 135, 122, 0.1); - --bg-white-transparent: rgba(255, 255, 255, 0.6); -} - -/* Reset de estilos - Prioridad máxima sobre otros CSS */ -html body * { - box-sizing: border-box !important; -} - -/* Reset de enlaces - Eliminar color azul y decoración por defecto */ -html body a, -html body a:link, -html body a:visited { - text-decoration: none !important; - outline: none !important; -} - - -/* Asegurar que html y body ocupen toda la altura de manera responsive */ -html { - height: 100% !important; -} - -body { - margin: 0 !important; - padding: 0 !important; - min-height: 100vh !important; - height: auto !important; -} - - -/* WELCOME COMPONENT --------------------------------------------------------------------*/ - -/* -------------------Guia de instalacion--------------------------- */ - - - -/* Contenedor del componente - solo afecta cuando existe welcome-modern */ -html body:has(.welcome-modern) { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; - min-height: 100vh !important; - display: flex !important; - align-items: center !important; - justify-content: center !important; - padding: 15px !important; - margin: 0 !important; - position: relative !important; -} - -/* Ocultar tabla vacía solo cuando está relacionada con welcome-modern */ -html body:has(.welcome-modern) > table[width="100%"] { - display: none !important; -} - -/* Eliminar efectos de los br solo cuando están relacionados con welcome-modern */ -html body:has(.welcome-modern) > br { - display: none !important; -} - -/* Centrar el contenedor center solo cuando contiene welcome-modern */ -html body:has(.welcome-modern) > center:has(.welcome-modern) { - display: flex !important; - align-items: center !important; - justify-content: center !important; - width: 100% !important; - height: 100vh !important; - position: absolute !important; - top: 0 !important; - left: 0 !important; -} - -/* Estilos para la tabla principal del componente */ -html body .welcome-modern { - background: var(--color-bg-white) !important; - border-radius: 16px !important; - box-shadow: 0 15px 40px var(--shadow-light) !important; - overflow: hidden !important; - border: none !important; - border-collapse: collapse !important; - width: auto !important; - min-width: 380px !important; - max-width: 100% !important; - transition: transform 0.3s ease, box-shadow 0.3s ease !important; - margin: 0 auto !important; - display: block !important; - box-sizing: border-box !important; -} - -html body .welcome-modern:hover { - transform: translateY(-3px) !important; - box-shadow: 0 18px 50px var(--shadow-medium) !important; -} - -/* Header moderno - solo dentro de welcome-modern */ -html body .welcome-modern tr:first-child { - display: block !important; - width: 100% !important; - box-sizing: border-box !important; -} - -html body .welcome-modern tr:first-child td { - background: transparent !important; - padding: 16px !important; - border: none !important; - display: block !important; - text-align: center !important; - width: 100% !important; - max-width: 100% !important; - margin: 0 !important; - box-sizing: border-box !important; -} - -html body .welcome-modern tr:first-child td:first-child { - border-radius: 0 !important; - padding: 12px 16px 8px 16px !important; - text-align: center !important; - width: 100% !important; - max-width: 100% !important; - box-sizing: border-box !important; - background: transparent !important; - overflow: visible !important; -} - -html body .welcome-modern tr:first-child td:last-child { - border-radius: 0 !important; - padding: 0 16px 12px 16px !important; - text-align: center !important; - width: 100% !important; - max-width: 100% !important; - box-sizing: border-box !important; -} - -/* Logo y texto del header - solo dentro de welcome-modern */ -html body .welcome-modern tr:first-child img { - border-radius: 6px !important; - transition: transform 0.3s ease !important; - height: 45px !important; - width: auto !important; - max-width: 180px !important; - display: block !important; - margin: 0 auto !important; - text-align: center !important; - box-sizing: border-box !important; - object-fit: contain !important; - visibility: visible !important; - opacity: 1 !important; -} - -html body .welcome-modern tr:first-child img:hover { - transform: scale(1.03) !important; -} - -/* Texto blanco - solo dentro de welcome-modern */ -html body .welcome-modern .sh_text_white { - color: var(--color-text-dark) !important; - font-size: 22px !important; - font-weight: 600 !important; - letter-spacing: 0.5px !important; - text-align: center !important; - display: block !important; - width: 100% !important; - max-width: 100% !important; - box-sizing: border-box !important; - margin: 0 !important; - padding: 0 !important; -} - -/* Espaciadores modernos - solo dentro de welcome-modern */ -html body .welcome-modern tr td[colspan="2"] font[size="1"] { - display: none !important; -} - -/* Contenedor para botones en horizontal */ -html body .welcome-modern tbody { - display: block !important; - padding: 12px !important; - text-align: center !important; -} - -/* Filas de botones - hacer que se muestren en línea */ -html body .welcome-modern tr:not(:first-child) { - display: inline-block !important; - vertical-align: top !important; - margin: 0 !important; -} - -/* Celdas con botones */ -html body .welcome-modern tr:not(:first-child) td[colspan="2"] { - display: block !important; -} - -/* Enlaces de navegación modernos - solo dentro de welcome-modern */ -html body .welcome-modern .skb_text { - display: inline-block !important; - color: var(--color-text-light) !important; - font-size: 14px !important; - font-weight: 500 !important; - padding: 0 !important; - margin: 8px 6px !important; - background: var(--color-primary-light) !important; - border-radius: 10px !important; - border: 2px solid var(--color-primary-light) !important; - transition: all 0.3s ease !important; - cursor: pointer !important; - text-decoration: none !important; - position: relative !important; - overflow: hidden !important; - white-space: nowrap !important; - min-width: 100px !important; - text-align: center !important; -} - -/* Hacer que los enlaces dentro de skb_text ocupen todo el espacio del botón */ -html body .welcome-modern .skb_text a { - display: block !important; - width: 100% !important; - color: var(--color-text-light) !important; - text-decoration: none !important; - padding: 10px 14px !important; - margin: 0 !important; - position: relative !important; - z-index: 1 !important; - box-sizing: border-box !important; - line-height: 1.4 !important; -} - -html body .welcome-modern .skb_text::before { - content: '' !important; - position: absolute !important; - top: 0 !important; - left: -100% !important; - width: 100% !important; - height: 100% !important; - background: var(--shadow-white) !important; - transition: left 0.5s ease !important; -} - -html body .welcome-modern .skb_text:hover { - background: var(--color-primary-medium) !important; - transform: translateY(-2px) !important; - box-shadow: 0 6px 16px var(--shadow-primary) !important; - border-color: var(--color-primary-medium) !important; -} - -html body .welcome-modern .skb_text:hover a { - color: var(--color-text-light) !important; -} - -html body .welcome-modern .skb_text:hover::before { - left: 100% !important; -} - -/* Celdas de la tabla - solo dentro de welcome-modern */ -html body .welcome-modern td { - border: none !important; - box-sizing: border-box !important; -} - -/* Responsive - solo para welcome-modern */ -@media (max-width: 480px) { - html body .welcome-modern { - width: 100% !important; - min-width: auto !important; - border-radius: 12px !important; - } - - html body .welcome-modern .skb_text { - font-size: 13px !important; - padding: 0 !important; - margin: 6px 4px !important; - min-width: 80px !important; - display: block !important; - } - - html body .welcome-modern .skb_text a { - display: block !important; - width: 100% !important; - padding: 8px 12px !important; - line-height: 1.4 !important; - } - - html body .welcome-modern tbody { - flex-direction: column !important; - } - - html body .welcome-modern tr td[colspan="2"] { - display: block !important; - width: 100% !important; - } - - html body .welcome-modern .sh_text_white { - font-size: 20px !important; - } - - html body .welcome-modern tr:first-child td { - padding: 12px !important; - } -} - -/* Animación de entrada - solo para welcome-modern */ -@keyframes welcome-modern-fadeInUp { - from { - opacity: 0 !important; - transform: translateY(30px) !important; - } - to { - opacity: 1 !important; - transform: translateY(0) !important; - } -} - -html body .welcome-modern { - animation: welcome-modern-fadeInUp 0.6s ease-out !important; -} - -/* Fondo decorativo - solo cuando existe welcome-modern */ -html body:has(.welcome-modern)::before { - content: '' !important; - position: fixed !important; - top: 0 !important; - left: 0 !important; - width: 100% !important; - height: 100% !important; - background: transparent !important; - pointer-events: none !important; - z-index: -1 !important; -} - - - -/* Phone Login Component --------------------------------------------------------------------*/ - - - -/* ========================================================================== - CONTENEDOR PRINCIPAL - ========================================================================== */ -body:has(form#vicidial_form) { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; - min-height: 100vh; - display: flex; - align-items: center; - justify-content: center; - padding: 15px; - margin: 0; - position: relative; - width: 100%; - box-sizing: border-box; -} - -/* ========================================================================== - ENLACE TIMECLOCK - ========================================================================== */ -body:has(form#vicidial_form) > a { - position: absolute; - top: 20px; - left: 20px; - text-decoration: none; - z-index: 10; -} - -body:has(form#vicidial_form) .sb_text { - color: var(--color-primary-light) !important; - font-size: 16px !important; - font-weight: 500 !important; - transition: color 0.3s ease; -} - -body:has(form#vicidial_form) > a:hover .sb_text { - color: var(--color-primary-medium) !important; -} - -/* ========================================================================== - ELEMENTOS OCULTOS - ========================================================================== */ -body:has(form#vicidial_form) > table[width="100%"] { - display: none; -} - -body:has(form#vicidial_form) > br { - display: none; -} - -/* ========================================================================== - CONTENEDOR DEL FORMULARIO - ========================================================================== */ -body:has(form#vicidial_form) form { - width: 100%; - display: flex; - align-items: center; - justify-content: center; - min-height: 100vh; - margin: 0; - padding: 0; -} - -body:has(form#vicidial_form) form > center { - display: flex; - align-items: center; - justify-content: center; - width: 100%; - min-height: 100vh; - position: relative; - margin: 0; - padding: 0; - padding-left: 15px; -} - -/* ========================================================================== - TABLA PRINCIPAL - ========================================================================== */ -body:has(form#vicidial_form) form center > table[width="460px"] { - background: var(--color-bg-white) !important; - border-radius: 16px; - box-shadow: 0 15px 40px var(--shadow-light); - overflow: hidden; - border: none !important; - border-collapse: collapse !important; - width: 460px !important; - max-width: 100%; - margin-left: calc(50% - 230px + 15px) !important; - margin-right: auto !important; - display: table; - box-sizing: border-box; - position: relative; - animation: login-modern-fadeInUp 0.6s ease-out; -} - -body:has(form#vicidial_form) form center > table[width="460px"] tr:not(:first-child) td { - text-align: center !important; -} - -/* ========================================================================== - HEADER - LOGO Y TÍTULO - ========================================================================== */ -body:has(form#vicidial_form) form center > table[width="460px"] tr:first-child { - display: block; - width: 100%; - box-sizing: border-box; -} - -body:has(form#vicidial_form) form center > table[width="460px"] tr:first-child td { - background: transparent !important; - padding: 16px !important; - border: none !important; - display: block; - text-align: center !important; - width: 100% !important; - max-width: 100% !important; - margin: 0 !important; - box-sizing: border-box !important; -} - -/* Contenedor del logo - mostrar nuevo logo como background */ -body:has(form#vicidial_form) form center > table[width="460px"] tr:first-child td:first-child { - border-radius: 0; - padding: 16px 16px 8px 16px !important; - text-align: center !important; - width: 100% !important; - max-width: 100% !important; - box-sizing: border-box !important; - background-image: url('../../vicidial/images/vicidial_admin_web_logo.png') !important; - background-size: contain !important; - background-repeat: no-repeat !important; - background-position: center !important; - min-height: 45px !important; - position: relative !important; - margin-top: 10px !important; -} - -/* Ocultar imagen vieja del logo (vdc_tab_vicidial.gif) */ -body:has(form#vicidial_form) form center > table[width="460px"] tr:first-child td:first-child img { - display: none !important; - visibility: hidden !important; - opacity: 0 !important; -} - -body:has(form#vicidial_form) form center > table[width="460px"] tr:first-child td:last-child { - border-radius: 0; - padding: 0 16px 8px 16px !important; - text-align: center !important; - width: 100% !important; - max-width: 100% !important; - box-sizing: border-box !important; -} - -body:has(form#vicidial_form) form center > table[width="460px"] tr:first-child img { - border-radius: 6px; - transition: transform 0.3s ease; - height: auto !important; - max-height: 45px !important; - width: auto !important; - max-width: 180px !important; - display: block !important; - margin: 0 auto !important; - text-align: center !important; - box-sizing: border-box; -} - -body:has(form#vicidial_form) form center > table[width="460px"] tr:first-child img:hover { - transform: scale(1.03); -} - -body:has(form#vicidial_form) form center > table[width="460px"] .sh_text_white { - color: var(--color-text-dark) !important; - font-size: 22px !important; - font-weight: 600 !important; - letter-spacing: 0.5px; - text-align: center !important; - display: block; - width: 100%; - max-width: 100%; - box-sizing: border-box; - margin: 0; - padding: 0; -} - -/* ========================================================================== - FORMULARIO - INPUTS Y BOTONES - ========================================================================== */ -body:has(form#vicidial_form) form center > table[width="460px"] tr td[colspan="2"] font[size="1"] { - display: none; -} - -body:has(form#vicidial_form) form center > table[width="460px"] tr:not(:first-child):not(:last-child) { - display: table-row; -} - -body:has(form#vicidial_form) form center > table[width="460px"] tr:not(:first-child):not(:last-child) td { - padding: 12px 16px !important; - border: none !important; - box-sizing: border-box !important; - text-align: center !important; -} - -/* Labels ocultos - Phone Login y Phone Password */ -body:has(form#vicidial_form) form center > table[width="460px"] tr:has(input[name="phone_login"]) td:first-child, -body:has(form#vicidial_form) form center > table[width="460px"] tr:has(input[name="phone_pass"]) td:first-child { - display: none !important; -} - -body:has(form#vicidial_form) form center > table[width="460px"] tr:has(input[name="phone_login"]), -body:has(form#vicidial_form) form center > table[width="460px"] tr:has(input[name="phone_pass"]) { - display: table-row; -} - -body:has(form#vicidial_form) form center > table[width="460px"] tr:has(input[name="phone_login"]) td:last-child, -body:has(form#vicidial_form) form center > table[width="460px"] tr:has(input[name="phone_pass"]) td:last-child { - text-align: center !important; - width: 100% !important; - padding-left: 0 !important; - padding-right: 0 !important; -} - -/* Labels ocultos - User Login y User Password (Campaign Login) */ -body:has(form#vicidial_form) form center > table[width="460px"] tr:has(input[name="VD_login"]) td:first-child, -body:has(form#vicidial_form) form center > table[width="460px"] tr:has(input[name="VD_pass"]) td:first-child { - display: none !important; -} - -body:has(form#vicidial_form) form center > table[width="460px"] tr:has(input[name="VD_login"]), -body:has(form#vicidial_form) form center > table[width="460px"] tr:has(input[name="VD_pass"]) { - display: table-row; -} - -body:has(form#vicidial_form) form center > table[width="460px"] tr:has(input[name="VD_login"]) td:last-child, -body:has(form#vicidial_form) form center > table[width="460px"] tr:has(input[name="VD_pass"]) td:last-child { - text-align: center !important; - width: 100% !important; - padding-left: 0 !important; - padding-right: 0 !important; -} - -/* Campaign select - ocultar label */ -body:has(form#vicidial_form) form center > table[width="460px"] tr:has(select[name="VD_campaign"]) td:first-child { - display: none !important; -} - -body:has(form#vicidial_form) form center > table[width="460px"] tr:has(select[name="VD_campaign"]) td:last-child { - text-align: center !important; - width: 100% !important; - padding-left: 0 !important; - padding-right: 0 !important; -} - -/* Inputs - Phone Login y Campaign Login */ -body:has(form#vicidial_form) form center > table[width="460px"] input[type="text"], -body:has(form#vicidial_form) form center > table[width="460px"] input[type="password"] { - padding: 10px 14px !important; - border: 2px solid var(--color-bg-light) !important; - border-radius: 8px !important; - font-size: 14px !important; - font-family: inherit; - color: var(--color-text-dark) !important; - background: var(--color-bg-white) !important; - transition: all 0.3s ease; - box-sizing: border-box !important; - width: 100%; - max-width: 250px; - display: block; - margin: 0 auto; -} - -body:has(form#vicidial_form) form center > table[width="460px"] input[type="text"]:focus, -body:has(form#vicidial_form) form center > table[width="460px"] input[type="password"]:focus { - outline: none !important; - border-color: var(--color-primary-light) !important; - box-shadow: 0 0 0 3px var(--shadow-primary) !important; -} - -/* Select Campaign */ -body:has(form#vicidial_form) form center > table[width="460px"] select[name="VD_campaign"] { - padding: 10px 14px !important; - border: 2px solid var(--color-bg-light) !important; - border-radius: 8px !important; - font-size: 14px !important; - font-family: inherit; - color: var(--color-text-dark) !important; - background: var(--color-bg-white) !important; - transition: all 0.3s ease; - box-sizing: border-box !important; - width: 100%; - max-width: 250px; - display: block; - margin: 0 auto; - cursor: pointer; -} - -body:has(form#vicidial_form) form center > table[width="460px"] select[name="VD_campaign"]:focus { - outline: none !important; - border-color: var(--color-primary-light) !important; - box-shadow: 0 0 0 3px var(--shadow-primary) !important; -} - -/* Botón Submit */ -body:has(form#vicidial_form) form center > table[width="460px"] input[type="submit"] { - background: var(--color-primary-light) !important; - color: var(--color-text-light) !important; - border: 2px solid var(--color-primary-light) !important; - border-radius: 10px !important; - padding: 12px 24px !important; - font-size: 15px !important; - font-weight: 600 !important; - cursor: pointer; - transition: all 0.3s ease; - font-family: inherit; - box-sizing: border-box !important; -} - -body:has(form#vicidial_form) form center > table[width="460px"] input[type="submit"]:hover { - background: var(--color-primary-medium) !important; - border-color: var(--color-primary-medium) !important; - transform: translateY(-2px); - box-shadow: 0 6px 16px var(--shadow-primary) !important; -} - -body:has(form#vicidial_form) form center > table[width="460px"] input[type="submit"]:active { - transform: translateY(0); -} - -/* Botón Refresh Campaign List */ -body:has(form#vicidial_form) form center > table[width="460px"] input[type="button"][value="Refresh Campaign List"] { - background: var(--color-bg-light) !important; - color: var(--color-text-dark) !important; - border: 2px solid var(--color-bg-light) !important; - border-radius: 10px !important; - padding: 10px 20px !important; - font-size: 14px !important; - font-weight: 500 !important; - cursor: pointer; - transition: all 0.3s ease; - font-family: inherit; - box-sizing: border-box !important; - margin-left: 10px; -} - -body:has(form#vicidial_form) form center > table[width="460px"] input[type="button"][value="Refresh Campaign List"]:hover { - background: var(--color-primary-lightest) !important; - border-color: var(--color-primary-light) !important; - color: var(--color-primary-dark) !important; - transform: translateY(-2px); - box-shadow: 0 4px 12px var(--shadow-primary) !important; -} - -body:has(form#vicidial_form) form center > table[width="460px"] input[type="button"][value="Refresh Campaign List"]:active { - transform: translateY(0); -} - -/* ========================================================================== - TEXTO DE VERSIÓN - ========================================================================== */ -body:has(form#vicidial_form) form center > table[width="460px"] .body_tiny { - color: var(--color-text-dark) !important; - font-size: 11px !important; - opacity: 0.7; - display: block; - padding: 8px 16px !important; -} - -/* ========================================================================== - LOADING BOX - ========================================================================== */ -body:has(form#vicidial_form) #LoginLoadingBox { - text-align: center; - padding: 20px; -} - -body:has(form#vicidial_form) #LoginLoadingBox .skb_text { - color: var(--color-primary-light) !important; - font-size: 16px !important; - display: block; - margin-bottom: 15px; -} - -body:has(form#vicidial_form) #LoginLoadingBox img { - display: block; - margin: 0 auto; -} - -/* ========================================================================== - CELDAS Y FILAS DE LA TABLA - ========================================================================== */ -body:has(form#vicidial_form) form center > table[width="460px"] td { - border: none !important; - box-sizing: border-box !important; -} - -body:has(form#vicidial_form) form center > table[width="460px"] tr { - border: none !important; -} - -/* ========================================================================== - RESPONSIVE - ========================================================================== */ -@media (max-width: 480px) { - body:has(form#vicidial_form) form center > table[width="460px"] { - width: 100% !important; - border-radius: 12px; - } - - body:has(form#vicidial_form) form center > table[width="460px"] input[type="text"], - body:has(form#vicidial_form) form center > table[width="460px"] input[type="password"] { - max-width: 100% !important; - width: 100% !important; - } - - body:has(form#vicidial_form) form center > table[width="460px"] tr:not(:first-child):not(:last-child) td { - display: block; - width: 100% !important; - text-align: left !important; - } - - body:has(form#vicidial_form) form center > table[width="460px"] tr:not(:first-child):not(:last-child) td:first-child { - margin-bottom: 8px; - } - - body:has(form#vicidial_form) form center > table[width="460px"] .sh_text_white { - font-size: 20px !important; - } - - body:has(form#vicidial_form) form center > table[width="460px"] tr:first-child td { - padding: 12px !important; - } -} - -/* ========================================================================== - ANIMACIONES - ========================================================================== */ -@keyframes login-modern-fadeInUp { - from { - opacity: 0; - transform: translateY(30px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -/* ========================================================================== - TIMECLOCK COMPONENT - ========================================================================== */ - -/* Contenedor principal */ -body:has(form#vicidial_form[action*="timeclock"]) { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; - min-height: 100vh !important; - display: flex !important; - align-items: center !important; - justify-content: center !important; - padding: 15px !important; - margin: 0 !important; - position: relative !important; - width: 100% !important; - box-sizing: border-box !important; -} - -/* Ocultar elementos innecesarios */ -body:has(form#vicidial_form[action*="timeclock"]) > table[width="100%"] { - display: none !important; -} - -body:has(form#vicidial_form[action*="timeclock"]) > br { - display: none !important; -} - -/* Contenedor del formulario */ -body:has(form#vicidial_form[action*="timeclock"]) form { - width: 100% !important; - display: flex !important; - align-items: center !important; - justify-content: center !important; - min-height: 100vh !important; - margin: 0 !important; - padding: 0 !important; -} - -body:has(form#vicidial_form[action*="timeclock"]) form > center { - display: flex !important; - align-items: center !important; - justify-content: center !important; - width: 100% !important; - min-height: 100vh !important; - position: relative !important; - margin: 0 auto !important; - padding: 0 !important; - text-align: center !important; - left: 0 !important; - right: 0 !important; -} - -/* Tabla principal */ -body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] { - background: var(--color-bg-white) !important; - border-radius: 16px !important; - box-shadow: 0 15px 40px var(--shadow-light) !important; - overflow: hidden !important; - border: none !important; - border-collapse: collapse !important; - width: 460px !important; - max-width: 100% !important; - margin: 0 auto !important; - display: table !important; - box-sizing: border-box !important; - position: relative !important; - animation: login-modern-fadeInUp 0.6s ease-out !important; - left: 50% !important; - transform: translateX(-50%) !important; -} - -/* Header - Logo y Título */ -body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] tr:first-child { - display: block !important; - width: 100% !important; - box-sizing: border-box !important; -} - -body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] tr:first-child td { - background: transparent !important; - padding: 16px !important; - border: none !important; - display: block !important; - text-align: center !important; - width: 100% !important; - max-width: 100% !important; - margin: 0 !important; - box-sizing: border-box !important; -} - -/* Ocultar tabla con width 100% dentro del form center */ -body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="100%"] { - display: none !important; - width: 0 !important; - margin: 0 !important; - padding: 0 !important; -} - -/* Contenedor del logo - mostrar nuevo logo */ -body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] tr:first-child td:first-child { - border-radius: 0 !important; - padding: 16px 16px 8px 16px !important; - text-align: center !important; - width: 100% !important; - max-width: 100% !important; - box-sizing: border-box !important; - background-image: url('../../vicidial/images/vicidial_admin_web_logo.png') !important; - background-size: contain !important; - background-repeat: no-repeat !important; - background-position: center !important; - min-height: 45px !important; - position: relative !important; - margin-top: 10px !important; -} - -/* Ocultar imagen vieja del logo */ -body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] tr:first-child td:first-child img { - display: none !important; - visibility: hidden !important; - opacity: 0 !important; -} - -body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] tr:first-child td:last-child { - border-radius: 0 !important; - padding: 0 16px 8px 16px !important; - text-align: center !important; - width: 100% !important; - max-width: 100% !important; - box-sizing: border-box !important; -} - -/* Título Timeclock */ -body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] .sh_text_white { - color: var(--color-text-dark) !important; - font-size: 22px !important; - font-weight: 600 !important; - letter-spacing: 0.5px !important; - text-align: center !important; - display: block !important; - width: 100% !important; - max-width: 100% !important; - box-sizing: border-box !important; - margin: 0 !important; - padding: 0 !important; -} - -/* Espaciadores */ -body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] tr td[colspan="2"] font[size="1"] { - display: none !important; -} - -/* Filas del formulario */ -body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] tr:not(:first-child):not(:last-child) { - display: table-row !important; -} - -body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] tr:not(:first-child):not(:last-child) td { - padding: 12px 16px !important; - border: none !important; - box-sizing: border-box !important; - text-align: center !important; -} - -/* Labels ocultos */ -body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] tr:has(input[name="user"]) td:first-child, -body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] tr:has(input[name="pass"]) td:first-child { - display: none !important; -} - -body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] tr:has(input[name="user"]), -body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] tr:has(input[name="pass"]) { - display: table-row !important; -} - -body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] tr:has(input[name="user"]) td:last-child, -body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] tr:has(input[name="pass"]) td:last-child { - text-align: center !important; - width: 100% !important; - padding-left: 0 !important; - padding-right: 0 !important; -} - -/* Inputs */ -body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] input[type="text"], -body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] input[type="password"] { - padding: 10px 14px !important; - border: 2px solid var(--color-bg-light) !important; - border-radius: 8px !important; - font-size: 14px !important; - font-family: inherit !important; - color: var(--color-text-dark) !important; - background: var(--color-bg-white) !important; - transition: all 0.3s ease !important; - box-sizing: border-box !important; - width: 100% !important; - max-width: 250px !important; - display: block !important; - margin: 0 auto !important; -} - -body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] input[type="text"]:focus, -body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] input[type="password"]:focus { - outline: none !important; - border-color: var(--color-primary-light) !important; - box-shadow: 0 0 0 3px var(--shadow-primary) !important; -} - -/* Botón Submit */ -body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] input[type="submit"] { - background: var(--color-primary-light) !important; - color: var(--color-text-light) !important; - border: 2px solid var(--color-primary-light) !important; - border-radius: 10px !important; - padding: 10px 20px !important; - font-size: 14px !important; - font-weight: 500 !important; - cursor: pointer !important; - transition: all 0.3s ease !important; - font-family: inherit !important; - box-sizing: border-box !important; -} - -body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] input[type="submit"]:hover { - background: var(--color-primary-medium) !important; - border-color: var(--color-primary-medium) !important; - transform: translateY(-2px) !important; - box-shadow: 0 6px 16px var(--shadow-primary) !important; -} - -body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] input[type="submit"]:active { - transform: translateY(0) !important; -} - -/* Versión y Build */ -body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] .body_tiny { - color: var(--color-text-dark) !important; - font-size: 11px !important; - opacity: 0.7 !important; - text-align: center !important; - display: block !important; - width: 100% !important; - padding: 8px 0 !important; - margin: 0 !important; -} - -/* Responsive */ -@media (max-width: 480px) { - body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] { - width: 100% !important; - border-radius: 12px !important; - } - - body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] input[type="text"], - body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] input[type="password"] { - max-width: 100% !important; - } -} - - - -/* ========================================================================== - SIDEBAR - CONTENEDOR PRINCIPAL - Solo afecta al componente admin que tiene esta estructura específica - ========================================================================== */ - body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) { - margin: 0 !important; - padding: 0 !important; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; -} - -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) center { - margin: 0 auto !important; - padding: 0 !important; - width: 100% !important; - display: block !important; - text-align: center !important; -} - -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] { - margin: 0 auto !important; - padding: 0 !important; - width: 100% !important; - max-width: 100% !important; - border-spacing: 0 !important; - min-height: 100vh !important; - display: table !important; - table-layout: fixed !important; -} - -/* Fila principal que contiene sidebar y contenido */ -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] tbody > tr:first-child { - height: auto !important; -} - -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] { - background: var(--color-bg-white) !important; - padding: 20px 5px !important; - vertical-align: top; - box-sizing: border-box; - width: 170px !important; - min-width: 170px !important; - border-right: 1px solid var(--color-bg-light); - margin: 0 !important; - position: relative; - left: 0 !important; -} - -/* Logo en sidebar */ -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] img { - border-radius: 8px; - margin-bottom: 15px; - transition: transform 0.3s ease; - display: block; - margin-left: auto; - margin-right: auto; - max-width: 100%; - height: auto; -} - -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] img:hover { - transform: scale(1.05); -} - -/* Título ADMINISTRATION */ -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] b font { - color: var(--color-text-dark) !important; - font-size: 14px !important; - font-weight: 600 !important; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; - letter-spacing: 0.3px; - display: block; - text-align: center; - -} - -/* Tabla de navegación */ -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] table { - background: transparent !important; - width: 160px !important; - max-width: 160px !important; - - border-collapse: collapse; -} - -/* Quitar fondo azul oscuro de las filas de navegación */ -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] table tr[bgcolor="#015B91"] { - background: transparent !important; -} - -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] table tr[bgcolor="#015B91"] td { - background: transparent !important; -} - -/* ========================================================================== - ITEMS DE NAVEGACIÓN - ESTILO BOTÓN - ========================================================================== */ -/* Items normales - Botones verdes */ -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .head_style { - background: var(--color-primary-light) !important; - background-color: var(--color-primary-light) !important; - padding: 8px 6px !important; - border-radius: 8px; - transition: all 0.3s ease; - cursor: pointer; - margin: 3px 0; - border: 2px solid var(--color-primary-light) !important; - display: block; -} - -/* Sobrescribir estilos inline del HTML */ -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] tr .head_style { - background: var(--color-primary-light) !important; - background-color: var(--color-primary-light) !important; -} - -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] tr[bgcolor="#015B91"] .head_style { - background: var(--color-primary-light) !important; - background-color: var(--color-primary-light) !important; -} - -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] tr[bgcolor="#015B91"] .head_style td { - background: var(--color-primary-light) !important; - background-color: var(--color-primary-light) !important; -} - -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .head_style:hover { - background: var(--color-primary-light) !important; - background-color: var(--color-primary-light) !important; - border-color: var(--color-primary-light) !important; - transform: translateY(-2px); - box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3) !important; -} - -/* Sobrescribir hover inline del HTML */ -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] tr .head_style:hover { - background: var(--color-primary-light) !important; - background-color: var(--color-primary-light) !important; -} - -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .head_style td { - padding: 0 !important; - border: none !important; - background: var(--color-primary-light) !important; - background-color: var(--color-primary-light) !important; - width: 160px !important; -} - -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .head_style a { - text-decoration: none; - display: flex; - align-items: center; - gap: 6px; -} - -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .head_style font { - color: var(--color-text-light) !important; - font-size: 12px !important; - font-weight: 500 !important; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; -} - -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .head_style img { - filter: brightness(0) invert(1) !important; - margin: 0 !important; - width: 14px !important; - height: 14px !important; -} - -/* Item seleccionado - Verde más oscuro */ -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .head_style_selected { - background: var(--color-primary-medium) !important; - background-color: var(--color-primary-medium) !important; - padding: 8px 6px !important; - border-radius: 8px; - margin: 3px 0; - border: 2px solid var(--color-primary-medium) !important; - display: block; - box-shadow: 0 2px 8px rgba(56, 142, 60, 0.3) !important; -} - -/* Sobrescribir estilos inline del HTML para seleccionado */ -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] tr .head_style_selected { - background: var(--color-primary-medium) !important; - background-color: var(--color-primary-medium) !important; -} - -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] tr .head_style_selected:hover { - background: var(--color-primary-medium) !important; - background-color: var(--color-primary-medium) !important; -} - -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] tr[bgcolor="#015B91"] .head_style_selected { - background: var(--color-primary-medium) !important; - background-color: var(--color-primary-medium) !important; -} - -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] tr[bgcolor="#015B91"] .head_style_selected td { - background: var(--color-primary-medium) !important; - background-color: var(--color-primary-medium) !important; -} - -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .head_style_selected td { - padding: 0 !important; - border: none !important; - background: var(--color-primary-medium) !important; - background-color: var(--color-primary-medium) !important; - width: 160px !important; -} - -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .head_style_selected a { - text-decoration: none; - display: flex; - align-items: center; - gap: 6px; -} - -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .head_style_selected font { - color: var(--color-text-light) !important; - font-weight: 600 !important; - font-size: 12px !important; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; -} - -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .head_style_selected img { - filter: brightness(0) invert(1) !important; - margin: 0 !important; - width: 14px !important; - height: 14px !important; -} - -/* Líneas horizontales - ocultas */ -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .horiz_line { - display: none !important; -} - -/* ========================================================================== - ITEMS DESPLEGABLES DEL MENÚ (SUBMENÚ) - ========================================================================== */ -/* Items desplegables normales */ -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .subhead_style { - background: transparent !important; - background-color: transparent !important; - padding: 6px 6px 6px 20px !important; - border-radius: 6px; - transition: all 0.2s ease; - cursor: pointer; - margin: 2px 0; - border-left: 3px solid transparent !important; -} - -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .subhead_style:hover { - background: rgba(76, 175, 80, 0.1) !important; - background-color: rgba(76, 175, 80, 0.1) !important; - border-left-color: var(--color-primary-light) !important; - transform: translateX(3px); -} - -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .subhead_style td { - padding: 0 !important; - border: none !important; - background: transparent !important; - background-color: transparent !important; -} - -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .subhead_style a { - text-decoration: none; - display: block; -} - -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .subhead_style font { - color: var(--color-text-dark) !important; - font-size: 11px !important; - font-weight: 400 !important; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; -} - -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .subhead_style a font { - color: var(--color-text-dark) !important; -} - -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .subhead_style:hover font { - color: var(--color-primary-light) !important; - font-weight: 500 !important; -} - -/* Item desplegable seleccionado */ -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .subhead_style_selected { - background: rgba(76, 175, 80, 0.15) !important; - background-color: rgba(76, 175, 80, 0.15) !important; - padding: 6px 6px 6px 20px !important; - border-radius: 6px; - margin: 2px 0; - border-left: 3px solid var(--color-primary-light) !important; - box-shadow: 0 1px 4px rgba(76, 175, 80, 0.2) !important; -} - -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .subhead_style_selected:hover { - background: rgba(76, 175, 80, 0.2) !important; - background-color: rgba(76, 175, 80, 0.2) !important; - border-left-color: var(--color-primary-medium) !important; -} - -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .subhead_style_selected td { - padding: 0 !important; - border: none !important; - background: transparent !important; - background-color: transparent !important; -} - -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .subhead_style_selected a { - text-decoration: none; - display: block; -} - -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .subhead_style_selected font { - color: var(--color-primary-medium) !important; - font-size: 11px !important; - font-weight: 600 !important; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; -} - -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .subhead_style_selected a font { - color: var(--color-primary-medium) !important; -} - -/* ========================================================================== - ICONOS EN ITEMS DESPLEGABLES DEL MENÚ - ========================================================================== */ -/* Iconos en items desplegables normales */ -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .subhead_style img { - margin-right: 6px !important; - vertical-align: middle !important; - display: inline-block !important; - transition: transform 0.2s ease; - filter: opacity(0.7); -} - -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .subhead_style:hover img { - transform: scale(1.1); - filter: opacity(1); -} - -/* Iconos en items desplegables seleccionados */ -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .subhead_style_selected img { - margin-right: 6px !important; - vertical-align: middle !important; - display: inline-block !important; - filter: opacity(1); -} - -/* Ocultar iconos blank.gif (espacios en blanco) */ -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .subhead_style img[src*="blank.gif"], -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .subhead_style_selected img[src*="blank.gif"] { - display: none !important; -} - -/* Item de menú admin seleccionado */ -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .adminmenu_style_selected { - background: rgba(76, 175, 80, 0.15) !important; - background-color: rgba(76, 175, 80, 0.15) !important; - padding: 6px 6px 6px 20px !important; - border-radius: 6px; - margin: 2px 0; - border-left: 3px solid var(--color-primary-light) !important; - transition: all 0.2s ease; - cursor: pointer; -} - -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .adminmenu_style_selected:hover { - background: rgba(76, 175, 80, 0.2) !important; - background-color: rgba(76, 175, 80, 0.2) !important; - border-left-color: var(--color-primary-medium) !important; -} - -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .adminmenu_style_selected td { - padding: 0 !important; - border: none !important; - background: transparent !important; - background-color: transparent !important; -} - -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .adminmenu_style_selected a { - text-decoration: none; - display: block; -} - -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .adminmenu_style_selected font { - color: var(--color-primary-medium) !important; - font-size: 11px !important; - font-weight: 600 !important; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; -} - -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .adminmenu_style_selected a font { - color: var(--color-primary-medium) !important; -} - -/* ========================================================================== - CONTENIDO PRINCIPAL - ========================================================================== */ -/* Celda de contenido principal - se ajusta al contenido y mantiene centrado */ -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="870"][bgcolor="#D9E6FE"], -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="770"][bgcolor="#D9E6FE"] { - vertical-align: top !important; - padding: 0 !important; -} - -/* Tabla de navegación superior dentro del contenido - siempre centrada */ -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="#D9E6FE"][cellpadding="2"] { - margin: 0 auto !important; - width: 100% !important; - max-width: 100% !important; -} - -/* Asegurar que las tablas internas también estén centradas */ -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) td[bgcolor="#D9E6FE"] center { - text-align: center !important; - margin: 0 auto !important; -} - -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) td[bgcolor="#D9E6FE"] table { - margin: 0 auto !important; -} - -/* ========================================================================== - ICONOS EN CONTENIDO PRINCIPAL - ========================================================================== */ -/* Iconos grandes en tarjetas de menú (42x42) */ -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) td[width="870"][bgcolor="#D9E6FE"] img[width="42"][height="42"] { - border-radius: 8px; - padding: 4px; - background: rgba(76, 175, 80, 0.1); - transition: all 0.3s ease; - display: inline-block; - vertical-align: middle; -} - -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) td[width="870"][bgcolor="#D9E6FE"] .adminmenu_style_selected:hover img[width="42"][height="42"] { - background: rgba(76, 175, 80, 0.2); - transform: scale(1.05); - box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3); -} - -/* Iconos pequeños en items de menú (11x11) */ -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) td[width="870"][bgcolor="#D9E6FE"] .adminmenu_style_selected img[width="11"][height="11"] { - margin-right: 6px !important; - vertical-align: middle !important; - display: inline-block !important; - transition: transform 0.2s ease; - filter: opacity(0.8); -} - -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) td[width="870"][bgcolor="#D9E6FE"] .adminmenu_style_selected:hover img[width="11"][height="11"] { - transform: scale(1.15); - filter: opacity(1); -} - -/* Ocultar iconos blank.gif en contenido principal */ -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) td[width="870"][bgcolor="#D9E6FE"] .adminmenu_style_selected img[src*="blank.gif"] { - display: none !important; -} - -/* Estilos para tarjetas de menú con iconos */ -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) td[width="870"][bgcolor="#D9E6FE"] .adminmenu_style_selected { - border-radius: 8px; - padding: 12px !important; - margin: 8px 0 !important; - background: var(--bg-white-transparent) !important; - background-color: var(--bg-white-transparent) !important; - border: 1px solid rgba(76, 175, 80, 0.2) !important; - transition: all 0.3s ease; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); -} - -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) td[width="870"][bgcolor="#D9E6FE"] .adminmenu_style_selected:hover { - background: rgba(76, 175, 80, 0.1) !important; - background-color: rgba(76, 175, 80, 0.1) !important; - border-color: rgba(76, 175, 80, 0.4) !important; - transform: translateY(-2px); - box-shadow: 0 4px 12px rgba(76, 175, 80, 0.2); -} - -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) td[width="870"][bgcolor="#D9E6FE"] .adminmenu_style_selected td { - padding: 4px 8px !important; - vertical-align: middle !important; -} - -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) td[width="870"][bgcolor="#D9E6FE"] .adminmenu_style_selected a { - display: flex; - align-items: center; - gap: 8px; - text-decoration: none; -} - -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) td[width="870"][bgcolor="#D9E6FE"] .adminmenu_style_selected span { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; - font-size: 14px !important; - font-weight: 600 !important; - color: var(--color-text-dark) !important; -} - -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) td[width="870"][bgcolor="#D9E6FE"] .adminmenu_style_selected font { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; - font-size: 11px !important; - color: var(--color-text-dark) !important; -} - -/* ========================================================================== - FILAS DE TABLAS EN CONTENIDO PRINCIPAL - ========================================================================== */ -/* Filas de tabla - variante Y (alternadas) */ -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) .records_list_y { - background: #f8f9fa !important; - background-color: #f8f9fa !important; - transition: all 0.2s ease; - cursor: pointer; -} - -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) .records_list_y:hover { - background: rgba(76, 175, 80, 0.1) !important; - background-color: rgba(76, 175, 80, 0.1) !important; - transform: translateX(2px); - box-shadow: 0 2px 6px rgba(76, 175, 80, 0.15) !important; -} - -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) .records_list_y td { - padding: 10px 8px !important; - border-bottom: 1px solid #e0e0e0 !important; - vertical-align: middle !important; -} - -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) .records_list_y font { - color: var(--color-text-dark) !important; - font-size: 12px !important; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; -} - -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) .records_list_y a { - color: var(--color-primary-light) !important; - text-decoration: none; - font-weight: 500; - transition: color 0.2s ease; -} - -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) .records_list_y a:hover { - color: var(--color-primary-medium) !important; - text-decoration: underline; -} - -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) .records_list_y a font { - color: var(--color-primary-light) !important; -} - -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) .records_list_y a:hover font { - color: var(--color-primary-medium) !important; -} - -/* Filas de tabla - variante X */ -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) .records_list_x { - background: var(--color-bg-white) !important; - background-color: var(--color-bg-white) !important; - transition: all 0.2s ease; - cursor: pointer; -} - -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) .records_list_x:hover { - background: rgba(76, 175, 80, 0.08) !important; - background-color: rgba(76, 175, 80, 0.08) !important; - transform: translateX(2px); - box-shadow: 0 2px 6px rgba(76, 175, 80, 0.12) !important; -} - -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) .records_list_x td { - padding: 10px 8px !important; - border-bottom: 1px solid #e0e0e0 !important; - vertical-align: middle !important; -} - -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) .records_list_x font { - color: var(--color-text-dark) !important; - font-size: 12px !important; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; -} - -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) .records_list_x a { - color: var(--color-primary-light) !important; - text-decoration: none; - font-weight: 500; - transition: color 0.2s ease; -} - -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) .records_list_x a:hover { - color: var(--color-primary-medium) !important; - text-decoration: underline; -} - -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) .records_list_x a font { - color: var(--color-primary-light) !important; -} - -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) .records_list_x a:hover font { - color: var(--color-primary-light) !important; -} - -/* Estilos para encabezados de tabla en contenido principal */ -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="black"] { - border-radius: 8px 8px 0 0 !important; - overflow: hidden; -} - -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="black"] td { - padding: 12px 8px !important; - background: var(--color-text-dark) !important; - background-color: var(--color-text-dark) !important; -} - -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="black"] font { - color: var(--color-text-light) !important; - font-weight: 600 !important; - font-size: 11px !important; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="black"] a { - color: var(--color-text-light) !important; - text-decoration: none; - transition: color 0.2s ease; -} - -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="black"] a:hover { - color: var(--color-primary-light) !important; -} - -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="black"] a font { - color: var(--color-text-light) !important; -} - -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="black"] a:hover font { - color: var(--color-primary-light) !important; -} - -/* ========================================================================== - FOOTER DEL SIDEBAR - ========================================================================== */ -/* Footer con versión y copyright */ -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] tr:last-child td[bgcolor="#015B91"] { - background: var(--color-bg-white) !important; - background-color: var(--color-bg-white) !important; - padding: 0px 10px 1px 10px !important; - text-align: center; -} - -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] tr:last-child td[bgcolor="#015B91"] font { - color: var(--color-primary-light) !important; - font-size: 9px !important; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; -} - -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] tr:last-child td[bgcolor="#015B91"] a { - color: var(--color-primary-light) !important; - text-decoration: none; -} - -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] tr:last-child td[bgcolor="#015B91"] a font { - color: var(--color-primary-light) !important; -} - -body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] tr:last-child td[bgcolor="#015B91"] a:hover { - color: var(--color-primary-medium) !important; - text-decoration: underline; -} - -/* ========================================================================== - RESPONSIVE - ========================================================================== */ -@media (max-width: 768px) { - body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] { - width: 100% !important; - display: block; - padding: 15px 10px !important; - } - - body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] table { - margin-top: 10px; - } - - body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .head_style, - body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .head_style_selected { - padding: 8px 10px !important; - font-size: 12px !important; - } - - body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] b font { - font-size: 14px !important; - } -} - -/* ========================================================================== - ESTILOS MODERNOS PARA BARRA DE NAVEGACIÓN SUPERIOR - ========================================================================== */ - -/* Estilos para la barra de navegación superior (HOME | Timeclock | Chat | Logout) */ -table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:first-child[bgcolor="#015B91"] { - background: var(--color-bg-white) !important; - box-shadow: none !important; - border-bottom: none !important; - border-left: none !important; - padding: 16px 24px !important; - height: auto !important; - min-height: 60px !important; - position: relative !important; - overflow: hidden !important; -} - -/* Efecto decorativo de brillo sutil - ajustado para fondo blanco */ -table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:first-child[bgcolor="#015B91"]::before { - content: '' !important; - position: absolute !important; - top: 0 !important; - left: -100% !important; - width: 100% !important; - height: 100% !important; - background: linear-gradient(90deg, transparent, var(--bg-decorative-1), transparent) !important; - animation: shimmer 3s infinite !important; -} - -@keyframes shimmer { - 0% { left: -100%; } - 100% { left: 100%; } -} - -/* Estilos para las celdas de la barra de navegación */ -table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:first-child[bgcolor="#015B91"] td { - background: transparent !important; - padding: 1px 20px !important; - vertical-align: middle !important; - position: relative !important; - z-index: 1 !important; -} - -/* Estilos para el texto de navegación (HOME, Timeclock, etc.) */ -table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:first-child[bgcolor="#015B91"] font[face="ARIAL,HELVETICA"][color="WHITE"] { - color: var(--color-primary-medium) !important; - font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Arial, Helvetica, sans-serif !important; - font-weight: 700 !important; - text-shadow: none !important; - letter-spacing: 0.5px !important; - font-size: 13px !important; -} - -/* Separador "|" con estilo moderno - todos los font dentro del td izquierdo */ -table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:first-child[bgcolor="#015B91"] td[align="LEFT"] font[face="ARIAL,HELVETICA"][color="WHITE"][size="1"] { - color: var(--color-primary-medium) !important; - font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Arial, Helvetica, sans-serif !important; - font-weight: 700 !important; - text-shadow: none !important; - opacity: 1 !important; - margin: 0 6px !important; -} - -/* Asegurar que el nombre de usuario (6666) tenga el mismo color */ -table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:first-child[bgcolor="#015B91"] td[align="LEFT"] font[face="ARIAL,HELVETICA"][color="WHITE"][size="1"] font[face="ARIAL,HELVETICA"][color="WHITE"][size="1"] { - color: var(--color-primary-medium) !important; - font-weight: 700 !important; - opacity: 1 !important; -} - -/* Estilos para la fecha/hora en la derecha */ -table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:first-child[bgcolor="#015B91"] td[align="RIGHT"] { - text-align: right !important; - position: relative !important; - z-index: 1 !important; -} - -table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:first-child[bgcolor="#015B91"] td[align="RIGHT"] font { - color: var(--color-primary-medium) !important; - font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Arial, Helvetica, sans-serif !important; - font-weight: 600 !important; - text-shadow: none !important; - letter-spacing: 0.8px !important; - font-size: 13px !important; - background: var(--bg-decorative-1) !important; - padding: 6px 12px !important; - border-radius: 20px !important; - display: inline-block !important; - border: 1px solid var(--color-primary-lightest) !important; -} - -/* Ocultar los dos tr vacíos siguientes */ -table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:nth-child(2)[bgcolor="#015B91"] { - display: none !important; - visibility: hidden !important; - height: 0 !important; - padding: 0 !important; - margin: 0 !important; - line-height: 0 !important; -} - -table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:nth-child(3)[bgcolor="#E6E6E6"] { - display: none !important; - visibility: hidden !important; - height: 0 !important; - padding: 0 !important; - margin: 0 !important; - line-height: 0 !important; -} - -/* Ocultar la barra verde (td con colspan="2" height="2" bgcolor="#015B91") */ -table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr td[align="LEFT"][colspan="2"][height="2"][bgcolor="#015B91"], -table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr td[colspan="2"][height="2"][bgcolor="#015B91"] { - display: none !important; - visibility: hidden !important; - height: 0 !important; - padding: 0 !important; - margin: 0 !important; - line-height: 0 !important; - border: none !important; -} - -/* Ocultar el tr que contiene la barra verde */ -table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:has(td[colspan="2"][height="2"][bgcolor="#015B91"]), -table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:has(td[align="LEFT"][colspan="2"][height="2"][bgcolor="#015B91"]) { - display: none !important; - visibility: hidden !important; - height: 0 !important; - padding: 0 !important; - margin: 0 !important; - line-height: 0 !important; -} - -/* Mejora adicional: hover effect en los elementos de navegación (si fueran clicables) */ -table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:first-child[bgcolor="#015B91"] td[align="LEFT"] { - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; -} - -/* Efecto hover moderno para los elementos de texto de navegación */ -table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:first-child[bgcolor="#015B91"] td[align="LEFT"] font[face="ARIAL,HELVETICA"][color="WHITE"][size="1"] { - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; - position: relative !important; - display: inline-block !important; -} - -/* Efecto de resaltado sutil al pasar el mouse (si fuera interactivo) */ -table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:first-child[bgcolor="#015B91"] td[align="LEFT"] font[face="ARIAL,HELVETICA"][color="WHITE"][size="1"]:hover { - color: var(--color-primary-medium) !important; - transform: translateY(-1px) !important; -} - -/* ========================================================================== - RESPONSIVE - BARRA DE NAVEGACIÓN SUPERIOR - ========================================================================== */ - -/* Prevenir que la fecha/hora se apile y mantener altura fija */ -table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:first-child[bgcolor="#015B91"] { - white-space: nowrap !important; - overflow: hidden !important; -} - -table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:first-child[bgcolor="#015B91"] td[align="RIGHT"] { - white-space: nowrap !important; - overflow: hidden !important; - text-overflow: ellipsis !important; -} - -table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:first-child[bgcolor="#015B91"] td[align="RIGHT"] font { - white-space: nowrap !important; - overflow: hidden !important; - text-overflow: ellipsis !important; - max-width: 100% !important; - display: inline-block !important; -} - -/* Media queries para pantallas pequeñas */ -@media (max-width: 768px) { - /* Mantener altura fija y reducir padding */ - table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:first-child[bgcolor="#015B91"] { - min-height: 50px !important; - max-height: 50px !important; - height: 50px !important; - padding: 8px 12px !important; - } - - /* Reducir tamaño de fuente de fecha/hora */ - table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:first-child[bgcolor="#015B91"] td[align="RIGHT"] font { - font-size: 10px !important; - padding: 4px 8px !important; - letter-spacing: 0.3px !important; - } - - /* Reducir tamaño de fuente de navegación */ - table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:first-child[bgcolor="#015B91"] td[align="LEFT"] font[face="ARIAL,HELVETICA"][color="WHITE"][size="1"] { - font-size: 11px !important; - } -} - -@media (max-width: 480px) { - /* Altura aún más pequeña en móviles */ - table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:first-child[bgcolor="#015B91"] { - min-height: 45px !important; - max-height: 45px !important; - height: 45px !important; - padding: 6px 10px !important; - } - - /* Ocultar fecha completa, mostrar solo hora si es necesario */ - table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:first-child[bgcolor="#015B91"] td[align="RIGHT"] font { - font-size: 9px !important; - padding: 3px 6px !important; - } - - /* Reducir más el texto de navegación */ - table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:first-child[bgcolor="#015B91"] td[align="LEFT"] font[face="ARIAL,HELVETICA"][color="WHITE"][size="1"] { - font-size: 10px !important; - margin: 0 3px !important; - } -} - diff --git a/Custom/installer/LogoAgent.png b/Custom/installer/LogoAgent.png new file mode 100644 index 0000000000000000000000000000000000000000..09db2e65c197b0a7f1d53c995a7b423a70e1adff GIT binary patch literal 19625 zcmXtgWmsEH+iik7L5jN-=9abAod^{r8FUmP6aWB#E+;Fg1^@uBq2C>m5TNe|;GhfW2ePBAt_$=7dJ!@T zkV&Tq7y2WitCWtbx`U;whl#TVz{A6X)yCe|#mvOfg4MyN_pZy>OGND?#F+W3`?P+7wQyn#4td*$I9>l+Z^PA&hy_}yNZj{oaG;vVLjCa^anIMiZ*%kH*_f-Db$70z8Dyc}o)-U4PKNPYn8P-yX zSO}POJ)Od{-ZVJ!Rh?wt`T)aB)U8Gd)_!XLT@3&NX2wYGunuk{nUb>0@w1Pvv(v0u z5(9CL*@RJ}D+<=-{_@cC8FI1)GM4<;Jp~M4=`eXv9$CyTLW_Y=71z*py1yfoPA^W< z`C47uJZRpFl-#VB>cy8jkU`b^e~kcC*Ljv!mjOTxdX+SqP?@KnDew^sR0+in4qbTp zv#UaG&vG~TMg$%q{~H#)&ISQPHhK?S;B3uo#Ht4Uw1GTx=+pkWIe z4D_m`lym3)-@v9%+>-py_8PSTLfHU=L^2ri)Q17(Sjl57<;f?zjzn?M^Cx+M^FbL_ zewJIJ|4ruXzxJ^?al~%FTnj&8!~FaI z7SL6>6`|`lzXx%Gv%u4KEX@BM$`F~4@yE?bs zcHq*A%g26D;mJ5>WSmH!=hg942pyLK-Qxc5^n8A#_zX7Dw#}`G2FU;Ja;+GLKni${ zbQT61IQ=X!>YHp;a`TdgE{u-jmfzeR?5tZm0uFMjLnq1c7JKj$Y(TQpQp4fYDI;vm{K)0d=2e{6xT%kvbb4K7r`OFA9 zf9nqwYyKa&&_wU>Kv!{glcbi-EB|IAJDU-X{@A{?C2Y*ID{+bd!&F>Y*pnL4viRp6 zT|4r;ieG6$z*0lvlrvc8Z3Io^`9gv@Yi!tm&7UQY?whnm}o zaby#JY>s;S3~KKGxBEkQxrwjovxoGNe+c7^UwaU68W4UH{MSaY(T);)tur&w+eZk( zS`1PCZ?h~z+$MT=>;wGBk|DL$B{!>*>!MBlgolKQ%rg5X#9 zVVqR%w>dW{sjR}EGp8@%$TsZ=Rl%_~nE}6It@o4@`Wal$A;A3Khu3*$dYo~x)$r!y zG0Rw{rdsEjTADmJmxYDJ{Fxsb*X+k=+5;o77iMxIILE4|VO8*In1k*yHjI;B*P`aS zjc5!kda7=R+ukwY3uy>O2b6Boe(8!jT8- z7$veMLaKzW0M9=D^HZ+RXHQ~3eggau2z(D}?d*mCc(i&+pbUwfU=G$~nu>JXWPLKynXt_sIbFKXpF2!$$ZHQsIKEwDj2Mx0t}#CO%D^>W*h8J?Q?6=`u#&X_UG&lg`PRYr}>e zV9kNqsTx%nw?!Ng;MUstaSV4KCc#hVmSa!Rt!C+S{EYCpSR64eQyjKxN{zeY5A8Mp?U z{=e_2e&@3`sDvUkwq#5$!s51W6#5UNm%UYRQp#YD{QA?>rx73C_7o%zgJPepA*gVN z-^t3ROxxe3`sMGRF29gr)4Fn5!~wF9a8esW&r$Y}LNK5)MVrmk5f=P{U8AfFy0?}p zcUTr$%lH>N$uP8hqWDsRFa!d)E&L@K zKz(0wN|cD=x)>&V&9T!<5h@5hNx2>`IbwChEFNIT+e4+hhs$h7=T#{ySXWD-{driq z?!BF1h2cZeb?$)aJHUc;$+!G;vM3M(qlX|I{mQCH)%S&!+o@8--XC1xr0XNJlc`bm$}D8aR@Siu`Jk&=zqv(!pmF27Gh5j-~JaGX`pT8NgUq1K`u@ zVRnJG@AlhQXYszvnE-Sn69r`Au=fc5Gikby$l;Y{lpSvaMSp B*^X<>xK$1+g=d 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 literal 0 HcmV?d00001 diff --git a/Custom/installer/LogoHome.png b/Custom/installer/LogoHome.png new file mode 100644 index 0000000000000000000000000000000000000000..d68862d42aa9a763f26f7f155c0f6a35b990b8b0 GIT binary patch literal 29924 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 Uy7vS8hEjm6q>@C9m~rs`0Da9)7XSbN literal 0 HcmV?d00001 diff --git a/Custom/installer/custom.css b/Custom/installer/custom.css new file mode 100644 index 0000000..a07e4c6 --- /dev/null +++ b/Custom/installer/custom.css @@ -0,0 +1,4572 @@ +/* . */ +/* -------------------GUIA DE INSTALACION--------------------------- + +ARCHIVO: custom.css +UBICACION: /srv/www/htdocs/agc/css/custom.css + +METODO DE INSTALACION (ORDEN DE PRIORIDAD): + +1. METODO PRINCIPAL (Recomendado - Cubre la mayoria de archivos): + Agregar al final de /srv/www/htdocs/vicidial/vicidial_stylesheet.php (linea ~881): + + @import url('../agc/css/custom.css'); + + Este metodo cubre automaticamente todos los archivos que usan vicidial_stylesheet.php + (aproximadamente 101 archivos PHP). + +2. METODO SECUNDARIO (Para archivos que no usan vicidial_stylesheet.php): + Agregar en /srv/www/htdocs/vicidial/admin_header.php (linea ~1951, antes de ): + + echo "\n"; + + Este metodo cubre archivos que usan admin_header.php pero no vicidial_stylesheet.php + (aproximadamente 142 archivos PHP). + +3. IMPORTACIONES DIRECTAS (Solo para archivos especiales): + Para archivos que NO usan ni vicidial_stylesheet.php ni admin_header.php, + agregar directamente en el del archivo: + + + + Archivos conocidos que requieren importacion directa: + - /srv/www/htdocs/vicidial/realtime_report.php (linea ~2104) + - /srv/www/htdocs/vicidial/welcome.php (linea ~114) + - /srv/www/htdocs/vicidial/hci_screen.php (linea ~963) + +CONFIGURACIONES ADICIONALES: + +- Poner placeholder="Phone Login" en input - Linea 1737 vicidial.php +- Poner placeholder="Phone Password" en input - Linea 1739 vicidial.php + +NOTA: Si un archivo usa tanto vicidial_stylesheet.php como admin_header.php, +solo necesita el metodo 1 (@import en vicidial_stylesheet.php) para funcionar. + + ------------------------------------------------------------*/ + +/* Variables de colores globales - disponibles para todos los componentes */ +:root { + /* Colores principales - Paleta ViciDial (Teal/Verde Azulado) */ + --color-primary-dark: #2E7D7D; /* Teal oscuro - forma curva izquierda */ + --color-primary-light: #20B2AA; /* Teal claro brillante - forma curva derecha y punto */ + --color-primary-medium: #008B8B; /* Teal medio - intermedio */ + --color-primary-lightest: #48D1CC; /* Teal muy claro - acentos */ + --color-text-dark: #2D2D2D; /* Gris oscuro/carbón - texto */ + --color-text-light: #ffffff; /* Blanco - texto sobre fondos oscuros */ + --color-bg-white: #ffffff; /* Blanco - fondo */ + --color-bg-light: #B0E0E6; /* Teal muy claro - fondos suaves */ + --color-bg-lighter: #E0F7FA; /* Teal casi blanco - fondos muy suaves */ + + /* Colores de sombras */ + --shadow-light: rgba(45, 45, 45, 0.25); + --shadow-medium: rgba(45, 45, 45, 0.35); + --shadow-text: rgba(45, 45, 45, 0.2); + --shadow-primary: rgba(32, 178, 170, 0.3); /* Sombra con color teal */ + --shadow-white: rgba(255, 255, 255, 0.4); + + /* Colores de fondo decorativo */ + --bg-decorative-1: rgba(32, 178, 170, 0.1); /* Teal claro transparente */ + --bg-decorative-2: rgba(0, 139, 139, 0.1); /* Teal medio transparente */ + --bg-white-transparent: rgba(255, 255, 255, 0.6); + + /* Tamaños de fuente - Sistema de tipografía semántico */ + --font-size-h1: 14px; /* H1 - Títulos principales (18-22px) */ + --font-size-h2: 14px; /* H2 - Subtítulos (14-16px) */ + --font-size-p1: 14px; /* P1 - Texto principal (12-13px) */ + --font-size-p2: 14px; /* P2 - Texto secundario (9-11px) */ + + /* Familia de fuente - Unificada */ + --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; +} + + +/* Reset de estilos - Prioridad máxima sobre otros CSS */ +html body * { + box-sizing: border-box !important; +} + +/* Reset de enlaces - Eliminar color azul y decoración por defecto */ +html body a, +html body a:link, +html body a:visited { + text-decoration: none !important; + outline: none !important; +} + + +/* Asegurar que html y body ocupen toda la altura de manera responsive */ +html { + height: 100% !important; + overflow-x: hidden !important; + max-width: 100% !important; +} + +body { + margin: 0 !important; + padding: 0 !important; + min-height: 100vh !important; + height: auto !important; + overflow-x: hidden !important; + max-width: 100% !important; + width: 100% !important; +} + + +/* WELCOME COMPONENT --------------------------------------------------------------------*/ + +/* -------------------Guia de instalacion--------------------------- */ +/* *{ + border: 1px solid red; +} */ + + +/* Contenedor del componente - detecta automáticamente la tabla de bienvenida (NO dentro de formularios) */ +html body:has(> center > table[width="460px"] .sh_text_white):not(:has(form#vicidial_form)), +html body:has(> center > table[width="460px"] .skb_text):not(:has(form#vicidial_form)) { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; + min-height: 100vh !important; + display: flex !important; + align-items: center !important; + justify-content: center !important; + padding: 15px !important; + margin: 0 !important; + position: relative !important; +} + +/* Ocultar tabla vacía solo cuando está relacionada con welcome-modern (NO dentro de formularios) */ +html body:has(> center > table[width="460px"] .sh_text_white):not(:has(form#vicidial_form)) > table[width="100%"], +html body:has(> center > table[width="460px"] .skb_text):not(:has(form#vicidial_form)) > table[width="100%"] { + display: none !important; +} + +/* Eliminar efectos de los br solo cuando están relacionados con welcome-modern (NO dentro de formularios) */ +html body:has(> center > table[width="460px"] .sh_text_white):not(:has(form#vicidial_form)) > br, +html body:has(> center > table[width="460px"] .skb_text):not(:has(form#vicidial_form)) > br { + display: none !important; +} + +/* Centrar el contenedor center solo cuando contiene welcome-modern (NO dentro de formularios) */ +html body:has(> center > table[width="460px"] .sh_text_white):not(:has(form#vicidial_form)) > center:has(table[width="460px"]), +html body:has(> center > table[width="460px"] .skb_text):not(:has(form#vicidial_form)) > center:has(table[width="460px"]) { + display: flex !important; + align-items: center !important; + justify-content: center !important; + width: 100% !important; + height: 100vh !important; + position: absolute !important; + top: 0 !important; + left: 0 !important; +} + +/* Estilos para la tabla principal del componente - detecta automáticamente (NO dentro de formularios) */ +html body > center > table[width="460px"]:has(.sh_text_white):has(.skb_text) { + background: var(--color-bg-white) !important; + border-radius: 16px !important; + box-shadow: 0 15px 40px var(--shadow-light) !important; + overflow: hidden !important; + border: none !important; + border-collapse: collapse !important; + width: auto !important; + min-width: 380px !important; + max-width: 100% !important; + transition: transform 0.3s ease, box-shadow 0.3s ease !important; + margin: 0 auto !important; + display: block !important; + box-sizing: border-box !important; +} + +html body > center > table[width="460px"]:has(.sh_text_white):has(.skb_text):hover { + transform: translateY(-3px) !important; + box-shadow: 0 18px 50px var(--shadow-medium) !important; +} + +/* Header moderno - solo dentro de welcome (NO dentro de formularios) */ +html body > center > table[width="460px"]:has(.sh_text_white):has(.skb_text) tr:first-child { + display: block !important; + width: 100% !important; + box-sizing: border-box !important; + table-layout: auto !important; +} + +/* Estilos generales para celdas del header - se sobrescriben con selectores específicos */ +html body > center > table[width="460px"]:has(.sh_text_white):has(.skb_text) tr:first-child td { + background: transparent !important; + padding: 16px !important; + border: none !important; + display: block !important; + text-align: center !important; + width: 100% !important; + max-width: 100% !important; + margin: 0 !important; + box-sizing: border-box !important; +} + +html body > center > table[width="460px"]:has(.sh_text_white):has(.skb_text) tr:first-child td:first-child { + border-radius: 0 !important; + padding: 16px 16px 8px 16px !important; + text-align: center !important; + display: block !important; + width: 100% !important; + max-width: 100% !important; + box-sizing: border-box !important; + background: var(--color-bg-white) !important; + overflow: visible !important; + float: none !important; + clear: both !important; +} + +html body > center > table[width="460px"]:has(.sh_text_white):has(.skb_text):not(form center > table) tr:first-child td:last-child { + border-radius: 0 !important; + padding: 0 16px 16px 16px !important; + text-align: center !important; + display: block !important; + width: 100% !important; + max-width: 100% !important; + box-sizing: border-box !important; + background: var(--color-bg-white) !important; + float: none !important; + clear: both !important; +} + +/* Logo y texto del header - solo dentro de welcome (NO dentro de formularios) */ +html body > center > table[width="460px"]:has(.sh_text_white):has(.skb_text) tr:first-child img { + border-radius: 6px !important; + transition: transform 0.3s ease !important; + height: 100px !important; + width: auto !important; + max-width: 180px !important; + display: block !important; + margin: 0 auto !important; + text-align: center !important; + box-sizing: border-box !important; + object-fit: contain !important; + visibility: visible !important; + opacity: 1 !important; +} + +html body > center > table[width="460px"]:has(.sh_text_white):has(.skb_text) tr:first-child img:hover { + transform: scale(1.03) !important; +} + +/* Texto Welcome - verde, solo dentro de welcome (NO dentro de formularios) */ +html body > center > table[width="460px"]:has(.sh_text_white):has(.skb_text) .sh_text_white { + color: var(--color-primary-medium) !important; + font-size: var(--font-size-h1) !important; + font-weight: 600 !important; + letter-spacing: 0.5px !important; + text-align: center !important; + display: none !important; + width: none !important; + max-width: none !important; + box-sizing: border-box !important; + margin: 0 !important; + padding: 0 !important; + +} +/* Ocultar la celda completa que contiene "Welcome" (solo en welcome, no en formularios) */ +html body > center > table[width="460px"]:has(.sh_text_white):has(.skb_text) td:has(.sh_text_white) { + display: none !important; +} + +/* Espaciadores modernos - solo dentro de welcome (NO dentro de formularios) */ +html body > center > table[width="460px"]:has(.sh_text_white):has(.skb_text) tr td[colspan="2"] font[size="1"] { + display: none !important; +} + +/* Contenedor para botones en horizontal (NO dentro de formularios) */ +html body > center > table[width="460px"]:has(.sh_text_white):has(.skb_text) tbody { + display: block !important; + padding: 12px !important; + text-align: center !important; +} + +/* Filas de botones - hacer que se muestren en línea (NO dentro de formularios) */ +html body > center > table[width="460px"]:has(.sh_text_white):has(.skb_text) tr:not(:first-child) { + display: inline-block !important; + vertical-align: top !important; + margin: 0 !important; +} + +/* Celdas con botones (NO dentro de formularios) */ +html body > center > table[width="460px"]:has(.sh_text_white):has(.skb_text) tr:not(:first-child) td[colspan="2"] { + display: block !important; +} + +/* Enlaces de navegación modernos - solo dentro de welcome (NO dentro de formularios) */ +html body > center > table[width="460px"]:has(.sh_text_white):has(.skb_text) .skb_text { + display: inline-block !important; + color: var(--color-text-light) !important; + font-size: var(--font-size-h2) !important; + font-weight: 500 !important; + padding: 0 !important; + margin: 8px 6px !important; + background: var(--color-primary-light) !important; + border-radius: 10px !important; + border: 2px solid var(--color-primary-light) !important; + transition: all 0.3s ease !important; + cursor: pointer !important; + text-decoration: none !important; + position: relative !important; + overflow: hidden !important; + white-space: nowrap !important; + min-width: 100px !important; + text-align: center !important; +} + +/* Hacer que los enlaces dentro de skb_text ocupen todo el espacio del botón (NO dentro de formularios) */ +html body > center > table[width="460px"]:has(.sh_text_white):has(.skb_text) .skb_text a { + display: block !important; + width: 100% !important; + color: var(--color-text-light) !important; + text-decoration: none !important; + padding: 10px 14px !important; + margin: 0 !important; + position: relative !important; + z-index: 1 !important; + box-sizing: border-box !important; + line-height: 1.4 !important; +} + +html body > center > table[width="460px"]:has(.sh_text_white):has(.skb_text) .skb_text::before { + content: '' !important; + position: absolute !important; + top: 0 !important; + left: -100% !important; + width: 100% !important; + height: 100% !important; + background: var(--shadow-white) !important; + transition: left 0.5s ease !important; +} + +html body > center > table[width="460px"]:has(.sh_text_white):has(.skb_text) .skb_text:hover { + background: var(--color-primary-medium) !important; + transform: translateY(-2px) !important; + box-shadow: 0 6px 16px var(--shadow-primary) !important; + border-color: var(--color-primary-medium) !important; +} + +html body > center > table[width="460px"]:has(.sh_text_white):has(.skb_text):not(form center > table) .skb_text:hover a { + color: var(--color-text-light) !important; +} + +html body > center > table[width="460px"]:has(.sh_text_white):has(.skb_text) .skb_text:hover::before { + left: 100% !important; +} + +/* Celdas de la tabla - solo dentro de welcome (NO dentro de formularios) */ +html body > center > table[width="460px"]:has(.sh_text_white):has(.skb_text) td { + border: none !important; + box-sizing: border-box !important; +} + +/* Responsive - solo para welcome-modern (NO dentro de formularios) */ +@media (max-width: 480px) { + html body > center > table[width="460px"]:has(.sh_text_white):has(.skb_text) { + width: 100% !important; + min-width: auto !important; + border-radius: 12px !important; + } + + html body > center > table[width="460px"]:has(.sh_text_white):has(.skb_text) .skb_text { + font-size: var(--font-size-p1) !important; + padding: 0 !important; + margin: 6px 4px !important; + min-width: 80px !important; + display: block !important; + } + + html body > center > table[width="460px"]:has(.sh_text_white):has(.skb_text) .skb_text a { + display: block !important; + width: 100% !important; + padding: 8px 12px !important; + line-height: 1.4 !important; + } + + html body > center > table[width="460px"]:has(.sh_text_white):has(.skb_text) tbody { + flex-direction: column !important; + } + + html body > center > table[width="460px"]:has(.sh_text_white):has(.skb_text) tr td[colspan="2"] { + display: block !important; + width: 100% !important; + } + + html body > center > table[width="460px"]:has(.sh_text_white):has(.skb_text) .sh_text_white { + font-size: var(--font-size-h1) !important; + } + + html body > center > table[width="460px"]:has(.sh_text_white):has(.skb_text) tr:first-child td { + padding: 12px !important; + } +} + +/* Animación de entrada - solo para welcome */ +@keyframes welcome-modern-fadeInUp { + from { + opacity: 0 !important; + transform: translateY(30px) !important; + } + to { + opacity: 1 !important; + transform: translateY(0) !important; + } +} + +html body > center > table[width="460px"]:has(.sh_text_white):has(.skb_text) { + animation: welcome-modern-fadeInUp 0.6s ease-out !important; +} + +/* Fondo decorativo - solo cuando existe welcome (NO dentro de formularios) */ +html body:has(> center > table[width="460px"] .sh_text_white):not(:has(form#vicidial_form))::before, +html body:has(> center > table[width="460px"] .skb_text):not(:has(form#vicidial_form))::before { + content: '' !important; + position: fixed !important; + top: 0 !important; + left: 0 !important; + width: 100% !important; + height: 100% !important; + background: transparent !important; + pointer-events: none !important; + z-index: -1 !important; +} + + + +/* Phone Login Component --------------------------------------------------------------------*/ + + + +/* ========================================================================== + CONTENEDOR PRINCIPAL + ========================================================================== */ +body:has(form#vicidial_form) { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; + min-height: 100vh; + display: flex; + align-items: center; + justify-content: center; + padding: 15px; + margin: 0; + position: relative; + width: 100%; + box-sizing: border-box; +} + +/* ========================================================================== + ENLACE TIMECLOCK + ========================================================================== */ +body:has(form#vicidial_form) > a { + position: absolute; + top: 20px; + left: 20px; + text-decoration: none; + z-index: 10; +} + +body:has(form#vicidial_form) .sb_text { + color: var(--color-primary-light) !important; + font-size: var(--font-size-h2) !important; + font-weight: 500 !important; + transition: color 0.3s ease; +} + +body:has(form#vicidial_form) > a:hover .sb_text { + color: var(--color-primary-medium) !important; +} + +/* ========================================================================== + ELEMENTOS OCULTOS + ========================================================================== */ +body:has(form#vicidial_form) > table[width="100%"] { + display: none; +} + +body:has(form#vicidial_form) > br { + display: none; +} + +/* ========================================================================== + CONTENEDOR DEL FORMULARIO + ========================================================================== */ +body:has(form#vicidial_form) form { + width: 100%; + display: flex; + align-items: center; + justify-content: center; + min-height: 100vh; + margin: 0; + padding: 0; +} + +body:has(form#vicidial_form) form > center { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + min-height: 100vh; + position: relative; + margin: 0; + padding: 0; + padding-left: 15px; +} + +/* ========================================================================== + TABLA PRINCIPAL + ========================================================================== */ +body:has(form#vicidial_form) form center > table[width="460px"] { + background: var(--color-bg-white) !important; + border-radius: 16px; + box-shadow: 0 15px 40px var(--shadow-light); + overflow: hidden; + border: none !important; + border-collapse: collapse !important; + width: 460px !important; + max-width: 100%; + margin-left: calc(50% - 230px + 15px) !important; + margin-right: auto !important; + display: table; + box-sizing: border-box; + position: relative; + animation: login-modern-fadeInUp 0.6s ease-out; +} + +body:has(form#vicidial_form) form center > table[width="460px"] tr:not(:first-child) td { + text-align: center !important; +} + +/* ========================================================================== + HEADER - LOGO Y TÍTULO + ========================================================================== */ +body:has(form#vicidial_form) form center > table[width="460px"] tr:first-child { + display: block; + width: 100%; + box-sizing: border-box; +} + +body:has(form#vicidial_form) form center > table[width="460px"] tr:first-child td { + background: transparent !important; + padding: 16px !important; + border: none !important; + display: block; + text-align: center !important; + width: 100% !important; + max-width: 100% !important; + margin: 0 !important; + box-sizing: border-box !important; +} + +/* Contenedor del logo - mostrar nuevo logo como background */ +body:has(form#vicidial_form) form center > table[width="460px"] tr:first-child td:first-child { + border-radius: 0; + padding: 16px 16px 8px 16px !important; + text-align: center !important; + width: 100% !important; + max-width: 100% !important; + box-sizing: border-box !important; + background-image: url('../../vicidial/images/vicidial_admin_web_logo.png?v=2') !important; + background-size: 140px auto !important; + background-repeat: no-repeat !important; + background-position: center !important; + min-height: 140px !important; + height: 140px !important; + position: relative !important; + margin-top: 10px !important; +} +/* Ocultar fila espaciadora td align="left" colspan="2" con font size="1" */ +body:has(form#vicidial_form) form center > table[width="460px"] tr:has(td[align="left"][colspan="2"] font[size="1"]) { + display: none !important; +} + +/* Ocultar imagen vieja del logo (vdc_tab_vicidial.gif) */ +body:has(form#vicidial_form) form center > table[width="460px"] tr:first-child td:first-child img { + display: none !important; + visibility: hidden !important; + opacity: 0 !important; +} + +body:has(form#vicidial_form) form center > table[width="460px"] tr:first-child td:last-child { + border-radius: 0; + padding: 0 16px 8px 16px !important; + text-align: center !important; + width: 100% !important; + max-width: 100% !important; + box-sizing: border-box !important; +} + +body:has(form#vicidial_form) form center > table[width="460px"] tr:first-child img { + border-radius: 6px; + transition: transform 0.3s ease; + height: auto !important; + max-height: 45px !important; + width: auto !important; + max-width: 180px !important; + display: block !important; + margin: 0 auto !important; + text-align: center !important; + box-sizing: border-box; +} + +body:has(form#vicidial_form) form center > table[width="460px"] tr:first-child img:hover { + transform: scale(1.03); +} + +body:has(form#vicidial_form) form center > table[width="460px"] .sh_text_white { + color: var(--color-primary-medium) !important; + font-size: var(--font-size-h1) !important; + font-weight: 600 !important; + letter-spacing: 0.5px; + text-transform: uppercase !important; + text-align: center !important; + display: block; + width: 100%; + max-width: 100%; + box-sizing: border-box; + margin: 0; + padding: 0; +} + +/* ========================================================================== + FORMULARIO - INPUTS Y BOTONES + ========================================================================== */ +body:has(form#vicidial_form) form center > table[width="460px"] tr td[colspan="2"] font[size="1"] { + display: none; +} + +body:has(form#vicidial_form) form center > table[width="460px"] tr:not(:first-child):not(:last-child) { + display: table-row; +} + +body:has(form#vicidial_form) form center > table[width="460px"] tr:not(:first-child):not(:last-child) td { + padding: 12px 16px !important; + border: none !important; + box-sizing: border-box !important; + text-align: center !important; +} + +/* Labels ocultos - Phone Login y Phone Password */ +body:has(form#vicidial_form) form center > table[width="460px"] tr:has(input[name="phone_login"]) td:first-child, +body:has(form#vicidial_form) form center > table[width="460px"] tr:has(input[name="phone_pass"]) td:first-child { + display: none !important; +} + +body:has(form#vicidial_form) form center > table[width="460px"] tr:has(input[name="phone_login"]), +body:has(form#vicidial_form) form center > table[width="460px"] tr:has(input[name="phone_pass"]) { + display: table-row; +} + +body:has(form#vicidial_form) form center > table[width="460px"] tr:has(input[name="phone_login"]) td:last-child, +body:has(form#vicidial_form) form center > table[width="460px"] tr:has(input[name="phone_pass"]) td:last-child { + text-align: center !important; + width: 100% !important; + padding-left: 0 !important; + padding-right: 0 !important; +} + +/* Labels ocultos - User Login y User Password (Campaign Login) */ +body:has(form#vicidial_form) form center > table[width="460px"] tr:has(input[name="VD_login"]) td:first-child, +body:has(form#vicidial_form) form center > table[width="460px"] tr:has(input[name="VD_pass"]) td:first-child { + display: none !important; +} + +body:has(form#vicidial_form) form center > table[width="460px"] tr:has(input[name="VD_login"]), +body:has(form#vicidial_form) form center > table[width="460px"] tr:has(input[name="VD_pass"]) { + display: table-row; +} + +body:has(form#vicidial_form) form center > table[width="460px"] tr:has(input[name="VD_login"]) td:last-child, +body:has(form#vicidial_form) form center > table[width="460px"] tr:has(input[name="VD_pass"]) td:last-child { + text-align: center !important; + width: 100% !important; + padding-left: 0 !important; + padding-right: 0 !important; +} + +/* Campaign select - ocultar label */ +body:has(form#vicidial_form) form center > table[width="460px"] tr:has(select[name="VD_campaign"]) td:first-child { + display: none !important; +} + +body:has(form#vicidial_form) form center > table[width="460px"] tr:has(select[name="VD_campaign"]) td:last-child { + text-align: center !important; + width: 100% !important; + padding-left: 0 !important; + padding-right: 0 !important; +} + +/* Inputs - Phone Login y Campaign Login */ +body:has(form#vicidial_form) form center > table[width="460px"] input[type="text"], +body:has(form#vicidial_form) form center > table[width="460px"] input[type="password"] { + padding: 10px 14px !important; + border: 2px solid var(--color-bg-light) !important; + border-radius: 8px !important; + font-size: var(--font-size-h2) !important; + font-family: inherit; + color: var(--color-text-dark) !important; + background: var(--color-bg-white) !important; + transition: all 0.3s ease; + box-sizing: border-box !important; + width: 100%; + max-width: 250px; + display: block; + margin: 0 auto; +} + +body:has(form#vicidial_form) form center > table[width="460px"] input[type="text"]:focus, +body:has(form#vicidial_form) form center > table[width="460px"] input[type="password"]:focus { + outline: none !important; + border-color: var(--color-primary-light) !important; + box-shadow: 0 0 0 3px var(--shadow-primary) !important; +} + +/* Select Campaign */ +body:has(form#vicidial_form) form center > table[width="460px"] select[name="VD_campaign"] { + padding: 10px 14px !important; + border: 2px solid var(--color-bg-light) !important; + border-radius: 8px !important; + font-size: var(--font-size-h2) !important; + font-family: inherit; + color: var(--color-text-dark) !important; + background: var(--color-bg-white) !important; + transition: all 0.3s ease; + box-sizing: border-box !important; + width: 100%; + max-width: 250px; + display: block; + margin: 0 auto; + cursor: pointer; +} + +body:has(form#vicidial_form) form center > table[width="460px"] select[name="VD_campaign"]:focus { + outline: none !important; + border-color: var(--color-primary-light) !important; + box-shadow: 0 0 0 3px var(--shadow-primary) !important; +} + +/* Botón Submit */ +body:has(form#vicidial_form) form center > table[width="460px"] input[type="submit"] { + background: var(--color-primary-light) !important; + color: var(--color-text-light) !important; + border: 2px solid var(--color-primary-light) !important; + border-radius: 10px !important; + padding: 12px 24px !important; + font-size: var(--font-size-h2) !important; + font-weight: 600 !important; + cursor: pointer; + transition: all 0.3s ease; + font-family: inherit; + box-sizing: border-box !important; +} + +body:has(form#vicidial_form) form center > table[width="460px"] input[type="submit"]:hover { + background: var(--color-primary-medium) !important; + border-color: var(--color-primary-medium) !important; + transform: translateY(-2px); + box-shadow: 0 6px 16px var(--shadow-primary) !important; +} + +body:has(form#vicidial_form) form center > table[width="460px"] input[type="submit"]:active { + transform: translateY(0); +} + +/* Botón Refresh Campaign List */ +body:has(form#vicidial_form) form center > table[width="460px"] input[type="button"][value="Refresh Campaign List"] { + background: var(--color-bg-light) !important; + color: var(--color-text-dark) !important; + border: 2px solid var(--color-bg-light) !important; + border-radius: 10px !important; + padding: 10px 20px !important; + font-size: var(--font-size-h2) !important; + font-weight: 500 !important; + cursor: pointer; + transition: all 0.3s ease; + font-family: inherit; + box-sizing: border-box !important; + margin-left: 10px; +} + +body:has(form#vicidial_form) form center > table[width="460px"] input[type="button"][value="Refresh Campaign List"]:hover { + background: var(--color-primary-lightest) !important; + border-color: var(--color-primary-light) !important; + color: var(--color-primary-dark) !important; + transform: translateY(-2px); + box-shadow: 0 4px 12px var(--shadow-primary) !important; +} + +body:has(form#vicidial_form) form center > table[width="460px"] input[type="button"][value="Refresh Campaign List"]:active { + transform: translateY(0); +} + +/* ========================================================================== + TEXTO DE VERSIÓN + ========================================================================== */ +body:has(form#vicidial_form) form center > table[width="460px"] .body_tiny { + color: var(--color-text-dark) !important; + font-size: var(--font-size-p2) !important; + opacity: 0.7; + display: block; + padding: 8px 16px !important; +} + +/* ========================================================================== + LOADING BOX + ========================================================================== */ +body:has(form#vicidial_form) #LoginLoadingBox { + text-align: center; + padding: 20px; +} + +body:has(form#vicidial_form) #LoginLoadingBox .skb_text { + color: var(--color-primary-light) !important; + font-size: var(--font-size-h2) !important; + display: block; + margin-bottom: 15px; +} + +body:has(form#vicidial_form) #LoginLoadingBox img { + display: block; + margin: 0 auto; +} + +/* ========================================================================== + CELDAS Y FILAS DE LA TABLA + ========================================================================== */ +body:has(form#vicidial_form) form center > table[width="460px"] td { + border: none !important; + box-sizing: border-box !important; +} + +body:has(form#vicidial_form) form center > table[width="460px"] tr { + border: none !important; +} + +/* ========================================================================== + RESPONSIVE + ========================================================================== */ +@media (max-width: 480px) { + body:has(form#vicidial_form) form center > table[width="460px"] { + width: 100% !important; + border-radius: 12px; + } + + body:has(form#vicidial_form) form center > table[width="460px"] input[type="text"], + body:has(form#vicidial_form) form center > table[width="460px"] input[type="password"] { + max-width: 100% !important; + width: 100% !important; + } + + body:has(form#vicidial_form) form center > table[width="460px"] tr:not(:first-child):not(:last-child) td { + display: block; + width: 100% !important; + text-align: left !important; + } + + body:has(form#vicidial_form) form center > table[width="460px"] tr:not(:first-child):not(:last-child) td:first-child { + margin-bottom: 8px; + } + + body:has(form#vicidial_form) form center > table[width="460px"] .sh_text_white { + font-size: var(--font-size-h1) !important; + } + + body:has(form#vicidial_form) form center > table[width="460px"] tr:first-child td { + padding: 12px !important; + } +} + +/* ========================================================================== + ANIMACIONES + ========================================================================== */ +@keyframes login-modern-fadeInUp { + from { + opacity: 0; + transform: translateY(30px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* ========================================================================== + TIMECLOCK COMPONENT + ========================================================================== */ + +/* Contenedor principal */ +body:has(form#vicidial_form[action*="timeclock"]) { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; + min-height: 100vh !important; + display: flex !important; + align-items: center !important; + justify-content: center !important; + padding: 15px !important; + margin: 0 !important; + position: relative !important; + width: 100% !important; + box-sizing: border-box !important; +} + +/* Ocultar elementos innecesarios */ +body:has(form#vicidial_form[action*="timeclock"]) > table[width="100%"] { + display: none !important; +} + +body:has(form#vicidial_form[action*="timeclock"]) > br { + display: none !important; +} + +/* Contenedor del formulario */ +body:has(form#vicidial_form[action*="timeclock"]) form { + width: 100% !important; + display: flex !important; + align-items: center !important; + justify-content: center !important; + min-height: 100vh !important; + margin: 0 !important; + padding: 0 !important; +} + +body:has(form#vicidial_form[action*="timeclock"]) form > center { + display: flex !important; + align-items: center !important; + justify-content: center !important; + width: 100% !important; + min-height: 100vh !important; + position: relative !important; + margin: 0 auto !important; + padding: 0 !important; + text-align: center !important; + left: 0 !important; + right: 0 !important; +} + +/* Tabla principal */ +body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] { + background: var(--color-bg-white) !important; + border-radius: 16px !important; + box-shadow: 0 15px 40px var(--shadow-light) !important; + overflow: hidden !important; + border: none !important; + border-collapse: collapse !important; + width: 460px !important; + max-width: 100% !important; + margin: 0 auto !important; + display: table !important; + box-sizing: border-box !important; + position: relative !important; + animation: login-modern-fadeInUp 0.6s ease-out !important; + left: 50% !important; + transform: translateX(-50%) !important; +} + +/* Header - Logo y Título */ +body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] tr:first-child { + display: block !important; + width: 100% !important; + box-sizing: border-box !important; +} + +body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] tr:first-child td { + background: transparent !important; + padding: 16px !important; + border: none !important; + display: block !important; + text-align: center !important; + width: 100% !important; + max-width: 100% !important; + margin: 0 !important; + box-sizing: border-box !important; +} + +/* Ocultar tabla con width 100% dentro del form center */ +body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="100%"] { + display: none !important; + width: 0 !important; + margin: 0 !important; + padding: 0 !important; +} + +/* Contenedor del logo - mostrar nuevo logo */ +body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] tr:first-child td:first-child { + border-radius: 0 !important; + padding: 16px 16px 8px 16px !important; + text-align: center !important; + width: 100% !important; + max-width: 100% !important; + box-sizing: border-box !important; + background-image: url('../../vicidial/images/vicidial_admin_web_logo.png?v=2') !important; + background-size: 140px auto !important; + background-repeat: no-repeat !important; + background-position: center !important; + min-height: 140px !important; + height: 140px !important; + position: relative !important; + margin-top: 10px !important; +} + +/* Ocultar imagen vieja del logo */ +body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] tr:first-child td:first-child img { + display: none !important; + visibility: hidden !important; + opacity: 0 !important; +} + +body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] tr:first-child td:last-child { + border-radius: 0 !important; + padding: 0 16px 8px 16px !important; + text-align: center !important; + width: 100% !important; + max-width: 100% !important; + box-sizing: border-box !important; +} + +/* Título Timeclock - mismo estilo que Agent login (teal, mayúsculas) */ +body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] tr:first-child .sh_text_white { + color: var(--color-primary-medium) !important; + font-size: var(--font-size-h1) !important; + font-weight: 600 !important; + letter-spacing: 0.5px !important; + text-align: center !important; + text-transform: uppercase !important; + display: block !important; + width: 100% !important; + max-width: 100% !important; + box-sizing: border-box !important; + margin: 0 !important; + padding: 0 !important; +} + +/* Espaciadores */ +body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] tr td[colspan="2"] font[size="1"] { + display: none !important; +} + +/* Filas del formulario */ +body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] tr:not(:first-child):not(:last-child) { + display: table-row !important; +} + +body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] tr:not(:first-child):not(:last-child) td { + padding: 12px 16px !important; + border: none !important; + box-sizing: border-box !important; + text-align: center !important; +} + +/* Labels ocultos */ +body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] tr:has(input[name="user"]) td:first-child, +body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] tr:has(input[name="pass"]) td:first-child { + display: none !important; +} + +body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] tr:has(input[name="user"]), +body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] tr:has(input[name="pass"]) { + display: table-row !important; +} + +body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] tr:has(input[name="user"]) td:last-child, +body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] tr:has(input[name="pass"]) td:last-child { + text-align: center !important; + width: 100% !important; + padding-left: 0 !important; + padding-right: 0 !important; +} + +/* Inputs */ +body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] input[type="text"], +body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] input[type="password"] { + padding: 10px 14px !important; + border: 2px solid var(--color-bg-light) !important; + border-radius: 8px !important; + font-size: var(--font-size-h2) !important; + font-family: inherit !important; + color: var(--color-text-dark) !important; + background: var(--color-bg-white) !important; + transition: all 0.3s ease !important; + box-sizing: border-box !important; + width: 100% !important; + max-width: 250px !important; + display: block !important; + margin: 0 auto !important; +} + +body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] input[type="text"]:focus, +body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] input[type="password"]:focus { + outline: none !important; + border-color: var(--color-primary-light) !important; + box-shadow: 0 0 0 3px var(--shadow-primary) !important; +} + +/* Botón Submit */ +body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] input[type="submit"] { + background: var(--color-primary-light) !important; + color: var(--color-text-light) !important; + border: 2px solid var(--color-primary-light) !important; + border-radius: 10px !important; + padding: 10px 20px !important; + font-size: var(--font-size-h2) !important; + font-weight: 500 !important; + cursor: pointer !important; + transition: all 0.3s ease !important; + font-family: inherit !important; + box-sizing: border-box !important; +} + +body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] input[type="submit"]:hover { + background: var(--color-primary-medium) !important; + border-color: var(--color-primary-medium) !important; + transform: translateY(-2px) !important; + box-shadow: 0 6px 16px var(--shadow-primary) !important; +} + +body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] input[type="submit"]:active { + transform: translateY(0) !important; +} + +/* Versión y Build */ +body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] .body_tiny { + color: var(--color-text-dark) !important; + font-size: var(--font-size-p2) !important; + opacity: 0.7 !important; + text-align: center !important; + display: block !important; + width: 100% !important; + padding: 8px 0 !important; + margin: 0 !important; +} + +/* Responsive */ +@media (max-width: 480px) { + body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] { + width: 100% !important; + border-radius: 12px !important; + } + + body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] input[type="text"], + body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] input[type="password"] { + max-width: 100% !important; + } +} + + + +/* ========================================================================== + SIDEBAR - CONTENEDOR PRINCIPAL + Solo afecta al componente admin que tiene esta estructura específica + ========================================================================== */ + body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) { + margin: 0 !important; + padding: 0 !important; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; +} + +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) center { + margin: 0 auto !important; + padding: 0 !important; + width: 100% !important; + display: block !important; + text-align: center !important; +} + +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] { + margin: 0 auto !important; + padding: 0 !important; + width: 100% !important; + max-width: 100% !important; + border-spacing: 0 !important; + min-height: 100vh !important; + display: table !important; + table-layout: fixed !important; +} + +/* Fila principal que contiene sidebar y contenido */ +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] tbody > tr:first-child { + height: auto !important; +} + +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] { + background: var(--color-bg-white) !important; + padding: 20px 5px !important; + vertical-align: top; + box-sizing: border-box; + width: 170px !important; + min-width: 170px !important; + max-width: 170px !important; + border-right: none !important; + margin: 0 !important; + position: relative; + left: 0 !important; + overflow: hidden !important; + word-wrap: break-word !important; +} + +/* Logo en sidebar */ +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] img { + border-radius: 8px; + margin-bottom: 15px; + transition: transform 0.3s ease; + display: block; + margin-left: auto; + margin-right: auto; + max-width: 100%; + height: auto; +} + +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] img:hover { + transform: scale(1.05); +} + +/* Título ADMINISTRATION */ +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] b font { + color: var(--color-text-dark) !important; + font-size: var(--font-size-h2) !important; + font-weight: 600 !important; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; + letter-spacing: 0.3px; + display: block; + text-align: center; + +} + +/* Tabla de navegación */ +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] table { + background: transparent !important; + width: 100% !important; + max-width: 100% !important; + border-collapse: collapse; + box-sizing: border-box !important; +} + +/* Quitar fondo azul oscuro de las filas de navegación */ +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] table tr[bgcolor="#015B91"] { + background: transparent !important; +} + +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] table tr[bgcolor="#015B91"] td { + background: transparent !important; +} + +/* ========================================================================== + ITEMS DE NAVEGACIÓN - ESTILO BOTÓN + ========================================================================== */ +/* Items normales - Botones verdes */ +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .head_style { + background: var(--color-primary-light) !important; + background-color: var(--color-primary-light) !important; + padding: 8px 6px !important; + border-radius: 8px; + transition: all 0.3s ease; + cursor: pointer; + margin: 3px 0; + border: 2px solid var(--color-primary-light) !important; + display: block; + width: 160px!important; + max-width: 160px !important; + box-sizing: border-box !important; + overflow: hidden !important; + word-wrap: break-word !important; +} + +/* Sobrescribir estilos inline del HTML */ +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] tr .head_style { + background: var(--color-primary-light) !important; + background-color: var(--color-primary-light) !important; +} + +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] tr[bgcolor="#015B91"] .head_style { + background: var(--color-primary-light) !important; + background-color: var(--color-primary-light) !important; +} + +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] tr[bgcolor="#015B91"] .head_style td { + background: var(--color-primary-light) !important; + background-color: var(--color-primary-light) !important; +} + +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .head_style:hover { + background: var(--color-primary-light) !important; + background-color: var(--color-primary-light) !important; + border-color: var(--color-primary-light) !important; + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3) !important; +} + +/* Sobrescribir hover inline del HTML */ +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] tr .head_style:hover { + background: var(--color-primary-light) !important; + background-color: var(--color-primary-light) !important; +} + +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .head_style td { + padding: 0 !important; + border: none !important; + background: var(--color-primary-light) !important; + background-color: var(--color-primary-light) !important; + width: 100% !important; + max-width: 100% !important; + box-sizing: border-box !important; + overflow: hidden !important; + word-wrap: break-word !important; +} + +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .head_style a { + text-decoration: none; + display: flex; + align-items: center; + gap: 6px; + width: 100% !important; + max-width: 100% !important; + box-sizing: border-box !important; + overflow: hidden !important; +} + +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .head_style font { + color: var(--color-text-light) !important; + font-size: var(--font-size-p1) !important; + font-weight: 500 !important; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; + word-wrap: break-word !important; + overflow: hidden !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; + max-width: 100% !important; +} + +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .head_style img { + filter: brightness(0) invert(1) !important; + margin: 0 !important; + width: 14px !important; + height: 14px !important; +} + +/* Item seleccionado - Verde más oscuro */ +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .head_style_selected { + background: var(--color-primary-medium) !important; + background-color: var(--color-primary-medium) !important; + padding: 8px 6px !important; + border-radius: 8px; + margin: 3px 0; + border: 2px solid var(--color-primary-medium) !important; + display: block; + box-shadow: 0 2px 8px rgba(56, 142, 60, 0.3) !important; + width: 160px!important; + max-width: 160px!important; + box-sizing: border-box !important; + overflow: hidden !important; + word-wrap: break-word !important; +} + +/* Sobrescribir estilos inline del HTML para seleccionado */ +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] tr .head_style_selected { + background: var(--color-primary-medium) !important; + background-color: var(--color-primary-medium) !important; +} + +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] tr .head_style_selected:hover { + background: var(--color-primary-medium) !important; + background-color: var(--color-primary-medium) !important; +} + +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] tr[bgcolor="#015B91"] .head_style_selected { + background: var(--color-primary-medium) !important; + background-color: var(--color-primary-medium) !important; +} + +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] tr[bgcolor="#015B91"] .head_style_selected td { + background: var(--color-primary-medium) !important; + background-color: var(--color-primary-medium) !important; +} + +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .head_style_selected td { + padding: 0 !important; + border: none !important; + background: var(--color-primary-medium) !important; + background-color: var(--color-primary-medium) !important; + width: 100% !important; + max-width: 100% !important; + box-sizing: border-box !important; + overflow: hidden !important; + word-wrap: break-word !important; +} + +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .head_style_selected a { + text-decoration: none; + display: flex; + align-items: center; + gap: 6px; + width: 100% !important; + max-width: 100% !important; + box-sizing: border-box !important; + overflow: hidden !important; +} + +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .head_style_selected font { + color: var(--color-text-light) !important; + font-weight: 600 !important; + font-size: var(--font-size-p1) !important; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; + word-wrap: break-word !important; + overflow: hidden !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; + max-width: 100% !important; +} + +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .head_style_selected img { + filter: brightness(0) invert(1) !important; + margin: 0 !important; + width: 14px !important; + height: 14px !important; +} + +/* Líneas horizontales - ocultas */ +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .horiz_line { + display: none !important; +} + +/* ========================================================================== + ITEMS DESPLEGABLES DEL MENÚ (SUBMENÚ) + ========================================================================== */ +/* Items desplegables normales */ +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .subhead_style { + background: transparent !important; + background-color: transparent !important; + padding: 6px 6px 6px 20px !important; + border-radius: 6px; + transition: all 0.2s ease; + cursor: pointer; + margin: 2px 0; + border-left: 3px solid transparent !important; + width: 100% !important; + max-width: 100% !important; + box-sizing: border-box !important; + overflow: hidden !important; + word-wrap: break-word !important; +} + +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .subhead_style:hover { + background: rgba(76, 175, 80, 0.1) !important; + background-color: rgba(76, 175, 80, 0.1) !important; + border-left-color: var(--color-primary-light) !important; + transform: translateX(3px); +} + +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .subhead_style td { + padding: 0 !important; + border: none !important; + background: transparent !important; + background-color: transparent !important; + width: 100% !important; + max-width: 100% !important; + box-sizing: border-box !important; + overflow: hidden !important; + word-wrap: break-word !important; +} + +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .subhead_style a { + text-decoration: none; + display: block; +} + +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .subhead_style font { + color: var(--color-text-dark) !important; + font-size: var(--font-size-p2) !important; + font-weight: 400 !important; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; + word-wrap: break-word !important; + overflow: hidden !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; + max-width: 100% !important; +} + +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .subhead_style a font { + color: var(--color-text-dark) !important; +} + +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .subhead_style:hover font { + color: var(--color-primary-light) !important; + font-weight: 500 !important; +} + +/* Item desplegable seleccionado */ +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .subhead_style_selected { + background: rgba(76, 175, 80, 0.15) !important; + background-color: rgba(76, 175, 80, 0.15) !important; + padding: 6px 6px 6px 20px !important; + border-radius: 6px; + margin: 2px 0; + border-left: 3px solid var(--color-primary-light) !important; + box-shadow: 0 1px 4px rgba(76, 175, 80, 0.2) !important; + width: 100% !important; + max-width: 100% !important; + box-sizing: border-box !important; + overflow: hidden !important; + word-wrap: break-word !important; +} + +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .subhead_style_selected:hover { + background: rgba(76, 175, 80, 0.2) !important; + background-color: rgba(76, 175, 80, 0.2) !important; + border-left-color: var(--color-primary-medium) !important; +} + +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .subhead_style_selected td { + padding: 0 !important; + border: none !important; + background: transparent !important; + background-color: transparent !important; + width: 100% !important; + max-width: 100% !important; + box-sizing: border-box !important; + overflow: hidden !important; + word-wrap: break-word !important; +} + +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .subhead_style_selected a { + text-decoration: none; + display: block; +} + +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .subhead_style_selected font { + color: var(--color-primary-medium) !important; + font-size: var(--font-size-p2) !important; + font-weight: 600 !important; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; + word-wrap: break-word !important; + overflow: hidden !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; + max-width: 100% !important; +} + +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .subhead_style_selected a font { + color: var(--color-primary-medium) !important; +} + +/* ========================================================================== + ICONOS EN ITEMS DESPLEGABLES DEL MENÚ + ========================================================================== */ +/* Iconos en items desplegables normales */ +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .subhead_style img { + margin-right: 6px !important; + vertical-align: middle !important; + display: inline-block !important; + transition: transform 0.2s ease; + filter: opacity(0.7); +} + +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .subhead_style:hover img { + transform: scale(1.1); + filter: opacity(1); +} + +/* Iconos en items desplegables seleccionados */ +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .subhead_style_selected img { + margin-right: 6px !important; + vertical-align: middle !important; + display: inline-block !important; + filter: opacity(1); +} + +/* Ocultar iconos blank.gif (espacios en blanco) */ +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .subhead_style img[src*="blank.gif"], +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .subhead_style_selected img[src*="blank.gif"] { + display: none !important; +} + +/* Item de menú admin seleccionado */ +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .adminmenu_style_selected { + background: rgba(76, 175, 80, 0.15) !important; + background-color: rgba(76, 175, 80, 0.15) !important; + padding: 6px 6px 6px 20px !important; + border-radius: 6px; + margin: 2px 0; + border-left: 3px solid var(--color-primary-light) !important; + transition: all 0.2s ease; + cursor: pointer; +} + +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .adminmenu_style_selected:hover { + background: rgba(76, 175, 80, 0.2) !important; + background-color: rgba(76, 175, 80, 0.2) !important; + border-left-color: var(--color-primary-medium) !important; +} + +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .adminmenu_style_selected td { + padding: 0 !important; + border: none !important; + background: transparent !important; + background-color: transparent !important; +} + +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .adminmenu_style_selected a { + text-decoration: none; + display: block; +} + +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .adminmenu_style_selected font { + color: var(--color-primary-medium) !important; + font-size: var(--font-size-p2) !important; + font-weight: 600 !important; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; +} + +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .adminmenu_style_selected a font { + color: var(--color-primary-medium) !important; +} + +/* ========================================================================== + CONTENIDO PRINCIPAL + ========================================================================== */ +/* Celda de contenido principal - se ajusta al contenido y mantiene centrado */ +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="870"][bgcolor="#D9E6FE"], +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="770"][bgcolor="#D9E6FE"] { + vertical-align: top !important; + padding: 0 !important; + width: auto !important; + min-width: 0 !important; +} + +/* Tabla de navegación superior dentro del contenido - siempre centrada */ +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="#D9E6FE"][cellpadding="2"] { + margin: 0 auto !important; + width: 100% !important; + max-width: 100% !important; +} + +/* Asegurar que las tablas internas también estén centradas */ +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) td[bgcolor="#D9E6FE"] center { + text-align: center !important; + margin: 0 auto !important; +} + +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) td[bgcolor="#D9E6FE"] table { + margin: 0 auto !important; +} + +/* ========================================================================== + ICONOS EN CONTENIDO PRINCIPAL + ========================================================================== */ +/* Iconos grandes en tarjetas de menú (42x42) */ +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) td[width="870"][bgcolor="#D9E6FE"] img[width="42"][height="42"] { + border-radius: 8px; + padding: 4px; + background: rgba(76, 175, 80, 0.1); + transition: all 0.3s ease; + display: inline-block; + vertical-align: middle; +} + +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) td[width="870"][bgcolor="#D9E6FE"] .adminmenu_style_selected:hover img[width="42"][height="42"] { + background: rgba(76, 175, 80, 0.2); + transform: scale(1.05); + box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3); +} + +/* Iconos pequeños en items de menú (11x11) */ +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) td[width="870"][bgcolor="#D9E6FE"] .adminmenu_style_selected img[width="11"][height="11"] { + margin-right: 6px !important; + vertical-align: middle !important; + display: inline-block !important; + transition: transform 0.2s ease; + filter: opacity(0.8); +} + +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) td[width="870"][bgcolor="#D9E6FE"] .adminmenu_style_selected:hover img[width="11"][height="11"] { + transform: scale(1.15); + filter: opacity(1); +} + +/* Ocultar iconos blank.gif en contenido principal */ +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) td[width="870"][bgcolor="#D9E6FE"] .adminmenu_style_selected img[src*="blank.gif"] { + display: none !important; +} + +/* Estilos para tarjetas de menú con iconos */ +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) td[width="870"][bgcolor="#D9E6FE"] .adminmenu_style_selected { + border-radius: 8px; + padding: 12px !important; + margin: 8px 0 !important; + background: var(--bg-white-transparent) !important; + background-color: var(--bg-white-transparent) !important; + border: 1px solid rgba(76, 175, 80, 0.2) !important; + transition: all 0.3s ease; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); +} + +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) td[width="870"][bgcolor="#D9E6FE"] .adminmenu_style_selected:hover { + background: rgba(76, 175, 80, 0.1) !important; + background-color: rgba(76, 175, 80, 0.1) !important; + border-color: rgba(76, 175, 80, 0.4) !important; + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(76, 175, 80, 0.2); +} + +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) td[width="870"][bgcolor="#D9E6FE"] .adminmenu_style_selected td { + padding: 4px 8px !important; + vertical-align: middle !important; +} + +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) td[width="870"][bgcolor="#D9E6FE"] .adminmenu_style_selected a { + display: flex; + align-items: center; + gap: 8px; + text-decoration: none; +} + +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) td[width="870"][bgcolor="#D9E6FE"] .adminmenu_style_selected span { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; + font-size: var(--font-size-h2) !important; + font-weight: 600 !important; + color: var(--color-text-dark) !important; +} + +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) td[width="870"][bgcolor="#D9E6FE"] .adminmenu_style_selected font { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; + font-size: var(--font-size-p2) !important; + color: var(--color-text-dark) !important; +} + +/* ========================================================================== + FILAS DE TABLAS EN CONTENIDO PRINCIPAL + ========================================================================== */ +/* Filas de tabla - variante Y (alternadas) */ +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) .records_list_y { + background: #f8f9fa !important; + background-color: #f8f9fa !important; + transition: all 0.2s ease; + cursor: pointer; +} + +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) .records_list_y:hover { + background: rgba(76, 175, 80, 0.1) !important; + background-color: rgba(76, 175, 80, 0.1) !important; + transform: translateX(2px); + box-shadow: 0 2px 6px rgba(76, 175, 80, 0.15) !important; +} + +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) .records_list_y td { + padding: 10px 8px !important; + border-bottom: 1px solid #e0e0e0 !important; + vertical-align: middle !important; +} + +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) .records_list_y font { + color: var(--color-text-dark) !important; + font-size: var(--font-size-p1) !important; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; +} + +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) .records_list_y a { + color: var(--color-primary-light) !important; + text-decoration: none; + font-weight: 500; + transition: color 0.2s ease; +} + +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) .records_list_y a:hover { + color: var(--color-primary-medium) !important; + text-decoration: underline; +} + +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) .records_list_y a font { + color: var(--color-primary-light) !important; +} + +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) .records_list_y a:hover font { + color: var(--color-primary-medium) !important; +} + +/* Filas de tabla - variante X */ +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) .records_list_x { + background: var(--color-bg-white) !important; + background-color: var(--color-bg-white) !important; + transition: all 0.2s ease; + cursor: pointer; +} + +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) .records_list_x:hover { + background: rgba(76, 175, 80, 0.08) !important; + background-color: rgba(76, 175, 80, 0.08) !important; + transform: translateX(2px); + box-shadow: 0 2px 6px rgba(76, 175, 80, 0.12) !important; +} + +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) .records_list_x td { + padding: 10px 8px !important; + border-bottom: 1px solid #e0e0e0 !important; + vertical-align: middle !important; +} + +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) .records_list_x font { + color: var(--color-text-dark) !important; + font-size: var(--font-size-p1) !important; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; +} + +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) .records_list_x a { + color: var(--color-primary-light) !important; + text-decoration: none; + font-weight: 500; + transition: color 0.2s ease; +} + +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) .records_list_x a:hover { + color: var(--color-primary-medium) !important; + text-decoration: underline; +} + +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) .records_list_x a font { + color: var(--color-primary-light) !important; +} + +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) .records_list_x a:hover font { + color: var(--color-primary-light) !important; +} + +/* Estilos para encabezados de tabla en contenido principal */ +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="black"] { + border-radius: 8px 8px 0 0 !important; + overflow: hidden; +} + +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="black"] td { + padding: 12px 8px !important; + background: var(--color-text-dark) !important; + background-color: var(--color-text-dark) !important; +} + +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="black"] font { + color: var(--color-text-light) !important; + font-weight: 600 !important; + font-size: var(--font-size-p2) !important; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="black"] a { + color: var(--color-text-light) !important; + text-decoration: none; + transition: color 0.2s ease; +} + +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="black"] a:hover { + color: var(--color-primary-light) !important; +} + +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="black"] a font { + color: var(--color-text-light) !important; +} + +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="black"] a:hover font { + color: var(--color-primary-light) !important; +} + +/* ========================================================================== + FOOTER DEL SIDEBAR + ========================================================================== */ +/* Footer con versión y copyright */ +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] tr:last-child td[bgcolor="#015B91"] { + background: var(--color-bg-white) !important; + background-color: var(--color-bg-white) !important; + padding: 0px 10px 1px 10px !important; + text-align: center; +} + +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] tr:last-child td[bgcolor="#015B91"] font { + color: var(--color-primary-light) !important; + font-size: var(--font-size-p2) !important; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; +} + +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] tr:last-child td[bgcolor="#015B91"] a { + color: var(--color-primary-light) !important; + text-decoration: none; +} + +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] tr:last-child td[bgcolor="#015B91"] a font { + color: var(--color-primary-light) !important; +} + +body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] tr:last-child td[bgcolor="#015B91"] a:hover { + color: var(--color-primary-medium) !important; + text-decoration: underline; +} + +/* ========================================================================== + RESPONSIVE + ========================================================================== */ +@media (max-width: 768px) { + /* Tabla principal - mantener como tabla pero ajustar anchos */ + body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] { + width: 100% !important; + max-width: 100% !important; + table-layout: auto !important; + } + + /* Sidebar - reducir ancho para que quepa junto al contenido */ + body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] { + width: 140px !important; + min-width: 140px !important; + max-width: 140px !important; + padding: 15px 5px !important; + box-sizing: border-box !important; + overflow: hidden !important; + word-wrap: break-word !important; + } + + /* Tabla de navegación dentro del sidebar - ajustar ancho */ + body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] table { + width: 100% !important; + max-width: 100% !important; + } + + /* Contenido principal - ajustar ancho para que quepa junto al sidebar */ + body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="870"][bgcolor="#D9E6FE"], + body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="770"][bgcolor="#D9E6FE"] { + width: calc(100% - 140px) !important; + min-width: 0 !important; + max-width: calc(100% - 140px) !important; + padding: 5px !important; + box-sizing: border-box !important; + } + + body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] table { + margin-top: 10px; + } + + body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .head_style, + body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .head_style_selected { + padding: 6px 8px !important; + font-size: var(--font-size-p2) !important; + } + + body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] b font { + font-size: var(--font-size-p1) !important; + } +} + +/* ========================================================================== + ESTILOS MODERNOS PARA BARRA DE NAVEGACIÓN SUPERIOR + ========================================================================== */ + +/* Tabla con fondo azul #D9E6FE - cambiar a blanco (selector general con máxima prioridad) */ +table[bgcolor="#D9E6FE"] { + background: #ffffff !important; + background-color: #ffffff !important; +} + +/* Tabla específica con height="15" */ +table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"][height="15"] { + background: #ffffff !important; + background-color: #ffffff !important; +} + +/* Celdas dentro de tablas con bgcolor="#D9E6FE" */ +table[bgcolor="#D9E6FE"] td { + background: #ffffff !important; + background-color: #ffffff !important; +} + +/* Celdas td individuales con bgcolor="#D9E6FE" - cambiar a blanco */ +td[bgcolor="#D9E6FE"], +td[bgcolor="#d9e6fe"] { + background: #ffffff !important; + background-color: #ffffff !important; +} + +/* Tabla con fondo azul #d3e0f7 - cambiar a blanco */ +table[bgcolor="#d3e0f7"], +table[bgcolor="#D3E0F7"] { + background: #ffffff !important; + background-color: #ffffff !important; +} + +/* Celdas con fondo azul #d3e0f7 - cambiar a blanco */ +td[bgcolor="#d3e0f7"], +td[bgcolor="#D3E0F7"], +table[bgcolor="#d3e0f7"] td, +table[bgcolor="#D3E0F7"] td { + background: #ffffff !important; + background-color: #ffffff !important; +} + +/* Estilos para la barra de navegación superior (HOME | Timeclock | Chat | Logout) */ +table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:first-child[bgcolor="#015B91"] { + background: var(--color-bg-white) !important; + box-shadow: none !important; + border-bottom: none !important; + border-left: none !important; + padding: 16px 24px !important; + height: auto !important; + min-height: 60px !important; + position: relative !important; + overflow: hidden !important; +} + +/* Efecto decorativo de brillo sutil - ajustado para fondo blanco */ +table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:first-child[bgcolor="#015B91"]::before { + content: '' !important; + position: absolute !important; + top: 0 !important; + left: -100% !important; + width: 100% !important; + height: 100% !important; + background: linear-gradient(90deg, transparent, var(--bg-decorative-1), transparent) !important; + animation: shimmer 3s infinite !important; +} + +@keyframes shimmer { + 0% { left: -100%; } + 100% { left: 100%; } +} + +/* Estilos para las celdas de la barra de navegación */ +table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:first-child[bgcolor="#015B91"] td { + background: transparent !important; + padding: 1px 20px !important; + vertical-align: middle !important; + position: relative !important; + z-index: 1 !important; +} + +/* Estilos para el texto de navegación (HOME, Timeclock, etc.) */ +table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:first-child[bgcolor="#015B91"] font[face="ARIAL,HELVETICA"][color="WHITE"] { + color: var(--color-primary-medium) !important; + font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Arial, Helvetica, sans-serif !important; + font-weight: 700 !important; + text-shadow: none !important; + letter-spacing: 0.5px !important; + font-size: var(--font-size-p1) !important; +} + +/* Separador "|" con estilo moderno - todos los font dentro del td izquierdo */ +table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:first-child[bgcolor="#015B91"] td[align="LEFT"] font[face="ARIAL,HELVETICA"][color="WHITE"][size="1"] { + color: var(--color-primary-medium) !important; + font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Arial, Helvetica, sans-serif !important; + font-weight: 700 !important; + text-shadow: none !important; + opacity: 1 !important; + margin: 0 6px !important; +} + +/* Asegurar que el nombre de usuario (6666) tenga el mismo color */ +table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:first-child[bgcolor="#015B91"] td[align="LEFT"] font[face="ARIAL,HELVETICA"][color="WHITE"][size="1"] font[face="ARIAL,HELVETICA"][color="WHITE"][size="1"] { + color: var(--color-primary-medium) !important; + font-weight: 700 !important; + opacity: 1 !important; +} + +/* Estilos para la fecha/hora en la derecha */ +table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:first-child[bgcolor="#015B91"] td[align="RIGHT"] { + text-align: right !important; + position: relative !important; + z-index: 1 !important; +} + +table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:first-child[bgcolor="#015B91"] td[align="RIGHT"] font { + color: var(--color-primary-medium) !important; + font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Arial, Helvetica, sans-serif !important; + font-weight: 600 !important; + text-shadow: none !important; + letter-spacing: 0.8px !important; + font-size: var(--font-size-p1) !important; + background: var(--bg-decorative-1) !important; + padding: 6px 12px !important; + border-radius: 20px !important; + display: inline-block !important; + border: 1px solid var(--color-primary-lightest) !important; +} + +/* Ocultar los dos tr vacíos siguientes */ +table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:nth-child(2)[bgcolor="#015B91"] { + display: none !important; + visibility: hidden !important; + height: 0 !important; + padding: 0 !important; + margin: 0 !important; + line-height: 0 !important; +} + +table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:nth-child(3)[bgcolor="#E6E6E6"] { + display: none !important; + visibility: hidden !important; + height: 0 !important; + padding: 0 !important; + margin: 0 !important; + line-height: 0 !important; +} + +/* Ocultar la barra verde (td con colspan="2" height="2" bgcolor="#015B91") */ +table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr td[align="LEFT"][colspan="2"][height="2"][bgcolor="#015B91"], +table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr td[colspan="2"][height="2"][bgcolor="#015B91"] { + display: none !important; + visibility: hidden !important; + height: 0 !important; + padding: 0 !important; + margin: 0 !important; + line-height: 0 !important; + border: none !important; +} + +/* Ocultar el tr que contiene la barra verde */ +table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:has(td[colspan="2"][height="2"][bgcolor="#015B91"]), +table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:has(td[align="LEFT"][colspan="2"][height="2"][bgcolor="#015B91"]) { + display: none !important; + visibility: hidden !important; + height: 0 !important; + padding: 0 !important; + margin: 0 !important; + line-height: 0 !important; +} + +/* Mejora adicional: hover effect en los elementos de navegación (si fueran clicables) */ +table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:first-child[bgcolor="#015B91"] td[align="LEFT"] { + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; +} + +/* Efecto hover moderno para los elementos de texto de navegación */ +table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:first-child[bgcolor="#015B91"] td[align="LEFT"] font[face="ARIAL,HELVETICA"][color="WHITE"][size="1"] { + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; + position: relative !important; + display: inline-block !important; +} + +/* Efecto de resaltado sutil al pasar el mouse (si fuera interactivo) */ +table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:first-child[bgcolor="#015B91"] td[align="LEFT"] font[face="ARIAL,HELVETICA"][color="WHITE"][size="1"]:hover { + color: var(--color-primary-medium) !important; + transform: translateY(-1px) !important; +} + +/* ========================================================================== + RESPONSIVE - BARRA DE NAVEGACIÓN SUPERIOR + ========================================================================== */ + +/* Prevenir que la fecha/hora se apile y mantener altura fija */ +table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:first-child[bgcolor="#015B91"] { + white-space: nowrap !important; + overflow: hidden !important; +} + +table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:first-child[bgcolor="#015B91"] td[align="RIGHT"] { + white-space: nowrap !important; + overflow: hidden !important; + text-overflow: ellipsis !important; +} + +table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:first-child[bgcolor="#015B91"] td[align="RIGHT"] font { + white-space: nowrap !important; + overflow: hidden !important; + text-overflow: ellipsis !important; + max-width: 100% !important; + display: inline-block !important; +} + +/* Media queries para pantallas pequeñas */ +@media (max-width: 768px) { + /* Mantener altura fija y reducir padding */ + table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:first-child[bgcolor="#015B91"] { + min-height: 50px !important; + max-height: 50px !important; + height: 50px !important; + padding: 8px 12px !important; + } + + /* Reducir tamaño de fuente de fecha/hora */ + table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:first-child[bgcolor="#015B91"] td[align="RIGHT"] font { + font-size: var(--font-size-p2) !important; + padding: 4px 8px !important; + letter-spacing: 0.3px !important; + } + + /* Reducir tamaño de fuente de navegación */ + table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:first-child[bgcolor="#015B91"] td[align="LEFT"] font[face="ARIAL,HELVETICA"][color="WHITE"][size="1"] { + font-size: var(--font-size-p2) !important; + } +} + +@media (max-width: 480px) { + /* Altura aún más pequeña en móviles */ + table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:first-child[bgcolor="#015B91"] { + min-height: 45px !important; + max-height: 45px !important; + height: 45px !important; + padding: 6px 10px !important; + } + + /* Ocultar fecha completa, mostrar solo hora si es necesario */ + table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:first-child[bgcolor="#015B91"] td[align="RIGHT"] font { + font-size: var(--font-size-p2) !important; + padding: 3px 6px !important; + } + + /* Reducir más el texto de navegación */ + table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:first-child[bgcolor="#015B91"] td[align="LEFT"] font[face="ARIAL,HELVETICA"][color="WHITE"][size="1"] { + font-size: var(--font-size-p2) !important; + margin: 0 3px !important; + } +} + +/* ========================================================================== + ESTILOS MODERNOS PARA COMPONENTE DE ESTADÍSTICAS + ========================================================================== */ + +/* Tabla principal de estadísticas (Agents Logged In, etc.) */ +table[width="700"][cellpadding="6"][cellspacing="0"] { + background: var(--color-bg-white) !important; + border-radius: 8px !important; + box-shadow: 0 2px 8px var(--shadow-light) !important; + overflow: hidden !important; + margin: 10px auto !important; + border-collapse: separate !important; + border-spacing: 0 !important; + width: 100% !important; + max-width: 800px !important; + table-layout: fixed !important; +} + +/* Celdas de la tabla de estadísticas principales - Recuadro unificado */ +table[width="700"][cellpadding="6"][cellspacing="0"] td[bgcolor="#015B91"] { + background: transparent !important; + border: none !important; + border-radius: 8px !important; + padding: 12px 8px !important; + text-align: center !important; + vertical-align: middle !important; + + width: auto !important; + min-width: 0 !important; + max-width: 25% !important; + box-shadow: 0 1px 4px var(--shadow-light) !important; + position: relative !important; +} + +/* Celdas con iconos (rowspan="2") - recuadro unificado completo */ +table[width="700"][cellpadding="6"][cellspacing="0"] td[bgcolor="#015B91"][rowspan="2"] { + width: 33.33% !important; + min-width: 0 !important; + max-width: 33.33% !important; + padding: 12px 6px !important; + vertical-align: center !important; + border-radius: 8px 0 0 8px !important; +} + +/* Celdas con texto (primera fila, sin rowspan) - unificar con el recuadro */ +table[width="700"][cellpadding="6"][cellspacing="0"] tr:first-child td[bgcolor="#015B91"]:not([rowspan]) { + padding: 12px 6px 4px !important; + vertical-align: top !important; + border-left: none !important; + border-right: none !important; + border-top: none !important; + border-bottom: none !important; + box-shadow: none !important; + border-radius: 0 8px 0 0 !important; + background: transparent !important; + width: 66.67% !important; + max-width: 66.67% !important; +} + +/* Celdas con números (segunda fila) - unificar con el recuadro */ +table[width="700"][cellpadding="6"][cellspacing="0"] tr:nth-child(2) td[bgcolor="#015B91"] { + padding: 4px 6px 12px !important; + vertical-align: top !important; + border-left: none !important; + border-right: none !important; + border-top: none !important; + box-shadow: none !important; + border-bottom: none !important; + border-radius: 0 0 8px 0 !important; + background: transparent !important; + width: 66.67% !important; + max-width: 66.67% !important; +} + +/* Unificar bordes - el recuadro completo tiene bordes solo en las celdas con rowspan */ +table[width="700"][cellpadding="6"][cellspacing="0"] td[bgcolor="#015B91"][rowspan="2"] + td[bgcolor="#015B91"] { + border-left: none !important; +} + +table[width="700"][cellpadding="6"][cellspacing="0"] td[bgcolor="#015B91"][rowspan="2"] ~ td[bgcolor="#015B91"]:not([rowspan]) { + border-left: none !important; +} + +/* Asegurar que el número esté en la misma columna que el texto - sin bordes separados */ +table[width="700"][cellpadding="6"][cellspacing="0"] tr:nth-child(2) td[bgcolor="#015B91"]:nth-child(2), +table[width="700"][cellpadding="6"][cellspacing="0"] tr:nth-child(2) td[bgcolor="#015B91"]:nth-child(4), +table[width="700"][cellpadding="6"][cellspacing="0"] tr:nth-child(2) td[bgcolor="#015B91"]:nth-child(6), +table[width="700"][cellpadding="6"][cellspacing="0"] tr:nth-child(2) td[bgcolor="#015B91"]:nth-child(8) { + border-left: none !important; +} + +/* Texto de las estadísticas principales - mucho más grande - selectores más específicos y directos */ +table[width="700"][cellpadding="6"][cellspacing="0"] td[bgcolor="#015B91"] font[style*="HELVETICA"][style*="color:white"], +table[width="700"][cellpadding="6"][cellspacing="0"] td[bgcolor="#015B91"][align="center"] font[style*="font-size:11"], +table[width="700"][cellpadding="6"][cellspacing="0"] td[bgcolor="#015B91"] font[style*="font-size:11"][style*="color:white"], +table[width="700"][cellpadding="6"][cellspacing="0"] tbody tr:first-child td[bgcolor="#015B91"]:not([rowspan]) font, +table[width="700"][cellpadding="6"][cellspacing="0"] td[bgcolor="#015B91"][valign="middle"] font { + color: var(--color-primary-dark) !important; + font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Arial, Helvetica, sans-serif !important; + font-weight: 700 !important; + text-shadow: none !important; + font-size: var(--font-size-h1) !important; + display: block !important; + margin-top: 0 !important; + line-height: 1.3 !important; + text-align: center !important; +} + +/* Selector universal para cualquier font dentro de las celdas de estadísticas (primera fila) */ +table[width="700"][cellpadding="6"][cellspacing="0"] tbody > tr:first-child > td[bgcolor="#015B91"]:not([rowspan]) > font { + color: var(--color-primary-dark) !important; + font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Arial, Helvetica, sans-serif !important; + font-weight: 700 !important; + text-shadow: none !important; + font-size: var(--font-size-h1) !important; + display: block !important; + margin-top: 4px !important; + line-height: 1.3 !important; + text-align: center !important; + letter-spacing: 0.2px !important; + position: relative !important; + z-index: 1 !important; +} + +/* Selector adicional con todos los atributos para máxima especificidad */ +table[width="700"][cellpadding="6"][cellspacing="0"] tbody tr:first-child td[align="center"][valign="middle"][bgcolor="#015B91"]:not([rowspan]) font[style*="font-family:HELVETICA"][style*="font-size:11"][style*="color:white"][style*="font-weight:bold"] { + font-size: var(--font-size-h1) !important; + color: var(--color-primary-dark) !important; + font-weight: 700 !important; + font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Arial, Helvetica, sans-serif !important; + display: block !important; + text-align: center !important; + margin-top: 8px !important; + letter-spacing: 0.3px !important; + position: relative !important; + z-index: 1 !important; +} + +/* Números grandes de estadísticas - tamaño razonable */ +table[width="700"][cellpadding="6"][cellspacing="0"] td[bgcolor="#015B91"] font[style*="font-size:18"], +table[width="700"][cellpadding="6"][cellspacing="0"] td[bgcolor="#015B91"] font[style*="font-size:18"][style*="color:white"], +table[width="700"][cellpadding="6"][cellspacing="0"] tbody tr:nth-child(2) td[bgcolor="#015B91"] font, +table[width="700"][cellpadding="6"][cellspacing="0"] tbody tr:nth-child(2) td[bgcolor="#015B91"] font[style*="font-size:18"], +table[width="700"][cellpadding="6"][cellspacing="0"] tbody tr:nth-child(2) td[bgcolor="#015B91"] font[style*="color:white"] { + font-size: var(--font-size-h1) !important; + font-weight: 700 !important; + color: var(--color-primary-dark) !important; + letter-spacing: 0px !important; + display: block !important; + line-height: 1.2 !important; + text-align: center !important; + margin-top: 2px !important; + background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary-medium) 100%) !important; + -webkit-background-clip: text !important; + -webkit-text-fill-color: transparent !important; + background-clip: text !important; + position: relative !important; + z-index: 1 !important; +} + +/* Imágenes de iconos - estilo simple sin efectos */ +/* Eliminar fondo de iconos de 42x42 en tabla de estadísticas */ +table[width="700"][cellpadding="6"][cellspacing="0"] td[bgcolor="#015B91"] img[width="42"][height="42"] { + background: transparent !important; + background-color: transparent !important; + padding: 0 !important; + border-radius: 0 !important; + box-shadow: none !important; +} + +table[width="700"][cellpadding="6"][cellspacing="0"] td[bgcolor="#015B91"][rowspan="2"] img { + filter: brightness(0) saturate(100%) invert(37%) sepia(89%) saturate(1000%) hue-rotate(140deg) brightness(0.7) !important; + opacity: 1 !important; + margin-bottom: 4px !important; + display: block !important; + margin-left: auto !important; + margin-right: auto !important; + width: 40px !important; + height: 40px !important; + background: transparent !important; + background-color: transparent !important; + padding: 0 !important; + border-radius: 0 !important; +} + +table[width="700"][cellpadding="6"][cellspacing="0"] td[bgcolor="#015B91"] img { + filter: brightness(0) saturate(100%) invert(37%) sepia(89%) saturate(1000%) hue-rotate(140deg) brightness(0.7) !important; + opacity: 1 !important; + margin-bottom: 4px !important; + display: block !important; + margin-left: auto !important; + margin-right: auto !important; + width: 28px !important; + height: 28px !important; + background: transparent !important; + background-color: transparent !important; + padding: 0 !important; + border-radius: 0 !important; +} + +/* Espaciadores entre tarjetas */ +table[width="700"][cellpadding="6"][cellspacing="0"] td[width="10"] { + width: 4px !important; + padding: 0 !important; + background: transparent !important; + border: none !important; +} + +/* Tabla System Summary */ +table[width="700"][cellspacing="2"] { + background: var(--color-bg-white) !important; + border-radius: 12px !important; + box-shadow: 0 2px 12px var(--shadow-light) !important; + overflow: visible !important; + margin: 20px auto !important; + border-collapse: separate !important; + border-spacing: 0 !important; + width: 100% !important; + max-width: 700px !important; +} + +/* Eliminar scrollbar adicional en contenedores de System Summary */ +body:has(table[width="700"][cellspacing="2"]) { + overflow-x: visible !important; + overflow-y: visible !important; +} + +/* Contenedor principal - eliminar scrollbars */ +body:has(table[width="700"][cellspacing="2"]) td[width="870"][bgcolor="#D9E6FE"], +body:has(table[width="700"][cellspacing="2"]) td[bgcolor="#D9E6FE"], +body:has(table[width="700"][cellspacing="0"][cellpadding="1"]) td[width="870"][bgcolor="#D9E6FE"], +body:has(table[width="700"][cellspacing="0"][cellpadding="1"]) td[bgcolor="#D9E6FE"] { + overflow: visible !important; + overflow-x: visible !important; + overflow-y: visible !important; +} + +/* Eliminar scrollbar en elementos PRE dentro de System Summary */ +body:has(table[width="700"][cellspacing="2"]) pre, +body:has(table[width="700"][cellspacing="0"][cellpadding="1"]) pre { + overflow: visible !important; + overflow-x: visible !important; + overflow-y: visible !important; +} + +/* Eliminar scrollbar en tablas contenedoras */ +body:has(table[width="700"][cellspacing="2"]) table, +body:has(table[width="700"][cellspacing="0"][cellpadding="1"]) table { + overflow: visible !important; +} + +/* Título System Summary */ +table[width="700"][cellspacing="2"] tr:first-child td { + background: transparent !important; + padding: 16px 20px 12px !important; + border-bottom: 2px solid var(--color-primary-lightest) !important; +} + +table[width="700"][cellspacing="2"] tr:first-child font[style*="HELVETICA"][style*="color:black"] { + color: var(--color-primary-dark) !important; + font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Arial, Helvetica, sans-serif !important; + font-size: var(--font-size-h1) !important; + font-weight: 700 !important; + letter-spacing: 0.5px !important; +} + +/* Encabezado de System Summary (Records, Active, etc.) */ +table[width="700"][cellspacing="2"] tr[bgcolor="black"] { + background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary-medium) 100%) !important; +} + +table[width="700"][cellspacing="2"] tr[bgcolor="black"] td { + background: transparent !important; + padding: 12px 16px !important; + border: none !important; +} + +table[width="700"][cellspacing="2"] tr[bgcolor="black"] font[style*="HELVETICA"][style*="color:white"] { + color: var(--color-text-light) !important; + font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Arial, Helvetica, sans-serif !important; + font-weight: 600 !important; + font-size: var(--font-size-h2) !important; + letter-spacing: 0.3px !important; +} + +/* Filas de datos System Summary */ +table[width="700"][cellspacing="2"] tr[bgcolor="#B6D3FC"] { + background: var(--color-bg-white) !important; + border-bottom: 1px solid var(--bg-decorative-1) !important; + transition: background-color 0.2s ease !important; +} + +table[width="700"][cellspacing="2"] tr[bgcolor="#B6D3FC"]:hover { + background: var(--bg-decorative-1) !important; +} + +table[width="700"][cellspacing="2"] tr[bgcolor="#B6D3FC"] td { + background: transparent !important; + padding: 12px 16px !important; + border: none !important; +} + +table[width="700"][cellspacing="2"] tr[bgcolor="#B6D3FC"] font[color="black"] { + color: var(--color-text-dark) !important; + font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Arial, Helvetica, sans-serif !important; + font-weight: 500 !important; + font-size: var(--font-size-h2) !important; +} + +table[width="700"][cellspacing="2"] tr[bgcolor="#B6D3FC"] b { + color: var(--color-primary-medium) !important; + font-weight: 700 !important; + font-size: var(--font-size-h2) !important; +} + +/* Tablas Total Stats (Today y Yesterday) */ +table[width="700"][cellspacing="0"][cellpadding="1"] { + background: var(--color-bg-white) !important; + border-radius: 12px !important; + box-shadow: 0 2px 12px var(--shadow-light) !important; + overflow: visible !important; + margin: 20px auto !important; + border-collapse: separate !important; + border-spacing: 0 !important; + width: 100% !important; + max-width: 700px !important; +} + +/* Título Total Stats */ +table[width="700"][cellspacing="0"][cellpadding="1"] tr:first-child td[align="left"] { + background: transparent !important; + padding: 16px 20px 12px !important; + border-bottom: 2px solid var(--color-primary-lightest) !important; +} + +table[width="700"][cellspacing="0"][cellpadding="1"] tr:first-child font[style*="HELVETICA"][style*="color:black"] { + color: var(--color-primary-dark) !important; + font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Arial, Helvetica, sans-serif !important; + font-size: var(--font-size-h1) !important; + font-weight: 700 !important; + letter-spacing: 0.3px !important; +} + +/* Enlace view max stats - estilo mejorado */ +table[width="700"][cellspacing="0"][cellpadding="1"] tr:first-child td[align="right"] font[size="1"], +table[width="700"][cellspacing="0"][cellpadding="1"] tr:first-child td[align="right"] font[size="1"] a { + color: var(--color-primary-medium) !important; + font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Arial, Helvetica, sans-serif !important; + font-size: var(--font-size-p1) !important; + font-weight: 600 !important; + text-decoration: none !important; + padding: 4px 10px !important; + border-radius: 6px !important; + transition: all 0.3s ease !important; + display: inline-block !important; + +} +table[width="700"][cellspacing="0"][cellpadding="1"] tr:first-child td[align="right"] font[size="1"] a{ + background: rgba(0, 139, 139, 0.2) !important; + + border-color: var(--color-primary-medium) !important; + + +} + +table[width="700"][cellspacing="0"][cellpadding="1"] tr:first-child td[align="right"] font[size="1"] a:hover { + background: rgba(0, 139, 139, 0.2) !important; + color: var(--color-primary-dark) !important; + border-color: var(--color-primary-medium) !important; + transform: translateY(-1px) !important; + box-shadow: 0 2px 6px rgba(0, 139, 139, 0.2) !important; +} + +/* Encabezado Total Stats */ +table[width="700"][cellspacing="0"][cellpadding="1"] tr[bgcolor="black"] { + background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary-medium) 100%) !important; +} + +table[width="700"][cellspacing="0"][cellpadding="1"] tr[bgcolor="black"] td { + background: transparent !important; + padding: 10px 12px !important; + border: none !important; +} + +table[width="700"][cellspacing="0"][cellpadding="1"] tr[bgcolor="black"] font[color="white"] { + color: var(--color-text-light) !important; + font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Arial, Helvetica, sans-serif !important; + font-weight: 600 !important; + font-size: var(--font-size-p1) !important; + letter-spacing: 0.3px !important; +} + +/* Fila de datos Total Stats */ +table[width="700"][cellspacing="0"][cellpadding="1"] tr[bgcolor="#B9CBFD"] { + background: var(--bg-decorative-1) !important; + border-bottom: 1px solid var(--color-primary-lightest) !important; +} + +table[width="700"][cellspacing="0"][cellpadding="1"] tr[bgcolor="#B9CBFD"] td { + background: transparent !important; + padding: 12px 16px !important; + border: none !important; +} + +table[width="700"][cellspacing="0"][cellpadding="1"] tr[bgcolor="#B9CBFD"] font[size="1"] { + color: var(--color-text-dark) !important; + font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Arial, Helvetica, sans-serif !important; + font-size: var(--font-size-h2) !important; + font-weight: 500 !important; + font-style: italic !important; +} + +/* ========================================================================== + SELECTORES DE MÁXIMA PRIORIDAD PARA ESTADÍSTICAS + ========================================================================== */ + +/* Forzar tamaño de fuente para texto de etiquetas - tamaño razonable */ +table[width="700"][cellpadding="6"][cellspacing="0"] font[style*="font-size:11"] { + font-size: var(--font-size-h1) !important; +} + +/* Forzar tamaño de fuente para números - tamaño razonable */ +table[width="700"][cellpadding="6"][cellspacing="0"] font[style*="font-size:18"] { + font-size: var(--font-size-h1) !important; +} + +/* Selector directo para cualquier font dentro de td con bgcolor específico - solo para números */ +table[width="700"] tbody tr:nth-child(2) td[bgcolor="#015B91"] font { + font-size: var(--font-size-h1) !important; + color: var(--color-primary-medium) !important; + font-weight: 700 !important; +} + +/* Selector para números en segunda fila */ +table[width="700"] tbody tr:nth-child(2) td[bgcolor="#015B91"] font { + font-size: var(--font-size-h1) !important; + color: var(--color-primary-medium) !important; + font-weight: 700 !important; +} + +/* Selectores adicionales con mayor especificidad - apuntar directamente a los elementos */ +table[width="700"][cellpadding="6"][cellspacing="0"] tbody tr:nth-child(2) td[bgcolor="#015B91"] font[style] { + font-size: var(--font-size-h1) !important; + color: var(--color-primary-medium) !important; + font-weight: 700 !important; +} + +/* Asegurar que los números (0) debajo también tengan el tamaño correcto - máxima prioridad */ +table[width="700"][cellpadding="6"][cellspacing="0"] tbody tr:nth-child(2) td[bgcolor="#015B91"] font[style*="font-size:18"], +table[width="700"][cellpadding="6"][cellspacing="0"] tbody tr:nth-child(2) td[bgcolor="#015B91"] font[style*="color:white"], +table[width="700"][cellpadding="6"][cellspacing="0"] tbody tr:nth-child(2) td[align="center"][valign="middle"][bgcolor="#015B91"] font, +table[width="700"][cellpadding="6"][cellspacing="0"] tbody tr:nth-child(2) td[align="center"][valign="middle"][bgcolor="#015B91"] font[style*="font-size:18"][style*="color:white"][style*="font-weight:bold"] { + font-size: var(--font-size-h1) !important; + color: var(--color-primary-medium) !important; + font-weight: 700 !important; + display: block !important; + line-height: 1.2 !important; +} + +/* ========================================================================== + RESPONSIVE - TABLA DE ESTADÍSTICAS (769px y menos) + ========================================================================== */ +@media (max-width: 769px) { + /* Tabla principal de estadísticas - ajustar ancho */ + table[width="700"][cellpadding="6"][cellspacing="0"] { + width: 100% !important; + max-width: 100% !important; + table-layout: auto !important; + padding: 0 10px !important; + box-sizing: border-box !important; + } + + /* Celdas con iconos - ajustar ancho */ + table[width="700"][cellpadding="6"][cellspacing="0"] td[bgcolor="#015B91"][rowspan="2"] { + width: auto !important; + min-width: 60px !important; + max-width: 30% !important; + padding: 10px 4px !important; + + } + + /* Celdas con texto - ajustar ancho */ + table[width="700"][cellpadding="6"][cellspacing="0"] tr:first-child td[bgcolor="#015B91"]:not([rowspan]) { + width: auto !important; + max-width: 70% !important; + padding: 10px 4px 4px !important; + } + + /* Celdas con números - ajustar ancho */ + table[width="700"][cellpadding="6"][cellspacing="0"] tr:nth-child(2) td[bgcolor="#015B91"] { + width: auto !important; + max-width: 70% !important; + padding: 4px 4px 10px !important; + } + + /* Reducir tamaño de iconos en pantallas pequeñas */ + table[width="700"][cellpadding="6"][cellspacing="0"] td[bgcolor="#015B91"][rowspan="2"] img { + width: 32px !important; + height: 32px !important; + } + + /* Reducir tamaño de fuente en pantallas pequeñas */ + table[width="700"][cellpadding="6"][cellspacing="0"] td[bgcolor="#015B91"] font[style*="font-size:11"], + table[width="700"][cellpadding="6"][cellspacing="0"] tbody tr:first-child td[bgcolor="#015B91"]:not([rowspan]) font { + font-size: var(--font-size-h2) !important; + } + + table[width="700"][cellpadding="6"][cellspacing="0"] td[bgcolor="#015B91"] font[style*="font-size:18"], + table[width="700"][cellpadding="6"][cellspacing="0"] tbody tr:nth-child(2) td[bgcolor="#015B91"] font { + font-size: var(--font-size-h1) !important; + } + + /* Espaciadores - reducir ancho */ + table[width="700"][cellpadding="6"][cellspacing="0"] td[width="10"] { + width: 2px !important; + } + + /* Tablas System Summary y Total Stats - ajustar ancho */ + table[width="700"][cellspacing="2"], + table[width="700"][cellspacing="0"][cellpadding="1"] { + width: 100% !important; + max-width: 100% !important; + margin: 15px auto !important; + padding: 0 10px !important; + box-sizing: border-box !important; + } +} + +/* Media query específica para el rango 770px - 900px */ +@media (min-width: 770px) and (max-width: 900px) { + /* Contenedor principal - ajustar ancho */ + body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="870"][bgcolor="#D9E6FE"], + body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="770"][bgcolor="#D9E6FE"] { + width: 100% !important; + max-width: 100% !important; + box-sizing: border-box !important; + } + + /* Tabla principal de estadísticas - ajustar ancho máximo */ + table[width="700"][cellpadding="6"][cellspacing="0"] { + max-width: 95% !important; + table-layout: auto !important; + } + + /* Ajustar porcentajes de celdas para evitar desbordamiento */ + table[width="700"][cellpadding="6"][cellspacing="0"] td[bgcolor="#015B91"][rowspan="2"] { + max-width: 28% !important; + } + + table[width="700"][cellpadding="6"][cellspacing="0"] tr:first-child td[bgcolor="#015B91"]:not([rowspan]), + table[width="700"][cellpadding="6"][cellspacing="0"] tr:nth-child(2) td[bgcolor="#015B91"] { + max-width: 72% !important; + } + + /* Tablas System Summary y Total Stats */ + table[width="700"][cellspacing="2"], + table[width="700"][cellspacing="0"][cellpadding="1"] { + max-width: 95% !important; + } +} + +/* Media query para pantallas de 769px y menos - contenedor principal */ +@media (max-width: 769px) { + /* Tabla principal - mantener como tabla, ajustar anchos */ + body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] { + width: 100% !important; + max-width: 100% !important; + table-layout: auto !important; + } + + /* Sidebar - reducir ancho */ + body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] { + width: 140px !important; + min-width: 140px !important; + max-width: 140px !important; + box-sizing: border-box !important; + overflow: hidden !important; + word-wrap: break-word !important; + } + + /* Tabla de navegación dentro del sidebar - ajustar ancho */ + body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] table { + width: 100% !important; + max-width: 100% !important; + } + + /* Contenedor principal - ajustar ancho para que quepa junto al sidebar */ + body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="870"][bgcolor="#D9E6FE"], + body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="770"][bgcolor="#D9E6FE"] { + width: calc(100% - 140px) !important; + min-width: 0 !important; + max-width: calc(100% - 140px) !important; + box-sizing: border-box !important; + padding: 5px !important; + } + + /* Tablas dentro del contenedor - ajustar para que no se desborden */ + body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) td[bgcolor="#D9E6FE"] table { + width: 100% !important; + max-width: 100% !important; + box-sizing: border-box !important; + } +} + +/* ========================================================================== + SIDEBAR VERTICAL - REAL-TIME REPORT + Convertir la barra de navegación horizontal en sidebar vertical + PRIORIDAD MÁXIMA - Sobrescribir cualquier estilo inline + ========================================================================== */ + +/* Contenedor principal - estructura para sidebar + contenido lado a lado */ +body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) { + margin: 0 !important; + padding: 0 !important; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; + display: flex !important; + flex-direction: row !important; + align-items: flex-start !important; +} + +/* SIDEBAR - Contenedor principal - posicionar a la izquierda */ +table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"] { + width: 170px !important; + min-width: 170px !important; + max-width: 170px !important; + background: var(--color-bg-white) !important; + background-color: var(--color-bg-white) !important; + padding: 20px 5px !important; + vertical-align: top !important; + box-sizing: border-box !important; + border-right: none !important; + margin: 0 !important; + position: relative !important; + overflow: hidden !important; + word-wrap: break-word !important; + flex-shrink: 0 !important; + float: left !important; +} + +/* Fila del sidebar - convertir de horizontal a vertical */ +table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"] tbody tr { + display: block !important; + width: 100% !important; +} + +/* Celdas del sidebar - cada una en su propia fila vertical */ +body table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"] td, +table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"] tbody tr td, +table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"] td[style] { + display: block !important; + width: 100% !important; + background: transparent !important; + padding: 0 !important; + margin: 0 !important; + box-sizing: border-box !important; + overflow: hidden !important; + word-wrap: break-word !important; + line-height: normal !important; + height: auto !important; + min-height: auto !important; +} + +/* Logo en la primera celda */ +table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"] td:first-child { + text-align: center !important; + padding: 10px 5px 15px 5px !important; + margin-bottom: 30px !important; +} + +table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"] td:first-child img { + filter: none !important; + width: auto !important; + height: auto !important; + max-width: 100% !important; + max-height: 45px !important; + display: block !important; + margin: 0 auto !important; + border-radius: 8px !important; + transition: transform 0.3s ease !important; +} + +table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"] td:first-child img:hover { + transform: scale(1.05) !important; +} + +/* Enlaces de navegación - estilo botón vertical igual al sidebar principal */ +/* Aumentar especificidad para sobrescribir cualquier estilo inline */ +body table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"] td:not(:first-child), +table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"] tbody tr td:not(:first-child), +table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"] td:not(:first-child)[style] { + background: var(--color-primary-light) !important; + background-color: var(--color-primary-light) !important; + padding: 8px 6px !important; + border-radius: 8px !important; + transition: all 0.3s ease !important; + cursor: pointer !important; + border: 2px solid var(--color-primary-light) !important; + margin: 10px 0 !important; + display: flex !important; + align-items: center !important; + justify-content: flex-start !important; + width: 100% !important; + max-width: 100% !important; + box-sizing: border-box !important; + overflow: hidden !important; + word-wrap: break-word !important; + line-height: 1 !important; + height: auto !important; + min-height: 35px !important; + max-height: 35px !important; +} + +/* Efecto hover en los enlaces */ +table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"] td:not(:first-child):hover { + background: var(--color-primary-light) !important; + background-color: var(--color-primary-light) !important; + border-color: var(--color-primary-light) !important; + transform: translateY(-2px) !important; + box-shadow: 0 4px 12px rgba(32, 178, 170, 0.3) !important; +} + +/* Enlaces dentro de las celdas */ +body table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"] td:not(:first-child) a, +table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"] td:not(:first-child) a[style], +table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"] td:not(:first-child) a { + text-decoration: none !important; + display: flex !important; + align-items: center !important; + justify-content: flex-start !important; + gap: 6px !important; + width: 100% !important; + max-width: 100% !important; + box-sizing: border-box !important; + overflow: hidden !important; + height: 100% !important; + min-height: 100% !important; + line-height: 1 !important; + vertical-align: middle !important; + padding: 0 !important; + margin: 0 !important; +} + +/* Texto dentro de los enlaces */ +body table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"] td:not(:first-child) a font, +table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"] td:not(:first-child) a font[style], +table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"] td:not(:first-child) a font[face], +table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"] td:not(:first-child) a font[color], +table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"] td:not(:first-child) a font[size] { + color: var(--color-text-light) !important; + font-size: var(--font-size-p1) !important; + font-weight: 500 !important; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; + word-wrap: break-word !important; + overflow: hidden !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; + max-width: 100% !important; + line-height: 1 !important; + display: inline-flex !important; + align-items: center !important; + height: auto !important; + margin: 0 !important; + padding: 0 !important; + vertical-align: middle !important; +} + +/* Texto en negrita */ +table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"] td:not(:first-child) a font b { + font-weight: 600 !important; + color: var(--color-text-light) !important; +} + +/* Iconos dentro de los enlaces */ +body table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"] td:not(:first-child) a img, +table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"] td:not(:first-child) a img[style], +table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"] td:not(:first-child) a img[width], +table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"] td:not(:first-child) a img[height] { + filter: brightness(0) invert(1) !important; + background-color: red !important; + width: 14px !important; + height: 14px !important; + flex-shrink: 0 !important; + max-width: 14px !important; + max-height: 14px !important; + display: inline-block !important; + vertical-align: middle !important; + align-self: center !important; +} + +/* Contenido principal - posicionar a la derecha del sidebar */ +body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) > table[cellpadding="4"][cellspacing="0"] { + flex: 1 !important; + width: auto !important; + margin-left: 0 !important; + padding: 0 !important; + display: table !important; + vertical-align: top !important; +} + +body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) > table[cellpadding="4"][cellspacing="0"] > tbody > tr > td { + padding: 10px !important; + vertical-align: top !important; +} + +/* Responsive - mantener sidebar y contenido lado a lado */ +@media (max-width: 768px) { + body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) { + flex-direction: row !important; + } + + table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"] { + width: 140px !important; + min-width: 140px !important; + max-width: 140px !important; + padding: 15px 3px !important; + } + + table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"] td:not(:first-child) { + padding: 8px 6px !important; + margin: 3px 0 !important; + } + + table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"] td:not(:first-child) a font { + font-size: var(--font-size-p2) !important; + } + + table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"] td:not(:first-child) a img { + width: 12px !important; + height: 12px !important; + } + + body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) > table[cellpadding="4"][cellspacing="0"] > tbody > tr > td { + padding: 8px !important; + } +} +/* ========================================================================== + CONTENIDO PRINCIPAL - REAL-TIME REPORT + Estilos simples para el área de contenido principal + ========================================================================== */ + +/* Contenedor principal del formulario - con scroll horizontal cuando sea necesario */ +body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) > table[cellpadding="4"][cellspacing="0"] { + background: var(--color-bg-white) !important; + overflow-x: auto !important; + overflow-y: visible !important; + width: 100% !important; + max-width: 100% !important; + display: block !important; +} + +body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) > table[cellpadding="4"][cellspacing="0"] > tbody { + display: table !important; + width: 100% !important; + min-width: 100% !important; +} + +body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) > table[cellpadding="4"][cellspacing="0"] > tbody > tr { + display: table-row !important; +} + +body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) > table[cellpadding="4"][cellspacing="0"] > tbody > tr > td { + background: var(--color-bg-white) !important; + padding: 10px !important; + display: table-cell !important; + white-space: normal !important; +} + +/* Título principal */ +body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) font.top_head_key { + color: var(--color-text-dark) !important; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; + font-size: var(--font-size-h2) !important; + font-weight: 600 !important; + margin: 0 !important; + padding: 0 !important; + line-height: 1.2 !important; +} + +/* Enlaces de acción (RELOAD NOW, MODIFY, SUMMARY) */ +body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) a[onclick*="update_variables('form_submit'\")"], +body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) a[href*="admin.php?ADD=10"], +body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) a[href*="AST_timeonVDADallSUMMARY"] { + color: var(--color-primary-medium) !important; + text-decoration: none !important; + font-weight: 500 !important; + padding: 2px 6px !important; + border-radius: 4px !important; + transition: all 0.2s ease !important; + margin: 0 2px !important; +} + +body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) a[onclick*="update_variables('form_submit'\")"]:hover, +body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) a[href*="admin.php?ADD=10"]:hover, +body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) a[href*="AST_timeonVDADallSUMMARY"]:hover { + background: var(--bg-decorative-1) !important; + color: var(--color-primary-dark) !important; +} + +/* Enlaces de toggle (VIEW MORE, VIEW USER GROUP, etc.) - Estilo botón */ +body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) a[onclick*="update_variables(\'"] { + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + background: var(--color-primary-light) !important; + color: var(--color-text-light) !important; + text-decoration: none !important; + font-weight: 500 !important; + padding: 4px 8px !important; + border-radius: 4px !important; + border: 2px solid var(--color-primary-light) !important; + transition: all 0.2s ease !important; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; + font-size: var(--font-size-p1) !important; + margin: 1px 2px !important; + cursor: pointer !important; + line-height: 1 !important; + vertical-align: middle !important; +} + +body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) a[onclick*="update_variables('"]:hover { + background: var(--color-primary-medium) !important; + border-color: var(--color-primary-medium) !important; + color: var(--color-text-light) !important; + transform: translateY(-1px) !important; + box-shadow: 0 2px 6px rgba(0, 139, 139, 0.3) !important; +} + +/* Texto dentro de los botones de toggle */ +body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) a[onclick*="update_variables('"] font.top_settings_val, +body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) a[onclick*="update_variables('"] span { + color: var(--color-text-light) !important; + font-weight: 500 !important; + margin: 0 !important; + padding: 0 !important; + line-height: 1 !important; + display: inline !important; + vertical-align: middle !important; +} + +/* Texto de configuración */ +body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) font.top_settings_val { + color: var(--color-text-dark) !important; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; + font-size: var(--font-size-p1) !important; + line-height: 1.3 !important; + margin: 0 !important; +} + +/* Reducir espacios verticales en el contenido principal */ +body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) > table[cellpadding="4"][cellspacing="0"] br { + line-height: 0.5 !important; + margin: 0 !important; + display: block !important; + content: "" !important; +} + +body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) > table[cellpadding="4"][cellspacing="0"] > tbody > tr > td > br { + margin: 2px 0 !important; + line-height: 0.5 !important; +} + +/* Panel de opciones (campaign_select_list_link) */ +body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) #campaign_select_list_link { + position: relative !important; + left: auto !important; + right: auto !important; + top: auto !important; + bottom: auto !important; + z-index: auto !important; + display: inline-block !important; + margin: 5px 0 !important; +} + +body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) #campaign_select_list_link table[bgcolor="#D9E6FE"] { + background: var(--bg-decorative-1) !important; + border-radius: 4px !important; + padding: 4px 6px !important; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important; +} + +body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) #campaign_select_list_link a { + color: var(--color-primary-medium) !important; + text-decoration: none !important; + font-weight: 500 !important; +} + +/* Panel de configuración - centrado en pantalla */ +body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) #campaign_select_list { + position: fixed !important; + left: 50% !important; + top: 50% !important; + transform: translate(-50%, -50%) !important; + max-width: 90vw !important; + max-height: 90vh !important; + overflow: auto !important; +} + +/* Cuando el panel está visible (z-index > 0), asegurar que esté centrado y visible */ +body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) #campaign_select_list[style*="z-index: 21"], +body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) #campaign_select_list[style*="z-index:21"] { + z-index: 1000 !important; + visibility: visible !important; +} + +/* Cuando el panel está oculto (z-index < 0), respetar el estado hidden */ +body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) #campaign_select_list[style*="z-index: -1"], +body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) #campaign_select_list[style*="z-index:-1"] { + visibility: hidden !important; + z-index: -1 !important; +} + +body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) #campaign_select_list table.realtime_settings_table { + background: var(--color-bg-white) !important; + border-radius: 8px !important; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important; + border: 1px solid var(--color-bg-light) !important; + margin: 0 auto !important; +} + +/* Botón Close Panel */ +body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) #campaign_select_list td[align="CENTER"] a[onclick*="hideDiv('campaign_select_list')"], +body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) #campaign_select_list td[align="CENTER"] a[onclick*="hideDiv"], +body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) #campaign_select_list td[valign="TOP"][align="CENTER"] a { + display: inline-block !important; + background: var(--color-primary-medium) !important; + color: var(--color-text-light) !important; + padding: 6px 12px !important; + border-radius: 4px !important; + text-decoration: none !important; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; + font-size: var(--font-size-p1) !important; + font-weight: 500 !important; + border: none !important; + cursor: pointer !important; + transition: all 0.2s ease !important; + margin-bottom: 6px !important; + pointer-events: auto !important; + position: relative !important; + z-index: 1001 !important; +} + +body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) #campaign_select_list td[align="CENTER"] a[onclick*="hideDiv('campaign_select_list')"]:hover, +body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) #campaign_select_list td[align="CENTER"] a[onclick*="hideDiv"]:hover, +body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) #campaign_select_list td[valign="TOP"][align="CENTER"] a:hover { + background: var(--color-primary-dark) !important; + transform: translateY(-1px) !important; + box-shadow: 0 2px 6px rgba(0, 139, 139, 0.3) !important; +} + +/* Selectores y campos de formulario */ +body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) select, +body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) input[type="text"] { + padding: 4px 8px !important; + border: 1px solid var(--color-bg-light) !important; + border-radius: 4px !important; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; + font-size: var(--font-size-p1) !important; + background: var(--color-bg-white) !important; + transition: border-color 0.2s ease !important; +} + +body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) select:focus, +body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) input[type="text"]:focus { + outline: none !important; + border-color: var(--color-primary-medium) !important; + box-shadow: 0 0 0 2px var(--bg-decorative-1) !important; +} + +/* Botón SUBMIT */ +body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) input[type="button"][value="SUBMIT"] { + background: var(--color-primary-medium) !important; + color: var(--color-text-light) !important; + border: none !important; + padding: 6px 12px !important; + border-radius: 4px !important; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; + font-size: var(--font-size-p1) !important; + font-weight: 500 !important; + cursor: pointer !important; + transition: all 0.2s ease !important; +} + +body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) input[type="button"][value="SUBMIT"]:hover { + background: var(--color-primary-dark) !important; + transform: translateY(-1px) !important; + box-shadow: 0 2px 6px rgba(0, 139, 139, 0.3) !important; +} + +/* Tablas de estadísticas - Estilo mejorado - con scroll horizontal cuando sea necesario */ +body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) table[cellpadding="0"][cellspacing="0"]:not([bgcolor="#015B91"]) { + background: var(--color-bg-white) !important; + border-collapse: collapse !important; + margin: 8px 0 !important; + border-radius: 8px !important; + overflow-x: auto !important; + overflow-y: visible !important; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important; + border: 1px solid var(--color-bg-lighter) !important; + display: block !important; + width: 100% !important; + max-width: 100% !important; +} + +body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) table[cellpadding="0"][cellspacing="0"]:not([bgcolor="#015B91"]) tbody { + display: table !important; + width: 100% !important; + min-width: 100% !important; +} + +body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) table[cellpadding="0"][cellspacing="0"]:not([bgcolor="#015B91"]) tbody tr { + display: table-row !important; +} + +body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) table[cellpadding="0"][cellspacing="0"]:not([bgcolor="#015B91"]) td { + padding: 8px 12px !important; + border-bottom: 1px solid var(--color-bg-lighter) !important; + transition: background-color 0.2s ease !important; +} + +body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) table[cellpadding="0"][cellspacing="0"]:not([bgcolor="#015B91"]) tr:hover td { + background: var(--bg-decorative-1) !important; +} + +body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) table[cellpadding="0"][cellspacing="0"]:not([bgcolor="#015B91"]) tr:last-child td { + border-bottom: none !important; +} + +body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) font.top_settings_key { + color: var(--color-primary-dark) !important; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; + font-size: var(--font-size-p1) !important; + font-weight: 600 !important; +} + +body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) font.top_settings_val { + color: var(--color-text-dark) !important; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; + font-size: var(--font-size-p1) !important; + font-weight: 500 !important; +} + +/* Tabla de llamadas en tiempo real - con scroll horizontal cuando sea necesario */ +body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) table.realtime_calls_table { + background: var(--color-bg-white) !important; + border-radius: 4px !important; + overflow-x: auto !important; + overflow-y: visible !important; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important; + margin: 5px 0 !important; + display: block !important; + width: 100% !important; + max-width: 100% !important; +} + +body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) table.realtime_calls_table tbody { + display: table !important; + width: 100% !important; + min-width: 100% !important; +} + +body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) table.realtime_calls_table tbody tr { + display: table-row !important; +} + +/* Tabla principal de agentes - Estilo mejorado - con scroll horizontal cuando sea necesario */ +body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) table.realtime_table { + background: var(--color-bg-white) !important; + border-radius: 8px !important; + overflow-x: auto !important; + overflow-y: visible !important; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important; + margin: 10px 0 !important; + border: 1px solid var(--color-bg-lighter) !important; + border-collapse: separate !important; + border-spacing: 0 !important; + width: 100% !important; + max-width: 100% !important; + display: block !important; +} + +body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) table.realtime_table tbody { + display: table !important; + width: 100% !important; + min-width: 100% !important; +} + +body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) table.realtime_table tbody tr { + display: table-row !important; +} + +/* Encabezado de la tabla */ +body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) table.realtime_table tr[bgcolor="#C6C6C6"] { + background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary-medium) 100%) !important; +} + +body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) table.realtime_table tr[bgcolor="#C6C6C6"] td { + padding: 10px 12px !important; + font-weight: 600 !important; + border-bottom: 2px solid var(--color-primary-medium) !important; + color: var(--color-text-light) !important; +} + +body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) table.realtime_table tr[bgcolor="#C6C6C6"] font.top_head_key { + color: var(--color-text-light) !important; + font-size: var(--font-size-p1) !important; + font-weight: 600 !important; +} + +/* Filas de datos */ +body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) table.realtime_table tr:not([bgcolor="#C6C6C6"]) { + background: var(--color-bg-white) !important; + transition: background-color 0.2s ease !important; +} + +body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) table.realtime_table tr:not([bgcolor="#C6C6C6"]):hover { + background: var(--bg-decorative-1) !important; +} + +body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) table.realtime_table tr:not([bgcolor="#C6C6C6"]) td { + padding: 8px 12px !important; + border-bottom: 1px solid var(--color-bg-lighter) !important; +} + +body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) table.realtime_table tr:not([bgcolor="#C6C6C6"]):last-child td { + border-bottom: none !important; +} + +body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) table.realtime_table font.top_head_key { + color: var(--color-text-dark) !important; + font-size: var(--font-size-p1) !important; + font-weight: 500 !important; +} + +body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) table.realtime_table font.top_head_val { + color: var(--color-text-dark) !important; + font-size: var(--font-size-p1) !important; + font-weight: 500 !important; +} + +/* Enlaces dentro de la tabla */ +body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) table.realtime_table a { + color: var(--color-primary-medium) !important; + text-decoration: none !important; + transition: color 0.2s ease !important; +} + +body:has(table[cellpadding="0"][cellspacing="0"][bgcolor="#015B91"]) table.realtime_table a:hover { + color: var(--color-primary-dark) !important; + text-decoration: underline !important; +} + + +/* AGENT_AREA */ +/* ========== Estilos visuales modernos (agente VICIDIAL) ========== */ +/* SCOPE: Solo dentro de #vicidial_form. Colores solo desde :root (sin modificar root). */ +#vicidial_form { + --vdc-radius: 8px; + --vdc-radius-sm: 6px; + --vdc-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); + --vdc-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1); + --vdc-transition: 0.2s ease; + --vdc-btn-width: 160px; + --vdc-content-max-width: 1200px; /* Ancho máximo del contenido (Tabs + panel + footer) */ +} + +/* ========== Override de colores inline del HTML (solo variables :root existentes) ========== */ +/* ========== LoadingBox (pantalla de carga del agente) - estilo moderno ========== */ +#vicidial_form #LoadingBox { + display: flex !important; + align-items: center; + justify-content: center; + left: 0 !important; + top: 0 !important; + width: 100vw !important; + height: 100vh !important; + min-height: 100vh; + background: var(--color-bg-white, #fff) !important; + z-index: 2147483647 !important; +} +#vicidial_form #LoadingBox table { + width: auto !important; + max-width: 320px !important; + height: auto !important; + min-height: 0 !important; + margin: 20px; + background: var(--color-bg-white, #fff) !important; + border-radius: 16px; + box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04); + border: none !important; +} +#vicidial_form #LoadingBox td { + padding: 32px 40px !important; + text-align: center !important; + vertical-align: middle !important; +} +#vicidial_form #LoadingBox .loading_text { + font-family: var(--font-family) !important; + font-size: 16px !important; + font-weight: 500 !important; + color: var(--color-primary-dark, #2E7D7D) !important; + letter-spacing: 0.02em; + margin-bottom: 8px; + display: block; +} +#vicidial_form #LoadingBox img { + display: block !important; + margin: 12px auto 0 !important; + max-width: 100%; + height: auto; +} +#vicidial_form #Header table { background-color: var(--color-primary-medium) !important; } +/* Tabs y contenido: responsive, alineado a la izquierda */ +#vicidial_form #Tabs { + max-width: var(--vdc-content-max-width) !important; + width: 1180px!important; + left: 0 !important; + margin-top: 30px !important; + box-sizing: border-box; +} +#vicidial_form #Tabs table { + width: 100% !important; + max-width: 100% !important; + box-sizing: border-box; +} +#vicidial_form #Tabs table, +#vicidial_form #Tabs table td[bgcolor] { background-color: var(--color-bg-white) !important; } +#vicidial_form #WelcomeBoxA table { background-color: var(--color-bg-white) !important; } +#vicidial_form #MainTable { background-color: var(--color-bg-lighter) !important; } +#vicidial_form #MainStatuSSpan { background: var(--color-bg-lighter) !important; } +#vicidial_form #post_phone_time_diff_span font, +#vicidial_form #post_phone_time_diff_span .loading_text, +#vicidial_form #blind_monitor_notice_span font { color: var(--color-text-dark) !important; } +#vicidial_form #DiaLControl { background-color: transparent !important; } +#vicidial_form #DiaLControl:hover { background-color: transparent !important; } +#vicidial_form #RecorDControl { background-color: transparent !important; } +#vicidial_form #RecorDControl:hover { background-color: transparent !important; } +#vicidial_form #RecorDMute, +#vicidial_form #StRecorDControl, +#vicidial_form #ParkControl, +#vicidial_form #XferControl, +#vicidial_form #SendDTMF, +#vicidial_form #ivrParkControl { background-color: transparent !important; } +#vicidial_form #WebFormSpan, +#vicidial_form #WebFormSpanTwo { background-color: transparent !important; } +#vicidial_form #HangupControl { background-color: transparent !important; } +#vicidial_form #MaiNfooter { background-color: var(--color-bg-white) !important; } +#vicidial_form #callsinqueuedisplay, +#vicidial_form #AgentViewSpan, +#vicidial_form #webphoneSpan { background-color: var(--color-bg-lighter) !important; } +#vicidial_form #ScriptPanel table, +#vicidial_form #Script2Panel table, +#vicidial_form #FormPanel table, +#vicidial_form #EmailPanel table, +#vicidial_form #CustomerChatPanel table, +#vicidial_form #InternalChatPanel table { background-color: var(--color-bg-white) !important; } + +/* Ocultar imagen solo en estos botones (texto con ::before); los logos (Tabs, LoadingBox) se mantienen */ +#vicidial_form #DiaLControl > a > img, +#vicidial_form #RecorDControl > a > img, +#vicidial_form #RecorDControl > img, +#vicidial_form #StRecorDControl > img, +#vicidial_form #WebFormSpan > img, +#vicidial_form #WebFormSpan > a > img, +#vicidial_form #WebFormSpanTwo > img, +#vicidial_form #WebFormSpanTwo > a > img, +#vicidial_form #ParkControl > img, +#vicidial_form #XferControl > img, +#vicidial_form #HangupControl > img, +#vicidial_form #SendDTMF > a > img { + display: none !important; + width: 0 !important; + height: 0 !important; + overflow: hidden !important; + position: absolute !important; + left: -9999px !important; +} +/* Texto en lugar de imagen solo en estos botones (logos NO) */ +#vicidial_form #DiaLControl > 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 #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 #RecorDControl > a, +#vicidial_form #SendDTMF > a { display: inline-block !important; } +#vicidial_form #StRecorDControl, +#vicidial_form #WebFormSpan, +#vicidial_form #WebFormSpanTwo, +#vicidial_form #ParkControl, +#vicidial_form #XferControl, +#vicidial_form #HangupControl { display: inline-block !important; } +/* Estilo del texto (::before) solo en estos botones */ +#vicidial_form #DiaLControl > a::before, +#vicidial_form #RecorDControl > a::before, +#vicidial_form #SendDTMF a::before, +#vicidial_form #StRecorDControl::before, +#vicidial_form #WebFormSpan::before, +#vicidial_form #WebFormSpanTwo::before, +#vicidial_form #ParkControl::before, +#vicidial_form #XferControl::before, +#vicidial_form #HangupControl::before { + display: inline-block; + font-family: var(--font-family); + font-size: var(--font-size-p2); + font-weight: 500; + padding: 6px 10px; + border-radius: var(--vdc-radius-sm); + background: transparent; + color: var(--color-primary-dark); + white-space: nowrap; +} + +/* Ocultar texto del span cuando hay (evitar duplicado con el texto del enlace) */ +#vicidial_form #RecorDControl:has(> a)::before { + content: none !important; + display: none !important; +} +/* Cuando JS deja solo (sin ): "Start" desactivado = verde, "Stop" desactivado = rojo. */ +#vicidial_form #RecorDControl:not(:has(> a))::before { + display: inline-block !important; + font-family: var(--font-family); + font-size: var(--font-size-p2); + font-weight: 500; + padding: 8px 12px; + border-radius: var(--vdc-radius-sm); + background: transparent; + color: #fff !important; + white-space: nowrap; + line-height: 1.3; + position: relative; + z-index: 1; +} +#vicidial_form #RecorDControl:not(:has(> a)):has(img[alt="Start Recording"])::before { + content: "Start Recording"; +} +#vicidial_form #RecorDControl:not(:has(> a)):has(img[alt="Stop Recording"])::before { + content: "Stop Recording"; +} +#vicidial_form #RecorDControl:not(:has(> a)) { + display: inline-block !important; + width: 100%; + min-height: 36px; + box-sizing: border-box; + padding: 6px 12px; + border-radius: var(--vdc-radius-sm); + color: #fff !important; + text-align: center; + line-height: 1.3; +} +/* Sin enlace: estado Start (verde) */ +#vicidial_form #RecorDControl:not(:has(> a)):has(img[alt="Start Recording"]) { + border: 1px solid #2e7d32; + background: #43a047 !important; + background-color: #43a047 !important; +} +#vicidial_form #RecorDControl:not(:has(> a)):has(img[alt="Start Recording"]):hover { + background: #1b5e20 !important; + background-color: #1b5e20 !important; + border-color: #1b5e20; +} +/* Sin enlace: estado Stop (rojo) */ +#vicidial_form #RecorDControl:not(:has(> a)):has(img[alt="Stop Recording"]) { + border: 1px solid #b71c1c; + background: #d32f2f !important; + background-color: #d32f2f !important; +} +#vicidial_form #RecorDControl:not(:has(> a)):has(img[alt="Stop Recording"]):hover { + background: #b71c1c !important; + background-color: #b71c1c !important; + border-color: #b71c1c; +} +#vicidial_form #RecorDControl:not(:has(> a)):hover::before { + color: #fff !important; +} + +/* Header del agente (solo dentro del formulario vicidial) */ + +#vicidial_form #Header table { + width: 1190px !important; +} + +#vicidial_form #Header table { + background: var(--color-primary-medium) !important; + border-radius: 0 0 var(--vdc-radius) var(--vdc-radius); + box-shadow: var(--vdc-shadow); + padding: 10px 16px !important; +} +#vicidial_form #Header .queue_text, +#vicidial_form #Header .body_text { + color: var(--color-text-light, #fff) !important; + font-family: var(--font-family) !important; + font-size: var(--font-size-md) !important; +} +#vicidial_form #Header a { + color: var(--color-text-light, #fff) !important; + padding: 6px 12px; + border-radius: var(--vdc-radius-sm); + transition: background var(--vdc-transition); +} +#vicidial_form #Header a:hover { + background: rgba(255, 255, 255, 0.2); +} + +/* Tabs del agente: permitir dos líneas (fecha + Calls in Queue) sin recorte */ +#vicidial_form #Tabs table { + background: var(--color-bg-white, #fff) !important; + border-radius: var(--vdc-radius); + box-shadow: var(--vdc-shadow); + margin: 0 8px; + padding: 4px 12px 6px !important; + height: auto !important; + min-height: 44px !important; + overflow: visible !important; +} +#vicidial_form #Tabs table tbody tr td:nth-child(3) { + width: auto !important; + min-width: 0 !important; +} +#vicidial_form #Tabs table tbody tr td { + height: auto !important; + padding: 2px 8px !important; + vertical-align: middle !important; + overflow: visible !important; +} +#vicidial_form #Tabs .body_tiny, +#vicidial_form #Tabs .body_text { + font-family: var(--font-family) !important; + color: var(--color-text-dark, #2D2D2D) !important; + font-size: var(--font-size-p2) !important; + line-height: 1.35 !important; +} +#vicidial_form #Tabs a img { + border-radius: var(--vdc-radius-sm); +} +/* Logo del agente (pestaña MAIN): evitar que se estire, mantener proporción */ +#vicidial_form #Tabs table tbody tr td:first-child img { + object-fit: contain !important; + object-position: center !important; + width: 115px !important; + height: 30px !important; +} + +/* Panel principal: responsive, alineado a la izquierda */ +#vicidial_form #MainPanel { + top: 105px !important; + padding: 0 8px 8px !important; + max-width: var(--vdc-content-max-width) !important; + width: 100% !important; + left: 0 !important; + box-sizing: border-box; +} +#vicidial_form #MainTable { + background: var(--color-bg-lighter, #E0F7FA) !important; + border-radius: var(--vdc-radius); + box-shadow: var(--vdc-shadow); + overflow: hidden; + border: 1px solid rgba(0, 139, 139, 0.15) !important; + width: 100% !important; + max-width: 100% !important; + min-width: 0 !important; + box-sizing: border-box; +} +#vicidial_form #MainTable tbody { + min-width: 0 !important; + width: 100% !important; +} +#vicidial_form #MainTable .body_text { + font-family: var(--font-family) !important; + color: var(--color-text-dark, #2D2D2D) !important; + font-size: var(--font-size-md) !important; +} + +/* Columna izquierda de controles (Dial, Record, Hangup, etc.) */ +#vicidial_form #MainTable > tbody > tr > td:first-child { + background: var(--color-bg-white, #fff) !important; + padding: 16px !important; + border-radius: var(--vdc-radius) 0 0 var(--vdc-radius); + box-shadow: 2px 0 8px rgba(0, 0, 0, 0.04); +} +#vicidial_form #DiaLControl > a, +#vicidial_form #RecorDControl > a, +#vicidial_form #SendDTMF > a { + display: block; + width: 100%; + box-sizing: border-box; + padding: 1px 12px; + border-radius: var(--vdc-radius-sm); + border: 1px solid var(--color-primary-light); + background: var(--color-bg-lighter); + color: var(--color-primary-dark); + transition: transform var(--vdc-transition), box-shadow var(--vdc-transition), background var(--vdc-transition), color var(--vdc-transition); + text-align: center; +} +#vicidial_form #HangupControl, +#vicidial_form #ParkControl, +#vicidial_form #XferControl, +#vicidial_form #WebFormSpan, +#vicidial_form #WebFormSpanTwo { + display: inline-block; + min-width: var(--vdc-btn-width); + width: var(--vdc-btn-width); + box-sizing: border-box; + padding: 1px 5px; + border-radius: var(--vdc-radius-sm); + border: 1px solid var(--color-primary-light); + background: var(--color-bg-lighter); + color: var(--color-primary-dark); + transition: transform var(--vdc-transition), box-shadow var(--vdc-transition), background var(--vdc-transition), color var(--vdc-transition); + text-align: center; +} +#vicidial_form #WebFormSpan, +#vicidial_form #WebFormSpanTwo { + margin-bottom: 3px; +} +#vicidial_form #SendDTMF { + margin-bottom: 12px; +} +#vicidial_form #DiaLControl > a:hover { + background: var(--color-primary-light); + color: var(--color-text-light); + transform: translateY(-1px); + box-shadow: var(--vdc-shadow); +} +#vicidial_form #RecorDControl > a:hover { + background: #1b5e20; + border-color: #1b5e20; + color: #fff; + transform: translateY(-1px); + box-shadow: var(--vdc-shadow); +} +#vicidial_form #RecorDControl > a:hover::before { + color: #fff; +} +/* Start Recording: botón verde (override del bloque compartido) */ +#vicidial_form #RecorDControl > a:not(:has(img[alt="Stop Recording"])) { + border-color: #2e7d32; + background: #43a047 !important; + background-color: #43a047 !important; + color: #fff; +} +#vicidial_form #RecorDControl > a:not(:has(img[alt="Stop Recording"]))::before { + color: #fff; +} +/* Stop Recording: botón rojo */ +#vicidial_form #RecorDControl > a:has(img[alt="Stop Recording"]) { + border-color: #b71c1c; + background: #d32f2f !important; + background-color: #d32f2f !important; + color: #fff; +} +#vicidial_form #RecorDControl > a:has(img[alt="Stop Recording"])::before { + color: #fff; +} +#vicidial_form #RecorDControl > a:has(img[alt="Stop Recording"]):hover { + background: #b71c1c !important; + background-color: #b71c1c !important; + border-color: #b71c1c; + color: #fff; +} +#vicidial_form #RecorDControl > a:has(img[alt="Stop Recording"]):hover::before { + color: #fff; +} +/* Send DTMF: estilo rosado */ +#vicidial_form #SendDTMF > a { + border-color: #e91e63; + background: #fce4ec; + color: #ad1457; +} +#vicidial_form #SendDTMF > a::before { + color: #ad1457; +} +#vicidial_form #SendDTMF > a:hover { + background: #e91e63; + color: var(--color-text-light); + transform: translateY(-1px); + box-shadow: var(--vdc-shadow); +} +#vicidial_form #SendDTMF > a:hover::before { + color: var(--color-text-light); +} +/* Hover en botones que son span (sin dentro) */ +#vicidial_form #RecorDMute:hover, +#vicidial_form #StRecorDControl:hover, +#vicidial_form #ParkControl:hover, +#vicidial_form #XferControl:hover, +#vicidial_form #WebFormSpan:hover, +#vicidial_form #WebFormSpanTwo:hover, +#vicidial_form #HangupControl:hover, +#vicidial_form #ivrParkControl:hover { + background-color: var(--color-primary-light) !important; + color: var(--color-text-light) !important; + border-radius: var(--vdc-radius-sm); + transition: background-color var(--vdc-transition), color var(--vdc-transition); +} +#vicidial_form #RecorDMute:hover::before, +#vicidial_form #StRecorDControl:hover::before, +#vicidial_form #ParkControl:hover::before, +#vicidial_form #XferControl:hover::before, +#vicidial_form #WebFormSpan:hover::before, +#vicidial_form #WebFormSpanTwo:hover::before, +#vicidial_form #HangupControl:hover::before { + color: var(--color-text-light) !important; +} +#vicidial_form #DiaLControl, +#vicidial_form #RecorDControl, +#vicidial_form #RecorDMute, +#vicidial_form #StRecorDControl, +#vicidial_form #WebFormSpan, +#vicidial_form #WebFormSpanTwo, +#vicidial_form #ParkControl, +#vicidial_form #XferControl, +#vicidial_form #HangupControl, +#vicidial_form #SendDTMF, +#vicidial_form #ivrParkControl { + display: inline-block; + min-width: var(--vdc-btn-width); + width: var(--vdc-btn-width); + box-sizing: border-box; + text-align: center; +} +#vicidial_form #DiaLControl { background: transparent !important; border-radius: var(--vdc-radius-sm); padding: 4px !important; } +#vicidial_form #RecorDControl { background: transparent !important; border-radius: var(--vdc-radius-sm); padding: 4px !important; } +/* Separar Park Call y Transfer - Conference */ + +#vicidial_form #XferControl { margin-top: 4px !important; } +/* Cuando Recording no tiene (solo img): color por estado (Start=verde, Stop=rojo) en reglas anteriores. */ +#vicidial_form #HangupControl { border-radius: var(--vdc-radius-sm); } +#vicidial_form #SendDTMF input.cust_form { + width: var(--vdc-btn-width) !important; + min-width: var(--vdc-btn-width) !important; + max-width: var(--vdc-btn-width) !important; + box-sizing: border-box; + min-height: 36px; + border-radius: var(--vdc-radius-sm); + border: 1px solid rgba(0, 0, 0, 0.12); + padding: 6px 10px; + font-family: var(--font-family); + font-size: var(--font-size-p2) !important; +} + +/* Área de información del cliente (solo dentro del formulario) */ +#vicidial_form #MainPanelCustInfo { + padding: 16px !important; +} +#vicidial_form #MainPanelCustInfo table { + background: var(--color-bg-white, #fff) !important; + border-radius: var(--vdc-radius); + padding: 16px !important; + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); +} +/* Tabla interna de Customer Information (Title, First, Address, etc.): un poco más ancha */ +#vicidial_form #MainPanelCustInfo table table, +#vicidial_form #MainPanelCustInfo table table tbody { + width: 680px !important; + min-width: 680px !important; +} +#vicidial_form #MainPanelCustInfo .body_text { + font-size: var(--font-size-p2) !important; +} +#vicidial_form #MainPanelCustInfo input.cust_form, +#vicidial_form #MainPanelCustInfo .cust_form_text { + border: 1px solid rgba(0, 0, 0, 0.12) !important; + border-radius: var(--vdc-radius-sm) !important; + padding: 6px 10px !important; + font-family: var(--font-family) !important; + transition: border-color var(--vdc-transition), box-shadow var(--vdc-transition); + +} +#vicidial_form #MainPanelCustInfo #comments { + border: 1px solid rgba(0, 0, 0, 0.12) !important; + border-radius: var(--vdc-radius-sm) !important; + padding: 6px 10px !important; + font-family: var(--font-family) !important; + transition: border-color var(--vdc-transition), box-shadow var(--vdc-transition); + width: 100% !important; + height: 280px !important; +} +#vicidial_form #MainPanelCustInfo input.cust_form:focus, +#vicidial_form #MainPanelCustInfo .cust_form_text:focus { + outline: none !important; + border-color: var(--color-primary-light, #20B2AA) !important; + box-shadow: 0 0 0 3px rgba(32, 178, 170, 0.15); + +} +#vicidial_form #MainPanelCustInfo select.cust_form { + border-radius: var(--vdc-radius-sm); + border: 1px solid rgba(0, 0, 0, 0.12); + padding: 6px 8px; + font-family: var(--font-family); +} + +/* Commit, seconds:, Manual/Fast dial y enlaces relacionados: alineados al área de contenido */ +#vicidial_form #MainCommit { + left: calc(var(--vdc-content-max-width) - 100px) !important; + top: 100px !important; + margin-right: 150px !important; +} +#vicidial_form #SecondSspan { + left: calc(var(--vdc-content-max-width) - 100px) !important; + top: 80px !important; + font-family: var(--font-family) !important; + +} +#vicidial_form #DiaLlOgButtonspan { + left: 20px !important; + top: 790px !important; +} +#vicidial_form #ScriptRefresH, +#vicidial_form #Script2RefresH, +#vicidial_form #EmailRefresH { + left: calc(var(--vdc-content-max-width) - 70px) !important; + top: 69px !important; +} +#vicidial_form #FormRefresH { + left: calc(var(--vdc-content-max-width) - 85px) !important; + top: 69px !important; +} +#vicidial_form #AgentViewLinkSpan { + left: calc(var(--vdc-content-max-width) - 110px) !important; + top: 793px !important; + +} +#vicidial_form #AgentViewLinkSpan table { + margin-left: -50px !important; + margin-top: -10px !important; + width: 150px; /* o el ancho que quieras */ + border-collapse: collapse; + border-spacing: 0; + /* border, background, border-radius, etc. */ +} +#vicidial_form #AgentViewLinkSpan table td { + + padding: 4px 8px; + text-align: right; + vertical-align: middle; + margin-right: 300px !important; +} + +/* Footer del agente: fixed al fondo de la ventana para que se vea igual en todas las resoluciones */ +#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; +} +#vicidial_form #MaiNfooter { + background: var(--color-bg-white) !important; + padding: 12px 16px !important; + margin-top: 0 !important; + margin-bottom: 0 !important; + width: 100% !important; + max-width: 100% !important; + box-sizing: border-box; +} +#vicidial_form #MaiNfooter font, +#vicidial_form #MaiNfooter .body_small { + font-family: var(--font-family) !important; + color: var(--color-text-dark, #2D2D2D) !important; + font-size: var(--font-size-p2) !important; +} +#vicidial_form #MaiNfooter a { + color: var(--color-primary-medium, #008B8B) !important; + padding: 2px 6px; + border-radius: 4px; + transition: background var(--vdc-transition); +} +/* Ocultar fila de debug (busycallsdebug) debajo de STATUS en el panel principal */ +#vicidial_form #MainTable tr:has(#busycallsdebug), +#busycallsdebug { + display: none !important; +} + +/* Dialable Leads (contador en pantalla del agente) */ +/* Dialable Leads: fixed para que se vea igual en todas las resoluciones (sin depender de left/top en px) */ +#vicidial_form #dialableleadsspan { + position: fixed !important; + left: 16px !important; + bottom: 16px !important; + top: auto !important; + font-family: var(--font-family) !important; + font-size: var(--font-size-p2) !important; + font-weight: 500; + color: var(--color-text-dark, #2D2D2D) !important; + background: var(--color-bg-lighter, #E0F7FA) !important; + border: 1px solid var(--color-primary-light, #20B2AA); + border-radius: var(--vdc-radius-sm, 6px); + padding: 6px 12px !important; + line-height: 1.3; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); + display: inline-block; + z-index: 99; +} + +/* Enlaces de acción del agente (MANUAL DIAL, FAST DIAL, commit, refresh, etc.) */ +#vicidial_form #DiaLlOgButtonspan .body_text a, +#vicidial_form #AgentTimeSpan a, +#vicidial_form #CallLogLinkSpan a, +#vicidial_form #MainCommit a, +#vicidial_form #ScriptRefresH a, +#vicidial_form #Script2RefresH a, +#vicidial_form #FormRefresH a, +#vicidial_form #EmailRefresH a, +#vicidial_form #AgentViewLink a { + display: inline-block; + padding: 8px 14px; + margin: 15px 4px 2px 0; + background: var(--color-primary-medium, #008B8B) !important; + color: var(--color-text-light, #fff) !important; + border-radius: var(--vdc-radius-sm); + font-family: var(--font-family) !important; + font-size: var(--font-size-p2) !important; + font-weight: 500; + transition: background var(--vdc-transition), transform var(--vdc-transition); +} +#vicidial_form #DiaLlOgButtonspan .body_text a:hover, +#vicidial_form #AgentTimeSpan a:hover, +#vicidial_form #MainCommit a:hover, +#vicidial_form #ScriptRefresH a:hover, +#vicidial_form #FormRefresH a:hover, +#vicidial_form #EmailRefresH a:hover, +#vicidial_form #AgentViewLink a:hover { + background: var(--color-primary-dark, #2E7D7D) !important; + transform: translateY(-1px); +} + +/* Paneles secundarios del agente (Script, Form, Email, Chat) */ +#vicidial_form #ScriptPanel table, +#vicidial_form #Script2Panel table, +#vicidial_form #FormPanel table, +#vicidial_form #EmailPanel table, +#vicidial_form #CustomerChatPanel table, +#vicidial_form #InternalChatPanel table { + background: var(--color-bg-white, #fff) !important; + border-radius: var(--vdc-radius); + box-shadow: var(--vdc-shadow); + border: 1px solid rgba(0, 0, 0, 0.06) !important; +} + +/* Utilidades: solo cuando body tiene clase de JS Y dentro del formulario agente */ +body.vdc-modern #vicidial_form { + font-family: var(--font-family) !important; +} +body.vdc-compact #vicidial_form #MainTable > tbody > tr > td:first-child { + padding: 10px !important; +} +body.vdc-compact #vicidial_form #MainPanelCustInfo { + padding: 0px !important; +} + +#vicidial_form #MainPanelCustInfo table { + border-collapse: collapse; + border-spacing: 0; + margin-top: -15px !important; + height: 100% !important; + display: flex !important; +} + + +/* Tema oscuro: solo dentro del formulario agente cuando body tiene data-vdc-theme="dark" */ +body[data-vdc-theme="dark"] #vicidial_form #Header table { + background: linear-gradient(135deg, #1a4d4d 0%, #0d3d3d 100%) !important; +} +body[data-vdc-theme="dark"] #vicidial_form #Tabs table { + background: #2d2d2d !important; +} +body[data-vdc-theme="dark"] #vicidial_form #Tabs .body_tiny, +body[data-vdc-theme="dark"] #vicidial_form #Tabs .body_text { + color: #e0e0e0 !important; +} +body[data-vdc-theme="dark"] #vicidial_form #MainTable { + background: #252525 !important; + border-color: rgba(255,255,255,0.08) !important; +} +body[data-vdc-theme="dark"] #vicidial_form #MainTable .body_text { + color: #e0e0e0 !important; +} +body[data-vdc-theme="dark"] #vicidial_form #MainTable > tbody > tr > td:first-child { + background: #1e1e1e !important; +} +body[data-vdc-theme="dark"] #vicidial_form #MainPanelCustInfo table { + background: #1e1e1e !important; +} +body[data-vdc-theme="dark"] #vicidial_form #MainPanelCustInfo input.cust_form, +body[data-vdc-theme="dark"] #vicidial_form #MainPanelCustInfo .cust_form_text { + background: #2d2d2d !important; + border-color: rgba(255,255,255,0.12) !important; + color: #e0e0e0 !important; +} +body[data-vdc-theme="dark"] #vicidial_form #MaiNfooter { + background: #2d2d2d !important; + border-color: rgba(255,255,255,0.06) !important; +} +body[data-vdc-theme="dark"] #vicidial_form #MaiNfooter font, +body[data-vdc-theme="dark"] #vicidial_form #MaiNfooter .body_small { + color: #b0b0b0 !important; +} + +/* ========== Estilos de la caja de alerta (Agent Alert) ========== */ +/* Solo el contenedor #AlertBox: tabla exterior */ +#alert_form #AlertBox > table { + border: none !important; + border-radius: var(--vdc-radius, 8px); + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); + overflow: hidden; + background: var(--color-bg-white) !important; + border-collapse: collapse; +} +#alert_form #AlertBox > table > tbody > tr:first-child > td { + background: var(--color-primary-medium) !important; + color: var(--color-text-light) !important; + font-family: var(--font-family) !important; + font-size: var(--font-size-p1) !important; + font-weight: 600; + padding: 12px 16px !important; + border: none !important; +} +#alert_form #AlertBox > table > tbody > tr:last-child > td { + background: var(--color-bg-lighter) !important; + padding: 0 !important; + border: none !important; +} +/* Tabla interior (icono + texto + botón) */ +#alert_form #AlertBox > table > tbody > tr:last-child > td > table { + background: var(--color-bg-white) !important; + border-radius: 0 0 var(--vdc-radius, 8px) var(--vdc-radius, 8px); + margin: 0; + width: 100% !important; + max-width: 400px; +} +/* Fila del icono + texto: apilar en columna (icono arriba, texto abajo), poco espacio entre ellos */ +#alert_form #AlertBox > table > tbody > tr:last-child > td > table > tbody > tr:first-child { + display: flex !important; + flex-direction: column !important; + align-items: center !important; + gap: 0 !important; +} +#alert_form #AlertBox > table > tbody > tr:last-child > td > table > tbody > tr:first-child > td { + display: block !important; + width: 100% !important; + box-sizing: border-box; + text-align: center !important; +} +#alert_form #AlertBox > table > tbody > tr:last-child > td > table > tbody > tr:first-child > td:first-child { + padding: 6px 16px 0 16px !important; +} +#alert_form #AlertBox > table > tbody > tr:last-child > td > table > tbody > tr:first-child > td:first-child > img { + display: block !important; + margin: 0 auto !important; +} +#alert_form #AlertBox > table > tbody > tr:last-child > td > table > tbody > tr:first-child > td:last-child { + padding: 4px 16px 8px 16px !important; +} +/* Quitar
del HTML: no añadir espacio extra en la celda del texto */ +#alert_form #AlertBox > table > tbody > tr:last-child > td > table > tbody > tr:first-child > td:last-child br { + display: none !important; +} +/* Celdas de la tabla interior de la alerta */ +#alert_form #AlertBox > table > tbody > tr:last-child > td > table > tbody > tr > td { + background: transparent !important; + border: none !important; + padding: 16px !important; + font-family: var(--font-family) !important; + font-size: var(--font-size-p2) !important; + color: var(--color-text-dark) !important; +} +/* La fila icono+texto ya tiene padding en las reglas de td:first-child y td:last-child */ +#alert_form #AlertBox #AlertBoxContent { + display: block; + margin: 0 0 4px; + line-height: 1.5; + text-align: center !important; +} +#alert_form #AlertBox #alert_button { + font-family: var(--font-family) !important; + font-size: var(--font-size-p2) !important; + padding: 8px 20px !important; + background: var(--color-primary-medium) !important; + color: var(--color-text-light) !important; + border: none !important; + border-radius: var(--vdc-radius-sm, 6px); + cursor: pointer; + font-weight: 500; + transition: background 0.2s ease, transform 0.2s ease; +} +#alert_form #AlertBox #alert_button:hover { + background: var(--color-primary-dark) !important; + transform: translateY(-1px); +} + +/* ========== Overlay "Your session has been disabled" (AgenTDisablEBoX) ========== */ +#AgenTDisablEBoX { + left: 0 !important; + top: 0 !important; + width: 100vw !important; + height: 100vh !important; + min-height: 100vh; + display: flex !important; + align-items: center !important; + justify-content: center !important; + background: rgba(0, 0, 0, 0.4) !important; + backdrop-filter: blur(4px); + overflow: hidden; +} +#AgenTDisablEBoX > table { + width: auto !important; + max-height: 210px !important; + max-width: 420px !important; + margin: 0 auto !important; + border: none !important; + border-radius: var(--vdc-radius, 8px); + box-shadow: 0 8px 32px rgba(255, 255, 255, 0.812); + background: white !important; + overflow: hidden; +} + +#AgenTDisablEBoX > table > tbody > tr > td { + padding: 24px 32px !important; + text-align: center !important; + border: none !important; + background: transparent !important; +} +#AgenTDisablEBoX .sd_text, +#AgenTDisablEBoX font.sd_text { + font-family: var(--font-family) !important; + font-size: var(--font-size-p1, 14px) !important; + line-height: 1.5 !important; + color: var(--color-text-dark, #2D2D2D) !important; +} +#AgenTDisablEBoX .sd_text a, +#AgenTDisablEBoX font.sd_text a { + display: inline-block !important; + margin-top: 12px !important; + padding: 10px 20px !important; + font-family: var(--font-family) !important; + font-size: var(--font-size-p2, 12px) !important; + font-weight: 600 !important; + color: var(--color-text-light, #fff) !important; + background: var(--color-primary-medium, #008B8B) !important; + border-radius: var(--vdc-radius-sm, 6px); + text-decoration: none !important; + transition: background 0.2s ease, transform 0.2s ease; +} +#AgenTDisablEBoX .sd_text a:hover, +#AgenTDisablEBoX font.sd_text a:hover { + background: var(--color-primary-dark, #2E7D7D) !important; + transform: translateY(-1px); +} + +/* ========== Overlay "Logout process complete" (LogouTBox) ========== */ +#LogouTBox { + left: 0 !important; + top: 0 !important; + width: 100vw !important; + height: 100vh !important; + min-height: 100vh; + display: flex !important; + align-items: center !important; + justify-content: center !important; + background: rgba(0, 0, 0, 0.4) !important; + backdrop-filter: blur(4px); +} +#LogouTBox > table { + width: auto !important; + max-width: 480px !important; + height: auto !important; + min-height: 0 !important; + margin: 0 auto !important; + border: none !important; + border-radius: var(--vdc-radius, 8px); + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); + background: var(--color-bg-white, #fff) !important; + overflow: hidden; +} +#LogouTBox > table > tbody > tr > td { + padding: 28px 32px !important; + text-align: center !important; + border: none !important; + background: transparent !important; +} +#LogouTBox #LogouTProcess, +#LogouTBox #LogouTProcess .loading_text, +#LogouTBox #LogouTProcess font.loading_text { + font-family: var(--font-family) !important; + font-size: var(--font-size-p1, 14px) !important; + line-height: 1.5 !important; + color: var(--color-text-dark, #2D2D2D) !important; +} +#LogouTBox #LogouTProcess img { + display: block !important; + margin: 16px auto 8px !important; + max-width: 100%; + height: auto !important; +} +#LogouTBox #LogouTBoxLink .loading_text, +#LogouTBox #LogouTBoxLink font.loading_text { + font-family: var(--font-family) !important; + font-size: var(--font-size-p2, 12px) !important; +} +#LogouTBox #LogouTBoxLink a { + display: inline-block !important; + margin-top: 16px !important; + padding: 10px 20px !important; + font-family: var(--font-family) !important; + font-size: var(--font-size-p2, 12px) !important; + font-weight: 600 !important; + color: var(--color-text-light, #fff) !important; + background: var(--color-primary-medium, #008B8B) !important; + border-radius: var(--vdc-radius-sm, 6px); + text-decoration: none !important; + transition: background 0.2s ease, transform 0.2s ease; +} +#LogouTBox #LogouTBoxLink a:hover { + background: var(--color-primary-dark, #2E7D7D) !important; + transform: translateY(-1px); +} + +/* ========== Notificación "No one is in your session" (NoneInSessionBox) ========== */ +/* Desactivar scroll solo cuando esta alerta está visible (visibility: visible en el span) */ +body:has(#NoneInSessionBox[style*="visibility: visible"]) { + overflow: hidden !important; +} +#NoneInSessionBox { + display: flex !important; + align-items: center; + justify-content: center; + 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: 9999 !important; +} +#NoneInSessionBox table { + width: auto !important; + max-width: 420px !important; + height: auto !important; + min-height: 0 !important; + margin: 20px; + background: var(--color-bg-white, #fff) !important; + border-radius: var(--vdc-radius, 12px); + box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06); + border: none !important; +} +#NoneInSessionBox td { + padding: 28px 32px !important; + text-align: center !important; + vertical-align: middle !important; +} +#NoneInSessionBox .sd_text { + font-family: var(--font-family) !important; + font-size: 15px !important; + line-height: 1.5 !important; + color: var(--color-text-dark, #2D2D2D) !important; +} +#NoneInSessionBox .sd_text br { + margin: 2px 0; + line-height: 0.4; +} +#NoneInSessionBox a { + display: inline-block; + margin: 4px 8px 2px; + padding: 10px 20px; + font-family: var(--font-family) !important; + font-size: 14px !important; + font-weight: 500; + color: var(--color-text-light, #fff) !important; + background: var(--color-primary-medium, #008B8B) !important; + border-radius: var(--vdc-radius-sm, 6px); + text-decoration: none !important; + transition: background 0.2s ease, transform 0.2s ease; +} +#NoneInSessionBox a:hover { + background: var(--color-primary-dark, #2E7D7D) !important; + transform: translateY(-1px); +} +#NoneInSessionBox .sd_text > a { + margin-bottom: 0; +} +#NoneInSessionBox #NoneInSessionID { + font-weight: 600; + color: var(--color-primary-dark, #2E7D7D); +} + +/* ========== Notificación "Another live agent session was open" (DeactivateDOlDSessioNSpan) ========== */ +body:has(#DeactivateDOlDSessioNSpan[style*="visibility: visible"]) { + overflow: hidden !important; +} +#DeactivateDOlDSessioNSpan { + display: flex !important; + align-items: center; + justify-content: center; + left: 0 !important; + top: 0 !important; + width: 100vw !important; + height: 100vh !important; + min-height: 100vh; + background: var(--color-bg-white, #fff) !important; + z-index: 9999 !important; +} +#DeactivateDOlDSessioNSpan table { + width: auto !important; + max-width: 440px !important; + height: auto !important; + min-height: 0 !important; + margin: 20px; + background: var(--color-bg-white, #fff) !important; + border-radius: var(--vdc-radius, 12px); + box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.06); + border: none !important; +} +#DeactivateDOlDSessioNSpan td { + padding: 28px 32px !important; + text-align: center !important; + vertical-align: middle !important; +} +#DeactivateDOlDSessioNSpan .sh_text { + position: relative; + font-family: var(--font-family) !important; + font-size: 15px !important; + line-height: 1.5 !important; + color: var(--color-text-dark, #2D2D2D) !important; +} +/* Ocultar solo el texto " -->" (cuadro estrecho a la derecha para no tapar el botón OK) */ +#DeactivateDOlDSessioNSpan .sh_text::after { + content: ""; + position: absolute; + right: 0; + bottom: 0.35em; + width: 1.75em; + height: 1.3em; + background: var(--color-bg-white, #fff); +} +#DeactivateDOlDSessioNSpan .sh_text br { + margin: 6px 0; +} +#DeactivateDOlDSessioNSpan .sh_text a { + display: inline-block; + margin-top: 12px; + padding: 10px 24px; + font-family: var(--font-family) !important; + font-size: 14px !important; + font-weight: 500; + color: var(--color-text-light, #fff) !important; + background: var(--color-primary-medium, #008B8B) !important; + border-radius: var(--vdc-radius-sm, 6px); + text-decoration: none !important; + transition: background 0.2s ease, transform 0.2s ease; +} +#DeactivateDOlDSessioNSpan .sh_text a:hover { + background: var(--color-primary-dark, #2E7D7D) !important; + transform: translateY(-1px); +} + diff --git a/Custom/installer/install_custom_css.sh b/Custom/installer/install_custom_css.sh new file mode 100644 index 0000000..fa01e5e --- /dev/null +++ b/Custom/installer/install_custom_css.sh @@ -0,0 +1,455 @@ +#!/bin/bash +# ============================================================================= +# Instalador AGC: custom.css + logos (LogoHome, LogoAgent) +# Ubicación: agc/css/installer/ +# ============================================================================= +# +# CONTENIDO DE installer/: +# - custom.css → hoja de estilos (se copia a agc/css/custom.css) +# - LogoHome.png → logo para Welcome y Agent login +# - LogoAgent.png → logo para la página de agente (una vez logueado) +# - install_custom_css.sh (este script) +# +# GUÍA DE INSTALACIÓN (también en custom.css al inicio): +# 1. Import en vicidial_stylesheet.php (al inicio del CSS) para la mayoría de pantallas. +# 2. Link en admin_header.php (antes de ) para pantallas que usan admin_header. +# 3. Welcome y agent login usan el logo en vicidial/images y agc/images respectivamente. +# 4. La página de agente usa el logo en agc/images (mismo archivo que login por defecto). +# +# LOGOS: +# - LogoHome.png → Solo Welcome y Admin (vicidial/images + .gif en raíz vicidial). +# - LogoAgent.png → Solo agente: login (agc/images/vicidial_admin_web_logo.png) y +# panel una vez logueado (agc/images/agc_agent_logo.png). +# +# BACKUP DE IMÁGENES: antes de sustituir, se guarda la actual como *NombreOriginal*_OldCustom.ext. +# BACKUP DE custom.css: si agc/css/custom.css ya existe, se guarda como custom.css.bak.pre_agc antes de copiar. +# RESTAURAR (uninstall): restaura referencias CSS desde .bak.pre_agc y logos desde *_OldCustom; custom.css se deja en blanco con comentario "Custom desinstalado". +# +# Uso (ruta absoluta): +# /srv/www/htdocs/agc/css/installer/install_custom_css.sh [ install | uninstall | status ] +# HTDOCS=/ruta/htdocs /srv/www/htdocs/agc/css/installer/install_custom_css.sh install # otro ViciDial +# ============================================================================= + +set -e + +INSTALADOR_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)" +AGC_DIR="$(dirname "$(dirname "$INSTALADOR_DIR")")" +HTDOCS="${HTDOCS:-$(dirname "$AGC_DIR")}" +VICIDIAL_DIR="${HTDOCS}/vicidial" +VICIDIAL_IMAGES="${VICIDIAL_DIR}/images" +CUSTOM_CSS_SOURCE="${INSTALADOR_DIR}/custom.css" +CUSTOM_CSS_DEST="${AGC_DIR}/css/custom.css" +IMAGES_AGC="${AGC_DIR}/images" +VICIDIAL_STYLESHEET="${VICIDIAL_DIR}/vicidial_stylesheet.php" +ADMIN_HEADER="${VICIDIAL_DIR}/admin_header.php" +VICIDIAL_PHP="${AGC_DIR}/vicidial.php" +TIMECLOCK_PHP="${AGC_DIR}/timeclock.php" + +# Nombres de logos en destino (sin ruta) +LOGO_WELCOME_NAME="vicidial_admin_web_logo.png" +LOGO_AGENT_LOGIN_NAME="vicidial_admin_web_logo.png" +LOGO_AGENT_PAGE_NAME="agc_agent_logo.png" +LOGO_ADMIN_GIF_NAME="vicidial_admin_web_logo.gif" +OLDCUSTOM_SUFFIX="_OldCustom" + +RED='\033[0;31m' +GREEN='\033[0;32m' +YELLOW='\033[1;33m' +NC='\033[0m' +info() { echo -e "${GREEN}[INFO]${NC} $1"; } +warn() { echo -e "${YELLOW}[WARN]${NC} $1"; } +error() { echo -e "${RED}[ERROR]${NC} $1"; } + +# --- Backup/restore para archivos modificados (referencias CSS) --- +BACKUP_SUFFIX=".bak.pre_agc" +save_pre_agc_backup() { + local file="$1" + [[ -f "$file" ]] || return 0 + cp -a "$file" "${file}${BACKUP_SUFFIX}" + info "Backup para restauración: ${file}${BACKUP_SUFFIX}" +} +restore_from_pre_agc_backup() { + local file="$1" + local backup="${file}${BACKUP_SUFFIX}" + if [[ -f "$backup" ]]; then + cp -a "$backup" "$file" + rm -f "$backup" + info "Restaurado: $file" + return 0 + fi + return 1 +} + +# --- Logo: guardar original como *Nombre*_OldCustom.ext y poner el nuevo con nombre original --- +install_logo_file() { + local src="$1" + local dest_dir="$2" + local dest_name="$3" + local dest_path="${dest_dir}/${dest_name}" + local ext="${dest_name##*.}" + local base="${dest_name%.*}" + local backup_path="${dest_dir}/${base}${OLDCUSTOM_SUFFIX}.${ext}" + if [[ ! -f "$src" ]]; then + warn "No encontrado: $src (se omite)." + return 0 + fi + if [[ ! -d "$dest_dir" ]]; then + warn "No existe el directorio: $dest_dir (se omite)." + return 0 + fi + if [[ -f "$dest_path" ]] && [[ ! -f "$backup_path" ]]; then + cp -a "$dest_path" "$backup_path" + info "Backup de imagen (original para desinstalar): $backup_path" + fi + cp -a "$src" "$dest_path" + info "Logo instalado: $dest_path" +} + +# --- Restaurar logo desde *_OldCustom --- +restore_logo_file() { + local dest_dir="$1" + local dest_name="$2" + local ext="${dest_name##*.}" + local base="${dest_name%.*}" + local backup_path="${dest_dir}/${base}${OLDCUSTOM_SUFFIX}.${ext}" + if [[ ! -f "$backup_path" ]]; then + return 1 + fi + cp -a "$backup_path" "${dest_dir}/${dest_name}" + rm -f "$backup_path" + info "Restaurado logo: ${dest_dir}/${dest_name}" + return 0 +} + +installed_stylesheet() { + [[ -f "$VICIDIAL_STYLESHEET" ]] && grep -q "agc/css/custom.css" "$VICIDIAL_STYLESHEET" +} +installed_admin_header() { + [[ -f "$ADMIN_HEADER" ]] && grep -q "agc/css/custom.css" "$ADMIN_HEADER" +} + +# --- Copiar custom.css: hacer backup del destino si existe, luego copiar desde installer --- +copy_custom_css() { + if [[ ! -f "$CUSTOM_CSS_SOURCE" ]]; then + error "No se encuentra custom.css en: $CUSTOM_CSS_SOURCE" + exit 1 + fi + if [[ -f "$CUSTOM_CSS_DEST" ]]; then + cp -a "$CUSTOM_CSS_DEST" "${CUSTOM_CSS_DEST}${BACKUP_SUFFIX}" + info "Backup del custom.css actual: ${CUSTOM_CSS_DEST}${BACKUP_SUFFIX}" + fi + cp -a "$CUSTOM_CSS_SOURCE" "$CUSTOM_CSS_DEST" + info "custom.css copiado a $CUSTOM_CSS_DEST" +} + +# --- Instalar referencias a custom.css (vicidial_stylesheet y admin_header) --- +install_stylesheet_ref() { + if installed_stylesheet; then + info "vicidial_stylesheet.php: custom.css ya referenciado." + return 0 + fi + if [[ ! -f "$VICIDIAL_STYLESHEET" ]]; then + warn "No existe: $VICIDIAL_STYLESHEET" + return 1 + fi + save_pre_agc_backup "$VICIDIAL_STYLESHEET" + local line_num + line_num=$(grep -n '?>' "$VICIDIAL_STYLESHEET" | head -1 | cut -d: -f1) + [[ -n "$line_num" ]] || { error "No se encontró ?> en vicidial_stylesheet.php"; return 1; } + head -n "$line_num" "$VICIDIAL_STYLESHEET" > "${VICIDIAL_STYLESHEET}.tmp" + echo "" >> "${VICIDIAL_STYLESHEET}.tmp" + echo "/* Importar estilos personalizados AGC (debe ir al inicio) */" >> "${VICIDIAL_STYLESHEET}.tmp" + echo "@import url('../agc/css/custom.css');" >> "${VICIDIAL_STYLESHEET}.tmp" + echo "" >> "${VICIDIAL_STYLESHEET}.tmp" + tail -n +$((line_num + 1)) "$VICIDIAL_STYLESHEET" >> "${VICIDIAL_STYLESHEET}.tmp" + mv "${VICIDIAL_STYLESHEET}.tmp" "$VICIDIAL_STYLESHEET" + info "Añadido @import en vicidial_stylesheet.php" +} + +install_admin_header_ref() { + if installed_admin_header; then + info "admin_header.php: custom.css ya referenciado." + return 0 + fi + if [[ ! -f "$ADMIN_HEADER" ]]; then + warn "No existe: $ADMIN_HEADER" + return 1 + fi + save_pre_agc_backup "$ADMIN_HEADER" + local line_num + line_num=$(grep -n 'echo "' "$ADMIN_HEADER" | head -1 | cut -d: -f1) + [[ -n "$line_num" ]] || { error "No se encontró echo \"\" en admin_header.php"; return 1; } + local insert_line='echo "\n";' + head -n $((line_num - 1)) "$ADMIN_HEADER" > "${ADMIN_HEADER}.tmp" + echo "$insert_line" >> "${ADMIN_HEADER}.tmp" + tail -n +"$line_num" "$ADMIN_HEADER" >> "${ADMIN_HEADER}.tmp" + mv "${ADMIN_HEADER}.tmp" "$ADMIN_HEADER" + info "Añadido en admin_header.php" +} + +# --- Logo .gif en raíz vicidial (admin usa este cuando SSweb_logo=default_old) --- +install_logo_gif_vicidial_root() { + local logo_home="${INSTALADOR_DIR}/LogoHome.png" + local dest_gif="${VICIDIAL_DIR}/${LOGO_ADMIN_GIF_NAME}" + local backup_gif="${VICIDIAL_DIR}/vicidial_admin_web_logo${OLDCUSTOM_SUFFIX}.gif" + [[ -f "$logo_home" ]] || return 0 + if [[ -f "$dest_gif" ]] && [[ ! -f "$backup_gif" ]]; then + cp -a "$dest_gif" "$backup_gif" + info "Backup logo .gif (original para desinstalar): $backup_gif" + fi + if command -v convert &>/dev/null; then + convert "$logo_home" "$dest_gif" && info "Logo .gif instalado: $dest_gif" || cp -a "$logo_home" "$dest_gif" + else + cp -a "$logo_home" "$dest_gif" + info "Logo .gif instalado: $dest_gif" + fi +} + +restore_logo_gif_vicidial_root() { + local backup_gif="${VICIDIAL_DIR}/vicidial_admin_web_logo${OLDCUSTOM_SUFFIX}.gif" + local dest_gif="${VICIDIAL_DIR}/${LOGO_ADMIN_GIF_NAME}" + if [[ ! -f "$backup_gif" ]]; then return 1; fi + cp -a "$backup_gif" "$dest_gif" + rm -f "$backup_gif" + info "Restaurado logo .gif original: $dest_gif" + return 0 +} + +# --- Instalar logos: LogoHome solo Welcome y Admin; LogoAgent solo para agente (login + panel) --- +install_logos() { + local logo_home="${INSTALADOR_DIR}/LogoHome.png" + local logo_agent="${INSTALADOR_DIR}/LogoAgent.png" + # LogoHome → Welcome y Admin panel (vicidial/images + .gif) + install_logo_file "$logo_home" "$VICIDIAL_IMAGES" "$LOGO_WELCOME_NAME" + install_logo_gif_vicidial_root + # LogoAgent → solo agente: login (vicidial_admin_web_logo en agc) y panel (agc_agent_logo) + install_logo_file "$logo_agent" "$IMAGES_AGC" "$LOGO_AGENT_LOGIN_NAME" + install_logo_file "$logo_agent" "$IMAGES_AGC" "$LOGO_AGENT_PAGE_NAME" +} + +# --- Desinstalar: quitar referencias CSS y restaurar logos desde *_OldCustom --- +uninstall_stylesheet_ref() { + if ! installed_stylesheet; then + info "vicidial_stylesheet.php: no había referencia a custom.css." + return 0 + fi + if restore_from_pre_agc_backup "$VICIDIAL_STYLESHEET"; then + return 0 + fi + warn "No hay backup .bak.pre_agc; quitando referencias con sed." + sed -i '/\/\* Importar estilos personalizados AGC \*\//d' "$VICIDIAL_STYLESHEET" + sed -i '/\/\* Importar estilos personalizados AGC (debe ir al inicio) \*\//d' "$VICIDIAL_STYLESHEET" + sed -i "/@import url('\.\.\/agc\/css\/custom\.css');/d" "$VICIDIAL_STYLESHEET" + sed -i '/@import url.*agc\/css\/custom\.css/d' "$VICIDIAL_STYLESHEET" + info "Referencias eliminadas en vicidial_stylesheet.php" +} + +uninstall_admin_header_ref() { + if ! installed_admin_header; then + info "admin_header.php: no había referencia a custom.css." + return 0 + fi + if restore_from_pre_agc_backup "$ADMIN_HEADER"; then + return 0 + fi + warn "No hay backup .bak.pre_agc; quitando referencia con sed." + sed -i '/agc\/css\/custom\.css/d' "$ADMIN_HEADER" + info "Referencia eliminada en admin_header.php" +} + +restore_logos() { + restore_logo_file "$VICIDIAL_IMAGES" "$LOGO_WELCOME_NAME" || true + restore_logo_gif_vicidial_root || true + restore_logo_file "$IMAGES_AGC" "$LOGO_AGENT_LOGIN_NAME" || true + if restore_logo_file "$IMAGES_AGC" "$LOGO_AGENT_PAGE_NAME"; then + : + else + if [[ -f "${IMAGES_AGC}/${LOGO_AGENT_PAGE_NAME}" ]]; then + rm -f "${IMAGES_AGC}/${LOGO_AGENT_PAGE_NAME}" + info "Eliminado logo de agente (no existía original): ${IMAGES_AGC}/${LOGO_AGENT_PAGE_NAME}" + fi + fi +} + +# --- Placeholders en vicidial.php (Phone Login size=10) --- +has_placeholders() { + [[ -f "$VICIDIAL_PHP" ]] && grep -q 'placeholder=.*_QXZ.*Phone Login' "$VICIDIAL_PHP" +} + +install_placeholders() { + [[ -f "$VICIDIAL_PHP" ]] || { warn "vicidial.php no encontrado."; return 0; } + if has_placeholders; then + info "Placeholders Phone Login ya presentes en vicidial.php." + return 0 + fi + save_pre_agc_backup "$VICIDIAL_PHP" + sed -i '/name=\\"phone_login\\" size=\\"10\\"/s/ value=\\"\\" \/>/ value=\\"\\" placeholder=\\""._QXZ("Phone Login")."\\" \/>/' "$VICIDIAL_PHP" + sed -i '/name=\\"phone_pass\\" size=\\"10\\"/s/ value=\\"\\" \/>/ value=\\"\\" placeholder=\\""._QXZ("Phone Password")."\\" \/>/' "$VICIDIAL_PHP" + info "Placeholders Phone Login añadidos en vicidial.php." +} + +# --- Placeholders Re-Login (phone_login/phone_pass size=20) --- +has_relogin_placeholders() { + [[ -f "$VICIDIAL_PHP" ]] && grep -q 'phone_login.*size="20".*placeholder' "$VICIDIAL_PHP" +} + +install_relogin_placeholders() { + [[ -f "$VICIDIAL_PHP" ]] || return 0 + if has_relogin_placeholders; then + info "Placeholders Re-Login ya presentes." + return 0 + fi + [[ -f "${VICIDIAL_PHP}${BACKUP_SUFFIX}" ]] || save_pre_agc_backup "$VICIDIAL_PHP" + sed -i '/name=\\"phone_login\\" size=\\"20\\"/s/ value=\\"\$phone_login\\" \/>/ value=\\"\$phone_login\\" placeholder=\\""._QXZ("Phone Login")."\\" \/>/' "$VICIDIAL_PHP" + sed -i '/name=\\"phone_pass\\" size=\\"20\\"/s/ value=\\"\$phone_pass\\" \/>/ value=\\"\$phone_pass\\" placeholder=\\""._QXZ("Phone Password")."\\" \/>/' "$VICIDIAL_PHP" + info "Placeholders Re-Login añadidos." +} + +# --- Placeholders Campaign Login (VD_login/VD_pass) --- +has_campaign_placeholders() { + [[ -f "$VICIDIAL_PHP" ]] && grep -q 'VD_login.*placeholder.*User Login' "$VICIDIAL_PHP" +} + +install_campaign_placeholders() { + [[ -f "$VICIDIAL_PHP" ]] || return 0 + if has_campaign_placeholders; then + info "Placeholders Campaign Login ya presentes." + return 0 + fi + [[ -f "${VICIDIAL_PHP}${BACKUP_SUFFIX}" ]] || save_pre_agc_backup "$VICIDIAL_PHP" + sed -i '/name=\\"VD_login\\" size=\\"20\\"/s/ value=\\"\$VD_login\\" \/>/ value=\\"\$VD_login\\" placeholder=\\""._QXZ("User Login")."\\" \/>/' "$VICIDIAL_PHP" + sed -i '/name=\\"VD_pass\\" size=\\"20\\"/s/ value=\\"\$VD_pass\\" \/>/ value=\\"\$VD_pass\\" placeholder=\\""._QXZ("User Password")."\\" \/>/' "$VICIDIAL_PHP" + info "Placeholders Campaign Login añadidos." +} + +uninstall_placeholders() { + [[ -f "$VICIDIAL_PHP" ]] || return 0 + if restore_from_pre_agc_backup "$VICIDIAL_PHP"; then + info "vicidial.php restaurado (placeholders quitados)." + return 0 + fi + if ! has_placeholders && ! has_relogin_placeholders && ! has_campaign_placeholders; then + return 0 + fi + sed -i 's/ placeholder=\\""._QXZ("Phone Login")."\\"//' "$VICIDIAL_PHP" + sed -i 's/ placeholder=\\""._QXZ("Phone Password")."\\"//' "$VICIDIAL_PHP" + sed -i 's/ placeholder=\\""._QXZ("User Login")."\\"//' "$VICIDIAL_PHP" + sed -i 's/ placeholder=\\""._QXZ("User Password")."\\"//' "$VICIDIAL_PHP" + info "Placeholders eliminados de vicidial.php." +} + +# --- Placeholders en timeclock.php --- +has_timeclock_placeholders() { + [[ -f "$TIMECLOCK_PHP" ]] && grep -q 'placeholder=.*_QXZ.*User Login' "$TIMECLOCK_PHP" +} + +install_timeclock_placeholders() { + [[ -f "$TIMECLOCK_PHP" ]] || { warn "timeclock.php no encontrado."; return 0; } + if has_timeclock_placeholders; then + info "Placeholders ya presentes en timeclock.php." + return 0 + fi + save_pre_agc_backup "$TIMECLOCK_PHP" + sed -i '/NAME=user SIZE=10 MAXLENGTH=20/s/VALUE=\\"\$VD_login\\">/VALUE=\\"$VD_login\\" placeholder=\\""._QXZ("User Login")."\\">/' "$TIMECLOCK_PHP" + sed -i '/NAME=pass SIZE=10 MAXLENGTH=20/s/VALUE='"'"''"'"'>/VALUE='"'"''"'"' placeholder=\\""._QXZ("User Password")."\\">/' "$TIMECLOCK_PHP" + info "Placeholders añadidos en timeclock.php." +} + +uninstall_timeclock_placeholders() { + [[ -f "$TIMECLOCK_PHP" ]] || return 0 + if restore_from_pre_agc_backup "$TIMECLOCK_PHP"; then + info "timeclock.php restaurado." + return 0 + fi + if ! has_timeclock_placeholders; then return 0; fi + sed -i 's/ placeholder=\\""._QXZ("User Login")."\\"//' "$TIMECLOCK_PHP" + sed -i 's/ placeholder=\\""._QXZ("User Password")."\\"//' "$TIMECLOCK_PHP" + info "Placeholders eliminados de timeclock.php." +} + +# --- Dejar custom.css en blanco con solo comentario "Custom desinstalado" --- +write_custom_css_uninstalled() { + printf '/* Custom desinstalado */\n' > "$CUSTOM_CSS_DEST" + info "custom.css dejado en blanco (comentario: Custom desinstalado)." +} + +do_install() { + echo "=== Instalador AGC (custom.css + logos + placeholders) ===" + info "Raíz: $HTDOCS" + info "Instalador: $INSTALADOR_DIR" + copy_custom_css + install_logos + install_stylesheet_ref + install_admin_header_ref + install_placeholders + install_relogin_placeholders + install_campaign_placeholders + install_timeclock_placeholders + echo "" + info "Instalación completada. Si custom.css ya existía, se guardó en ${CUSTOM_CSS_DEST}${BACKUP_SUFFIX}" +} + +do_uninstall() { + echo "=== Desinstalación AGC (restaurar referencias, logos, placeholders y custom.css) ===" + info "Raíz: $HTDOCS" + uninstall_stylesheet_ref + uninstall_admin_header_ref + uninstall_placeholders + uninstall_timeclock_placeholders + restore_logos + write_custom_css_uninstalled + echo "" + info "Desinstalación completada." +} + +do_status() { + echo "=== Estado instalador AGC ===" + info "Raíz: $HTDOCS" + info "Instalador: $INSTALADOR_DIR" + [[ -f "$CUSTOM_CSS_SOURCE" ]] && info "custom.css en instalador: presente" || warn "custom.css en instalador: no encontrado" + [[ -f "${INSTALADOR_DIR}/LogoHome.png" ]] && info "LogoHome.png: presente" || warn "LogoHome.png: no encontrado" + [[ -f "${INSTALADOR_DIR}/LogoAgent.png" ]] && info "LogoAgent.png: presente" || warn "LogoAgent.png: no encontrado" + if [[ -f "$CUSTOM_CSS_DEST" ]]; then info "custom.css instalado: $CUSTOM_CSS_DEST"; else warn "custom.css instalado: no"; fi + if [[ -f "${CUSTOM_CSS_DEST}${BACKUP_SUFFIX}" ]]; then info "Backup custom.css: ${CUSTOM_CSS_DEST}${BACKUP_SUFFIX}"; fi + if [[ -f "$VICIDIAL_STYLESHEET" ]]; then + installed_stylesheet && info "vicidial_stylesheet.php: referenciado" || warn "vicidial_stylesheet.php: no referenciado" + fi + if [[ -f "$ADMIN_HEADER" ]]; then + installed_admin_header && info "admin_header.php: referenciado" || warn "admin_header.php: no referenciado" + fi + if [[ -f "$VICIDIAL_PHP" ]]; then + has_placeholders && info "vicidial.php: placeholders Phone (size=10) presentes" || warn "vicidial.php: placeholders Phone no presentes" + has_relogin_placeholders && info "vicidial.php: placeholders Re-Login presentes" || warn "vicidial.php: placeholders Re-Login no presentes" + has_campaign_placeholders && info "vicidial.php: placeholders Campaign Login presentes" || warn "vicidial.php: placeholders Campaign no presentes" + fi + if [[ -f "$TIMECLOCK_PHP" ]]; then + has_timeclock_placeholders && info "timeclock.php: placeholders presentes" || warn "timeclock.php: placeholders no presentes" + fi + for dir in "$VICIDIAL_IMAGES" "$IMAGES_AGC"; do + for name in "$LOGO_WELCOME_NAME" "$LOGO_AGENT_LOGIN_NAME" "$LOGO_AGENT_PAGE_NAME"; do + base="${name%.*}" + ext="${name##*.}" + if [[ -f "${dir}/${base}${OLDCUSTOM_SUFFIX}.${ext}" ]]; then + info "Backup logo: ${dir}/${base}${OLDCUSTOM_SUFFIX}.${ext}" + fi + done + done +} + +ACTION="${1:-install}" +case "$ACTION" in + install) do_install ;; + uninstall) do_uninstall ;; + status) do_status ;; + *) + echo "Uso: $0 { install | uninstall | status }" + echo " Ruta absoluta: /srv/www/htdocs/agc/css/installer/install_custom_css.sh" + echo " install - Copia custom.css, instala logos (LogoHome, LogoAgent) y referencias CSS." + echo " uninstall - Restaura referencias en vicidial y logos desde *_OldCustom (no restaura custom.css)." + echo " status - Estado de archivos y referencias." + echo "" + echo "Contenido de installer/: custom.css, LogoHome.png, LogoAgent.png, este script." + echo "Para otro ViciDial: HTDOCS=/ruta/htdocs /srv/www/htdocs/agc/css/installer/install_custom_css.sh install" + exit 1 + ;; +esac