/* ==========================================================================
   WhatsMarketing · Piel 2026 del panel de usuario de 2015 (servidordedicado)
   Solo capa visual sobre la plantilla Materialize. No cambia campos,
   formularios, enlaces ni llamadas. Todo va acotado bajo body.wm2026:
   quitando esa clase (o la línea que carga esta hoja) vuelve el aspecto anterior.
   Especificación: arquitectura-whatsmarketing/37-campanas-masivas-archivos-privados-y-ux.md
   ========================================================================== */

body.wm2026 {
  --wm-bg: #F7F3F6;
  --wm-surface: #FFFFFF;
  --wm-surface-alt: #FBF3F8;
  --wm-sunken: #F1EBEF;
  --wm-border: #EEE3EB;
  --wm-border-strong: #E0D2DB;
  --wm-text: #241E22;
  --wm-text-2: #4C4650;
  --wm-text-3: #8A8189;
  --wm-primary: #C81591;
  --wm-primary-hover: #AD0F7A;
  --wm-primary-tint: #FBE6F2;
  --wm-primary-ring: rgba(200, 21, 145, .28);
  --wm-secondary: #F37648;
  --wm-secondary-tint: #FDEBE3;
  --wm-success: #1F9D6B;
  --wm-success-tint: #E3F6EC;
  --wm-warn: #C88A15;
  --wm-warn-tint: #FBF1E0;
  --wm-danger: #D6322B;
  --wm-danger-tint: #FBE7E6;
  --wm-info: #2B6CB0;
  --wm-info-tint: #E6F0FA;
  --wm-side-bg: #1F1B1F;
  --wm-side-text: #D8D2D6;
  --wm-side-border: #3A333A;
  --wm-side-active: rgba(200, 21, 145, .22);
  --wm-font: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wm-font-head: 'Space Grotesk', 'Geist', system-ui, sans-serif;
  --wm-r-sm: 8px;
  --wm-r-md: 12px;
  --wm-r-lg: 16px;
  --wm-sh-sm: 0 1px 2px rgba(36, 30, 34, .06);
  --wm-sh-md: 0 8px 24px rgba(36, 30, 34, .08);

  background: var(--wm-bg);
  color: var(--wm-text);
  font-family: var(--wm-font);
  -webkit-font-smoothing: antialiased;
}

/* ---------- tipografía ---------- */
body.wm2026 h1, body.wm2026 h2, body.wm2026 h3, body.wm2026 h4, body.wm2026 h5, body.wm2026 h6,
body.wm2026 .card .card-title, body.wm2026 .breadcrumbs-title, body.wm2026 .card-stats-number {
  font-family: var(--wm-font-head);
  letter-spacing: -.01em;
  color: var(--wm-text);
}
body.wm2026 .card .card-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 14px; }
body.wm2026 p, body.wm2026 li, body.wm2026 td, body.wm2026 th, body.wm2026 label,
body.wm2026 input, body.wm2026 textarea, body.wm2026 select, body.wm2026 .btn { font-family: var(--wm-font); }
body.wm2026 a { color: var(--wm-primary); }
body.wm2026 .purple-text, body.wm2026 .deep-purple-text, body.wm2026 .cyan-text { color: var(--wm-primary) !important; }
body.wm2026 ::selection { background: var(--wm-primary-tint); }

