/* ==========================================================================
GTpos · MODERN THEME OVERLAY
Capa de modernización visual cargada DESPUÉS de los estilos compilados
(cssmin/main.css, pos.css, pos_c.css, login.css) o de los estilos de
desarrollo. No sustituye Bootstrap 3 / AdminLTE 2: los reviste con un
sistema de diseño propio, moderno, responsivo y con modo claro/oscuro.
========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Manrope:wght@600;700;800&display=swap');
/* --------------------------------------------------------------------------
1. TOKENS / VARIABLES DE DISEÑO
-------------------------------------------------------------------------- */
:root {
/* Tipografía */
--gt-font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--gt-font-display: 'Manrope', var(--gt-font);
/* Radios */
--gt-r-xs: 6px;
--gt-r-sm: 8px;
--gt-r-md: 12px;
--gt-r-lg: 16px;
--gt-r-xl: 22px;
--gt-r-pill: 999px;
/* Sombras (modo claro) */
--gt-shadow-xs: 0 1px 2px rgba(16, 24, 40, .06);
--gt-shadow-sm: 0 2px 6px rgba(16, 24, 40, .07);
--gt-shadow-md: 0 8px 20px -4px rgba(16, 24, 40, .12);
--gt-shadow-lg: 0 20px 40px -8px rgba(16, 24, 40, .18);
--gt-shadow-focus: 0 0 0 4px;
/* Transiciones */
--gt-fast: 140ms cubic-bezier(.4, 0, .2, 1);
--gt-med: 220ms cubic-bezier(.4, 0, .2, 1);
/* Métricas de layout — usadas por topbar, sidebar y contenido para que
todas las piezas queden alineadas. AdminLTE asumía 40px de topbar y
180px de sidebar; aquí se centralizan para no volver a desincronizarlas. */
--gt-topbar-h: 54px;
--gt-sidebar-w: 180px;
--gt-sidebar-mini-w: 50px;
--gt-sidebar-mobile-w: 268px;
--gt-flyout-w: 220px;
/* Marca */
--gt-accent-h: 160;
--gt-accent: #0ea472;
--gt-accent-600: #0c8f63;
--gt-accent-700: #0a7a55;
--gt-accent-800: #075c3f;
--gt-accent-soft: #e3f8ef;
--gt-accent-soft-strong: #c3f0dd;
--gt-accent-contrast: #ffffff;
--gt-accent-ring: rgba(14, 164, 114, .25);
--gt-violet: #6366f1;
--gt-blue: #3b82f6;
--gt-amber: #f59e0b;
--gt-red: #ef4444;
--gt-red-soft: #fdecec;
--gt-teal: #06b6d4;
/* Superficies modo claro */
--gt-bg: #eef1f6;
--gt-bg-alt: #e6eaf1;
--gt-surface: #ffffff;
--gt-surface-2: #f8fafc;
--gt-surface-hover: #f1f5f9;
--gt-border: #e3e8f0;
--gt-border-strong: #cbd5e1;
--gt-text: #17202e;
--gt-text-muted: #5b6779;
--gt-text-soft: #8a94a6;
--gt-text-on-accent: #ffffff;
/* Sidebar / Topbar — ahora SÍ acompaña al tema (antes quedaba oscura en
modo claro). Se añaden tokens de hover/submenú/filtro de iconos para
que ninguna regla tenga que cablear #fff. */
--gt-side-bg: #ffffff;
--gt-side-bg-2: #f3f6fb;
--gt-side-border: #e3e8f0;
--gt-side-text: #4c5a6e;
--gt-side-text-active: #16202f;
--gt-side-hover-bg: #eef2f8;
--gt-side-hover-text: #16202f;
--gt-side-submenu-bg: #f6f8fc;
--gt-side-active-bg: linear-gradient(90deg, rgba(14, 164, 114, .16), rgba(14, 164, 114, .03));
--gt-side-active-border: #0ea472;
--gt-side-icon: #64738a;
--gt-side-shadow: 1px 0 0 var(--gt-side-border);
/* Filtro para el sprite de iconos dentro de la barra lateral. */
--gt-side-icon-filter: brightness(0) saturate(100%) opacity(.5);
--gt-side-icon-filter-active: brightness(0) saturate(100%) opacity(.9);
--gt-side-search-bg: #eef2f8;
--gt-side-search-text: #16202f;
--gt-top-bg: #ffffff;
--gt-top-border: #e6eaf1;
--gt-scrollbar: #c7cfdb;
--gt-scrollbar-track: transparent;
/* Login — modo claro: fondo realmente claro y aireado */
--gt-login-bg:
radial-gradient(circle at 12% 10%, #ffffff 0%, transparent 55%),
linear-gradient(160deg, #f7fafc 0%, #eef3f9 48%, #e7eef7 100%);
--gt-login-aurora:
radial-gradient(circle at 20% 25%, rgba(14, 164, 114, .40), transparent 55%),
radial-gradient(circle at 78% 70%, rgba(99, 102, 241, .30), transparent 55%),
radial-gradient(circle at 60% 15%, rgba(6, 182, 212, .26), transparent 50%);
--gt-login-aurora-opacity: .5;
--gt-login-grid: rgba(23, 32, 46, .05);
--gt-login-card: rgba(255, 255, 255, .82);
--gt-login-card-border: rgba(255, 255, 255, .9);
--gt-login-card-shadow: 0 26px 60px -18px rgba(16, 24, 40, .28), 0 2px 8px rgba(16, 24, 40, .06);
--gt-login-addon: #f1f5f9;
/* Contorno de los campos: visible por defecto, verde oscuro al enfocar */
/* Verificados a >=3:1 sobre la superficie (WCAG 1.4.11, contorno de
componentes de interfaz). Con #b9c4d4 el borde daba 1.76:1 y por eso
apenas se distinguia. */
--gt-field-border: #8795ab;
--gt-field-border-hover: #64748b;
--gt-field-border-focus: #067a52;
/* Tooltip de la barra superior */
--gt-tip-bg: #16202f;
--gt-tip-text: #ffffff;
--gt-tip-border: rgba(255, 255, 255, .10);
color-scheme: light;
}
[data-theme="dark"] {
color-scheme: dark;
--gt-accent: #2fdba0;
--gt-accent-600: #22c391;
--gt-accent-700: #17a87c;
--gt-accent-800: #b9f5dc;
--gt-accent-soft: rgba(47, 219, 160, .14);
--gt-accent-soft-strong: rgba(47, 219, 160, .22);
--gt-accent-contrast: #062018;
--gt-accent-ring: rgba(47, 219, 160, .28);
--gt-red-soft: rgba(239, 68, 68, .14);
--gt-bg: #0a0f1a;
--gt-bg-alt: #0c1220;
--gt-surface: #121a2a;
--gt-surface-2: #16203350;
--gt-surface-hover: #1b2537;
--gt-border: #232f47;
--gt-border-strong: #303f5e;
--gt-text: #e7ecf5;
--gt-text-muted: #9baac2;
--gt-text-soft: #6d7c96;
--gt-text-on-accent: #062018;
--gt-side-bg: #070c17;
--gt-side-bg-2: #0f1728;
--gt-side-border: rgba(255, 255, 255, .06);
--gt-side-text: #8a9bb8;
--gt-side-text-active: #ffffff;
--gt-side-hover-bg: rgba(255, 255, 255, .06);
--gt-side-hover-text: #ffffff;
--gt-side-submenu-bg: rgba(0, 0, 0, .28);
--gt-side-active-bg: linear-gradient(90deg, rgba(47, 219, 160, .20), rgba(47, 219, 160, .03));
--gt-side-active-border: #22d3a4;
--gt-side-icon: #6d84a6;
--gt-side-shadow: 4px 0 24px rgba(0, 0, 0, .30);
--gt-side-icon-filter: brightness(0) invert(1) opacity(.55);
--gt-side-icon-filter-active: brightness(0) invert(1) opacity(1);
--gt-side-search-bg: rgba(255, 255, 255, .05);
--gt-side-search-text: #ffffff;
--gt-top-bg: #0e1524;
--gt-top-border: #202c44;
--gt-scrollbar: #2a3550;
--gt-scrollbar-track: transparent;
/* Login — modo oscuro: azul profundo + aurora esmeralda/violeta y
tarjeta de vidrio, con bastante más contraste que el gris plano. */
--gt-login-bg:
radial-gradient(circle at 50% -10%, #16264a 0%, transparent 62%),
linear-gradient(165deg, #0a1120 0%, #05080f 100%);
--gt-login-aurora:
radial-gradient(circle at 18% 22%, rgba(47, 219, 160, .55), transparent 55%),
radial-gradient(circle at 82% 72%, rgba(99, 102, 241, .48), transparent 55%),
radial-gradient(circle at 62% 8%, rgba(6, 182, 212, .38), transparent 52%);
--gt-login-aurora-opacity: .42;
--gt-login-grid: rgba(255, 255, 255, .045);
--gt-login-card: rgba(20, 29, 47, .72);
--gt-login-card-border: rgba(255, 255, 255, .10);
--gt-login-card-shadow: 0 30px 70px -20px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .04);
--gt-login-addon: rgba(255, 255, 255, .06);
--gt-field-border: #586990;
--gt-field-border-hover: #74879f;
--gt-field-border-focus: #2fdba0;
--gt-tip-bg: #1d283c;
--gt-tip-text: #f2f6fc;
--gt-tip-border: rgba(255, 255, 255, .14);
--gt-shadow-xs: 0 1px 2px rgba(0, 0, 0, .35);
--gt-shadow-sm: 0 2px 8px rgba(0, 0, 0, .35);
--gt-shadow-md: 0 10px 26px -6px rgba(0, 0, 0, .55);
--gt-shadow-lg: 0 24px 48px -10px rgba(0, 0, 0, .6);
}
/* Evita parpadeo al cambiar de tema */
html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
html.gt-theme-ready body,
html.gt-theme-ready body * {
transition: background-color var(--gt-fast), border-color var(--gt-fast), color var(--gt-fast), box-shadow var(--gt-fast);
}
/* --------------------------------------------------------------------------
2. RESET / BASE
-------------------------------------------------------------------------- */
html, body {
background: var(--gt-bg) !important;
}
body {
font-family: var(--gt-font) !important;
color: var(--gt-text) !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6,
.box-title, .content-header > h1 {
font-family: var(--gt-font-display) !important;
color: var(--gt-text) !important;
letter-spacing: -0.01em;
}
a { color: var(--gt-accent); }
a:hover, a:focus { color: var(--gt-accent-700); }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: var(--gt-scrollbar-track); }
::-webkit-scrollbar-thumb {
background-color: var(--gt-scrollbar);
border-radius: var(--gt-r-pill);
border: 2px solid transparent;
background-clip: padding-box;
}
* { scrollbar-width: thin; scrollbar-color: var(--gt-scrollbar) transparent; }
::selection { background: var(--gt-accent-soft-strong); color: var(--gt-text); }
hr { border-color: var(--gt-border) !important; }
/* --------------------------------------------------------------------------
3. LAYOUT GENERAL
-------------------------------------------------------------------------- */
.wrapper { background: var(--gt-bg) !important; }
.content-wrapper, .right-side {
background: var(--gt-bg) !important;
}
.content-header {
background: transparent !important;
padding: 22px 26px 6px !important;
}
.content-header > h1 {
font-size: 22px !important;
font-weight: 800 !important;
display: flex;
align-items: center;
gap: 10px;
}
.content-header > h1 > small {
color: var(--gt-text-soft) !important;
font-weight: 500 !important;
}
.content-header > .breadcrumb {
background: var(--gt-surface) !important;
border: 1px solid var(--gt-border) !important;
border-radius: var(--gt-r-pill) !important;
padding: 7px 16px !important;
box-shadow: var(--gt-shadow-xs);
font-size: 12.5px;
}
.content-header > .breadcrumb > li > a { color: var(--gt-text-muted) !important; }
.content-header > .breadcrumb > li.active { color: var(--gt-accent) !important; font-weight: 600; }
.content { padding: 8px 26px 26px !important; }
@media (max-width: 767px) {
.content-header { padding: 16px 14px 4px !important; }
.content { padding: 6px 14px 20px !important; }
}
/* --------------------------------------------------------------------------
4. TOPBAR / HEADER PRINCIPAL
-------------------------------------------------------------------------- */
.main-header {
box-shadow: none !important;
}
.main-header > .navbar,
.skin-black .main-header > .navbar,
.skin-blue .main-header > .navbar,
.skin-green .main-header > .navbar,
.skin-red .main-header > .navbar,
.skin-yellow .main-header > .navbar {
background: var(--gt-top-bg) !important;
border-bottom: 1px solid var(--gt-top-border) !important;
min-height: var(--gt-topbar-h);
}
.main-header .navbar-custom-menu, .main-header .navbar-right { background: transparent; }
.main-header > .logo {
border-bottom: 1px solid transparent;
border-right: none !important;
font-family: var(--gt-font-display) !important;
font-weight: 800 !important;
letter-spacing: .01em;
height: var(--gt-topbar-h);
line-height: var(--gt-topbar-h);
}
[data-theme="dark"] .main-header > .logo {
background: var(--gt-side-bg) !important;
color: #fff !important;
border-bottom: 1px solid var(--gt-side-border) !important;
}
[data-theme="dark"] .main-header > .logo:hover { background: var(--gt-side-bg-2) !important; }
.main-header .logo-mini b {
background: var(--gt-accent);
color: var(--gt-accent-contrast);
width: 30px; height: 30px; line-height: 30px;
border-radius: var(--gt-r-sm);
display: inline-block;
font-weight: 800;
}
.main-header .navbar .sidebar-toggle,
.skin-black .main-header .navbar .sidebar-toggle {
color: var(--gt-text) !important;
height: var(--gt-topbar-h);
display: flex;
align-items: center;
padding: 0 16px;
}
.main-header .navbar .sidebar-toggle:hover {
background: var(--gt-surface-hover) !important;
color: var(--gt-accent) !important;
}
.main-header .navbar-nav > li > a {
color: var(--gt-text-muted) !important;
padding: 0 12px;
height: var(--gt-topbar-h);
display: flex;
align-items: center;
border-radius: 0;
}
.main-header .navbar-nav > li > a:hover,
.main-header .navbar-nav > li > a:focus,
.main-header .navbar-nav > .active > a,
.main-header .navbar-nav > .open > a {
background: var(--gt-surface-hover) !important;
color: var(--gt-accent) !important;
}
.main-header .navbar-nav > li.sell-btn > a,
.main-header .navbar-nav > li.active.sell-btn > a {
color: var(--gt-accent) !important;
}
.main-header .svg-icon {
width: 19px; height: 19px;
vertical-align: middle;
}
.main-header .navbar-nav > li > a .label {
border-radius: var(--gt-r-pill) !important;
font-weight: 700;
padding: 2px 6px;
}
#live_datetime { color: var(--gt-text-muted) !important; font-weight: 600; font-size: 12.5px; }
.main-header .dropdown-menu {
border-radius: var(--gt-r-md) !important;
border: 1px solid var(--gt-border) !important;
box-shadow: var(--gt-shadow-md) !important;
background: var(--gt-surface) !important;
padding: 6px !important;
margin-top: 8px !important;
}
.main-header .dropdown-menu > li > a {
color: var(--gt-text) !important;
border-radius: var(--gt-r-sm) !important;
padding: 8px 10px !important;
}
.main-header .dropdown-menu > li > a:hover { background: var(--gt-surface-hover) !important; }
/* Botón de acceso rápido a POS: destacado como CTA */
.main-header .navbar-nav > li.sell-btn {
margin: 0 4px;
}
.main-header .navbar-nav > li.sell-btn > a {
background: var(--gt-accent) !important;
color: var(--gt-accent-contrast) !important;
border-radius: var(--gt-r-pill) !important;
height: 40px !important;
margin-top: 11px;
padding: 0 18px !important;
font-weight: 700;
box-shadow: var(--gt-shadow-sm);
}
.main-header .navbar-nav > li.sell-btn > a:hover { background: var(--gt-accent-600) !important; color: #fff !important; }
.main-header .navbar-nav > li.sell-btn .svg-icon { margin-right: 6px; }
/* --------------------------------------------------------------------------
4.1 TOGGLE DE TEMA (claro/oscuro)
-------------------------------------------------------------------------- */
.gt-theme-toggle {
display: flex !important;
align-items: center;
justify-content: center;
height: var(--gt-topbar-h) !important;
padding: 0 12px !important;
cursor: pointer;
background: none;
border: 0;
}
.gt-theme-toggle .gt-toggle-track {
position: relative;
width: 46px;
height: 26px;
border-radius: var(--gt-r-pill);
background: var(--gt-surface-hover);
border: 1px solid var(--gt-border);
transition: background var(--gt-med);
}
.gt-theme-toggle .gt-toggle-thumb {
position: absolute;
top: 2px; left: 2px;
width: 20px; height: 20px;
border-radius: 50%;
background: var(--gt-surface);
box-shadow: var(--gt-shadow-sm);
display: flex;
align-items: center;
justify-content: center;
transition: transform var(--gt-med), background var(--gt-med);
color: var(--gt-amber);
}
.gt-theme-toggle .gt-toggle-thumb svg { width: 12px; height: 12px; }
[data-theme="dark"] .gt-theme-toggle .gt-toggle-track { background: var(--gt-accent-soft); border-color: var(--gt-accent); }
[data-theme="dark"] .gt-theme-toggle .gt-toggle-thumb { transform: translateX(20px); color: var(--gt-accent); background: var(--gt-side-bg); }
.gt-theme-toggle .icon-sun { display: block; }
.gt-theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .gt-theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .gt-theme-toggle .icon-moon { display: block; }
/* --------------------------------------------------------------------------
5. SIDEBAR PRINCIPAL
-------------------------------------------------------------------------- */
.main-sidebar,
.left-side {
box-shadow: 4px 0 24px rgba(0, 0, 0, .18);
}
[data-theme="dark"] .main-sidebar,
[data-theme="dark"] .left-side {
background: var(--gt-side-bg) !important;
}
.sidebar { background: transparent !important; padding-bottom: 20px; }
.sidebar-mini.sidebar-collapse .main-sidebar { box-shadow: none; }
.user-panel {
padding: 18px 15px !important;
border-bottom: 1px solid var(--gt-side-border) !important;
margin-bottom: 6px;
}
.user-panel > .image .svg-icon,
.skin-black .sidebar .user-panel > .image > svg { color: var(--gt-side-text); }
.user-panel > .image img,
.user-panel .user-thumbnail {
border-radius: var(--gt-r-md) !important;
border: 2px solid var(--gt-side-border);
}
.user-panel > .info,
.user-panel > .info > a {
color: var(--gt-side-text) !important;
}
.user-panel > .info > p.username {
color: #fff !important;
font-weight: 700 !important;
font-family: var(--gt-font-display);
}
.user-panel > .info > a .fa.user-status-dot { color: var(--gt-accent) !important; font-size: 9px; }
.sidebar-menu { padding: 6px 10px; }
.sidebar-menu > li {
margin-bottom: 2px;
}
.sidebar-menu > li > a,
.skin-black .sidebar-menu > li > a {
color: var(--gt-side-text) !important;
border-radius: var(--gt-r-sm) !important;
padding: 10px 12px !important;
font-weight: 500;
font-size: 13.5px;
border-left: none !important;
display: flex;
align-items: center;
gap: 12px;
}
.sidebar-menu > li > a > .svg-icon,
.sidebar-menu > li > a > svg {
width: 18px; height: 18px;
flex: 0 0 auto;
color: var(--gt-side-icon);
fill: var(--gt-side-icon);
transition: color var(--gt-fast);
}
.sidebar-menu > li > a > span:not(.label) { flex: 1; }
.sidebar-menu > li > a > .fa.pull-right,
.sidebar-menu > li > a > i.fa {
color: var(--gt-side-icon);
transition: transform var(--gt-fast);
}
.sidebar-menu > li:hover > a,
.sidebar-menu > li > a:hover,
.sidebar-menu > li > a:focus,
.skin-black .sidebar-menu > li:hover > a {
background: rgba(255, 255, 255, .06) !important;
color: #fff !important;
}
.sidebar-menu > li:hover > a > .svg-icon,
.sidebar-menu > li:hover > a svg { color: #fff; fill: #fff; }
.sidebar-menu > li.active > a,
.sidebar-menu > li.active.treeview > a,
.skin-black .sidebar-menu > li.active > a,
.skin-black .sidebar-menu > li.active.treeview > a {
background: var(--gt-side-active-bg) !important;
color: var(--gt-side-text-active) !important;
border-left: none !important;
box-shadow: inset 3px 0 0 var(--gt-side-active-border);
font-weight: 700;
}
.sidebar-menu > li.active > a > .svg-icon,
.sidebar-menu > li.active > a svg { color: var(--gt-accent) !important; fill: var(--gt-accent) !important; }
.sidebar-menu li.treeview-menu {
background: rgba(0, 0, 0, .18) !important;
border-radius: var(--gt-r-sm);
margin: 2px 0 6px 0;
padding: 4px !important;
}
.sidebar-menu > li > .treeview-menu {
background: rgba(0, 0, 0, .18) !important;
border-radius: var(--gt-r-sm);
margin: 2px 4px 6px 4px;
padding: 4px !important;
}
.sidebar-menu .treeview-menu > li > a {
color: var(--gt-side-text) !important;
padding: 8px 12px 8px 38px !important;
border-radius: var(--gt-r-xs) !important;
font-size: 13px;
display: flex;
align-items: center;
gap: 10px;
}
.sidebar-menu .treeview-menu > li > a > .svg-icon { width: 15px; height: 15px; color: var(--gt-side-icon); fill: var(--gt-side-icon); }
.sidebar-menu .treeview-menu > li.active > a,
.sidebar-menu .treeview-menu > li > a:hover {
background: rgba(255, 255, 255, .07) !important;
color: #fff !important;
}
.sidebar-menu .treeview-menu > li.active > a { color: var(--gt-accent) !important; font-weight: 600; }
#sidebar-bottom { height: 10px; }
/* El buscador debe ocultarse en modo mini-colapsado (igual que AdminLTE oculta
.sidebar-form), o queda desbordado y tapa los submenús flotantes. */
.sidebar-mini.sidebar-collapse .sidebar-search,
.sidebar-mini.sidebar-collapse .sidebar-search-empty {
display: none !important;
}
/* ---- Sidebar colapsado (mini): geometría del flyout ----------------------
AdminLTE posiciona el flyout en `left: 50px` medido desde el . Como
esta capa añadió `padding: 6px 10px` a .sidebar-menu, el empezaba
10px a la derecha y el flyout aparecía separado de la barra: al mover el
mouse hacia él se cruzaba ese hueco muerto, se perdía el :hover y el menú
se cerraba antes de poder hacer clic. Se anula el padding lateral en modo
mini y se recalcula el desplazamiento. */
@media (min-width: 768px) {
.sidebar-mini.sidebar-collapse .sidebar-menu {
padding-left: 0 !important;
padding-right: 0 !important;
}
.sidebar-mini.sidebar-collapse .sidebar-menu > li {
margin-bottom: 0;
}
.sidebar-mini.sidebar-collapse .sidebar-menu > li > a {
position: relative;
z-index: 1;
justify-content: center;
gap: 0 !important;
padding: 12px 0 !important;
border-radius: 0 !important;
width: var(--gt-sidebar-mini-w);
}
/* Etiqueta flotante del elemento (nivel 1) */
.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span:not(.pull-right) {
left: var(--gt-sidebar-mini-w) !important;
top: 0 !important;
width: var(--gt-flyout-w) !important;
min-height: 100%;
margin-left: 0 !important;
display: flex !important;
align-items: center;
padding: 10px 16px !important;
/* `background-color: inherit` de AdminLTE resolvía a transparente, así
que el texto quedaba flotando ilegible sobre el contenido. */
background: var(--gt-side-bg-2) !important;
color: #fff !important;
font-weight: 600;
border-radius: 0 var(--gt-r-sm) 0 0;
box-shadow: var(--gt-shadow-lg);
/* Los rótulos largos se ajustan en vez de desbordarse. */
white-space: normal !important;
overflow-wrap: anywhere;
line-height: 1.25;
z-index: 901;
}
/* En elementos sin submenú, la etiqueta redondea también abajo. */
.sidebar-mini.sidebar-collapse .sidebar-menu > li:not(.treeview):hover > a > span:not(.pull-right) {
border-radius: 0 var(--gt-r-sm) var(--gt-r-sm) 0;
}
/* Submenú flotante (nivel 2) */
.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
left: var(--gt-sidebar-mini-w) !important;
width: var(--gt-flyout-w) !important;
/* AdminLTE lo fijaba en `top: 30px`; las filas ahora miden ~44px, así
que el submenú se montaba encima de la etiqueta. */
top: 100% !important;
margin-left: 0 !important;
margin-top: 0 !important;
padding: 6px !important;
border-radius: 0 0 var(--gt-r-sm) var(--gt-r-sm) !important;
background: var(--gt-side-bg-2) !important;
box-shadow: var(--gt-shadow-lg);
pointer-events: auto !important;
z-index: 900 !important;
}
/* Cuando el elemento tiene etiqueta visible, el submenú arranca debajo. */
.sidebar-mini.sidebar-collapse .sidebar-menu > li.treeview:hover > a > span:not(.pull-right) {
border-radius: 0 var(--gt-r-sm) 0 0;
}
.sidebar-mini.sidebar-collapse .sidebar-menu .treeview-menu > li > a {
padding: 8px 12px !important;
white-space: normal !important;
overflow-wrap: anywhere;
line-height: 1.3;
}
/* Puente invisible que cubre cualquier holgura entre la barra y el
flyout, para que el hover no se pierda al desplazar el mouse. */
.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover::after {
content: "";
position: absolute;
top: 0;
left: 100%;
width: 14px;
height: 100%;
z-index: 899;
}
/* El contenedor no debe recortar los flyouts. */
.sidebar-mini.sidebar-collapse .sidebar,
.sidebar-mini.sidebar-collapse .sidebar-menu,
.sidebar-mini.sidebar-collapse .main-sidebar {
overflow: visible !important;
}
}
/* Overlay para modo móvil (offcanvas) */
.gt-sidebar-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(6, 10, 18, .55);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
z-index: 1030;
}
body.sidebar-open .gt-sidebar-overlay { display: block; }
/* ---- Sidebar en móvil: cajón (drawer) real -------------------------------
AdminLTE ocultaba la barra con `translate(-180px)` porque medía 180px de
ancho. Esta capa la ensanchó a 270px sin tocar el desplazamiento, así que
quedaban ~90px de barra permanentemente encima del contenido (esto es lo
que tapaba pagos_create_form en el celular). Ahora se desplaza el 100% de
su ancho y el contenido ya no se empuja: se usa overlay, que además evita
el scroll horizontal. */
@media (max-width: 767px) {
.main-sidebar,
.left-side {
z-index: 1041 !important;
width: var(--gt-sidebar-mobile-w) !important;
max-width: 86vw !important;
padding-top: 0 !important;
top: 0 !important;
height: 100% !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
transform: translate3d(-100%, 0, 0) !important;
transition: transform var(--gt-med) !important;
}
body.sidebar-open .main-sidebar,
body.sidebar-open .left-side {
transform: translate3d(0, 0, 0) !important;
box-shadow: var(--gt-shadow-lg);
}
/* El contenido ya no se desplaza al abrir el menú. */
.sidebar-open .content-wrapper,
.sidebar-open .right-side,
.sidebar-open .main-footer {
transform: none !important;
margin-left: 0 !important;
}
.gt-sidebar-overlay { z-index: 1040; }
/* Bloquea el scroll del fondo mientras el cajón está abierto. */
body.sidebar-open { overflow: hidden; }
}
/* Scrolling sidebar (accesos rápidos a reportes) */
.scrolling-sidebar {
background: var(--gt-surface) !important;
color: var(--gt-text) !important;
box-shadow: var(--gt-shadow-lg);
}
.scrolling-sidebar-title {
color: var(--gt-text) !important;
font-family: var(--gt-font-display);
font-weight: 800;
padding: 16px 18px !important;
border-bottom: 1px solid var(--gt-border);
}
.scrolling-sidebar .list-group-item {
background: transparent !important;
border: none !important;
}
.scrolling-sidebar-mask { background: rgba(6, 10, 18, .5) !important; }
/* --------------------------------------------------------------------------
6. FOOTER
-------------------------------------------------------------------------- */
.main-footer {
background: transparent !important;
border-top: 1px solid var(--gt-border) !important;
color: var(--gt-text-soft) !important;
padding: 14px 22px !important;
font-size: 12.5px;
}
.main-footer .copyright a { color: var(--gt-text-muted) !important; font-weight: 600; }
/* --------------------------------------------------------------------------
7. BOTONES
-------------------------------------------------------------------------- */
.btn {
border-radius: var(--gt-r-sm) !important;
font-weight: 600 !important;
letter-spacing: .01em;
border-width: 1px !important;
box-shadow: none !important;
transition: background var(--gt-fast), border-color var(--gt-fast), color var(--gt-fast), transform var(--gt-fast), box-shadow var(--gt-fast) !important;
}
.btn:active { transform: translateY(1px); }
.btn-lg { border-radius: var(--gt-r-md) !important; }
.btn.r-50, .btn.r-100 { border-radius: var(--gt-r-pill) !important; }
.btn-default {
background: var(--gt-surface) !important;
border-color: var(--gt-border) !important;
color: var(--gt-text) !important;
}
.btn-default:hover, .btn-default:focus {
background: var(--gt-surface-hover) !important;
border-color: var(--gt-border-strong) !important;
color: var(--gt-text) !important;
}
.btn-primary {
background: var(--gt-violet) !important;
border-color: var(--gt-violet) !important;
color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus { background: #4f52e0 !important; border-color: #4f52e0 !important; }
.btn-success {
background: var(--gt-accent) !important;
border-color: var(--gt-accent) !important;
color: var(--gt-accent-contrast) !important;
}
.btn-success:hover, .btn-success:focus { background: var(--gt-accent-600) !important; border-color: var(--gt-accent-600) !important; }
.btn-info {
background: var(--gt-blue) !important;
border-color: var(--gt-blue) !important;
color: #fff !important;
}
.btn-info:hover, .btn-info:focus { background: #2f6fe0 !important; border-color: #2f6fe0 !important; }
.btn-warning {
background: var(--gt-amber) !important;
border-color: var(--gt-amber) !important;
color: #241a02 !important;
}
.btn-warning:hover, .btn-warning:focus { background: #dd960a !important; border-color: #dd960a !important; }
.btn-danger {
background: var(--gt-red) !important;
border-color: var(--gt-red) !important;
color: #fff !important;
}
.btn-danger:hover, .btn-danger:focus { background: #dc2626 !important; border-color: #dc2626 !important; }
.btn-link { color: var(--gt-accent) !important; font-weight: 600 !important; }
.btn.disabled, .btn[disabled] { opacity: .55 !important; }
.btn-group .btn { border-radius: var(--gt-r-sm) !important; }
.btn-group-sm > .btn, .btn-sm { border-radius: var(--gt-r-xs) !important; }
.action-button-sm .svg-icon { width: 15px; height: 15px; }
/* --------------------------------------------------------------------------
8. FORMULARIOS
-------------------------------------------------------------------------- */
label {
color: var(--gt-text) !important;
font-weight: 600 !important;
font-size: 13px;
}
.form-control {
background: var(--gt-surface) !important;
border: 1px solid var(--gt-border) !important;
color: var(--gt-text) !important;
border-radius: var(--gt-r-sm) !important;
box-shadow: none !important;
height: 40px;
padding: 8px 12px !important;
transition: border-color var(--gt-fast), box-shadow var(--gt-fast) !important;
}
textarea.form-control { height: auto !important; }
.form-control::placeholder { color: var(--gt-text-soft) !important; opacity: 1; }
.form-control:focus {
border-color: var(--gt-accent) !important;
box-shadow: var(--gt-shadow-focus) var(--gt-accent-ring) !important;
}
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
background: var(--gt-surface-2) !important;
color: var(--gt-text-soft) !important;
}
.input-group-addon {
background: var(--gt-surface-2) !important;
border: 1px solid var(--gt-border) !important;
color: var(--gt-text-muted) !important;
border-radius: var(--gt-r-sm);
}
.input-group input.input-login,
.input-login .form-control { border-radius: 0 var(--gt-r-sm) var(--gt-r-sm) 0 !important; }
.checkbox label, .radio label { font-weight: 500 !important; }
.has-error .form-control { border-color: var(--gt-red) !important; }
.has-error .help-block, .has-error .control-label { color: var(--gt-red) !important; }
.help-block { color: var(--gt-text-soft) !important; }
/* Select2 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
background: var(--gt-surface) !important;
border: 1px solid var(--gt-border) !important;
border-radius: var(--gt-r-sm) !important;
min-height: 40px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
color: var(--gt-text) !important;
line-height: 38px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 38px !important; }
.select2-dropdown {
background: var(--gt-surface) !important;
border: 1px solid var(--gt-border) !important;
border-radius: var(--gt-r-md) !important;
box-shadow: var(--gt-shadow-md) !important;
overflow: hidden;
}
.select2-search--dropdown .select2-search__field {
background: var(--gt-surface-2) !important;
border: 1px solid var(--gt-border) !important;
color: var(--gt-text) !important;
border-radius: var(--gt-r-xs) !important;
}
.select2-results__option { color: var(--gt-text) !important; }
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background: var(--gt-accent) !important;
color: var(--gt-accent-contrast) !important;
}
.select2-container--default .select2-results__option[aria-selected=true] { background: var(--gt-surface-hover) !important; }
.select2-container--default .select2-selection--multiple .select2-selection__choice {
background: var(--gt-accent-soft) !important;
border: 1px solid var(--gt-accent-soft-strong) !important;
color: var(--gt-accent-700) !important;
border-radius: var(--gt-r-xs) !important;
}
/* Datepicker / Timepicker */
.datepicker.dropdown-menu, .bootstrap-timepicker-widget {
background: var(--gt-surface) !important;
border: 1px solid var(--gt-border) !important;
border-radius: var(--gt-r-md) !important;
box-shadow: var(--gt-shadow-md) !important;
color: var(--gt-text) !important;
}
.datepicker table tr td, .datepicker table tr th { color: var(--gt-text) !important; }
.datepicker table tr td.old, .datepicker table tr td.new { color: var(--gt-text-soft) !important; }
.datepicker table tr td.active.active,
.datepicker table tr td.today { background: var(--gt-accent) !important; color: var(--gt-accent-contrast) !important; background-image: none !important; }
.datepicker table tr td:hover { background: var(--gt-surface-hover) !important; }
.bootstrap-timepicker-widget table td input { background: var(--gt-surface-2) !important; color: var(--gt-text) !important; border: 1px solid var(--gt-border) !important; }
/* --------------------------------------------------------------------------
9. CAJAS / TARJETAS (box, small-box, info-box)
-------------------------------------------------------------------------- */
.box {
background: var(--gt-surface) !important;
border-top: none !important;
border: 1px solid var(--gt-border) !important;
border-radius: var(--gt-r-lg) !important;
box-shadow: var(--gt-shadow-sm) !important;
margin-bottom: 22px;
}
.box.box-solid { border: 1px solid var(--gt-border) !important; }
.box-header {
padding: 18px 20px !important;
border-radius: var(--gt-r-lg) var(--gt-r-lg) 0 0;
}
.box-header.with-border { border-bottom: 1px solid var(--gt-border) !important; }
.box-title {
font-size: 15.5px !important;
font-weight: 800 !important;
}
.box-body { padding: 20px; color: var(--gt-text); }
.box-body.no-padding { padding: 0 !important; }
.box-footer {
background: var(--gt-surface-2) !important;
border-top: 1px solid var(--gt-border) !important;
border-radius: 0 0 var(--gt-r-lg) var(--gt-r-lg);
padding: 14px 20px !important;
}
/* Solo los botones-icono de la caja (.btn-box-tool) van sin fondo. Antes
esta regla alcanzaba a TODOS los .btn dentro de .box-tools, así que los
botones reales (btn-info, btn-danger, btn-success…) perdían su relleno y
quedaban con texto blanco sobre cabecera clara: invisibles en modo claro.
Es lo que ocurría en product.php y expired.php. */
.box-header .box-tools .btn-box-tool { background: transparent !important; }
/* Color de acento superior según variante box- (sutil, moderno) */
.box.box-primary { border-top: 3px solid var(--gt-violet) !important; }
.box.box-info { border-top: 3px solid var(--gt-blue) !important; }
.box.box-success { border-top: 3px solid var(--gt-accent) !important; }
.box.box-warning { border-top: 3px solid var(--gt-amber) !important; }
.box.box-danger { border-top: 3px solid var(--gt-red) !important; }
.nav-tabs-custom {
background: var(--gt-surface) !important;
border-radius: var(--gt-r-lg) !important;
box-shadow: var(--gt-shadow-sm) !important;
border: 1px solid var(--gt-border) !important;
}
.nav-tabs-custom > .nav-tabs {
border-bottom: 1px solid var(--gt-border) !important;
border-radius: var(--gt-r-lg) var(--gt-r-lg) 0 0;
background: var(--gt-surface-2) !important;
}
.nav-tabs-custom > .nav-tabs > li > a { color: var(--gt-text-muted) !important; font-weight: 600; border-radius: 0 !important; }
.nav-tabs-custom > .nav-tabs > li.active > a {
color: var(--gt-accent) !important;
background: var(--gt-surface) !important;
border-color: transparent !important;
}
.nav-tabs-custom > .nav-tabs > li.active { border-top-color: var(--gt-accent) !important; }
.small-box {
border-radius: var(--gt-r-lg) !important;
box-shadow: var(--gt-shadow-sm) !important;
overflow: hidden;
}
.small-box > .inner { padding: 20px !important; }
.small-box h3 { font-family: var(--gt-font-display) !important; font-weight: 800 !important; font-size: 28px !important; }
.small-box .icon { opacity: .35 !important; }
.small-box > .small-box-footer {
background: rgba(0, 0, 0, .08) !important;
color: #fff !important;
position: relative;
z-index: 2;
}
.info-box {
background: var(--gt-surface) !important;
border: 1px solid var(--gt-border) !important;
border-radius: var(--gt-r-lg) !important;
box-shadow: var(--gt-shadow-sm) !important;
}
.info-box-icon { border-radius: var(--gt-r-lg) 0 0 var(--gt-r-lg) !important; }
.info-box-text { color: var(--gt-text-muted) !important; font-weight: 600; }
.info-box-number { color: var(--gt-text) !important; font-family: var(--gt-font-display); font-weight: 800; }
.progress { background: var(--gt-surface-2) !important; border-radius: var(--gt-r-pill) !important; overflow: hidden; }
.progress-bar { background-color: var(--gt-accent) !important; }
.callout {
border-radius: var(--gt-r-md) !important;
background: var(--gt-surface-2) !important;
border-left-width: 4px !important;
}
/* --------------------------------------------------------------------------
10. TABLAS
-------------------------------------------------------------------------- */
.table { color: var(--gt-text) !important; }
.table > thead > tr > th {
border-bottom: 2px solid var(--gt-border) !important;
color: var(--gt-text-soft) !important;
font-size: 11.5px !important;
text-transform: uppercase;
letter-spacing: .04em;
font-weight: 700 !important;
background: var(--gt-surface-2) !important;
white-space: nowrap;
}
.table > tbody > tr > td, .table > tbody > tr > th {
border-top: 1px solid var(--gt-border) !important;
vertical-align: middle !important;
padding: 11px 12px !important;
}
.table-bordered, .table-bordered > thead > tr > th, .table-bordered > tbody > tr > td {
border: 1px solid var(--gt-border) !important;
}
.table-striped > tbody > tr:nth-of-type(odd) { background: var(--gt-surface-2) !important; }
.table-hover > tbody > tr:hover { background: var(--gt-surface-hover) !important; }
/* Filas/celdas contextuales de Bootstrap (.active/.success/.info/.warning/.danger):
por defecto usan fondos pasteles CLAROS fijos (ej. #f2dede, #dff0d8) que en
modo oscuro, combinados con el texto claro forzado de .table, quedaban
ilegibles -- tanto en reposo como (sobre todo) al pasar el mouse, donde el
propio Bootstrap compilado define un hover aún más específico que el
nuestro. Aquí se igualan esas reglas con selectores de la misma forma para
garantizar que ganen, con tintes oscuros y texto claro coherente. */
[data-theme="dark"] .table > tbody > tr.active > td,
[data-theme="dark"] .table > tbody > tr > td.active,
[data-theme="dark"] .table > tbody > tr.active > th {
background-color: rgba(255, 255, 255, .06) !important;
color: var(--gt-text) !important;
}
[data-theme="dark"] .table > tbody > tr.success > td,
[data-theme="dark"] .table > tbody > tr > td.success,
[data-theme="dark"] .table > tbody > tr.success > th {
background-color: rgba(16, 185, 129, .16) !important;
color: #b7f5da !important;
}
[data-theme="dark"] .table > tbody > tr.info > td,
[data-theme="dark"] .table > tbody > tr > td.info,
[data-theme="dark"] .table > tbody > tr.info > th {
background-color: rgba(59, 130, 246, .16) !important;
color: #bcdcff !important;
}
[data-theme="dark"] .table > tbody > tr.warning > td,
[data-theme="dark"] .table > tbody > tr > td.warning,
[data-theme="dark"] .table > tbody > tr.warning > th {
background-color: rgba(245, 158, 11, .16) !important;
color: #ffdca3 !important;
}
[data-theme="dark"] .table > tbody > tr.danger > td,
[data-theme="dark"] .table > tbody > tr > td.danger,
[data-theme="dark"] .table > tbody > tr.danger > th {
background-color: rgba(239, 68, 68, .16) !important;
color: #ffc4c4 !important;
}
/* Mismas filas, al pasar el mouse (hover) */
[data-theme="dark"] .table-hover > tbody > tr.active:hover > td,
[data-theme="dark"] .table-hover > tbody > tr:hover > .active,
[data-theme="dark"] .table-hover > tbody > tr > td.active:hover {
background-color: rgba(255, 255, 255, .1) !important;
color: var(--gt-text) !important;
}
[data-theme="dark"] .table-hover > tbody > tr.success:hover > td,
[data-theme="dark"] .table-hover > tbody > tr:hover > .success,
[data-theme="dark"] .table-hover > tbody > tr > td.success:hover {
background-color: rgba(16, 185, 129, .26) !important;
color: #d2fbe9 !important;
}
[data-theme="dark"] .table-hover > tbody > tr.info:hover > td,
[data-theme="dark"] .table-hover > tbody > tr:hover > .info,
[data-theme="dark"] .table-hover > tbody > tr > td.info:hover {
background-color: rgba(59, 130, 246, .26) !important;
color: #dbebff !important;
}
[data-theme="dark"] .table-hover > tbody > tr.warning:hover > td,
[data-theme="dark"] .table-hover > tbody > tr:hover > .warning,
[data-theme="dark"] .table-hover > tbody > tr > td.warning:hover {
background-color: rgba(245, 158, 11, .26) !important;
color: #ffe8c2 !important;
}
[data-theme="dark"] .table-hover > tbody > tr.danger:hover > td,
[data-theme="dark"] .table-hover > tbody > tr:hover > .danger,
[data-theme="dark"] .table-hover > tbody > tr > td.danger:hover {
background-color: rgba(239, 68, 68, .26) !important;
color: #ffdada !important;
}
.table > tfoot > tr > td, .table > tfoot > tr > th {
border-top: 2px solid var(--gt-border) !important;
font-weight: 700;
}
/* DataTables */
.dataTables_wrapper { color: var(--gt-text) !important; }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
background: var(--gt-surface) !important;
border: 1px solid var(--gt-border) !important;
color: var(--gt-text) !important;
border-radius: var(--gt-r-sm) !important;
padding: 6px 10px !important;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter label { color: var(--gt-text-muted) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
border-radius: var(--gt-r-sm) !important;
border: 1px solid transparent !important;
color: var(--gt-text-muted) !important;
margin: 0 2px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
background: var(--gt-accent) !important;
border-color: var(--gt-accent) !important;
color: var(--gt-accent-contrast) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
background: var(--gt-surface-hover) !important;
color: var(--gt-text) !important;
border-color: var(--gt-border) !important;
}
.dataTables_wrapper .dt-buttons .dt-button,
.dataTables_wrapper .dt-button {
background: var(--gt-surface) !important;
border: 1px solid var(--gt-border) !important;
color: var(--gt-text) !important;
border-radius: var(--gt-r-sm) !important;
}
.dataTables_wrapper .dt-buttons .dt-button:hover { background: var(--gt-surface-hover) !important; }
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after { opacity: .55; }
.pagination > li > a, .pagination > li > span {
color: var(--gt-text-muted) !important;
background: var(--gt-surface) !important;
border: 1px solid var(--gt-border) !important;
}
.pagination > .active > a, .pagination > .active > span {
background: var(--gt-accent) !important;
border-color: var(--gt-accent) !important;
color: var(--gt-accent-contrast) !important;
}
.pagination > li:first-child > a, .pagination > li:first-child > span { border-radius: var(--gt-r-sm) 0 0 var(--gt-r-sm) !important; }
.pagination > li:last-child > a, .pagination > li:last-child > span { border-radius: 0 var(--gt-r-sm) var(--gt-r-sm) 0 !important; }
/* --------------------------------------------------------------------------
11. ALERTAS / BADGES / LABELS
-------------------------------------------------------------------------- */
.alert {
border-radius: var(--gt-r-md) !important;
border: 1px solid transparent !important;
font-weight: 500;
}
.alert-success { background: var(--gt-accent-soft) !important; color: var(--gt-accent-700) !important; border-color: var(--gt-accent-soft-strong) !important; }
.alert-danger { background: var(--gt-red-soft) !important; color: #b91c1c !important; border-color: rgba(239,68,68,.25) !important; }
[data-theme="dark"] .alert-danger { color: #fca5a5 !important; }
.alert-warning { background: rgba(245, 158, 11, .12) !important; color: #92620a !important; border-color: rgba(245,158,11,.3) !important; }
[data-theme="dark"] .alert-warning { color: #fbbf74 !important; }
.alert-info { background: rgba(59, 130, 246, .1) !important; color: #1d4ed8 !important; border-color: rgba(59,130,246,.25) !important; }
[data-theme="dark"] .alert-info { color: #93c5fd !important; }
.label { border-radius: var(--gt-r-xs) !important; font-weight: 700 !important; padding: 3px 8px !important; }
.label-success { background: var(--gt-accent) !important; color: var(--gt-accent-contrast) !important; }
.label-danger { background: var(--gt-red) !important; }
.label-warning { background: var(--gt-amber) !important; color: #241a02 !important; }
.label-info { background: var(--gt-blue) !important; }
.label-primary { background: var(--gt-violet) !important; }
.label-default { background: var(--gt-surface-2) !important; color: var(--gt-text-muted) !important; border: 1px solid var(--gt-border); }
.badge { border-radius: var(--gt-r-pill) !important; font-weight: 700 !important; }
/* --------------------------------------------------------------------------
12. MODALES / DROPDOWNS / TOOLTIPS
-------------------------------------------------------------------------- */
.modal-content {
background: var(--gt-surface) !important;
color: var(--gt-text) !important;
border-radius: var(--gt-r-lg) !important;
border: 1px solid var(--gt-border) !important;
box-shadow: var(--gt-shadow-lg) !important;
}
.modal-header {
border-bottom: 1px solid var(--gt-border) !important;
padding: 18px 22px !important;
}
.modal-title { font-family: var(--gt-font-display) !important; font-weight: 800 !important; }
.modal-body { padding: 20px 22px !important; }
.modal-footer {
border-top: 1px solid var(--gt-border) !important;
padding: 14px 22px !important;
}
.modal-backdrop { background: #050810 !important; }
.modal-backdrop.in { opacity: .65 !important; }
.close { color: var(--gt-text) !important; text-shadow: none !important; opacity: .6; }
.close:hover { opacity: 1; color: var(--gt-text) !important; }
.dropdown-menu {
background: var(--gt-surface) !important;
border: 1px solid var(--gt-border) !important;
border-radius: var(--gt-r-md) !important;
box-shadow: var(--gt-shadow-md) !important;
padding: 6px !important;
}
.dropdown-menu > li > a { color: var(--gt-text) !important; border-radius: var(--gt-r-xs) !important; padding: 8px 10px !important; }
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background: var(--gt-surface-hover) !important; }
.dropdown-menu .divider { background: var(--gt-border) !important; }
.tooltip-inner { background: var(--gt-text) !important; color: var(--gt-bg) !important; border-radius: var(--gt-r-xs) !important; }
.popover {
background: var(--gt-surface) !important;
border: 1px solid var(--gt-border) !important;
border-radius: var(--gt-r-md) !important;
box-shadow: var(--gt-shadow-md) !important;
color: var(--gt-text) !important;
}
.popover-title { background: var(--gt-surface-2) !important; border-bottom: 1px solid var(--gt-border) !important; }
/* Toastr */
#toast-container > div { border-radius: var(--gt-r-md) !important; box-shadow: var(--gt-shadow-lg) !important; opacity: .98 !important; }
.toast-success { background-color: var(--gt-accent-600) !important; }
.toast-error { background-color: var(--gt-red) !important; }
.toast-info { background-color: var(--gt-blue) !important; }
.toast-warning { background-color: var(--gt-amber) !important; }
/* Sweetalert (v1) */
.sweet-alert {
background: var(--gt-surface) !important;
color: var(--gt-text) !important;
border-radius: var(--gt-r-lg) !important;
box-shadow: var(--gt-shadow-lg) !important;
}
.sweet-alert h2 { color: var(--gt-text) !important; }
.sweet-alert p { color: var(--gt-text-muted) !important; }
/* --------------------------------------------------------------------------
13. LOGIN / LOCKSCREEN / SELECCIÓN DE TIENDA
-------------------------------------------------------------------------- */
/* El fondo del login usa tokens propios (--gt-login-*) en lugar de
--gt-side-bg, que permanece oscuro en ambos modos. Así el modo claro
sí se aclara por completo. */
body.login-page {
background: var(--gt-login-bg) !important;
background-attachment: fixed !important;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
position: relative;
overflow-x: hidden;
}
/* Capa decorativa: aurora suave que da profundidad sin tapar el formulario. */
body.login-page::before {
content: "";
position: fixed;
inset: -20% -10%;
background: var(--gt-login-aurora);
filter: blur(70px);
opacity: var(--gt-login-aurora-opacity);
pointer-events: none;
z-index: 0;
animation: gtAuroraDrift 22s ease-in-out infinite alternate;
}
/* Rejilla técnica muy tenue, solo en oscuro, para dar textura. */
body.login-page::after {
content: "";
position: fixed;
inset: 0;
background-image:
linear-gradient(var(--gt-login-grid) 1px, transparent 1px),
linear-gradient(90deg, var(--gt-login-grid) 1px, transparent 1px);
background-size: 46px 46px;
-webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 0%, transparent 72%);
mask-image: radial-gradient(ellipse at 50% 40%, #000 0%, transparent 72%);
pointer-events: none;
z-index: 0;
}
@keyframes gtAuroraDrift {
0% { transform: translate3d(0, 0, 0) scale(1); }
100% { transform: translate3d(2%, -3%, 0) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
body.login-page::before { animation: none; }
}
body.login-page > * { position: relative; z-index: 1; }
.login-box, .login-card {
background: var(--gt-login-card) !important;
-webkit-backdrop-filter: blur(18px) saturate(140%);
backdrop-filter: blur(18px) saturate(140%);
border-radius: var(--gt-r-xl) !important;
box-shadow: var(--gt-login-card-shadow) !important;
border: 1px solid var(--gt-login-card-border) !important;
width: 380px;
max-width: 100%;
padding: 8px 0 0 0;
overflow: hidden;
}
/* Filo superior de acento: detalle de marca en ambos modos. */
.login-box::before, .login-card::before {
content: "";
display: block;
height: 3px;
margin: -8px 0 0;
background: linear-gradient(90deg, var(--gt-accent), var(--gt-teal), var(--gt-violet));
}
.login-logo {
text-align: center;
padding: 34px 24px 10px;
}
.login-logo .logo-img img { max-width: 92px; margin-bottom: 10px; }
.login-logo .store-name {
color: var(--gt-text) !important;
font-family: var(--gt-font-display);
font-weight: 800;
font-size: 19px;
}
.login-box-body { padding: 14px 30px 26px !important; }
.login-box-msg {
text-align: center;
color: var(--gt-text-soft) !important;
margin-bottom: 18px !important;
text-transform: uppercase;
font-size: 12px;
letter-spacing: .08em;
}
.login-box-body .svg-icon { width: 17px; height: 17px; color: var(--gt-text-soft); }
.alert-login { border-radius: var(--gt-r-md) !important; margin: 0 30px 14px !important; }
.btn-login {
height: 46px !important;
border-radius: var(--gt-r-sm) !important;
font-size: 15px !important;
margin-top: 6px;
box-shadow: var(--gt-shadow-sm) !important;
}
.login-box .copyright, .login-card .copyright {
text-align: center;
padding: 14px 20px 22px;
color: var(--gt-text-soft) !important;
font-size: 12px;
}
.login-box .copyright a, .login-card .copyright a { color: var(--gt-text-muted) !important; }
/* Selección de tienda */
.store-list { max-height: 360px; }
.store-list .list-group-item {
background: var(--gt-surface) !important;
border: none !important;
border-bottom: 1px solid var(--gt-border) !important;
padding: 0 !important;
}
.store-list .list-group-item a.activate-store {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 22px;
color: var(--gt-text) !important;
font-weight: 600;
transition: background var(--gt-fast);
}
.store-list .list-group-item a.activate-store:hover { background: var(--gt-surface-hover) !important; }
.store-icon .svg-icon { width: 20px; height: 20px; color: var(--gt-accent); }
.store-name { flex: 1; }
/* Lockscreen (hereda .login-page) */
.lockscreen-logo, .lockscreen-name { color: var(--gt-text) !important; }
.lockscreen-item {
background: var(--gt-surface) !important;
border-radius: var(--gt-r-xl) !important;
box-shadow: var(--gt-shadow-lg) !important;
border: 1px solid var(--gt-border);
}
.lockscreen-image img { border-radius: 50% !important; box-shadow: var(--gt-shadow-md); }
.lockscreen-credentials .form-control { background: var(--gt-surface-2) !important; }
/* --------------------------------------------------------------------------
14. PANTALLA POS
-------------------------------------------------------------------------- */
.pos-body, body.right-panel, body.left-panel { background: var(--gt-bg) !important; }
#pos-content, .pos-wrapper, .products-content {
background: transparent !important;
}
.product-item, .item-box, .single-product {
background: var(--gt-surface) !important;
border: 1px solid var(--gt-border) !important;
border-radius: var(--gt-r-md) !important;
box-shadow: var(--gt-shadow-xs) !important;
transition: transform var(--gt-fast), box-shadow var(--gt-fast), border-color var(--gt-fast) !important;
overflow: hidden;
}
.product-item:hover, .item-box:hover, .single-product:hover {
transform: translateY(-2px);
box-shadow: var(--gt-shadow-md) !important;
border-color: var(--gt-accent) !important;
}
.product-item .name, .item-box .name { color: var(--gt-text) !important; font-weight: 600; }
.product-item .price, .item-box .price { color: var(--gt-accent) !important; font-weight: 800; }
.pos-category, .category-list li, .nav-category > li > a {
border-radius: var(--gt-r-pill) !important;
}
.category-list li.active a, .nav-category > li.active > a {
background: var(--gt-accent) !important;
color: var(--gt-accent-contrast) !important;
}
.cart-panel, .order-panel, #cart, .side-panel {
background: var(--gt-surface) !important;
border-left: 1px solid var(--gt-border) !important;
}
.cart-item, .order-item-row { border-bottom: 1px solid var(--gt-border) !important; }
.cart-total, .order-summary {
background: var(--gt-surface-2) !important;
border-top: 1px solid var(--gt-border) !important;
}
.numpad button, .keypad button, .num-key {
background: var(--gt-surface) !important;
border: 1px solid var(--gt-border) !important;
color: var(--gt-text) !important;
border-radius: var(--gt-r-sm) !important;
}
.numpad button:hover, .keypad button:hover, .num-key:hover { background: var(--gt-surface-hover) !important; }
/* --------------------------------------------------------------------------
15. FILTER BOX / SEARCH PANEL
-------------------------------------------------------------------------- */
#filter-box, .filter-box {
background: var(--gt-surface) !important;
color: var(--gt-text) !important;
box-shadow: var(--gt-shadow-lg) !important;
border-left: 1px solid var(--gt-border) !important;
}
/* Perfect scrollbar rail (tema oscuro) */
.ps__rail-y, .ps__rail-x { background: transparent !important; }
.ps__thumb-y, .ps__thumb-x { background: var(--gt-scrollbar) !important; }
/* --------------------------------------------------------------------------
16. ICONOS SVG GENERALES
-------------------------------------------------------------------------- */
.svg-icon { fill: currentColor; }
[data-theme="dark"] .svg-icon:not(.gt-theme-toggle *) { filter: none; }
/* --------------------------------------------------------------------------
17. RESPONSIVE — MÓVIL Y TABLET
-------------------------------------------------------------------------- */
/* Tablets */
@media (max-width: 1024px) {
.content { padding: 8px 18px 20px !important; }
.box-header, .box-body { padding: 16px !important; }
.col-md-3, .col-md-4 { margin-bottom: 14px; }
}
/* Móviles y tablets pequeñas: sidebar off-canvas con overlay */
@media (max-width: 767px) {
.main-header .logo { width: auto !important; padding: 0 14px !important; }
.main-header .navbar { margin-left: 0 !important; }
.main-header .navbar-nav > li > a span.text { display: none; }
.main-header .navbar-nav > li.sell-btn > a { padding: 0 12px !important; }
.main-header .navbar-nav > li.sell-btn > a span.text { display: inline; }
.content-header > h1 { font-size: 18px !important; }
.box { border-radius: var(--gt-r-md) !important; margin-bottom: 14px; }
.box-header, .box-body, .box-footer { padding: 14px !important; }
.table-responsive { border: none !important; }
.modal-dialog { margin: 10px !important; }
.login-box, .login-card { border-radius: var(--gt-r-lg) !important; }
.login-box-body { padding: 10px 20px 20px !important; }
.btn { padding: 8px 14px !important; }
.small-box > .inner { padding: 16px !important; }
.small-box h3 { font-size: 22px !important; }
}
@media (max-width: 480px) {
.content { padding: 6px 12px 16px !important; }
.content-header { padding: 14px 12px 2px !important; }
.box-header, .box-body, .box-footer { padding: 12px !important; }
.gt-theme-toggle { padding: 0 8px !important; }
}
/* En pantallas muy pequeñas la app transforma las DataTables en "tarjetas"
apiladas (ver responsive.css: .dataTable td:before { content: attr(data-title) })
con colores fijos claros que no se adaptaban al modo oscuro. */
[data-theme="dark"] .dataTable tr {
border-color: var(--gt-border) !important;
background: var(--gt-surface) !important;
}
[data-theme="dark"] .dataTable td {
border-bottom-color: var(--gt-border) !important;
color: var(--gt-text) !important;
}
[data-theme="dark"] .dataTable td:before {
color: var(--gt-text) !important;
background: var(--gt-surface-2) !important;
}
/* Reporte resumen (#overview-report) también se convierte en tarjetas en
móvil con fondo blanco fijo. */
[data-theme="dark"] #overview-report table,
[data-theme="dark"] #overview-report table tr {
background: var(--gt-surface) !important;
}
[data-theme="dark"] #overview-report table td,
[data-theme="dark"] #overview-report table td.o-50 {
border-color: var(--gt-border) !important;
color: var(--gt-text) !important;
}
/* Píldoras de longitud/filtro de DataTables en móvil (≤610px, ver
responsive.css) usan un gris claro fijo. */
[data-theme="dark"] .dataTables_length,
[data-theme="dark"] .dataTables_filter {
background: var(--gt-surface-2) !important;
}
/* Mejora de zonas táctiles en pantallas táctiles */
@media (hover: none) and (pointer: coarse) {
.btn, .sidebar-menu > li > a, .dataTables_wrapper .dt-button, .paginate_button {
min-height: 40px;
}
}
/* --------------------------------------------------------------------------
18. UTILIDADES
-------------------------------------------------------------------------- */
.gt-text-muted { color: var(--gt-text-muted) !important; }
.gt-card-flat {
background: var(--gt-surface) !important;
border: 1px solid var(--gt-border) !important;
border-radius: var(--gt-r-lg) !important;
box-shadow: var(--gt-shadow-sm) !important;
}
/* --------------------------------------------------------------------------
19. TOGGLE DE TEMA FLOTANTE (pantallas sin topbar: login, lockscreen, etc.)
-------------------------------------------------------------------------- */
.gt-theme-toggle-floating {
position: fixed;
top: 18px;
right: 18px;
height: auto !important;
padding: 8px !important;
background: var(--gt-surface) !important;
border-radius: var(--gt-r-pill) !important;
box-shadow: var(--gt-shadow-md) !important;
border: 1px solid var(--gt-border) !important;
z-index: 60;
}
@media (max-width: 480px) {
.gt-theme-toggle-floating { top: 12px; right: 12px; }
}
/* --------------------------------------------------------------------------
20. SIDEBAR — BUSCADOR Y ENCABEZADOS DE SECCIÓN (mejora estructural real)
-------------------------------------------------------------------------- */
.sidebar-search {
position: relative;
margin: 4px 14px 10px;
}
.sidebar-search-icon {
position: absolute;
left: 11px;
top: 50%;
transform: translateY(-50%);
width: 15px;
height: 15px;
color: var(--gt-side-icon);
pointer-events: none;
}
.sidebar-search-input {
width: 100%;
background: rgba(255, 255, 255, .05);
border: 1px solid var(--gt-side-border);
color: #fff;
border-radius: var(--gt-r-pill);
padding: 8px 12px 8px 34px;
font-size: 12.5px;
outline: none;
transition: background var(--gt-fast), border-color var(--gt-fast);
}
.sidebar-search-input::placeholder { color: var(--gt-side-text); opacity: .8; }
.sidebar-search-input:focus {
background: rgba(255, 255, 255, .09);
border-color: var(--gt-accent);
}
.sidebar-menu > li.header {
padding: 14px 16px 6px !important;
font-size: 10.5px !important;
font-weight: 800 !important;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--gt-side-icon) !important;
background: transparent !important;
pointer-events: none;
}
.sidebar-menu > li.header:first-child { padding-top: 4px !important; }
/* Resultado del buscador: oculta elementos no coincidentes */
.sidebar-menu li.gt-search-hide { display: none !important; }
.sidebar-menu .treeview-menu.gt-search-open { display: block !important; }
/* Aviso de "sin resultados" */
.sidebar-search-empty {
display: none;
color: var(--gt-side-text);
font-size: 12px;
padding: 10px 20px;
text-align: center;
}
.sidebar-search-empty.is-visible { display: block; }
/* --------------------------------------------------------------------------
21. ACCESOS RÁPIDOS DEL DASHBOARD (action_buttons.php / .panel-app)
-------------------------------------------------------------------------- */
.panel-app {
background: var(--gt-surface) !important;
border: 1px solid var(--gt-border) !important;
border-radius: var(--gt-r-lg) !important;
box-shadow: var(--gt-shadow-xs) !important;
transition: transform var(--gt-fast), box-shadow var(--gt-fast), border-color var(--gt-fast) !important;
overflow: hidden;
}
.panel-app:hover {
transform: translateY(-3px);
box-shadow: var(--gt-shadow-md) !important;
border-color: var(--gt-accent) !important;
}
.panel-app .panel-body {
padding: 18px 12px !important;
}
.panel-app a.panel-app-link {
display: block;
text-decoration: none;
}
.panel-app .icon {
display: flex !important;
align-items: center;
justify-content: center;
margin: 0 auto 10px;
width: 52px;
height: 52px;
border-radius: var(--gt-r-md);
font-size: 24px;
line-height: 1;
color: var(--gt-accent);
/* Tinte de acento en ambos modos. El sprite icon.svg puede traer rellenos
fijos, así que en la sección 23 se normaliza su color por filtro; ya no
hace falta forzar un fondo claro en oscuro. */
background: var(--gt-accent-soft);
border: 1px solid transparent;
transition: background var(--gt-fast), transform var(--gt-fast), border-color var(--gt-fast);
}
.panel-app:hover .icon {
background: var(--gt-accent-soft-strong);
transform: scale(1.05);
}
.panel-app .icon img,
.panel-app .icon svg {
width: 26px !important;
height: 26px !important;
display: inline-block;
}
.panel-app .small.small2 {
display: block;
text-align: center;
font-size: 12.5px !important;
font-weight: 700;
color: var(--gt-text) !important;
letter-spacing: .01em;
line-height: 1.3;
}
[data-theme="dark"] .panel-app .icon {
background: var(--gt-accent-soft);
border-color: rgba(47, 219, 160, .22);
}
/* --------------------------------------------------------------------------
22. COMPONENTES BOOTSTRAP SIN CUBRIR (well, list-group, panel genérico)
Usados en varias pantallas (store_single, analytics, backup_restore,
user_profile, supplier_profile, footer/filter-box, etc.) que antes se
quedaban con el blanco/gris claro por defecto de Bootstrap 3 en modo
oscuro.
-------------------------------------------------------------------------- */
.well {
background: var(--gt-surface-2) !important;
border: 1px solid var(--gt-border) !important;
border-radius: var(--gt-r-md) !important;
box-shadow: none !important;
color: var(--gt-text) !important;
}
.well-sm { border-radius: var(--gt-r-sm) !important; }
.list-group-item {
background: var(--gt-surface) !important;
border-color: var(--gt-border) !important;
color: var(--gt-text) !important;
}
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
background: var(--gt-accent) !important;
border-color: var(--gt-accent) !important;
color: var(--gt-accent-contrast) !important;
}
a.list-group-item:hover,
a.list-group-item:focus {
background: var(--gt-surface-hover) !important;
color: var(--gt-text) !important;
}
.panel:not(.panel-app) {
background: var(--gt-surface) !important;
border-color: var(--gt-border) !important;
border-radius: var(--gt-r-md) !important;
box-shadow: var(--gt-shadow-sm) !important;
color: var(--gt-text) !important;
}
.panel:not(.panel-app) > .panel-heading {
border-color: var(--gt-border) !important;
border-top-left-radius: var(--gt-r-md) !important;
border-top-right-radius: var(--gt-r-md) !important;
}
.panel:not(.panel-app) > .panel-body { color: var(--gt-text) !important; }
.panel:not(.panel-app) > .panel-footer {
background: var(--gt-surface-2) !important;
border-color: var(--gt-border) !important;
}
/* ==========================================================================
23. CORRECCIONES DE CONTRASTE, LAYOUT Y MODO OSCURO
Esta sección va al final a propósito: al tener la misma especificidad que
las reglas anteriores, gana por orden de cascada y sirve como capa única
de correcciones sobre AdminLTE 2 / Bootstrap 3 y los skins.
========================================================================== */
/* --------------------------------------------------------------------------
23.1 ICONOS SVG DEL SPRITE (icon.svg)
El sprite se referencia como #icon--, donde base_color
es una preferencia del usuario (black/blue/green/red/yellow) con rellenos
FIJOS. Por eso algunos íconos desaparecían: relleno claro sobre topbar
clara, u oscuro sobre fondo oscuro. Como no se puede recolorear el
contenido de un