:root[data-theme="dark"], html[data-theme="dark"] {
  --mc-bg: #0f172a;
  --mc-card: #111827;
  --mc-border: #263449;
  --mc-text: #e5e7eb;
  --mc-muted: #94a3b8;
  --mc-primary: #95b8f6;
  --mc-primary-soft: rgba(173, 213, 250, .18);
  --mc-warning: #f9d99a;
  --mc-coral-soft: #f9a59a;
  --mc-danger: #ff5a4f;
  --mc-success: #22c55e;
}

html[data-theme="dark"] body,
html[data-theme="dark"] .app-body,
html[data-theme="dark"] .platform-body,
html[data-theme="dark"] .access-body {
  background: radial-gradient(circle at top left, rgba(149,184,246,.18), transparent 32%), #0f172a !important;
  color: var(--mc-text) !important;
}

html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .platform-topbar,
html[data-theme="dark"] .card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .access-panel,
html[data-theme="dark"] .dropdown-panel,
html[data-theme="dark"] .modal-card,
html[data-theme="dark"] .table-wrap,
html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .summary-card,
html[data-theme="dark"] .box {
  background: rgba(17, 24, 39, .96) !important;
  color: var(--mc-text) !important;
  border-color: var(--mc-border) !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.24) !important;
}

html[data-theme="dark"] .main-content,
html[data-theme="dark"] .platform-main,
html[data-theme="dark"] .section {
  color: var(--mc-text) !important;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] strong,
html[data-theme="dark"] b,
html[data-theme="dark"] label {
  color: var(--mc-text) !important;
}

