:root {
  --devtopia-primary: #0D264F;
  --devtopia-secondary: #F9A41A;
  --devtopia-tertiary: #2B4B7C;
  --devtopia-ink: #142544;
  --devtopia-muted: #607086;
  --devtopia-border: rgba(13, 38, 79, 0.14);
  --devtopia-shadow: 0 18px 42px rgba(9, 25, 53, 0.15);
  --devtopia-radius: 18px;
}

/* Icono Reportes en sub-nav admin */
a.reports { background:url(../images/icons/logs.gif) no-repeat left center; }

html,
body {
  background:
    radial-gradient(circle at top left, rgba(249, 164, 26, 0.10), transparent 18%),
    radial-gradient(circle at top right, rgba(43, 75, 124, 0.11), transparent 22%),
    linear-gradient(180deg, #eef3f9 0%, #f7f9fc 45%, #edf2f8 100%);
  color: var(--devtopia-ink);
}

body,
input,
select,
textarea,
button {
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

a,
.link,
table.list th a,
table.list tbody td a {
  color: var(--devtopia-primary);
}

a:hover,
.link:hover,
table.list tbody td a:hover {
  color: var(--devtopia-secondary);
}

#container {
  width: min(1220px, calc(100vw - 28px));
  max-width: 1220px;
  margin: 20px auto 24px;
}

body:not(#loginBody) #container {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 28px;
  box-shadow: var(--devtopia-shadow);
  overflow: hidden;
}

#header {
  height: auto;
  min-height: 92px;
  padding: 18px 22px 14px;
  border: none;
  background: linear-gradient(120deg, rgba(13, 38, 79, 0.98) 0%, rgba(43, 75, 124, 0.97) 58%, rgba(13, 38, 79, 1) 100%);
  box-shadow: none;
}

#header a,
#header p,
#header p a {
  color: rgba(255, 255, 255, 0.94);
}

#header p {
  margin: 6px 0 0;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
}

#logo {
  max-width: 420px;
  padding: 4px 0 0;
}

#logo img {
  max-height: 72px;
  max-width: 100%;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.16));
}

#nav,
#sub_nav {
  border: none;
  padding-left: 18px;
  padding-right: 18px;
}

#nav {
  height: auto;
  min-height: 48px;
  padding-top: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(242,246,251,0.96) 100%);
  border-bottom: 1px solid var(--devtopia-border);
}

#nav .active,
#nav .inactive {
  border: none;
  border-radius: 999px;
  min-width: auto;
  padding-left: 2px;
  padding-right: 2px;
  box-shadow: none;
}

#nav .inactive a,
#nav .active a {
  color: var(--devtopia-primary);
  display: block;
  padding: 0 14px;
  font-weight: 600;
}

#nav li.active,
#nav li.inactive:hover {
  background: rgba(13, 38, 79, 0.08);
  box-shadow: none;
}

#nav li.active {
  background: var(--devtopia-primary);
}

#nav li.active a {
  color: #fff;
}

#nav li.inactive:hover a,
#nav .inactive li a:hover,
#sub_nav > li > a:hover,
#customQ_nav .jb-overflowmenu-menu-primary li.item:hover > a,
.jb-overflowmenu-menu-secondary li.item:hover > a {
  color: var(--devtopia-secondary);
}

#nav li.inactive > ul,
.jb-overflowmenu-menu-primary div.customQ-dropdown,
.jb-overflowmenu-menu-secondary div.customQ-dropdown,
.jb-overflowmenu-menu-secondary .customQ-dropdown .controlQ div.editQ .manageQ ul {
  border-color: rgba(13, 38, 79, 0.12);
  border-radius: 14px;
  box-shadow: 0 16px 32px rgba(12, 28, 57, 0.18);
}

#sub_nav {
  height: auto;
  min-height: 42px;
  padding-top: 8px;
  padding-bottom: 8px;
  background: rgba(244, 247, 252, 0.95);
  border-bottom: 1px solid var(--devtopia-border);
}

