/* Estilos propios de los paneles (admin y agentes) sobre AdminLTE 4.
   AdminLTE se sirve desde static/vendor/ y aquí solo se ajustan detalles de
   marca, tablas, badges de estado y el QR de 2FA. */

:root {
  --sr-brand: #1f6feb;
  --sr-brand-dark: #0b3d91;
  --sr-radius: 0.75rem;
}

body {
  --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
}

/* --- Marca / sidebar ------------------------------------------------------- */
.app-sidebar .brand-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8125rem 1rem;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.app-sidebar .brand-link:hover {
  color: #fff;
}

.app-sidebar .brand-image {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  font-size: 1.25rem;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, var(--sr-brand), var(--sr-brand-dark));
  box-shadow: 0 2px 8px rgba(31, 111, 235, 0.45);
}

.app-sidebar .brand-text {
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-sidebar .sidebar-menu .nav-link {
  border-radius: 0.45rem;
  margin: 0.15rem 0.5rem;
}

.app-sidebar .sidebar-menu .nav-link.active {
  background-color: var(--sr-brand);
  color: #fff;
  box-shadow: 0 2px 10px rgba(31, 111, 235, 0.35);
}

.app-header .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* --- Tarjetas y tablas ----------------------------------------------------- */
.card {
  border-radius: var(--sr-radius);
  border-color: rgba(0, 0, 0, 0.085);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.card-header {
  background-color: #fff;
  border-bottom-color: rgba(0, 0, 0, 0.075);
}

.table > :not(caption) > * > * {
  padding: 0.6rem 0.65rem;
}

.table thead th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #6b7280;
  white-space: nowrap;
}

.table td {
  vertical-align: middle;
}

.table-hover > tbody > tr:hover > * {
  --bs-table-bg-state: rgba(31, 111, 235, 0.06);
}

/* --- Badges de estado ------------------------------------------------------ */
.badge.status-paid {
  color: #0f5132;
  background-color: #d1e7dd;
  border: 1px solid #a3cfbb;
}

.badge.status-pending,
.badge.status-processing {
  color: #664d03;
  background-color: #fff3cd;
  border: 1px solid #ffe69c;
}

.badge.status-expired,
.badge.status-cancelled {
  color: #842029;
  background-color: #f8d7da;
  border: 1px solid #f1aeb5;
}

/* --- 2FA / QR -------------------------------------------------------------- */
.qr-box {
  display: inline-block;
  line-height: 0;
  max-width: 100%;
}

.qr-box svg {
  width: 190px;
  height: 190px;
  max-width: 100%;
  height: auto;
}

/* --- Login / setup --------------------------------------------------------- */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: radial-gradient(circle at 20% 20%, #e8f0ff 0, #f5f7fb 45%, #eef1f6 100%);
}

.login-box {
  width: 100%;
  max-width: 390px;
}

.login-logo a {
  color: var(--sr-brand-dark);
  font-size: 1.6rem;
  text-decoration: none;
}

.login-card-body {
  padding: 1.6rem;
}

.login-page .card {
  border-top: 3px solid var(--sr-brand);
}

/* --- Conmutador de tema claro/oscuro (pantallas de acceso) ----------------- */
.theme-toggle {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1030;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.theme-toggle:hover {
  background-color: #fff;
}

.theme-toggle i {
  font-size: 1.05rem;
  line-height: 1;
}

[data-bs-theme="dark"] .login-page {
  background: radial-gradient(circle at 20% 20%, #17233d 0, #10141b 45%, #0b0e14 100%);
}

[data-bs-theme="dark"] .login-logo a {
  color: #8ab4ff;
}

[data-bs-theme="dark"] .login-page .card {
  border-color: rgba(255, 255, 255, 0.12);
  border-top-color: var(--sr-brand);
}

[data-bs-theme="dark"] .theme-toggle {
  color: #e6edf3;
  background-color: rgba(23, 28, 36, 0.85);
  border-color: rgba(255, 255, 255, 0.22);
}

[data-bs-theme="dark"] .theme-toggle:hover {
  background-color: #1e242d;
}

[data-bs-theme="dark"] .card-header {
  background-color: #171c24;
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* --- Detalles -------------------------------------------------------------- */
.admin-panel[hidden] {
  display: none !important;
}

.admin-panel > .card:last-child {
  margin-bottom: 0;
}

.small-box {
  border-radius: var(--sr-radius);
}

.small-box .inner h3 {
  font-size: 1.65rem;
  font-weight: 600;
}

.small-box > .small-box-icon {
  opacity: 0.28;
}

code {
  font-size: 0.86em;
}

.text-body-secondary code {
  color: inherit;
}

@media (max-width: 575.98px) {
  .app-content-header h1 {
    font-size: 1.25rem;
  }

  .qr-box svg {
    width: 160px;
    height: 160px;
  }
}