/* ==========================================================================
   Diseño del CRM — hoja de estilos del sistema de diseño.
   Todo se expresa con variables --crmd-* (ver helpers/crm_design_helper.php).
   Los atributos data-crmd-* del <html> activan variantes (modo, barra lateral,
   header, densidad, botones). No se toca ningún archivo del CRM.
   ========================================================================== */

/* ---------- Base ---------- */
html[data-crmd-area] body {
  font-family: var(--crmd-font) !important;
  font-size: calc(14px * var(--crmd-font-scale));
  color: var(--crmd-text);
  background: var(--crmd-bg);
  -webkit-font-smoothing: antialiased;
}
html[data-crmd-area] h1, html[data-crmd-area] h2, html[data-crmd-area] h3, html[data-crmd-area] h4, html[data-crmd-area] h5, html[data-crmd-area] h6,
html[data-crmd-area] .btn, html[data-crmd-area] .form-control, html[data-crmd-area] .tooltip, html[data-crmd-area] .popover,
html[data-crmd-area] input, html[data-crmd-area] select, html[data-crmd-area] textarea, html[data-crmd-area] button {
  font-family: var(--crmd-font);
}
html[data-crmd-area] h1, html[data-crmd-area] h2, html[data-crmd-area] h3, html[data-crmd-area] h4 { letter-spacing: -0.015em; color: var(--crmd-text); }
html[data-crmd-area] a { color: var(--crmd-text); }
html[data-crmd-area] a:hover, html[data-crmd-area] a:focus { color: var(--crmd-text); opacity: .8; text-decoration: none; }
html[data-crmd-area] .text-muted, html[data-crmd-area] .tw-text-neutral-500, html[data-crmd-area] .tw-text-neutral-600 { color: var(--crmd-muted) !important; }
html[data-crmd-area] .tw-text-neutral-700, html[data-crmd-area] .tw-text-neutral-800, html[data-crmd-area] .tw-text-neutral-900, html[data-crmd-area] .text-dark { color: var(--crmd-text) !important; }
html[data-crmd-area] hr { border-color: var(--crmd-border); }
html[data-crmd-area] ::selection { background: var(--crmd-accent); color: var(--crmd-accent-text); }

/* Scrollbars finas */
html[data-crmd-area] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-crmd-area] ::-webkit-scrollbar-thumb { background: rgba(var(--crmd-text-rgb), .18); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
html[data-crmd-area] ::-webkit-scrollbar-track { background: transparent; }

/* ---------- Diagramación ---------- */
html[data-crmd-area="admin"] #wrapper {
  margin-left: var(--crmd-sidebar-w);
  background: var(--crmd-bg);
  transition: margin-left .2s ease;
}
html[data-crmd-area="admin"] .content { padding: var(--crmd-pad) calc(var(--crmd-pad) + 6px) 48px; }
html[data-crmd-area="admin"] .content > .row, html[data-crmd-area="admin"] .content > .panel_s, html[data-crmd-area="admin"] .content > div[class*="tw-"] {
  max-width: var(--crmd-content-max); margin-left: auto; margin-right: auto;
}
html[data-crmd-area="admin"] body.page-small #wrapper { margin-left: 0; }

/* ---------- Header ---------- */
html[data-crmd-area="admin"] #header {
  margin-left: var(--crmd-sidebar-w);
  background: var(--crmd-surface);
  box-shadow: none;
  border-bottom: 1px solid var(--crmd-border);
  transition: margin-left .2s ease;
}
html[data-crmd-header="floating"] #header { background: transparent; border-bottom: 0; }
html[data-crmd-area="admin"] body.page-small #header { margin-left: 0; }
html[data-crmd-area="admin"] #header .hide-menu { color: var(--crmd-muted); }
html[data-crmd-area="admin"] #header .hide-menu:hover { background: var(--crmd-surface-2); color: var(--crmd-text); }
html[data-crmd-area="admin"] #top_search input#search_input {
  background: var(--crmd-surface) !important;
  border: 1px solid var(--crmd-border) !important;
  border-radius: var(--crmd-radius-btn) !important;
  color: var(--crmd-text) !important;
  box-shadow: var(--crmd-shadow) !important;
  height: 40px;
}
html[data-crmd-header="flat"] #top_search input#search_input { background: var(--crmd-surface-2) !important; box-shadow: none !important; border-color: transparent !important; }
html[data-crmd-area="admin"] #top_search input#search_input:focus { border-color: var(--crmd-accent) !important; box-shadow: 0 0 0 3px var(--crmd-accent-soft) !important; }
html[data-crmd-area="admin"] #header .navbar-nav > li > a, html[data-crmd-area="admin"] #header .navbar-nav > li > a > span > i { color: var(--crmd-muted); }
html[data-crmd-area="admin"] #header .navbar-nav > li > a:hover, html[data-crmd-area="admin"] #header .navbar-nav > li > a:hover i { color: var(--crmd-text); }
html[data-crmd-area="admin"] #header li > a.active { background: var(--crmd-surface-2); }
html[data-crmd-area="admin"] #header .tw-bg-primary-600 { background: var(--crmd-primary) !important; color: var(--crmd-primary-text) !important; }
html[data-crmd-area="admin"] #header .tw-bg-primary-600:hover, html[data-crmd-area="admin"] #header .group-hover\:\!tw-bg-primary-700 { background: var(--crmd-primary-hover) !important; }
html[data-crmd-area="admin"] #header #logo img { height: 30px; }
html[data-crmd-area="admin"] #header .logo-text { color: var(--crmd-text); }

/* Botón claro/oscuro que añade el módulo */
.crmd-mode-toggle {
  margin: 9px 10px 0; width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--crmd-border);
  background: var(--crmd-surface); color: var(--crmd-muted); display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: var(--crmd-shadow); flex-shrink: 0;
}
.crmd-mode-toggle:hover { color: var(--crmd-text); border-color: var(--crmd-muted); }

/* ---------- Barra lateral ---------- */
/* El ancho sigue al estado real (el botón ☰ alterna iconos ↔ nombres), no al valor guardado */
@media (min-width: 769px) {
  html[data-crmd-sidebar="rail"] { --crmd-sidebar-w: 76px; }
  html[data-crmd-sidebar="full"] { --crmd-sidebar-w: 236px; }
  html[data-crmd-sidebar="full"] #side-menu > li > a .menu-text, html[data-crmd-sidebar="full"] #side-menu > li > a .fa.arrow { display: inline-block; }
}
/* Botón ☰ pegado al borde izquierdo del header */
html[data-crmd-area="admin"] .hide-menu { margin: 0 !important; float: none !important; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; color: var(--crmd-sidebar-muted) !important; }
html[data-crmd-area="admin"] .hide-menu:hover { background: var(--crmd-sidebar-hover) !important; color: var(--crmd-sidebar-text) !important; }
html[data-crmd-area="admin"] .crmd-menu-toggle { display: flex; justify-content: flex-end; align-items: center; height: 57px; padding: 0 6px; }
@media (min-width: 769px) {
  html[data-crmd-sidebar="rail"] .crmd-menu-toggle { justify-content: center; padding: 0; }
  html[data-crmd-sidebar="rail"] .sidebar-user-profile { margin-top: 8px !important; }
  html[data-crmd-sidebar="full"] .sidebar-user-profile { margin-top: 8px !important; }
}
@media (max-width: 768px) { html[data-crmd-area="admin"] .crmd-menu-toggle { display: none; } }
html[data-crmd-area="admin"] .sidebar {
  width: var(--crmd-sidebar-w) !important;
  background: var(--crmd-sidebar-bg);
  border-right: 1px solid var(--crmd-border);
  padding: 0 10px;
  transition: width .2s ease;
}
html[data-crmd-stheme="dark"] .sidebar { border-right-color: rgba(255,255,255,.06); }
html[data-crmd-area="admin"] .sidebar ul.nav li a {
  color: var(--crmd-sidebar-text);
  border: 0;
  border-radius: calc(var(--crmd-radius-ctrl) + 2px);
  padding: 9px 12px;
  margin: 3px 0;
  font-weight: 500;
  font-size: 13.5px;
  display: flex;
  align-items: center;
  gap: 12px;
  line-height: 1.3;
  transition: background .15s ease, color .15s ease;
}
html[data-crmd-area="admin"] .sidebar ul.nav li a i.menu-icon { margin: 0; float: none; width: 20px; font-size: 17px; color: var(--crmd-sidebar-muted); flex-shrink: 0; }
html[data-crmd-area="admin"] .sidebar ul.nav li a .fa.arrow { margin-left: auto; opacity: .6; }
html[data-crmd-area="admin"] .sidebar > ul.nav > li { border-left: 0; }
html[data-crmd-area="admin"] .sidebar > ul.nav > li:hover > a:first-child { background: var(--crmd-sidebar-hover); box-shadow: none; border: 0; }
html[data-crmd-area="admin"] .sidebar > ul.nav > li.active > a:first-child {
  background: var(--crmd-sidebar-active-bg); color: var(--crmd-sidebar-active-text);
  box-shadow: none; border: 0;
}
html[data-crmd-area="admin"] .sidebar > ul.nav > li.active > a:first-child i.menu-icon { color: var(--crmd-sidebar-active-text); }
html[data-crmd-area="admin"] .sidebar .nav-second-level { background: transparent; padding-left: 6px; }
html[data-crmd-area="admin"] .sidebar .nav-second-level li a { font-weight: 400; color: var(--crmd-sidebar-muted); padding: 7px 12px 7px 36px; }
html[data-crmd-area="admin"] .sidebar .nav-second-level li a:hover { color: var(--crmd-sidebar-text); background: var(--crmd-sidebar-hover); }
html[data-crmd-area="admin"] .sidebar .nav-second-level li.active a { color: var(--crmd-sidebar-text); font-weight: 600; background: var(--crmd-sidebar-hover); }
html[data-crmd-area="admin"] .sidebar .badge { background: var(--crmd-accent) !important; color: var(--crmd-accent-text) !important; border-radius: 999px; font-weight: 600; }
html[data-crmd-area="admin"] .sidebar-user-profile a.profile {
  background: var(--crmd-surface-2) !important; border-color: transparent !important; border-radius: calc(var(--crmd-radius-ctrl) + 2px) !important; box-shadow: none !important;
  color: var(--crmd-sidebar-text) !important;
}
html[data-crmd-stheme="dark"] .sidebar-user-profile a.profile { background: rgba(255,255,255,.06) !important; }
html[data-crmd-area="admin"] .sidebar-user-profile a.profile span span { color: var(--crmd-sidebar-text) !important; }
html[data-crmd-area="admin"] .sidebar-user-profile a.profile span span.tw-text-sm { color: var(--crmd-sidebar-muted) !important; }