#sub_nav > li > a,
#customQ_nav .jb-overflowmenu-menu-primary li.item > a,
.jb-overflowmenu-menu-secondary li.item > a {
  color: var(--devtopia-tertiary);
}

#content {
  margin: 0;
  padding: 24px 22px 28px;
  background: rgba(255, 255, 255, 0.96);
}

#footer {
  padding: 18px 22px 22px;
  background: rgba(247, 249, 252, 0.96);
  border-top: 1px solid var(--devtopia-border);
  color: var(--devtopia-muted);
}

#notice_bar,
#warning_bar,
#error_bar,
#msg_info,
#msg_notice,
#msg_warning,
#msg_error,
.info-banner,
.success-banner,
.notice-banner,
.warning-banner,
.error-banner,
.banner {
  min-height: 18px;
  height: auto;
  line-height: 1.5;
  border-radius: 14px;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
select,
textarea {
  border: 1px solid rgba(13, 38, 79, 0.18);
  border-radius: 12px;
  box-shadow: inset 0 1px 2px rgba(13, 38, 79, 0.04);
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus {
  border-color: rgba(43, 75, 124, 0.52);
  box-shadow: 0 0 0 4px rgba(43, 75, 124, 0.12);
  outline: none;
}

input[type="submit"],
input[type="reset"],
input[type="button"],
button[type="submit"],
.action-button,
.button,
.primary.button {
  border: none;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--devtopia-primary) 0%, var(--devtopia-tertiary) 100%);
  box-shadow: 0 10px 24px rgba(13, 38, 79, 0.22);
  text-shadow: none;
}

input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
button[type="submit"]:hover,
.action-button:hover,
.button:hover,
.primary.button:hover {
  color: var(--devtopia-primary);
  background: linear-gradient(135deg, var(--devtopia-secondary) 0%, #ffba4b 100%);
  text-decoration: none;
}

table.list {
  border: 1px solid rgba(13, 38, 79, 0.12);
  border-radius: 16px;
  overflow: hidden;
}

.dvt-reports-shell {
  margin-top: 18px;
}

.dvt-reports-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  margin-bottom: 18px;
  background: linear-gradient(135deg, rgba(13, 38, 79, 0.98), rgba(43, 75, 124, 0.92));
  border-radius: 18px;
  color: #fff;
}

.dvt-reports-header h3 {
  margin: 0 0 6px;
  font-size: 24px;
  line-height: 1.15;
  color: #fff;
}

.dvt-reports-header p {
  margin: 0;
  max-width: 720px;
  color: rgba(255, 255, 255, 0.84);
}

.dvt-report-switch {
  display: inline-flex;
  gap: 8px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
}

.dvt-report-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.82);
  font-weight: 700;
}

.dvt-report-tab:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  text-decoration: none;
}

.dvt-report-tab.is-active {
  color: var(--devtopia-primary);
  background: #fff;
}

.dvt-report-view {
  display: grid;
  gap: 18px;
}

.dvt-report-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.dvt-report-toolbar h4 {
  margin: 0 0 4px;
  font-size: 20px;
  color: var(--devtopia-primary);
}

.dvt-report-toolbar p {
  margin: 0;
  color: var(--devtopia-muted);
}

.dvt-period-filter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.dvt-period-filter__label {
  font-weight: 700;
  color: var(--devtopia-primary);
}

.dvt-period-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(13, 38, 79, 0.08);
  color: var(--devtopia-primary);
  font-weight: 700;
}

.dvt-period-chip:hover {
  text-decoration: none;
  background: rgba(13, 38, 79, 0.14);
}

.dvt-period-chip.is-active {
  background: var(--devtopia-primary);
  color: #fff;
}

.dvt-kpi-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.dvt-kpi-card,
.dvt-panel-card {
  background: #fff;
  border: 1px solid rgba(13, 38, 79, 0.10);
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(13, 38, 79, 0.08);
}

