/*
 * Theme Runtime v2
 * Progressive adapter between compiled --ds-* tokens and the existing CRM primitives.
 * It is active only for native v2 themes and can be disabled with
 * THEME_DESIGN_SYSTEM_V2_ENABLED=0.
 */

/*
 * Geometría del shell — FUENTE ÚNICA.
 * Dueño documental: PROMPTS/arquitectura/CONTRATO_CORE_SHELL.md §2.
 *
 * Cada medida se declara aquí una sola vez: el valor lo manda el token
 * Theme V2 y el literal actúa únicamente como fallback local cuando el
 * documento no tiene tema activo (data-ds-v2="0") o el tema no aporta el
 * token. Ningún otro archivo puede repetir el número: admin.php,
 * assets/css/crm-compact-base.css y el <style> de views/sidebar_clickup.php
 * consumen estas variables sin fallback propio.
 *
 * El bloque va en :root (no bajo html[data-ds-v2="1"]) porque este archivo
 * también lo cargan portal.php, theme_preview.php y public/formularios_form.php,
 * donde el tema puede estar desactivado.
 */
:root {
  --nxg-topbar-height: var(--ds-component-topbar-height, 44px);
  --sidebar-clickup-rail-width: var(--ds-component-sidebar-railwidth, 56px);
  --sidebar-clickup-panel-width: var(--ds-component-sidebar-panelwidth, 224px);
  --sidebar-clickup-collapsed-width: var(--sidebar-clickup-rail-width);
  --sidebar-clickup-expanded-width: calc(var(--sidebar-clickup-rail-width) + var(--sidebar-clickup-panel-width));
  /* Lienzo continuo: equivalente a p-6 md:p-8 de referencias/dashboard.html. */
  --nxg-canvas-padding: 1rem;
  /* Radio de encaje del shell (lote "integración superior", 2026-09):
     esquina superior izquierda del panel contextual y de #workspace-main,
     PROMPTS/arquitectura/CONTRATO_CORE_SHELL.md §2. Generoso a propósito
     -1.5x el mayor radio de primitives.rounded (xl)-, no un redondeo tímido:
     leído de chrome_Pw0m2H76pn.png, donde el arco del panel recorre buena
     parte de la altura de su propia cabecera antes de cerrar en la anchura
     plana del rail. */
  --nxg-shell-corner-radius: var(--ds-component-shell-cornerradius, calc(var(--ds-primitive-rounded-xl, 16px) * 1.5));
}

@media (min-width: 768px) {
  :root {
    --nxg-canvas-padding: 1.25rem;
  }
}

html[data-ds-v2="1"] {
  --color-primary: var(--ds-semantic-content-primary);
  --color-secondary: var(--ds-semantic-content-secondary);
  --color-tertiary: var(--ds-semantic-action-primary);
  --color-neutral: var(--ds-semantic-surface-canvas);
  --color-surface: var(--ds-semantic-surface-card);
  --color-on_primary: var(--ds-semantic-content-inverse);
  --font-body: var(--ds-primitive-typography-body-fontfamily);
  --font-display: var(--ds-primitive-typography-display-fontfamily);
  --font-label: var(--ds-primitive-typography-label-fontfamily);
  --radius-sm: var(--ds-primitive-rounded-sm);
  --radius-md: var(--ds-primitive-rounded-md);
  --radius-lg: var(--ds-primitive-rounded-lg);
  color: var(--ds-semantic-content-primary);
  background: var(--ds-semantic-surface-canvas);
}

html[data-ds-v2="1"][data-ds-appearance="light"] {
  color-scheme: light;
}

html[data-ds-v2="1"][data-ds-appearance="dark"] {
  color-scheme: dark;
}

html[data-ds-v2="1"] body {
  color: var(--ds-semantic-content-primary);
  background:
    radial-gradient(circle at 92% -10%, color-mix(in srgb, var(--ds-semantic-action-primary) 8%, transparent), transparent 28rem),
    var(--ds-semantic-surface-canvas);
  font-family: var(--ds-primitive-typography-body-fontfamily), system-ui, sans-serif;
}

html[data-ds-v2="1"] #workspace-main {
  background: var(--ds-semantic-surface-canvas) !important;
}

html[data-ds-v2="1"] body:has([data-ds-component="portal"]),
html[data-ds-v2="1"] body[data-ds-component="public-form"] {
  color: var(--ds-semantic-content-primary);
  background: var(--ds-semantic-surface-canvas) !important;
  font-family: var(--ds-primitive-typography-body-fontfamily), system-ui, sans-serif;
}

html[data-ds-v2="1"] [data-ds-component="portal"] :is(.bg-white, .bg-slate-50) {
  border-color: var(--ds-component-card-border) !important;
  background: var(--ds-semantic-surface-card) !important;
  color: var(--ds-component-card-content);
}

html[data-ds-v2="1"] [data-ds-component="portal"] :is(.border-slate-200, .border-slate-300) {
  border-color: var(--ds-semantic-border-default) !important;
}

html[data-ds-v2="1"] [data-ds-component="portal"] :is(.text-slate-900, .text-slate-700) {
  color: var(--ds-semantic-content-primary) !important;
}

html[data-ds-v2="1"] [data-ds-component="portal"] :is(.text-slate-600, .text-slate-500) {
  color: var(--ds-semantic-content-secondary) !important;
}

html[data-ds-v2="1"] #workspace-header,
html[data-ds-v2="1"] body > header {
  min-height: var(--nxg-topbar-height);
  border-color: var(--ds-component-topbar-border) !important;
  background: color-mix(in srgb, var(--ds-component-topbar-background) 94%, transparent) !important;
  color: var(--ds-component-topbar-content);
  box-shadow: var(--ds-component-topbar-shadow, none);
}

/* El padding del lienzo tiene un único origen: #main-content en admin.php,
   alimentado por --nxg-canvas-padding (CONTRATO_CORE_SHELL §2). */
html[data-ds-v2="1"] #main-content {
  color: var(--ds-semantic-content-primary);
}

/* View contracts are set by the server shell and refreshed after HTMX navigation. */
html[data-ds-v2="1"] #main-content[data-ds-page] {
  --ds-view-accent: var(--ds-semantic-action-primary);
  --ds-view-accent-surface: color-mix(in srgb, var(--ds-semantic-action-primary) 8%, var(--ds-semantic-surface-card));
}

html[data-ds-v2="1"] #main-content[data-ds-view-family="records"] {
  --ds-view-accent: var(--ds-semantic-status-info);
  --ds-view-accent-surface: var(--ds-semantic-status-info-surface);
}

html[data-ds-v2="1"] #main-content[data-ds-view-family="operations"] {
  --ds-view-accent: var(--ds-semantic-status-warning);
  --ds-view-accent-surface: var(--ds-semantic-status-warning-surface);
}

html[data-ds-v2="1"] #main-content[data-ds-view-family="planning"] {
  --ds-view-accent: var(--ds-semantic-status-success);
  --ds-view-accent-surface: var(--ds-semantic-status-success-surface);
}

html[data-ds-v2="1"] #main-content[data-ds-view-family="settings"] {
  --ds-view-accent: var(--ds-semantic-content-secondary);
  --ds-view-accent-surface: var(--ds-semantic-surface-sunken);
}

html[data-ds-v2="1"] #legacy-sidebar-shell,
html[data-ds-v2="1"] #sidebar-clickup-shell {
  background: var(--ds-component-sidebar-background) !important;
  color: var(--ds-component-sidebar-content) !important;
  border-color: var(--ds-component-sidebar-divider) !important;
  /* CRMUI-053 retiró el box-shadow de 40px que sostenía flyouts ya
     eliminados (CRMUI-020d): con el shell en el mismo plano que el lienzo en
     escritorio, una sombra de esa envergadura es justo lo que lo hacía leer
     como una pieza pegada encima en vez de un hermano en flujo. */
}

html[data-ds-v2="1"] #legacy-sidebar-shell .text-primary,
html[data-ds-v2="1"] #legacy-sidebar-shell .text-secondary,
html[data-ds-v2="1"] #sidebar-clickup-shell .text-primary,
html[data-ds-v2="1"] #sidebar-clickup-shell .text-secondary {
  color: var(--ds-component-sidebar-content) !important;
}

html[data-ds-v2="1"] #legacy-sidebar-shell a:hover,
html[data-ds-v2="1"] #legacy-sidebar-shell button:hover,
html[data-ds-v2="1"] #sidebar-clickup-shell a:hover,
html[data-ds-v2="1"] #sidebar-clickup-shell button:hover {
  background: color-mix(in srgb, var(--ds-component-sidebar-activebackground) 28%, transparent);
}

/*
 * Sidebar ClickUp — Button States Bridge (Theme V2)
 * ---------------------------------------------------------
 * sidebar_clickup.php consumes the legacy --sidebar-clickup-* variables.
 * admin.php writes those variables from $theme_v2_sidebar BUT only reads
 * already-resolved scalar values. When a V2 theme uses token references
 * (e.g. {primitive.colors.nav_active}) the ThemeResolver resolves them to
 * real hex values before populating $theme_v2_sidebar, so the PHP bridge
 * works for background/content. However the CSS runtime never bridged the
 * button-level states (hover, active, active-accent) into .clickup-main-item
 * overrides, leaving sidebar_clickup.php's own !important rules in charge
 * with hardcoded rgba fallbacks. This block closes that gap by re-declaring
 * the --sidebar-clickup-* custom properties from the resolved --ds-* tokens
 * so both sets of variables stay in sync under data-ds-v2="1".
 */
html[data-ds-v2="1"] #sidebar-clickup-shell {
  --sidebar-clickup-bg:                   var(--ds-component-sidebar-background);
  --sidebar-clickup-content:              var(--ds-component-sidebar-content);
  --sidebar-clickup-divider:              var(--ds-component-sidebar-divider);
  --sidebar-clickup-button-bg:            var(--ds-component-sidebar-buttonbackground);
  --sidebar-clickup-button-content:       var(--ds-component-sidebar-buttoncontent);
  --sidebar-clickup-button-hover-bg:      var(--ds-component-sidebar-buttonhoverbackground);
  --sidebar-clickup-button-hover-content: var(--ds-component-sidebar-buttonhovercontent);
  --sidebar-clickup-button-active-bg:     var(--ds-component-sidebar-buttonactivebackground);
  --sidebar-clickup-button-active-content:var(--ds-component-sidebar-buttonactivecontent);
  --sidebar-clickup-active-accent:        var(--ds-component-sidebar-activebackground);
  --sidebar-clickup-active-content:       var(--ds-component-sidebar-activecontent);
}

/*
 * Panel contextual del shell (CRMUI-020c).
 * El rail usa la paleta component.sidebar; el panel pertenece a la paleta del
 * lienzo, igual que en referencias/dashboard.html (rail oscuro, panel claro).
 * Por eso sus variables se puentean desde semantic.surface / semantic.content
 * y no desde component.sidebar: el color lo sigue mandando el tema, nunca un
 * literal de la vista. Geometría y dueño documental:
 * PROMPTS/arquitectura/CONTRATO_CORE_SHELL.md §2.
 */
html[data-ds-v2="1"] #sidebar-clickup-shell .clickup-context-panel {
  /* El panel contextual es una superficie clara de navegación, no un tercer
     gris entre rail y lienzo. Separa su función por el borde de cabecera y
     por su radio; así se mantiene luminoso durante una jornada completa sin
     competir con las tarjetas del área de trabajo. */
  --clickup-panel-bg: var(--ds-semantic-surface-card);
  --clickup-panel-content: var(--ds-semantic-content-primary);
  --clickup-panel-muted: var(--ds-semantic-content-secondary);
  /* Antes --ds-semantic-border-subtle: un token distinto del que usa
     #workspace-header (--ds-component-topbar-border, = semantic.border.default
     en nexo-foundation.json), así que el borde inferior de la cabecera del
     panel y el border-b de la topbar no coincidían pixel a pixel pese a
     medir ambos 56px de alto. CRMUI-053 los une a la misma fuente: el borde
     del panel (cabecera y borde derecho) es ahora, literalmente, el mismo
     valor resuelto que el de la topbar. */
  --clickup-panel-border: var(--ds-component-topbar-border);
  --clickup-panel-hover: var(--ds-semantic-surface-sunken);
  --clickup-panel-accent: var(--ds-semantic-action-primary);
  --clickup-panel-active-bg: var(--ds-semantic-surface-selected);
  /* Pista de las pestañas NAVEGACIÓN/ACCIONES (CRMUI-053): un paso recesado
     frente a la tarjeta, la misma relación que semantic.surface.sunken tiene
     con semantic.surface.card en cualquier tema V2 (equivalente al
     bg-slate-100 de referencias/dashboard.html sobre bg-white). */
  --clickup-panel-tab-track: var(--ds-semantic-surface-sunken);
}

/* El puente genérico de hover del shell pinta con el acento del rail; dentro
   del panel ese color no aplica y se sustituye por el suyo. */
html[data-ds-v2="1"] #sidebar-clickup-shell .clickup-context-panel a:hover,
html[data-ds-v2="1"] #sidebar-clickup-shell .clickup-context-panel button:hover {
  background: var(--clickup-panel-hover) !important;
}
html[data-ds-v2="1"] #sidebar-clickup-shell .clickup-context-panel .clickup-panel-item.is-active:hover {
  background: var(--clickup-panel-active-bg) !important;
}

/* Hover state — override sidebar_clickup.php !important rules */
html[data-ds-v2="1"] #sidebar-clickup-shell .clickup-main-item:hover {
  background: var(--ds-component-sidebar-buttonhoverbackground, rgba(255, 255, 255, 0.06)) !important;
  color:      var(--ds-component-sidebar-buttonhovercontent, #ffffff) !important;
}
html[data-ds-v2="1"] #sidebar-clickup-shell .clickup-main-item:hover svg {
  color: var(--ds-component-sidebar-buttonhovercontent, #ffffff) !important;
}

/* Active / current state.
   CRMUI-063: el pin activo llevaba TRES marcas a la vez -la barra izquierda,
   un fondo de color con borde alrededor del boton, y un halo difuminado sobre
   el icono-. Tres senales para un solo estado es ruido, y el cuadro de color
   era ademas la mas pesada. Queda solo la barra izquierda, que es la marca mas
   pequena que sirve, mas el color de contenido: misma informacion, sin caja.
   Mismo criterio que el resto de la interfaz (ver commit eea8bb5). */
html[data-ds-v2="1"] #sidebar-clickup-shell .clickup-main-item.is-active {
  color: var(--ds-component-sidebar-buttonactivecontent, #ffffff) !important;
  background: transparent !important;
  border-color: transparent !important;
}
html[data-ds-v2="1"] #sidebar-clickup-shell .clickup-main-item.is-active > span:first-child {
  opacity: 1;
  background: var(--ds-component-sidebar-activebackground) !important;
}
html[data-ds-v2="1"] #sidebar-clickup-shell .clickup-main-item.is-active svg {
  color: var(--ds-component-sidebar-buttonactivecontent, #ffffff) !important;
}

/* PHP resolves --accent to the theme's monochrome icon token or, only when
   iconColorMode=palette, to the per-view accent selected by that theme. */
html[data-ds-v2="1"] #sidebar-clickup-shell .clickup-main-item:not(.is-active) svg,
html[data-ds-v2="1"] #sidebar-clickup-shell .clickup-main-item:not(.is-active) i {
  color: var(--accent, var(--ds-component-sidebar-content)) !important;
}

/* Label text at rest */
html[data-ds-v2="1"] #sidebar-clickup-shell .clickup-main-item__label {
  color: var(--ds-component-sidebar-content) !important;
}

/* Active label */
html[data-ds-v2="1"] #sidebar-clickup-shell .clickup-main-item.is-active .clickup-main-item__label {
  color: var(--ds-component-sidebar-activecontent, #ffffff) !important;
}

/* Sidebar ClickUp — menús flotantes (menú de perfil del rail) */
html[data-ds-v2="1"] #sidebar-clickup-shell .core-pines-navmenu {
  --clickup-panel-muted: color-mix(in srgb, var(--ds-component-sidebar-content) 62%, transparent);
  color: var(--ds-component-sidebar-content) !important;
  background: var(--ds-component-sidebar-background) !important;
  border-color: var(--ds-component-sidebar-divider) !important;
  box-shadow: var(--ds-component-menu-shadow, var(--ds-component-card-shadow)) !important;
}

html[data-ds-v2="1"] #sidebar-clickup-shell .core-pines-navmenu .text-white,
html[data-ds-v2="1"] #sidebar-clickup-shell .core-pines-navmenu .text-slate-200,
html[data-ds-v2="1"] #sidebar-clickup-shell .core-pines-navmenu .text-slate-300 {
  color: var(--ds-component-sidebar-content) !important;
}

html[data-ds-v2="1"] #sidebar-clickup-shell .core-pines-navmenu__item {
  color: var(--ds-component-sidebar-buttoncontent) !important;
}

