/* ── Tipografía base ─────────────────────────────────── */
body,
.nav-sidebar,
.main-header,
.content-wrapper,
.main-footer {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── Sidebar ─────────────────────────────────────────── */
.main-sidebar {
  box-shadow: 2px 0 8px rgba(0, 0, 0, .15);
}

.sidebar .nav-sidebar .nav-link {
  border-radius: 6px;
  margin: 2px 8px;
  transition: background .15s ease;
}

.sidebar .nav-sidebar .nav-link.active {
  background: rgba(255, 255, 255, .15);
  font-weight: 600;
}

.sidebar .user-panel {
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

/* ── Cards ───────────────────────────────────────────── */
.card {
  border-radius: 10px;
  border: none;
}

.card.card-outline {
  border-top: 3px solid;
}

.card-header {
  background: transparent;
  border-bottom: 1px solid rgba(0, 0, 0, .06);
  font-weight: 600;
}

/* ── Info boxes ──────────────────────────────────────── */
.info-box {
  border-radius: 10px;
  min-height: 78px;
}

.info-box-icon {
  border-radius: 10px 0 0 10px;
  font-size: 1.6rem;
  width: 70px;
  line-height: 78px;
}

/* ── Botones ─────────────────────────────────────────── */
.btn {
  border-radius: 6px;
  font-weight: 500;
  transition: all .15s ease;
}

.btn-xs {
  font-size: .7rem;
  padding: .2rem .5rem;
}

/* ── Tablas ──────────────────────────────────────────── */
.table thead th {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: #6c757d;
  border-top: none;
}

.table td {
  vertical-align: middle;
  font-size: .875rem;
}

/* ── Modales ─────────────────────────────────────────── */
.modal-content {
  border: none;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
}

.modal-header {
  border-radius: 12px 12px 0 0;
}

/* ── Badges ──────────────────────────────────────────── */
.badge {
  font-weight: 500;
  letter-spacing: .2px;
}

/* ── Forms ───────────────────────────────────────────── */
.form-control {
  border-radius: 7px;
  border: 1.5px solid #dee2e6;
  font-size: .875rem;
}

.form-control:focus {
  border-color: #1976D2;
  box-shadow: 0 0 0 3px rgba(25, 118, 210, .12);
}

/* ── DataTables wrapper ──────────────────────────────── */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border-radius: 6px;
  border: 1.5px solid #dee2e6;
  padding: .25rem .5rem;
  font-size: .875rem;
}

/* ── Navbar ──────────────────────────────────────────── */
.main-header.navbar {
  box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
}

/* ── Content wrapper ─────────────────────────────────── */
.content-wrapper {
  background: #f4f6f9;
}

/* ── Animaciones suaves ──────────────────────────────── */
.card,
.info-box,
.modal-content {
  transition: box-shadow .2s ease;
}

/* ── Toast personalizado ─────────────────────────────── */
#scoapp-toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.scoapp-toast {
  min-width: 260px;
  padding: .75rem 1rem;
  border-radius: 8px;
  color: #fff;
  font-size: .875rem;
  font-weight: 500;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
  display: flex;
  align-items: center;
  gap: .6rem;
  animation: toastIn .25s ease;
}

.scoapp-toast.success { background: #2e7d32; }
.scoapp-toast.error   { background: #c62828; }
.scoapp-toast.info    { background: #1565c0; }
.scoapp-toast.warning { background: #e65100; }

@keyframes toastIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Utilidades ──────────────────────────────────────── */
.font-weight-600 { font-weight: 600 !important; }
.font-weight-700 { font-weight: 700 !important; }
.cursor-pointer  { cursor: pointer; }

/* ── DataTables Responsive child rows ───────────────── */
table.dataTable > tbody > tr.child {
  background: #f8f9fa;
}

table.dataTable > tbody > tr.child td.child {
  padding: 0 !important;
}

/* Botón expand/collapse */
table.dataTable > tbody > tr > td.dtr-control::before {
  background-color: #1976D2 !important;
}

/* Layout móvil DataTables */
@media (max-width: 767px) {
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_length {
    text-align: left !important;
    float: none !important;
  }

  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate {
    text-align: center !important;
    float: none !important;
    margin-top: .5rem;
  }

  .dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: .3rem .6rem !important;
    font-size: .8rem !important;
  }
}

/* ── Tema oscuro (dark-mode AdminLTE) ────────────────── */
.dark-mode .card {
  background-color: #343a40;
  color: #dee2e6;
}

.dark-mode .card-header {
  background-color: #3d4349;
  border-bottom-color: #454d55;
}

.dark-mode .table {
  color: #dee2e6;
}

.dark-mode .table thead th {
  color: #adb5bd;
  border-color: #454d55;
}

.dark-mode .table td,
.dark-mode .table th {
  border-color: #454d55;
}

.dark-mode .table-hover tbody tr:hover {
  background-color: rgba(255,255,255,.05);
}

.dark-mode .form-control {
  background-color: #3d4349;
  border-color: #454d55;
  color: #dee2e6;
}

.dark-mode .form-control:focus {
  background-color: #3d4349;
  border-color: #1976D2;
  color: #dee2e6;
}

.dark-mode .modal-content {
  background-color: #343a40;
  color: #dee2e6;
}

.dark-mode .modal-body .table {
  background-color: transparent;
}

.dark-mode .bg-light {
  background-color: #3d4349 !important;
}

.dark-mode .text-muted {
  color: #adb5bd !important;
}

.dark-mode .border {
  border-color: #454d55 !important;
}

.dark-mode .info-box {
  background-color: #343a40;
  color: #dee2e6;
}