/* ---------- barra superior ---------- */
body.wm2026 .navbar .navbar-main,
body.wm2026 header .navbar-main.gradient-45deg-indigo-purple {
  background: var(--wm-surface) !important;
  box-shadow: 0 1px 0 var(--wm-border) !important;
}
body.wm2026 .navbar .navbar-main a,
body.wm2026 .navbar .navbar-main .menu-title,
body.wm2026 .navbar .navbar-main i.material-icons { color: var(--wm-text-2) !important; }
body.wm2026 .navbar .navbar-main a:hover { background: var(--wm-surface-alt); color: var(--wm-primary) !important; }
body.wm2026 .navbar .notification-badge { background: var(--wm-primary); color: #fff; }
body.wm2026 .dropdown-content { border-radius: var(--wm-r-md); box-shadow: var(--wm-sh-md); }
body.wm2026 .dropdown-content li > a, body.wm2026 .dropdown-content li > span { color: var(--wm-text) !important; }
body.wm2026 .dropdown-content li:hover, body.wm2026 .dropdown-content li.active, body.wm2026 .dropdown-content li.selected { background: var(--wm-surface-alt); }
body.wm2026 .select-dropdown li.selected > span, body.wm2026 .select-dropdown li > span:hover { color: var(--wm-primary) !important; }

/* franja superior del contenido: de morado a un degradado suave de marca */
body.wm2026 .content-wrapper-before,
body.wm2026 .content-wrapper-before.gradient-45deg-indigo-purple {
  background: linear-gradient(120deg, var(--wm-primary-tint), var(--wm-secondary-tint)) !important;
  height: 150px;
}
body.wm2026 #breadcrumbs-wrapper .breadcrumbs-title,
body.wm2026 #breadcrumbs-wrapper .breadcrumbs-title span,
body.wm2026 .breadcrumbs-dark .breadcrumbs-title { color: var(--wm-text) !important; font-weight: 700; font-size: 1.55rem; }
body.wm2026 .breadcrumbs-dark .breadcrumb, body.wm2026 .breadcrumbs-dark .breadcrumb:before { color: var(--wm-text-3) !important; }

/* ---------- menú lateral ---------- */
body.wm2026 .sidenav-main,
body.wm2026 .sidenav-main .sidenav,
body.wm2026 .sidenav-main.sidenav-light,
body.wm2026 #slide-out {
  background: var(--wm-side-bg) !important;
}
body.wm2026 .sidenav-main { box-shadow: none; border-right: 1px solid var(--wm-side-border); }
body.wm2026 .sidenav-main .brand-sidebar { background: var(--wm-side-bg) !important; border-bottom: 1px solid var(--wm-side-border); }
body.wm2026 .sidenav-main .brand-sidebar img { width: auto !important; max-width: 82% !important; height: 40px; margin: 14px auto !important; }
body.wm2026 #slide-out li > a,
body.wm2026 #slide-out li > a > i,
body.wm2026 #slide-out li > a .menu-title,
body.wm2026 #slide-out .navigation-header a,
body.wm2026 #slide-out .navigation-header i { color: var(--wm-side-text) !important; }
body.wm2026 #slide-out li > a { border-radius: 10px; font-weight: 500; }
body.wm2026 #slide-out li > a:hover { background: rgba(255, 255, 255, .06) !important; color: #fff !important; }
body.wm2026 #slide-out li > a:hover .menu-title, body.wm2026 #slide-out li > a:hover i { color: #fff !important; }
body.wm2026 #slide-out .collapsible-sub li a.active,
body.wm2026.sidenav-active-square .sidenav li > a.active,
body.wm2026 .sidenav-active-square .sidenav li > a.active {
  background: var(--wm-side-active) !important;
  box-shadow: none !important;
  color: #fff !important;
}
body.wm2026 #slide-out .collapsible-sub li a.active .menu-title,
body.wm2026 #slide-out .collapsible-sub li a.active i { color: #fff !important; }
body.wm2026 #slide-out .collapsible-sub img { filter: brightness(0) invert(.85); width: 20px; margin-right: 18px; }
body.wm2026 #slide-out .divider { background: var(--wm-side-border); }
body.wm2026 #slide-out .navigation-header { color: #8F8790; }
body.wm2026 #slide-out .navigation-header a { text-transform: uppercase; font-size: .72rem; letter-spacing: .09em; font-weight: 700; color: #8F8790 !important; }
body.wm2026 #slide-out .collapsible-body,
body.wm2026 #slide-out .collapsible-body li,
body.wm2026 #slide-out .collapsible-header,
body.wm2026 #slide-out li.active,
body.wm2026 #slide-out li.open { background: transparent !important; }

