/* ===== MODO OSCURO - La Feria del Outlet ===== */
/* Acento de marca: rosa/burdeos */
:root {
  --brand-pink: #e84393;
  --brand-pink-dark: #c2185b;
  --dark-bg: #14141f;
  --dark-card: #1e1e2e;
  --dark-border: #2d2d44;
}

body.dark-mode {
  background-color: var(--dark-bg) !important;
  color: #e8e8f0;
}

/* Superficies principales */
body.dark-mode .content-wrapper,
body.dark-mode .main-sidebar,
body.dark-mode .main-header,
body.dark-mode .main-footer {
  background-color: var(--dark-card) !important;
  color: #e8e8f0;
}
body.dark-mode .content-wrapper { background-color: #191926 !important; }

/* Tarjetas y paneles */
body.dark-mode .card,
body.dark-mode .small-box,
body.dark-mode .info-box,
body.dark-mode .direct-chat-msg {
  background-color: var(--dark-card) !important;
  border-color: var(--dark-border) !important;
  color: #e8e8f0;
}
body.dark-mode .card-header,
body.dark-mode .card-footer {
  background-color: #252538 !important;
  border-color: var(--dark-border) !important;
  color: #f0f0f8;
}

/* Tablas */
/* Bootstrap 5.3 pinta cada celda con var(--bs-table-bg) (= --bs-body-bg, blanco);
   hay que redefinir las variables para que las celdas no queden blancas. */
body.dark-mode .table {
  --bs-table-bg: transparent;
  --bs-table-color: #e8e8f0;
  --bs-table-border-color: var(--dark-border);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.04);
  --bs-table-striped-color: #e8e8f0;
  --bs-table-hover-bg: rgba(255, 255, 255, 0.07);
  --bs-table-hover-color: #e8e8f0;
  --bs-table-active-bg: rgba(255, 255, 255, 0.1);
  --bs-table-active-color: #e8e8f0;
}
body.dark-mode .table thead th,
body.dark-mode .table td,
body.dark-mode .table th {
  border-color: var(--dark-border) !important;
  color: #e8e8f0;
}
/* Las filas/cabeceras .table-light conservan fondo claro: necesitan texto oscuro */
body.dark-mode .table-light td,
body.dark-mode .table-light th,
body.dark-mode thead.table-light th {
  color: #212529;
}

