/* ── Tema claro (default) ─────────────────────────────────────────────────── */
:root,
[data-bs-theme="light"] {
  --primary: #6366f1;

  --app-bg:         #f8fafc;
  --app-card-bg:    #ffffff;
  --app-text:       #1e293b;
  --app-text-muted: #64748b;
  --app-border:     #e2e8f0;
  --app-input-bg:   #f1f5f9;
  --app-hover:      #f1f5f9;

  --sidebar-bg:     #0f172a;
  --sidebar-text:   #cbd5e1;
  --sidebar-border: #1e293b;
  --sidebar-hover:  rgba(255,255,255,.08);

  --header-bg:      #ffffff;
  --header-border:  #e2e8f0;
}

/* ── Tema oscuro ──────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] {
  --app-bg:         #0f172a;
  --app-card-bg:    #1e293b;
  --app-text:       #e2e8f0;
  --app-text-muted: #94a3b8;
  --app-border:     #334155;
  --app-input-bg:   #0f172a;
  --app-hover:      #334155;

  --sidebar-bg:     #020617;
  --sidebar-text:   #cbd5e1;
  --sidebar-border: #1e293b;
  --sidebar-hover:  rgba(255,255,255,.06);

  --header-bg:      #1e293b;
  --header-border:  #334155;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--app-bg);
  color: var(--app-text);
}

/* ── Bootstrap overrides con variables CSS ────────────────────────────────── */
.card {
  background: var(--app-card-bg) !important;
  border-color: var(--app-border) !important;
  color: var(--app-text) !important;
}

/* Inputs, selects, textareas */
.form-control,
.form-select,
.form-control:focus,
.form-select:focus {
  background-color: var(--app-input-bg) !important;
  border-color: var(--app-border) !important;
  color: var(--app-text) !important;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.15) !important;
}
.form-control::placeholder { color: var(--app-text-muted) !important; }

/* Input group */
.input-group-text {
  background: var(--app-input-bg) !important;
  border-color: var(--app-border) !important;
  color: var(--app-text-muted) !important;
}

/* Switch / checkbox */
.form-check-input {
  background-color: var(--app-input-bg) !important;
  border-color: var(--app-border) !important;
}
.form-check-input:checked {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}
.form-check-label { color: var(--app-text) !important; }

/* Buttons */
.btn-primary  { background: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important; }
.btn-light    { background: var(--app-input-bg) !important; border-color: var(--app-border) !important; color: var(--app-text) !important; }

/* Table */
.table        { color: var(--app-text) !important; --bs-table-bg: transparent; }
.table-hover tbody tr:hover td { background: var(--app-hover) !important; }
.table > :not(caption) > * > * { background-color: transparent !important; }

/* Pagination */
.page-link     { background: var(--app-card-bg) !important; border-color: var(--app-border) !important; color: var(--app-text) !important; }
.page-item.active .page-link { background: var(--primary) !important; border-color: var(--primary) !important; color: white !important; }
.page-item.disabled .page-link { opacity: .4; }

/* Labels */
.form-label { color: var(--app-text) !important; }
label       { color: var(--app-text) !important; }

/* Invalid feedback */
.invalid-feedback { color: #ef4444 !important; }
.is-invalid       { border-color: #ef4444 !important; }

/* ── Animaciones ──────────────────────────────────────────────────────────── */
@keyframes fadeIn  { from { opacity:0; transform:translateY(6px) } to { opacity:1; transform:translateY(0) } }
@keyframes slideIn { from { opacity:0; transform:translateX(110%) } to { opacity:1; transform:translateX(0) } }
@keyframes spin    { to   { transform: rotate(360deg); } }

/* ── Scrollbar discreta ───────────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--app-border); border-radius: 3px; }


/* ─────────────────────────────────────────────────────────────
   BOTÓN BASE (comportamiento global)
──────────────────────────────────────────────────────────── */

.btn {
  transition: all 0.15s ease-in-out;
  border-radius: 8px;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0px);
}

.btn:focus {
  box-shadow: 0 0 0 0.25rem rgba(99,102,241,.25) !important;
}

/* ─────────────────────────────────────────────────────────────
   PRIMARY (principal)
──────────────────────────────────────────────────────────── */

.btn-primary {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}

.btn-primary:hover {
  background: #4f46e5 !important;
  border-color: #4f46e5 !important;
}

.btn-primary:active {
  background: #4338ca !important;
  border-color: #4338ca !important;
}

/* ─────────────────────────────────────────────────────────────
   SECONDARY
──────────────────────────────────────────────────────────── */

.btn-secondary {
  background: var(--app-input-bg) !important;
  border-color: var(--app-border) !important;
  color: var(--app-text) !important;
}

.btn-secondary:hover {
  background: var(--app-hover) !important;
  border-color: var(--app-border) !important;
}

/* ─────────────────────────────────────────────────────────────
   SUCCESS
──────────────────────────────────────────────────────────── */

.btn-success {
  background: #22c55e !important;
  border-color: #22c55e !important;
  color: #fff !important;
}

.btn-success:hover {
  background: #16a34a !important;
  border-color: #16a34a !important;
}

/* ─────────────────────────────────────────────────────────────
   DANGER
──────────────────────────────────────────────────────────── */

.btn-danger {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
  color: #fff !important;
}

.btn-danger:hover {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
}

/* ─────────────────────────────────────────────────────────────
   WARNING
──────────────────────────────────────────────────────────── */

.btn-warning {
  background: #f59e0b !important;
  border-color: #f59e0b !important;
  color: #111827 !important;
}

.btn-warning:hover {
  background: #d97706 !important;
  border-color: #d97706 !important;
}

/* ─────────────────────────────────────────────────────────────
   INFO
──────────────────────────────────────────────────────────── */

.btn-info {
  background: #06b6d4 !important;
  border-color: #06b6d4 !important;
  color: #fff !important;
}

.btn-info:hover {
  background: #0891b2 !important;
  border-color: #0891b2 !important;
}

/* ─────────────────────────────────────────────────────────────
   LIGHT
──────────────────────────────────────────────────────────── */

.btn-light {
  background: var(--app-input-bg) !important;
  border-color: var(--app-border) !important;
  color: var(--app-text) !important;
}

.btn-light:hover {
  background: var(--app-hover) !important;
}

/* ─────────────────────────────────────────────────────────────
   OUTLINE BUTTONS (muy importantes)
──────────────────────────────────────────────────────────── */

.btn-outline-primary {
  color: var(--primary) !important;
  border-color: var(--primary) !important;
}

.btn-outline-primary:hover {
  background: var(--primary) !important;
  color: #fff !important;
}

.btn-outline-danger {
  color: #ef4444 !important;
  border-color: #ef4444 !important;
}

.btn-outline-danger:hover {
  background: #ef4444 !important;
  color: #fff !important;
}

.btn-outline-secondary {
  color: var(--app-text) !important;
  border-color: var(--app-border) !important;
}

.btn-outline-secondary:hover {
  background: var(--app-hover) !important;
}

/* ─────────────────────────────────────────────────────────────
   DISABLED (para todos)
──────────────────────────────────────────────────────────── */

.btn:disabled {
  opacity: 0.6;
  pointer-events: none;
  transform: none !important;
}