.dvt-kpi-card {
  padding: 18px;
}

.dvt-kpi-card__label {
  margin-bottom: 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #7a8699;
}

.dvt-kpi-card__value {
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
}

.dvt-panel-grid {
  display: grid;
  gap: 18px;
}

.dvt-panel-grid--split {
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
}

.dvt-panel-card {
  padding: 18px;
}

.dvt-panel-card--spaced {
  margin-bottom: 0;
}

.dvt-panel-card__title {
  margin: 0 0 14px;
  font-size: 16px;
  color: #33435f;
}

.dvt-chart-wrap {
  position: relative;
  min-height: 280px;
}

.dvt-progress-row {
  margin-bottom: 12px;
}

.dvt-progress-row:last-child {
  margin-bottom: 0;
}

.dvt-progress-row__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  font-size: 13px;
  color: #44546d;
}

.dvt-progress-row__track,
.dvt-mini-bar {
  width: 100%;
  height: 7px;
  background: #e7edf5;
  border-radius: 999px;
  overflow: hidden;
}

.dvt-progress-row__bar,
.dvt-mini-bar__fill {
  height: 100%;
  border-radius: 999px;
  background: #2d6ea5;
}

.dvt-progress-row__bar--violet {
  background: #6c4fa6;
}

.dvt-table-wrap {
  overflow-x: auto;
}

.dvt-report-table {
  min-width: 920px;
}

.dvt-report-table th {
  background: #edf2f8;
  color: #284267;
  font-weight: 700;
}

.dvt-report-table td {
  vertical-align: middle;
}

.dvt-report-table__agent small,
.dvt-report-table td small {
  color: #7b8797;
}

.dvt-empty-note,
.dvt-empty-cell {
  color: #7b8797;
}

.dvt-empty-cell {
  padding: 24px;
  text-align: center;
}

@media (max-width: 900px) {
  .dvt-reports-header,
  .dvt-report-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .dvt-panel-grid--split {
    grid-template-columns: 1fr;
  }

  .dvt-report-switch {
    width: 100%;
    justify-content: space-between;
  }

  .dvt-report-tab {
    justify-content: center;
    flex: 1 1 0;
  }
}
table.list thead th {
  background: rgba(13, 38, 79, 0.08);
}

table.list thead th a,
table.list th a {
  color: var(--devtopia-primary);
}

table.list thead th a.asc,
table.list thead th a.desc {
  background-color: rgba(43, 75, 124, 0.14);
}

table.list tbody tr:nth-child(2n+1) td {
  background-color: rgba(13, 38, 79, 0.03);
}

table.list tbody tr:hover td,
table.list tbody tr.highlight td,
table.list tbody tr:nth-child(2n+1):hover td {
  background: rgba(249, 164, 26, 0.12);
}

ul.tabs li {
  border-radius: 14px 14px 0 0;
}

ul.tabs li.active {
  background: var(--devtopia-primary);
  border-color: var(--devtopia-primary);
}

ul.tabs li.active a {
  color: #fff;
}

ul.tabs li a:hover {
  color: var(--devtopia-secondary);
}

body#loginBody {
  min-height: 100vh;
  overflow-x: hidden;
}

#brickwall,
#background {
  background-image:
    linear-gradient(135deg, rgba(13, 38, 79, 0.88) 0%, rgba(43, 75, 124, 0.80) 55%, rgba(10, 27, 57, 0.88) 100%),
    url(../logo.php?backdrop);
}

#background-compat {
  background: linear-gradient(135deg, rgba(13, 38, 79, 0.65) 0%, rgba(43, 75, 124, 0.55) 100%);
}

#loginBox {
  width: min(440px, calc(100vw - 28px));
  margin-left: calc(-1 * min(220px, (100vw - 28px) / 2));
  padding: 28px 28px 20px;
  border-radius: 24px;
  box-shadow: 0 28px 60px rgba(6, 18, 40, 0.34);
}