html[data-ds-v2="1"] #sidebar-clickup-shell .core-pines-navmenu__item:hover {
  color: var(--ds-component-sidebar-buttonhovercontent) !important;
  background: var(--ds-component-sidebar-buttonhoverbackground) !important;
}

html[data-ds-v2="1"] [data-ds-component="module-hero"] {
  --core-hero-next-surface-gap: var(--ds-primitive-spacing-lg, 1.5rem);
  margin-block-end: var(--core-hero-next-surface-gap);
  border-color: transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ds-component-card-content);
  padding: 0 !important;
  box-shadow: none !important;
}

html[data-ds-v2="1"] [data-ds-component="kpi-card"][data-ds-surface="card"] {
  box-sizing: border-box;
  border: 1px solid var(--ds-component-card-border) !important;
  border-radius: var(--ds-component-card-radius) !important;
  background: var(--ds-component-card-background) !important;
  color: var(--ds-component-card-content) !important;
  box-shadow: var(--ds-component-card-shadow);
  padding: var(--ds-primitive-spacing-md, 1rem);
}

[data-core-kpi-card="1"] {
  container-type: inline-size;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  overflow: clip;
}

[data-core-kpi-card="1"] .core-kpi-card__action {
  display: flex;
  width: 100%;
  height: 100%;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: .55rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
}

[data-core-kpi-card="1"] .core-kpi-card__action--interactive {
  cursor: pointer;
  transition: opacity .18s ease;
}

[data-core-kpi-card="1"] .core-kpi-card__action--interactive:hover {
  opacity: .78;
}

[data-core-kpi-card="1"] .core-kpi-card__label {
  min-width: 0;
  margin: 0;
  color: var(--ds-component-dashboardgrid-kpi-label, var(--ds-semantic-content-secondary, #64748b));
  font: var(--ds-typography-body-sm, 500 .8125rem/1.3 var(--font-sans, system-ui, sans-serif));
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

[data-core-kpi-card="1"] .core-kpi-card__metric-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: .75rem;
  min-width: 0;
}

[data-core-kpi-card="1"] .core-kpi-card__value {
  min-width: 0;
  margin: 0;
  color: var(--ds-component-dashboardgrid-kpi-value, var(--ds-semantic-content-primary, #172033));
  font-family: var(--font-display, var(--font-sans, system-ui, sans-serif));
  font-size: 2rem;
  font-size: clamp(1.75rem, 12cqi, 2.5rem);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.035em;
  line-height: 1;
  overflow-wrap: anywhere;
}

html[data-ds-v2="1"] [data-core-kpi-card="1"] .core-kpi-card__value {
  color: var(--ds-component-dashboardgrid-kpi-value, var(--ds-semantic-content-primary, #172033)) !important;
}

[data-core-kpi-card="1"] .core-kpi-card__unit {
  margin-inline-start: .2em;
  color: var(--ds-semantic-content-secondary, #64748b);
  font-size: .48em;
  font-weight: 500;
  letter-spacing: 0;
}

[data-core-kpi-card="1"] .core-kpi-card__visual {
  display: inline-flex;
  min-width: 1.75rem;
  flex: 0 0 auto;
  align-items: flex-end;
  justify-content: flex-end;
  color: var(--ds-accent, var(--ds-semantic-content-secondary, #64748b));
}

[data-core-kpi-card="1"] .core-kpi-card__trend-arrow {
  font-size: 1.65rem;
  font-weight: 650;
  line-height: 1;
}

[data-core-kpi-card="1"] .core-kpi-card__sparkline {
  --core-kpi-sparkline-width: min(5.5rem, 30cqi);
  display: block;
  width: var(--core-kpi-sparkline-width);
  height: 2.5rem;
  min-width: 0;
  overflow: hidden;
  pointer-events: none;
}

[data-core-kpi-card="1"] .core-kpi-card__comparison {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: .25rem;
  margin: 0;
  color: var(--ds-semantic-content-secondary, #64748b);
  font: var(--ds-typography-body-sm, 400 .75rem/1.35 var(--font-sans, system-ui, sans-serif));
  overflow-wrap: anywhere;
}

[data-core-kpi-card="1"] .core-kpi-card__comparison > [data-ds-accent] {
  color: var(--ds-accent, var(--ds-semantic-content-primary, #172033));
  font-weight: 600;
}

html[data-ds-v2="1"] #main-content[data-ds-page] [data-ds-component="module-hero"] [data-ds-component="hero-heading"] > span:first-child {
  background: var(--ds-view-accent) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ds-view-accent) 18%, transparent);
}

html[data-ds-v2="1"] #main-content[data-ds-page] [data-ds-component="module-hero"] [data-ds-component="hero-actions"] {
  isolation: isolate;
}

html[data-ds-v2="1"] #dashboard-layout,
html[data-ds-v2="1"] [id$="-dashboard-layout"],
html[data-ds-v2="1"] #client-profile-layout,
html[data-ds-v2="1"] #prospect-profile-layout {
  gap: var(--ds-primitive-spacing-sm) !important;
}

html[data-ds-v2="1"] [data-ds-component="dashboard-layout"] > [data-layout-item]:not([class*="hero"]) {
  border-color: var(--ds-component-card-border);
  border-radius: var(--ds-component-card-radius);
  background: var(--ds-component-card-background);
  color: var(--ds-component-card-content);
  box-shadow: var(--ds-component-card-shadow);
}

/* Dashboard composition is recipe-driven, not tied to a specific core module. */
html[data-ds-v2="1"][data-ds-card="outlined"] :is([data-ds-component="dashboard-layout"], [id$="-dashboard-layout"]) > [data-layout-item] {
  box-shadow: none;
}

html[data-ds-v2="1"][data-ds-card="flat"] :is([data-ds-component="dashboard-layout"], [id$="-dashboard-layout"]) > [data-layout-item] {
  border-color: transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

html[data-ds-v2="1"][data-ds-card="soft"] :is([data-ds-component="dashboard-layout"], [id$="-dashboard-layout"]) > [data-layout-item] {
  border-color: color-mix(in srgb, var(--ds-semantic-action-primary) 18%, var(--ds-semantic-border-subtle));
  background: linear-gradient(145deg, color-mix(in srgb, var(--ds-semantic-surface-card) 90%, var(--ds-semantic-action-primary)), var(--ds-semantic-surface-card));
  box-shadow: 0 16px 34px color-mix(in srgb, var(--ds-semantic-action-primary) 12%, transparent);
}

html[data-ds-v2="1"][data-ds-card="editorial"] :is([data-ds-component="dashboard-layout"], [id$="-dashboard-layout"]) > [data-layout-item] {
  border-width: 1px 0 0;
  border-radius: 0;
  box-shadow: none;
}

html[data-ds-v2="1"][data-ds-card="glass"] :is([data-ds-component="dashboard-layout"], [id$="-dashboard-layout"]) > [data-layout-item] {
  border-color: color-mix(in srgb, var(--ds-semantic-content-inverse) 22%, var(--ds-semantic-border-subtle));
  background: color-mix(in srgb, var(--ds-semantic-surface-card) 76%, transparent);
  backdrop-filter: blur(16px) saturate(1.12);
  box-shadow: 0 24px 54px color-mix(in srgb, var(--ds-semantic-content-primary) 13%, transparent);
}

html[data-ds-v2="1"][data-ds-card="terminal"] :is([data-ds-component="dashboard-layout"], [id$="-dashboard-layout"]) > [data-layout-item] {
  border-color: color-mix(in srgb, var(--ds-semantic-action-primary) 48%, var(--ds-semantic-border-default));
  border-radius: var(--ds-primitive-rounded-sm);
  background: var(--ds-semantic-navigation-background);
  color: var(--ds-semantic-navigation-content);
  box-shadow: 5px 5px 0 color-mix(in srgb, var(--ds-semantic-action-primary) 34%, transparent);
}

html[data-ds-v2="1"][data-ds-card="terminal"] :is([data-ds-component="dashboard-layout"], [id$="-dashboard-layout"]) > [data-layout-item] :is(.text-primary, .text-secondary, .label-mono) {
  color: var(--ds-semantic-navigation-content) !important;
}

html[data-ds-v2="1"][data-ds-layout-dashboard="asymmetric"] :is([data-ds-component="dashboard-layout"], [id$="-dashboard-layout"]) > [data-layout-item]:nth-child(3n + 1) {
  border-top-width: 3px;
  border-top-color: var(--ds-semantic-action-primary);
}

html[data-ds-v2="1"][data-ds-layout-dashboard="soft-grid"] :is([data-ds-component="dashboard-layout"], [id$="-dashboard-layout"]) {
  padding: 2px;
  border-radius: var(--ds-component-card-radius);
  background: color-mix(in srgb, var(--ds-semantic-action-primary) 8%, transparent);
}

html[data-ds-v2="1"][data-ds-layout-dashboard="layered"] :is([data-ds-component="dashboard-layout"], [id$="-dashboard-layout"]) > [data-layout-item]:nth-child(even) {
  border-color: color-mix(in srgb, var(--ds-semantic-action-primary) 28%, var(--ds-semantic-border-subtle));
  box-shadow: 0 20px 38px color-mix(in srgb, var(--ds-semantic-content-primary) 12%, transparent);
}

html[data-ds-v2="1"][data-ds-layout-dashboard="dense-grid"] :is([data-ds-component="dashboard-layout"], [id$="-dashboard-layout"]) {
  gap: calc(var(--ds-primitive-spacing-sm) * .75) !important;
}

html[data-ds-v2="1"] #main-content[data-ds-page="prospectos"] .pros-card,
html[data-ds-v2="1"] #main-content[data-ds-page="tickets"] .tickets-card {
  border-color: var(--ds-component-card-border) !important;
  background: var(--ds-component-card-background) !important;
  color: var(--ds-component-card-content) !important;
  box-shadow: var(--ds-component-card-shadow) !important;
}

html[data-ds-v2="1"] #main-content[data-ds-page="tickets"] .tickets-chip {
  border-color: var(--ds-semantic-border-default) !important;
  background: var(--ds-semantic-surface-sunken) !important;
  color: var(--ds-semantic-content-secondary) !important;
}

html[data-ds-v2="1"] [data-ds-component="module-hero"] h2 {
  font-family: var(--ds-primitive-typography-display-fontfamily), system-ui, sans-serif;
  letter-spacing: var(--ds-primitive-typography-h1-letterspacing, -0.03em);
  text-transform: none;
}

html[data-ds-v2="1"] [data-ds-component="table-toolbar"],
html[data-ds-v2="1"] [data-ds-component="table-footer"] {
  color: var(--ds-semantic-content-secondary);
}

html[data-ds-v2="1"] [data-ds-component="table-filters"] {
  border-color: var(--ds-component-card-border) !important;
  border-radius: var(--ds-component-card-radius) !important;
  background: var(--ds-semantic-surface-sunken) !important;
  box-shadow: var(--ds-primitive-shadow-xs);
}

html[data-ds-v2="1"] #main-content input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]),
html[data-ds-v2="1"] #main-content textarea,
html[data-ds-v2="1"] #main-content select {
  min-height: var(--ds-component-input-height);
  border-color: var(--ds-component-input-border) !important;
  border-radius: var(--ds-component-input-radius) !important;
  background: var(--ds-component-input-background) !important;
  color: var(--ds-component-input-content) !important;
  transition:
    border-color var(--ds-primitive-motion-fast) var(--ds-primitive-motion-easing),
    box-shadow var(--ds-primitive-motion-fast) var(--ds-primitive-motion-easing),
    background-color var(--ds-primitive-motion-fast) var(--ds-primitive-motion-easing);
}

html[data-ds-v2="1"] #main-content input::placeholder,
html[data-ds-v2="1"] #main-content textarea::placeholder {
  color: var(--ds-component-input-placeholder);
}

html[data-ds-v2="1"] #main-content :is(.bg-white, .bg-slate-50, .bg-slate-100, .bg-slate-900\/5, .bg-white\/50, .bg-white\/70, .bg-white\/80, .bg-white\/85),
html[data-ds-v2="1"] :is([role="dialog"], .core-pines-hover-card__panel, .core-pines-context-menu__panel, .core-pines-assignment-picker__panel, [data-core-pines-slideover-panel="1"]) :is(.bg-white, .bg-slate-50, .bg-slate-100, .bg-slate-900\/5, .bg-white\/50, .bg-white\/70, .bg-white\/80, .bg-white\/85) {
  border-color: var(--ds-component-card-border) !important;
  background: var(--ds-semantic-surface-card) !important;
  color: var(--ds-semantic-content-primary) !important;
}

html[data-ds-v2="1"] #main-content :is(.text-slate-900, .text-slate-800, .text-slate-700),
html[data-ds-v2="1"] :is([role="dialog"], .core-pines-hover-card__panel, .core-pines-context-menu__panel, .core-pines-assignment-picker__panel, [data-core-pines-slideover-panel="1"]) :is(.text-slate-900, .text-slate-800, .text-slate-700) {
  color: var(--ds-semantic-content-primary) !important;
}

html[data-ds-v2="1"] #main-content :is(.text-slate-600, .text-slate-500),
html[data-ds-v2="1"] :is([role="dialog"], .core-pines-hover-card__panel, .core-pines-context-menu__panel, .core-pines-assignment-picker__panel, [data-core-pines-slideover-panel="1"]) :is(.text-slate-600, .text-slate-500) {
  color: var(--ds-semantic-content-secondary) !important;
}

html[data-ds-v2="1"] :is([role="dialog"], .core-pines-hover-card__panel, .core-pines-context-menu__panel, .core-pines-assignment-picker__panel, [data-core-pines-slideover-panel="1"]) :is(.shadow-sm, .shadow-lg, .shadow-xl, .shadow-2xl) {
  box-shadow: var(--ds-component-modal-shadow) !important;
}

html[data-ds-v2="1"] #main-content input:focus-visible,
html[data-ds-v2="1"] #main-content textarea:focus-visible,
html[data-ds-v2="1"] #main-content select:focus-visible {
  border-color: var(--ds-component-input-borderfocus) !important;
  box-shadow: var(--ds-component-input-focusshadow) !important;
  outline: none;
}

html[data-ds-v2="1"] #main-content button,
html[data-ds-v2="1"] #workspace-header button {
  transition:
    color var(--ds-primitive-motion-fast) var(--ds-primitive-motion-easing),
    border-color var(--ds-primitive-motion-fast) var(--ds-primitive-motion-easing),
    background-color var(--ds-primitive-motion-fast) var(--ds-primitive-motion-easing),
    box-shadow var(--ds-primitive-motion-fast) var(--ds-primitive-motion-easing);
}

html[data-ds-v2="1"] #main-content button:focus-visible,
html[data-ds-v2="1"] #workspace-header button:focus-visible,
html[data-ds-v2="1"] a:focus-visible {
  outline: none;
  box-shadow: var(--ds-primitive-shadow-focus);
}

html[data-ds-v2="1"] #main-content .bg-tertiary,
html[data-ds-v2="1"] #main-content button.bg-primary,
html[data-ds-v2="1"] #main-content button[class~="bg-tertiary"] {
  border-color: var(--ds-component-button-primary-border) !important;
  border-radius: var(--ds-component-button-primary-radius) !important;
  background: var(--ds-component-button-primary-background) !important;
  color: var(--ds-component-button-primary-content) !important;
  box-shadow: var(--ds-component-button-primary-shadow);
}

html[data-ds-v2="1"] #main-content .bg-tertiary:hover,
html[data-ds-v2="1"] #main-content button.bg-primary:hover,
html[data-ds-v2="1"] #main-content button[class~="bg-tertiary"]:hover {
  background: var(--ds-component-button-primary-backgroundhover) !important;
}

html[data-ds-v2="1"] #main-content [data-group-permission-domain-card="1"] {
  border-color: var(--ds-component-card-border) !important;
  background: var(--ds-component-card-background) !important;
  color: var(--ds-component-card-content) !important;
  box-shadow: var(--ds-component-card-shadow);
}

html[data-ds-v2="1"] #main-content [data-group-permission-domain-card="1"]:hover,
html[data-ds-v2="1"] #main-content [data-group-permission-domain-card="1"]:focus-visible {
  border-color: var(--ds-semantic-action-primary) !important;
  background: var(--ds-component-card-background) !important;
  box-shadow: var(--ds-component-card-shadow-hover, var(--ds-component-card-shadow));
}

html[data-ds-v2="1"] #main-content .bg-surface.rounded-lg,
html[data-ds-v2="1"] #main-content .bg-surface.rounded-xl,
html[data-ds-v2="1"] #main-content .bg-surface.rounded-2xl,
html[data-ds-v2="1"] #main-content .bg-surface[class*="rounded-["] {
  border-color: var(--ds-component-card-border);
  border-radius: var(--ds-component-card-radius) !important;
  background: var(--ds-component-card-background);
  color: var(--ds-component-card-content);
  box-shadow: var(--ds-component-card-shadow);
}

