/* Paginación en modo oscuro */
body.dark-mode .pagination,
body.dark-mode .page-link,
body.dark-mode .page-item.active .page-link {
  background-color: #23272e !important;
  color: #e0e6ed !important;
  border-color: var(--color-border) !important;
}
body.dark-mode .page-link:hover,
body.dark-mode .page-link:focus {
  background-color: #4da3ff !important;
  color: #fff !important;
}

/* Calendario (input date) en modo oscuro */
body.dark-mode input[type="date"],
body.dark-mode input[type="date"]::-webkit-input-placeholder {
  background-color: #23272e !important;
  color: #e0e6ed !important;
  border-color: var(--color-border) !important;
}
body.dark-mode input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
}
/* Enlaces en tablas en modo oscuro: texto blanco */
body.dark-mode table a,
body.dark-mode .table a {
  color: #e0e6ed !important;
}
body.dark-mode table a:hover,
body.dark-mode .table a:hover {
  color: #4da3ff !important;
  text-decoration: underline;
}
/* Input file y campos de formulario en modo oscuro */
body.dark-mode input[type="file"],
body.dark-mode .form-control[type="file"] {
  background-color: #23272e !important;
  color: #e0e6ed !important;
  border-color: var(--color-border) !important;
}
body.dark-mode input[type="file"]::file-selector-button {
  background: #2c313a !important;
  color: #e0e6ed !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 6px;
  padding: 0.3em 1.2em;
  transition: background 0.2s, color 0.2s;
}
body.dark-mode input[type="file"]::file-selector-button:hover {
  background: #4da3ff !important;
  color: #fff !important;
}
/* Texto blanco en los dropdown-menu en modo oscuro */
body.dark-mode .dropdown-menu,
body.dark-mode .dropdown-item {
  color: #e0e6ed !important;
}
body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus {
  background: rgba(77,163,255,0.18) !important; /* azul translúcido */
  color: #fff !important;
}
/* Forzar fondo oscuro en tablas y celdas */
body.dark-mode table,
body.dark-mode .table,
body.dark-mode .table thead,
body.dark-mode .table tbody,
body.dark-mode .table tr,
body.dark-mode .table td,
body.dark-mode .table th {
  background-color: var(--color-panel) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}
/* Unificar apariencia de todos los botones en modo oscuro */
body.dark-mode .btn,
body.dark-mode .btn-primary,
body.dark-mode .btn-success,
body.dark-mode .btn-danger,
body.dark-mode .btn-secondary,
body.dark-mode .btn-warning,
body.dark-mode .btn-info,
body.dark-mode .btn-light,
body.dark-mode .btn-dark,
body.dark-mode .btn-outline-primary,
body.dark-mode .btn-outline-danger,
body.dark-mode .btn-outline-success,
body.dark-mode .btn-outline-secondary,
body.dark-mode .btn-outline-warning,
body.dark-mode .btn-outline-info,
body.dark-mode .btn-outline-light,
body.dark-mode .btn-outline-dark {
  border-width: 2px !important;
  border-radius: 6px !important;
  font-weight: 500 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10) !important;
  transition: background 0.2s, color 0.2s, border 0.2s;
  padding: 0.45em 1.2em !important;
  font-size: 1em !important;
  outline: none !important;
}

body.dark-mode .btn-primary {
  background: #4da3ff !important;
  border-color: #4da3ff !important;
  color: #fff !important;
}
body.dark-mode .btn-success {
  background: #27ae60 !important;
  border-color: #27ae60 !important;
  color: #fff !important;
}
body.dark-mode .btn-danger {
  background: #e74c3c !important;
  border-color: #e74c3c !important;
  color: #fff !important;
}
body.dark-mode .btn-secondary {
  background: #444a54 !important;
  border-color: #444a54 !important;
  color: #e0e6ed !important;
}
body.dark-mode .btn-outline-primary,
body.dark-mode .btn-outline-primary:hover,
body.dark-mode .btn-outline-primary:focus {
  background: #4da3ff !important;
  color: #fff !important;
  border-color: #4da3ff !important;
}
body.dark-mode .btn-outline-danger,
body.dark-mode .btn-outline-danger:hover,
body.dark-mode .btn-outline-danger:focus {
  background: #e74c3c !important;
  color: #fff !important;
  border-color: #e74c3c !important;
}
body.dark-mode .btn-outline-success {
  color: #27ae60 !important;
  border-color: #27ae60 !important;
  background: transparent !important;
}
body.dark-mode .btn-outline-success:hover,
body.dark-mode .btn-outline-success:focus {
  background: #27ae60 !important;
  color: #fff !important;
  border-color: #27ae60 !important;
}
body.dark-mode .btn-outline-secondary,
body.dark-mode .btn-outline-secondary:hover,
body.dark-mode .btn-outline-secondary:focus {
  background: #444a54 !important;
  color: #fff !important;
  border-color: #444a54 !important;
}
/* Botones outline personalizados para modo oscuro */
body.dark-mode .btn-outline-primary {
  color: #4da3ff !important;
  border-color: #4da3ff !important;
  background: transparent !important;
}
body.dark-mode .btn-outline-primary:hover, body.dark-mode .btn-outline-primary:focus {
  background: #4da3ff !important;
  color: #fff !important;
  border-color: #4da3ff !important;
}
body.dark-mode .btn-outline-danger {
  color: #e74c3c !important;
  border-color: #e74c3c !important;
  background: transparent !important;
}
body.dark-mode .btn-outline-danger:hover, body.dark-mode .btn-outline-danger:focus {
  background: #e74c3c !important;
  color: #fff !important;
  border-color: #e74c3c !important;
}
/* Forzar fondo oscuro y texto claro en todo el body y elementos principales */
body.dark-mode,
body.dark-mode #content,
body.dark-mode main,
body.dark-mode .container,
body.dark-mode .container-fluid,
body.dark-mode .row,
body.dark-mode .col,
body.dark-mode .col-12,
body.dark-mode .col-md-6,
body.dark-mode .col-md-12 {
  background-color: var(--color-bg) !important;
  color: var(--color-text) !important;
}