#loginBox:after {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 24px;
}

#logo a {
  height: auto;
  min-height: 104px;
}

#logo a img {
  max-height: 92px;
  max-width: 380px;
}

#login-message {
  color: var(--devtopia-primary);
  font-size: 0.95em;
}

form#login {
  width: min(290px, 100%);
}

fieldset input,
input[type=text],
input[type=password] {
  width: 100%;
  padding: 10px 12px;
  font-size: 0.92em;
  background: rgba(255, 255, 255, 0.92);
}

#reset-link {
  color: var(--devtopia-tertiary);
}

#company {
  position: static;
  left: auto;
  width: auto;
  margin: 16px 0 0;
}

#company .content {
  border-radius: 999px;
  background: rgba(13, 38, 79, 0.82);
  box-shadow: 0 10px 26px rgba(11, 29, 58, 0.22);
  text-shadow: none;
}

#poweredBy {
  right: 16px;
  bottom: 14px;
  background: rgba(13, 38, 79, 0.52);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2);
  text-shadow: none;
}

@media (max-width: 960px) {
  #container {
    width: calc(100vw - 12px);
    margin: 8px auto 16px;
    border-radius: 18px;
  }

  #header {
    padding-left: 14px;
    padding-right: 14px;
  }

  #header p {
    max-width: none;
    width: auto;
    margin-top: 12px;
    border-radius: 18px;
  }

  #nav,
  #sub_nav,
  #content,
  #footer {
    padding-left: 14px;
    padding-right: 14px;
  }
}

@media (max-width: 640px) {
  #loginBox {
    position: relative;
    top: auto;
    left: auto;
    margin: 24px auto;
  }

  #poweredBy {
    position: static;
    display: inline-block;
    margin: 0 auto 18px;
  }
}

/* ═══════════════════════════════════════════════════════════
   DARK THEME — Panel Staff / Agente
   Activado cuando <html data-theme="dark">
   ═══════════════════════════════════════════════════════════ */

[data-theme="dark"] {
  --devtopia-primary: #7eb8ff;
  --devtopia-secondary: #F9A41A;
  --devtopia-tertiary: #93b8e4;
  --devtopia-surface: #1a1e2b;
  --devtopia-ink: #d8dce6;
  --devtopia-muted: #8892a4;
  --devtopia-border: rgba(255, 255, 255, 0.10);
  --devtopia-shadow: 0 18px 40px rgba(0, 0, 0, 0.40);
}

/* ── Fondo general ── */
[data-theme="dark"] html,
html[data-theme="dark"] {
  background: #12151e !important;
}

[data-theme="dark"] body {
  color: var(--devtopia-ink) !important;
  background: #12151e !important;
}

/* ── Contenedor principal ── */
[data-theme="dark"] #container {
  background: rgba(26, 30, 43, 0.97) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.50);
}

/* ── Header ── */
[data-theme="dark"] #header {
  background:
    linear-gradient(120deg, rgba(8, 16, 36, 0.99) 0%, rgba(18, 34, 62, 0.98) 52%, rgba(8, 16, 36, 1) 100%);
}

[data-theme="dark"] #header p#info {
  color: rgba(255, 255, 255, 0.80);
}

[data-theme="dark"] #header p#info a {
  color: var(--devtopia-primary);
}

/* ── Navegación principal y sub ── */
[data-theme="dark"] #nav {
  background: linear-gradient(180deg, rgba(26, 30, 43, 0.98) 0%, rgba(22, 26, 38, 0.98) 100%) !important;
  border-color: var(--devtopia-border) !important;
}

[data-theme="dark"] #nav li a {
  color: var(--devtopia-ink) !important;
}

[data-theme="dark"] #nav li a:hover,
[data-theme="dark"] #nav li a.active {
  background: var(--devtopia-primary) !important;
  color: #0e1623 !important;
}

[data-theme="dark"] #sub_nav a {
  color: var(--devtopia-ink) !important;
}

