/* ===== Factuvio ===== */
:root {
  --fv-primary: #4338ca;
  --fv-sidebar: #1e1b4b;
  --fv-sidebar-hover: #312e81;
  --fv-sidebar-w: 248px;
  --bs-primary: #4338ca;
  --bs-primary-rgb: 67, 56, 202;
  --bs-link-color: #4338ca;
  --bs-link-color-rgb: 67, 56, 202;
}
[data-bs-theme="dark"] {
  --bs-body-bg: #0f1020;
  --bs-tertiary-bg: #17182b;
  --bs-link-color: #a5b4fc;
  --bs-link-color-rgb: 165, 180, 252;
  --fv-sidebar: #0b0b1a;
}
.btn-primary { --bs-btn-bg: #4338ca; --bs-btn-border-color: #4338ca; --bs-btn-hover-bg: #3730a3; --bs-btn-hover-border-color: #3730a3; --bs-btn-active-bg: #312e81; }
.btn-outline-primary { --bs-btn-color: #4338ca; --bs-btn-border-color: #4338ca; --bs-btn-hover-bg: #4338ca; --bs-btn-hover-border-color: #4338ca; --bs-btn-active-bg: #4338ca; --bs-btn-active-border-color: #4338ca; }
[data-bs-theme="dark"] .btn-outline-primary { --bs-btn-color: #a5b4fc; --bs-btn-border-color: #a5b4fc; }
.text-bg-primary { background-color: #4338ca !important; }
.nav-pills { --bs-nav-pills-link-active-bg: #4338ca; }

body { background: var(--bs-tertiary-bg); font-size: .95rem; }
.app-shell { display: flex; min-height: 100vh; }

/* Sidebar */
.sidebar { background: var(--fv-sidebar); width: var(--fv-sidebar-w); flex-shrink: 0; }
@media (min-width: 992px) {
  .sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; }
}
.sidebar.offcanvas-lg { --bs-offcanvas-width: 270px; --bs-offcanvas-bg: var(--fv-sidebar); }
/* Bootstrap deja transparente .offcanvas-lg en escritorio (background-color: transparent !important) */
.sidebar.offcanvas-lg { background-color: var(--fv-sidebar) !important; }
.sidebar-brand { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1rem .5rem; }
.sidebar-nav { padding: .25rem .5rem 2rem; display: flex; flex-direction: column; gap: 2px; }
.sidebar-nav a { color: #c7d2fe; text-decoration: none; padding: .55rem .75rem; border-radius: .5rem; display: flex; gap: .75rem; align-items: center; }
.sidebar-nav a:hover { background: var(--fv-sidebar-hover); color: #fff; }
.sidebar-nav a.active { background: #4338ca; color: #fff; }
.sidebar-nav a i { font-size: 1.1rem; }
.sidebar-section { color: #818cf8; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; padding: 1rem .75rem .25rem; }
/* Móvil: la lista del menú se desplaza (el panel no tiene offcanvas-body) */
@media (max-width: 991.98px) {
  .sidebar-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding-bottom: calc(2rem + env(safe-area-inset-bottom)); }
}
/* Escritorio: menú colapsado (sólo íconos) */
@media (min-width: 992px) {
  .sidebar { transition: width .2s; }
  .sidebar-collapsed .sidebar { width: 68px; overflow-x: hidden; }
  .sidebar-collapsed .sidebar-brand { justify-content: center; padding-inline: .5rem; }
  .sidebar-collapsed .sidebar-brand span,
  .sidebar-collapsed .sidebar-nav a span { display: none; }
  .sidebar-collapsed .sidebar-nav a { justify-content: center; padding-inline: 0; }
  .sidebar-collapsed .sidebar-section { font-size: 0; padding: .5rem 0 0; margin: .5rem .75rem 0; border-top: 1px solid rgba(255,255,255,.12); }
}

/* Main */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; gap: .5rem; padding: .5rem 1rem; background: var(--bs-body-bg); border-bottom: 1px solid var(--bs-border-color); }
.topbar-heading { min-width: 0; line-height: 1.2; }
.topbar-company { font-size: .75rem; font-weight: 600; color: var(--bs-link-color); }
.topbar-title { font-size: 1.1rem; font-weight: 600; margin: 0; }
.content { padding: 1rem; flex: 1; }
@media (min-width: 768px) { .content { padding: 1.5rem; } }
@media (max-width: 991.98px) { .content { padding-bottom: 5.5rem; } }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: #4338ca; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; }

/* Bottom nav (móvil) */
.bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1030; display: flex; background: var(--bs-body-bg); border-top: 1px solid var(--bs-border-color); padding-bottom: env(safe-area-inset-bottom); }
.bottom-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; padding: .4rem 0; font-size: .7rem; color: var(--bs-secondary-color); text-decoration: none; }
.bottom-nav a i { font-size: 1.3rem; }
.bottom-nav a.active { color: var(--bs-link-color); }

/* Cards / KPI */
.card { border: 1px solid var(--bs-border-color-translucent); border-radius: .75rem; }
.kpi .kpi-label { font-size: .8rem; color: var(--bs-secondary-color); }
.kpi .kpi-value { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.kpi .kpi-icon { width: 44px; height: 44px; border-radius: .75rem; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; }
.table { --bs-table-bg: transparent; }
.table td, .table th { vertical-align: middle; }
.table-nums td.num, .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--bs-secondary-color); font-weight: 600; }
.page-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.form-label { font-weight: 500; font-size: .85rem; margin-bottom: .25rem; }
.thumb { width: 40px; height: 40px; object-fit: cover; border-radius: .4rem; background: var(--bs-secondary-bg); }

/* Tablas responsivas tipo tarjeta en móvil */
@media (max-width: 767.98px) {
  .table-cards thead { display: none; }
  .table-cards tr { display: block; border: 1px solid var(--bs-border-color); border-radius: .6rem; margin-bottom: .6rem; padding: .4rem .6rem; background: var(--bs-body-bg); }
  .table-cards td { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: .2rem 0; text-align: right; }
  .table-cards td::before { content: attr(data-label); font-weight: 600; color: var(--bs-secondary-color); text-align: left; }
  .table-cards td.num { text-align: right; }
}

/* Login */
.guest { background: linear-gradient(135deg, #1e1b4b 0%, #4338ca 60%, #6366f1 100%); min-height: 100vh; }
.guest-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.guest-card { width: 100%; max-width: 460px; border-radius: 1rem; }

/* ===== POS ===== */
.pos-body .content { padding: 0; }
.pos { display: grid; grid-template-columns: 1fr 400px; height: calc(100vh - 57px); }
.pos-products { display: flex; flex-direction: column; min-height: 0; padding: .75rem; }
.pos-search { display: flex; gap: .5rem; margin-bottom: .5rem; }
.pos-cats { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .5rem; scrollbar-width: thin; }
.pos-cats .btn { white-space: nowrap; border-radius: 2rem; }
.pos-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .6rem; align-content: start; padding-bottom: 1rem; }
.pos-item { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: .7rem; padding: .5rem; cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: .25rem; transition: transform .08s, box-shadow .08s; user-select: none; }
.pos-item:active { transform: scale(.97); }
.pos-item:hover { box-shadow: 0 2px 10px rgba(67,56,202,.18); border-color: #6366f1; }
.pos-item .img { aspect-ratio: 4/3; border-radius: .5rem; background: var(--bs-secondary-bg) center/cover no-repeat; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: var(--bs-secondary-color); font-weight: 700; }
.pos-item .name { font-size: .82rem; font-weight: 600; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.3em; }
.pos-item .price { font-weight: 700; color: var(--bs-link-color); font-size: .9rem; }
.pos-item .stock { font-size: .7rem; color: var(--bs-secondary-color); }
.pos-item.out { opacity: .55; }
.pos-cart { background: var(--bs-body-bg); border-left: 1px solid var(--bs-border-color); display: flex; flex-direction: column; min-height: 0; }
.pos-cart-head { padding: .75rem; border-bottom: 1px solid var(--bs-border-color); }
.pos-lines { flex: 1; overflow-y: auto; padding: .25rem .75rem; }
.pos-line { display: grid; grid-template-columns: 1fr auto; gap: .25rem; padding: .5rem 0; border-bottom: 1px dashed var(--bs-border-color); }
.pos-line .ln-name { font-weight: 600; font-size: .88rem; }
.pos-line .ln-meta { font-size: .75rem; color: var(--bs-secondary-color); }
.pos-line .qty-ctl { display: flex; align-items: center; gap: .25rem; }
.pos-line .qty-ctl button { width: 30px; height: 30px; padding: 0; border-radius: 50%; }
.pos-line .qty-ctl input { width: 56px; text-align: center; padding: .15rem; }
.pos-totals { padding: .75rem; border-top: 1px solid var(--bs-border-color); background: var(--bs-tertiary-bg); }
.pos-totals .row-t { display: flex; justify-content: space-between; font-size: .85rem; }
.pos-totals .grand { font-size: 1.5rem; font-weight: 800; }
.pos-pay-btn { font-size: 1.15rem; padding: .8rem; font-weight: 700; }
.pos-cart-toggle { display: none; }
@media (max-width: 991.98px) {
  .pos { grid-template-columns: 1fr; height: auto; }
  .pos-products { height: calc(100vh - 57px - 60px - 64px); }
  .pos-cart { position: fixed; inset: 57px 0 0 0; z-index: 1040; transform: translateY(100%); transition: transform .25s; border-left: 0; }
  .pos-cart.open { transform: none; }
  .pos-cart-toggle { display: flex; position: fixed; left: .75rem; right: .75rem; bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 1035; }
}
.pay-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.pay-keys .btn { padding: .6rem; font-weight: 600; }

.empty-state { text-align: center; padding: 3rem 1rem; color: var(--bs-secondary-color); }
.empty-state i { font-size: 3rem; display: block; margin-bottom: .5rem; }
.chart-bars { display: flex; align-items: flex-end; gap: 4px; height: 160px; }
.chart-bars .bar { flex: 1; background: #6366f1; border-radius: 4px 4px 0 0; min-height: 2px; position: relative; }
.chart-bars .bar:hover { background: #4338ca; }
.chart-labels { display: flex; gap: 4px; font-size: .65rem; color: var(--bs-secondary-color); }
.chart-labels span { flex: 1; text-align: center; overflow: hidden; }

/* Lista desplegable con búsqueda (FV.searchSelect) */
.fv-ss { position: relative; min-width: 0; }
.fv-ss-btn { display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: calc(1.5em + .75rem + 2px); }
.fv-ss-btn.form-select-sm { min-height: calc(1.5em + .5rem + 2px); }
.fv-ss-btn:disabled { background-color: var(--bs-secondary-bg); opacity: 1; }
.fv-ss-native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.fv-ss-menu { position: absolute; z-index: 1065; top: calc(100% + 2px); left: 0; min-width: 100%; width: max-content; max-width: min(420px, 92vw);
  background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: .4rem; }
.fv-ss-list { max-height: 260px; overflow-y: auto; margin-top: .35rem; }
.fv-ss-opt { padding: .4rem .6rem; border-radius: .35rem; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fv-ss-opt.selected { font-weight: 600; }
.fv-ss-opt.active { background: var(--fv-primary); color: #fff; }
.fv-ss-opt.disabled { opacity: .5; pointer-events: none; }
.fv-ss-empty { padding: .4rem .6rem; color: var(--bs-secondary-color); font-size: .85rem; }
.input-group > .fv-ss { flex: 1 1 auto; width: 1%; }
.input-group > .fv-ss:not(:last-child) .fv-ss-btn { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > .fv-ss:not(:first-child) .fv-ss-btn { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; }