/* TiendaPOS — capa visual "suave": barra lateral flotante, tarjetas pastel con icono, banner de bienvenida.
 * Se carga DESPUÉS de palettes.css. Paleta de la infografía: amarillo, naranja, verde lima, cian, rosa y morado.
 * El morado es el color de marca; los demás se usan como acentos por módulo y en los indicadores. */

:root {
  --c1: #fdb515; --c2: #f7701f; --c3: #8a6d5a; --c4: #8dc63f; --c5: #12b3cc; --c6: #7b2c8c; --c7: #5b6fb5; --c8: #9b4dca; --c9: #d6459a;
  --tp-primary: #7b2c8c; --tp-primary-600: #62206f; --tp-primary-soft: #f3e6f7; --tp-accent: #fdb515;
  --tp-bg: #f1edf5; --tp-surface: #ffffff; --tp-border: #e4dcec; --tp-text-soft: #6a6275;
  --tp-ok: #0e8a9e; --tp-ok-soft: #dff4f8;
  --tp-warn: #b45f06; --tp-warn-soft: #fff0cf;
  --tp-bad: #c62f5a; --tp-bad-soft: #fde6ee;
  --bs-primary-rgb: 123, 44, 140; --bs-body-color: #271f30;
  --tp-side-a: #8a3a9c; --tp-side-b: #5f2273;
  --tp-shadow: 0 10px 28px rgba(80, 40, 110, .09), 0 1px 3px rgba(80, 40, 110, .06);
}
[data-bs-theme="dark"] {
  --c1: #ffc83d; --c2: #ff8a4c; --c3: #c1a592; --c4: #a6dc5e; --c5: #45d0e6; --c6: #c58be0; --c7: #8e9fe0; --c8: #c68aef; --c9: #ff7ab8;
  --tp-primary: #c58be0; --tp-primary-600: #dcb0ef; --tp-primary-soft: #2b1b36; --tp-accent: #ffc83d;
  --tp-bg: #140f19; --tp-surface: #1e1726; --tp-border: #33283f; --tp-text-soft: #aa9fb8;
  --tp-ok: #45d0e6; --tp-ok-soft: #0f3038;
  --tp-warn: #ffc83d; --tp-warn-soft: #3a2c0a;
  --tp-bad: #ff7a9c; --tp-bad-soft: #3d1624;
  --bs-primary-rgb: 197, 139, 224; --bs-body-color: #eee8f4;
  --tp-side-a: #2c1c3a; --tp-side-b: #1d1226;
  --tp-shadow: 0 10px 28px rgba(0, 0, 0, .45);
}
[data-bs-theme="dark"] .btn-primary { --bs-btn-color: #1a0f22; --bs-btn-hover-color: #1a0f22; --bs-btn-active-color: #1a0f22; --bs-btn-disabled-color: #1a0f22; }
[data-bs-theme="dark"] .tp-logo { color: #1a0f22; }
.btn-primary { --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb); box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb), .28); }
.btn-primary:hover { transform: translateY(-1px); }
.btn { transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease; }

body { background: radial-gradient(1200px 500px at 85% -10%, color-mix(in srgb, var(--c6) 14%, transparent), transparent 60%), var(--tp-bg); background-attachment: fixed; }