[data-theme="dark"] #sub_nav a:hover {
  color: var(--devtopia-secondary) !important;
}

/* ── Contenido y footer ── */
[data-theme="dark"] #content {
  color: var(--devtopia-ink) !important;
  background: transparent !important;
}

/* ── Catch-all: elementos con fondo blanco hardcoded en scp.css ── */
[data-theme="dark"] .tab_content,
[data-theme="dark"] .form_table td,
[data-theme="dark"] .form_table th,
[data-theme="dark"] #msg_notice,
[data-theme="dark"] #ticketThread .thread-entry,
[data-theme="dark"] .sticky.bar,
[data-theme="dark"] .flush-left,
[data-theme="dark"] .header,
[data-theme="dark"] .pull-flush-right,
[data-theme="dark"] .search-results,
[data-theme="dark"] .dialog .body,
[data-theme="dark"] #ticket-stats,
[data-theme="dark"] #basic_search,
[data-theme="dark"] .tab_content form,
[data-theme="dark"] fieldset {
  background-color: transparent !important;
  color: var(--devtopia-ink) !important;
}

[data-theme="dark"] #sub_nav {
  background: rgba(22, 26, 38, 0.96) !important;
  border-color: var(--devtopia-border) !important;
}

[data-theme="dark"] #footer {
  border-top-color: var(--devtopia-border);
  color: var(--devtopia-muted);
}

[data-theme="dark"] #footer a {
  color: var(--devtopia-tertiary);
}

/* ── Tipografía ── */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3 {
  color: var(--devtopia-primary);
}

[data-theme="dark"] a {
  color: var(--devtopia-primary);
}

[data-theme="dark"] a:hover {
  color: var(--devtopia-secondary);
}

/* ── Formularios ── */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: var(--devtopia-ink) !important;
}

[data-theme="dark"] input[type="text"]:focus,
[data-theme="dark"] input[type="password"]:focus,
[data-theme="dark"] input[type="email"]:focus,
[data-theme="dark"] input[type="number"]:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
  border-color: rgba(126, 184, 255, 0.48) !important;
  box-shadow: 0 0 0 4px rgba(126, 184, 255, 0.12) !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--devtopia-muted);
}

/* ── Botones ── */
[data-theme="dark"] .button:hover,
[data-theme="dark"] .green.button:hover,
[data-theme="dark"] .blue.button:hover,
[data-theme="dark"] input[type="submit"]:hover,
[data-theme="dark"] input[type="button"]:hover {
  color: #0e1623;
}

/* ── Mensajes de alerta ── */
[data-theme="dark"] #msg_notice {
  background-color: rgba(26, 80, 44, 0.45);
  border-color: rgba(46, 160, 80, 0.35);
  color: #a8e6bf;
}

[data-theme="dark"] #msg_warning,
[data-theme="dark"] .warning_bar,
[data-theme="dark"] .warning-banner {
  background-color: rgba(100, 70, 10, 0.45);
  border-color: rgba(249, 164, 26, 0.40);
  color: #ffd580;
}

[data-theme="dark"] #msg_error,
[data-theme="dark"] .error_bar {
  background-color: rgba(100, 20, 20, 0.45);
  border-color: rgba(200, 60, 60, 0.40);
  color: #ffa0a0;
}

[data-theme="dark"] #msg_info,
[data-theme="dark"] .notice_bar {
  background-color: rgba(20, 60, 120, 0.40);
  border-color: rgba(58, 135, 173, 0.35);
  color: #8ecae6;
}

/* ── table.list (tickets, users, tasks, etc.) ── */
[data-theme="dark"] table.list {
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] table.list thead th {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--devtopia-primary) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] table.list tbody td {
  color: var(--devtopia-ink) !important;
  background: rgba(26, 30, 43, 0.97) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] table.list tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.02) !important;
}

[data-theme="dark"] table.list tbody tr:hover td {
  background: rgba(249, 164, 26, 0.10) !important;
}

