:root {
  --c-navy: #0b2545;
  --c-navy-2: #13315c;
  --c-green: #00a878;
  --c-green-dark: #008a63;
  --c-gray-50: #f5f7fa;
  --c-gray-200: #e3e8ee;
  --c-gray-600: #5b6776;
  --bs-primary: var(--c-navy);
  --bs-primary-rgb: 11, 37, 69;
  --bs-success: var(--c-green);
  --bs-success-rgb: 0, 168, 120;
  --bs-link-color: var(--c-navy-2);
}
body { background: var(--c-gray-50); color: #1f2933; }
.btn-primary { --bs-btn-bg: var(--c-navy); --bs-btn-border-color: var(--c-navy); --bs-btn-hover-bg: var(--c-navy-2); --bs-btn-hover-border-color: var(--c-navy-2); --bs-btn-active-bg: var(--c-navy-2); }
.btn-success { --bs-btn-bg: var(--c-green); --bs-btn-border-color: var(--c-green); --bs-btn-hover-bg: var(--c-green-dark); --bs-btn-hover-border-color: var(--c-green-dark); }
.btn-outline-primary { --bs-btn-color: var(--c-navy); --bs-btn-border-color: var(--c-navy); --bs-btn-hover-bg: var(--c-navy); }
:focus-visible { outline: 3px solid #4c9ffe; outline-offset: 2px; }

/* Panel */
.app-topbar { background: var(--c-navy); padding: .5rem 0; }
.app-shell { display: flex; min-height: calc(100vh - 56px); }
.app-sidebar { width: 250px; --bs-offcanvas-bg: var(--c-navy-2); --bs-offcanvas-color: #cfd9e8; background: var(--c-navy-2); flex-shrink: 0; }
@media (min-width: 992px) { .app-sidebar.offcanvas-lg { background-color: var(--c-navy-2) !important; } }
.app-sidebar .nav-link { color: #cfd9e8; padding: .65rem 1.1rem; border-left: 3px solid transparent; }
.app-sidebar .nav-link i { width: 1.4rem; display: inline-block; }
.app-sidebar .nav-link:hover { background: rgba(255,255,255,.07); color: #fff; }
.app-sidebar .nav-link.active { background: rgba(0,168,120,.18); color: #fff; border-left-color: var(--c-green); }
.app-main { flex: 1; min-width: 0; }
@media (max-width: 991.98px) { .app-sidebar { background: var(--c-navy-2); } }
.card { border: 1px solid var(--c-gray-200); border-radius: .6rem; box-shadow: 0 1px 2px rgba(11,37,69,.04); }
.stat-card .stat-value { font-size: 1.7rem; font-weight: 700; color: var(--c-navy); line-height: 1.1; }
.stat-card .stat-label { color: var(--c-gray-600); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; }
.stat-card .stat-icon { font-size: 1.6rem; color: var(--c-green); }
.table > :not(caption) > * > * { vertical-align: middle; }
.badge { font-weight: 600; }
.form-section { border-left: 4px solid var(--c-green); padding-left: 1rem; margin-bottom: 1.5rem; }
.chart-box { position: relative; height: 280px; }
#gps-map { height: 440px; border-radius: .6rem; }

/* Público */
.public-nav { background: var(--c-navy); }
.public-footer { background: var(--c-navy); color: #e3e8ee; }
.footer-link { color: #9fb0cc; text-decoration: none; font-size: 1.02rem; }
.footer-link:hover { color: #fff; text-decoration: underline; }
.footer-social { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; font-size: 1.1rem; text-decoration: none; }
.footer-social:hover { background: var(--c-green); color: #fff; }
.hero { background: linear-gradient(135deg, var(--c-navy) 0%, var(--c-navy-2) 60%, #1b4d7a 100%); color: #fff; padding: 3.5rem 0; }
.hero .track-box { background: #fff; border-radius: .8rem; padding: 1rem; box-shadow: 0 8px 24px rgba(0,0,0,.2); }

.flyer-caption { background: rgba(11,37,69,.75); border-radius: .5rem; padding: .5rem 1rem; left: 10%; right: 10%; bottom: 1.5rem; }
.page-content ul { padding-left: 1.2rem; }

/* Línea de tiempo */
.timeline { list-style: none; padding-left: 0; margin: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 11px; top: 4px; bottom: 4px; width: 2px; background: var(--c-gray-200); }
.timeline li { position: relative; padding: 0 0 1.1rem 2.2rem; }
.timeline li::before { content: ""; position: absolute; left: 4px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--c-gray-600); }
.timeline li.current::before { border-color: var(--c-green); background: var(--c-green); }

/* Etiqueta / comprobante imprimibles */
.label-sheet { width: 100mm; border: 2px solid #000; padding: 4mm; background: #fff; font-family: Arial, sans-serif; page-break-after: always; }
.label-sheet .big { font-size: 20pt; font-weight: 800; letter-spacing: .04em; }
.label-sheet .warn { border: 2px solid #000; padding: 2mm; font-weight: 700; text-transform: uppercase; }
.receipt-sheet { max-width: 190mm; background: #fff; padding: 12mm; margin: 0 auto; }
.receipt-sheet.thermal { max-width: 80mm; padding: 4mm; font-size: 11px; }
@media print {
  .no-print, .app-topbar, .app-sidebar, .alert { display: none !important; }
  body, .app-main { background: #fff !important; padding: 0 !important; }
  .receipt-sheet, .label-sheet { box-shadow: none; border-color: #000; }
}