/* Formularios */
body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode .custom-select,
body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus,
body.dark-mode .custom-select:focus {
  background-color: #14141f !important;
  border-color: var(--dark-border) !important;
  color: #f0f0f0 !important;
}
body.dark-mode .form-control::placeholder { color: #77778f !important; }
body.dark-mode .form-control:disabled,
body.dark-mode .form-control[readonly] {
  background-color: #1a1a28 !important;
  color: #9999b0 !important;
}
body.dark-mode .input-group-text {
  background-color: #252538 !important;
  border-color: var(--dark-border) !important;
  color: #ccc;
}
body.dark-mode label,
body.dark-mode .form-check-label { color: #d8d8ea; }

/* Textos y helpers */
body.dark-mode .text-dark { color: #e8e8f0 !important; }
body.dark-mode .text-muted { color: #9a9ab5 !important; }
body.dark-mode .text-body { color: #e8e8f0 !important; }
body.dark-mode .text-secondary { color: #b8b8d0 !important; }
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3,
body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 { color: #f0f0f8; }
body.dark-mode p { color: #d0d0e2; }

/* Navbar / header */
/* El topbar usa .navbar-light (texto oscuro de Bootstrap) sobre fondo oscuro:
   hay que aclarar los íconos y enlaces. */
body.dark-mode .main-header .nav-link,
body.dark-mode .main-header .nav-link i,
body.dark-mode .main-header .custom-control-label {
  color: #d8d8ea !important;
}
body.dark-mode .main-header .nav-link:hover,
body.dark-mode .main-header .nav-link:hover i {
  color: #ffffff !important;
}
body.dark-mode .main-header .breadcrumb-item a,
body.dark-mode .main-header .breadcrumb-item a i {
  color: #9db4d8 !important;
}
body.dark-mode .main-header .breadcrumb-item.active {
  color: #b0b0c8 !important;
}
body.dark-mode .main-header {
  border-bottom-color: var(--dark-border) !important;
}

/* Sidebar */
body.dark-mode .sidebar-dark-primary { background: #17172a !important; }
body.dark-mode .nav-sidebar > .nav-item > .nav-link.active {
  background: linear-gradient(90deg, var(--brand-pink-dark), var(--brand-pink)) !important;
}
body.dark-mode .nav-sidebar .nav-link { color: #c8c8de !important; }
body.dark-mode .nav-sidebar .nav-link:hover { background-color: #252540 !important; }

/* Acento de marca en botones primarios */
body.dark-mode .btn-primary {
  background: linear-gradient(135deg, var(--brand-pink-dark), var(--brand-pink)) !important;
  border-color: var(--brand-pink-dark) !important;
}
body.dark-mode .btn-primary:hover { filter: brightness(1.1); }

/* Modales, dropdowns, popovers */
body.dark-mode .modal-content,
body.dark-mode .dropdown-menu {
  background-color: var(--dark-card) !important;
  border-color: var(--dark-border) !important;
  color: #e8e8f0;
}
body.dark-mode .modal-header,
body.dark-mode .modal-footer {
  border-color: var(--dark-border) !important;
}
body.dark-mode .dropdown-item { color: #e0e0f0; }
body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus {
  background-color: #2a2a45 !important;
  color: #fff;
}
body.dark-mode .dropdown-divider { border-color: var(--dark-border); }

/* Alertas */
body.dark-mode .alert-success { background-color: #12351f; border-color: #1f5132; color: #8fe3b0; }
body.dark-mode .alert-danger  { background-color: #3d1520; border-color: #6e2438; color: #f5a3b7; }
body.dark-mode .alert-warning { background-color: #3a2c10; border-color: #6b5318; color: #f0d189; }
body.dark-mode .alert-info    { background-color: #10293d; border-color: #1d4a6b; color: #8fd0f5; }

/* Listas, badges, hr */
body.dark-mode .list-group-item {
  background-color: var(--dark-card) !important;
  border-color: var(--dark-border) !important;
  color: #e8e8f0;
}
body.dark-mode hr { border-color: var(--dark-border); }
body.dark-mode .breadcrumb-item.active { color: #b0b0c8; }

/* Paginación */
body.dark-mode .page-item .page-link {
  background-color: var(--dark-card) !important;
  border-color: var(--dark-border) !important;
  color: #d8d8ea;
}
body.dark-mode .page-item.active .page-link {
  background: var(--brand-pink) !important;
  border-color: var(--brand-pink) !important;
  color: #fff;
}

/* Scrollbar */
body.dark-mode ::-webkit-scrollbar { width: 10px; height: 10px; }
body.dark-mode ::-webkit-scrollbar-track { background: #14141f; }
body.dark-mode ::-webkit-scrollbar-thumb { background: #3a3a55; border-radius: 5px; }
body.dark-mode ::-webkit-scrollbar-thumb:hover { background: var(--brand-pink); }

/* ===== LOGIN ===== */
body.dark-mode.login-page {
  background: linear-gradient(135deg, #14141f 0%, #1e1030 50%, #2a1030 100%) !important;
}
body.dark-mode .login-page .card {
  background-color: var(--dark-card) !important;
  border-color: var(--dark-border) !important;
}
body.dark-mode .login-page .card-header a { color: var(--brand-pink) !important; }
body.dark-mode .login-page label { color: #d8d8ea; }
body.dark-mode .login-page .btn-primary {
  background: linear-gradient(135deg, var(--brand-pink-dark), var(--brand-pink)) !important;
  border: none;
}