html[data-ds-v2="1"] #main-content table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  background: var(--ds-component-table-background);
  color: var(--ds-component-table-rowcontent);
}

html[data-ds-v2="1"] #main-content thead {
  background: var(--ds-component-table-headerbackground);
  color: var(--ds-component-table-headercontent);
}

html[data-ds-v2="1"] #main-content th,
html[data-ds-v2="1"] #main-content td {
  border-color: var(--ds-component-table-divider) !important;
}

html[data-ds-v2="1"] #main-content tbody tr {
  min-height: var(--ds-component-table-rowheight);
  transition: background-color var(--ds-primitive-motion-fast) var(--ds-primitive-motion-easing);
}

html[data-ds-v2="1"] #main-content tbody tr:hover {
  background: var(--ds-component-table-rowhover);
}

html[data-ds-v2="1"] [data-ds-tone="success"] { --ds-tone: var(--ds-semantic-status-success); --ds-tone-surface: var(--ds-semantic-status-success-surface); }
html[data-ds-v2="1"] [data-ds-tone="warning"] { --ds-tone: var(--ds-semantic-status-warning); --ds-tone-surface: var(--ds-semantic-status-warning-surface); }
html[data-ds-v2="1"] [data-ds-tone="attention"] { --ds-tone: var(--ds-semantic-status-warning); --ds-tone-surface: var(--ds-semantic-status-warning-surface); }
html[data-ds-v2="1"] [data-ds-tone="danger"] { --ds-tone: var(--ds-semantic-status-danger); --ds-tone-surface: var(--ds-semantic-status-danger-surface); }
html[data-ds-v2="1"] [data-ds-tone="info"] { --ds-tone: var(--ds-semantic-status-info); --ds-tone-surface: var(--ds-semantic-status-info-surface); }
html[data-ds-v2="1"] [data-ds-tone="special"] { --ds-tone: var(--ds-semantic-status-special); --ds-tone-surface: var(--ds-semantic-status-special-surface); }
html[data-ds-v2="1"] [data-ds-tone="neutral"] { --ds-tone: var(--ds-semantic-content-secondary); --ds-tone-surface: var(--ds-semantic-surface-sunken); }
html[data-ds-v2="1"] [data-ds-tone] {
  border-color: color-mix(in srgb, var(--ds-tone) 24%, transparent) !important;
  background: var(--ds-tone-surface) !important;
  color: var(--ds-tone) !important;
}

/*
 * Semantic accents are opt-in presentation roles. They let a theme color
 * badges, icon tiles, KPI values and progress bars without coupling domain
 * templates to Tailwind palette names or to a specific visual theme.
 */
html[data-ds-v2="1"] [data-ds-accent="primary"] {
  --ds-accent: var(--ds-semantic-action-primary);
  --ds-accent-surface: color-mix(in srgb, var(--ds-semantic-action-primary) 10%, var(--ds-semantic-surface-card));
  --ds-accent-border: color-mix(in srgb, var(--ds-semantic-action-primary) 24%, transparent);
}
html[data-ds-v2="1"] [data-ds-accent="success"] { --ds-accent: var(--ds-semantic-status-success); --ds-accent-surface: var(--ds-semantic-status-success-surface); --ds-accent-border: var(--ds-semantic-status-success-border); }
html[data-ds-v2="1"] [data-ds-accent="warning"],
html[data-ds-v2="1"] [data-ds-accent="attention"] { --ds-accent: var(--ds-semantic-status-warning); --ds-accent-surface: var(--ds-semantic-status-warning-surface); --ds-accent-border: var(--ds-semantic-status-warning-border); }
html[data-ds-v2="1"] [data-ds-accent="danger"] { --ds-accent: var(--ds-semantic-status-danger); --ds-accent-surface: var(--ds-semantic-status-danger-surface); --ds-accent-border: var(--ds-semantic-status-danger-border); }
html[data-ds-v2="1"] [data-ds-accent="info"] { --ds-accent: var(--ds-semantic-status-info); --ds-accent-surface: var(--ds-semantic-status-info-surface); --ds-accent-border: var(--ds-semantic-status-info-border); }
html[data-ds-v2="1"] [data-ds-accent="special"] { --ds-accent: var(--ds-semantic-status-special); --ds-accent-surface: var(--ds-semantic-status-special-surface); --ds-accent-border: var(--ds-semantic-status-special-border); }
html[data-ds-v2="1"] [data-ds-accent="neutral"] { --ds-accent: var(--ds-semantic-content-secondary); --ds-accent-surface: var(--ds-semantic-surface-sunken); --ds-accent-border: var(--ds-semantic-border-subtle); }

html[data-ds-v2="1"] [data-ds-accent-role="text"],
html[data-ds-v2="1"] [data-ds-accent-role="value"],
html[data-ds-v2="1"] [data-ds-accent-role="link"] {
  color: var(--ds-accent, var(--ds-semantic-action-primary)) !important;
}

html[data-ds-v2="1"] [data-ds-accent-role="badge"],
html[data-ds-v2="1"] [data-ds-component="badge"][data-ds-accent] {
  min-height: var(--ds-component-badge-height);
  padding-inline: var(--ds-component-badge-paddinginline);
  border: 1px solid var(--ds-accent-border, var(--ds-semantic-border-subtle)) !important;
  border-radius: var(--ds-component-badge-radius) !important;
  background: var(--ds-accent-surface, var(--ds-semantic-surface-sunken)) !important;
  color: var(--ds-accent, var(--ds-semantic-content-secondary)) !important;
}

html[data-ds-v2="1"] [data-ds-accent-role="icon"],
html[data-ds-v2="1"] [data-ds-component="icon-tile"][data-ds-accent] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ds-component-icontile-size);
  height: var(--ds-component-icontile-size);
  flex: 0 0 var(--ds-component-icontile-size);
  border: 1px solid var(--ds-accent-border, var(--ds-component-icontile-border)) !important;
  border-radius: var(--ds-component-icontile-radius) !important;
  background: var(--ds-accent-surface, var(--ds-component-icontile-background)) !important;
  color: var(--ds-accent, var(--ds-component-icontile-content)) !important;
}

html[data-ds-v2="1"] [data-ds-component="progress"] {
  height: var(--ds-component-progress-height);
  overflow: hidden;
  border-radius: var(--ds-component-progress-radius);
  background: var(--ds-component-progress-track) !important;
}

html[data-ds-v2="1"] [data-ds-component="progress"] > [data-ds-accent-role="indicator"] {
  height: 100%;
  border-radius: inherit;
  background: var(--ds-accent, var(--ds-component-progress-indicator)) !important;
}

html[data-ds-v2="1"] [data-ds-component="state"][data-core-state] {
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--ds-primitive-spacing-sm, .75rem);
  max-width: 42rem;
  color: var(--ds-semantic-content-secondary);
}

html[data-ds-v2="1"] [data-ds-component="state"][data-core-state-region="table"] {
  margin-inline: auto;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

html[data-ds-v2="1"] [data-ds-component="state"][data-core-state-region="inline"] {
  align-items: center;
  text-align: left;
}

html[data-ds-v2="1"] [data-ds-component="state"] .core-state__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

html[data-ds-v2="1"] [data-ds-component="state"] .core-state__body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: .25rem;
}

html[data-ds-v2="1"] [data-ds-component="state"] .core-state__title,
html[data-ds-v2="1"] [data-ds-component="state"] .core-state__message {
  color: var(--ds-accent, var(--ds-semantic-content-secondary));
  font: var(--ds-typography-label-xs, 600 .625rem/1.2 var(--font-mono, ui-monospace, SFMono-Regular, monospace));
  letter-spacing: .16em;
  text-transform: uppercase;
}

html[data-ds-v2="1"] [data-ds-component="state"] .core-state__description {
  color: var(--ds-semantic-content-tertiary);
  font: var(--ds-typography-body-sm, 400 .875rem/1.5 var(--font-sans, system-ui, sans-serif));
}

html[data-ds-v2="1"] [data-ds-component="state"].core-state--compact .core-state__icon {
  display: none;
}

/* CoreDashboardGrid bridge. GridStack moves each declared widget below a
 * .grid-stack-item-content wrapper, so theme selectors must target the real
 * widget rather than assume data-layout-item stays a direct child. */
html[data-ds-v2="1"] .core-dashboard-grid {
  --core-dashboard-grid-gap: var(--ds-component-dashboardgrid-gap, var(--ds-primitive-spacing-sm));
  background: var(--ds-component-dashboardgrid-canvas, transparent);
  border-radius: var(--ds-component-dashboardgrid-widget-radius, var(--ds-component-card-radius));
}

html[data-ds-v2="1"][data-ds-dashboard-surface="framed"] .core-dashboard-grid {
  box-shadow: 0 0 0 1px var(--ds-component-dashboardgrid-widget-border, var(--ds-component-card-border));
}

html[data-ds-v2="1"] .core-dashboard-grid .core-dashboard-grid__widget {
  min-height: 100%;
  box-sizing: border-box;
  border: 1px solid var(--ds-component-dashboardgrid-widget-border, var(--ds-component-card-border)) !important;
  border-radius: var(--ds-component-dashboardgrid-widget-radius, var(--ds-component-card-radius)) !important;
  background: var(--ds-component-dashboardgrid-widget-background, var(--ds-component-card-background)) !important;
  color: var(--ds-component-dashboardgrid-widget-content, var(--ds-component-card-content)) !important;
  box-shadow: var(--ds-component-dashboardgrid-widget-shadow, var(--ds-component-card-shadow)) !important;
}

html[data-ds-v2="1"] .core-dashboard-grid .core-dashboard-grid__widget[data-ds-widget-kind="kpi"] {
  border-color: var(--ds-component-dashboardgrid-kpi-border, var(--ds-component-dashboardgrid-widget-border, var(--ds-component-card-border))) !important;
  border-radius: var(--ds-component-dashboardgrid-kpi-radius, var(--ds-component-dashboardgrid-widget-radius, var(--ds-component-card-radius))) !important;
  background: var(--ds-component-dashboardgrid-kpi-background, var(--ds-component-dashboardgrid-widget-background, var(--ds-component-card-background))) !important;
  color: var(--ds-component-dashboardgrid-kpi-content, var(--ds-component-dashboardgrid-widget-content, var(--ds-component-card-content))) !important;
  box-shadow: var(--ds-component-dashboardgrid-kpi-shadow, var(--ds-component-dashboardgrid-widget-shadow, var(--ds-component-card-shadow))) !important;
}

html[data-ds-v2="1"][data-ds-dashboard-kpi="accented"] .core-dashboard-grid .core-dashboard-grid__widget[data-ds-widget-kind="kpi"] {
  border-inline-start: 3px solid var(--ds-component-dashboardgrid-kpi-accent, var(--ds-semantic-action-primary)) !important;
}

html[data-ds-v2="1"] .core-dashboard-grid .core-dashboard-grid__widget[data-ds-widget-kind="kpi"] :is(.label-mono, [data-ds-accent-role="label"]) {
  color: var(--ds-component-dashboardgrid-kpi-label, var(--ds-semantic-content-secondary)) !important;
}

html[data-ds-v2="1"] .core-dashboard-grid .core-dashboard-grid__widget[data-ds-widget-kind="kpi"] :is(.text-4xl, [data-ds-accent-role="value"]) {
  color: var(--ds-component-dashboardgrid-kpi-value, var(--ds-semantic-content-primary)) !important;
}

html[data-ds-v2="1"] .core-dashboard-grid .core-dashboard-grid__widget:is([data-ds-widget-kind="chart"], [data-ds-widget-kind="table"], [data-ds-widget-kind="list"], [data-ds-widget-kind="health"], [data-ds-widget-kind="actions"], [data-ds-widget-kind="module"]) {
  border-color: var(--ds-component-dashboardgrid-panel-border, var(--ds-component-dashboardgrid-widget-border, var(--ds-component-card-border))) !important;
  border-radius: var(--ds-component-dashboardgrid-panel-radius, var(--ds-component-dashboardgrid-widget-radius, var(--ds-component-card-radius))) !important;
  background: var(--ds-component-dashboardgrid-panel-background, var(--ds-component-dashboardgrid-widget-background, var(--ds-component-card-background))) !important;
  color: var(--ds-component-dashboardgrid-panel-content, var(--ds-component-dashboardgrid-widget-content, var(--ds-component-card-content))) !important;
  box-shadow: var(--ds-component-dashboardgrid-panel-shadow, var(--ds-component-dashboardgrid-widget-shadow, var(--ds-component-card-shadow))) !important;
}

html[data-ds-v2="1"][data-ds-dashboard-panels="quiet"] .core-dashboard-grid .core-dashboard-grid__widget:is([data-ds-widget-kind="chart"], [data-ds-widget-kind="table"], [data-ds-widget-kind="list"], [data-ds-widget-kind="health"], [data-ds-widget-kind="actions"], [data-ds-widget-kind="module"]) {
  box-shadow: none !important;
}

html[data-ds-v2="1"] .core-dashboard-grid.core-dashboard-grid--editing .grid-stack-item-content {
  outline: 1px dashed var(--ds-component-dashboardgrid-editor-outline, var(--ds-semantic-border-interactive));
  outline-offset: 3px;
}

html[data-ds-v2="1"] .core-dashboard-grid .core-dashboard-grid__handle {
  border-color: var(--ds-component-dashboardgrid-editor-handleborder, var(--ds-semantic-border-default)) !important;
  border-radius: var(--ds-component-dashboardgrid-editor-handleradius, var(--ds-primitive-rounded-sm)) !important;
  background: var(--ds-component-dashboardgrid-editor-handlebackground, var(--ds-semantic-surface-elevated)) !important;
  color: var(--ds-component-dashboardgrid-editor-handlecontent, var(--ds-semantic-content-secondary)) !important;
  box-shadow: var(--ds-component-dashboardgrid-editor-handleshadow, var(--ds-primitive-shadow-xs)) !important;
}

/* Dashboard compatibility: KPI surfaces stay neutral. Semantic color belongs
   to the compact visual or comparison, not to the value itself. */
html[data-ds-v2="1"] #dashboard-layout > [data-ds-widget-kind="kpi"][data-ds-accent] {
  background: var(--ds-component-card-background) !important;
  color: var(--ds-component-card-content) !important;
}

/* Mini dashboard Core de cuatro bloques (views/partials/core_mini_dashboard.php).
   Cuatro slots iguales en escritorio, dos en tablet y uno en móvil. La
   geometría deriva de tokens Theme V2: ninguna vista declara su propio
   <style>. Los slots crecen por contenido y recortan con `overflow: clip`;
   un scroll interno, horizontal o vertical, está prohibido por contrato. */
