/* =========================================================
   COMPONENTS — Botones, badges, nav, toasts, tabs, misc
   ========================================================= */

/* ── LOGIN BUTTON + ERROR ── */
.btn-login {
  width: 100%;
  padding: 10px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  margin-top: 0.25rem;
  transition: background 0.15s;
}
.btn-login:hover { background: var(--primary-hover); }
.login-err { color: var(--red-txt); font-size: 13px; margin-top: 8px; display: none; }

/* Botón tema */
.btn-theme {
  background: var(--surface2);
  border: 0.5px solid var(--border);
  border-radius: var(--radius);
  padding: 5px 8px;
  font-size: 14px;
  cursor: pointer;
  line-height: 1;
  transition: background 0.15s, border-color 0.25s;
  color: var(--text);
}
.btn-theme:hover { background: var(--bg); }

.btn-exit {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-exit:hover { background: var(--primary-hover); }

/* ── NAV ITEMS ── */
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 1rem;
  cursor: pointer;
  color: var(--text2);
  font-size: 13px;
  font-weight: 500;
  border-left: 3px solid transparent;
  transition: background 0.1s, color 0.1s;
}
.nav-item:hover { background: var(--bg); }
.nav-item.active {
  background: var(--primary-light);
  color: var(--primary);
  border-left-color: var(--primary);
}
.nav-icon { font-size: 15px; width: 20px; text-align: center; }

/* ── BOTONES ── */
.btn {
  font-size: 12px;
  padding: 7px 12px;
  border-radius: var(--radius);
  border: 0.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
}
.btn:hover { background: var(--bg); }
.btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn-success { background: #2a5a0c; color: #fff; border-color: #2a5a0c; }
.btn-success:hover { background: #3b7010; }
.btn-warn { background: #7a4700; color: #fff; border-color: #7a4700; }
.btn-warn:hover { background: #9c5c00; }
.btn-danger { color: var(--red-txt); border-color: var(--border); }
.btn-danger:hover { background: var(--red-bg); }

/* ── BADGES ── */
.badge { display: inline-block; font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 20px; white-space: nowrap; }
.b-green  { background: var(--green-bg);  color: var(--green-txt); }
.b-yellow { background: var(--yellow-bg); color: var(--yellow-txt); }
.b-red    { background: var(--red-bg);    color: var(--red-txt); }
.b-blue   { background: var(--blue-bg);   color: var(--blue-txt); }
.b-gray   { background: var(--gray-bg);   color: var(--gray-txt); }
.b-orange { background: var(--orange-bg); color: var(--primary-hover); }
.pill { font-size: 10px; padding: 1px 6px; border-radius: 20px; border: 0.5px solid var(--border); color: var(--muted); display: inline-block; }
.zona-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 5px; }

/* ── MISC ── */
.stock-warn { color: var(--yellow-txt); font-weight: 500; }
.empty { text-align: center; padding: 3rem; color: var(--muted); }

/* ── TOAST ── */
.toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  background: var(--text);
  color: var(--surface);
  padding: 10px 16px;
  border-radius: var(--radius);
  font-size: 13px;
  z-index: 300;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
  box-shadow: var(--shadow-md);
}
.toast.show { opacity: 1; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ── TABS ── */
.tabs-row { display:flex; gap:4px; margin-bottom:1rem; border-bottom:1px solid var(--border); padding-bottom:0; }
.tab-btn { background:none; border:none; padding:8px 16px; font-size:13px; font-weight:500; color:var(--muted); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; }
.tab-btn:hover { color:var(--text); }
.tab-btn.active { color:var(--primary); border-bottom-color:var(--primary); }

/* ── SEARCH RESULT ── */
.search-result-item { padding:6px 10px; cursor:pointer; font-size:13px; background:var(--surface); border:0.5px solid var(--border); border-top:none; }
.search-result-item:hover { background:var(--bg); }