:root {
  --lab: #2563eb;
  --ink: #0f172a;
  --muted: #64748b;
  --surface: #ffffff;
  --bg: #f1f5f9;
  --line: #e2e8f0;
}
body { background: var(--bg); color: var(--ink); font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
code { font-size: .9em; color: #0f3d91; white-space: nowrap; }
a { text-decoration: none; }

.app-nav { background: #0f172a; box-shadow: 0 1px 0 rgba(255,255,255,.06); }
.app-nav .nav-link { font-size: .93rem; white-space: nowrap; }
.app-nav .nav-link.active { color: #fff; }
.lab-pill { background: var(--lab); color: #fff; border: 0; font-weight: 600; }
.lab-pill:hover, .lab-pill:focus { color: #fff; filter: brightness(1.1); }
.lab-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; vertical-align: middle; }
.lab-strip { background: var(--lab); color: #fff; font-size: .85rem; padding: .3rem 0; }

.app-main { padding-bottom: 90px !important; }
@media (min-width: 992px) { .app-main { padding-bottom: 2rem !important; } }
@media (max-width: 1199.98px) { .app-nav .navbar-collapse { max-height: calc(100vh - 60px); overflow-y: auto; } }

.page-head { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.page-head h1, .page-head h2 { font-size: 1.35rem; font-weight: 700; margin: 0; }
.page-head .sub { color: var(--muted); font-size: .9rem; }

.card { border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.card-header { background: transparent; border-bottom: 1px solid var(--line); font-weight: 600; }
.table > :not(caption) > * > * { padding: .55rem .6rem; }
.table thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); font-weight: 600; background: #f8fafc; }

.stat { padding: 1rem 1.1rem; }
.stat .k { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.stat .v { font-size: 1.9rem; font-weight: 700; line-height: 1.1; }
.stat i { font-size: 1.4rem; color: var(--lab); }

.quick-actions .btn { padding: .9rem .5rem; border-radius: 12px; font-weight: 600; display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.quick-actions .btn i { font-size: 1.5rem; }

.btn-lab { background: var(--lab); color: #fff; border-color: var(--lab); }
.btn-lab:hover { color: #fff; filter: brightness(1.08); }

.thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; background: #e2e8f0; display: inline-flex; align-items: center; justify-content: center; color: #94a3b8; flex-shrink: 0; }
.thumb-lg { width: 100%; max-height: 280px; object-fit: contain; border-radius: 12px; background: #f8fafc; }
.badge-soft { background: #eef2ff; color: #3730a3; font-weight: 600; }
.nolabel { background: #fff7ed; color: #9a3412; font-weight: 600; }

.code-big { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.05rem; letter-spacing: .03em; }
.barcode-box { background: #fff; border: 1px dashed var(--line); border-radius: 12px; padding: .75rem; text-align: center; }
.barcode-box svg { max-width: 100%; height: 70px; }

/* Barra inferior móvil */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1030;
  background: #fff; border-top: 1px solid var(--line);
  display: flex; justify-content: space-around; align-items: flex-end;
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
.bottom-nav a { flex: 1; text-align: center; color: var(--muted); font-size: .7rem; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.bottom-nav a i { font-size: 1.25rem; }
.bottom-nav a.active { color: var(--lab); }
.bottom-nav .scan-btn i { background: var(--lab); color: #fff; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-top: -24px; box-shadow: 0 6px 16px rgba(0,0,0,.2); font-size: 1.5rem; }
.bottom-nav .scan-btn { color: var(--ink); }

/* Escáner */
.scan-reader { width: 100%; min-height: 300px; background: #000; }
.scan-reader video { object-fit: cover; }
.scan-feedback { padding: .6rem 1rem; font-size: .9rem; min-height: 2.6rem; color: #cbd5e1; }
.scan-feedback.ok { background: #14532d; color: #dcfce7; }
.scan-feedback.err { background: #7f1d1d; color: #fee2e2; }

.scan-input-group .form-control { font-family: ui-monospace, Menlo, Consolas, monospace; }

/* Carrito de préstamo */
.cart-line { display: flex; gap: .75rem; align-items: center; padding: .6rem .75rem; border-bottom: 1px solid var(--line); }
.cart-line:last-child { border-bottom: 0; }
.cart-line .meta { flex: 1; min-width: 0; }
.cart-line .meta .n { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cart-line .meta .c { font-size: .8rem; color: var(--muted); }
.cart-line.flash { animation: flashbg 1s ease; }
@keyframes flashbg { from { background: #dcfce7; } to { background: transparent; } }

.result-card { border-left: 5px solid var(--lab); }
.empty-state { text-align: center; color: var(--muted); padding: 2.5rem 1rem; }
.empty-state i { font-size: 2.5rem; display: block; margin-bottom: .5rem; opacity: .6; }

.list-group-item-action.checked { background: #f0fdf4; }
.ret-line.done { background: #f0fdf4; }
.ret-line.done .form-check-label { text-decoration: none; }

.overdue { color: #b91c1c; font-weight: 600; }

@media print {
  .app-nav, .lab-strip, .bottom-nav, .no-print, .btn, .alert { display: none !important; }
  body { background: #fff; }
  .app-main { padding: 0 !important; max-width: 100% !important; }
  .card { border: 0; box-shadow: none; }
}

.login-body { background: linear-gradient(160deg, #0f172a 0%, #1e3a8a 100%); min-height: 100vh; }
.login-body .text-muted { color: #cbd5e1 !important; }
.login-body h1 { color: #fff; }
.login-body .card .text-muted { color: var(--muted) !important; }
.login-logo { width: 64px; height: 64px; border-radius: 18px; background: #fff; color: #1e3a8a; display: inline-flex; align-items: center; justify-content: center; font-size: 2rem; }
.sticky-bottom-bar { position: sticky; bottom: 80px; z-index: 5; }
@media (min-width: 992px) { .sticky-bottom-bar { bottom: 1rem; } }
.min-w-0 { min-width: 0; }
.border-dashed { border-style: dashed !important; }