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