.core-mini-dashboard {
  --core-mini-dashboard-gap: var(--ds-component-dashboardgrid-gap, var(--ds-primitive-spacing-md, 1rem));
  --core-mini-dashboard-slot-padding: var(--ds-primitive-spacing-md, 1rem);
  --core-mini-dashboard-slot-radius: var(--ds-component-dashboardgrid-kpi-radius, var(--ds-component-card-radius, .75rem));
  --core-mini-dashboard-slot-border: var(--ds-component-dashboardgrid-kpi-border, var(--ds-component-dashboardgrid-widget-border, var(--ds-component-card-border, rgb(148 163 184 / .35))));
  --core-mini-dashboard-slot-background: var(--ds-component-dashboardgrid-kpi-background, var(--ds-component-dashboardgrid-widget-background, var(--ds-component-card-background, #fff)));
  --core-mini-dashboard-slot-content: var(--ds-component-dashboardgrid-kpi-content, var(--ds-component-dashboardgrid-widget-content, var(--ds-component-card-content, inherit)));
  --core-mini-dashboard-slot-shadow: var(--ds-component-dashboardgrid-widget-shadow, var(--ds-primitive-shadow-xs, 0 1px 2px rgb(15 23 42 / .04)));
  --core-mini-dashboard-label-size: .75rem;
  --core-mini-dashboard-value-size: 1.875rem;
  --core-mini-dashboard-comparison-size: .6875rem;
  --core-mini-dashboard-visual-width: 5rem;
  --core-mini-dashboard-visual-height: 2rem;
  display: block;
  min-width: 0;
  margin-block-end: var(--core-mini-dashboard-gap);
}

.core-mini-dashboard__bar {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  margin-block-end: calc(var(--core-mini-dashboard-gap) / 2);
}

.core-mini-dashboard__editor {
  position: relative;
  z-index: 90;
  display: inline-flex;
}

.core-mini-dashboard__panel {
  width: min(360px, calc(100vw - 2rem));
  background: var(--ds-component-card-background, #fff);
  color: var(--ds-component-card-content, inherit);
  opacity: 1;
}

.core-mini-dashboard__grid {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: var(--core-mini-dashboard-gap);
}

.core-mini-dashboard__slot {
  position: relative;
  display: flex;
  min-width: 0;
  max-width: 100%;
  height: 100%;
  box-sizing: border-box;
  flex-direction: column;
  justify-content: center;
  padding: var(--core-mini-dashboard-slot-padding);
  border: 1px solid var(--core-mini-dashboard-slot-border);
  border-radius: var(--core-mini-dashboard-slot-radius);
  background: var(--core-mini-dashboard-slot-background);
  box-shadow: var(--core-mini-dashboard-slot-shadow);
  color: var(--core-mini-dashboard-slot-content);
  overflow: hidden;
  overflow: clip;
}

.core-mini-dashboard__slot[hidden] {
  display: none !important;
}

.core-mini-dashboard__slot [data-core-kpi-card="1"] .core-kpi-card__label {
  font-size: var(--core-mini-dashboard-label-size);
}

.core-mini-dashboard__slot [data-core-kpi-card="1"] .core-kpi-card__value {
  font-size: var(--core-mini-dashboard-value-size);
  font-size: clamp(1.5rem, 10cqi, var(--core-mini-dashboard-value-size));
}

.core-mini-dashboard__slot [data-core-kpi-card="1"] .core-kpi-card__comparison {
  font-size: var(--core-mini-dashboard-comparison-size);
}

.core-mini-dashboard__slot [data-core-kpi-card="1"] .core-kpi-card__sparkline {
  width: min(var(--core-mini-dashboard-visual-width), 28cqi);
  height: var(--core-mini-dashboard-visual-height);
}

.core-mini-dashboard__grid .core-dashboard-selection__replace {
  position: absolute;
  z-index: 30;
  top: .375rem;
  right: .375rem;
  display: none;
  width: 1.75rem;
  height: 1.75rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ds-component-dashboardgrid-editor-handleborder, var(--ds-semantic-border-default, rgb(100 116 139 / .28)));
  border-radius: 999px;
  background: var(--ds-component-dashboardgrid-editor-handlebackground, var(--ds-component-card-background, #fff));
  color: var(--ds-component-dashboardgrid-editor-handlecontent, var(--ds-semantic-content-secondary, #64748b));
  box-shadow: var(--ds-component-dashboardgrid-editor-handleshadow, var(--ds-primitive-shadow-xs, 0 2px 8px rgb(15 23 42 / .12)));
  font-size: .875rem;
  line-height: 1;
  cursor: pointer;
}

.core-mini-dashboard__grid.core-dashboard-selection--editing .core-dashboard-selection__replace {
  display: inline-flex;
}

.core-mini-dashboard__grid.core-dashboard-selection--editing [data-layout-item] {
  outline: 1px dashed var(--ds-component-dashboardgrid-editor-outline, var(--ds-semantic-border-interactive, rgb(100 116 139 / .55)));
  outline-offset: 2px;
}

@media (min-width: 640px) {
  .core-mini-dashboard__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .core-mini-dashboard__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* CoreHero sobre lienzo. Variante `hero-canvas` de views/partials/module_hero.php:
   el título de página y sus acciones se apoyan directamente sobre el lienzo
   continuo, sin banda blanca de ancho completo. No altera `hero` ni
   `space-module-nav`; el contrato vive en PROMPTS/arquitectura/CONTRATO_CORE_HERO.md. */
[data-ds-component="module-hero"][data-ds-surface="hero-canvas"] {
  --module-hero-canvas-accent-width: .375rem;
  --module-hero-canvas-accent-height: 2rem;
  --module-hero-canvas-title-size: 1.5rem;
  --module-hero-canvas-subtitle-size: .8125rem;
  display: block;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

[data-ds-component="module-hero"][data-ds-surface="hero-canvas"] .module-hero__accent {
  display: inline-block;
  width: var(--module-hero-canvas-accent-width);
  height: var(--module-hero-canvas-accent-height);
  flex: 0 0 auto;
  border-radius: 999px;
}

[data-ds-component="module-hero"][data-ds-surface="hero-canvas"] .module-hero__title {
  min-width: 0;
  margin: 0;
  color: var(--ds-semantic-content-primary, #172033);
  font-family: var(--font-display, var(--font-sans, system-ui, sans-serif));
  font-size: var(--module-hero-canvas-title-size);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.15;
  text-transform: none;
  overflow-wrap: anywhere;
}

[data-ds-component="module-hero"][data-ds-surface="hero-canvas"] .module-hero__subtitle {
  min-width: 0;
  margin: .125rem 0 0;
  color: var(--ds-semantic-content-secondary, #64748b);
  font-size: var(--module-hero-canvas-subtitle-size);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* Dashboard global de referencia (views/dashboard.php, MD4-020 + CRMUI-030).
   El Dashboard conserva su catálogo abierto de 22+ bloques y su selección por
   usuario; aquí sólo vive su geometría, derivada de tokens Theme V2, para que
   la vista no declare un <style> propio ni un color literal.

   Regiones declaradas por `data-dashboard-layout-group`:
   - `kpi`      ribbon compacto de 2 / 3 / 6 columnas; label 11 px, valor 24 px y
                pie 10 px. Sin mini serie: el dominio no publica `trend.series`.
   - `panel`    dos columnas editoriales independientes de altura natural. Se usa
                flujo multicolumna con `break-inside: avoid` en lugar de una
                rejilla de filas compartidas, que reservaría un hueco del alto del
                widget vecino. Por debajo de 1024 px pasa a una sola columna.
   - `external` mounts autorizados `dashboard.widgets` a ancho completo.

   MD4-020: ningún bloque abre scroll interno. `overflow: clip` recorta; jamás
   se declara `overflow: auto` dentro de un widget. */
:is(#dashboard-layout, #client-profile-layout, #prospect-profile-layout) {
  --nxg-dashboard-gap: var(--ds-component-dashboardgrid-gap, var(--ds-primitive-spacing-md, 1rem));
  --nxg-dashboard-ribbon-gap: .75rem;
  --nxg-dashboard-ribbon-padding: .875rem;
  --nxg-dashboard-ribbon-radius: .75rem;
  --nxg-dashboard-ribbon-label-size: .6875rem;
  --nxg-dashboard-ribbon-value-size: 1.5rem;
  --nxg-dashboard-ribbon-footer-size: .625rem;
  --nxg-dashboard-panel-gap: 1.25rem;
  --nxg-dashboard-panel-padding: 1.25rem;
  --nxg-dashboard-panel-radius: 1rem;
  --nxg-dashboard-widget-border: var(--ds-component-dashboardgrid-widget-border, var(--ds-component-card-border, rgb(148 163 184 / .30)));
  --nxg-dashboard-widget-background: var(--ds-component-dashboardgrid-widget-background, var(--ds-component-card-background, #fff));
  --nxg-dashboard-widget-shadow: var(--ds-component-dashboardgrid-widget-shadow, var(--ds-primitive-shadow-xs, 0 1px 2px rgb(15 23 42 / .04)));
  --nxg-dashboard-widget-content: var(--ds-component-dashboardgrid-widget-content, var(--ds-component-card-content, inherit));
  --nxg-dashboard-widget-separator: var(--ds-semantic-border-subtle, rgb(148 163 184 / .24));
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--nxg-dashboard-gap);
}

:is(#dashboard-layout, #client-profile-layout, #prospect-profile-layout) > [data-dashboard-layout-group] {
  min-width: 0;
}

:is(#dashboard-layout, #client-profile-layout, #prospect-profile-layout) > [data-dashboard-layout-group]:not(:has(> [data-layout-item]:not([hidden]))) {
  display: none;
}

:is(#dashboard-layout, #client-profile-layout, #prospect-profile-layout) [data-layout-item] {
  position: relative;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--nxg-dashboard-widget-border);
  background: var(--nxg-dashboard-widget-background);
  box-shadow: var(--nxg-dashboard-widget-shadow);
  color: var(--nxg-dashboard-widget-content);
  outline: 0;
  overflow: hidden;
  overflow: clip;
}

:is(#dashboard-layout, #client-profile-layout, #prospect-profile-layout) [data-layout-item][hidden] {
  display: none !important;
}

/* Fila KPI tipo ribbon. */
:is(#dashboard-layout, #client-profile-layout, #prospect-profile-layout) [data-dashboard-layout-group="kpi"] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--nxg-dashboard-ribbon-gap);
}

:is(#dashboard-layout, #client-profile-layout, #prospect-profile-layout) [data-dashboard-layout-group="kpi"] > [data-layout-item] {
  height: 100%;
  padding: var(--nxg-dashboard-ribbon-padding);
  border-radius: var(--nxg-dashboard-ribbon-radius);
}

:is(#dashboard-layout, #client-profile-layout, #prospect-profile-layout) [data-dashboard-layout-group="kpi"] [data-core-kpi-card="1"] .core-kpi-card__action {
  gap: .25rem;
  justify-content: flex-start;
}

:is(#dashboard-layout, #client-profile-layout, #prospect-profile-layout) [data-dashboard-layout-group="kpi"] [data-core-kpi-card="1"] .core-kpi-card__label {
  font-size: var(--nxg-dashboard-ribbon-label-size);
  font-weight: 500;
}

:is(#dashboard-layout, #client-profile-layout, #prospect-profile-layout) [data-dashboard-layout-group="kpi"] [data-core-kpi-card="1"] .core-kpi-card__value {
  font-size: var(--nxg-dashboard-ribbon-value-size);
  font-size: clamp(1.125rem, 13cqi, var(--nxg-dashboard-ribbon-value-size));
}

:is(#dashboard-layout, #client-profile-layout, #prospect-profile-layout) [data-dashboard-layout-group="kpi"] [data-core-kpi-card="1"] .core-kpi-card__comparison {
  font-size: var(--nxg-dashboard-ribbon-footer-size);
}

:is(#dashboard-layout, #client-profile-layout, #prospect-profile-layout) [data-dashboard-layout-group="kpi"] [data-core-kpi-card="1"] .core-kpi-card__visual {
  min-width: 1rem;
}

:is(#dashboard-layout, #client-profile-layout, #prospect-profile-layout) [data-dashboard-layout-group="kpi"] [data-core-kpi-card="1"] .core-kpi-card__trend-arrow {
  font-size: 1rem;
}

/* Evolución visual del Dashboard global. Este selector se apoya en un marcador
   de composición de la vista, no cambia la primitive CoreKpiCard ni los
   tokens compartidos de DashboardGrid: las fichas de entidad, mini dashboards
   y módulos conservan exactamente su receta. La jerarquía se consigue con
   separación de superficies y tipografía, no con color decorativo. */
[data-ds-dashboard="1"][data-dashboard-visual="elevated-hierarchy"] #dashboard-layout {
  --nxg-dashboard-gap: clamp(.875rem, 1.25vw, 1.125rem);
  --nxg-dashboard-ribbon-gap: .625rem;
  --nxg-dashboard-ribbon-padding: .9375rem;
  --nxg-dashboard-panel-gap: 1rem;
  --nxg-dashboard-panel-padding: 1.125rem;
  --nxg-dashboard-panel-radius: .875rem;
}

[data-ds-dashboard="1"][data-dashboard-visual="elevated-hierarchy"] [data-dashboard-controls="1"] {
  min-height: 2rem;
}

/* El lienzo del Dashboard ya aporta `space-y-6` entre hijos directos. Consume
   la variable pública de CoreHero para no sumar dos separaciones; no pinta ni
   elimina piel local: la primitive es la única dueña de esa decisión. */
[data-ds-dashboard="1"][data-dashboard-visual="elevated-hierarchy"] .dashboard-module-hero {
  --core-hero-next-surface-gap: 0;
  padding-block: .25rem !important;
}

/* Las métricas se leen como una banda del mismo resumen y no como once
   ventanas independientes. Cada slot sigue siendo CoreKpiCard y conserva su
   borde/acento semántico, pero la banda añade una capa visual inequívoca. */
[data-ds-dashboard="1"][data-dashboard-visual="elevated-hierarchy"] #dashboard-layout [data-dashboard-layout-group="kpi"] {
  box-sizing: border-box;
  padding: .625rem;
  border: 1px solid color-mix(in srgb, var(--nxg-dashboard-widget-border) 72%, transparent);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--ds-semantic-surface-elevated) 72%, var(--ds-semantic-surface-canvas));
}

[data-ds-dashboard="1"][data-dashboard-visual="elevated-hierarchy"] #dashboard-layout [data-dashboard-layout-group="kpi"] > [data-layout-item] {
  border-color: color-mix(in srgb, var(--nxg-dashboard-widget-border) 82%, transparent);
  background: color-mix(in srgb, var(--nxg-dashboard-widget-background) 96%, var(--ds-semantic-surface-canvas));
  box-shadow: var(--ds-primitive-shadow-xs);
}

[data-ds-dashboard="1"][data-dashboard-visual="elevated-hierarchy"] #dashboard-layout [data-dashboard-layout-group="panel"] > [data-layout-item],
[data-ds-dashboard="1"][data-dashboard-visual="elevated-hierarchy"] #dashboard-layout [data-dashboard-layout-group="external"] > [data-layout-item] {
  border-color: color-mix(in srgb, var(--nxg-dashboard-widget-border) 88%, transparent);
  box-shadow: var(--ds-primitive-shadow-xs);
}

[data-ds-dashboard="1"][data-dashboard-visual="elevated-hierarchy"] #dashboard-layout .nxg-widget__head {
  margin-block-end: 1.125rem;
  padding-block-end: .625rem;
}

[data-ds-dashboard="1"][data-dashboard-visual="elevated-hierarchy"] #dashboard-layout .nxg-widget__title {
  font-size: .8125rem;
  font-weight: 650;
  letter-spacing: -.01em;
}

[data-ds-dashboard="1"][data-dashboard-visual="elevated-hierarchy"] #dashboard-layout .nxg-widget__meta {
  font-size: .625rem;
}

@media (max-width: 639px) {
  [data-ds-dashboard="1"][data-dashboard-visual="elevated-hierarchy"] #dashboard-layout [data-dashboard-layout-group="kpi"] {
    padding: .5rem;
    border-radius: .875rem;
  }
}

@media (prefers-reduced-motion: no-preference) {
  [data-ds-dashboard="1"][data-dashboard-visual="elevated-hierarchy"] #dashboard-layout [data-dashboard-layout-group="kpi"] > [data-layout-item]:has(.core-kpi-card__action--interactive) {
    transition: border-color var(--ds-primitive-motion-fast) var(--ds-primitive-motion-easing), box-shadow var(--ds-primitive-motion-fast) var(--ds-primitive-motion-easing), transform var(--ds-primitive-motion-fast) var(--ds-primitive-motion-easing);
  }

  [data-ds-dashboard="1"][data-dashboard-visual="elevated-hierarchy"] #dashboard-layout [data-dashboard-layout-group="kpi"] > [data-layout-item]:has(.core-kpi-card__action--interactive):hover {
    border-color: var(--ds-semantic-border-interactive);
    box-shadow: var(--ds-primitive-shadow-sm);
    transform: translateY(-1px);
  }
}

/* Paneles editoriales de altura natural (Dashboard global). La ficha de
   entidad (Cliente/Prospecto) hereda esta base por el selector compartido,
   pero CRMUI-051 la sustituye por una rejilla compacta propia justo debajo:
   sus reglas comparten especificidad y llegan después en el CSS, así que
   `columns`/`break-inside`/`margin` quedan inertes para `#client-profile-layout`
   y `#prospect-profile-layout` sin reescribir esta base ni el contrato que la
   describe para el Dashboard. */
:is(#dashboard-layout, #client-profile-layout, #prospect-profile-layout) [data-dashboard-layout-group="panel"] {
  columns: 1;
  column-gap: var(--nxg-dashboard-panel-gap);
}

:is(#dashboard-layout, #client-profile-layout, #prospect-profile-layout) [data-dashboard-layout-group="panel"] > [data-layout-item] {
  display: inline-flex;
  width: 100%;
  margin: 0 0 var(--nxg-dashboard-panel-gap);
  flex-direction: column;
  padding: var(--nxg-dashboard-panel-padding);
  border-radius: var(--nxg-dashboard-panel-radius);
  vertical-align: top;
  break-inside: avoid;
}

:is(#dashboard-layout, #client-profile-layout, #prospect-profile-layout) [data-ds-layout-profile="panel"] > [data-crm-chart-fill="1"] {
  min-height: 240px;
}

/* Ficha de entidad (Cliente/Prospecto, CRMUI-051): rejilla compacta de 2/1
   columnas (2 en tablet/escritorio, 1 en móvil) con altura uniforme por fila,
   en vez del flujo de dos columnas de altura libre del Dashboard. CSS Grid,
   no `columns`, para que una fila corta no reserve el alto de la fila vecina:
   es la causa de los huecos que dejaba el masonry con bloques de altura
   dispar. Una rejilla de 3/4 columnas se probó y se descartó: con sólo dos
   columnas cabía media gráfica ilegible y aun así sobraba espacio; la
   densidad real la da el `span` por catálogo (`EntityProfileWidgetCatalog`),
   no más columnas. `--nxg-profile-card-min-height` es el suelo común que
   aproximan las gráficas ECharts compactas (ver core-echarts.js/height por
   widget); un bloque con más contenido crece sin romper la fila, nunca hace
   scroll interno. */
