/* app.css — PWA Ofertas */
:root { --brand: #0d6efd; }

body { background: #f2f4f7; padding-top: 56px; padding-bottom: 64px; }

.app-header {
  position: fixed; top: 0; left: 0; right: 0; height: 56px; z-index: 1030;
  background: var(--brand); color: #fff;
  display: flex; align-items: center; padding: 0 12px;
}
.app-header .btn-outline-light { border-color: rgba(255,255,255,.5); }

.app-footer {
  position: fixed; bottom: 0; left: 0; right: 0; height: 60px; z-index: 1030;
  background: #fff; border-top: 1px solid #dee2e6;
  display: flex; justify-content: space-around; align-items: stretch;
}
.app-footer button {
  flex: 1; border: 0; background: none; font-size: .7rem; color: #6c757d;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  position: relative;
}
.app-footer button.active { color: var(--brand); font-weight: 600; }
.app-footer button i { font-size: 1.25rem; }
.app-footer .f-badge {
  position: absolute; top: 6px; right: calc(50% - 22px);
  min-width: 17px; height: 17px; border-radius: 9px; background: #dc3545; color: #fff;
  font-size: .62rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
}

.view { display: none; padding: 12px; }
.view.active { display: block; }

.status-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.status-dot.online { background: #4ade80; }
.status-dot.offline { background: #f87171; }

.cliente-item { cursor: pointer; }
.cliente-item:active { background: #e7f1fb; }

.prod-row { border-bottom: 1px solid #edf1f5; padding: .4rem 0; }
.prod-row .form-control { font-size: .85rem; }

.badge-promo { background: #198754; font-size: .65rem; }
.min-hint { font-size: .7rem; color: #198754; }
.input-piso-violado { border-color: #dc3545 !important; background: #fdeaea !important; }

.foto-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid #dee2e6; }

.of-card { border-left: 4px solid #ffc107; }
.of-card.enviado { border-left-color: #0dcaf0; }
.of-card.sincronizado { border-left-color: #198754; }
.of-card.rechazado, .of-card.error { border-left-color: #dc3545; }

.notif-item.no-leida { background: #eaf1f8; font-weight: 600; }

.spin-center { display: flex; justify-content: center; padding: 2rem; }