/* El módulo "Theme Style" del CRM inyecta colores con selectores por ID (#side-menu) que ganan a los de
   arriba; se repiten aquí con la misma fuerza y !important para que la barra lateral siempre sea legible. */
html[data-crmd-area="admin"] body.admin .sidebar { background: var(--crmd-sidebar-bg) !important; }
html[data-crmd-area="admin"] .admin #side-menu li a, html[data-crmd-area="admin"] .admin #setup-menu li a { color: var(--crmd-sidebar-text) !important; }
html[data-crmd-area="admin"] .admin #side-menu li a i.menu-icon, html[data-crmd-area="admin"] .admin #setup-menu li a i.menu-icon { color: var(--crmd-sidebar-muted) !important; }
html[data-crmd-area="admin"] .admin #side-menu > li:hover > a:first-child, html[data-crmd-area="admin"] .admin #setup-menu > li:hover > a:first-child { background: var(--crmd-sidebar-hover) !important; }
html[data-crmd-area="admin"] .admin #side-menu > li.active > a:first-child, html[data-crmd-area="admin"] .admin #setup-menu > li.active > a:first-child {
  background: var(--crmd-sidebar-active-bg) !important; color: var(--crmd-sidebar-active-text) !important;
}
html[data-crmd-area="admin"] .admin #side-menu > li.active > a:first-child i.menu-icon,
html[data-crmd-area="admin"] .admin #setup-menu > li.active > a:first-child i.menu-icon { color: var(--crmd-sidebar-active-text) !important; }
html[data-crmd-area="admin"] .admin #side-menu .nav-second-level li a { color: var(--crmd-sidebar-muted) !important; background: transparent !important; }
html[data-crmd-area="admin"] .admin #side-menu .nav-second-level li a:hover,
html[data-crmd-area="admin"] .admin #side-menu .nav-second-level li.active > a { color: var(--crmd-sidebar-text) !important; background: var(--crmd-sidebar-hover) !important; }
html[data-crmd-area="admin"] .admin .sidebar-user-profile a.profile, html[data-crmd-area="admin"] .admin .sidebar-user-profile a.profile span { color: var(--crmd-sidebar-text) !important; }
html[data-crmd-area="admin"] .admin #setup-menu-wrapper .customizer-heading, html[data-crmd-area="admin"] .admin #setup-menu-wrapper .close-customizer { color: var(--crmd-sidebar-text) !important; }

/* Barra lateral de iconos (rail) — solo escritorio */
@media (min-width: 769px) {
  html[data-crmd-sidebar="rail"] .sidebar { padding: 0 12px; overflow: visible; }
  html[data-crmd-sidebar="rail"] .sidebar-user-profile { margin: 72px 0 0 !important; display: flex; justify-content: center; }
  html[data-crmd-sidebar="rail"] .sidebar-user-profile a.profile { padding: 6px !important; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; }
  html[data-crmd-sidebar="rail"] .sidebar-user-profile a.profile span > span:last-child { display: none; }
  html[data-crmd-sidebar="rail"] .sidebar-user-profile .dropdown-menu { left: 56px; top: 0; min-width: 220px; }
  html[data-crmd-sidebar="rail"] #side-menu, html[data-crmd-sidebar="rail"] #setup-menu { margin-top: 12px !important; }
  html[data-crmd-sidebar="rail"] #side-menu > li { position: relative; }
  html[data-crmd-sidebar="rail"] #side-menu > li > a { justify-content: center; padding: 12px 0; margin: 4px 0; width: 52px; margin-left: auto; margin-right: auto; }
  html[data-crmd-sidebar="rail"] #side-menu > li > a .menu-text,
  html[data-crmd-sidebar="rail"] #side-menu > li > a .fa.arrow { display: none; }
  html[data-crmd-sidebar="rail"] #side-menu > li > a .badge { position: absolute; top: 2px; right: 2px; font-size: 10px; padding: 2px 5px; }
  html[data-crmd-sidebar="rail"] #side-menu > li > a i.menu-icon { width: auto; font-size: 18px; }
  /* etiqueta flotante al pasar el mouse */
  html[data-crmd-sidebar="rail"] #side-menu > li > a[data-crmd-label]:hover::after {
    content: attr(data-crmd-label); position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%);
    background: var(--crmd-ink); color: var(--crmd-ink-text); padding: 6px 10px; border-radius: 10px; font-size: 12px; font-weight: 600;
    white-space: nowrap; z-index: 1200; pointer-events: none; box-shadow: var(--crmd-shadow-pop);
  }
  html[data-crmd-sidebar="rail"] #side-menu > li:has(> ul.nav-second-level) > a[data-crmd-label]:hover::after { display: none; }
  /* submenús como panel flotante */
  html[data-crmd-sidebar="rail"] #side-menu > li > ul.nav-second-level {
    display: none !important; position: absolute; left: calc(100% + 10px); top: 0; min-width: 230px; padding: 10px;
    background: var(--crmd-surface); border: 1px solid var(--crmd-border); border-radius: var(--crmd-radius-card);
    box-shadow: var(--crmd-shadow-pop); z-index: 1200; height: auto !important;
  }
  html[data-crmd-sidebar="rail"] #side-menu > li:hover > ul.nav-second-level,
  html[data-crmd-sidebar="rail"] #side-menu > li.crmd-open > ul.nav-second-level { display: block !important; }
  html[data-crmd-sidebar="rail"] #side-menu > li > ul.nav-second-level::before {
    content: attr(data-crmd-title); display: block; }
  html[data-crmd-sidebar="rail"] #side-menu > li > ul.nav-second-level li a { color: var(--crmd-muted); padding: 8px 12px; border-radius: var(--crmd-radius-ctrl); }
  html[data-crmd-sidebar="rail"] #side-menu > li > ul.nav-second-level li a:hover { background: var(--crmd-surface-2); color: var(--crmd-text); }
  html[data-crmd-sidebar="rail"] #side-menu > li > ul.nav-second-level li.active a { background: var(--crmd-surface-2); color: var(--crmd-text); font-weight: 600; }
  html[data-crmd-sidebar="rail"] #side-menu > li > ul.nav-second-level li a .menu-icon { color: var(--crmd-muted); }
}

/* ---------- Tarjetas / paneles ---------- */
html[data-crmd-area] .panel_s,
html[data-crmd-area] .top_stats_wrapper,
html[data-crmd-area] .widget > .tw-bg-white,
html[data-crmd-area] .content .tw-bg-white.tw-rounded-lg,
html[data-crmd-area] .content .tw-bg-white.tw-border,
html[data-crmd-area] .kan-ban-col .panel-body,
html[data-crmd-area] .panel-full-width,
html[data-crmd-area] .well {
  background: var(--crmd-surface) !important;
  border: 1px solid var(--crmd-border) !important;
  border-radius: var(--crmd-radius-card) !important;
  box-shadow: var(--crmd-shadow) !important;
}
html[data-crmd-area] .panel_s { margin-bottom: var(--crmd-gap); }
html[data-crmd-area] .panel_s .panel-body { padding: var(--crmd-pad); border-radius: inherit; }
html[data-crmd-area] .panel_s .panel-heading, html[data-crmd-area] .panel_s .panel-footer {
  background: transparent; border-color: var(--crmd-border); padding: 14px var(--crmd-pad);
}
html[data-crmd-area] .panel_s .panel-heading { border-radius: var(--crmd-radius-card) var(--crmd-radius-card) 0 0; font-weight: 600; }
html[data-crmd-area] .panel_s .panel-footer { border-radius: 0 0 var(--crmd-radius-card) var(--crmd-radius-card); }
html[data-crmd-area] .panel_s .panel_s { box-shadow: none !important; }
html[data-crmd-area] .hr-panel-heading { border-color: var(--crmd-border); }
html[data-crmd-area] .widget { margin-bottom: var(--crmd-gap); }
html[data-crmd-area] .widget-dragger { color: var(--crmd-border); }

/* KPIs del dashboard: número grande y etiqueta pequeña, como en las referencias */
html[data-crmd-area] .top_stats_wrapper { padding: 18px 20px 20px; }
html[data-crmd-area] .top_stats_wrapper .tw-font-medium.tw-inline-flex { font-size: 12.5px; color: var(--crmd-muted) !important; font-weight: 500; }
html[data-crmd-area] .top_stats_wrapper .tw-font-medium.tw-inline-flex svg { color: var(--crmd-muted) !important; width: 18px; height: 18px; }
html[data-crmd-area] .top_stats_wrapper > div > .tw-font-semibold { font-size: 1.55rem; font-weight: 600; color: var(--crmd-text) !important; letter-spacing: -0.02em; }

