/* =========================================================================
   Qubit · Sistema de diseño único (v2)
   -------------------------------------------------------------------------
   Este archivo se carga al final de dashboard.html y es la ÚNICA fuente de
   colores, radios, sombras, espaciados y componentes del CRM. Las vistas
   usan estos tokens (var(--crm-*)); no definen paletas propias.

   1. Tokens (claro / oscuro)            8. Formularios
   2. Puente Bootstrap / Darkone         9. Tablas y DataTables
   3. Alias de paletas heredadas        10. Insignias, chips y pestañas
   4. Base                              11. Menús, modales y offcanvas
   5. Estructura (sidebar, topbar,      12. Avisos: toast, alerta y diálogo
      márgenes de página)               13. Estados vacíos, zonas de carga
   6. Encabezado de módulo              14. Módulos con piezas propias
   7. Superficies, KPI y botones        15. Adaptación a celular / tablet
   ========================================================================= */

/* 1. TOKENS ---------------------------------------------------------------- */
:root,
html[data-bs-theme="light"] {
  /* Marca */
  --crm-primary: #2563eb;
  --crm-primary-hover: #1d4ed8;
  --crm-primary-active: #1e40af;
  --crm-primary-soft: #eef4ff;
  --crm-primary-soft-2: #d6e4ff;
  --crm-primary-ink: #1d4ed8;
  --crm-on-primary: #ffffff;
  --crm-accent: #4f46e5;
  --crm-teal: #0f9488;
  --crm-gradient-brand: linear-gradient(115deg, #1e40af 0%, #3b5bdb 55%, #0f7c8c 100%);

  /* Superficies y texto */
  --crm-canvas: #f3f6fb;
  --crm-surface: #ffffff;
  --crm-surface-2: #f8fafc;
  --crm-soft: #eef2f8;
  --crm-line: #e3e8f0;
  --crm-line-strong: #cfd8e5;
  --crm-ink: #16233b;
  --crm-muted: #5a6a83;
  --crm-subtle: #8593a8;

  /* Conversación tipo WhatsApp: cliente en blanco, lo que envía el CRM
     (IA o Humano) en verde. Contraste del texto >= 4.5:1 en ambos temas. */
  --crm-chat-canvas: #eef1f5;
  --crm-chat-in-bg: #ffffff;
  --crm-chat-in-line: #dde3ec;
  --crm-chat-in-ink: var(--crm-ink);
  --crm-chat-out-bg: #d9fdd3;
  --crm-chat-out-line: #b6e6ad;
  --crm-chat-out-ink: #16233b;
  --crm-chat-out-meta: #4a6358;
  --crm-chat-out-quote: #c9f0c1;
  --crm-chat-out-accent: #06705c;
  --crm-chat-out-chip: rgb(255 255 255 / 72%);
  --crm-chat-read: #0369a1;
  --crm-chat-quote-client: #4f46e5;

  /* Estados */
  --crm-success: #059669;  --crm-success-hover: #047857; --crm-success-ink: #047857; --crm-success-soft: #ecfdf5; --crm-success-line: #a7e3cb;
  --crm-warning: #d97706;  --crm-warning-hover: #b45309; --crm-warning-ink: #92400e; --crm-warning-soft: #fffbeb; --crm-warning-line: #f6d690;
  --crm-danger: #dc2626;   --crm-danger-hover: #b91c1c;  --crm-danger-ink: #b91c1c;  --crm-danger-soft: #fef2f2;  --crm-danger-line: #fbc7c7;
  --crm-info: #0284c7;     --crm-info-hover: #0369a1;    --crm-info-ink: #075985;    --crm-info-soft: #f0f9ff;    --crm-info-line: #b6e0f7;

  /* Forma */
  --crm-radius-xs: 6px;
  --crm-radius-sm: 8px;
  --crm-radius: 12px;
  --crm-radius-lg: 16px;
  --crm-radius-pill: 999px;
  --crm-shadow-sm: 0 1px 2px rgb(15 23 42 / 5%);
  --crm-shadow: 0 1px 2px rgb(15 23 42 / 4%), 0 4px 14px rgb(15 23 42 / 5%);
  --crm-shadow-lg: 0 18px 50px rgb(15 23 42 / 18%);
  --crm-focus-ring: 0 0 0 3px rgb(37 99 235 / 20%);

  /* Medidas */
  --crm-gutter: 1.5rem;
  --crm-gap: 1.25rem;
  --crm-card-pad: 1.25rem;
  --crm-control-h: 2.5rem;
  --crm-control-h-sm: 2rem;
  --crm-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Nombres anteriores (compatibilidad) */
  --crm-blue: var(--crm-primary);
  --crm-indigo: var(--crm-accent);
  --crm-violet: var(--crm-accent);
  --crm-header: var(--crm-gradient-brand);
  --crm-space: var(--crm-gutter);
  --crm-control: var(--crm-control-h);
}

html[data-bs-theme="dark"] {
  --crm-primary: #3b82f6;
  --crm-primary-hover: #2f6fe0;
  --crm-primary-active: #2563eb;
  --crm-primary-soft: #16264a;
  --crm-primary-soft-2: #23396a;
  --crm-primary-ink: #9cc3ff;
  --crm-accent: #7c83f5;
  --crm-teal: #2bb3a3;
  --crm-gradient-brand: linear-gradient(115deg, #1c3a9e 0%, #3349b8 55%, #0c6a78 100%);

  --crm-canvas: #0c1322;
  --crm-surface: #131c2e;
  --crm-surface-2: #172236;
  --crm-soft: #1c2940;
  --crm-line: #26334a;
  --crm-line-strong: #34435e;
  --crm-ink: #e5ebf5;
  --crm-muted: #a3b1c6;
  --crm-subtle: #7a89a0;

  --crm-chat-canvas: #131c2e;
  --crm-chat-in-bg: #1c2940;
  --crm-chat-in-line: #2c3a53;
  --crm-chat-in-ink: var(--crm-ink);
  --crm-chat-out-bg: #005c4b;
  --crm-chat-out-line: #0b6f5c;
  --crm-chat-out-ink: #e9edef;
  --crm-chat-out-meta: #a7d8cb;
  --crm-chat-out-quote: #004a3c;
  --crm-chat-out-accent: #7ee2c4;
  --crm-chat-out-chip: rgb(0 0 0 / 22%);
  --crm-chat-read: #7fd3f7;
  --crm-chat-quote-client: #c7d2fe;

  --crm-success: #059669;  --crm-success-hover: #047857; --crm-success-ink: #6ee7b7; --crm-success-soft: #0f2c27; --crm-success-line: #1f5546;
  --crm-warning: #d97706;  --crm-warning-hover: #b45309; --crm-warning-ink: #fcd34d; --crm-warning-soft: #2d2412; --crm-warning-line: #5f4a1c;
  --crm-danger: #dc2626;   --crm-danger-hover: #b91c1c;  --crm-danger-ink: #fca5a5;  --crm-danger-soft: #34191e;  --crm-danger-line: #6b2a33;
  --crm-info: #38bdf8;     --crm-info-hover: #0ea5e9;    --crm-info-ink: #7dd3fc;    --crm-info-soft: #0f2536;    --crm-info-line: #1f4b66;

  --crm-shadow-sm: 0 1px 2px rgb(0 0 0 / 30%);
  --crm-shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 6px 18px rgb(0 0 0 / 22%);
  --crm-shadow-lg: 0 22px 60px rgb(0 0 0 / 55%);
  --crm-focus-ring: 0 0 0 3px rgb(59 130 246 / 35%);
  color-scheme: dark;
}

/* 2. PUENTE BOOTSTRAP / DARKONE ------------------------------------------- */
:root,
html[data-bs-theme] {
  --bs-font-sans-serif: var(--crm-font);
  --bs-body-font-family: var(--crm-font);
  --bs-body-font-size: .875rem;
  --bs-body-bg: var(--crm-canvas);
  --bs-body-color: var(--crm-ink);
  --bs-emphasis-color: var(--crm-ink);
  --bs-heading-color: var(--crm-ink);
  --bs-headings-color: var(--crm-ink);
  --bs-secondary-color: var(--crm-muted);
  --bs-tertiary-color: var(--crm-subtle);
  --bs-secondary-bg: var(--crm-surface);
  --bs-tertiary-bg: var(--crm-surface-2);
  --bs-border-color: var(--crm-line);
  --bs-border-color-translucent: var(--crm-line);
  --bs-border-radius: var(--crm-radius-sm);
  --bs-border-radius-sm: var(--crm-radius-xs);
  --bs-border-radius-lg: var(--crm-radius);
  --bs-border-radius-xl: var(--crm-radius-lg);
  --bs-link-color: var(--crm-primary);
  --bs-link-hover-color: var(--crm-primary-hover);
  --bs-input-border-color: var(--crm-line-strong);
  --bs-input-focus-border-color: var(--crm-primary);
  --bs-primary: var(--crm-primary);
  --bs-primary-rgb: 37, 99, 235;
  --bs-primary-text-emphasis: var(--crm-primary-ink);
  --bs-primary-bg-subtle: var(--crm-primary-soft);
  --bs-primary-border-subtle: var(--crm-primary-soft-2);
  --bs-success: var(--crm-success);
  --bs-success-rgb: 5, 150, 105;
  --bs-success-text-emphasis: var(--crm-success-ink);
  --bs-success-bg-subtle: var(--crm-success-soft);
  --bs-success-border-subtle: var(--crm-success-line);
  --bs-warning: var(--crm-warning);
  --bs-warning-rgb: 217, 119, 6;
  --bs-warning-text-emphasis: var(--crm-warning-ink);
  --bs-warning-bg-subtle: var(--crm-warning-soft);
  --bs-warning-border-subtle: var(--crm-warning-line);
  --bs-danger: var(--crm-danger);
  --bs-danger-rgb: 220, 38, 38;
  --bs-danger-text-emphasis: var(--crm-danger-ink);
  --bs-danger-bg-subtle: var(--crm-danger-soft);
  --bs-danger-border-subtle: var(--crm-danger-line);
  --bs-info: var(--crm-info);
  --bs-info-rgb: 2, 132, 199;
  --bs-info-text-emphasis: var(--crm-info-ink);
  --bs-info-bg-subtle: var(--crm-info-soft);
  --bs-info-border-subtle: var(--crm-info-line);
  --bs-secondary-text-emphasis: var(--crm-muted);
  --bs-secondary-bg-subtle: var(--crm-soft);
  --bs-secondary-border-subtle: var(--crm-line);
  --bs-light-bg-subtle: var(--crm-surface-2);
  --bs-light-text-emphasis: var(--crm-ink);
  --bs-dark-text-emphasis: var(--crm-ink);
  --bs-form-valid-border-color: var(--crm-success);
  --bs-form-invalid-border-color: var(--crm-danger);
  --bs-form-invalid-color: var(--crm-danger-ink);
  --bs-box-shadow-sm: var(--crm-shadow-sm);
  --bs-box-shadow: var(--crm-shadow);
  --bs-box-shadow-lg: var(--crm-shadow-lg);
  --bs-card-bg: var(--crm-surface);
}
html[data-bs-theme="dark"] {
  --bs-primary-rgb: 59, 130, 246;
  --bs-success-rgb: 16, 185, 129;
  --bs-warning-rgb: 245, 158, 11;
  --bs-danger-rgb: 239, 68, 68;
  --bs-info-rgb: 56, 189, 248;
  --bs-body-bg-rgb: 12, 19, 34;
  --bs-secondary-bg-rgb: 19, 28, 46;
  --bs-tertiary-bg-rgb: 23, 34, 54;
}

/* 3. ALIAS DE PALETAS HEREDADAS ---------------------------------------------
   Cada módulo nació con su propia paleta (--p-*, --tp-*, --aa-*, ...). Se
   conservan los nombres para no tocar su marcado, pero todos apuntan aquí. */
html[data-bs-theme] :is(:root, body, .perfil-page, .owner-page, .files-page, .usuarios-page,
  .report-pro-page, .tareas-page, .modal-redesign, .imgviewer-modal, .setup-wrap) {
  --p-brand: var(--crm-primary) !important;
  --p-brand-2: var(--crm-primary-hover) !important;
  --p-brand-3: var(--crm-primary-ink) !important;
  --p-brand-050: var(--crm-primary-soft) !important;
  --p-brand-100: var(--crm-primary-soft-2) !important;
  --p-glow: var(--crm-focus-ring) !important;
  --p-ink: var(--crm-ink);
  --p-ink-2: var(--crm-ink);
  --p-muted: var(--crm-muted);
  --p-border: var(--crm-line);
  --p-border-2: var(--crm-line-strong);
  --p-bg: var(--crm-surface);
  --p-soft: var(--crm-surface-2);
  --p-ok: var(--crm-success);
  --p-ok-100: var(--crm-success-soft);
  --p-warn: var(--crm-warning);
  --p-warn-100: var(--crm-warning-soft);
  --p-danger: var(--crm-danger);
  --p-danger-100: var(--crm-danger-soft);
  --p-info: var(--crm-info);
  --p-r-sm: var(--crm-radius-sm);
  --p-r-md: var(--crm-radius);
  --p-r-lg: var(--crm-radius);
  --p-r-xl: var(--crm-radius-lg);
  --p-sh-sm: var(--crm-shadow-sm);
  --p-sh-md: var(--crm-shadow);
  --p-sh-lg: var(--crm-shadow-lg);

  --tp-brand: var(--crm-primary) !important;
  --tp-brand-2: var(--crm-primary-hover) !important;
  --tp-brand-3: var(--crm-primary-ink) !important;
  --tp-brand-050: var(--crm-primary-soft) !important;
  --tp-brand-100: var(--crm-primary-soft-2) !important;
  --tp-glow: var(--crm-focus-ring);
  --tp-ink: var(--crm-ink);
  --tp-ink-2: var(--crm-ink);
  --tp-muted: var(--crm-muted);
  --tp-border: var(--crm-line);
  --tp-border-2: var(--crm-line-strong);
  --tp-bg: var(--crm-surface);
  --tp-soft: var(--crm-surface-2);
  --tp-ok: var(--crm-success);
  --tp-warn: var(--crm-warning);
  --tp-danger: var(--crm-danger);
  --tp-info: var(--crm-info);
  --tp-radius-md: var(--crm-radius);
  --tp-radius-lg: var(--crm-radius);
  --tp-radius-xl: var(--crm-radius-lg);
  --tp-shadow-sm: var(--crm-shadow-sm);
  --tp-shadow-md: var(--crm-shadow);
  --tp-shadow-lg: var(--crm-shadow-lg);

  /* Tareas (tablero / lista) */
  --surface-0: var(--crm-surface);
  --surface-1: var(--crm-surface-2);
  --surface-2: var(--crm-soft);
  --border: var(--crm-line);
  --muted: var(--crm-muted);
  --paper-bg: var(--crm-surface);
  --shadow-1: var(--crm-shadow);
  --shadow-2: var(--crm-shadow-lg);
  --line-color: var(--crm-line);
  --aa-bg: var(--crm-canvas);
  --aa-panel: var(--crm-surface);
  --aa-soft: var(--crm-surface-2);
  --aa-line: var(--crm-line);
  --aa-line-2: var(--crm-line-strong);
  --aa-text: var(--crm-ink);
  --aa-muted: var(--crm-muted);
  --aa-primary: var(--crm-primary);
  --aa-green: var(--crm-success);
  --aa-red: var(--crm-danger);
  --aa-yellow: var(--crm-warning);
  --aa-radius: var(--crm-radius);
  --aa-radius-lg: var(--crm-radius-lg);

  /* Reportes de leads (DataTables / select2) */
  --report-ui-bg: var(--crm-surface);
  --report-ui-bg-hover: var(--crm-surface-2);
  --report-ui-border: var(--crm-line-strong);
  --report-ui-head: var(--crm-surface-2);
  --report-ui-menu-bg: var(--crm-surface);
  --report-ui-muted: var(--crm-muted);
  --report-ui-option-active: var(--crm-primary-soft);
  --report-ui-option-bg: var(--crm-surface);
  --report-ui-option-hover: var(--crm-surface-2);
  --report-ui-text: var(--crm-ink);
  --report-ui-shadow: var(--crm-shadow-lg);
  --report-btn-bg: var(--crm-surface);
  --report-btn-hover-bg: var(--crm-surface-2);
  --report-btn-text: var(--crm-ink);

  /* Agenda */
  --res-blue: var(--crm-primary);
  --res-ink: var(--crm-ink);
  --res-muted: var(--crm-muted);
}
html[data-bs-theme] .tasks-calendar-shell {
  --tc-bg: var(--crm-surface);
  --tc-surface: var(--crm-surface-2);
  --tc-hover: var(--crm-soft);
  --tc-line: var(--crm-line);
  --tc-text: var(--crm-ink);
  --tc-muted: var(--crm-muted);
  --tc-today: var(--crm-primary-soft);
  --tc-high-accent: var(--crm-danger);
  --tc-high-bg: var(--crm-danger-soft);
  --tc-high-text: var(--crm-danger-ink);
  --tc-medium-accent: var(--crm-primary);
  --tc-medium-bg: var(--crm-primary-soft);
  --tc-medium-text: var(--crm-primary-ink);
  --tc-low-accent: var(--crm-success);
  --tc-low-bg: var(--crm-success-soft);
  --tc-low-text: var(--crm-success-ink);
}

/* 4. BASE ------------------------------------------------------------------ */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--crm-font);
  color: var(--crm-ink);
  background-color: var(--crm-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html[data-bs-theme] body { background: var(--crm-canvas); color: var(--crm-ink); }
body :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) { color: var(--crm-ink); font-family: var(--crm-font); letter-spacing: -.01em; }
body .page-content :is(h1, .h1) { font-size: 1.5rem; font-weight: 700; }
body .page-content :is(h2, .h2) { font-size: 1.25rem; font-weight: 700; }
body .page-content :is(h3, .h3) { font-size: 1.1rem; font-weight: 650; }
body .page-content :is(h4, .h4) { font-size: 1rem; font-weight: 650; }
body .page-content :is(h5, .h5) { font-size: .95rem; font-weight: 650; }
body .page-content :is(h6, .h6) { font-size: .875rem; font-weight: 650; }
body .page-content { color: var(--crm-ink); }
html[data-bs-theme] body :is(.text-muted, .text-secondary, .text-body-secondary) { color: var(--crm-muted) !important; }
html[data-bs-theme] body :is(.text-dark, .text-body, .text-body-emphasis, .text-gray-800, .text-gray-900) { color: var(--crm-ink) !important; }
html[data-bs-theme] body .text-primary { color: var(--crm-primary) !important; }
html[data-bs-theme] body .text-success { color: var(--crm-success-ink) !important; }
html[data-bs-theme] body .text-danger { color: var(--crm-danger-ink) !important; }
html[data-bs-theme] body .text-warning { color: var(--crm-warning-ink) !important; }
html[data-bs-theme] body .text-info { color: var(--crm-info-ink) !important; }
html[data-bs-theme] body :is(.bg-white, .bg-body, .bg-body-secondary) { background-color: var(--crm-surface) !important; }
html[data-bs-theme] body :is(.bg-light, .bg-body-tertiary) { background-color: var(--crm-surface-2) !important; }
html[data-bs-theme] body .bg-primary-subtle { background-color: var(--crm-primary-soft) !important; }
html[data-bs-theme] body .bg-success-subtle { background-color: var(--crm-success-soft) !important; }
html[data-bs-theme] body .bg-warning-subtle { background-color: var(--crm-warning-soft) !important; }
html[data-bs-theme] body .bg-danger-subtle { background-color: var(--crm-danger-soft) !important; }
html[data-bs-theme] body .bg-info-subtle { background-color: var(--crm-info-soft) !important; }
html[data-bs-theme] body .bg-secondary-subtle { background-color: var(--crm-soft) !important; }
html[data-bs-theme] body .border:not([class*="border-primary"]):not([class*="border-success"]):not([class*="border-danger"]):not([class*="border-warning"]):not([class*="border-info"]) { border-color: var(--crm-line) !important; }
body a { color: var(--crm-primary); }
body a:hover { color: var(--crm-primary-hover); }
body .page-content a:not(.btn):not(.nav-link):not(.dropdown-item):not(.list-group-item) { text-decoration-thickness: 1px; text-underline-offset: 2px; }
body hr { border-color: var(--crm-line); opacity: 1; }
body ::selection { background: var(--crm-primary-soft-2); color: var(--crm-ink); }
body :is(button, a, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--crm-primary); outline-offset: 2px; }
body .swal2-actions > button:focus, body .swal2-actions > button:focus-visible { outline: 0 !important; box-shadow: var(--crm-focus-ring) !important; }
body code { color: var(--crm-danger-ink); background: var(--crm-soft); padding: .1rem .35rem; border-radius: var(--crm-radius-xs); font-size: .85em; }
body .small, body small { font-size: .8125rem; }
body * { scrollbar-color: var(--crm-line-strong) transparent; }

