/* ============ FOOTER STATUS BAR ============ */
.app-footer {
  height: var(--footer-h);
  background: linear-gradient(90deg, #0d1b3e, #1a3a6e);
  display: flex; align-items: center; padding: 0 16px;
  padding-bottom: max(0px, env(safe-area-inset-bottom));
  gap: 16px; font-size: 12px; color: rgba(255,255,255,0.7);
  border-top: 1px solid rgba(255,255,255,0.1);
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
}
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green-main); box-shadow: 0 0 6px var(--green-main); }
.status-dot.red { background: var(--red); box-shadow: 0 0 6px var(--red); }

/* v45: indicadores de red y sync */
#net-indicator { display:flex; align-items:center; gap:5px; font-size:11px; font-weight:700; padding:2px 8px; border-radius:20px; transition:all 0.4s; }
#net-indicator.online  { background:rgba(34,197,94,0.15);  color:#4ade80; }
#net-indicator.offline { background:rgba(239,68,68,0.2);   color:#f87171; animation: net-pulse 1.5s infinite; }
#net-indicator.syncing { background:rgba(251,191,36,0.15); color:#fbbf24; }
#sync-pending { font-size:10px; color:#f97316; font-weight:700; display:none; }

@keyframes net-pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }
@keyframes spin-slow  { to{transform:rotate(360deg)} }
.sync-spin { display:inline-block; animation:spin-slow 1s linear infinite; }

.footer-sep { color: rgba(255,255,255,0.3); }
.footer-label { color: rgba(255,255,255,0.5); }
.footer-val { color: white; font-weight: 600; }
.footer-val.green { color: var(--green-main); }

/* ── Responsive footer ─────────────────────────────────────── */
@media (max-width: 768px) {
  .app-footer {
    font-size: 10px;
    gap: 8px;
    padding: 0 8px;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .app-footer::-webkit-scrollbar { display: none; }
  #footer-clock { display: none; }
}

@media (max-width: 600px) {
  .app-footer {
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    height: auto !important;
    min-height: var(--footer-h, 36px);
  }
  .footer-label, .footer-val, .footer-sep { display: none !important; }
  #net-indicator { display: flex !important; }
  #footer-clock  { display: none !important; }
}