` anywhere (inside a tbody cell, a
card body, etc.) and it renders the same look at compact scale. */
.vv-inline-loader {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 12px;
padding: 30px 20px;
color: var(--vv-mute);
}
.vv-inline-loader .vv-loader { width: 54px; height: 54px; }
.vv-inline-loader .vv-loader-mark { inset: 6px; }
.vv-inline-loader .vv-loader-mark img { width: 22px; height: 22px; }
.vv-inline-loader .vv-loader-brand {
font-size: 10px;
letter-spacing: 5px;
padding-left: 5px;
}
/* ------------- Keyframes ------------- */
@keyframes vvRingSpin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes vvBreathe {
0%, 100% { transform: scale(1); box-shadow: 0 4px 20px rgba(138,41,33,0.12), inset 0 0 0 1px var(--vv-border); }
50% { transform: scale(0.93); box-shadow: 0 3px 14px rgba(138,41,33,0.20), inset 0 0 0 1px var(--vv-border); }
}
@keyframes vvFadeUp {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes vvDotBlink {
0%, 100% { opacity: .28; transform: scale(0.85); }
40% { opacity: 1; transform: scale(1); }
}
@keyframes vvLoaderIn {
from { opacity: 0; transform: scale(0.85); }
to { opacity: 1; transform: scale(1); }
}
/* -------- Retrofit legacy inline "Cargando..." markup ---------------------
* The whole app has 30+ JS files that fill a container with either
*
Cargando
* or
*
| Cargando... |
* Rather than touch every JS file, we intercept those exact shapes with
* :has() and replace them visually with the branded ring + "CARGANDO" text.
* The original nodes stay in the DOM (font-size:0 nukes their pixels; the img
* is display:none) so JS logic that later swaps the container HTML keeps
* working exactly the same.
* ------------------------------------------------------------------------- */
center:has(> img[src*="ajax-loader"]),
td:has(> i.fa.fa-spinner.fa-spin) {
padding: 34px 20px !important;
text-align: center;
font-size: 0 !important;
line-height: 0 !important;
color: transparent !important;
background: transparent !important;
}
center:has(> img[src*="ajax-loader"]) > br,
center:has(> img[src*="ajax-loader"]) > img,
td:has(> i.fa.fa-spinner.fa-spin) > i.fa-spinner { display: none !important; }
center:has(> img[src*="ajax-loader"])::before,
td:has(> i.fa.fa-spinner.fa-spin)::before {
content: "";
display: inline-block;
width: 54px;
height: 54px;
border-radius: 50%;
background: conic-gradient(
from 0deg,
var(--vv-red) 0deg,
var(--vv-red) 55deg,
rgba(138,41,33,0.28) 90deg,
transparent 180deg,
transparent 360deg
);
-webkit-mask: radial-gradient(circle, transparent 40%, #000 42%);
mask: radial-gradient(circle, transparent 40%, #000 42%);
animation: vvRingSpin 1.4s linear infinite;
filter: drop-shadow(0 2px 8px rgba(138,41,33,0.20));
vertical-align: middle;
}
center:has(> img[src*="ajax-loader"])::after,
td:has(> i.fa.fa-spinner.fa-spin)::after {
content: "CARGANDO";
display: block;
margin-top: 14px;
font-size: 10px;
line-height: 1;
font-weight: 700;
letter-spacing: 6px;
padding-left: 6px; /* optical centering */
color: var(--vv-mute);
font-family: var(--vv-font);
animation: vvFadeUp .6s ease-out both;
}
/* =========================================================================
* RESPONSIVE · progressive tightening for tablet + phone
* ------------------------------------------------------------------------
* We keep the vendor's mobile drawer behavior for the sidebar (nav-toggler
* class flips it in/out) and only tune spacing, typography, chip visibility,
* grids and modals so nothing feels cramped or overflowing on small screens.
* ========================================================================= */
/* ---------- TABLET (< 992px) ---------- */
@media (max-width: 991.98px) {
.page-wrapper > .container-fluid { padding: 20px 22px 32px !important; }
.card-body { padding: 18px !important; }
.vv-hero { padding: 24px 26px; gap: 18px; }
.vv-hero-name { font-size: 26px; }
.vv-hero-meta { font-size: 12.5px; }
/* Slightly tighter KPI numerals */
.card-body h3.font-light { font-size: 22px; }
}
/* ---------- MOBILE (< 768px) ---------- */
@media (max-width: 767.98px) {
body.skin-default { font-size: 13px; }
.page-wrapper > .container-fluid { padding: 14px 14px 28px !important; }
/* --- TOPBAR --- */
.top-navbar { padding: 0 10px 0 0 !important; min-height: 56px; }
.top-navbar .navbar-header { padding-left: 14px; }
.top-navbar .navbar-header .navbar-brand img { max-height: 30px; max-width: 130px; }
/* Kill the hairline separator on mobile so the compact header reads clean */
.top-navbar .navbar-collapse { border-bottom: 0; }
/* User chip collapses to just the avatar — text takes too much room */
.vv-user-chip { padding: 4px !important; gap: 0 !important; margin: 0 4px !important; }
.vv-user-chip-text,
.vv-user-chip .fa-angle-down { display: none !important; }
.vv-user-chip-avatar { width: 32px; height: 32px; }
/* Breadcrumb: small, muted, no big top strip */
.row.page-titles { margin: 0 0 10px !important; }
.row.page-titles .breadcrumb { font-size: 11px !important; }
.row.page-titles .breadcrumb-item + .breadcrumb-item::before { padding: 0 4px; }
/* --- HERO --- */
.vv-hero {
flex-direction: column;
align-items: flex-start;
text-align: left;
gap: 14px;
padding: 22px 20px;
margin-bottom: 18px;
}
.vv-hero::after { display: none; } /* decorative bloom off for perf + clarity */
.vv-hero-avatar { width: 56px; height: 56px; }
.vv-hero-avatar > .vv-avatar-initial { font-size: 22px; }
.vv-hero-greeting { font-size: 10px; letter-spacing: 1px; }
.vv-hero-name { font-size: 26px; margin-bottom: 4px; }
.vv-hero-meta { font-size: 12px; }
/* --- QUICK ACCESS --- */
.vv-quick-grid {
grid-template-columns: 1fr;
gap: 10px;
margin-bottom: 22px;
}
.vv-quick-card { padding: 14px 16px; }
.vv-quick-title { font-size: 13.5px; }
.vv-quick-sub { font-size: 11.5px; }
.vv-cap { font-size: 10px; letter-spacing: 1px; }
/* --- CARDS + KPIs --- */
.card { margin-bottom: 12px !important; border-radius: var(--vv-r-md); }
.card-body { padding: 16px !important; }
.card-body h3.font-light { font-size: 22px; }
.card-body h5.text-muted { font-size: 10px; letter-spacing: 0.4px; }
.card-title, h4.card-title { font-size: 13px !important; margin-bottom: 12px !important; }
/* --- TABLES --- */
.table-responsive { -webkit-overflow-scrolling: touch; margin: 0 -4px; }
.table td, .table th { padding: 8px 10px !important; font-size: 12px !important; }
.table thead th { font-size: 10px !important; letter-spacing: 0.4px; }
/* DataTables toolbar buttons stack on small screens */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
float: none !important;
text-align: left !important;
margin: 4px 0 !important;
}
.dataTables_wrapper .dataTables_paginate { padding-top: 4px; }
/* --- BUTTONS + FORMS --- */
.btn { font-size: 12.5px !important; padding: 7px 12px !important; }
.form-control { font-size: 13px !important; padding: 9px 12px !important; }
label.control-label,
.form-group label { font-size: 11.5px; }
/* --- MODALS --- */
.modal-dialog { margin: 8px; }
.modal-content { border-radius: var(--vv-r-md) !important; }
.modal-header { padding: 14px 16px !important; }
.modal-title { font-size: 15px !important; }
.modal-body { padding: 16px !important; }
.modal-footer {
padding: 12px 16px !important;
flex-direction: column-reverse;
align-items: stretch;
gap: 8px;
}
.modal-footer .btn { width: 100%; margin: 0 !important; }
/* --- PRELOADER · smaller mark so it doesn't hog phone screens --- */
.vv-loader { width: 78px; height: 78px; }
.vv-loader-mark { inset: 9px; }
.vv-loader-mark img { width: 34px; height: 34px; }
.vv-loader-brand { font-size: 11px; letter-spacing: 5px; }
/* --- SIDEBAR DRAWER open state (vendor toggles show-sidebar) ---
When the drawer is open on mobile ensure it sits on top with a shadow,
and dim the content behind so it's clear the drawer is modal. Clicking
the dim area also dismisses the drawer via the vendor's own handler. */
body.show-sidebar .left-sidebar,
body.mini-sidebar:not(.show-sidebar) .left-sidebar { box-shadow: 6px 0 24px rgba(0,0,0,0.25); }
body.show-sidebar::before {
content: "";
position: fixed;
inset: 0;
background: rgba(15,17,20,0.45);
z-index: 998;
animation: vvFadeIn .2s ease-out both;
}
.left-sidebar { z-index: 999; }
/* On mobile, the drawer should slide down from the very top of the
viewport — the vendor sets .left-sidebar { top: 60px } for the
desktop layout, but on a mobile drawer that leaves a big empty
band above the brand header. Force full-height starting at top:0
and zero any padding-top inherited from the scroll wrapper. */
body.show-sidebar .left-sidebar {
top: 0 !important;
height: 100vh !important;
padding-top: 0 !important;
}
body.show-sidebar .left-sidebar .scroll-sidebar { padding-top: 0 !important; }
/* Brand header in the drawer — mobile only. */
.vv-sidebar-brand {
display: flex;
align-items: center;
padding: 18px 22px;
border-bottom: 1px solid var(--vv-sidebar-line);
background: var(--vv-sidebar);
}
.vv-sidebar-brand a { line-height: 0; text-decoration: none !important; }
.vv-sidebar-brand img {
height: 32px;
max-width: 180px;
/* No filter — valdervukwhite.png is already the white variant. */
}
}
/* Hide the drawer brand header on desktop; the topbar's navbar-header
already carries the logo there. */
@media (min-width: 768px) {
.vv-sidebar-brand { display: none !important; }
}
@keyframes vvFadeIn { from { opacity: 0; } to { opacity: 1; } }
/* ---------- SMALL PHONE (< 480px) ---------- */
@media (max-width: 479.98px) {
.page-wrapper > .container-fluid { padding: 10px 10px 22px !important; }
.vv-hero { padding: 18px 16px; }
.vv-hero-name { font-size: 22px; }
.vv-quick-card { padding: 12px 14px; }
.vv-quick-icon { width: 36px; height: 36px; font-size: 15px; }
.card-body { padding: 14px !important; }
.card-body h3.font-light { font-size: 20px; }
/* Hide the leftmost decorative section caps on ultra-narrow to avoid
any hairline overflow when the drawer is closed. */
.top-navbar .navbar-header .navbar-brand img { max-height: 26px; max-width: 112px; }
}
/* ---------- Landscape phone: keep hero horizontal ---------- */
@media (max-width: 767.98px) and (orientation: landscape) and (min-width: 568px) {
.vv-hero { flex-direction: row; align-items: center; }
.vv-hero-avatar { width: 60px; height: 60px; }
}
/* ---------- AUTOSAVE INDICATOR (2026-07-14 · Change 3) --------------------
* Indicador fijo top-right que aparece solo en /mode/quoteEdit. Tres estados
* visuales: dirty (rojo tenue), saving (ámbar), saved (verde). Se posiciona
* debajo del user chip para no chocar con él. */
.vv-autosave-indicator {
position: fixed;
top: 76px; /* justo debajo del topbar (60px) + gap */
right: 20px;
z-index: 1050;
padding: 6px 12px;
border-radius: 999px;
font-size: 12px;
font-weight: 500;
font-family: var(--vv-font);
line-height: 1.3;
letter-spacing: 0.1px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
display: inline-flex;
align-items: center;
gap: 6px;
background: #fff;
border: 1px solid var(--vv-border);
color: var(--vv-mute);
transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.vv-autosave-indicator.vv-as-dirty {
background: #FEF3F2;
border-color: #FCA5A5;
color: #B91C1C;
}
.vv-autosave-indicator.vv-as-saving {
background: #FFFBEB;
border-color: #FDE68A;
color: #92400E;
}
.vv-autosave-indicator.vv-as-saved {
background: #F0FDF4;
border-color: #BBF7D0;
color: #166534;
}
.vv-autosave-indicator .vv-as-dot { font-size: 10px; }
.vv-autosave-indicator .vv-as-spin { display: inline-block; animation: vvAsSpin .9s linear infinite; }
.vv-autosave-indicator .vv-as-check { font-weight: 700; }
@keyframes vvAsSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (max-width: 767.98px) {
.vv-autosave-indicator { top: 66px; right: 12px; font-size: 11px; padding: 5px 10px; }
}