/* 5. ESTRUCTURA ------------------------------------------------------------ */
/* Sidebar */
body .app-sidebar {
  background: linear-gradient(180deg, #1d4ed8 0%, #1e3a8a 70%, #164e63 100%) !important;
  border-right: 0 !important;
}
html[data-bs-theme="dark"] body .app-sidebar { background: linear-gradient(180deg, #13245a 0%, #0f1a3a 70%, #0b2a33 100%) !important; }
body .app-sidebar .logo-box { background: transparent !important; }
body .app-sidebar .menu-title { color: rgb(255 255 255 / 60%) !important; font-size: .68rem; font-weight: 700; letter-spacing: .09em; }
body .app-sidebar .nav-link { border-radius: var(--crm-radius-sm); margin-inline: .5rem; color: rgb(255 255 255 / 86%) !important; transition: background .15s ease; }
body .app-sidebar .nav-link:hover { background: rgb(255 255 255 / 10%) !important; color: #fff !important; }
body .app-sidebar .nav-link.active,
body .app-sidebar .nav-item.active > .nav-link { background: rgb(255 255 255 / 16%) !important; color: #fff !important; box-shadow: inset 3px 0 0 #7dd3fc; }
body .app-sidebar .nav-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; color: inherit !important; }
body .app-sidebar .nav-icon .bi { font-size: 1.05rem; }

/* Topbar */
body .app-topbar {
  background: color-mix(in srgb, var(--crm-surface) 92%, transparent) !important;
  border-bottom: 1px solid var(--crm-line);
  box-shadow: none;
  backdrop-filter: saturate(160%) blur(8px);
}
body .app-topbar .topbar-button { border-radius: var(--crm-radius-sm); color: var(--crm-muted); }
body .app-topbar .topbar-button:hover { background: var(--crm-soft); color: var(--crm-ink); }
body .app-topbar :is(.app-search .form-control, .topbar-search input) { background: var(--crm-surface-2); border-color: var(--crm-line); border-radius: var(--crm-radius-pill); }
body .crm-view-scale { background: var(--crm-surface-2); border: 1px solid var(--crm-line); border-radius: var(--crm-radius-sm); }
body .crm-view-scale button { color: var(--crm-ink); border-radius: var(--crm-radius-xs); }
body .crm-view-scale button:is(:hover, :focus-visible) { color: var(--crm-primary); background: var(--crm-primary-soft); }
body .crm-view-scale .crm-view-scale__value { color: var(--crm-muted); }
html[data-bs-theme] body .app-topbar .user-chip .dropdown-menu { --bs-dropdown-bg: var(--crm-surface); --bs-dropdown-color: var(--crm-ink); --bs-dropdown-border-color: var(--crm-line); }

/* Página: un solo margen lateral y una sola separación entre bloques. */
body .page-content { padding: var(--crm-gutter); }
body .page-content :is(.container-fluid, .container-xxl, .container-xl) { padding-inline: 0 !important; max-width: 100%; }
body .page-content div[id]:empty:is(.mb-1, .mb-2, .mb-3, .mb-4, .my-2, .my-3) { display: none; }
body .page-content > :is(.container-fluid, .main-content, [class$="-page"], [class*="-page "]):not(.crm-page-header),
body .page-content > :is(.container-fluid, .main-content) > :is(.container-fluid, .main-content, [class$="-page"], [class*="-page "]):not(.crm-page-header):first-child { padding-top: 0 !important; margin-top: 0 !important; }
body .page-content > .container-fluid > .container-fluid { margin-top: 0 !important; }
body .page-content .row { --bs-gutter-x: var(--crm-gap); }
body .page-content .row.g-2 { --bs-gutter-x: .5rem; --bs-gutter-y: .5rem; }
body .page-content .row.g-3 { --bs-gutter-x: .75rem; --bs-gutter-y: .75rem; }
body .page-content .row.g-4 { --bs-gutter-x: var(--crm-gap); --bs-gutter-y: var(--crm-gap); }
body .page-content > .alert { margin: 0 0 var(--crm-gap) !important; }
body .animated-stars { display: none !important; }

/* 6. ENCABEZADO DE MÓDULO -------------------------------------------------- */
body .crm-page-header {
  position: relative; isolation: isolate; display: grid;
  grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 1.5rem;
  padding: 1.25rem 1.5rem !important; margin: 0 0 var(--crm-gap) !important;
  border: 0; border-radius: var(--crm-radius-lg);
  color: #fff; background: var(--crm-gradient-brand);
  box-shadow: 0 6px 20px rgb(30 64 175 / 16%); overflow: hidden;
}
html[data-bs-theme="dark"] body .crm-page-header { box-shadow: 0 1px 0 rgb(255 255 255 / 6%) inset, var(--crm-shadow); }
body .crm-page-header::after {
  content: ''; position: absolute; z-index: -1; width: 18rem; height: 18rem;
  top: -11rem; right: 4%; border-radius: 50%; border: 2.75rem solid rgb(255 255 255 / 5%); pointer-events: none;
}
.crm-page-header__main { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.crm-page-header__copy { min-width: 0; }
.crm-page-header__icon {
  display: grid; place-items: center; width: 3rem; height: 3rem; flex: 0 0 3rem;
  border: 1px solid rgb(255 255 255 / 24%); border-radius: var(--crm-radius);
  background: rgb(255 255 255 / 14%); font-size: 1.35rem; color: #fff;
}
.crm-page-header__eyebrow { display: block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: rgb(255 255 255 / 78%); }
body .crm-page-header__title { margin: .15rem 0 .3rem; color: #fff !important; font-size: clamp(1.3rem, 1.05rem + .55vw, 1.75rem); line-height: 1.2; font-weight: 700; letter-spacing: -.02em; overflow-wrap: anywhere; }
.crm-page-header__subtitle { margin: 0; max-width: 72ch; font-size: .85rem; line-height: 1.5; color: rgb(255 255 255 / 86%); }
.crm-page-header__actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .5rem; min-width: 0; max-width: 36rem; }
.crm-page-header__breadcrumb { grid-column: 1 / -1; display: flex; align-items: center; gap: .5rem; padding-top: .75rem; border-top: 1px solid rgb(255 255 255 / 16%); font-size: .75rem; color: rgb(255 255 255 / 78%); }
.crm-page-header__breadcrumb a { display: inline-flex; gap: .4rem; align-items: center; color: #fff !important; text-decoration: none; }
.crm-page-header__breadcrumb > .bi { font-size: .62rem; }
.crm-page-header__breadcrumb [aria-current] { color: #fff; font-weight: 600; }
.crm-page-header .crm-header-stats { display: flex; gap: .5rem; flex-wrap: wrap; }
body .crm-page-header .stat-card { min-width: 4.5rem; border: 1px solid rgb(255 255 255 / 22%) !important; border-radius: var(--crm-radius-sm) !important; padding: .45rem .8rem !important; text-align: center; background: rgb(255 255 255 / 12%) !important; color: #fff !important; box-shadow: none !important; }
body .crm-page-header .stat-card :is(.stat-card__value, i, .bi) { color: #fff !important; font-size: 1.1rem; font-weight: 700; }
body .crm-page-header .stat-card .stat-card__label { color: rgb(255 255 255 / 80%) !important; font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; }
html body .crm-page-header :is(.btn, .btn-pro, .qa-btn) { min-height: var(--crm-control-h); border-radius: var(--crm-radius-sm) !important; padding: .5rem .9rem; font-weight: 600; font-size: .85rem; box-shadow: none !important; }
html body .crm-page-header :is(.btn-light, .btn-primary, .btn-white, .btn-pro--primary, .qa-btn:not(.qa-btn--ghost)) { background: #fff !important; color: #1e3a8a !important; border: 1px solid #fff !important; }
html body .crm-page-header :is(.btn-outline-light, .btn-outline-primary, .btn-outline-secondary, .btn-secondary, .btn-pro--ghost, .qa-btn--ghost) { color: #fff !important; background: rgb(255 255 255 / 10%) !important; border: 1px solid rgb(255 255 255 / 38%) !important; }
html body .crm-page-header :is(.btn-outline-light, .btn-outline-primary, .btn-outline-secondary, .btn-secondary, .btn-pro--ghost, .qa-btn--ghost):hover { background: rgb(255 255 255 / 20%) !important; }
html body .crm-page-header :is(input, .form-control) { background: rgb(255 255 255 / 96%) !important; color: #16233b !important; border-color: transparent !important; }
.crm-page-header__avatar .perfil-hero__avatar { width: 3.25rem; height: 3.25rem; margin: 0; }
.crm-page-header__avatar .perfil-hero__img { width: 3.25rem; height: 3.25rem; border-radius: var(--crm-radius); }
.crm-page-header__avatar .perfil-hero__inicial { font-size: 1.45rem; }
.crm-page-header__avatar .perfil-hero__camera { width: 1.55rem; height: 1.55rem; font-size: .75rem; }
/* Héroes antiguos que aún existan: mismo aspecto que el encabezado único. */
body :is(.ws-hero, .owner-hero, .users-hero, .files-hero, .tasks-hero, .report-hero, .perfil-hero, .setup-hero) {
  border-radius: var(--crm-radius-lg) !important; background: var(--crm-gradient-brand) !important;
  box-shadow: 0 6px 20px rgb(30 64 175 / 16%) !important; color: #fff;
}

/* 7a. SUPERFICIES ---------------------------------------------------------- */
body .page-content .card,
body :is(.page-content, .modal, .offcanvas) :is(.card-pro, .res-card, .upload-card, .report-card, .filters-card, .filtros-card,
  .report-filters-card, .task-section-card, .task-side-card, .side-card, .detail-panel, .soft-panel, .human-section, .human-filters,
  .ng-recontact-card, .ng-assistant-card, .ng-catalog-card, .ng-wa-panel, .owner-gate__card, .setup-card, .health-card,
  .reporte-card, .tasks-calendar-shell, .reservas-shell, .res-master, .producto-panel-shell, .interactions-table-wrap) {
  --bs-card-bg: var(--crm-surface);
  --bs-card-border-color: var(--crm-line);
  --bs-card-border-radius: var(--crm-radius);
  --bs-card-inner-border-radius: calc(var(--crm-radius) - 1px);
  --bs-card-cap-bg: transparent;
  --bs-card-spacer-x: var(--crm-card-pad);
  --bs-card-spacer-y: var(--crm-card-pad);
  --bs-card-cap-padding-x: var(--crm-card-pad);
  --bs-card-cap-padding-y: .9rem;
  background: var(--crm-surface) !important;
  border: 1px solid var(--crm-line) !important;
  border-radius: var(--crm-radius) !important;
  box-shadow: var(--crm-shadow-sm) !important;
  color: var(--crm-ink);
}
body .page-content .card { margin-bottom: var(--crm-gap); transition: border-color .15s ease, box-shadow .15s ease, background-color .2s ease; }
body .page-content .card .card { box-shadow: none !important; }
body .page-content :is(.card.shadow, .card.shadow-sm, .card.shadow-lg) { box-shadow: var(--crm-shadow-sm) !important; }
body :is(.page-content, .modal) :is(.card-header, .card-pro__head, .res-card__head, .task-section-card__head, .human-section__head, .detail-panel__head, .tasks-calendar-side__head) {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .9rem var(--crm-card-pad) !important;
  background: transparent !important;
  border-bottom: 1px solid var(--crm-line) !important;
  color: var(--crm-ink);
}
body .page-content .card-header:first-child { border-radius: calc(var(--crm-radius) - 1px) calc(var(--crm-radius) - 1px) 0 0 !important; }
body .page-content .card-header > :is(h1, h2, h3, h4, h5, h6, .h5, .h6),
body :is(.page-content, .modal) :is(.card-pro__title, .task-section-title, .human-section__head h2, .human-section__head h3, .detail-title, .summary-title) {
  margin: 0; font-size: .95rem !important; font-weight: 650 !important; color: var(--crm-ink) !important; letter-spacing: -.005em; text-transform: none;
}
body .page-content .card-header > :is(h6, .h6).text-primary { color: var(--crm-ink) !important; }
body .page-content .card-header :is(h1, h2, h3, h4, h5, h6) > :is(i, .bi, .fas, .fa) { color: var(--crm-primary); margin-right: .35rem; }
body :is(.page-content, .modal) :is(.card-pro__sub, .task-section-description, .human-section__head p) { margin: .1rem 0 0; color: var(--crm-muted) !important; font-size: .8rem; }
body .page-content :is(.card-body, .card-pro__body:not(.p-0)) { padding: var(--crm-card-pad); }
body .page-content .card-footer { background: var(--crm-surface-2); border-top: 1px solid var(--crm-line); padding: .85rem var(--crm-card-pad); }
/* Icono de sección: un solo tamaño y un solo tono. */
body :is(.page-content, .modal) :is(.card-pro__icon, .task-section-icon, .filtros-icon, .res-template-card__icon, .ng-recontact-icon, .quick-tip__icon, .owner-gate__icon, .help-item__icon, .audit-row__icon) {
  display: inline-grid; place-items: center; flex: 0 0 2.25rem; width: 2.25rem; height: 2.25rem;
  border-radius: var(--crm-radius-sm) !important; font-size: 1rem;
  background: var(--crm-primary-soft) !important; color: var(--crm-primary) !important;
  box-shadow: none !important; border: 0 !important;
}
body :is(.page-content, .modal) :is(.card-pro__icon--danger, .health-card__icon--critical) { background: var(--crm-danger-soft) !important; color: var(--crm-danger) !important; }
body :is(.page-content, .modal) :is(.card-pro__icon--warn, .card-pro__icon--lock, .health-card__icon--warning) { background: var(--crm-warning-soft) !important; color: var(--crm-warning) !important; }
body :is(.page-content, .modal) .health-card__icon--ok { background: var(--crm-success-soft) !important; color: var(--crm-success) !important; }
body .page-content .owner-gate__icon { width: 3.25rem; height: 3.25rem; flex-basis: 3.25rem; font-size: 1.4rem; border-radius: var(--crm-radius) !important; }
body .page-content .card-pro--soft { background: var(--crm-surface-2) !important; }

/* 7b. KPI / MÉTRICAS ------------------------------------------------------
   Patrón único: etiqueta corta (mayúsculas), valor grande y nota opcional.
   El icono, si existe, va a la izquierda en un recuadro suave. */
body .page-content :is(.kpi-card, .res-stat, .ng-recontact-stat, .human-kpis > *, .metric-card) {
  position: relative; min-width: 0;
  background: var(--crm-surface) !important; background-image: none !important;
  border: 1px solid var(--crm-line) !important;
  border-radius: var(--crm-radius) !important;
  box-shadow: var(--crm-shadow-sm) !important;
  color: var(--crm-ink); text-align: left !important; overflow: hidden;
}
body .page-content :is(.res-stat, .ng-recontact-stat, .human-kpis > *, .metric-card, .kpi-card:where(:not(:has(> .card-body)))) {
  display: flex; align-items: center; gap: .85rem; padding: 1rem 1.1rem !important; min-height: 5rem;
}
body .page-content :is(.ng-recontact-stat, .human-kpis > *) { flex-direction: column; align-items: flex-start; justify-content: center; gap: .15rem; }
body .page-content .kpi-card { min-height: 0 !important; }
body .page-content .kpi-card > .card-body { padding: 1rem 1.1rem !important; display: flex; flex-direction: column; justify-content: center; gap: .15rem; }
body .page-content :is(.kpi-card, .kpi-card > .card-body, .res-stat, .ng-recontact-stat, .human-kpis > *)::before,
body .page-content :is(.kpi-card, .res-stat)::after { content: none !important; display: none !important; }
/* Etiqueta */
body .page-content :is(.kpi-card, .ng-recontact-stat, .human-kpis > *) :is(small.text-muted, small:first-child, .kpi-label, span:first-child:not([class*="icon"]):not(.badge)),
body .page-content .res-stat small {
  display: block; color: var(--crm-muted) !important; font-size: .7rem !important; font-weight: 650 !important;
  text-transform: uppercase; letter-spacing: .045em; line-height: 1.3; margin: 0;
}
/* Valor */
body .page-content :is(.kpi-card, .res-stat, .ng-recontact-stat, .human-kpis > *) :is(h3, h4, .h3, .h4, .h5, .h6, strong, .kpi-value, .stat-card__value) {
  color: var(--crm-ink) !important; font-weight: 700 !important; font-size: 1.4rem !important; line-height: 1.2 !important; letter-spacing: -.01em; margin: .1rem 0 0 !important;
}
body .page-content .kpi-card :is(.h6) { font-size: 1rem !important; }
/* Nota */
body .page-content :is(.kpi-card, .res-stat, .human-kpis > *) :is(.kpi-sub-label, .res-stat__sub, p, small + small, .small:not(:first-child)) {
  color: var(--crm-muted) !important; font-size: .75rem !important; font-weight: 400 !important; text-transform: none; letter-spacing: 0; margin: .15rem 0 0 !important; opacity: 1;
}
/* Icono */
body .page-content :is(.kpi-card .icon, .kpi-card [class*="icon"]:not(i):not(.bi), .res-stat__icon, .qs_icon) {
  display: inline-grid !important; place-items: center; flex: 0 0 2.5rem; width: 2.5rem !important; height: 2.5rem !important;
  border-radius: var(--crm-radius-sm) !important; font-size: 1.1rem !important;
  background: var(--crm-primary-soft) !important; color: var(--crm-primary) !important;
  box-shadow: none !important; border: 0 !important; background-image: none !important;
}

/* 7c. BOTONES ---------------------------------------------------------------
   Un botón principal (azul sólido), uno secundario (contorno neutro), éxito,
   peligro y enlace. Sin degradados ni brillos. */
body :is(.page-content, .modal, .offcanvas, .swal2-popup, .dropdown-menu, .app-topbar) :is(.btn, .btn-pro, .qa-btn, .btn-quick, .dt-button, .btn-primary-pro, .btn-ghost-pro, .tasks-hero__btn) {
  --bs-btn-border-radius: var(--crm-radius-sm);
  --bs-btn-font-weight: 600;
  --bs-btn-font-size: .85rem;
  --bs-btn-padding-x: .95rem;
  --bs-btn-padding-y: .5rem;
  --bs-btn-focus-box-shadow: var(--crm-focus-ring);
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: var(--crm-control-h);
  border-radius: var(--crm-radius-sm) !important;
  font-family: var(--crm-font);
  font-weight: 600; font-size: .85rem; line-height: 1.2;
  background-image: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transform: none !important;
  white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
body :is(.page-content, .modal, .offcanvas) :is(.btn-sm, .btn-pro--small, .btn-group-sm > .btn) { --bs-btn-padding-x: .65rem; --bs-btn-padding-y: .3rem; min-height: var(--crm-control-h-sm); font-size: .8rem; }
body :is(.page-content, .modal, .offcanvas) .btn-lg { min-height: 2.875rem; font-size: .95rem; }
body :is(.page-content, .modal, .offcanvas) :is(.btn-icon, .btn.btn-icon, .ng-icon-btn, .modal-icon-btn) { min-width: var(--crm-control-h); padding-inline: .5rem; }
body :is(.page-content, .modal, .offcanvas) :is(.btn, .btn-pro) :is(i, .bi, .fa, .fas, .far, iconify-icon) { font-size: 1em; line-height: 1; flex-shrink: 0; }
body :is(.page-content, .modal, .offcanvas) .btn:disabled, body :is(.page-content, .modal, .offcanvas) .btn.disabled { opacity: .55; }

/* Principal */
body :is(.page-content, .modal, .offcanvas, .dropdown-menu) :is(.btn-primary, .btn-pro--primary, .btn-primary-pro, .qa-btn:not(.qa-btn--ghost), .btn-gradient-purple, .btn-quick.active, .btn-info, .btn-primary-soft.active) {
  --bs-btn-color: var(--crm-on-primary); --bs-btn-bg: var(--crm-primary); --bs-btn-border-color: var(--crm-primary);
  --bs-btn-hover-color: var(--crm-on-primary); --bs-btn-hover-bg: var(--crm-primary-hover); --bs-btn-hover-border-color: var(--crm-primary-hover);
  --bs-btn-active-color: var(--crm-on-primary); --bs-btn-active-bg: var(--crm-primary-active); --bs-btn-active-border-color: var(--crm-primary-active);
  --bs-btn-disabled-bg: var(--crm-primary); --bs-btn-disabled-border-color: var(--crm-primary);
  background-color: var(--crm-primary) !important; border: 1px solid var(--crm-primary) !important; color: var(--crm-on-primary) !important;
}
body :is(.page-content, .modal, .offcanvas, .dropdown-menu) :is(.btn-primary, .btn-pro--primary, .btn-primary-pro, .qa-btn:not(.qa-btn--ghost), .btn-gradient-purple, .btn-info):is(:hover, :focus-visible) {
  background-color: var(--crm-primary-hover) !important; border-color: var(--crm-primary-hover) !important; color: var(--crm-on-primary) !important;
}
/* Secundario (contorno neutro) */
body :is(.page-content, .modal, .offcanvas) :is(.btn-secondary, .btn-light, .btn-white, .btn-outline-secondary, .btn-outline-primary, .btn-outline-dark, .btn-outline-info,
  .btn-outline-light, .btn-pro--ghost, .btn-ghost-pro, .qa-btn--ghost, .btn-quick:not(.active), .dt-button, .btn-primary-soft:not(.active), .btn-pro:not([class*="btn-pro--"])) {
  --bs-btn-color: var(--crm-ink); --bs-btn-bg: var(--crm-surface); --bs-btn-border-color: var(--crm-line-strong);
  --bs-btn-hover-color: var(--crm-ink); --bs-btn-hover-bg: var(--crm-surface-2); --bs-btn-hover-border-color: var(--crm-line-strong);
  --bs-btn-active-color: var(--crm-primary-ink); --bs-btn-active-bg: var(--crm-primary-soft); --bs-btn-active-border-color: var(--crm-primary-soft-2);
  background-color: var(--crm-surface) !important; border: 1px solid var(--crm-line-strong) !important; color: var(--crm-ink) !important;
}
body :is(.page-content, .modal, .offcanvas) :is(.btn-secondary, .btn-light, .btn-white, .btn-outline-secondary, .btn-outline-primary, .btn-outline-dark, .btn-outline-info,
  .btn-outline-light, .btn-pro--ghost, .btn-ghost-pro, .qa-btn--ghost, .btn-quick:not(.active), .dt-button, .btn-primary-soft:not(.active), .btn-pro:not([class*="btn-pro--"])):hover {
  background-color: var(--crm-surface-2) !important; border-color: var(--crm-subtle) !important; color: var(--crm-ink) !important;
}
body :is(.page-content, .modal, .offcanvas) :is(.btn-outline-primary, .btn-outline-info) { color: var(--crm-primary-ink) !important; }
body :is(.page-content, .modal, .offcanvas) :is(.btn-check:checked + .btn, .btn.active:not(.btn-primary):not(.btn-success):not(.btn-danger), .btn-group > .btn.active) {
  background-color: var(--crm-primary-soft) !important; border-color: var(--crm-primary-soft-2) !important; color: var(--crm-primary-ink) !important;
}
/* Éxito */
body :is(.page-content, .modal, .offcanvas) :is(.btn-success, .btn-gradient-green) {
  --bs-btn-bg: var(--crm-success); --bs-btn-border-color: var(--crm-success); --bs-btn-hover-bg: var(--crm-success-hover); --bs-btn-hover-border-color: var(--crm-success-hover);
  background-color: var(--crm-success) !important; border: 1px solid var(--crm-success) !important; color: #fff !important;
}
body :is(.page-content, .modal, .offcanvas) :is(.btn-success, .btn-gradient-green):hover { background-color: var(--crm-success-hover) !important; border-color: var(--crm-success-hover) !important; }
body :is(.page-content, .modal, .offcanvas) .btn-outline-success { background-color: var(--crm-surface) !important; border: 1px solid var(--crm-success-line) !important; color: var(--crm-success-ink) !important; }
body :is(.page-content, .modal, .offcanvas) .btn-outline-success:hover { background-color: var(--crm-success-soft) !important; }
/* Peligro */
body :is(.page-content, .modal, .offcanvas) :is(.btn-danger, .btn-pro--danger) {
  --bs-btn-bg: var(--crm-danger); --bs-btn-border-color: var(--crm-danger); --bs-btn-hover-bg: var(--crm-danger-hover); --bs-btn-hover-border-color: var(--crm-danger-hover);
  background-color: var(--crm-danger) !important; border: 1px solid var(--crm-danger) !important; color: #fff !important;
}
body :is(.page-content, .modal, .offcanvas) :is(.btn-danger, .btn-pro--danger):hover { background-color: var(--crm-danger-hover) !important; border-color: var(--crm-danger-hover) !important; }
body :is(.page-content, .modal, .offcanvas) :is(.btn-outline-danger, .btn-pro--ghost-danger) { background-color: var(--crm-surface) !important; border: 1px solid var(--crm-danger-line) !important; color: var(--crm-danger-ink) !important; }
body :is(.page-content, .modal, .offcanvas) :is(.btn-outline-danger, .btn-pro--ghost-danger):hover { background-color: var(--crm-danger-soft) !important; }
/* Advertencia */
body :is(.page-content, .modal, .offcanvas) .btn-warning { background-color: var(--crm-warning) !important; border: 1px solid var(--crm-warning) !important; color: #fff !important; }
body :is(.page-content, .modal, .offcanvas) .btn-outline-warning { background-color: var(--crm-surface) !important; border: 1px solid var(--crm-warning-line) !important; color: var(--crm-warning-ink) !important; }
/* Acento (antes violeta/naranja): se usa el principal. */
body :is(.page-content, .modal, .offcanvas) .btn-pro--accent { background-color: var(--crm-primary) !important; border: 1px solid var(--crm-primary) !important; color: #fff !important; }
/* Enlace */
body :is(.page-content, .modal, .offcanvas) .btn-link { min-height: auto; padding-inline: .25rem; background: transparent !important; border-color: transparent !important; color: var(--crm-primary) !important; }
/* WhatsApp conserva su color de marca. */
body :is(.page-content, .modal) :is(.btn-whatsapp, .btn-wa) { background-color: #25d366 !important; border-color: #25d366 !important; color: #fff !important; }
.btn-close { filter: none; opacity: .6; }
html[data-bs-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

/* Barras de acciones */
body .page-content :is(.quick-actions-bar, .owner-toolbar, .agenda-toolbar, .report-table-toolbar, .active-filters-bar, .tabs-wrap) {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
  padding: .65rem; margin-bottom: var(--crm-gap);
  background: var(--crm-surface) !important; border: 1px solid var(--crm-line) !important;
  border-radius: var(--crm-radius) !important; box-shadow: var(--crm-shadow-sm) !important;
}
body .page-content :is(.active-filters-bar, .report-table-toolbar) { box-shadow: none !important; background: var(--crm-surface-2) !important; }

/* 8. FORMULARIOS ----------------------------------------------------------- */
body :is(.page-content, .modal, .offcanvas, .swal2-popup, .setup-wrap, .dropdown-menu) :is(.form-control, .form-select, .input-pro, .inp, .dataTables_filter input, .dataTables_length select, .select2-selection, .choices__inner, .flatpickr-input:not([type="hidden"])) {
  min-height: var(--crm-control-h);
  padding: .5rem .8rem;
  font-family: var(--crm-font);
  font-size: .875rem;
  color: var(--crm-ink) !important;
  background-color: var(--crm-surface) !important;
  border: 1px solid var(--crm-line-strong) !important;
  border-radius: var(--crm-radius-sm) !important;
  box-shadow: none !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
body :is(.page-content, .modal, .offcanvas, .setup-wrap) .form-select { padding-right: 2.25rem; background-position: right .75rem center; }
body :is(.page-content, .modal, .offcanvas, .swal2-popup, .setup-wrap) textarea:is(.form-control, .input-pro, .inp) { min-height: 5.5rem; }
body :is(.page-content, .modal, .offcanvas) :is(.form-control-sm, .form-select-sm) { min-height: var(--crm-control-h-sm); padding-block: .3rem; font-size: .8rem; }
body :is(.page-content, .modal, .offcanvas, .swal2-popup, .setup-wrap) :is(.form-control, .form-select, .input-pro, .inp, .choices__inner):focus,
body :is(.page-content, .modal, .offcanvas) .select2-container--focus .select2-selection {
  border-color: var(--crm-primary) !important; box-shadow: var(--crm-focus-ring) !important; outline: 0;
}
body :is(.page-content, .modal, .offcanvas, .setup-wrap) :is(.form-control, .form-select, .input-pro, .inp):is(:disabled, [readonly]) { background-color: var(--crm-surface-2) !important; color: var(--crm-muted) !important; }
body :is(.page-content, .modal, .offcanvas, .setup-wrap) ::placeholder { color: var(--crm-subtle) !important; opacity: 1; }
body :is(.page-content, .modal, .offcanvas, .setup-wrap) :is(.form-label, .lbl-pro, .lbl, .task-label, label.small) {
  display: inline-flex; align-items: center; gap: .35rem; flex-wrap: wrap;
  margin-bottom: .35rem; color: var(--crm-ink) !important; font-size: .8125rem; font-weight: 600; text-transform: none; letter-spacing: 0;
}
body :is(.page-content, .modal) :is(.form-label, .lbl-pro) > :is(i, .bi, .fas):first-child { color: var(--crm-muted) !important; font-size: .9em; }
body :is(.page-content, .modal, .offcanvas, .setup-wrap) :is(.form-text, .lbl-pro__hint, .invalid-feedback, .help) { font-size: .75rem; color: var(--crm-muted); }
body :is(.page-content, .modal) .invalid-feedback { color: var(--crm-danger-ink); }
body :is(.page-content, .modal) .req { color: var(--crm-danger); }
body :is(.page-content, .modal, .offcanvas) .input-group > :is(.form-control, .form-select):not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
body :is(.page-content, .modal, .offcanvas) .input-group > :is(.form-control, .form-select):not(:last-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
body :is(.page-content, .modal, .offcanvas) .input-group-text { min-height: var(--crm-control-h); background: var(--crm-surface-2); border: 1px solid var(--crm-line-strong); color: var(--crm-muted); font-size: .85rem; border-radius: var(--crm-radius-sm); }
body :is(.page-content, .modal, .offcanvas) .input-group > .btn { min-height: var(--crm-control-h); }
body :is(.page-content, .modal, .offcanvas, .swal2-popup) .form-check-input { border-color: var(--crm-line-strong); background-color: var(--crm-surface); }
body :is(.page-content, .modal, .offcanvas, .swal2-popup) .form-check-input:checked { background-color: var(--crm-primary); border-color: var(--crm-primary); }
body :is(.page-content, .modal, .offcanvas) .form-check-input:focus { box-shadow: var(--crm-focus-ring); border-color: var(--crm-primary); }
body :is(.page-content, .modal, .offcanvas) .form-check-label { color: var(--crm-ink); font-size: .85rem; }
body :is(.page-content, .modal, .offcanvas) input[type="file"].form-control { padding: .35rem .5rem; }
body :is(.page-content, .modal, .offcanvas) input[type="file"].form-control::file-selector-button {
  margin: -.1rem .6rem -.1rem -.2rem; padding: .35rem .75rem; border: 0; border-radius: var(--crm-radius-xs);
  background: var(--crm-soft); color: var(--crm-ink); font-weight: 600;
}
html[data-bs-theme="dark"] body :is(.page-content, .modal) input[type="date"]::-webkit-calendar-picker-indicator,
html[data-bs-theme="dark"] body :is(.page-content, .modal) input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(.85); }
/* select2 / choices */
body .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--crm-ink); line-height: 1.6; padding-left: 0; }
body .select2-container .select2-selection--single { height: var(--crm-control-h); display: flex; align-items: center; }
body .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; }
body :is(.select2-dropdown, .choices__list--dropdown, .choices__list[aria-expanded]) { background: var(--crm-surface) !important; border-color: var(--crm-line) !important; color: var(--crm-ink); border-radius: var(--crm-radius-sm) !important; box-shadow: var(--crm-shadow-lg); }
body :is(.select2-results__option--highlighted, .choices__item--selectable.is-highlighted) { background: var(--crm-primary-soft) !important; color: var(--crm-primary-ink) !important; }
body .choices__list--multiple .choices__item { background: var(--crm-primary-soft) !important; border-color: var(--crm-primary-soft-2) !important; color: var(--crm-primary-ink) !important; border-radius: var(--crm-radius-pill) !important; }
/* Campos con mostrar/ocultar contraseña */
body :is(.page-content, .modal) .pw-wrap .pw-toggle { color: var(--crm-muted); background: transparent; border: 0; }

/* 9. TABLAS Y DATATABLES --------------------------------------------------- */
body :is(.page-content, .modal) .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--crm-ink);
  --bs-table-border-color: var(--crm-line);
  --bs-table-striped-bg: var(--crm-surface-2);
  --bs-table-hover-bg: var(--crm-surface-2);
  --bs-table-hover-color: var(--crm-ink);
  --bs-table-active-bg: var(--crm-primary-soft);
  color: var(--crm-ink);
  margin-bottom: 0;
  font-size: .85rem;
  border-color: var(--crm-line);
}
body :is(.page-content, .modal) .table > :not(caption) > * > * { padding: .7rem .9rem; border-bottom-color: var(--crm-line); background-color: transparent; color: inherit; vertical-align: middle; }
body :is(.page-content, .modal) .table :is(thead th, thead td, th.sorting, th.sorting_asc, th.sorting_desc) {
  background: var(--crm-surface-2) !important;
  color: var(--crm-muted) !important;
  font-size: .72rem !important; font-weight: 650 !important;
  text-transform: uppercase; letter-spacing: .045em;
  white-space: nowrap;
  border-bottom: 1px solid var(--crm-line) !important;
  border-top: 0 !important;
}
body :is(.page-content, .modal) .table :is(thead.table-light, thead.thead-light, .table-light) { --bs-table-bg: var(--crm-surface-2); --bs-table-color: var(--crm-muted); }
body :is(.page-content, .modal) .table-bordered > :not(caption) > * > * { border-width: 0 0 1px; }
body :is(.page-content, .modal) .table-bordered { border: 0; }
body :is(.page-content, .modal) .table > tbody > tr:last-child > * { border-bottom: 0; }
body :is(.page-content, .modal) .table-hover > tbody > tr:hover > * { --bs-table-bg-state: var(--crm-surface-2); background-color: var(--crm-surface-2) !important; }
body .page-content :is(.table-responsive, .dataTables_wrapper, .dt-container, .table-wrap) { border-radius: var(--crm-radius-sm); }
body .page-content .card-body > .table-responsive:only-child { margin: calc(var(--crm-card-pad) * -1); width: auto; }
/* DataTables: buscador, tamaño, info y paginación con los mismos controles. */
body .page-content :is(.dataTables_wrapper, .dt-container) { color: var(--crm-ink); font-size: .85rem; }
body .page-content :is(.dataTables_wrapper, .dt-container) > .row:first-child,
body .page-content .dataTables_wrapper .dt-top { margin-bottom: .75rem; row-gap: .5rem; align-items: center; }
body .page-content :is(.dataTables_filter, .dataTables_length, .dt-search, .dt-length) label { display: inline-flex; align-items: center; gap: .5rem; margin: 0; color: var(--crm-muted); font-size: .8rem; font-weight: 500; }
body .page-content :is(.dataTables_filter input, .dt-search input) { margin-left: 0 !important; min-width: 12rem; }
body .page-content :is(.dataTables_length select, .dt-length select) { width: auto; min-width: 4.5rem; }
body .page-content :is(.dataTables_info, .dt-info) { color: var(--crm-muted); font-size: .8rem; padding-top: .9rem !important; }
body .page-content :is(.dataTables_paginate, .dt-paging) { padding-top: .6rem !important; }
body :is(.page-content, .modal) .pagination { --bs-pagination-color: var(--crm-ink); --bs-pagination-bg: var(--crm-surface); --bs-pagination-border-color: var(--crm-line); --bs-pagination-hover-bg: var(--crm-surface-2); --bs-pagination-hover-color: var(--crm-ink); --bs-pagination-hover-border-color: var(--crm-line); --bs-pagination-active-bg: var(--crm-primary); --bs-pagination-active-border-color: var(--crm-primary); --bs-pagination-disabled-bg: var(--crm-surface); --bs-pagination-disabled-color: var(--crm-subtle); --bs-pagination-disabled-border-color: var(--crm-line); --bs-pagination-focus-box-shadow: var(--crm-focus-ring); gap: .25rem; margin: 0; }
body :is(.page-content, .modal) .pagination .page-link { border-radius: var(--crm-radius-sm) !important; min-width: 2.1rem; text-align: center; font-size: .8rem; font-weight: 600; }
body .page-content :is(.paginate_button, .dt-paging-button) { border-radius: var(--crm-radius-sm) !important; }
body .page-content .dt-buttons { display: inline-flex; flex-wrap: wrap; gap: .4rem; }
body .page-content .dt-buttons .btn-group { gap: .4rem; }
body .page-content table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before { background-color: var(--crm-primary); box-shadow: none; border: 0; }
body .page-content table.dataTable > tbody > tr.child ul.dtr-details > li { border-bottom-color: var(--crm-line); }

/* 10. INSIGNIAS, CHIPS Y PESTAÑAS ------------------------------------------ */
body :is(.page-content, .modal, .offcanvas) .badge { border-radius: var(--crm-radius-pill); font-weight: 600; font-size: .72rem; padding: .3em .65em; letter-spacing: .01em; }
body :is(.page-content, .modal, .offcanvas) :is(.badge.bg-primary, .badge.text-bg-primary) { background: var(--crm-primary-soft) !important; color: var(--crm-primary-ink) !important; }
body :is(.page-content, .modal, .offcanvas) :is(.badge.bg-success, .badge.text-bg-success) { background: var(--crm-success-soft) !important; color: var(--crm-success-ink) !important; }
body :is(.page-content, .modal, .offcanvas) :is(.badge.bg-warning, .badge.text-bg-warning) { background: var(--crm-warning-soft) !important; color: var(--crm-warning-ink) !important; }
body :is(.page-content, .modal, .offcanvas) :is(.badge.bg-danger, .badge.text-bg-danger) { background: var(--crm-danger-soft) !important; color: var(--crm-danger-ink) !important; }
body :is(.page-content, .modal, .offcanvas) :is(.badge.bg-info, .badge.text-bg-info) { background: var(--crm-info-soft) !important; color: var(--crm-info-ink) !important; }
body :is(.page-content, .modal, .offcanvas) :is(.badge.bg-secondary, .badge.text-bg-secondary, .badge.bg-light, .badge.text-bg-light, .badge.bg-dark) { background: var(--crm-soft) !important; color: var(--crm-muted) !important; }
body :is(.page-content, .modal, .offcanvas) :is(.chip, .meta-chip, .role-chip, .status-chip, .card-pro__chip, .filter-tag, .tt-chip, .legend-pill, .task-modal-chip, .ng-check-pill, .check-pill, .header-pill, .producto-panel__chip, .reporte-card__badge, .health-card__chip, .catalog-row__badge) {
  display: inline-flex; align-items: center; gap: .35rem;
  border-radius: var(--crm-radius-pill) !important;
  font-size: .75rem; font-weight: 600; line-height: 1.2;
  padding: .3rem .7rem;
  background: var(--crm-soft); color: var(--crm-muted);
  border: 1px solid var(--crm-line);
  box-shadow: none !important;
}
body .page-content .chip-primary, body .page-content .role-chip--admin { background: var(--crm-primary-soft) !important; color: var(--crm-primary-ink) !important; border-color: var(--crm-primary-soft-2) !important; }
body .page-content :is(.chip-success, .status-chip--ok) { background: var(--crm-success-soft) !important; color: var(--crm-success-ink) !important; border-color: var(--crm-success-line) !important; }
body .page-content :is(.chip-warning, .status-chip--paused) { background: var(--crm-warning-soft) !important; color: var(--crm-warning-ink) !important; border-color: var(--crm-warning-line) !important; }
body .page-content .chip-danger { background: var(--crm-danger-soft) !important; color: var(--crm-danger-ink) !important; border-color: var(--crm-danger-line) !important; }
body .page-content .chip-info { background: var(--crm-info-soft) !important; color: var(--crm-info-ink) !important; border-color: var(--crm-info-line) !important; }
/* Pestañas y selectores de vista: un solo control segmentado. */
body :is(.page-content, .modal, .offcanvas) :is(.nav-tabs, .nav-pills, .owner-tabs, .reservas-tabs) {
  --bs-nav-link-color: var(--crm-muted); --bs-nav-link-hover-color: var(--crm-ink);
  --bs-nav-pills-link-active-bg: var(--crm-surface); --bs-nav-pills-link-active-color: var(--crm-primary-ink);
  --bs-nav-tabs-border-color: var(--crm-line); --bs-nav-tabs-link-active-bg: var(--crm-surface); --bs-nav-tabs-link-active-color: var(--crm-primary-ink);
  gap: .25rem; flex-wrap: wrap;
}
body :is(.page-content, .modal, .offcanvas) :is(.nav-pills, .owner-tabs.nav-pills, .reservas-tabs) {
  display: inline-flex; padding: .25rem; background: var(--crm-soft) !important; border: 1px solid var(--crm-line) !important; border-radius: var(--crm-radius) !important; box-shadow: none !important;
}
body :is(.page-content, .modal, .offcanvas) :is(.nav-pills, .reservas-tabs) .nav-link {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 2.15rem; padding: .4rem .85rem;
  border: 0 !important; border-radius: var(--crm-radius-sm) !important; background: transparent !important;
  color: var(--crm-muted) !important; font-size: .82rem; font-weight: 600; box-shadow: none !important;
}
body :is(.page-content, .modal, .offcanvas) :is(.nav-pills, .reservas-tabs) .nav-link:hover { color: var(--crm-ink) !important; }
body :is(.page-content, .modal, .offcanvas) :is(.nav-pills, .reservas-tabs) .nav-link.active {
  background: var(--crm-surface) !important; color: var(--crm-primary-ink) !important; box-shadow: var(--crm-shadow-sm) !important;
}
html[data-bs-theme="dark"] body :is(.page-content, .modal, .offcanvas) :is(.nav-pills, .reservas-tabs) .nav-link.active { background: var(--crm-primary-soft-2) !important; color: #fff !important; }
body :is(.page-content, .modal, .offcanvas) .nav-tabs { border-bottom: 1px solid var(--crm-line); }
body :is(.page-content, .modal, .offcanvas) .nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--crm-muted); font-weight: 600; font-size: .85rem; padding: .6rem .9rem; background: transparent; }
body :is(.page-content, .modal, .offcanvas) .nav-tabs .nav-link.active { color: var(--crm-primary-ink); border-bottom-color: var(--crm-primary); background: transparent; }

/* Progreso */
body :is(.page-content, .modal) .progress { --bs-progress-bg: var(--crm-soft); --bs-progress-bar-bg: var(--crm-primary); --bs-progress-border-radius: var(--crm-radius-pill); }
/* Listas */
body :is(.page-content, .modal, .offcanvas) .list-group { --bs-list-group-bg: var(--crm-surface); --bs-list-group-color: var(--crm-ink); --bs-list-group-border-color: var(--crm-line); --bs-list-group-action-hover-bg: var(--crm-surface-2); --bs-list-group-active-bg: var(--crm-primary-soft); --bs-list-group-active-color: var(--crm-primary-ink); --bs-list-group-active-border-color: var(--crm-primary-soft-2); --bs-list-group-border-radius: var(--crm-radius-sm); }

/* 11. MENÚS, MODALES Y OFFCANVAS ------------------------------------------- */
body .dropdown-menu {
  --bs-dropdown-bg: var(--crm-surface); --bs-dropdown-color: var(--crm-ink); --bs-dropdown-border-color: var(--crm-line);
  --bs-dropdown-link-color: var(--crm-ink); --bs-dropdown-link-hover-bg: var(--crm-surface-2); --bs-dropdown-link-hover-color: var(--crm-ink);
  --bs-dropdown-link-active-bg: var(--crm-primary-soft); --bs-dropdown-link-active-color: var(--crm-primary-ink);
  --bs-dropdown-divider-bg: var(--crm-line); --bs-dropdown-header-color: var(--crm-muted);
  border: 1px solid var(--crm-line); border-radius: var(--crm-radius); box-shadow: var(--crm-shadow-lg); padding: .35rem; font-size: .85rem;
}
body .dropdown-menu .dropdown-item { border-radius: var(--crm-radius-sm); padding: .45rem .7rem; }
body :is(.tooltip) { --bs-tooltip-bg: #0f172a; --bs-tooltip-color: #fff; --bs-tooltip-border-radius: var(--crm-radius-sm); --bs-tooltip-font-size: .75rem; }
body .popover { --bs-popover-bg: var(--crm-surface); --bs-popover-border-color: var(--crm-line); --bs-popover-header-bg: var(--crm-surface-2); --bs-popover-body-color: var(--crm-ink); --bs-popover-border-radius: var(--crm-radius); box-shadow: var(--crm-shadow-lg); }
body .modal-backdrop { --bs-backdrop-bg: #0b1222; --bs-backdrop-opacity: .5; }
body .modal:not(#chatBigModal):not(#chatBigModalMobile) .modal-content {
  --bs-modal-bg: var(--crm-surface); --bs-modal-color: var(--crm-ink); --bs-modal-border-color: var(--crm-line);
  border: 1px solid var(--crm-line) !important; border-radius: var(--crm-radius-lg) !important;
  background: var(--crm-surface) !important; color: var(--crm-ink); box-shadow: var(--crm-shadow-lg) !important; overflow: hidden;
}
body .modal:not(#chatBigModal):not(#chatBigModalMobile) .modal-header {
  padding: 1rem 1.25rem; background: var(--crm-surface) !important; background-image: none !important;
  border-bottom: 1px solid var(--crm-line) !important; color: var(--crm-ink) !important;
}
body .modal:not(#chatBigModal):not(#chatBigModalMobile) .modal-header :is(.modal-title, h5, h4) { color: var(--crm-ink) !important; font-size: 1.05rem; font-weight: 700; display: flex; align-items: center; gap: .5rem; }
body .modal:not(#chatBigModal):not(#chatBigModalMobile) .modal-header :is(.modal-title, h5) > :is(i, .bi, .fas):first-child { color: var(--crm-primary) !important; }
body .modal:not(#chatBigModal):not(#chatBigModalMobile) .modal-header :is(.btn-close, [data-bs-dismiss="modal"]:not(.btn-primary):not(.btn-secondary)) { color: var(--crm-muted) !important; }
html[data-bs-theme="light"] body .modal:not(#chatBigModal):not(#chatBigModalMobile) .modal-header .btn-close { filter: none; }
body .modal:not(#chatBigModal):not(#chatBigModalMobile) .modal-body { padding: 1.25rem; }
body .modal .modal-header > :is(.btn-close, button[data-bs-dismiss="modal"]):last-child { margin-left: auto !important; }
body .modal:not(#chatBigModal):not(#chatBigModalMobile) .modal-header .btn-close { width: 2rem; height: 2rem; padding: 0; border: 0 !important; border-radius: var(--crm-radius-sm) !important; background-size: .8rem; box-shadow: none !important; background-color: transparent !important; }
body .modal:not(#chatBigModal):not(#chatBigModalMobile) .modal-header .btn-close:hover { background-color: var(--crm-soft) !important; opacity: 1; }
body .modal :is(.modal-pro__icon, .modal-icon, .task-modal-hero__icon, .detail-hero__icon) {
  display: inline-grid !important; place-items: center; flex: 0 0 2.25rem; width: 2.25rem !important; height: 2.25rem !important;
  border-radius: var(--crm-radius-sm) !important; font-size: 1rem !important;
  background: var(--crm-primary-soft) !important; color: var(--crm-primary) !important; box-shadow: none !important; border: 0 !important;
}
body :is(.modal-pro, .modal-redesign) .modal-content::before, body .report-modal__dialog::before { display: none !important; }
body .report-modal__dialog { background: var(--crm-surface) !important; border: 1px solid var(--crm-line) !important; border-radius: var(--crm-radius-lg) !important; box-shadow: var(--crm-shadow-lg) !important; color: var(--crm-ink); }
body .report-modal__header { background: var(--crm-surface) !important; border-bottom: 1px solid var(--crm-line) !important; }
body .report-modal__footer { background: var(--crm-surface-2) !important; border-top: 1px solid var(--crm-line) !important; }
body .modal:not(#chatBigModal):not(#chatBigModalMobile) .modal-footer { gap: .5rem; padding: .85rem 1.25rem; background: var(--crm-surface-2) !important; border-top: 1px solid var(--crm-line) !important; }
body .modal:not(#chatBigModal):not(#chatBigModalMobile) .modal-footer > * { margin: 0; }
/* El tema pone position:relative a todo hijo de .row; un offcanvas o modal debe seguir flotando. */
body .row > :is(.offcanvas, .modal) { position: fixed; }
body .offcanvas { --bs-offcanvas-bg: var(--crm-surface); --bs-offcanvas-color: var(--crm-ink); --bs-offcanvas-border-color: var(--crm-line); }
body .offcanvas .offcanvas-header { border-bottom: 1px solid var(--crm-line); padding: 1rem 1.25rem; }
body .offcanvas .offcanvas-title { color: var(--crm-ink); font-weight: 700; font-size: 1.05rem; }

/* 12. AVISOS -----------------------------------------------------------------
   Tres formatos: toast (breve), alerta en la vista (persistente) y diálogo
   (confirmar / formulario). Los cuatro estados comparten forma. */
.crm-feedback--success, .alert-success, .alert-success-soft { --feedback: var(--crm-success); --feedback-ink: var(--crm-success-ink); --feedback-bg: var(--crm-success-soft); --feedback-line: var(--crm-success-line); }
.crm-feedback--error, .alert-danger, .alert-danger-soft { --feedback: var(--crm-danger); --feedback-ink: var(--crm-danger-ink); --feedback-bg: var(--crm-danger-soft); --feedback-line: var(--crm-danger-line); }
.crm-feedback--warning, .alert-warning, .alert-warning-soft { --feedback: var(--crm-warning); --feedback-ink: var(--crm-warning-ink); --feedback-bg: var(--crm-warning-soft); --feedback-line: var(--crm-warning-line); }
.crm-feedback--info, .alert-info, .alert-primary, .alert-secondary, .alert-light, .alert-info-soft { --feedback: var(--crm-primary); --feedback-ink: var(--crm-primary-ink); --feedback-bg: var(--crm-primary-soft); --feedback-line: var(--crm-primary-soft-2); }
/* Toast */
body .crm-toast-region { position: fixed; z-index: 2147483600; top: max(1rem, env(safe-area-inset-top)); right: max(1rem, env(safe-area-inset-right)); width: min(24rem, calc(100vw - 2rem)); display: flex; flex-direction: column; gap: .5rem; pointer-events: none; }
.crm-toast { display: flex; align-items: flex-start; gap: .7rem; padding: .85rem .9rem; border: 1px solid var(--crm-line); border-left: 4px solid var(--feedback); border-radius: var(--crm-radius); background: var(--crm-surface); color: var(--crm-ink); box-shadow: var(--crm-shadow-lg); pointer-events: auto; animation: crm-feedback-in .18s ease-out; }
.crm-toast__icon { flex: 0 0 auto; color: var(--feedback); font-size: 1.15rem; line-height: 1.35; }
.crm-toast__body { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.crm-toast__body strong { display: block; font-size: .85rem; line-height: 1.45; font-weight: 600; color: var(--crm-ink); }
.crm-toast__body p { margin: .2rem 0 0; font-size: .8rem; line-height: 1.45; color: var(--crm-muted); white-space: pre-line; }
.crm-toast__close { min-width: 1.75rem; min-height: 1.75rem; border: 0; border-radius: var(--crm-radius-xs); background: transparent; color: var(--crm-subtle); padding: .2rem; line-height: 1; cursor: pointer; }
.crm-toast__close:hover { background: var(--crm-soft); color: var(--crm-ink); }
.crm-toast__action { display: block; border: 0; padding: .35rem 0 0; background: transparent; color: var(--crm-primary); font-size: .8rem; font-weight: 600; text-align: left; cursor: pointer; }
@keyframes crm-feedback-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
/* Alerta en la vista */
body .alert {
  --bs-alert-color: var(--feedback-ink, var(--crm-ink)); --bs-alert-bg: var(--feedback-bg, var(--crm-surface-2)); --bs-alert-border-color: var(--feedback-line, var(--crm-line));
  display: block; border: 1px solid var(--bs-alert-border-color) !important; border-left: 4px solid var(--feedback, var(--crm-primary)) !important;
  border-radius: var(--crm-radius) !important; background: var(--bs-alert-bg) !important; color: var(--bs-alert-color) !important;
  padding: .8rem 1rem; font-size: .84rem; line-height: 1.55; box-shadow: none !important; background-image: none !important;
}
body .alert.d-flex { display: flex; }
body .page-content .alert-box { border: 1px solid var(--feedback-line, var(--crm-line)) !important; border-left: 4px solid var(--feedback, var(--crm-primary)) !important; border-radius: var(--crm-radius) !important; background: var(--feedback-bg, var(--crm-surface-2)) !important; color: var(--crm-ink); padding: .75rem 1rem; box-shadow: none !important; }
body .page-content .alert-box :is(strong, b, .fw-bold, .fw-semibold) { color: var(--feedback-ink, var(--crm-ink)); }
body .alert :is(strong, b, .alert-heading, a:not(.btn)) { color: inherit; }
body .alert > :is(.bi, .fas, .fa, i):first-child { color: var(--feedback); }
body .alert code { background: rgb(0 0 0 / 6%); color: inherit; overflow-wrap: anywhere; }
html[data-bs-theme="dark"] body .alert code { background: rgb(255 255 255 / 8%); }
/* Diálogo (SweetAlert2) */
body .swal2-container { z-index: 2147483500 !important; padding: 1rem; }
body .swal2-container.swal2-backdrop-show { background: rgb(11 18 34 / 50%) !important; }
body .swal2-popup { width: min(30rem, calc(100vw - 2rem)) !important; border: 1px solid var(--crm-line) !important; border-radius: var(--crm-radius-lg) !important; color: var(--crm-ink) !important; background: var(--crm-surface) !important; box-shadow: var(--crm-shadow-lg) !important; font-family: var(--crm-font) !important; padding: 1.5rem 1.25rem 1.25rem !important; }
body .swal2-popup.swal2-toast { width: auto !important; padding: .75rem 1rem !important; }
body .swal2-title { font-size: 1.15rem !important; line-height: 1.35; font-weight: 700 !important; letter-spacing: -.01em; color: var(--crm-ink) !important; padding: .5rem 0 0 !important; }
body .swal2-html-container { font-size: .875rem !important; color: var(--crm-muted) !important; line-height: 1.6; margin: .65rem .25rem 0 !important; }
body .swal2-icon { transform: scale(.78); margin: .25rem auto 0 !important; }
body .swal2-actions { gap: .5rem; margin-top: 1.25rem !important; width: 100%; }
body .swal2-actions > button, .crm-button { min-height: var(--crm-control-h); border-radius: var(--crm-radius-sm) !important; padding: .5rem 1.1rem !important; font-family: var(--crm-font); font-size: .85rem !important; font-weight: 600; line-height: 1.3; border: 1px solid transparent !important; box-shadow: none !important; cursor: pointer; margin: 0 !important; }
body .swal2-confirm, .crm-button--primary { background: var(--crm-primary) !important; border-color: var(--crm-primary) !important; color: #fff !important; }
body .swal2-confirm:hover { background: var(--crm-primary-hover) !important; }
body .swal2-actions > :is(.swal2-cancel, .crm-button--secondary), .crm-button--secondary { background: var(--crm-surface) !important; color: var(--crm-ink) !important; border-color: var(--crm-line-strong) !important; }
body .swal2-actions > .swal2-cancel:hover { background: var(--crm-surface-2) !important; }
body .swal2-deny, .crm-button--danger { background: var(--crm-danger) !important; border-color: var(--crm-danger) !important; color: #fff !important; }
body .swal2-popup:has(.swal2-icon-warning.swal2-icon-show) .swal2-confirm.crm-danger,
body .swal2-confirm.crm-danger { background: var(--crm-danger) !important; border-color: var(--crm-danger) !important; }
body :is(.swal2-input, .swal2-textarea, .swal2-select, .swal2-file) { width: 100% !important; max-width: 100%; margin: .75rem 0 0 !important; min-height: var(--crm-control-h); padding: .5rem .8rem !important; border: 1px solid var(--crm-line-strong) !important; border-radius: var(--crm-radius-sm) !important; color: var(--crm-ink) !important; background: var(--crm-surface) !important; box-shadow: none !important; font-size: .875rem !important; }
body :is(.swal2-input, .swal2-textarea, .swal2-select):focus { border-color: var(--crm-primary) !important; box-shadow: var(--crm-focus-ring) !important; }
body .swal2-validation-message { background: var(--crm-danger-soft) !important; color: var(--crm-danger-ink) !important; border-radius: var(--crm-radius-sm); font-size: .8rem; }
body .swal2-footer { border-top-color: var(--crm-line) !important; color: var(--crm-muted); font-size: .8rem; }
body .swal2-timer-progress-bar { background: var(--crm-primary-soft-2) !important; }
body .swal2-icon.swal2-success { color: var(--crm-success) !important; border-color: var(--crm-success-line) !important; }
body .swal2-icon.swal2-success [class^="swal2-success-line"] { background-color: var(--crm-success) !important; }
body .swal2-icon.swal2-success .swal2-success-ring { border-color: var(--crm-success-line) !important; }
body .swal2-icon.swal2-success :is(.swal2-success-circular-line-left, .swal2-success-circular-line-right, .swal2-success-fix) { background: var(--crm-surface) !important; }
body .swal2-icon.swal2-warning { color: var(--crm-warning) !important; border-color: var(--crm-warning-line) !important; }
body .swal2-icon.swal2-error { color: var(--crm-danger) !important; border-color: var(--crm-danger-line) !important; }
body .swal2-icon.swal2-error [class^="swal2-x-mark-line"] { background-color: var(--crm-danger) !important; }
body .swal2-icon:is(.swal2-info, .swal2-question) { color: var(--crm-primary) !important; border-color: var(--crm-primary-soft-2) !important; }
body .swal2-popup :is(label, .form-label) { color: var(--crm-ink); font-size: .8125rem; font-weight: 600; }
body .swal2-popup :is(.form-control, .form-select) { text-align: left; }
body .swal2-popup .swal2-html-container :is(table, ul, ol) { text-align: left; }
/* Diálogos propios del chat: misma piel. */
body .chat-action-layer { z-index: 2147483500; background: rgb(11 18 34 / 50%); backdrop-filter: none; }
body .chat-action-dialog { --chat-action-accent: var(--crm-primary); border: 1px solid var(--crm-line); border-radius: var(--crm-radius-lg); background: var(--crm-surface); color: var(--crm-ink); box-shadow: var(--crm-shadow-lg); }
body .chat-action-dialog__icon { background: var(--crm-primary-soft); color: var(--crm-primary); border-radius: var(--crm-radius); }
body .chat-action-dialog__heading h2 { font-size: 1.15rem; color: var(--crm-ink); }
body .chat-action-dialog__description { color: var(--crm-muted); font-size: .875rem; }
body .chat-action-field__label { color: var(--crm-ink); font-size: .8125rem; }
body .chat-action-field__control { border-color: var(--crm-line-strong); border-radius: var(--crm-radius-sm); background: var(--crm-surface); color: var(--crm-ink); font-size: .875rem; }
body .chat-action-field__control:focus { border-color: var(--crm-primary); box-shadow: var(--crm-focus-ring); }
body .chat-action-button { min-height: var(--crm-control-h); border: 1px solid var(--crm-line-strong); border-radius: var(--crm-radius-sm); font-weight: 600; font-size: .85rem; }
body .chat-action-button--primary { background: var(--crm-primary); border-color: var(--crm-primary); color: #fff; }
body .chat-action-button--secondary { background: var(--crm-surface); color: var(--crm-ink); }
body .chat-action-button--danger { background: var(--crm-danger); border-color: var(--crm-danger); color: #fff; }
body .chat-action-dialog__error { border: 1px solid var(--crm-danger-line); border-left: 4px solid var(--crm-danger); border-radius: var(--crm-radius); background: var(--crm-danger-soft); color: var(--crm-danger-ink); }

/* 13. ESTADOS VACÍOS, CARGA Y ZONAS DE ARCHIVO ----------------------------- */
body .page-content :is(.catalog-empty, .esp-empty, .reservas-empty, .human-empty, .audit-empty, .opportunity-empty, .calendar-agenda-empty, .tipo-campos-empty, .mm-empty, .producto-panel__empty, .empty-state) {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem;
  padding: 1.5rem 1rem; text-align: center;
  color: var(--crm-muted) !important; font-size: .85rem;
  background: var(--crm-surface-2) !important; border: 1px dashed var(--crm-line-strong) !important; border-radius: var(--crm-radius) !important;
}
body .page-content :is(.drop-zone, .foto-dropzone, .dropzone, .dz-area, #dropArea, .upload-drop) {
  background: var(--crm-surface-2) !important; background-image: none !important;
  border: 1.5px dashed var(--crm-line-strong) !important; border-radius: var(--crm-radius) !important;
  color: var(--crm-muted); box-shadow: none !important; transition: border-color .15s ease, background-color .15s ease;
}
body .page-content :is(.drop-zone, .foto-dropzone, .dropzone):is(:hover, .is-dragover, .dragover, .is-over) { border-color: var(--crm-primary) !important; background: var(--crm-primary-soft) !important; }
body .page-content :is(.drop-zone__title, .foto-dropzone__hint strong) { color: var(--crm-ink) !important; }
body .page-content :is(.drop-zone__icon) { background: var(--crm-primary) !important; color: #fff !important; box-shadow: none !important; border-radius: var(--crm-radius) !important; }
body .page-content .drop-zone__halo { display: none !important; }
body .page-content :is(.quick-tip, .help-note, .help-item, .catalog-hint, .account-state, .res-policy-summary) {
  background: var(--crm-surface-2) !important; background-image: none !important; border: 1px solid var(--crm-line) !important; border-radius: var(--crm-radius) !important; color: var(--crm-ink); box-shadow: none !important;
}
body :is(.page-content, .modal) :is(.quick-tip__title) { color: var(--crm-ink) !important; }
body :is(.page-content, .modal) :is(.quick-tip__text) { color: var(--crm-muted) !important; }
body .page-content .owner-gate__warn { display: grid !important; grid-template-columns: auto minmax(0, 1fr); gap: .6rem; align-items: start; text-align: left; background: var(--crm-warning-soft) !important; border: 1px solid var(--crm-warning-line) !important; color: var(--crm-warning-ink) !important; border-radius: var(--crm-radius) !important; padding: .8rem 1rem !important; }
body .page-content .owner-gate__warn code { background: rgb(0 0 0 / 6%); color: inherit; }
body .page-content .account-state { background: var(--crm-success-soft) !important; border-color: var(--crm-success-line) !important; color: var(--crm-success-ink) !important; }
body .global-table-loader__box, body .modal-busy-card { background: var(--crm-surface) !important; color: var(--crm-ink) !important; border: 1px solid var(--crm-line) !important; border-radius: var(--crm-radius-lg) !important; box-shadow: var(--crm-shadow-lg) !important; }

/* Páginas de error */
body .page-content .card.text-center.p-5 { align-items: center; }
body .page-content .error { font-size: clamp(3rem, 2rem + 4vw, 4.5rem); font-weight: 800; line-height: 1; letter-spacing: -.04em; color: var(--crm-primary); margin: 0 auto .75rem; }

/* 14. MÓDULOS CON PIEZAS PROPIAS ------------------------------------------- */
/* Tablero de chats: controles compactos dentro del encabezado común. */
body .crm-page-header--chat { display: block !important; padding: 1.1rem 1.25rem !important; background: var(--crm-gradient-brand) !important; border-radius: var(--crm-radius-lg) !important; }
body .crm-page-header--chat .lead-header-compact { width: 100%; }
body .crm-page-header--chat .crm-page-header__title { font-size: 1.3rem; }
/* Chats: botón flotante «Mi columna». Por encima del tablero y por debajo de modales y menús. */
body #btnGoMyColumn.my-column-fab {
  z-index: 1035 !important;
  background: var(--crm-primary) !important; color: #fff !important;
  border: 2px solid var(--crm-surface) !important;
  box-shadow: 0 8px 22px rgb(15 23 42 / 24%) !important;
  font-family: var(--crm-font); font-weight: 600;
}
body #btnGoMyColumn.my-column-fab:hover { background: var(--crm-primary-hover) !important; }
body #btnGoMyColumn.my-column-fab:active { background: var(--crm-primary-active) !important; }
html[data-bs-theme="dark"] body #btnGoMyColumn.my-column-fab { box-shadow: 0 8px 22px rgb(0 0 0 / 55%) !important; }

/* Chats: estado vacío del panel del vendedor */
html[data-bs-theme] body.agent-wa-layout .agent-fixed-chat-state { color: var(--crm-ink) !important; }

/* Agenda */
body .reservas-page .res-flow__step { background: var(--crm-surface); border-color: var(--crm-line); border-top: 3px solid var(--step-color, var(--crm-primary)); border-radius: var(--crm-radius); }
.res-flow__step:nth-child(2) { --step-color: var(--crm-accent); }
.res-flow__step:nth-child(3) { --step-color: var(--crm-teal); }
.res-flow__step:nth-child(4) { --step-color: var(--crm-warning); }
body .reservas-page .res-flow__step > span { background: color-mix(in srgb, var(--step-color, var(--crm-primary)) 12%, var(--crm-surface)); color: var(--step-color, var(--crm-primary)); }
body .reservas-page .horario-card { background: var(--crm-surface); border: 1px solid var(--crm-line); border-top: 3px solid var(--crm-primary); border-radius: var(--crm-radius); box-shadow: var(--crm-shadow-sm); }
body .reservas-page .horario-card.off { border-top-color: var(--crm-line-strong); opacity: .75; background: var(--crm-surface-2); }
body .reservas-page .tipo-card { background: var(--crm-surface); border: 1px solid var(--crm-line); border-top: 3px solid var(--type-accent, var(--crm-primary)); border-radius: var(--crm-radius); box-shadow: var(--crm-shadow-sm); }
body .reservas-page .tipo-card.off { border-top-color: var(--crm-line-strong); background: var(--crm-surface-2); }
body .reservas-page :is(.tipo-card__head h4, .tipo-card__asks strong, .res-flow__step strong, .res-template-card h3, .res-stat strong) { color: var(--crm-ink); }
body .reservas-page :is(.tipo-card p, .res-flow__step p, .res-template-card p) { color: var(--crm-muted); }
body .reservas-page :is(.res-advanced, .res-subgroup, .res-modal__body) { background: var(--crm-surface); border-color: var(--crm-line); border-radius: var(--crm-radius); }
body .reservas-page :is(.res-save-bar, .res-template-card, .res-advanced > summary, .res-subgroup > summary) { background: var(--crm-surface-2); border-color: var(--crm-line); color: var(--crm-ink); }
body .reservas-page :is(.res-master, .res-policy-config) { background: var(--crm-surface-2) !important; border-color: var(--crm-line) !important; }
body .reservas-page :is(.res-master h3, .res-policy-config h4, .res-master__switch .form-check-label, .res-modal .form-label) { color: var(--crm-ink); }
body .reservas-page :is(.res-master p, .res-policy-config > p, .res-policy-config > small, .horario-card label, .res-save-bar__hint) { color: var(--crm-muted); }
body .reservas-page :is(.res-master__switch, .turno-row) { background: var(--crm-surface); border-color: var(--crm-line); border-radius: var(--crm-radius-sm); }
body .reservas-page .res-step { background: var(--crm-primary); box-shadow: none; }
body .reservas-page .res-stat__icon.green { background: var(--crm-success-soft) !important; color: var(--crm-success) !important; }
body .reservas-page .res-stat__icon.violet { background: color-mix(in srgb, var(--crm-accent) 14%, var(--crm-surface)) !important; color: var(--crm-accent) !important; }
body .reservas-page .res-stat__icon.orange { background: var(--crm-warning-soft) !important; color: var(--crm-warning) !important; }
/* FullCalendar */
body .page-content .fc { --fc-border-color: var(--crm-line); --fc-page-bg-color: var(--crm-surface); --fc-neutral-bg-color: var(--crm-surface-2); --fc-today-bg-color: var(--crm-primary-soft); --fc-button-bg-color: var(--crm-surface); --fc-button-border-color: var(--crm-line-strong); --fc-button-text-color: var(--crm-ink); --fc-button-hover-bg-color: var(--crm-surface-2); --fc-button-hover-border-color: var(--crm-line-strong); --fc-button-active-bg-color: var(--crm-primary-soft); --fc-button-active-border-color: var(--crm-primary-soft-2); color: var(--crm-ink); }
body .page-content .fc .fc-button { border-radius: var(--crm-radius-sm) !important; font-size: .8rem; font-weight: 600; box-shadow: none !important; text-transform: none; }
body .page-content .fc .fc-button-primary { background: var(--crm-surface) !important; border: 1px solid var(--crm-line-strong) !important; color: var(--crm-ink) !important; }
body .page-content .fc .fc-button-primary:hover { background: var(--crm-surface-2) !important; }
body .page-content .fc .fc-button-primary:is(.fc-button-active, :not(:disabled):active) { background: var(--crm-primary-soft) !important; border-color: var(--crm-primary-soft-2) !important; color: var(--crm-primary-ink) !important; }
body .page-content .fc .fc-button-group { gap: 0; }
body .page-content .fc .fc-button-group > .fc-button:not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; margin-left: -1px; }
body .page-content .fc .fc-button-group > .fc-button:not(:last-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
body .page-content .fc .fc-button-primary:not(:disabled).fc-button-active { color: var(--crm-primary-ink); }
body .page-content .fc .fc-toolbar-title { font-size: 1.05rem; font-weight: 700; color: var(--crm-ink); }
body .page-content .fc .fc-col-header-cell-cushion { color: var(--crm-muted); font-size: .75rem; font-weight: 650; text-transform: uppercase; text-decoration: none; }
body .page-content .fc .fc-daygrid-day-number { color: var(--crm-ink); text-decoration: none; font-size: .8rem; }
/* Flatpickr */
body .flatpickr-calendar { background: var(--crm-surface); border: 1px solid var(--crm-line); border-radius: var(--crm-radius); box-shadow: var(--crm-shadow-lg); color: var(--crm-ink); }
body .flatpickr-calendar :is(.flatpickr-months, .flatpickr-month, .flatpickr-weekdays, span.flatpickr-weekday, .flatpickr-monthDropdown-months) { background: var(--crm-primary) !important; color: #fff !important; fill: #fff; }
body .flatpickr-day { color: var(--crm-ink); border-radius: var(--crm-radius-sm); }
body .flatpickr-day:is(:hover, .today) { background: var(--crm-primary-soft); border-color: var(--crm-primary-soft-2); }
body .flatpickr-day:is(.selected, .startRange, .endRange) { background: var(--crm-primary) !important; border-color: var(--crm-primary) !important; color: #fff; }
body .flatpickr-day:is(.prevMonthDay, .nextMonthDay, .flatpickr-disabled) { color: var(--crm-subtle); }
/* Accesos rápidos del panel */
body .page-content .card-hover { transition: border-color .15s ease, transform .15s ease; }
html[data-bs-theme] body .page-content .card-hover[class*="border-left-"] { border: 1px solid var(--crm-line) !important; }
html[data-bs-theme] body .page-content .card-hover[class*="border-left-"]:hover { border-color: var(--crm-primary-soft-2) !important; }
html[data-bs-theme] body .page-content .card-hover :is(.text-xs, .text-uppercase) { color: var(--crm-muted) !important; }
html[data-bs-theme] body .page-content .card-hover :is(.h5, .h6, .text-dark) { color: var(--crm-ink) !important; }
html[data-bs-theme] body .page-content .card-hover .quick-icon { background: var(--crm-primary-soft) !important; color: var(--crm-primary) !important; border: 0 !important; }
html[data-bs-theme] body .page-content .card-hover .quick-icon i { color: inherit !important; font-size: 1.15rem !important; }
body .page-content .card-hover:hover { border-color: var(--crm-primary-soft-2) !important; transform: translateY(-1px); }
body .page-content .card-hover :is(.text-xs, .text-uppercase) { color: var(--crm-muted) !important; font-size: .7rem; letter-spacing: .06em; font-weight: 700; }
body .page-content .card-hover :is(.h5, .h6) { color: var(--crm-ink) !important; font-weight: 650; font-size: .95rem; }
body .page-content .card-hover .quick-icon { width: 2.5rem; height: 2.5rem; border-radius: var(--crm-radius-sm) !important; background: var(--crm-primary-soft) !important; color: var(--crm-primary) !important; display: grid; place-items: center; box-shadow: none !important; }

/* 15. ADAPTACIÓN ------------------------------------------------------------ */
@media (max-width: 1199.98px) {
  :root, html[data-bs-theme] { --crm-gutter: 1.25rem; --crm-gap: 1rem; }
}
@media (max-width: 991.98px) {
  body .crm-page-header { grid-template-columns: minmax(0, 1fr); gap: .85rem; }
  .crm-page-header__actions { justify-content: flex-start; max-width: none; }
}
@media (max-width: 767.98px) {
  :root, html[data-bs-theme] { --crm-gutter: .75rem; --crm-gap: .75rem; --crm-card-pad: 1rem; --crm-control-h: 2.75rem; --crm-control-h-sm: 2.25rem; }
  body .page-content { padding: var(--crm-gutter) !important; }
  body .crm-page-header { padding: 1rem !important; border-radius: var(--crm-radius) !important; gap: .75rem; }
  .crm-page-header__main { gap: .75rem; align-items: flex-start; }
  .crm-page-header__icon { width: 2.5rem; height: 2.5rem; flex-basis: 2.5rem; font-size: 1.15rem; border-radius: var(--crm-radius-sm); }
  body .crm-page-header__title { font-size: 1.2rem; margin-bottom: .2rem; }
  .crm-page-header__subtitle { font-size: .8rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .crm-page-header__breadcrumb { display: none; }
  .crm-page-header__actions { gap: .5rem; width: 100%; }
  .crm-page-header__actions > :is(.btn, .btn-pro, .qa-btn) { flex: 1 1 auto; }
  body .crm-page-header .crm-header-stats { width: 100%; }
  body .crm-page-header .crm-header-stats .stat-card { flex: 1 1 0; min-width: 0; }
  body :is(.page-content, .modal, .offcanvas) :is(.btn, .btn-pro, .qa-btn) { white-space: normal; }
  body .page-content :is(.quick-actions-bar, .owner-toolbar, .agenda-toolbar, .tabs-wrap) > :is(.btn, .btn-pro, .qa-btn) { flex: 1 1 auto; }
  body .page-content :is(.nav-pills, .reservas-tabs, .owner-tabs) { display: flex; width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  body .page-content :is(.nav-pills, .reservas-tabs, .owner-tabs) .nav-link { flex: 1 0 auto; justify-content: center; white-space: nowrap; }
  body .page-content :is(.nav-pills, .reservas-tabs, .owner-tabs)::-webkit-scrollbar { display: none; }
  body .page-content :is(.card-header, .card-pro__head) { padding: .8rem var(--crm-card-pad) !important; }
  body .page-content :is(.kpi-card, .res-stat, .ng-recontact-stat, .human-kpis > *) { min-height: 4.5rem; padding: .8rem .9rem !important; gap: .65rem; }
  body .page-content :is(.kpi-card, .res-stat, .ng-recontact-stat, .human-kpis > *) :is(h3, h4, .h3, .h4, strong, .kpi-value) { font-size: 1.15rem !important; }
  body .page-content :is(.kpi-card .icon, .kpi-card [class*="icon"], .res-stat__icon) { width: 2.15rem !important; height: 2.15rem !important; flex-basis: 2.15rem; font-size: .95rem !important; }
  body .page-content :is(.dataTables_wrapper, .dt-container) > .row:first-child > [class*="col"] { width: 100%; }
  body .page-content :is(.dataTables_filter, .dt-search) { text-align: left !important; }
  body .page-content :is(.dataTables_filter, .dt-search) label { width: 100%; }
  body .page-content :is(.dataTables_filter input, .dt-search input) { flex: 1; min-width: 0; width: 100% !important; }
  body .page-content :is(.dataTables_paginate, .dt-paging) .pagination { justify-content: center !important; flex-wrap: wrap; }
  body .page-content :is(.dataTables_info, .dataTables_paginate) { text-align: center !important; }
  body .page-content .table > :not(caption) > * > * { padding: .6rem .7rem; }
  body .modal:not(#chatBigModal):not(#chatBigModalMobile) :is(.modal-header, .modal-body, .modal-footer) { padding-inline: 1rem; }
  body .modal:not(#chatBigModal):not(#chatBigModalMobile) .modal-footer > .btn { flex: 1 1 auto; }
  body .swal2-popup { padding: 1.25rem 1rem 1rem !important; }
  body .swal2-actions > button { flex: 1 1 auto; }
  body .crm-toast-region { top: max(.75rem, env(safe-area-inset-top)); right: .75rem; width: calc(100vw - 1.5rem); }
}
@media (pointer: coarse) {
  body :is(.page-content, .modal, .offcanvas, .swal2-popup, .setup-wrap) :is(input.form-control, textarea.form-control, select.form-select, .inp, .input-pro, .swal2-input, .swal2-textarea, .swal2-select) { font-size: 16px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .crm-toast { animation: none; }
  body .app-sidebar .nav-link, body .page-content .card-hover { transition: none; }
  body .page-content .card-hover:hover { transform: none; }
}