/* secciones en recuadro: Campañas Masivas, Todo en Uno y Cuenta destacadas; WhatsApp API neutra */
body.wm2026 #slide-out > li.bold.open {
  margin: 10px 12px;
  border-radius: 14px;
  padding: 2px 0 6px;
  border: 1px solid var(--wm-side-border);
}
body.wm2026 #slide-out > li.bold.open > a.collapsible-header {
  margin: 0 !important;
  font-weight: 700;
  letter-spacing: .02em;
}
body.wm2026 #slide-out > li.bold.open:has(a[href="load_frm.php"]),
body.wm2026 #slide-out > li.bold.open:has(a[href="all_in_one_create_campaign.php"]) {
  background: rgba(255, 255, 255, .045) !important;
  border-color: #4A424A;
  box-shadow: inset 3px 0 0 var(--wm-primary);
}
body.wm2026 #slide-out > li.bold.open.active:has(a[href="load_frm.php"]),
body.wm2026 #slide-out > li.bold.open.active:has(a[href="all_in_one_create_campaign.php"]) {
  background: rgba(200, 21, 145, .12) !important;
  border-color: rgba(200, 21, 145, .55);
}
body.wm2026 #slide-out > li.bold.open:has(a[href="load_frm.php"]) > a .menu-title,
body.wm2026 #slide-out > li.bold.open:has(a[href="all_in_one_create_campaign.php"]) > a .menu-title { color: #fff !important; }
body.wm2026 #slide-out > li.bold:has(a[href*="mi-cuenta"]) {
  margin: 10px 12px;
  border-radius: 14px;
  border: 1px solid #4A424A;
  background: rgba(255, 255, 255, .045) !important;
  box-shadow: inset 3px 0 0 var(--wm-primary);
}
/* créditos de WhatsApp API dentro del menú, más discretos */
body.wm2026 #slide-out .collapsible-sub li > a[href^="javascript"] { font-size: .8rem; color: #8F8790 !important; min-height: 0; line-height: 30px; height: 30px; }
body.wm2026 #slide-out .collapsible-sub li > a[href^="javascript"] b,
body.wm2026 #slide-out .collapsible-sub li > a[href^="javascript"] .menu-title { color: #fff !important; font-family: var(--wm-font-head); }
/* ventanas emergentes del menú */
body.wm2026 .right__popup { background: var(--wm-surface) !important; color: var(--wm-text) !important; border-radius: var(--wm-r-md); box-shadow: var(--wm-sh-md); }
/* caso de éxito y cerrar sesión */
body.wm2026 #slide-out a.gradient-45deg-light-blue-cyan { background: var(--wm-primary) !important; box-shadow: none !important; }
body.wm2026 #slide-out a.red-text, body.wm2026 #slide-out a.red-text i, body.wm2026 #slide-out a.red-text .menu-title { color: #F26B63 !important; }
/* botón de menú en móvil */
body.wm2026 .btn-sidenav-toggle { background: var(--wm-primary) !important; }

