) * NO deben forzar tema claro porque el tema de Vantariel es oscuro y los * skeletons deben ser oscuros siempre. */ .vt-skel-light-scope .vt-skel { background-color: var(--vt-skel-base-light) !important; } .vt-skel-light-scope .vt-skel::after { background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, var(--vt-skel-highlight-light) 50%, rgba(0, 0, 0, 0) 100%); } /* FORZAR tema oscuro en el overlay de navegacion y en los bones del ghost, * sin importar ancestros .bg-light / .card-light. El overlay se agrega al * que en algunas plantillas (MenuBgTemplate) tiene class="bg-light"; * sin este !important los huesos quedarian claros sobre el tema oscuro. */ #vtSkelOverlay .vt-skel, .vt-skel-ghost-layer .vt-skel-bone { background-color: var(--vt-skel-base) !important; } #vtSkelOverlay .vt-skel::after, .vt-skel-ghost-layer .vt-skel-bone::after { background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, var(--vt-skel-highlight) 50%, rgba(255, 255, 255, 0) 100%) !important; } /* ============================================================================ * 2) PIEZAS / FORMAS BASICAS * ============================================================================ */ .vt-skel-line { height: 0.875rem; } .vt-skel-line-sm { height: 0.75rem; width: 45%; } .vt-skel-line-md { height: 0.875rem; width: 65%; } .vt-skel-line-lg { height: 1rem; width: 85%; } .vt-skel-title { height: 1.35rem; width: 32%; margin-bottom: 1rem; } .vt-skel-subtitle { height: 1rem; width: 18%; margin-bottom: .8rem; } .vt-skel-avatar { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto; } .vt-skel-avatar-sm { width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto; } .vt-skel-square { width: 48px; height: 48px; flex: 0 0 auto; } .vt-skel-btn { height: 2.25rem; width: 6.2rem; border-radius: .35rem; } .vt-skel-btn-sm { height: 1.9rem; width: 4.6rem; border-radius: .35rem; } .vt-skel-badge { height: 1.25rem; width: 4.5rem; border-radius: .6rem; } .vt-skel-input { height: calc(1.5em + .75rem + 4px); border-radius: .35rem; } .vt-skel-label { height: .8rem; width: 30%; margin-bottom: .4rem; border-radius: 4px; } .vt-skel-circle { border-radius: 50%; } /* ============================================================================ * 3) COMPOSITES: TOOLBAR (barra de botones de listados) * ============================================================================ */ .vt-skel-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; } .vt-skel-toolbar .vt-skel-search { flex: 1 1 220px; max-width: 420px; height: 2.25rem; border-radius: .35rem; margin-left: auto; } /* En el overlay, el search va dentro de col-sm (no necesita margin-left:auto) */ #vtSkelOverlay .col-sm .vt-skel-search, #vtSkelOverlay .col-sm > .vt-skel.vt-skel-search { margin-left: 0; width: 100%; max-width: 100%; } /* ============================================================================ * 4) COMPOSITE: TABLA (listados de FacturaScripts) * ============================================================================ */ table.vt-skel-table { width: 100%; table-layout: fixed; border-collapse: collapse; margin-bottom: .5rem; background: transparent !important; } table.vt-skel-table th { padding: .5rem .5rem; border-bottom: 2px solid var(--vt-border, #3d4148) !important; } table.vt-skel-table th .vt-skel { height: .85rem; } table.vt-skel-table td { padding: .55rem .5rem; border-bottom: 1px solid rgba(61, 65, 72, 0.45) !important; } table.vt-skel-table td .vt-skel { height: .875rem; } table.vt-skel-table td .vt-skel.vt-skel-td-short { width: 55%; } table.vt-skel-table td .vt-skel.vt-skel-td-tiny { width: 30%; } table.vt-skel-table th:last-child .vt-skel, table.vt-skel-table td:last-child .vt-skel { margin-left: auto; display: block; width: 60%; } /* ============================================================================ * 5) COMPOSITE: FORMULARIO (vistas Edit) * ============================================================================ */ .vt-skel-form { width: 100%; } .vt-skel-form .form-row { margin-bottom: 0; } .vt-skel-form-group { margin-bottom: 1rem; } .vt-skel-form-group .vt-skel-input { width: 100%; } .vt-skel-form-footer { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1.5rem; } /* ============================================================================ * 6) COMPOSITE: TARJETAS GENERICAS * ============================================================================ */ .vt-skel-cards { display: flex; flex-wrap: wrap; gap: 1rem; } .vt-skel-card { flex: 1 1 260px; max-width: 320px; background: var(--vt-bg-elev, #2a2e35) !important; border: 1px solid var(--vt-border, #3d4148); border-radius: 8px; padding: 1rem; } .vt-skel-card .vt-skel-card-img { height: 96px; border-radius: 6px; margin-bottom: .8rem; } /* ============================================================================ * 7) POS VENTAS: TARJETAS DE PRODUCTO (#productList) * Reproduce la malla del POS: col-6 col-sm-4 col-md-3 col-xl-2 + card. * ============================================================================ */ .vt-skel-products { display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; } .vt-skel-products > .vt-skel-col { position: relative; width: 100%; padding-right: 15px; padding-left: 15px; flex: 0 0 50%; max-width: 50%; } @media (min-width: 576px) { .vt-skel-products > .vt-skel-col { flex: 0 0 33.333333%; max-width: 33.333333%; } } @media (min-width: 768px) { .vt-skel-products > .vt-skel-col { flex: 0 0 25%; max-width: 25%; } } @media (min-width: 1200px) { .vt-skel-products > .vt-skel-col { flex: 0 0 16.666667%; max-width: 16.666667%; } } .vt-skel-product-card { background-color: #34495e; /* mismo azul del POS (index.html.twig) */ border: 1px solid #34495e; border-radius: .35rem; margin-bottom: 1rem; padding: .65rem; min-height: 138px; /* aprox. altura de card real del POS */ display: flex; flex-direction: column; } .vt-skel-product-card .vt-skel-product-title { height: .9rem; width: 90%; margin: .35rem 0 .15rem; } .vt-skel-product-card .vt-skel-product-price { height: .9rem; width: 45%; margin-bottom: .45rem; } .vt-skel-product-card .vt-skel-product-body { height: 64px; border-radius: 5px; background-color: rgba(0, 0, 0, 0.18); /* bloque central tipo cuerpo/imagen */ position: relative; overflow: hidden; } .vt-skel-product-card .vt-skel-product-body::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background-image: linear-gradient(90deg, rgba(255,255,255,0) 0, var(--vt-skel-highlight) 50%, rgba(255,255,255,0) 100%); animation: vt-skel-shimmer var(--vt-skel-speed) ease-in-out infinite; } .vt-skel-product-card .vt-skel-product-footer { margin-top: auto; height: 1.4rem; border-radius: .3rem; background-color: rgba(0, 0, 0, 0.25); position: relative; overflow: hidden; } .vt-skel-product-card .vt-skel-product-footer::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background-image: linear-gradient(90deg, rgba(255,255,255,0) 0, var(--vt-skel-highlight) 50%, rgba(255,255,255,0) 100%); animation: vt-skel-shimmer var(--vt-skel-speed) ease-in-out infinite; } /* ============================================================================ * 8) POS REPARACIONES: TARJETAS DE REPARACION (sidebar tecnico) * REPLICA EXACTA de .reparacion-card (mismos paddings, margenes, radios y * alturas de linea) para que el skeleton ocupe el mismo espacio que la * tarjeta real cargada: cero salto de layout al reemplazar. * Real: padding 15px, margin-bottom 10px, radius 8px, border-left 4px, * codigo 16px/700, estado pill 4x12 r20, tienda 11px pill 2x6 r4 mb5, * cliente 14px mb8, equipos 12px pl10 border-left 2px mt8 items mb4. * ============================================================================ */ .vt-skel-rep-card { position: relative; background: #2d3748; /* tono medio del gradiente real */ border: 1px solid rgba(255, 255, 255, 0.04); border-left: 4px solid var(--vt-skel-base); border-radius: 8px; padding: 15px; margin-bottom: 10px; } .vt-skel-rep-card .vt-skel-rep-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: .5rem; } .vt-skel-rep-card .vt-skel-rep-codigo { height: 21px; width: 38%; } /* 16px bold */ .vt-skel-rep-card .vt-skel-rep-estado { height: 23px; width: 5rem; border-radius: 20px; } /* pill 4x12 */ .vt-skel-rep-card .vt-skel-rep-tienda { height: 18px; width: 32%; border-radius: 4px; margin-bottom: 5px; } /* pill 2x6 */ .vt-skel-rep-card .vt-skel-rep-cliente { height: 21px; width: 72%; margin-bottom: 8px; } /* 14px */ .vt-skel-rep-card .vt-skel-rep-equipos { margin-top: 8px; padding-left: 10px; border-left: 2px solid rgba(255, 255, 255, 0.08); } .vt-skel-rep-card .vt-skel-rep-equipos .vt-skel-rep-eq { height: 17px; margin-bottom: 4px; } /* 12px items */ /* ============================================================================ * 8b) POS REPARACIONES: GRUPOS Y TARJETAS DEL RECEPCIONISTA * REPLICA EXACTA de .recep-tecnico-group (header gris 12x15 + body 10) * y .recep-reparacion-card (padding 12x15, mb 8, border 495057 + left 4). * ============================================================================ */ .vt-skel-recep-group { background: #2d3748; border: 1px solid #495057; border-radius: 8px; margin-bottom: 15px; overflow: hidden; } .vt-skel-recep-group-header { padding: 12px 15px; background: linear-gradient(90deg, #6c757d 0%, #5a6268 100%); display: flex; align-items: center; justify-content: space-between; } /* hueso mas oscuro sobre el header gris para que contraste */ .vt-skel-recep-group-header .vt-skel { background-color: rgba(0, 0, 0, 0.22); } .vt-skel-recep-group-header .vt-skel-recep-group-name { height: 16px; width: 34%; } .vt-skel-recep-group-header .vt-skel-recep-group-count { height: 20px; width: 3rem; border-radius: 12px; } .vt-skel-recep-group-body { padding: 10px; border-top: 1px solid #495057; } .vt-skel-recep-card { background: #2d3748; border: 1px solid #495057; border-left: 4px solid var(--vt-skel-base); border-radius: 8px; padding: 12px 15px; margin-bottom: 8px; } .vt-skel-recep-card .vt-skel-recep-head-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; gap: .5rem; } .vt-skel-recep-card .vt-skel-recep-id { height: 19px; width: 38%; } /* card-id 14px/700 */ .vt-skel-recep-card .vt-skel-recep-fecha { height: 15px; width: 22%; } /* card-fecha 11px */ .vt-skel-recep-card .vt-skel-recep-body-row { display: flex; align-items: flex-start; gap: 10px; } .vt-skel-recep-card .vt-skel-recep-info { flex: 1 1 auto; min-width: 0; } .vt-skel-recep-card .vt-skel-recep-info .vt-skel-recep-cliente { height: 19px; width: 60%; margin-bottom: 3px; } /* 600 */ .vt-skel-recep-card .vt-skel-recep-info .vt-skel-recep-eq { height: 15px; width: 82%; margin-bottom: 3px; } /* 11px equipos */ .vt-skel-recep-card .vt-skel-recep-estado { height: 22px; width: 4.6rem; border-radius: 20px; flex: 0 0 auto; } /* card-estado 3x10 */ /* Detalle de reparacion en modal */ .vt-skel-detail { padding: .25rem 0; } .vt-skel-detail .vt-skel { margin-bottom: .65rem; } /* ============================================================================ * 8c) GHOST: espejo del contenido real (tamaños/posiciones exactos) * La capa se posiciona sobre el contenedor y los huesos .vt-skel-bone * se colocan en las coordenadas medidas de cada elemento real. El * contenido original se oculta con .vt-skel-ghost-hidden (visibility * conserva el layout: ningun pixel se mueve). * ============================================================================ */ .vt-skel-ghost-layer { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 5; pointer-events: none; overflow: hidden; } .vt-skel-bone { position: absolute; min-width: 4px; min-height: 4px; } .vt-skel-ghost-hidden { visibility: hidden !important; } /* ============================================================================ * 9) OVERLAY DE NAVEGACION (transicion entre paginas) * ============================================================================ */ #vtSkelOverlay { position: fixed; left: 0; right: 0; bottom: 0; top: 56px; /* altura del navbar; JS lo ajusta al real */ z-index: 1029; /* por debajo de modals (1050) y navbar (1030) */ background: var(--vt-skel-page-bg) !important; /* siempre oscuro, sin importar .bg-light */ overflow: auto; padding: 1rem 0 2rem 0; animation: vt-skel-fade-in .14s ease-out; } /* El POS y PuntoReparacion son full-screen sin navbar: el overlay cubre * toda la ventana y sin padding (su skeleton ya tiene su propio layout). * Forzamos fondo oscuro explicito porque estas paginas no cargan custom.css * (donde se define --vt-bg) y el fallback de la variable podria no resolverse. */ #vtSkelOverlay.pr-fullscreen { top: 0 !important; padding: 0 !important; background: #1a1d23 !important; } /* El pr-header del skeleton de reparacion necesita el mismo estilo que el real */ #vtSkelOverlay .pr-header { min-height: 80px; background: #6c757d !important; display: flex; align-items: center; justify-content: center; } #vtSkelOverlay .pr-container { display: flex; height: calc(100vh - 80px); overflow: hidden; } #vtSkelOverlay .pr-sidebar { width: 280px; flex-shrink: 0; background: #21252b !important; border-right: 1px solid #2d3748; display: flex; flex-direction: column; } #vtSkelOverlay .pr-sidebar-right { border-right: none; border-left: 1px solid #2d3748; } #vtSkelOverlay .pr-sidebar-header { padding: 12px 15px; background: #2d3748 !important; } #vtSkelOverlay .pr-sidebar-search { padding: 10px; } #vtSkelOverlay .pr-sidebar-list { flex: 1; overflow: auto; padding: 8px; } #vtSkelOverlay .pr-main { flex: 1; display: flex; align-items: center; justify-content: center; background: #1a1d23 !important; } @keyframes vt-skel-fade-in { from { opacity: 0; } to { opacity: 1; } } #vtSkelOverlay .vt-skel-close-row { display: flex; justify-content: flex-end; margin-bottom: .25rem; opacity: .6; } /* ============================================================================ * 10) ACCESIBILIDAD Y CASOS ESPECIALES * ============================================================================ */ /* Usuarios con movimiento reducido: bones estaticos, sin animacion */ @media (prefers-reduced-motion: reduce) { .vt-skel::after, .vt-skel-product-card .vt-skel-product-body::after, .vt-skel-product-card .vt-skel-product-footer::after { animation: none; transform: none; opacity: .5; } #vtSkelOverlay { animation: none; } } /* Nunca mostrar skeletons al imprimir */ @media print { .vt-skel, #vtSkelOverlay, .vt-skel-products, .vt-skel-list { display: none !important; } } /* Contenedor de lista skeleton generico */ .vt-skel-list { width: 100%; }