:root {
    --sv-dark: #1a1a2e;
    --sv-dark-2: #16213e;
    --sv-accent: #0f3460;
    --sv-bg: #f0f2f5;
    --sidebar-w: 250px;
}

body {
    background: var(--sv-bg);
    font-size: .925rem;
}

.app { display: flex; min-height: 100vh; }

/* ── Sidebar ─────────────────────────────── */
.sidebar {
    width: var(--sidebar-w);
    /* !important: Bootstrap pone fondo transparente a .offcanvas-lg en pantallas grandes */
    background: var(--sv-dark) !important;
    color: #fff;
    display: flex;
    flex-direction: column;
}
@media (min-width: 992px) {
    .sidebar {
        position: sticky;
        top: 0;
        height: 100vh;
        flex-shrink: 0;
    }
}
.sidebar.offcanvas-lg { --bs-offcanvas-width: var(--sidebar-w); --bs-offcanvas-bg: var(--sv-dark); }
.sidebar-brand {
    display: flex; align-items: center; gap: .6rem;
    padding: 1rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
    font-size: .9rem;
}
.sidebar-logo { width: 42px; height: 42px; object-fit: contain; background: #fff; border-radius: 8px; padding: 2px; }
.sidebar-nav { flex: 1; overflow-y: auto; padding: .5rem 0; }
.sidebar-nav a {
    display: flex; align-items: center; gap: .65rem;
    padding: .55rem 1.1rem;
    color: #c9cbd6;
    text-decoration: none;
    border-left: 3px solid transparent;
}
.sidebar-nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.sidebar-nav a.active { background: rgba(255,255,255,.1); color: #fff; border-left-color: #4fc3f7; }
.sidebar-nav i { font-size: 1.05rem; width: 1.2rem; text-align: center; }
.sidebar-sep {
    font-size: .7rem; text-transform: uppercase; letter-spacing: .08em;
    color: rgba(255,255,255,.4); padding: .9rem 1.1rem .3rem;
}
.sidebar-user { padding: .9rem 1rem; border-top: 1px solid rgba(255,255,255,.08); font-size: .85rem; }

/* ── Contenido ───────────────────────────── */
.content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
    display: flex; align-items: center;
    background: #fff;
    padding: .8rem 1.25rem;
    border-bottom: 1px solid #e3e6ea;
    position: sticky; top: 0; z-index: 1020;
}

.card { border: 1px solid #e3e6ea; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.card-header { background: #fff; font-weight: 600; }

.table { font-size: .875rem; }
.table thead th { background: var(--sv-dark); color: #fff; font-weight: 500; white-space: nowrap; border-color: var(--sv-dark); }
.table-hover tbody tr { cursor: default; }
.table td.num, .table th.num { text-align: right; white-space: nowrap; }

.stat-card { border-radius: .6rem; padding: 1rem 1.1rem; color: #fff; }
.stat-card .stat-label { font-size: .8rem; opacity: .85; }
.stat-card .stat-value { font-size: 1.45rem; font-weight: 700; }
.stat-card i { font-size: 2rem; opacity: .35; }

/* ── Punto de venta ──────────────────────── */
.pos-results { max-height: 420px; overflow-y: auto; }
.pos-results .list-group-item { cursor: pointer; padding: .5rem .75rem; }
.pos-results .list-group-item.selected { background: #e7f1ff; border-left: 3px solid var(--sv-accent); }
.pos-results .prod-desc { font-size: .85rem; }
.pos-results .prod-meta { font-size: .75rem; color: #6c757d; }
.cart-table td { vertical-align: middle; }
.cart-table .cart-qty { width: 80px; }
.cart-table .desc-cell { min-width: 220px; white-space: normal; }
.cart-empty { color: #adb5bd; text-align: center; padding: 2.5rem 1rem; }
.totals-box { background: #f8f9fb; border-radius: .5rem; padding: .75rem 1rem; }
.totals-box .total-final { font-size: 1.35rem; font-weight: 700; color: var(--sv-dark); }
.badge-manual { font-size: .65rem; }

.btn-dark { background: var(--sv-dark); border-color: var(--sv-dark); }

/* ── Login ───────────────────────────────── */
.login-bg {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--sv-dark) 0%, var(--sv-accent) 100%);
    display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.login-card { width: 100%; max-width: 380px; border-radius: 1rem; }
.login-logo { width: 90px; height: 90px; object-fit: contain; }

@media (max-width: 991.98px) {
    .pos-results { max-height: 260px; }
}
@media (max-width: 575.98px) {
    .topbar { padding: .6rem .9rem; }
    .stat-card .stat-value { font-size: 1.2rem; }
}

@media print {
    .sidebar, .topbar, .no-print { display: none !important; }
}

/* ── Móvil: punto de venta / cotizaciones ─────────────────── */
.pos-bar { display: none; }
@media (max-width: 767.98px) {
    /* iOS hace zoom si el campo tiene menos de 16px */
    .form-control, .form-select, .form-control-sm, .form-select-sm { font-size: 16px; }
    .btn { min-height: 40px; }
    .container-fluid { padding-bottom: 5.5rem !important; }

    /* Carrito: cada fila pasa a ser una tarjeta */
    .cart-table, .cart-table tbody { display: block; width: 100%; }
    .cart-table thead { display: none; }
    .cart-table tr { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem; position: relative; padding: .6rem .75rem; border-bottom: 1px solid #e3e6ea; }
    .cart-table td { display: block; padding: 0; border: 0; text-align: left !important; width: auto; }
    .cart-table td.c-idx { display: none; }
    .cart-table td.desc-cell { flex: 0 0 100%; min-width: 0; padding-right: 4.5rem; }
    .cart-table td[data-l]::before { content: attr(data-l); display: block; font-size: .65rem; text-transform: uppercase; color: #8a919a; line-height: 1; }
    .cart-table td.c-acc { position: absolute; top: .3rem; right: .3rem; }
    .cart-table td.c-acc .btn { padding: .45rem .65rem !important; font-size: 1.1rem; }
    .cart-table .cart-qty { width: 90px; margin: 0 !important; }
    .cart-table td.c-total { margin-left: auto; font-size: 1.05rem; }
    .cart-table td.cart-empty { flex: 0 0 100%; text-align: center !important; }

    /* Resultados de búsqueda más cómodos al toque */
    .pos-results { max-height: 300px; }
    .pos-results .list-group-item { padding: .7rem .75rem; }

    /* Barra inferior fija: total + guardar */
    .pos-bar {
        display: flex; align-items: center; gap: .75rem;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
        background: #fff; border-top: 1px solid #d5d9de;
        padding: .6rem .9rem calc(.6rem + env(safe-area-inset-bottom));
        box-shadow: 0 -2px 8px rgba(0,0,0,.08);
    }
    .pos-bar .pos-bar-total { line-height: 1.1; flex: 1; min-width: 0; }
    .pos-bar .pos-bar-total small { color: #6c757d; display: block; font-size: .72rem; }
    .pos-bar .pos-bar-total b { font-size: 1.25rem; color: var(--sv-dark); }
    #posGuardarFila { display: none !important; }
    #posCarritoCol, #posSel { scroll-margin-top: 4.5rem; }   /* el botón grande del final se reemplaza por la barra */

    /* Historial y detalle: tablas con scroll lateral suave y botones apilados */
    .table-responsive { -webkit-overflow-scrolling: touch; }
}