/* ---------- tarjetas ---------- */
body.wm2026 .card,
body.wm2026 .card-panel {
  border-radius: var(--wm-r-lg);
  box-shadow: var(--wm-sh-sm);
  border: 1px solid var(--wm-border);
  background: var(--wm-surface);
}
body.wm2026 .card .card-content { border-radius: var(--wm-r-lg); }
body.wm2026 .card-panel[class*="gradient-45deg"] { box-shadow: none !important; }
body.wm2026 .card-panel.gradient-45deg-amber-amber { background: var(--wm-warn-tint) !important; color: var(--wm-text) !important; border-color: #F1DDB4; }
body.wm2026 .card-panel.gradient-45deg-red-pink { background: var(--wm-danger-tint) !important; color: var(--wm-text) !important; border-color: #F3C9C6; }
body.wm2026 .card-panel.gradient-45deg-green-teal { background: var(--wm-success-tint) !important; color: var(--wm-text) !important; border-color: #BFE6D2; }
body.wm2026 .card-panel.gradient-45deg-light-blue-cyan { background: var(--wm-info-tint) !important; color: var(--wm-text) !important; border-color: #C9DCF2; }
body.wm2026 .card-panel[class*="gradient-45deg"] .white-text,
body.wm2026 .card-panel[class*="gradient-45deg"].white-text { color: var(--wm-text) !important; }
/* tarjetas de datos del dashboard: blancas, cifra grande */
body.wm2026 .card-content[class*="gradient-45deg"] {
  background: var(--wm-surface) !important;
  box-shadow: none !important;
  color: var(--wm-text) !important;
}
body.wm2026 .card-content[class*="gradient-45deg"] .white-text,
body.wm2026 .card-content[class*="gradient-45deg"] .card-stats-number,
body.wm2026 .card-content[class*="gradient-45deg"] p { color: var(--wm-text) !important; }
body.wm2026 .card-content[class*="gradient-45deg"] .card-stats-title { color: var(--wm-text-2) !important; font-size: .86rem; }
body.wm2026 .card-content[class*="gradient-45deg"] i.material-icons { color: var(--wm-primary) !important; }
body.wm2026 .card-content[class*="gradient-45deg"] .card-stats-number { font-size: 1.9rem; font-weight: 700; }
body.wm2026 .gradient-shadow { box-shadow: none !important; }
body.wm2026 span.title.gradient-45deg-blue-indigo { background: var(--wm-primary) !important; border-radius: var(--wm-r-sm); }

/* ---------- botones ---------- */
body.wm2026 .btn,
body.wm2026 .btn-large,
body.wm2026 .btn-small,
body.wm2026 .btn-floating,
body.wm2026 button.btn,
body.wm2026 .btn[class*="gradient-45deg"] {
  background: var(--wm-primary) !important;
  color: #fff !important;
  border-radius: 10px;
  box-shadow: none !important;
  text-transform: none;
  font-weight: 600;
  letter-spacing: 0;
}
body.wm2026 .btn-floating { border-radius: 50%; }
body.wm2026 .btn:hover, body.wm2026 .btn-large:hover, body.wm2026 .btn-small:hover,
body.wm2026 .btn:focus, body.wm2026 .btn-floating:hover { background: var(--wm-primary-hover) !important; }
body.wm2026 .btn:focus-visible { box-shadow: 0 0 0 3px var(--wm-primary-ring) !important; }
body.wm2026 .btn.disabled, body.wm2026 .btn:disabled, body.wm2026 .btn[disabled] {
  background: var(--wm-sunken) !important;
  color: var(--wm-text-3) !important;
}
/* secundarios: verde de «vista previa / enviar» y azules de descarga pasan a contorno o naranja */
body.wm2026 .btn.gradient-45deg-indigo-light-blue,
body.wm2026 .btn.gradient-45deg-light-blue-cyan {
  background: var(--wm-surface) !important;
  color: var(--wm-text) !important;
  border: 1px solid var(--wm-border-strong);
}
body.wm2026 .btn.gradient-45deg-indigo-light-blue:hover,
body.wm2026 .btn.gradient-45deg-light-blue-cyan:hover { border-color: var(--wm-primary); color: var(--wm-primary) !important; background: var(--wm-surface) !important; }
body.wm2026 .btn.gradient-45deg-indigo-light-blue i, body.wm2026 .btn.gradient-45deg-light-blue-cyan i { color: inherit !important; }
body.wm2026 #but_preview.btn { background: var(--wm-surface) !important; color: var(--wm-text) !important; border: 1px solid var(--wm-border-strong); }
body.wm2026 #but_preview.btn:hover { border-color: var(--wm-primary); color: var(--wm-primary) !important; }
body.wm2026 .btn-flat { background: transparent !important; color: var(--wm-primary) !important; box-shadow: none; text-transform: none; font-weight: 600; border-radius: 10px; }
body.wm2026 .btn-flat.lighten-4 { background: var(--wm-primary-tint) !important; }
body.wm2026 .btn.red, body.wm2026 .btn.red.accent-2 { background: var(--wm-danger) !important; }
body.wm2026 .btn.green, body.wm2026 .btn.green.accent-4 { background: var(--wm-success) !important; }

/* ---------- campos ---------- */
body.wm2026 input:not([type]):focus:not([readonly]),
body.wm2026 input[type=text]:not(.browser-default):focus:not([readonly]),
body.wm2026 input[type=password]:not(.browser-default):focus:not([readonly]),
body.wm2026 input[type=email]:not(.browser-default):focus:not([readonly]),
body.wm2026 input[type=number]:not(.browser-default):focus:not([readonly]),
body.wm2026 input[type=tel]:not(.browser-default):focus:not([readonly]),
body.wm2026 input[type=search]:not(.browser-default):focus:not([readonly]),
body.wm2026 textarea.materialize-textarea:focus:not([readonly]) {
  border-bottom: 1px solid var(--wm-primary) !important;
  box-shadow: 0 1px 0 0 var(--wm-primary) !important;
}
body.wm2026 input:not([type]):focus:not([readonly]) + label,
body.wm2026 input[type]:not(.browser-default):focus:not([readonly]) + label,
body.wm2026 textarea.materialize-textarea:focus:not([readonly]) + label { color: var(--wm-primary) !important; }
body.wm2026 .input-field > label { color: var(--wm-text-3); }
body.wm2026 .input-field .prefix.active { color: var(--wm-primary); }
body.wm2026 .helper-text { color: var(--wm-text-3); }
body.wm2026 textarea, body.wm2026 textarea.materialize-textarea { border-radius: var(--wm-r-sm); }
body.wm2026 [type="radio"]:checked + span:after,
body.wm2026 [type="radio"].with-gap:checked + span:after,
body.wm2026 [type="radio"].with-gap:checked + span:before { background-color: var(--wm-primary); border-color: var(--wm-primary); }
body.wm2026 [type="checkbox"]:checked + span:not(.lever):before { border-right-color: var(--wm-primary); border-bottom-color: var(--wm-primary); }
body.wm2026 [type="checkbox"].filled-in:checked + span:not(.lever):after { background-color: var(--wm-primary); border-color: var(--wm-primary); }
body.wm2026 .switch label input[type=checkbox]:checked + .lever { background-color: rgba(200, 21, 145, .35); }
body.wm2026 .switch label input[type=checkbox]:checked + .lever:after { background-color: var(--wm-primary); }
body.wm2026 .file-field .btn { border-radius: 10px; }
body.wm2026 .file-field .file-path-wrapper input { color: var(--wm-text-2); }
body.wm2026 .select-wrapper input.select-dropdown:focus { border-bottom-color: var(--wm-primary); }

/* ---------- calendario ---------- */
body.wm2026 .datepicker-modal { border-radius: var(--wm-r-lg); overflow: hidden; }
body.wm2026 .datepicker-date-display { background: var(--wm-primary) !important; }
body.wm2026 .datepicker-date-display .date-text { font-family: var(--wm-font-head); }
body.wm2026 .datepicker-table td.is-selected { background: var(--wm-primary) !important; color: #fff !important; }
body.wm2026 .datepicker-table td.is-today { color: var(--wm-primary); }
body.wm2026 .datepicker-table td.is-disabled,
body.wm2026 .datepicker-table td.is-disabled .datepicker-day-button { color: #C9C1C7 !important; pointer-events: none; text-decoration: line-through; text-decoration-color: rgba(201, 193, 199, .6); }
body.wm2026 .datepicker-day-button:focus { background: var(--wm-primary-tint) !important; }
body.wm2026 .datepicker-cancel, body.wm2026 .datepicker-clear, body.wm2026 .datepicker-today, body.wm2026 .datepicker-done { color: var(--wm-primary) !important; }
body.wm2026 .datepicker-controls .select-month input { font-weight: 600; }
body.wm2026 .datepicker-container { background: var(--wm-surface); }

/* ---------- tablas ---------- */
body.wm2026 table { border-collapse: separate; border-spacing: 0; }
body.wm2026 table thead th, body.wm2026 table th {
  background: var(--wm-surface-alt);
  color: var(--wm-text-2);
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--wm-border);
}
body.wm2026 table td { border-bottom: 1px solid var(--wm-border); }
body.wm2026 table.striped > tbody > tr:nth-child(odd) { background: var(--wm-surface-alt); }
body.wm2026 table.highlight > tbody > tr:hover, body.wm2026 table tbody tr:hover { background: var(--wm-surface-alt); }
body.wm2026 .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body.wm2026 .pagination li.active { background: var(--wm-primary) !important; border-color: var(--wm-primary) !important; color: #fff !important; border-radius: var(--wm-r-sm); }
body.wm2026 .pagination li.active a { color: #fff; }

/* ---------- etiquetas, avisos y progreso ---------- */
body.wm2026 .badge, body.wm2026 span.badge.new { border-radius: 999px; font-weight: 600; }
body.wm2026 span.badge.new { background: var(--wm-primary); }
body.wm2026 .chip { border-radius: 999px; background: var(--wm-sunken); color: var(--wm-text-2); }
body.wm2026 .progress { background: var(--wm-sunken); border-radius: 999px; }
body.wm2026 .progress .determinate, body.wm2026 .progress .indeterminate { background: var(--wm-primary); }
body.wm2026 .toast { border-radius: var(--wm-r-md); background: var(--wm-text); }
body.wm2026 .modal { border-radius: var(--wm-r-lg); }
body.wm2026 .modal .modal-footer { background: var(--wm-surface-alt); }
body.wm2026 .tabs .tab a { color: var(--wm-text-2); }
body.wm2026 .tabs .tab a.active, body.wm2026 .tabs .tab a:hover { color: var(--wm-primary); }
body.wm2026 .tabs .indicator { background: var(--wm-primary); }
body.wm2026 .collection .collection-item.active { background: var(--wm-primary); }
body.wm2026 .custom_spinner { border-color: #fff; border-top-color: transparent; }

/* ---------- pie ---------- */
body.wm2026 footer.page-footer,
body.wm2026 footer.page-footer.gradient-45deg-indigo-purple {
  background: var(--wm-side-bg) !important;
  box-shadow: none !important;
}
body.wm2026 footer.page-footer h5 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: #8F8790 !important; font-family: var(--wm-font); font-weight: 700; }
body.wm2026 footer.page-footer, body.wm2026 footer.page-footer p, body.wm2026 footer.page-footer li { color: var(--wm-side-text); font-size: .86rem; }
body.wm2026 footer.page-footer a, body.wm2026 footer.page-footer .white-text { color: var(--wm-side-text) !important; }
body.wm2026 footer.page-footer a:hover { color: #fff !important; }
body.wm2026 footer.page-footer .footer-copyright { background: rgba(0, 0, 0, .2); color: #8F8790; }
body.wm2026 footer.page-footer .divider { background: var(--wm-side-border); }

/* ---------- acceso (Login.php) ---------- */
body.wm2026 #login .btn.gradient-45deg-purple-deep-purple { min-width: 120px; }
body.wm2026 .login_remember p { color: var(--wm-text-3); font-size: .86rem; }
body.wm2026 .btn.rounded-pill.btn-icon {
  background: var(--wm-surface) !important;
  color: var(--wm-text) !important;
  border: 1px solid var(--wm-border-strong);
  border-radius: 10px !important;
}
body.wm2026 .btn.rounded-pill.btn-icon:hover { border-color: var(--wm-primary); color: var(--wm-primary) !important; }
body.wm2026 .btn.rounded-pill.btn-icon i { color: inherit; }

/* ---------- móvil ---------- */
@media (max-width: 600px) {
  body.wm2026 #breadcrumbs-wrapper .breadcrumbs-title { font-size: 1.25rem; }
  body.wm2026 .card .card-content { padding: 18px 16px; }
  body.wm2026 .content-wrapper-before { height: 120px; }
}

/* ---------- refuerzos sobre reglas de la plantilla ---------- */
body.wm2026 h1, body.wm2026 h2, body.wm2026 h3, body.wm2026 h4, body.wm2026 h5, body.wm2026 h6,
body.wm2026 .card .card-title, body.wm2026 .breadcrumbs-title, body.wm2026 .breadcrumbs-title span,
body.wm2026 .card-stats-number { font-family: var(--wm-font-head) !important; }
body.wm2026, body.wm2026 p, body.wm2026 li, body.wm2026 td, body.wm2026 label, body.wm2026 input,
body.wm2026 textarea, body.wm2026 .btn, body.wm2026 .menu-title, body.wm2026 span:not(.material-icons):not([class*="mdi"]) { font-family: var(--wm-font) !important; }
body.wm2026 #slide-out li.brand-sidebar,
body.wm2026 .sidenav-main .sidenav li.brand-sidebar,
body.wm2026 .sidenav-main.nav-collapsible .brand-sidebar { background: var(--wm-side-bg) !important; height: auto !important; min-height: 72px; }
body.wm2026 #slide-out li.brand-sidebar img { width: auto !important; max-width: 80% !important; height: 42px !important; margin: 16px auto !important; display: block !important; }