/* ---------- Botones ---------- */
html[data-crmd-area] .btn {
  border-radius: var(--crmd-radius-btn);
  font-weight: 600;
  padding: 7px 16px;
  border: 1px solid transparent;
  box-shadow: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .05s ease;
}
html[data-crmd-area] .btn:active { transform: translateY(1px); }
html[data-crmd-area] .btn-xs { padding: 3px 10px; font-size: 12px; }
html[data-crmd-area] .btn-sm { padding: 5px 13px; font-size: 13px; }
html[data-crmd-area] .btn-lg { padding: 10px 22px; }
html[data-crmd-area] .btn-primary, html[data-crmd-area] .btn-primary:focus {
  background: var(--crmd-primary) !important; border-color: var(--crmd-primary) !important; color: var(--crmd-primary-text) !important;
}
html[data-crmd-area] .btn-primary:hover, html[data-crmd-area] .btn-primary:active, html[data-crmd-area] .btn-primary.active, html[data-crmd-area] .open > .dropdown-toggle.btn-primary {
  background: var(--crmd-primary-hover) !important; border-color: var(--crmd-primary-hover) !important; color: var(--crmd-primary-text) !important;
}
html[data-crmd-area] .btn-default, html[data-crmd-area] .btn-default:focus {
  background: var(--crmd-surface) !important; border-color: var(--crmd-border) !important; color: var(--crmd-text) !important;
}
html[data-crmd-area] .btn-default:hover, html[data-crmd-area] .btn-default:active, html[data-crmd-area] .btn-default.active, html[data-crmd-area] .open > .dropdown-toggle.btn-default {
  background: var(--crmd-surface-2) !important; border-color: var(--crmd-border) !important; color: var(--crmd-text) !important;
}
html[data-crmd-area] .btn-success { background: var(--crmd-success); border-color: var(--crmd-success); }
html[data-crmd-area] .btn-info { background: var(--crmd-info); border-color: var(--crmd-info); }
html[data-crmd-area] .btn-warning { background: var(--crmd-warning); border-color: var(--crmd-warning); }
html[data-crmd-area] .btn-danger { background: var(--crmd-danger); border-color: var(--crmd-danger); }
html[data-crmd-area] .btn-success:hover, html[data-crmd-area] .btn-info:hover, html[data-crmd-area] .btn-warning:hover, html[data-crmd-area] .btn-danger:hover { filter: brightness(.92); }
html[data-crmd-area] .btn-link { color: var(--crmd-text); }
html[data-crmd-area] .btn-icon, html[data-crmd-area] .btn.btn-icon { width: 36px; height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; }
html[data-crmd-area] .btn-group > .btn:not(:first-child):not(:last-child) { border-radius: 0; }
html[data-crmd-area] .btn-group > .btn:first-child:not(:last-child) { border-radius: var(--crmd-radius-btn) 0 0 var(--crmd-radius-btn); }
html[data-crmd-area] .btn-group > .btn:last-child:not(:first-child), html[data-crmd-area] .btn-group > .dropdown-toggle:not(:first-child) { border-radius: 0 var(--crmd-radius-btn) var(--crmd-radius-btn) 0; }
html[data-crmd-area] .input-group .form-control:first-child { border-radius: var(--crmd-radius-ctrl) 0 0 var(--crmd-radius-ctrl); }
html[data-crmd-area] .input-group-btn:last-child > .btn { border-radius: 0 var(--crmd-radius-ctrl) var(--crmd-radius-ctrl) 0; }
html[data-crmd-area] .input-group-addon { background: var(--crmd-surface-2); border-color: transparent; color: var(--crmd-muted); border-radius: var(--crmd-radius-ctrl); }
html[data-crmd-area] .screen-options-btn { background: var(--crmd-surface); color: var(--crmd-muted); border: 1px solid var(--crmd-border); border-top: 0; border-radius: 0 0 var(--crmd-radius-ctrl) var(--crmd-radius-ctrl); }

/* ---------- Formularios ---------- */
html[data-crmd-area] .form-control,
html[data-crmd-area] .bootstrap-select > .btn.dropdown-toggle,
html[data-crmd-area] .selectpicker,
html[data-crmd-area] .select2-container .select2-selection,
html[data-crmd-area] .tagsinput, html[data-crmd-area] .bootstrap-tagsinput {
  background: var(--crmd-surface-2) !important;
  border: 1px solid transparent !important;
  border-radius: var(--crmd-radius-ctrl) !important;
  color: var(--crmd-text) !important;
  box-shadow: none !important;
  min-height: 38px;
  padding: 7px 12px;
}
html[data-crmd-area] .form-control:focus,
html[data-crmd-area] .bootstrap-select.open > .btn.dropdown-toggle,
html[data-crmd-area] .bootstrap-tagsinput:focus-within {
  border-color: var(--crmd-accent) !important; box-shadow: 0 0 0 3px var(--crmd-accent-soft) !important; background: var(--crmd-surface) !important;
}
html[data-crmd-area] .form-control::placeholder { color: var(--crmd-muted); opacity: .8; }
html[data-crmd-area] .form-control[readonly], html[data-crmd-area] .form-control[disabled] { background: var(--crmd-surface-3) !important; color: var(--crmd-muted) !important; }
html[data-crmd-area] textarea.form-control { min-height: 84px; }
html[data-crmd-area] .form-group label, html[data-crmd-area] label.control-label { color: var(--crmd-muted); font-size: 12.5px; font-weight: 600; text-transform: none; }
html[data-crmd-area] .bootstrap-select > .btn.dropdown-toggle { font-weight: 400; }
html[data-crmd-area] .bootstrap-select.btn-group .dropdown-toggle .caret { right: 14px; }
html[data-crmd-area] .checkbox input[type=checkbox]:checked + label::before, html[data-crmd-area] .radio input[type=radio]:checked + label::before { background: var(--crmd-primary); border-color: var(--crmd-primary); }
html[data-crmd-area] .onoffswitch-inner::before { background: var(--crmd-primary) !important; }
html[data-crmd-area] .checkbox-primary input[type="checkbox"]:checked + label::before { background: var(--crmd-primary); border-color: var(--crmd-primary); }
html[data-crmd-area] .checkbox label::before, html[data-crmd-area] .radio label::before { border-color: var(--crmd-border); background: var(--crmd-surface); }
html[data-crmd-area] .has-error .form-control { border-color: var(--crmd-danger) !important; }

/* ---------- Tablas ---------- */
html[data-crmd-area] .table { color: var(--crmd-text); }
html[data-crmd-area] .table > thead > tr > th, html[data-crmd-area] table.dataTable thead tr > th, html[data-crmd-area] .table.dataTable > thead:first-child > tr:first-child > th {
  border-top: 0; border-bottom: 1px solid var(--crmd-border) !important;
  color: var(--crmd-muted) !important; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  padding: var(--crmd-row-pad) 12px; background: transparent !important;
}
html[data-crmd-area] .table > tbody > tr > td, html[data-crmd-area] table.dataTable tbody td { border-top: 1px solid var(--crmd-border) !important; padding: var(--crmd-row-pad) 12px; vertical-align: middle; }
html[data-crmd-area] .table > tbody > tr:first-child > td { border-top: 0 !important; }
html[data-crmd-area] .table-hover > tbody > tr:hover, html[data-crmd-area] table.dataTable tbody tr:hover > td { background: var(--crmd-surface-2) !important; }
html[data-crmd-area] .table-striped > tbody > tr:nth-of-type(odd) { background: transparent; }
html[data-crmd-area] .table-bordered, html[data-crmd-area] .table-bordered > thead > tr > th, html[data-crmd-area] .table-bordered > tbody > tr > td { border-color: var(--crmd-border) !important; }
html[data-crmd-area] .table-bordered { border-radius: var(--crmd-radius-ctrl); overflow: hidden; }
html[data-crmd-area] .dataTables_wrapper table tbody a:not(.btn) { color: var(--crmd-text); font-weight: 500; }
html[data-crmd-area] .dataTables_wrapper table tbody a:not(.btn):hover { color: var(--crmd-text); text-decoration: underline; text-decoration-color: var(--crmd-accent); text-underline-offset: 3px; opacity: 1; }
html[data-crmd-area] .table.items thead, html[data-crmd-area] .table.items > thead > tr > th { background: var(--crmd-surface-2) !important; border-color: var(--crmd-surface-2) !important; color: var(--crmd-muted) !important; }
html[data-crmd-area] .dataTables_wrapper .dataTables_length select, html[data-crmd-area] .dataTables_wrapper .dataTables_filter input { background: var(--crmd-surface-2); border: 1px solid transparent; border-radius: var(--crmd-radius-ctrl); padding: 6px 12px; color: var(--crmd-text); }
html[data-crmd-area] .dataTables_wrapper .dataTables_filter input:focus { border-color: var(--crmd-accent); outline: 0; box-shadow: 0 0 0 3px var(--crmd-accent-soft); }
html[data-crmd-area] .dataTables_wrapper .dataTables_info { color: var(--crmd-muted); font-size: 12.5px; }
html[data-crmd-area] .pagination > li > a, html[data-crmd-area] .pagination > li > span { border: 0; color: var(--crmd-muted); background: transparent; margin: 0 2px; border-radius: 999px !important; min-width: 32px; text-align: center; }
html[data-crmd-area] .pagination > li > a:hover { background: var(--crmd-surface-2); color: var(--crmd-text); }
html[data-crmd-area] .pagination > .active > a, html[data-crmd-area] .pagination > .active > a:hover { background: var(--crmd-ink); color: var(--crmd-ink-text); }
html[data-crmd-area] .table-loading .dt-loader, html[data-crmd-area] .dt-loader { border-top-color: var(--crmd-accent) !important; }
/* El panel redondeado recorta la tabla: sin esto las filas y los fondos de hover sobresalen de las esquinas */
html[data-crmd-area] .panel_s:has(> .panel-body > .dataTables_wrapper), html[data-crmd-area] .panel_s:has(> .panel-body > div > .dataTables_wrapper),
html[data-crmd-area] .panel_s.panel-table-full, html[data-crmd-area] .panel_s:has(> .panel-body > .table-responsive) { overflow: hidden; }
html[data-crmd-area] .dataTables_wrapper { overflow-x: auto; }
html[data-crmd-area] table.dataTable tbody tr.odd, html[data-crmd-area] table.dataTable tbody tr.even, html[data-crmd-area] table.dataTable.stripe tbody tr.odd { background: transparent !important; }
html[data-crmd-area] table.dataTable tbody tr.selected > td, html[data-crmd-area] table.dataTable tbody tr.selected { background: var(--crmd-accent-soft) !important; }
html[data-crmd-area] .table > thead > tr > th { white-space: nowrap; }
html[data-crmd-area] .onoffswitch { margin: 0; }
html[data-crmd-area] .onoffswitch-label { border-color: transparent; }
html[data-crmd-area] .onoffswitch-inner::before, html[data-crmd-area] .onoffswitch-inner::after { height: 22px; line-height: 22px; }
html[data-crmd-area] .onoffswitch-inner::after { background: var(--crmd-surface-3) !important; }
html[data-crmd-area] .onoffswitch-switch { border-color: transparent; }

