@nac3/forge-cli 1.0.52 → 1.0.53

package/yujin-design-system/tokens/yujin-tokens.css

@@ -0,0 +1,2386 @@
+/* ============================================================
+   YUJIN CRM — Design Tokens
+   友人 · Precisión japonesa al servicio de la relación humana
+   ============================================================
+   Uso: importar como primer archivo CSS del proyecto.
+   Todas las variables aquí definidas son la fuente de verdad
+   del sistema visual. Ningún valor de color, tipografía o
+   espaciado debe hardcodearse fuera de este archivo.
+   ============================================================ */
+
+:root {
+
+  /* ----------------------------------------------------------
+     MARCA
+     ---------------------------------------------------------- */
+  --yujin-name: "Yujin";
+  --yujin-kanji: "友人";
+
+
+  /* ----------------------------------------------------------
+     COLORES — Paleta base
+     ---------------------------------------------------------- */
+
+  /* Índigo (acento primario — acción, foco, identidad) */
+  --color-indigo-50:  #ECEFFE;
+  --color-indigo-100: #C8CDFA;
+  --color-indigo-200: #A0A8F5;
+  --color-indigo-400: #5A66E8;
+  --color-indigo-600: #2D3A8C;   /* ← color principal de marca */
+  --color-indigo-800: #1A2260;
+  --color-indigo-900: #0D1235;
+
+  /* Teal (acento secundario — éxito, activo, positivo) */
+  --color-teal-50:  #E2F5F3;
+  --color-teal-100: #AADFD9;
+  --color-teal-200: #6EC8C0;
+  --color-teal-400: #1D9E94;
+  --color-teal-600: #0F6E66;
+  --color-teal-800: #074F49;
+  --color-teal-900: #03302C;
+
+  /* Ámbar (alertas, pendiente, atención) */
+  --color-amber-50:  #FDF4E3;
+  --color-amber-100: #FAE0A8;
+  --color-amber-200: #F5C86A;
+  --color-amber-400: #D4950A;
+  --color-amber-600: #9B6A05;
+  --color-amber-800: #6B4803;
+  --color-amber-900: #3D2801;
+
+  /* Coral (peligro, pérdida, error) */
+  --color-coral-50:  #FCEEE9;
+  --color-coral-100: #F7C9BB;
+  --color-coral-200: #F09F8A;
+  --color-coral-400: #D45840;
+  --color-coral-600: #943020;
+  --color-coral-800: #6A1F13;
+  --color-coral-900: #3D0E08;
+
+  /* Neutros cálidos (base de la UI — espíritu wabi-sabi) */
+  --color-warm-0:   #FFFFFF;
+  --color-warm-50:  #F8F7F4;   /* fondo de página */
+  --color-warm-100: #F2F0EC;   /* fondo de superficie */
+  --color-warm-150: #EAE8E2;   /* bordes sutiles */
+  --color-warm-200: #DEDAD2;   /* bordes normales */
+  --color-warm-300: #C8C5BB;   /* bordes énfasis */
+  --color-warm-400: #A8A49A;   /* texto deshabilitado */
+  --color-warm-500: #888480;   /* texto terciario / placeholders */
+  --color-warm-600: #615E58;   /* texto secundario */
+  --color-warm-700: #3E3B36;   /* texto primario suave */
+  --color-warm-800: #2C2927;   /* texto primario */
+  --color-warm-900: #1A1815;   /* texto máxima jerarquía */
+
+  /* Ink (el color más oscuro — titulares, énfasis máximo) */
+  --color-ink: #1A1815;
+
+
+  /* ----------------------------------------------------------
+     COLORES — Semánticos (roles funcionales en la UI)
+     ---------------------------------------------------------- */
+
+  --color-bg-page:        var(--color-warm-50);
+  --color-bg-surface:     var(--color-warm-0);
+  --color-bg-subtle:      var(--color-warm-100);
+  --color-bg-muted:       var(--color-warm-150);
+
+  --color-border-subtle:  var(--color-warm-150);
+  --color-border-default: var(--color-warm-200);
+  --color-border-strong:  var(--color-warm-300);
+
+  --color-text-primary:   var(--color-warm-800);
+  --color-text-secondary: var(--color-warm-600);
+  --color-text-tertiary:  var(--color-warm-500);
+  --color-text-disabled:  var(--color-warm-400);
+  --color-text-inverse:   var(--color-warm-0);
+
+  --color-accent:         var(--color-indigo-600);
+  --color-accent-hover:   var(--color-indigo-800);
+  --color-accent-light:   var(--color-indigo-50);
+  --color-accent-text:    var(--color-indigo-600);
+
+  --color-success:        var(--color-teal-600);
+  --color-success-light:  var(--color-teal-50);
+  --color-success-text:   var(--color-teal-800);
+
+  --color-warning:        var(--color-amber-600);
+  --color-warning-light:  var(--color-amber-50);
+  --color-warning-text:   var(--color-amber-800);
+
+  --color-danger:         var(--color-coral-600);
+  --color-danger-light:   var(--color-coral-50);
+  --color-danger-text:    var(--color-coral-800);
+
+
+  /* ----------------------------------------------------------
+     COLORES — Módulos / Entidades (iconos y tarjetas del sistema)
+     Cada módulo tiene un color semántico que lo identifica.
+     Usar siempre: bg = *-50, border = *-200, icon = *-600, text = *-800
+     ---------------------------------------------------------- */
+
+  /* Contactos */
+  --module-contacts-bg:     var(--color-indigo-50);
+  --module-contacts-border: var(--color-indigo-200);
+  --module-contacts-icon:   var(--color-indigo-600);
+  --module-contacts-text:   var(--color-indigo-800);
+
+  /* Empresas */
+  --module-companies-bg:    #EEF2FF;
+  --module-companies-icon:  #3730A3;
+
+  /* Proveedores */
+  --module-suppliers-bg:    var(--color-amber-50);
+  --module-suppliers-icon:  var(--color-amber-600);
+
+  /* Asesores */
+  --module-advisors-bg:     var(--color-teal-50);
+  --module-advisors-icon:   var(--color-teal-600);
+
+  /* Inventario */
+  --module-inventory-bg:    #FFF7ED;
+  --module-inventory-icon:  #C2610C;
+
+  /* Documentos */
+  --module-docs-bg:         var(--color-warm-100);
+  --module-docs-icon:       var(--color-warm-600);
+
+  /* Pipeline Runs / Deals */
+  --module-pipeline-bg:     var(--color-indigo-50);
+  --module-pipeline-icon:   var(--color-indigo-600);
+
+  /* Tickets Soporte */
+  --module-tickets-bg:      var(--color-coral-50);
+  --module-tickets-icon:    var(--color-coral-600);
+
+  /* Pagos */
+  --module-payments-bg:     var(--color-teal-50);
+  --module-payments-icon:   var(--color-teal-600);
+
+  /* Firmas Digitales */
+  --module-signatures-bg:   #F0FDF4;
+  --module-signatures-icon: #15803D;
+
+  /* Tarifas Horarias */
+  --module-rates-bg:        var(--color-amber-50);
+  --module-rates-icon:      var(--color-amber-600);
+
+  /* Usuarios */
+  --module-users-bg:        var(--color-indigo-50);
+  --module-users-icon:      var(--color-indigo-600);
+
+  /* Asistentes IA */
+  --module-ai-bg:           #F5F3FF;
+  --module-ai-icon:         #6D28D9;
+
+  /* Tareas */
+  --module-tasks-bg:        var(--color-warm-100);
+  --module-tasks-icon:      var(--color-warm-700);
+
+  /* Estadísticas */
+  --module-stats-bg:        var(--color-indigo-50);
+  --module-stats-icon:      var(--color-indigo-600);
+
+  /* KPIs */
+  --module-kpis-bg:         var(--color-amber-50);
+  --module-kpis-icon:       var(--color-amber-600);
+
+  /* Configuración / Sistema */
+  --module-system-bg:       var(--color-warm-100);
+  --module-system-icon:     var(--color-warm-600);
+
+  /* Seguridad */
+  --module-security-bg:     var(--color-coral-50);
+  --module-security-icon:   var(--color-coral-600);
+
+  /* Tenants SaaS */
+  --module-tenants-bg:      var(--color-teal-50);
+  --module-tenants-icon:    var(--color-teal-600);
+
+  /* Entidades Custom */
+  --module-custom-bg:       #FDF4FF;
+  --module-custom-icon:     #9333EA;
+
+  /* Integraciones */
+  --module-integrations-bg: var(--color-indigo-50);
+  --module-integrations-icon: var(--color-indigo-600);
+
+  /* Dashboards */
+  --module-dashboards-bg:   var(--color-teal-50);
+  --module-dashboards-icon: var(--color-teal-600);
+
+
+  /* ----------------------------------------------------------
+     COLORES — Estados de Pipeline / Deal
+     ---------------------------------------------------------- */
+
+  --stage-lead:        #6366F1;   /* índigo suave */
+  --stage-discovery:   #8B5CF6;   /* violeta */
+  --stage-quote:       var(--color-amber-400);
+  --stage-contract:    var(--color-teal-400);
+  --stage-won:         #16A34A;   /* verde éxito */
+  --stage-lost:        var(--color-coral-400);
+
+  --stage-lead-bg:     #EEF2FF;
+  --stage-discovery-bg:#F5F3FF;
+  --stage-quote-bg:    var(--color-amber-50);
+  --stage-contract-bg: var(--color-teal-50);
+  --stage-won-bg:      #F0FDF4;
+  --stage-lost-bg:     var(--color-coral-50);
+
+
+  /* ----------------------------------------------------------
+     TIPOGRAFÍA
+     ---------------------------------------------------------- */
+
+  /* Familias */
+  --font-sans:    "DM Sans", "Inter", system-ui, sans-serif;
+  --font-display: "DM Sans", sans-serif;
+  --font-mono:    "JetBrains Mono", "Fira Code", monospace;
+
+  /* Escala */
+  --text-xs:   11px;
+  --text-sm:   12px;
+  --text-base: 14px;
+  --text-md:   15px;
+  --text-lg:   17px;
+  --text-xl:   20px;
+  --text-2xl:  24px;
+  --text-3xl:  30px;
+
+  /* Pesos — SOLO estos dos */
+  --font-regular: 400;
+  --font-medium:  500;
+
+  /* Interlineado */
+  --leading-tight:  1.3;
+  --leading-normal: 1.6;
+  --leading-relaxed: 1.75;
+
+  /* Tracking */
+  --tracking-tight:  -0.01em;
+  --tracking-normal:  0;
+  --tracking-wide:    0.04em;
+  --tracking-wider:   0.08em;
+
+
+  /* ----------------------------------------------------------
+     ESPACIADO — Escala 4px base
+     ---------------------------------------------------------- */
+
+  --space-1:  4px;
+  --space-2:  8px;
+  --space-3:  12px;
+  --space-4:  16px;
+  --space-5:  20px;
+  --space-6:  24px;
+  --space-8:  32px;
+  --space-10: 40px;
+  --space-12: 48px;
+  --space-16: 64px;
+  --space-20: 80px;
+
+
+  /* ----------------------------------------------------------
+     BORDES
+     ---------------------------------------------------------- */
+
+  --border-width-thin:    0.5px;
+  --border-width-default: 1px;
+  --border-width-thick:   2px;   /* solo para cards destacadas / seleccionadas */
+
+  --radius-sm:   4px;
+  --radius-md:   8px;
+  --radius-lg:   12px;
+  --radius-xl:   16px;
+  --radius-full: 9999px;   /* pills, badges */
+
+
+  /* ----------------------------------------------------------
+     SOMBRAS — Solo funcionales, nunca decorativas
+     ---------------------------------------------------------- */
+
+  --shadow-none: none;
+  --shadow-sm:   0 1px 2px rgba(26, 24, 21, 0.05);
+  --shadow-md:   0 2px 8px rgba(26, 24, 21, 0.08);   /* modales, dropdowns */
+  --shadow-focus: 0 0 0 3px rgba(45, 58, 140, 0.15); /* ring de foco */
+
+
+  /* ----------------------------------------------------------
+     TRANSICIONES — Rápidas y funcionales
+     ---------------------------------------------------------- */
+
+  --transition-fast:   100ms ease-out;
+  --transition-base:   150ms ease-out;
+  --transition-slow:   200ms ease-out;
+
+
+  /* ----------------------------------------------------------
+     LAYOUT
+     ---------------------------------------------------------- */
+
+  --sidebar-width:        220px;
+  --sidebar-width-collapsed: 56px;
+  --topbar-height:        52px;
+  --content-max-width:    1200px;
+  --content-padding:      var(--space-6);
+
+
+  /* ----------------------------------------------------------
+     ICONOGRAFÍA — Sistema Lucide (stroke 1.5px, 20px base)
+     ---------------------------------------------------------- */
+
+  --icon-size-sm:     16px;
+  --icon-size-base:   20px;
+  --icon-size-lg:     24px;
+  --icon-stroke:      1.5;     /* stroke-width de Lucide */
+  --icon-stroke-bold: 2;       /* para estados activos o énfasis */
+
+  /* Tamaño de ícono en tarjetas de módulo */
+  --module-card-icon-size:      28px;
+  --module-card-icon-bg-size:   52px;   /* contenedor del ícono */
+  --module-card-icon-radius:    var(--radius-md);
+
+  /* ----------------------------------------------------------
+     KANJI WATERMARK — Opción A
+     Marca de agua decorativa en esquina superior derecha
+     de cada tarjeta de módulo. Acompaña al ícono Lucide,
+     nunca lo reemplaza.
+     ---------------------------------------------------------- */
+
+  --kanji-font:     "Noto Serif JP", "Yu Mincho", "游明朝", serif;
+  --kanji-size-lg:  72px;   /* tarjetas estándar (180px wide) */
+  --kanji-size-md:  56px;   /* tarjetas compactas */
+  --kanji-size-sm:  40px;   /* tarjetas muy pequeñas */
+  --kanji-opacity:  0.06;   /* decorativo puro — nunca superar 0.10 */
+  --kanji-weight:   700;
+
+
+  /* ----------------------------------------------------------
+     TARJETAS DEL SISTEMA (Centro de Control / Entidades)
+     ---------------------------------------------------------- */
+
+  --card-module-width:       180px;
+  --card-module-min-height:  140px;
+  --card-module-padding:     var(--space-5);
+  --card-module-radius:      var(--radius-lg);
+  --card-module-border:      var(--border-width-thin) solid var(--color-border-subtle);
+  --card-module-bg:          var(--color-bg-surface);
+  --card-module-bg-hover:    var(--color-warm-50);
+
+  /* Tarjeta de métricas / KPI */
+  --card-metric-padding:     var(--space-4) var(--space-5);
+  --card-metric-radius:      var(--radius-md);
+  --card-metric-bg:          var(--color-bg-subtle);
+
+  /* Tarjeta de entidad (deal, contacto) */
+  --card-entity-padding:     var(--space-4);
+  --card-entity-radius:      var(--radius-lg);
+  --card-entity-border:      var(--border-width-thin) solid var(--color-border-subtle);
+  --card-entity-bg:          var(--color-bg-surface);
+
+
+  /* ----------------------------------------------------------
+     SIDEBAR
+     ---------------------------------------------------------- */
+
+  --sidebar-bg:              var(--color-bg-surface);
+  --sidebar-border:          var(--border-width-thin) solid var(--color-border-subtle);
+  --sidebar-item-height:     36px;
+  --sidebar-item-radius:     var(--radius-md);
+  --sidebar-item-active-bg:  var(--color-accent-light);
+  --sidebar-item-active-text: var(--color-accent);
+  --sidebar-section-label-size: var(--text-xs);
+  --sidebar-section-label-tracking: var(--tracking-wider);
+
+
+  /* ----------------------------------------------------------
+     BADGES / PILLS
+     ---------------------------------------------------------- */
+
+  --badge-padding:    2px 8px;
+  --badge-radius:     var(--radius-full);
+  --badge-font-size:  var(--text-xs);
+  --badge-font-weight: var(--font-medium);
+
+
+  /* ----------------------------------------------------------
+     FORMULARIOS
+     ---------------------------------------------------------- */
+
+  --input-height:      36px;
+  --input-padding:     0 var(--space-3);
+  --input-radius:      var(--radius-md);
+  --input-border:      var(--border-width-default) solid var(--color-border-default);
+  --input-bg:          var(--color-bg-surface);
+  --input-focus-border: var(--color-accent);
+  --input-focus-ring:  var(--shadow-focus);
+  --input-font-size:   var(--text-base);
+
+
+  /* ----------------------------------------------------------
+     BOTONES
+     ---------------------------------------------------------- */
+
+  --btn-height:         36px;
+  --btn-padding:        0 var(--space-4);
+  --btn-radius:         var(--radius-md);
+  --btn-font-size:      var(--text-base);
+  --btn-font-weight:    var(--font-medium);
+  --btn-transition:     var(--transition-base);
+
+  /* Primario */
+  --btn-primary-bg:     var(--color-accent);
+  --btn-primary-text:   var(--color-text-inverse);
+  --btn-primary-hover:  var(--color-accent-hover);
+
+  /* Secundario */
+  --btn-secondary-bg:   transparent;
+  --btn-secondary-text: var(--color-accent);
+  --btn-secondary-border: var(--color-accent);
+  --btn-secondary-hover-bg: var(--color-accent-light);
+
+  /* Ghost */
+  --btn-ghost-bg:       transparent;
+  --btn-ghost-text:     var(--color-text-secondary);
+  --btn-ghost-border:   var(--color-border-default);
+  --btn-ghost-hover-bg: var(--color-bg-subtle);
+
+  /* Peligro */
+  --btn-danger-bg:      var(--color-danger);
+  --btn-danger-text:    var(--color-text-inverse);
+  --btn-danger-hover:   var(--color-coral-800);
+
+
+  /* ----------------------------------------------------------
+     Z-INDEX
+     ---------------------------------------------------------- */
+
+  --z-base:     0;
+  --z-above:    1;
+  --z-dropdown: 100;
+  --z-sticky:   200;
+  --z-modal:    300;
+  --z-toast:    400;
+  --z-tooltip:  500;
+
+}
+
+
+/* ----------------------------------------------------------
+   HUB-SHELL TABS (Chablis#BUG-44 phase 2)
+   Sazanami-style tab switcher that drops into every hub-shell
+   surface when hub_tabs has 2+ active rows. Active tab is
+   underlined in indigo; hover paints a subtle indigo wash;
+   focus-visible reuses the form focus ring. Reduced-motion
+   skips the underline transition.
+   ---------------------------------------------------------- */
+
+.yj-hub-tabs {
+  list-style:        none;
+  margin:            0 0 14px 0;
+  padding:           0;
+  display:           flex;
+  flex-wrap:         wrap;
+  gap:               0;
+  border-bottom:     1px solid var(--color-border-subtle, rgba(0,0,0,0.07));
+  font-family:       var(--font-sans, system-ui, sans-serif);
+  font-size:         13px;
+  font-weight:       var(--font-medium, 500);
+  color:             var(--color-text-secondary, #6E6A63);
+}
+
+.yj-hub-tabs .yj-hub-tab {
+  cursor:            pointer;
+  padding:           9px 16px;
+  margin-bottom:     -1px;
+  border-bottom:     2px solid transparent;
+  user-select:       none;
+  transition:        color 140ms ease, border-color 140ms ease,
+                     background-color 140ms ease;
+}
+
+.yj-hub-tabs .yj-hub-tab:hover {
+  color:             var(--color-indigo-600, #2D3A8C);
+  background-color:  var(--color-indigo-50, #ECEFFE);
+}
+
+.yj-hub-tabs .yj-hub-tab.is-active {
+  color:             var(--color-indigo-600, #2D3A8C);
+  border-bottom-color: var(--color-indigo-600, #2D3A8C);
+  background-color:  transparent;
+}
+
+.yj-hub-tabs .yj-hub-tab:focus-visible {
+  outline:           2px solid var(--color-indigo-400, #5A66E8);
+  outline-offset:    -2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .yj-hub-tabs .yj-hub-tab {
+    transition:      none;
+  }
+}
+
+/* ----------------------------------------------------------
+   HUB NO-JS FALLBACK (Torrontes#BUG-44-c67)
+   Rendered server-side inside a <noscript> block when the URL
+   carries ?hub_slug=. JS-enabled browsers drop the markup so
+   the table only surfaces for users who disabled scripts.
+   ---------------------------------------------------------- */
+
+.yj-hub-fallback {
+  display:           table;
+  width:             100%;
+  margin:            14px 0;
+  border-collapse:   collapse;
+  font-size:         13px;
+  background-color:  var(--color-bg-surface, #fff);
+  border:            1px solid var(--color-border-subtle, #eee);
+}
+
+.yj-hub-fallback caption {
+  text-align:        left;
+  padding:           10px 12px;
+  font-size:         15px;
+  font-weight:       500;
+  color:             var(--color-text-primary, #1a1a1a);
+  border-bottom:     1px solid var(--color-border-subtle, #eee);
+}
+
+.yj-hub-fallback th,
+.yj-hub-fallback td {
+  padding:           8px 12px;
+  text-align:        left;
+  border-bottom:     1px solid var(--color-border-subtle, #eee);
+}
+
+.yj-hub-fallback th {
+  background-color:  var(--color-bg-subtle, #F2F0EC);
+  font-weight:       600;
+  color:             var(--color-text-secondary, #555);
+}
+
+.yj-hub-fallback a {
+  color:             var(--color-indigo-600, #2D3A8C);
+  text-decoration:   none;
+}
+.yj-hub-fallback a:hover { text-decoration: underline; }
+
+.yj-hub-fallback__form {
+  display:           flex;
+  gap:               6px;
+  margin:            8px 0;
+}
+.yj-hub-fallback__form input[type="search"] {
+  flex:              1;
+  padding:           6px 10px;
+  border:            1px solid var(--color-border-subtle, #eee);
+  border-radius:     6px;
+  font-size:         13px;
+}
+.yj-hub-fallback__form button {
+  padding:           6px 14px;
+  border:            0;
+  border-radius:     6px;
+  background-color:  var(--color-indigo-600, #2D3A8C);
+  color:             #ffffff;
+  font-size:         12px;
+  cursor:            pointer;
+}
+
+/* JS-enabled override: a tenant who renders the fallback OUTSIDE
+   <noscript> can hide it by adding .yj-hub-shell-mounted to body
+   once the shell has booted. */
+body.yj-hub-shell-mounted .yj-hub-fallback,
+body.yj-hub-shell-mounted .yj-hub-fallback__form {
+  display:           none !important;
+}
+
+/* ----------------------------------------------------------
+   SIDEBAR BADGE COUNTER (Torrontes#BUG-44-c33)
+   Mokuji nav items decorate with a live count of pending /
+   overdue / unread items. Coral background + white digit so the
+   badge reads as "needs attention" without competing with the
+   active-item indigo accent.
+   ---------------------------------------------------------- */
+
+.ni .yj-badge {
+  display:           inline-flex;
+  align-items:       center;
+  justify-content:   center;
+  margin-left:       8px;
+  padding:           1px 6px;
+  min-width:         18px;
+  height:            18px;
+  border-radius:     9px;
+  background-color:  var(--color-coral-600, #943020);
+  color:             var(--color-text-inverse, #fff);
+  font-size:         10px;
+  font-weight:       600;
+  line-height:       1;
+}
+
+/* ----------------------------------------------------------
+   HUB EMPTY STATE (Torrontes#BUG-44-c22)
+   Centred sumi-e placeholder rendered when the endpoint returns
+   0 items or the active filter has no matches. Icon 64px +
+   message (h3) + primary CTA. Ink-fade animation eases the card
+   into view (drops to none under prefers-reduced-motion).
+   ---------------------------------------------------------- */
+
+.yj-hub-empty-state {
+  display:           flex;
+  flex-direction:    column;
+  align-items:       center;
+  justify-content:   center;
+  text-align:        center;
+  padding:           48px 24px;
+  color:             var(--color-text-secondary, #555);
+  animation:         yj-empty-ink-fade 0.45s ease-out;
+}
+
+.yj-hub-empty-state__icon {
+  width:             64px;
+  height:            64px;
+  margin-bottom:     16px;
+  color:             var(--color-text-tertiary, #888);
+  opacity:           0.85;
+}
+
+.yj-hub-empty-state__icon svg {
+  width:             100%;
+  height:            100%;
+}
+
+.yj-hub-empty-state__message {
+  margin:            0 0 8px;
+  font-size:         16px;
+  font-weight:       500;
+  color:             var(--color-text-primary, #1a1a1a);
+}
+
+.yj-hub-empty-state__cta {
+  margin-top:        12px;
+}
+
+@keyframes yj-empty-ink-fade {
+  from { opacity: 0; transform: translateY(6px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .yj-hub-empty-state {
+    animation:       none;
+  }
+}
+
+/* ----------------------------------------------------------
+   HUB KEYBOARD A11Y (Torrontes#BUG-44-c20)
+   :focus-visible on every interactive shell element so
+   keyboard users always see where focus lives. Outline 2px
+   indigo + 2px offset so the cue clears the card border.
+   Skip-to-content anchor lives at the top of body and is
+   visible only when focused (sr-only by default).
+   ---------------------------------------------------------- */
+
+.yj-hub-card:focus-visible,
+.yj-hub-grid:focus-visible,
+.yj-hub-counter:focus-visible,
+.yj-hub-card__action:focus-visible {
+  outline:           2px solid var(--color-indigo-400, #5A66E8);
+  outline-offset:    2px;
+}
+
+.yj-skip-to-content {
+  position:          absolute;
+  top:               -40px;
+  left:              0;
+  padding:           8px 14px;
+  background-color:  var(--color-indigo-600, #2D3A8C);
+  color:             var(--color-text-inverse, #FFFFFF);
+  font-size:         13px;
+  border-radius:     0 0 6px 0;
+  z-index:           9999;
+  text-decoration:   none;
+  transition:        top 0.15s ease;
+}
+
+.yj-skip-to-content:focus,
+.yj-skip-to-content:focus-visible {
+  top:               0;
+  outline:           2px solid var(--color-indigo-400, #5A66E8);
+  outline-offset:    2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .yj-skip-to-content {
+    transition:      none;
+  }
+}
+
+
+/* ----------------------------------------------------------
+   HUB REALTIME PULSE (Chablis#BUG-44-c27)
+   When the SSE stream emits a change for a card, the shell adds
+   .yj-rt-pulse to highlight the card for ~2s. Indigo glow fades
+   out via the keyframe; reduced-motion drops the animation and
+   shows a static outline instead.
+   ---------------------------------------------------------- */
+
+.yj-rt-pulse {
+  animation:    yj-rt-pulse-anim 2s ease-out;
+}
+
+@keyframes yj-rt-pulse-anim {
+  0%   { box-shadow: 0 0 0 0   var(--color-indigo-400, #5A66E8); }
+  40%  { box-shadow: 0 0 0 6px var(--color-indigo-200, rgba(90,102,232,0.35)); }
+  100% { box-shadow: 0 0 0 0   transparent; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .yj-rt-pulse {
+    animation:  none;
+    box-shadow: 0 0 0 2px var(--color-indigo-400, #5A66E8);
+  }
+}
+
+
+/* ----------------------------------------------------------
+   HUB BULK SELECTION (Chablis#BUG-44-c19)
+   When the section carries .is-bulk-selecting:
+     - Cards show a checkbox glyph top-left.
+     - Selected cards get an indigo outline.
+     - Card cursor becomes pointer (selection target).
+   Reduced-motion drops the transition on the outline.
+   ---------------------------------------------------------- */
+
+.hs-section.is-bulk-selecting .cc-card {
+  cursor:        pointer;
+  position:      relative;
+  transition:    box-shadow 140ms ease;
+}
+
+.hs-section.is-bulk-selecting .cc-card::before {
+  content:       '\2610';
+  position:      absolute;
+  top:           8px;
+  left:          8px;
+  font-size:     16px;
+  color:         var(--color-text-tertiary, #888);
+  z-index:       2;
+}
+
+.hs-section.is-bulk-selecting .cc-card.is-selected::before {
+  content:       '\2611';
+  color:         var(--color-indigo-600, #2D3A8C);
+}
+
+.hs-section.is-bulk-selecting .cc-card.is-selected {
+  box-shadow:    0 0 0 2px var(--color-indigo-600, #2D3A8C);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hs-section.is-bulk-selecting .cc-card { transition: none; }
+}
+
+
+/* ----------------------------------------------------------
+   HUB-TABS CONFIGURATOR (Chablis#BUG-44 phase 3)
+   Admin-only modal for managing hub_tabs rows. Visual frame
+   matches the F45 list-view configurator -- white card on dim
+   overlay, indigo accent on the primary action, drag handles
+   in tertiary text.
+   ---------------------------------------------------------- */
+
+.yj-hub-config-card {
+  background:        var(--color-bg-surface, #fff);
+  border:            1px solid var(--color-border-subtle, rgba(0,0,0,0.07));
+  border-radius:     8px;
+  width:             min(720px, 100%);
+  box-shadow:        0 10px 30px rgba(0,0,0,0.15);
+  font-family:       var(--font-sans, system-ui, sans-serif);
+}
+
+.yj-hub-config-head {
+  display:           flex;
+  align-items:       center;
+  justify-content:   space-between;
+  padding:           12px 14px;
+  border-bottom:     1px solid var(--color-border-subtle, rgba(0,0,0,0.07));
+}
+
+.yj-hub-config-body {
+  padding:           0;
+}
+
+.yj-hub-config-toolbar {
+  padding:           10px 14px;
+  display:           flex;
+  align-items:       center;
+}
+
+.yj-hub-config-table {
+  width:             100%;
+  border-collapse:   collapse;
+  font-size:         12px;
+}
+
+.yj-hub-config-table thead th {
+  text-align:        left;
+  padding:           6px 10px;
+  border-bottom:     1px solid var(--color-border-subtle, rgba(0,0,0,0.07));
+  color:             var(--color-text-secondary, #6E6A63);
+  font-weight:       var(--font-medium, 500);
+}
+
+.yj-hub-config-table tbody td {
+  padding:           6px 10px;
+  border-bottom:     1px solid var(--color-border-subtle, rgba(0,0,0,0.05));
+  vertical-align:    middle;
+}
+
+.yj-hub-config-table .yj-hc-drag {
+  color:             var(--color-text-tertiary, #9C988F);
+  user-select:       none;
+}
+
+.yj-hub-config-footer {
+  display:           flex;
+  gap:               8px;
+  justify-content:   flex-end;
+  padding:           10px 14px;
+  border-top:        1px solid var(--color-border-subtle, rgba(0,0,0,0.07));
+}
+
+/* Edit modal nested inside the configurator. */
+.yj-hub-config-edit {
+  position:          fixed;
+  inset:             0;
+  background:        rgba(0,0,0,0.45);
+  display:           flex;
+  align-items:       flex-start;
+  justify-content:   center;
+  z-index:           9100;
+  padding:           40px 12px;
+}
+
+.yj-hub-config-edit-card {
+  background:        var(--color-bg-surface, #fff);
+  border:            1px solid var(--color-border-subtle, rgba(0,0,0,0.07));
+  border-radius:     8px;
+  width:             min(560px, 100%);
+  box-shadow:        0 10px 30px rgba(0,0,0,0.18);
+  font-family:       var(--font-sans, system-ui, sans-serif);
+}
+
+.yj-hub-config-edit-head,
+.yj-hub-config-edit-foot {
+  display:           flex;
+  align-items:       center;
+  justify-content:   space-between;
+  padding:           10px 14px;
+  border-bottom:     1px solid var(--color-border-subtle, rgba(0,0,0,0.07));
+}
+
+.yj-hub-config-edit-foot {
+  border-bottom:     0;
+  border-top:        1px solid var(--color-border-subtle, rgba(0,0,0,0.07));
+  justify-content:   flex-end;
+  gap:               8px;
+}
+
+.yj-hub-config-edit-body {
+  padding:           12px 14px;
+  max-height:        60vh;
+  overflow:          auto;
+}
+
+.yj-hub-config-row {
+  display:           flex;
+  align-items:       center;
+  gap:               10px;
+  margin-bottom:     8px;
+  font-size:         12px;
+}
+
+.yj-hub-config-row > span {
+  flex:              0 0 130px;
+  color:             var(--color-text-secondary, #6E6A63);
+}
+
+.yj-hub-config-row .fi {
+  flex:              1;
+  font-size:         12px;
+  padding:           4px 6px;
+  border:            1px solid var(--color-border-default, rgba(0,0,0,0.12));
+  border-radius:     4px;
+  background:        var(--color-bg-subtle, #fafafa);
+}
+
+.yj-hub-config-row--block {
+  align-items:       flex-start;
+}
+
+.yj-hub-config-row--block .fi {
+  font-family:       var(--font-mono, monospace);
+}
+
+.yj-hub-config-i18n {
+  border:            1px solid var(--color-border-subtle, rgba(0,0,0,0.07));
+  border-radius:     6px;
+  padding:           10px 12px;
+  margin:            8px 0;
+}
+
+.yj-hub-config-i18n legend {
+  font-size:         11px;
+  color:             var(--color-text-secondary, #6E6A63);
+  padding:           0 6px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .yj-hub-config-card,
+  .yj-hub-config-edit-card {
+    transition:      none;
+  }
+}
+
+/* Gear icon button injected into the hub header. */
+.yj-hub-gear {
+  border:            1px solid transparent;
+  background:        transparent;
+  color:             var(--color-text-secondary, #6E6A63);
+  cursor:            pointer;
+  padding:           4px 6px;
+  font-size:         14px;
+  border-radius:     4px;
+  margin-left:       8px;
+  transition:        background-color 140ms ease, color 140ms ease;
+}
+
+.yj-hub-gear:hover {
+  background:        var(--color-indigo-50, #ECEFFE);
+  color:             var(--color-indigo-600, #2D3A8C);
+}
+
+.yj-hub-gear:focus-visible {
+  outline:           2px solid var(--color-indigo-400, #5A66E8);
+  outline-offset:    1px;
+}
+
+
+/* ----------------------------------------------------------
+   DARK MODE
+   Si en el futuro se implementa modo oscuro, sobrescribir
+   aquí las variables semánticas únicamente. Los tokens
+   primitivos (--color-indigo-*, etc.) no cambian.
+   ---------------------------------------------------------- */
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    /* Descomentar y ajustar si se activa dark mode */
+
+    /* --color-bg-page:        #0F0E0C; */
+    /* --color-bg-surface:     #1A1916; */
+    /* --color-bg-subtle:      #232119; */
+    /* --color-bg-muted:       #2C2A26; */
+
+    /* --color-border-subtle:  rgba(255,255,255,0.07); */
+    /* --color-border-default: rgba(255,255,255,0.12); */
+    /* --color-border-strong:  rgba(255,255,255,0.20); */
+
+    /* --color-text-primary:   #E8E6E1; */
+    /* --color-text-secondary: #A8A49A; */
+    /* --color-text-tertiary:  #6E6A63; */
+  }
+}
+
+
+/* ----------------------------------------------------------
+   RESET MÍNIMO — Asegurar que los tokens apliquen base
+   ---------------------------------------------------------- */
+
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  font-family: var(--font-sans);
+  font-size: var(--text-base);
+  font-weight: var(--font-regular);
+  line-height: var(--leading-normal);
+  color: var(--color-text-primary);
+  background-color: var(--color-bg-page);
+}
+
+
+/* ----------------------------------------------------------
+   HUB-SHELL CANONICAL 5-ZONE (Malbec#BUG-44-c1)
+   Sazanami F73 is the visual reference. The 5 zones are tagged
+   on every hub so QA + visual regression specs target by class,
+   not by position. Card grid is uniform 280x340 with thumbnail +
+   primary + description + tags chips + actions inline. Zones
+   adopt Yujin tokens so a tenant theme override propagates
+   without per-hub CSS.
+   ---------------------------------------------------------- */
+
+.yj-hub-shell {
+  display:            block;
+  font-family:        var(--font-sans, system-ui, sans-serif);
+  color:              var(--color-text-primary, #1A1815);
+}
+
+/* Zone 1 already styled above as .yj-hub-tabs */
+
+.yj-hub-zone-2 {
+  /* title + counter row */
+  margin-top:         0;
+  margin-bottom:      14px;
+}
+.yj-hub-zone-2 h2 {
+  font-family:        var(--font-display, var(--font-sans));
+  font-size:          var(--text-2xl, 24px);
+  font-weight:        var(--font-medium, 500);
+  letter-spacing:     -0.01em;
+  margin:             0;
+}
+.yj-hub-counter {
+  align-self:         center;
+  font-size:          var(--text-xs, 11px);
+  color:              var(--color-text-tertiary, #908B82);
+  letter-spacing:     0.04em;
+}
+
+.yj-hub-zone-3 {
+  /* search + sector + restore + new */
+  display:            flex;
+  flex-wrap:          wrap;
+  gap:                10px;
+  align-items:        center;
+  margin-bottom:      12px;
+}
+.yj-hub-new {
+  margin-left:        auto;
+}
+
+.yj-hub-zone-4,
+.yj-hub-grid {
+  /* UR-2 (Malbec #830): cards reverted from 280x340 (BUG-44-c7) to
+     UR canonical 200x168 / 200x200 (Catalogo). Aligned with
+     crm_desa/demos/unified_renderers/assets/sumie-tokens.css y la
+     spec UNIFIED_RENDERERS_LINEAMIENTO.md seccion 1 (Zona 4) +
+     seccion 2 (Card structure). */
+  display:            grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap:                12px;
+  margin-bottom:      14px;
+}
+
+.yj-hub-card {
+  background:         var(--color-teal-100, #D5EAE3);
+  border:             1px solid var(--color-teal-200, #B5E7E0);
+  border-radius:      10px;
+  padding:            12px;
+  height:             168px;
+  display:            flex;
+  flex-direction:     column;
+  gap:                8px;
+  cursor:             pointer;
+  position:           relative;
+  overflow:           hidden;
+  transition:         border-color 160ms ease, box-shadow 160ms ease,
+                      transform 160ms ease;
+}
+/* Catalog tab: cards crecen para acomodar el toggle Activar/Desactivar
+   en el footer. */
+.yj-hub-zone-4[data-tab="catalog"] .yj-hub-card,
+.yj-panel[data-panel="catalog"] .yj-hub-card,
+.yj-panel[data-panel="catalog"] .yj-card {
+  height:             200px;
+}
+.yj-hub-card:hover {
+  border-color:       var(--color-indigo-400, #5A66E8);
+  box-shadow:         0 4px 16px rgba(45, 58, 140, 0.06);
+}
+.yj-hub-card:focus-visible {
+  outline:            2px solid var(--color-indigo-500, #4955BC);
+  outline-offset:     2px;
+}
+.yj-hub-card__thumb {
+  align-self:         center;
+  width:              64px;
+  height:             64px;
+  display:            flex;
+  align-items:        center;
+  justify-content:    center;
+  color:              var(--color-text-secondary, #6E6A63);
+}
+.yj-hub-card__title {
+  font-size:          var(--text-base, 14px);
+  font-weight:        var(--font-medium, 500);
+  color:              var(--color-text-primary, #1A1815);
+  line-height:        1.3;
+  margin:             0;
+  display:            -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow:           hidden;
+}
+.yj-hub-card__desc {
+  font-size:          var(--text-xs, 12px);
+  color:              var(--color-text-secondary, #6E6A63);
+  line-height:        1.4;
+  flex:               1;
+  display:            -webkit-box;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+  overflow:           hidden;
+}
+.yj-hub-card__tags {
+  display:            flex;
+  flex-wrap:          wrap;
+  gap:                4px;
+  margin-top:         auto;
+}
+.yj-hub-card__tag {
+  font-size:          10px;
+  padding:            2px 6px;
+  border-radius:      4px;
+  background:         var(--color-bg-subtle, rgba(0,0,0,0.04));
+  color:              var(--color-text-tertiary, #908B82);
+  letter-spacing:     0.02em;
+}
+.yj-hub-card__actions {
+  display:            flex;
+  flex-wrap:          wrap;
+  gap:                4px;
+  border-top:         1px solid var(--color-border-subtle, rgba(0,0,0,0.07));
+  padding-top:        8px;
+}
+.yj-hub-card__action {
+  font-size:          11px;
+  padding:            3px 8px;
+  background:         transparent;
+  border:             1px solid var(--color-border-subtle, rgba(0,0,0,0.07));
+  border-radius:      4px;
+  color:              var(--color-text-secondary, #6E6A63);
+  cursor:             pointer;
+}
+.yj-hub-card__action:hover {
+  border-color:       var(--color-indigo-400, #5A66E8);
+  color:              var(--color-indigo-600, #2D3A8C);
+}
+
+.yj-hub-zone-5,
+.yj-hub-pagination {
+  text-align:         center;
+  margin:             18px 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .yj-hub-card,
+  .yj-hub-card:hover {
+    transition:       none;
+    transform:        none;
+  }
+}
+
+
+/* ----------------------------------------------------------
+   DETAIL BREADCRUMB (BUG-44-c15)
+   Crm / NombreHub / NombreItem above the detail topbar. Hub
+   link is interactive (click returns to the hub with state
+   preserved); current item is plain text.
+   ---------------------------------------------------------- */
+.yj-detail-breadcrumb {
+  font-family:        var(--font-sans, system-ui, sans-serif);
+  font-size:          12px;
+  color:              var(--color-text-tertiary, #908B82);
+  margin-bottom:      8px;
+  display:            flex;
+  flex-wrap:          wrap;
+  align-items:        center;
+  gap:                4px;
+}
+.yj-detail-breadcrumb__home {
+  color:              var(--color-text-tertiary, #908B82);
+}
+.yj-detail-breadcrumb__sep {
+  color:              var(--color-text-tertiary, #908B82);
+  opacity:            0.5;
+}
+.yj-detail-breadcrumb__hub-link {
+  color:              var(--color-indigo-600, #2D3A8C);
+  text-decoration:    none;
+  cursor:             pointer;
+}
+.yj-detail-breadcrumb__hub-link:hover,
+.yj-detail-breadcrumb__hub-link:focus-visible {
+  text-decoration:    underline;
+}
+.yj-detail-breadcrumb__current {
+  color:              var(--color-text-primary, #1A1815);
+  font-weight:        500;
+}
+
+
+/* ----------------------------------------------------------
+   HUB-STATS PANEL (BUG-44-c14)
+   KPI cards row above zone 3 toolbar. Cards distribute via
+   flex:1 so the row stays edge-to-edge regardless of how many
+   KPIs the descriptor declares.
+   ---------------------------------------------------------- */
+.yj-hub-stats-panel {
+  margin-bottom:      12px;
+}
+.yj-hub-stats-panel .yj-hub-kpi {
+  background:         var(--color-bg-surface, #FAF8F5);
+  border:             1px solid var(--color-border-default, rgba(0,0,0,0.08));
+  border-radius:      8px;
+  padding:            10px 14px;
+  min-width:          140px;
+  flex:               1;
+  font-family:        var(--font-sans, system-ui, sans-serif);
+}
+.yj-hub-stats-panel .yj-hub-kpi-trend {
+  font-size:          11px;
+  margin-left:        6px;
+}
+
+
+/* ----------------------------------------------------------
+   HUB MOBILE RESPONSIVE (BUG-44-c16)
+   Viewports <= 768px collapse to a single-column stack:
+     - Cards full-width, height auto.
+     - Tabs overflow-x scroll so a long list does not wrap.
+     - Toolbar (zone 3) stacks vertical so search + sector
+       picker each get full width.
+     - Stats panel KPIs wrap to a 2x2 grid.
+     - "+ New" button drops margin-left:auto so it sits flush.
+   ---------------------------------------------------------- */
+@media (max-width: 768px) {
+  .yj-hub-zone-1.yj-hub-tabs {
+    flex-wrap:        nowrap;
+    overflow-x:       auto;
+    overflow-y:       hidden;
+    -webkit-overflow-scrolling: touch;
+  }
+  .yj-hub-zone-1.yj-hub-tabs .yj-hub-tab {
+    flex:             0 0 auto;
+    white-space:      nowrap;
+  }
+
+  .yj-hub-zone-2 {
+    flex-direction:   column;
+    align-items:      flex-start;
+    gap:              4px;
+  }
+  .yj-hub-zone-2 .yj-hub-counter {
+    align-self:       flex-start;
+  }
+
+  .yj-hub-zone-3 {
+    flex-direction:   column;
+    align-items:      stretch;
+  }
+  .yj-hub-zone-3 > * {
+    flex:             1 1 auto;
+    width:            100%;
+    max-width:        none;
+  }
+  .yj-hub-zone-3 .yj-hub-new {
+    margin-left:      0;
+  }
+
+  .yj-hub-zone-4,
+  .yj-hub-grid {
+    grid-template-columns: 1fr;
+    gap:              10px;
+  }
+  .yj-hub-card {
+    height:           auto;
+    min-height:       260px;
+  }
+
+  .yj-hub-stats-panel > div {
+    flex-wrap:        wrap;
+  }
+  .yj-hub-stats-panel .yj-hub-kpi {
+    min-width:        calc(50% - 5px);
+    flex:             1 1 calc(50% - 5px);
+  }
+
+  /* Detail surface: breadcrumb + topbar action row stack so the
+     small viewport never hides the back button. */
+  .yj-detail-zone-topbar {
+    flex-direction:   column;
+    align-items:      stretch;
+    gap:              6px;
+  }
+}
+
+
+/* ----------------------------------------------------------
+   CONFIRM MODAL + UNDO TOAST (BUG-44-c23)
+   Shared destructive-action UX. Both surfaces use Yujin tokens
+   (color, radius, spacing) so a tenant theme override propagates
+   without re-styling. Reduced-motion override disables the
+   countdown bar animation.
+   ---------------------------------------------------------- */
+.yj-confirm-modal {
+  position:           fixed;
+  inset:              0;
+  z-index:            10000;
+  display:            flex;
+  align-items:        center;
+  justify-content:    center;
+  font-family:        var(--font-sans, system-ui, sans-serif);
+}
+.yj-confirm-modal__overlay {
+  position:           absolute;
+  inset:              0;
+  background:         rgba(0,0,0,0.45);
+}
+.yj-confirm-modal__card {
+  position:           relative;
+  background:         var(--color-bg-surface, #FAF8F5);
+  color:              var(--color-text-primary, #1A1815);
+  border:             1px solid var(--color-border-default, rgba(0,0,0,0.08));
+  border-radius:      10px;
+  width:              min(440px, calc(100vw - 32px));
+  box-shadow:         0 10px 30px rgba(0,0,0,0.18);
+  z-index:            1;
+  overflow:           hidden;
+}
+.yj-confirm-modal__title {
+  padding:            16px 20px 8px;
+  font-size:          15px;
+  font-weight:        600;
+}
+.yj-confirm-modal__body {
+  padding:            0 20px 16px;
+  font-size:          13px;
+  color:              var(--color-text-secondary, #6E6A63);
+  line-height:        1.45;
+}
+.yj-confirm-modal__footer {
+  display:            flex;
+  justify-content:    flex-end;
+  gap:                8px;
+  padding:            10px 16px;
+  border-top:         1px solid var(--color-border-subtle, rgba(0,0,0,0.07));
+  background:         var(--color-bg-subtle, rgba(0,0,0,0.03));
+}
+.yj-confirm-modal__btn {
+  font-size:          12px;
+  padding:            6px 14px;
+  border-radius:      6px;
+  border:             1px solid var(--color-border-default, rgba(0,0,0,0.10));
+  cursor:             pointer;
+  background:         transparent;
+  color:              var(--color-text-primary, #1A1815);
+  font-family:        inherit;
+}
+.yj-confirm-modal__btn--ghost:hover {
+  background:         var(--color-bg-subtle, rgba(0,0,0,0.05));
+}
+.yj-confirm-modal__btn--primary {
+  background:         var(--color-indigo-600, #2D3A8C);
+  border-color:       var(--color-indigo-600, #2D3A8C);
+  color:              #fff;
+}
+.yj-confirm-modal__btn--danger {
+  background:         var(--color-fg-error, #943020);
+  border-color:       var(--color-fg-error, #943020);
+  color:              #fff;
+}
+.yj-confirm-modal__btn:focus-visible {
+  outline:            2px solid var(--color-indigo-400, #5A66E8);
+  outline-offset:     2px;
+}
+
+.yj-undo-toast {
+  position:           fixed;
+  bottom:             24px;
+  left:               50%;
+  transform:          translateX(-50%);
+  z-index:            10001;
+  display:            flex;
+  align-items:        center;
+  gap:                12px;
+  padding:            10px 16px;
+  background:         var(--color-bg-inverse, #1A1815);
+  color:              var(--color-text-inverse, #FAF8F5);
+  border-radius:      8px;
+  box-shadow:         0 6px 24px rgba(0,0,0,0.25);
+  font-family:        var(--font-sans, system-ui, sans-serif);
+  font-size:          13px;
+  overflow:           hidden;
+}
+.yj-undo-toast__msg {
+  flex:               1;
+}
+.yj-undo-toast__btn {
+  background:         transparent;
+  border:             1px solid var(--color-text-inverse, #FAF8F5);
+  color:              inherit;
+  font-size:          11px;
+  padding:            4px 10px;
+  border-radius:      4px;
+  cursor:             pointer;
+  font-weight:        600;
+  letter-spacing:     0.04em;
+  text-transform:     uppercase;
+  font-family:        inherit;
+}
+.yj-undo-toast__btn:hover {
+  background:         rgba(255,255,255,0.10);
+}
+.yj-undo-toast__bar {
+  position:           absolute;
+  bottom:             0;
+  left:               0;
+  height:             3px;
+  background:         var(--color-indigo-400, #5A66E8);
+  width:              100%;
+  transform-origin:   left center;
+  animation:          yj-undo-bar 5000ms linear forwards;
+}
+@keyframes yj-undo-bar {
+  from { transform: scaleX(1); }
+  to   { transform: scaleX(0); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .yj-undo-toast__bar {
+    animation:        none;
+    opacity:          0.4;
+  }
+}
+
+/* =================================================================
+   BUG-44-c29 -- hub item compare side-by-side modal.
+   ----------------------------------------------------------------
+   Full-viewport overlay + centered dialog. Table renders one column
+   per selected item (max 4) and one row per descriptor.compare_fields
+   entry. Diff cells are tinted amber so the user spots divergent
+   values at a glance. On screens <=768px the table flips to a
+   stacked layout: each item header becomes a section and the rows
+   render as label/value pairs.
+   ================================================================= */
+.yj-compare-modal {
+  position:          fixed;
+  inset:             0;
+  z-index:           1100;
+  display:           flex;
+  align-items:       center;
+  justify-content:   center;
+}
+.yj-compare-overlay {
+  position:          absolute;
+  inset:             0;
+  background:        rgba(15, 18, 36, 0.55);
+}
+.yj-compare-dialog {
+  position:          relative;
+  background:        var(--color-bg-surface, #fff);
+  border:            1px solid var(--color-border-subtle, #E2E5EA);
+  border-radius:     8px;
+  box-shadow:        0 18px 48px rgba(0,0,0,0.18);
+  width:             min(94vw, 1100px);
+  max-height:        86vh;
+  display:           flex;
+  flex-direction:    column;
+  overflow:          hidden;
+}
+.yj-compare-head {
+  display:           flex;
+  align-items:       center;
+  justify-content:   space-between;
+  padding:           12px 18px;
+  border-bottom:     1px solid var(--color-border-subtle, #E2E5EA);
+}
+.yj-compare-title {
+  margin:            0;
+  font-size:         16px;
+  font-weight:       600;
+  color:             var(--color-text-primary, #15192C);
+}
+.yj-compare-close {
+  font-family:       inherit;
+  font-size:         14px;
+  line-height:       1;
+  padding:           4px 10px;
+}
+.yj-compare-body {
+  padding:           16px 18px;
+  overflow:          auto;
+}
+.yj-compare-table {
+  width:             100%;
+  border-collapse:   collapse;
+  font-size:         12px;
+  color:             var(--color-text-primary, #15192C);
+}
+.yj-compare-table th,
+.yj-compare-table td {
+  padding:           8px 10px;
+  text-align:        left;
+  vertical-align:    top;
+  border-bottom:     1px solid var(--color-border-subtle, #E8ECEF);
+}
+.yj-cmp-corner {
+  width:             160px;
+  background:        var(--color-bg-subtle, #F5F6F8);
+}
+.yj-cmp-col-head {
+  background:        var(--color-bg-subtle, #F5F6F8);
+  font-weight:       600;
+  color:             var(--color-text-primary, #15192C);
+  text-align:        left;
+}
+.yj-cmp-row-head {
+  font-weight:       500;
+  color:             var(--color-text-secondary, #555);
+  background:        var(--color-bg-surface, #fff);
+}
+.yj-cmp-cell {
+  font-variant-numeric: tabular-nums;
+}
+.yj-cmp-row-diff,
+.yj-cmp-cell-diff {
+  background:        var(--color-amber-50, #FEF6E2);
+}
+.yj-cmp-cell-diff {
+  font-weight:       500;
+}
+.yj-cmp-null {
+  color:             var(--color-text-tertiary, #9AA0AC);
+  font-style:        italic;
+}
+@media (max-width: 768px) {
+  .yj-compare-dialog {
+    width:           96vw;
+    max-height:      94vh;
+  }
+  /* Stack the table: each column becomes its own labelled section.
+     Rows turn into label + value pairs so a phone screen can scroll
+     vertically without horizontal overflow. */
+  .yj-compare-table,
+  .yj-compare-table thead,
+  .yj-compare-table tbody,
+  .yj-compare-table tr,
+  .yj-compare-table th,
+  .yj-compare-table td {
+    display:         block;
+  }
+  .yj-compare-table thead {
+    display:         none;
+  }
+  .yj-compare-table tr {
+    border-top:      2px solid var(--color-border-subtle, #E2E5EA);
+    padding:         8px 0;
+  }
+  .yj-cmp-row-head {
+    font-weight:     600;
+    background:      transparent;
+    padding-left:    0;
+  }
+  .yj-cmp-cell {
+    padding-left:    18px;
+    border-bottom:   none;
+  }
+}
+
+/* =================================================================
+   BUG-44-c30 -- hub help button (`?` icon next to the hub title).
+   ----------------------------------------------------------------
+   Compact circular icon styled like the existing yj-hub-gear so the
+   header row stays visually balanced. Hover applies a soft indigo
+   tint; focus-visible exposes the system focus ring per a11y.
+   ================================================================= */
+.yj-hub-help {
+  display:           inline-flex;
+  align-items:       center;
+  justify-content:   center;
+  width:             20px;
+  height:            20px;
+  margin-left:       8px;
+  padding:           0;
+  border:            1px solid var(--color-border-subtle, #D8DCE2);
+  background:        var(--color-bg-surface, #fff);
+  color:             var(--color-text-secondary, #555);
+  border-radius:     50%;
+  font-family:       inherit;
+  font-size:         12px;
+  font-weight:       600;
+  line-height:       1;
+  cursor:            pointer;
+  vertical-align:    middle;
+  transition:        background 120ms ease, color 120ms ease, border-color 120ms ease;
+}
+.yj-hub-help:hover {
+  background:        var(--color-indigo-50, #ECEFFE);
+  color:             var(--color-indigo-600, #4350D8);
+  border-color:      var(--color-indigo-200, #A0A8F5);
+}
+.yj-hub-help:focus-visible {
+  outline:           2px solid var(--color-indigo-500, #5A66E8);
+  outline-offset:    2px;
+}
+
+/* =================================================================
+   BUG-44-c37 -- hub item drag reorder visuals.
+   ----------------------------------------------------------------
+   Card under HTML5 drag gets a half-opacity + rotated tilt so the
+   user sees the floating ghost. Cursor=grab on hover communicates
+   the affordance; cursor=grabbing during drag.
+   ================================================================= */
+.cc-card[draggable="true"] {
+  cursor:           grab;
+}
+.cc-card[draggable="true"]:active {
+  cursor:           grabbing;
+}
+.cc-card.yj-dnd-dragging {
+  opacity:          0.5;
+  transform:        rotate(-1deg);
+  cursor:           grabbing;
+}
+@media (prefers-reduced-motion: reduce) {
+  .cc-card.yj-dnd-dragging {
+    transform:      none;
+  }
+}
+
+/* =================================================================
+   BUG-44-c38 -- hub error boundary state.
+   ----------------------------------------------------------------
+   Mirrors the empty-state visual but tinted red so the user
+   recognises a fault vs an empty data set. The retrying variant
+   keeps the icon + message + countdown; the final variant adds a
+   detail row with the original error + an optional request_id +
+   the Reintentar CTA. Both variants stay accessible via role=alert
+   / status + aria-live announcements.
+   ================================================================= */
+.yj-hub-error-state {
+  display:           flex;
+  flex-direction:    column;
+  align-items:       center;
+  justify-content:   center;
+  gap:               8px;
+  color:             var(--color-text-primary, #15192C);
+  background:        var(--color-bg-surface, #fff);
+  border:            1px solid var(--color-rose-200, #F4B7C0);
+  border-radius:     8px;
+  margin:            12px 0;
+}
+.yj-hub-error-icon {
+  font-size:         28px;
+  color:             var(--color-rose-500, #D94060);
+  line-height:       1;
+}
+.yj-hub-error-msg {
+  font-size:         14px;
+  font-weight:       500;
+  color:             var(--color-rose-700, #9A2640);
+}
+.yj-hub-error-detail {
+  font-size:         12px;
+  color:             var(--color-text-secondary, #666);
+  font-family:       monospace, monospace;
+  max-width:         480px;
+  word-break:        break-word;
+}
+.yj-hub-error-reqid {
+  font-size:         11px;
+  color:             var(--color-text-tertiary, #999);
+  font-family:       monospace, monospace;
+}
+.yj-hub-error-retry {
+  margin-top:        14px;
+}
+.yj-hub-error-retrying {
+  border-color:      var(--color-amber-200, #F7E2A0);
+  background:        var(--color-amber-50, #FEF6E2);
+}
+.yj-hub-error-retrying .yj-hub-error-icon {
+  color:             var(--color-amber-600, #B8862C);
+}
+.yj-hub-error-retrying .yj-hub-error-msg {
+  color:             var(--color-amber-700, #8A6320);
+}
+
+/* =================================================================
+   BUG-44-c42 -- hub print preview + browser print.
+   ----------------------------------------------------------------
+   The print mode appends a .yj-hub-print-host to <body> + flips
+   document.body.yj-printing on. The @media print rules hide every
+   chrome element (sidebar, topbar, toolbars, action buttons, gear
+   icons) and reveal only the print host. The .yj-print-only class
+   matches the host's outer wrapper so screen rendering hides it
+   while print rendering surfaces it.
+   ================================================================= */
+.yj-print-only {
+  display:           none;
+}
+.yj-hub-print-host {
+  background:        #fff;
+  color:             #000;
+  font-family:       Inter, -apple-system, BlinkMacSystemFont, sans-serif;
+  font-size:         11px;
+}
+.yj-hub-print-header h1 {
+  margin:            0 0 8px 0;
+  font-size:         18px;
+}
+.yj-hub-print-meta {
+  border-collapse:   collapse;
+  margin-bottom:     14px;
+  font-size:         10px;
+}
+.yj-hub-print-meta th {
+  text-align:        right;
+  padding:           1px 8px 1px 0;
+  color:             #555;
+  font-weight:       500;
+}
+.yj-hub-print-meta td {
+  padding:           1px 0;
+}
+.yj-hub-print-grid {
+  width:             100%;
+  border-collapse:   collapse;
+  font-size:         10px;
+}
+.yj-hub-print-grid th,
+.yj-hub-print-grid td {
+  border:            1px solid #888;
+  padding:           4px 6px;
+  text-align:        left;
+  vertical-align:    top;
+}
+.yj-hub-print-grid thead th {
+  background:        #eee;
+  font-weight:       600;
+}
+.yj-hub-print-grid tbody tr:nth-child(even) {
+  background:        #f7f7f7;
+}
+@media print {
+  /* Show only the print host. Everything else collapses. */
+  body.yj-printing .yj-print-only {
+    display:         block;
+  }
+  body.yj-printing > *:not(.yj-print-only) {
+    display:         none !important;
+  }
+  /* Defensive hides for chrome that may live deeper in the tree. */
+  .yj-sidebar,
+  .yj-topbar,
+  .hs-toolbar,
+  .yj-hub-counter,
+  .yj-hub-gear,
+  .yj-hub-help,
+  .yj-hub-share,
+  .yj-hub-export,
+  .yj-hub-print,
+  .yj-hub-bulkbar,
+  .yj-action-button,
+  .yj-gear-icon,
+  .yj-hub-tabs,
+  #hs-loadmore-host,
+  .yj-hub-shell .yj-hub-zone-3,
+  .yj-hub-shell .yj-hub-zone-5 {
+    display:         none !important;
+  }
+  /* Page break + print-area sizing. */
+  .yj-hub-print-host {
+    page-break-inside: avoid;
+  }
+  .yj-hub-print-grid tr {
+    page-break-inside: avoid;
+  }
+}
+
+/* =================================================================
+   BUG-44-c43 -- hub URL embeddable iframe.
+   ----------------------------------------------------------------
+   When yujin.php sees ?embed=true it stamps body.yj-embed. The CSS
+   layer collapses every chrome element so the hub stands alone in
+   the iframe viewport (no sidebar, no topbar, no admin gear, no
+   write actions). The token-scope guard inside the JS layer
+   (_yujinHubEmbedHasScope) further constrains UX surfaces; this
+   block is the visual baseline.
+   ================================================================= */
+body.yj-embed {
+  background: var(--color-bg-app, #fff);
+  margin:     0;
+  padding:    0;
+}
+body.yj-embed .yj-sidebar,
+body.yj-embed #app-sidebar,
+body.yj-embed .yj-topbar,
+body.yj-embed #app-topbar,
+body.yj-embed .yj-skip-to-content,
+body.yj-embed .yj-hub-gear,
+body.yj-embed .yj-hub-new,
+body.yj-embed .yj-hub-bulkbar,
+body.yj-embed .yj-hub-select-toggle,
+body.yj-embed .yj-hub-bulk-btn,
+body.yj-embed .yj-hub-bulk-cancel,
+body.yj-embed .yj-hub-save-view,
+body.yj-embed .yj-hub-import-btn,
+body.yj-embed .yj-hub-catalog-btn,
+body.yj-embed .yj-hub-card-action[data-write="1"] {
+  display: none !important;
+}
+body.yj-embed #content,
+body.yj-embed main {
+  margin:  0;
+  padding: 12px;
+}
+body.yj-embed .yj-hub-shell {
+  margin:  0;
+}
+/* Slightly smaller toolbar font in embed mode -- partner sites
+   often render the iframe at narrow widths. */
+body.yj-embed .hs-toolbar {
+  font-size: 11px;
+  gap:       6px;
+}
+
+/* =================================================================
+   BUG-44-c47 -- inline quick-edit on hub cards.
+   ----------------------------------------------------------------
+   The .yj-hub-card__quick-edit row sits at the bottom of the card
+   between the actions and the bottom edge. Cells flip between a
+   read-only display + an editable input on click; .yj-quick-edit-
+   active highlights the active cell; .yj-quick-edit-error pulses
+   rose to surface a server-side rollback.
+   ================================================================= */
+.yj-hub-card__quick-edit {
+  display:           flex;
+  flex-wrap:         wrap;
+  gap:               6px;
+  margin-top:        8px;
+  padding-top:       8px;
+  border-top:        1px solid var(--color-border-subtle, #E2E5EA);
+  font-size:         11px;
+}
+.yj-quick-edit-cell {
+  display:           inline-flex;
+  align-items:       center;
+  gap:               4px;
+  padding:           2px 6px;
+  background:        var(--color-bg-subtle, #F5F6F8);
+  border:            1px solid transparent;
+  border-radius:     4px;
+  cursor:            pointer;
+  outline:           none;
+  transition:        border-color 120ms ease, background 120ms ease;
+}
+.yj-quick-edit-cell:hover,
+.yj-quick-edit-cell:focus-visible {
+  border-color:      var(--color-indigo-200, #A0A8F5);
+  background:        var(--color-indigo-50, #ECEFFE);
+}
+.yj-quick-edit-cell.yj-quick-edit-active {
+  background:        var(--color-bg-surface, #fff);
+  border-color:      var(--color-indigo-500, #5A66E8);
+  cursor:            text;
+}
+.yj-quick-edit-cell.yj-quick-edit-error {
+  background:        var(--color-rose-50, #FCE9EE);
+  border-color:      var(--color-rose-500, #D94060);
+  animation:         yj-quick-edit-shake 320ms ease-in-out;
+}
+.yj-quick-edit-label {
+  color:             var(--color-text-tertiary, #999);
+  font-weight:       500;
+}
+.yj-quick-edit-value {
+  color:             var(--color-text-primary, #15192C);
+  max-width:         120px;
+  overflow:          hidden;
+  text-overflow:     ellipsis;
+  white-space:       nowrap;
+}
+.yj-quick-edit-input {
+  font-family:       inherit;
+  font-size:         11px;
+  padding:           1px 4px;
+  border:            none;
+  outline:           none;
+  background:        transparent;
+  min-width:         80px;
+  max-width:         180px;
+}
+@keyframes yj-quick-edit-shake {
+  0%, 100% { transform: translateX(0); }
+  20%      { transform: translateX(-3px); }
+  60%      { transform: translateX(3px); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .yj-quick-edit-cell.yj-quick-edit-error {
+    animation:       none;
+  }
+}
+
+/* =================================================================
+   BUG-44-c48 -- per-hub command palette modal.
+   ----------------------------------------------------------------
+   Centered dialog 480px wide; input on top + filtered list below.
+   Active item gets indigo bg; kbd shortcuts render to the right of
+   each label in monospace.
+   ================================================================= */
+.yj-cmdpal-modal {
+  position:          fixed;
+  inset:             0;
+  z-index:           1200;
+  display:           flex;
+  align-items:       flex-start;
+  justify-content:   center;
+  padding-top:       12vh;
+}
+.yj-cmdpal-overlay {
+  position:          absolute;
+  inset:             0;
+  background:        rgba(15, 18, 36, 0.45);
+}
+.yj-cmdpal-dialog {
+  position:          relative;
+  width:             min(94vw, 480px);
+  background:        var(--color-bg-surface, #fff);
+  border:            1px solid var(--color-border-subtle, #E2E5EA);
+  border-radius:     8px;
+  box-shadow:        0 18px 48px rgba(0,0,0,0.18);
+  overflow:          hidden;
+}
+.yj-cmdpal-input {
+  width:             100%;
+  border:            none;
+  border-bottom:     1px solid var(--color-border-subtle, #E2E5EA);
+  padding:           12px 14px;
+  font-size:         14px;
+  font-family:       inherit;
+  outline:           none;
+  background:        transparent;
+  color:             var(--color-text-primary, #15192C);
+}
+.yj-cmdpal-list {
+  list-style:        none;
+  margin:            0;
+  padding:           4px 0;
+  max-height:        50vh;
+  overflow-y:        auto;
+  font-size:         13px;
+}
+.yj-cmdpal-item {
+  display:           flex;
+  align-items:       center;
+  justify-content:   space-between;
+  padding:           7px 14px;
+  cursor:            pointer;
+  color:             var(--color-text-primary, #15192C);
+}
+.yj-cmdpal-item:hover {
+  background:        var(--color-bg-subtle, #F5F6F8);
+}
+.yj-cmdpal-active,
+.yj-cmdpal-active:hover {
+  background:        var(--color-indigo-50, #ECEFFE);
+  color:             var(--color-indigo-700, #3540C0);
+}
+.yj-cmdpal-kbd {
+  font-family:       monospace, monospace;
+  font-size:         10px;
+  padding:           1px 6px;
+  border:            1px solid var(--color-border-subtle, #D8DCE2);
+  border-radius:     3px;
+  background:        var(--color-bg-subtle, #F5F6F8);
+  color:             var(--color-text-secondary, #666);
+}
+
+/* =================================================================
+   BUG-44-c56 -- hub virtual columns row.
+   ================================================================= */
+.yj-hub-card__vcol-row {
+  display:           flex;
+  flex-wrap:         wrap;
+  gap:               6px;
+  margin:            6px 0;
+  font-size:         11px;
+}
+.yj-hub-card__vcol {
+  display:           inline-flex;
+  align-items:       center;
+  gap:               4px;
+  padding:           2px 6px;
+  background:        var(--color-violet-50, #F3EEFC);
+  border:            1px solid var(--color-violet-200, #D4C2F0);
+  border-radius:     3px;
+  color:             var(--color-violet-700, #5A2E9E);
+}
+.yj-hub-card__vcol-label {
+  font-weight:       500;
+  color:             var(--color-violet-700, #5A2E9E);
+}
+.yj-hub-card__vcol-value {
+  font-variant-numeric: tabular-nums;
+  font-weight:       600;
+}
+.yj-vcol-null {
+  color:             var(--color-text-tertiary, #9AA0AC);
+  font-style:        italic;
+}
+
+/* =================================================================
+   BUG-44-c58 -- explicit light/dark theme tokens.
+   ----------------------------------------------------------------
+   Three modes:
+     - body.yj-theme-light   force light regardless of system pref
+     - body.yj-theme-dark    force dark regardless of system pref
+     - body.yj-theme-auto    follow @media prefers-color-scheme
+   The class is set by JS reading crm_users.preferred_theme. The
+   primitives (--color-indigo-*, etc) stay constant; only the
+   semantic tokens swap.
+   ================================================================= */
+
+body.yj-theme-dark,
+body.yj-theme-auto[data-system-prefers="dark"] {
+  --color-bg-page:        #0F0E0C;
+  --color-bg-app:         #15140F;
+  --color-bg-surface:     #1A1916;
+  --color-bg-subtle:      #232119;
+  --color-bg-muted:       #2C2A26;
+  --color-border-subtle:  rgba(255,255,255,0.07);
+  --color-border-default: rgba(255,255,255,0.14);
+  --color-border-strong:  rgba(255,255,255,0.22);
+  --color-text-primary:   #E8E6E1;
+  --color-text-secondary: #A8A49A;
+  --color-text-tertiary:  #6E6A63;
+  /* Card + chip backgrounds tinted toward warmer dark to soften
+     the harsh pure-grey of CRMs that flip to default Bootstrap dark. */
+  --color-indigo-50:      #1F2249;
+  --color-indigo-200:     #3A4290;
+  --color-amber-50:       #2A2412;
+  --color-amber-200:      #4A3F1A;
+  --color-rose-50:        #2A1419;
+  --color-rose-200:       #4A1F2A;
+  --color-violet-50:      #251A35;
+  --color-violet-200:     #3A285A;
+}
+body.yj-theme-light,
+body.yj-theme-auto[data-system-prefers="light"] {
+  /* Light is the implicit default; we explicitly pin the canonical
+     tokens here so an admin who flips a tenant from auto -> light
+     does not depend on the @media pref staying defaulted. */
+  --color-bg-page:        #FAFAF7;
+  --color-bg-app:         #FFFFFF;
+  --color-bg-surface:     #FFFFFF;
+  --color-bg-subtle:      #F5F6F8;
+  --color-bg-muted:       #ECEDEF;
+  --color-text-primary:   #15192C;
+  --color-text-secondary: #555;
+  --color-text-tertiary:  #888;
+}
+
+/* Topbar toggle button. Pinned to the topbar via JS; the icon
+   swaps between sun (light mode active) and moon (dark mode active)
+   so the affordance reads at a glance. */
+.yj-theme-toggle {
+  display:           inline-flex;
+  align-items:       center;
+  justify-content:   center;
+  width:             24px;
+  height:            24px;
+  padding:           0;
+  border:            1px solid var(--color-border-subtle, #E2E5EA);
+  background:        var(--color-bg-surface, #fff);
+  color:             var(--color-text-secondary, #555);
+  border-radius:     50%;
+  cursor:            pointer;
+  font-size:         13px;
+  line-height:       1;
+  transition:        background 120ms ease, color 120ms ease;
+}
+.yj-theme-toggle:hover {
+  background:        var(--color-indigo-50, #ECEFFE);
+  color:             var(--color-indigo-600, #4350D8);
+}
+.yj-theme-toggle:focus-visible {
+  outline:           2px solid var(--color-indigo-500, #5A66E8);
+  outline-offset:    2px;
+}
+
+
+/* ==========================================================
+   UR-2 (Malbec #830) -- Unified Renderers card / hub-shell
+   classes (sourced from crm_desa/demos/unified_renderers/
+   assets/sumie-tokens.css). Coexist with .yj-hub-* classes
+   from BUG-44 c1..c70 -- NEW UR descriptors mount with
+   .yj-card; legacy hubs keep .yj-hub-card (now 168/200).
+   Spec autoritativa: docs/UNIFIED_RENDERERS_LINEAMIENTO.md
+   ========================================================== */
+
+/* ---- ZONA 1: tabs (auto-generadas por hub.tabs_kind) ---- */
+.yj-hub-zone-1 {
+  margin-bottom:      16px;
+  border-bottom:      1px solid var(--color-border-subtle, rgba(0,0,0,0.07));
+}
+.yj-tabs {
+  display:            flex;
+  gap:                8px;
+}
+.yj-tab {
+  background:         transparent;
+  border:             none;
+  border-bottom:      2px solid transparent;
+  padding:            12px 16px;
+  font-size:          14px;
+  font-weight:        600;
+  color:              var(--color-text-secondary, #615E58);
+  cursor:             pointer;
+  font-family:        inherit;
+  transition:         color 0.15s ease, border-color 0.15s ease;
+}
+.yj-tab:hover            { color: var(--color-text-primary, #1A1815); }
+.yj-tab[aria-selected="true"] {
+  color:              var(--color-indigo-600, #2D3A8C);
+  border-bottom-color: var(--color-indigo-600, #2D3A8C);
+}
+
+/* ---- ZONA 4: paneles activos / runs / catalog ---- */
+.yj-panel[hidden]        { display: none; }
+
+/* ---- Card grid (UR canonical) ---- */
+.yj-card-grid {
+  display:            grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap:                12px;
+}
+
+.yj-card {
+  position:           relative;
+  display:            flex;
+  flex-direction:     column;
+  align-items:        flex-start;
+  text-align:         left;
+  background:         var(--color-teal-100, #D5EAE3);
+  border:             1px solid var(--color-teal-200, #B5E7E0);
+  border-radius:      10px;
+  padding:            12px;
+  cursor:             pointer;
+  font-family:        inherit;
+  color:              inherit;
+  width:              100%;
+  height:             168px;
+  box-sizing:         border-box;
+  overflow:           hidden;
+  transition:         transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
+}
+.yj-card:hover {
+  transform:          translateY(-2px);
+  box-shadow:         0 4px 12px rgba(45, 58, 140, 0.10);
+}
+.yj-card:focus-visible {
+  outline:            2px solid var(--color-indigo-500, #5A66E8);
+  outline-offset:     2px;
+}
+.yj-panel[data-panel="catalog"] .yj-card[data-active="false"] {
+  opacity:            0.55;
+  background:         var(--color-teal-50, #ECF5F2);
+}
+
+/* Kanji a TRASLUZ esquina superior derecha (watermark) */
+.yj-card-kanji-wm {
+  position:           absolute;
+  top:                -2px;
+  right:              4px;
+  font-family:        var(--font-display, "Noto Serif JP", Georgia, serif);
+  font-size:          52px;
+  font-weight:        300;
+  line-height:        1;
+  color:              var(--color-indigo-600, #2D3A8C);
+  opacity:            0.12;
+  pointer-events:     none;
+  user-select:        none;
+}
+
+/* Badge sumi-e top-left con icono SVG */
+.yj-card-badge {
+  width:              44px;
+  height:             44px;
+  background:         var(--color-teal-50, #ECF5F2);
+  border-radius:      8px;
+  margin-bottom:      8px;
+  display:            flex;
+  align-items:        center;
+  justify-content:    center;
+  position:           relative;
+  background-image:
+    radial-gradient(circle at 20% 30%, rgba(45, 58, 140, 0.08) 0%, transparent 40%),
+    radial-gradient(circle at 70% 60%, rgba(45, 58, 140, 0.06) 0%, transparent 50%);
+  color:              var(--color-indigo-600, #2D3A8C);
+  flex-shrink:        0;
+}
+.yj-sumie {
+  width:              28px;
+  height:             28px;
+  fill:               none;
+  stroke:             currentColor;
+  stroke-width:       1.5;
+  stroke-linecap:     round;
+  stroke-linejoin:    round;
+}
+.yj-sumie .ink-fill   { fill: currentColor; stroke: none; }
+
+.yj-card-body {
+  flex:               1;
+  position:           relative;
+  z-index:            1;
+  min-height:         0;
+  width:              100%;
+  overflow:           hidden;
+}
+.yj-card-title {
+  font-size:          13px;
+  font-weight:        700;
+  margin:             0 0 4px 0;
+  color:              var(--color-text-primary, #1A1815);
+  line-height:        1.3;
+  display:            -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow:           hidden;
+}
+.yj-card-desc {
+  font-size:          11px;
+  color:              var(--color-text-secondary, #615E58);
+  margin:             0;
+  line-height:        1.4;
+  display:            -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow:           hidden;
+}
+
+/* Footer card con toggle Activar/Desactivar (solo tab Catalogo) */
+.yj-card-footer {
+  margin-top:         8px;
+  width:              100%;
+  display:            none;
+  flex-shrink:        0;
+}
+.yj-panel[data-panel="catalog"] .yj-card-footer { display: flex; }
+.yj-panel[data-panel="catalog"] .yj-card        { height: 200px; }
+.yj-card-toggle {
+  width:              100%;
+  font-size:          11px;
+  padding:            6px 8px;
+}
+.yj-card[data-active="true"]  .yj-card-toggle {
+  border-color:       var(--color-rose-500, #B0455F);
+  color:              var(--color-rose-500, #B0455F);
+}
+.yj-card[data-active="false"] .yj-card-toggle {
+  background:         var(--color-indigo-600, #2D3A8C);
+  border-color:       var(--color-indigo-600, #2D3A8C);
+  color:              white;
+}
+
+/* ---- Runs table (tab Ejecuciones) ---- */
+.yj-runs {
+  width:              100%;
+  border-collapse:    collapse;
+  background:         var(--color-bg-surface, #FFFFFF);
+  border:             1px solid var(--color-border-subtle, rgba(0,0,0,0.07));
+  border-radius:      8px;
+  overflow:           hidden;
+  font-size:          13px;
+}
+.yj-runs thead th {
+  background:         var(--color-teal-50, #ECF5F2);
+  text-align:         left;
+  padding:            12px 16px;
+  font-weight:        600;
+  font-size:          12px;
+  color:              var(--color-text-secondary, #615E58);
+  text-transform:     uppercase;
+  letter-spacing:     0.04em;
+}
+.yj-runs tbody tr {
+  border-top:         1px solid var(--color-border-subtle, rgba(0,0,0,0.07));
+  cursor:             pointer;
+  transition:         background 0.1s ease;
+}
+.yj-runs tbody tr:hover { background: var(--color-teal-50, #ECF5F2); }
+.yj-runs tbody td       { padding: 12px 16px; vertical-align: middle; }
+
+.yj-status-badge {
+  display:            inline-block;
+  padding:            2px 8px;
+  border-radius:      4px;
+  font-size:          11px;
+  font-weight:        600;
+  text-transform:     uppercase;
+  letter-spacing:     0.04em;
+}
+.yj-status-badge.ok   { background: var(--color-teal-100, #D5EAE3); color: #1B6B5C; }
+.yj-status-badge.fail { background: #FCE3E3; color: var(--color-rose-500, #B0455F); }
+
+/* Run detail (drill-down inline) */
+.yj-run-detail {
+  margin-top:         16px;
+  background:         var(--color-bg-surface, #FFFFFF);
+  border:             1px solid var(--color-border-subtle, rgba(0,0,0,0.07));
+  border-radius:      8px;
+  padding:            16px 24px;
+}
+.yj-run-detail header {
+  display:            flex;
+  justify-content:    space-between;
+  align-items:        center;
+  margin-bottom:      12px;
+}
+.yj-run-detail h3 {
+  margin:             0;
+  font-size:          16px;
+  font-family:        var(--font-display, "Noto Serif JP", Georgia, serif);
+}
+.yj-run-detail pre {
+  background:         #1A1815;
+  color:              #E0F0EC;
+  padding:            16px;
+  border-radius:      6px;
+  font-family:        "SFMono-Regular", Menlo, Consolas, monospace;
+  font-size:          12px;
+  line-height:        1.5;
+  overflow-x:         auto;
+  margin:             0;
+}
+
+/* Empty state */
+.yj-empty {
+  text-align:         center;
+  padding:            32px 24px;
+  color:              var(--color-text-secondary, #615E58);
+  font-size:          14px;
+  background:         var(--color-bg-surface, #FFFFFF);
+  border:             1px dashed var(--color-border-subtle, rgba(0,0,0,0.07));
+  border-radius:      8px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .yj-card,
+  .yj-card:hover {
+    transition:       none;
+    transform:        none;
+  }
+}