/* KTM Garage 250 — estilos base */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { -webkit-tap-highlight-color: transparent; }

html, body {
  background: #0a0a0a;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  overscroll-behavior-y: none;
}

#app { min-height: 100vh; min-height: 100dvh; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: #3f3f3f; border-radius: 3px; }
::-webkit-scrollbar-track { background: transparent; }

input, select, textarea {
  background: #1a1a1a;
  border: 1px solid #3f3f3f;
  color: #fff;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 16px; /* evita zoom automático no iOS */
  width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: #FF6600;
  box-shadow: 0 0 0 3px rgba(255,102,0,0.15);
}
label { display:block; font-size: 13px; color: #9ca3af; margin-bottom: 4px; font-weight: 600; }

.btn-primary {
  background: #FF6600;
  color: #fff;
  font-weight: 700;
  border-radius: 12px;
  padding: 12px 20px;
  transition: all .15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-primary:active { transform: scale(0.97); background: #E55A00; }
.btn-secondary {
  background: #2a2a2a;
  color: #fff;
  font-weight: 600;
  border-radius: 12px;
  padding: 12px 20px;
  border: 1px solid #3f3f3f;
}
.btn-secondary:active { transform: scale(0.97); }
.btn-danger {
  background: rgba(239,68,68,0.15);
  color: #f87171;
  font-weight: 600;
  border-radius: 12px;
  padding: 10px 16px;
  border: 1px solid rgba(239,68,68,0.3);
}

.card {
  background: #151515;
  border: 1px solid #2a2a2a;
  border-radius: 16px;
  padding: 16px;
}

.safe-top { padding-top: var(--safe-top); }
.safe-bottom { padding-bottom: var(--safe-bottom); }

/* Bottom nav (mobile) */
#bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: rgba(10,10,10,0.95);
  backdrop-filter: blur(12px);
  border-top: 1px solid #2a2a2a;
  padding-bottom: var(--safe-bottom);
  z-index: 40;
}
#bottom-nav a { -webkit-user-select: none; user-select: none; }
#bottom-nav a.active { color: #FF6600; }
#bottom-nav a.active i { transform: translateY(-2px); }

.skeleton {
  background: linear-gradient(90deg, #1a1a1a 25%, #242424 37%, #1a1a1a 63%);
  background-size: 400% 100%;
  animation: skeleton-loading 1.4s ease infinite;
  border-radius: 8px;
}
@keyframes skeleton-loading { 0% { background-position: 100% 50% } 100% { background-position: 0 50% } }

.fade-in { animation: fadeIn .25s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px);} to { opacity: 1; transform: translateY(0);} }

@media (min-width: 1024px) {
  #bottom-nav { display: none; }
}

.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.75);
  z-index: 100; display: flex; align-items: flex-end; justify-content: center;
}
@media (min-width: 640px) {
  .modal-overlay { align-items: center; }
}
.modal-sheet {
  background: #111111; border-top: 1px solid #2a2a2a;
  border-radius: 20px 20px 0 0;
  width: 100%; max-width: 560px;
  max-height: 92vh; overflow-y: auto;
  padding-bottom: calc(24px + var(--safe-bottom));
}
@media (min-width: 640px) {
  .modal-sheet { border-radius: 20px; max-height: 88vh; }
}

.tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
}