/* ---------- Etiquetas / badges: píldoras con tinte suave ---------- */
html[data-crmd-area] .label { border-radius: 999px; padding: 4px 10px; font-weight: 600; font-size: 11.5px; letter-spacing: .01em; display: inline-block; }
html[data-crmd-area] .label-default, html[data-crmd-area] .label-primary { background: var(--crmd-surface-3); color: var(--crmd-text); }
html[data-crmd-area] .label-success { background: rgba(22,163,74,.14); color: #15803D; }
html[data-crmd-area] .label-info { background: rgba(37,99,235,.14); color: #1D4ED8; }
html[data-crmd-area] .label-warning { background: rgba(217,119,6,.16); color: #B45309; }
html[data-crmd-area] .label-danger { background: rgba(220,38,38,.14); color: #B91C1C; }
html[data-crmd-mode="dark"] .label-success { color: #4ADE80; } html[data-crmd-mode="dark"] .label-info { color: #93C5FD; }
html[data-crmd-mode="dark"] .label-warning { color: #FBBF24; } html[data-crmd-mode="dark"] .label-danger { color: #FCA5A5; }
html[data-crmd-area] .label-tag { background: var(--crmd-accent-soft); color: var(--crmd-text); }
html[data-crmd-area] .badge { border-radius: 999px; font-weight: 600; }
html[data-crmd-area] .bg-primary, html[data-crmd-area] .badge.bg-info { background: var(--crmd-primary) !important; color: var(--crmd-primary-text) !important; }

/* ---------- Pestañas: píldoras con el activo en negro ---------- */
html[data-crmd-area] .nav-tabs { border-bottom: 0; display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--crmd-surface-2); border-radius: var(--crmd-radius-btn); margin-bottom: 14px; }
html[data-crmd-area] .nav-tabs > li { margin: 0; float: none; }
html[data-crmd-area] .nav-tabs > li > a { border: 0 !important; border-radius: var(--crmd-radius-btn); color: var(--crmd-muted); padding: 7px 14px; font-weight: 500; margin: 0; background: transparent; line-height: 1.3; }
html[data-crmd-area] .nav-tabs > li > a:hover { color: var(--crmd-text); background: rgba(var(--crmd-text-rgb), .06); }
html[data-crmd-area] .nav-tabs > li.active > a, html[data-crmd-area] .nav-tabs > li.active > a:hover, html[data-crmd-area] .nav-tabs > li.active > a:focus {
  background: var(--crmd-ink) !important; color: var(--crmd-ink-text) !important; border: 0 !important;
}
html[data-crmd-area] .nav-tabs.nav-tabs-horizontal, html[data-crmd-area] .horizontal-tabs .nav-tabs { display: inline-flex; }
html[data-crmd-area] .tab-content { border: 0; }
html[data-crmd-area] .nav-pills > li > a { border-radius: var(--crmd-radius-btn); color: var(--crmd-muted); }
html[data-crmd-area] .nav-pills > li.active > a, html[data-crmd-area] .nav-pills > li.active > a:hover { background: var(--crmd-ink); color: var(--crmd-ink-text); }
/* perfil de cliente / proyecto: menú vertical de pestañas */
html[data-crmd-area] .customer-tabs a, html[data-crmd-area] .project-menu a { border-radius: var(--crmd-radius-ctrl) !important; color: var(--crmd-muted); }
html[data-crmd-area] .customer-tabs li.active a, html[data-crmd-area] .customer-tabs a.active, html[data-crmd-area] .project-menu li.active a { background: var(--crmd-ink) !important; color: var(--crmd-ink-text) !important; }

/* ---------- Dropdowns / modales / popovers / alertas ---------- */
html[data-crmd-area] .dropdown-menu { border: 1px solid var(--crmd-border); border-radius: calc(var(--crmd-radius-ctrl) + 4px); box-shadow: var(--crmd-shadow-pop); padding: 8px; background: var(--crmd-surface); }
html[data-crmd-area] .dropdown-menu > li > a { border-radius: calc(var(--crmd-radius-ctrl) - 2px); color: var(--crmd-text); padding: 8px 12px; }
html[data-crmd-area] .dropdown-menu > li > a:hover, html[data-crmd-area] .dropdown-menu > li > a:focus { background: var(--crmd-surface-2); color: var(--crmd-text); }
html[data-crmd-area] .dropdown-menu .divider { background: var(--crmd-border); }
html[data-crmd-area] .dropdown-header { color: var(--crmd-muted); }
html[data-crmd-area] .modal-content { border: 0; border-radius: var(--crmd-radius-card); box-shadow: var(--crmd-shadow-pop); background: var(--crmd-surface); color: var(--crmd-text); }
html[data-crmd-area] .modal-header { border-bottom: 1px solid var(--crmd-border); padding: 18px var(--crmd-pad); background: transparent !important; }
html[data-crmd-area] .modal-header .modal-title, html[data-crmd-area] .modal-header .close { color: var(--crmd-text) !important; }
html[data-crmd-area] .modal-body { padding: var(--crmd-pad); }
html[data-crmd-area] .modal-footer { border-top: 1px solid var(--crmd-border); padding: 14px var(--crmd-pad); }
html[data-crmd-area] .modal-backdrop.in { opacity: .35; }
html[data-crmd-mode="dark"] .modal-backdrop.in { opacity: .7; }
html[data-crmd-area] .popover { border: 1px solid var(--crmd-border); border-radius: var(--crmd-radius-ctrl); box-shadow: var(--crmd-shadow-pop); background: var(--crmd-surface); color: var(--crmd-text); }
html[data-crmd-area] .popover-title { background: transparent; border-color: var(--crmd-border); }
html[data-crmd-area] .tooltip-inner { background: var(--crmd-ink); color: var(--crmd-ink-text); border-radius: 10px; padding: 6px 10px; font-weight: 500; }
html[data-crmd-area] .tooltip.top .tooltip-arrow { border-top-color: var(--crmd-ink); } html[data-crmd-area] .tooltip.bottom .tooltip-arrow { border-bottom-color: var(--crmd-ink); }
html[data-crmd-area] .tooltip.left .tooltip-arrow { border-left-color: var(--crmd-ink); } html[data-crmd-area] .tooltip.right .tooltip-arrow { border-right-color: var(--crmd-ink); }
html[data-crmd-area] .alert { border: 0; border-radius: var(--crmd-radius-ctrl); font-weight: 500; }
html[data-crmd-area] .alert-success { background: rgba(22,163,74,.12); color: #166534; } html[data-crmd-area] .alert-info { background: rgba(37,99,235,.12); color: #1E40AF; }
html[data-crmd-area] .alert-warning { background: rgba(217,119,6,.14); color: #92400E; } html[data-crmd-area] .alert-danger { background: rgba(220,38,38,.12); color: #991B1B; }
html[data-crmd-mode="dark"] .alert-success { color: #86EFAC; } html[data-crmd-mode="dark"] .alert-info { color: #BFDBFE; } html[data-crmd-mode="dark"] .alert-warning { color: #FCD34D; } html[data-crmd-mode="dark"] .alert-danger { color: #FECACA; }
html[data-crmd-area] .float-alert { border-radius: var(--crmd-radius-card); box-shadow: var(--crmd-shadow-pop); }

/* ---------- Progreso, listas, misceláneo ---------- */
html[data-crmd-area] .progress { height: 8px; border-radius: 999px; background: var(--crmd-surface-3); box-shadow: none; }
html[data-crmd-area] .progress-bar { border-radius: 999px; box-shadow: none; background: var(--crmd-accent); }
html[data-crmd-area] .progress-bar-success { background: var(--crmd-success); } html[data-crmd-area] .progress-bar-danger { background: var(--crmd-danger); }
html[data-crmd-area] .progress-bar-warning { background: var(--crmd-warning); } html[data-crmd-area] .progress-bar-info { background: var(--crmd-info); }
html[data-crmd-area] .list-group-item { background: var(--crmd-surface); border-color: var(--crmd-border); color: var(--crmd-text); }
html[data-crmd-area] .breadcrumb { background: transparent; padding-left: 0; }
html[data-crmd-area] .breadcrumb > li + li::before { color: var(--crmd-border); }
html[data-crmd-area] .kan-ban-col { background: var(--crmd-surface-2); border-radius: var(--crmd-radius-card); }
/* Cada columna conserva el color de su estado (viene en línea desde Perfex) como una píldora de color */
html[data-crmd-area] .kan-ban-col .panel-heading { border: 0 !important; font-weight: 600; color: #fff !important; border-radius: var(--crmd-radius-ctrl) !important; margin: 8px 8px 0; padding: 10px 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }
html[data-crmd-area] .kan-ban-col .panel-heading a, html[data-crmd-area] .kan-ban-col .panel-heading span { color: #fff !important; }
html[data-crmd-area] .kan-ban-col .kan-ban-task, html[data-crmd-area] .kan-ban-col .panel-body .panel { border-radius: var(--crmd-radius-ctrl) !important; border: 1px solid var(--crmd-border) !important; box-shadow: var(--crmd-shadow) !important; }
html[data-crmd-area] .staff-profile-image-small, html[data-crmd-area] .client-profile-image-small { border-radius: 999px; }
html[data-crmd-area] .tw-shadow-sm, html[data-crmd-area] .tw-shadow-xs { box-shadow: var(--crmd-shadow) !important; }
html[data-crmd-area] .tw-border-neutral-300, html[data-crmd-area] .tw-border-neutral-300\/80, html[data-crmd-area] .tw-border-neutral-200 { border-color: var(--crmd-border) !important; }
html[data-crmd-area] .tw-rounded-lg { border-radius: var(--crmd-radius-ctrl) !important; }
html[data-crmd-area] .tw-bg-neutral-50, html[data-crmd-area] .tw-bg-neutral-100 { background: var(--crmd-surface-2) !important; }
html[data-crmd-area] .mail-list li, html[data-crmd-area] .note { border-color: var(--crmd-border); }
html[data-crmd-area] .fc-toolbar .fc-button, html[data-crmd-area] .fc .fc-button { border-radius: var(--crmd-radius-btn) !important; background: var(--crmd-surface) !important; border-color: var(--crmd-border) !important; color: var(--crmd-text) !important; }
html[data-crmd-area] .fc .fc-button-primary:not(:disabled).fc-button-active { background: var(--crmd-ink) !important; color: var(--crmd-ink-text) !important; }
html[data-crmd-area] .fc-event, html[data-crmd-area] .fc-event-dot { background: var(--crmd-accent) !important; border-color: var(--crmd-accent) !important; color: var(--crmd-accent-text) !important; border-radius: 8px; }
html[data-crmd-area] .fc th, html[data-crmd-area] .fc td, html[data-crmd-area] .fc-theme-standard td, html[data-crmd-area] .fc-theme-standard th { border-color: var(--crmd-border) !important; }

/* ---------- Modo oscuro: superficies de utilidades Tailwind que usa el CRM ---------- */
html[data-crmd-mode="dark"] .tw-bg-white, html[data-crmd-mode="dark"] .\!tw-bg-white { background: var(--crmd-surface) !important; }
html[data-crmd-mode="dark"] .\!tw-bg-neutral-100 { background: var(--crmd-surface-2) !important; }
html[data-crmd-mode="dark"] .tw-text-neutral-400 { color: var(--crmd-muted) !important; }
html[data-crmd-mode="dark"] .form-control, html[data-crmd-mode="dark"] select option { color: var(--crmd-text); }
html[data-crmd-mode="dark"] .table > tbody > tr > td, html[data-crmd-mode="dark"] .table > thead > tr > th { color: var(--crmd-text); }
/* El cuerpo/pie de los paneles traen fondo blanco fijo en Perfex: en oscuro (y vidrio) debe ser transparente, el fondo lo da la tarjeta */
html[data-crmd-area] .panel_s > .panel-body, html[data-crmd-area] .panel_s > .panel-footer, html[data-crmd-area] .panel_s > .panel-heading:not([data-status-id]):not([style*="background"]),
html[data-crmd-area] .panel_s .panel-body > .row, html[data-crmd-area] .tab-content, html[data-crmd-area] .tab-pane { background-color: transparent !important; }
html[data-crmd-mode="dark"] label, html[data-crmd-mode="dark"] .control-label, html[data-crmd-mode="dark"] .form-group > label { color: var(--crmd-muted) !important; }
html[data-crmd-mode="dark"] .content, html[data-crmd-mode="dark"] .panel_s, html[data-crmd-mode="dark"] .modal-content, html[data-crmd-mode="dark"] p, html[data-crmd-mode="dark"] .content span:not(.label):not(.badge):not([class*="text-"]) { color: var(--crmd-text); }
html[data-crmd-mode="dark"] .widget, html[data-crmd-mode="dark"] .top_stats_wrapper, html[data-crmd-mode="dark"] .top_stats_wrapper *:not(.label):not(.badge):not(.btn) { color: var(--crmd-text); }
html[data-crmd-mode="dark"] .top_stats_wrapper .text-muted, html[data-crmd-mode="dark"] .top_stats_wrapper small { color: var(--crmd-muted) !important; }
html[data-crmd-mode="dark"] .progress { background: var(--crmd-surface-3) !important; }
html[data-crmd-mode="dark"] .list-group-item, html[data-crmd-mode="dark"] .dashboard-widget-list li { background: transparent !important; color: var(--crmd-text); border-color: var(--crmd-border) !important; }
html[data-crmd-mode="dark"] .content .tw-text-neutral-700 a, html[data-crmd-mode="dark"] .content a.tw-text-neutral-700, html[data-crmd-mode="dark"] .content a.tw-text-neutral-900 { color: var(--crmd-text) !important; }
/* Perfex saca la tabla con márgenes negativos hasta el borde de la tarjeta; aquí la tarjeta ya trae su relleno → sin márgenes, o la 1.ª columna queda mocha */
html[data-crmd-area] .panel-table-full .table-responsive, html[data-crmd-area] .panel-body .table-responsive { margin-left: 0 !important; margin-right: 0 !important; }
html[data-crmd-area] .panel-table-full .dataTables_wrapper, html[data-crmd-area] .panel-table-full > div { margin-left: 0; margin-right: 0; }
html[data-crmd-area] .table-responsive { border: 0; }
/* Filas y cabeceras de tablas: nunca con fondo blanco propio (DataTables lo trae); el fondo lo da la tarjeta */
html[data-crmd-area] table.dataTable tbody tr, html[data-crmd-area] .table > tbody > tr, html[data-crmd-area] table.dataTable tbody tr > td,
html[data-crmd-area] table.dataTable thead tr, html[data-crmd-area] table.dataTable thead th, html[data-crmd-area] .table > thead > tr > th,
html[data-crmd-area] table.dataTable tbody tr.has-row-options, html[data-crmd-area] table.dataTable.table-striped tbody tr { background-color: transparent !important; background-image: none !important; }
html[data-crmd-mode="dark"] .table a:not(.btn), html[data-crmd-mode="dark"] table.dataTable tbody a:not(.btn) { color: var(--crmd-text) !important; }
html[data-crmd-mode="dark"] .table .text-muted, html[data-crmd-mode="dark"] .table small, html[data-crmd-mode="dark"] .table [class*="tw-text-neutral-"] { color: var(--crmd-muted) !important; }
html[data-crmd-mode="dark"] .dataTables_wrapper .dataTables_length select, html[data-crmd-mode="dark"] .dataTables_wrapper .dataTables_filter input { color: var(--crmd-text); background: var(--crmd-surface-3); }
html[data-crmd-mode="dark"] input[type="checkbox"], html[data-crmd-mode="dark"] input[type="radio"] { accent-color: var(--crmd-accent); color-scheme: dark; }
html[data-crmd-mode="dark"] .form-control, html[data-crmd-mode="dark"] .bootstrap-select > .dropdown-toggle, html[data-crmd-mode="dark"] .selectpicker { color: var(--crmd-text) !important; background: var(--crmd-surface-2) !important; border-color: var(--crmd-border) !important; }
html[data-crmd-mode="dark"] .bootstrap-select .dropdown-menu, html[data-crmd-mode="dark"] .bootstrap-select .dropdown-menu li a { color: var(--crmd-text); }
html[data-crmd-mode="dark"] .content h4, html[data-crmd-mode="dark"] .content h3, html[data-crmd-mode="dark"] .content .tw-text-neutral-700, html[data-crmd-mode="dark"] .content .tw-text-neutral-800, html[data-crmd-mode="dark"] .content .tw-text-neutral-900 { color: var(--crmd-text) !important; }
html[data-crmd-mode="dark"] .content .tw-text-neutral-500, html[data-crmd-mode="dark"] .content .tw-text-neutral-600, html[data-crmd-mode="dark"] .content .text-muted { color: var(--crmd-muted) !important; }
html[data-crmd-mode="dark"] .content .tw-bg-neutral-50, html[data-crmd-mode="dark"] .content .tw-bg-neutral-100, html[data-crmd-mode="dark"] .content .tw-bg-white { background-color: var(--crmd-surface-2) !important; }
html[data-crmd-mode="dark"] .content .tw-border-neutral-200, html[data-crmd-mode="dark"] .content .tw-border-neutral-300 { border-color: var(--crmd-border) !important; }
html[data-crmd-mode="dark"] .onoffswitch-label { border-color: var(--crmd-border); } html[data-crmd-mode="dark"] .onoffswitch-inner::after { background: var(--crmd-surface-3); }
html[data-crmd-mode="dark"] .label-default, html[data-crmd-mode="dark"] .crmd-tag { background: var(--crmd-surface-3); color: var(--crmd-text); }
html[data-crmd-mode="dark"] .crmd-stats > a, html[data-crmd-mode="dark"] .crmd-stats > div, html[data-crmd-mode="dark"] .crmd-chip, html[data-crmd-mode="dark"] .crmd-action, html[data-crmd-mode="dark"] .crmd-tabs-ul, html[data-crmd-mode="dark"] .crmd-tl-icon { background: rgba(255,255,255,.07) !important; color: var(--crmd-text) !important; }
html[data-crmd-mode="dark"] .crmd-card-accent, html[data-crmd-mode="dark"] .crmd-card-accent .crmd-card-title, html[data-crmd-mode="dark"] .crmd-card-accent .crmd-kv span { color: #121417 !important; }
html[data-crmd-mode="dark"] .crmd-card-accent .crmd-big, html[data-crmd-mode="dark"] .crmd-card-accent .crmd-kv b, html[data-crmd-mode="dark"] .crmd-card-accent .crmd-big-label { color: #121417 !important; }
html[data-crmd-mode="dark"] .crmd-card-accent .crmd-bar span { background: #121417; }
html[data-crmd-mode="dark"] .btn-default, html[data-crmd-mode="dark"] .btn-default:hover { background: var(--crmd-surface-2) !important; color: var(--crmd-text) !important; border-color: var(--crmd-border) !important; }
html[data-crmd-mode="dark"] .alert-info, html[data-crmd-mode="dark"] .alert-warning { background: var(--crmd-surface-2) !important; color: var(--crmd-text) !important; border-color: var(--crmd-border) !important; }
html[data-crmd-mode="dark"] .close { color: var(--crmd-text); text-shadow: none; opacity: .6; }
html[data-crmd-mode="dark"] .text-primary { color: var(--crmd-accent) !important; }
html[data-crmd-mode="dark"] img.img-responsive.logo, html[data-crmd-mode="dark"] #logo img { filter: brightness(0) invert(1); }
html[data-crmd-mode="dark"] .bootstrap-select .dropdown-menu, html[data-crmd-mode="dark"] .datepicker, html[data-crmd-mode="dark"] .xdsoft_datetimepicker { background: var(--crmd-surface); color: var(--crmd-text); border-color: var(--crmd-border); }
html[data-crmd-mode="dark"] .xdsoft_datetimepicker .xdsoft_calendar td, html[data-crmd-mode="dark"] .xdsoft_datetimepicker .xdsoft_calendar th { background: var(--crmd-surface-2); border-color: var(--crmd-border); color: var(--crmd-text); }
html[data-crmd-mode="dark"] .note-editor .note-toolbar, html[data-crmd-mode="dark"] .tox .tox-toolbar, html[data-crmd-mode="dark"] .tox .tox-edit-area__iframe { background: var(--crmd-surface-2) !important; }

/* ---------- Pantalla de acceso ---------- */
html[data-crmd-area="auth"] body { background: var(--crmd-bg) !important; }
html[data-crmd-area="auth"] body.login_admin > div > .tw-bg-white, html[data-crmd-area="auth"] .authentication-form-wrapper .tw-bg-white {
  background: var(--crmd-surface) !important; border: 1px solid var(--crmd-border) !important; border-radius: var(--crmd-radius-card) !important; box-shadow: var(--crmd-shadow) !important;
  padding: 32px !important;
}
html[data-crmd-area="auth"] .authentication-form-wrapper h1 { color: var(--crmd-text) !important; font-weight: 600; letter-spacing: -0.02em; }
html[data-crmd-area="auth"] .authentication-form-wrapper p, html[data-crmd-area="auth"] .authentication-form-wrapper label { color: var(--crmd-muted) !important; }
html[data-crmd-area="auth"] .authentication-form-wrapper .form-control { height: 44px; }
html[data-crmd-area="auth"] .authentication-form-wrapper .tw-inline-flex.tw-justify-between { flex-wrap: wrap; gap: 4px 12px; }
html[data-crmd-area="auth"] .authentication-form-wrapper .btn-primary { padding: 11px 18px; font-size: 15px; }
html[data-crmd-mode="dark"][data-crmd-area="auth"] .company-logo img { filter: brightness(0) invert(1); }

/* ---------- Vidrio esmerilado ("vidrio profundo") ---------- */
html[data-crmd-glass="soft"], html[data-crmd-glass="deep"] {
  --crmd-glass-bg: rgba(255,255,255,.58); --crmd-glass-bg-2: rgba(255,255,255,.4); --crmd-glass-border: rgba(255,255,255,.75);
  --crmd-glass-hi: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(255,255,255,.25);
  --crmd-glass-blur: 18px; --crmd-glass-shadow: 0 10px 30px rgba(17,20,23,.07);
}
html[data-crmd-glass="deep"] { --crmd-glass-bg: rgba(255,255,255,.46); --crmd-glass-bg-2: rgba(255,255,255,.3); --crmd-glass-blur: 34px; --crmd-glass-shadow: 0 24px 60px rgba(17,20,23,.12), 0 2px 6px rgba(17,20,23,.05); }
html[data-crmd-glass][data-crmd-mode="dark"] {
  --crmd-glass-bg: rgba(28,30,36,.55); --crmd-glass-bg-2: rgba(28,30,36,.4); --crmd-glass-border: rgba(255,255,255,.12);
  --crmd-glass-hi: inset 0 1px 0 rgba(255,255,255,.12); --crmd-glass-shadow: 0 24px 60px rgba(0,0,0,.45);
}
/* Fondo con manchas de color desenfocadas: es lo que se ve "a través" del vidrio */
html[data-crmd-glass="soft"] body, html[data-crmd-glass="deep"] body, html[data-crmd-glass="soft"] #wrapper, html[data-crmd-glass="deep"] #wrapper {
  background:
    radial-gradient(640px 420px at 12% 0%, rgba(var(--crmd-accent-rgb), .45), transparent 70%),
    radial-gradient(720px 520px at 92% 18%, rgba(var(--crmd-accent-rgb), .22), transparent 70%),
    radial-gradient(900px 600px at 55% 110%, rgba(var(--crmd-text-rgb), .10), transparent 70%),
    var(--crmd-bg) !important;
  background-attachment: fixed !important;
}
html[data-crmd-glass="deep"] body, html[data-crmd-glass="deep"] #wrapper {
  background:
    radial-gradient(760px 520px at 8% -4%, rgba(var(--crmd-accent-rgb), .7), transparent 68%),
    radial-gradient(640px 480px at 96% 12%, rgba(var(--crmd-accent-rgb), .32), transparent 70%),
    radial-gradient(520px 420px at 72% 54%, rgba(var(--crmd-text-rgb), .16), transparent 72%),
    radial-gradient(900px 700px at 30% 110%, rgba(var(--crmd-text-rgb), .12), transparent 70%),
    var(--crmd-bg) !important;
  background-attachment: fixed !important;
}
/* Superficies de vidrio */
html[data-crmd-glass="soft"] .panel_s, html[data-crmd-glass="deep"] .panel_s,
html[data-crmd-glass="soft"] .top_stats_wrapper, html[data-crmd-glass="deep"] .top_stats_wrapper,
html[data-crmd-glass="soft"] .crmd-hero, html[data-crmd-glass="deep"] .crmd-hero,
html[data-crmd-glass="soft"] .crmd-card:not(.crmd-card-accent):not(.crmd-card-ink), html[data-crmd-glass="deep"] .crmd-card:not(.crmd-card-accent):not(.crmd-card-ink),
html[data-crmd-glass="soft"] .sidebar, html[data-crmd-glass="deep"] .sidebar,
html[data-crmd-glass="soft"] .dropdown-menu, html[data-crmd-glass="deep"] .dropdown-menu,
html[data-crmd-glass="soft"] .crmd-dd-menu, html[data-crmd-glass="deep"] .crmd-dd-menu,
html[data-crmd-glass="soft"] .modal-content, html[data-crmd-glass="deep"] .modal-content,
html[data-crmd-glass="soft"] .btn-bottom-toolbar, html[data-crmd-glass="deep"] .btn-bottom-toolbar,
html[data-crmd-glass="soft"] #setup-menu-wrapper.sidebar, html[data-crmd-glass="deep"] #setup-menu-wrapper.sidebar {
  background: var(--crmd-glass-bg) !important;
  -webkit-backdrop-filter: blur(var(--crmd-glass-blur)) saturate(170%); backdrop-filter: blur(var(--crmd-glass-blur)) saturate(170%);
  border-color: var(--crmd-glass-border) !important;
  box-shadow: var(--crmd-glass-hi), var(--crmd-glass-shadow) !important;
}
/* Menús flotantes y modales: casi opacos, si no el contenido de abajo se lee a través */
html[data-crmd-glass="soft"] .dropdown-menu, html[data-crmd-glass="deep"] .dropdown-menu, html[data-crmd-glass="soft"] .crmd-dd-menu, html[data-crmd-glass="deep"] .crmd-dd-menu,
html[data-crmd-glass="soft"] .modal-content, html[data-crmd-glass="deep"] .modal-content, html[data-crmd-glass="soft"] .bootstrap-select .dropdown-menu, html[data-crmd-glass="deep"] .bootstrap-select .dropdown-menu,
html[data-crmd-glass="soft"] .popover, html[data-crmd-glass="deep"] .popover, html[data-crmd-glass="soft"] .tooltip-inner, html[data-crmd-glass="deep"] .tooltip-inner {
  background: rgba(255,255,255,.96) !important; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-color: rgba(17,20,23,.08) !important;
}
html[data-crmd-glass][data-crmd-mode="dark"] .dropdown-menu, html[data-crmd-glass][data-crmd-mode="dark"] .crmd-dd-menu, html[data-crmd-glass][data-crmd-mode="dark"] .modal-content,
html[data-crmd-glass][data-crmd-mode="dark"] .bootstrap-select .dropdown-menu, html[data-crmd-glass][data-crmd-mode="dark"] .popover { background: rgba(30,32,38,.97) !important; border-color: rgba(255,255,255,.1) !important; }
html[data-crmd-glass="deep"] .crmd-card-accent { background: rgba(var(--crmd-accent-rgb), .55) !important; -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: var(--crmd-glass-hi), var(--crmd-glass-shadow); }
html[data-crmd-glass="soft"] body.admin .sidebar, html[data-crmd-glass="deep"] body.admin .sidebar { background: var(--crmd-glass-bg-2) !important; border-right-color: var(--crmd-glass-border) !important; }
/* Barra lateral oscura + vidrio: vidrio ahumado para que las letras claras se lean */
html[data-crmd-glass][data-crmd-stheme="dark"] body.admin .sidebar, html[data-crmd-glass][data-crmd-stheme="dark"] .sidebar {
  background: rgba(18,20,23,.78) !important; border-right-color: rgba(255,255,255,.08) !important; box-shadow: inset -1px 0 0 rgba(255,255,255,.04), var(--crmd-glass-shadow) !important;
}
html[data-crmd-glass][data-crmd-stheme="dark"] #setup-menu-wrapper.sidebar { background: rgba(18,20,23,.9) !important; }
html[data-crmd-glass="soft"] #header, html[data-crmd-glass="deep"] #header { background: transparent !important; border-bottom: 0 !important; }
html[data-crmd-glass="soft"] #top_search input#search_input, html[data-crmd-glass="deep"] #top_search input#search_input,
html[data-crmd-glass="soft"] .crmd-mode-toggle, html[data-crmd-glass="deep"] .crmd-mode-toggle {
  background: var(--crmd-glass-bg) !important; border-color: var(--crmd-glass-border) !important; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
html[data-crmd-glass="soft"] .form-control, html[data-crmd-glass="deep"] .form-control,
html[data-crmd-glass="soft"] .selectpicker + .dropdown-toggle, html[data-crmd-glass="deep"] .bootstrap-select > .dropdown-toggle,
html[data-crmd-glass="soft"] .crmd-tabs-ul, html[data-crmd-glass="deep"] .crmd-tabs-ul,
html[data-crmd-glass="soft"] .nav-tabs, html[data-crmd-glass="deep"] .nav-tabs,
html[data-crmd-glass="soft"] .panel-full-width-tabs .nav, html[data-crmd-glass="deep"] .panel-full-width-tabs .nav,
html[data-crmd-glass="soft"] .crmd-chip, html[data-crmd-glass="deep"] .crmd-chip,
html[data-crmd-glass="soft"] .crmd-action, html[data-crmd-glass="deep"] .crmd-action,
html[data-crmd-glass="soft"] .crmd-stats > a, html[data-crmd-glass="deep"] .crmd-stats > a, html[data-crmd-glass="soft"] .crmd-stats > div, html[data-crmd-glass="deep"] .crmd-stats > div {
  background: rgba(var(--crmd-text-rgb), .05) !important; border-color: rgba(var(--crmd-text-rgb), .08);
}
html[data-crmd-glass][data-crmd-mode="dark"] .form-control, html[data-crmd-glass][data-crmd-mode="dark"] .crmd-chip, html[data-crmd-glass][data-crmd-mode="dark"] .crmd-action { background: rgba(255,255,255,.07) !important; }
html[data-crmd-glass] .panel_s .panel_s, html[data-crmd-glass] .modal .panel_s { -webkit-backdrop-filter: none; backdrop-filter: none; background: transparent !important; box-shadow: none !important; }
html[data-crmd-glass] .panel_s .panel-heading:not([data-status-id]):not([style*="background"]) { background: transparent !important; border-bottom-color: rgba(var(--crmd-text-rgb), .08) !important; }
/* Móvil: la barra lateral es un cajón que se superpone al contenido → debe ser opaca, sin transparencia */
@media (max-width: 768px) {
  html[data-crmd-glass][data-crmd-stheme] body.admin .sidebar, html[data-crmd-glass][data-crmd-stheme] .sidebar { background: var(--crmd-sidebar-bg) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  html[data-crmd-glass] #header { background: var(--crmd-glass-bg) !important; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
}
html[data-crmd-glass] table.dataTable tbody tr:hover > td { background: rgba(var(--crmd-text-rgb), .04) !important; }
html[data-crmd-glass] .modal-backdrop.in { opacity: .25; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* Pantalla de acceso con vidrio: fondo tipo foto desenfocada y tarjeta esmerilada */
html[data-crmd-glass="soft"][data-crmd-area="auth"] body, html[data-crmd-glass="deep"][data-crmd-area="auth"] body {
  background:
    radial-gradient(900px 700px at 20% 10%, rgba(var(--crmd-accent-rgb), .85), transparent 65%),
    radial-gradient(700px 600px at 85% 25%, rgba(var(--crmd-text-rgb), .35), transparent 68%),
    radial-gradient(800px 600px at 60% 100%, rgba(var(--crmd-accent-rgb), .4), transparent 70%),
    linear-gradient(160deg, var(--crmd-surface-2), var(--crmd-bg)) !important;
  background-attachment: fixed !important; min-height: 100vh;
}
html[data-crmd-glass="soft"][data-crmd-area="auth"] body.login_admin > div > .tw-bg-white, html[data-crmd-glass="deep"][data-crmd-area="auth"] body.login_admin > div > .tw-bg-white,
html[data-crmd-glass="soft"][data-crmd-area="auth"] .authentication-form-wrapper .tw-bg-white, html[data-crmd-glass="deep"][data-crmd-area="auth"] .authentication-form-wrapper .tw-bg-white {
  background: var(--crmd-glass-bg) !important; border: 1px solid var(--crmd-glass-border) !important;
  -webkit-backdrop-filter: blur(var(--crmd-glass-blur)) saturate(180%); backdrop-filter: blur(var(--crmd-glass-blur)) saturate(180%);
  box-shadow: var(--crmd-glass-hi), 0 30px 80px rgba(17,20,23,.18) !important; padding: 36px !important;
}
html[data-crmd-glass][data-crmd-area="auth"] .authentication-form-wrapper .form-control { background: rgba(255,255,255,.55) !important; border: 1px solid rgba(255,255,255,.8) !important; }
html[data-crmd-glass][data-crmd-area="auth"] .authentication-form-wrapper .form-control:focus { background: rgba(255,255,255,.85) !important; }
@supports not (backdrop-filter: blur(1px)) {
  html[data-crmd-glass] .panel_s, html[data-crmd-glass] .crmd-hero, html[data-crmd-glass] .crmd-card, html[data-crmd-glass] .sidebar, html[data-crmd-glass] .modal-content { background: var(--crmd-surface) !important; }
}

/* ---------- Portal de clientes (opcional) ---------- */
html[data-crmd-area="customers"] .panel_s, html[data-crmd-area="customers"] .panel-body { border-radius: var(--crmd-radius-card); }
html[data-crmd-area="customers"] .navbar-default { background: var(--crmd-surface); border: 0; box-shadow: var(--crmd-shadow); }

/* ---------- Densidad compacta ---------- */
html[data-crmd-density="compact"] .btn { padding: 5px 13px; }
html[data-crmd-density="compact"] .form-control { min-height: 34px; padding: 5px 10px; }
html[data-crmd-density="compact"] .top_stats_wrapper { padding: 12px 16px 14px; }
html[data-crmd-density="compact"] .modal-body { padding: 16px; }

/* ---------- Barra lateral fija a toda la altura (evita la franja blanca que terminaba a mitad de página) ---------- */
@media (min-width: 769px) {
  html[data-crmd-area="admin"] .sidebar { position: fixed !important; top: 0; bottom: 0; height: 100vh; }
  /* con nombres: desplaza; en modo iconos queda visible para que salgan los submenús flotantes */
  html[data-crmd-sidebar="full"] .sidebar, html[data-crmd-area="admin"] #setup-menu-wrapper.sidebar { overflow-y: auto; }
  html[data-crmd-area="admin"] .sidebar::-webkit-scrollbar { width: 0; height: 0; }
}

/* ---------- Barra inferior de guardar (facturas, presupuestos, etc.) ---------- */
html[data-crmd-area="admin"] .btn-bottom-toolbar {
  margin-left: var(--crmd-sidebar-w) !important; width: calc(100% - var(--crmd-sidebar-w)) !important;
  background: var(--crmd-surface); border-top: 1px solid var(--crmd-border); box-shadow: 0 -8px 24px rgba(0,0,0,.05);
  padding: 12px calc(var(--crmd-pad) + 6px); transition: margin-left .2s ease, width .2s ease;
}
@media (min-width: 769px) { html[data-crmd-area="admin"] body.hide-sidebar .sidebar { display: block !important; } }
html[data-crmd-area="admin"] .btn-bottom-toolbar .btn { margin-left: 8px; }
html[data-crmd-area="admin"] .btn-bottom-pusher { margin-top: 80px; }

/* ---------- Pestañas horizontales con flechas (vista de factura, perfil, proyectos…) ---------- */
html[data-crmd-area] .horizontal-scrollable-tabs { position: relative; margin: 4px 0 0; }
html[data-crmd-area] .horizontal-scrollable-tabs .scroller, html[data-crmd-area] .scroller { display: none !important; }
html[data-crmd-area] .horizontal-tabs { overflow: visible; padding: 0; }
html[data-crmd-area] .horizontal-tabs .nav-tabs-horizontal, html[data-crmd-area] .horizontal-tabs > .nav-tabs {
  display: inline-flex !important; flex-wrap: wrap; overflow: visible !important; padding: 4px !important;
  background: var(--crmd-surface-2) !important; border-radius: var(--crmd-radius-btn); scroll-snap-type: none;
}
html[data-crmd-area] .horizontal-tabs .nav-tabs-horizontal > li { min-width: 0; text-align: left; }
html[data-crmd-area] .nav-tabs > li.tab-separator { border: 0 !important; margin-left: 6px; padding-left: 6px; position: relative; }
html[data-crmd-area] .nav-tabs > li.tab-separator::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 1px; background: var(--crmd-border); }
html[data-crmd-area] .nav-tabs > li.tab-separator ~ li.tab-separator { margin-left: 0; padding-left: 0; }
html[data-crmd-area] .nav-tabs > li.tab-separator ~ li.tab-separator::before { display: none; }
html[data-crmd-area] .nav-tabs > li.tab-separator > a { padding-left: 11px; padding-right: 11px; }
html[data-crmd-area] .nav-tabs.mbot15 { margin-bottom: 16px !important; }
/* Perfex saca estas pestañas a "ancho completo" con márgenes negativos: las devolvemos dentro de la tarjeta */
html[data-crmd-area] .panel-full-width-tabs { margin: 0 0 6px !important; }
html[data-crmd-area] .panel-full-width-tabs .nav, html[data-crmd-area] .panel-full-width-tabs .nav-tabs {
  margin-top: 0 !important; padding: 4px !important; border-radius: var(--crmd-radius-btn) !important;
}
html[data-crmd-area] .panel-full-width-tabs .nav li a { padding: 7px 14px !important; background: transparent; }
html[data-crmd-area] .panel-full-width-tabs .nav li.active > a { background: var(--crmd-ink) !important; }
html[data-crmd-area] .panel-full-width-tabs .nav li a .badge { background: var(--crmd-accent) !important; color: var(--crmd-accent-text) !important; }
/* Dentro de una tarjeta, aire entre el borde superior y las pestañas */
html[data-crmd-area] .panel_s > .panel-body > .horizontal-scrollable-tabs:first-child,
html[data-crmd-area] .panel_s > .panel-body > .nav-tabs:first-child { margin-top: 6px; }

/* Ajustes: vistas previas de logos/favicon a tamaño razonable */
html[data-crmd-area="admin"] body.settings .panel_s img.img-responsive { max-height: 96px; width: auto; padding: 10px; background: var(--crmd-surface-2); border-radius: var(--crmd-radius-ctrl); }

/* ---------- Menú de Configuración: panel que se superpone (siempre ancho, con nombres visibles) ---------- */
html[data-crmd-area="admin"] #setup-menu-wrapper.sidebar {
  width: 260px !important; padding: 0 10px 20px; z-index: 1030; overflow-y: auto;
  background: var(--crmd-surface); box-shadow: var(--crmd-shadow-pop); border-right: 1px solid var(--crmd-border);
}
html[data-crmd-area="admin"] #setup-menu > li > a { justify-content: flex-start; width: auto; padding: 9px 12px; margin: 2px 0; }
html[data-crmd-area="admin"] #setup-menu > li > a .menu-text, html[data-crmd-area="admin"] #setup-menu > li > a .fa.arrow { display: inline-block !important; }
html[data-crmd-area="admin"] #setup-menu > li > a i.menu-icon { width: 20px; font-size: 16px; }
html[data-crmd-area="admin"] #setup-menu .customizer-heading { font-weight: 700; font-size: 15px; }
html[data-crmd-area="admin"] #setup-menu .close-customizer { border-radius: 999px; }

/* ---------- Móvil: la barra lateral vuelve a su comportamiento de cajón ---------- */
@media (max-width: 768px) {
  html[data-crmd-area="admin"] #wrapper, html[data-crmd-area="admin"] #header { margin-left: 0 !important; }
  html[data-crmd-area="admin"] .content { padding: 12px 12px 40px; }
  html[data-crmd-area] .nav-tabs { display: flex; }
  .crmd-mode-toggle { display: none; }

  /* Header en dos filas: ☰ + iconos arriba, búsqueda debajo (antes la búsqueda se montaba sobre el contenido) */
  html[data-crmd-area="admin"] #header { height: auto !important; min-height: 0; padding: 0 0 10px; background: var(--crmd-surface) !important; border-bottom: 1px solid var(--crmd-border) !important; }
  html[data-crmd-area="admin"] #header nav, html[data-crmd-area="admin"] #header nav > div { height: auto !important; }
  html[data-crmd-area="admin"] #header .hide-menu { margin: 9px 6px 0 10px !important; float: left !important; background: var(--crmd-surface-2); color: var(--crmd-text) !important; }
  html[data-crmd-area="admin"] #header #top_search { position: static !important; width: 100% !important; height: auto !important; padding: 8px 12px 0 !important; margin: 0 !important; display: block !important; clear: both; }
  html[data-crmd-area="admin"] #header #top_search input#search_input { height: 42px; width: 100%; }
  html[data-crmd-area="admin"] #header .navbar-nav { margin: 0; }

  /* Menú lateral como cajón fijo que entra por la izquierda (el contenido no se desplaza) */
  html[data-crmd-area="admin"] .sidebar:not(#setup-menu-wrapper) {
    position: fixed !important; top: 0; bottom: 0; left: 0; height: 100vh; width: 268px !important; padding: 0 10px 20px; z-index: 1050 !important;
    overflow-y: auto; display: block !important; transform: translateX(-110%); transition: transform .25s ease; box-shadow: none !important;
  }
  html[data-crmd-area="admin"] body.show-sidebar .sidebar:not(#setup-menu-wrapper) { transform: none; box-shadow: 0 0 0 100vmax rgba(0,0,0,.4), 0 24px 60px rgba(0,0,0,.3) !important; }
  html[data-crmd-area="admin"] body.show-sidebar #wrapper { margin-left: 0 !important; }
  html[data-crmd-area="admin"] .sidebar:not(#setup-menu-wrapper) .sidebar-user-profile { margin-top: 16px !important; }
  html[data-crmd-area="admin"] #side-menu > li > a .menu-text, html[data-crmd-area="admin"] #side-menu > li > a .fa.arrow { display: inline-block !important; }
  html[data-crmd-area="admin"] #side-menu > li > a { justify-content: flex-start; width: auto; padding: 10px 12px; }
  html[data-crmd-area="admin"] #setup-menu-wrapper.sidebar { position: fixed !important; top: 0; bottom: 0; width: 268px !important; z-index: 1060 !important; }
  html[data-crmd-area="admin"] .btn-bottom-toolbar { margin-left: 0 !important; width: 100% !important; padding: 10px 12px; }
  html[data-crmd-area="admin"] .btn-bottom-toolbar .btn { margin-left: 4px; }
}

/* ── Portal del cliente: correcciones de contraste y barras de progreso ── */
html[data-crmd-area="customers"] .nav-tabs > li.active > a, html[data-crmd-area="customers"] .nav-tabs > li.active > a:hover, html[data-crmd-area="customers"] .nav-tabs > li.active > a:focus,
html[data-crmd-area="customers"] .nav-tabs > li.active > a *, html[data-crmd-area="customers"] .nav-tabs > li.active > a .menu-icon { color: var(--crmd-ink-text) !important; }
html[data-crmd-area="customers"] .nav-tabs > li > a .menu-icon { color: currentColor; margin-right: 4px; }
/* La etiqueta del % va dentro de la barra: con la barra de 8 px se cortaba. Barra de 22 px y texto legible sobre cualquier fondo. */
html[data-crmd-area="customers"] .progress { height: 22px !important; border-radius: 999px; background: var(--crmd-surface-3); overflow: hidden; position: relative; margin-bottom: 8px; }
html[data-crmd-area="customers"] .progress .progress-bar { height: 100%; line-height: 22px; font-size: 11px; font-weight: 700; text-align: left; padding-left: 10px; overflow: visible; white-space: nowrap; border-radius: 999px;
  color: var(--crmd-text) !important; text-shadow: 0 0 3px var(--crmd-surface), 0 0 6px var(--crmd-surface); }
html[data-crmd-area="customers"] .progress .progress-bar[style*="width: 0"], html[data-crmd-area="customers"] .progress .progress-bar[style*="width:0"] { min-width: 0; }
/* Cabeceras de hitos/estados con color propio: el contraste lo ajusta customers.js; sin color propio, texto normal */
html[data-crmd-area="customers"] .kan-ban-col .panel-heading.info-bg { background: var(--crmd-surface-2) !important; color: var(--crmd-text) !important; border: 1px solid var(--crmd-border) !important; }
html[data-crmd-area="customers"] .kan-ban-col .panel-heading { border-radius: var(--crmd-radius-ctrl) !important; margin: 4px 4px 0; padding: 10px 14px; }
html[data-crmd-area="customers"] .kan-ban-col .panel-body { background: var(--crmd-surface) !important; }
/* Tablas del portal: sin márgenes negativos ni columna cortada */
html[data-crmd-area="customers"] .panel-body .table-responsive { margin-left: 0 !important; margin-right: 0 !important; }
html[data-crmd-area="customers"] table.dataTable { width: 100% !important; }

/* ── Modales: caben siempre en pantalla (cabecera y botones fijos; solo el cuerpo se desplaza) ── */
html[data-crmd-area="admin"] .modal { overflow-y: auto; }
html[data-crmd-area="admin"] .modal-dialog { margin: 24px auto; }
html[data-crmd-area="admin"] .modal-content { display: flex; flex-direction: column; max-height: calc(100vh - 48px); overflow: hidden; }
html[data-crmd-area="admin"] .modal-content > form { display: flex; flex-direction: column; min-height: 0; max-height: calc(100vh - 48px); }
html[data-crmd-area="admin"] .modal-header, html[data-crmd-area="admin"] .modal-footer { flex-shrink: 0; }
html[data-crmd-area="admin"] .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 640px) { html[data-crmd-area="admin"] .modal-dialog { margin: 8px; } html[data-crmd-area="admin"] .modal-content, html[data-crmd-area="admin"] .modal-content > form { max-height: calc(100vh - 16px); } }

/* Respaldo: si un modal abierto quedara dentro de una tarjeta, esa tarjeta no puede atraparlo (backdrop-filter/overflow/transform) */
html[data-crmd-area] .panel_s:has(.modal.in), html[data-crmd-area] .crmd-card:has(.modal.in), html[data-crmd-area] .crmd-hero:has(.modal.in), html[data-crmd-area] .panel-body:has(.modal.in),
html[data-crmd-area] .sidebar:has(.modal.in), html[data-crmd-area] #wrapper .content:has(.modal.in) {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; transform: none !important; overflow: visible !important; animation: none !important; filter: none !important;
}
html[data-crmd-area="admin"] .modal { z-index: 1060; } html[data-crmd-area="admin"] .modal-backdrop { z-index: 1055; }