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.
1995 lines
78 KiB
1995 lines
78 KiB
/* Variables de colores globales - disponibles para todos los componentes */
|
|
|
|
/* -------------------Guia de instalacion---------------------------
|
|
Se isntala en la ruta /agc/css/custom.css <------------------------------
|
|
|
|
Poner clase HTML "class=\"welcome-modern\"" en línea 119 de welcome.php
|
|
Poner placeholder=\"Phone Login\" en input - Linea 1737 vicidial.php
|
|
Poner placeholder=\"Phone Password\" en input - Linea 1739 vicidial.php
|
|
Importar estilos de sidebar de forma globar, agregar (echo "<link rel=\"stylesheet\" type=\"text/css\" href=\"../agc/css/custom.css\" />\n";)- linea 1951 admin_header.php
|
|
|
|
|
|
------------------------------------------------------------*/
|
|
|
|
|
|
|
|
:root {
|
|
/* Colores principales */
|
|
--color-primary-dark: #00877A;
|
|
--color-primary-light: #00C4B4;
|
|
--color-primary-medium: #00A896;
|
|
--color-primary-lightest: #69E2D6;
|
|
--color-text-dark: #2D2D2D;
|
|
--color-text-light: #ffffff;
|
|
--color-bg-white: #ffffff;
|
|
--color-bg-light: #69E2D6;
|
|
--color-bg-lighter: #69E2D6;
|
|
|
|
/* Colores de sombras */
|
|
--shadow-light: rgba(45, 45, 45, 0.25);
|
|
--shadow-medium: rgba(45, 45, 45, 0.35);
|
|
--shadow-text: rgba(45, 45, 45, 0.2);
|
|
--shadow-primary: rgba(0, 196, 180, 0.3);
|
|
--shadow-white: rgba(255, 255, 255, 0.4);
|
|
|
|
/* Colores de fondo decorativo */
|
|
--bg-decorative-1: rgba(0, 196, 180, 0.1);
|
|
--bg-decorative-2: rgba(0, 135, 122, 0.1);
|
|
--bg-white-transparent: rgba(255, 255, 255, 0.6);
|
|
}
|
|
|
|
/* Reset de estilos - Prioridad máxima sobre otros CSS */
|
|
html body * {
|
|
box-sizing: border-box !important;
|
|
}
|
|
|
|
/* Reset de enlaces - Eliminar color azul y decoración por defecto */
|
|
html body a,
|
|
html body a:link,
|
|
html body a:visited {
|
|
text-decoration: none !important;
|
|
outline: none !important;
|
|
}
|
|
|
|
|
|
/* Asegurar que html y body ocupen toda la altura de manera responsive */
|
|
html {
|
|
height: 100% !important;
|
|
}
|
|
|
|
body {
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
min-height: 100vh !important;
|
|
height: auto !important;
|
|
}
|
|
|
|
|
|
/* WELCOME COMPONENT --------------------------------------------------------------------*/
|
|
|
|
/* -------------------Guia de instalacion--------------------------- */
|
|
|
|
|
|
|
|
/* Contenedor del componente - solo afecta cuando existe welcome-modern */
|
|
html body:has(.welcome-modern) {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
|
|
min-height: 100vh !important;
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
padding: 15px !important;
|
|
margin: 0 !important;
|
|
position: relative !important;
|
|
}
|
|
|
|
/* Ocultar tabla vacía solo cuando está relacionada con welcome-modern */
|
|
html body:has(.welcome-modern) > table[width="100%"] {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Eliminar efectos de los br solo cuando están relacionados con welcome-modern */
|
|
html body:has(.welcome-modern) > br {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Centrar el contenedor center solo cuando contiene welcome-modern */
|
|
html body:has(.welcome-modern) > center:has(.welcome-modern) {
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
width: 100% !important;
|
|
height: 100vh !important;
|
|
position: absolute !important;
|
|
top: 0 !important;
|
|
left: 0 !important;
|
|
}
|
|
|
|
/* Estilos para la tabla principal del componente */
|
|
html body .welcome-modern {
|
|
background: var(--color-bg-white) !important;
|
|
border-radius: 16px !important;
|
|
box-shadow: 0 15px 40px var(--shadow-light) !important;
|
|
overflow: hidden !important;
|
|
border: none !important;
|
|
border-collapse: collapse !important;
|
|
width: auto !important;
|
|
min-width: 380px !important;
|
|
max-width: 100% !important;
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease !important;
|
|
margin: 0 auto !important;
|
|
display: block !important;
|
|
box-sizing: border-box !important;
|
|
}
|
|
|
|
html body .welcome-modern:hover {
|
|
transform: translateY(-3px) !important;
|
|
box-shadow: 0 18px 50px var(--shadow-medium) !important;
|
|
}
|
|
|
|
/* Header moderno - solo dentro de welcome-modern */
|
|
html body .welcome-modern tr:first-child {
|
|
display: block !important;
|
|
width: 100% !important;
|
|
box-sizing: border-box !important;
|
|
}
|
|
|
|
html body .welcome-modern tr:first-child td {
|
|
background: transparent !important;
|
|
padding: 16px !important;
|
|
border: none !important;
|
|
display: block !important;
|
|
text-align: center !important;
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
margin: 0 !important;
|
|
box-sizing: border-box !important;
|
|
}
|
|
|
|
html body .welcome-modern tr:first-child td:first-child {
|
|
border-radius: 0 !important;
|
|
padding: 12px 16px 8px 16px !important;
|
|
text-align: center !important;
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
box-sizing: border-box !important;
|
|
background: transparent !important;
|
|
overflow: visible !important;
|
|
}
|
|
|
|
html body .welcome-modern tr:first-child td:last-child {
|
|
border-radius: 0 !important;
|
|
padding: 0 16px 12px 16px !important;
|
|
text-align: center !important;
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
box-sizing: border-box !important;
|
|
}
|
|
|
|
/* Logo y texto del header - solo dentro de welcome-modern */
|
|
html body .welcome-modern tr:first-child img {
|
|
border-radius: 6px !important;
|
|
transition: transform 0.3s ease !important;
|
|
height: 45px !important;
|
|
width: auto !important;
|
|
max-width: 180px !important;
|
|
display: block !important;
|
|
margin: 0 auto !important;
|
|
text-align: center !important;
|
|
box-sizing: border-box !important;
|
|
object-fit: contain !important;
|
|
visibility: visible !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
html body .welcome-modern tr:first-child img:hover {
|
|
transform: scale(1.03) !important;
|
|
}
|
|
|
|
/* Texto blanco - solo dentro de welcome-modern */
|
|
html body .welcome-modern .sh_text_white {
|
|
color: var(--color-text-dark) !important;
|
|
font-size: 22px !important;
|
|
font-weight: 600 !important;
|
|
letter-spacing: 0.5px !important;
|
|
text-align: center !important;
|
|
display: block !important;
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
box-sizing: border-box !important;
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
/* Espaciadores modernos - solo dentro de welcome-modern */
|
|
html body .welcome-modern tr td[colspan="2"] font[size="1"] {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Contenedor para botones en horizontal */
|
|
html body .welcome-modern tbody {
|
|
display: block !important;
|
|
padding: 12px !important;
|
|
text-align: center !important;
|
|
}
|
|
|
|
/* Filas de botones - hacer que se muestren en línea */
|
|
html body .welcome-modern tr:not(:first-child) {
|
|
display: inline-block !important;
|
|
vertical-align: top !important;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
/* Celdas con botones */
|
|
html body .welcome-modern tr:not(:first-child) td[colspan="2"] {
|
|
display: block !important;
|
|
}
|
|
|
|
/* Enlaces de navegación modernos - solo dentro de welcome-modern */
|
|
html body .welcome-modern .skb_text {
|
|
display: inline-block !important;
|
|
color: var(--color-text-light) !important;
|
|
font-size: 14px !important;
|
|
font-weight: 500 !important;
|
|
padding: 0 !important;
|
|
margin: 8px 6px !important;
|
|
background: var(--color-primary-light) !important;
|
|
border-radius: 10px !important;
|
|
border: 2px solid var(--color-primary-light) !important;
|
|
transition: all 0.3s ease !important;
|
|
cursor: pointer !important;
|
|
text-decoration: none !important;
|
|
position: relative !important;
|
|
overflow: hidden !important;
|
|
white-space: nowrap !important;
|
|
min-width: 100px !important;
|
|
text-align: center !important;
|
|
}
|
|
|
|
/* Hacer que los enlaces dentro de skb_text ocupen todo el espacio del botón */
|
|
html body .welcome-modern .skb_text a {
|
|
display: block !important;
|
|
width: 100% !important;
|
|
color: var(--color-text-light) !important;
|
|
text-decoration: none !important;
|
|
padding: 10px 14px !important;
|
|
margin: 0 !important;
|
|
position: relative !important;
|
|
z-index: 1 !important;
|
|
box-sizing: border-box !important;
|
|
line-height: 1.4 !important;
|
|
}
|
|
|
|
html body .welcome-modern .skb_text::before {
|
|
content: '' !important;
|
|
position: absolute !important;
|
|
top: 0 !important;
|
|
left: -100% !important;
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
background: var(--shadow-white) !important;
|
|
transition: left 0.5s ease !important;
|
|
}
|
|
|
|
html body .welcome-modern .skb_text:hover {
|
|
background: var(--color-primary-medium) !important;
|
|
transform: translateY(-2px) !important;
|
|
box-shadow: 0 6px 16px var(--shadow-primary) !important;
|
|
border-color: var(--color-primary-medium) !important;
|
|
}
|
|
|
|
html body .welcome-modern .skb_text:hover a {
|
|
color: var(--color-text-light) !important;
|
|
}
|
|
|
|
html body .welcome-modern .skb_text:hover::before {
|
|
left: 100% !important;
|
|
}
|
|
|
|
/* Celdas de la tabla - solo dentro de welcome-modern */
|
|
html body .welcome-modern td {
|
|
border: none !important;
|
|
box-sizing: border-box !important;
|
|
}
|
|
|
|
/* Responsive - solo para welcome-modern */
|
|
@media (max-width: 480px) {
|
|
html body .welcome-modern {
|
|
width: 100% !important;
|
|
min-width: auto !important;
|
|
border-radius: 12px !important;
|
|
}
|
|
|
|
html body .welcome-modern .skb_text {
|
|
font-size: 13px !important;
|
|
padding: 0 !important;
|
|
margin: 6px 4px !important;
|
|
min-width: 80px !important;
|
|
display: block !important;
|
|
}
|
|
|
|
html body .welcome-modern .skb_text a {
|
|
display: block !important;
|
|
width: 100% !important;
|
|
padding: 8px 12px !important;
|
|
line-height: 1.4 !important;
|
|
}
|
|
|
|
html body .welcome-modern tbody {
|
|
flex-direction: column !important;
|
|
}
|
|
|
|
html body .welcome-modern tr td[colspan="2"] {
|
|
display: block !important;
|
|
width: 100% !important;
|
|
}
|
|
|
|
html body .welcome-modern .sh_text_white {
|
|
font-size: 20px !important;
|
|
}
|
|
|
|
html body .welcome-modern tr:first-child td {
|
|
padding: 12px !important;
|
|
}
|
|
}
|
|
|
|
/* Animación de entrada - solo para welcome-modern */
|
|
@keyframes welcome-modern-fadeInUp {
|
|
from {
|
|
opacity: 0 !important;
|
|
transform: translateY(30px) !important;
|
|
}
|
|
to {
|
|
opacity: 1 !important;
|
|
transform: translateY(0) !important;
|
|
}
|
|
}
|
|
|
|
html body .welcome-modern {
|
|
animation: welcome-modern-fadeInUp 0.6s ease-out !important;
|
|
}
|
|
|
|
/* Fondo decorativo - solo cuando existe welcome-modern */
|
|
html body:has(.welcome-modern)::before {
|
|
content: '' !important;
|
|
position: fixed !important;
|
|
top: 0 !important;
|
|
left: 0 !important;
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
background: transparent !important;
|
|
pointer-events: none !important;
|
|
z-index: -1 !important;
|
|
}
|
|
|
|
|
|
|
|
/* Phone Login Component --------------------------------------------------------------------*/
|
|
|
|
|
|
|
|
/* ==========================================================================
|
|
CONTENEDOR PRINCIPAL
|
|
========================================================================== */
|
|
body:has(form#vicidial_form) {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 15px;
|
|
margin: 0;
|
|
position: relative;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
ENLACE TIMECLOCK
|
|
========================================================================== */
|
|
body:has(form#vicidial_form) > a {
|
|
position: absolute;
|
|
top: 20px;
|
|
left: 20px;
|
|
text-decoration: none;
|
|
z-index: 10;
|
|
}
|
|
|
|
body:has(form#vicidial_form) .sb_text {
|
|
color: var(--color-primary-light) !important;
|
|
font-size: 16px !important;
|
|
font-weight: 500 !important;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
body:has(form#vicidial_form) > a:hover .sb_text {
|
|
color: var(--color-primary-medium) !important;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
ELEMENTOS OCULTOS
|
|
========================================================================== */
|
|
body:has(form#vicidial_form) > table[width="100%"] {
|
|
display: none;
|
|
}
|
|
|
|
body:has(form#vicidial_form) > br {
|
|
display: none;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
CONTENEDOR DEL FORMULARIO
|
|
========================================================================== */
|
|
body:has(form#vicidial_form) form {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 100vh;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body:has(form#vicidial_form) form > center {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
position: relative;
|
|
margin: 0;
|
|
padding: 0;
|
|
padding-left: 15px;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
TABLA PRINCIPAL
|
|
========================================================================== */
|
|
body:has(form#vicidial_form) form center > table[width="460px"] {
|
|
background: var(--color-bg-white) !important;
|
|
border-radius: 16px;
|
|
box-shadow: 0 15px 40px var(--shadow-light);
|
|
overflow: hidden;
|
|
border: none !important;
|
|
border-collapse: collapse !important;
|
|
width: 460px !important;
|
|
max-width: 100%;
|
|
margin-left: calc(50% - 230px + 15px) !important;
|
|
margin-right: auto !important;
|
|
display: table;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
animation: login-modern-fadeInUp 0.6s ease-out;
|
|
}
|
|
|
|
body:has(form#vicidial_form) form center > table[width="460px"] tr:not(:first-child) td {
|
|
text-align: center !important;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
HEADER - LOGO Y TÍTULO
|
|
========================================================================== */
|
|
body:has(form#vicidial_form) form center > table[width="460px"] tr:first-child {
|
|
display: block;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body:has(form#vicidial_form) form center > table[width="460px"] tr:first-child td {
|
|
background: transparent !important;
|
|
padding: 16px !important;
|
|
border: none !important;
|
|
display: block;
|
|
text-align: center !important;
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
margin: 0 !important;
|
|
box-sizing: border-box !important;
|
|
}
|
|
|
|
/* Contenedor del logo - mostrar nuevo logo como background */
|
|
body:has(form#vicidial_form) form center > table[width="460px"] tr:first-child td:first-child {
|
|
border-radius: 0;
|
|
padding: 16px 16px 8px 16px !important;
|
|
text-align: center !important;
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
box-sizing: border-box !important;
|
|
background-image: url('../../vicidial/images/vicidial_admin_web_logo.png') !important;
|
|
background-size: contain !important;
|
|
background-repeat: no-repeat !important;
|
|
background-position: center !important;
|
|
min-height: 45px !important;
|
|
position: relative !important;
|
|
margin-top: 10px !important;
|
|
}
|
|
|
|
/* Ocultar imagen vieja del logo (vdc_tab_vicidial.gif) */
|
|
body:has(form#vicidial_form) form center > table[width="460px"] tr:first-child td:first-child img {
|
|
display: none !important;
|
|
visibility: hidden !important;
|
|
opacity: 0 !important;
|
|
}
|
|
|
|
body:has(form#vicidial_form) form center > table[width="460px"] tr:first-child td:last-child {
|
|
border-radius: 0;
|
|
padding: 0 16px 8px 16px !important;
|
|
text-align: center !important;
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
box-sizing: border-box !important;
|
|
}
|
|
|
|
body:has(form#vicidial_form) form center > table[width="460px"] tr:first-child img {
|
|
border-radius: 6px;
|
|
transition: transform 0.3s ease;
|
|
height: auto !important;
|
|
max-height: 45px !important;
|
|
width: auto !important;
|
|
max-width: 180px !important;
|
|
display: block !important;
|
|
margin: 0 auto !important;
|
|
text-align: center !important;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body:has(form#vicidial_form) form center > table[width="460px"] tr:first-child img:hover {
|
|
transform: scale(1.03);
|
|
}
|
|
|
|
body:has(form#vicidial_form) form center > table[width="460px"] .sh_text_white {
|
|
color: var(--color-text-dark) !important;
|
|
font-size: 22px !important;
|
|
font-weight: 600 !important;
|
|
letter-spacing: 0.5px;
|
|
text-align: center !important;
|
|
display: block;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
FORMULARIO - INPUTS Y BOTONES
|
|
========================================================================== */
|
|
body:has(form#vicidial_form) form center > table[width="460px"] tr td[colspan="2"] font[size="1"] {
|
|
display: none;
|
|
}
|
|
|
|
body:has(form#vicidial_form) form center > table[width="460px"] tr:not(:first-child):not(:last-child) {
|
|
display: table-row;
|
|
}
|
|
|
|
body:has(form#vicidial_form) form center > table[width="460px"] tr:not(:first-child):not(:last-child) td {
|
|
padding: 12px 16px !important;
|
|
border: none !important;
|
|
box-sizing: border-box !important;
|
|
text-align: center !important;
|
|
}
|
|
|
|
/* Labels ocultos - Phone Login y Phone Password */
|
|
body:has(form#vicidial_form) form center > table[width="460px"] tr:has(input[name="phone_login"]) td:first-child,
|
|
body:has(form#vicidial_form) form center > table[width="460px"] tr:has(input[name="phone_pass"]) td:first-child {
|
|
display: none !important;
|
|
}
|
|
|
|
body:has(form#vicidial_form) form center > table[width="460px"] tr:has(input[name="phone_login"]),
|
|
body:has(form#vicidial_form) form center > table[width="460px"] tr:has(input[name="phone_pass"]) {
|
|
display: table-row;
|
|
}
|
|
|
|
body:has(form#vicidial_form) form center > table[width="460px"] tr:has(input[name="phone_login"]) td:last-child,
|
|
body:has(form#vicidial_form) form center > table[width="460px"] tr:has(input[name="phone_pass"]) td:last-child {
|
|
text-align: center !important;
|
|
width: 100% !important;
|
|
padding-left: 0 !important;
|
|
padding-right: 0 !important;
|
|
}
|
|
|
|
/* Labels ocultos - User Login y User Password (Campaign Login) */
|
|
body:has(form#vicidial_form) form center > table[width="460px"] tr:has(input[name="VD_login"]) td:first-child,
|
|
body:has(form#vicidial_form) form center > table[width="460px"] tr:has(input[name="VD_pass"]) td:first-child {
|
|
display: none !important;
|
|
}
|
|
|
|
body:has(form#vicidial_form) form center > table[width="460px"] tr:has(input[name="VD_login"]),
|
|
body:has(form#vicidial_form) form center > table[width="460px"] tr:has(input[name="VD_pass"]) {
|
|
display: table-row;
|
|
}
|
|
|
|
body:has(form#vicidial_form) form center > table[width="460px"] tr:has(input[name="VD_login"]) td:last-child,
|
|
body:has(form#vicidial_form) form center > table[width="460px"] tr:has(input[name="VD_pass"]) td:last-child {
|
|
text-align: center !important;
|
|
width: 100% !important;
|
|
padding-left: 0 !important;
|
|
padding-right: 0 !important;
|
|
}
|
|
|
|
/* Campaign select - ocultar label */
|
|
body:has(form#vicidial_form) form center > table[width="460px"] tr:has(select[name="VD_campaign"]) td:first-child {
|
|
display: none !important;
|
|
}
|
|
|
|
body:has(form#vicidial_form) form center > table[width="460px"] tr:has(select[name="VD_campaign"]) td:last-child {
|
|
text-align: center !important;
|
|
width: 100% !important;
|
|
padding-left: 0 !important;
|
|
padding-right: 0 !important;
|
|
}
|
|
|
|
/* Inputs - Phone Login y Campaign Login */
|
|
body:has(form#vicidial_form) form center > table[width="460px"] input[type="text"],
|
|
body:has(form#vicidial_form) form center > table[width="460px"] input[type="password"] {
|
|
padding: 10px 14px !important;
|
|
border: 2px solid var(--color-bg-light) !important;
|
|
border-radius: 8px !important;
|
|
font-size: 14px !important;
|
|
font-family: inherit;
|
|
color: var(--color-text-dark) !important;
|
|
background: var(--color-bg-white) !important;
|
|
transition: all 0.3s ease;
|
|
box-sizing: border-box !important;
|
|
width: 100%;
|
|
max-width: 250px;
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
body:has(form#vicidial_form) form center > table[width="460px"] input[type="text"]:focus,
|
|
body:has(form#vicidial_form) form center > table[width="460px"] input[type="password"]:focus {
|
|
outline: none !important;
|
|
border-color: var(--color-primary-light) !important;
|
|
box-shadow: 0 0 0 3px var(--shadow-primary) !important;
|
|
}
|
|
|
|
/* Select Campaign */
|
|
body:has(form#vicidial_form) form center > table[width="460px"] select[name="VD_campaign"] {
|
|
padding: 10px 14px !important;
|
|
border: 2px solid var(--color-bg-light) !important;
|
|
border-radius: 8px !important;
|
|
font-size: 14px !important;
|
|
font-family: inherit;
|
|
color: var(--color-text-dark) !important;
|
|
background: var(--color-bg-white) !important;
|
|
transition: all 0.3s ease;
|
|
box-sizing: border-box !important;
|
|
width: 100%;
|
|
max-width: 250px;
|
|
display: block;
|
|
margin: 0 auto;
|
|
cursor: pointer;
|
|
}
|
|
|
|
body:has(form#vicidial_form) form center > table[width="460px"] select[name="VD_campaign"]:focus {
|
|
outline: none !important;
|
|
border-color: var(--color-primary-light) !important;
|
|
box-shadow: 0 0 0 3px var(--shadow-primary) !important;
|
|
}
|
|
|
|
/* Botón Submit */
|
|
body:has(form#vicidial_form) form center > table[width="460px"] input[type="submit"] {
|
|
background: var(--color-primary-light) !important;
|
|
color: var(--color-text-light) !important;
|
|
border: 2px solid var(--color-primary-light) !important;
|
|
border-radius: 10px !important;
|
|
padding: 12px 24px !important;
|
|
font-size: 15px !important;
|
|
font-weight: 600 !important;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
font-family: inherit;
|
|
box-sizing: border-box !important;
|
|
}
|
|
|
|
body:has(form#vicidial_form) form center > table[width="460px"] input[type="submit"]:hover {
|
|
background: var(--color-primary-medium) !important;
|
|
border-color: var(--color-primary-medium) !important;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 16px var(--shadow-primary) !important;
|
|
}
|
|
|
|
body:has(form#vicidial_form) form center > table[width="460px"] input[type="submit"]:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* Botón Refresh Campaign List */
|
|
body:has(form#vicidial_form) form center > table[width="460px"] input[type="button"][value="Refresh Campaign List"] {
|
|
background: var(--color-bg-light) !important;
|
|
color: var(--color-text-dark) !important;
|
|
border: 2px solid var(--color-bg-light) !important;
|
|
border-radius: 10px !important;
|
|
padding: 10px 20px !important;
|
|
font-size: 14px !important;
|
|
font-weight: 500 !important;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
font-family: inherit;
|
|
box-sizing: border-box !important;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
body:has(form#vicidial_form) form center > table[width="460px"] input[type="button"][value="Refresh Campaign List"]:hover {
|
|
background: var(--color-primary-lightest) !important;
|
|
border-color: var(--color-primary-light) !important;
|
|
color: var(--color-primary-dark) !important;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px var(--shadow-primary) !important;
|
|
}
|
|
|
|
body:has(form#vicidial_form) form center > table[width="460px"] input[type="button"][value="Refresh Campaign List"]:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* ==========================================================================
|
|
TEXTO DE VERSIÓN
|
|
========================================================================== */
|
|
body:has(form#vicidial_form) form center > table[width="460px"] .body_tiny {
|
|
color: var(--color-text-dark) !important;
|
|
font-size: 11px !important;
|
|
opacity: 0.7;
|
|
display: block;
|
|
padding: 8px 16px !important;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
LOADING BOX
|
|
========================================================================== */
|
|
body:has(form#vicidial_form) #LoginLoadingBox {
|
|
text-align: center;
|
|
padding: 20px;
|
|
}
|
|
|
|
body:has(form#vicidial_form) #LoginLoadingBox .skb_text {
|
|
color: var(--color-primary-light) !important;
|
|
font-size: 16px !important;
|
|
display: block;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
body:has(form#vicidial_form) #LoginLoadingBox img {
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
CELDAS Y FILAS DE LA TABLA
|
|
========================================================================== */
|
|
body:has(form#vicidial_form) form center > table[width="460px"] td {
|
|
border: none !important;
|
|
box-sizing: border-box !important;
|
|
}
|
|
|
|
body:has(form#vicidial_form) form center > table[width="460px"] tr {
|
|
border: none !important;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
RESPONSIVE
|
|
========================================================================== */
|
|
@media (max-width: 480px) {
|
|
body:has(form#vicidial_form) form center > table[width="460px"] {
|
|
width: 100% !important;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
body:has(form#vicidial_form) form center > table[width="460px"] input[type="text"],
|
|
body:has(form#vicidial_form) form center > table[width="460px"] input[type="password"] {
|
|
max-width: 100% !important;
|
|
width: 100% !important;
|
|
}
|
|
|
|
body:has(form#vicidial_form) form center > table[width="460px"] tr:not(:first-child):not(:last-child) td {
|
|
display: block;
|
|
width: 100% !important;
|
|
text-align: left !important;
|
|
}
|
|
|
|
body:has(form#vicidial_form) form center > table[width="460px"] tr:not(:first-child):not(:last-child) td:first-child {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
body:has(form#vicidial_form) form center > table[width="460px"] .sh_text_white {
|
|
font-size: 20px !important;
|
|
}
|
|
|
|
body:has(form#vicidial_form) form center > table[width="460px"] tr:first-child td {
|
|
padding: 12px !important;
|
|
}
|
|
}
|
|
|
|
/* ==========================================================================
|
|
ANIMACIONES
|
|
========================================================================== */
|
|
@keyframes login-modern-fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/* ==========================================================================
|
|
TIMECLOCK COMPONENT
|
|
========================================================================== */
|
|
|
|
/* Contenedor principal */
|
|
body:has(form#vicidial_form[action*="timeclock"]) {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
|
|
min-height: 100vh !important;
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
padding: 15px !important;
|
|
margin: 0 !important;
|
|
position: relative !important;
|
|
width: 100% !important;
|
|
box-sizing: border-box !important;
|
|
}
|
|
|
|
/* Ocultar elementos innecesarios */
|
|
body:has(form#vicidial_form[action*="timeclock"]) > table[width="100%"] {
|
|
display: none !important;
|
|
}
|
|
|
|
body:has(form#vicidial_form[action*="timeclock"]) > br {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Contenedor del formulario */
|
|
body:has(form#vicidial_form[action*="timeclock"]) form {
|
|
width: 100% !important;
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
min-height: 100vh !important;
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
body:has(form#vicidial_form[action*="timeclock"]) form > center {
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
width: 100% !important;
|
|
min-height: 100vh !important;
|
|
position: relative !important;
|
|
margin: 0 auto !important;
|
|
padding: 0 !important;
|
|
text-align: center !important;
|
|
left: 0 !important;
|
|
right: 0 !important;
|
|
}
|
|
|
|
/* Tabla principal */
|
|
body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] {
|
|
background: var(--color-bg-white) !important;
|
|
border-radius: 16px !important;
|
|
box-shadow: 0 15px 40px var(--shadow-light) !important;
|
|
overflow: hidden !important;
|
|
border: none !important;
|
|
border-collapse: collapse !important;
|
|
width: 460px !important;
|
|
max-width: 100% !important;
|
|
margin: 0 auto !important;
|
|
display: table !important;
|
|
box-sizing: border-box !important;
|
|
position: relative !important;
|
|
animation: login-modern-fadeInUp 0.6s ease-out !important;
|
|
left: 50% !important;
|
|
transform: translateX(-50%) !important;
|
|
}
|
|
|
|
/* Header - Logo y Título */
|
|
body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] tr:first-child {
|
|
display: block !important;
|
|
width: 100% !important;
|
|
box-sizing: border-box !important;
|
|
}
|
|
|
|
body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] tr:first-child td {
|
|
background: transparent !important;
|
|
padding: 16px !important;
|
|
border: none !important;
|
|
display: block !important;
|
|
text-align: center !important;
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
margin: 0 !important;
|
|
box-sizing: border-box !important;
|
|
}
|
|
|
|
/* Ocultar tabla con width 100% dentro del form center */
|
|
body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="100%"] {
|
|
display: none !important;
|
|
width: 0 !important;
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
/* Contenedor del logo - mostrar nuevo logo */
|
|
body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] tr:first-child td:first-child {
|
|
border-radius: 0 !important;
|
|
padding: 16px 16px 8px 16px !important;
|
|
text-align: center !important;
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
box-sizing: border-box !important;
|
|
background-image: url('../../vicidial/images/vicidial_admin_web_logo.png') !important;
|
|
background-size: contain !important;
|
|
background-repeat: no-repeat !important;
|
|
background-position: center !important;
|
|
min-height: 45px !important;
|
|
position: relative !important;
|
|
margin-top: 10px !important;
|
|
}
|
|
|
|
/* Ocultar imagen vieja del logo */
|
|
body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] tr:first-child td:first-child img {
|
|
display: none !important;
|
|
visibility: hidden !important;
|
|
opacity: 0 !important;
|
|
}
|
|
|
|
body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] tr:first-child td:last-child {
|
|
border-radius: 0 !important;
|
|
padding: 0 16px 8px 16px !important;
|
|
text-align: center !important;
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
box-sizing: border-box !important;
|
|
}
|
|
|
|
/* Título Timeclock */
|
|
body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] .sh_text_white {
|
|
color: var(--color-text-dark) !important;
|
|
font-size: 22px !important;
|
|
font-weight: 600 !important;
|
|
letter-spacing: 0.5px !important;
|
|
text-align: center !important;
|
|
display: block !important;
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
box-sizing: border-box !important;
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
/* Espaciadores */
|
|
body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] tr td[colspan="2"] font[size="1"] {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Filas del formulario */
|
|
body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] tr:not(:first-child):not(:last-child) {
|
|
display: table-row !important;
|
|
}
|
|
|
|
body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] tr:not(:first-child):not(:last-child) td {
|
|
padding: 12px 16px !important;
|
|
border: none !important;
|
|
box-sizing: border-box !important;
|
|
text-align: center !important;
|
|
}
|
|
|
|
/* Labels ocultos */
|
|
body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] tr:has(input[name="user"]) td:first-child,
|
|
body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] tr:has(input[name="pass"]) td:first-child {
|
|
display: none !important;
|
|
}
|
|
|
|
body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] tr:has(input[name="user"]),
|
|
body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] tr:has(input[name="pass"]) {
|
|
display: table-row !important;
|
|
}
|
|
|
|
body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] tr:has(input[name="user"]) td:last-child,
|
|
body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] tr:has(input[name="pass"]) td:last-child {
|
|
text-align: center !important;
|
|
width: 100% !important;
|
|
padding-left: 0 !important;
|
|
padding-right: 0 !important;
|
|
}
|
|
|
|
/* Inputs */
|
|
body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] input[type="text"],
|
|
body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] input[type="password"] {
|
|
padding: 10px 14px !important;
|
|
border: 2px solid var(--color-bg-light) !important;
|
|
border-radius: 8px !important;
|
|
font-size: 14px !important;
|
|
font-family: inherit !important;
|
|
color: var(--color-text-dark) !important;
|
|
background: var(--color-bg-white) !important;
|
|
transition: all 0.3s ease !important;
|
|
box-sizing: border-box !important;
|
|
width: 100% !important;
|
|
max-width: 250px !important;
|
|
display: block !important;
|
|
margin: 0 auto !important;
|
|
}
|
|
|
|
body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] input[type="text"]:focus,
|
|
body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] input[type="password"]:focus {
|
|
outline: none !important;
|
|
border-color: var(--color-primary-light) !important;
|
|
box-shadow: 0 0 0 3px var(--shadow-primary) !important;
|
|
}
|
|
|
|
/* Botón Submit */
|
|
body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] input[type="submit"] {
|
|
background: var(--color-primary-light) !important;
|
|
color: var(--color-text-light) !important;
|
|
border: 2px solid var(--color-primary-light) !important;
|
|
border-radius: 10px !important;
|
|
padding: 10px 20px !important;
|
|
font-size: 14px !important;
|
|
font-weight: 500 !important;
|
|
cursor: pointer !important;
|
|
transition: all 0.3s ease !important;
|
|
font-family: inherit !important;
|
|
box-sizing: border-box !important;
|
|
}
|
|
|
|
body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] input[type="submit"]:hover {
|
|
background: var(--color-primary-medium) !important;
|
|
border-color: var(--color-primary-medium) !important;
|
|
transform: translateY(-2px) !important;
|
|
box-shadow: 0 6px 16px var(--shadow-primary) !important;
|
|
}
|
|
|
|
body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] input[type="submit"]:active {
|
|
transform: translateY(0) !important;
|
|
}
|
|
|
|
/* Versión y Build */
|
|
body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] .body_tiny {
|
|
color: var(--color-text-dark) !important;
|
|
font-size: 11px !important;
|
|
opacity: 0.7 !important;
|
|
text-align: center !important;
|
|
display: block !important;
|
|
width: 100% !important;
|
|
padding: 8px 0 !important;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 480px) {
|
|
body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] {
|
|
width: 100% !important;
|
|
border-radius: 12px !important;
|
|
}
|
|
|
|
body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] input[type="text"],
|
|
body:has(form#vicidial_form[action*="timeclock"]) form center > table[width="460px"] input[type="password"] {
|
|
max-width: 100% !important;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/* ==========================================================================
|
|
SIDEBAR - CONTENEDOR PRINCIPAL
|
|
Solo afecta al componente admin que tiene esta estructura específica
|
|
========================================================================== */
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) {
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
|
|
}
|
|
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) center {
|
|
margin: 0 auto !important;
|
|
padding: 0 !important;
|
|
width: 100% !important;
|
|
display: block !important;
|
|
text-align: center !important;
|
|
}
|
|
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] {
|
|
margin: 0 auto !important;
|
|
padding: 0 !important;
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
border-spacing: 0 !important;
|
|
min-height: 100vh !important;
|
|
display: table !important;
|
|
table-layout: fixed !important;
|
|
}
|
|
|
|
/* Fila principal que contiene sidebar y contenido */
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] tbody > tr:first-child {
|
|
height: auto !important;
|
|
}
|
|
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] {
|
|
background: var(--color-bg-white) !important;
|
|
padding: 20px 5px !important;
|
|
vertical-align: top;
|
|
box-sizing: border-box;
|
|
width: 170px !important;
|
|
min-width: 170px !important;
|
|
border-right: 1px solid var(--color-bg-light);
|
|
margin: 0 !important;
|
|
position: relative;
|
|
left: 0 !important;
|
|
}
|
|
|
|
/* Logo en sidebar */
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] img {
|
|
border-radius: 8px;
|
|
margin-bottom: 15px;
|
|
transition: transform 0.3s ease;
|
|
display: block;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] img:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
/* Título ADMINISTRATION */
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] b font {
|
|
color: var(--color-text-dark) !important;
|
|
font-size: 14px !important;
|
|
font-weight: 600 !important;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
|
|
letter-spacing: 0.3px;
|
|
display: block;
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
/* Tabla de navegación */
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] table {
|
|
background: transparent !important;
|
|
width: 160px !important;
|
|
max-width: 160px !important;
|
|
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
/* Quitar fondo azul oscuro de las filas de navegación */
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] table tr[bgcolor="#015B91"] {
|
|
background: transparent !important;
|
|
}
|
|
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] table tr[bgcolor="#015B91"] td {
|
|
background: transparent !important;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
ITEMS DE NAVEGACIÓN - ESTILO BOTÓN
|
|
========================================================================== */
|
|
/* Items normales - Botones verdes */
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .head_style {
|
|
background: var(--color-primary-light) !important;
|
|
background-color: var(--color-primary-light) !important;
|
|
padding: 8px 6px !important;
|
|
border-radius: 8px;
|
|
transition: all 0.3s ease;
|
|
cursor: pointer;
|
|
margin: 3px 0;
|
|
border: 2px solid var(--color-primary-light) !important;
|
|
display: block;
|
|
}
|
|
|
|
/* Sobrescribir estilos inline del HTML */
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] tr .head_style {
|
|
background: var(--color-primary-light) !important;
|
|
background-color: var(--color-primary-light) !important;
|
|
}
|
|
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] tr[bgcolor="#015B91"] .head_style {
|
|
background: var(--color-primary-light) !important;
|
|
background-color: var(--color-primary-light) !important;
|
|
}
|
|
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] tr[bgcolor="#015B91"] .head_style td {
|
|
background: var(--color-primary-light) !important;
|
|
background-color: var(--color-primary-light) !important;
|
|
}
|
|
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .head_style:hover {
|
|
background: var(--color-primary-light) !important;
|
|
background-color: var(--color-primary-light) !important;
|
|
border-color: var(--color-primary-light) !important;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3) !important;
|
|
}
|
|
|
|
/* Sobrescribir hover inline del HTML */
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] tr .head_style:hover {
|
|
background: var(--color-primary-light) !important;
|
|
background-color: var(--color-primary-light) !important;
|
|
}
|
|
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .head_style td {
|
|
padding: 0 !important;
|
|
border: none !important;
|
|
background: var(--color-primary-light) !important;
|
|
background-color: var(--color-primary-light) !important;
|
|
width: 160px !important;
|
|
}
|
|
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .head_style a {
|
|
text-decoration: none;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .head_style font {
|
|
color: var(--color-text-light) !important;
|
|
font-size: 12px !important;
|
|
font-weight: 500 !important;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
|
|
}
|
|
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .head_style img {
|
|
filter: brightness(0) invert(1) !important;
|
|
margin: 0 !important;
|
|
width: 14px !important;
|
|
height: 14px !important;
|
|
}
|
|
|
|
/* Item seleccionado - Verde más oscuro */
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .head_style_selected {
|
|
background: var(--color-primary-medium) !important;
|
|
background-color: var(--color-primary-medium) !important;
|
|
padding: 8px 6px !important;
|
|
border-radius: 8px;
|
|
margin: 3px 0;
|
|
border: 2px solid var(--color-primary-medium) !important;
|
|
display: block;
|
|
box-shadow: 0 2px 8px rgba(56, 142, 60, 0.3) !important;
|
|
}
|
|
|
|
/* Sobrescribir estilos inline del HTML para seleccionado */
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] tr .head_style_selected {
|
|
background: var(--color-primary-medium) !important;
|
|
background-color: var(--color-primary-medium) !important;
|
|
}
|
|
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] tr .head_style_selected:hover {
|
|
background: var(--color-primary-medium) !important;
|
|
background-color: var(--color-primary-medium) !important;
|
|
}
|
|
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] tr[bgcolor="#015B91"] .head_style_selected {
|
|
background: var(--color-primary-medium) !important;
|
|
background-color: var(--color-primary-medium) !important;
|
|
}
|
|
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] tr[bgcolor="#015B91"] .head_style_selected td {
|
|
background: var(--color-primary-medium) !important;
|
|
background-color: var(--color-primary-medium) !important;
|
|
}
|
|
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .head_style_selected td {
|
|
padding: 0 !important;
|
|
border: none !important;
|
|
background: var(--color-primary-medium) !important;
|
|
background-color: var(--color-primary-medium) !important;
|
|
width: 160px !important;
|
|
}
|
|
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .head_style_selected a {
|
|
text-decoration: none;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .head_style_selected font {
|
|
color: var(--color-text-light) !important;
|
|
font-weight: 600 !important;
|
|
font-size: 12px !important;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
|
|
}
|
|
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .head_style_selected img {
|
|
filter: brightness(0) invert(1) !important;
|
|
margin: 0 !important;
|
|
width: 14px !important;
|
|
height: 14px !important;
|
|
}
|
|
|
|
/* Líneas horizontales - ocultas */
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .horiz_line {
|
|
display: none !important;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
ITEMS DESPLEGABLES DEL MENÚ (SUBMENÚ)
|
|
========================================================================== */
|
|
/* Items desplegables normales */
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .subhead_style {
|
|
background: transparent !important;
|
|
background-color: transparent !important;
|
|
padding: 6px 6px 6px 20px !important;
|
|
border-radius: 6px;
|
|
transition: all 0.2s ease;
|
|
cursor: pointer;
|
|
margin: 2px 0;
|
|
border-left: 3px solid transparent !important;
|
|
}
|
|
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .subhead_style:hover {
|
|
background: rgba(76, 175, 80, 0.1) !important;
|
|
background-color: rgba(76, 175, 80, 0.1) !important;
|
|
border-left-color: var(--color-primary-light) !important;
|
|
transform: translateX(3px);
|
|
}
|
|
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .subhead_style td {
|
|
padding: 0 !important;
|
|
border: none !important;
|
|
background: transparent !important;
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .subhead_style a {
|
|
text-decoration: none;
|
|
display: block;
|
|
}
|
|
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .subhead_style font {
|
|
color: var(--color-text-dark) !important;
|
|
font-size: 11px !important;
|
|
font-weight: 400 !important;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
|
|
}
|
|
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .subhead_style a font {
|
|
color: var(--color-text-dark) !important;
|
|
}
|
|
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .subhead_style:hover font {
|
|
color: var(--color-primary-light) !important;
|
|
font-weight: 500 !important;
|
|
}
|
|
|
|
/* Item desplegable seleccionado */
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .subhead_style_selected {
|
|
background: rgba(76, 175, 80, 0.15) !important;
|
|
background-color: rgba(76, 175, 80, 0.15) !important;
|
|
padding: 6px 6px 6px 20px !important;
|
|
border-radius: 6px;
|
|
margin: 2px 0;
|
|
border-left: 3px solid var(--color-primary-light) !important;
|
|
box-shadow: 0 1px 4px rgba(76, 175, 80, 0.2) !important;
|
|
}
|
|
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .subhead_style_selected:hover {
|
|
background: rgba(76, 175, 80, 0.2) !important;
|
|
background-color: rgba(76, 175, 80, 0.2) !important;
|
|
border-left-color: var(--color-primary-medium) !important;
|
|
}
|
|
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .subhead_style_selected td {
|
|
padding: 0 !important;
|
|
border: none !important;
|
|
background: transparent !important;
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .subhead_style_selected a {
|
|
text-decoration: none;
|
|
display: block;
|
|
}
|
|
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .subhead_style_selected font {
|
|
color: var(--color-primary-medium) !important;
|
|
font-size: 11px !important;
|
|
font-weight: 600 !important;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
|
|
}
|
|
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .subhead_style_selected a font {
|
|
color: var(--color-primary-medium) !important;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
ICONOS EN ITEMS DESPLEGABLES DEL MENÚ
|
|
========================================================================== */
|
|
/* Iconos en items desplegables normales */
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .subhead_style img {
|
|
margin-right: 6px !important;
|
|
vertical-align: middle !important;
|
|
display: inline-block !important;
|
|
transition: transform 0.2s ease;
|
|
filter: opacity(0.7);
|
|
}
|
|
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .subhead_style:hover img {
|
|
transform: scale(1.1);
|
|
filter: opacity(1);
|
|
}
|
|
|
|
/* Iconos en items desplegables seleccionados */
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .subhead_style_selected img {
|
|
margin-right: 6px !important;
|
|
vertical-align: middle !important;
|
|
display: inline-block !important;
|
|
filter: opacity(1);
|
|
}
|
|
|
|
/* Ocultar iconos blank.gif (espacios en blanco) */
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .subhead_style img[src*="blank.gif"],
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .subhead_style_selected img[src*="blank.gif"] {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Item de menú admin seleccionado */
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .adminmenu_style_selected {
|
|
background: rgba(76, 175, 80, 0.15) !important;
|
|
background-color: rgba(76, 175, 80, 0.15) !important;
|
|
padding: 6px 6px 6px 20px !important;
|
|
border-radius: 6px;
|
|
margin: 2px 0;
|
|
border-left: 3px solid var(--color-primary-light) !important;
|
|
transition: all 0.2s ease;
|
|
cursor: pointer;
|
|
}
|
|
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .adminmenu_style_selected:hover {
|
|
background: rgba(76, 175, 80, 0.2) !important;
|
|
background-color: rgba(76, 175, 80, 0.2) !important;
|
|
border-left-color: var(--color-primary-medium) !important;
|
|
}
|
|
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .adminmenu_style_selected td {
|
|
padding: 0 !important;
|
|
border: none !important;
|
|
background: transparent !important;
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .adminmenu_style_selected a {
|
|
text-decoration: none;
|
|
display: block;
|
|
}
|
|
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .adminmenu_style_selected font {
|
|
color: var(--color-primary-medium) !important;
|
|
font-size: 11px !important;
|
|
font-weight: 600 !important;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
|
|
}
|
|
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .adminmenu_style_selected a font {
|
|
color: var(--color-primary-medium) !important;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
CONTENIDO PRINCIPAL
|
|
========================================================================== */
|
|
/* Celda de contenido principal - se ajusta al contenido y mantiene centrado */
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="870"][bgcolor="#D9E6FE"],
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="770"][bgcolor="#D9E6FE"] {
|
|
vertical-align: top !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
/* Tabla de navegación superior dentro del contenido - siempre centrada */
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="#D9E6FE"][cellpadding="2"] {
|
|
margin: 0 auto !important;
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
}
|
|
|
|
/* Asegurar que las tablas internas también estén centradas */
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) td[bgcolor="#D9E6FE"] center {
|
|
text-align: center !important;
|
|
margin: 0 auto !important;
|
|
}
|
|
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) td[bgcolor="#D9E6FE"] table {
|
|
margin: 0 auto !important;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
ICONOS EN CONTENIDO PRINCIPAL
|
|
========================================================================== */
|
|
/* Iconos grandes en tarjetas de menú (42x42) */
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) td[width="870"][bgcolor="#D9E6FE"] img[width="42"][height="42"] {
|
|
border-radius: 8px;
|
|
padding: 4px;
|
|
background: rgba(76, 175, 80, 0.1);
|
|
transition: all 0.3s ease;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) td[width="870"][bgcolor="#D9E6FE"] .adminmenu_style_selected:hover img[width="42"][height="42"] {
|
|
background: rgba(76, 175, 80, 0.2);
|
|
transform: scale(1.05);
|
|
box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
|
|
}
|
|
|
|
/* Iconos pequeños en items de menú (11x11) */
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) td[width="870"][bgcolor="#D9E6FE"] .adminmenu_style_selected img[width="11"][height="11"] {
|
|
margin-right: 6px !important;
|
|
vertical-align: middle !important;
|
|
display: inline-block !important;
|
|
transition: transform 0.2s ease;
|
|
filter: opacity(0.8);
|
|
}
|
|
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) td[width="870"][bgcolor="#D9E6FE"] .adminmenu_style_selected:hover img[width="11"][height="11"] {
|
|
transform: scale(1.15);
|
|
filter: opacity(1);
|
|
}
|
|
|
|
/* Ocultar iconos blank.gif en contenido principal */
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) td[width="870"][bgcolor="#D9E6FE"] .adminmenu_style_selected img[src*="blank.gif"] {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Estilos para tarjetas de menú con iconos */
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) td[width="870"][bgcolor="#D9E6FE"] .adminmenu_style_selected {
|
|
border-radius: 8px;
|
|
padding: 12px !important;
|
|
margin: 8px 0 !important;
|
|
background: var(--bg-white-transparent) !important;
|
|
background-color: var(--bg-white-transparent) !important;
|
|
border: 1px solid rgba(76, 175, 80, 0.2) !important;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) td[width="870"][bgcolor="#D9E6FE"] .adminmenu_style_selected:hover {
|
|
background: rgba(76, 175, 80, 0.1) !important;
|
|
background-color: rgba(76, 175, 80, 0.1) !important;
|
|
border-color: rgba(76, 175, 80, 0.4) !important;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(76, 175, 80, 0.2);
|
|
}
|
|
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) td[width="870"][bgcolor="#D9E6FE"] .adminmenu_style_selected td {
|
|
padding: 4px 8px !important;
|
|
vertical-align: middle !important;
|
|
}
|
|
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) td[width="870"][bgcolor="#D9E6FE"] .adminmenu_style_selected a {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) td[width="870"][bgcolor="#D9E6FE"] .adminmenu_style_selected span {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
|
|
font-size: 14px !important;
|
|
font-weight: 600 !important;
|
|
color: var(--color-text-dark) !important;
|
|
}
|
|
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) td[width="870"][bgcolor="#D9E6FE"] .adminmenu_style_selected font {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
|
|
font-size: 11px !important;
|
|
color: var(--color-text-dark) !important;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
FILAS DE TABLAS EN CONTENIDO PRINCIPAL
|
|
========================================================================== */
|
|
/* Filas de tabla - variante Y (alternadas) */
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) .records_list_y {
|
|
background: #f8f9fa !important;
|
|
background-color: #f8f9fa !important;
|
|
transition: all 0.2s ease;
|
|
cursor: pointer;
|
|
}
|
|
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) .records_list_y:hover {
|
|
background: rgba(76, 175, 80, 0.1) !important;
|
|
background-color: rgba(76, 175, 80, 0.1) !important;
|
|
transform: translateX(2px);
|
|
box-shadow: 0 2px 6px rgba(76, 175, 80, 0.15) !important;
|
|
}
|
|
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) .records_list_y td {
|
|
padding: 10px 8px !important;
|
|
border-bottom: 1px solid #e0e0e0 !important;
|
|
vertical-align: middle !important;
|
|
}
|
|
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) .records_list_y font {
|
|
color: var(--color-text-dark) !important;
|
|
font-size: 12px !important;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
|
|
}
|
|
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) .records_list_y a {
|
|
color: var(--color-primary-light) !important;
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) .records_list_y a:hover {
|
|
color: var(--color-primary-medium) !important;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) .records_list_y a font {
|
|
color: var(--color-primary-light) !important;
|
|
}
|
|
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) .records_list_y a:hover font {
|
|
color: var(--color-primary-medium) !important;
|
|
}
|
|
|
|
/* Filas de tabla - variante X */
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) .records_list_x {
|
|
background: var(--color-bg-white) !important;
|
|
background-color: var(--color-bg-white) !important;
|
|
transition: all 0.2s ease;
|
|
cursor: pointer;
|
|
}
|
|
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) .records_list_x:hover {
|
|
background: rgba(76, 175, 80, 0.08) !important;
|
|
background-color: rgba(76, 175, 80, 0.08) !important;
|
|
transform: translateX(2px);
|
|
box-shadow: 0 2px 6px rgba(76, 175, 80, 0.12) !important;
|
|
}
|
|
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) .records_list_x td {
|
|
padding: 10px 8px !important;
|
|
border-bottom: 1px solid #e0e0e0 !important;
|
|
vertical-align: middle !important;
|
|
}
|
|
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) .records_list_x font {
|
|
color: var(--color-text-dark) !important;
|
|
font-size: 12px !important;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
|
|
}
|
|
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) .records_list_x a {
|
|
color: var(--color-primary-light) !important;
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) .records_list_x a:hover {
|
|
color: var(--color-primary-medium) !important;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) .records_list_x a font {
|
|
color: var(--color-primary-light) !important;
|
|
}
|
|
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) .records_list_x a:hover font {
|
|
color: var(--color-primary-light) !important;
|
|
}
|
|
|
|
/* Estilos para encabezados de tabla en contenido principal */
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="black"] {
|
|
border-radius: 8px 8px 0 0 !important;
|
|
overflow: hidden;
|
|
}
|
|
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="black"] td {
|
|
padding: 12px 8px !important;
|
|
background: var(--color-text-dark) !important;
|
|
background-color: var(--color-text-dark) !important;
|
|
}
|
|
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="black"] font {
|
|
color: var(--color-text-light) !important;
|
|
font-weight: 600 !important;
|
|
font-size: 11px !important;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="black"] a {
|
|
color: var(--color-text-light) !important;
|
|
text-decoration: none;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="black"] a:hover {
|
|
color: var(--color-primary-light) !important;
|
|
}
|
|
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="black"] a font {
|
|
color: var(--color-text-light) !important;
|
|
}
|
|
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="black"] a:hover font {
|
|
color: var(--color-primary-light) !important;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
FOOTER DEL SIDEBAR
|
|
========================================================================== */
|
|
/* Footer con versión y copyright */
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] tr:last-child td[bgcolor="#015B91"] {
|
|
background: var(--color-bg-white) !important;
|
|
background-color: var(--color-bg-white) !important;
|
|
padding: 0px 10px 1px 10px !important;
|
|
text-align: center;
|
|
}
|
|
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] tr:last-child td[bgcolor="#015B91"] font {
|
|
color: var(--color-primary-light) !important;
|
|
font-size: 9px !important;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
|
|
}
|
|
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] tr:last-child td[bgcolor="#015B91"] a {
|
|
color: var(--color-primary-light) !important;
|
|
text-decoration: none;
|
|
}
|
|
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] tr:last-child td[bgcolor="#015B91"] a font {
|
|
color: var(--color-primary-light) !important;
|
|
}
|
|
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] tr:last-child td[bgcolor="#015B91"] a:hover {
|
|
color: var(--color-primary-medium) !important;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
RESPONSIVE
|
|
========================================================================== */
|
|
@media (max-width: 768px) {
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] {
|
|
width: 100% !important;
|
|
display: block;
|
|
padding: 15px 10px !important;
|
|
}
|
|
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] table {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .head_style,
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] .head_style_selected {
|
|
padding: 8px 10px !important;
|
|
font-size: 12px !important;
|
|
}
|
|
|
|
body:has(table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"]) table[bgcolor="white"][cellpadding="0"] td[width="170"][bgcolor="#015B91"] b font {
|
|
font-size: 14px !important;
|
|
}
|
|
}
|
|
|
|
/* ==========================================================================
|
|
ESTILOS MODERNOS PARA BARRA DE NAVEGACIÓN SUPERIOR
|
|
========================================================================== */
|
|
|
|
/* Estilos para la barra de navegación superior (HOME | Timeclock | Chat | Logout) */
|
|
table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:first-child[bgcolor="#015B91"] {
|
|
background: var(--color-bg-white) !important;
|
|
box-shadow: none !important;
|
|
border-bottom: none !important;
|
|
border-left: none !important;
|
|
padding: 16px 24px !important;
|
|
height: auto !important;
|
|
min-height: 60px !important;
|
|
position: relative !important;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
/* Efecto decorativo de brillo sutil - ajustado para fondo blanco */
|
|
table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:first-child[bgcolor="#015B91"]::before {
|
|
content: '' !important;
|
|
position: absolute !important;
|
|
top: 0 !important;
|
|
left: -100% !important;
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
background: linear-gradient(90deg, transparent, var(--bg-decorative-1), transparent) !important;
|
|
animation: shimmer 3s infinite !important;
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
0% { left: -100%; }
|
|
100% { left: 100%; }
|
|
}
|
|
|
|
/* Estilos para las celdas de la barra de navegación */
|
|
table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:first-child[bgcolor="#015B91"] td {
|
|
background: transparent !important;
|
|
padding: 1px 20px !important;
|
|
vertical-align: middle !important;
|
|
position: relative !important;
|
|
z-index: 1 !important;
|
|
}
|
|
|
|
/* Estilos para el texto de navegación (HOME, Timeclock, etc.) */
|
|
table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:first-child[bgcolor="#015B91"] font[face="ARIAL,HELVETICA"][color="WHITE"] {
|
|
color: var(--color-primary-medium) !important;
|
|
font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Arial, Helvetica, sans-serif !important;
|
|
font-weight: 700 !important;
|
|
text-shadow: none !important;
|
|
letter-spacing: 0.5px !important;
|
|
font-size: 13px !important;
|
|
}
|
|
|
|
/* Separador "|" con estilo moderno - todos los font dentro del td izquierdo */
|
|
table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:first-child[bgcolor="#015B91"] td[align="LEFT"] font[face="ARIAL,HELVETICA"][color="WHITE"][size="1"] {
|
|
color: var(--color-primary-medium) !important;
|
|
font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Arial, Helvetica, sans-serif !important;
|
|
font-weight: 700 !important;
|
|
text-shadow: none !important;
|
|
opacity: 1 !important;
|
|
margin: 0 6px !important;
|
|
}
|
|
|
|
/* Asegurar que el nombre de usuario (6666) tenga el mismo color */
|
|
table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:first-child[bgcolor="#015B91"] td[align="LEFT"] font[face="ARIAL,HELVETICA"][color="WHITE"][size="1"] font[face="ARIAL,HELVETICA"][color="WHITE"][size="1"] {
|
|
color: var(--color-primary-medium) !important;
|
|
font-weight: 700 !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
/* Estilos para la fecha/hora en la derecha */
|
|
table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:first-child[bgcolor="#015B91"] td[align="RIGHT"] {
|
|
text-align: right !important;
|
|
position: relative !important;
|
|
z-index: 1 !important;
|
|
}
|
|
|
|
table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:first-child[bgcolor="#015B91"] td[align="RIGHT"] font {
|
|
color: var(--color-primary-medium) !important;
|
|
font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Arial, Helvetica, sans-serif !important;
|
|
font-weight: 600 !important;
|
|
text-shadow: none !important;
|
|
letter-spacing: 0.8px !important;
|
|
font-size: 13px !important;
|
|
background: var(--bg-decorative-1) !important;
|
|
padding: 6px 12px !important;
|
|
border-radius: 20px !important;
|
|
display: inline-block !important;
|
|
border: 1px solid var(--color-primary-lightest) !important;
|
|
}
|
|
|
|
/* Ocultar los dos tr vacíos siguientes */
|
|
table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:nth-child(2)[bgcolor="#015B91"] {
|
|
display: none !important;
|
|
visibility: hidden !important;
|
|
height: 0 !important;
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
line-height: 0 !important;
|
|
}
|
|
|
|
table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:nth-child(3)[bgcolor="#E6E6E6"] {
|
|
display: none !important;
|
|
visibility: hidden !important;
|
|
height: 0 !important;
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
line-height: 0 !important;
|
|
}
|
|
|
|
/* Ocultar la barra verde (td con colspan="2" height="2" bgcolor="#015B91") */
|
|
table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr td[align="LEFT"][colspan="2"][height="2"][bgcolor="#015B91"],
|
|
table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr td[colspan="2"][height="2"][bgcolor="#015B91"] {
|
|
display: none !important;
|
|
visibility: hidden !important;
|
|
height: 0 !important;
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
line-height: 0 !important;
|
|
border: none !important;
|
|
}
|
|
|
|
/* Ocultar el tr que contiene la barra verde */
|
|
table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:has(td[colspan="2"][height="2"][bgcolor="#015B91"]),
|
|
table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:has(td[align="LEFT"][colspan="2"][height="2"][bgcolor="#015B91"]) {
|
|
display: none !important;
|
|
visibility: hidden !important;
|
|
height: 0 !important;
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
line-height: 0 !important;
|
|
}
|
|
|
|
/* Mejora adicional: hover effect en los elementos de navegación (si fueran clicables) */
|
|
table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:first-child[bgcolor="#015B91"] td[align="LEFT"] {
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
|
}
|
|
|
|
/* Efecto hover moderno para los elementos de texto de navegación */
|
|
table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:first-child[bgcolor="#015B91"] td[align="LEFT"] font[face="ARIAL,HELVETICA"][color="WHITE"][size="1"] {
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
|
position: relative !important;
|
|
display: inline-block !important;
|
|
}
|
|
|
|
/* Efecto de resaltado sutil al pasar el mouse (si fuera interactivo) */
|
|
table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:first-child[bgcolor="#015B91"] td[align="LEFT"] font[face="ARIAL,HELVETICA"][color="WHITE"][size="1"]:hover {
|
|
color: var(--color-primary-medium) !important;
|
|
transform: translateY(-1px) !important;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
RESPONSIVE - BARRA DE NAVEGACIÓN SUPERIOR
|
|
========================================================================== */
|
|
|
|
/* Prevenir que la fecha/hora se apile y mantener altura fija */
|
|
table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:first-child[bgcolor="#015B91"] {
|
|
white-space: nowrap !important;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:first-child[bgcolor="#015B91"] td[align="RIGHT"] {
|
|
white-space: nowrap !important;
|
|
overflow: hidden !important;
|
|
text-overflow: ellipsis !important;
|
|
}
|
|
|
|
table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:first-child[bgcolor="#015B91"] td[align="RIGHT"] font {
|
|
white-space: nowrap !important;
|
|
overflow: hidden !important;
|
|
text-overflow: ellipsis !important;
|
|
max-width: 100% !important;
|
|
display: inline-block !important;
|
|
}
|
|
|
|
/* Media queries para pantallas pequeñas */
|
|
@media (max-width: 768px) {
|
|
/* Mantener altura fija y reducir padding */
|
|
table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:first-child[bgcolor="#015B91"] {
|
|
min-height: 50px !important;
|
|
max-height: 50px !important;
|
|
height: 50px !important;
|
|
padding: 8px 12px !important;
|
|
}
|
|
|
|
/* Reducir tamaño de fuente de fecha/hora */
|
|
table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:first-child[bgcolor="#015B91"] td[align="RIGHT"] font {
|
|
font-size: 10px !important;
|
|
padding: 4px 8px !important;
|
|
letter-spacing: 0.3px !important;
|
|
}
|
|
|
|
/* Reducir tamaño de fuente de navegación */
|
|
table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:first-child[bgcolor="#015B91"] td[align="LEFT"] font[face="ARIAL,HELVETICA"][color="WHITE"][size="1"] {
|
|
font-size: 11px !important;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
/* Altura aún más pequeña en móviles */
|
|
table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:first-child[bgcolor="#015B91"] {
|
|
min-height: 45px !important;
|
|
max-height: 45px !important;
|
|
height: 45px !important;
|
|
padding: 6px 10px !important;
|
|
}
|
|
|
|
/* Ocultar fecha completa, mostrar solo hora si es necesario */
|
|
table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:first-child[bgcolor="#015B91"] td[align="RIGHT"] font {
|
|
font-size: 9px !important;
|
|
padding: 3px 6px !important;
|
|
}
|
|
|
|
/* Reducir más el texto de navegación */
|
|
table[bgcolor="#D9E6FE"][cellpadding="2"][cellspacing="0"][width="870"] tbody > tr:first-child[bgcolor="#015B91"] td[align="LEFT"] font[face="ARIAL,HELVETICA"][color="WHITE"][size="1"] {
|
|
font-size: 10px !important;
|
|
margin: 0 3px !important;
|
|
}
|
|
}
|
|
|