[data-theme="dark"] table.list tfoot td {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

/* ── Tabs ── */
[data-theme="dark"] ul.tabs li a {
  color: var(--devtopia-ink);
  border-color: rgba(255, 255, 255, 0.10);
}

[data-theme="dark"] ul.tabs li a.active,
[data-theme="dark"] ul.tabs li a:hover {
  background: rgba(126, 184, 255, 0.12);
  border-color: var(--devtopia-primary);
  color: var(--devtopia-primary);
}

/* ── Reportes DVT ── */
[data-theme="dark"] .dvt-kpi-card {
  background: linear-gradient(180deg, rgba(30, 35, 50, 0.95) 0%, rgba(24, 28, 40, 0.98) 100%);
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .dvt-kpi-card .dvt-kpi-title {
  color: var(--devtopia-muted);
}

[data-theme="dark"] .dvt-kpi-card .dvt-kpi-value {
  color: var(--devtopia-ink);
}

[data-theme="dark"] .dvt-panel-card {
  background: rgba(26, 30, 43, 0.92);
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .dvt-panel-card h3 {
  color: var(--devtopia-primary);
}

[data-theme="dark"] .dvt-report-table th {
  background: rgba(255, 255, 255, 0.06);
  color: var(--devtopia-primary);
}

[data-theme="dark"] .dvt-report-table td {
  color: var(--devtopia-ink);
  border-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .dvt-report-table tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.02);
}

[data-theme="dark"] .dvt-report-table tr:hover td {
  background: rgba(249, 164, 26, 0.10);
}

[data-theme="dark"] .dvt-progress {
  background: rgba(255, 255, 255, 0.08);
}

/* ── Login staff (#loginBox) ── */
[data-theme="dark"] #loginBody {
  background: #12151e;
}

[data-theme="dark"] #loginBox {
  background: rgba(22, 26, 38, 0.97);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] #loginBox h1 {
  color: var(--devtopia-primary);
}

[data-theme="dark"] #loginBox label {
  color: var(--devtopia-ink);
}

[data-theme="dark"] #poweredBy {
  color: var(--devtopia-muted);
}

/* ── Thread entries ── */
[data-theme="dark"] .thread-entry {
  background: rgba(30, 35, 50, 0.60);
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .thread-body {
  color: var(--devtopia-ink);
}

/* ── Textos generales / tablas genéricas ── */
[data-theme="dark"] td,
[data-theme="dark"] th {
  color: var(--devtopia-ink);
}

[data-theme="dark"] table {
  border-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .faded {
  color: var(--devtopia-muted);
}

[data-theme="dark"] hr {
  border-color: rgba(255, 255, 255, 0.10);
}

[data-theme="dark"] blockquote {
  border-left-color: rgba(255, 255, 255, 0.14);
  color: var(--devtopia-muted);
}

/* ── Dialogs / pop-ups ── */
[data-theme="dark"] .dialog,
[data-theme="dark"] .ui-dialog {
  background: rgba(26, 30, 43, 0.98) !important;
  border-color: var(--devtopia-border) !important;
  color: var(--devtopia-ink);
}

[data-theme="dark"] .ui-dialog .ui-dialog-titlebar {
  background: rgba(255, 255, 255, 0.06);
  color: var(--devtopia-primary);
}

/* ── Toggle button (sol/luna) — staff ── */
.dvt-theme-toggle {
  display: none; /* Oculto temporalmente */
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.90);
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  vertical-align: middle;
  margin-left: 10px;
  text-decoration: none;
}

.dvt-theme-toggle:hover {
  background: rgba(249, 164, 26, 0.25);
  transform: scale(1.1);
  border-bottom: none;
  color: #F9A41A;
}

[data-theme="dark"] .dvt-theme-toggle {
  border-color: rgba(249, 164, 26, 0.30);
  background: rgba(249, 164, 26, 0.12);
  color: #F9A41A;
}