/* ---------- Barra superior ---------- */
.tp-topbar { background: color-mix(in srgb, var(--tp-bg) 80%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 0; height: 64px; padding: 0 1rem; }
@media (min-width: 992px) { .tp-topbar { padding-left: calc(var(--tp-sidebar-w) + 2rem); } }
:root { --tp-sidebar-w: 248px; --tp-topbar-h: 64px; }
.tp-top-title { font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-top-actions { display: flex; align-items: center; gap: .5rem; background: var(--tp-surface); padding: .3rem .4rem .3rem .6rem; border-radius: 999px; box-shadow: var(--tp-shadow); }
.tp-top-actions .btn-icon { width: 38px; height: 38px; display: inline-grid; place-items: center; border-radius: 50%; padding: 0; }
.tp-top-actions .btn-icon:hover { background: var(--tp-primary-soft); color: var(--tp-primary); }
.tp-user-chip { display: inline-flex !important; flex-wrap: nowrap; height: 40px; align-items: center; gap: .5rem; padding: .15rem .65rem .15rem .2rem !important; width: auto !important; border-radius: 999px !important; }
.tp-user-chip .tp-avatar { width: 34px; height: 34px; background: linear-gradient(135deg, var(--c9), var(--c6)); color: #fff; }
.tp-user-chip .nm { font-weight: 600; font-size: .88rem; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-brand .tp-logo, .tp-logo { background: linear-gradient(135deg, var(--c9), var(--c6)); color: #fff; box-shadow: 0 6px 14px rgba(var(--bs-primary-rgb), .3); }
.dropdown-menu { border: 0; border-radius: 1rem; box-shadow: 0 16px 40px rgba(60, 20, 90, .2); padding: .5rem; }
.dropdown-item { border-radius: .6rem; }
.dropdown-item:active, .dropdown-item:hover { background: var(--tp-primary-soft); color: var(--tp-primary); }

/* ---------- Barra lateral flotante ---------- */
.tp-sidebar { background: linear-gradient(170deg, var(--tp-side-a), var(--tp-side-b)); border: 0; color: #fff; }
@media (min-width: 992px) {
  .tp-shell { padding: 0 1rem 1rem 0; }
  .tp-sidebar { position: fixed; left: .85rem; top: .85rem; bottom: .85rem; height: auto; width: var(--tp-sidebar-w); border-radius: 1.75rem; box-shadow: 0 18px 40px rgba(70, 25, 100, .35); overflow: hidden; z-index: 1035; }
  .tp-sidebar .offcanvas-body { overflow-y: auto; height: 100%; }
  .tp-main { margin-left: calc(var(--tp-sidebar-w) + 1.7rem); padding-top: .25rem; }
}
/* Sin barra de desplazamiento visible en el menú (en cualquier ancho); sigue desplazándose con rueda o dedo. */
.tp-sidebar, .tp-sidebar *, .tp-sidebar .offcanvas-body { scrollbar-width: none !important; -ms-overflow-style: none !important; }
.tp-sidebar::-webkit-scrollbar, .tp-sidebar *::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }
.tp-sidebar .offcanvas-header { color: #fff; }
.tp-sidebar .btn-close { filter: invert(1); }
.tp-side-brand { display: flex; align-items: center; gap: .65rem; padding: 1.25rem 1.25rem .75rem; color: #fff; text-decoration: none; }
.tp-side-brand .tp-logo { width: 42px; height: 42px; font-size: 1.25rem; border-radius: 14px; background: rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.tp-side-brand b { display: block; line-height: 1.15; font-size: 1rem; }
.tp-side-brand small { opacity: .75; font-size: .75rem; }
.tp-nav { padding: .5rem .85rem; gap: 3px; }
.tp-sidebar .tp-nav a { color: rgba(255, 255, 255, .86); padding: .5rem .65rem; border-radius: 1rem; font-weight: 500; }
.tp-sidebar .tp-nav a .bi { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: rgba(255, 255, 255, .12); color: #fff; font-size: 1.05rem; transition: background .15s; }
.tp-sidebar .tp-nav a:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.tp-sidebar .tp-nav a.active, .tp-sidebar .tp-nav a.active[data-mod] { background: #fff; color: var(--tp-side-b); font-weight: 700; box-shadow: 0 8px 18px rgba(30, 5, 50, .25); }
.tp-sidebar .tp-nav a.active[data-mod]::after { display: none; }
.tp-sidebar .tp-nav a.active .bi { background: var(--mod-c, var(--tp-primary)); color: #fff; }
.tp-sidebar .tp-nav a[data-mod="caja"].active .bi, .tp-sidebar .tp-nav a[data-mod="caja"] .bi.x { color: #3a2500; }
[data-bs-theme="dark"] .tp-sidebar .tp-nav a.active, [data-bs-theme="dark"] .tp-sidebar .tp-nav a.active[data-mod] { background: #f4eaf9; color: #2c1c3a; }
.tp-sidebar-foot { margin: .5rem .85rem 1rem; padding: .8rem 1rem !important; border-radius: 1.1rem; background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .9) !important; }
.tp-sidebar-foot b { display: block; color: #fff; }
.tp-sidebar-foot .bar { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .22); margin-top: .5rem; overflow: hidden; }
.tp-sidebar-foot .bar i { display: block; height: 100%; background: var(--c1); border-radius: 6px; }

/* ---------- Tarjetas ---------- */
.tp-card { border: 0; border-radius: 1.4rem; box-shadow: var(--tp-shadow); padding: 1.2rem 1.35rem; }
[data-bs-theme="dark"] .tp-card { border: 1px solid var(--tp-border); }
.tp-page-head h1::before { width: 8px; background: linear-gradient(180deg, var(--tp-mod), color-mix(in srgb, var(--tp-mod) 55%, #fff)); }
.table { --bs-table-bg: transparent; }
.table > thead > tr > th { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tp-text-soft); font-weight: 700; border-bottom-color: var(--tp-border); }
.table-hover > tbody > tr:hover > * { --bs-table-hover-bg: var(--tp-primary-soft); }
.form-control, .form-select { border-radius: .8rem; border-color: var(--tp-border); background-color: color-mix(in srgb, var(--tp-surface) 80%, var(--tp-bg)); }
.btn { border-radius: .85rem; }
.tp-pill, .tp-state { box-shadow: none; }

/* Indicadores pastel con icono (estilo de las referencias) */
.tp-card.tp-kpi { --tab: var(--tp-primary); background: color-mix(in srgb, var(--tab) 14%, var(--tp-surface)); padding: 1.1rem 1.2rem; gap: .2rem; position: relative; overflow: hidden; min-height: 128px; }
.tp-card.tp-kpi::after { display: none; }
.tp-card.tp-kpi .tp-kpi-ic { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: var(--tab); color: #fff; font-size: 1.2rem; margin-bottom: .55rem; box-shadow: 0 6px 14px color-mix(in srgb, var(--tab) 45%, transparent); }
.tp-card.tp-kpi .tp-kpi-ic.dk { color: #3a2500; }
.tp-card.tp-kpi .v { font-size: 1.55rem; }
.tp-card.tp-kpi .l { font-weight: 600; color: var(--bs-body-color); opacity: .8; }
.tp-card.tp-kpi::before { content: ""; position: absolute; right: -28px; top: -28px; width: 96px; height: 96px; border-radius: 50%; background: color-mix(in srgb, var(--tab) 18%, transparent); }

/* Tarjetas de acceso (Configuración, Reportes) */
a.tp-card.text-reset::after, a.tp-card.text-decoration-none::after { width: 8px; top: 18px; bottom: 18px; border-radius: 8px 0 0 8px; }

/* ---------- Banner de bienvenida ---------- */
.tp-hero { position: relative; overflow: hidden; border-radius: 1.75rem; padding: 1.6rem 1.75rem; color: #fff; background: linear-gradient(120deg, #7b2c8c 0%, #a23a9f 55%, #d6459a 100%); box-shadow: 0 16px 34px rgba(123, 44, 140, .35); display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.tp-hero h1 { font-size: 1.55rem; margin: 0 0 .25rem; color: #fff; }
.tp-hero p { margin: 0 0 1rem; opacity: .9; }
.tp-hero .btn-hero { background: var(--c1); color: #3a2500; font-weight: 700; border: 0; box-shadow: 0 6px 16px rgba(0, 0, 0, .2); }
.tp-hero .btn-hero:hover { background: #ffc43d; color: #3a2500; }
.tp-hero .btn-ghost { background: rgba(255, 255, 255, .18); color: #fff; border: 0; }
.tp-hero .btn-ghost:hover { background: rgba(255, 255, 255, .3); color: #fff; }
.tp-hero-art { position: relative; flex: 0 0 auto; width: 170px; height: 120px; }
.tp-hero-art i { position: absolute; color: #fff; }
.tp-hero-art .a { font-size: 7rem; right: 10px; top: -4px; opacity: .95; }
.tp-hero-art .b { font-size: 2.2rem; left: 8px; top: 6px; color: var(--c1); transform: rotate(-12deg); }
.tp-hero-art .c { font-size: 1.6rem; left: 30px; bottom: 6px; color: var(--c5); }
.tp-hero::before, .tp-hero::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .1); }
.tp-hero::before { width: 240px; height: 240px; right: -60px; top: -110px; }
.tp-hero::after { width: 140px; height: 140px; right: 150px; bottom: -80px; }
@media (max-width: 575px) { .tp-hero { padding: 1.2rem; } .tp-hero-art { display: none; } .tp-hero h1 { font-size: 1.3rem; } }

/* Gráfica de barras con la paleta */
.tp-bars { display: flex; align-items: flex-end; gap: .6rem; height: 170px; }
.tp-bars .bw { flex: 1; text-align: center; font-size: .78rem; }
.tp-bars .bw .br { border-radius: .7rem .7rem .35rem .35rem; background: var(--bc); min-height: 4px; transition: transform .15s; }
.tp-bars .bw:hover .br { transform: scaleY(1.03); transform-origin: bottom; }
.tp-bars .bw:nth-child(7n+1) { --bc: var(--c1); } .tp-bars .bw:nth-child(7n+2) { --bc: var(--c2); } .tp-bars .bw:nth-child(7n+3) { --bc: var(--c4); }
.tp-bars .bw:nth-child(7n+4) { --bc: var(--c5); } .tp-bars .bw:nth-child(7n+5) { --bc: var(--c9); } .tp-bars .bw:nth-child(7n+6) { --bc: var(--c8); } .tp-bars .bw:nth-child(7n+7) { --bc: var(--c6); }
.tp-rank { display: flex; align-items: center; gap: .75rem; padding: .5rem 0; border-bottom: 1px solid var(--tp-border); }
.tp-rank:last-child { border-bottom: 0; }
.tp-rank .n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .85rem; color: #fff; background: var(--bc, var(--c6)); flex: 0 0 auto; }
.tp-rank:nth-child(5n+1) .n { --bc: var(--c1); color: #3a2500; } .tp-rank:nth-child(5n+2) .n { --bc: var(--c2); } .tp-rank:nth-child(5n+3) .n { --bc: var(--c4); color: #1d3300; }
.tp-rank:nth-child(5n+4) .n { --bc: var(--c5); } .tp-rank:nth-child(5n+5) .n { --bc: var(--c9); }

/* ---------- Acceso ---------- */
.tp-guest { background: radial-gradient(900px 500px at 10% 0%, color-mix(in srgb, var(--c9) 28%, transparent), transparent 60%), radial-gradient(900px 500px at 100% 100%, color-mix(in srgb, var(--c5) 25%, transparent), transparent 60%), var(--tp-bg); }
.tp-guest-card { border: 0; border-radius: 1.75rem; box-shadow: 0 24px 60px rgba(80, 30, 110, .22); padding: 2rem; }

/* ---------- Punto de venta ---------- */
.tp-pos { height: calc(100vh - var(--tp-topbar-h) - 1.5rem); }
.tp-fav { border-radius: 1.1rem; border: 0; box-shadow: var(--tp-shadow); background: color-mix(in srgb, var(--fc, var(--c6)) 13%, var(--tp-surface)); border-left: 5px solid var(--fc, var(--c6)); }
.tp-fav:nth-child(5n+1) { --fc: var(--c1); } .tp-fav:nth-child(5n+2) { --fc: var(--c2); } .tp-fav:nth-child(5n+3) { --fc: var(--c4); } .tp-fav:nth-child(5n+4) { --fc: var(--c5); } .tp-fav:nth-child(5n+5) { --fc: var(--c9); }
.tp-fav:hover { background: color-mix(in srgb, var(--fc, var(--c6)) 24%, var(--tp-surface)); border-color: var(--fc); transform: translateY(-2px); }
.tp-cart, .tp-totals { border: 0; border-radius: 1.3rem; box-shadow: var(--tp-shadow); }
.tp-total-big { color: var(--tp-primary); }
.tp-pos-search input { border-radius: 1rem; box-shadow: var(--tp-shadow); border-color: transparent; }

/* ---------- Móvil ---------- */
@media (max-width: 991px) {
  .tp-topbar { height: 60px; }
  .tp-top-actions { padding: .25rem .35rem; }
  .tp-sidebar { width: min(300px, 86vw); }
  .tp-main { padding: .85rem; }
}