html[data-theme="dark"] p,
html[data-theme="dark"] small,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .small-muted,
html[data-theme="dark"] .panel-sub,
html[data-theme="dark"] .mini {
  color: var(--mc-muted) !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .input {
  background: #0b1220 !important;
  color: var(--mc-text) !important;
  border-color: var(--mc-border) !important;
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus {
  border-color: var(--mc-primary) !important;
  box-shadow: 0 0 0 3px rgba(149,184,246,.18) !important;
}

html[data-theme="dark"] table,
html[data-theme="dark"] .table {
  color: var(--mc-text) !important;
}

html[data-theme="dark"] thead th,
html[data-theme="dark"] .table thead th {
  background: rgba(173,213,250,.16) !important;
  color: var(--mc-text) !important;
  border-color: var(--mc-border) !important;
}

html[data-theme="dark"] td,
html[data-theme="dark"] th {
  border-color: var(--mc-border) !important;
}

html[data-theme="dark"] tr:hover td {
  background: rgba(149,184,246,.07) !important;
}

html[data-theme="dark"] a {
  color: #add5fa;
}

html[data-theme="dark"] .sidebar-nav a,
html[data-theme="dark"] .platform-topbar a {
  color: var(--mc-text) !important;
}

html[data-theme="dark"] .sidebar-nav a:hover,
html[data-theme="dark"] .sidebar-nav a.is-active,
html[data-theme="dark"] .platform-topbar a:hover {
  background: rgba(149,184,246,.16) !important;
  color: #fff !important;
}

html[data-theme="dark"] .sidebar-nav a em {
  background: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

html[data-theme="dark"] .btn,
html[data-theme="dark"] button {
  border-color: var(--mc-border);
}

html[data-theme="dark"] .btn-outline {
  background: transparent !important;
  color: var(--mc-text) !important;
  border-color: var(--mc-border) !important;
}

.theme-toggle-form { margin: 0; display: inline-flex; align-items: center; }
.theme-toggle-btn {
  border: 1px solid rgba(149,184,246,.35);
  border-radius: 999px;
  background: rgba(149,184,246,.16);
  color: inherit;
  font-weight: 800;
  padding: 8px 10px;
  cursor: pointer;
}
.theme-toggle-btn:hover { background: rgba(149,184,246,.28); }

.support-layout { display:grid; grid-template-columns: minmax(280px, .9fr) minmax(320px, 1.3fr); gap: 18px; align-items:start; }
.support-list { display:grid; gap:10px; }
.support-row { display:grid; grid-template-columns:1fr auto; gap:8px; padding:14px; border:1px solid var(--mc-border, #e5edf7); border-radius:16px; background:var(--mc-card,#fff); text-decoration:none; color:inherit; }
.support-row small { grid-column:1 / -1; color:var(--mc-muted,#64748b); }
.support-chat { display:flex; flex-direction:column; gap:12px; margin:16px 0; }
.chat-bubble { max-width:78%; padding:12px 14px; border-radius:16px; border:1px solid var(--mc-border,#e5edf7); background:#fff; }
.chat-bubble.is-platform { align-self:flex-end; background:rgba(149,184,246,.22); }
.chat-bubble.is-customer { align-self:flex-start; background:rgba(249,217,154,.22); }
.chat-bubble.is-internal { border-style:dashed; background:rgba(249,165,154,.18); }
.chat-author { font-size:12px; font-weight:800; color:var(--mc-muted,#64748b); margin-bottom:5px; }
.support-reply-form { display:grid; gap:10px; margin-top:14px; }
.chat-meta { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.openpay-soon .feature-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin:16px 0; }
.openpay-soon .feature-grid > div { border:1px solid var(--mc-border,#e5edf7); border-radius:16px; padding:14px; background:rgba(173,213,250,.16); display:grid; gap:4px; }
.openpay-soon .feature-grid span { color:var(--mc-muted,#64748b); font-size:13px; }

@media (max-width: 860px) {
  .support-layout { grid-template-columns: 1fr; }
  .chat-bubble { max-width: 100%; }
}

/* =========================================================
   TANDA VISUAL/FUNCIONAL 20260618
   Modo oscuro completo: tablas, cards, inputs, dashboard,
   órdenes, pagos, soporte y platform.
   ========================================================= */
html[data-theme="dark"] {
  --mc-dark-bg: #0f172a;
  --mc-dark-bg-soft: #111827;
  --mc-dark-card: #162033;
  --mc-dark-card-2: #1e293b;
  --mc-dark-border: #2d3b52;
  --mc-dark-text: #e5e7eb;
  --mc-dark-muted: #94a3b8;
  --mc-dark-faint: #64748b;
  --mc-dark-input: #0b1220;
  --mc-bg: #0f172a;
  --mc-card: #162033;
  --mc-border: #2d3b52;
  --mc-text: #e5e7eb;
  --mc-muted: #94a3b8;
}

html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] .app-body,
html[data-theme="dark"] .platform-body,
html[data-theme="dark"] .access-body,
html[data-theme="dark"] .main-content,
html[data-theme="dark"] .app-shell,
html[data-theme="dark"] .platform-main,
html[data-theme="dark"] .page-wrap,
html[data-theme="dark"] .content,
html[data-theme="dark"] .section {
  background: radial-gradient(circle at 10% -10%, rgba(149, 184, 246, .16), transparent 28%), var(--mc-dark-bg) !important;
  color: var(--mc-dark-text) !important;
}

html[data-theme="dark"] .topbar,
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .platform-topbar,
html[data-theme="dark"] .bottom-nav {
  background: rgba(15, 23, 42, .96) !important;
  border-color: var(--mc-dark-border) !important;
  color: var(--mc-dark-text) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.24) !important;
}

html[data-theme="dark"] .sidebar-brand,
html[data-theme="dark"] .sidebar-logo-link,
html[data-theme="dark"] .platform-brand {
  color: var(--mc-dark-text) !important;
}

html[data-theme="dark"] .sidebar-nav a,
html[data-theme="dark"] .bottom-nav a,
html[data-theme="dark"] .platform-topbar a {
  background: transparent !important;
  color: var(--mc-dark-muted) !important;
  border-color: transparent !important;
}
html[data-theme="dark"] .sidebar-nav a em,
html[data-theme="dark"] .sidebar-nav a:hover em,
html[data-theme="dark"] .sidebar-nav a.active em,
html[data-theme="dark"] .sidebar-nav a.is-active em {
  background: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
}
html[data-theme="dark"] .sidebar-nav a:hover,
html[data-theme="dark"] .sidebar-nav a.active,
html[data-theme="dark"] .sidebar-nav a.is-active,
html[data-theme="dark"] .bottom-nav a:hover,
html[data-theme="dark"] .bottom-nav a.active,
html[data-theme="dark"] .bottom-nav a.is-active,
html[data-theme="dark"] .platform-topbar a:hover {
  background: rgba(149,184,246,.16) !important;
  color: var(--mc-dark-text) !important;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .side-card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .box,
html[data-theme="dark"] .dashboard-card,
html[data-theme="dark"] .summary-card,
html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .mini-metric,
html[data-theme="dark"] .table-card,
html[data-theme="dark"] .access-panel,
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .dropdown-panel,
html[data-theme="dark"] .modal-card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .support-row,
html[data-theme="dark"] .billing-card,
html[data-theme="dark"] .billing-internal-card,
html[data-theme="dark"] .billing-alert-card,
html[data-theme="dark"] .openpay-soon .feature-grid > div,
html[data-theme="dark"] .platform-main .card,
html[data-theme="dark"] .platform-main .panel {
  background: var(--mc-dark-card) !important;
  color: var(--mc-dark-text) !important;
  border-color: var(--mc-dark-border) !important;
  box-shadow: 0 20px 48px rgba(0,0,0,.22) !important;
}

html[data-theme="dark"] .card-head,
html[data-theme="dark"] .page-head,
html[data-theme="dark"] .head-actions,
html[data-theme="dark"] .orders-filter-bar,
html[data-theme="dark"] .tabs-scroll,
html[data-theme="dark"] .filters,
html[data-theme="dark"] .filter-bar,
html[data-theme="dark"] .form-section,
html[data-theme="dark"] .section-title,
html[data-theme="dark"] .platform-section-head {
  border-color: var(--mc-dark-border) !important;
  color: var(--mc-dark-text) !important;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] strong,
html[data-theme="dark"] b,
html[data-theme="dark"] label,
html[data-theme="dark"] .user-menu,
html[data-theme="dark"] .page-head h1,
html[data-theme="dark"] .card h2,
html[data-theme="dark"] .metric-card strong,
html[data-theme="dark"] .mini-metric strong {
  color: var(--mc-dark-text) !important;
}
html[data-theme="dark"] p,
html[data-theme="dark"] small,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .small-muted,
html[data-theme="dark"] .panel-sub,
html[data-theme="dark"] .date-title,
html[data-theme="dark"] .orders-filter-meta,
html[data-theme="dark"] .mini,
html[data-theme="dark"] .hint,
html[data-theme="dark"] .help-text {
  color: var(--mc-dark-muted) !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .input,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .status-select,
html[data-theme="dark"] .branch-select select,
html[data-theme="dark"] .global-search input,
html[data-theme="dark"] .orders-filter-form input,
html[data-theme="dark"] .orders-filter-form select {
  background: var(--mc-dark-input) !important;
  color: var(--mc-dark-text) !important;
  border-color: var(--mc-dark-border) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: var(--mc-dark-faint) !important;
}
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] .status-select:focus {
  border-color: #95b8f6 !important;
  box-shadow: 0 0 0 3px rgba(149,184,246,.18) !important;
  outline: none !important;
}
html[data-theme="dark"] option {
  background: #0b1220 !important;
  color: var(--mc-dark-text) !important;
}

html[data-theme="dark"] .responsive-table,
html[data-theme="dark"] .table-wrap,
html[data-theme="dark"] .table-responsive,
html[data-theme="dark"] .data-table,
html[data-theme="dark"] table,
html[data-theme="dark"] .table {
  background: var(--mc-dark-bg-soft) !important;
  color: var(--mc-dark-text) !important;
  border-color: var(--mc-dark-border) !important;
}
html[data-theme="dark"] table thead,
html[data-theme="dark"] table thead tr,
html[data-theme="dark"] .table thead,
html[data-theme="dark"] .table thead tr {
  background: var(--mc-dark-card-2) !important;
}
html[data-theme="dark"] table thead th,
html[data-theme="dark"] .table thead th,
html[data-theme="dark"] .responsive-table thead th {
  background: var(--mc-dark-card-2) !important;
  color: var(--mc-dark-text) !important;
  border-color: var(--mc-dark-border) !important;
}
html[data-theme="dark"] table tbody,
html[data-theme="dark"] table tbody tr,
html[data-theme="dark"] table tbody td,
html[data-theme="dark"] .table tbody tr,
html[data-theme="dark"] .table tbody td,
html[data-theme="dark"] .responsive-table tbody tr,
html[data-theme="dark"] .responsive-table tbody td {
  background: var(--mc-dark-bg-soft) !important;
  color: #dbeafe !important;
  border-color: var(--mc-dark-border) !important;
}
html[data-theme="dark"] table tbody tr:hover,
html[data-theme="dark"] table tbody tr:hover td,
html[data-theme="dark"] .table tbody tr:hover td,
html[data-theme="dark"] .responsive-table tbody tr:hover td {
  background: #1f2a3d !important;
}
html[data-theme="dark"] table a,
html[data-theme="dark"] .responsive-table a {
  color: #add5fa !important;
}

html[data-theme="dark"] .tabs-scroll a,
html[data-theme="dark"] .tab,
html[data-theme="dark"] .tabs a {
  background: rgba(30,41,59,.9) !important;
  color: var(--mc-dark-muted) !important;
  border-color: var(--mc-dark-border) !important;
}
html[data-theme="dark"] .tabs-scroll a.active,
html[data-theme="dark"] .tabs-scroll a:hover,
html[data-theme="dark"] .tab.active,
html[data-theme="dark"] .tabs a.active {
  background: rgba(149,184,246,.20) !important;
  color: var(--mc-dark-text) !important;
  border-color: rgba(149,184,246,.35) !important;
}

html[data-theme="dark"] .btn-light,
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .btn-outline,
html[data-theme="dark"] .btn-ghost,
html[data-theme="dark"] .icon-btn,
html[data-theme="dark"] .theme-toggle-btn {
  background: #1e293b !important;
  color: var(--mc-dark-text) !important;
  border-color: var(--mc-dark-border) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .btn-light:hover,
html[data-theme="dark"] .btn-secondary:hover,
html[data-theme="dark"] .btn-outline:hover,
html[data-theme="dark"] .btn-ghost:hover,
html[data-theme="dark"] .icon-btn:hover,
html[data-theme="dark"] .theme-toggle-btn:hover {
  background: rgba(149,184,246,.18) !important;
  color: #eaf2ff !important;
  border-color: rgba(149,184,246,.42) !important;
}

html[data-theme="dark"] .badge,
html[data-theme="dark"] .status-pill {
  border-color: rgba(255,255,255,.10) !important;
}
html[data-theme="dark"] .badge.active,
html[data-theme="dark"] .badge.activo,
html[data-theme="dark"] .badge.paid,
html[data-theme="dark"] .badge.pagado,
html[data-theme="dark"] .badge.success,
html[data-theme="dark"] .badge.delivered,
html[data-theme="dark"] .badge.entregado,
html[data-theme="dark"] .badge.completed,
html[data-theme="dark"] .badge.completado,
html[data-theme="dark"] .badge-success {
  background: rgba(34,197,94,.16) !important;
  color: #86efac !important;
}
html[data-theme="dark"] .badge.pending,
html[data-theme="dark"] .badge.pendiente,
html[data-theme="dark"] .badge.warning,
html[data-theme="dark"] .badge-warning,
html[data-theme="dark"] .badge.trial {
  background: rgba(249,217,154,.18) !important;
  color: #fde68a !important;
}
html[data-theme="dark"] .badge.info,
html[data-theme="dark"] .badge.open,
html[data-theme="dark"] .badge.nuevo,
html[data-theme="dark"] .badge.recibido {
  background: rgba(149,184,246,.18) !important;
  color: #bfdbfe !important;
}
html[data-theme="dark"] .badge.expired,
html[data-theme="dark"] .badge.vencido,
html[data-theme="dark"] .badge.suspended,
html[data-theme="dark"] .badge.suspendido,
html[data-theme="dark"] .badge.cancelled,
html[data-theme="dark"] .badge.cancelado,
html[data-theme="dark"] .badge.failed,
html[data-theme="dark"] .badge.error,
html[data-theme="dark"] .badge-danger {
  background: rgba(255,90,79,.18) !important;
  color: #fecaca !important;
}

html[data-theme="dark"] .status-card {
  background: linear-gradient(135deg, #1e293b, #162033) !important;
  color: var(--mc-dark-text) !important;
  border: 1px solid var(--mc-dark-border) !important;
}
html[data-theme="dark"] .status-card span,
html[data-theme="dark"] .status-card strong {
  color: var(--mc-dark-text) !important;
}
html[data-theme="dark"] .metric-grid,
html[data-theme="dark"] .metric-cards,
html[data-theme="dark"] .dashboard-grid {
  color: var(--mc-dark-text) !important;
}

html[data-theme="dark"] .search-results,
html[data-theme="dark"] .exclude-status-menu,
html[data-theme="dark"] details[open] summary,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .ui-menu,
html[data-theme="dark"] .autocomplete-results {
  background: var(--mc-dark-card-2) !important;
  color: var(--mc-dark-text) !important;
  border-color: var(--mc-dark-border) !important;
}
html[data-theme="dark"] .search-results a:hover,
html[data-theme="dark"] .dropdown-panel a:hover,
html[data-theme="dark"] .dropdown-panel button:hover {
  background: rgba(149,184,246,.14) !important;
  color: var(--mc-dark-text) !important;
}

html[data-theme="dark"] .modal-backdrop,
html[data-theme="dark"] .sidebar-backdrop {
  background: rgba(2,6,23,.72) !important;
}

html[data-theme="dark"] .chat-bubble,
html[data-theme="dark"] .chat-bubble.is-customer,
html[data-theme="dark"] .chat-bubble.is-platform {
  background: var(--mc-dark-card-2) !important;
  color: var(--mc-dark-text) !important;
  border-color: var(--mc-dark-border) !important;
}
html[data-theme="dark"] .chat-bubble.is-platform {
  background: rgba(149,184,246,.18) !important;
}
html[data-theme="dark"] .chat-bubble.is-customer {
  background: rgba(249,217,154,.13) !important;
}

html[data-theme="dark"] .billing-internal-hero,
html[data-theme="dark"] .billing-status-chip,
html[data-theme="dark"] .billing-info-list > div {
  background: rgba(30,41,59,.78) !important;
  border-color: var(--mc-dark-border) !important;
  color: var(--mc-dark-text) !important;
}
html[data-theme="dark"] .billing-alert-card {
  background: linear-gradient(135deg, rgba(255,90,79,.16), var(--mc-dark-card)) !important;
}

@media (max-width: 768px) {
  html[data-theme="dark"] .responsive-table,
  html[data-theme="dark"] .responsive-table tbody,
  html[data-theme="dark"] .responsive-table tr,
  html[data-theme="dark"] .responsive-table td {
    background: transparent !important;
  }
  html[data-theme="dark"] .responsive-table tr {
    background: var(--mc-dark-card) !important;
    border: 1px solid var(--mc-dark-border) !important;
  }
  html[data-theme="dark"] .responsive-table td {
    background: var(--mc-dark-card) !important;
    color: var(--mc-dark-text) !important;
  }
  html[data-theme="dark"] .responsive-table td::before {
    color: var(--mc-dark-muted) !important;
  }
}

/* =========================================================
   TANDA NOTAS / ÓRDENES 20260617
   Ajuste puntual: modal de notas, WhatsApp público y modo oscuro
   en crear/editar orden sin cambiar la estructura de la orden.
   ========================================================= */
.order-notes-modal .order-notes-card {
  width: min(980px, calc(100vw - 28px));
  max-height: calc(100vh - 42px);
  overflow: auto;
}
.order-notes-head p {
  margin: 4px 0 0;
  color: var(--mc-muted, #64748b);
  font-size: 13px;
}
.order-notes-layout {
  display: grid;
  grid-template-columns: minmax(320px, 1.35fr) minmax(280px, .85fr);
  gap: 18px;
  align-items: start;
}
.order-notes-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.order-notes-toolbar span {
  display: block;
  color: var(--mc-muted, #64748b);
  font-size: 12px;
  margin-top: 2px;
}
.order-notes-list {
  display: grid;
  gap: 12px;
}
.order-note-card {
  border: 1px solid var(--mc-border, #e5edf7);
  background: var(--mc-card, #fff);
  border-radius: 18px;
  padding: 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  box-shadow: 0 12px 30px rgba(67, 96, 142, .08);
}
.order-note-card.is-public {
  border-color: rgba(34, 197, 94, .35);
}
.order-note-card.is-private {
  border-color: rgba(149, 184, 246, .35);
}
.order-note-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.order-note-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 900;
}
.order-note-badge.public {
  color: #065f46;
  background: rgba(34, 197, 94, .16);
  border: 1px solid rgba(34, 197, 94, .22);
}
.order-note-badge.private {
  color: #23416f;
  background: rgba(149, 184, 246, .20);
  border: 1px solid rgba(149, 184, 246, .28);
}
.order-note-card h3 {
  margin: 0 0 8px;
  font-size: 16px;
}
.order-note-card p {
  margin: 0;
  line-height: 1.52;
}
.order-note-actions {
  min-width: 150px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.order-note-actions .btn,
.order-note-actions button,
.order-note-actions summary {
  width: 100%;
  justify-content: center;
  text-align: center;
}
.order-note-edit-box summary {
  list-style: none;
  cursor: pointer;
}
.order-note-edit-box summary::-webkit-details-marker { display:none; }
.order-note-edit-form {
  margin-top: 10px;
  display: grid;
  gap: 8px;
  min-width: min(320px, 70vw);
}
.order-note-no-phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border-radius: 999px;
  padding: 8px 10px;
  background: rgba(249, 217, 154, .22);
  color: #805900;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}
.order-note-new-panel {
  border: 1px solid var(--mc-border, #e5edf7);
  border-radius: 20px;
  padding: 16px;
  background: linear-gradient(180deg, rgba(173,213,250,.16), rgba(255,255,255,.92));
}
.order-note-new-panel h3 {
  margin: 0 0 12px;
}
.order-note-privacy-check small {
  display: block;
  color: var(--mc-muted, #64748b);
  font-size: 12px;
  margin-top: 2px;
}
.order-notes-empty {
  border: 1px dashed var(--mc-border, #e5edf7);
  border-radius: 18px;
  padding: 18px;
  color: var(--mc-muted, #64748b);
  background: rgba(173, 213, 250, .10);
}
.order-note-images img {
  width: 82px;
  height: 82px;
}

html[data-theme="dark"] .order-block,
html[data-theme="dark"] .order-side .side-card,
html[data-theme="dark"] .device-subblock,
html[data-theme="dark"] .device-subblock.soft,
html[data-theme="dark"] .sale-inventory-block,
html[data-theme="dark"] .sale-help-box,
html[data-theme="dark"] .selected-list .service-row,
html[data-theme="dark"] .selected-list .product-row,
html[data-theme="dark"] .notes-list article,
html[data-theme="dark"] .history-item,
html[data-theme="dark"] .order-notes-card,
html[data-theme="dark"] .order-note-new-panel,
html[data-theme="dark"] .order-note-card,
html[data-theme="dark"] .order-notes-empty,
html[data-theme="dark"] .close-order-card,
html[data-theme="dark"] .warranty-modal-card {
  background: #162033 !important;
  color: #e5e7eb !important;
  border-color: #2d3b52 !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.28) !important;
}
html[data-theme="dark"] .device-subblock.soft,
html[data-theme="dark"] .sale-inventory-block,
html[data-theme="dark"] .sale-help-box,
html[data-theme="dark"] .order-note-new-panel {
  background: linear-gradient(180deg, rgba(149,184,246,.10), #162033) !important;
}
html[data-theme="dark"] .order-block h1,
html[data-theme="dark"] .order-block h2,
html[data-theme="dark"] .order-block h3,
html[data-theme="dark"] .order-side h3,
html[data-theme="dark"] .order-notes-card h2,
html[data-theme="dark"] .order-notes-card h3,
html[data-theme="dark"] .order-block strong,
html[data-theme="dark"] .order-side strong,
html[data-theme="dark"] .order-notes-card strong,
html[data-theme="dark"] .order-block label,
html[data-theme="dark"] .order-side label,
html[data-theme="dark"] .order-notes-card label {
  color: #e5e7eb !important;
}
html[data-theme="dark"] .order-block p,
html[data-theme="dark"] .order-block small,
html[data-theme="dark"] .order-side p,
html[data-theme="dark"] .order-side small,
html[data-theme="dark"] .order-notes-card p,
html[data-theme="dark"] .order-notes-card small,
html[data-theme="dark"] .order-notes-card .muted,
html[data-theme="dark"] .section-title p,
html[data-theme="dark"] .device-inner-title p {
  color: #94a3b8 !important;
}
html[data-theme="dark"] .order-block input,
html[data-theme="dark"] .order-block select,
html[data-theme="dark"] .order-block textarea,
html[data-theme="dark"] .order-side input,
html[data-theme="dark"] .order-side select,
html[data-theme="dark"] .order-side textarea,
html[data-theme="dark"] .order-notes-card input,
html[data-theme="dark"] .order-notes-card select,
html[data-theme="dark"] .order-notes-card textarea {
  background: #0b1220 !important;
  color: #e5e7eb !important;
  border-color: #2d3b52 !important;
}
html[data-theme="dark"] .order-block input::placeholder,
html[data-theme="dark"] .order-block textarea::placeholder,
html[data-theme="dark"] .order-side input::placeholder,
html[data-theme="dark"] .order-side textarea::placeholder,
html[data-theme="dark"] .order-notes-card input::placeholder,
html[data-theme="dark"] .order-notes-card textarea::placeholder {
  color: #64748b !important;
}
html[data-theme="dark"] .order-tab-btn {
  background: transparent !important;
  border-color: transparent !important;
  color: #94a3b8 !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .order-tab-btn:hover {
  background: rgba(149,184,246,.12) !important;
  color: #e5e7eb !important;
}
html[data-theme="dark"] .order-tab-btn.active {
  background: rgba(149,184,246,.18) !important;
  border-color: rgba(149,184,246,.45) !important;
  color: #add5fa !important;
}
html[data-theme="dark"] .access-tabs,
html[data-theme="dark"] .access-options,
html[data-theme="dark"] .device-tools-row,
html[data-theme="dark"] .extra-pattern-grid,
html[data-theme="dark"] .extra-access-panels {
  border-color: #2d3b52 !important;
  background: rgba(11,18,32,.40) !important;
}
html[data-theme="dark"] .order-note-badge.public {
  color: #86efac !important;
  background: rgba(34, 197, 94, .16) !important;
  border-color: rgba(34,197,94,.30) !important;
}
html[data-theme="dark"] .order-note-badge.private {
  color: #add5fa !important;
  background: rgba(149, 184, 246, .18) !important;
  border-color: rgba(149,184,246,.34) !important;
}
html[data-theme="dark"] .order-note-no-phone {
  color: #f9d99a !important;
  background: rgba(249,217,154,.14) !important;
}
html[data-theme="dark"] .modal.order-notes-modal {
  background: rgba(2, 6, 23, .72) !important;
}
html[data-theme="dark"] .modal.order-notes-modal .modal-card {
  background: #1e293b !important;
  border-color: #2d3b52 !important;
}
html[data-theme="dark"] .modal.order-notes-modal [data-close-modal] {
  background: #0b1220 !important;
  color: #e5e7eb !important;
  border: 1px solid #2d3b52 !important;
}
@media(max-width: 900px) {
  .order-notes-layout { grid-template-columns: 1fr; }
  .order-note-card { grid-template-columns: 1fr; }
  .order-note-actions { min-width: 0; }
}
/* ==========================================================
   MC Reparaciones SaaS - Correcci��n visual puntual modo oscuro
   Pegar AL FINAL de: assets/css/dark-mode.css
   No cambia l��gica, rutas ni estructura. Solo colores/contraste.
   ========================================================== */

:root {
  --mc-dark-bg: #0f172a;
  --mc-dark-bg-2: #111827;
  --mc-dark-card: #162033;
  --mc-dark-card-2: #1e293b;
  --mc-dark-input: #0b1220;
  --mc-dark-border: #2d3b52;
  --mc-dark-text: #e5e7eb;
  --mc-dark-muted: #94a3b8;
  --mc-dark-faint: #64748b;
  --mc-primary: #95b8f6;
  --mc-primary-soft: #add5fa;
  --mc-warning: #f9d99a;
  --mc-coral-soft: #f9a59a;
  --mc-danger: #ff5a4f;
  --mc-success: #22c55e;
}

/* Base oscura */
html[data-theme="dark"],
html[data-theme="dark"] body,
body.dark-mode,
body[data-theme="dark"] {
  background: var(--mc-dark-bg) !important;
  color: var(--mc-dark-text) !important;
}

html[data-theme="dark"] .main,
html[data-theme="dark"] .main-content,
html[data-theme="dark"] .content,
html[data-theme="dark"] .page-content,
html[data-theme="dark"] .app-content,
body.dark-mode .main,
body.dark-mode .main-content,
body.dark-mode .content,
body.dark-mode .page-content,
body.dark-mode .app-content {
  background: linear-gradient(135deg, #0f172a 0%, #111827 54%, #162033 100%) !important;
  color: var(--mc-dark-text) !important;
}

/* Cards, paneles, cajas y contenedores que quedaban blancos */
html[data-theme="dark"] .card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .box,
html[data-theme="dark"] .table-card,
html[data-theme="dark"] .summary-card,
html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .dashboard-card,
html[data-theme="dark"] .section-card,
html[data-theme="dark"] .form-card,
html[data-theme="dark"] .order-card,
html[data-theme="dark"] .order-section,
html[data-theme="dark"] .order-panel,
html[data-theme="dark"] .repair-section,
html[data-theme="dark"] .sale-section,
html[data-theme="dark"] .history-section,
html[data-theme="dark"] .notes-section,
html[data-theme="dark"] .customer-card,
html[data-theme="dark"] .sidebar-card,
html[data-theme="dark"] .right-card,
html[data-theme="dark"] .details-card,
html[data-theme="dark"] .billing-card,
html[data-theme="dark"] .support-card,
html[data-theme="dark"] .platform-card,
html[data-theme="dark"] [class*="card"],
html[data-theme="dark"] [class*="panel"],
html[data-theme="dark"] [class*="box"],
body.dark-mode .card,
body.dark-mode .panel,
body.dark-mode .box,
body.dark-mode .table-card,
body.dark-mode .summary-card,
body.dark-mode .metric-card,
body.dark-mode .stat-card,
body.dark-mode .dashboard-card,
body.dark-mode .section-card,
body.dark-mode .form-card,
body.dark-mode .order-card,
body.dark-mode .order-section,
body.dark-mode .order-panel,
body.dark-mode .repair-section,
body.dark-mode .sale-section,
body.dark-mode .history-section,
body.dark-mode .notes-section,
body.dark-mode .customer-card,
body.dark-mode .sidebar-card,
body.dark-mode .right-card,
body.dark-mode .details-card,
body.dark-mode .billing-card,
body.dark-mode .support-card,
body.dark-mode .platform-card,
body.dark-mode [class*="card"],
body.dark-mode [class*="panel"],
body.dark-mode [class*="box"] {
  background: var(--mc-dark-card) !important;
  color: var(--mc-dark-text) !important;
  border-color: var(--mc-dark-border) !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .22) !important;
}

/* Contenedores internos claros: garant��a, checklist, im��genes, historial */
html[data-theme="dark"] .warranty,
html[data-theme="dark"] .warranty-box,
html[data-theme="dark"] .warranty-section,
html[data-theme="dark"] .guarantee,
html[data-theme="dark"] .guarantee-box,
html[data-theme="dark"] .checklist,
html[data-theme="dark"] .checklist-box,
html[data-theme="dark"] .checklist-item,
html[data-theme="dark"] .checklist-section,
html[data-theme="dark"] .image-section,
html[data-theme="dark"] .images-section,
html[data-theme="dark"] .history-item,
html[data-theme="dark"] .timeline-item,
html[data-theme="dark"] .note-item,
html[data-theme="dark"] .service-row,
html[data-theme="dark"] .product-row,
html[data-theme="dark"] .device-row,
html[data-theme="dark"] .device-card,
body.dark-mode .warranty,
body.dark-mode .warranty-box,
body.dark-mode .warranty-section,
body.dark-mode .guarantee,
body.dark-mode .guarantee-box,
body.dark-mode .checklist,
body.dark-mode .checklist-box,
body.dark-mode .checklist-item,
body.dark-mode .checklist-section,
body.dark-mode .image-section,
body.dark-mode .images-section,
body.dark-mode .history-item,
body.dark-mode .timeline-item,
body.dark-mode .note-item,
body.dark-mode .service-row,
body.dark-mode .product-row,
body.dark-mode .device-row,
body.dark-mode .device-card {
  background: var(--mc-dark-card-2) !important;
  color: var(--mc-dark-text) !important;
  border-color: var(--mc-dark-border) !important;
}

/* Forzar bloques blancos gen��ricos dentro de ��rdenes sin afectar impresi��n */
html[data-theme="dark"] .orders-page .bg-white,
html[data-theme="dark"] .order-page .bg-white,
html[data-theme="dark"] .order-edit .bg-white,
html[data-theme="dark"] .order-form .bg-white,
html[data-theme="dark"] .order-create .bg-white,
body.dark-mode .orders-page .bg-white,
body.dark-mode .order-page .bg-white,
body.dark-mode .order-edit .bg-white,
body.dark-mode .order-form .bg-white,
body.dark-mode .order-create .bg-white {
  background: var(--mc-dark-card) !important;
  color: var(--mc-dark-text) !important;
}

/* Textos */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] label,
html[data-theme="dark"] strong,
html[data-theme="dark"] .title,
html[data-theme="dark"] .section-title,
html[data-theme="dark"] .card-title,
html[data-theme="dark"] .form-label,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode label,
body.dark-mode strong,
body.dark-mode .title,
body.dark-mode .section-title,
body.dark-mode .card-title,
body.dark-mode .form-label {
  color: var(--mc-dark-text) !important;
}

html[data-theme="dark"] p,
html[data-theme="dark"] small,
html[data-theme="dark"] span,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .subtitle,
html[data-theme="dark"] .help-text,
html[data-theme="dark"] .description,
body.dark-mode p,
body.dark-mode small,
body.dark-mode span,
body.dark-mode .muted,
body.dark-mode .text-muted,
body.dark-mode .subtitle,
body.dark-mode .help-text,
body.dark-mode .description {
  color: var(--mc-dark-muted) !important;
}

/* Inputs, selects, textareas, file inputs */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .input,
html[data-theme="dark"] .select,
html[data-theme="dark"] .textarea,
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea,
body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode .input,
body.dark-mode .select,
body.dark-mode .textarea {
  background: var(--mc-dark-input) !important;
  color: var(--mc-dark-text) !important;
  border-color: var(--mc-dark-border) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder,
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
  color: var(--mc-dark-faint) !important;
  opacity: 1 !important;
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] .form-control:focus,
body.dark-mode input:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus,
body.dark-mode .form-control:focus {
  border-color: var(--mc-primary) !important;
  box-shadow: 0 0 0 3px rgba(149, 184, 246, .18) !important;
  outline: none !important;
}

html[data-theme="dark"] input[type="file"],
body.dark-mode input[type="file"] {
  background: var(--mc-dark-input) !important;
  color: var(--mc-dark-muted) !important;
  border: 1px solid var(--mc-dark-border) !important;
  border-radius: 12px !important;
}

html[data-theme="dark"] input[type="file"]::file-selector-button,
body.dark-mode input[type="file"]::file-selector-button {
  background: var(--mc-dark-card-2) !important;
  color: var(--mc-dark-text) !important;
  border: 1px solid var(--mc-dark-border) !important;
  border-radius: 10px !important;
  margin-right: 10px !important;
}

/* Tablas oscuras */
html[data-theme="dark"] table,
html[data-theme="dark"] .table,
html[data-theme="dark"] .data-table,
body.dark-mode table,
body.dark-mode .table,
body.dark-mode .data-table {
  background: var(--mc-dark-card) !important;
  color: var(--mc-dark-text) !important;
  border-color: var(--mc-dark-border) !important;
}

html[data-theme="dark"] table thead,
html[data-theme="dark"] table thead tr,
html[data-theme="dark"] table thead th,
html[data-theme="dark"] .table thead,
html[data-theme="dark"] .table thead tr,
html[data-theme="dark"] .table thead th,
body.dark-mode table thead,
body.dark-mode table thead tr,
body.dark-mode table thead th,
body.dark-mode .table thead,
body.dark-mode .table thead tr,
body.dark-mode .table thead th {
  background: var(--mc-dark-card-2) !important;
  color: var(--mc-dark-text) !important;
  border-color: var(--mc-dark-border) !important;
}

html[data-theme="dark"] table tbody,
html[data-theme="dark"] table tbody tr,
html[data-theme="dark"] table tbody td,
html[data-theme="dark"] .table tbody,
html[data-theme="dark"] .table tbody tr,
html[data-theme="dark"] .table tbody td,
body.dark-mode table tbody,
body.dark-mode table tbody tr,
body.dark-mode table tbody td,
body.dark-mode .table tbody,
body.dark-mode .table tbody tr,
body.dark-mode .table tbody td {
  background: var(--mc-dark-card) !important;
  color: var(--mc-dark-text) !important;
  border-color: var(--mc-dark-border) !important;
}

html[data-theme="dark"] table tbody tr:hover,
html[data-theme="dark"] table tbody tr:hover td,
body.dark-mode table tbody tr:hover,
body.dark-mode table tbody tr:hover td {
  background: #1f2a3d !important;
}

html[data-theme="dark"] table a,
body.dark-mode table a {
  color: var(--mc-primary-soft) !important;
}

/* Pesta�0�9as Reparaci��n / Venta / Historial */
html[data-theme="dark"] .tabs,
html[data-theme="dark"] .order-tabs,
html[data-theme="dark"] .nav-tabs,
body.dark-mode .tabs,
body.dark-mode .order-tabs,
body.dark-mode .nav-tabs {
  border-color: var(--mc-dark-border) !important;
  background: transparent !important;
}

html[data-theme="dark"] .tabs a,
html[data-theme="dark"] .tabs button,
html[data-theme="dark"] .order-tabs a,
html[data-theme="dark"] .order-tabs button,
html[data-theme="dark"] .nav-tabs a,
html[data-theme="dark"] .nav-tabs button,
html[data-theme="dark"] [role="tab"],
body.dark-mode .tabs a,
body.dark-mode .tabs button,
body.dark-mode .order-tabs a,
body.dark-mode .order-tabs button,
body.dark-mode .nav-tabs a,
body.dark-mode .nav-tabs button,
body.dark-mode [role="tab"] {
  color: var(--mc-dark-muted) !important;
  background: transparent !important;
  border-color: transparent !important;
  text-shadow: none !important;
}

html[data-theme="dark"] .tabs a:hover,
html[data-theme="dark"] .tabs button:hover,
html[data-theme="dark"] .order-tabs a:hover,
html[data-theme="dark"] .order-tabs button:hover,
html[data-theme="dark"] .nav-tabs a:hover,
html[data-theme="dark"] .nav-tabs button:hover,
html[data-theme="dark"] [role="tab"]:hover,
body.dark-mode .tabs a:hover,
body.dark-mode .tabs button:hover,
body.dark-mode .order-tabs a:hover,
body.dark-mode .order-tabs button:hover,
body.dark-mode .nav-tabs a:hover,
body.dark-mode .nav-tabs button:hover,
body.dark-mode [role="tab"]:hover {
  color: var(--mc-dark-text) !important;
  background: rgba(149, 184, 246, .12) !important;
}

html[data-theme="dark"] .tabs .active,
html[data-theme="dark"] .tabs a.active,
html[data-theme="dark"] .tabs button.active,
html[data-theme="dark"] .order-tabs .active,
html[data-theme="dark"] .order-tabs a.active,
html[data-theme="dark"] .order-tabs button.active,
html[data-theme="dark"] .nav-tabs .active,
html[data-theme="dark"] .nav-tabs a.active,
html[data-theme="dark"] .nav-tabs button.active,
html[data-theme="dark"] [role="tab"].active,
html[data-theme="dark"] [aria-selected="true"],
body.dark-mode .tabs .active,
body.dark-mode .tabs a.active,
body.dark-mode .tabs button.active,
body.dark-mode .order-tabs .active,
body.dark-mode .order-tabs a.active,
body.dark-mode .order-tabs button.active,
body.dark-mode .nav-tabs .active,
body.dark-mode .nav-tabs a.active,
body.dark-mode .nav-tabs button.active,
body.dark-mode [role="tab"].active,
body.dark-mode [aria-selected="true"] {
  color: var(--mc-dark-text) !important;
  background: rgba(149, 184, 246, .22) !important;
  border-color: rgba(149, 184, 246, .55) !important;
  box-shadow: inset 0 -2px 0 var(--mc-primary) !important;
}

/* Modal de notas/reportes y modales generales */
html[data-theme="dark"] .modal,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .modal-card,
html[data-theme="dark"] .dialog,
html[data-theme="dark"] .popup,
html[data-theme="dark"] .notes-modal,
html[data-theme="dark"] .order-notes-modal,
body.dark-mode .modal,
body.dark-mode .modal-content,
body.dark-mode .modal-card,
body.dark-mode .dialog,
body.dark-mode .popup,
body.dark-mode .notes-modal,
body.dark-mode .order-notes-modal {
  background: var(--mc-dark-card-2) !important;
  color: var(--mc-dark-text) !important;
  border-color: var(--mc-dark-border) !important;
}

html[data-theme="dark"] .modal-backdrop,
html[data-theme="dark"] .overlay,
body.dark-mode .modal-backdrop,
body.dark-mode .overlay {
  background: rgba(2, 6, 23, .72) !important;
}

html[data-theme="dark"] .modal .close,
html[data-theme="dark"] .modal-close,
html[data-theme="dark"] .btn-close,
body.dark-mode .modal .close,
body.dark-mode .modal-close,
body.dark-mode .btn-close {
  background: var(--mc-dark-input) !important;
  color: var(--mc-dark-text) !important;
  border: 1px solid var(--mc-dark-border) !important;
}

/* Botones secundarios en oscuro */
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .btn-outline,
html[data-theme="dark"] .btn-light,
html[data-theme="dark"] button.secondary,
body.dark-mode .btn-secondary,
body.dark-mode .btn-outline,
body.dark-mode .btn-light,
body.dark-mode button.secondary {
  background: var(--mc-dark-card-2) !important;
  color: var(--mc-dark-text) !important;
  border-color: var(--mc-dark-border) !important;
}

/* Badges/estados en oscuro */
html[data-theme="dark"] .badge,
html[data-theme="dark"] .status,
html[data-theme="dark"] .pill,
body.dark-mode .badge,
body.dark-mode .status,
body.dark-mode .pill {
  border: 1px solid rgba(255,255,255,.08) !important;
}

html[data-theme="dark"] .badge-success,
html[data-theme="dark"] .status-success,
html[data-theme="dark"] .status-paid,
html[data-theme="dark"] .status-active,
html[data-theme="dark"] .status-delivered,
body.dark-mode .badge-success,
body.dark-mode .status-success,
body.dark-mode .status-paid,
body.dark-mode .status-active,
body.dark-mode .status-delivered {
  background: rgba(34, 197, 94, .16) !important;
  color: #86efac !important;
}

html[data-theme="dark"] .badge-warning,
html[data-theme="dark"] .status-warning,
html[data-theme="dark"] .status-pending,
body.dark-mode .badge-warning,
body.dark-mode .status-warning,
body.dark-mode .status-pending {
  background: rgba(249, 217, 154, .18) !important;
  color: #fde68a !important;
}

html[data-theme="dark"] .badge-danger,
html[data-theme="dark"] .status-danger,
html[data-theme="dark"] .status-expired,
html[data-theme="dark"] .status-suspended,
html[data-theme="dark"] .status-cancelled,
body.dark-mode .badge-danger,
body.dark-mode .status-danger,
body.dark-mode .status-expired,
body.dark-mode .status-suspended,
body.dark-mode .status-cancelled {
  background: rgba(255, 90, 79, .18) !important;
  color: #fecaca !important;
}

html[data-theme="dark"] .badge-info,
html[data-theme="dark"] .status-info,
html[data-theme="dark"] .status-open,
html[data-theme="dark"] .status-processing,
body.dark-mode .badge-info,
body.dark-mode .status-info,
body.dark-mode .status-open,
body.dark-mode .status-processing {
  background: rgba(149, 184, 246, .18) !important;
  color: #bfdbfe !important;
}

/* Dropdowns y men��s */
html[data-theme="dark"] .dropdown,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .menu,
html[data-theme="dark"] .popover,
body.dark-mode .dropdown,
body.dark-mode .dropdown-menu,
body.dark-mode .menu,
body.dark-mode .popover {
  background: var(--mc-dark-card-2) !important;
  color: var(--mc-dark-text) !important;
  border-color: var(--mc-dark-border) !important;
}

html[data-theme="dark"] .dropdown a,
html[data-theme="dark"] .dropdown-item,
body.dark-mode .dropdown a,
body.dark-mode .dropdown-item {
  color: var(--mc-dark-text) !important;
}

html[data-theme="dark"] .dropdown a:hover,
html[data-theme="dark"] .dropdown-item:hover,
body.dark-mode .dropdown a:hover,
body.dark-mode .dropdown-item:hover {
  background: rgba(149, 184, 246, .12) !important;
}

/* Sidebar y topbar: sin manchas raras */
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .side-nav,
html[data-theme="dark"] .app-sidebar,
body.dark-mode .sidebar,
body.dark-mode .side-nav,
body.dark-mode .app-sidebar {
  background: #0b1220 !important;
  border-color: var(--mc-dark-border) !important;
}

html[data-theme="dark"] .topbar,
html[data-theme="dark"] .header,
html[data-theme="dark"] .app-header,
body.dark-mode .topbar,
body.dark-mode .header,
body.dark-mode .app-header {
  background: rgba(15, 23, 42, .96) !important;
  color: var(--mc-dark-text) !important;
  border-color: var(--mc-dark-border) !important;
}

/* Corrige textos de sidebar si quedaron como pastillas */
html[data-theme="dark"] .sidebar a em,
html[data-theme="dark"] .sidebar-nav a em,
html[data-theme="dark"] .app-sidebar a em,
body.dark-mode .sidebar a em,
body.dark-mode .sidebar-nav a em,
body.dark-mode .app-sidebar a em {
  background: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* �0�9rea espec��fica de edici��n/creaci��n de orden */
html[data-theme="dark"] .order-edit,
html[data-theme="dark"] .order-create,
html[data-theme="dark"] .order-form,
body.dark-mode .order-edit,
body.dark-mode .order-create,
body.dark-mode .order-form {
  color: var(--mc-dark-text) !important;
}

html[data-theme="dark"] .order-edit *:not(.btn):not(button):not(.badge):not(.status):not(.pill),
html[data-theme="dark"] .order-create *:not(.btn):not(button):not(.badge):not(.status):not(.pill),
body.dark-mode .order-edit *:not(.btn):not(button):not(.badge):not(.status):not(.pill),
body.dark-mode .order-create *:not(.btn):not(button):not(.badge):not(.status):not(.pill) {
  border-color: var(--mc-dark-border);
}

/* Evita cajas blanco-crema en garant��a/checklist */
html[data-theme="dark"] .order-edit [style*="background:#fff"],
html[data-theme="dark"] .order-edit [style*="background: #fff"],
html[data-theme="dark"] .order-edit [style*="background:white"],
html[data-theme="dark"] .order-edit [style*="background: white"],
html[data-theme="dark"] .order-create [style*="background:#fff"],
html[data-theme="dark"] .order-create [style*="background: #fff"],
html[data-theme="dark"] .order-create [style*="background:white"],
html[data-theme="dark"] .order-create [style*="background: white"],
body.dark-mode .order-edit [style*="background:#fff"],
body.dark-mode .order-edit [style*="background: #fff"],
body.dark-mode .order-edit [style*="background:white"],
body.dark-mode .order-edit [style*="background: white"],
body.dark-mode .order-create [style*="background:#fff"],
body.dark-mode .order-create [style*="background: #fff"],
body.dark-mode .order-create [style*="background:white"],
body.dark-mode .order-create [style*="background: white"] {
  background: var(--mc-dark-card-2) !important;
  color: var(--mc-dark-text) !important;
}

/* L��neas/divisores */
html[data-theme="dark"] hr,
html[data-theme="dark"] .divider,
html[data-theme="dark"] .border,
body.dark-mode hr,
body.dark-mode .divider,
body.dark-mode .border {
  border-color: var(--mc-dark-border) !important;
}

/* Paginaci��n */
html[data-theme="dark"] .pagination a,
html[data-theme="dark"] .pagination span,
body.dark-mode .pagination a,
body.dark-mode .pagination span {
  background: var(--mc-dark-card-2) !important;
  color: var(--mc-dark-text) !important;
  border-color: var(--mc-dark-border) !important;
}

html[data-theme="dark"] .pagination .active,
body.dark-mode .pagination .active {
  background: var(--mc-primary) !important;
  color: #0f172a !important;
}

/* Scrollbars en contenedores oscuros */
html[data-theme="dark"] ::-webkit-scrollbar,
body.dark-mode ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

html[data-theme="dark"] ::-webkit-scrollbar-track,
body.dark-mode ::-webkit-scrollbar-track {
  background: #0b1220;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb,
body.dark-mode ::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 999px;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover,
body.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: #475569;
}

/* No afectar documentos imprimibles en pantalla salvo que est��n dentro de app normal */
@media print {
  html[data-theme="dark"] *,
  body.dark-mode * {
    background: #fff !important;
    color: #111827 !important;
    box-shadow: none !important;
  }
}

/* ============================================================
   PATCH QUIRÚRGICO: modo oscuro uniforme en módulos operativos
   ============================================================ */
html[data-theme="dark"],
html[data-theme="dark"] body,
body.dark-mode {
  background: #0f172a !important;
  color: #e5e7eb !important;
}

html[data-theme="dark"] .main,
html[data-theme="dark"] main,
html[data-theme="dark"] .content,
html[data-theme="dark"] .page-content,
html[data-theme="dark"] .app-content,
html[data-theme="dark"] .dashboard-content,
html[data-theme="dark"] .admin-content,
html[data-theme="dark"] .page,
body.dark-mode .main,
body.dark-mode main,
body.dark-mode .content,
body.dark-mode .page-content,
body.dark-mode .app-content,
body.dark-mode .dashboard-content,
body.dark-mode .admin-content,
body.dark-mode .page {
  background: radial-gradient(circle at top left, rgba(149,184,246,.10), transparent 34%), #0f172a !important;
  color: #e5e7eb !important;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .box,
html[data-theme="dark"] .table-card,
html[data-theme="dark"] .form-card,
html[data-theme="dark"] .summary-card,
html[data-theme="dark"] .dashboard-card,
html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .section-card,
html[data-theme="dark"] .settings-card,
html[data-theme="dark"] .order-card,
html[data-theme="dark"] .order-panel,
html[data-theme="dark"] .order-section,
html[data-theme="dark"] .device-card,
html[data-theme="dark"] .customer-card,
html[data-theme="dark"] .finance-card,
html[data-theme="dark"] .cash-card,
html[data-theme="dark"] .support-card,
html[data-theme="dark"] .billing-card,
html[data-theme="dark"] .platform-card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .modal-box,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .popover,
body.dark-mode .card,
body.dark-mode .panel,
body.dark-mode .box,
body.dark-mode .table-card,
body.dark-mode .form-card,
body.dark-mode .summary-card,
body.dark-mode .dashboard-card,
body.dark-mode .metric-card,
body.dark-mode .stat-card,
body.dark-mode .section-card,
body.dark-mode .settings-card,
body.dark-mode .order-card,
body.dark-mode .order-panel,
body.dark-mode .order-section,
body.dark-mode .device-card,
body.dark-mode .customer-card,
body.dark-mode .finance-card,
body.dark-mode .cash-card,
body.dark-mode .support-card,
body.dark-mode .billing-card,
body.dark-mode .platform-card,
body.dark-mode .modal-content,
body.dark-mode .modal-box,
body.dark-mode .dropdown-menu,
body.dark-mode .popover {
  background: #162033 !important;
  border-color: #2d3b52 !important;
  color: #e5e7eb !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.24) !important;
}

html[data-theme="dark"] .card *:not(.btn):not(button):not(.badge):not(.status-badge),
html[data-theme="dark"] .panel *:not(.btn):not(button):not(.badge):not(.status-badge),
body.dark-mode .card *:not(.btn):not(button):not(.badge):not(.status-badge),
body.dark-mode .panel *:not(.btn):not(button):not(.badge):not(.status-badge) {
  border-color: #2d3b52;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] label,
html[data-theme="dark"] strong,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode label,
body.dark-mode strong {
  color: #e5e7eb !important;
}

html[data-theme="dark"] p,
html[data-theme="dark"] span,
html[data-theme="dark"] small,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .help-text,
html[data-theme="dark"] .form-hint,
body.dark-mode p,
body.dark-mode span,
body.dark-mode small,
body.dark-mode .muted,
body.dark-mode .text-muted,
body.dark-mode .help-text,
body.dark-mode .form-hint {
  color: #94a3b8;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .input,
html[data-theme="dark"] .select,
html[data-theme="dark"] .textarea,
html[data-theme="dark"] input[type="file"],
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea,
body.dark-mode .input,
body.dark-mode .select,
body.dark-mode .textarea,
body.dark-mode input[type="file"] {
  background: #0b1220 !important;
  color: #e5e7eb !important;
  border-color: #2d3b52 !important;
  box-shadow: none !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder,
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
  color: #64748b !important;
  opacity: 1 !important;
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus,
body.dark-mode input:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus {
  border-color: #95b8f6 !important;
  box-shadow: 0 0 0 3px rgba(149,184,246,.18) !important;
}

html[data-theme="dark"] table,
html[data-theme="dark"] .table,
html[data-theme="dark"] .table-wrap,
html[data-theme="dark"] .data-table,
body.dark-mode table,
body.dark-mode .table,
body.dark-mode .table-wrap,
body.dark-mode .data-table {
  background: #111827 !important;
  color: #e5e7eb !important;
  border-color: #2d3b52 !important;
}

html[data-theme="dark"] thead,
html[data-theme="dark"] table thead th,
html[data-theme="dark"] .table thead th,
body.dark-mode thead,
body.dark-mode table thead th,
body.dark-mode .table thead th {
  background: #1e293b !important;
  color: #e5e7eb !important;
  border-color: #2d3b52 !important;
}

html[data-theme="dark"] table tbody tr,
html[data-theme="dark"] table tbody td,
html[data-theme="dark"] .table tbody tr,
html[data-theme="dark"] .table tbody td,
body.dark-mode table tbody tr,
body.dark-mode table tbody td,
body.dark-mode .table tbody tr,
body.dark-mode .table tbody td {
  background: #111827 !important;
  color: #dbeafe !important;
  border-color: #2d3b52 !important;
}

html[data-theme="dark"] table tbody tr:hover td,
html[data-theme="dark"] .table tbody tr:hover td,
body.dark-mode table tbody tr:hover td,
body.dark-mode .table tbody tr:hover td {
  background: #1f2a3d !important;
}

html[data-theme="dark"] .service-row,
html[data-theme="dark"] .product-row,
html[data-theme="dark"] .selected-row,
html[data-theme="dark"] .history-item,
html[data-theme="dark"] .note-item,
html[data-theme="dark"] .checklist-card,
html[data-theme="dark"] .checklist-group,
html[data-theme="dark"] .checklist-block,
html[data-theme="dark"] .warranty-box,
html[data-theme="dark"] .warranty-section,
html[data-theme="dark"] .quick-sale-box,
html[data-theme="dark"] .device-services,
html[data-theme="dark"] .device-images,
html[data-theme="dark"] .timeline-item,
body.dark-mode .service-row,
body.dark-mode .product-row,
body.dark-mode .selected-row,
body.dark-mode .history-item,
body.dark-mode .note-item,
body.dark-mode .checklist-card,
body.dark-mode .checklist-group,
body.dark-mode .checklist-block,
body.dark-mode .warranty-box,
body.dark-mode .warranty-section,
body.dark-mode .quick-sale-box,
body.dark-mode .device-services,
body.dark-mode .device-images,
body.dark-mode .timeline-item {
  background: #162033 !important;
  border-color: #2d3b52 !important;
  color: #e5e7eb !important;
}

html[data-theme="dark"] .tabs,
html[data-theme="dark"] .order-tabs,
html[data-theme="dark"] .nav-tabs,
body.dark-mode .tabs,
body.dark-mode .order-tabs,
body.dark-mode .nav-tabs {
  border-color: #2d3b52 !important;
}

html[data-theme="dark"] .tabs a,
html[data-theme="dark"] .tabs button,
html[data-theme="dark"] .order-tabs a,
html[data-theme="dark"] .order-tabs button,
html[data-theme="dark"] .tab-link,
body.dark-mode .tabs a,
body.dark-mode .tabs button,
body.dark-mode .order-tabs a,
body.dark-mode .order-tabs button,
body.dark-mode .tab-link {
  color: #94a3b8 !important;
  background: transparent !important;
}

html[data-theme="dark"] .tabs a.active,
html[data-theme="dark"] .tabs button.active,
html[data-theme="dark"] .order-tabs a.active,
html[data-theme="dark"] .order-tabs button.active,
html[data-theme="dark"] .tab-link.active,
body.dark-mode .tabs a.active,
body.dark-mode .tabs button.active,
body.dark-mode .order-tabs a.active,
body.dark-mode .order-tabs button.active,
body.dark-mode .tab-link.active {
  color: #e5e7eb !important;
  background: rgba(149,184,246,.18) !important;
  border-color: rgba(149,184,246,.45) !important;
}

html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .btn-outline,
html[data-theme="dark"] button.secondary,
body.dark-mode .btn-secondary,
body.dark-mode .btn-outline,
body.dark-mode button.secondary {
  background: #1e293b !important;
  color: #e5e7eb !important;
  border-color: #2d3b52 !important;
}

html[data-theme="dark"] .modal-backdrop,
html[data-theme="dark"] .overlay,
body.dark-mode .modal-backdrop,
body.dark-mode .overlay {
  background: rgba(2,6,23,.72) !important;
}

html[data-theme="dark"] .masked-cost,
body.dark-mode .masked-cost {
  color: #f9d99a !important;
  background: rgba(249,217,154,.12) !important;
  border: 1px solid rgba(249,217,154,.25) !important;
  border-radius: 999px;
  padding: .18rem .55rem;
}

/* ==========================================================
   PARCHE QUIRÚRGICO 2026-07-02
   Modo oscuro: quitar blancos restantes en órdenes.
   Cubre clientes/autocomplete, productos/materiales de servicio,
   venta de productos, serie/IMEI/passcode/patrón, checklist e historial.
   ========================================================== */
html[data-theme="dark"] body.app-body .main-content,
html[data-theme="dark"] body.app-body .app-shell {
  background: #0f172a !important;
  color: #e5e7eb !important;
}

/* Cards, paneles y subcontenedores internos de órdenes */
html[data-theme="dark"] body.app-body .main-content .card,
html[data-theme="dark"] body.app-body .main-content .side-card,
html[data-theme="dark"] body.app-body .main-content .mc-device-card,
html[data-theme="dark"] body.app-body .main-content .mc-device-head,
html[data-theme="dark"] body.app-body .main-content .mc-device-body,
html[data-theme="dark"] body.app-body .main-content .device-subblock,
html[data-theme="dark"] body.app-body .main-content .device-subblock.soft,
html[data-theme="dark"] body.app-body .main-content .side-panel,
html[data-theme="dark"] body.app-body .main-content .order-side,
html[data-theme="dark"] body.app-body .main-content .order-summary,
html[data-theme="dark"] body.app-body .main-content .summary-card,
html[data-theme="dark"] body.app-body .main-content .details-card,
html[data-theme="dark"] body.app-body .main-content .sale-inventory-block,
html[data-theme="dark"] body.app-body .main-content .quick-sale-box,
html[data-theme="dark"] body.app-body .main-content .sale-help-box,
html[data-theme="dark"] body.app-body .main-content .warranty-box,
html[data-theme="dark"] body.app-body .main-content .warranty-section,
html[data-theme="dark"] body.app-body .main-content .image-upload-box,
html[data-theme="dark"] body.app-body .main-content .device-images,
html[data-theme="dark"] body.app-body .main-content .device-services,
html[data-theme="dark"] body.app-body .main-content .tab-content,
html[data-theme="dark"] body.app-body .main-content .order-tab-panel {
  background: #162033 !important;
  color: #e5e7eb !important;
  border-color: #2d3b52 !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body.app-body .main-content .device-subblock.soft,
html[data-theme="dark"] body.app-body .main-content .sale-inventory-block,
html[data-theme="dark"] body.app-body .main-content .sale-help-box {
  background: linear-gradient(180deg, #162033, #111827) !important;
}

/* Textos dentro de órdenes */
html[data-theme="dark"] body.app-body .main-content h1,
html[data-theme="dark"] body.app-body .main-content h2,
html[data-theme="dark"] body.app-body .main-content h3,
html[data-theme="dark"] body.app-body .main-content h4,
html[data-theme="dark"] body.app-body .main-content strong,
html[data-theme="dark"] body.app-body .main-content label,
html[data-theme="dark"] body.app-body .main-content .device-inner-title h3,
html[data-theme="dark"] body.app-body .main-content .order-title,
html[data-theme="dark"] body.app-body .main-content .order-number {
  color: #e5e7eb !important;
}

html[data-theme="dark"] body.app-body .main-content p,
html[data-theme="dark"] body.app-body .main-content small,
html[data-theme="dark"] body.app-body .main-content .muted,
html[data-theme="dark"] body.app-body .main-content .device-inner-title p,
html[data-theme="dark"] body.app-body .main-content .sale-help-box p,
html[data-theme="dark"] body.app-body .main-content .service-product-hint,
html[data-theme="dark"] body.app-body .main-content .service-product-stock {
  color: #94a3b8 !important;
}

/* Inputs, selects, textareas y file inputs */
html[data-theme="dark"] body.app-body .main-content input,
html[data-theme="dark"] body.app-body .main-content select,
html[data-theme="dark"] body.app-body .main-content textarea,
html[data-theme="dark"] body.app-body .main-content .form-control,
html[data-theme="dark"] body.app-body .main-content .form-select,
html[data-theme="dark"] body.app-body .main-content input[type="file"] {
  background: #0b1220 !important;
  color: #e5e7eb !important;
  border-color: #2d3b52 !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body.app-body .main-content input::placeholder,
html[data-theme="dark"] body.app-body .main-content textarea::placeholder {
  color: #64748b !important;
  opacity: 1 !important;
}

html[data-theme="dark"] body.app-body .main-content input:focus,
html[data-theme="dark"] body.app-body .main-content select:focus,
html[data-theme="dark"] body.app-body .main-content textarea:focus {
  border-color: #95b8f6 !important;
  box-shadow: 0 0 0 3px rgba(149,184,246,.18) !important;
}

/* Autocompletes: cliente, equipo, servicios, productos de venta y material ligado */
html[data-theme="dark"] body.app-body .main-content .autocomplete-box,
html[data-theme="dark"] body.app-body .main-content .autocomplete-box.show,
html[data-theme="dark"] body.app-body .main-content #customerResults,
html[data-theme="dark"] body.app-body .main-content #deviceResults,
html[data-theme="dark"] body.app-body .main-content #serviceResults,
html[data-theme="dark"] body.app-body .main-content #productResults,
html[data-theme="dark"] body.app-body .main-content .extraDeviceResults,
html[data-theme="dark"] body.app-body .main-content .extraServiceResults,
html[data-theme="dark"] body.app-body .main-content .service-product-results,
html[data-theme="dark"] body.app-body .main-content .search-results,
html[data-theme="dark"] body.app-body .main-content .suggestions,
html[data-theme="dark"] body.app-body .main-content .device-suggestions,
html[data-theme="dark"] body.app-body .main-content .service-suggestions {
  background: #0b1220 !important;
  color: #e5e7eb !important;
  border: 1px solid #2d3b52 !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.45) !important;
}

html[data-theme="dark"] body.app-body .main-content .autocomplete-box button,
html[data-theme="dark"] body.app-body .main-content .autocomplete-box a,
html[data-theme="dark"] body.app-body .main-content .autocomplete-box .autocomplete-item,
html[data-theme="dark"] body.app-body .main-content .search-results a,
html[data-theme="dark"] body.app-body .main-content .suggestions button,
html[data-theme="dark"] body.app-body .main-content .device-suggestions button,
html[data-theme="dark"] body.app-body .main-content .service-suggestions button {
  background: #111827 !important;
  color: #e5e7eb !important;
  border-color: #2d3b52 !important;
}

html[data-theme="dark"] body.app-body .main-content .autocomplete-box button:hover,
html[data-theme="dark"] body.app-body .main-content .autocomplete-box a:hover,
html[data-theme="dark"] body.app-body .main-content .autocomplete-box .autocomplete-item:hover,
html[data-theme="dark"] body.app-body .main-content .search-results a:hover,
html[data-theme="dark"] body.app-body .main-content .suggestions button:hover,
html[data-theme="dark"] body.app-body .main-content .device-suggestions button:hover,
html[data-theme="dark"] body.app-body .main-content .service-suggestions button:hover {
  background: #1e293b !important;
  color: #ffffff !important;
}

html[data-theme="dark"] body.app-body .main-content .autocomplete-box button strong,
html[data-theme="dark"] body.app-body .main-content .autocomplete-box button small,
html[data-theme="dark"] body.app-body .main-content .autocomplete-empty,
html[data-theme="dark"] body.app-body .main-content .search-results small {
  color: #add5fa !important;
}

html[data-theme="dark"] body.app-body .main-content .autocomplete-box button strong {
  color: #e5e7eb !important;
}

/* Filas de servicios, productos de venta y material de inventario ligado al servicio */
html[data-theme="dark"] body.app-body .main-content .selected-list,
html[data-theme="dark"] body.app-body .main-content .selected-row,
html[data-theme="dark"] body.app-body .main-content .selected-row.service-row,
html[data-theme="dark"] body.app-body .main-content .selected-row.product-row,
html[data-theme="dark"] body.app-body .main-content #selectedServices .service-row,
html[data-theme="dark"] body.app-body .main-content #selectedProducts .product-row,
html[data-theme="dark"] body.app-body .main-content .service-row,
html[data-theme="dark"] body.app-body .main-content .product-row,
html[data-theme="dark"] body.app-body .main-content .material-row,
html[data-theme="dark"] body.app-body .main-content .service-product-box,
html[data-theme="dark"] body.app-body .main-content [data-service-product-box],
html[data-theme="dark"] body.app-body .main-content .service-product-fields,
html[data-theme="dark"] body.app-body .main-content .service-product-search-wrap {
  background: #111827 !important;
  color: #e5e7eb !important;
  border-color: #2d3b52 !important;
}

html[data-theme="dark"] body.app-body .main-content .service-product-box,
html[data-theme="dark"] body.app-body .main-content [data-service-product-box] {
  border-radius: 16px !important;
  box-shadow: inset 0 0 0 1px rgba(149,184,246,.08) !important;
}

html[data-theme="dark"] body.app-body .main-content .service-product-title,
html[data-theme="dark"] body.app-body .main-content .service-product-fields label,
html[data-theme="dark"] body.app-body .main-content .selected-row label {
  color: #e5e7eb !important;
}

/* Serie / IMEI / Passcode / Patrón */
html[data-theme="dark"] body.app-body .main-content .access-card,
html[data-theme="dark"] body.app-body .main-content .extra-access-card,
html[data-theme="dark"] body.app-body .main-content .access-panel,
html[data-theme="dark"] body.app-body .main-content .extra-access-panels,
html[data-theme="dark"] body.app-body .main-content .pattern-area,
html[data-theme="dark"] body.app-body .main-content .pattern-actions,
html[data-theme="dark"] body.app-body .main-content .extra-pattern-grid {
  background: #111827 !important;
  color: #e5e7eb !important;
  border-color: #2d3b52 !important;
}

html[data-theme="dark"] body.app-body .main-content .access-tabs,
html[data-theme="dark"] body.app-body .main-content .device-tools-row {
  background: #162033 !important;
  border-color: #2d3b52 !important;
}

html[data-theme="dark"] body.app-body .main-content .access-tabs button,
html[data-theme="dark"] body.app-body .main-content .chip-btn,
html[data-theme="dark"] body.app-body .main-content .color-chip,
html[data-theme="dark"] body.app-body .main-content .pattern-grid button,
html[data-theme="dark"] body.app-body .main-content .extra-pattern-grid button {
  background: #0b1220 !important;
  color: #cbd5e1 !important;
  border-color: #2d3b52 !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body.app-body .main-content .access-tabs button.active,
html[data-theme="dark"] body.app-body .main-content .access-tabs button:hover,
html[data-theme="dark"] body.app-body .main-content .chip-btn:hover,
html[data-theme="dark"] body.app-body .main-content .pattern-grid button.active,
html[data-theme="dark"] body.app-body .main-content .extra-pattern-grid button.active {
  background: rgba(149,184,246,.18) !important;
  color: #e5e7eb !important;
  border-color: rgba(149,184,246,.45) !important;
}

html[data-theme="dark"] body.app-body .main-content .pattern-grid button span,
html[data-theme="dark"] body.app-body .main-content .extra-pattern-grid button span {
  background: #add5fa !important;
}

html[data-theme="dark"] body.app-body .main-content .color-menu,
html[data-theme="dark"] body.app-body .main-content .color-menu.show,
html[data-theme="dark"] body.app-body .main-content .color-menu button {
  background: #0b1220 !important;
  color: #e5e7eb !important;
  border-color: #2d3b52 !important;
}

html[data-theme="dark"] body.app-body .main-content .color-menu button:hover {
  background: #1e293b !important;
}

/* Checklist: botones, contenido, labels y agregados manuales */
html[data-theme="dark"] body.app-body .main-content .checklist-toggle,
html[data-theme="dark"] body.app-body .main-content .checklist-laptop-btn {
  background: #111827 !important;
  color: #e5e7eb !important;
  border-color: #2d3b52 !important;
}

html[data-theme="dark"] body.app-body .main-content .checklist-toggle:hover,
html[data-theme="dark"] body.app-body .main-content .checklist-toggle.is-open,
html[data-theme="dark"] body.app-body .main-content .checklist-toggle.active {
  background: rgba(149,184,246,.16) !important;
  color: #ffffff !important;
  border-color: rgba(149,184,246,.45) !important;
}

html[data-theme="dark"] body.app-body .main-content .checklist-toggle span,
html[data-theme="dark"] body.app-body .main-content .checklist-laptop-btn span {
  color: #add5fa !important;
}

html[data-theme="dark"] body.app-body .main-content .checklist-box,
html[data-theme="dark"] body.app-body .main-content .checklist-box.show,
html[data-theme="dark"] body.app-body .main-content .checklist-card,
html[data-theme="dark"] body.app-body .main-content .checklist-group,
html[data-theme="dark"] body.app-body .main-content .checklist-block,
html[data-theme="dark"] body.app-body .main-content .checklist-manual-add {
  background: #162033 !important;
  color: #e5e7eb !important;
  border-color: #2d3b52 !important;
}

html[data-theme="dark"] body.app-body .main-content .check-item,
html[data-theme="dark"] body.app-body .main-content .check-line {
  background: #0b1220 !important;
  color: #e5e7eb !important;
  border-color: #2d3b52 !important;
}

html[data-theme="dark"] body.app-body .main-content .check-item span,
html[data-theme="dark"] body.app-body .main-content .check-line span {
  color: #e5e7eb !important;
}

/* Historial y notas dentro de orden */
html[data-theme="dark"] body.app-body .main-content .history-panel,
html[data-theme="dark"] body.app-body .main-content .history-list,
html[data-theme="dark"] body.app-body .main-content .history-item,
html[data-theme="dark"] body.app-body .main-content .history-content,
html[data-theme="dark"] body.app-body .main-content .history-content p,
html[data-theme="dark"] body.app-body .main-content .history-content .history-detail,
html[data-theme="dark"] body.app-body .main-content .history-content [style],
html[data-theme="dark"] body.app-body .main-content .notes-list article,
html[data-theme="dark"] body.app-body .main-content .note-card,
html[data-theme="dark"] body.app-body .main-content .note-body {
  background: #111827 !important;
  color: #e5e7eb !important;
  border-color: #2d3b52 !important;
}

html[data-theme="dark"] body.app-body .main-content .history-item {
  box-shadow: 0 10px 24px rgba(0,0,0,.22) !important;
}

html[data-theme="dark"] body.app-body .main-content .history-content strong,
html[data-theme="dark"] body.app-body .main-content .history-content b,
html[data-theme="dark"] body.app-body .main-content .note-card-head strong {
  color: #e5e7eb !important;
}

html[data-theme="dark"] body.app-body .main-content .history-content small,
html[data-theme="dark"] body.app-body .main-content .history-content span,
html[data-theme="dark"] body.app-body .main-content .note-card-head small {
  color: #94a3b8 !important;
}

/* Botones secundarios que salían blancos dentro de estas secciones */
html[data-theme="dark"] body.app-body .main-content .btn-light,
html[data-theme="dark"] body.app-body .main-content .btn-secondary,
html[data-theme="dark"] body.app-body .main-content .btn-outline,
html[data-theme="dark"] body.app-body .main-content button.btn-light {
  background: #1e293b !important;
  color: #e5e7eb !important;
  border-color: #2d3b52 !important;
}

html[data-theme="dark"] body.app-body .main-content .btn-light:hover,
html[data-theme="dark"] body.app-body .main-content .btn-secondary:hover,
html[data-theme="dark"] body.app-body .main-content .btn-outline:hover {
  background: rgba(149,184,246,.18) !important;
  color: #ffffff !important;
}

/* Scrollbars de autocompletes/listas oscuras */
html[data-theme="dark"] body.app-body .main-content .autocomplete-box::-webkit-scrollbar,
html[data-theme="dark"] body.app-body .main-content .history-list::-webkit-scrollbar,
html[data-theme="dark"] body.app-body .main-content .order-side::-webkit-scrollbar {
  width: 10px;
}
html[data-theme="dark"] body.app-body .main-content .autocomplete-box::-webkit-scrollbar-thumb,
html[data-theme="dark"] body.app-body .main-content .history-list::-webkit-scrollbar-thumb,
html[data-theme="dark"] body.app-body .main-content .order-side::-webkit-scrollbar-thumb {
  background: #2d3b52;
  border-radius: 999px;
}

/* =========================================================
   LOGO EN MODO OSCURO - MEJOR ILUMINACION
   Mantiene el archivo anterior y solo agrega glow blanco
   detras/sobre la silueta del PNG transparente.
   ========================================================= */
html[data-theme="dark"] .sidebar-brand,
html[data-theme="dark"] .platform-brand,
html[data-theme="dark"] .login-brand,
html[data-theme="dark"] .auth-brand,
html[data-theme="dark"] .brand-wrap,
body.dark-mode .sidebar-brand,
body.dark-mode .platform-brand,
body.dark-mode .login-brand,
body.dark-mode .auth-brand,
body.dark-mode .brand-wrap {
  position: relative;
  overflow: visible !important;
}

html[data-theme="dark"] .sidebar-brand,
body.dark-mode .sidebar-brand {
  background: linear-gradient(180deg, rgba(5, 9, 18, .98), rgba(10, 16, 30, .96)) !important;
}

html[data-theme="dark"] .sidebar-logo-link,
html[data-theme="dark"] .platform-brand,
html[data-theme="dark"] .login-brand,
html[data-theme="dark"] .auth-brand,
html[data-theme="dark"] .brand-wrap,
body.dark-mode .sidebar-logo-link,
body.dark-mode .platform-brand,
body.dark-mode .login-brand,
body.dark-mode .auth-brand,
body.dark-mode .brand-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  overflow: visible !important;
}

html[data-theme="dark"] .sidebar-logo-link::before,
html[data-theme="dark"] .platform-brand::before,
html[data-theme="dark"] .login-brand::before,
html[data-theme="dark"] .auth-brand::before,
html[data-theme="dark"] .brand-wrap::before,
body.dark-mode .sidebar-logo-link::before,
body.dark-mode .platform-brand::before,
body.dark-mode .login-brand::before,
body.dark-mode .auth-brand::before,
body.dark-mode .brand-wrap::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 22px;
  background:
    radial-gradient(circle at center, rgba(255,255,255,.30) 0%, rgba(255,255,255,.18) 30%, rgba(149,184,246,.12) 52%, rgba(255,255,255,0) 76%);
  filter: blur(14px);
  opacity: .92;
  z-index: 0;
  pointer-events: none;
}

html[data-theme="dark"] .sidebar-logo-link img,
html[data-theme="dark"] .platform-brand img,
html[data-theme="dark"] .login-brand img,
html[data-theme="dark"] .auth-brand img,
html[data-theme="dark"] .brand-wrap img,
html[data-theme="dark"] .sidebar-brand img,
body.dark-mode .sidebar-logo-link img,
body.dark-mode .platform-brand img,
body.dark-mode .login-brand img,
body.dark-mode .auth-brand img,
body.dark-mode .brand-wrap img,
body.dark-mode .sidebar-brand img {
  position: relative;
  z-index: 2;
  background: transparent !important;
  opacity: 1 !important;
  filter:
    brightness(1.16)
    contrast(1.08)
    drop-shadow(0 0 2px rgba(255,255,255,1))
    drop-shadow(0 0 7px rgba(255,255,255,.98))
    drop-shadow(0 0 16px rgba(255,255,255,.86))
    drop-shadow(0 0 30px rgba(255,255,255,.55))
    drop-shadow(0 0 46px rgba(149,184,246,.25))
    drop-shadow(0 12px 24px rgba(0,0,0,.34));
}

html[data-theme="dark"] .sidebar-logo-link:hover img,
html[data-theme="dark"] .platform-brand:hover img,
html[data-theme="dark"] .login-brand:hover img,
html[data-theme="dark"] .auth-brand:hover img,
html[data-theme="dark"] .brand-wrap:hover img,
body.dark-mode .sidebar-logo-link:hover img,
body.dark-mode .platform-brand:hover img,
body.dark-mode .login-brand:hover img,
body.dark-mode .auth-brand:hover img,
body.dark-mode .brand-wrap:hover img {
  filter:
    brightness(1.2)
    contrast(1.1)
    drop-shadow(0 0 3px rgba(255,255,255,1))
    drop-shadow(0 0 10px rgba(255,255,255,1))
    drop-shadow(0 0 20px rgba(255,255,255,.92))
    drop-shadow(0 0 38px rgba(255,255,255,.62))
    drop-shadow(0 0 54px rgba(149,184,246,.32))
    drop-shadow(0 12px 26px rgba(0,0,0,.38));
}

html[data-theme="dark"] .sidebar-logo-link strong,
html[data-theme="dark"] .platform-brand strong,
html[data-theme="dark"] .login-brand strong,
html[data-theme="dark"] .auth-brand strong,
html[data-theme="dark"] .brand-wrap strong,
body.dark-mode .sidebar-logo-link strong,
body.dark-mode .platform-brand strong,
body.dark-mode .login-brand strong,
body.dark-mode .auth-brand strong,
body.dark-mode .brand-wrap strong {
  position: relative;
  z-index: 2;
  color: #f8fafc !important;
  text-shadow: 0 0 12px rgba(255,255,255,.26), 0 0 22px rgba(149,184,246,.18);
}


/* =========================================================
   FIX REAL 20260704 - historial, notas y admin nav
   Aplicado sobre el ZIP actual para no perder estilos previos.
   ========================================================= */

/* Limitar la iluminacion fuerte al logo del sidebar/login, sin contaminar barras */
html[data-theme="dark"] .platform-brand::before,
html[data-theme="dark"] .brand-wrap::before,
html[data-theme="dark"] .login-brand::before,
html[data-theme="dark"] .auth-brand::before,
body.dark-mode .platform-brand::before,
body.dark-mode .brand-wrap::before,
body.dark-mode .login-brand::before,
body.dark-mode .auth-brand::before {
  content: none !important;
  display: none !important;
}

html[data-theme="dark"] .sidebar-brand {
  background: linear-gradient(180deg, rgba(5,9,18,.98), rgba(11,18,32,.96)) !important;
}

html[data-theme="dark"] .sidebar-logo-link {
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;
  background:
    radial-gradient(circle at 48% 50%, rgba(255,255,255,.14), rgba(255,255,255,.07) 42%, transparent 74%),
    linear-gradient(180deg, rgba(5,9,18,.96), rgba(11,18,32,.92)) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 18px !important;
}

html[data-theme="dark"] .sidebar-logo-link::before {
  content: "" !important;
  position: absolute !important;
  inset: -10px !important;
  border-radius: 24px !important;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.30), rgba(255,255,255,.16) 32%, rgba(149,184,246,.12) 52%, transparent 78%) !important;
  filter: blur(14px) !important;
  opacity: .86 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

html[data-theme="dark"] .sidebar-logo-link img,
html[data-theme="dark"] .auth-logo img,
html[data-theme="dark"] .business-logo-preview img,
html[data-theme="dark"] .logo-preview img,
html[data-theme="dark"] .current-logo img,
html[data-theme="dark"] .uploaded-logo-preview img {
  position: relative !important;
  z-index: 2 !important;
  background: transparent !important;
  opacity: 1 !important;
  filter:
    brightness(1.18)
    contrast(1.08)
    drop-shadow(0 0 2px rgba(255,255,255,1))
    drop-shadow(0 0 8px rgba(255,255,255,.98))
    drop-shadow(0 0 17px rgba(255,255,255,.84))
    drop-shadow(0 0 34px rgba(255,255,255,.52))
    drop-shadow(0 0 48px rgba(149,184,246,.26))
    drop-shadow(0 12px 26px rgba(0,0,0,.38)) !important;
}

/* Barra de administracion: no debe quedar blanca en modo oscuro */
html[data-theme="dark"] .admin-nav,
body.dark-mode .admin-nav {
  background: #162033 !important;
  color: #e5e7eb !important;
  border: 1px solid #2d3b52 !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.24) !important;
}

html[data-theme="dark"] .admin-nav a,
body.dark-mode .admin-nav a {
  background: transparent !important;
  color: #add5fa !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .admin-nav a:hover,
body.dark-mode .admin-nav a:hover {
  background: rgba(149,184,246,.14) !important;
  color: #e5e7eb !important;
}

html[data-theme="dark"] .admin-nav a.active,
html[data-theme="dark"] .admin-nav .active,
body.dark-mode .admin-nav a.active,
body.dark-mode .admin-nav .active {
  background: rgba(34,197,94,.14) !important;
  color: #dcfce7 !important;
  border-color: rgba(34,197,94,.28) !important;
}

/* Historial real de orden: la vista usa #orderTabHistory */
html[data-theme="dark"] #orderTabHistory,
html[data-theme="dark"] #orderTabHistory .order-block,
html[data-theme="dark"] #orderTabHistory .order-history-list,
html[data-theme="dark"] #orderTabHistory .order-notes-panel,
html[data-theme="dark"] #orderTabHistory .notes-list,
body.dark-mode #orderTabHistory,
body.dark-mode #orderTabHistory .order-block,
body.dark-mode #orderTabHistory .order-history-list,
body.dark-mode #orderTabHistory .order-notes-panel,
body.dark-mode #orderTabHistory .notes-list {
  background: #162033 !important;
  color: #e5e7eb !important;
  border-color: #2d3b52 !important;
}

html[data-theme="dark"] #orderTabHistory .order-history-card,
html[data-theme="dark"] #orderTabHistory .notes-list article,
html[data-theme="dark"] #orderTabHistory .order-note-card,
html[data-theme="dark"] #orderTabHistory .note-card,
html[data-theme="dark"] #orderTabHistory .report-card,
body.dark-mode #orderTabHistory .order-history-card,
body.dark-mode #orderTabHistory .notes-list article,
body.dark-mode #orderTabHistory .order-note-card,
body.dark-mode #orderTabHistory .note-card,
body.dark-mode #orderTabHistory .report-card {
  background: #1e293b !important;
  color: #e5e7eb !important;
  border: 1px solid #2d3b52 !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.28) !important;
}

html[data-theme="dark"] #orderTabHistory .order-history-line,
body.dark-mode #orderTabHistory .order-history-line {
  background: #0b1220 !important;
  color: #cbd5e1 !important;
  border: 1px solid #2d3b52 !important;
}

html[data-theme="dark"] #orderTabHistory .order-history-title,
html[data-theme="dark"] #orderTabHistory .order-history-line-label,
html[data-theme="dark"] #orderTabHistory h1,
html[data-theme="dark"] #orderTabHistory h2,
html[data-theme="dark"] #orderTabHistory h3,
html[data-theme="dark"] #orderTabHistory strong,
html[data-theme="dark"] #orderTabHistory b,
body.dark-mode #orderTabHistory .order-history-title,
body.dark-mode #orderTabHistory .order-history-line-label,
body.dark-mode #orderTabHistory h1,
body.dark-mode #orderTabHistory h2,
body.dark-mode #orderTabHistory h3,
body.dark-mode #orderTabHistory strong,
body.dark-mode #orderTabHistory b {
  color: #e5e7eb !important;
}

html[data-theme="dark"] #orderTabHistory p,
html[data-theme="dark"] #orderTabHistory small,
html[data-theme="dark"] #orderTabHistory span,
html[data-theme="dark"] #orderTabHistory .order-history-meta,
html[data-theme="dark"] #orderTabHistory .order-history-date,
html[data-theme="dark"] #orderTabHistory .order-history-empty,
body.dark-mode #orderTabHistory p,
body.dark-mode #orderTabHistory small,
body.dark-mode #orderTabHistory span,
body.dark-mode #orderTabHistory .order-history-meta,
body.dark-mode #orderTabHistory .order-history-date,
body.dark-mode #orderTabHistory .order-history-empty {
  color: #94a3b8 !important;
}

/* Si qued� un inline blanco en alguna variante, aqu� s� se tumba por id */
html[data-theme="dark"] #orderTabHistory [style*="background:#ffffff"],
html[data-theme="dark"] #orderTabHistory [style*="background: #ffffff"],
html[data-theme="dark"] #orderTabHistory [style*="background:#fff"],
html[data-theme="dark"] #orderTabHistory [style*="background: #fff"],
html[data-theme="dark"] #orderTabHistory [style*="background:white"],
html[data-theme="dark"] #orderTabHistory [style*="background: white"],
html[data-theme="dark"] #orderTabHistory [style*="background:#f9fafb"],
html[data-theme="dark"] #orderTabHistory [style*="background: #f9fafb"],
html[data-theme="dark"] #orderTabHistory [style*="background-color:#ffffff"],
html[data-theme="dark"] #orderTabHistory [style*="background-color: #ffffff"],
html[data-theme="dark"] #orderTabHistory [style*="background-color:#fff"],
html[data-theme="dark"] #orderTabHistory [style*="background-color: #fff"],
html[data-theme="dark"] #orderTabHistory [style*="background-color:white"],
html[data-theme="dark"] #orderTabHistory [style*="background-color: white"],
html[data-theme="dark"] #orderTabHistory [style*="background-color:#f9fafb"],
html[data-theme="dark"] #orderTabHistory [style*="background-color: #f9fafb"],
body.dark-mode #orderTabHistory [style*="background:#ffffff"],
body.dark-mode #orderTabHistory [style*="background: #ffffff"],
body.dark-mode #orderTabHistory [style*="background:#fff"],
body.dark-mode #orderTabHistory [style*="background: #fff"],
body.dark-mode #orderTabHistory [style*="background:white"],
body.dark-mode #orderTabHistory [style*="background: white"],
body.dark-mode #orderTabHistory [style*="background:#f9fafb"],
body.dark-mode #orderTabHistory [style*="background: #f9fafb"] {
  background: #1e293b !important;
  color: #e5e7eb !important;
  border-color: #2d3b52 !important;
}