body.dark-mode * {
  box-shadow: none !important;
}
/* Modo oscuro para paneles, tarjetas, tablas y formularios */
body.dark-mode .card,
body.dark-mode .panel,
body.dark-mode .modal-content,
body.dark-mode .dropdown-menu,
body.dark-mode .table,
body.dark-mode .form-control,
body.dark-mode .list-group-item,
body.dark-mode .input-group-text,
body.dark-mode .alert,
body.dark-mode .pagination,
body.dark-mode .nav,
body.dark-mode .navbar,
body.dark-mode .offcanvas,
body.dark-mode .popover,
body.dark-mode .toast {
  background-color: var(--color-panel) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

body.dark-mode .table thead,
body.dark-mode .table th {
  background-color: #23272e !important;
  color: var(--color-text) !important;
}

body.dark-mode .form-control,
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
  background-color: #23272e !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

body.dark-mode .btn-primary {
  background-color: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: #fff !important;
}
body.dark-mode .btn-secondary,
body.dark-mode .btn-light {
  background-color: #444a54 !important;
  color: #e0e6ed !important;
  border-color: var(--color-border) !important;
}
body.dark-mode .btn-danger {
  background-color: #e74c3c !important;
  color: #fff !important;
}

body.dark-mode .text-dark {
  color: #e0e6ed !important;
}
body.dark-mode .bg-light {
  background-color: #23272e !important;
}
/*
Modo oscuro inspirado en Winbox Mikrotik beta 4.0.98.44
Colores principales:
- Fondo: #23272e
- Paneles: #2c313a
- Texto: #e0e6ed
- Acento: #4da3ff
*/
:root {
  --color-bg: #f5f6fa;
  --color-panel: #fff;
  --color-text: #23272e;
  --color-accent: #4da3ff;
  --color-border: #e0e6ed;
}

body.dark-mode {
  --color-bg: #23272e;
  --color-panel: #2c313a;
  --color-text: #e0e6ed;
  --color-accent: #4da3ff;
  --color-border: #3a3f47;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  transition: background 0.3s, color 0.3s;
}

body.dark-mode .navbar,
body.dark-mode .menu,
body.dark-mode .dropdown-menu {
  background: var(--color-panel) !important;
  color: var(--color-text) !important;
  border-bottom: 1px solid var(--color-border);
}

.menu-user {
  position: relative;
  display: inline-block;
}
.menu-user .dropdown-menu {
  display: none;
  position: absolute;
  right: 0;
  background: var(--color-panel);
  min-width: 180px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  border-radius: 8px;
  z-index: 1000;
  margin-top: 8px;
  padding: 0.5em 0;
}
.menu-user.open .dropdown-menu {
  display: block;
}
.menu-user .dropdown-item {
  padding: 0.7em 1.2em;
  color: var(--color-text);
  cursor: pointer;
  transition: background 0.2s;
}
.menu-user .dropdown-item:hover {
  background: var(--color-accent);
  color: #fff;
}

/* Switch estilo Winbox */
.switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 24px;
  vertical-align: middle;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #888c94;
  border-radius: 24px;
  transition: background 0.3s;
}
.switch input:checked + .slider {
  background: var(--color-accent);
}
.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: var(--color-switch-knob, #fff);
  body.dark-mode {
    --color-switch-knob: #e0e6ed;
  }
  border-radius: 50%;
  transition: transform 0.3s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.switch input:checked + .slider:before {
  transform: translateX(24px);
}

/* Botón cerrar sesión */
.btn-logout {
  background: none;
  border: none;
  color: var(--color-text);
  width: 100%;
  text-align: left;
  padding: 0.7em 1.2em;
  cursor: pointer;
  font-size: 1em;
  transition: background 0.2s, color 0.2s;
}
.btn-logout:hover {
  background: #e74c3c;
  color: #fff;
}

/* Otros detalles visuales */
::-webkit-scrollbar {
  width: 8px;
  background: var(--color-panel);
}
::-webkit-scrollbar-thumb {
  background: #444a54;
  border-radius: 4px;
}