:is(#client-profile-layout, #prospect-profile-layout) {
  --nxg-profile-panel-gap: var(--ds-component-dashboardgrid-gap, 1rem);
  --nxg-profile-panel-padding: .875rem;
  --nxg-profile-card-min-height: 15rem;
}

:is(#client-profile-layout, #prospect-profile-layout) [data-dashboard-layout-group="panel"] {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--nxg-profile-panel-gap);
  align-items: stretch;
}

:is(#client-profile-layout, #prospect-profile-layout) [data-dashboard-layout-group="panel"] > [data-layout-item] {
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: var(--nxg-profile-card-min-height);
  padding: var(--nxg-profile-panel-padding);
  border-radius: var(--nxg-dashboard-panel-radius);
}

:is(#client-profile-layout, #prospect-profile-layout) [data-dashboard-layout-group="panel"] > [data-ds-widget-span="wide"] {
  grid-column: span 2;
}

:is(#client-profile-layout, #prospect-profile-layout) .nxg-widget__head {
  margin-block-end: .5rem;
  padding-block-end: .5rem;
}

:is(#dashboard-layout, #client-profile-layout, #prospect-profile-layout) [data-dashboard-layout-group="external"] {
  display: grid;
  gap: var(--nxg-dashboard-gap);
}

:is(#dashboard-layout, #client-profile-layout, #prospect-profile-layout) [data-dashboard-layout-group="external"] > [data-layout-item] {
  width: 100%;
  padding: var(--nxg-dashboard-panel-padding);
  border-radius: var(--nxg-dashboard-panel-radius);
  overflow: visible;
}

/* Cabecera editorial de cada panel: 12 px en mayúsculas con separador inferior. */
:is(#dashboard-layout, #client-profile-layout, #prospect-profile-layout) .nxg-widget__head {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-block-end: 1rem;
  padding-block-end: .75rem;
  border-block-end: 1px solid var(--nxg-dashboard-widget-separator);
}

/* Piloto "color donde importa mirar": el título de un panel baja la voz — caja
   normal, peso medio, sin el shout de mayúsculas ni el letter-spacing que las
   acompañaba. En el piloto la regla estuvo acotada a `#dashboard-layout` para
   no propagarse antes de tiempo; ahora vive en el selector compartido, así que
   la ficha de Cliente y la de Prospecto —que tenían la misma cabecera a
   gritos— la heredan sin declararla dos veces. */
