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 0000000..09db2e6
Binary files /dev/null and b/Custom/installer/LogoAgent.png differ
diff --git a/Custom/installer/LogoHome.png b/Custom/installer/LogoHome.png
new file mode 100644
index 0000000..d68862d
Binary files /dev/null and b/Custom/installer/LogoHome.png differ
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