*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    /* ─── Wise Design tokens (https://wise.design/foundations/colour) ───
       Hexes textualmente de la documentación oficial. Solo se DERIVAN
       (con notación clara) los tints de sentiment (Wise no los documenta
       pero los necesito para chips). */

    /* ── CORE BRAND ── */
    --wd-bright-green:  #9FE870;
    --wd-forest-green:  #163300;

    /* ── SECONDARY PALETTE (para variants de card / decoraciones) ── */
    --wd-bright-orange: #FFC091;
    --wd-bright-yellow: #FFEB69;
    --wd-bright-blue:   #A0E1E1;
    --wd-bright-pink:   #FFD7EF;
    --wd-dark-purple:   #260A2F;
    --wd-dark-gold:     #3A341C;
    --wd-dark-charcoal: #21231D;
    --wd-dark-maroon:   #320707;

    /* ── CONTENT ── */
    --wd-content-primary:    #0E0F0C;
    --wd-content-secondary:  #454745;
    --wd-content-tertiary:   #6A6C6A;
    --wd-content-link:       #163300;

    /* ── BACKGROUND ──
       Wise documenta Screen=#FFF y Elevated=#FFF. Las "cards" que parecen
       grises en sus screenshots son contenedores con Background Neutral
       (rgba(22,51,0,0.08) = tinte Forest 8% sobre blanco → da el gris cálido).
       Los inputs blancos sobre esas cards crean el contrast input/card. */
    --wd-bg-screen:    #FFFFFF;
    --wd-bg-elevated:  #FFFFFF;
    --wd-bg-neutral:   rgba(22, 51, 0, 0.08);
    --wd-bg-overlay:   rgba(22, 51, 0, 0.08);

    /* ── BORDER ── */
    --wd-border-neutral: rgba(14, 15, 12, 0.12);
    --wd-border-overlay: rgba(14, 15, 12, 0.12);

    /* ── INTERACTIVE ── */
    --wd-interactive-primary:   #163300;
    --wd-interactive-accent:    #9FE870;
    --wd-interactive-secondary: #868685;
    --wd-interactive-control:   #163300;
    --wd-interactive-contrast:  #9FE870;
    --wd-interactive-hover-overlay: rgba(14, 15, 12, 0.06);

    /* ── SENTIMENT (hexes Wise; bg derivados a 12% opacidad) ── */
    --wd-pos:        #2F5711;                    /* Sentiment Positive */
    --wd-warn:       #EDC843;                    /* Sentiment Warning (Wise: bg only) */
    --wd-neg:        #A8200D;                    /* Sentiment Negative */
    --wd-pos-bg:     rgba(47, 87, 17, 0.12);     /* derivado pos × 12% */
    --wd-warn-bg:    rgba(237, 200, 67, 0.30);   /* derivado warn × 30% */
    --wd-neg-bg:     rgba(168, 32, 13, 0.10);    /* derivado neg × 10% */
    --wd-neutral-bg: rgba(22, 51, 0, 0.08);      /* = bg-neutral */
    --wd-neutral-fg: var(--wd-content-tertiary);

    /* ── BASE ── */
    --wd-base-light:    #FFFFFF;
    --wd-base-dark:     #121511;
    --wd-base-contrast: #FFFFFF;

    /* RADIUS — escala oficial Wise desktop
       (https://wise.design/foundations/radius#desktop-scale).
       Plataforma 100% desktop, no aplicamos mobile scale. */
    --wd-radius-sm:    16px;       /* radius-small */
    --wd-radius-md:    20px;       /* radius-medium */
    --wd-radius-lg:    30px;       /* radius-large */
    --wd-radius-xl:    40px;       /* radius-x-large */
    --wd-radius-2xl:   60px;       /* radius-2x-large */
    --wd-radius-full:  9999px;     /* pill (custom — no oficial) */

    /* PADDING — escala oficial Wise (https://wise.design/foundations/padding).
       Para padding INTERNO de componentes. */
    --wd-padding-xs:   8px;        /* padding-x-small */
    --wd-padding-sm:   16px;       /* padding-small */
    --wd-padding-md:   24px;       /* padding-medium */
    --wd-padding-lg:   32px;       /* padding-large */

    /* PAGE WIDTH — wrappers de tab usan este token. Default: none (full width).
       Para reintroducir un techo (p.ej. 1440px estilo Wise) cambiar este valor
       y todos los wrappers (.kp-page, .dx-page, .page-equipos, .admin-panel,
       .page) lo recogen automáticamente. */
    --wd-page-max-width: none;

    /* SPACING — base 4 */
    --wd-s-1: 4px;
    --wd-s-2: 8px;
    --wd-s-3: 12px;
    --wd-s-4: 16px;
    --wd-s-5: 20px;
    --wd-s-6: 24px;
    --wd-s-7: 28px;
    --wd-s-8: 32px;
    --wd-s-10: 40px;
    --wd-s-12: 48px;
    --wd-s-16: 64px;

    /* TYPOGRAPHY */
    --wd-font-family: 'Inter', system-ui, -apple-system, sans-serif;
    --wd-display-num: 'Inter', system-ui, sans-serif;
    --wd-fw-regular: 400;
    --wd-fw-medium:  500;
    --wd-fw-semi:    600;
    --wd-fw-bold:    700;
    --wd-fw-extra:   800;
    --wd-fs-xs:    11px;   /* labels uppercase, micro-meta */
    --wd-fs-sm:    12px;   /* meta, hints */
    --wd-fs-md:    14px;   /* body default */
    --wd-fs-lg:    16px;   /* body emphasis, card titles */
    --wd-fs-xl:    20px;   /* section heading */
    --wd-fs-2xl:   28px;   /* page heading */
    --wd-fs-3xl:   44px;   /* big number stat */
    --wd-fs-4xl:   56px;   /* hero stat */

    /* MOTION */
    --wd-ease: cubic-bezier(.4, 0, .2, 1);

    /* ─── Legacy Elevate tokens (mantener mientras migramos) ─── */
    --black:      #1a1a1a;
    --white:      #ffffff;
    --green:      #8CFA6E;
    --dark-green: #002700;
    --lg-80:      #D1FAE5;
    --lg-60:      #E0F7EC;
    --lg-40:      #F0FBF4;
    --dg-80:      #2D6A4F;
    --dg-60:      #8A9B8F;
    --dg-40:      #B7C4BA;
    --blue-pale:  #E6F1FB;
    --teal-pale:  #E1F5EE;
    --border:     #E5E7EB;
    --bg-subtle:  #F9FAFB;
    --ink:        #0C140A;
  }

  body {
    font-family: var(--wd-font-family);
    font-feature-settings: 'cv11', 'ss01';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: var(--wd-bg-screen);
    color: var(--wd-content-primary);
    min-height: 100vh;
  }

  /* ════════════════════════════════════════════════════════════════
     WISE DESIGN SYSTEM — component tokens + utility classes
     2026-05-07
     Cualquier pantalla nueva debe componerse con .wd-*. Para pasar de
     "Elevate green" a "Bright Green" basta cambiar 2 tokens en :root
     (--wd-interactive-accent y --wd-interactive-control).
  ════════════════════════════════════════════════════════════════ */

  :root {
    /* Component tokens (derivados de foundations). Cambiar aquí
       reconfigura el componente en TODA la app sin tocar selectores. */
    --btn-radius:        var(--wd-radius-full);  /* Wise: pill buttons */
    --btn-padding-y-md:  12px;
    --btn-padding-x-md:  24px;
    --btn-padding-y-sm:  7px;
    --btn-padding-x-sm:  16px;
    --btn-padding-y-lg:  16px;
    --btn-padding-x-lg:  32px;
    --btn-fs-md:         var(--wd-fs-md);
    --btn-fs-sm:         13px;
    --btn-fw:            var(--wd-fw-semi);
    --btn-transition:    background .15s var(--wd-ease), border-color .15s var(--wd-ease), color .15s var(--wd-ease);

    /* Botón primary — Bright Green + Forest text (Wise 100%) */
    --btn-primary-bg:        var(--wd-interactive-accent);
    --btn-primary-fg:        var(--wd-interactive-control);
    --btn-primary-bg-hover:  #8FD061;            /* Bright -8% */
    --btn-primary-bg-active: #7FB852;            /* Bright -16% */

    /* Botón secondary — Wise style: bg blanco + sombra sin border (modern) */
    --btn-secondary-bg:        var(--wd-bg-elevated);
    --btn-secondary-fg:        var(--wd-content-primary);
    --btn-secondary-border:    transparent;
    --btn-secondary-bg-hover:  var(--wd-bg-elevated);
    --btn-secondary-shadow:       0 1px 3px rgba(14, 15, 12, 0.06), 0 4px 14px -4px rgba(14, 15, 12, 0.10);
    --btn-secondary-shadow-hover: 0 2px 6px rgba(14, 15, 12, 0.10), 0 8px 20px -4px rgba(14, 15, 12, 0.14);

    /* Botón tertiary — link-like, sin border */
    --btn-tertiary-fg:       var(--wd-interactive-primary);
    --btn-tertiary-bg-hover: var(--wd-bg-neutral);

    /* Botón destructive — sentiment negative */
    --btn-destructive-bg:        var(--wd-neg);
    --btn-destructive-fg:        #FFFFFF;
    --btn-destructive-bg-hover:  #8a1a0b;

    /* Card — Wise look: bg Background Neutral (rgba(22,51,0,0.08)) sobre
       page blanco. El contraste viene del bg tintado, no de sombra. */
    --card-bg:        var(--wd-bg-neutral);
    --card-border:    1px solid transparent;
    --card-radius:    var(--wd-radius-md);    /* 20px */
    --card-padding:   var(--wd-padding-md);   /* 24px */
    --card-gap:       var(--wd-padding-sm);   /* 16px */
    --card-shadow:       none;
    --card-shadow-hover: 0 8px 24px -8px rgba(14, 15, 12, 0.10);

    /* Chip — Wise app pattern: chips de filtro/CTA en Bright Green soft (30%),
       seleccionados en Bright Green sólido + Forest text. Sentiment chips
       (.wd-chip--pos/--warn/--neg/--neutral) override estos defaults. */
    --chip-radius:     var(--wd-radius-full);
    --chip-padding-y:  6px;
    --chip-padding-x:  12px;
    --chip-gap:        6px;
    --chip-fs:         13px;
    --chip-fw:         var(--wd-fw-semi);
    --chip-bg:         rgba(159, 232, 112, 0.30);   /* Bright Green soft */
    --chip-fg:         var(--wd-forest-green);
    --chip-bg-hover:   rgba(159, 232, 112, 0.45);
    --chip-bg-selected: var(--wd-bright-green);     /* Bright sólido */
    --chip-fg-selected: var(--wd-forest-green);
    --chip-border:     transparent;

    /* Input + search — Wise usa radius generoso casi pill para inputs grandes.
       Bg = blanco para destacar sobre la card gris beige. */
    --input-radius:    14px;
    --input-padding-y: 12px;
    --input-padding-x: 16px;
    --input-bg:        var(--wd-bg-elevated);    /* blanco — destaca sobre card neutral */
    --input-border:    1px solid var(--wd-border-neutral);
    --input-border-focus: var(--wd-interactive-primary);
    --input-shadow-focus: 0 0 0 3px rgba(22, 51, 0, 0.12);
    --input-fg:        var(--wd-content-primary);
    --input-placeholder: var(--wd-content-tertiary);
    --input-fs:        var(--wd-fs-md);

    /* Switch */
    --switch-w:           36px;
    --switch-h:           20px;
    --switch-pad:         2px;
    --switch-bg-off:      rgba(14, 15, 12, 0.22);   /* derivado de Border Neutral × ~2 */
    --switch-bg-on:       var(--wd-interactive-primary);
    --switch-knob-bg:     #FFFFFF;
    --switch-knob-shadow: 0 1px 2px rgba(0,0,0,0.15);

    /* Segmented control */
    --seg-bg:           var(--wd-bg-neutral);
    --seg-radius:       var(--wd-radius-sm);
    --seg-padding:      4px;
    --seg-item-radius:  12px;
    --seg-item-padding-y: 8px;
    --seg-item-padding-x: 14px;
    --seg-item-fs:      13px;
    --seg-item-fw:      var(--wd-fw-semi);
    --seg-item-fg:      var(--wd-content-secondary);
    --seg-item-fg-active: var(--wd-content-primary);
    --seg-item-bg-active: #FFFFFF;
    --seg-item-shadow-active: 0 1px 2px rgba(14,15,12,0.08);

    /* Status pill (sentiment) */
    --pill-radius:    var(--wd-radius-full);
    --pill-padding-y: 3px;
    --pill-padding-x: 10px;
    --pill-fs:        11px;
    --pill-fw:        var(--wd-fw-semi);

    /* ── Sidebar component tokens ──
       Para cambiar el look del sidebar (color sidebar, item activo,
       widget dark) basta editar estos valores. Cero hardcoded en selectores. */
    --sidebar-width:           240px;
    --sidebar-bg:              var(--wd-bg-neutral);
    --sidebar-padding:         12px;
    --sidebar-gap:             2px;

    --sidebar-item-radius:     14px;
    --sidebar-item-padding-y:  10px;
    --sidebar-item-padding-x:  12px;
    --sidebar-item-fs:         13.5px;
    --sidebar-item-fw:         var(--wd-fw-medium);
    --sidebar-item-fg:         var(--wd-content-secondary);
    --sidebar-item-fg-hover:   var(--wd-content-primary);
    --sidebar-item-bg-hover:   rgba(255, 255, 255, 0.5);
    --sidebar-item-bg-active:  var(--wd-bg-elevated);
    --sidebar-item-fg-active:  var(--wd-forest-green);
    --sidebar-item-fw-active:  var(--wd-fw-semi);
    --sidebar-item-shadow-active: 0 1px 3px rgba(14, 15, 12, 0.06), 0 4px 12px -4px rgba(14, 15, 12, 0.10);

    --sidebar-section-fs:        10.5px;
    --sidebar-section-fg:        var(--wd-content-tertiary);
    --sidebar-section-tracking:  0.12em;
    --sidebar-section-padding-y: 14px;

    /* Sidebar widget dark (week card, info banners, etc.) */
    --sidebar-widget-bg:           var(--wd-forest-green);
    --sidebar-widget-fg:           var(--wd-bright-green);
    --sidebar-widget-fg-secondary: rgba(159, 232, 112, 0.6);
    --sidebar-widget-radius:       var(--wd-radius-md);
    --sidebar-widget-padding:      14px 16px;
    --sidebar-widget-shadow:       0 4px 14px rgba(22, 51, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.08);
  }

  /* ─── ICON ───────────────────────────────────────────────────── */
  .wd-icon {
    display: inline-block;
    width: 16px; height: 16px;
    flex-shrink: 0;
    vertical-align: -0.15em;
    stroke-width: 2;
    color: currentColor;
  }
  .wd-icon-sm { width: 14px; height: 14px; }
  .wd-icon-lg { width: 20px; height: 20px; }
  .wd-icon-xl { width: 28px; height: 28px; }

  /* ─── BUTTON ─────────────────────────────────────────────────── */
  .wd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--wd-s-2);
    border: 1px solid transparent;
    border-radius: var(--btn-radius);
    padding: var(--btn-padding-y-md) var(--btn-padding-x-md);
    font-family: var(--wd-font-family);
    font-size: var(--btn-fs-md);
    font-weight: var(--btn-fw);
    line-height: 1.2;
    letter-spacing: -0.005em;
    cursor: pointer;
    transition: var(--btn-transition);
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
  }
  .wd-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(22, 51, 0, 0.18);
  }
  .wd-btn:disabled,
  .wd-btn[disabled] { opacity: 0.45; cursor: not-allowed; }

  /* Sizes */
  .wd-btn--sm { padding: var(--btn-padding-y-sm) var(--btn-padding-x-sm); font-size: var(--btn-fs-sm); }
  .wd-btn--lg { padding: var(--btn-padding-y-lg) var(--btn-padding-x-lg); font-size: var(--wd-fs-lg); }

  /* Variants */
  .wd-btn--primary {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-fg);
  }
  .wd-btn--primary:hover:not(:disabled) { background: var(--btn-primary-bg-hover); }
  .wd-btn--primary:active:not(:disabled) { background: var(--btn-primary-bg-active); }

  .wd-btn--secondary {
    background: var(--btn-secondary-bg);
    color: var(--btn-secondary-fg);
    border-color: var(--btn-secondary-border);
    box-shadow: var(--btn-secondary-shadow);
  }
  .wd-btn--secondary:hover:not(:disabled) {
    box-shadow: var(--btn-secondary-shadow-hover);
  }

  .wd-btn--tertiary {
    background: transparent;
    color: var(--btn-tertiary-fg);
    border-color: transparent;
    padding-left: var(--wd-s-3);
    padding-right: var(--wd-s-3);
  }
  .wd-btn--tertiary:hover:not(:disabled) { background: var(--btn-tertiary-bg-hover); }

  .wd-btn--destructive {
    background: var(--btn-destructive-bg);
    color: var(--btn-destructive-fg);
  }
  .wd-btn--destructive:hover:not(:disabled) { background: var(--btn-destructive-bg-hover); }

  .wd-btn--ghost {
    background: var(--wd-bg-neutral);
    color: var(--wd-content-primary);
  }
  .wd-btn--ghost:hover:not(:disabled) { background: var(--wd-bg-overlay); }

  /* Floating: bg blanco + sombra sutil, sin border. Para botones top-right
     (Wise-style action bar). */
  .wd-btn--floating {
    background: var(--wd-bg-elevated);
    color: var(--wd-content-primary);
    border-color: transparent;
    box-shadow: 0 1px 3px rgba(14, 15, 12, 0.06), 0 4px 14px -4px rgba(14, 15, 12, 0.10);
  }
  .wd-btn--floating:hover:not(:disabled) {
    box-shadow: 0 2px 6px rgba(14, 15, 12, 0.10), 0 8px 20px -4px rgba(14, 15, 12, 0.14);
  }

  .wd-btn--icon { padding: 8px; gap: 0; }
  .wd-btn--icon.wd-btn--sm { padding: 6px; }

  /* ─── CHIP ───────────────────────────────────────────────────── */
  .wd-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--chip-gap);
    background: var(--chip-bg);
    color: var(--chip-fg);
    border: 1px solid var(--chip-border);
    border-radius: var(--chip-radius);
    padding: var(--chip-padding-y) var(--chip-padding-x);
    font-family: var(--wd-font-family);
    font-size: var(--chip-fs);
    font-weight: var(--chip-fw);
    line-height: 1.2;
    cursor: pointer;
    transition: background .15s var(--wd-ease), color .15s var(--wd-ease);
    user-select: none;
  }
  .wd-chip:hover:not(.wd-chip--static):not([disabled]) { background: var(--chip-bg-hover); }
  .wd-chip[aria-pressed="true"],
  .wd-chip.is-selected {
    background: var(--chip-bg-selected);
    color: var(--chip-fg-selected);
  }
  .wd-chip--static { cursor: default; }
  .wd-chip--sm {
    --chip-padding-y: 3px;
    --chip-padding-x: 8px;
    --chip-fs: 11px;
  }
  /* Sentiment chips (status) */
  /* Sentiment chips: Wise sentiment colours son APROBADOS para texto solo
     en pos / neg. Warning amarillo es BG-only — su texto va en Content
     Primary para mantener legibilidad. */
  .wd-chip--pos     { background: var(--wd-pos-bg);     color: var(--wd-pos);              cursor: default; }
  .wd-chip--warn    { background: var(--wd-warn-bg);    color: var(--wd-content-primary);  cursor: default; }
  .wd-chip--neg     { background: var(--wd-neg-bg);     color: var(--wd-neg);              cursor: default; }
  .wd-chip--neutral { background: var(--wd-neutral-bg); color: var(--wd-neutral-fg);       cursor: default; }

  /* Counter dentro del chip (filter chips con número) */
  .wd-chip-count {
    display: inline-flex;
    align-items: center; justify-content: center;
    background: rgba(255,255,255,0.18);
    color: inherit;
    font-size: 11px;
    font-weight: var(--wd-fw-bold);
    padding: 1px 6px;
    border-radius: 999px;
    min-width: 18px;
    line-height: 1;
  }
  .wd-chip:not(.is-selected):not([aria-pressed="true"]) .wd-chip-count {
    background: rgba(14, 15, 12, 0.07);
  }

  /* ─── CARD ───────────────────────────────────────────────────── */
  .wd-card {
    background: var(--card-bg);
    border: var(--card-border);
    border-radius: var(--card-radius);
    padding: var(--card-padding);
    box-shadow: var(--card-shadow);
    transition: box-shadow .25s var(--wd-ease), transform .15s var(--wd-ease);
    display: flex;
    flex-direction: column;
    gap: var(--card-gap);
  }
  .wd-card--interactive { cursor: pointer; }
  .wd-card--interactive:hover {
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-2px);
  }
  .wd-card--flat { box-shadow: none; }

  /* ─── INPUT / SEARCH ─────────────────────────────────────────── */
  .wd-input {
    width: 100%;
    background: var(--input-bg);
    color: var(--input-fg);
    border: var(--input-border);
    border-radius: var(--input-radius);
    padding: var(--input-padding-y) var(--input-padding-x);
    font-family: var(--wd-font-family);
    font-size: var(--input-fs);
    line-height: 1.4;
    transition: border-color .15s var(--wd-ease), box-shadow .15s var(--wd-ease);
  }
  .wd-input::placeholder { color: var(--input-placeholder); }
  .wd-input:focus {
    outline: none;
    border-color: var(--input-border-focus);
    box-shadow: var(--input-shadow-focus);
  }
  .wd-input[readonly], .wd-input[disabled] {
    background: var(--wd-bg-neutral);
    cursor: not-allowed;
  }

  .wd-search {
    position: relative;
    display: flex;
    align-items: center;
  }
  .wd-search .wd-search-icon {
    position: absolute;
    left: 14px;
    pointer-events: none;
    color: var(--wd-content-tertiary);
  }
  .wd-search .wd-input { padding-left: 40px; }

  /* ─── SWITCH ─────────────────────────────────────────────────── */
  .wd-switch {
    display: inline-flex;
    align-items: center;
    gap: var(--wd-s-2);
    cursor: pointer;
    user-select: none;
    font-family: var(--wd-font-family);
    font-size: var(--wd-fs-md);
    color: var(--wd-content-primary);
  }
  .wd-switch-track {
    position: relative;
    width: var(--switch-w);
    height: var(--switch-h);
    background: var(--switch-bg-off);
    border-radius: var(--wd-radius-full);
    transition: background .15s var(--wd-ease);
    flex-shrink: 0;
  }
  .wd-switch-track::after {
    content: '';
    position: absolute;
    top: var(--switch-pad); left: var(--switch-pad);
    width: calc(var(--switch-h) - var(--switch-pad) * 2);
    height: calc(var(--switch-h) - var(--switch-pad) * 2);
    background: var(--switch-knob-bg);
    border-radius: 50%;
    transition: transform .15s var(--wd-ease);
    box-shadow: var(--switch-knob-shadow);
  }
  .wd-switch input { display: none; }
  .wd-switch input:checked + .wd-switch-track { background: var(--switch-bg-on); }
  .wd-switch input:checked + .wd-switch-track::after {
    transform: translateX(calc(var(--switch-w) - var(--switch-h)));
  }

  /* ─── SEGMENTED CONTROL ──────────────────────────────────────── */
  .wd-segmented {
    display: inline-flex;
    background: var(--seg-bg);
    border-radius: var(--seg-radius);
    padding: var(--seg-padding);
    gap: 2px;
  }
  .wd-segmented-item {
    background: transparent;
    border: none;
    border-radius: var(--seg-item-radius);
    padding: var(--seg-item-padding-y) var(--seg-item-padding-x);
    font-family: var(--wd-font-family);
    font-size: var(--seg-item-fs);
    font-weight: var(--seg-item-fw);
    color: var(--seg-item-fg);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--wd-s-2);
    transition: background .15s var(--wd-ease), color .15s var(--wd-ease), box-shadow .15s var(--wd-ease);
  }
  .wd-segmented-item:hover { color: var(--seg-item-fg-active); }
  .wd-segmented-item.is-active {
    background: var(--seg-item-bg-active);
    color: var(--seg-item-fg-active);
    box-shadow: var(--seg-item-shadow-active);
  }

  /* ─── PROGRESS BAR ───────────────────────────────────────────── */
  .wd-progress {
    background: var(--wd-bg-neutral);
    border-radius: var(--wd-radius-full);
    height: 6px;
    overflow: hidden;
  }
  .wd-progress-fill {
    height: 100%;
    border-radius: inherit;
    transition: width .4s var(--wd-ease);
    background: var(--wd-pos);
  }
  .wd-progress--pos .wd-progress-fill     { background: var(--wd-pos); }
  .wd-progress--warn .wd-progress-fill    { background: var(--wd-warn); }
  .wd-progress--neg .wd-progress-fill     { background: var(--wd-neg); }
  /* neutral: Goal en progreso normal (avanzando sin alarma). Forest Green
     transmite "vamos en buena dirección" sin gritar éxito ni alerta. */
  .wd-progress--neutral .wd-progress-fill { background: var(--wd-forest-green); }
  .wd-progress--lg { height: 10px; }

  /* ─── TYPOGRAPHY UTILITIES ───────────────────────────────────── */
  .wd-text-display {
    font-size: var(--wd-fs-3xl);
    font-weight: var(--wd-fw-extra);
    letter-spacing: -0.03em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--wd-content-primary);
  }
  .wd-text-heading {
    font-size: var(--wd-fs-2xl);
    font-weight: var(--wd-fw-bold);
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--wd-content-primary);
  }
  .wd-text-section {
    font-size: var(--wd-fs-xl);
    font-weight: var(--wd-fw-bold);
    letter-spacing: -0.01em;
    line-height: 1.25;
    color: var(--wd-content-primary);
  }
  .wd-text-body {
    font-size: var(--wd-fs-md);
    font-weight: var(--wd-fw-regular);
    line-height: 1.5;
    color: var(--wd-content-secondary);
  }
  .wd-text-emph {
    font-size: var(--wd-fs-md);
    font-weight: var(--wd-fw-semi);
    line-height: 1.4;
    color: var(--wd-content-primary);
  }
  .wd-text-meta {
    font-size: var(--wd-fs-sm);
    font-weight: var(--wd-fw-medium);
    line-height: 1.4;
    color: var(--wd-content-tertiary);
  }
  .wd-text-label {
    font-size: var(--wd-fs-xs);
    font-weight: var(--wd-fw-semi);
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--wd-content-tertiary);
  }
  .wd-text-num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
  }

  /* ─── DIVIDER ─────────────────────────────────────────────────────
     3 jerarquías oficiales Wise (https://wise.design/components/divider):
       · section     — separa contenido NO relacionado (padding-lg arriba/abajo)
       · subsection  — separa contenido relacionado con jerarquía adicional;
                       inset al padding del bloque contenedor
       · content     — separa info dentro de un mismo bloque (padding-sm)
     Cuándo NO usar: entre bloques de contenido distintos (eso es section).
  ─────────────────────────────────────────────────────────────── */
  .wd-divider {
    /* Base: hairline 1px sin margen propio. Usar modificadores para spacing. */
    height: 1px;
    background: var(--wd-border-neutral);
    border: none;
    margin: 0;
    width: 100%;
    flex-shrink: 0;
  }
  .wd-divider--section {
    /* Section divider: 32px arriba/abajo. Full width, sin inset. */
    margin-block: var(--wd-padding-lg);
  }
  .wd-divider--subsection {
    /* Sub-section: 32px arriba/abajo + inset al padding del contenedor.
       Útil cuando el bloque padre ya tiene padding propio. */
    margin-block: var(--wd-padding-lg);
    margin-inline: var(--wd-padding-md);
  }
  .wd-divider--content {
    /* Content: 16px arriba/abajo. Para separar info dentro de una card o
       lista compacta sin imponer la jerarquía mayor de section. */
    margin-block: var(--wd-padding-sm);
  }
  .wd-divider--dashed {
    /* Variante: línea discontinua, mismo color. Misma escala de spacing
       que el modificador combinado (--section/--content/etc.). */
    background: transparent;
    border-top: 1px dashed var(--wd-border-neutral);
  }
  .wd-divider--vertical {
    /* Vertical: 1px wide, ocupa altura del contenedor flex. Pensada para
       toolbars / clusters horizontales que separan grupos de acciones. */
    width: 1px;
    height: auto;
    min-height: 16px;
    align-self: stretch;
    margin-inline: var(--wd-padding-xs);
    margin-block: 0;
  }

  /* ─── TABLE (https://wise.design/components/table) ────────────────
     Componente unificado para todas las tablas de la app: épicas, tareas,
     dependencias, actores, etc. Anatomía Wise:
       - Header: una fila de header cells (Bold, casing inicial mayúscula)
       - Body: filas con hover state, separadas por hairline border-bottom
       - Cell types: --leading (primer col, fuerte), --text (default),
         --currency (right aligned para números), --status (pill inline),
         --actions (icon-button al final, single action por fila)
     Diseño desktop-first; en mobile la tabla scrolla horizontal.
  ─────────────────────────────────────────────────────────────────── */
  .wd-table-wrap {
    width: 100%;
    border: 1px solid var(--wd-border-neutral);
    border-radius: var(--wd-radius-sm);
    background: var(--wd-bg-elevated);
    overflow: hidden;
  }
  .wd-table-wrap--scroll { overflow-x: auto; }

  .wd-table {
    width: 100%;
    /* table-layout: fixed → todas las filas respetan los widths del
       <thead>. Sin esto, las columnas auto-shrink/expand por fila → las
       pills de estado/tipo "bailan" entre filas. La columna sin width
       absorbe el resto del espacio (típicamente el título). */
    table-layout: fixed;
    border-collapse: collapse;
    font-family: var(--wd-font-family);
    font-size: var(--wd-fs-md);
    color: var(--wd-content-primary);
  }
  /* Helpers de col-width — aplicar en <th>. La fila <thead> dicta el
     layout de toda la tabla cuando table-layout: fixed. */
  .wd-table-col--id        { width: 96px; }
  .wd-table-col--status    { width: 120px; }
  .wd-table-col--type      { width: 130px; }
  .wd-table-col--people    { width: 110px; }
  .wd-table-col--num-sm    { width: 64px; }
  .wd-table-col--num       { width: 96px; }
  .wd-table-col--meta      { width: 110px; }
  .wd-table-col--progress  { width: 180px; }

  .wd-table thead { background: var(--wd-bg-neutral); }
  .wd-table th.wd-table-th {
    text-align: left;
    font-weight: var(--wd-fw-bold);
    font-size: var(--wd-fs-sm);
    color: var(--wd-content-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: var(--wd-padding-sm) var(--wd-padding-md);
    border-bottom: 1px solid var(--wd-border-neutral);
    white-space: nowrap;
  }
  .wd-table-th--right    { text-align: right; }
  .wd-table-th--center   { text-align: center; }
  .wd-table-th--actions  { width: 1px; }   /* shrink-to-fit */

  .wd-table tbody tr.wd-table-row {
    border-bottom: 1px solid var(--wd-border-neutral);
    transition: background .12s var(--wd-ease);
  }
  .wd-table tbody tr.wd-table-row:last-child { border-bottom: 0; }
  .wd-table tbody tr.wd-table-row.is-clickable { cursor: pointer; }
  .wd-table tbody tr.wd-table-row:hover { background: var(--wd-bg-neutral); }
  .wd-table tbody tr.wd-table-row:hover td.wd-table-cell {
    /* Algunos navegadores ignoran bg en <tr> porque el <td> tiene su
       propio bg. Forzamos transparente para que el <tr> bg gane. */
    background-color: transparent;
  }
  .wd-table tbody tr.wd-table-row.is-archived { opacity: 0.55; }
  /* Bloqueado: pintamos TODA la fila (no solo una celda). Aplicamos
     bg directamente a cada <td> para vencer cualquier styling de cell
     específico que pisa el bg del <tr>. */
  .wd-table tbody tr.wd-table-row.is-blocked td.wd-table-cell {
    background: rgba(168, 32, 13, 0.07);
  }
  .wd-table tbody tr.wd-table-row.is-blocked:hover td.wd-table-cell {
    background: rgba(168, 32, 13, 0.12);
  }

  .wd-table td.wd-table-cell {
    padding: var(--wd-padding-sm) var(--wd-padding-md);
    vertical-align: middle;
    line-height: 1.4;
    /* table-layout: fixed combinado con overflow:hidden + ellipsis en
       las celdas garantiza que las columnas no "bailen" entre filas si
       un título es largo. La columna sin width fijo (típicamente la
       de título) absorbe el sobrante; si el contenido excede, ellipsis. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Override: celdas que pueden multi-línea explícitamente (poco común,
     pero útil para celdas con stack o helpers). Aplicar la clase. */
  .wd-table td.wd-table-cell--multiline {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  /* --leading: primera columna, peso semi para anclar la fila visualmente. */
  .wd-table-cell--leading {
    font-weight: var(--wd-fw-semi);
    color: var(--wd-content-primary);
  }
  /* --currency: numbers right-aligned + display-num para tabular-friendly. */
  .wd-table-cell--currency,
  .wd-table-cell--num {
    text-align: right;
    font-family: var(--wd-display-num);
    font-variant-numeric: tabular-nums;
    color: var(--wd-content-primary);
    white-space: nowrap;
  }
  /* --meta: secundario, gris tertiary, tamaño pequeño. Para timestamps,
     last update, helper text. */
  .wd-table-cell--meta {
    color: var(--wd-content-tertiary);
    font-size: var(--wd-fs-sm);
    white-space: nowrap;
  }
  /* --actions: shrink-to-fit, icon-button al final de la fila. */
  .wd-table-cell--actions {
    width: 1px;
    text-align: right;
    white-space: nowrap;
  }
  /* --truncate: para títulos largos. Combina con max-width inline. */
  .wd-table-cell--truncate {
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Empty state dentro de una tabla */
  .wd-table-empty {
    padding: var(--wd-padding-lg);
    text-align: center;
    color: var(--wd-content-tertiary);
  }

  /* Variante densa: padding reducido para tablas con muchas filas (tareas
     backlog dentro de un week group, donde el contexto ya da spacing). */
  .wd-table--dense th.wd-table-th,
  .wd-table--dense td.wd-table-cell {
    padding: var(--wd-padding-xs) var(--wd-padding-sm);
  }

  /* ─── INFO PROMPT (https://wise.design/components/info-prompt) ────
     Anatomy: icono + mensaje + CTA opcional. 5 variantes (neutral,
     warning, error, success, proposition) cada una con su tint Wise.
     Pensado para mensajes contextuales adyacentes a un bloque de
     contenido (NO para validación de un input — para eso, helper text
     del propio input). */
  .wd-info-prompt {
    display: flex;
    align-items: flex-start;
    gap: var(--wd-padding-sm);
    padding: var(--wd-padding-sm) var(--wd-padding-md);
    border-radius: var(--wd-radius-sm);
    border: 1px solid var(--wd-border-neutral);
    background: var(--wd-bg-neutral);
    color: var(--wd-content-primary);
    font-size: var(--wd-fs-md);
    line-height: 1.45;
  }
  .wd-info-prompt-icon {
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px;
    color: var(--wd-content-secondary);
    margin-top: 1px;
  }
  .wd-info-prompt-body {
    flex: 1;
    display: flex; flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .wd-info-prompt-title {
    font-weight: var(--wd-fw-semi);
    color: var(--wd-content-primary);
  }
  .wd-info-prompt-msg {
    color: var(--wd-content-secondary);
  }
  .wd-info-prompt-cta {
    align-self: flex-start;
    margin-top: 4px;
    background: transparent;
    border: none;
    padding: 0;
    color: var(--wd-interactive-primary, var(--wd-forest-green));
    font-weight: var(--wd-fw-semi);
    text-decoration: underline;
    cursor: pointer;
    font-size: inherit;
  }
  .wd-info-prompt-cta:hover { opacity: 0.8; }

  /* Variantes Wise — colores siguiendo sentiment + accent. */
  .wd-info-prompt--warning {
    background: rgba(237, 200, 67, 0.10);   /* sentiment-warn tint */
    border-color: rgba(237, 200, 67, 0.30);
  }
  .wd-info-prompt--warning .wd-info-prompt-icon { color: #B07700; }
  .wd-info-prompt--warning .wd-info-prompt-title { color: #6B4500; }

  .wd-info-prompt--error {
    background: rgba(168, 32, 13, 0.06);
    border-color: rgba(168, 32, 13, 0.20);
  }
  .wd-info-prompt--error .wd-info-prompt-icon { color: var(--wd-neg); }
  .wd-info-prompt--error .wd-info-prompt-title { color: var(--wd-neg); }

  .wd-info-prompt--success {
    background: rgba(47, 87, 17, 0.06);
    border-color: rgba(47, 87, 17, 0.18);
  }
  .wd-info-prompt--success .wd-info-prompt-icon { color: var(--wd-pos); }
  .wd-info-prompt--success .wd-info-prompt-title { color: var(--wd-pos); }

  .wd-info-prompt--proposition {
    background: rgba(159, 232, 112, 0.14);  /* bright-green tint sutil */
    border-color: rgba(22, 51, 0, 0.18);
  }
  .wd-info-prompt--proposition .wd-info-prompt-icon { color: var(--wd-forest-green); }
  .wd-info-prompt--proposition .wd-info-prompt-title { color: var(--wd-forest-green); }

  /* ─── STACK / CLUSTER (layout helpers) ───────────────────────── */
  .wd-stack { display: flex; flex-direction: column; gap: var(--wd-s-4); }
  .wd-stack--sm { gap: var(--wd-s-2); }
  .wd-stack--lg { gap: var(--wd-s-6); }
  .wd-cluster {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: var(--wd-s-2);
  }
  .wd-cluster--lg { gap: var(--wd-s-3); }
  .wd-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--wd-s-3);
  }

  /* ── APP LAYOUT (SIDEBAR + MAIN) ── */
  .app-layout {
    display: flex;
    min-height: 100vh;
  }

  .sidebar {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    background: var(--sidebar-bg);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 100;
    overflow-y: auto;
    overflow-x: hidden;
    transition: width 0.25s ease, min-width 0.25s ease;
  }

  .sidebar-header {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 1rem 0.875rem 0.75rem;
  }

  .sidebar-brand-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 0.25rem;
  }

  .sidebar-brand-row .nav-wordmark {
    font-size: 15px;
    font-weight: 700;
    color: var(--black);
    flex: 1;
  }

  /* ── Client Pill ── */
  .client-pill-wrap {
    position: relative;
  }

  .client-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 8px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--black);
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    text-align: left;
  }

  .client-pill:hover,
  .client-pill-wrap.open .client-pill {
    background: #F3F5F7;
    border-color: #D1D5DB;
  }

  .client-pill-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: rgba(0,39,0,0.06);
    flex-shrink: 0;
    overflow: hidden;
  }

  .client-favicon {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    display: block;
  }

  .client-initial {
    font-size: 12px;
    font-weight: 700;
    color: var(--dark-green);
    line-height: 1;
  }

  .client-pill-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .client-pill-chevron {
    width: 12px;
    height: 12px;
    color: #6B7280;
    flex-shrink: 0;
    transition: transform 0.15s;
  }

  .client-pill-wrap.open .client-pill-chevron {
    transform: rotate(180deg);
  }

  .client-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 6px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.1);
    z-index: 200;
    max-height: 360px;
    overflow-y: auto;
  }

  .client-menu-section-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #6B7280;
    padding: 6px 8px 4px;
  }

  .client-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 8px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--black);
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s;
  }

  .client-menu-item:hover {
    background: #F3F5F7;
  }

  .client-menu-item.is-active {
    background: rgba(0,39,0,0.06);
    color: var(--dark-green);
    font-weight: 600;
  }

  .client-menu-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 5px;
    background: rgba(0,39,0,0.06);
    flex-shrink: 0;
    overflow: hidden;
    color: var(--dark-green);
  }

  .client-menu-avatar .client-favicon { width: 16px; height: 16px; }
  .client-menu-avatar .client-initial { font-size: 11px; }

  .client-menu-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .client-menu-check {
    width: 14px;
    height: 14px;
    color: var(--dark-green);
    flex-shrink: 0;
  }

  .client-menu-divider {
    height: 1px;
    background: var(--border);
    margin: 6px 4px;
  }

  /* Sidebar widget DARK — comparte tokens con cualquier otro widget dark
     que metamos en el sidebar (banners, badges, etc.). Wise look: bg Forest +
     texto Bright + radius medium. */
  .sidebar-week-card {
    margin: var(--wd-s-2) var(--wd-s-3);
    background: var(--sidebar-widget-bg);
    border: none;
    border-radius: var(--sidebar-widget-radius);
    padding: var(--sidebar-widget-padding);
    position: relative;
    box-shadow: var(--sidebar-widget-shadow);
    font-family: var(--wd-font-family);
  }

  .sidebar-week-card .pw-card-number {
    font-size: 28px;
    font-weight: var(--wd-fw-extra);
    color: var(--sidebar-widget-fg);
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
  }

  .sidebar-week-card .pw-card-label {
    font-size: 9px;
    font-weight: var(--wd-fw-bold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sidebar-widget-fg-secondary);
    margin-top: 4px;
  }

  .sidebar-week-card .pw-card-detail {
    font-size: 11px;
    color: var(--sidebar-widget-fg-secondary);
    margin-top: 4px;
  }

  .sidebar-week-card .pw-progress-bar {
    height: 3px;
    background: rgba(159, 232, 112, 0.20);
    border-radius: 2px;
    margin-top: 8px;
    overflow: hidden;
  }

  .sidebar-week-card .pw-progress-fill {
    height: 100%;
    background: var(--sidebar-widget-fg);
    border-radius: 2px;
    transition: width .4s var(--wd-ease);
  }

  .sidebar-nav {
    flex: 1;
    padding: var(--wd-s-2) var(--sidebar-padding);
    display: flex;
    flex-direction: column;
    gap: var(--sidebar-gap);
  }

  .sidebar-nav-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: var(--sidebar-item-padding-y) var(--sidebar-item-padding-x);
    border: none;
    background: transparent;
    color: var(--sidebar-item-fg);
    font-family: var(--wd-font-family);
    font-size: var(--sidebar-item-fs);
    font-weight: var(--sidebar-item-fw);
    cursor: pointer;
    border-radius: var(--sidebar-item-radius);
    transition: background 0.15s var(--wd-ease), color 0.15s var(--wd-ease), box-shadow 0.15s var(--wd-ease);
    text-align: left;
    width: 100%;
  }

  .sidebar-nav-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: currentColor;
  }

  .sidebar-nav-btn:hover {
    background: var(--sidebar-item-bg-hover);
    color: var(--sidebar-item-fg-hover);
  }

  /* Item activo Wise-style: bg blanco con sombra sutil "elevándose" sobre
     el sidebar tinted. Igual que el bottom nav de Wise mobile. */
  .sidebar-nav-btn.active {
    background: var(--sidebar-item-bg-active);
    color: var(--sidebar-item-fg-active);
    font-weight: var(--sidebar-item-fw-active);
    box-shadow: var(--sidebar-item-shadow-active);
  }

  /* Section header inside sidebar nav (groups related entries) */
  .sidebar-nav-section {
    font-size: var(--sidebar-section-fs);
    font-weight: var(--wd-fw-bold);
    letter-spacing: var(--sidebar-section-tracking);
    text-transform: uppercase;
    color: var(--sidebar-section-fg);
    padding: var(--sidebar-section-padding-y) var(--sidebar-item-padding-x) 6px;
    margin-top: 6px;
  }
  .sidebar.collapsed .sidebar-nav-section { display: none; }

  /* ── Sidebar Profile ── */
  .sidebar-profile {
    position: relative;
    margin: 0.5rem 0.75rem 0.75rem;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--white);
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
    margin-top: auto;
  }

  .sidebar-profile:hover,
  .sidebar-profile.open {
    background: #F3F5F7;
    border-color: #D1D5DB;
  }

  .sidebar-profile-info {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
  }

  .sidebar-profile-avatar {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 8px;
    background: #EEF1F4;
    border: 1px solid var(--border);
    color: var(--black);
    font-weight: 700;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sidebar-profile-details {
    min-width: 0;
  }

  .sidebar-profile-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--black);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .sidebar-profile-email {
    font-size: 11px;
    color: #6B7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .sidebar-profile-chevron {
    width: 14px;
    height: 14px;
    color: #6B7280;
    flex-shrink: 0;
    transition: transform 0.15s;
  }

  .sidebar-profile.open .sidebar-profile-chevron {
    transform: rotate(180deg);
  }

  .sidebar-profile-menu {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    z-index: 250;
    cursor: default;
  }

  .sidebar-profile-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--black);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s;
  }

  .sidebar-profile-menu-item:hover {
    background: #F3F5F7;
  }

  .sidebar-profile-menu-item svg {
    width: 16px;
    height: 16px;
    color: #6B7280;
    flex-shrink: 0;
  }

  .sidebar-profile-menu-divider {
    height: 1px;
    background: var(--border);
    margin: 6px 4px;
  }

  .sidebar-profile-menu-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #6B7280;
    padding: 8px 10px 4px;
  }

  .sidebar-profile-menu-langs {
    display: flex;
    gap: 4px;
    padding: 0 6px 4px;
  }

  .sidebar-profile-menu-lang {
    flex: 1;
    padding: 6px 8px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--black);
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
  }

  .sidebar-profile-menu-lang:hover {
    background: #F3F5F7;
  }

  .sidebar-profile-menu-lang.is-active {
    background: var(--dark-green);
    border-color: var(--dark-green);
    color: var(--white);
  }

  .sidebar.collapsed .client-pill-wrap {
    display: none !important;
  }

  .sidebar.collapsed .sidebar-profile-details,
  .sidebar.collapsed .sidebar-profile-chevron {
    display: none;
  }

  .sidebar.collapsed .sidebar-profile {
    justify-content: center;
    padding: 4px;
    margin: 0.5rem 4px 0.75rem;
  }

  /* In collapsed mode the info wrapper still has flex:1 by default,
     which pushes the avatar off-center. Shrink it to content. */
  .sidebar.collapsed .sidebar-profile-info {
    flex: 0 0 auto;
    justify-content: center;
  }

  .sidebar.collapsed .sidebar-profile-menu {
    left: calc(100% + 8px);
    right: auto;
    bottom: 0;
    min-width: 220px;
  }

  .sidebar-collapse-btn {
    position: fixed;
    top: 50%;
    left: calc(240px - 14px);
    transform: translateY(-50%);
    background: var(--white);
    border: 1px solid var(--border);
    color: #6B7280;
    cursor: pointer;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, color 0.15s, background 0.15s, border-color 0.15s, left 0.25s ease;
    z-index: 150;
  }

  .sidebar:hover ~ .sidebar-collapse-btn,
  .sidebar-collapse-btn:hover {
    opacity: 1;
    pointer-events: auto;
  }

  .sidebar-collapse-btn svg { width: 14px; height: 14px; }
  .sidebar-collapse-btn:hover {
    color: var(--black);
    background: #F3F5F7;
    border-color: #D1D5DB;
  }
  .sidebar-collapse-btn .expand-icon { display: none; }
  .sidebar-collapse-btn .collapse-icon { display: block; }
  .sidebar.collapsed ~ .sidebar-collapse-btn { left: calc(56px - 14px); }
  .sidebar.collapsed ~ .sidebar-collapse-btn .expand-icon { display: block; }
  .sidebar.collapsed ~ .sidebar-collapse-btn .collapse-icon { display: none; }

  .main-content {
    flex: 1;
    margin-left: 240px;
    background: var(--white);
    border-top-left-radius: 14px;
    border-bottom-left-radius: 14px;
    border-left: 1px solid var(--border);
    min-height: 100vh;
    transition: margin-left 0.25s ease;
  }

  /* Collapsed sidebar */
  .sidebar.collapsed {
    width: 56px;
    min-width: 56px;
  }

  .sidebar.collapsed .nav-wordmark,
  .sidebar.collapsed .sidebar-nav-btn span,
  .sidebar.collapsed .sidebar-week-card .pw-card-label,
  .sidebar.collapsed .sidebar-week-card .pw-card-detail,
  .sidebar.collapsed .sidebar-week-card .pw-card-calweek,
  .sidebar.collapsed .sidebar-week-card .pw-progress-bar {
    display: none;
  }

  .sidebar.collapsed .sidebar-header {
    flex-direction: column;
    align-items: center;
    padding: 0.75rem 0 0.25rem;
    gap: 8px;
  }

  .sidebar.collapsed .e-logo {
    width: 36px;
    height: 36px;
    font-size: 18px;
    border-radius: 10px;
  }

  .sidebar.collapsed .sidebar-nav {
    border-top: 1px solid var(--border);
    margin-top: 4px;
    padding: 8px 0.25rem 0.5rem;
    align-items: center;
  }

  .sidebar.collapsed .sidebar-nav-btn {
    justify-content: center;
    padding: 9px;
    width: 40px;
  }

  .sidebar.collapsed .sidebar-week-card {
    margin: 0.5rem 0.5rem 0.25rem;
    padding: 0.5rem 0.5rem;
    text-align: center;
    box-shadow: none;
  }

  .sidebar.collapsed .sidebar-week-card .pw-card-number {
    font-size: 18px;
  }

  /* Use general-sibling (~) because the collapse button sits between
     .sidebar and .main-content in the DOM, breaking the adjacent (+) selector. */
  .sidebar.collapsed ~ .main-content {
    margin-left: 56px;
  }

  /* Hide old top nav when sidebar is present */
  .app-layout .site-nav { display: none; }

  /* ── SITE NAV (fallback for pages without sidebar) ── */
  .site-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--dark-green);
    border-bottom: 1px solid rgba(140,250,110,0.12);
    padding: 0 2.5rem;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .nav-left { display: flex; align-items: center; gap: 12px; }

  .e-logo {
    width: 32px;
    height: 32px;
    background: var(--green);
    color: var(--dark-green);
    font-weight: 800;
    font-size: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
  }

  .nav-wordmark {
    font-weight: 700;
    font-size: 15px;
    color: var(--white);
  }

  .nav-sep { width: 1px; height: 14px; background: rgba(255,255,255,0.15); }

  .nav-client {
    font-size: 13px;
    color: var(--dg-40);
    font-weight: 400;
  }

  .nav-right {
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--dg-40);
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .lang-selector {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 3px 6px;
    border: 1px solid var(--dg-40);
    border-radius: 4px;
    background: transparent;
    color: var(--green);
    cursor: pointer;
    text-transform: uppercase;
  }

  .lang-selector:focus {
    outline: none;
    border-color: var(--green);
  }

  /* ── PAGE WRAPPER ── */
  .page {
    max-width: var(--wd-page-max-width);
    margin: 0 auto;
    padding: 2.5rem 1.5rem 5rem;
    background: var(--white);
    min-height: calc(100vh - 56px);
  }

  /* ── PAGE HEADER ── */
  .page-header {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    transition: margin 0.2s, padding 0.2s;
  }

  .page-header .page-header-left {
    display: flex;
    align-items: baseline;
    gap: 12px;
  }

  .page-header .page-header-sub {
    font-size: 13px;
    color: var(--dg-60);
  }

  .page-header.compact {
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
  }

  .page-header-left { flex: 1; }

  /* Program week card */
  .program-week-card {
    flex-shrink: 0;
    background: var(--dark-green);
    border-radius: 12px;
    padding: 1.1rem 1.5rem;
    text-align: center;
    min-width: 160px;
  }

  .pw-card-week {
    font-size: 36px;
    font-weight: 800;
    color: var(--green);
    line-height: 1;
  }

  .pw-card-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--dg-40);
    margin-top: 4px;
  }

  .pw-card-bar {
    margin-top: 8px;
    height: 6px;
    background: rgba(140,250,110,0.12);
    border-radius: 3px;
    overflow: hidden;
    display: flex;
  }

  .pw-card-fill {
    height: 100%;
    transition: width 0.3s;
  }

  .pw-fill-active { background: var(--green); }

  .pw-card-detail {
    font-size: 9px;
    color: var(--dg-40);
    margin-top: 5px;
    line-height: 1.4;
  }

  .pw-card-calweek {
    position: absolute;
    top: 0.75rem;
    right: 1rem;
    font-size: 10px;
    font-weight: 600;
    color: var(--green);
    letter-spacing: 0.04em;
  }



  .page-header-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dg-60);
    margin-bottom: 0.5rem;
  }

  .page-header-title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--black);
    line-height: 1.2;
  }

  .page-header-title em {
    font-style: normal;
    color: var(--dark-green);
  }

  /* ── ACCORDION ── */
  .accordion {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .cycle-block {
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--white);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    transition: box-shadow 0.2s;
  }

  .cycle-block:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  }

  /* Accordion trigger */
  .cycle-trigger {
    width: 100%;
    background: var(--white);
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.75rem;
    text-align: left;
    transition: background 0.15s;
  }

  .cycle-trigger:hover { background: var(--lg-40); }

  .trigger-left { display: flex; align-items: center; gap: 14px; }

  .cycle-badge {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 100px;
    background: var(--dark-green);
    color: var(--green);
    white-space: nowrap;
    flex-shrink: 0;
  }

  .cycle-badge.active {
    background: var(--dark-green);
    color: var(--green);
  }

  .cycle-badge.upcoming {
    background: var(--dark-green);
    color: var(--dg-40);
  }

  /* Numbered circle (replaces pill for Seguimiento cycles) */
  .cycle-num {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.2px;
    border: 1.5px solid var(--border);
    background: var(--bg-subtle);
    color: #9CA3AF;
    flex-shrink: 0;
    transition: transform 0.15s, box-shadow 0.15s;
  }

  .cycle-num.is-past {
    background: var(--lg-60);
    border-color: #BBE5C4;
    color: var(--dark-green);
  }

  .cycle-num.is-current {
    background: var(--dark-green);
    border-color: var(--dark-green);
    color: var(--green);
    box-shadow: 0 0 0 3px rgba(0, 39, 0, 0.12);
  }

  .cycle-block.is-current {
    border-color: var(--dark-green);
    box-shadow: 0 0 0 1px var(--dark-green), 0 4px 16px rgba(0, 39, 0, 0.12);
  }

  .cycle-block.is-current .trigger-weeks {
    color: var(--dark-green);
    font-weight: 700;
  }

  .trigger-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--black);
    letter-spacing: -0.2px;
  }

  .trigger-sub {
    font-size: 12px;
    color: var(--dg-60);
    margin-top: 2px;
  }

  .trigger-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

  .trigger-weeks {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dg-60);
  }

  .trigger-weeks {
    color: var(--dg-60);
  }

  .trigger-arrow {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dg-60);
    font-size: 13px;
    transition: transform 0.25s;
    flex-shrink: 0;
  }

  .cycle-block.open .trigger-arrow { transform: rotate(180deg); }

  /* Accordion content */
  .cycle-content {
    display: none;
    background: var(--white);
  }

  .cycle-block.open .cycle-content { display: block; }

  /* ── INNER SLIDES ── */
  .inner-slide {
    border-bottom: 1px solid var(--border);
  }
  .inner-slide:last-child { border-bottom: none; }

  .slide-top {
    padding: 1.5rem 1.75rem 1.25rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg-subtle);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
  }

  .slide-eyebrow {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dg-60);
    margin-bottom: 0.4rem;
  }

  .slide-h {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.5px;
    line-height: 1.1;
    color: var(--black);
  }

  .slide-h em { font-style: normal; color: var(--dg-80); }

  .slide-tag {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 4px 11px;
    border-radius: 100px;
    background: var(--lg-60);
    color: var(--dg-80);
    border: 1px solid var(--border);
    white-space: nowrap;
    align-self: flex-start;
  }

  .slide-body { padding: 1.5rem 1.75rem; }

  /* ── PORTADA BODY ── */
  .cover-body {
    padding: 1.5rem 1.75rem 2rem;
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    gap: 2rem;
    align-items: start;
  }

  .cover-divider { background: var(--border); align-self: stretch; }

  .cover-desc { font-size: 13.5px; color: var(--dg-60); line-height: 1.8; }
  .cover-desc strong { color: var(--black); font-weight: 500; }

  .tl-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding-bottom: 1.1rem;
    position: relative;
  }
  .tl-item:last-child { padding-bottom: 0; }

  .tl-line {
    position: absolute;
    left: 13px;
    top: 26px;
    bottom: 0;
    width: 1px;
    background: var(--border);
  }
  .tl-item:last-child .tl-line { display: none; }

  .tl-dot {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
  }
  .tl-dot.done { background: var(--green); color: var(--dark-green); }
  .tl-dot.next { background: var(--lg-40); color: var(--dg-60); }

  .tl-week { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dg-60); margin-bottom: 1px; }
  .tl-title { font-size: 13px; font-weight: 600; color: var(--black); }

  /* ── OBJETIVOS ── */
  .obj-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
  }

  .obj-cell {
    padding: 1.25rem;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }
  .obj-cell:nth-child(2), .obj-cell:nth-child(4) { border-right: none; }
  .obj-cell:nth-child(3), .obj-cell:nth-child(4) { border-bottom: none; }
  .obj-cell.hero { background: var(--dark-green); }

  .obj-n {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dg-60);
    margin-bottom: 0.5rem;
  }
  .obj-cell.hero .obj-n { color: var(--dg-80); }

  .obj-title { font-size: 13.5px; font-weight: 700; color: var(--black); margin-bottom: 0.35rem; line-height: 1.3; }
  .obj-cell.hero .obj-title { color: var(--lg-80); }

  .obj-text { font-size: 12.5px; color: var(--dg-60); line-height: 1.6; }
  .obj-cell.hero .obj-text { color: var(--dg-40); }

  /* ── TAREAS ── */
  .tasks-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }

  .col-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dg-60);
    margin-bottom: 0.6rem;
  }

  .task-row {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    color: var(--black);
    line-height: 1.5;
  }
  .task-row:first-of-type { border-top: 1px solid var(--border); }
  .task-row.dim { color: var(--dg-60); }

  .check {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .check.done { background: var(--green); }
  .check.open { border: 1px solid var(--border); }
  .check svg { width: 9px; height: 9px; }

  .task-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 4px;
    margin-right: 5px;
  }
  .tag-a { background: var(--green);  color: var(--dark-green); }
  .tag-b { background: var(--lg-80);  color: var(--dg-80); }
  .tag-c { background: var(--lg-60);  color: var(--dg-80); }

  .metrics-box {
    margin-top: 1.25rem;
    padding: 1rem 1.25rem;
    border-radius: 8px;
    background: var(--dark-green);
  }
  .metrics-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dg-60);
    margin-bottom: 0.75rem;
  }
  .metrics-row { display: flex; gap: 1.25rem; align-items: flex-start; }
  .metric-n { font-size: 24px; font-weight: 800; color: var(--dark-green); line-height: 1; }
  .metric-desc { font-size: 11px; color: var(--dg-40); margin-top: 3px; line-height: 1.4; }
  .metric-divider { width: 1px; background: var(--dg-80); align-self: stretch; }

  /* ── APRENDIZAJES ── */
  .learnings-stack {
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 1rem;
  }

  .l-row {
    display: grid;
    grid-template-columns: 170px 1fr;
    border-bottom: 1px solid var(--border);
  }
  .l-row:last-child { border-bottom: none; }

  .l-type {
    padding: 1rem 1.25rem;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
  }

  .l-pill {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 100px;
    width: fit-content;
  }
  .pill-obs  { background: var(--lg-60); color: var(--dg-80); }
  .pill-risk { background: var(--green); color: var(--dark-green); }
  .pill-next { background: var(--dark-green); color: var(--lg-80); }

  .l-title { font-size: 12.5px; font-weight: 700; color: var(--black); line-height: 1.3; }

  .l-content {
    padding: 1rem 1.25rem;
    font-size: 13px;
    color: var(--dg-60);
    line-height: 1.7;
  }
  .l-content strong { color: var(--black); font-weight: 500; }

  .cycle-bar {
    padding: 1rem 1.25rem;
    background: var(--dark-green);
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 1rem;
  }
  .cycle-bar-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dg-60);
    white-space: nowrap;
    flex-shrink: 0;
  }
  .cycle-bar-arrow { color: var(--dark-green); font-size: 16px; flex-shrink: 0; }
  .cycle-bar-text { font-size: 13px; color: var(--white); line-height: 1.5; }

  /* ── UPCOMING PLACEHOLDER ── */
  .upcoming-body {
    padding: 2rem 1.75rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--dg-60);
    font-size: 13.5px;
  }

  .upcoming-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px dashed var(--dg-40);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--dg-40);
    font-size: 16px;
  }

  /* ── FOOTER ── */
  /* ── TAB BAR ── */
  .tab-bar {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border);
    margin-bottom: 2rem;
  }

  .tab-btn {
    padding: 0.75rem 1.5rem;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--dg-60);
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
    transition: color 0.2s;
  }

  .tab-btn:hover { color: var(--black); }

  .tab-btn.active {
    color: var(--dark-green);
  }

  .tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--green);
    border-radius: 2px 2px 0 0;
  }

  .tab-panel {
    display: none;
    opacity: 0;
    transform: translateY(8px);
  }
  .tab-panel.active {
    display: block;
    animation: tabFadeIn 0.3s ease forwards;
  }

  @keyframes tabFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* ── PLAYBOOK ── */
  .playbook-header {
    margin-bottom: 1.25rem;
  }
  .playbook-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--dark-green);
    margin-bottom: 0.25rem;
  }
  .playbook-subtitle {
    font-size: 13px;
    color: var(--dg-60);
  }

  /* Playbook table (extends .ui-table) */
  .pb-table .pb-col-num { width: 48px; text-align: center; font-weight: 700; color: var(--dark-green); }
  .pb-table .pb-col-pillar { width: 1%; white-space: nowrap; }
  .pb-table .pb-col-arrow { width: 40px; text-align: right; color: var(--dg-40); }
  .pb-table tbody tr.pb-row { cursor: pointer; }
  .pb-table .pb-row-title { font-weight: 600; color: var(--black); font-size: 13px; }
  .pb-table .pb-row-desc  { font-size: 12px; color: var(--dg-60); margin-top: 2px; line-height: 1.4; }
  .pb-table .pb-row-toggle {
    display: inline-block;
    font-size: 11px;
    color: var(--dg-40);
    transition: transform 0.2s;
  }
  .pb-table tr.pb-row.expanded .pb-row-toggle { transform: rotate(90deg); color: var(--dark-green); }
  .pb-table tr.pb-row.expanded td { background: var(--bg-subtle); }

  .pb-detail-row { display: none; }
  .pb-detail-row.open { display: table-row; }
  .pb-detail-row td {
    padding: 1.25rem 1.5rem !important;
    background: var(--bg-subtle);
    border-bottom: 2px solid var(--border);
  }
  .playbook-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .playbook-card {
    border: 1px solid var(--border);
    border-bottom: none;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    transition: background 0.15s;
    background: var(--white);
    text-decoration: none;
    cursor: pointer;
  }
  .playbook-card:first-child { border-radius: 12px 12px 0 0; }
  .playbook-card:last-child { border-bottom: 1px solid var(--border); border-radius: 0 0 12px 12px; }
  .playbook-card:only-child { border-radius: 12px; border-bottom: 1px solid var(--border); }
  .playbook-card:hover {
    background: var(--lg-40);
  }
  .playbook-card-step {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--dark-green);
    color: var(--green);
    font-size: 14px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .playbook-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--lg-40);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
  }
  .playbook-card-body { flex: 1; min-width: 0; }
  .playbook-card-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--dark-green);
  }
  .playbook-card-desc {
    font-size: 12.5px;
    color: var(--dg-60);
    line-height: 1.4;
    margin-top: 2px;
  }
  .playbook-card-arrow {
    font-size: 16px;
    color: var(--dg-40);
    flex-shrink: 0;
    transition: transform 0.15s;
  }
  .playbook-card:hover .playbook-card-arrow {
    transform: translateX(3px);
    color: var(--dark-green);
  }

  /* Playbook viewer */
  .pb-viewer-bar {
    margin-bottom: 1rem;
  }

  .pb-viewer-back {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--dg-60);
    background: none;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 14px;
    cursor: pointer;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .pb-viewer-back:hover {
    color: var(--dark-green);
    border-color: var(--green);
  }

  .pb-iframe {
    width: 100%;
    border: none;
    min-height: 200px;
    background: var(--white);
    display: block;
  }

  /* ── EQUIPOS TABLE ── */
  .page-equipos { max-width: var(--wd-page-max-width); margin: 0 auto; }

  .equipos-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: visible;
    table-layout: fixed;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  }

  .equipos-table thead tr th:first-child { border-radius: 10px 0 0 0; }
  .equipos-table thead tr th:last-child  { border-radius: 0 10px 0 0; }
  .equipos-table tbody tr:last-child td:first-child { border-radius: 0 0 0 10px; }
  .equipos-table tbody tr:last-child td:last-child  { border-radius: 0 0 10px 0; }

  .equipos-table col.col-equipo   { width: 12%; }
  .equipos-table col.col-prior    { width: 12%; }
  .equipos-table col.col-miembros { width: 25%; }
  .equipos-table col.col-board    { width: 10%; }
  .equipos-table col.col-acciones { width: 41%; }

  .equipos-table thead th {
    background: var(--dark-green);
    color: var(--dg-40);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.7rem 1rem;
    text-align: left;
    border-bottom: 1px solid rgba(140,250,110,0.12);
  }

  .equipos-table thead th:last-child {
    text-align: right;
  }

  .equipos-table tbody td {
    padding: 0.6rem 1rem;
    font-size: 13px;
    color: var(--black);
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .equipos-table tbody tr:last-child td {
    border-bottom: none;
  }

  .equipos-table tbody tr:hover {
    background: var(--lg-40);
  }

  .equipo-name {
    font-weight: 700;
    color: var(--dark-green);
    font-size: 12.5px;
  }

  .equipo-members {
    font-size: 12px;
    color: var(--dg-60);
    line-height: 1.4;
    vertical-align: middle;
  }
  .equipo-members-legacy { font-style: italic; color: var(--dg-40); }
  .equipo-member-missing { color: #C0392B; text-decoration: line-through dotted; }

  .board-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--dark-green);
    text-decoration: none;
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--lg-40);
    transition: background 0.15s;
    white-space: nowrap;
  }

  .board-link:hover { background: var(--lg-80); }

  .btn-action {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: var(--white);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--dg-60);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    padding: 0;
    flex-shrink: 0;
  }

  .btn-action svg { width: 14px; height: 14px; flex-shrink: 0; }

  .btn-metrics:hover {
    background: var(--dark-green);
    color: var(--green);
    border-color: var(--dark-green);
  }

  .btn-estt:hover {
    background: var(--green);
    color: var(--dark-green);
    border-color: var(--green);
  }

  .btn-action:active { transform: scale(0.93); }

  .btn-add-team {
    background: var(--green);
    color: var(--dark-green);
    border-color: var(--green);
  }

  .btn-add-team:hover {
    background: var(--dark-green);
    color: var(--green);
    border-color: var(--dark-green);
  }

  .btn-delete-team:hover {
    background: #dc2626;
    color: #fff;
    border-color: #dc2626;
  }

  .btn-edit:hover {
    background: #f59e0b;
    color: #fff;
    border-color: #f59e0b;
  }

  .edit-input {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    padding: 4px 8px;
    border: 1px solid var(--dg-40);
    border-radius: 5px;
    width: 100%;
    height: 32px;
    box-sizing: border-box;
    background: #fff;
  }

  .edit-input:focus {
    outline: none;
    border-color: var(--dg-80);
    box-shadow: 0 0 0 2px rgba(0,0,0,0.05);
  }

  .edit-input.edit-error {
    border-color: #ef4444;
  }


  /* ── GLOBAL TOOLTIP ── */
  #global-tip {
    position: fixed;
    pointer-events: none;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    white-space: nowrap;
    background: var(--dark-green);
    color: var(--green);
    padding: 4px 8px;
    border-radius: 5px;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.12s;
  }
  #global-tip.visible { opacity: 1; }

  .actions-cell {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: flex-end;
  }

  .action-group {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .last-update {
    font-size: 9px;
    font-weight: 600;
    color: var(--dg-40);
    white-space: nowrap;
    min-width: 52px;
    text-align: center;
  }

  .last-update.stale {
    color: #C0392B;
  }

  /* Legacy — kept for the client-sites/Hipra and client-sites/Woffu pages
     that still use the grouped dept-header layout. The main SaaS app uses
     the new teams-table below. */
  .dept-header {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dark-green);
    margin-top: 2rem;
    margin-bottom: 0.6rem;
    padding-left: 2px;
  }
  .dept-header:first-child { margin-top: 0; }

  /* ── TEAMS v2 (flat table + dept pills + search + filter chips) ── */
  .teams-toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 18px;
    flex-wrap: wrap;
  }
  .teams-search {
    position: relative;
    flex: 0 0 280px;
    max-width: 100%;
  }
  .teams-search svg {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    color: var(--dg-60);
    pointer-events: none;
  }
  .teams-search-input {
    width: 100%;
    height: 34px;
    padding: 0 12px 0 32px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: var(--black);
    background: var(--white);
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
  }
  .teams-search-input:focus {
    outline: none;
    border-color: var(--dark-green);
    box-shadow: 0 0 0 3px rgba(31,110,67,0.08);
  }

  .teams-dept-chips {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    min-width: 0;
  }
  .teams-dept-select {
    height: 34px;
    padding: 0 32px 0 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--black);
    background: var(--white);
    min-width: 240px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .teams-dept-select:focus {
    outline: none;
    border-color: var(--dark-green);
    box-shadow: 0 0 0 3px rgba(31,110,67,0.08);
  }

  /* ══════════════════════════════════════════════════════════
     CANONICAL TABLE — shared base for admin / equipos / metrics
     Change here → applies everywhere. Per-table rules below
     keep ONLY genuine deviations (column widths, alignment,
     special states). Any new table: add `.ui-table` to opt in.
     ══════════════════════════════════════════════════════════ */
  .ui-table-wrap,
  .teams-table-wrap,
  .admin-table-wrap,
  .dm-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--white);
  }
  .ui-table,
  .teams-table,
  .admin-table,
  .dm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background: transparent;
  }
  .ui-table thead th,
  .teams-table thead th,
  .admin-table th,
  .dm-table thead th {
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: var(--dg-60);
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-subtle);
    white-space: nowrap;
  }
  .ui-table tbody td,
  .teams-table tbody td,
  .admin-table td,
  .dm-table tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    color: var(--black);
  }
  .ui-table tbody tr:hover td,
  .teams-table tbody tr:hover td,
  .admin-table tbody tr:hover td,
  .dm-table tbody tr:hover td {
    background: var(--bg-subtle);
  }
  .ui-table tbody tr:last-child td,
  .teams-table tbody tr:last-child td,
  .admin-table tr:last-child td,
  .dm-table tbody tr:last-child td {
    border-bottom: none;
  }

  /* Per-table specifics */
  .teams-table .teams-col-dept    { width: 180px; }
  .teams-table .teams-col-prior   { width: 160px; }
  .teams-table .teams-col-members { width: 30%; }
  .teams-table .teams-col-board   { width: 110px; }
  .teams-table .teams-col-actions { width: 1%; white-space: nowrap; text-align: right; }

  .dept-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--lg-40);
    color: var(--dark-green);
    font-size: 11.5px;
    font-weight: 600;
    border: 1px solid var(--lg-60);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .member-chip {
    display: inline-block;
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--dark-green);
    color: var(--white);
    font-size: 11px;
    font-weight: 700;
    margin-right: 8px;
    text-align: center;
    line-height: 1.5;
  }
  .teams-table .dim { color: var(--dg-40); }

  .teams-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--dg-60);
    font-size: 13px;
    background: var(--bg-subtle);
    border-radius: 12px;
    margin-top: 6px;
  }

  /* Legacy toolbar — kept for Hipra/Woffu client sites */
  .equipos-toolbar {
    display: flex;
    gap: 4px;
    margin-bottom: 1.5rem;
    align-items: center;
    justify-content: flex-end;
  }

  .btn-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dg-60);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    position: relative;
  }

  .btn-icon:hover {
    background: var(--dark-green);
    color: var(--green);
    border-color: var(--dark-green);
  }

  .btn-icon svg { width: 16px; height: 16px; }

  /* ── ESTT MODAL ── */
  .estt-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
  }
  .estt-overlay.open { display: flex; }

  .estt-modal {
    background: var(--white);
    border-radius: 14px;
    width: 620px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 60px rgba(0,0,0,0.25);
    overflow: hidden;
  }

  .estt-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    background: var(--bg-subtle);
    color: var(--black);
    border-bottom: 1px solid var(--border);
  }

  .estt-modal-title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.2px;
  }

  .estt-modal-title em {
    font-style: normal;
    color: var(--green);
  }

  .estt-close {
    width: 28px; height: 28px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: none;
    color: var(--dg-60);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: background 0.15s, color 0.15s;
  }
  .estt-close:hover { background: var(--lg-40); color: var(--black); }

  .estt-modal-body {
    overflow-y: auto;
    padding: 0;
    flex: 1;
  }

  .estt-category-header {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--lg-40);
    color: var(--dg-80);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.6rem 1.5rem;
    border-bottom: 1px solid var(--border);
  }

  .estt-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0.85rem 1.5rem;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    color: var(--black);
    line-height: 1.45;
  }

  .estt-item-label { flex: 1; }

  /* Toggle switch */
  .toggle {
    position: relative;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
  }

  .toggle input { opacity: 0; width: 0; height: 0; position: absolute; }

  .toggle-track {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: #E57373;
    cursor: pointer;
    transition: background 0.2s;
  }

  .toggle-track::before {
    content: 'KO';
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: rgba(255,255,255,0.7);
    transition: opacity 0.2s;
  }

  .toggle-track::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--white);
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  }

  .toggle input:checked + .toggle-track {
    background: var(--green);
  }

  .toggle input:checked + .toggle-track::before {
    content: 'OK';
    left: auto;
    right: 6px;
    color: var(--dark-green);
  }

  .toggle input:checked + .toggle-track::after {
    transform: translateX(20px);
  }

  .estt-modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
  }

  .estt-save {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 24px;
    border-radius: 8px;
    border: none;
    background: var(--dark-green);
    color: var(--white);
    cursor: pointer;
    transition: background 0.15s;
  }
  .estt-save:hover { background: var(--dg-80); }

  /* ── ESTT MATRIX TAB ── */
  .estt-matrix-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  }

  .estt-matrix {
    border-collapse: separate;
    border-spacing: 0;
  }

  .estt-matrix thead th {
    background: var(--dark-green);
    color: var(--dg-40);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.6rem 0.5rem;
    text-align: center;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 2;
    white-space: normal;
    word-break: break-word;
    line-height: 1.3;
    vertical-align: bottom;
    width: 90px;
    min-width: 90px;
    max-width: 90px;
  }

  .estt-matrix thead .team-date {
    display: block;
    font-size: 8px;
    font-weight: 400;
    color: var(--dg-60);
    letter-spacing: 0.04em;
    margin-top: 2px;
  }

  .estt-matrix thead th:first-child {
    text-align: left;
    position: sticky;
    left: 0;
    z-index: 3;
    min-width: 300px;
    max-width: 300px;
    width: 300px;
  }



  .estt-matrix tbody td {
    padding: 0.55rem 0.5rem;
    border-bottom: 1px solid var(--border);
    text-align: center;
    vertical-align: middle;
    font-size: 12px;
    width: 90px;
    min-width: 90px;
    max-width: 90px;
  }

  .estt-matrix tbody td:first-child {
    text-align: left;
    font-size: 12px;
    color: var(--black);
    background: var(--white);
    position: sticky;
    left: 0;
    z-index: 1;
    border-right: 1px solid var(--border);
    white-space: normal;
    line-height: 1.4;
    min-width: 300px;
    max-width: 300px;
    width: 300px;
    box-shadow: 2px 0 4px rgba(0,0,0,0.05);
  }

  .estt-matrix .dept-group-header {
    background: var(--lg-60) !important;
    color: var(--green) !important;
    font-size: 8px;
    letter-spacing: 0.1em;
    text-align: center;
    border-bottom: 1px solid rgba(140,250,110,0.25) !important;
    border-left: 1px solid rgba(140,250,110,0.15);
    white-space: normal;
    word-break: break-word;
    line-height: 1.4;
    padding: 6px 4px !important;
    overflow: hidden;
  }

  .estt-matrix .cat-row td:first-child {
    background: var(--lg-40) !important;
    color: var(--dg-80) !important;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: left;
    padding: 0.45rem 0.8rem;
    border-bottom: 1px solid var(--border);
    position: sticky;
    left: 0;
    z-index: 2;
    box-shadow: 2px 0 4px rgba(0,0,0,0.05);
  }

  .estt-matrix .cat-row td {
    background: var(--lg-40) !important;
    color: var(--dg-80) !important;
    padding: 0.45rem 0.8rem;
    border-bottom: 1px solid var(--border);
  }

  .dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
  }
  .dot-ok  { background: var(--green); }
  .dot-ko  { background: #E57373; }
  .dot-na  { background: var(--border); }

  /* ── TOAST ── */
  .toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--dark-green);
    color: var(--green);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s, transform 0.25s;
    z-index: 9999;
  }

  .toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  .toast-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--green);
    color: var(--dark-green);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    flex-shrink: 0;
  }

  /* ── SUMMARY COLUMN (row pass rate) ── */
  .summary-col {
    min-width: 100px !important;
    width: 100px !important;
  }

  .summary-cell {
    font-size: 11px;
    color: var(--dg-60);
    white-space: nowrap;
    padding: 0.4rem 0.6rem !important;
    min-width: 100px !important;
    width: 100px !important;
  }

  .summary-cell strong {
    font-weight: 800;
    font-size: 13px;
  }

  .summary-sticky {
    position: sticky;
    left: 300px;
    z-index: 1;
    background: var(--white);
    border-right: 1px solid var(--border);
    box-shadow: 2px 0 4px rgba(0,0,0,0.05);
  }

  .estt-matrix thead .summary-sticky {
    background: var(--dark-green);
    z-index: 3;
  }

  .estt-matrix .score-row .summary-sticky {
    background: var(--lg-60);
    z-index: 3;
  }

  .estt-matrix .cat-row .summary-sticky {
    background: var(--dark-green) !important;
    z-index: 1;
  }

  .score-bar {
    display: block;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    margin-top: 4px;
    overflow: hidden;
  }

  .score-fill {
    display: block;
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s;
  }

  .score-good .score-fill { background: var(--green); }
  .score-good strong { color: var(--dark-green); }
  .score-mid .score-fill { background: #F5B041; }
  .score-mid strong { color: #B7950B; }
  .score-bad .score-fill { background: #E57373; }
  .score-bad strong { color: #C0392B; }

  /* ── SCORE ROW (team totals) ── */
  .score-row th {
    border-top: 2px solid rgba(140,250,110,0.25);
    background: var(--lg-60) !important;
    padding: 0.5rem 0.4rem;
  }

  .score-row-label {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--dg-60) !important;
    background: var(--lg-60) !important;
    position: sticky;
    left: 0;
    z-index: 3;
    text-align: left !important;
    padding-left: 0.8rem !important;
  }

  .team-score {
    font-size: 11px;
    color: var(--dg-60);
    white-space: nowrap;
    line-height: 1.3;
  }

  .team-score strong {
    display: block;
    font-size: 16px;
    font-weight: 800;
  }

  .score-of {
    font-size: 10px;
    color: var(--dg-40);
  }

  .score-pct {
    display: block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-top: 2px;
  }

  .score-good .score-pct { color: var(--dark-green); }
  .score-good strong { color: var(--dark-green) !important; }
  .score-mid .score-pct { color: #B7950B; }
  .score-bad .score-pct { color: #C0392B; }

  .estt-empty {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--dg-60);
    font-size: 14px;
  }

  .estt-empty-icon {
    font-size: 32px;
    margin-bottom: 0.75rem;
    opacity: 0.4;
  }

  /* ── METRICS MODAL ── */
  .metrics-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border);
  }

  .metrics-field label {
    display: inline;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--dg-60);
    margin-bottom: 4px;
  }

  .metric-tip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
    font-size: 8px;
    font-weight: 700;
    color: var(--dg-60);
    border: 1.5px solid var(--dg-60);
    border-radius: 50%;
    cursor: help;
    margin-left: 3px;
    vertical-align: middle;
    position: relative;
    top: -1px;
  }

  .metric-tooltip {
    position: fixed;
    background: var(--black);
    color: #fff;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.4;
    padding: 8px 12px;
    border-radius: 6px;
    width: 260px;
    z-index: 10000;
    pointer-events: none;
  }

  .metrics-field input {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 7px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: var(--black);
    outline: none;
    transition: border-color 0.15s;
  }

  .metrics-field input:focus {
    border-color: var(--green);
  }

  .metrics-mode-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0 2px;
  }
  .metrics-mode-label {
    font-size: 13px;
    color: var(--ink, #0C140A);
    font-weight: 500;
  }

  /* Members picker (team edit modal) */
  .mt-members-field { grid-column: 1 / -1; }
  .mt-members-picker { position: relative; }
  .mt-members-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    min-height: 32px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--white);
    margin-bottom: 6px;
  }
  .mt-members-empty {
    font-size: 11px;
    color: var(--dg-40);
    padding: 4px 6px;
    line-height: 1.8;
  }
  .mt-member-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 4px 3px 10px;
    background: var(--lg-40);
    color: var(--dark-green);
    border: 1px solid var(--lg-60);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
  }
  .mt-member-chip-x {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.08);
    color: var(--dg-80);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .mt-member-chip-x:hover { background: rgba(192,57,43,0.25); color: #C0392B; }
  .mt-members-search {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 7px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: var(--black);
    outline: none;
    transition: border-color 0.15s;
  }
  .mt-members-search:focus { border-color: var(--green); }
  .mt-members-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    z-index: 50;
    max-height: 260px;
    overflow-y: auto;
  }
  .mt-members-dropdown.open { display: block; }
  .mt-members-dropdown-item {
    padding: 8px 12px;
    font-size: 12px;
    color: var(--black);
    cursor: pointer;
    border-bottom: 1px solid var(--border);
  }
  .mt-members-dropdown-item:last-child { border-bottom: none; }
  .mt-members-dropdown-item:hover { background: var(--bg-subtle); }
  .mt-members-dropdown-empty {
    padding: 12px;
    font-size: 12px;
    color: var(--dg-60);
    text-align: center;
  }

  .metrics-add-row {
    padding: 0.75rem 1.5rem;
    display: flex;
    justify-content: flex-end;
  }

  .metrics-history {
    padding: 0 1.5rem 1rem;
    max-height: 250px;
    overflow-y: auto;
  }

  .metrics-history-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--dg-60);
    margin-bottom: 6px;
    padding: 0.75rem 1.5rem 0;
  }

  .mh-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
  }

  .mh-table th {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dg-60);
    padding: 6px 8px;
    text-align: center;
    border-bottom: 1px solid var(--border);
  }

  .mh-table th:first-child { text-align: left; }

  .mh-table td {
    padding: 6px 8px;
    text-align: center;
    border-bottom: 1px solid var(--border);
    color: var(--black);
  }

  .mh-table td:first-child { text-align: left; font-weight: 600; }

  .mh-table .commitment { font-weight: 700; }

  .mh-delete {
    background: none;
    border: none;
    color: var(--dg-40);
    cursor: pointer;
    font-size: 14px;
    padding: 2px 6px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
  }
  .mh-delete:hover { color: #E57373; background: rgba(229,115,115,0.1); }

  /* ── DASHBOARD ── */
  .dm-cards {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    margin-bottom: 1.5rem;
  }

  .dm-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.25rem;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    transition: box-shadow 0.2s, transform 0.2s;
  }

  .dm-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
    transform: translateY(-1px);
  }

  .dm-card-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--dg-80);
    margin-bottom: 6px;
  }

  .dm-card-value {
    font-size: 28px;
    font-weight: 800;
    color: var(--dark-green);
    line-height: 1;
  }

  .dm-card-sub {
    font-size: 11px;
    color: var(--dg-40);
    margin-top: 4px;
  }

  /* Dashboard table — base inherited from .ui-table (see top of tables block). */
  .dm-table thead th,
  .dm-table tbody td {
    text-align: center;
    white-space: nowrap;
  }
  .dm-table thead th:first-child,
  .dm-table tbody td:first-child {
    text-align: left;
  }
  .dm-table tbody td:first-child {
    font-weight: 700;
    color: var(--dark-green);
  }

  .dm-pill {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 100px;
  }

  .dm-pill.good { background: var(--green); color: var(--dark-green); }
  .dm-pill.mid  { background: #F5D76E; color: #7D6608; }
  .dm-pill.bad  { background: #F1948A; color: #78281F; }

  .wip-ok  { color: var(--dark-green); font-weight: 700; }
  .wip-bad { color: #C0392B; font-weight: 700; }

  /* WIP Peak / Limit (and Retro Tareas Hechas / Total) appear as two cols
     but read as one — primary value right-aligned, secondary left-aligned
     with a "/ N" prefix and dimmer color. */
  .dm-th-wip { text-align: center; }
  .dm-table tbody td.dm-col-peak,
  .mh-table tbody td.dm-col-peak,
  .rt-history-table tbody td.dm-col-peak {
    padding-right: 4px;
    text-align: right;
  }
  .dm-table tbody td.dm-col-limit,
  .mh-table tbody td.dm-col-limit,
  .rt-history-table tbody td.dm-col-limit {
    padding-left: 4px;
    text-align: left;
    color: var(--dg-60);
    font-weight: 600;
  }

  /* Sparklines */
  .member-count {
    font-size: 11px;
    font-weight: 400;
    color: var(--dg-40);
  }

  .trust-dots {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    vertical-align: middle;
  }

  .trust-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
  }

  /* Expandable detail rows — state bg applied to td so it wins over base td hover */
  .dm-table tbody tr.dm-team-row { cursor: pointer; }
  .dm-table tbody tr.dm-row-stale td { background: rgba(192,57,43,0.08); }
  .dm-table tbody tr.dm-row-stale:hover td { background: rgba(192,57,43,0.15); }

  /* Teams without metrics reported */
  .dm-table tbody tr.dm-row-nodata { cursor: default; color: var(--dg-40); }
  .dm-table tbody tr.dm-row-nodata td.dm-nodata { color: var(--dg-40); }
  .dm-table tbody tr.dm-row-nodata td:first-child { color: var(--dg-60); font-weight: 600; }

  .dm-row-toggle {
    display: inline-block;
    width: 16px;
    font-size: 10px;
    color: var(--dg-40);
    transition: transform 0.2s;
    margin-right: 6px;
  }

  .dm-team-row.expanded .dm-row-toggle { transform: rotate(90deg); }

  .dm-detail-row { display: none; }
  .dm-detail-row.open { display: table-row; }

  .dm-detail-row td {
    padding: 1.25rem !important;
    background: #FAFFF8;
    border-bottom: 2px solid var(--border);
  }

  .dm-charts {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
  }

  .dm-chart {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1rem;
    overflow: hidden;
  }

  .dm-chart-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--dg-60);
    margin-bottom: 8px;
  }

  .dm-chart svg {
    width: 100%;
    height: 140px;
    display: block;
  }

  /* Department filter */
  .dm-filter-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 1rem;
    flex-wrap: wrap;
  }

  .dm-filter-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--dg-60);
  }

  .dm-filter-select {
    height: 34px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    padding: 0 32px 0 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--white);
    color: var(--black);
    min-width: 220px;
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
  }

  .dm-filter-select:focus {
    border-color: var(--dark-green);
    box-shadow: 0 0 0 3px rgba(31,110,67,0.08);
  }

  .dm-note {
    font-size: 12px;
    color: var(--dg-60);
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 12px;
  }
  .dm-table thead tr.dm-thead-note th {
    text-align: right;
    font-weight: 500;
    font-size: 11px;
    color: var(--dg-60);
    background: var(--bg-subtle);
    padding: 8px 16px;
    border-bottom: 1px solid var(--border);
    white-space: normal;
  }

  .dm-empty {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--dg-60);
    font-size: 14px;
  }

  /* ── PASSWORD WALL ── */
  .pw-wall {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: var(--dark-green);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1.5rem;
  }

  .pw-wall.hidden { display: none; }

  /* ── LOGIN SCREEN (SaaS) ── */
  .login-screen {
    position: fixed;
    inset: 0;
    background: var(--dark-green);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
  }

  .login-screen.hidden { display: none; }

  /* Hide app until authenticated */
  .app-layout.auth-pending { display: none; }

  .login-card {
    background: var(--white);
    border-radius: 16px;
    padding: 2.5rem 2rem;
    width: 380px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    text-align: center;
  }

  .login-card .pw-logo {
    margin: 0 auto 1rem;
  }

  .login-title {
    font-size: 24px;
    font-weight: 800;
    color: var(--black);
    margin-bottom: 4px;
  }

  .login-subtitle {
    font-size: 13px;
    color: var(--dg-60);
    margin-bottom: 1.5rem;
  }

  .login-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 1.25rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
  }

  .login-tab {
    flex: 1;
    padding: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    border: none;
    background: var(--bg-subtle);
    color: var(--dg-60);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
  }

  .login-tab.active {
    background: var(--dark-green);
    color: var(--green);
  }

  .login-panel {
    display: none;
  }

  .login-panel.active {
    display: block;
  }

  .login-input {
    width: 100%;
    padding: 10px 14px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 10px;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.15s;
  }

  .login-input:focus {
    border-color: var(--dark-green);
  }

  .login-btn {
    width: 100%;
    padding: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    background: var(--dark-green);
    color: var(--white);
    cursor: pointer;
    transition: background 0.15s;
    margin-top: 4px;
  }

  .login-btn:hover {
    background: var(--dg-80);
  }

  .login-links {
    margin-top: 12px;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
  }

  .login-links a {
    color: var(--dg-80);
    text-decoration: none;
  }

  .login-links a:hover {
    text-decoration: underline;
  }

  .pw-logo {
    width: 56px;
    height: 56px;
    background: var(--green);
    color: var(--dark-green);
    font-weight: 800;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
  }

  .pw-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--white);
    letter-spacing: -0.3px;
  }

  .pw-title em {
    font-style: normal;
    color: var(--green);
  }

  .pw-form {
    display: flex;
    gap: 8px;
    align-items: center;
  }

  .pw-input {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    padding: 10px 16px;
    border: 2px solid rgba(140,250,110,0.2);
    border-radius: 10px;
    background: rgba(255,255,255,0.05);
    color: var(--white);
    outline: none;
    width: 240px;
    transition: border-color 0.2s;
  }

  .pw-input:focus { border-color: var(--green); }
  .pw-input::placeholder { color: var(--dg-40); }

  .pw-btn {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    background: var(--green);
    color: var(--dark-green);
    cursor: pointer;
    transition: background 0.15s;
  }

  .pw-btn:hover { background: var(--lg-80); }

  .pw-error {
    font-size: 12px;
    color: #E57373;
    height: 16px;
  }

  /* ── ADMIN PANEL ── */
  .admin-panel {
    max-width: var(--wd-page-max-width);
  }

  .admin-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
  }

  .admin-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--black);
  }

  .admin-tabs {
    display: flex;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
  }

  .admin-tab {
    padding: 8px 20px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    border: none;
    background: var(--bg-subtle);
    color: var(--dg-60);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
  }

  .admin-tab.active {
    background: var(--dark-green);
    color: var(--green);
  }

  .admin-section {
    display: none;
  }

  .admin-section.active {
    display: block;
  }

  .admin-toolbar {
    margin-bottom: 1rem;
  }

  .admin-action-btn {
    padding: 8px 18px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    background: var(--dark-green);
    color: var(--white);
    cursor: pointer;
    transition: background 0.15s;
  }

  .admin-action-btn:hover {
    background: var(--dg-80);
  }

  /* admin-table — base inherited from .ui-table (see top of tables block). */

  /* Stub users (sin email) en la tabla Users */
  .user-stub-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(245, 166, 35, 0.15);
    color: #8A5A00;
    border: 1px solid rgba(245, 166, 35, 0.35);
  }

  .admin-table code {
    background: var(--bg-subtle);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    color: var(--dg-80);
  }

  .admin-btn-sm {
    padding: 4px 12px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--white);
    color: var(--black);
    cursor: pointer;
    transition: background 0.15s;
  }

  .admin-btn-sm:hover {
    background: var(--bg-subtle);
  }

  .admin-btn-danger {
    color: #dc2626;
    border-color: #fecaca;
  }

  .admin-btn-danger:hover {
    background: #fef2f2;
  }

  .admin-role-select {
    padding: 4px 8px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--white);
    cursor: pointer;
  }
  .role-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    border: 1px solid transparent;
  }
  .role-badge.role-super {
    background: var(--dark-green);
    color: var(--white);
    border-color: var(--dark-green);
  }

  .admin-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--dg-60);
    margin-bottom: 4px;
  }

  /* ── CYCLE REPORTS ── */
  .report-section {
    padding: 1.25rem 1.75rem;
    border-top: 1px solid var(--border);
  }

  .report-section-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--dg-60);
    margin-bottom: 0.75rem;
  }

  .report-summary {
    font-size: 14px;
    line-height: 1.7;
    color: var(--black);
  }

  .report-metrics {
    display: flex;
    gap: 0;
    align-items: center;
    justify-content: center;
    background: var(--bg-subtle);
    border-radius: 12px;
    padding: 1.25rem 1rem;
  }

  .report-metric-item {
    flex: 1;
    text-align: center;
  }

  .report-metric-value {
    font-size: 28px;
    font-weight: 800;
    color: var(--dark-green);
  }

  .report-metric-label {
    font-size: 12px;
    color: var(--dg-60);
    margin-top: 2px;
  }

  .report-highlights {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .report-highlight-row {
    background: var(--bg-subtle);
    border-radius: 10px;
    padding: 1rem 1.25rem;
  }

  .report-highlight-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
  }

  .report-highlight-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--black);
  }

  .report-highlight-desc {
    font-size: 13px;
    line-height: 1.6;
    color: var(--dg-80);
  }

  .l-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    text-transform: capitalize;
  }

  .pill-success {
    background: #D1FAE5;
    color: #065F46;
  }

  .pill-risk {
    background: #FEE2E2;
    color: #991B1B;
  }

  .pill-insight {
    background: #DBEAFE;
    color: #1E40AF;
  }

  .report-nextsteps {
    font-size: 14px;
    line-height: 1.7;
    color: var(--black);
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, var(--lg-40), var(--bg-subtle));
    border-radius: 10px;
    border-left: 3px solid var(--green);
  }

  .report-upcoming {
    padding: 3rem 1.75rem;
    text-align: center;
    color: var(--dg-60);
  }

  .report-upcoming-icon {
    font-size: 32px;
    margin-bottom: 8px;
    opacity: 0.3;
  }

  .report-upcoming-text {
    font-size: 14px;
    margin-bottom: 12px;
  }

  /* ── CYCLE NEW SCHEMA (constraint · quotes · powerups · outcomes) ── */
  .cycle-constraint {
    font-size: 15px;
    line-height: 1.6;
    color: var(--black);
    font-weight: 600;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, var(--lg-60), var(--bg-subtle));
    border-left: 3px solid var(--dark-green);
    border-radius: 10px;
    font-style: italic;
  }

  .cycle-quotes {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .cycle-quote {
    background: var(--bg-subtle);
    border-left: 3px solid var(--dg-40);
    border-radius: 8px;
    padding: 0.85rem 1.1rem;
  }

  .cycle-quote.after { border-left-color: var(--dark-green); background: var(--lg-40); }

  .cycle-quote-text {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--black);
    font-style: italic;
  }
  .cycle-quote-text::before { content: '“'; color: var(--dg-60); margin-right: 2px; }
  .cycle-quote-text::after  { content: '”'; color: var(--dg-60); margin-left: 2px; }

  .cycle-quote-meta {
    display: flex;
    gap: 8px;
    align-items: baseline;
    margin-top: 6px;
    font-size: 11px;
    color: var(--dg-60);
  }
  .cycle-quote-author { font-weight: 700; color: var(--dg-80); font-style: normal; }
  .cycle-quote-source { font-style: normal; }
  .cycle-quote-source::before { content: '· '; }

  .cycle-powerups {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .cycle-powerup-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px 6px 8px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--white);
    font-size: 12.5px;
    color: var(--black);
    max-width: 100%;
  }

  .cycle-powerup-id {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--dg-60);
    background: var(--bg-subtle);
    padding: 2px 6px;
    border-radius: 4px;
    flex-shrink: 0;
  }

  .cycle-powerup-chip.pillar-delivery { border-color: #FCD34D; background: #FFFBEB; }
  .cycle-powerup-chip.pillar-delivery .cycle-powerup-id { background: #FDE68A; color: #92400E; }
  .cycle-powerup-chip.pillar-impact   { border-color: #A5B4FC; background: #EEF2FF; }
  .cycle-powerup-chip.pillar-impact .cycle-powerup-id   { background: #C7D2FE; color: #3730A3; }
  .cycle-powerup-chip.pillar-people   { border-color: #F9A8D4; background: #FDF2F8; }
  .cycle-powerup-chip.pillar-people .cycle-powerup-id   { background: #FBCFE8; color: #9D174D; }

  .cycle-empty {
    font-size: 12.5px;
    color: var(--dg-60);
    font-style: italic;
  }

  /* Modal: quote repeater row */
  .cycle-modal-quote-row {
    display: grid;
    grid-template-columns: 1fr 180px 160px 32px;
    gap: 8px;
    margin-bottom: 8px;
    align-items: start;
  }
  .cycle-modal-quote-row textarea {
    resize: vertical;
    min-height: 58px;
  }

  /* Modal: powerup picker */
  .pu-picker {
    border: 1px solid var(--border);
    border-radius: 10px;
    max-height: 260px;
    overflow-y: auto;
    background: var(--bg-subtle);
  }
  .pu-picker-group {
    padding: 8px 10px 4px;
  }
  .pu-picker-group-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--dg-60);
    margin-bottom: 4px;
  }
  .pu-picker-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 6px;
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
  }
  .pu-picker-item:hover { background: var(--white); }
  .pu-picker-item input[type="checkbox"] { margin: 0; flex-shrink: 0; }
  .pu-picker-item .pu-id {
    font-size: 10px;
    font-weight: 800;
    color: var(--dg-60);
    background: var(--white);
    border: 1px solid var(--border);
    padding: 1px 6px;
    border-radius: 4px;
    flex-shrink: 0;
  }
  .pu-picker-item .pu-title {
    font-size: 12.5px;
    color: var(--black);
    flex: 1;
    line-height: 1.35;
  }

  /* ── PLAYBOOK MARKDOWN CONTENT ── */
  .playbook-content {
    padding: 2rem 2.5rem;
    font-size: 15px;
    line-height: 1.8;
    color: var(--black);
    max-width: 800px;
  }

  .playbook-content h1 {
    font-size: 28px;
    font-weight: 800;
    margin: 2rem 0 1rem;
    color: var(--dark-green);
    border-bottom: 2px solid var(--green);
    padding-bottom: 0.5rem;
  }

  .playbook-content h2 {
    font-size: 22px;
    font-weight: 700;
    margin: 1.75rem 0 0.75rem;
    color: var(--dark-green);
  }

  .playbook-content h3 {
    font-size: 17px;
    font-weight: 700;
    margin: 1.5rem 0 0.5rem;
    color: var(--dg-80);
  }

  .playbook-content p {
    margin-bottom: 1rem;
  }

  .playbook-content ul, .playbook-content ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
  }

  .playbook-content li {
    margin-bottom: 0.4rem;
  }

  .playbook-content blockquote {
    border-left: 4px solid var(--green);
    margin: 1.25rem 0;
    padding: 0.75rem 1.25rem;
    background: var(--lg-40);
    border-radius: 0 8px 8px 0;
    color: var(--dg-80);
    font-style: italic;
  }

  .playbook-content code {
    background: var(--bg-subtle);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 13px;
    color: var(--dg-80);
  }

  .playbook-content pre {
    background: var(--dark-green);
    color: var(--green);
    padding: 1.25rem;
    border-radius: 10px;
    overflow-x: auto;
    margin-bottom: 1rem;
  }

  .playbook-content pre code {
    background: none;
    padding: 0;
    color: inherit;
  }

  .playbook-content img {
    max-width: 100%;
    border-radius: 10px;
    margin: 1rem 0;
  }

  .playbook-content strong {
    font-weight: 700;
    color: var(--dark-green);
  }

  .playbook-content a {
    color: var(--dg-80);
    text-decoration: underline;
  }

  .playbook-content hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 2rem 0;
  }

  /* FAQ accordions via <details> */
  .playbook-content details {
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 0.75rem;
    overflow: hidden;
  }

  .playbook-content details summary {
    padding: 0.75rem 1.25rem;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .playbook-content details summary::before {
    content: '▸';
    transition: transform 0.15s;
  }

  .playbook-content details[open] summary::before {
    transform: rotate(90deg);
  }

  .playbook-content details > *:not(summary) {
    padding: 0 1.25rem 0.75rem;
  }

  /* Checkbox homework items */
  .playbook-content input[type="checkbox"] {
    margin-right: 6px;
    accent-color: var(--dark-green);
  }

  .playbook-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
    font-size: 13px;
  }

  .playbook-content th, .playbook-content td {
    padding: 8px 12px;
    border: 1px solid var(--border);
    text-align: left;
  }

  .playbook-content th {
    background: var(--bg-subtle);
    font-weight: 600;
  }

  .pb-editor-textarea {
    width: 100%;
    box-sizing: border-box;
  }

  .site-footer {
    text-align: center;
    font-size: 11px;
    color: var(--dg-60);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding-top: 2rem;
    border-top: 1px solid var(--border);
    margin-top: 1rem;
  }



  /* ── CONTEXT SLIDE ── */
  .context-grid {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 2rem;
    align-items: start;
  }
  .context-text {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    font-size: 13.5px;
    color: var(--dg-60);
    line-height: 1.75;
  }
  .context-text strong { color: var(--black); font-weight: 600; }
  .context-tags {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .ctx-tag {
    padding: 0.85rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: #fafaf8;
  }
  .ctx-tag.accent {
    background: var(--dark-green);
    border-color: rgba(140,250,110,0.15);
  }
  .ctx-tag-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--dg-60);
    margin-bottom: 3px;
  }
  .ctx-tag.accent .ctx-tag-label { color: var(--dg-60); }
  .ctx-tag-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--black);
    line-height: 1.4;
  }
  .ctx-tag.accent .ctx-tag-value { color: var(--green); }


  .workshop-photo {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border);
  }
  .workshop-photo img {
    width: 100%;
    height: 190px;
    object-fit: cover;
    object-position: center 30%;
    display: block;
  }
  .workshop-caption {
    padding: 8px 10px;
    font-size: 11px;
    color: var(--dg-60);
    background: #fafaf8;
    border-top: 1px solid var(--border);
    letter-spacing: 0.02em;
  }
  /* ── PROBLEMS SLIDE ── */
  .problems-list { display: flex; flex-direction: column; gap: 0; }
  .problem-row {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 2rem;
    padding: 1.25rem 0;
    align-items: start;
  }
  .problem-divider { height: 1px; background: var(--border); }
  .problem-num {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--dg-40);
    margin-bottom: 4px;
  }
  .problem-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--black);
    line-height: 1.25;
    margin-bottom: 4px;
  }
  .problem-sub {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--dg-60);
  }
  .problem-bullets { display: flex; flex-direction: column; gap: 0.6rem; }
  .pbullet {
    font-size: 13px;
    color: var(--dg-60);
    line-height: 1.65;
    padding-left: 12px;
    border-left: 2px solid var(--lg-80);
  }
  .pbullet strong { color: var(--black); font-weight: 600; }

  /* ── QUOTES SLIDE ── */
  .quotes-section-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dg-60);
    margin-bottom: 0.75rem;
  }
  .quotes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .quote-card {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: #fafaf8;
  }
  .quote-mark {
    font-size: 28px;
    font-weight: 800;
    color: var(--lg-80);
    line-height: 1;
  }
  .quote-text {
    font-size: 12.5px;
    color: var(--dg-60);
    line-height: 1.65;
    flex: 1;
    font-style: italic;
  }
  .quote-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 4px;
    align-self: flex-start;
  }
  .quote-tag.multitarea { background: #FAECE7; color: #993C1D; }
  .quote-tag.priorizacion { background: var(--blue-pale, #E6F1FB); color: #185FA5; }
  .quote-tag.interdep { background: var(--teal-pale, #E1F5EE); color: #0F6E56; }

  /* ── PHASE BLOCKS (estructura + tareas) ── */
  .cycle-structure { display: flex; flex-direction: column; gap: 0; }

  .phase-block {
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
  }

  .phase-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0.9rem 1.25rem;
    background: var(--dark-green);
    border-bottom: 1px solid rgba(140,250,110,0.12);
  }

  .phase-dot {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
  }
  .phase-dot.done { background: var(--green); color: var(--dark-green); }
  .phase-dot.next { background: rgba(140,250,110,0.1); color: var(--dg-60); border: 1px solid rgba(140,250,110,0.2); }

  .phase-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--dg-60);
    margin-bottom: 1px;
  }

  .phase-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--white);
  }

  .phase-tasks { padding: 0 1.25rem; }

  .phase-connector {
    width: 1px;
    height: 16px;
    background: var(--border);
    margin-left: 1.9rem;
  }

  @media (max-width: 680px) {
    .cover-body { grid-template-columns: 1fr; }
    .cover-divider { display: none; }
    .obj-grid { grid-template-columns: 1fr; }
    .tasks-cols { grid-template-columns: 1fr; }
    .l-row { grid-template-columns: 1fr; }
    .l-type { border-right: none; border-bottom: 1px solid var(--border); }
    .page { padding: 1.5rem 1rem 3rem; }
    .site-nav { padding: 0 1rem; }
  }

  /* ── CONTENT MAP (admin matrix, layout por pilar — replica del blueprint) ── */
  .cm-empty {
    padding: 3rem 2rem;
    text-align: center;
    border: 1px dashed var(--border);
    border-radius: 12px;
    background: #FAFBFB;
  }
  .cm-pillar-section { margin-bottom: 2rem; margin-top: 1.25rem; }
  .cm-pillar-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--border);
  }
  .cm-pillar-badge {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid;
  }
  .cm-pillar-badge-delivery { background: #E7F3ED; color: #1F6D43; border-color: #CFE4D8; }
  .cm-pillar-badge-impact   { background: #FDF1D8; color: #8A5A00; border-color: #F3E2B4; }
  .cm-pillar-badge-people   { background: #EEE9FB; color: #4A2F8F; border-color: #D9D0F2; }
  .cm-pillar-name {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--black);
  }
  .cm-pillar-pain {
    font-size: 11px;
    color: var(--dg-60);
    font-style: italic;
    margin-left: auto;
  }

  .cm-matrix-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    table-layout: fixed;
  }
  .cm-matrix-table thead th {
    padding: 9px 12px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dg-60);
    background: #FAFBFB;
    border-bottom: 1px solid var(--border);
    text-align: left;
    white-space: nowrap;
  }
  .cm-matrix-table thead th:first-child {
    width: 68px;
    text-align: center;
    border-right: 1px solid var(--border);
  }
  .cm-matrix-table thead th:not(:first-child) { border-left: 1px solid var(--border); }
  .cm-matrix-table tbody tr:not(:last-child) td { border-bottom: 1px solid var(--border); }
  .cm-matrix-table tbody tr:hover td { background: #F8FAF9; }

  .cm-col-level { width: 68px; }
  .cm-col-sym   { width: 16%; }
  .cm-col-cau   { width: 19%; }
  .cm-col-out   { width: 19%; }
  .cm-col-pu    { width: auto; }

  .cm-level-cell {
    width: 68px;
    text-align: center;
    vertical-align: middle;
    padding: 14px 6px;
    border-right: 1px solid var(--border);
  }
  .cm-level-tag {
    font-size: 12px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 3px;
    border: 1px solid;
  }
  .cm-level-tag-l0,
  .cm-level-tag-l1,
  .cm-level-tag-l2,
  .cm-level-tag-l3 {
    background: #F1F3F6;
    color: #2D6A4F;
    border-color: #D1D5DA;
  }
  .cm-level-sub {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dg-60);
  }

  .cm-matrix-table tbody tr td:not(.cm-level-cell) {
    padding: 13px 12px;
    vertical-align: top;
    border-left: 1px solid var(--border);
  }
  .cm-cell-text { font-size: 12px; line-height: 1.55; color: var(--black); }
  .cm-col-sym .cm-cell-text { font-weight: 600; font-size: 12.5px; letter-spacing: -0.01em; }
  .cm-col-cau .cm-cell-text { font-size: 11.5px; color: var(--dg-80); }
  .cm-col-out .cm-cell-text { font-size: 11.5px; color: var(--dg-80); }

  .cm-col-pu { background: #F8FAFC; }
  .cm-col-empty {
    color: var(--dg-40);
    font-style: italic;
    text-align: center;
    vertical-align: middle;
  }

  .cm-pbs {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 6px;
  }
  .cm-pbs-empty {
    font-size: 11px;
    font-style: italic;
    color: var(--dg-60);
    margin-bottom: 6px;
  }
  .cm-pb-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    line-height: 1.3;
    border: 1px solid;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
  }
  .cm-pb-pill-created {
    background: #DCFCE7;
    color: #166534;
    border-color: #86EFAC;
  }
  .cm-pb-pill-created:hover { background: #BBF7D0; }
  .cm-pb-pill-to-create {
    background: #fff;
    color: var(--dg-60);
    border-color: var(--border);
    border-style: dashed;
  }
  .cm-pb-pill-to-create:hover {
    background: #FAFBFB;
    color: var(--dg-80);
    border-color: var(--dg-40);
  }
  .cm-pb-status { font-size: 10px; flex-shrink: 0; font-weight: 700; }

  .cm-progress {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--dg-60);
    padding: 2px 7px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 999px;
    margin-bottom: 6px;
  }

  .cm-add-btn {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border: 1px dashed var(--dg-40);
    border-radius: 6px;
    background: transparent;
    color: var(--dg-60);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
  }
  .cm-add-btn:hover {
    border-style: solid;
    color: var(--dark-green, var(--dg-80));
    background: #FAFBFB;
  }

  .pb-status {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
    letter-spacing: 0.02em;
  }
  .pb-status-created   { background: #DCFCE7; color: #166534; }
  .pb-status-to-create { background: #F1F3F6; color: var(--dg-60); }

  @media (max-width: 1100px) {
    .cm-matrix-table { font-size: 11px; }
    .cm-col-sym, .cm-col-cau, .cm-col-out { width: auto; }
  }

  /* ──────────────────────────────────────────────────────────
     PLAYBOOK EDITOR · split-pane layout
     ────────────────────────────────────────────────────────── */

  .pb-modal {
    width: 1200px;
    max-width: 96vw;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
  }
  .pb-modal .estt-modal-header {
    flex: 0 0 auto;
  }
  .pb-modal .estt-modal-footer {
    flex: 0 0 auto;
    border-top: 1px solid var(--border);
    background: #FAFBFB;
  }
  .pb-split {
    flex: 1 1 auto;
    overflow: hidden;
    display: block;
    padding: 0 !important; /* overrides .estt-modal-body default */
  }
  .pb-right {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0; /* allow textarea to shrink */
  }

  .pb-section {
    margin-bottom: 18px;
  }
  .pb-section:last-child { margin-bottom: 0; }
  .pb-section-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--dg-60);
    padding-bottom: 8px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .pb-section-icon { font-size: 13px; }
  .pb-section-hint {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--dg-60);
    font-size: 11px;
    margin-left: 2px;
  }
  .pb-section-tabs {
    margin-left: auto;
    display: inline-flex;
    gap: 4px;
  }
  .pb-section-tabs .admin-tab {
    padding: 4px 10px;
    font-size: 11px;
    text-transform: none;
    letter-spacing: 0;
  }

  .pb-field { display: block; margin-bottom: 10px; }
  .pb-field:last-child { margin-bottom: 0; }
  .pb-field-row { display: flex; gap: 10px; margin-bottom: 10px; }
  .pb-field-row > .pb-field { margin-bottom: 0; }

  .pb-left .admin-label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--dg-80);
    margin-bottom: 4px;
    display: block;
  }
  .pb-left .login-input {
    padding: 8px 12px;
    font-size: 13px;
  }

  .pb-hint-box {
    font-size: 11px;
    color: var(--dg-60);
    margin-top: 8px;
    padding: 8px 12px;
    background: #F1F3F6;
    border-left: 3px solid var(--border);
    border-radius: 4px;
    line-height: 1.45;
  }

  /* ── Tab bar within right column (4 artefactos paritarios) ── */
  .pb-tabs {
    display: flex;
    gap: 4px;
    padding: 10px 10px 0;
    background: #FAFBFB;
    border-bottom: 1px solid var(--border);
  }
  .pb-tab {
    flex: 1;
    background: transparent;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    padding: 8px 10px 9px;
    font-family: inherit;
    cursor: pointer;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
    justify-content: center;
    transition: background 0.12s ease, border-color 0.12s ease;
    color: var(--dg-80);
  }
  .pb-tab:hover:not(.active) { background: #F1F3F6; }
  .pb-tab.active {
    background: #fff;
    border-color: var(--border);
    border-bottom-color: #fff;
    margin-bottom: -1px;
    z-index: 1;
  }
  .pb-tab-icon { font-size: 18px; line-height: 1; }
  .pb-tab-label { font-size: 12.5px; font-weight: 700; letter-spacing: -0.01em; }
  .pb-tab-hint { font-size: 10px; color: var(--dg-60); font-weight: 500; }
  .pb-tab-count {
    font-size: 10px;
    font-weight: 700;
    color: var(--dg-60);
    background: var(--border);
    padding: 1px 6px;
    border-radius: 999px;
  }
  .pb-tab-count:empty { display: none; }

  .pb-tab-panel {
    padding: 18px 22px;
    flex: 1 1 auto;
    overflow-y: auto;
    display: none;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
  }
  .pb-tab-panel.active { display: flex; }

  /* Cabecera unificada de panel — mismo layout en los 4 tabs */
  .pb-panel-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
    min-height: 36px;
  }
  .pb-panel-head-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: wrap;
  }
  .pb-panel-icon { font-size: 16px; flex-shrink: 0; }
  .pb-panel-heading {
    font-size: 13px;
    font-weight: 700;
    color: var(--black);
    letter-spacing: -0.01em;
  }
  .pb-panel-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1 1 auto;
    min-height: 0;
  }

  .pb-subtabs {
    display: flex;
    gap: 6px;
    align-items: center;
  }
  .pb-subtabs .admin-tab {
    padding: 5px 12px;
    font-size: 12px;
    text-transform: none;
    letter-spacing: 0;
  }

  .pb-panel-status {
    margin-left: auto;
    font-size: 11px;
    color: var(--dg-60);
  }
  .pb-panel-status.is-success { color: #166534; }
  .pb-panel-status.is-error { color: #B91C1C; }

  .pb-panel-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
  }

  /* ── Artifact view (power-up, slides) ── */
  .pb-artifact-view {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1 1 auto;
    min-height: 0;
  }
  .pb-artifact-empty {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2.5rem 1.5rem;
    border: 2px dashed var(--border);
    border-radius: 12px;
    background: #FAFBFB;
    gap: 10px;
    min-height: 260px;
  }
  .pb-artifact-empty-icon { font-size: 36px; opacity: 0.7; }
  .pb-artifact-empty-title { font-size: 15px; font-weight: 700; color: var(--black); }
  .pb-artifact-empty-desc { font-size: 12.5px; color: var(--dg-60); max-width: 380px; line-height: 1.5; }
  .pb-artifact-empty .pb-cta {
    margin-top: 12px;
  }

  .pb-artifact-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #F0FDF4;
    border: 1px solid #BBF7D0;
    border-radius: 8px;
    font-size: 12.5px;
    flex-wrap: wrap;
  }
  .pb-artifact-meta-label {
    color: #064E3B;
    font-weight: 600;
  }
  .pb-artifact-meta-value {
    color: #166534;
    font-variant-numeric: tabular-nums;
  }
  .pb-artifact-actions-bar {
    display: flex;
    gap: 8px;
    margin-left: auto;
    flex-wrap: wrap;
  }
  .pb-artifact-preview {
    flex: 1 1 auto;
    min-height: 240px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    font-family: 'SF Mono', Menlo, Monaco, 'Courier New', monospace;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--dg-80);
    overflow-y: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
  }

  /* ── Feedback list ── */
  .pb-feedback-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
  }
  .pb-feedback-list:empty::after {
    content: 'Sin feedback todavía. Al impartir esta píldora, añade una entrada con las observaciones — alimenta las siguientes regeneraciones.';
    display: block;
    padding: 1.5rem;
    text-align: center;
    font-size: 12px;
    color: var(--dg-60);
    border: 1px dashed var(--border);
    border-radius: 8px;
    background: #FAFBFB;
    line-height: 1.55;
  }
  .pb-fb-entry {
    padding: 10px 14px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .pb-fb-head {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11.5px;
    color: var(--dg-60);
    flex-wrap: wrap;
  }
  .pb-fb-head strong { color: var(--black); font-weight: 700; }
  .pb-fb-rating {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
  }
  .pb-fb-rating-high { background: #DCFCE7; color: #166534; }
  .pb-fb-rating-mid  { background: #FEF3C7; color: #92400E; }
  .pb-fb-rating-low  { background: #FEE2E2; color: #991B1B; }
  .pb-fb-text {
    font-size: 12.5px;
    color: var(--black);
    line-height: 1.5;
    white-space: pre-wrap;
  }
  .pb-fb-actions {
    display: flex;
    gap: 6px;
    margin-left: auto;
  }
  .pb-fb-action {
    background: transparent;
    border: none;
    padding: 2px 6px;
    font-size: 12px;
    color: var(--dg-60);
    cursor: pointer;
    border-radius: 4px;
  }
  .pb-fb-action:hover { background: var(--border); color: var(--black); }
  .pb-fb-action.is-danger:hover { background: #FEE2E2; color: #991B1B; }

  /* ── AI section within right column (legacy — still used by preview modal header) ── */
  .pb-ai-section {
    background: #F8FBF9;
    border: 1px solid #D6E9DD;
    border-radius: 10px;
    padding: 14px 16px 12px;
    margin-bottom: 0;
  }
  .pb-ai-section .pb-section-title {
    border-bottom: none;
    padding-bottom: 2px;
    margin-bottom: 8px;
    color: var(--dark-green, #1F6D43);
  }
  .pb-ai-section textarea.login-input {
    font-size: 12.5px;
    padding: 8px 12px;
  }
  .pb-ai-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 10px;
    margin-bottom: 8px;
  }
  .pb-ai-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    color: var(--black);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.05s ease;
    font-family: inherit;
  }
  .pb-ai-btn:hover:not(:disabled) {
    border-color: var(--dg-40);
    background: #FCFCFC;
  }
  .pb-ai-btn:active:not(:disabled) { transform: translateY(1px); }
  .pb-ai-btn:disabled { opacity: 0.55; cursor: not-allowed; }
  .pb-ai-btn-primary {
    border-color: var(--dark-green, #1F6D43);
    background: var(--dark-green, #002700);
    color: var(--green, #8CFA6E);
  }
  .pb-ai-btn-primary:hover:not(:disabled) {
    background: #003500;
    border-color: #003500;
  }
  .pb-ai-btn-icon { font-size: 18px; flex-shrink: 0; line-height: 1; }
  .pb-ai-btn-label {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
  }
  .pb-ai-btn-label strong {
    font-weight: 700;
    font-size: 13px;
    letter-spacing: -0.01em;
  }
  .pb-ai-btn-label em {
    font-style: normal;
    font-size: 10.5px;
    color: var(--dg-60);
    font-weight: 500;
  }
  .pb-ai-btn-primary .pb-ai-btn-label em {
    color: rgba(140, 250, 110, 0.7);
  }

  .pb-ai-artifacts {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
    padding: 10px 12px;
    background: #F0FDF4;
    border: 1px solid #BBF7D0;
    border-radius: 8px;
  }
  .pb-artifact-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: #064E3B;
    line-height: 1.4;
    flex-wrap: wrap;
  }
  .pb-artifact-ok {
    color: #16A34A;
    font-weight: 700;
    font-size: 13px;
  }
  .pb-artifact-link {
    margin-left: auto;
    font-weight: 600;
    color: #166534;
    text-decoration: none;
    padding: 3px 10px;
    border-radius: 6px;
    border: 1px solid #BBF7D0;
    background: #fff;
    font-size: 12px;
    white-space: nowrap;
  }
  .pb-artifact-link:hover {
    background: #DCFCE7;
    border-color: #86EFAC;
  }

  .pb-ai-status {
    font-size: 12px;
    color: var(--dg-60);
    min-height: 18px;
    line-height: 1.4;
  }
  .pb-ai-status.is-error { color: #B91C1C; }
  .pb-ai-status.is-success { color: #166534; }
  .pb-ai-status .pb-ai-spinner {
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 2px solid var(--dg-40);
    border-top-color: var(--dg-80);
    border-radius: 50%;
    animation: pb-ai-spin 0.8s linear infinite;
    margin-right: 6px;
    vertical-align: -1px;
  }
  @keyframes pb-ai-spin { to { transform: rotate(360deg); } }

  /* ── Content section ── */
  .pb-content-section {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    margin-bottom: 0;
  }
  .pb-content-section .pb-section-title {
    display: flex;
    align-items: center;
  }
  .pb-content-section .pb-editor-textarea {
    flex: 1 1 auto;
    min-height: 320px;
    resize: vertical;
    font-family: 'SF Mono', Menlo, Monaco, 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.55;
    padding: 12px 14px;
  }
  .pb-content-section #pb-preview-area {
    flex: 1 1 auto;
    min-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.5rem;
    background: #fff;
  }

  /* ── Responsive: stack columns below 1000px ── */
  @media (max-width: 1000px) {
    .pb-modal { width: 96vw; }
    .pb-right { max-height: 80vh; }
    .pb-overview-grid { grid-template-columns: 1fr !important; }
    .pb-clients-head, .pb-clients-row { grid-template-columns: 1fr !important; }
    .pb-clients-col { border-bottom: 1px solid var(--border); padding: 6px 0; }
    .pb-ai-actions { grid-template-columns: 1fr; }
  }

  /* ── PLAYBOOK pilar/nivel chips + slides link ── */
  .pb-meta-chips { display: inline-flex; gap: 6px; margin-left: 8px; vertical-align: middle; }
  .pb-chip {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--border);
    color: var(--dg-80);
  }
  .pb-chip-delivery { background: #E7F3ED; color: #1F6D43; }
  .pb-chip-impact   { background: #FDF1D8; color: #8A5A00; }
  .pb-chip-people   { background: #EEE9FB; color: #4A2F8F; }
  .pb-chip-level    { background: #F1F3F6; color: #555; }
  .pb-slides-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--dark-green, var(--dg-80));
    text-decoration: none;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 1rem;
    transition: border-color 0.15s ease, background 0.15s ease;
  }
  .pb-slides-btn:hover { border-color: var(--dg-40); background: #F8FAF9; }

  /* ──────────────────────────────────────────────────────────
     KAM · Edit Company modal (widgets para key account mgmt)
     ────────────────────────────────────────────────────────── */
  .kam-modal .estt-modal-body { padding: 1.5rem !important; }

  .kam-section {
    margin-bottom: 22px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--border);
  }
  .kam-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

  .kam-section-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--dg-60);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .kam-section-hint {
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    font-size: 11px;
    color: var(--dg-60);
    margin-left: auto;
  }

  /* Modules grid: toggles per módulo en el company modal. Layout flex
     vertical con cada row como un row label + switch. */
  .kam-modules-grid {
    display: flex;
    flex-direction: column;
    gap: var(--wd-padding-xs);
  }
  .kam-module-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wd-padding-md);
    padding: var(--wd-padding-sm) var(--wd-padding-md);
    border-radius: var(--wd-radius-sm);
    background: var(--wd-bg-elevated);
    border: 1px solid var(--wd-border-neutral);
    cursor: default;
  }
  .kam-module-row.is-locked { opacity: 0.85; }
  .kam-module-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .kam-module-name {
    font-weight: var(--wd-fw-semi);
    color: var(--wd-content-primary);
    display: flex; align-items: center; gap: var(--wd-padding-xs);
  }
  .kam-module-tabs {
    font-size: var(--wd-fs-sm);
    color: var(--wd-content-tertiary);
  }
  .kam-module-lock {
    font-size: 10px;
    font-weight: var(--wd-fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 8px;
    border-radius: var(--wd-radius-full);
    background: var(--wd-bg-neutral);
    color: var(--wd-content-tertiary);
  }

  .kam-row { display: flex; gap: 12px; margin-bottom: 12px; }
  .kam-field { flex: 1; min-width: 0; }
  .kam-field:last-child { margin-right: 0; }

  /* Identity row: logo preview + stacked fields */
  .kam-identity-row {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 12px;
  }
  .kam-identity-fields { flex: 1; min-width: 0; }
  .kam-identity-fields .kam-row:last-child { margin-bottom: 0; }
  .kam-identity-fields .kam-field { margin-bottom: 0; }
  .admin-label-hint {
    font-weight: 400;
    font-size: 10.5px;
    color: var(--dg-60);
    margin-left: 6px;
    text-transform: none;
    letter-spacing: 0;
  }

  /* Company icon preview (inside modal) */
  .company-icon-preview {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--bg-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-top: 22px; /* align with input row (skips the label) */
    position: relative;
  }
  .company-icon-preview .company-icon-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .company-icon-preview .company-icon-initials {
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 0.02em;
    color: var(--dark-green);
  }

  /* Inline icon chip used in companies table (32px, circular-ish) */
  .company-name-cell {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .company-icon-chip {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-subtle);
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .company-icon-chip img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .company-icon-chip .company-icon-fallback {
    font-weight: 700;
    font-size: 11px;
    color: var(--dark-green);
    letter-spacing: 0.02em;
  }

  /* Subhead between grouped sub-blocks of a KAM section */
  .kam-subhead {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--dg-60);
    margin: 2px 0 8px;
  }

  /* Contract length actions */
  .contract-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
  }
  .contract-btn {
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid var(--border);
    background: var(--white);
    color: var(--dark-green);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
  }
  .contract-btn:hover { background: var(--lg-60); border-color: #BBE5C4; }
  .contract-btn-danger { color: #991B1B; }
  .contract-btn-danger:hover { background: #FEE2E2; border-color: #FCA5A5; }
  .contract-btn-ghost { color: var(--dg-60); }
  .contract-btn-ghost:hover { background: var(--bg-subtle); }

  /* Shared block style for exceptions + changelog */
  .contract-block {
    margin-top: 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    background: var(--white);
  }
  .contract-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
  }
  .contract-block-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--black);
  }
  .contract-block-hint { font-size: 11px; color: var(--dg-60); }

  /* Freeze list */
  .contract-freeze-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    background: var(--bg-subtle);
    margin-bottom: 4px;
    font-size: 12px;
  }
  .contract-freeze-week {
    font-weight: 700;
    color: var(--dark-green);
    background: var(--lg-60);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
  }
  .contract-freeze-reason { flex: 1; color: var(--dg-80); }
  .contract-freeze-remove {
    font-size: 14px;
    color: #991B1B;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
  }

  /* Shared inline form (extend, freeze add, unfreeze) */
  .contract-inline-form {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    padding: 10px;
    align-items: center;
    background: #F7FAF8;
    border: 1px solid #D6E8DE;
    border-radius: 8px;
    animation: contractInlineIn 120ms ease-out;
  }
  @keyframes contractInlineIn {
    from { opacity: 0; transform: translateY(-2px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .contract-inline-chip {
    flex: 0 0 auto;
    font-weight: 700;
    font-size: 12px;
    color: var(--dark-green);
    background: var(--lg-60);
    border: 1px solid #BBE5C4;
    padding: 5px 10px;
    border-radius: 6px;
    font-variant-numeric: tabular-nums;
  }
  .contract-inline-chip-danger {
    color: #991B1B;
    background: #FEE2E2;
    border-color: #FCA5A5;
  }
  .contract-inline-chip-warn {
    color: #92400E;
    background: #FEF3C7;
    border-color: #FCD34D;
  }
  .contract-inline-num {
    width: 140px !important;
    margin-bottom: 0 !important;
    flex: 0 0 auto;
  }
  .contract-inline-reason {
    flex: 1 1 auto;
    margin-bottom: 0 !important;
  }
  .admin-btn-ghost { background: var(--white); color: var(--dg-60); border: 1px solid var(--border); }

  /* Muted block variant — used for the changelog (secondary info) */
  .contract-block-muted {
    background: var(--bg-subtle);
    border-color: var(--border);
  }
  .contract-block-muted .contract-block-title { color: var(--dg-60); }

  /* Changelog */
  .contract-changelog-entry {
    display: grid;
    grid-template-columns: 110px 100px 1fr;
    gap: 10px;
    align-items: baseline;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 11.5px;
    border-left: 2px solid var(--border);
    margin-bottom: 3px;
  }
  .contract-changelog-entry.extend { border-left-color: #10B981; }
  .contract-changelog-entry.reduce { border-left-color: #EF4444; }
  .contract-changelog-entry.freeze { border-left-color: #F59E0B; }
  .contract-changelog-entry.unfreeze { border-left-color: #6B7280; }
  .contract-changelog-entry.init { border-left-color: var(--dark-green); }
  .contract-changelog-entry.reschedule { border-left-color: #6366F1; }
  .cc-ts { color: var(--dg-60); font-variant-numeric: tabular-nums; }
  .cc-type {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 10px;
    color: var(--dark-green);
  }
  .contract-changelog-entry.reduce .cc-type { color: #991B1B; }
  .contract-changelog-entry.freeze .cc-type { color: #92400E; }
  .contract-changelog-entry.unfreeze .cc-type { color: #374151; }
  .cc-reason { color: var(--black); }
  .cc-by { color: var(--dg-60); }

  /* Programa widget */
  .kam-program-widget {
    margin-top: 12px;
    padding: 14px;
    background: #FAFBFB;
    border: 1px solid var(--border);
    border-radius: 10px;
  }
  .kam-program-empty { font-size: 12px; color: var(--dg-60); font-style: italic; }
  .kam-program-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 12px;
  }
  .kam-week-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    text-align: center;
  }
  .kam-week-num {
    font-size: 28px;
    font-weight: 800;
    color: var(--dark-green);
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .kam-week-num-remain { color: #1a8a2e; }
  .kam-week-num-muted { color: var(--dg-60); }
  .kam-week-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dg-60);
    margin-top: 6px;
  }
  .kam-program-bar {
    height: 6px;
    background: #EEF1F5;
    border-radius: 999px;
    overflow: hidden;
  }
  .kam-program-fill {
    height: 100%;
    background: linear-gradient(90deg, #8CFA6E, #5dd84a);
    border-radius: 999px;
    transition: width 0.3s ease;
  }
  .kam-program-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    font-size: 12px;
    color: var(--dg-60);
  }
  .kam-upsell-chip {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 999px;
  }
  .kam-upsell-warm { background: #FFF4D6; color: #8A6D1F; border: 1px solid #EEDAA0; }
  .kam-upsell-hot { background: #FDE1DE; color: #A63027; border: 1px solid #F2B8B2; }

  /* Entrega stats */
  .kam-stats-row {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 12px;
  }
  .kam-stat-card {
    padding: 14px 16px;
    background: #FAFBFB;
    border: 1px solid var(--border);
    border-radius: 10px;
  }
  .kam-stat-card-feedback { cursor: pointer; }
  .kam-trend { cursor: default; }
  .kam-dot { cursor: pointer; }
  .kam-stat-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--dg-60);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .kam-expand { font-size: 12px; color: var(--dg-40); transition: transform 0.15s; }
  .kam-expanded .kam-expand { transform: rotate(180deg); }
  .kam-stat-value {
    font-size: 34px;
    font-weight: 800;
    color: var(--dark-green);
    line-height: 1;
    margin-top: 6px;
    font-variant-numeric: tabular-nums;
  }
  .kam-rating-max { font-size: 16px; font-weight: 600; color: var(--dg-60); }
  .kam-stat-value.pb-fb-rating-high { color: #1a8a2e; }
  .kam-stat-value.pb-fb-rating-mid  { color: #A66A13; }
  .kam-stat-value.pb-fb-rating-low  { color: #A63027; }
  .kam-stat-sub { font-size: 11px; color: var(--dg-60); margin-top: 8px; line-height: 1.4; }

  /* Trend chart */
  .kam-trend {
    margin-top: 12px;
  }
  .kam-trend-svg { width: 100%; height: auto; max-height: 140px; }
  .kam-trend-guide { stroke: #E5E7EB; stroke-width: 1; }
  .kam-trend-guide-mid { stroke-dasharray: 3 3; }
  .kam-trend-axis { font-size: 9px; fill: var(--dg-60); font-family: 'Inter', sans-serif; }
  .kam-trend-line { fill: none; stroke: var(--dark-green); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
  .kam-dot { stroke: #fff; stroke-width: 1.5; }
  .kam-dot-high { fill: #1a8a2e; }
  .kam-dot-mid  { fill: #c08322; }
  .kam-dot-low  { fill: #A63027; }
  .kam-trend-date { font-size: 9px; fill: var(--dg-60); font-family: 'Inter', sans-serif; }
  .kam-trend-date-right { text-anchor: end; }
  .kam-trend-footer { margin-top: 6px; text-align: right; }
  .kam-trend-tooltip {
    position: fixed;
    background: var(--black);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    line-height: 1.4;
    padding: 8px 12px;
    border-radius: 6px;
    max-width: 280px;
    z-index: 10000;
    pointer-events: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  }
  .kam-trend-tooltip-title { font-weight: 600; font-size: 12px; margin-bottom: 2px; }
  .kam-trend-tooltip-meta { opacity: 0.75; font-variant-numeric: tabular-nums; }
  .kam-trend-alert {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 999px;
  }
  .kam-trend-cooling { background: #FDE1DE; color: #A63027; border: 1px solid #F2B8B2; }
  .kam-trend-warming { background: #E1F5D9; color: #1a8a2e; border: 1px solid #B8E5A8; }

  /* Píldoras recibidas matrix */
  .kam-matrix-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .kam-matrix-pillar {
    background: #FAFBFB;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px;
  }
  .kam-matrix-pillar-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
  }
  .kam-matrix-pillar-badge {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--border);
  }
  .kam-pillar-badge-delivery { background: rgba(140,250,110,0.18); color: #1a8a2e; }
  .kam-pillar-badge-impact   { background: rgba(255,170,60,0.15); color: #A66A13; }
  .kam-pillar-badge-people   { background: rgba(140,160,250,0.15); color: #3a4aa8; }
  .kam-matrix-pillar-tag { font-size: 11px; color: var(--dg-60); }

  .kam-matrix-cell {
    padding: 6px 4px;
    border-top: 1px solid var(--border);
  }
  .kam-matrix-cell:first-of-type { border-top: none; padding-top: 2px; }
  .kam-matrix-cell-head {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dg-60);
    margin-bottom: 4px;
  }
  .kam-matrix-level { color: var(--dark-green); font-weight: 800; }
  .kam-matrix-level-name { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--dg-60); }
  .kam-matrix-pills { display: flex; flex-wrap: wrap; gap: 4px; }
  .kam-matrix-pills-empty { font-size: 11px; color: var(--dg-60); font-style: italic; }
  .kam-matrix-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: rgba(140,250,110,0.12);
    color: #1a8a2e;
    border: 1px solid rgba(140,250,110,0.3);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .kam-matrix-pill:hover { background: rgba(140,250,110,0.22); }

  /* ──────────────────────────────────────────────────────────
     OVERVIEW TAB · metadata en dos columnas
     ────────────────────────────────────────────────────────── */
  .pb-overview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 820px;
  }

  /* ──────────────────────────────────────────────────────────
     CLIENTS TAB · mockup (activación, tracking, feedback)
     ────────────────────────────────────────────────────────── */
  .pb-clients-table {
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
  }

  .pb-clients-head,
  .pb-clients-row {
    display: grid;
    grid-template-columns: 1.8fr 1fr 1.4fr 1.4fr;
    gap: 12px;
    padding: 10px 14px;
    align-items: center;
  }

  .pb-clients-head {
    background: #FAFBFB;
    border-bottom: 1px solid var(--border);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--dg-60);
  }

  .pb-clients-row {
    border-bottom: 1px solid var(--border);
    font-size: 13px;
  }
  .pb-clients-row:last-child { border-bottom: none; }
  .pb-clients-row:hover { background: #FCFCFC; }
  .pb-clients-row-inactive { opacity: 0.72; }

  .pb-clients-col-client {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }

  .pb-client-avatar {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #F1F3F6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
  }
  .pb-client-avatar img { width: 22px; height: 22px; border-radius: 4px; display: block; }
  .pb-client-avatar .client-initial { font-size: 13px; font-weight: 700; color: var(--dg-60); }

  .pb-client-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--dg-80);
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
  }

  .pb-client-current-badge {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(140,250,110,0.15);
    color: #1a8a2e;
  }

  .pb-clients-row-current {
    background: rgba(140,250,110,0.03);
  }
  .pb-client-sub {
    font-size: 11px;
    color: var(--dg-60);
    margin-top: 2px;
  }

  /* Toggle switch */
  .pb-clients-col-status {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .pb-toggle {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 18px;
    flex-shrink: 0;
  }
  .pb-toggle input { opacity: 0; width: 0; height: 0; }
  .pb-toggle-slider {
    position: absolute;
    inset: 0;
    background: #D4D8DE;
    border-radius: 999px;
    transition: background 0.15s;
  }
  .pb-toggle-slider::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 2px;
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.15s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  }
  .pb-toggle input:checked + .pb-toggle-slider { background: #8CFA6E; }
  .pb-toggle input:checked + .pb-toggle-slider::before { transform: translateX(16px); }
  .pb-toggle input:disabled + .pb-toggle-slider { cursor: not-allowed; }

  .pb-status-label {
    font-size: 11.5px;
    font-weight: 600;
  }
  .pb-status-on { color: #1a8a2e; }
  .pb-status-off { color: var(--dg-60); }

  /* Tracking bar */
  .pb-track { display: flex; flex-direction: column; gap: 4px; }
  .pb-track-bar {
    height: 6px;
    background: #EEF1F5;
    border-radius: 999px;
    overflow: hidden;
  }
  .pb-track-fill {
    height: 100%;
    background: linear-gradient(90deg, #8CFA6E, #5dd84a);
    border-radius: 999px;
  }
  .pb-track-label {
    font-size: 11.5px;
    color: var(--dg-80);
    font-weight: 500;
  }
  .pb-track-empty .pb-track-label { font-style: italic; }
  .pb-muted { color: var(--dg-60); }

  /* Feedback stat */
  .pb-fb-stat {
    display: flex;
    align-items: baseline;
    gap: 6px;
  }
  .pb-fb-stat-rating {
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  .pb-fb-stat-n { font-size: 11px; color: var(--dg-60); }
  .pb-fb-muted { color: var(--dg-60); }

  /* Action buttons column */
  .pb-clients-col-actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
  }
  .pb-clients-col-actions .admin-btn-sm {
    width: 100%;
    justify-content: center;
  }
  /* ══════════════════════════════════════════════════════════
     ONBOARDING — first-login client_admin experience
     Full-screen takeover with 4 animated screens.
     ══════════════════════════════════════════════════════════ */
  .ob-wrap {
    position: fixed;
    inset: 0;
    z-index: 10002;
    display: none;
    align-items: center;
    justify-content: center;
    background: radial-gradient(1200px 800px at 50% -200px, rgba(31,110,67,0.18), rgba(255,255,255,0)) ,
                linear-gradient(180deg, #F6F9F7 0%, #FFFFFF 60%);
    overflow: auto;
    padding: 40px 20px;
  }
  .ob-wrap.open { display: flex; }
  .ob-card {
    width: 100%;
    max-width: 560px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.04);
    padding: 36px 40px;
    position: relative;
    overflow: hidden;
  }
  .ob-screen { display: none; animation: obFadeIn 0.35s ease-out; }
  .ob-screen.active { display: block; }
  @keyframes obFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Screen 1 — form */
  .ob-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
  .ob-brand-mark {
    width: 40px; height: 40px; border-radius: 10px;
    background: var(--green); color: var(--dark-green);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 20px;
  }
  .ob-brand-title { font-size: 24px; font-weight: 800; color: var(--black); }
  .ob-lead { font-size: 13px; color: var(--dg-60); margin-bottom: 28px; }
  .ob-field { margin-bottom: 16px; }
  .ob-field label {
    display: block;
    font-size: 12px; font-weight: 600;
    color: var(--black);
    margin-bottom: 6px;
  }
  .ob-field input,
  .ob-field select {
    width: 100%;
    height: 42px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--white);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: var(--black);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .ob-field input:focus,
  .ob-field select:focus {
    border-color: var(--dark-green);
    box-shadow: 0 0 0 3px rgba(31,110,67,0.12);
  }
  .ob-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .ob-size-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
  }
  .ob-size-btn {
    height: 42px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--white);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--dg-80);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
  }
  .ob-size-btn:hover { background: var(--bg-subtle); }
  .ob-size-btn.active {
    background: var(--dark-green);
    color: var(--white);
    border-color: var(--dark-green);
  }
  .ob-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 28px;
  }
  .ob-actions-split { justify-content: space-between; }
  .ob-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 20px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #1F6E43 0%, #24865A 100%);
    color: var(--white);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(31,110,67,0.22);
    transition: transform 0.15s, box-shadow 0.15s;
  }
  .ob-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(31,110,67,0.3); }
  .ob-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
  .ob-secondary {
    height: 44px;
    padding: 0 18px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--white);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--dg-80);
    cursor: pointer;
    transition: background 0.15s;
  }
  .ob-secondary:hover { background: var(--bg-subtle); }

  /* Screen 2 — loading magic moment */
  .ob-screen-loading { text-align: center; }
  .ob-loading-hero {
    position: relative;
    margin: 0 auto 32px;
    padding: 36px 24px;
    border-radius: 16px;
    background: linear-gradient(135deg, #1F6E43 0%, #2FA06B 100%);
    color: var(--white);
    overflow: hidden;
  }
  .ob-loading-sparkle {
    width: 60px; height: 60px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    display: flex; align-items: center; justify-content: center;
    color: var(--white);
    animation: obSparkle 2.4s ease-in-out infinite;
  }
  @keyframes obSparkle {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,255,255,0.5); }
    50%      { transform: scale(1.08); box-shadow: 0 0 0 16px rgba(255,255,255,0); }
  }
  .ob-loading-title { font-size: 22px; font-weight: 700; margin-bottom: 4px; position: relative; z-index: 2; }
  .ob-loading-sub { font-size: 13px; opacity: 0.85; position: relative; z-index: 2; }
  .ob-loading-halo {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    pointer-events: none;
  }
  .ob-loading-halo-1 { width: 140px; height: 140px; top: -40px; right: -30px; animation: obFloat 6s ease-in-out infinite; }
  .ob-loading-halo-2 { width: 80px; height: 80px; bottom: -20px; left: 20px; animation: obFloat 7s ease-in-out infinite reverse; }
  @keyframes obFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
  }
  .ob-steps { text-align: left; }
  .ob-step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--dg-40);
    transition: color 0.25s, background 0.25s;
    margin-bottom: 4px;
  }
  .ob-step.active { color: var(--black); background: var(--bg-subtle); font-weight: 600; }
  .ob-step.done  { color: var(--dark-green); }
  .ob-step-ic {
    width: 24px; height: 24px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px;
    background: rgba(0,0,0,0.06);
    color: var(--dg-40);
    transition: background 0.25s, color 0.25s, transform 0.25s;
  }
  .ob-step.active .ob-step-ic { background: rgba(31,110,67,0.12); color: var(--dark-green); }
  .ob-step.done   .ob-step-ic {
    background: var(--dark-green); color: var(--white);
    transform: scale(1.05);
  }
  .ob-step.done .ob-step-ic::before { content: '✓'; font-weight: 800; }
  .ob-step.done .ob-step-ic { font-size: 0; }
  .ob-step.done .ob-step-ic::before { font-size: 13px; }
  .ob-step-label { flex: 1; }
  .ob-step-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--dark-green);
    opacity: 0;
    animation: obPulse 1s ease-in-out infinite;
  }
  .ob-step.active .ob-step-dot { opacity: 1; }
  @keyframes obPulse {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50%      { transform: scale(1.4); opacity: 1; }
  }

  /* Screen 3 — wow preview */
  .ob-preview-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border);
  }
  .ob-preview-logo {
    width: 64px; height: 64px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--bg-subtle);
    overflow: hidden;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; font-weight: 800; color: var(--dg-60);
  }
  .ob-preview-logo img { width: 100%; height: 100%; object-fit: cover; }
  .ob-preview-name { font-size: 20px; font-weight: 700; color: var(--black); }
  .ob-preview-site { font-size: 13px; color: var(--dg-60); margin-top: 2px; }
  .ob-preview-desc {
    font-size: 13px;
    color: var(--dg-80);
    line-height: 1.55;
    margin-bottom: 20px;
    padding: 14px 16px;
    background: var(--bg-subtle);
    border-radius: 10px;
  }
  .ob-preview-desc:empty { display: none; }
  .ob-preview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .ob-preview-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
  }
  .ob-preview-card-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dg-60);
    margin-bottom: 6px;
  }
  .ob-preview-card-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--black);
  }
  .ob-preview-swatches { display: flex; gap: 6px; }
  .ob-swatch {
    width: 22px; height: 22px;
    border-radius: 6px;
    border: 1px solid rgba(0,0,0,0.08);
  }

  /* Screen 4 — welcome */
  .ob-screen-welcome { text-align: center; }
  .ob-welcome-hero { margin-bottom: 28px; }
  .ob-welcome-sparkle {
    width: 72px; height: 72px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1F6E43 0%, #2FA06B 100%);
    color: var(--white);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 28px rgba(31,110,67,0.3);
    animation: obSparkle 2.4s ease-in-out infinite;
  }
  .ob-welcome-title { font-size: 28px; font-weight: 800; color: var(--black); margin-bottom: 4px; }
  .ob-welcome-sub { font-size: 14px; color: var(--dg-60); }
  .ob-welcome-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 28px;
  }
  .ob-welcome-feature {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--white);
    text-align: left;
    transition: transform 0.15s, box-shadow 0.15s;
  }
  .ob-welcome-feature:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.06); }
  .ob-wf-ic {
    width: 36px; height: 36px;
    border-radius: 8px;
    background: var(--lg-40);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
  }
  .ob-wf-label { font-size: 13px; color: var(--dg-80); line-height: 1.4; }

  .ob-hint { font-size: 11px; color: var(--dg-60); margin-top: 4px; }

  /* ── Onboarding checklist banner (dashboard) ─────────────── */
  .ob-checklist {
    background: linear-gradient(135deg, #F2F7F3 0%, #FFFFFF 80%);
    border: 1px solid rgba(31,110,67,0.2);
    border-radius: 14px;
    padding: 18px 22px;
    margin-bottom: 20px;
    position: relative;
  }
  .ob-checklist-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
  }
  .ob-checklist-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--dark-green);
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .ob-checklist-progress {
    font-size: 12px;
    font-weight: 600;
    color: var(--dg-60);
  }
  .ob-checklist-dismiss {
    border: none;
    background: none;
    color: var(--dg-40);
    cursor: pointer;
    font-size: 18px;
    padding: 2px 6px;
    border-radius: 6px;
  }
  .ob-checklist-dismiss:hover { background: rgba(0,0,0,0.06); color: var(--dg-80); }
  .ob-checklist-bar {
    height: 4px;
    background: rgba(31,110,67,0.12);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 14px;
  }
  .ob-checklist-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #1F6E43 0%, #2FA06B 100%);
    transition: width 0.4s ease;
  }
  .ob-checklist-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 8px;
  }
  .ob-checklist-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--white);
    cursor: pointer;
    font-size: 13px;
    color: var(--black);
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  }
  .ob-checklist-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    border-color: var(--dark-green);
  }
  .ob-checklist-item.done { opacity: 0.6; }
  .ob-checklist-item.done .ob-ci-label { text-decoration: line-through; }
  .ob-ci-check {
    width: 20px; height: 20px;
    border: 1.5px solid var(--border);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 11px;
    transition: all 0.2s;
  }
  .ob-checklist-item.done .ob-ci-check {
    background: var(--dark-green);
    border-color: var(--dark-green);
    color: var(--white);
  }
  .ob-checklist-item.done .ob-ci-check::before { content: '✓'; font-weight: 800; }
  .ob-ci-label { flex: 1; font-weight: 500; }

  /* ════════════════════════════════════════════════════════════════════
     RETRO (FISHBONE) — 2026-05-06
     Full-screen overlay; reuses tokens from design-tokens.css.
  ════════════════════════════════════════════════════════════════════ */
  .rt-overlay {
    display: none;
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(12,20,10,0.45);
    backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
    padding: 2vh 2vw;
  }
  .rt-overlay.open { display: flex; }
  .rt-modal {
    background: var(--white, #fff);
    border-radius: 14px;
    width: 95vw; max-width: 1600px;
    height: 92vh;
    display: flex; flex-direction: column;
    box-shadow: 0 24px 60px rgba(0,0,0,0.25);
    overflow: hidden;
    position: relative; /* anchor for .rt-zoom-controls */
  }
  .rt-board-frame { position: relative; }
  .rt-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 0.85rem 1.25rem;
    background: var(--bg-subtle, #F7F8F4);
    border-bottom: 1px solid var(--border, #E5E7EB);
    flex-shrink: 0;
  }
  .rt-modal-title {
    font-size: 14px; font-weight: 700; color: var(--ink, #0C140A);
    letter-spacing: -0.01em;
    display: flex; align-items: center; gap: 8px; min-width: 0;
  }
  .rt-modal-title em { font-style: normal; color: var(--green, #8CFA6E); }
  .rt-back-btn {
    width: 28px; height: 28px; border-radius: 6px;
    border: 1px solid var(--border, #E5E7EB);
    background: var(--white, #fff);
    color: var(--dg-80, #2D6A4F);
    cursor: pointer; font-size: 14px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s;
  }
  .rt-back-btn:hover { background: var(--lg-40, #F0FBF4); }
  .rt-saved-hint { font-size: 11px; font-weight: 500; color: var(--dg-60, #8A9B8F); margin-left: 6px; }
  .rt-stats { font-size: 11px; color: var(--dg-80, #2D6A4F); margin-right: 8px; }
  .rt-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
  .rt-close {
    width: 28px; height: 28px; border-radius: 6px;
    border: 1px solid var(--border, #E5E7EB);
    background: none; color: var(--dg-60, #8A9B8F);
    cursor: pointer; font-size: 16px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s;
  }
  .rt-close:hover { background: var(--lg-40, #F0FBF4); color: var(--black, #1a1a1a); }

  .rt-modal-body { flex: 1; overflow-y: auto; padding: 1.25rem 1.5rem; background: var(--white, #fff); }
  .rt-modal-canvas {
    flex: 1; overflow: auto; background: var(--bg-subtle, #F7F8F4);
    /* Center content when smaller than viewport. `safe` falls back to start
       when content is bigger, so the top-left edge stays scroll-reachable. */
    display: flex;
    align-items: safe center;
    justify-content: safe center;
    cursor: grab;
  }
  .rt-modal-canvas.is-dragging,
  .rt-modal-canvas.is-dragging * { cursor: grabbing !important; user-select: none; }
  .rt-board-frame { flex-shrink: 0; }
  .rt-board { position: relative; }
  .rt-edges { position: absolute; inset: 0; pointer-events: none; }

  .rt-node {
    position: absolute;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 6px 18px rgba(15,23,42,0.05);
    user-select: none;
    transition: box-shadow .18s ease, border-color .18s ease;
    z-index: 2;
    box-sizing: border-box;
  }
  .rt-node:hover { box-shadow: 0 1px 3px rgba(15,23,42,0.06), 0 10px 24px rgba(15,23,42,0.08); }

  .rt-node-head {
    background: #0F172A;
    border-radius: 12px 4px 4px 12px;
    color: #fff;
    padding: 12px 16px 12px 14px;
    display: flex; flex-direction: column; justify-content: center;
    box-shadow: 0 2px 6px rgba(15,23,42,0.10), 0 16px 36px rgba(15,23,42,0.14);
  }
  .rt-head-tag {
    font-size: 8.5px; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: rgba(255,255,255,0.45); margin-bottom: 6px;
  }
  .rt-head-label { font-size: 12px; font-weight: 700; line-height: 1.3; color: #fff; }
  .rt-head-val { font-size: 18px; font-weight: 800; color: #fff; margin-top: 4px; }
  .rt-head-arrow {
    position: absolute; right: -12px; top: 50%; transform: translateY(-50%);
    width: 0; height: 0;
    border-top: 55px solid transparent;
    border-bottom: 55px solid transparent;
    border-left: 12px solid #0F172A;
  }

  .rt-node-spine {
    border: 1px solid var(--border-2, #EEF0ED);
    display: flex; align-items: center;
    padding: 6px 4px 6px 12px;
    cursor: pointer;
  }
  .rt-spine-name {
    flex: 1;
    font-size: 12px; font-weight: 700; color: #0f172a;
    letter-spacing: -0.005em;
    line-height: 1.3;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .rt-node-cause {
    display: flex; align-items: center;
    padding: 6px 6px 6px 11px;
    cursor: pointer;
    gap: 8px;
  }
  .rt-cause-text {
    flex: 1;
    font-size: 11px; font-weight: 500; color: #0f172a;
    line-height: 1.3;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  .rt-cause-rootbadge {
    font-size: 9px; font-weight: 800; letter-spacing: 0.06em;
    color: #15803d;
    background: rgba(255,255,255,0.7);
    border-radius: 4px; padding: 1px 5px;
    flex-shrink: 0;
  }
  .rt-node-cause.is-root { box-shadow: 0 1px 2px rgba(22,163,74,0.06), 0 6px 18px rgba(22,163,74,0.08); }

  .rt-node-task {
    background: #dcfce7;
    border: 1px solid rgba(22,163,74,0.22);
    display: flex; align-items: center;
    padding: 5px 10px;
    gap: 9px;
  }
  .rt-task-tile {
    width: 18px; height: 18px; border-radius: 5px;
    background: #16a34a; color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .rt-task-tile svg { width: 11px; height: 11px; stroke-width: 3; }
  .rt-task-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  .rt-task-text {
    font-size: 11px; font-weight: 600; color: #0f172a;
    line-height: 1.25;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  .rt-task-owner {
    font-size: 9.5px; font-weight: 600; color: #15803d;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  .rt-task-del {
    width: 20px; height: 20px; border-radius: 4px;
    background: transparent; border: none; cursor: pointer;
    color: #15803d; opacity: 0;
    transition: opacity .15s, background .15s;
    font-size: 14px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .rt-node-task:hover .rt-task-del { opacity: 1; }
  .rt-task-del:hover { background: rgba(22,163,74,0.15); }

  .rt-node-addspine {
    background: #f8fafc;
    border: 1.5px dashed #cbd5e1;
    color: #64748b;
    font-size: 12px; font-weight: 600;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all .18s ease;
  }
  .rt-node-addspine:hover {
    border-color: #94a3b8; border-style: solid;
    color: #0f172a; background: #fff;
  }

  /* Hover toolbars (FAB row).
     Three layers keep the cursor "tethered" while moving from card to FAB:
     1. Padding (10px) extends the toolbar's bounding box into the card so
        there's no dead-space gap to cross.
     2. transition-delay 150ms on outbound opacity gives a grace period if
        the cursor briefly leaves both elements (sub-pixel glitches, etc).
     3. ::before pseudo-element acts as an extra invisible bridge layer. */
  .rt-toolbar {
    position: absolute; left: 50%; transform: translateX(-50%);
    display: flex; gap: 6px;
    opacity: 0; pointer-events: none;
    transition: opacity .18s ease .15s; /* outbound delay */
    z-index: 5;
  }
  .rt-toolbar-top    { top: -30px;    padding-bottom: 10px; }
  .rt-toolbar-bottom { bottom: -30px; padding-top: 10px; }
  /* Extra invisible bridge that fills the visual gap between card and FAB row */
  .rt-toolbar::before {
    content: '';
    position: absolute; left: -20px; right: -20px;
    height: 14px;
    pointer-events: inherit;
  }
  .rt-toolbar-top::before    { bottom: -2px; }
  .rt-toolbar-bottom::before { top: -2px; }
  .rt-node:hover > .rt-toolbar {
    opacity: 1; pointer-events: auto;
    transition-delay: 0s; /* fade in immediately */
  }
  /* Keep toolbar visible while cursor is on it (pointer-events: auto via above) */
  .rt-toolbar:hover { opacity: 1; pointer-events: auto; transition-delay: 0s; }

  .rt-fab {
    width: 26px; height: 26px; border-radius: 50%;
    background: #0f172a; color: #fff; border: none; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700; line-height: 1;
    box-shadow: 0 2px 8px rgba(15,23,42,0.22), 0 0 0 3px var(--bg-subtle, #F7F8F4);
    transition: transform .12s ease;
    padding: 0;
  }
  .rt-fab:hover { transform: scale(1.12); }
  .rt-fab.rt-fab-green { background: #16a34a; box-shadow: 0 2px 8px rgba(22,163,74,0.25), 0 0 0 3px var(--bg-subtle, #F7F8F4); }

  /* Kebab on cards */
  .rt-kebab {
    width: 22px; height: 22px; border-radius: 5px;
    background: transparent; border: none; cursor: pointer;
    color: #94a3b8; opacity: 0; transition: opacity .15s, background .15s;
    font-size: 16px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    padding: 0;
  }
  .rt-node:hover .rt-kebab { opacity: 1; }
  .rt-kebab:hover { background: rgba(15,23,42,0.06); color: #0f172a; }

  /* Popover (kebab menu) */
  .rt-popover {
    background: #fff; border-radius: 10px;
    box-shadow: 0 8px 28px rgba(15,23,42,0.14), 0 1px 4px rgba(15,23,42,0.06);
    border: 1px solid rgba(15,23,42,0.06);
    min-width: 180px; padding: 4px;
    display: flex; flex-direction: column; gap: 2px;
  }
  .rt-popover button {
    width: 100%; padding: 7px 10px; border-radius: 6px;
    border: none; background: transparent; text-align: left;
    font: inherit; font-size: 12px; font-weight: 500;
    color: #0f172a; cursor: pointer;
  }
  .rt-popover button:hover { background: var(--lg-40, #F0FBF4); }
  .rt-popover button.danger { color: #dc2626; }
  .rt-popover button.danger:hover { background: #fef2f2; }

  /* History table */
  .rt-history-table { width: 100%; border-collapse: collapse; font-size: 13px; }
  .rt-history-table th {
    text-align: left;
    padding: 10px 14px;
    background: var(--dark-green, #002700);
    color: var(--dg-40, #B7C4BA);
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase;
  }
  /* colspan headers (Tareas hechas / sacadas) must be centered over both cols */
  .rt-history-table th.dm-th-wip { text-align: center; }
  .rt-history-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-2, #EEF0ED);
    color: var(--black, #1a1a1a);
    vertical-align: middle;
  }
  .rt-history-table tr:hover td { background: var(--lg-40, #F0FBF4); }
  .rt-empty-cell { padding: 24px !important; text-align: center; color: var(--dg-60, #8A9B8F); font-style: italic; }
  .rt-empty { padding: 20px; text-align: center; color: var(--dg-60, #8A9B8F); font-size: 13px; }
  .rt-dim { color: var(--dg-60, #8A9B8F); font-size: 12px; }

  .rt-pill {
    display: inline-block;
    font-size: 11px; font-weight: 700; letter-spacing: 0;
    border-radius: 999px;
    padding: 3px 9px;
    font-variant-numeric: tabular-nums;
  }
  .rt-pill-draft { color: #92400e; background: var(--amber-soft, #FEF3C7); }
  .rt-pill-done  { color: var(--pred-good, #16A34A); background: var(--lg-80, #D1FAE5); }

  /* Buttons */
  .rt-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px; font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--border, #E5E7EB);
    background: #fff; color: var(--ink, #0C140A);
    transition: background .15s, border-color .15s;
  }
  .rt-btn:hover { background: var(--lg-40, #F0FBF4); }
  .rt-btn-sm { padding: 5px 10px; font-size: 12px; }
  .rt-btn-ghost {
    background: transparent; border-color: transparent; color: var(--dg-80, #2D6A4F);
  }
  .rt-btn-ghost:hover { background: var(--lg-40, #F0FBF4); }
  .rt-btn-primary {
    background: var(--dark-green, #002700); color: #fff;
    border-color: var(--dark-green, #002700);
  }
  .rt-btn-primary:hover { background: #003a00; }
  .rt-btn-primary[disabled] { opacity: 0.4; cursor: not-allowed; }
  .rt-btn-green { background: var(--pred-good, #16A34A); border-color: var(--pred-good, #16A34A); color: #fff; }
  .rt-btn-green:hover { background: #15803d; }
  .rt-readonly-hint { font-size: 11px; color: var(--dg-60, #8A9B8F); font-style: italic; }

  /* Setup phase */
  .rt-setup { max-width: 720px; margin: 0 auto; padding-top: 2rem; }
  .rt-setup-title { font-size: 22px; font-weight: 800; color: var(--ink, #0C140A); margin: 0 0 6px; letter-spacing: -0.025em; }
  .rt-setup-sub { font-size: 13.5px; color: var(--dg-80, #2D6A4F); margin: 0 0 24px; }
  .rt-setup-tabs {
    display: inline-flex; gap: 4px; padding: 4px;
    background: var(--lg-40, #F0FBF4);
    border: 1px solid var(--border-2, #EEF0ED);
    border-radius: 10px; margin-bottom: 20px;
  }
  .rt-tab {
    border: none; background: transparent;
    padding: 7px 14px; border-radius: 6px;
    font: inherit; font-size: 13px; font-weight: 600;
    color: var(--dg-80, #2D6A4F); cursor: pointer;
    transition: background .15s, color .15s;
  }
  .rt-tab.active { background: var(--dark-green, #002700); color: #fff; }
  .rt-metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 24px; }
  .rt-metric-card {
    text-align: left; padding: 14px;
    border-radius: 10px;
    border: 1px solid var(--border-2, #EEF0ED);
    background: #fff; cursor: pointer;
    transition: border-color .15s, box-shadow .15s, background .15s;
    font: inherit;
  }
  .rt-metric-card:hover { border-color: var(--dg-60, #8A9B8F); }
  .rt-metric-card.is-selected {
    border-color: var(--pred-good, #16A34A); background: var(--lg-40, #F0FBF4);
    box-shadow: 0 0 0 3px rgba(22,163,74,0.15);
  }
  .rt-metric-name { font-size: 11px; font-weight: 700; color: var(--dg-80, #2D6A4F); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 6px; }
  .rt-metric-value { font-size: 22px; font-weight: 800; color: var(--ink, #0C140A); font-variant-numeric: tabular-nums; }
  .rt-metric-week { font-size: 10px; color: var(--dg-60, #8A9B8F); margin-top: 4px; font-variant-numeric: tabular-nums; }
  .rt-freetext {
    width: 100%; padding: 12px;
    border-radius: 10px;
    border: 1px solid var(--border, #E5E7EB);
    background: #fff;
    font: inherit; font-size: 14px; color: var(--ink, #0C140A);
    resize: vertical;
    margin-bottom: 24px;
    box-sizing: border-box;
  }
  .rt-freetext:focus { outline: none; border-color: var(--dg-60, #8A9B8F); box-shadow: 0 0 0 3px rgba(45,106,79,0.15); }
  .rt-setup-footer { display: flex; justify-content: flex-end; }

  /* Zoom controls (floating, bottom-right of board) */
  .rt-zoom-controls {
    position: absolute;
    bottom: 20px; right: 24px;
    display: flex; flex-direction: column; gap: 2px;
    background: rgba(255,255,255,0.96);
    border: 1px solid var(--border-2, #EEF0ED);
    border-radius: 8px;
    padding: 4px;
    box-shadow: 0 4px 14px rgba(15,23,42,0.10), 0 1px 3px rgba(15,23,42,0.06);
    z-index: 10;
    backdrop-filter: blur(4px);
  }
  .rt-zoom-btn {
    width: 32px; height: 32px;
    border: none; background: transparent;
    color: var(--dg-80, #2D6A4F);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 6px;
    padding: 0;
    transition: background .15s, color .15s;
  }
  .rt-zoom-btn:hover { background: var(--lg-40, #F0FBF4); color: var(--ink, #0C140A); }
  .rt-zoom-btn svg { width: 16px; height: 16px; }
  .rt-zoom-level {
    font-size: 10px; font-weight: 700;
    color: var(--dg-60, #8A9B8F);
    text-align: center;
    padding: 4px 0 2px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    border-top: 1px solid var(--border-2, #EEF0ED);
    border-bottom: 1px solid var(--border-2, #EEF0ED);
    margin: 2px 0;
  }

  /* Task status colors (todo/wip/done from .review.status; default + open keep green) */
  .rt-node-task.is-wip {
    background: #FEF3C7;
    border-color: rgba(217,119,6,0.25);
  }
  .rt-node-task.is-wip .rt-task-tile { background: #D97706; }
  .rt-node-task.is-wip .rt-task-owner { color: #92400E; }

  .rt-node-task.is-todo {
    background: #FBE6E3;
    border-color: rgba(192,57,43,0.25);
  }
  .rt-node-task.is-todo .rt-task-tile { background: #C0392B; }
  .rt-node-task.is-todo .rt-task-owner { color: #991B1B; }

  /* Sections in history view */
  .rt-section { margin-bottom: 24px; }
  .rt-section:last-child { margin-bottom: 0; }
  .rt-section-head {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 10px;
  }
  .rt-section-title {
    font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--dg-80, #2D6A4F);
  }
  .rt-section-meta { font-size: 12px; color: var(--dg-60, #8A9B8F); }

  /* Fishbone preview card (last finalized retro at top of history) */
  .rt-preview-card {
    background: var(--bg-subtle, #F7F8F4);
    border: 1px solid var(--border-2, #EEF0ED);
    border-radius: 12px;
    padding: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    display: flex; align-items: center; justify-content: center;
    position: relative;
    min-height: 240px;
  }
  .rt-preview-card:hover { border-color: var(--dg-60, #8A9B8F); background: #fff; }
  .rt-preview-frame { position: relative; pointer-events: none; }
  .rt-preview-board { pointer-events: none; }

  /* Pending tasks list */
  .rt-pending-list {
    display: flex; flex-direction: column; gap: 6px;
  }
  .rt-pending-row {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: 14px;
    align-items: center;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid var(--border-2, #EEF0ED);
    border-left-width: 3px;
    border-radius: 8px;
    font-size: 13px;
  }
  .rt-pending-row.rt-status-open { border-left-color: var(--dg-60, #8A9B8F); }
  .rt-pending-row.rt-status-todo { border-left-color: #C0392B; }
  .rt-pending-row.rt-status-wip  { border-left-color: #D97706; }
  .rt-pending-row.rt-status-done { border-left-color: #16A34A; }
  .rt-pending-text { color: var(--ink, #0C140A); font-weight: 500; }
  .rt-pending-owner { font-size: 12px; color: var(--dg-80, #2D6A4F); }
  .rt-pending-week { font-size: 11px; color: var(--dg-60, #8A9B8F); font-variant-numeric: tabular-nums; }

  /* Status pill (used in pending list) */
  .rt-status-pill {
    display: inline-block;
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.04em;
    padding: 3px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    text-align: center;
  }
  .rt-status-pill-open { color: var(--dg-80, #2D6A4F); background: #E8EAE4; }
  .rt-status-pill-todo { color: #991B1B; background: #FBE6E3; }
  .rt-status-pill-wip  { color: #92400E; background: #FEF3C7; }
  .rt-status-pill-done { color: #15803D; background: #D1FAE5; }

  /* Review phase (review-prev) */
  .rt-review-list { display: flex; flex-direction: column; gap: 8px; }
  .rt-review-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--border-2, #EEF0ED);
    border-radius: 10px;
  }
  .rt-review-info { flex: 1; min-width: 0; }
  .rt-review-text { font-size: 13.5px; font-weight: 600; color: var(--ink, #0C140A); margin-bottom: 4px; }
  .rt-review-meta { display: flex; gap: 10px; font-size: 11px; color: var(--dg-60, #8A9B8F); }
  .rt-review-owner { color: var(--dg-80, #2D6A4F); font-weight: 600; }
  .rt-review-path { color: var(--dg-60, #8A9B8F); }
  .rt-status-row { display: flex; gap: 4px; flex-shrink: 0; }
  .rt-status-btn {
    border: 1px solid var(--border, #E5E7EB);
    background: #fff;
    color: var(--dg-80, #2D6A4F);
    font: inherit; font-size: 12px; font-weight: 600;
    padding: 6px 12px;
    border-radius: 7px;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
  }
  .rt-status-btn:hover { background: var(--lg-40, #F0FBF4); }
  .rt-status-btn-todo.is-selected { background: #FBE6E3; border-color: #C0392B; color: #991B1B; }
  .rt-status-btn-wip.is-selected  { background: #FEF3C7; border-color: #D97706; color: #92400E; }
  .rt-status-btn-done.is-selected { background: #D1FAE5; border-color: #16A34A; color: #15803D; }

  /* ════════════════════════════════════════════════════════════════════
     TAREAS (TASK MANAGER) — 2026-05-07
     Mounted at #tab-tareas / #tareas-container
  ════════════════════════════════════════════════════════════════════ */
  #tab-tareas { padding: 0; }
  .tm-page-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 0; gap: 16px; flex-wrap: wrap;
  }
  .tm-toolbar-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  .tm-toolbar-right { display: flex; align-items: center; gap: 8px; }
  .tm-team-select {
    padding: 8px 32px 8px 12px;
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 8px;
    background: #fff;
    font: inherit; font-size: 13px; font-weight: 600;
    color: var(--ink, #0C140A);
    cursor: pointer;
  }
  .tm-team-pill {
    font-size: 13px; font-weight: 700; color: var(--ink);
    padding: 6px 12px; background: var(--lg-40, #F0FBF4);
    border-radius: 999px;
  }
  .tm-view-toggle {
    display: inline-flex; gap: 2px; padding: 3px;
    background: var(--lg-40, #F0FBF4);
    border-radius: 8px;
  }
  .tm-view-btn {
    border: none; background: transparent;
    padding: 6px 14px; border-radius: 6px;
    font: inherit; font-size: 12px; font-weight: 600;
    color: var(--dg-80, #2D6A4F); cursor: pointer;
  }
  .tm-view-btn.active { background: var(--dark-green, #002700); color: #fff; }

  .tm-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 14px; border-radius: 8px;
    font: inherit; font-size: 13px; font-weight: 600;
    cursor: pointer; border: 1px solid var(--border, #E5E7EB);
    background: #fff; color: var(--ink, #0C140A);
  }
  .tm-btn-primary { background: var(--dark-green, #002700); color: #fff; border-color: var(--dark-green, #002700); }
  .tm-btn-primary:hover { background: #003a00; }
  .tm-readonly { font-size: 12px; color: var(--dg-60, #8A9B8F); font-style: italic; }

  /* Empty / no-access states */
  .tm-empty, .tm-empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--dg-80, #2D6A4F);
  }
  .tm-empty h2, .tm-empty-state h3 {
    margin: 0 0 8px; font-size: 18px; font-weight: 700; color: var(--ink, #0C140A);
  }
  .tm-empty p, .tm-empty-state p {
    margin: 0; font-size: 13px; color: var(--dg-80, #2D6A4F); max-width: 480px; margin: 0 auto;
  }
  .tm-empty-icon { font-size: 36px; margin-bottom: 8px; opacity: 0.6; }

  /* Item list + cards */
  .tm-list { display: flex; flex-direction: column; gap: 6px; }
  .tm-card {
    display: flex; align-items: center;
    background: #fff;
    border: 1px solid var(--border-2, #EEF0ED);
    border-radius: 8px;
    padding: 10px 14px;
    transition: border-color .15s, box-shadow .15s, background .15s;
  }
  .tm-card:hover { border-color: var(--dg-60, #8A9B8F); box-shadow: 0 1px 4px rgba(15,23,42,0.04); }
  .tm-card.is-blocked {
    background: #fef2f2;
    border-color: rgba(192,57,43,0.32);
  }
  .tm-card-row {
    display: flex; align-items: center; gap: 10px;
    width: 100%;
    font-size: 13px;
  }
  .tm-card-title {
    flex: 1; min-width: 0;
    color: var(--ink, #0C140A); font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .tm-status-pill {
    display: inline-block;
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.04em;
    padding: 3px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
  }
  .tm-task-id {
    display: inline-block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10.5px; font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--dg-80, #2D6A4F);
    background: var(--bg-subtle, #F7F8F4);
    border: 1px solid var(--border-2, #EEF0ED);
    padding: 2px 6px;
    border-radius: 4px;
    flex-shrink: 0;
    user-select: all;
  }
  .tm-type-chip {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10.5px; font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    flex-shrink: 0;
  }
  .tm-type-glyph {
    display: inline-flex; align-items: center; justify-content: center;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: rgba(255,255,255,0.7);
    font-size: 10px; font-weight: 800;
    line-height: 1;
  }
  .tm-flag {
    width: 24px; height: 24px;
    border: none; background: transparent;
    color: #cbd5e1;
    cursor: pointer;
    font-size: 14px;
    border-radius: 4px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: color .15s, background .15s;
  }
  .tm-flag:hover { background: var(--lg-40, #F0FBF4); color: var(--dg-80, #2D6A4F); }
  .tm-flag.is-on { color: #C0392B; }
  .tm-flag.is-on:hover { background: #fef2f2; }
  .tm-points {
    font-size: 11px; font-weight: 700;
    color: var(--dg-80, #2D6A4F);
    background: var(--lg-40, #F0FBF4);
    border-radius: 4px;
    padding: 2px 7px;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    min-width: 24px; text-align: center;
  }
  .tm-card-edit {
    width: 24px; height: 24px;
    border: none; background: transparent;
    color: #94a3b8;
    cursor: pointer;
    font-size: 13px;
    border-radius: 4px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity .15s, background .15s, color .15s;
  }
  .tm-card:hover .tm-card-edit { opacity: 1; }
  .tm-card-edit:hover { background: var(--lg-40, #F0FBF4); color: var(--ink, #0C140A); }

  /* Item modal — reuses estt-overlay/modal */
  .tm-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
  .tm-field label {
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dg-80, #2D6A4F);
  }
  .tm-field textarea {
    width: 100%;
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 8px;
    padding: 8px 10px;
    background: var(--bg-subtle, #F7F8F4);
    font: inherit; font-size: 13px;
    resize: vertical;
    box-sizing: border-box;
  }
  .tm-field textarea:focus {
    outline: none; border-color: var(--dg-60, #8A9B8F);
    box-shadow: 0 0 0 2px rgba(0,0,0,0.05);
  }
  .tm-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr 90px;
    gap: 12px;
    margin-bottom: 14px;
  }
  .tm-field-row .tm-field { margin-bottom: 0; }
  .tm-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--ink, #0C140A); cursor: pointer;
  }
  .tm-toggle input[type="checkbox"] {
    width: 16px; height: 16px; cursor: pointer;
  }

  /* Backlog view: week groups */
  .tm-backlog {
    display: flex;
    flex-direction: column;
    gap: var(--wd-padding-lg);   /* 32px entre week groups */
  }
  /* Week group: NO es una card. Es un bloque vertical con caption
     tipográfico arriba (heading + meta) + UNA sola card (la wd-table)
     debajo. Sin border outer, sin background outer. */
  .tm-week {
    display: flex;
    flex-direction: column;
    gap: var(--wd-padding-sm);
  }
  .tm-week-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--wd-padding-md);
    /* Sin background ni border: vive en flujo del page como heading. */
  }
  .tm-week-titleblock { display: flex; flex-direction: column; gap: 2px; }
  /* Heading 3 (Wise typography): 20px semi para títulos de bloque. Más
     tamaño que el legacy 13px que se confundía con texto normal. */
  .tm-week-title {
    margin: 0;
    font-family: var(--wd-font-family);
    font-size: 20px;
    font-weight: var(--wd-fw-semi);
    color: var(--wd-content-primary);
    line-height: 1.2;
    letter-spacing: -0.005em;
  }
  .tm-week-sub {
    margin: 0;
    font-size: var(--wd-fs-md);
    color: var(--wd-content-tertiary);
    line-height: 1.3;
  }
  .tm-week-meta {
    font-size: var(--wd-fs-md);
    font-weight: var(--wd-fw-semi);
    color: var(--wd-content-secondary);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
  }
  /* tbody con drop zone: ya no necesita padding (el tbody hereda
     del table) ni background propio (la card padre lo aporta). */
  .tm-week-list {
    transition: background .12s var(--wd-ease);
  }
  .tm-empty-row {
    text-align: center;
    color: var(--dg-60, #8A9B8F);
    font-size: 11px; font-style: italic;
    padding: 12px;
  }

  /* Board view: kanban */
  .tm-board-toolbar {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 0 16px;
    flex-wrap: wrap;
  }
  .tm-board-nav {
    width: 32px; height: 32px;
    border: 1px solid var(--border, #E5E7EB);
    background: #fff;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    color: var(--dg-80, #2D6A4F);
  }
  .tm-board-nav:hover { background: var(--lg-40, #F0FBF4); }
  .tm-board-stats {
    display: flex; align-items: center; gap: 12px; margin-left: auto;
    font-size: 12px; color: var(--dg-80, #2D6A4F);
    font-variant-numeric: tabular-nums;
  }
  .tm-board-pct {
    font-weight: 700; color: var(--pred-good, #16A34A);
  }
  /* Board view: swimlane grid (1 row per item, columns = statuses).
     Item priority/order is fixed by the backlog — board only changes status. */
  .tm-board-grid { display: flex; flex-direction: column; gap: 4px; }
  .tm-board-header,
  .tm-board-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 6px;
  }
  .tm-col-head {
    padding: 8px 12px;
    border-top: 3px solid;     /* color inline per status */
    border-radius: 8px 8px 0 0;
    background: #fff;
    border-bottom: 1px solid var(--border-2, #EEF0ED);
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
  }
  .tm-col-label {
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--ink, #0C140A);
  }
  .tm-col-meta {
    font-size: 10.5px; font-weight: 600;
    color: var(--dg-60, #8A9B8F);
    font-variant-numeric: tabular-nums;
  }
  .tm-board-row { padding: 0; }
  .tm-board-cell {
    background: var(--bg-subtle, #F7F8F4);
    border: 1px solid var(--border-2, #EEF0ED);
    border-radius: 8px;
    min-height: 64px;
    padding: 4px;
    display: flex; align-items: center;
    transition: background .12s, box-shadow .12s;
  }
  .tm-board-cell.is-here {
    background: #fff;
  }
  .tm-board-cell .tm-card {
    width: 100%; box-shadow: none;
    min-width: 0;       /* allow flex children to shrink */
    overflow: hidden;
  }
  .tm-board-cell .tm-card:hover { box-shadow: 0 1px 4px rgba(15,23,42,0.06); }
  .tm-board-cell .tm-card-row {
    flex-wrap: wrap;     /* chips wrap inside narrow cells */
    gap: 5px;
    width: 100%;
    min-width: 0;
  }
  .tm-board-cell .tm-card-title {
    flex-basis: 100%;
    min-width: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    font-size: 12px; line-height: 1.3;
    margin-top: 4px;
  }
  /* Allow grid columns to shrink below 180px on narrow viewports */
  @media (max-width: 980px) {
    .tm-board-header, .tm-board-row {
      grid-template-columns: repeat(4, minmax(140px, 1fr));
    }
  }
  /* Drop hint only on cells of the same row as dragging item */
  .tm-board-cell.tm-drop-over {
    background: var(--lg-40, #F0FBF4);
    box-shadow: inset 0 0 0 2px var(--pred-good, #16A34A);
  }
  .tm-board-empty {
    padding: 36px 24px;
    text-align: center;
    color: var(--dg-60, #8A9B8F);
    font-size: 13px; font-style: italic;
    background: var(--bg-subtle, #F7F8F4);
    border: 1px dashed var(--border, #E5E7EB);
    border-radius: 10px;
  }

  /* Block modal */
  .tm-block-radio {
    display: flex; flex-direction: column; gap: 6px;
  }
  .tm-block-radio label {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--ink, #0C140A);
    cursor: pointer;
    padding: 7px 10px;
    border-radius: 6px;
    transition: background .15s;
  }
  .tm-block-radio label:hover { background: var(--lg-40, #F0FBF4); }
  .tm-block-results {
    margin-top: 6px;
    max-height: 200px; overflow-y: auto;
    border: 1px solid var(--border-2, #EEF0ED);
    border-radius: 8px;
    background: #fff;
    display: none;
  }
  .tm-block-results:not(:empty) { display: block; }
  .tm-block-result {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-2, #EEF0ED);
    cursor: pointer;
    transition: background .12s;
  }
  .tm-block-result:last-child { border-bottom: none; }
  .tm-block-result:hover { background: var(--lg-40, #F0FBF4); }
  .tm-block-result-title { font-size: 13px; font-weight: 600; color: var(--ink, #0C140A); }
  .tm-block-result-meta { font-size: 11px; color: var(--dg-60, #8A9B8F); margin-top: 2px; }
  .tm-block-noresult {
    color: var(--dg-60, #8A9B8F); font-size: 12px; font-style: italic;
    cursor: default; text-align: center;
  }
  .tm-block-selected:not(:empty) {
    margin-top: 8px;
  }
  .tm-block-pill {
    display: inline-block;
    padding: 6px 10px;
    background: var(--lg-40, #F0FBF4);
    border: 1px solid var(--border-2, #EEF0ED);
    border-radius: 999px;
    font-size: 12px;
    color: var(--dg-80, #2D6A4F);
  }

  /* ════════════════════════════════════════════════════════════════════
     DEPENDENCIAS — cross-team weekly grid · 2026-05-07
  ════════════════════════════════════════════════════════════════════ */
  #tab-dependencias { padding: 0; }

  .dep-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 1rem 0;
    flex-wrap: wrap;
  }
  .dep-stats { display: flex; gap: 8px; flex-wrap: wrap; }
  .dep-stat-pill {
    font-size: 11px; font-weight: 600;
    padding: 6px 12px;
    background: var(--lg-40, #F0FBF4);
    color: var(--dg-80, #2D6A4F);
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
  }
  .dep-stat-pill strong { color: var(--ink, #0C140A); margin-right: 2px; }
  .dep-stat-deps { background: #fef3c7; color: #92400E; }
  .dep-stat-deps strong { color: #78350F; }
  .dep-stat-flag { background: #fef2f2; color: #991B1B; }
  .dep-stat-flag strong { color: #7f1d1d; }
  /* Cross-product = relación que cruza dueño de producto = la dependencia
     dolorosa. Color sentiment-warn más fuerte para que destaque del resto. */
  .dep-stat-cross-product { background: rgba(168, 32, 13, 0.10); color: #A8200D; }
  .dep-stat-cross-product strong { color: #6f1500; }
  .dep-toggle {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; color: var(--dg-80, #2D6A4F);
    cursor: pointer;
    padding: 6px 10px;
    border: 1px solid var(--border-2, #EEF0ED);
    border-radius: 8px;
    background: #fff;
  }
  .dep-toggle input[type="checkbox"] { cursor: pointer; }

  /* Dep grid: swimlane custom (no <table> nativo porque cada celda
     contiene un STACK vertical de cards drag&droppables). Tokens
     visuales alineados con .wd-table para consistencia: header con bg
     neutral Wise, font-weight bold, casing uppercase; cells con padding
     wd-table; hairlines border-bottom Wise (no doble grid de colores). */
  .dep-grid-wrap {
    position: relative;
    overflow: auto;
    border: 1px solid var(--wd-border-neutral);
    border-radius: var(--wd-radius-sm);
    background: var(--wd-bg-elevated);
  }
  .dep-grid {
    display: grid;
    background: var(--wd-bg-elevated);
    min-width: 100%;
  }
  .dep-col-head {
    background: var(--wd-bg-neutral);
    color: var(--wd-content-secondary);
    padding: var(--wd-padding-sm) var(--wd-padding-md);
    font-size: var(--wd-fs-sm);
    font-weight: var(--wd-fw-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    position: sticky; top: 0;
    z-index: 3;
    border-bottom: 1px solid var(--wd-border-neutral);
  }
  .dep-col-title { color: var(--wd-content-primary); }
  .dep-col-sub {
    font-size: var(--wd-fs-xs, 11px);
    font-weight: var(--wd-fw-regular);
    letter-spacing: 0;
    color: var(--wd-content-tertiary);
    margin-top: 2px;
    text-transform: none;
  }
  .dep-team-head {
    /* Header de la columna leading "EQUIPO" — comparte styling con el
       resto de wd-table-th. */
  }

  .dep-team-cell {
    background: var(--wd-bg-elevated);
    padding: var(--wd-padding-sm) var(--wd-padding-md);
    display: flex; flex-direction: column; justify-content: center;
    position: sticky; left: 0;
    z-index: 2;
    border-right: 1px solid var(--wd-border-neutral);
    border-bottom: 1px solid var(--wd-border-neutral);
  }
  .dep-team-name {
    font-size: var(--wd-fs-md);
    font-weight: var(--wd-fw-semi);
    color: var(--wd-content-primary);
  }
  .dep-team-meta {
    font-size: var(--wd-fs-sm);
    color: var(--wd-content-tertiary);
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
  }

  .dep-cell {
    background: var(--wd-bg-elevated);
    padding: var(--wd-padding-xs);
    min-height: 80px;
    display: flex; flex-direction: column;
    gap: var(--wd-padding-xs);
    transition: background .12s var(--wd-ease), box-shadow .12s var(--wd-ease);
    border-bottom: 1px solid var(--wd-border-neutral);
  }
  /* Drop zone over: tint Wise pos. */
  .dep-cell.dep-drop-over {
    background: rgba(159, 232, 112, 0.16);
    box-shadow: inset 0 0 0 2px var(--wd-pos);
  }
  .dep-cell.dep-drop-deny {
    background: rgba(168, 32, 13, 0.06);
    box-shadow: inset 0 0 0 2px var(--wd-neg);
    cursor: not-allowed;
  }

  /* Compact dep card */
  .dep-card {
    background: #fff;
    border: 1px solid var(--border-2, #EEF0ED);
    border-radius: 6px;
    padding: 6px 8px;
    cursor: grab;
    transition: border-color .12s, box-shadow .12s;
    display: flex; flex-direction: column; gap: 4px;
    position: relative;
    z-index: 1;
  }
  .dep-card:hover { border-color: var(--dg-60, #8A9B8F); box-shadow: 0 1px 3px rgba(15,23,42,0.06); }
  .dep-card.is-blocked {
    background: #fef2f2; border-color: rgba(192,57,43,0.32);
  }
  .dep-card.has-dep {
    border-left: 3px solid #dc2626;
    padding-left: 6px;
  }
  .dep-card.dep-dragging { opacity: 0.4; cursor: grabbing; }
  .dep-card-top {
    display: flex; align-items: center; gap: 5px;
    flex-wrap: wrap;
  }
  .dep-status-dot {
    display: inline-block;
    width: 10px; height: 10px; border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 1.5px rgba(255,255,255,0.9), 0 0 0 2.5px rgba(15,23,42,0.06);
  }
  .dep-type-glyph {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px;
    border-radius: 4px;
    font-size: 10px; font-weight: 800;
    line-height: 1;
    flex-shrink: 0;
  }
  .dep-card-id {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 9.5px; font-weight: 700;
    color: var(--dg-80, #2D6A4F);
    background: var(--bg-subtle, #F7F8F4);
    border: 1px solid var(--border-2, #EEF0ED);
    padding: 1px 5px;
    border-radius: 3px;
    flex-shrink: 0;
    user-select: all;
  }
  .dep-flag {
    color: #C0392B;
    font-size: 11px;
    line-height: 1;
    margin-left: auto;
  }
  .dep-link-glyph {
    color: #dc2626;
    font-size: 11px; font-weight: 700;
    line-height: 1;
    margin-left: auto;
  }
  .dep-card-title {
    font-size: 11px; font-weight: 500;
    color: var(--ink, #0C140A);
    line-height: 1.3;
    overflow-wrap: break-word;
  }

  /* SVG overlay on top of grid (lines) */
  .dep-svg {
    position: absolute;
    top: 0; left: 0;
    pointer-events: none;
    z-index: 4;
  }

  .dep-legend {
    display: flex; gap: 14px; flex-wrap: wrap;
    padding: 12px 4px 0;
    font-size: 11px; color: var(--dg-60, #8A9B8F);
  }
  .dep-leg-item { display: inline-flex; align-items: center; gap: 5px; }
  .dep-leg-line {
    display: inline-block;
    width: 24px; height: 0;
    border-top: 2px solid #dc2626;
  }
  /* Cross-product = misma forma que la línea base pero dashed + sentiment-warn,
     espejo del stroke usado en SVG. */
  .dep-leg-line-cross {
    border-top: 2.5px dashed #A8200D;
  }
  .dep-leg-dot {
    display: inline-block;
    width: 8px; height: 8px; border-radius: 50%;
  }

  /* ════════════════════════════════════════════════════════════════════
     LEVEL chips, parent badge, board subtask toggle, Épicas tab
     2026-05-07
  ════════════════════════════════════════════════════════════════════ */
  .tm-level-chip {
    display: inline-block;
    font-size: 9.5px; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 4px;
    flex-shrink: 0;
  }
  .tm-card-epic { border-left: 3px solid #7C3AED; }
  .tm-card-subtask { border-left: 3px solid #94a3b8; opacity: 0.92; }
  .tm-parent-badge {
    display: inline-block;
    margin-left: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10px; font-weight: 600;
    color: var(--dg-60, #8A9B8F);
    vertical-align: middle;
  }
  /* Cycle/lead time chip — always visible from when the timer starts */
  .tm-cycle-chip {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 10.5px; font-weight: 600;
    padding: 2px 8px;
    background: var(--lg-40, #F0FBF4);
    color: var(--dg-80, #2D6A4F);
    border-radius: 999px;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    line-height: 1.4;
  }
  .tm-cycle-chip.is-done {
    background: var(--lg-80, #D1FAE5);
    color: var(--pred-good, #16A34A);
  }

  /* ── Assignee avatars (cards + picker chips) ─────────────────────── */
  .tm-avatars {
    display: inline-flex; align-items: center;
    flex-shrink: 0;
  }
  .tm-avatars .tm-avatar { margin-left: -4px; }
  .tm-avatars .tm-avatar:first-child { margin-left: 0; }
  .tm-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    color: #fff;
    font-size: 10.5px; font-weight: 700;
    border: 2px solid #fff;
    background: var(--dg-60, #8A9B8F);
    flex-shrink: 0;
    line-height: 1;
  }
  .tm-avatar-more {
    background: var(--dg-40, #B7C4BA);
    color: var(--ink, #0C140A);
    font-size: 9.5px;
  }

  /* Detail view: assignees field with chips + picker dropdown */
  .tm-assignees-row { gap: 8px !important; }
  .tm-assignees-chips {
    display: flex; flex-wrap: wrap; gap: 4px;
  }
  .tm-assignees-chips:empty { display: none; }
  .tm-assignee-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 4px 3px 3px;
    background: #fff;
    border: 1px solid var(--border-2, #EEF0ED);
    border-radius: 999px;
    font-size: 12px;
    color: var(--ink, #0C140A);
    max-width: 100%;
  }
  .tm-assignee-chip .tm-avatar {
    border-width: 0;
    width: 20px; height: 20px;
    font-size: 10px;
  }
  .tm-assignee-name {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 130px;
  }
  .tm-assignee-remove {
    width: 18px; height: 18px;
    background: transparent; border: none;
    color: var(--dg-60, #8A9B8F);
    cursor: pointer; font-size: 13px; line-height: 1;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .12s, color .12s;
  }
  .tm-assignee-remove:hover { background: #fef2f2; color: #dc2626; }

  .tm-assignees-picker { position: relative; }
  .tm-assignee-add {
    background: transparent;
    border: 1px dashed var(--border, #E5E7EB);
    color: var(--dg-80, #2D6A4F);
    font: inherit; font-size: 12px;
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
  }
  .tm-assignee-add:hover {
    background: var(--lg-40, #F0FBF4);
    border-color: var(--dg-60, #8A9B8F);
    border-style: solid;
    color: var(--ink, #0C140A);
  }
  .tm-picker-dropdown {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    margin-top: 4px;
    background: #fff;
    border: 1px solid var(--border-2, #EEF0ED);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(15,23,42,0.12);
    z-index: 10;
    max-height: 240px; overflow-y: auto;
    padding: 4px;
  }
  .tm-picker-dropdown.is-open { display: block; }
  .tm-picker-row {
    width: 100%;
    display: flex; align-items: center; gap: 8px;
    padding: 7px 8px;
    background: transparent; border: none;
    cursor: pointer;
    font: inherit; font-size: 12.5px;
    color: var(--ink, #0C140A);
    text-align: left;
    border-radius: 6px;
    transition: background .12s;
  }
  .tm-picker-row:hover { background: var(--lg-40, #F0FBF4); }
  .tm-picker-row .tm-avatar {
    border-width: 0; width: 22px; height: 22px;
  }
  .tm-picker-name { flex-shrink: 0; font-weight: 500; }
  .tm-picker-email {
    color: var(--dg-60, #8A9B8F);
    font-size: 11px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    margin-left: auto;
  }
  .tm-picker-empty {
    padding: 12px;
    text-align: center;
    font-size: 12px; color: var(--dg-60, #8A9B8F);
    font-style: italic;
  }
  .tm-board-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 8px;
    background: #fff;
    font-size: 12px; color: var(--dg-80, #2D6A4F);
    cursor: pointer;
  }
  .tm-board-toggle input[type="checkbox"] { cursor: pointer; }

  /* Épicas tab */
  #tab-epicas { padding: 0; }
  .ep-list { display: flex; flex-direction: column; gap: 12px; }
  /* Progress cell (Wise) — barra delgada con número alineado a la derecha,
     vive dentro de una celda de wd-table. Reemplaza la card violeta legacy
     que tenía bordes coloreados (anti-Wise). */
  .ep-progress-cell {
    display: flex;
    align-items: center;
    gap: var(--wd-padding-xs);
    min-width: 120px;
  }
  .ep-progress-bar {
    flex: 1;
    height: 4px;
    background: var(--wd-bg-neutral);
    border-radius: var(--wd-radius-full);
    overflow: hidden;
  }
  .ep-progress-fill {
    height: 100%;
    background: var(--wd-bright-green);
    transition: width .25s var(--wd-ease);
  }
  .ep-progress-num {
    font-family: var(--wd-display-num);
    font-variant-numeric: tabular-nums;
    font-size: var(--wd-fs-sm);
    font-weight: var(--wd-fw-semi);
    color: var(--wd-content-primary);
    flex-shrink: 0;
    min-width: 36px;
    text-align: right;
  }

  /* ════════════════════════════════════════════════════════════════════
     DETAIL VIEW — full-page rich edit (lives in #tab-item-detail)
     Topbar (sticky) + 2-col content (main scrollable + sidebar properties)
  ════════════════════════════════════════════════════════════════════ */

  /* Fullpage mode (delivery sections + item detail): kill the page chrome
     so the view fills the entire main-content area. Item detail keeps a
     `body.detail-mode` flag for any detail-specific tweaks. */
  body.fullpage-mode .page {
    max-width: none !important;
    padding: 0 !important;
    background: var(--bg-subtle, #F7F8F4) !important;
    min-height: 100vh !important;
  }
  body.fullpage-mode .page-header { display: none !important; }

  /* ── Shared topbar for delivery sections (Tareas, Épicas, Dependencias) */
  .dv-topbar {
    background: #fff;
    border-bottom: 1px solid var(--border-2, #EEF0ED);
    padding: 22px 32px 16px;
    position: sticky; top: 0;
    z-index: 5;
  }
  .dv-topbar-row {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px;
  }
  .dv-titleblock h1 {
    font-size: 22px; font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 4px;
    color: var(--ink, #0C140A);
  }
  .dv-titleblock p {
    font-size: 13.5px;
    color: var(--dg-80, #2D6A4F);
    margin: 0;
    line-height: 1.4;
  }
  .dv-actions { display: flex; gap: 8px; flex-shrink: 0; align-items: center; }
  .dv-controls {
    display: flex; align-items: center; gap: 12px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border-2, #EEF0ED);
  }
  .dv-controls:empty { display: none; }
  .dv-body {
    padding: 24px 32px 64px;
  }

  /* Filter bar (lives inside dv-controls) */
  .dv-filterbar {
    display: inline-flex; align-items: center; gap: 6px;
    flex-wrap: wrap;
    margin-left: auto;
  }
  .dv-filter {
    padding: 7px 28px 7px 10px;
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 7px;
    background: #fff;
    font: inherit; font-size: 12px; font-weight: 500;
    color: var(--ink, #0C140A);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238A9B8F' stroke-width='2.5' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
  }
  .dv-filter:hover { border-color: var(--dg-60, #8A9B8F); }
  .dv-filter:focus { outline: none; border-color: var(--dg-80, #2D6A4F); box-shadow: 0 0 0 2px rgba(45,106,79,0.1); }
  .dv-filter-clear {
    padding: 7px 10px;
    border: 1px solid var(--border-2, #EEF0ED);
    background: transparent;
    border-radius: 7px;
    font: inherit; font-size: 11px; font-weight: 600;
    color: var(--dg-80, #2D6A4F);
    cursor: pointer;
    transition: background .15s, color .15s;
  }
  .dv-filter-clear:hover { background: #fef2f2; color: #dc2626; border-color: #fecaca; }

  #tab-item-detail { padding: 0; }
  #tab-item-detail.active { display: flex; flex-direction: column; min-height: 100vh; }
  #item-detail-container { flex: 1; min-height: 0; display: flex; }

  .tm-detail-page {
    flex: 1;
    display: flex; flex-direction: column;
    width: 100%;
    min-height: 100vh;
    background: var(--bg-subtle, #F7F8F4);
  }

  /* ── TOPBAR ── */
  .tm-detail-topbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
    padding: 12px 28px;
    background: #fff;
    border-bottom: 1px solid var(--border-2, #EEF0ED);
    position: sticky; top: 0;
    z-index: 5;
    flex-shrink: 0;
  }
  .tm-detail-topbar-left {
    display: flex; align-items: center; gap: 12px;
    min-width: 0; flex: 1;
  }
  .tm-detail-topbar-actions { display: flex; gap: 8px; flex-shrink: 0; }
  .tm-detail-back {
    width: 32px; height: 32px;
    border: 1px solid var(--border, #E5E7EB);
    background: #fff;
    color: var(--dg-80, #2D6A4F);
    border-radius: 8px;
    cursor: pointer; font-size: 16px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: background .15s;
  }
  .tm-detail-back:hover { background: var(--lg-40, #F0FBF4); }
  .tm-detail-bc {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--dg-60, #8A9B8F);
    overflow: hidden;
    min-width: 0;
  }
  .tm-bc-link {
    color: var(--dg-80, #2D6A4F);
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    flex-shrink: 0;
  }
  .tm-bc-link:hover { color: var(--ink, #0C140A); text-decoration: underline; }
  .tm-bc-sep { color: var(--dg-40, #B7C4BA); flex-shrink: 0; }
  .tm-bc-team { color: var(--dg-80, #2D6A4F); font-weight: 500; flex-shrink: 0; }
  .tm-bc-current {
    color: var(--ink, #0C140A);
    font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    min-width: 0;
  }
  .tm-bc-id {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    color: var(--dg-60, #8A9B8F);
    background: var(--bg-subtle, #F7F8F4);
    padding: 1px 5px;
    border-radius: 3px;
    margin-right: 4px;
  }
  .tm-btn-danger-ghost {
    background: #fff;
    color: #dc2626;
    border: 1px solid var(--border, #E5E7EB);
  }
  .tm-btn-danger-ghost:hover { background: #fef2f2; border-color: #fecaca; }

  /* ── CONTENT (2 cols) ── */
  .tm-detail-content {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    min-height: 0;
  }

  /* ── MAIN COLUMN ── */
  .tm-detail-main {
    background: #fff;
    padding: 36px 56px 64px;
    overflow-y: auto;
    border-right: 1px solid var(--border-2, #EEF0ED);
  }
  .tm-detail-titleblock {
    margin-bottom: 24px;
  }
  .tm-detail-tagrow {
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
  }
  .tm-blocked-chip {
    font-size: 11px; font-weight: 700;
    padding: 3px 9px;
    background: #fef2f2;
    color: #991B1B;
    border-radius: 999px;
    letter-spacing: 0.02em;
  }
  .tm-detail-h1 {
    width: 100%;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--ink, #0C140A);
    line-height: 1.2;
    padding: 4px 8px;
    margin-left: -8px;
    border-radius: 6px;
  }
  .tm-detail-h1:focus {
    outline: none;
    background: var(--lg-40, #F0FBF4);
    box-shadow: 0 0 0 2px var(--lg-80, #D1FAE5);
  }
  .tm-detail-h1::placeholder { color: var(--dg-40, #B7C4BA); }

  .tm-detail-section {
    padding: 22px 0;
    border-top: 1px solid var(--border-2, #EEF0ED);
  }
  .tm-detail-section:first-of-type {
    border-top: none;
    padding-top: 8px;
  }
  .tm-section-h3 {
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--dg-80, #2D6A4F);
    margin: 0 0 12px;
    display: flex; align-items: center; gap: 8px;
  }
  .tm-section-count {
    font-size: 10.5px; font-weight: 700;
    background: var(--lg-40, #F0FBF4);
    color: var(--dg-80, #2D6A4F);
    padding: 1px 7px;
    border-radius: 999px;
    letter-spacing: 0;
  }
  .tm-detail-section textarea {
    width: 100%;
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 8px;
    padding: 12px 14px;
    font: inherit;
    font-size: 14px;
    line-height: 1.55;
    background: #fff;
    color: var(--ink, #0C140A);
    resize: vertical;
    box-sizing: border-box;
    min-height: 80px;
    transition: border-color .15s, box-shadow .15s;
  }
  .tm-detail-section textarea:focus {
    outline: none; border-color: var(--dg-60, #8A9B8F);
    box-shadow: 0 0 0 2px rgba(45,106,79,0.1);
  }
  .tm-detail-empty {
    font-size: 13px; color: var(--dg-60, #8A9B8F);
    font-style: italic;
    padding: 8px 0;
  }

  /* ── SIDEBAR ── */
  .tm-detail-sidebar {
    background: var(--bg-subtle, #F7F8F4);
    padding: 28px 24px 64px;
    overflow-y: auto;
    display: flex; flex-direction: column; gap: 24px;
  }
  .tm-detail-sb-section {
    display: flex; flex-direction: column; gap: 14px;
  }
  .tm-detail-sb-h {
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--dg-80, #2D6A4F);
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-2, #EEF0ED);
    margin-bottom: 2px;
  }
  .tm-detail-meta-row {
    display: flex; flex-direction: column; gap: 6px;
  }
  .tm-detail-meta-row label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dg-60, #8A9B8F);
  }
  .tm-detail-meta-val {
    font-size: 13px;
    color: var(--ink, #0C140A);
    font-variant-numeric: tabular-nums;
  }

  /* ── CHILD TASKS LIST ── */
  .tm-detail-childlist {
    display: flex; flex-direction: column; gap: 4px;
  }
  .tm-detail-childrow {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid var(--border-2, #EEF0ED);
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    transition: border-color .15s, background .15s, transform .12s;
  }
  .tm-detail-childrow:hover {
    border-color: var(--dg-60, #8A9B8F);
    background: var(--lg-40, #F0FBF4);
    transform: translateX(2px);
  }
  .tm-detail-childtext {
    flex: 1; color: var(--ink, #0C140A); font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* ── DOCS ── */
  .tm-detail-doclist { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
  .tm-detail-doc {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid var(--border-2, #EEF0ED);
    border-radius: 8px;
    transition: border-color .15s;
  }
  .tm-detail-doc:hover { border-color: var(--dg-60, #8A9B8F); }
  .tm-detail-doc a {
    flex: 1; min-width: 0;
    display: flex; align-items: center; gap: 8px;
    color: var(--dg-80, #2D6A4F);
    text-decoration: none;
    font-size: 13.5px;
  }
  .tm-detail-doc a:hover { color: var(--ink, #0C140A); }
  .tm-detail-doc-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tm-detail-doc-icon { font-size: 13px; opacity: 0.7; }
  .tm-detail-doc-del {
    background: transparent; border: none;
    color: var(--dg-60, #8A9B8F);
    font-size: 14px; cursor: pointer;
    width: 24px; height: 24px;
    border-radius: 4px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s;
  }
  .tm-detail-doc-del:hover { background: #fef2f2; color: #dc2626; }
  .tm-detail-add-doc {
    margin-top: 10px;
    padding: 14px;
    background: var(--bg-subtle, #F7F8F4);
    border: 1px solid var(--border-2, #EEF0ED);
    border-radius: 10px;
    display: none;
    flex-direction: column;
    gap: 8px;
  }
  .tm-detail-add-doc-actions {
    display: flex; gap: 6px; justify-content: flex-end;
  }
  .tm-btn-link {
    background: transparent;
    color: var(--dg-80, #2D6A4F);
    border: 1px dashed var(--border, #E5E7EB);
    padding: 8px 14px;
    font-size: 13px;
  }
  .tm-btn-link:hover {
    background: var(--lg-40, #F0FBF4);
    border-color: var(--dg-60, #8A9B8F);
    border-style: solid;
    color: var(--ink, #0C140A);
  }

  /* ── COMMENTS ── */
  .tm-detail-comment-input {
    display: flex; flex-direction: column; gap: 8px;
    margin-bottom: 16px;
  }
  .tm-detail-comment-actions { display: flex; justify-content: flex-end; }
  .tm-detail-timeline { display: flex; flex-direction: column; gap: 10px; }
  .tm-detail-comment {
    padding: 12px 14px;
    background: var(--bg-subtle, #F7F8F4);
    border-radius: 10px;
    border-left: 3px solid var(--dg-40, #B7C4BA);
  }
  .tm-detail-comment-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 8px; margin-bottom: 6px;
  }
  .tm-detail-comment-head strong {
    font-size: 13px; color: var(--ink, #0C140A);
  }
  .tm-detail-comment-date {
    font-size: 11px; color: var(--dg-60, #8A9B8F);
    font-variant-numeric: tabular-nums;
  }
  .tm-detail-comment-text {
    font-size: 13.5px; color: var(--ink, #0C140A);
    line-height: 1.5;
    white-space: pre-wrap;
  }

  /* ── Responsive: stack sidebar below on narrow ── */
  @media (max-width: 920px) {
    .tm-detail-content { grid-template-columns: 1fr; }
    .tm-detail-sidebar {
      border-top: 1px solid var(--border-2, #EEF0ED);
      border-left: none;
    }
    .tm-detail-main {
      border-right: none;
      padding: 28px 24px;
    }
  }
  .tm-detail-header {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 18px;
    background: var(--bg-subtle, #F7F8F4);
    border-bottom: 1px solid var(--border, #E5E7EB);
    flex-shrink: 0;
  }
  .tm-detail-title-input {
    flex: 1; min-width: 0;
    border: none; background: transparent;
    font: inherit; font-size: 18px; font-weight: 700;
    color: var(--ink, #0C140A);
    letter-spacing: -0.01em;
    padding: 4px 6px;
    border-radius: 6px;
  }
  .tm-detail-title-input:focus {
    outline: none;
    background: #fff;
    box-shadow: 0 0 0 2px var(--lg-80, #D1FAE5);
  }
  .tm-detail-body {
    display: grid;
    grid-template-columns: 1fr 240px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }
  .tm-detail-main {
    overflow-y: auto;
    padding: 18px 22px;
    border-right: 1px solid var(--border-2, #EEF0ED);
  }
  .tm-detail-sidebar {
    overflow-y: auto;
    padding: 18px 18px;
    background: var(--bg-subtle, #F7F8F4);
    display: flex; flex-direction: column; gap: 14px;
  }
  .tm-detail-section { margin-bottom: 22px; }
  .tm-detail-section:last-child { margin-bottom: 0; }
  .tm-detail-section h3 {
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--dg-80, #2D6A4F);
    margin: 0 0 8px;
  }
  .tm-detail-section textarea {
    width: 100%;
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 8px;
    padding: 10px 12px;
    font: inherit; font-size: 13px;
    resize: vertical;
    background: #fff;
    color: var(--ink, #0C140A);
    box-sizing: border-box;
    min-height: 60px;
  }
  .tm-detail-section textarea:focus {
    outline: none; border-color: var(--dg-60, #8A9B8F);
    box-shadow: 0 0 0 2px rgba(0,0,0,0.05);
  }
  .tm-detail-empty {
    font-size: 12px; color: var(--dg-60, #8A9B8F);
    font-style: italic;
    padding: 8px 0;
  }

  /* Sidebar metadata rows */
  .tm-detail-meta-row {
    display: flex; flex-direction: column; gap: 4px;
  }
  .tm-detail-meta-row label {
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--dg-60, #8A9B8F);
  }
  .tm-detail-meta-val {
    font-size: 12.5px; color: var(--ink, #0C140A);
    font-variant-numeric: tabular-nums;
  }

  /* Child task rows (epic detail view) */
  .tm-detail-childlist {
    display: flex; flex-direction: column; gap: 4px;
  }
  .tm-detail-childrow {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid var(--border-2, #EEF0ED);
    border-radius: 7px;
    cursor: pointer;
    font-size: 12.5px;
    transition: border-color .15s, background .15s;
  }
  .tm-detail-childrow:hover {
    border-color: var(--dg-60, #8A9B8F);
    background: var(--lg-40, #F0FBF4);
  }
  .tm-detail-childtext {
    flex: 1; color: var(--ink, #0C140A);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* Documentation links */
  .tm-detail-doclist { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
  .tm-detail-doc {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px;
    background: #fff;
    border: 1px solid var(--border-2, #EEF0ED);
    border-radius: 7px;
    transition: border-color .15s;
  }
  .tm-detail-doc:hover { border-color: var(--dg-60, #8A9B8F); }
  .tm-detail-doc a {
    flex: 1; min-width: 0;
    display: flex; align-items: center; gap: 8px;
    color: var(--dg-80, #2D6A4F);
    text-decoration: none;
    font-size: 13px;
  }
  .tm-detail-doc a:hover { color: var(--ink, #0C140A); }
  .tm-detail-doc-title {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .tm-detail-doc-icon { font-size: 12px; opacity: 0.7; }
  .tm-detail-doc-del {
    background: transparent; border: none;
    color: var(--dg-60, #8A9B8F);
    font-size: 14px; cursor: pointer;
    width: 22px; height: 22px;
    border-radius: 4px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s;
  }
  .tm-detail-doc-del:hover { background: #fef2f2; color: #dc2626; }
  .tm-detail-add-doc {
    margin-top: 8px;
    padding: 10px;
    background: var(--bg-subtle, #F7F8F4);
    border-radius: 8px;
    gap: 6px;
  }
  .tm-btn-link {
    background: transparent;
    color: var(--dg-80, #2D6A4F);
    border: 1px dashed var(--border, #E5E7EB);
    padding: 6px 10px;
    font-size: 12px;
  }
  .tm-btn-link:hover {
    background: var(--lg-40, #F0FBF4);
    border-color: var(--dg-60, #8A9B8F);
    color: var(--ink, #0C140A);
  }

  /* Comments / activity */
  .tm-detail-comment-input {
    display: flex; flex-direction: column; gap: 6px;
    margin-bottom: 12px;
  }
  .tm-detail-comment-input textarea {
    background: #fff;
  }
  .tm-detail-comment-input button { align-self: flex-end; }
  .tm-detail-timeline {
    display: flex; flex-direction: column; gap: 8px;
  }
  .tm-detail-comment {
    padding: 10px 12px;
    background: var(--bg-subtle, #F7F8F4);
    border-radius: 8px;
    border-left: 3px solid var(--dg-40, #B7C4BA);
  }
  .tm-detail-comment-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 8px; margin-bottom: 4px;
  }
  .tm-detail-comment-head strong {
    font-size: 12.5px; color: var(--ink, #0C140A);
  }
  .tm-detail-comment-date {
    font-size: 10.5px; color: var(--dg-60, #8A9B8F);
    font-variant-numeric: tabular-nums;
  }
  .tm-detail-comment-text {
    font-size: 13px; color: var(--ink, #0C140A);
    line-height: 1.45;
    white-space: pre-wrap;
  }

  /* Footer */
  .tm-detail-footer {
    display: flex; align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--border, #E5E7EB);
    background: var(--bg-subtle, #F7F8F4);
    flex-shrink: 0;
  }

  /* Responsive: collapse sidebar below the main on narrow modals */
  @media (max-width: 700px) {
    .tm-detail-body { grid-template-columns: 1fr; }
    .tm-detail-main { border-right: none; border-bottom: 1px solid var(--border-2, #EEF0ED); }
  }

  /* Drag & drop visuals */
  .tm-card[draggable="true"] { cursor: grab; }
  .tm-card.tm-dragging { opacity: 0.4; cursor: grabbing; }
  .tm-week-list.tm-drop-over,
  .tm-col-list.tm-drop-over {
    background: var(--lg-40, #F0FBF4);
    box-shadow: inset 0 0 0 2px var(--pred-good, #16A34A);
    border-radius: 6px;
  }

  /* ════════════════════════════════════════════════════════════════
     DISCOVERY · ACTORES (.dx-* namespace)
     2026-05-07
  ════════════════════════════════════════════════════════════════ */
  #tab-actors, #tab-actor-detail { padding: 0; background: var(--bg-subtle, #F7F8F4); }
  #tab-actors.active, #tab-actor-detail.active { display: flex; flex-direction: column; min-height: 100vh; }
  #actors-container, #actor-detail-container { flex: 1; min-height: 0; }

  .dx-page { padding: 32px 40px 64px; max-width: var(--wd-page-max-width); margin: 0 auto; }

  .dx-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 24px; margin-bottom: 24px;
  }
  .dx-titleblock h2 {
    font-size: 24px; font-weight: 800; letter-spacing: -0.02em;
    margin: 0 0 6px; color: var(--ink, #0C140A);
  }
  .dx-titleblock p {
    margin: 0; font-size: 13.5px; line-height: 1.5;
    color: var(--dg-80, #2D6A4F); max-width: 640px;
  }
  .dx-controls { flex-shrink: 0; }

  .dx-btn-primary {
    background: var(--ink, #0C140A);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 18px;
    font: inherit; font-size: 13.5px; font-weight: 600;
    cursor: pointer;
    transition: opacity .15s, transform .15s;
  }
  .dx-btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }

  .dx-btn {
    background: #fff;
    color: var(--ink, #0C140A);
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 7px;
    padding: 8px 14px;
    font: inherit; font-size: 13px; font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s;
  }
  .dx-btn:hover { background: var(--bg-subtle, #F7F8F4); border-color: var(--dg-60, #8A9B8F); }
  .dx-btn-warn { color: #b45309; border-color: #fde68a; }
  .dx-btn-warn:hover { background: #fffbeb; border-color: #f59e0b; }
  .dx-btn-sm {
    background: var(--lg-40, #F0FBF4);
    color: var(--dg-80, #2D6A4F);
    border: 1px solid var(--lg-60, #BBE9C5);
    border-radius: 6px;
    padding: 6px 12px;
    font: inherit; font-size: 12px; font-weight: 600;
    cursor: pointer;
    transition: background .15s;
  }
  .dx-btn-sm:hover { background: var(--lg-60, #BBE9C5); }

  /* ── Matrix ── */
  .dx-matrix-card {
    background: #fff;
    border: 1px solid var(--border-2, #EEF0ED);
    border-radius: 12px;
    padding: 20px 24px 24px;
    margin-bottom: 24px;
    box-shadow: 0 1px 2px rgba(12,20,10,0.03);
  }
  .dx-matrix-head { margin-bottom: 16px; }
  .dx-matrix-title { font-size: 15px; font-weight: 700; color: var(--ink, #0C140A); }
  .dx-matrix-sub { font-size: 12.5px; color: var(--dg-60, #8A9B8F); margin-top: 2px; }

  .dx-matrix {
    display: grid;
    grid-template-columns: 28px 1fr;
    grid-template-rows: 1fr 28px;
    gap: 6px;
    height: 360px;
  }
  .dx-matrix-yaxis {
    grid-column: 1; grid-row: 1;
    writing-mode: vertical-rl; transform: rotate(180deg);
    display: flex; align-items: center; justify-content: center;
    font-size: 11.5px; color: var(--dg-60, #8A9B8F); font-weight: 600;
    letter-spacing: 0.02em;
  }
  .dx-matrix-xaxis {
    grid-column: 2; grid-row: 2;
    display: flex; align-items: center; justify-content: center;
    font-size: 11.5px; color: var(--dg-60, #8A9B8F); font-weight: 600;
    letter-spacing: 0.02em;
  }
  .dx-matrix-grid {
    grid-column: 2; grid-row: 1;
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 8px;
    overflow: hidden;
  }
  .dx-matrix-quad {
    position: relative;
    display: flex; align-items: flex-end; justify-content: flex-start;
    padding: 8px 10px;
    font-size: 11px; font-weight: 600;
    color: rgba(12,20,10,0.5);
  }
  .dx-matrix-quad.q-tl { background: rgba(245, 158, 11, 0.06); border-right: 1px dashed var(--border, #E5E7EB); border-bottom: 1px dashed var(--border, #E5E7EB); align-items: flex-start; }
  .dx-matrix-quad.q-tr { background: rgba(34, 197, 94, 0.06); border-bottom: 1px dashed var(--border, #E5E7EB); align-items: flex-start; justify-content: flex-end; }
  .dx-matrix-quad.q-bl { background: rgba(156, 163, 175, 0.05); border-right: 1px dashed var(--border, #E5E7EB); }
  .dx-matrix-quad.q-br { background: rgba(239, 68, 68, 0.05); justify-content: flex-end; }

  .dx-bubble {
    position: absolute;
    width: 36px; height: 36px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--ink, #0C140A);
    display: flex; align-items: center; justify-content: center;
    cursor: grab;
    z-index: 2;
    box-shadow: 0 2px 6px rgba(12,20,10,0.15);
    transition: transform .15s, box-shadow .15s;
  }
  .dx-bubble:hover {
    transform: translate(-50%, -50%) scale(1.15);
    box-shadow: 0 4px 12px rgba(12,20,10,0.25);
    z-index: 3;
  }
  .dx-bubble:active { cursor: grabbing; }
  .dx-bubble-emoji { font-size: 18px; line-height: 1; }

  /* ── Toolbar ── */
  .dx-toolbar {
    display: flex; align-items: center; gap: 16px;
    margin-bottom: 16px;
  }
  .dx-search {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 8px;
    font: inherit; font-size: 13.5px;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
  }
  .dx-search:focus { outline: none; border-color: var(--dg-80, #2D6A4F); box-shadow: 0 0 0 3px rgba(45,106,79,0.08); }
  .dx-archived-toggle {
    display: flex; align-items: center; gap: 6px;
    font-size: 12.5px; color: var(--dg-80, #2D6A4F);
    cursor: pointer;
    user-select: none;
  }

  /* ── Table ── */
  .dx-table-wrap {
    background: #fff;
    border: 1px solid var(--border-2, #EEF0ED);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(12,20,10,0.03);
  }
  .dx-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
  .dx-table thead th {
    background: var(--bg-subtle, #F7F8F4);
    text-align: left;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--dg-60, #8A9B8F);
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-2, #EEF0ED);
  }
  .dx-table thead th.dx-num { text-align: center; }
  .dx-table tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-2, #EEF0ED);
    vertical-align: middle;
  }
  .dx-table tbody tr:last-child td { border-bottom: none; }
  .dx-row { cursor: pointer; transition: background .12s; }
  .dx-row:hover { background: var(--bg-subtle, #F7F8F4); }
  .dx-row.is-archived { opacity: 0.55; }
  .dx-row-name { display: flex; align-items: center; gap: 12px; }
  .dx-emoji { font-size: 26px; line-height: 1; flex-shrink: 0; }
  .dx-name { font-weight: 600; color: var(--ink, #0C140A); }
  .dx-desc { font-size: 12px; color: var(--dg-60, #8A9B8F); margin-top: 2px; line-height: 1.3; }
  .dx-num { text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }
  .dx-muted { color: var(--dg-40, #B7C4BA); }
  .dx-tag-mini {
    display: inline-block;
    background: var(--lg-40, #F0FBF4);
    color: var(--dg-80, #2D6A4F);
    font-size: 11px; font-weight: 600;
    padding: 2px 7px; border-radius: 4px;
    margin-right: 4px;
  }
  .dx-arch-pill {
    background: #fef3c7; color: #92400e;
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
    padding: 2px 6px; border-radius: 4px;
    margin-left: 6px;
  }

  /* ── Empty state ── */
  .dx-empty {
    padding: 60px 24px;
    text-align: center;
    background: #fff;
    border: 1px solid var(--border-2, #EEF0ED);
    border-radius: 12px;
  }
  .dx-empty-icon { font-size: 42px; margin-bottom: 10px; }
  .dx-empty-title { font-size: 15px; font-weight: 700; color: var(--ink, #0C140A); }
  .dx-empty-sub { font-size: 13px; color: var(--dg-60, #8A9B8F); margin-top: 4px; }
  .dx-empty-mini {
    padding: 14px;
    color: var(--dg-60, #8A9B8F);
    font-size: 12.5px;
    text-align: center;
  }

  /* ════════════════════════════════════════════════════════════════
     ACTOR DETAIL (full-page)
  ════════════════════════════════════════════════════════════════ */
  .dx-detail-page {
    flex: 1;
    display: flex; flex-direction: column;
    width: 100%;
    min-height: 100vh;
    background: var(--bg-subtle, #F7F8F4);
  }
  .dx-detail-header {
    display: flex; align-items: center; gap: 16px;
    padding: 22px 32px 18px;
    background: #fff;
    border-bottom: 1px solid var(--border-2, #EEF0ED);
  }
  .dx-emoji-btn {
    width: 64px; height: 64px;
    border-radius: 12px;
    background: var(--bg-subtle, #F7F8F4);
    border: 1px solid var(--border-2, #EEF0ED);
    font-size: 32px; line-height: 1;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s, border-color .15s;
    flex-shrink: 0;
  }
  .dx-emoji-btn:hover:not([disabled]) { background: #fff; border-color: var(--dg-60, #8A9B8F); }
  .dx-emoji-btn[disabled] { cursor: default; }
  .dx-detail-title { flex: 1; display: flex; align-items: center; gap: 12px; }
  .dx-title-input {
    flex: 1;
    background: transparent;
    border: none;
    font: inherit;
    font-size: 24px; font-weight: 800; letter-spacing: -0.02em;
    color: var(--ink, #0C140A);
    padding: 4px 0;
  }
  .dx-title-input:focus { outline: none; border-bottom: 2px solid var(--dg-80, #2D6A4F); }
  .dx-title-input[readonly] { cursor: default; }
  .dx-detail-actions { flex-shrink: 0; }

  .dx-detail-body {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(280px, 1fr);
    gap: 24px;
    padding: 24px 32px 64px;
  }
  .dx-detail-left, .dx-detail-right {
    display: flex; flex-direction: column; gap: 16px;
    min-width: 0;
  }

  .dx-card {
    background: #fff;
    border: 1px solid var(--border-2, #EEF0ED);
    border-radius: 10px;
    padding: 16px 18px;
    box-shadow: 0 1px 2px rgba(12,20,10,0.03);
  }
  .dx-card h3 { font-size: 14px; font-weight: 700; color: var(--ink, #0C140A); margin: 0; }
  .dx-card h4 { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--dg-80, #2D6A4F); margin: 0 0 10px; }
  .dx-card-muted { background: var(--bg-subtle, #F7F8F4); border-style: dashed; }
  .dx-card-muted .dx-muted { font-size: 12px; }

  .dx-field { margin-bottom: 12px; }
  .dx-field:last-child { margin-bottom: 0; }
  .dx-field label {
    display: block;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--dg-60, #8A9B8F);
    margin-bottom: 4px;
  }
  .dx-input, .dx-textarea {
    width: 100%;
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 7px;
    padding: 8px 10px;
    font: inherit;
    font-size: 13.5px;
    background: #fff;
    color: var(--ink, #0C140A);
    transition: border-color .15s, box-shadow .15s;
  }
  .dx-textarea { resize: vertical; min-height: 60px; line-height: 1.45; }
  .dx-input:focus, .dx-textarea:focus { outline: none; border-color: var(--dg-80, #2D6A4F); box-shadow: 0 0 0 3px rgba(45,106,79,0.08); }
  .dx-input[readonly], .dx-textarea[readonly] { background: var(--bg-subtle, #F7F8F4); cursor: default; }

  /* ── NDPF grid ── */
  .dx-ndpf-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .dx-ndpf {
    border-radius: 10px;
    padding: 14px 16px;
    border: 1px solid;
    min-height: 120px;
  }
  .dx-ndpf-verde { background: #f0fdf4; border-color: #bbf7d0; }
  .dx-ndpf-azul  { background: #eff6ff; border-color: #bfdbfe; }
  .dx-ndpf-ambar { background: #fffbeb; border-color: #fde68a; }
  .dx-ndpf-rojo  { background: #fef2f2; border-color: #fecaca; }

  .dx-ndpf-head { font-size: 13px; font-weight: 700; margin-bottom: 8px; color: var(--ink, #0C140A); }
  .dx-bullets { list-style: none; margin: 0; padding: 0; }
  .dx-bullet {
    display: flex; align-items: flex-start; gap: 6px;
    padding: 4px 0;
    font-size: 13px; line-height: 1.35;
    color: var(--ink, #0C140A);
  }
  .dx-bullet-text {
    flex: 1;
    outline: none;
    padding: 2px 4px;
    border-radius: 3px;
    word-wrap: break-word;
    min-height: 1.2em;
  }
  .dx-bullet-text:focus { background: rgba(255,255,255,0.6); box-shadow: 0 0 0 2px var(--dg-60, #8A9B8F); }
  .dx-bullet-text:empty:before { content: 'escribe…'; color: var(--dg-40, #B7C4BA); }
  .dx-bullet-x {
    background: transparent; border: none; cursor: pointer;
    color: var(--dg-40, #B7C4BA); font-size: 16px; line-height: 1;
    padding: 0 4px; opacity: 0; transition: opacity .15s, color .15s;
  }
  .dx-bullet:hover .dx-bullet-x { opacity: 1; }
  .dx-bullet-x:hover { color: #dc2626; }
  .dx-bullet-add {
    margin-top: 6px;
    background: transparent;
    border: 1px dashed rgba(12,20,10,0.2);
    color: var(--dg-80, #2D6A4F);
    border-radius: 6px;
    padding: 4px 10px;
    font: inherit; font-size: 12px; font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s;
  }
  .dx-bullet-add:hover { background: rgba(255,255,255,0.6); border-style: solid; }

  /* ── Tags edit ── */
  .dx-tags-edit { display: flex; flex-wrap: wrap; gap: 6px; }
  .dx-tag {
    display: inline-flex; align-items: center;
    background: var(--lg-40, #F0FBF4);
    color: var(--dg-80, #2D6A4F);
    font-size: 12px; font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--lg-60, #BBE9C5);
  }
  .dx-tag-x {
    background: transparent; border: none; cursor: pointer;
    color: inherit; opacity: 0.5; padding: 0 0 0 4px;
    font-size: 14px; line-height: 1;
  }
  .dx-tag-x:hover { opacity: 1; color: #dc2626; }
  .dx-tag-input {
    border: none; background: transparent;
    font: inherit; font-size: 12px;
    padding: 4px 8px;
    min-width: 100px; flex: 1;
    outline: none;
    color: var(--ink, #0C140A);
  }

  /* ── Score sliders ── */
  .dx-score-row { margin-bottom: 12px; }
  .dx-score-row:last-child { margin-bottom: 0; }
  .dx-score-row label {
    display: block;
    font-size: 11.5px; font-weight: 600;
    color: var(--dg-80, #2D6A4F);
    margin-bottom: 4px;
  }
  .dx-score-row input[type="range"] { width: calc(100% - 36px); vertical-align: middle; }
  .dx-score-val {
    display: inline-block;
    width: 32px; text-align: right;
    font-size: 13px; font-weight: 700;
    color: var(--ink, #0C140A);
    margin-left: 4px;
    font-variant-numeric: tabular-nums;
  }

  /* ── Metadata ── */
  .dx-meta-row {
    display: flex; justify-content: space-between;
    font-size: 12.5px;
    padding: 4px 0;
    color: var(--dg-80, #2D6A4F);
  }
  .dx-meta-row span:first-child { color: var(--dg-60, #8A9B8F); }
  .dx-meta-row span:last-child { font-weight: 600; color: var(--ink, #0C140A); }

  /* ── Interviews ── */
  .dx-interviews .dx-card-head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 12px;
  }
  .dx-iv-list { display: flex; flex-direction: column; gap: 12px; }
  .dx-iv {
    background: var(--bg-subtle, #F7F8F4);
    border: 1px solid var(--border-2, #EEF0ED);
    border-radius: 8px;
    padding: 12px;
  }
  .dx-iv-row {
    display: flex; gap: 8px; align-items: center;
    margin-bottom: 8px;
  }
  .dx-iv-title {
    flex: 1;
    border: none; background: transparent;
    font: inherit; font-size: 14px; font-weight: 700;
    color: var(--ink, #0C140A);
    padding: 4px 0;
    outline: none;
  }
  .dx-iv-title:focus { border-bottom: 1px solid var(--dg-60, #8A9B8F); }
  .dx-iv-date {
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 6px;
    padding: 4px 8px;
    font: inherit; font-size: 12px;
    color: var(--dg-80, #2D6A4F);
    background: #fff;
  }
  /* Select de producto inline en row de entrevista. Compacto, encaja con
     fecha + botón eliminar. Pre-MVP: sin custom dropdown, basta select nativo. */
  .dx-iv-product {
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 6px;
    padding: 4px 8px;
    font: inherit; font-size: 12px;
    color: var(--wd-content-primary);
    background: #fff;
    cursor: pointer;
    max-width: 160px;
  }
  .dx-iv-product:hover { border-color: var(--wd-content-tertiary); }
  .dx-iv-x {
    background: transparent; border: 1px solid var(--border, #E5E7EB);
    color: #dc2626; padding: 4px 10px;
    font: inherit; font-size: 11px; font-weight: 600;
    border-radius: 6px; cursor: pointer;
    transition: background .15s, border-color .15s;
  }
  .dx-iv-x:hover { background: #fef2f2; border-color: #fecaca; }
  .dx-iv-notes {
    width: 100%;
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 6px;
    padding: 8px 10px;
    font: inherit; font-size: 13px; line-height: 1.45;
    background: #fff;
    color: var(--ink, #0C140A);
    resize: vertical; min-height: 70px;
    margin-bottom: 8px;
  }
  .dx-iv-notes:focus { outline: none; border-color: var(--dg-80, #2D6A4F); box-shadow: 0 0 0 3px rgba(45,106,79,0.08); }
  .dx-iv-insights { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
  .dx-insight {
    display: inline-flex; align-items: center;
    background: #fff;
    border: 1px solid var(--lg-60, #BBE9C5);
    color: var(--dg-80, #2D6A4F);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px; font-weight: 600;
  }
  .dx-insight-input {
    border: 1px dashed var(--border, #E5E7EB);
    background: #fff;
    border-radius: 6px;
    padding: 4px 10px;
    font: inherit; font-size: 12px;
    min-width: 160px;
    color: var(--ink, #0C140A);
    outline: none;
  }
  .dx-insight-input:focus { border-style: solid; border-color: var(--dg-80, #2D6A4F); }

  /* ── Emoji picker ── */
  .dx-emoji-overlay {
    position: fixed; inset: 0;
    background: rgba(12,20,10,0.4);
    display: flex; align-items: center; justify-content: center;
    z-index: 10000;
  }
  .dx-emoji-modal {
    background: #fff;
    border-radius: 12px;
    width: 460px; max-width: 90vw;
    max-height: 80vh;
    display: flex; flex-direction: column;
    box-shadow: 0 20px 60px rgba(12,20,10,0.3);
    overflow: hidden;
  }
  .dx-emoji-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-2, #EEF0ED);
  }
  .dx-emoji-head h4 { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink, #0C140A); }
  .dx-emoji-close {
    background: transparent; border: none; cursor: pointer;
    font-size: 24px; line-height: 1;
    color: var(--dg-60, #8A9B8F);
    padding: 0 4px;
  }
  .dx-emoji-close:hover { color: var(--ink, #0C140A); }
  .dx-emoji-body { padding: 16px 20px; overflow-y: auto; }
  .dx-emoji-group { margin-bottom: 16px; }
  .dx-emoji-group:last-child { margin-bottom: 0; }
  .dx-emoji-group-name {
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--dg-60, #8A9B8F);
    margin-bottom: 6px;
  }
  .dx-emoji-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
  }
  .dx-emoji-item {
    background: transparent; border: 1px solid transparent;
    border-radius: 6px;
    font-size: 22px; line-height: 1;
    padding: 6px;
    cursor: pointer;
    transition: background .12s, border-color .12s, transform .12s;
  }
  .dx-emoji-item:hover {
    background: var(--bg-subtle, #F7F8F4);
    border-color: var(--dg-60, #8A9B8F);
    transform: scale(1.15);
  }

  /* Responsive */
  @media (max-width: 900px) {
    .dx-page { padding: 20px 16px 48px; }
    .dx-detail-body { grid-template-columns: 1fr; padding: 16px; }
    .dx-ndpf-grid { grid-template-columns: 1fr; }
  }

  /* ════════════════════════════════════════════════════════════════
     KPIs — Wise design system (slim, extiende .wd-*)
     2026-05-07
     Solo aquí va lo distintivo de KPIs. Los componentes (card, chip,
     button, input, switch, segmented, progress) viven en .wd-*.
  ════════════════════════════════════════════════════════════════ */
  #tab-kpis, #tab-kpi-detail, #tab-kpi-bulk,
  #tab-impacts, #tab-impact-detail, #tab-map {
    padding: 0;
    background: var(--wd-bg-screen);
  }
  #tab-kpis.active, #tab-kpi-detail.active, #tab-kpi-bulk.active,
  #tab-impacts.active, #tab-impact-detail.active, #tab-map.active {
    display: flex; flex-direction: column; min-height: 100vh;
  }
  #kpis-container, #kpi-detail-container, #kpi-bulk-container,
  #impacts-container, #impact-detail-container, #map-container { flex: 1; min-height: 0; }

  /* ── Page layout ────────────────────────────────────────────── */
  .kp-page {
    padding: var(--wd-padding-lg);          /* 32px Wise */
    max-width: var(--wd-page-max-width);
    margin: 0 auto;
    display: flex; flex-direction: column;
    gap: var(--wd-padding-lg);              /* 32px gap entre secciones */
  }
  .kp-page-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--wd-s-6);
    flex-wrap: wrap;
    padding-bottom: var(--wd-s-4);
    border-bottom: 1px solid var(--wd-border-neutral);
  }
  .kp-page-titleblock { display: flex; flex-direction: column; gap: var(--wd-s-2); max-width: 640px; }
  .kp-page-titleblock h1 { margin: 0; font-size: 32px; }
  .kp-page-titleblock p  { margin: 0; font-size: var(--wd-fs-lg); }

  .kp-pills { gap: var(--wd-s-2); }
  /* Alias legacy: el cluster de chips KPI usa un mini-vertical divider entre
     grupos (kind chips · state chips). Heredado de --vertical para
     consistencia con el resto del sistema; ajusta solo la altura mínima
     que el chip impone al cluster. */
  .kp-pills-divider {
    width: 1px;
    height: 22px;
    background: var(--wd-border-neutral);
    align-self: center;
    margin: 0 var(--wd-padding-xs);
    flex-shrink: 0;
  }

  .kp-toolbar {
    display: flex; align-items: center; gap: var(--wd-s-4);
    flex-wrap: wrap;
  }
  .kp-search { flex: 1; min-width: 240px; }

  /* ── Empty state ────────────────────────────────────────────── */
  .kp-empty {
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
    padding: var(--wd-padding-lg);            /* 32px Wise */
    background: var(--wd-bg-elevated);
    border: 1px solid var(--wd-border-neutral);
    border-radius: var(--wd-radius-md);
  }
  .kp-empty-icon {
    width: 64px; height: 64px;
    background: var(--wd-bg-neutral);
    border-radius: var(--wd-radius-full);
    display: flex; align-items: center; justify-content: center;
    color: var(--wd-content-tertiary);
    margin-bottom: var(--wd-s-4);
  }
  .kp-empty h2 { margin: 0 0 var(--wd-s-2); }
  .kp-empty p  { margin: 0; max-width: 420px; }

  /* ── Card grid ─────────────────────────────────────────────── */
  /* Card width fijo (min 280, max 360) y auto-fill: caben las que caben.
     Proporciones consistentes en cualquier viewport — sin breakpoints. */
  .kp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 360px));
    gap: var(--wd-s-4);
  }

  /* Card específica de KPI: 2 secciones con bg distinto (estilo Wise wallet).
     Top = contexto (bg neutral). Bottom = datos (bg elevated, blanco).
     Padding vive en cada sección, no en la card madre. */
  .kp-card {
    --kp-bignum-color: var(--wd-content-primary);
    padding: 0;                                /* sobrescribe wd-card */
    overflow: hidden;
    gap: 0;
  }
  .kp-card.kp-card--pos     { --kp-bignum-color: var(--wd-pos); }
  .kp-card.kp-card--warn    { --kp-bignum-color: var(--wd-content-primary); }
  .kp-card.kp-card--neg     { --kp-bignum-color: var(--wd-neg); }
  .kp-card.kp-card--neutral { --kp-bignum-color: var(--wd-content-secondary); }
  .kp-card.is-archived { opacity: 0.55; }

  /* Top y bottom comparten bg de la card madre (--wd-bg-neutral).
     Las dos secciones solo controlan padding/spacing, no color. */
  .kp-card-top {
    padding: var(--wd-padding-md) var(--wd-padding-md) var(--wd-padding-sm);
    display: flex; flex-direction: column;
    gap: var(--wd-padding-sm);
  }
  .kp-card-bottom {
    padding: var(--wd-padding-sm) var(--wd-padding-md) var(--wd-padding-md);
    display: flex; flex-direction: column;
    gap: var(--wd-padding-sm);
    flex: 1;
  }

  .kp-card-title { display: flex; flex-direction: column; gap: 4px; }
  .kp-card-name { margin: 0; line-height: 1.2; }
  .kp-card-bignum-row {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--wd-padding-xs); flex-wrap: wrap;
  }
  .kp-card-bignum {
    line-height: 1;
    color: var(--kp-bignum-color);
    transition: color .2s var(--wd-ease);
  }
  .kp-card-spark { width: 100%; }
  .kp-card-spark svg { width: 100%; height: auto; display: block; }
  .kp-card-foot {
    display: flex; flex-direction: column; gap: var(--wd-padding-xs);
  }
  .kp-card-target { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
  .kp-card-target strong { font-weight: var(--wd-fw-bold); }
  .kp-progress-label {
    font-size: var(--wd-fs-xs);
    font-weight: var(--wd-fw-bold);
    text-align: right;
    margin-top: 2px;
    letter-spacing: 0.02em;
  }

  /* ── Detail page ────────────────────────────────────────────── */
  .kp-detail-page {
    flex: 1;
    display: flex; flex-direction: column;
    min-height: 100vh;
    background: var(--wd-bg-screen);
  }
  .kp-detail-topbar {
    padding: var(--wd-padding-sm) var(--wd-padding-md);   /* 16/24 Wise */
    border-bottom: 1px solid var(--wd-border-neutral);
    background: var(--wd-bg-screen);
    position: sticky; top: 0; z-index: 5;
  }
  .kp-detail-header {
    display: flex; align-items: center; gap: var(--wd-padding-sm);
    padding: var(--wd-padding-md) var(--wd-padding-lg);   /* 24/32 Wise */
    background: var(--wd-bg-screen);
    border-bottom: 1px solid var(--wd-border-neutral);
  }
  .kp-detail-titlewrap {
    flex: 1; display: flex; align-items: center; gap: var(--wd-s-3);
    min-width: 0;
  }
  .kp-detail-title {
    flex: 1; min-width: 0;
    background: transparent;
    border: none;
    padding: 4px 0;
    color: var(--wd-content-primary);
    font-family: var(--wd-font-family);
  }
  .kp-detail-title:focus {
    outline: none;
    box-shadow: 0 2px 0 0 var(--wd-interactive-primary);
  }
  .kp-detail-title[readonly] { cursor: default; }
  /* La nueva estructura del detail: grid 2-col (3fr main + 1fr aside).
     El main aloja hero + stats + content; el aside aloja la config
     siempre visible. Hace que los campos de config (palabras cortas y
     selects) ya no sean full-width — escalan con el ancho del aside. */
  .kp-detail-page {
    padding: var(--wd-padding-md) var(--wd-padding-lg) var(--wd-padding-lg);
    gap: var(--wd-padding-md);
  }
  /* Banner de prompts contextuales (warnings, errors, etc.) — se apilan
     verticalmente justo debajo del topbar para que sean lo primero que
     vea el usuario al abrir el KPI. */
  .kp-detail-prompts {
    display: flex;
    flex-direction: column;
    gap: var(--wd-padding-xs);
  }
  .kp-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(280px, 1fr);
    gap: var(--wd-padding-md);
    align-items: start;
  }
  /* Viewport estrecho: colapsa a 1 columna (hero arriba, config abajo). */
  @media (max-width: 1100px) {
    .kp-detail-grid { grid-template-columns: 1fr; }
  }
  .kp-detail-main {
    display: flex;
    flex-direction: column;
    gap: var(--wd-padding-md);
    min-width: 0;
  }
  /* Aside ya no es un contenedor monolítico gris: es un wrapper flex que
     aloja dos cards INDEPENDIENTES (Actualizar + Configuración). Cada
     card tiene su propio shadow Wise. Sticky se aplica al wrapper para
     que ambas cards bajen contigo al hacer scroll en el main. */
  .kp-detail-aside {
    display: flex;
    flex-direction: column;
    gap: var(--wd-padding-md);
    position: sticky;
    top: var(--wd-padding-md);
    max-height: calc(100vh - var(--wd-padding-lg));
    overflow-y: auto;
  }

  /* ── Card head Wise compartido (Actualizar + Configuración) ──
     Título tipo `wd-text-section` (18px semi) + subtítulo meta. La
     jerarquía evita confusión entre el "header" de la card y los
     labels minúsculos de los inputs (anterior bug: ambos eran
     `wd-text-label`). */
  .kp-card-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: var(--wd-padding-sm);
    border-bottom: 1px solid var(--wd-border-neutral);
    margin-bottom: var(--wd-padding-sm);
  }
  .kp-card-title {
    margin: 0;
    font-family: var(--wd-font-family);
    font-size: 18px;
    font-weight: var(--wd-fw-semi);
    color: var(--wd-content-primary);
    line-height: 1.2;
  }
  .kp-card-subtitle {
    margin: 0;
    line-height: 1.3;
  }

  /* ── Card de Actualizar valor ──
     Entrada CTA del flujo de medición. Inputs en grid 2-col (valor 2fr +
     fecha 1fr) — antes eran filas separadas innecesariamente verticales.
     Botón primario full-width al pie. */
  .kp-update-card {
    padding: var(--wd-padding-md);
    display: flex;
    flex-direction: column;
    gap: var(--wd-padding-sm);
  }
  .kp-update-card-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--wd-padding-sm);
  }
  .kp-update-amount-wrap, .kp-update-date-wrap {
    min-width: 0;
  }
  .kp-update-card-submit {
    width: 100%;
    margin-top: 4px;
  }
  /* Money input expressive (Wise): valor grande + unidad sufijo a la
     derecha, font-size del valor más prominente que un input normal. */
  .kp-money-input {
    display: flex;
    align-items: baseline;
    gap: var(--wd-padding-xs);
    background: var(--wd-bg-elevated);
    border: var(--input-border);
    border-radius: var(--input-radius);
    padding: 8px var(--input-padding-x);
    transition: border-color .15s var(--wd-ease), box-shadow .15s var(--wd-ease);
  }
  .kp-money-input:focus-within {
    border-color: var(--input-border-focus);
    box-shadow: var(--input-shadow-focus);
  }
  .kp-money-input-amount {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--wd-display-num);
    font-size: 24px;
    font-weight: var(--wd-fw-semi);
    color: var(--wd-content-primary);
    line-height: 1.2;
    padding: 0;
  }
  .kp-money-input-amount::placeholder {
    color: var(--wd-content-tertiary);
    font-weight: var(--wd-fw-regular);
  }
  .kp-money-input-unit {
    font-size: var(--wd-fs-md);
    font-weight: var(--wd-fw-semi);
    color: var(--wd-content-tertiary);
    flex-shrink: 0;
  }
  .kp-update-date {
    /* Native date picker: estilizado compacto para encajar en el grid. */
    width: 100%;
  }

  /* ── Card de Configuración ──
     Card propia con shadow. Header rich (kp-card-head), body con
     secciones internas separadas por dividers Wise --content (16px
     spacing arriba/abajo). Las inner-cards (.kp-section) viven sin
     shadow porque ya están dentro del padre. */
  .kp-config-card {
    padding: var(--wd-padding-md);
    display: flex;
    flex-direction: column;
  }
  .kp-config-card-body {
    display: flex;
    flex-direction: column;
    gap: 0;   /* spacing entre sections lo aporta el <hr class="wd-divider--content"> */
  }
  /* Cada section interna del config: stack vertical, sin background,
     sin shadow (la card padre ya provee el contenedor). El gap interno
     pequeño (s-2 = 8px) separa label · input · helper-text. */
  .kp-config-card-body .kp-section {
    padding: 0;
    background: transparent;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    gap: var(--wd-s-2);
  }
  /* Sin border-top fantasma: los dividers Wise --content viven entre
     secciones como hr explícito (no más líneas pasando por detrás de
     los labels). */
  .kp-config-card-body .wd-input,
  .kp-config-card-body .wd-segmented-item {
    font-size: var(--wd-fs-md);
  }
  .kp-config-card-body .wd-segmented {
    flex-wrap: wrap;
  }

  /* Target + dirección en MISMA fila: input flex 1, icon-button auto.
     Para health metric, dos inputs lado a lado (Mín · Máx). */
  .kp-target-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--wd-padding-xs);
    align-items: stretch;
  }
  /* En health metric usa 2 columnas iguales (Mín / Máx). */
  .kp-config-card-body .kp-section .kp-target-row:has(input + input) {
    grid-template-columns: 1fr 1fr;
  }

  /* ── Wise icon-button (https://wise.design/components/icon-button) ──
     Botón circular con un solo icono. Pensado para acciones contextuales
     dentro de un input row o toolbar. Estados: default, hover, active,
     toggling (animación al cambiar el estado lógico). */
  .wd-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    flex-shrink: 0;
    border-radius: var(--wd-radius-full);
    background: var(--wd-bg-elevated);
    border: 1px solid var(--wd-border-neutral);
    color: var(--wd-content-primary);
    cursor: pointer;
    padding: 0;
    transition: background .12s var(--wd-ease), border-color .12s var(--wd-ease);
  }
  .wd-icon-btn:hover {
    background: var(--wd-bg-neutral);
    border-color: var(--wd-content-tertiary);
  }
  .wd-icon-btn:focus-visible {
    outline: none;
    border-color: var(--wd-forest-green);
    box-shadow: 0 0 0 2px rgba(159, 232, 112, 0.30);
  }
  .wd-icon-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .wd-icon-btn svg {
    transition: transform .25s var(--wd-ease);
  }
  /* Estado "toggling": el icono rota 180° antes del re-render. Da
     feedback de cambio de estado sin necesidad de spinner explícito —
     la flecha YA es el indicador del estado, así que rotarla es
     literalmente "cambiar la dirección". */
  .wd-icon-btn.is-toggling svg {
    transform: rotate(180deg);
  }
  .kp-direction-btn {
    background: var(--wd-bg-neutral);
    border-color: rgba(22, 51, 0, 0.12);
  }
  .kp-direction-btn:hover {
    background: var(--wd-bright-green);
    border-color: var(--wd-forest-green);
    color: var(--wd-forest-green);
  }

  /* ── HERO CARD del KPI detail ──
     Patrón Wise: caption + chips meta arriba, número masivo a la izquierda,
     delta a la derecha, chart suave debajo, CTA registrar al pie. */
  .kp-hero {
    padding: var(--wd-padding-lg);
    display: flex;
    flex-direction: column;
    gap: var(--wd-padding-md);
  }
  .kp-hero-chips {
    /* hereda de wd-cluster — solo limitamos margin */
  }
  .kp-hero-title {
    font-family: var(--wd-font-family);
    font-size: 28px;
    font-weight: var(--wd-fw-semi);
    line-height: 1.2;
    color: var(--wd-content-primary);
    background: transparent;
    border: none;
    padding: 0;
    width: 100%;
    outline: none;
  }
  .kp-hero-title:focus { box-shadow: 0 2px 0 0 var(--wd-interactive-primary); }
  .kp-hero-title[readonly] { cursor: default; }
  .kp-hero-caption {
    margin: 0;
    color: var(--wd-content-secondary);
    line-height: 1.4;
  }
  .kp-hero-numrow {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--wd-padding-md);
    flex-wrap: wrap;
    padding-block: var(--wd-padding-xs);
  }
  .kp-hero-numblock { display: flex; align-items: baseline; gap: var(--wd-padding-xs); min-width: 0; }
  .kp-hero-num {
    font-family: var(--wd-display-num);
    font-size: 64px;
    font-weight: var(--wd-fw-bold);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--wd-content-primary);
    word-break: break-word;
  }
  .kp-hero-unit {
    font-size: 18px;
    font-weight: var(--wd-fw-medium);
    color: var(--wd-content-tertiary);
  }
  .kp-hero-delta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    text-align: right;
    min-width: 0;
  }
  .kp-hero-delta-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border-radius: var(--wd-radius-full);
    font-size: 18px; font-weight: var(--wd-fw-bold);
    margin-bottom: 2px;
  }
  .kp-hero-delta.is-pos .kp-hero-delta-arrow {
    background: rgba(47, 87, 17, 0.12);   /* sentiment-pos tint */
    color: var(--wd-pos);
  }
  .kp-hero-delta.is-neg .kp-hero-delta-arrow {
    background: rgba(168, 32, 13, 0.10);  /* sentiment-neg tint */
    color: var(--wd-neg);
  }
  .kp-hero-delta.is-neutral .kp-hero-delta-arrow {
    background: var(--wd-bg-neutral);
    color: var(--wd-content-tertiary);
  }
  .kp-hero-delta-num {
    font-family: var(--wd-display-num);
    font-size: 18px;
    font-weight: var(--wd-fw-bold);
    color: var(--wd-content-primary);
  }
  .kp-hero-delta.is-pos .kp-hero-delta-num { color: var(--wd-pos); }
  .kp-hero-delta.is-neg .kp-hero-delta-num { color: var(--wd-neg); }
  .kp-hero-delta-meta {
    font-size: var(--wd-fs-sm);
    color: var(--wd-content-tertiary);
  }
  .kp-hero-chart {
    margin-block: var(--wd-padding-xs);
  }
  .kp-hero-chart-empty {
    text-align: center;
    padding: var(--wd-padding-lg) var(--wd-padding-md);
    background: var(--wd-bg-neutral);
    border-radius: var(--wd-radius-sm);
  }

  /* ── STATS GRID: 3 mini-cards horizontales ── */
  .kp-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--wd-padding-sm);
  }
  .kp-stat-mini {
    padding: var(--wd-padding-md);
    display: flex;
    flex-direction: column;
    gap: var(--wd-padding-xs);
  }
  .kp-stat-mini-head {
    display: flex; align-items: center; gap: var(--wd-padding-xs);
    color: var(--wd-content-tertiary);
  }
  .kp-stat-mini-num {
    font-family: var(--wd-display-num);
    font-size: 32px;
    font-weight: var(--wd-fw-bold);
    line-height: 1;
    color: var(--wd-content-primary);
  }
  .kp-stat-mini-num--pos { color: var(--wd-pos); }
  .kp-stat-mini-num--warn { color: #B07700; }
  .kp-stat-mini-num--neg { color: var(--wd-neg); }
  .kp-stat-mini-num--neutral { color: var(--wd-content-tertiary); }
  .kp-stat-mini-num-unit {
    font-size: 18px;
    font-weight: var(--wd-fw-medium);
    color: var(--wd-content-tertiary);
    margin-left: 2px;
  }
  .kp-stat-mini-lbl {
    font-size: var(--wd-fs-sm);
    color: var(--wd-content-secondary);
    line-height: 1.4;
  }

  .kp-section {
    display: flex; flex-direction: column;
    gap: var(--wd-s-3);
  }
  .kp-section h3 { margin: 0; }
  .kp-section--muted { background: var(--wd-bg-neutral); }

  .kp-measure-row {
    display: flex; gap: var(--wd-s-4); flex-wrap: wrap;
  }
  .kp-measure-row > * { flex: 1; min-width: 130px; }
  .kp-record-row {
    display: flex; gap: var(--wd-s-2); align-items: center;
  }
  .kp-record-row > .wd-input { flex: 1; min-width: 0; }

  .kp-chart {
    width: 100%;
    height: 240px;
    display: block;
    overflow: visible; /* el halo pulsante se sale del viewBox y debe verse */
  }
  /* Halo pulsante en el último punto del chart — toque sofisticado Wise */
  .kp-chart-pulse {
    transform-origin: center;
    transform-box: fill-box;
    animation: kp-chart-pulse 2s var(--wd-ease) infinite;
  }
  @keyframes kp-chart-pulse {
    0%   { transform: scale(0.7); opacity: 0.6; }
    70%  { transform: scale(2.6); opacity: 0;   }
    100% { transform: scale(2.6); opacity: 0;   }
  }
  .kp-chart-last { pointer-events: none; }

  /* ── Bulk update ────────────────────────────────────────────── */
  .kp-bulk-page {
    padding: var(--wd-padding-md) var(--wd-padding-lg) 120px;   /* 24/32 Wise */
    max-width: var(--wd-page-max-width);
    margin: 0 auto;
    display: flex; flex-direction: column; gap: var(--wd-padding-sm);
  }
  .kp-bulk-toolbar {
    display: flex; align-items: flex-end; gap: var(--wd-padding-md);
    padding: var(--wd-padding-sm);                              /* 16px Wise */
    flex-wrap: wrap;
  }
  .kp-bulk-table-wrap {
    overflow: hidden;
    background: var(--wd-bg-elevated);
  }
  .kp-bulk-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--wd-font-family);
    font-size: var(--wd-fs-md);
  }
  .kp-bulk-table thead th {
    background: var(--wd-bg-neutral);
    text-align: left;
    font-size: var(--wd-fs-xs);
    font-weight: var(--wd-fw-semi);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--wd-content-tertiary);
    padding: var(--wd-s-3) var(--wd-s-4);
    border-bottom: 1px solid var(--wd-border-neutral);
    white-space: nowrap;
  }
  .kp-bulk-table thead th.kp-bulk-num { text-align: right; }
  .kp-bulk-table tbody td {
    padding: var(--wd-s-3) var(--wd-s-4);
    border-bottom: 1px solid var(--wd-border-neutral);
    vertical-align: middle;
  }
  .kp-bulk-table tbody tr:last-child td { border-bottom: none; }
  .kp-bulk-row:hover { background: var(--wd-bg-neutral); }
  .kp-bulk-num { text-align: right; }
  .kp-bulk-current { color: var(--wd-content-secondary); font-weight: var(--wd-fw-semi); }
  .kp-bulk-input {
    width: 130px;
    text-align: right;
    padding: 8px 12px;
  }
  .kp-bulk-input:not(:placeholder-shown) {
    background: rgba(237, 200, 67, 0.10);
    border-color: var(--wd-warn);
  }
  .kp-bulk-footer {
    position: fixed;
    bottom: 0; left: 240px; right: 0;
    background: var(--wd-bg-elevated);
    border-top: 1px solid var(--wd-border-neutral);
    padding: var(--wd-padding-sm) var(--wd-padding-lg);   /* 16/32 Wise */
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--wd-padding-sm);
    z-index: 10;
    box-shadow: 0 -4px 20px rgba(14, 15, 12, 0.05);
  }
  body.sidebar-collapsed .kp-bulk-footer { left: 60px; }
  .kp-bulk-summary { flex: 1; font-size: var(--wd-fs-md); color: var(--wd-content-primary); }

  kbd {
    background: var(--wd-bg-neutral);
    border: 1px solid var(--wd-border-neutral);
    border-radius: 6px;          /* element ultra-pequeño, fuera escala Wise */
    padding: 1px 6px;
    font-size: 11px;
    font-family: ui-monospace, monospace;
    color: var(--wd-content-primary);
  }

  /* (Sin breakpoints mobile — plataforma desktop 100%) */

  /* ── Legacy aliases (mientras no migremos otras pantallas) ── */
  .hm-summary, .hm-sum-cell, .hm-sum-num, .hm-sum-lbl,
  .hm-sum-good, .hm-sum-bad, .hm-sum-neutral, .hm-grid,
  .kp-tabs, .kp-tab, .kp-tab-count,
  .kp-pill, .kp-pill-clear,
  .kp-kind-pill, .kp-tracker-hint, .kp-tracker-tag,
  .kp-card-corner, .kp-card-good, .kp-card-mid, .kp-card-bad, .kp-card-neutral,
  .kp-card-meta, .kp-card-metric, .kp-card-trend, .kp-card-status, .kp-card-tracker-hint, .kp-card-dir,
  .kp-card-head, .kp-card-values, .kp-card-value, .kp-card-value-num, .kp-card-value-lbl,
  .kp-progress, .kp-progress-card, .kp-progress-big, .kp-progress-fill,
  .kp-progress-good, .kp-progress-mid, .kp-progress-bad, .kp-progress-neutral,
  .kp-health-status, .kp-spark-wrap, .kp-spark,
  .kp-detail-emoji, .kp-meta-row,
  .kp-moment-card, .kp-moment-checks, .kp-moment-check, .kp-moment-text, .kp-moment-emoji,
  .kp-chip-row, .kp-chip-label, .kp-chip-select,
  .kp-measure-card, .kp-measure-block, .kp-num-input,
  .kp-fresh-pill, .kp-fresh-fresh, .kp-fresh-aging, .kp-fresh-stale, .kp-fresh-never,
  .kp-trend, .kp-trend-good, .kp-trend-bad, .kp-trend-flat,
  .kp-freq-line, .kp-freq-row, .kp-freq-hint,
  .kp-bulk-date-lbl, .kp-bulk-date-input, .kp-bulk-filter, .kp-bulk-name, .kp-bulk-metric,
  .kp-bulk-actions, .kp-bulk-unit { /* noop — clases obsoletas, reemplazadas por .wd-* */ }

  /* ════════════════════════════════════════════════════════════════
     [bloque KPI viejo eliminado — vive ahora arriba en .kp-* slim + .wd-*]
  ════════════════════════════════════════════════════════════════ */
  /* (bloque KPI viejo eliminado totalmente — vive arriba en .kp-* slim + .wd-*) */

  /* ════════════════════════════════════════════════════════════════
     DISCOVERY · IMPACTS (.imp-* namespace)
     2026-05-07
  ════════════════════════════════════════════════════════════════ */
  .imp-list {
    display: flex; flex-direction: column;
    gap: 12px;
  }
  .imp-card {
    background: #fff;
    border: 1px solid var(--border-2, #EEF0ED);
    border-radius: 12px;
    padding: 16px 18px;
    cursor: pointer;
    transition: transform .12s, box-shadow .12s, border-color .12s;
    display: flex;
    gap: 16px;
    box-shadow: 0 1px 2px rgba(12,20,10,0.03);
  }
  .imp-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(12,20,10,0.07);
    border-color: var(--dg-60, #8A9B8F);
  }
  .imp-card.is-archived { opacity: 0.55; }
  .imp-rank {
    flex-shrink: 0;
    width: 36px; height: 36px;
    background: #EDE9FE;
    color: #6D28D9;
    border-radius: 8px;
    font-weight: 700; font-size: 15px;
    display: flex; align-items: center; justify-content: center;
  }
  .imp-card-body { flex: 1; min-width: 0; }
  .imp-card-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 14px; margin-bottom: 6px;
  }
  .imp-title-row { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
  .imp-title {
    margin: 0;
    font-size: 15px; font-weight: 700;
    color: var(--ink, #0C140A);
  }
  .imp-direction {
    font-size: 18px; font-weight: 700;
    color: var(--dg-60, #8A9B8F);
  }
  .imp-score-block, .imp-score-header {
    display: flex; flex-direction: column; align-items: center;
    flex-shrink: 0;
  }
  .imp-score-num {
    font-size: 28px; font-weight: 800;
    color: #6D28D9;
    line-height: 1;
  }
  .imp-score-lbl {
    font-size: 9px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--dg-60, #8A9B8F);
    margin-top: 2px;
  }
  .imp-score-header {
    margin-right: 12px;
  }
  .imp-desc {
    font-size: 13px; line-height: 1.4;
    color: var(--dg-80, #2D6A4F);
    margin-bottom: 10px;
  }
  .imp-progress {
    background: var(--border-2, #EEF0ED);
    border-radius: 999px;
    height: 6px;
    overflow: hidden;
    margin-bottom: 10px;
  }
  .imp-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #A78BFA, #6D28D9);
    border-radius: 999px;
    transition: width .3s ease;
  }
  .imp-meta-row {
    display: flex; gap: 8px; flex-wrap: wrap;
    margin-bottom: 8px;
  }
  .imp-mag-badge, .imp-conf-badge {
    font-size: 11px; font-weight: 600;
    padding: 3px 8px;
    border-radius: 999px;
    text-transform: capitalize;
  }
  .imp-mag-low    { background: #fef3c7; color: #92400e; }
  .imp-mag-medium { background: #fde68a; color: #78350f; }
  .imp-mag-high   { background: #fbbf24; color: #1f2937; }
  .imp-conf-low    { background: #fee2e2; color: #991b1b; }
  .imp-conf-medium { background: #fef3c7; color: #92400e; }
  .imp-conf-high   { background: #d1fae5; color: #065f46; }

  .imp-links {
    display: flex; gap: 6px; flex-wrap: wrap;
    margin-top: 4px;
  }
  .imp-actor-chip {
    background: #d1fae5;
    color: #065f46;
    font-size: 11.5px; font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
  }
  .imp-actor-chip.imp-more, .imp-kpi-pill.imp-more {
    background: var(--bg-subtle, #F7F8F4);
    color: var(--dg-60, #8A9B8F);
  }
  .imp-kpi-pill {
    background: #fef3c7;
    color: #92400e;
    font-size: 11.5px; font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
  }

  /* Detail */
  .imp-actor-list, .imp-kpi-list, .imp-epic-list {
    display: flex; flex-direction: column;
    gap: 6px;
  }
  .imp-actor-row, .imp-kpi-row, .imp-epic-row {
    display: flex; align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--bg-subtle, #F7F8F4);
    border-radius: 7px;
    font-size: 13px;
  }
  .imp-actor-row input[type="range"] { flex: 1; }
  .imp-actor-emoji, .imp-kpi-emoji { font-size: 18px; flex-shrink: 0; }
  .imp-actor-name, .imp-kpi-name { flex: 1; font-weight: 600; color: var(--ink, #0C140A); min-width: 0; }
  .imp-w {
    width: 44px; text-align: right;
    font-weight: 700; font-variant-numeric: tabular-nums;
    color: var(--ink, #0C140A);
  }
  .imp-kpi-row { cursor: pointer; }
  .imp-kpi-row input[type="checkbox"] { width: 16px; height: 16px; }
  .imp-kpi-value {
    font-variant-numeric: tabular-nums;
    color: var(--dg-80, #2D6A4F);
    font-weight: 600;
  }
  .imp-actor-add {
    display: flex; gap: 8px; margin-top: 10px;
  }
  .imp-actor-add .kp-chip-select { flex: 1; }
  .imp-epic-row { cursor: pointer; transition: background .12s; }
  .imp-epic-row:hover { background: var(--lg-40, #F0FBF4); }
  .imp-epic-id {
    background: #EDE9FE; color: #6D28D9;
    font-family: ui-monospace, monospace;
    font-size: 11px; font-weight: 700;
    padding: 2px 7px; border-radius: 4px;
    flex-shrink: 0;
  }
  .imp-epic-title { flex: 1; font-weight: 600; min-width: 0; }
  .imp-epic-team { color: var(--dg-60, #8A9B8F); font-size: 12px; }
  .imp-epic-status {
    font-size: 11px; font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    text-transform: uppercase; letter-spacing: 0.04em;
  }
  .imp-status-todo     { background: #f1f5f9; color: #475569; }
  .imp-status-progress { background: #fef3c7; color: #92400e; }
  .imp-status-done     { background: #d1fae5; color: #065f46; }

  .imp-score-breakdown {
    display: flex; flex-direction: column; gap: 4px;
  }
  .imp-sb-row {
    display: flex; justify-content: space-between;
    font-size: 12.5px;
    padding: 4px 0;
    color: var(--dg-80, #2D6A4F);
  }
  .imp-sb-row span:last-child { font-weight: 600; color: var(--ink, #0C140A); }
  .imp-sb-total {
    border-top: 1px solid var(--border-2, #EEF0ED);
    margin-top: 6px;
    padding-top: 8px;
    font-size: 14px;
  }
  .imp-sb-total span:last-child {
    color: #6D28D9;
    font-size: 18px;
    font-weight: 800;
  }

  /* ── Tareas/Épicas: Impact picker ── */
  .tm-impact-picker {
    background: var(--bg-subtle, #F7F8F4);
    border: 1px solid var(--border-2, #EEF0ED);
    border-radius: 8px;
    padding: 10px 12px;
  }
  .tm-impact-select {
    width: 100%;
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 7px;
    padding: 8px 10px;
    font: inherit; font-size: 13.5px;
    background: #fff;
    color: var(--ink, #0C140A);
    cursor: pointer;
  }
  .tm-impact-select:focus { outline: none; border-color: #7C3AED; box-shadow: 0 0 0 3px rgba(124,58,237,0.1); }
  .tm-impact-weight {
    display: flex; align-items: center;
    gap: 8px;
    margin-top: 10px;
  }
  .tm-impact-weight label {
    font-size: 12px; font-weight: 600;
    color: var(--dg-80, #2D6A4F);
    flex: 1;
  }
  .tm-impact-weight input[type="number"] {
    width: 80px;
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 6px;
    padding: 6px 8px;
    font: inherit; font-size: 13px;
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .tm-impact-weight-suffix {
    font-size: 13px; font-weight: 600;
    color: var(--dg-60, #8A9B8F);
  }

  /* ════════════════════════════════════════════════════════════════
     PORTFOLIO · Productos (.pd-* namespace) · Wise tokens
     Cards en grid con stripe lateral coloreado, stats agregadas y CTA
     directos. Modal de edit usa el mismo overlay pattern que map-epic.
  ════════════════════════════════════════════════════════════════ */
  .pd-page { /* Hereda de .kp-page (página + flex column + gap-lg) */ }

  .pd-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--wd-padding-md);
  }

  .pd-card {
    background: var(--wd-bg-elevated);
    border-radius: var(--wd-radius-md);
    overflow: hidden;
    display: flex;
    box-shadow: 0 1px 2px rgba(14, 15, 12, 0.04), 0 4px 14px -4px rgba(14, 15, 12, 0.10);
    transition: transform .15s var(--wd-ease), box-shadow .15s var(--wd-ease);
  }
  .pd-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(14, 15, 12, 0.06), 0 12px 32px -8px rgba(14, 15, 12, 0.16);
  }
  .pd-card.is-archived { opacity: 0.6; }

  .pd-card-body {
    flex: 1;
    padding: var(--wd-padding-md);
    display: flex;
    flex-direction: column;
    gap: var(--wd-padding-sm);
    min-width: 0;
  }
  .pd-card-head { display: flex; flex-direction: column; gap: 4px; }
  .pd-card-titleblock { min-width: 0; }
  .pd-card-name { margin: 0; line-height: 1.25; word-break: break-word; }
  .pd-card-desc {
    margin: 0;
    line-height: 1.4;
    color: var(--wd-content-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .pd-card-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--wd-padding-sm);
    padding-block: var(--wd-padding-sm);
    border-top: 1px solid var(--wd-border-neutral);
    border-bottom: 1px solid var(--wd-border-neutral);
  }
  .pd-stat { text-align: center; }
  .pd-stat-num {
    font-size: 24px;
    font-weight: var(--wd-fw-bold);
    line-height: 1;
    color: var(--wd-content-primary);
  }
  .pd-stat-unit {
    font-size: 14px;
    font-weight: var(--wd-fw-medium);
    color: var(--wd-content-tertiary);
    margin-left: 2px;
  }
  .pd-stat-lbl {
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  /* Progress bar = % done de tasks. Fill en Bright Green Wise (sentiment
     positivo del avance), no en color del producto — el color del producto
     no es decoración aplicable a métricas. */
  .pd-card-progress {
    height: 4px;
    background: var(--wd-bg-neutral);
    border-radius: var(--wd-radius-full);
    overflow: hidden;
  }
  .pd-card-progress-fill {
    height: 100%;
    background: var(--wd-bright-green);
    transition: width .3s var(--wd-ease);
  }

  .pd-card-foot {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wd-padding-xs);
    margin-top: auto;
  }

  /* Modal de edit producto */
  .pd-edit-overlay {
    position: fixed; inset: 0;
    background: rgba(14, 15, 12, 0.40);
    display: flex; align-items: center; justify-content: center;
    z-index: 10000;
    padding: var(--wd-padding-md);
  }
  .pd-edit-modal {
    width: 480px; max-width: 100%;
    background: var(--wd-bg-elevated);
    border-radius: var(--wd-radius-md);
    box-shadow: 0 12px 32px -8px rgba(14, 15, 12, 0.30);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
  }
  .pd-edit-modal-head {
    padding: var(--wd-padding-md);
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid var(--wd-border-neutral);
  }
  .pd-edit-modal-head h2 { margin: 0; }
  .pd-edit-modal-close {
    background: transparent;
    border: none;
    border-radius: var(--wd-radius-full);
    padding: 4px;
    cursor: pointer;
    color: var(--wd-content-tertiary);
    display: flex; align-items: center; justify-content: center;
  }
  .pd-edit-modal-close:hover { color: var(--wd-content-primary); }
  .pd-edit-modal-body {
    padding: var(--wd-padding-md);
    display: flex;
    flex-direction: column;
    gap: var(--wd-padding-sm);
    overflow-y: auto;
  }
  .pd-edit-modal-foot {
    padding: var(--wd-padding-md);
    display: flex;
    justify-content: flex-end;
    gap: var(--wd-padding-xs);
    border-top: 1px solid var(--wd-border-neutral);
  }

  .pd-color-palette {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wd-padding-xs);
  }
  .pd-color-swatch {
    width: 32px;
    height: 32px;
    border-radius: var(--wd-radius-sm);
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform .12s var(--wd-ease), border-color .12s var(--wd-ease);
  }
  .pd-color-swatch:hover { transform: scale(1.1); }
  .pd-color-swatch.is-selected {
    border-color: var(--wd-content-primary);
    transform: scale(1.1);
  }

  /* ════════════════════════════════════════════════════════════════
     MAP · ReactFlow island (.map-* namespace) · Wise tokens
  ════════════════════════════════════════════════════════════════ */
  .map-page {
    gap: var(--wd-padding-sm);
    /* Mapa usa el token de page width (default: full). Mantiene altura
       completa del viewport para que ReactFlow rinda en todo el espacio. */
    max-width: var(--wd-page-max-width);
    min-height: 100vh;
  }

  /* Toolbar única del mapa: filtros izquierda, creación derecha. */
  .map-toolbar {
    display: flex; align-items: center;
    justify-content: space-between;
    gap: var(--wd-padding-md);
    padding: var(--wd-padding-xs) var(--wd-padding-sm);
    background: var(--wd-bg-elevated);
    border-radius: var(--wd-radius-sm);
    box-shadow: 0 1px 3px rgba(14, 15, 12, 0.06), 0 4px 14px -4px rgba(14, 15, 12, 0.10);
    flex-wrap: wrap;
  }
  .map-toolbar-group {
    display: flex; align-items: center;
    gap: var(--wd-padding-xs);
    flex-wrap: wrap;
  }
  .map-isolate-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  /* Multi-select de teams — dropdown con búsqueda + checkboxes. Pensado
     para escalar a N teams (10+) sin saturar la toolbar como hacían los
     chips. Usa <details>/<summary> nativo para abrir/cerrar; el panel se
     posiciona absoluto debajo del trigger. */
  .map-team-filter {
    position: relative;
  }
  .map-team-filter-summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
  }
  .map-team-filter-summary::-webkit-details-marker { display: none; }
  .map-team-filter[open] .map-team-filter-summary svg:last-of-type {
    transform: rotate(180deg);
    transition: transform .15s var(--wd-ease);
  }
  .map-team-filter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--wd-radius-full);
    background: var(--wd-bright-green);
    color: var(--wd-forest-green);
    font-size: var(--wd-fs-xs);
    font-weight: var(--wd-fw-bold);
    line-height: 1;
  }
  .map-team-filter-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 1000;
    min-width: 280px;
    max-width: 360px;
    background: var(--wd-bg-elevated);
    border: 1px solid var(--wd-border-neutral);
    border-radius: var(--wd-radius-sm);
    box-shadow: 0 4px 14px rgba(14, 15, 12, 0.10), 0 16px 48px -8px rgba(14, 15, 12, 0.20);
    padding: var(--wd-padding-sm);
    display: flex;
    flex-direction: column;
    gap: var(--wd-padding-xs);
    animation: mapTeamPopIn .14s var(--wd-ease);
  }
  @keyframes mapTeamPopIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .map-team-filter-search {
    flex: 0 0 auto;
  }
  .map-team-filter-search .wd-input {
    padding: 8px 12px 8px 40px;
    font-size: var(--wd-fs-md);
  }
  .map-team-filter-list {
    max-height: 280px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-right: 4px;       /* hueco para el scrollbar */
  }
  .map-team-row {
    display: flex;
    align-items: center;
    gap: var(--wd-padding-xs);
    padding: 8px 12px;
    border-radius: var(--wd-radius-sm);
    cursor: pointer;
    user-select: none;
    transition: background .12s var(--wd-ease);
  }
  .map-team-row:hover { background: var(--wd-bg-neutral); }
  .map-team-row:has(input:checked) {
    background: rgba(159, 232, 112, 0.18);
    font-weight: var(--wd-fw-semi);
  }
  .map-team-row input[type="checkbox"] {
    width: 16px; height: 16px;
    accent-color: var(--wd-forest-green);
    cursor: pointer;
    flex-shrink: 0;
  }
  .map-team-filter-footer {
    border-top: 1px solid var(--wd-border-neutral);
    padding-top: var(--wd-padding-xs);
    margin-top: 4px;
    display: flex;
    justify-content: flex-end;
  }

  /* Product filter — reutiliza la mayoría de los estilos del team filter
     vía la clase compartida `.map-team-filter` aplicada al <details>.
     Solo añadimos lo específico de producto: filas con swatch de color
     y el bloque de quick-create al pie del panel. */
  .map-product-row {
    display: flex;
    align-items: center;
    gap: var(--wd-padding-xs);
    padding: 8px 12px;
    border-radius: var(--wd-radius-sm);
    cursor: pointer;
    user-select: none;
    transition: background .12s var(--wd-ease);
  }
  .map-product-row:hover { background: var(--wd-bg-neutral); }
  .map-product-row:has(input:checked) {
    background: rgba(159, 232, 112, 0.18);
    font-weight: var(--wd-fw-semi);
  }
  .map-product-row input[type="checkbox"] {
    width: 16px; height: 16px;
    accent-color: var(--wd-forest-green);
    cursor: pointer;
    flex-shrink: 0;
  }
  .map-product-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
    border: 1px solid rgba(14, 15, 12, 0.10);
  }
  .map-product-create {
    display: flex;
    align-items: center;
    gap: var(--wd-padding-xs);
    padding-top: var(--wd-padding-xs);
    margin-top: 4px;
    border-top: 1px dashed var(--wd-border-neutral);
  }
  .map-product-create .wd-input {
    flex: 1;
    padding: 8px 12px;
    font-size: var(--wd-fs-md);
  }
  .map-team-filter-empty {
    padding: var(--wd-padding-sm);
    text-align: center;
    color: var(--wd-content-tertiary);
  }

  /* Select de filtro de semana — variante compacta del input para que
     encaje con los .wd-btn--sm de la toolbar (height ~36px). */
  .map-week-select {
    width: auto;
    min-width: 200px;
    padding: 6px var(--wd-padding-sm);
    padding-right: 32px;       /* hueco para la flecha del select */
    font-size: var(--wd-fs-md);
    font-weight: var(--wd-fw-medium);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%230E0F0C' stroke-width='2'><path stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px 14px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
  }
  .map-week-select:hover { border-color: var(--wd-content-tertiary); }

  /* Highlight del nodo seleccionado en el mapa */
  /* Estado seleccionado: outline sutil Forest Green Wise (oscuro, no
     bright). El bright-green se reserva para los chips de producto y para
     el sentiment-pos — usar verde brillante también para la selección
     creaba ruido visual cuando había chips de productos verdes. */
  .map-node.is-selected {
    box-shadow:
      0 0 0 2px var(--wd-forest-green),
      0 4px 14px -4px rgba(14, 15, 12, 0.18);
  }

  /* Popover de creación drag-to-create. Aparece donde el usuario suelta
     un edge desde un handle. Lista los 4 tipos con sugerido destacado.
     z-index máximo + !important para vencer cualquier stacking context
     que ReactFlow o sus padres pudieran imponer. */
  .map-create-pop {
    position: fixed !important;
    z-index: 2147483647 !important;
    background: var(--wd-bg-elevated);
    border-radius: var(--wd-radius-sm);
    box-shadow: 0 4px 14px rgba(14, 15, 12, 0.10), 0 16px 48px -8px rgba(14, 15, 12, 0.20);
    padding: var(--wd-padding-sm);
    min-width: 220px;
    transform: translate(-50%, 8px);
    opacity: 1;
    pointer-events: auto;
  }
  .map-create-pop-arrow {
    position: absolute; top: -6px; left: 50%;
    width: 12px; height: 12px;
    background: var(--wd-bg-elevated);
    transform: translateX(-50%) rotate(45deg);
    box-shadow: -2px -2px 4px -1px rgba(14, 15, 12, 0.06);
  }
  .map-create-pop-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 6px;
  }
  .map-create-pop-close {
    background: transparent;
    border: none;
    border-radius: var(--wd-radius-full);
    padding: 4px;
    cursor: pointer;
    color: var(--wd-content-tertiary);
    display: flex; align-items: center; justify-content: center;
    transition: background .12s var(--wd-ease), color .12s var(--wd-ease);
  }
  .map-create-pop-close:hover {
    background: var(--wd-bg-neutral);
    color: var(--wd-content-primary);
  }
  .map-create-pop-btn {
    display: flex; align-items: center;
    gap: var(--wd-padding-xs);
    width: 100%;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: var(--wd-radius-sm);
    font-family: var(--wd-font-family);
    font-size: var(--wd-fs-md);
    font-weight: var(--wd-fw-medium);
    color: var(--wd-content-primary);
    cursor: pointer;
    text-align: left;
    transition: background .12s var(--wd-ease);
  }
  .map-create-pop-btn:hover { background: var(--wd-bg-neutral); }
  .map-create-pop-btn.is-suggested {
    background: rgba(159, 232, 112, 0.18);
    font-weight: var(--wd-fw-semi);
  }
  .map-create-pop-btn.is-suggested:hover { background: rgba(159, 232, 112, 0.30); }
  .map-create-pop-hint {
    margin-left: auto;
    font-size: 10px;
    font-weight: var(--wd-fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--wd-forest-green);
    background: var(--wd-bright-green);
    padding: 2px 7px;
    border-radius: var(--wd-radius-full);
  }

  /* Modal "Nueva épica" disparado desde el mapa */
  .map-epic-overlay {
    position: fixed; inset: 0;
    background: rgba(14, 15, 12, 0.40);
    display: flex; align-items: center; justify-content: center;
    z-index: 10000;
    padding: var(--wd-padding-md);
  }
  .map-epic-modal {
    width: 480px; max-width: 100%;
    display: flex; flex-direction: column;
    gap: var(--wd-padding-sm);
    background: var(--wd-bg-elevated);
    box-shadow: 0 20px 60px rgba(14, 15, 12, 0.30);
  }
  .map-epic-modal h3 { margin: 0; }
  .map-react-root {
    /* Altura explícita: sidebar + header KPI + paddings ≈ 220px. ReactFlow
       requiere altura definida para que su renderer interno no colapse. */
    height: calc(100vh - 220px);
    min-height: 560px;
    width: 100%;
    background: var(--wd-bg-neutral);
    border: none;
    border-radius: var(--wd-radius-md);
    overflow: hidden;
    position: relative;
  }
  .map-loading {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
  }
  .map-node {
    background: var(--wd-bg-elevated);
    border: none;
    border-radius: var(--wd-radius-sm);
    padding: var(--wd-padding-sm);
    min-width: 200px;
    max-width: 280px;
    cursor: pointer;
    transition: transform .15s var(--wd-ease), box-shadow .25s var(--wd-ease);
    box-shadow: 0 1px 3px rgba(14, 15, 12, 0.06), 0 4px 14px -4px rgba(14, 15, 12, 0.10);
    font-family: var(--wd-font-family);
    font-size: var(--wd-fs-md);
    color: var(--wd-content-primary);
  }
  .map-node:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 6px rgba(14, 15, 12, 0.10), 0 8px 20px -4px rgba(14, 15, 12, 0.14);
  }
  /* Header row: tag de tipo (EPIC/TASK/etc.) a la izquierda, chip de
     producto opcional a la derecha. Misma altura visual, alineado por
     baseline para que ambos chips compartan eje. */
  .map-node-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wd-padding-xs);
    margin-bottom: var(--wd-padding-xs);
  }
  /* Tag = chip pequeño con bg paleta secundaria Wise + texto Forest. */
  .map-node-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: var(--wd-fw-bold);
    letter-spacing: 0.08em;
    color: var(--wd-forest-green);
    padding: 3px 8px;
    border-radius: var(--wd-radius-full);
    /* margin-bottom retirado — ahora el spacing lo da .map-node-header */
  }
  /* Chip de producto: gemelo visual del tag de tipo (mismo tamaño,
     mismo radius, mismo peso tipográfico). Color de bg = color del
     producto, texto siempre Forest Green Wise para máximo contraste
     sobre cualquier color de la paleta secundaria. */
  .map-node-product-chip {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: var(--wd-fw-bold);
    letter-spacing: 0.04em;
    color: var(--wd-forest-green);
    padding: 3px 8px;
    border-radius: var(--wd-radius-full);
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .map-node-title {
    display: flex; align-items: center;
    gap: var(--wd-padding-xs);
    font-weight: var(--wd-fw-semi);
    color: var(--wd-content-primary);
    line-height: 1.3;
  }
  .map-node-title .wd-icon { color: var(--wd-content-secondary); }

  /* Override xyflow defaults para alinear con Wise */
  .react-flow__handle {
    width: 10px !important; height: 10px !important;
  }
  .react-flow__edge-text {
    font-size: 10px;
    font-weight: var(--wd-fw-bold);
    fill: var(--wd-content-primary);
    font-family: var(--wd-font-family);
  }
  .react-flow__edge-textbg {
    fill: var(--wd-bg-elevated);
  }
  .react-flow__attribution { display: none; }
  .react-flow__minimap {
    border-radius: var(--wd-radius-sm);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(14, 15, 12, 0.06), 0 4px 14px -4px rgba(14, 15, 12, 0.10);
  }
  .react-flow__controls {
    border-radius: var(--wd-radius-sm);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(14, 15, 12, 0.06), 0 4px 14px -4px rgba(14, 15, 12, 0.10);
  }
  .react-flow__controls button {
    background: var(--wd-bg-elevated) !important;
    border: none !important;
    border-bottom: 1px solid var(--wd-border-neutral) !important;
    color: var(--wd-content-primary) !important;
  }
  .react-flow__controls button:last-child { border-bottom: none !important; }
  .react-flow__controls button:hover {
    background: var(--wd-bg-neutral) !important;
  }