/* ============================================================ APULOGIC POS v2 — Estilos propios de la versión 2 ------------------------------------------------------------ app.css (base probada) no se toca; aquí vive lo nuevo: 01 · Velo de carga "Sello" (reemplaza al video de intro) 02 · Paginador (usuarios y reportes por hojas) 03 · Pulso suave del botón de notas (cliente con nota activa) Regla de rendimiento: solo transform/opacity en animaciones. ============================================================ */ /* ── 01 · VELO DE CARGA ─────────────────────────────────────── */ /* Cubierta instantánea desde el hasta que monta el velo real */ html[data-veil] body::before { content: ''; position: fixed; inset: 0; z-index: 99998; background: #10131c; } .apu-veil { position: fixed; inset: 0; z-index: 99999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.05rem; background: radial-gradient(900px 620px at 50% 42%, #1a1f2e, #0f1117 78%); transition: opacity .5s ease; } .apu-veil--out { opacity: 0; pointer-events: none; } .apu-veil-seal { position: relative; width: 104px; height: 104px; } .apu-veil-seal svg { width: 100%; height: 100%; transform: rotate(-90deg); } .apu-veil-seal circle { fill: none; stroke: var(--primary, #4f8ef7); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 302; stroke-dashoffset: 302; animation: apu-ring 1s cubic-bezier(.5,.1,.3,1) .1s forwards; } .apu-veil-letter { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 2.7rem; font-weight: 700; color: var(--primary, #4f8ef7); opacity: 0; animation: apu-rise .6s ease .3s forwards; } .apu-veil-name { font-size: 1.1rem; font-weight: 600; letter-spacing: .3em; text-indent: .3em; /* compensa el tracking del último carácter */ text-transform: uppercase; color: #e8eaf0; opacity: 0; animation: apu-rise .6s ease .5s forwards; } .apu-veil-line { width: 120px; height: 1px; background: linear-gradient(90deg, transparent, var(--primary, #4f8ef7), transparent); opacity: 0; animation: apu-rise .6s ease .62s forwards; } .apu-veil-tag { font-size: .58rem; letter-spacing: .3em; text-indent: .3em; text-transform: uppercase; color: #6b7090; opacity: 0; animation: apu-rise .6s ease .72s forwards; } @keyframes apu-ring { to { stroke-dashoffset: 0; } } @keyframes apu-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* Modo rápido: navegaciones siguientes en la misma pestaña */ .apu-veil--quick .apu-veil-seal { display: none; } .apu-veil--quick .apu-veil-name, .apu-veil--quick .apu-veil-line, .apu-veil--quick .apu-veil-tag { animation-delay: 0s; animation-duration: .25s; } /* ── 02 · PAGINADOR ─────────────────────────────────────────── */ .paginador { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 1rem 0 1.5rem; flex-wrap: wrap; } .paginador-info { color: var(--text2); font-size: .9rem; } .paginador-info strong { color: var(--text); } .paginador .pag-disabled { opacity: .45; pointer-events: none; } .paginador button:disabled { opacity: .45; cursor: default; } /* ── 03 · PULSO SUAVE DE NOTAS ──────────────────────────────── */ /* El botón 📝 de un cliente CON notas parpadea suave: un anillo que respira (transform/opacity → barato para el navegador). */ .notas-btn { position: relative; overflow: visible; } .notas-btn.has-notas::after { content: ''; position: absolute; inset: -3px; border-radius: inherit; border: 2px solid var(--warning); pointer-events: none; animation: notas-respira 2.2s ease-in-out infinite; } @keyframes notas-respira { 0%, 100% { opacity: .85; transform: scale(1); } 50% { opacity: .25; transform: scale(1.12); } } /* ── 04 · VENTA DE MOSTRADOR ("Tienda") ─────────────────────── */ /* Tarjeta distinta para no confundirla con un cliente dentro del spa */ .sesion-card--tienda { border-color: color-mix(in srgb, var(--success) 55%, transparent); background: color-mix(in srgb, var(--success) 6%, var(--bg2)); } .sesion-card--tienda .sesion-nombre { color: var(--success); } /* ── 05 · AVISO DE NOTAS AL CERRAR ──────────────────────────── */ .pago-notas-box { margin-top: .8rem; padding: .7rem .85rem; border-radius: var(--radius); background: color-mix(in srgb, var(--warning) 12%, var(--bg2)); border: 1px solid color-mix(in srgb, var(--warning) 45%, transparent); border-left: 3px solid var(--warning); } .pago-notas-head { display: flex; align-items: center; gap: .4rem; margin-bottom: .4rem; } .pago-notas-ico { font-size: 1.05rem; } .pago-notas-lista { list-style: none; margin: 0 0 .5rem; padding: 0 0 0 .2rem; max-height: 108px; overflow-y: auto; font-size: .85rem; color: var(--text); } .pago-notas-lista li { padding: .12rem 0; border-bottom: 1px dashed var(--border-soft); } .pago-notas-lista li:last-child { border-bottom: none; } .pago-notas-lista small { color: var(--text3); } .pago-notas-check { display: flex; align-items: center; gap: .45rem; font-weight: 600; cursor: pointer; user-select: none; } .pago-notas-check input { width: 16px; height: 16px; accent-color: var(--warning); } /* ── 06 · PAGO MIXTO EN REPORTES ────────────────────────────── */ .pago-mixto-tag { display: inline-block; line-height: 1.35; font-size: .82rem; padding: .12rem .4rem; border-radius: 6px; background: color-mix(in srgb, var(--primary) 10%, transparent); border: 1px solid color-mix(in srgb, var(--primary) 28%, transparent); } /* ── Accesibilidad: sin animaciones si el sistema lo pide ──── */ @media (prefers-reduced-motion: reduce) { .apu-veil, .apu-veil * { animation: none !important; transition: opacity .2s linear !important; } .apu-veil-letter, .apu-veil-name, .apu-veil-line, .apu-veil-tag { opacity: 1 !important; } .apu-veil-seal circle { stroke-dashoffset: 0 !important; } .notas-btn.has-notas::after { animation: none !important; opacity: .85; } } /* ── Móvil ──────────────────────────────────────────────────── */ @media (max-width: 600px) { .apu-veil-name { font-size: .92rem; letter-spacing: .24em; text-indent: .24em; } .paginador { gap: .6rem; } }