:is(#dashboard-layout, #client-profile-layout, #prospect-profile-layout) .nxg-widget__title {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: .375rem;
  margin: 0;
  color: var(--ds-semantic-content-primary, #172033);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: none;
  overflow-wrap: anywhere;
}

:is(#dashboard-layout, #client-profile-layout, #prospect-profile-layout) .nxg-widget__meta {
  min-width: 0;
  margin: 0;
  color: var(--ds-semantic-content-secondary, #64748b);
  font-size: .6875rem;
  line-height: 1.35;
  text-align: right;
  overflow-wrap: anywhere;
}

:is(#dashboard-layout, #client-profile-layout, #prospect-profile-layout) .nxg-widget__meta--stacked {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .1rem;
}

/* Split gráfico + desglose. Sin ancho fijo: por debajo de 1440 px apila para no
   desbordar la columna editorial. */
:is(#dashboard-layout, #client-profile-layout, #prospect-profile-layout) .nxg-widget__split {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 1rem;
}

/* Resumen compacto que sustituye a una tabla con scroll (MD4-020). */
:is(#dashboard-layout, #client-profile-layout, #prospect-profile-layout) .nxg-widget__summary {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: .25rem;
}

:is(#dashboard-layout, #client-profile-layout, #prospect-profile-layout) .nxg-summary-row {
  display: grid;
  width: 100%;
  min-width: 0;
  align-items: center;
  gap: .5rem;
  grid-template-columns: minmax(0, 1fr) repeat(3, minmax(2.5rem, auto));
  padding: .375rem .5rem;
  border: 0;
  border-radius: .5rem;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
}

:is(#dashboard-layout, #client-profile-layout, #prospect-profile-layout) button.nxg-summary-row {
  cursor: pointer;
}

:is(#dashboard-layout, #client-profile-layout, #prospect-profile-layout) button.nxg-summary-row:hover {
  background: var(--ds-semantic-surface-sunken, rgb(148 163 184 / .12));
}

:is(#dashboard-layout, #client-profile-layout, #prospect-profile-layout) .nxg-summary-row--head {
  color: var(--ds-semantic-content-secondary, #64748b);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

:is(#dashboard-layout, #client-profile-layout, #prospect-profile-layout) .nxg-summary-row__name {
  min-width: 0;
  overflow: hidden;
  font-size: .75rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(#dashboard-layout, #client-profile-layout, #prospect-profile-layout) .nxg-summary-row__value {
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

:is(#dashboard-layout, #client-profile-layout, #prospect-profile-layout) .nxg-summary-row__track {
  grid-column: 1 / -1;
  height: .375rem;
  border-radius: 999px;
  background: var(--ds-semantic-surface-sunken, rgb(148 163 184 / .18));
}

:is(#dashboard-layout, #client-profile-layout, #prospect-profile-layout) .nxg-summary-row__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--ds-semantic-action-primary, #2563eb);
}

/* Piloto "color donde importa mirar": el enlace de pie de panel deja de ser
   texto azul en mayúsculas ("VER CLIENTES") y pasa a un botón discreto con
   borde, en caja normal. El azul de acción en un enlace secundario compite con
   lo único que debería llevar color en la pantalla — alarma o dirección — y en
   un panel que ya tiene título, dato y gráfica es la tercera voz. Igual que el
   título de arriba, la regla vive ya en el selector compartido: el pie de la
   ficha de Cliente y de Prospecto era el mismo enlace azul en mayúsculas. */
:is(#dashboard-layout, #client-profile-layout, #prospect-profile-layout) .nxg-widget__footlink {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  margin-block-start: .75rem;
  padding: .25rem .625rem;
  border: 1px solid var(--ds-semantic-border-default, #c7d1de);
  border-radius: .375rem;
  background: transparent;
  color: var(--ds-semantic-content-secondary, #4b5870);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}

/* El pie pegado a la cabecera (`style="margin-block-start:0"`) conserva su
   posición: el botón añade padding, no separación vertical. */
:is(#dashboard-layout, #client-profile-layout, #prospect-profile-layout) .nxg-widget__footlink[style*="margin-block-start:0"] {
  margin-block-start: 0;
}

:is(#dashboard-layout, #client-profile-layout, #prospect-profile-layout) .nxg-widget__footlink:hover {
  border-color: var(--ds-semantic-border-strong, #6d7a91);
  color: var(--ds-semantic-content-primary, #172033);
  text-decoration: none;
}

:is(#dashboard-layout, #client-profile-layout, #prospect-profile-layout) .nxg-widget__note {
  margin: .5rem 0 0;
  color: var(--ds-semantic-content-secondary, #64748b);
  font-size: .6875rem;
  line-height: 1.35;
}

/* Disparador icónico compartido: Personalizar (editor de rejilla, en sus tres
   variantes) y la guía contextual de pantalla (assets/js/context-guides.js,
   .crm-context-guide-trigger) comparten esta forma para leerse como una
   pareja de controles del mismo tipo cuando coinciden junto al hero. Único
   sitio que define caja, radio, borde, fondo, foco e icono; quien lo consuma
   no declara geometría propia.
   Minimalista a propósito: sin borde en reposo ni en hover (el token
   --ds-semantic-border-interactive resolvía a azul y producía un anillo que
   no aportaba jerarquía, sólo ruido junto al hero). El estado interactivo se
   resuelve con un fondo sutil en vez de un borde. El foco NO se toca: sigue
   siendo :focus-visible con outline, requisito de accesibilidad. */
.core-icon-trigger {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--ds-primitive-rounded-full, 999px);
  background: var(--ds-semantic-surface-default, transparent);
  color: var(--ds-semantic-content-secondary, #64748b);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.core-icon-trigger:hover {
  background: var(--ds-semantic-surface-selected, rgb(100 116 139 / .12));
  color: var(--ds-semantic-content-primary, #172033);
  transform: translateY(-1px);
}

.core-icon-trigger:focus-visible {
  outline: 2px solid var(--ds-semantic-border-interactive, rgb(100 116 139 / .55));
  outline-offset: 2px;
}

.core-icon-trigger svg,
.core-icon-trigger i {
  width: 1rem;
  height: 1rem;
  font-size: .875rem;
  line-height: 1;
}

/* Personalizar: el editor de selección se portaliza al body, por lo que su
   superficie no puede depender del contenedor del dashboard. */
.nxg-dashboard-editor {
  position: relative;
  z-index: 90;
  display: inline-flex;
}

.nxg-dashboard-editor__panel {
  width: min(400px, calc(100vw - 2rem));
  max-height: calc(100vh - 6rem);
  padding: 1rem;
  border: 1px solid var(--ds-semantic-border-subtle, rgb(148 163 184 / .3));
  border-radius: .75rem;
  background: var(--ds-component-card-background, #fff);
  box-shadow: var(--ds-primitive-shadow-lg, 0 25px 50px -12px rgb(15 23 42 / .25));
  color: var(--ds-component-card-content, inherit);
  opacity: 1;
  overflow: auto;
}

.nxg-dashboard-editor__panel > * + * {
  margin-block-start: 1rem;
}

:is(#dashboard-layout, #client-profile-layout, #prospect-profile-layout).core-dashboard-selection--editing [data-layout-item] {
  outline: 1px dashed var(--ds-component-dashboardgrid-editor-outline, var(--ds-semantic-border-interactive, rgb(100 116 139 / .55)));
  outline-offset: 3px;
}

/* Los controles estructurales sólo se habilitan desde Personalizar. */
:is(#dashboard-layout, #client-profile-layout, #prospect-profile-layout) .core-dashboard-selection__remove {
  position: absolute;
  z-index: 30;
  top: .5rem;
  right: .5rem;
  display: none;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--ds-component-dashboardgrid-editor-handleborder, var(--ds-semantic-border-default, rgb(100 116 139 / .28)));
  border-radius: 999px;
  background: var(--ds-component-dashboardgrid-editor-handlebackground, var(--ds-component-card-background, #fff));
  box-shadow: var(--ds-component-dashboardgrid-editor-handleshadow, var(--ds-primitive-shadow-xs, 0 2px 8px rgb(15 23 42 / .12)));
  color: var(--ds-semantic-action-destructive, #b91c1c);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

:is(#dashboard-layout, #client-profile-layout, #prospect-profile-layout).core-dashboard-selection--editing .core-dashboard-selection__remove {
  display: inline-flex;
}

:is(#dashboard-layout, #client-profile-layout, #prospect-profile-layout) .core-dashboard-selection__replace {
  position: absolute;
  z-index: 30;
  top: .5rem;
  right: 2.875rem;
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding-inline: .5rem;
  border: 1px solid var(--ds-component-dashboardgrid-editor-handleborder, var(--ds-semantic-border-default, rgb(100 116 139 / .28)));
  border-radius: 999px;
  background: var(--ds-component-dashboardgrid-editor-handlebackground, var(--ds-component-card-background, #fff));
  box-shadow: var(--ds-component-dashboardgrid-editor-handleshadow, var(--ds-primitive-shadow-xs, 0 2px 8px rgb(15 23 42 / .12)));
  color: var(--ds-semantic-content-primary, inherit);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

:is(#dashboard-layout, #client-profile-layout, #prospect-profile-layout) .core-dashboard-selection__replace--only {
  right: .5rem;
}

:is(#dashboard-layout, #client-profile-layout, #prospect-profile-layout).core-dashboard-selection--editing .core-dashboard-selection__replace {
  display: inline-flex;
}

@media (min-width: 640px) {
  :is(#dashboard-layout, #client-profile-layout, #prospect-profile-layout) [data-dashboard-layout-group="kpi"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  :is(#client-profile-layout, #prospect-profile-layout) [data-dashboard-layout-group="panel"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #dashboard-layout[data-dashboard-kpi-columns="4"] [data-dashboard-layout-group="kpi"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  :is(#dashboard-layout, #client-profile-layout, #prospect-profile-layout) [data-dashboard-layout-group="kpi"] {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  :is(#dashboard-layout, #client-profile-layout, #prospect-profile-layout) [data-dashboard-layout-group="panel"] {
    columns: 2;
  }

  #dashboard-layout[data-dashboard-kpi-columns="4"] [data-dashboard-layout-group="kpi"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 639px) {
  :is(#client-profile-layout, #prospect-profile-layout) [data-dashboard-layout-group="panel"] > [data-ds-widget-span="wide"] {
    grid-column: span 1;
  }
}

@media (min-width: 1440px) {
  :is(#dashboard-layout, #client-profile-layout, #prospect-profile-layout) .nxg-widget__split {
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  }
}

html[data-ds-v2="1"] #main-content :focus-visible,
html[data-ds-v2="1"] #workspace-header :focus-visible {
  outline: 2px solid var(--ds-semantic-action-focus) !important;
  outline-offset: 2px;
  box-shadow: var(--ds-semantic-interaction-focus-ring) !important;
}

html[data-ds-v2="1"] #main-content ::selection {
  background: var(--ds-semantic-interaction-selection);
  color: var(--ds-semantic-content-primary);
}

html[data-ds-v2="1"] #main-content :disabled {
  opacity: var(--ds-semantic-interaction-disabled-opacity);
}

html[data-ds-v2="1"] [role="dialog"],
html[data-ds-v2="1"] .core-pines-hover-card__panel,
html[data-ds-v2="1"] .core-pines-context-menu__panel,
html[data-ds-v2="1"] .core-pines-assignment-picker__panel {
  border-color: var(--ds-component-modal-border, var(--ds-semantic-border-default)) !important;
  border-radius: var(--ds-component-modal-radius) !important;
  background: var(--ds-component-modal-background) !important;
  color: var(--ds-component-modal-content) !important;
  box-shadow: var(--ds-component-modal-shadow) !important;
}

/* CorePines modals are portalized to body, so they consume Theme V2 through
   local bridge variables instead of the workspace-only utility overrides. */
html[data-ds-v2="1"] .core-pines-modal {
  --core-pines-modal-background: var(--ds-component-modal-background);
  --core-pines-modal-content: var(--ds-component-modal-content);
  --core-pines-modal-border: var(--ds-component-modal-border, var(--ds-semantic-border-default));
  --core-pines-modal-radius: var(--ds-component-modal-radius);
  --core-pines-modal-shadow: var(--ds-component-modal-shadow);
  --core-pines-modal-backdrop: color-mix(in srgb, var(--ds-component-modal-backdrop, var(--ds-semantic-navigation-background)) 52%, transparent);
  --core-pines-button-primary-background: var(--ds-component-button-primary-background);
  --core-pines-button-primary-hover: var(--ds-component-button-primary-backgroundhover);
  --core-pines-button-primary-content: var(--ds-component-button-primary-content);
  --core-pines-button-primary-border: var(--ds-component-button-primary-border);
  --core-pines-button-primary-radius: var(--ds-component-button-primary-radius);
  --core-pines-button-primary-shadow: var(--ds-component-button-primary-shadow);
  --core-pines-button-secondary-background: var(--ds-component-button-secondary-background, var(--ds-semantic-action-secondary));
  --core-pines-button-secondary-hover: var(--ds-component-button-secondary-backgroundhover, var(--ds-semantic-action-secondary-hover));
  --core-pines-button-secondary-content: var(--ds-component-button-secondary-content, var(--ds-semantic-content-primary));
  --core-pines-button-secondary-border: var(--ds-component-button-secondary-border, var(--ds-semantic-border-default));
  --core-pines-button-secondary-radius: var(--ds-component-button-secondary-radius, var(--ds-component-button-primary-radius));
  --core-pines-button-danger-background: var(--ds-component-button-danger-background, var(--ds-semantic-action-destructive));
  --core-pines-button-danger-hover: color-mix(in srgb, var(--ds-component-button-danger-background, var(--ds-semantic-action-destructive)) 88%, var(--ds-semantic-content-primary));
  --core-pines-button-danger-content: var(--ds-component-button-danger-content, var(--ds-semantic-content-inverse));
  --core-pines-button-danger-border: var(--ds-component-button-danger-border, var(--ds-semantic-action-destructive));
  --core-pines-button-danger-radius: var(--ds-component-button-danger-radius, var(--ds-component-button-primary-radius));
  --core-pines-modal-close-background: var(--ds-component-modal-closebackground, var(--core-pines-button-secondary-background));
  --core-pines-modal-close-content: var(--ds-component-modal-closecontent, var(--core-pines-button-secondary-content));
  --core-pines-modal-close-border: var(--ds-component-modal-closeborder, var(--core-pines-button-secondary-border));
  --core-pines-input-background: var(--ds-component-input-background);
  --core-pines-input-content: var(--ds-component-input-content);
  --core-pines-input-border: var(--ds-component-input-border);
  --core-pines-input-border-focus: var(--ds-component-input-borderfocus);
  --core-pines-input-radius: var(--ds-component-input-radius);
  --core-pines-input-height: var(--ds-component-input-height);
  --core-pines-input-focus-shadow: var(--ds-component-input-focusshadow);
}

html[data-ds-v2="1"] .core-select-pines {
  --core-select-trigger-background: var(--ds-component-select-triggerbackground);
  --core-select-trigger-border: var(--ds-component-select-triggerborder);
  --core-select-trigger-content: var(--ds-component-select-triggercontent);
  --core-select-trigger-placeholder: var(--ds-component-select-triggerplaceholder);
  --core-select-trigger-radius: var(--ds-component-select-triggerradius);
  --core-select-trigger-height: var(--ds-component-select-triggerheight);
  --core-select-menu-background: var(--ds-component-select-menubackground);
  --core-select-menu-border: var(--ds-component-select-menuborder);
  --core-select-menu-radius: var(--ds-component-select-menuradius);
  --core-select-menu-shadow: var(--ds-component-select-menushadow);
  --core-select-search-background: var(--ds-component-select-searchbackground);
  --core-select-search-border: var(--ds-component-select-searchborder);
  --core-select-option-content: var(--ds-component-select-optioncontent);
  --core-select-option-muted: var(--ds-component-select-optionmuted);
  --core-select-option-hover: var(--ds-component-select-optionhover);
  --core-select-option-selected: var(--ds-component-select-optionselected);
  --core-select-option-selected-border: var(--ds-component-select-optionselectedborder);
  --core-select-focus-shadow: var(--ds-component-select-focusshadow);
}

html[data-ds-v2="1"] :is(.core-pines-choice, .core-form-choice, [data-core-form-choice-compat]) {
  --core-pines-choice-background: var(--ds-component-choice-background);
  --core-pines-choice-border: var(--ds-component-choice-border);
  --core-pines-choice-selected-background: var(--ds-component-choice-selectedbackground);
  --core-pines-choice-selected-border: var(--ds-component-choice-selectedborder);
  --core-pines-choice-content: var(--ds-component-choice-content);
  --core-pines-choice-description: var(--ds-component-choice-description);
  --core-pines-choice-accent: var(--ds-component-choice-accent);
  --core-pines-choice-radius: var(--ds-component-choice-radius);
  --core-pines-choice-control-size: var(--ds-component-choice-controlsize);
  --core-pines-choice-focus-shadow: var(--ds-component-choice-focusshadow);
}

html[data-ds-v2="1"] .core-pines-tabs {
  --core-pines-tabs-background: var(--ds-component-tabs-background);
  --core-pines-tabs-border: var(--ds-component-tabs-border);
  --core-pines-tabs-content: var(--ds-component-tabs-content);
  --core-pines-tabs-hover-background: var(--ds-component-tabs-hoverbackground);
  --core-pines-tabs-hover-content: var(--ds-component-tabs-hovercontent);
  --core-pines-tabs-active-background: var(--ds-component-tabs-activebackground);
  --core-pines-tabs-active-border: var(--ds-component-tabs-activeborder);
  --core-pines-tabs-active-content: var(--ds-component-tabs-activecontent);
  --core-pines-tabs-radius: var(--ds-component-tabs-radius);
  --core-pines-tabs-focus-shadow: var(--ds-component-tabs-focusshadow);
}

html[data-ds-v2="1"] .core-pines-context-menu {
  --core-pines-menu-background: var(--ds-component-menu-background);
  --core-pines-menu-border: var(--ds-component-menu-border);
  --core-pines-menu-content: var(--ds-component-menu-content);
  --core-pines-menu-hover-background: var(--ds-component-menu-hoverbackground);
  --core-pines-menu-hover-border: var(--ds-component-menu-hoverborder);
  --core-pines-menu-danger: var(--ds-component-menu-danger);
  --core-pines-menu-separator: var(--ds-component-menu-separator);
  --core-pines-menu-radius: var(--ds-component-menu-radius);
  --core-pines-menu-shadow: var(--ds-component-menu-shadow);
}

html[data-ds-v2="1"] .core-pines-assignment-picker {
  --core-pines-assignment-picker-background: var(--ds-component-menu-background);
  --core-pines-assignment-picker-border: var(--ds-component-menu-border);
  --core-pines-assignment-picker-content: var(--ds-component-menu-content);
  --core-pines-assignment-picker-muted: var(--ds-semantic-content-secondary);
  --core-pines-assignment-picker-hover: var(--ds-component-menu-hoverbackground);
  --core-pines-assignment-picker-selected: color-mix(in srgb, var(--ds-semantic-action-primary) 13%, var(--ds-component-menu-background));
  --core-pines-assignment-picker-selected-border: color-mix(in srgb, var(--ds-semantic-action-primary) 34%, var(--ds-component-menu-border));
  --core-pines-assignment-picker-focus: color-mix(in srgb, var(--ds-semantic-action-primary) 36%, transparent);
  --core-pines-assignment-picker-dot: var(--ds-semantic-action-primary);
  --core-pines-assignment-picker-radius: var(--ds-component-menu-radius);
  --core-pines-assignment-picker-shadow: var(--ds-component-menu-shadow);
}

html[data-ds-v2="1"] .core-pines-hover-card {
  --core-pines-hover-card-background: var(--ds-component-hovercard-background);
  --core-pines-hover-card-border: var(--ds-component-hovercard-border);
  --core-pines-hover-card-content: var(--ds-component-hovercard-content);
  --core-pines-hover-card-muted: var(--ds-component-hovercard-muted);
  --core-pines-hover-card-action-background: var(--ds-component-hovercard-actionbackground);
  --core-pines-hover-card-action-border: var(--ds-component-hovercard-actionborder);
  --core-pines-hover-card-action-content: var(--ds-component-hovercard-actioncontent);
  --core-pines-hover-card-action-hover: var(--ds-component-hovercard-actionhoverbackground);
  --core-pines-hover-card-radius: var(--ds-component-hovercard-radius);
  --core-pines-hover-card-shadow: var(--ds-component-hovercard-shadow);
}

html[data-ds-v2="1"] .core-pines-tooltip {
  --core-pines-tooltip-background: var(--ds-component-tooltip-background);
  --core-pines-tooltip-content: var(--ds-component-tooltip-content);
  --core-pines-tooltip-border: var(--ds-component-tooltip-border);
  --core-pines-tooltip-radius: var(--ds-component-tooltip-radius);
  --core-pines-tooltip-shadow: var(--ds-component-tooltip-shadow);
}

html[data-ds-v2="1"] .core-pines-tooltip-trigger {
  --core-pines-tooltip-trigger-background: var(--ds-component-tooltip-triggerbackground);
  --core-pines-tooltip-trigger-border: var(--ds-component-tooltip-triggerborder);
  --core-pines-tooltip-trigger-content: var(--ds-component-tooltip-triggercontent);
  --core-pines-tooltip-trigger-hover-background: var(--ds-component-tooltip-triggerhoverbackground);
  --core-pines-tooltip-trigger-hover-border: var(--ds-component-tooltip-triggerhoverborder);
  --core-pines-tooltip-trigger-hover-content: var(--ds-component-tooltip-triggerhovercontent);
  --core-pines-tooltip-trigger-focus-shadow: var(--ds-component-tooltip-focusshadow);
}

html[data-ds-v2="1"] [data-pines-rating-group="1"] {
  --core-pines-rating-inactive: var(--ds-component-rating-inactive);
  --core-pines-rating-active: var(--ds-component-rating-active);
  --core-pines-rating-focus-shadow: var(--ds-component-rating-focusshadow);
}

html[data-ds-v2="1"] .core-pines-toast {
  border-color: var(--ds-component-toast-border);
  border-radius: var(--ds-component-toast-radius);
  background: var(--ds-component-toast-background);
  color: var(--ds-component-toast-content);
  box-shadow: var(--ds-component-toast-shadow);
}

html[data-ds-v2="1"] .core-pines-tooltip__panel {
  border-radius: var(--ds-component-tooltip-radius);
  background: var(--ds-component-tooltip-background);
  color: var(--ds-component-tooltip-content);
  max-width: var(--ds-component-tooltip-maxwidth);
}

html[data-ds-v2="1"] .filepond--root {
  --core-filepond-background: var(--ds-component-filepond-background);
  --core-filepond-border: var(--ds-component-filepond-border);
  --core-filepond-accent: var(--ds-component-filepond-accent);
  --core-filepond-accent-strong: var(--ds-component-filepond-accentstrong);
  --core-filepond-content: var(--ds-component-filepond-content);
  --core-filepond-inverse: var(--ds-semantic-content-inverse);
  --core-filepond-soft: var(--ds-component-filepond-soft);
  --core-filepond-radius: var(--ds-component-filepond-radius);
  --core-filepond-shadow: var(--ds-component-filepond-shadow);
}

html[data-ds-v2="1"] .filepond--panel-root {
  border-radius: var(--ds-component-filepond-radius);
  box-shadow: var(--ds-component-filepond-shadow);
}

html[data-ds-v2="1"] .filepond--item-panel {
  background: var(--ds-component-filepond-accent);
}

html[data-ds-v2="1"] .corechat-shell,
html[data-ds-v2="1"] .corechat-workspace,
html[data-ds-v2="1"] .corechat-topic-panel,
html[data-ds-v2="1"] .corechat-composer {
  border-color: var(--ds-semantic-border-subtle) !important;
  background: var(--ds-semantic-surface-card) !important;
  color: var(--ds-component-card-content) !important;
}

html[data-ds-v2="1"] .core-geo-popup {
  border-color: var(--ds-semantic-border-default);
  background: var(--ds-semantic-surface-elevated);
  color: var(--ds-component-modal-content);
  box-shadow: var(--ds-primitive-shadow-md);
}

/* Shared primitives mount outside individual view roots. */
html[data-ds-v2="1"] .flatpickr-calendar {
  border-color: var(--ds-component-datepicker-border) !important; border-radius: var(--ds-component-datepicker-radius) !important; background: var(--ds-component-datepicker-background) !important; color: var(--ds-component-datepicker-content) !important; box-shadow: var(--ds-component-datepicker-shadow) !important;
}

html[data-ds-v2="1"] :is(.flatpickr-day, .core-datepicker-preset) { color: var(--ds-component-datepicker-content); }
html[data-ds-v2="1"] .flatpickr-weekday { color: var(--ds-component-datepicker-muted); }
html[data-ds-v2="1"] [data-core-pines-slideover-panel="1"] { border-color: var(--ds-component-slideover-border) !important; border-radius: var(--ds-component-slideover-radius) !important; background: var(--ds-component-slideover-background) !important; color: var(--ds-component-slideover-content) !important; box-shadow: var(--ds-component-slideover-shadow) !important; }
html[data-ds-v2="1"] [data-core-pines-slideover-panel="1"] header { border-color: var(--ds-component-slideover-divider) !important; }
html[data-ds-v2="1"] [data-core-pines-slideover-panel="1"] [data-core-pines-slideover-close="1"] { border-color: var(--ds-component-slideover-border) !important; color: var(--ds-component-slideover-muted) !important; }
html[data-ds-v2="1"] [data-core-pines-slideover-backdrop="1"] { background: color-mix(in srgb, var(--ds-component-slideover-backdrop) 46%, transparent) !important; }
html[data-ds-v2="1"] .core-floating-view { --core-floating-background: var(--ds-component-floatingview-background); --core-floating-content: var(--ds-component-floatingview-content); --core-floating-muted: var(--ds-component-floatingview-muted); --core-floating-border: var(--ds-component-floatingview-border); --core-floating-divider: var(--ds-component-floatingview-divider); --core-floating-action-border: var(--ds-component-floatingview-actionborder); --core-floating-action-hover: var(--ds-component-floatingview-actionhover); --core-floating-danger: var(--ds-component-floatingview-danger); --core-floating-backdrop: color-mix(in srgb, var(--ds-component-floatingview-backdrop) 46%, transparent); --core-floating-radius: var(--ds-component-floatingview-radius); --core-floating-shadow: var(--ds-component-floatingview-shadow); }

html[data-ds-v2="1"] :is(.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange) {
  background: var(--ds-component-datepicker-selected) !important;
  color: var(--ds-component-datepicker-selectedcontent) !important;
}

html[data-ds-v2="1"] :is(.flatpickr-day:hover, .core-datepicker-preset:hover) {
  background: var(--ds-component-datepicker-hover) !important;
}

/* Editor.js is mounted through CoreRichEditor. The marker keeps the adapter
 * scoped and survives repeated HTMX initialisation without global listeners. */
html[data-ds-v2="1"] [data-core-rich-editor="1"] {
  border: 1px solid var(--ds-component-richeditor-border);
  border-radius: var(--ds-component-richeditor-radius);
  background: var(--ds-component-richeditor-background);
  color: var(--ds-component-richeditor-content);
  box-shadow: var(--ds-component-richeditor-shadow);
}

html[data-ds-v2="1"] [data-core-rich-editor="1"]:focus-within {
  border-color: var(--ds-component-richeditor-borderfocus);
  box-shadow: var(--ds-component-richeditor-focusshadow);
}

html[data-ds-v2="1"] [data-core-rich-editor="1"] :is(.codex-editor, .ce-paragraph, .cdx-block) {
  color: var(--ds-component-richeditor-content);
}

html[data-ds-v2="1"] [data-core-rich-editor="1"] :is(.ce-toolbar, .ce-toolbar__content) {
  border-color: var(--ds-component-richeditor-toolbarborder);
  background: var(--ds-component-richeditor-toolbarbackground);
  color: var(--ds-component-richeditor-toolbarcontent);
}

html[data-ds-v2="1"] [data-core-rich-editor="1"] :is(.ce-toolbar__plus, .ce-toolbar__settings-btn, .cdx-button) {
  color: var(--ds-component-richeditor-toolbarcontent);
}

html[data-ds-v2="1"] [data-core-rich-editor="1"] :is(.ce-toolbar__plus, .ce-toolbar__settings-btn, .cdx-button):hover {
  background: var(--ds-component-richeditor-toolhover);
}

html[data-ds-v2="1"] [data-core-rich-editor="1"] :is(.ce-inline-tool--active, .ce-toolbox__button--active) {
  color: var(--ds-component-richeditor-toolactive);
}

html[data-ds-v2="1"] :is(.ce-popover, .ce-popover__container, .ce-inline-toolbar, .ce-conversion-toolbar) {
  border-color: var(--ds-component-richeditor-popoverborder);
  background: var(--ds-component-richeditor-popoverbackground);
  color: var(--ds-component-richeditor-popovercontent);
  box-shadow: var(--ds-component-richeditor-shadow);
}

html[data-ds-v2="1"] :is(.ce-popover-item:hover, .ce-inline-tool:hover, .ce-conversion-tool:hover) {
  background: var(--ds-component-richeditor-toolhover);
}

html[data-ds-v2="1"] :is(.inline-code, .cdx-inline-code) {
  background: var(--ds-component-richeditor-inlinecodebackground);
}

html[data-ds-v2="1"] .cdx-marker {
  background: var(--ds-component-richeditor-markerbackground);
  color: var(--ds-component-richeditor-markercontent);
}

/* Tagify creates its suggestions outside the input wrapper, so both the
 * control and the portalized dropdown consume the same component contract. */
html[data-ds-v2="1"] .tagify {
  --tags-border-color: var(--ds-component-taginput-border);
  --tags-hover-border-color: var(--ds-component-taginput-borderfocus);
  --tags-focus-border-color: var(--ds-component-taginput-borderfocus);
  --tag-bg: var(--ds-component-taginput-tagbackground);
  --tag-hover: var(--ds-component-taginput-taghover);
  --tag-text-color: var(--ds-component-taginput-tagcontent);
  --tag-border-radius: var(--ds-component-taginput-tagradius);
  --tag-remove-btn-color: var(--ds-component-taginput-danger);
  border-radius: var(--ds-component-taginput-radius);
  background: var(--ds-component-taginput-background);
  color: var(--ds-component-taginput-content);
  box-shadow: var(--ds-component-taginput-shadow);
}

html[data-ds-v2="1"] .tagify--focus {
  box-shadow: var(--ds-component-taginput-focusshadow);
}

html[data-ds-v2="1"] .tagify[data-core-tagify="1"].tagify--focus {
  /* Tagify has its own focus class and its source input can have legacy
   * utilities. Keep one compact, component-level ring around the generated
   * scope instead of letting both visual systems accumulate. */
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ds-component-taginput-borderfocus) 18%, transparent);
}

html[data-ds-v2="1"] .tagify__input {
  color: var(--ds-component-taginput-content);
}

html[data-ds-v2="1"] .tagify__input::before {
  color: var(--ds-component-taginput-placeholder);
}

html[data-ds-v2="1"] .tagify__tag > div {
  border: 1px solid var(--ds-component-taginput-tagborder);
  background: var(--ds-component-taginput-tagbackground);
  color: var(--ds-component-taginput-tagcontent);
}

html[data-ds-v2="1"] .tagify__dropdown {
  --tagify-dd-color-primary: var(--ds-component-taginput-optionselected);
  border: 1px solid var(--ds-component-taginput-dropdownborder);
  border-radius: var(--ds-component-taginput-radius);
  background: var(--ds-component-taginput-dropdownbackground);
  color: var(--ds-component-taginput-dropdowncontent);
  box-shadow: var(--ds-component-taginput-shadow);
}

html[data-ds-v2="1"] .tagify__dropdown__item:hover {
  background: var(--ds-component-taginput-optionhover);
}

html[data-ds-v2="1"] .tagify__dropdown__item--active {
  background: var(--ds-component-taginput-optionselected);
  color: var(--ds-component-taginput-optionselectedcontent);
}

/* FullCalendar already exposes stable variables; category-specific event
 * classes keep precedence and only the default event adopts the theme. */
html[data-ds-v2="1"] .fc {
  --fc-page-bg-color: var(--ds-component-calendar-background);
  --fc-neutral-bg-color: var(--ds-semantic-surface-sunken);
  --fc-neutral-text-color: var(--ds-component-calendar-muted);
  --fc-border-color: var(--ds-component-calendar-border);
  --fc-button-bg-color: var(--ds-component-calendar-buttonbackground);
  --fc-button-text-color: var(--ds-component-calendar-buttoncontent);
  --fc-button-border-color: var(--ds-component-calendar-buttonborder);
  --fc-button-hover-bg-color: var(--ds-component-calendar-buttonhover);
  --fc-button-hover-border-color: var(--ds-component-calendar-buttonhover);
  --fc-button-active-bg-color: var(--ds-component-calendar-buttonhover);
  --fc-button-active-border-color: var(--ds-component-calendar-buttonhover);
  --fc-event-bg-color: var(--ds-component-calendar-eventbackground);
  --fc-event-border-color: var(--ds-component-calendar-eventbackground);
  --fc-event-text-color: var(--ds-component-calendar-eventcontent);
  --fc-today-bg-color: var(--ds-component-calendar-todaybackground);
  --fc-highlight-color: var(--ds-component-calendar-selection);
  border-radius: var(--ds-component-calendar-radius);
  background: var(--ds-component-calendar-background);
  color: var(--ds-component-calendar-content);
  box-shadow: var(--ds-component-calendar-shadow);
}

/* Tabulator and its body-level popups are both covered. */
html[data-ds-v2="1"] .tabulator {
  border-color: var(--ds-component-datagrid-border);
  border-radius: var(--ds-component-datagrid-radius);
  background: var(--ds-component-datagrid-background);
  color: var(--ds-component-datagrid-content);
  box-shadow: var(--ds-component-datagrid-shadow);
}

html[data-ds-v2="1"] .tabulator .tabulator-header {
  border-color: var(--ds-component-datagrid-border);
  background: var(--ds-component-datagrid-headerbackground);
  color: var(--ds-component-datagrid-headercontent);
}

html[data-ds-v2="1"] .tabulator .tabulator-header .tabulator-col,
html[data-ds-v2="1"] .tabulator .tabulator-tableholder .tabulator-table,
html[data-ds-v2="1"] .tabulator .tabulator-row {
  border-color: var(--ds-component-datagrid-border);
  background: var(--ds-component-datagrid-background);
  color: var(--ds-component-datagrid-content);
}

html[data-ds-v2="1"] .tabulator .tabulator-row:hover {
  background: var(--ds-component-datagrid-rowhover);
}

html[data-ds-v2="1"] .tabulator .tabulator-row.tabulator-selected {
  background: var(--ds-component-datagrid-rowselected);
  color: var(--ds-component-datagrid-rowselectedcontent);
}

html[data-ds-v2="1"] .tabulator .tabulator-footer {
  border-color: var(--ds-component-datagrid-border);
  background: var(--ds-component-datagrid-footerbackground);
  color: var(--ds-component-datagrid-footercontent);
}

html[data-ds-v2="1"] :is(.tabulator-popup-container, .tabulator-menu) {
  border-color: var(--ds-component-datagrid-border);
  border-radius: var(--ds-component-datagrid-radius);
  background: var(--ds-component-datagrid-menubackground);
  color: var(--ds-component-datagrid-menucontent);
  box-shadow: var(--ds-component-datagrid-shadow);
}

html[data-ds-v2="1"] :is(.tabulator-menu-item:hover, .tabulator-menu-item:focus-visible) {
  background: var(--ds-component-datagrid-rowhover);
}

html[data-ds-v2="1"] .core-pines-context-menu__item:hover {
  background: var(--ds-component-menu-hoverbackground) !important;
}

html[data-ds-v2="1"] .core-pines-assignment-picker__item:hover {
  background: var(--ds-component-menu-hoverbackground) !important;
}

html[data-ds-v2="1"] [data-ds-component="table-columns"] {
  border-color: var(--ds-component-card-border) !important;
  border-radius: var(--ds-component-card-radius) !important;
  background: var(--ds-semantic-surface-sunken) !important;
  box-shadow: var(--ds-primitive-shadow-xs);
}

html[data-ds-v2="1"] [data-ds-component="list"] [data-core-list-empty="1"] {
  color: var(--ds-component-table-headercontent);
  background: var(--ds-semantic-surface-sunken);
}

/* Elevated cards are intended for restrained light themes: surface separation
 * comes from depth first, not from a high-contrast outline. */
html[data-ds-v2="1"][data-ds-card="elevated"] :is([data-ds-component="dashboard-layout"], [id$="-dashboard-layout"]) > [data-layout-item]:not([class*="hero"]) {
  border-color: color-mix(in srgb, var(--ds-component-card-border) 72%, transparent) !important;
  background: var(--ds-component-card-background) !important;
  color: var(--ds-component-card-content) !important;
  box-shadow: var(--ds-component-card-shadow) !important;
}

/* Some layouts use a data-layout-item only as a grid carrier and render the
 * actual card inside it. Keeping that carrier transparent prevents nested
 * shadows and the pale backing layer around a real widget surface.
 *
 * La exclusion por subcadena de clase (`bg-`, `card`, `hero`) es una heuristica
 * fragil: un contenedor que SI es la superficie, pero cuya clase no contiene
 * ninguna de las tres, quedaba transparente con !important y perdia borde,
 * fondo y sombra. Le paso eso a `.core-mini-dashboard__slot`. Por eso se anade
 * una salida explicita: quien declare `data-ds-surface` afirma que el es la
 * superficie y no un mero portador, y esta regla deja de aplicarle. */
/* CRMUI-052: la regla se INVIERTE. Adivinar el portador por lo que NO es fallo
 * tres veces seguidas: el slot del mini dashboard, los widgets de ficha y los
 * paneles del Dashboard global se quedaron transparentes por no llevar `bg-`,
 * `card` ni `hero` en su clase, cuando los tres SON la tarjeta.
 *
 * Ahora el portador se declara, no se deduce. Son portadores:
 *   - `data-ds-layout-profile="external"`: mounts de modulo, que traen su
 *     propia tarjeta y apilarian dos sombras.
 *   - quien ya pinta su superficie en la clase (`bg-`, `card`, `hero`).
 *   - quien lo afirme con `data-ds-surface="none"`.
 * Todo lo demas recibe superficie por defecto, que es lo que un widget espera. */
html[data-ds-v2="1"][data-ds-card="elevated"] :is([data-ds-component="dashboard-layout"], [id$="-dashboard-layout"]) > [data-layout-item]:is([data-ds-layout-profile="external"], [class*="bg-"], [class*="card"], [class*="hero"], [data-ds-surface="none"]) {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-ds-v2="1"] .rounded-sm { border-radius: var(--ds-primitive-rounded-sm); }
html[data-ds-v2="1"] .rounded-md { border-radius: var(--ds-primitive-rounded-md); }
html[data-ds-v2="1"] .rounded-lg { border-radius: var(--ds-primitive-rounded-lg); }
html[data-ds-v2="1"] .rounded-xl { border-radius: var(--ds-primitive-rounded-xl); }
html[data-ds-v2="1"] .rounded-2xl { border-radius: var(--ds-primitive-rounded-xl); }

html[data-ds-v2="1"][data-ds-card="flat"] #main-content .bg-surface {
  box-shadow: none;
}

html[data-ds-v2="1"][data-ds-table="borderless"] #main-content th,
html[data-ds-v2="1"][data-ds-table="borderless"] #main-content td {
  border-color: transparent !important;
}

html[data-ds-v2="1"][data-ds-list="airy"] [data-ds-component="list"] table {
  border: 1px solid var(--ds-component-card-border);
  border-radius: var(--ds-component-card-radius);
  overflow: hidden;
}

html[data-ds-v2="1"][data-ds-list="airy"] [data-ds-component="table-toolbar"] {
  min-height: 2.5rem;
}

html[data-ds-v2="1"][data-ds-detail="quiet"] #main-content :is([data-ds-component="detail-header"], .client-profile-header) {
  border-color: var(--ds-component-card-border) !important;
  background: var(--ds-semantic-surface-card) !important;
  box-shadow: none !important;
}

html[data-ds-v2="1"][data-ds-form="quiet-sections"] #main-content :is(form > fieldset, [data-ds-component="form-section"]) {
  border-color: var(--ds-component-card-border);
  border-radius: var(--ds-component-card-radius);
  background: var(--ds-semantic-surface-card);
  box-shadow: none;
}

html[data-ds-v2="1"][data-ds-overlay="quiet"] :is([role="dialog"], .core-pines-hover-card__panel, .core-pines-context-menu__panel, .core-pines-assignment-picker__panel, [data-core-pines-slideover-panel="1"]) {
  border-color: var(--ds-component-modal-border, var(--ds-semantic-border-default)) !important;
  background: var(--ds-component-modal-background) !important;
}

html[data-ds-v2="1"][data-ds-layout-shell="floating-sidebar"] #legacy-sidebar-shell,
html[data-ds-v2="1"][data-ds-layout-shell="floating-sidebar"] #sidebar-clickup-shell {
  margin: var(--ds-primitive-spacing-sm);
  height: calc(100% - (2 * var(--ds-primitive-spacing-sm)));
  border-radius: var(--ds-primitive-rounded-xl);
  overflow: hidden;
}

/* Operational contracts: themes can reshape shared CRM surfaces without owning templates. */
html[data-ds-v2="1"][data-ds-list="command-queue"] #main-content :is(thead, [data-ds-component="list-toolbar"]) {
  background: linear-gradient(90deg, var(--ds-semantic-navigation-background), color-mix(in srgb, var(--ds-semantic-navigation-background) 78%, var(--ds-semantic-action-primary))) !important;
  color: var(--ds-semantic-navigation-content) !important;
}

html[data-ds-v2="1"][data-ds-detail="command-dossier"] #main-content [data-ds-component="detail-header"],
html[data-ds-v2="1"][data-ds-detail="command-dossier"] #main-content .client-profile-header {
  position: relative;
  overflow: hidden;
  border: 0 !important;
  background: linear-gradient(118deg, var(--ds-semantic-navigation-background), color-mix(in srgb, var(--ds-semantic-navigation-background) 76%, var(--ds-semantic-action-primary))) !important;
  color: var(--ds-semantic-navigation-content) !important;
}

html[data-ds-v2="1"][data-ds-form="mission-sections"] #main-content :is(form > fieldset, [data-ds-component="form-section"]) {
  border-left: 3px solid var(--ds-semantic-action-primary);
  background: color-mix(in srgb, var(--ds-semantic-surface-card) 94%, var(--ds-semantic-action-primary));
}

html[data-ds-v2="1"][data-ds-overlay="command-panel"] :is([role="dialog"], .core-pines-hover-card__panel, .core-pines-context-menu__panel, .core-pines-assignment-picker__panel) {
  border-color: color-mix(in srgb, var(--ds-semantic-action-primary) 30%, var(--ds-semantic-border-default)) !important;
  background: linear-gradient(150deg, color-mix(in srgb, var(--ds-semantic-surface-elevated) 96%, var(--ds-semantic-action-primary)), var(--ds-semantic-surface-elevated)) !important;
}

html[data-ds-v2="1"] [data-admin-settings-shell="1"] [data-admin-settings-nav="1"] {
  border-color: var(--ds-component-card-border) !important;
  background: color-mix(in srgb, var(--ds-semantic-surface-card) 90%, var(--ds-semantic-surface-sunken)) !important;
  color: var(--ds-semantic-content-primary) !important;
  box-shadow: var(--ds-component-card-shadow) !important;
}

html[data-ds-v2="1"] [data-admin-settings-shell="1"] :is([data-admin-settings-nav-count], [data-admin-settings-compact-toggle]) {
  border-color: color-mix(in srgb, var(--ds-semantic-border-default) 84%, transparent) !important;
  background: var(--ds-semantic-surface-elevated) !important;
  color: var(--ds-semantic-content-secondary) !important;
  box-shadow: var(--ds-primitive-shadow-xs) !important;
}

html[data-ds-v2="1"] [data-admin-settings-shell="1"] [data-admin-settings-compact-toggle]:hover {
  border-color: var(--ds-semantic-border-interactive) !important;
  color: var(--ds-semantic-action-primary) !important;
}

html[data-ds-v2="1"] [data-admin-settings-shell="1"] [data-admin-config-link="1"]:not(.bg-tertiary):not(.text-white) {
  border-color: color-mix(in srgb, var(--ds-semantic-border-default) 74%, transparent) !important;
  background: color-mix(in srgb, var(--ds-semantic-surface-elevated) 88%, transparent) !important;
  color: var(--ds-semantic-content-primary) !important;
}

/* Desktop prioritises operational density. Touch-sized controls remain unchanged on mobile. */
@media (min-width: 1024px) {
  /* La altura de la cabecera y el padding del lienzo NO se redeclaran aquí:
     su fuente única es --nxg-topbar-height / --nxg-canvas-padding
     (CONTRATO_CORE_SHELL §2). */
  html[data-ds-v2="1"] #workspace-header [data-spotlight-open="1"] {
    min-width: 176px;
    padding-top: .4rem;
    padding-bottom: .4rem;
  }

  html[data-ds-v2="1"] #dashboard-layout,
  html[data-ds-v2="1"] [id$="-dashboard-layout"],
  html[data-ds-v2="1"] #client-profile-layout,
  html[data-ds-v2="1"] #prospect-profile-layout {
    gap: .65rem !important;
  }

  html[data-ds-v2="1"] [data-ds-component="dashboard-layout"] > [data-ds-widget-kind="kpi"] {
    align-self: start;
    min-height: 0 !important;
    padding: .85rem !important;
  }

  html[data-ds-v2="1"] [data-ds-component="dashboard-layout"] > [data-ds-widget-kind="kpi"] .text-4xl {
    font-size: 2.05rem !important;
  }

  /* Nexo Foundation is intentionally compact: light cards keep a short,
     business-like rhythm without the large inherited utility gaps. */
  html[data-ds-v2="1"][data-ds-theme="nexo-foundation"] :is(#dashboard-layout, [id$="-dashboard-layout"]) {
    gap: .5rem !important;
  }

  html[data-ds-v2="1"][data-ds-theme="nexo-foundation"] :is(#dashboard-layout, [id$="-dashboard-layout"]).space-y-6 > :not(:last-child) {
    margin-block-end: .5rem !important;
  }

  html[data-ds-v2="1"][data-ds-theme="nexo-foundation"] :is(#dashboard-layout, [id$="-dashboard-layout"]) > [data-layout-item] > [class*="grid"][class*="gap-4"] {
    gap: .65rem !important;
  }

  html[data-ds-v2="1"] [data-admin-settings-shell="1"] [data-admin-settings-hero="1"] {
    margin-bottom: .75rem !important;
    padding: .7rem .9rem !important;
  }

  html[data-ds-v2="1"] [data-admin-settings-shell="1"] [data-admin-settings-layout="1"] {
    gap: .75rem !important;
  }

  html[data-ds-v2="1"] [data-admin-settings-shell="1"] [data-admin-settings-nav="1"] {
    padding: .65rem !important;
  }

  html[data-ds-v2="1"] [data-admin-settings-shell="1"] [data-admin-config-link="1"] {
    min-height: 2.2rem;
    padding: .45rem .7rem !important;
    border-radius: .7rem !important;
  }

  html[data-ds-v2="1"] [data-admin-settings-shell="1"] #config-seccion :is(.p-8, .p-7, .p-6, .p-5) {
    padding: .85rem !important;
  }

  html[data-ds-v2="1"] [data-admin-settings-shell="1"] #config-seccion :is(.gap-8, .gap-7, .gap-6, .gap-5) {
    gap: .75rem !important;
  }

  html[data-ds-v2="1"] [data-admin-settings-shell="1"] #config-seccion :is(.space-y-8, .space-y-7, .space-y-6, .space-y-5) > :not(:last-child) {
    margin-block-end: .75rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-ds-v2="1"] *,
  html[data-ds-v2="1"] *::before,
  html[data-ds-v2="1"] *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- SaaS Operations Table (Minimalist & High Contrast) --- */
html[data-ds-v2="1"] [data-ds-component="table"] thead tr,
html[data-ds-v2="1"] [data-core-list] table thead tr {
  background-color: var(--ds-component-table-headerbackground);
  color: var(--ds-component-table-headercontent);
}

html[data-ds-v2="1"] [data-ds-component="table"] th,
html[data-ds-v2="1"] [data-core-list] table th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
}

/*
 * CoreList v2 owns table density (CRMUI-040 — densidad operativa).
 * Fuente única de la geometría de fila/cabecera de TODAS las listas v2:
 *  - Cabecera: 40px de alto (padding 0.75rem/0.75rem 1rem = py-3 px-4),
 *    11px versalitas ya fijado arriba (regla `th { font-size: 11px; ... }`).
 *  - Fila: 48px de alto. El padding aporta 0.875rem/1rem (py-3.5 px-4) y el
 *    cuerpo de celda parte de 12px; el alto final de fila para contenido de
 *    una sola línea lo completa `--ds-component-table-rowheight` (declarado
 *    en `src/Themes/ThemeSchema.php` component.table.rowHeight = 48px y
 *    aplicado como min-height en "#main-content tbody tr" más arriba en esta
 *    hoja) — una celda compuesta (meta con primary+secondary) crece por
 *    encima de ese mínimo de forma intencional.
 * El dominio entrega contenido y semántica, nunca padding ni tamaño de
 * fuente: una vista no declara su propia densidad de tabla.
 */
html[data-ds-v2="1"] [data-core-list-contract="v2"] [data-ds-component="core-table"] th {
  padding: 0.75rem 1rem !important;
}

html[data-ds-v2="1"] [data-core-list-contract="v2"] [data-ds-component="core-table"] td {
  padding: 0.875rem 1rem !important;
  font-size: 0.75rem;
  line-height: 1.4;
}

/*
 * Receta declarativa de celda compuesta ("dos datos en una celda"): título +
 * descripción, o identificador/fecha con su hora. Disponible para cualquier
 * tabla `[data-core-list-contract="v2"]`, tanto en modo `columns` (receta
 * `standard` de ListColumn::meta()) como en `legacy_rows` compuesto a mano
 * por el dominio (Tickets, Notas, Tareas, Extracciones, Pizarras,
 * Facturación) — el core conserva jerarquía, tamaño y alineación sin CSS
 * local por vista; el dominio nunca fabrica un segundo dato que no exista.
 * Catálogo: PROMPTS/arquitectura/CATALOGO_PATRONES_UI.md#celda-compuesta.
 */
html[data-ds-v2="1"] [data-core-list-contract="v2"] [data-core-list-cell="meta"] {
  display: grid;
  gap: 0.125rem;
}

html[data-ds-v2="1"] [data-core-list-contract="v2"] [data-core-list-cell="primary"] {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
}

html[data-ds-v2="1"] [data-core-list-contract="v2"] [data-core-list-cell="secondary"] {
  font-size: 0.75rem;
  line-height: 1.35;
  opacity: 0.72;
}

html[data-ds-v2="1"] [data-core-list-contract="v2"] [data-core-list-cell="badges"] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

/* Identificador aislado (ID de fila, referencia): monoespaciada y numérico
   tabular, sin el contenedor `meta`. */
html[data-ds-v2="1"] [data-core-list-contract="v2"] [data-core-list-cell="identifier"] {
  font-family: var(--font-label, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-variant-numeric: tabular-nums;
}

/* Variante fecha + hora del patrón `meta`: la fecha va monoespaciada y la
   hora queda en una segunda línea de 11px, más tenue. */
html[data-ds-v2="1"] [data-core-list-contract="v2"] [data-core-list-cell="meta"][data-core-list-cell-variant="datetime"] [data-core-list-cell="primary"],
html[data-ds-v2="1"] [data-core-list-contract="v2"] [data-core-list-cell="meta"][data-core-list-cell-variant="datetime"] [data-core-list-cell="secondary"] {
  font-family: var(--font-label, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-variant-numeric: tabular-nums;
}

html[data-ds-v2="1"] [data-core-list-contract="v2"] [data-core-list-cell="meta"][data-core-list-cell-variant="datetime"] [data-core-list-cell="primary"] {
  font-size: 0.75rem;
  font-weight: 500;
}

html[data-ds-v2="1"] [data-core-list-contract="v2"] [data-core-list-cell="meta"][data-core-list-cell-variant="datetime"] [data-core-list-cell="secondary"] {
  font-size: 0.6875rem;
  opacity: 0.6;
}

/*
 * Chips de estado dentro de una tabla v2: densidad uniforme (11px, versalitas,
 * peso 700, px-2 py-0.5) sin importar el tamaño Tailwind que pase el dominio
 * a `ui_render_badge()`/`ui_badge_classes()` (selector = su firma de clases
 * base) ni el ancho fijo que arrastre un pill de estado propio como
 * `.pp-status-pill` (Facturación/Presupuestos). El color sigue siendo dato de
 * negocio del dominio; esta regla sólo gobierna densidad.
 */
html[data-ds-v2="1"] [data-core-list-contract="v2"] [data-ds-component="core-table"] td .font-semibold.label-mono.uppercase,
html[data-ds-v2="1"] [data-core-list-contract="v2"] [data-ds-component="core-table"] td .pp-status-pill {
  min-width: 0 !important;
  padding: 0.125rem 0.5rem !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.3;
}

/*
 * Controles de toolbar y pie de tabla: 32px de alto en escritorio (rango
 * 30-34px del catálogo de patrones), sin tocar el tamaño táctil en móvil
 * (mismo criterio que el resto de esta hoja, ver comentario "Desktop
 * prioritises operational density" más arriba). Sólo se tocan los controles
 * propios del compositor (buscador, disparadores de Filtros/Orden/Columnas/
 * Restablecer, paginación y por página); los controles internos del popover
 * de filtros siguen siendo del dominio y no se tocan aquí.
 */
@media (min-width: 1024px) {
  html[data-ds-v2="1"] [data-core-list-contract="v2"] [data-core-list-search] {
    height: 2.125rem !important;
  }

  html[data-ds-v2="1"] [data-core-list-contract="v2"] [data-core-list-toolbar] [data-core-list-control="filters"],
  html[data-ds-v2="1"] [data-core-list-contract="v2"] [data-core-list-toolbar] [data-core-list-control="columns"],
  html[data-ds-v2="1"] [data-core-list-contract="v2"] [data-core-list-toolbar] [data-core-list-control="reset"],
  html[data-ds-v2="1"] [data-core-list-contract="v2"] [data-core-list-toolbar] [data-core-list-control="sort"] select,
  html[data-ds-v2="1"] [data-core-list-contract="v2"] [data-core-list-toolbar] [data-core-list-filter-clear] {
    height: 2rem !important;
    padding-inline: 0.75rem !important;
  }

  html[data-ds-v2="1"] [data-core-list-contract="v2"] [data-ds-component="table-footer"] select,
  html[data-ds-v2="1"] [data-core-list-contract="v2"] [data-ds-component="table-footer"] a[data-core-list-page] {
    height: 2rem !important;
  }
}

html[data-ds-v2="1"] [data-core-list-presentation="standard"] [data-core-list-column="actions"] {
  inline-size: 1%;
  white-space: nowrap;
}

/* Acciones operativas de cualquier lista CoreList: `actions` es la clave
   canónica y `acciones` sólo existe mientras se completa la migración v1. */
html[data-ds-v2="1"] [data-core-list] [data-core-list-column="actions"] > div,
html[data-ds-v2="1"] [data-core-list] [data-core-list-column="acciones"] > div,
html[data-ds-v2="1"] [data-core-list-presentation="standard"] [data-core-list-actions="1"] {
  min-inline-size: max-content;
  /* Las acciones de fila son capacidad operativa, no contenido progresivo:
     nunca se ocultan hasta hover. El estado disabled de cada control conserva
     su propia atenuación porque esta regla sólo restituye acciones activas. */
  opacity: 1 !important;
  visibility: visible !important;
}

html[data-ds-v2="1"] [data-core-list] [data-core-list-column="actions"] > div :is(a, button):not(:disabled),
html[data-ds-v2="1"] [data-core-list] [data-core-list-column="acciones"] > div :is(a, button):not(:disabled),
html[data-ds-v2="1"] [data-core-list-presentation="standard"] [data-core-list-actions="1"] [data-core-list-action]:not(:disabled) {
  opacity: 1 !important;
  visibility: visible !important;
}

html[data-ds-v2="1"] [data-core-list-presentation="standard"] [data-core-list-actions="1"] .core-list-action {
  transition: border-color .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

html[data-ds-v2="1"] [data-core-list-presentation="standard"] [data-core-list-actions="1"] .core-list-action:hover {
  border-color: color-mix(in srgb, var(--color-tertiary) 42%, transparent) !important;
  background-color: color-mix(in srgb, var(--color-tertiary) 8%, var(--color-surface)) !important;
  color: var(--color-tertiary) !important;
  transform: translateY(-1px);
}

html[data-ds-v2="1"] [data-core-list-presentation="standard"] [data-core-list-actions="1"] .core-list-action:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--color-tertiary) 45%, transparent);
  outline-offset: 2px;
}

html[data-ds-v2="1"] [data-ds-component="table"] tbody tr:nth-child(even),
html[data-ds-v2="1"] [data-core-list] table tbody tr:nth-child(even) {
  background-color: color-mix(in srgb, var(--color-neutral) 30%, transparent) !important;
}

html[data-ds-v2="1"] [data-ds-component="table"] tbody tr:hover,
html[data-ds-v2="1"] [data-core-list] table tbody tr:hover {
  background-color: var(--ds-component-table-rowhover) !important;
}

html[data-ds-v2="1"] [data-ds-component="table"] td,
html[data-ds-v2="1"] [data-core-list] table td {
  border-left: none !important;
  border-right: none !important;
  border-bottom-color: color-mix(in srgb, var(--color-secondary) 10%, transparent) !important;
}

/* Badge System for Data density */
html[data-ds-v2="1"] .badge-success {
  background-color: color-mix(in srgb, #10b981 15%, transparent);
  color: #047857;
  border: 1px solid color-mix(in srgb, #10b981 30%, transparent);
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-weight: 600;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

/* Detail and settings composition: layout is owned by partials, visual tokens by Theme V2. */
html[data-ds-v2="1"] [data-ds-component="core-detail-section"] {
  background: var(--ds-component-card-background) !important;
  border-color: var(--ds-component-card-border) !important;
  border-radius: var(--ds-component-card-radius) !important;
  box-shadow: var(--ds-component-card-shadow) !important;
  color: var(--ds-component-card-content);
}

html[data-ds-v2="1"] [data-ds-component="core-detail-section"] [data-core-detail-section="header"],
html[data-ds-v2="1"] [data-ds-component="core-detail-section"] [data-core-detail-section="footer"],
html[data-ds-v2="1"] [data-ds-component="core-setting-row"] + [data-ds-component="core-setting-row"] {
  border-color: color-mix(in srgb, var(--ds-component-card-border) 82%, transparent) !important;
}

html[data-ds-v2="1"] [data-ds-component="core-field-grid"] [data-core-field="value"] {
  color: var(--ds-component-card-content) !important;
}

/* Piloto "color donde importa mirar": `core_setting_row.php` emite
   `data-ds-tone` porque su INSIGNIA de estado se colorea (reglas de abajo), pero
   ese atributo dispara además la regla global `[data-ds-tone]`, que rellena la
   superficie entera con !important. El resultado eran filas de Perfil pintadas
   de verde o de ámbar de lado a lado por decir "Vinculado" o "2FA activo". El
   tono se mantiene — es estado real, no categoría — y se confina a la insignia,
   que es la marca más pequeña que ya lo comunicaba. La fila no declara fondo
   propio, así que recupera el de su tarjeta contenedora. */
html[data-ds-v2="1"] [data-ds-component="core-setting-row"][data-ds-tone] {
  border-color: transparent !important;
  background: transparent !important;
  color: inherit !important;
}

html[data-ds-v2="1"] [data-ds-component="core-setting-row"] [data-core-setting-row="status"] {
  border: 1px solid color-mix(in srgb, var(--color-secondary) 22%, transparent);
  border-radius: var(--ds-component-badge-radius, .375rem);
  padding: .15rem .4rem;
}

html[data-ds-v2="1"] [data-ds-component="core-setting-row"][data-ds-tone="success"] [data-core-setting-row="status"] {
  color: var(--ds-accent-success-text, #047857);
  background: var(--ds-accent-success-surface, color-mix(in srgb, #10b981 12%, transparent));
}

html[data-ds-v2="1"] [data-ds-component="core-setting-row"][data-ds-tone="warning"] [data-core-setting-row="status"] {
  color: var(--ds-accent-warning-text, #a16207);
  background: var(--ds-accent-warning-surface, color-mix(in srgb, #f59e0b 12%, transparent));
}


/* --------------------------------------------------------------------------
   Acento de estado en KPI (receta `recipes.dashboard.kpi = "accented"`).

   El tono de CoreKpiCard viaja como `data-ds-accent`, que resuelve `--ds-accent`
   en el propio nodo. El valor numerico permanece en tinta neutra por contrato
   (ver PROMPTS/arquitectura/CONTRATO_CORE_KPI_CARD.md): el estado se expresa con
   una barra lateral, no coloreando la cifra, para que cuatro bloques seguidos
   sigan siendo comparables y legibles en tema claro y oscuro.

   Va al final de la hoja a proposito: las reglas de superficie de
   #dashboard-layout y del mini dashboard declaran `border` completo mas
   adelante que la receta original, y un acento declarado antes seria pisado.
   -------------------------------------------------------------------------- */

html[data-ds-v2="1"][data-ds-dashboard-kpi="accented"] .core-mini-dashboard__slot[data-ds-accent],
html[data-ds-v2="1"][data-ds-dashboard-kpi="accented"] #dashboard-layout [data-layout-item][data-ds-widget-kind="kpi"][data-ds-accent] {
  border-inline-start-width: 3px;
  border-inline-start-style: solid;
  border-inline-start-color: var(--ds-accent, var(--ds-component-dashboardgrid-kpi-accent, var(--ds-semantic-action-primary)));
}

/* Un KPI sin estado no grita: el tono neutro usa el borde sutil, no el gris de
   contenido secundario, que a 3 px resultaria mas pesado que un estado real. */
html[data-ds-v2="1"][data-ds-dashboard-kpi="accented"] .core-mini-dashboard__slot[data-ds-accent="neutral"],
html[data-ds-v2="1"][data-ds-dashboard-kpi="accented"] #dashboard-layout [data-layout-item][data-ds-widget-kind="kpi"][data-ds-accent="neutral"] {
  border-inline-start-color: var(--ds-semantic-border-subtle, rgb(148 163 184 / .35));
}

/* Receta contextual del Dashboard. No es una variante de card global ni usa
   `data-ds-tone`: sólo una bandeja cuya situación ya fue resuelta por el
   dominio opta por ella. La tarjeta conserva su superficie neutra; cada fila
   declarada recibe una escuadra fina en su esquina inicial. Así se conserva la
   lectura calmada de la bandeja y el color se reserva para su función real. */
html[data-ds-v2="1"] [data-ds-dashboard="1"] #dashboard-layout [data-layout-item][data-ds-surface="contextual"] [data-dashboard-context-row][data-ds-accent]:not([data-ds-accent="neutral"]) {
  position: relative;
  isolation: isolate;
}

html[data-ds-v2="1"] [data-ds-dashboard="1"] #dashboard-layout [data-layout-item][data-ds-surface="contextual"] [data-dashboard-context-row][data-ds-accent]:not([data-ds-accent="neutral"])::before {
  position: absolute;
  inset-block-start: -.0625rem;
  inset-inline-start: -.0625rem;
  width: .75rem;
  height: .75rem;
  border-block-start: 2px solid var(--ds-accent);
  border-inline-start: 2px solid var(--ds-accent);
  border-start-start-radius: .375rem;
  content: '';
  pointer-events: none;
}