/* ══════════════════════════════════════════════════════════════════
   EXANTE DESIGN SYSTEM v0.5.2 (auditado S29)
   Fuentes self-hosted · sin dependencia Google Fonts (regla DS).
   Tokens completos, font-weight max 600, sin border-left,
   focus-ring accent-green/18, radius card 16.
   ══════════════════════════════════════════════════════════════════ */
@font-face { font-family: "Inter"; src: url("../fonts/Inter_18pt-Regular.ttf")        format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter_18pt-Italic.ttf")         format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter_18pt-Medium.ttf")         format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter_18pt-MediumItalic.ttf")   format("truetype"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter_18pt-SemiBold.ttf")       format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter_18pt-SemiBoldItalic.ttf") format("truetype"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("../fonts/PlayfairDisplay-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("../fonts/PlayfairDisplay-Italic.ttf")  format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  /* SURFACES */
  --color-bg:              #FAFBFC;
  --color-bg-subtle:       #F2F4F6;
  --color-surface:         #FFFFFF;
  --color-bg-inverse:      #0F1419;
  --color-border-subtle:   #E5E7EB;
  --color-border-default:  #D1D5DB;
  --color-hairline:        var(--color-border-subtle);
  /* INK */
  --fg1: #0F1419;
  --fg2: #4B5563;
  --fg3: #8B92A1;
  --fg4: #B8BDC7;
  /* S235/S237 · Ancho de contenido por vista (3 tiers). DEBE vivir en :root global
     (no en .op-scope, que es sandbox); si no, var() sale vacío y max-width = none. */
  --content-full:            100%;
  --content-wide:            1280px;   /* S239 · ancho homologado único de todo el backoffice (punto dulce) */
  --content-readable:        760px;    /* (en desuso: backoffice 100% homologado a wide, incl. Ventas) */
  --bo-content-pad-x:        40px;
  --bo-content-pad-y-top:    26px;
  --bo-content-pad-y-bottom: 72px;
  /* ACTION */
  --color-action-ink:         #0F1419;
  --color-action-ink-hover:   #1F262E;
  /* ACCENT */
  --color-accent-green:       #1FAE5F;
  --gradient-ai-strong-bold:  linear-gradient(135deg, #1FAE5F 0%, #1A8B82 55%, #0F6860 100%); /* S278 · superficie de IA (asistente). Aquí vive el :root activo del backoffice. No es CTA. */
  --color-accent-green-deep:  #16904E;
  --color-accent-green-tint:  #D8EEDF;
  --color-accent-green-bg:    #E6F7EE;
  --color-accent-green-tint-14: rgba(31,174,95,0.14);
  --color-accent-green-stroke:  rgba(31,174,95,0.18);
  /* SEMANTIC */
  --color-success:       #1FAE5F;  --color-success-tint:  #D8EEDF;  --color-success-deep: #16904E;
  --color-info:          #3A6FB5;  --color-info-tint:     #DCE6F1;  --color-info-deep:    #265489;
  --color-notice:        #6E7378;  --color-notice-tint:   #E8E9EA;  --color-notice-deep:  #0F1419;
  --color-warning:       #E89B2A;  --color-warning-tint:  #FAE5CC;  --color-warning-deep: #B07614;
  --color-error:         #B83227;  --color-error-tint:    #F4DCD7;  --color-error-deep:   #8C2018;
  /* aliases internos */
  --bg:            var(--color-bg);
  --surface:       var(--color-surface);
  --surface-2:     var(--color-bg-subtle);
  --border:        var(--color-border-subtle);
  --border-strong: var(--color-border-default);
  --ink:           var(--color-action-ink);
  --accent-go:     var(--color-accent-green);
  /* TYPE · fuentes */
  --font-sans:    "Inter", -apple-system, "system-ui", sans-serif;
  --font-display: "Playfair Display", Georgia, serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;
  /* TYPE · UI scale (Inter) */
  --fs-h1:       24px;
  --fs-h2:       18px;
  --fs-h3:       16px;
  --fs-body-lg:  16px;
  --fs-body:     14px;
  --fs-body-sm:  13px;
  --fs-caption:  12px;
  --fs-eyebrow:  11px;
  /* TYPE · buttons */
  --fs-button-lg: 15px;
  --fs-button:    14px;
  --fs-button-sm: 13px;
  /* TYPE · numbers (Inter tabular-nums) */
  --fs-num-xl:   56px;
  --fs-num-lg:   40px;
  --fs-num-md:   24px;
  --fs-num-data: 14px;
  /* TYPE · weights · max 600 (regla DS) */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  /* TYPE · tracking */
  --tracking-eyebrow: 0.12em;
  --tracking-tight:   -0.005em;
  --tracking-display: -0.02em;
  /* SPACING · 4px base */
  --space-1:  4px;   --space-2:  8px;   --space-3:  12px;  --space-4:  16px;
  --space-5:  20px;  --space-6:  24px;  --space-8:  32px;  --space-10: 40px;
  --space-12: 48px;
  /* RADII */
  --radius-sm:    6px;
  --radius-md:    10px;
  --radius-lg:    16px;   /* card · subido de 14 a 16 (S29) */
  --radius-xl:    20px;
  --radius-pill:  999px;
  --radius-button: 10px;
  /* aliases viejos para compat */
  --r-sm: var(--radius-sm);  --r-md: var(--radius-md);  --r-lg: var(--radius-lg);  --r-xl: var(--radius-xl);  --r-pill: var(--radius-pill);
  /* ELEVATION */
  --shadow-none: none;
  --shadow-sm:   0 1px 2px rgba(15,20,25,0.04);
  --shadow-md:   0 4px 12px -2px rgba(15,20,25,0.06);
  --shadow-card: var(--shadow-sm);
  --shadow-pop:  0 8px 24px rgba(15,20,25,0.08), 0 2px 6px rgba(15,20,25,0.04);
  --shadow-modal: 0 24px 64px -12px rgba(15,20,25,0.18);
  --shadow-drawer:-24px 0 64px -12px rgba(15,20,25,0.12);
  --backdrop:    rgba(15,20,25,0.32);
  /* MOTION (handoff v0.6 · fuente de verdad) */
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-slow: 320ms;
  --motion-extra: 480ms;
  --ease-default: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-emphasis: cubic-bezier(0.34, 1.26, 0.58, 1);
  --ease-spring: linear(0, 0.006, 0.026 2.7%, 0.112 5.5%, 0.477 13.5%, 0.654, 0.793, 0.897 26.4%, 0.961, 0.997, 1.014, 1.02 38.6%, 1.018, 1.01, 1.002, 0.997, 0.997 56%, 1.0 70%, 1.0);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: var(--ease-default);
  /* GRADIENTS · verde family (DS) */
  --gradient-brand:        linear-gradient(to right, #1A7A72, #1FAE5F);
  --gradient-green-mint:   linear-gradient(to right, #1FAE5F, #5EE39E);
  --gradient-brand-diag:   linear-gradient(135deg, #1A7A72, #1FAE5F);
  /* FOCUS RING · S53 · neutro ink (decisión Ricardo: sin glow verde global)
     Override del DS para esta superficie. Se mantiene verde solo para los
     elementos semánticos success y links del chatbot.                  */
  --focus-ring: 0 0 0 3px rgba(15,20,25,0.12);
  /* LAYOUT */
  --h-navbar:    56px;
  --w-sidebar:   248px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
/* CRÍTICO · el atributo HTML `hidden` debe ganar sobre cualquier
   `display: flex/grid` que apliquemos vía CSS más adelante.
   Sin este !important, .login-screen { display: flex } override
   hidden y la pantalla de login NUNCA desaparece tras el login. */
[hidden] { display: none !important; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--fg1);
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex; flex-direction: column;
  overflow: hidden;
}
:focus-visible { outline: none; box-shadow: none; }

/* ════════════════════════════════════════════════════════════════════
   LOGIN SCREEN · pantalla cuando no hay sesión o no es admin
   ════════════════════════════════════════════════════════════════════ */
.login-screen {
  position: fixed; inset: 0;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  z-index: 10000;
}
.login-card {
  width: 100%; max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 36px 32px;
  box-shadow: var(--shadow-card);
}
.login-brand {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  margin-bottom: 24px;
}
.login-brand img { height: 28px; width: auto; }
.login-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
  color: var(--fg3); text-transform: uppercase;
}
.login-card h1 {
  margin: 0 0 6px;
  font: 600 24px/1.2 'Inter', sans-serif;
  color: var(--fg1); letter-spacing: -0.015em;
}
.login-card .login-sub {
  margin: 0 0 24px;
  font-size: 14px; color: var(--fg2); line-height: 1.5;
}
.login-form { display: flex; flex-direction: column; gap: 12px; }
.login-form label {
  display: block; font: 500 12px 'Inter', sans-serif; color: var(--fg2); margin-bottom: 6px;
}
.login-form input {
  width: 100%; padding: 11px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  font: 400 14px 'Inter', sans-serif;
  background: var(--surface); color: var(--fg1);
  box-sizing: border-box;
}
.login-form input:focus { outline: none; box-shadow: none; } /* S82b · border neutro */
.login-btn {
  margin-top: 8px;
  background: var(--ink); color: #fff;
  border: 0; cursor: pointer;
  padding: 12px 22px;
  border-radius: var(--radius-button);
  font: 500 14px/1 'Inter', sans-serif;
  font-family: inherit;
  transition: background var(--motion-fast) ease;
}
.login-btn:hover { background: var(--color-action-ink-hover); }
.login-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.login-error {
  margin: 12px 0 0;
  padding: 10px 12px;
  background: var(--color-error-tint);
  border: 1px solid var(--color-error);
  border-radius: var(--r-md);
  font: 400 13px/1.4 'Inter', sans-serif;
  color: var(--color-error-deep);
}

/* ════════════════════════════════════════════════════════════════════
   APP LAYOUT · IDÉNTICO a mi-exante.html (sidebar + topbar + main)
   ════════════════════════════════════════════════════════════════════ */
.app {
  flex: 1;
  display: grid;
  grid-template-columns: var(--w-sidebar) 1fr;
  grid-template-rows: var(--h-topbar-backoffice, 64px) 1fr;
  grid-template-areas: "topbar topbar" "sidebar main";
  overflow: hidden;
  min-height: 0;
  height: 100vh;
}
/* H2 · navbar de ancho completo: topbar arriba ocupando ambas columnas */
.app > .app-topbar { grid-area: topbar; }
.app > .sidebar    { grid-area: sidebar; }
.app > .main       { grid-area: main; }
.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 14px 14px 24px;
  height: 100%;
  overflow-y: auto;
  display: flex; flex-direction: column;
  min-height: 0;
}
/* S29-homolog · sidebar-brand 1:1 con mi-exante.html */
.sidebar-brand {
  padding: 4px 12px 18px;
  display: flex; align-items: center;
}
.sidebar-brand img { height: 24px; width: auto; display: block; }
.sidebar-brand a { display: inline-flex; align-items: center; text-decoration: none; }
.sidebar-section { margin-bottom: 6px; }
.sidebar-section-label {
  padding: 10px 12px 6px;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.1em; color: var(--fg4);
  text-transform: uppercase;
}
.sidebar-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 26px;
  margin: 0 -14px;
  border-radius: 0;
  color: var(--fg2);
  font-weight: 500; font-size: 14px;
  cursor: pointer;
  position: relative;
  background: transparent;
  text-align: left;
  border: 0;
  font-family: inherit;
  width: calc(100% + 28px);
  text-decoration: none;
  transition: background var(--motion-fast), color var(--motion-fast);
}
.sidebar-item .icon {
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  color: var(--fg3); flex-shrink: 0;
  transition: color var(--motion-fast);
}
.sidebar-item .icon svg { width: 100%; height: 100%; stroke-width: 1.7; }
.sidebar-item:hover { background: #F1F5F9; color: var(--fg1); }
.sidebar-item:hover .icon { color: var(--fg2); }
/* S29-revert · homologado 1:1 a mi-exante.html (regla S4 backoffice UI homologado
   override regla DS #8 sobre border-left para este componente específico):
   background #F1F5F9 + stripe vertical ink 3px + icon en fg1 negro. */
.sidebar-item.active { background: #F1F5F9; color: var(--fg1); font-weight: 600; }
.sidebar-item.active .icon { color: var(--fg1); }
.sidebar-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--ink);
  border-radius: 0;
}
/* S77.2 · Badge sidebar = círculo perfecto (18×18) que se expande si
   pasa de 1 dígito. Oculto cuando el item está activo (la sección abierta). */
.sidebar-item .badge {
  margin-left: auto;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink); color: #fff;
  font: 600 10px/1 'Inter', sans-serif;
  border-radius: 999px;
  letter-spacing: 0.02em;
  box-sizing: border-box;
}
.sidebar-item .badge.warn { background: var(--color-warning); }
.sidebar-item .badge.error { background: var(--color-error); }
.sidebar-item.active .badge { display: none; }
.sidebar-footer { margin-top: auto; padding-top: 16px; }

/* ============================================================
   SIDEBAR EXPANDIBLE · clase base .sbx (handoff /sidebar Fase 1)
   El grid (.app) controla el ancho via --w-sidebar; aquí width:100%.
   ============================================================ */
.sbx{width:100%;background:var(--color-surface);border-right:1px solid var(--color-border-subtle);
     display:flex;flex-direction:column;transition:width var(--motion-slow) var(--ease-default);overflow:hidden;
     padding:0;}
.sbx.is-collapsed{width:72px;}
/* S245 · ícono del toggle según estado: panel-left-close (<) expandido = colapsar · panel-left-open (>) colapsado = expandir */
#tbMenu .pl-open{display:none;}
#appShell.sb-collapsed #tbMenu .pl-close{display:none;}
#appShell.sb-collapsed #tbMenu .pl-open{display:inline;}

/* marca fuera del shell (handoff) — spacer superior de 8px */
.sbx-spacer-top{height:8px;flex-shrink:0;}

.sbx-scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding-bottom:8px;}

/* encabezado de sección */
.sbx-sec{padding:14px 20px 6px;font-size:11px;font-weight:500;letter-spacing:.1em;
         text-transform:uppercase;color:var(--fg3);transition:opacity var(--motion-base) var(--ease-default);}
.sbx.is-collapsed .sbx-sec{opacity:0;height:12px;padding:8px 0 4px;}

/* ── ítem de módulo ── */
.sbx-mod{display:flex;align-items:center;gap:12px;width:100%;border:none;background:transparent;
         text-align:left;cursor:pointer;padding:10px 14px 10px 20px;color:var(--fg2);position:relative;z-index:0;
         font-family:var(--font-sans);
         transition:color var(--motion-fast),
                    padding var(--motion-slow) var(--ease-default),gap var(--motion-slow) var(--ease-default);}
/* píldora = capa de fondo (handoff) · el ítem no cambia de tamaño → sin parpadeo */
.sbx-mod::before{content:"";position:absolute;inset:2px 8px;border-radius:10px;background:transparent;z-index:-1;
                 transition:background var(--motion-fast) var(--ease-default);}
.sbx-mod:hover::before{background:var(--color-bg-subtle);}
.sbx-mod:hover{color:var(--fg1);}
.sbx-mod .ico{width:19px;height:19px;flex-shrink:0;color:var(--fg3);}
.sbx-mod .ico svg{width:100%;height:100%;display:block;}
.sbx-mod:hover .ico{color:var(--fg2);}
.sbx-mod .lab{flex:1;font-size:13.5px;font-weight:500;white-space:nowrap;letter-spacing:-.005em;
              overflow:hidden;transition:opacity var(--motion-base),max-width var(--motion-slow) var(--ease-default),transform var(--motion-base) var(--ease-default);max-width:170px;}
.sbx-mod .chev{width:16px;height:16px;color:var(--fg3);flex-shrink:0;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;
               transition:opacity var(--motion-base),max-width var(--motion-slow) var(--ease-default),transform var(--motion-base) var(--ease-default);}
.sbx-mod .chev svg{width:16px;height:16px;display:block;}
/* conteo de notificaciones (badge numérico neutro del DS) · disponible, no renderizado en Fase 1 */
.sbx-count{flex-shrink:0;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;
           min-width:18px;height:18px;padding:0 6px;border-radius:var(--radius-pill);
           background:rgba(28,26,24,.06);box-shadow:inset 0 0 0 .5px rgba(28,26,24,.08);
           color:var(--fg2);font:600 11px/1 var(--font-sans);font-variant-numeric:tabular-nums;
           transition:opacity var(--motion-base) var(--ease-default),max-width var(--motion-base) var(--ease-default);}
.sbx-mod:not([data-haskids]) .sbx-count{margin-right:28px;}
/* dot "tiene sub-secciones" (solo colapsado) · debajo del ícono (handoff) */
.sbx-dot{position:absolute;left:50%;bottom:7px;top:auto;width:4px;height:4px;border-radius:999px;background:var(--fg3);
         opacity:0;transform:translateX(-50%) scale(.6);transition:opacity var(--motion-base) var(--ease-default),transform var(--motion-base) var(--ease-default);pointer-events:none;}
/* dot oculto cuando el módulo está en foco/activo */
.sbx-mod:hover .sbx-dot,.sbx-mod.is-active .sbx-dot{opacity:0;}

/* módulo ACTIVO plano (página actual sin hijos) — píldora (handoff), sin barra ink */
.sbx-mod.is-active::before{background:var(--color-bg-subtle);}
.sbx-mod.is-active{color:var(--fg1);}
.sbx-mod.is-active .ico{color:var(--fg1);}
.sbx-mod.is-active .lab{font-weight:600;}
/* módulo EN RUTA (padre de la sub activa) — bold + ícono tinta, sin barra ni relleno (expandido) */
.sbx-mod.in-path{color:var(--fg1);}
.sbx-mod.in-path .ico{color:var(--fg1);}
.sbx-mod.in-path .lab{font-weight:600;}
.sbx-mod .chev.open{transform:rotate(90deg);}

/* colapsado: centra el ícono por padding, oculta label/chevron/conteo, muestra dot */
.sbx.is-collapsed .sbx-mod{padding:11px 0 11px 26px;gap:0;}
.sbx.is-collapsed .sbx-mod .lab{max-width:0;opacity:0;transform:translateX(-8px);}
.sbx.is-collapsed .sbx-mod .chev{max-width:0;opacity:0;}
.sbx.is-collapsed .sbx-count{max-width:0;opacity:0;margin-right:0;}
.sbx.is-collapsed .sbx-mod[data-haskids] .sbx-dot{opacity:1;transform:translateX(-50%) scale(1);}
/* dot oculto cuando el módulo está activo/hover (también colapsado) */
.sbx.is-collapsed .sbx-mod[data-haskids]:hover .sbx-dot,
.sbx.is-collapsed .sbx-mod[data-haskids].is-active .sbx-dot{opacity:0;}
/* colapsado: píldora del activo centrada/simétrica en el riel (handoff), sin barra ink */
.sbx.is-collapsed .sbx-mod::before{inset:2px 14px;}
.sbx.is-collapsed .sbx-mod.is-active::before{background:var(--color-bg-subtle);}

/* ── grupo de sub-secciones (acordeón) ── */
.sbx-group{overflow:hidden;max-height:0;opacity:1;position:relative;
           transition:max-height var(--motion-slow) var(--ease-default);}
.sbx-group.open{max-height:240px;}
.sbx.is-collapsed .sbx-group{max-height:0 !important;}
.sbx-rail{position:absolute;left:28px;top:2px;bottom:6px;width:1.5px;background:var(--color-border-subtle);border-radius:2px;}

.sbx-sub{display:flex;align-items:center;width:100%;border:none;background:transparent;text-align:left;
         cursor:pointer;padding:9px 14px 9px 50px;color:var(--fg2);position:relative;z-index:0;font-family:var(--font-sans);
         transition:color var(--motion-fast),transform var(--motion-base) var(--ease-default),opacity var(--motion-base);}
.sbx-sub .sublab{font-size:13px;font-weight:500;white-space:nowrap;}
/* píldora indentada = capa de fondo (handoff) · inset left:40 right:8, radius 10 */
.sbx-sub::before{content:"";position:absolute;inset:2px 8px 2px 40px;border-radius:10px;background:transparent;z-index:-1;
                 transition:background var(--motion-fast) var(--ease-default);}
.sbx-sub:hover::before,.sbx-sub.is-active::before{background:var(--color-bg-subtle);}
.sbx-sub:hover{color:var(--fg1);}
.sbx-sub.is-active{color:var(--fg1);}
.sbx-sub.is-active .sublab{font-weight:600;}
/* el marcador es ahora la píldora; la barra .sbx-mark queda oculta (se conserva en el DOM) */
.sbx-mark{display:none;}

/* footer · S293 cluster icon-only (avatar · colapsar · cerrar sesión) · morph fila↔columna.
   Posiciones left/top = JS inline (sincroniza con el colapso y gana la cascada). Aquí solo defaults expandidos. */
.sbx-foot.sbx-foot-cluster{position:relative;height:60px;padding:0;border-top:1px solid var(--color-border-subtle);flex-shrink:0;transition:height var(--motion-slow) var(--ease-default);}
.sbx-foot-avatar{position:absolute;left:14px;top:14px;width:32px;height:32px;padding:0;border:none;background:transparent;cursor:pointer;border-radius:999px;display:flex;align-items:center;justify-content:center;transition:left var(--motion-slow) var(--ease-default),top var(--motion-slow) var(--ease-default),transform var(--motion-fast) var(--ease-default);}
.sbx-foot-avimg{width:32px;height:32px;border-radius:999px;background:linear-gradient(135deg,#7A5BC2,#C42784);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:500;font-family:var(--font-sans);}
.sbx-foot-icon{position:absolute;width:40px;height:40px;padding:0;border:none;background:transparent;cursor:pointer;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;color:var(--fg2);transition:left var(--motion-slow) var(--ease-default),top var(--motion-slow) var(--ease-default),color var(--motion-fast);}
.sbx-foot-icon .ico{position:relative;z-index:1;width:19px;height:19px;display:block;}
.sbx-foot-icon .ico svg{width:100%;height:100%;display:block;}
.sbx-foot-toggle{left:152px;top:10px;}
.sbx-foot-logout{left:194px;top:10px;}
/* S293 · el chip de usuario se movió al footer del sidebar → se oculta en el topbar.
   Se CONSERVA en el DOM (no se borra) para no romper la identidad JS que lo puebla. */
#btnAvatar, #ddAvatar{display:none !important;}
.app-topbar-actions > .tb-divider{display:none !important;}
/* swap panel-left según colapso */
.sbx-foot-toggle .pl-open{display:none;}
#appShell.sb-collapsed .sbx-foot-toggle .pl-close{display:none;}
#appShell.sb-collapsed .sbx-foot-toggle .pl-open{display:inline;}

/* ── S230 · colapso funcional (grid) + botón + flyout ── */
.app.sb-collapsed{grid-template-columns:72px 1fr;}
.sbx-collapse{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;flex-shrink:0;border:none;background:transparent;border-radius:8px;color:var(--fg3);cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast);}
.sbx-collapse:hover{background:var(--color-bg-subtle);color:var(--fg1);}
.sbx-collapse svg{width:18px;height:18px;transition:transform var(--motion-base) var(--ease-default);}
.sbx.is-collapsed .sbx-collapse{margin-left:0;}
.sbx.is-collapsed .sbx-collapse svg{transform:rotate(180deg);}
/* flyout (solo colapsado) · popover a la derecha del ícono */
.sbx-flyout{position:fixed;z-index:300;min-width:200px;background:var(--color-surface);border:1px solid var(--color-border-subtle);
            border-radius:12px;box-shadow:0 8px 28px -8px rgba(15,20,25,.18);padding:0 0 6px;overflow:hidden;opacity:0;transform:translateX(-4px);
            pointer-events:none;transition:opacity var(--motion-fast) var(--ease-default),transform var(--motion-fast) var(--ease-default);font-family:var(--font-sans);}
.sbx-flyout.show{opacity:1;transform:translateX(0);pointer-events:auto;}
.sbx-flyout-head{font:600 14px var(--font-sans);color:var(--fg1);text-transform:none;letter-spacing:normal;padding:12px 16px 10px;border-bottom:1px solid var(--color-border-subtle);margin-bottom:4px;}
.sbx-flyout-item{display:block;width:100%;text-align:left;border:none;background:transparent;cursor:pointer;font:500 13.5px var(--font-sans);
                 color:var(--fg2);padding:10px 16px;border-radius:0;white-space:nowrap;position:relative;}
.sbx-flyout-item:hover{background:var(--color-bg-subtle);color:var(--fg1);}
.sbx-flyout-item.is-active{color:var(--fg1);font-weight:600;box-shadow:inset 3px 0 0 var(--color-action-ink);}

/* ============================================================
   S276 · handoff_sidebar_navbar — mejoras de sesión
   ============================================================ */
/* S293 · el footer-toggle es ahora parte del cluster icon-only (ver "footer · S293" arriba).
   Hover (píldora-hijo + color) lo maneja el JS, homologado con logout. */

/* Topbar isotipo (#tbMenu ahora es marca estática) — sin hover, sin icon-swap legacy */
#tbMenu.tb-iso:hover{ background:transparent; }

/* Tooltip claro (módulos planos colapsados) — homologado con Mi Exante */
.sbx-tip{ position:fixed; z-index:30; background:var(--color-surface); color:var(--fg1);
  border:1px solid var(--color-border-subtle); font:500 12.5px/1 var(--font-sans);
  padding:8px 12px; border-radius:var(--radius-md); box-shadow:var(--shadow-md, 0 6px 18px -8px rgba(15,20,25,.18));
  white-space:nowrap; opacity:0; transform:translateX(-6px); pointer-events:none;
  transition:opacity var(--motion-fast) var(--ease-default), transform var(--motion-fast) var(--ease-default); }
.sbx-tip.show{ opacity:1; transform:translateX(0); }

/* Flyout claro homologado: 212px, encabezado 12px, sub-ítems con PÍLDORA (sin barra lateral) */
.sbx-flyout{ width:212px; min-width:0; border-radius:var(--radius-md); box-shadow:var(--shadow-modal, 0 16px 40px -16px rgba(15,20,25,.28)); padding:0;
  transform:translateX(-6px);
  transition:opacity var(--motion-base) var(--ease-default), transform var(--motion-base) var(--ease-default); }
.sbx-flyout-head{ font:600 12px var(--font-sans); padding:11px 16px 8px; margin-bottom:0; }
.sbx-flyout-list{ padding:6px; }
/* S277 · el item es <button>: width:auto encoge al texto → width:100% para que la
   píldora de hover/activo abarque TODA la fila (con el padding lateral de la lista). */
.sbx-flyout-item{ display:block; width:100%; box-sizing:border-box; margin:1px 0; padding:8px 12px; border-radius:var(--radius-md);
  font:500 13px var(--font-sans); color:var(--fg2);
  transition:background var(--motion-fast), color var(--motion-fast); }
.sbx-flyout-item:hover{ background:var(--color-bg-subtle); color:var(--fg1); }
.sbx-flyout-item.is-active{ background:var(--color-bg-subtle); color:var(--fg1); font-weight:600; box-shadow:none; }

/* Dot "tiene sub-secciones" (colapsado): anillo sobre la superficie + MÁS separación del glifo
   (handoff: más aire entre ícono y dot). bottom menor = el dot baja, alejándose del ícono centrado. */
.sbx-dot{ box-shadow:0 0 0 1.5px var(--color-surface); bottom:3px; }
.sbx.is-collapsed .sbx-mod[data-haskids]:hover .sbx-dot,
.sbx.is-collapsed .sbx-mod[data-haskids].is-active .sbx-dot{ background:var(--color-action-ink); }

@media (prefers-reduced-motion: reduce){
  .sbx,.sbx *{transition:none !important;}
}

.main {
  display: flex; flex-direction: column;
  overflow: hidden; min-height: 0;
}
.app-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 32px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  min-height: 64px;
  box-sizing: border-box;
  flex-shrink: 0;
}
.app-topbar-title {
  margin: 0;
  font: 600 18px 'Inter', sans-serif;
  color: var(--fg1); letter-spacing: -0.01em; line-height: 1.2;
}
.app-topbar-actions {
  display: flex; align-items: center; gap: 4px;
  position: relative;
}
.topbar-avatar-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 4px;
  border-radius: var(--r-pill);
  border: 0; background: transparent;
  cursor: pointer;
  color: var(--fg1);
  font-family: inherit; font-size: 13px; font-weight: 500;
  transition: background var(--motion-fast);
  margin-left: 6px;
}
.topbar-avatar-btn:hover { background: var(--surface-2); }
.topbar-avatar-btn .avatar-circle {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--ink); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 12px 'Inter', sans-serif;
  overflow: hidden;
}
.topbar-dropdown {
  position: absolute;
  top: calc(100% + 6px); right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  /* S184 · sombra homologada con mi-exante (menús del topbar flotan idéntico) */
  box-shadow: 0 12px 32px rgba(15,20,25,0.18), 0 2px 6px rgba(15,20,25,0.08);
  /* S292 · por encima de las barras acopladas (dock 4000 / notif 5001) para no quedar detrás */
  z-index: 6000;
  overflow: hidden;
  min-width: 280px;
  padding-bottom: 6px;
}
.topbar-dropdown[hidden] { display: none !important; }
/* Homologado con el header de Ajustes (.gear-pop-head): identidad + divisor borde a borde */
.topbar-dropdown-row {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.topbar-dropdown-row .av { width: 34px; height: 34px; border-radius: 999px; background: linear-gradient(135deg, #7A5BC2, #C42784); color: #fff; display: flex; align-items: center; justify-content: center; font: 600 12px 'Inter', sans-serif; flex-shrink: 0; }
.topbar-dropdown-row .who { min-width: 0; }
.topbar-dropdown-row .who strong { display: block; font-size: 15px; font-weight: 600; color: var(--fg1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-dropdown-row .who .e { display: block; font-size: 13px; color: var(--fg3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-dropdown-row .who .r { display: block; font-size: 12px; color: var(--fg3); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-dropdown button {
  /* S292 · hover homologado al sidebar/barra: realce inset redondeado (no a borde completo) */
  display: flex; align-items: center; gap: 11px; width: calc(100% - 12px);
  margin: 0 6px;
  padding: 9px 12px;
  border-radius: var(--radius-md, 10px);
  background: transparent; border: 0;
  text-align: left; cursor: pointer;
  font: 500 13.5px 'Inter', sans-serif;
  color: var(--fg2);
  transition: background var(--motion-fast), color var(--motion-fast);
}
.topbar-dropdown button svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--fg3); }
.topbar-dropdown button:hover { background: var(--color-bg-subtle); color: var(--fg1); }
.topbar-dropdown button:hover svg { color: var(--fg2); }
.topbar-dropdown button.danger { color: var(--color-error-deep); }
.topbar-dropdown button.danger svg { color: var(--color-error-deep); }

.main-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 0;                 /* S235 · el padding del cuerpo lo da la envoltura .bo-view por tier */
  background: var(--bg);
}
/* S235 · Ancho de contenido por vista (3 tiers vía [data-tier]). Centrado + padding
   lateral constante. Cada vista es UN contenedor (sin anidar max-width).
   notificaciones se excluye: es un modal fixed, no una vista de contenido en flujo. */
.main-scroll > .bo-view:not([data-view="notificaciones"]) {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  padding: var(--bo-content-pad-y-top) var(--bo-content-pad-x) var(--bo-content-pad-y-bottom);
}
.main-scroll > .bo-view[data-tier="full"]     { max-width: var(--content-full); }
.main-scroll > .bo-view[data-tier="wide"]     { max-width: var(--content-wide); }
.main-scroll > .bo-view[data-tier="readable"] { max-width: var(--content-readable); }
@media (max-width: 768px) {
  .main-scroll > .bo-view:not([data-view="notificaciones"]) { max-width: 100%; }
}

/* ════════════════════════════════════════════════════════════════════
   BACKOFFICE COMPONENTS · tabla cola, filtros, drawer, badges
   ════════════════════════════════════════════════════════════════════ */
.bo-view { display: none; }
.bo-view.is-active {
  display: block;
  /* S77-fix · Fade puro sin transform · usar transform en .bo-view
     rompía position:fixed de descendientes (drawer del lead, etc.) */
  animation: bo-view-in var(--motion-base) var(--ease-default) both;
}
@keyframes bo-view-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .bo-view.is-active { animation: none; }
}

/* ═══ S179 · Módulo Cumplimiento (Buró) ═══ */
/* S185 · ancho completo, homologado con las demás pestañas (sin cap propio) */
.cmp-section { max-width: none; }
/* S185 · Lista de consultas estilo DS list-row (handoff components-list-row) */
.cmp-list { border: 1px solid var(--color-border-subtle, #E5E7EB); border-radius: var(--radius-lg, 16px); overflow: hidden; background: var(--color-surface, #fff); }
.cmp-list .clr { display: flex; align-items: center; gap: 13px; padding: 13px 16px; cursor: pointer; transition: background var(--motion-fast); position: relative; }
.cmp-list .clr + .clr { border-top: 1px solid var(--color-border-subtle, #E5E7EB); }
.cmp-list .clr:hover { background: var(--color-bg-subtle, #F2F4F6); }
.cmp-list .clr.sel { background: var(--color-bg-subtle, #F2F4F6); }
.cmp-list .clr.sel:hover { background: var(--color-border-subtle, #E5E7EB); }
.cmp-list .clr-av { width: 36px; height: 36px; border-radius: 999px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 500; font-size: 12px; letter-spacing: .02em; }
.cmp-list .clr-body { flex: 1; min-width: 0; }
.cmp-list .clr-p1 { font-size: 14px; font-weight: 500; color: var(--fg1, #0F1419); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-list .clr-p2 { font-size: 12.5px; color: var(--fg2, #4B5563); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.cmp-list .clr-trail { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.cmp-list .clr-meta { font-size: 12px; color: var(--fg3, #8B92A1); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cmp-list .clr-chev { color: var(--fg4, #B8BDC7); display: flex; }
.cmp-list .clr-chev svg { width: 16px; height: 16px; }
.cmp-section-tab {
  display: inline-flex; align-items: center; height: 34px; padding: 0 16px;
  border: 1px solid var(--color-action-ink, #0F1419); border-radius: 8px;
  background: var(--color-action-ink, #0F1419); color: #fff;
  font: 600 13px Inter, sans-serif; margin-bottom: 16px;
}
/* HERO · entregables destacados */
.cmp-hero {
  border: 1px solid var(--color-border, #E5E7EB); border-radius: 16px;
  background: var(--surface-1, #fff); padding: 22px; margin-bottom: 22px;
  box-shadow: 0 8px 28px -16px rgba(15,20,25,.16);
}
.cmp-hero-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.cmp-eyebrow { font: 500 11px Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--fg3, #6B7280); }
.cmp-hero-title { font: 600 18px Inter, sans-serif; color: var(--fg1, #101828); margin: 4px 0 0; }
.cmp-period { display: flex; flex-direction: column; gap: 4px; }
.cmp-period label { font: 500 11px Inter, sans-serif; color: var(--fg3, #6B7280); }
.cmp-period input { padding: 8px 10px; border: 1px solid var(--color-border, #E5E7EB); border-radius: 8px; font: 400 13px Inter, sans-serif; font-variant-numeric: tabular-nums; }
.cmp-deliverables { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 820px) { .cmp-deliverables { grid-template-columns: 1fr; } }
.cmp-deliverable {
  display: flex; align-items: center; gap: 14px;
  border: 1px solid var(--color-border, #E5E7EB); border-radius: 12px;
  background: var(--surface-2, #FAFBFC); padding: 16px;
}
.cmp-deliverable-ic { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; border-radius: 10px; background: var(--color-accent-tint, #E7F8EF); color: var(--color-accent-green, #1FAE5F); }
.cmp-deliverable-ic svg { width: 22px; height: 22px; }
.cmp-deliverable-body { flex: 1; min-width: 0; }
.cmp-deliverable-title { font: 600 14px Inter, sans-serif; color: var(--fg1, #101828); }
.cmp-deliverable-desc { font: 400 12px/1.45 Inter, sans-serif; color: var(--fg3, #6B7280); margin-top: 2px; }
.cmp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 8px 14px; border-radius: 9px; border: 1px solid var(--color-border, #E5E7EB); background: #fff; color: var(--fg1, #101828); font: 600 13px Inter, sans-serif; cursor: pointer; white-space: nowrap; }
.cmp-btn-primary { background: var(--color-action-ink, #0F1419); border-color: var(--color-action-ink, #0F1419); color: #fff; }
.cmp-btn:disabled { opacity: .5; cursor: not-allowed; }
.cmp-hero-meta { margin-top: 14px; font: 400 12px Inter, sans-serif; color: var(--fg3, #6B7280); }
/* SOPORTE */
.cmp-support { border: 1px solid var(--color-border, #E5E7EB); border-radius: 14px; background: var(--surface-1, #fff); padding: 18px; }
.cmp-support-head { font: 600 14px Inter, sans-serif; color: var(--fg2, #344054); margin-bottom: 12px; }
.cmp-muted { color: var(--fg4, #9AA4B2); font-weight: 400; }
.cmp-table { width: 100%; border-collapse: collapse; }
.cmp-table th { text-align: left; font: 600 11px Inter, sans-serif; text-transform: uppercase; letter-spacing: .04em; color: var(--fg3, #6B7280); padding: 8px 10px; border-bottom: 1px solid var(--color-border, #E5E7EB); }
.cmp-table td { padding: 10px; border-bottom: 1px solid var(--color-border-subtle, #F0F2F4); font: 400 13px Inter, sans-serif; color: var(--fg1, #101828); font-variant-numeric: tabular-nums; }
.cmp-table tr.cmp-row { cursor: pointer; }
.cmp-table tr.cmp-row:hover td { background: var(--surface-2, #FAFBFC); }
.cmp-badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 999px; font: 600 11px Inter, sans-serif; }
.cmp-badge.ok { background: var(--color-accent-tint, #E7F8EF); color: var(--color-accent-green-deep, #067647); }
.cmp-badge.warn { background: #FFF4E5; color: #B25E09; }
.cmp-empty { padding: 28px; text-align: center; color: var(--fg3, #6B7280); font: 400 13px Inter, sans-serif; }
/* Detalle por consulta (4 cards + TXT) */
.cmp-detail { margin-top: 16px; border-top: 1px solid var(--color-border, #E5E7EB); padding-top: 16px; }
.cmp-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 820px) { .cmp-cards { grid-template-columns: 1fr; } }
.cmp-card { border: 1px solid var(--color-border, #E5E7EB); border-radius: 12px; padding: 14px; background: var(--surface-1, #fff); }
.cmp-card h4 { font: 600 13px Inter, sans-serif; color: var(--fg1, #101828); margin: 0 0 10px; }
.cmp-kv { display: grid; grid-template-columns: 150px 1fr; gap: 6px 12px; font: 400 12.5px Inter, sans-serif; }
.cmp-kv dt { color: var(--fg3, #6B7280); }
.cmp-kv dd { margin: 0; color: var(--fg1, #101828); }
.cmp-txt { margin-top: 12px; padding: 14px; border: 1px solid var(--color-border, #E5E7EB); border-radius: 10px; background: var(--surface-2, #FAFBFC); font: 12px/1.5 "SFMono-Regular", Consolas, monospace; white-space: pre-wrap; color: var(--fg2, #344054); }

.bo-page-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 18px; gap: 16px; flex-wrap: wrap;
}
.bo-page-title {
  margin: 0; font: 600 22px 'Inter', sans-serif;
  letter-spacing: -0.015em; color: var(--fg1);
}
.bo-page-sub {
  margin: 4px 0 0;
  font: 400 14px/1.45 'Inter', sans-serif;
  color: var(--fg2);
}
/* Encabezado de módulos: sin título ni subtítulo en la página (el nombre del módulo ya
   aparece en el breadcrumb del topbar; el subtítulo era redundante). Se conservan las
   acciones del encabezado (botón "Actualizar", etc.). */
.bo-page-title, .bo-page-sub, .page-head .page-title, .page-head .page-sub { display: none !important; }
.bo-page-head:has(> div:only-child), .page-head:has(> div:only-child) { display: none; }
.bo-kpis {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.bo-kpi {
  flex: 1; min-width: 160px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 18px;
}
.bo-kpi-label {
  font: 500 11px 'Inter', sans-serif;
  color: var(--fg3); text-transform: uppercase;
  letter-spacing: 0.08em; margin-bottom: 6px;
}
.bo-kpi-value {
  font: 600 26px 'Inter', sans-serif;
  font-variant-numeric: tabular-nums;
  color: var(--fg1); line-height: 1.1;
}
.bo-kpi.warn .bo-kpi-value { color: var(--color-warning-deep); }
.bo-kpi.success .bo-kpi-value { color: var(--color-success-deep); }

.bo-filter-bar {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.bo-filter-bar select,
.bo-filter-bar input {
  padding: 9px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  font: 400 13px 'Inter', sans-serif;
  font-family: inherit;
  background: var(--surface); color: var(--fg1);
  min-width: 160px;
}
.bo-filter-bar select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  padding-right: 32px;
  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='%238B92A1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 12px;
}
/* S183 · Sistema canónico de botones .btn-* (DS v0.6 · basado en altura) ·
   homologado con mi-exante y con los demás sistemas del backoffice (.mc-btn, etc).
   Métrica única: alto 40px (sm 32 · lg 48), fuente 14px peso 500, radio 10px. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-button);
  font: 500 14px 'Inter', sans-serif; font-family: inherit;
  cursor: pointer; white-space: nowrap;
  transition: background var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast);
}
.btn[disabled], .btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn svg { width: 16px; height: 16px; }
.btn-sm { height: 32px; padding: 0 14px; font-size: 13px; }
.btn-lg { height: 48px; padding: 0 24px; font-size: 15px; }
.btn-block { display: flex; width: 100%; }
.btn-primary { background: var(--color-action-ink); color: #fff; border-color: var(--color-action-ink); }
.btn-primary:hover { background: var(--color-action-ink-hover); border-color: var(--color-action-ink-hover); }
.btn-dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-dark:hover { background: #000; border-color: #000; }
.btn-secondary { background: var(--surface); color: var(--fg1); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--surface-2); border-color: var(--fg3); }
.btn-accent { background: var(--accent-go); color: #fff; border-color: var(--accent-go); }
.btn-accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-ghost { background: transparent; color: var(--fg1); border-color: transparent; }
.btn-ghost:hover { background: var(--surface-2); }
.btn-danger { background: var(--color-error); color: #fff; border-color: var(--color-error); }
.btn-danger:hover { background: var(--color-error-deep); border-color: var(--color-error-deep); }

/* .bo-btn · alias del sistema canónico (sin tocar markup · 74 usos).
   Equivale a .btn + .btn-secondary; .primary→primary, .danger→danger. */
.bo-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 18px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-button);
  background: var(--surface);
  color: var(--fg1);
  font: 500 14px 'Inter', sans-serif;
  font-family: inherit;
  cursor: pointer; white-space: nowrap;
  transition: background var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast);
}
.bo-btn:hover { background: var(--surface-2); border-color: var(--fg3); }
.bo-btn.primary {
  background: var(--color-action-ink); color: #fff; border-color: var(--color-action-ink);
}
.bo-btn.primary:hover { background: var(--color-action-ink-hover); border-color: var(--color-action-ink-hover); }
.bo-btn.danger {
  background: var(--color-error); color: #fff; border-color: var(--color-error);
}
.bo-btn.danger:hover { background: var(--color-error-deep); border-color: var(--color-error-deep); }
.bo-btn:disabled, .bo-btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* TABLE */
.bo-table-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.bo-table { width: 100%; border-collapse: collapse; }
.bo-table th,
.bo-table td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font: 400 13px 'Inter', sans-serif;
  color: var(--fg1);
  vertical-align: middle;
}
.bo-table th {
  font: 600 11px 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg3);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.bo-table tbody tr { cursor: pointer; transition: background var(--motion-fast); }
.bo-table tbody tr:hover { background: var(--surface-2); }
.bo-table tbody tr:last-child td { border-bottom: 0; }
.bo-table td .cliente-secondary {
  display: block; font-size: 11px; color: var(--fg3); margin-top: 2px;
}
.bo-empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--fg3);
  font: 400 14px 'Inter', sans-serif;
}
.bo-loading {
  padding: 32px 24px;
  text-align: center;
  color: var(--fg3);
  font: 400 13px 'Inter', sans-serif;
}

/* GROUPED ROWS (vista por cuenta) · S4.8-polish */
.bo-table tr.bo-group-head {
  background: var(--surface-2);
  cursor: pointer;
  font-weight: 500;
}
.bo-table tr.bo-group-head:hover { background: #ECEEF1; }
.bo-table tr.bo-group-head td {
  border-bottom: 1px solid var(--border-strong);
  padding-top: 14px; padding-bottom: 14px;
}
.bo-group-head .bo-chev {
  display: inline-block;
  width: 12px; height: 12px;
  color: var(--fg3);
  transition: transform var(--motion-fast) ease;
  margin-right: 8px;
  vertical-align: -2px;
}
.bo-group-head.is-open .bo-chev { transform: rotate(90deg); color: var(--fg1); }
.bo-group-head .bo-group-cliente {
  font: 600 14px 'Inter', sans-serif; color: var(--fg1);
}
.bo-group-head .bo-group-meta {
  display: inline-flex; gap: 14px; align-items: center;
  margin-left: 14px; font-weight: 400; color: var(--fg2); font-size: 13px;
}
.bo-group-head .bo-group-count {
  font: 600 12px 'Inter', sans-serif;
  background: var(--ink); color: #fff;
  padding: 2px 8px; border-radius: var(--r-pill);
  font-variant-numeric: tabular-nums;
}
.bo-table tr.bo-group-row[hidden] { display: none; }
.bo-table tr.bo-group-row td:first-child {
  padding-left: 44px;
}

/* BADGES (motivos + estados) */
.bo-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  font: 600 11px 'Inter', sans-serif;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.bo-badge.motivo-score_bajo      { background: var(--color-warning-tint); color: var(--color-warning-deep); }
.bo-badge.motivo-opt_in_cliente  { background: var(--color-info-tint);    color: var(--color-info-deep); }
.bo-badge.motivo-ocr_fallo_3x    { background: var(--color-error-tint);   color: var(--color-error-deep); }
.bo-badge.motivo-manual_review_req { background: var(--color-notice-tint); color: var(--color-notice-deep); }
.bo-badge.motivo-pld_match_critico { background: var(--color-error-tint);   color: var(--color-error-deep); }
.bo-badge.estado-pendiente   { background: var(--color-warning-tint); color: var(--color-warning-deep); }
.bo-badge.estado-en_revision { background: var(--color-info-tint);    color: var(--color-info-deep); }
.bo-badge.estado-resuelto    { background: var(--color-success-tint); color: var(--color-success-deep); }

/* ════════════════════════════════════════════════════════════════════
   S60 · DRAWER de revisión · rediseño 1:1 según handoff_drawer 5
   Topzone elevado · 5 tabs · hallazgos colapsables · notas · historial.
   ════════════════════════════════════════════════════════════════════ */
.bo-drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(15,20,25,0.35);
  z-index: 5000;
  display: flex; justify-content: flex-end;
  /* S60.13 · fade in/out del backdrop coordinado con el slide del panel */
  transition: background var(--motion-slow) var(--ease-default);
}
.bo-drawer-overlay[hidden] { display: none !important; }
.bo-drawer-overlay.is-closing { background: rgba(15,20,25,0); }
.bo-drawer {
  /* S60.1 · ancho 50vw min 600px (handoff)
     S62.6 · esquinas izquierdas redondeadas (las derechas tocan el borde
     de pantalla y quedan planas · patrón tipo Origin). overflow:hidden
     para que el topzone gris no desborde el corner radius. */
  width: 50vw; min-width: 600px; max-width: 100%;
  height: 100%;
  background: var(--surface);
  border-radius: 16px 0 0 16px;
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: -8px 0 24px rgba(15,20,25,0.18);
  animation: drawer-in var(--motion-slow) var(--ease-default);
}
/* S60.13 · slide-in desde fuera del viewport (handoff: translateX 100%→0) */
@keyframes drawer-in {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
@keyframes drawer-out {
  from { transform: translateX(0); }
  to   { transform: translateX(100%); }
}
.bo-drawer-overlay.is-closing .bo-drawer {
  animation: drawer-out var(--motion-slow) var(--ease-default) both;
}
@media (prefers-reduced-motion: reduce) {
  .bo-drawer { animation: none; }
  .bo-drawer-overlay.is-closing .bo-drawer { animation: none; }
  .bo-drawer-overlay { transition: none; }
}

/* TOPZONE · header + tabs comparten una sola superficie gris elevada.
   El divisor inferior vive en topzone; la elevación (shadow-md) da la
   sensación de que "flota" sobre el body que scrollea. */
.bo-dr-topzone {
  flex-shrink: 0;
  background: var(--color-bg-subtle, #F2F4F6);
  border-bottom: 1px solid var(--color-border-subtle, #E5E7EB);
  box-shadow: 0 6px 16px -10px rgba(15,20,25,0.16);
  position: relative; z-index: 3;
}
.bo-dr-head {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 32px;
}
.bo-dr-head-ic {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--surface);
  color: var(--fg1);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 2px rgba(15,20,25,0.06);
  flex-shrink: 0;
}
.bo-dr-head-ic svg { width: 22px; height: 22px; stroke-width: 1.6; }
.bo-dr-head-text { flex: 1; min-width: 0; }
.bo-dr-head-title {
  font: 600 22px/1.2 'Inter', sans-serif;
  color: var(--fg1);
  letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bo-dr-head-sub {
  font: 400 12.5px/1.4 'Inter', sans-serif;
  color: var(--fg2);
  margin-top: 2px;
}
.bo-dr-head-close {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: pointer;
  color: var(--fg2); border-radius: 10px;
  transition: background var(--motion-fast), color var(--motion-fast);
}
.bo-dr-head-close:hover { background: rgba(15,20,25,0.06); color: var(--fg1); }
.bo-dr-head-close svg { width: 20px; height: 20px; }
.bo-dr-head-close:focus-visible { outline: none; box-shadow: none; }

/* SEGMENTED TABS · alineadas al icono del encabezado (mismo margen 32px) */
.bo-dr-segwrap {
  display: flex; padding: 8px 32px 12px;
}
.bo-dr-seg {
  display: inline-flex; gap: 4px;
}
.bo-dr-seg button {
  height: 32px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  border-radius: 6px;
  font: 600 13px/1 'Inter', sans-serif;
  color: var(--fg2);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
  transition: color var(--motion-fast), background var(--motion-fast), box-shadow var(--motion-fast);
}
.bo-dr-seg button:hover { color: var(--fg1); }
.bo-dr-seg button svg { width: 15px; height: 15px; }
.bo-dr-seg button.active {
  background: var(--surface);
  color: var(--fg1);
  box-shadow: 0 1px 2px rgba(15,20,25,0.06);
}
.bo-dr-seg button:focus-visible { outline: none; box-shadow: none; }
.bo-dr-seg .cnt {
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(15,20,25,0.08);
  color: var(--fg1);
  font: 600 11px/18px 'Inter', sans-serif;
  font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: center; justify-content: center;
}
.bo-dr-seg button.active .cnt {
  background: rgba(15,20,25,0.12);
}

/* BODY · cuerpo scrolleable que cambia según tab activa */
.bo-drawer-body {
  flex: 1; overflow-y: auto;
}
.bo-dr-pad {
  padding: 24px 32px 32px;
}
.bo-dr-panel[hidden] { display: none !important; }

/* SECTION · etiqueta + contenido */
.bo-dr-sec + .bo-dr-sec { margin-top: 32px; }
.bo-dr-sec-label {
  font: 600 11px 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg3);
  margin: 0 0 12px;
}

/* MOTIVO badge + docbar (badge a la izq + iconbtns a la der) */
.bo-dr-docbar {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 20px;
}
.bo-dr-docbar .grow { flex: 1; }
.bo-dr-iconbtn {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface);
  border: 1px solid var(--color-border-default, #D1D5DB);
  border-radius: 10px;
  color: var(--fg2);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast);
}
.bo-dr-iconbtn:hover { background: var(--color-bg-subtle); color: var(--fg1); border-color: var(--fg3); }
.bo-dr-iconbtn:focus-visible { outline: none; box-shadow: none; }
.bo-dr-iconbtn svg { width: 18px; height: 18px; }

/* MOTIVO badge (sutil, warning tint) */
.bo-dr-motivo {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: var(--color-warning-tint, #FAE5CC);
  color: var(--color-warning-deep, #B05A00);
  border-radius: 999px;
  font: 600 12px 'Inter', sans-serif;
}
.bo-dr-motivo svg { width: 14px; height: 14px; }

/* VISOR PDF/imagen + meta del archivo */
.bo-dr-viewer {
  border-radius: 10px;
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-subtle);
  overflow: hidden;
}
.bo-dr-viewer embed,
.bo-dr-viewer img { display: block; width: 100%; }
.bo-dr-viewer embed { height: 520px; }
.bo-dr-viewer img { max-height: 520px; object-fit: contain; }
.bo-dr-filemeta {
  display: flex; gap: 12px; align-items: center;
  font: 400 12px 'Inter', sans-serif;
  color: var(--fg3);
  margin-top: 10px;
  flex-wrap: wrap;
}
.bo-dr-filemeta .sep { color: var(--fg4); }

/* HALLAZGOS */
.bo-dr-lead {
  font: 400 13px/1.5 'Inter', sans-serif;
  color: var(--fg2);
  margin: 0 0 12px;
}
.bo-dr-findings { display: flex; flex-direction: column; gap: 8px; }
.bo-dr-finding {
  background: var(--color-bg-subtle, #F2F4F6);
  border-radius: 10px;
  overflow: hidden;
}
.bo-dr-finding-head {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: default;
  font-family: inherit;
}
button.bo-dr-finding-head { cursor: pointer; transition: background var(--motion-fast); }
button.bo-dr-finding-head:hover { background: rgba(15,20,25,0.03); }
button.bo-dr-finding-head:focus-visible { outline: none; box-shadow: none; }
.bo-dr-sev {
  width: 10px; height: 10px; border-radius: 50%;
  flex-shrink: 0;
}
.bo-dr-sev.alta   { background: var(--color-error, #B83227); }
.bo-dr-sev.media  { background: var(--color-warning, #E89B2A); }
.bo-dr-sev.info   { background: var(--color-notice, #6E7378); }
.bo-dr-finding-txt {
  flex: 1; min-width: 0;
  font: 500 13.5px/1.4 'Inter', sans-serif;
  color: var(--fg1);
}
.bo-dr-finding-tag {
  font: 600 11px 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg3);
}
.bo-dr-finding-chev {
  width: 16px; height: 16px;
  color: var(--fg3);
  opacity: 0.7;
  transition: transform var(--motion-base) var(--ease-default), opacity var(--motion-fast);
}
button.bo-dr-finding-head:hover .bo-dr-finding-chev { opacity: 1; }
.bo-dr-finding.open .bo-dr-finding-chev { transform: rotate(90deg); opacity: 1; }

/* DETALLE de mismatch · variante "rows" (lista hairline) · "neutral" */
.bo-dr-fdetail {
  padding: 4px 14px 12px;
  margin-left: 36px; /* indent bajo el texto del hallazgo */
}
.bo-dr-fdrow {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--color-border-subtle);
  font: 400 13px 'Inter', sans-serif;
}
.bo-dr-fdrow:first-child { border-top: 0; }
.bo-dr-fdrow .fd-k { color: var(--fg3); }
.bo-dr-fdrow .fd-v { color: var(--fg1); font-weight: 500; word-break: break-word; }

/* CAMPOS de datos (key/value) */
.bo-dr-field {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border-subtle);
  font: 400 13px 'Inter', sans-serif;
}
.bo-dr-field:last-child { border-bottom: 0; }
.bo-dr-field .k { color: var(--fg3); }
.bo-dr-field .v { color: var(--fg1); font-weight: 500; word-break: break-word; }
.bo-dr-field .v.muted { color: var(--fg3); font-weight: 400; font-style: italic; }

/* VALIDEZ rows */
.bo-dr-validez { display: flex; flex-direction: column; gap: 4px; }
.bo-dr-validez-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border-subtle);
  font: 400 13px 'Inter', sans-serif;
}
.bo-dr-validez-row:last-child { border-bottom: 0; }
.bo-dr-validez-row .ok   { color: var(--color-success-deep, #16904E); }
.bo-dr-validez-row .warn { color: var(--color-warning-deep, #B05A00); }
.bo-dr-validez-row .info { color: var(--fg3); }
.bo-dr-validez-row svg { width: 16px; height: 16px; flex-shrink: 0; }
.bo-dr-validez-row .lbl { flex: 1; color: var(--fg1); }

/* NOTAS · composer + hilo */
.bo-dr-note-composer {
  display: flex; gap: 12px;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15,20,25,0.04);
}
.bo-dr-note-avatar {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-action-ink, #0F1419);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 12px 'Inter', sans-serif;
  letter-spacing: 0.04em;
}
.bo-dr-note-avatar.alt { background: var(--color-accent-green, #1FAE5F); }
.bo-dr-note-composer-main { flex: 1; min-width: 0; }
.bo-dr-note-input {
  width: 100%;
  min-height: 76px;
  max-height: 200px;
  resize: none;
  padding: 12px 14px;
  border: 1px solid var(--color-border-default);
  border-radius: 10px;
  background: var(--surface);
  font: 400 14px/1.5 'Inter', sans-serif;
  color: var(--fg1);
  outline: 0;
  transition: border-color var(--motion-fast);
}
.bo-dr-note-input:focus {
  border-color: var(--fg1);
  box-shadow: none;
}
.bo-dr-note-input::placeholder { color: var(--fg3); }
.bo-dr-note-tagrow {
  display: flex; align-items: center; gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.bo-dr-note-tagrow-label {
  font: 600 11px 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg3);
}
.bo-dr-note-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.bo-dr-note-tag {
  display: inline-flex; align-items: center; gap: 5px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--color-border-default);
  color: var(--fg2);
  font: 500 12px 'Inter', sans-serif;
  cursor: pointer;
  transition: background var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast);
}
.bo-dr-note-tag:hover { background: var(--color-bg-subtle); color: var(--fg1); }
.bo-dr-note-tag.active {
  background: var(--color-action-ink, #0F1419);
  color: #fff;
  border-color: var(--color-action-ink);
}
.bo-dr-note-tag svg { width: 12px; height: 12px; }
.bo-dr-note-composer-foot {
  display: flex; justify-content: flex-end;
  margin-top: 12px;
}
.bo-dr-note-add {
  display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 16px;
  background: var(--color-action-ink, #0F1419);
  color: #fff;
  border: 0; border-radius: 10px;
  font: 600 13px 'Inter', sans-serif;
  cursor: pointer;
  transition: background var(--motion-fast);
}
.bo-dr-note-add:hover:not(:disabled) { background: #1F262E; }
.bo-dr-note-add:disabled { opacity: 0.4; cursor: not-allowed; }
.bo-dr-note-add svg { width: 15px; height: 15px; }
.bo-dr-note-disclaimer {
  display: flex; gap: 8px; align-items: flex-start;
  margin: 10px 4px 0;
  font: 400 12px/1.5 'Inter', sans-serif;
  color: var(--fg3);
}
.bo-dr-note-disclaimer svg { width: 13px; height: 13px; flex-shrink: 0; margin-top: 2px; }

.bo-dr-note-list { margin-top: 28px; }
.bo-dr-note-list-head {
  font: 600 11px 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg3);
  margin-bottom: 8px;
}
.bo-dr-note-empty {
  padding: 24px 0;
  text-align: center;
  font: 400 13px 'Inter', sans-serif;
  color: var(--fg3);
}
.bo-dr-note-item {
  display: flex; gap: 12px;
  padding: 16px 0;
  border-top: 1px solid var(--color-border-subtle);
}
.bo-dr-note-item:first-child { border-top: 0; }
.bo-dr-note-item-main { flex: 1; min-width: 0; }
.bo-dr-note-item-head {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.bo-dr-note-author { font: 600 13px 'Inter', sans-serif; color: var(--fg1); }
.bo-dr-note-time   { font: 400 12px 'Inter', sans-serif; color: var(--fg3); }
.bo-dr-note-chips  { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; }
.bo-dr-note-chip {
  display: inline-flex; align-items: center;
  height: 22px; padding: 0 8px;
  border-radius: 999px;
  background: var(--color-bg-subtle);
  color: var(--fg2);
  font: 500 11px 'Inter', sans-serif;
}
.bo-dr-note-body {
  font: 400 13.5px/1.55 'Inter', sans-serif;
  color: var(--fg1);
  white-space: pre-wrap;
}

/* TIMELINE de historial */
.bo-dr-timeline { display: flex; flex-direction: column; }
.bo-dr-tl-item {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  padding-bottom: 20px;
  position: relative;
}
.bo-dr-tl-item:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 17px; top: 38px; bottom: 0;
  width: 2px;
  background: var(--color-border-subtle);
}
.bo-dr-tl-dot {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--color-border-default);
  color: var(--fg2);
  display: inline-flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
}
.bo-dr-tl-dot svg { width: 17px; height: 17px; }
.bo-dr-tl-dot.review {
  background: var(--color-bg-subtle);
  color: var(--fg1);
}
.bo-dr-tl-dot.now {
  background: var(--color-action-ink, #0F1419);
  color: #fff;
  border-color: var(--color-action-ink);
}
.bo-dr-tl-body { padding-top: 4px; }
.bo-dr-tl-title { font: 600 13.5px 'Inter', sans-serif; color: var(--fg1); }
.bo-dr-tl-time  { font: 400 12px 'Inter', sans-serif; color: var(--fg3); margin: 2px 0 4px; }
.bo-dr-tl-desc  { font: 400 13px/1.5 'Inter', sans-serif; color: var(--fg2); }

/* TECH DETAILS colapsable (en tab Solicitante) */
.bo-dr-tech-details {
  margin-top: 20px;
}
.bo-dr-tech-details summary {
  cursor: pointer;
  font: 500 12px 'Inter', sans-serif;
  color: var(--fg3);
  padding: 8px 0;
  list-style: none;
}
.bo-dr-tech-details summary::-webkit-details-marker { display: none; }
.bo-dr-tech-details summary::before {
  content: '▸ ';
  display: inline-block;
  transition: transform var(--motion-fast);
}
.bo-dr-tech-details[open] summary::before { transform: rotate(90deg); }
.bo-dr-tech-body {
  margin-top: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--fg2);
  display: grid; gap: 4px;
}

/* EMPTY note (texto sin estado en validaciones · "no se detectaron…") */
.bo-dr-emptynote {
  padding: 16px;
  background: var(--color-bg-subtle);
  border-radius: 10px;
  font: 400 13px 'Inter', sans-serif;
  color: var(--fg3);
}

/* FOOTER decisión simplificado · solo Rechazar + Aprobar */
.bo-drawer-foot {
  flex-shrink: 0;
  padding: 14px 32px;
  border-top: 1px solid var(--color-border-subtle);
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  background: var(--surface);
}
.bo-dr-btn-reject {
  height: 44px; padding: 0 20px;
  background: var(--surface);
  color: var(--fg1);
  border: 1px solid var(--color-border-default);
  border-radius: 10px;
  font: 600 14px 'Inter', sans-serif;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  box-shadow: 0 1px 2px rgba(15,20,25,0.04);
  transition: background var(--motion-fast), border-color var(--motion-fast);
}
.bo-dr-btn-reject:hover { background: var(--color-bg-subtle); border-color: var(--fg3); }
.bo-dr-btn-reject:disabled { opacity: 0.5; cursor: not-allowed; }
.bo-dr-btn-reject:focus-visible { outline: none; box-shadow: none; }
.bo-dr-btn-approve {
  height: 44px; padding: 0 22px;
  background: var(--color-accent-green, #1FAE5F);
  color: #fff;
  border: 0; border-radius: 10px;
  font: 600 14px 'Inter', sans-serif;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background var(--motion-fast);
}
.bo-dr-btn-approve:hover { background: var(--color-accent-green-deep, #16904E); }
.bo-dr-btn-approve:disabled { opacity: 0.5; cursor: not-allowed; }
.bo-dr-btn-approve:focus-visible { outline: none; box-shadow: none; }
.bo-dr-btn-approve svg, .bo-dr-btn-reject svg { width: 16px; height: 16px; }

/* S62.3 · Toast undo · aparece abajo centrado por 5s al Aceptar */
.bo-undo-toast {
  position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%);
  background: var(--color-action-ink, #0F1419);
  color: #FFFFFF;
  padding: 12px 16px 12px 20px;
  border-radius: 999px;
  display: inline-flex; align-items: center; gap: 14px;
  box-shadow: 0 12px 32px rgba(15,20,25,0.32);
  font: 500 13.5px 'Inter';
  z-index: 6000;
  animation: undo-toast-in var(--motion-base) var(--ease-default);
}
.bo-undo-toast[hidden] { display: none !important; }
.bo-undo-toast button {
  background: transparent;
  color: #5EE39E;
  border: 0;
  padding: 0; cursor: pointer;
  font: 600 13.5px 'Inter';
  text-decoration: underline;
  text-underline-offset: 2px;
}
.bo-undo-toast button:hover { color: #FFFFFF; }
@keyframes undo-toast-in {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* Motivo card del modal solicitar corrección */
.bo-sc-motivo {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--color-border-subtle);
  border-radius: 10px;
  background: var(--color-surface);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background var(--motion-fast), border-color var(--motion-fast);
}
.bo-sc-motivo:hover { background: var(--color-bg-subtle); border-color: var(--color-border-default); }
.bo-sc-motivo.is-selected {
  background: var(--color-bg-subtle);
  border-color: var(--fg1);
}
.bo-sc-motivo-radio {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border-default);
  flex-shrink: 0;
  position: relative;
}
.bo-sc-motivo.is-selected .bo-sc-motivo-radio {
  border-color: var(--fg1);
}
.bo-sc-motivo.is-selected .bo-sc-motivo-radio::after {
  content: '';
  position: absolute; inset: 3px;
  background: var(--fg1);
  border-radius: 50%;
}
.bo-sc-motivo-text { flex: 1; min-width: 0; }
.bo-sc-motivo-title { font: 600 13.5px 'Inter'; color: var(--fg1); }
.bo-sc-motivo-sub   { font: 400 12px 'Inter'; color: var(--fg2); margin-top: 2px; }

/* COMPATIBILIDAD legacy con la implementación anterior (otros drawers
   como el lead drawer aún usan .bo-drawer-head/body/foot). Mantengo los
   nombres legacy con estilos neutros mínimos que no rompan los otros. */
.bo-drawer-head:not(.bo-dr-topzone) {
  flex-shrink: 0;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.bo-drawer-head:not(.bo-dr-topzone) h2 {
  margin: 0; font: 600 17px 'Inter', sans-serif;
  letter-spacing: -0.01em;
}
.bo-drawer-close {
  background: transparent; border: 0;
  padding: 6px; cursor: pointer;
  color: var(--fg3); border-radius: 8px;
}
.bo-drawer-close:hover { background: var(--surface-2); color: var(--fg1); }
.bo-drawer-close svg { width: 18px; height: 18px; display: block; }

.bo-section { margin-bottom: 22px; }
.bo-section-title {
  font: 600 11px 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg3);
  margin: 0 0 10px;
}
.bo-kv {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 6px 12px;
  font: 400 13px 'Inter', sans-serif;
}
.bo-kv dt { color: var(--fg3); }
.bo-kv dd { margin: 0; color: var(--fg1); font-weight: 500; word-break: break-word; }
.bo-kv dd code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  background: var(--surface-2);
  padding: 1px 5px; border-radius: 4px;
}

.bo-doc-viewer {
  margin: 12px 0 16px;
  background: var(--surface-2);
  border-radius: 12px;
  border: 1px solid var(--border);
  min-height: 320px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.bo-doc-viewer img,
.bo-doc-viewer embed {
  max-width: 100%; max-height: 480px; display: block;
}
.bo-doc-viewer a {
  color: var(--fg1); text-decoration: underline; font-size: 13px;
}

.bo-jsonbox {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 14px;
  font: 400 12px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--fg1);
  white-space: pre-wrap; word-break: break-word;
  max-height: 320px; overflow-y: auto;
}
details.bo-collapse { margin-top: 10px; }
details.bo-collapse summary {
  cursor: pointer; font: 500 12px 'Inter', sans-serif;
  color: var(--fg2); padding: 4px 0;
}
details.bo-collapse[open] summary { color: var(--fg1); margin-bottom: 6px; }

.bo-textarea {
  width: 100%; min-height: 80px;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  font: 400 13px/1.45 'Inter', sans-serif;
  font-family: inherit;
  resize: vertical;
}
.bo-textarea:focus { outline: 1px solid var(--ink, #0F1419); outline-offset: 0; } /* S82b · focus neutro */

/* S25 · CRM Pipeline kanban */
/* ─────────────────────────────────────────────────────────────────
   S78 · CRM Kanban Pipeline 1:1 (handoff "CRM" v2 master-detail)
   Columnas 312px con tint por etapa · cards rich (avatar + nombre +
   heat dot + vehículo + monto + vendor row + acciones inline).
   Sin border-left, sin colores editoriales.
   ───────────────────────────────────────────────────────────────── */
.kboard {
  flex: 1; min-height: 0;
  display: flex; gap: 16px;
  overflow-x: auto; overflow-y: hidden;
  /* S78-fix · bleed lateral: compensar padding del shell (32px) con margin
     negativo y reponer con padding propio. Así el scroll respeta los bordes
     y la primera/última columna no quedan recortadas. */
  margin: 0 -32px;
  padding: 0 32px 22px;
  scrollbar-width: thin;
}
.kboard::-webkit-scrollbar { height: 10px; }
.kboard::-webkit-scrollbar-thumb { background: var(--color-border-default, #D1D5DB); border-radius: 999px; border: 2px solid var(--color-bg, #FAFBFC); }
.kboard::-webkit-scrollbar-track { background: transparent; }

.kcol { flex: 0 0 312px; width: 312px; display: flex; flex-direction: column; min-height: 0; }
.kcol-head { display: flex; align-items: center; gap: 9px; padding: 0 4px 11px; flex-shrink: 0; }
.kcol-head .stage-dot { width: 9px; height: 9px; border-radius: 999px; flex-shrink: 0; }
.kcol-head .lbl { font: 600 12px 'Inter'; text-transform: uppercase; letter-spacing: .06em; color: var(--fg1); white-space: nowrap; }
.kcol-head .num {
  min-width: 22px; height: 21px; padding: 0 7px;
  border-radius: 999px;
  background: var(--surface-2, #F2F4F6);
  color: var(--fg2);
  font: 600 11px 'Inter';
  display: inline-flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums;
}
.kcol-head .sum {
  margin-left: auto;
  font: 600 12px 'Inter';
  color: var(--fg2);
  font-variant-numeric: tabular-nums;
}
.kcol-body {
  flex: 1; min-height: 0;
  border-radius: 16px; padding: 12px;
  display: flex; flex-direction: column; gap: 12px;
  overflow-y: auto;
  border: 1px solid var(--border);
  transition: background var(--motion-fast), border-color var(--motion-fast), box-shadow var(--motion-fast);
  scrollbar-width: thin;
}
.kcol-body::-webkit-scrollbar { width: 7px; }
.kcol-body::-webkit-scrollbar-thumb { background: rgba(15,20,25,.14); border-radius: 999px; }
.kcol-body.drop { box-shadow: inset 0 0 0 2px var(--drop-color, #1FAE5F); border-color: transparent; }
.kcol-empty {
  margin: auto;
  color: var(--fg3);
  font: 400 12.5px 'Inter';
  text-align: center; padding: 20px;
}

/* CARD */
.kcard {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  cursor: grab; flex-shrink: 0;
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast), transform var(--motion-fast), opacity var(--motion-fast);
}
.kcard:hover { border-color: var(--color-border-default, #D1D5DB); box-shadow: 0 4px 12px -2px rgba(15,20,25,.06); }
.kcard:active { cursor: grabbing; }
.kcard.dragging { opacity: .4; }
.kcard-hd { display: flex; align-items: center; gap: 10px; padding: 14px 14px 0; }
.kcard-name {
  font: 600 14px/1.2 'Inter';
  color: var(--fg1);
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kcard-rfc {
  font: 400 10.5px 'Inter';
  color: var(--fg3);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  margin-top: 2px;
}
.kcard .heat { width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0; }
.kcard-veh {
  display: flex; align-items: center; gap: 7px;
  font: 400 12.5px 'Inter';
  color: var(--fg2);
  padding: 11px 14px 0;
}
.kcard-veh svg { width: 14px; height: 14px; color: var(--fg3); flex-shrink: 0; }
.kcard-monto {
  font: 600 22px 'Inter';
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  padding: 8px 14px 0;
  color: var(--fg1);
}
.kcard-monto .cur { font: 500 12px 'Inter'; color: var(--fg3); }
.kcard-rows {
  padding: 12px 14px 14px;
  display: flex; align-items: center; gap: 8px;
  font: 400 12px 'Inter';
  color: var(--fg2);
}
.kcard-rows .av { width: 20px; height: 20px; font-size: 9px; }
.kcard-rows .vd { font-weight: 500; }
.kcard-rows .r {
  margin-left: auto;
  color: var(--fg3);
  display: inline-flex; align-items: center; gap: 4px;
}
.kcard-rows .r svg { width: 12px; height: 12px; }
.stuck-flag {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--color-warning-deep, #B07614);
  font-weight: 600;
}
.stuck-flag svg { width: 12px; height: 12px; }
.kcard-actions { display: flex; border-top: 1px solid var(--border); }
.kcard-actions button {
  flex: 1; border: none; background: none;
  padding: 10px 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font: 500 11.5px 'Inter';
  color: var(--fg2);
  font-family: inherit;
  transition: background var(--motion-fast), color var(--motion-fast);
}
.kcard-actions button:hover { background: var(--surface-2, #F2F4F6); color: var(--fg1); }
.kcard-actions button + button { border-left: 1px solid var(--border); }
.kcard-actions svg { width: 14px; height: 14px; }
.kcard-actions .win { color: var(--color-accent-green-deep, #16904E); }
.kcard-actions .win:hover { background: var(--color-accent-green-bg, #E6F7EE); color: var(--color-accent-green-deep, #16904E); }

/* Avatar circular con gradiente (compartido card + row) */
.kav {
  border-radius: 999px; color: #fff;
  font: 600 12px 'Inter';
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* "Agregar lead" fantasma al final de cada columna */
.add-ghost {
  border: 1px dashed var(--color-border-default, #D1D5DB);
  border-radius: 12px;
  color: var(--fg3);
  font: 500 12.5px 'Inter';
  background: rgba(255,255,255,.5);
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color var(--motion-fast), color var(--motion-fast), background var(--motion-fast);
  flex-shrink: 0;
}
.add-ghost:hover { border-color: var(--fg3); color: var(--fg2); background: var(--surface); }
.add-ghost svg { width: 14px; height: 14px; }

/* Filtro toolbar del CRM */
.kpipe-toolbar {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 18px;
  flex-wrap: wrap;
}
.kpipe-toolbar .fld {
  position: relative;
}
.kpipe-toolbar .fld svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--fg3);
  pointer-events: none;
}
.kpipe-toolbar .fld input {
  width: 248px; height: 38px;
  padding: 0 14px 0 34px;
  font: 400 13px 'Inter';
  color: var(--fg1);
  background: var(--surface);
  border: 1px solid var(--color-border-default, #D1D5DB);
  border-radius: 10px;
  outline: none;
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}
.kpipe-toolbar .fld input::placeholder { color: var(--fg3); }
.kpipe-toolbar .fld input:focus { outline: 1px solid #0F1419; outline-offset: 0; box-shadow: none; } /* S82b · focus neutro */
.kpipe-toolbar .sel {
  height: 38px; padding: 0 13px;
  font: 400 13px 'Inter';
  color: var(--fg1);
  background: var(--surface);
  border: 1px solid var(--color-border-default, #D1D5DB);
  border-radius: 10px;
  cursor: pointer; outline: none;
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}
.kpipe-toolbar .sel:focus { outline: 1px solid #0F1419; outline-offset: 0; box-shadow: none; } /* S82b · focus neutro */
.kpipe-toolbar .chip-toggle {
  height: 38px; padding: 0 14px;
  font: 500 13px 'Inter';
  background: var(--surface);
  border: 1px solid var(--color-border-default, #D1D5DB);
  border-radius: 10px;
  cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  color: var(--fg1);
  user-select: none;
  transition: background var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast);
}
.kpipe-toolbar .chip-toggle .dot { width: 7px; height: 7px; border-radius: 999px; background: var(--color-warning, #E89B2A); }
.kpipe-toolbar .chip-toggle.on {
  background: var(--ink, #0F1419);
  color: #fff;
  border-color: var(--ink, #0F1419);
}
.kpipe-toolbar .btn-new {
  height: 40px; padding: 0 18px;
  font: 500 14px 'Inter';
  background: var(--ink, #0F1419);
  color: #fff;
  border: none; border-radius: 10px;
  cursor: pointer;
  display: flex; align-items: center; gap: 7px;
  font-family: inherit;
  margin-left: auto;
  transition: background var(--motion-fast);
}
.kpipe-toolbar .btn-new:hover { background: var(--color-action-ink-hover, #1F262E); }
.kpipe-toolbar .btn-new svg { width: 15px; height: 15px; }

/* S68.3 · Filtro toggle "Solo atorados" */
.bo-pipe-filter-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border-radius: 8px;
  background: var(--color-surface, #FFFFFF);
  border: 1px solid var(--color-border-default, #D1D5DB);
  font: 500 13px 'Inter', sans-serif;
  color: var(--fg1);
  cursor: pointer;
  transition: background var(--motion-fast), border-color var(--motion-fast);
}
.bo-pipe-filter-toggle:hover { background: var(--color-bg-subtle, #F2F4F6); }
.bo-pipe-filter-toggle.active {
  background: var(--color-warning-tint, #FAE5CC);
  border-color: var(--color-warning, #E89B2A);
  color: var(--color-warning-deep, #B05A00);
}
.bo-pipe-filter-toggle .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-warning, #E89B2A);
}

/* S69.1 · Panel "Estado del wizard" dentro del drawer lead */
.bo-lead-wizard-panel {
  margin: 16px 0;
  padding: 14px 16px;
  background: var(--color-bg-subtle, #F2F4F6);
  border-radius: 12px;
  border: 1px solid var(--color-border-subtle, #E5E7EB);
}
.bo-lead-wizard-panel h4 {
  margin: 0 0 10px;
  font: 600 12px 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg3);
  display: flex; align-items: center; justify-content: space-between;
}
.bo-lead-wizard-panel h4 .horas {
  font: 600 12px 'Inter', sans-serif;
  text-transform: none;
  letter-spacing: 0;
}
.bo-lead-wizard-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 0;
  font: 400 13px 'Inter', sans-serif;
  border-top: 1px solid var(--color-border-subtle, #E5E7EB);
}
.bo-lead-wizard-row:first-of-type { border-top: 0; }
.bo-lead-wizard-row .nm { color: var(--fg1); }
.bo-lead-wizard-row .st {
  font: 500 11px 'Inter', sans-serif;
  padding: 2px 8px; border-radius: 999px;
}
.bo-lead-wizard-row .st.is-ok { background: var(--color-success-tint, #D8EEDF); color: var(--color-success-deep, #16904E); }
.bo-lead-wizard-row .st.is-warn { background: var(--color-warning-tint, #FAE5CC); color: var(--color-warning-deep, #B05A00); }
.bo-lead-wizard-row .st.is-err { background: var(--color-error-tint, #F4DCD7); color: var(--color-error-deep, #8C2018); }

/* S69.2 · Botones acción rápida en drawer lead */
.bo-lead-actions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 12px 0;
}
.bo-lead-action-btn {
  display: inline-flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 8px;
  background: var(--color-surface, #FFFFFF);
  border: 1px solid var(--color-border-default, #D1D5DB);
  border-radius: 10px;
  font: 600 12px 'Inter', sans-serif;
  color: var(--fg1);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--motion-fast), border-color var(--motion-fast);
}
.bo-lead-action-btn:hover { background: var(--color-bg-subtle, #F2F4F6); border-color: var(--fg3); }
.bo-lead-action-btn svg { width: 20px; height: 20px; color: var(--fg2); }
.bo-lead-action-btn[disabled] { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

/* Drawer lead */
.bo-lead-drawer-overlay { position: fixed; inset: 0; background: rgba(15,20,25,0.45); z-index: 999; display: none; }
.bo-lead-drawer-overlay.is-open { display: block; }
.bo-lead-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 100vw); background: var(--surface); box-shadow: -8px 0 24px rgba(0,0,0,0.2); display: flex; flex-direction: column; z-index: 1000; transform: translateX(100%); transition: transform 0.25s; }
.bo-lead-drawer.is-open { transform: translateX(0); }
.bo-lead-drawer-head { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: flex-start; gap: 10px; }
.bo-lead-drawer-body { flex: 1; overflow-y: auto; padding: 16px 20px; }

/* S19 · Cmd+K búsqueda global */
.bo-cmdk-overlay {
  position: fixed; inset: 0; background: rgba(15,20,25,0.55); backdrop-filter: blur(4px);
  z-index: 9999; display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh;
}
.bo-cmdk-overlay[hidden] { display: none !important; }
.bo-cmdk-panel {
  width: min(640px, calc(100vw - 32px)); max-height: 70vh; display: flex; flex-direction: column;
  background: var(--surface); border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  border: 1px solid var(--border); overflow: hidden;
}
.bo-cmdk-head {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border);
}
.bo-cmdk-head input {
  flex: 1; border: 0; outline: 0; background: transparent; font: 400 15px 'Inter';
  color: var(--fg1); padding: 4px 0;
}
.bo-cmdk-head input::placeholder { color: var(--fg4); }
.bo-cmdk-kbd {
  font: 500 10px ui-monospace,monospace; background: var(--surface-2);
  color: var(--fg3); padding: 2px 6px; border-radius: 4px; border: 1px solid var(--border);
}
.bo-cmdk-results { flex: 1; overflow-y: auto; padding: 6px 0; min-height: 80px; }
.bo-cmdk-section-label {
  font: 600 10px 'Inter'; color: var(--fg3); text-transform: uppercase; letter-spacing: .08em;
  padding: 10px 16px 4px; display: block;
}
.bo-cmdk-item {
  display: flex; align-items: center; gap: 12px; padding: 9px 16px; cursor: pointer;
  text-decoration: none; color: inherit; border: 0; background: transparent; width: 100%; text-align: left;
}
.bo-cmdk-item:hover, .bo-cmdk-item.is-active { background: var(--surface-2); }
.bo-cmdk-item-icon {
  width: 28px; height: 28px; border-radius: 8px; background: var(--surface-2); display: flex;
  align-items: center; justify-content: center; color: var(--fg2); flex-shrink: 0;
}
.bo-cmdk-item-body { flex: 1; min-width: 0; }
.bo-cmdk-item-title { font: 600 13px 'Inter'; color: var(--fg1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bo-cmdk-item-meta { font: 400 11px 'Inter'; color: var(--fg3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bo-cmdk-empty { padding: 24px; text-align: center; color: var(--fg3); font: 400 13px 'Inter'; }
.bo-cmdk-foot {
  display: flex; gap: 14px; padding: 10px 14px; border-top: 1px solid var(--border);
  font: 400 11px 'Inter'; color: var(--fg3);
}
.bo-cmdk-foot kbd { margin-right: 4px; }

/* S291 · FAB chatbot retirado — el asistente ahora se abre desde el ícono
   de la navbar (#chatFabTopbar) y vive como barra acoplada (.dock).
   El CSS del FAB (.bo-chat-fab), backdrop y modo maximizado se eliminaron. */

/* ═══════════════════════════════════════════════════════════
   S48 · Chatbot rediseñado 1:1 según handoff Asistente Exante
   "04 · Docked Panel" + línea divisoria entre header y body
   ═══════════════════════════════════════════════════════════ */
.bo-chat-panel {
  /* S53 · Anclado a esquina inferior derecha · sin "volar"
     S54-fix2 · !important para blindar contra overrides de wrappers.
     S57 · transform-origin anclado al FAB para efecto "Emerger".
     S57-fix · bottom = 24 (gap base) + 56 (FAB) + 16 (gap panel/FAB) = 96px
     para que el panel quede SOBRE el FAB y no lo tape al abrirse.      */
  position: fixed !important;
  top: auto !important;
  left: auto !important;
  bottom: 96px !important;
  right: 24px !important;
  transform-origin: bottom right;
  transition: transform var(--motion-base) var(--ease-default);
  width: 384px; max-width: calc(100vw - 32px);
  height: 600px; max-height: calc(100vh - 120px);
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  box-shadow: 0 24px 64px -12px rgba(15,20,25,.18);
  display: flex; flex-direction: column;
  z-index: 5001;
  overflow: hidden;
  font-family: 'Inter', system-ui, sans-serif;
}
.bo-chat-panel[hidden] { display: none !important; }
/* S57 · keyframes para apertura "Emerger" y cierre limpio (handoff efecto) */
body.chat-open:not(.chat-max) .bo-chat-panel  { animation: bo-chat-emerge 0.46s var(--ease-spring) both; }
body.chat-closing .bo-chat-panel { animation: bo-chat-closeout 0.22s var(--ease-default) both; }
@keyframes bo-chat-emerge {
  0%   { opacity: 0; transform: translateY(10px) scale(0.45); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
@keyframes bo-chat-closeout {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(6px) scale(0.965); }
}
@media (prefers-reduced-motion: reduce) {
  body.chat-open .bo-chat-panel,
  body.chat-closing .bo-chat-panel { animation-duration: 0.001s; }
}

/* S74 · Panel de notificaciones según handoff (rediseño completo) */
.np {
  position: fixed; right: 16px; top: 56px; /* anclado al topbar */
  width: 430px; max-width: calc(100vw - 32px);
  background: var(--color-surface, #FFFFFF);
  border: 1px solid var(--color-border-subtle, #E5E7EB);
  border-radius: 16px;
  box-shadow: 0 24px 64px -12px rgba(15,20,25,0.18);
  overflow: hidden;
  z-index: 1000;
  display: flex; flex-direction: column;
}
.np[hidden] { display: none !important; }
/* Caret triangular apuntando al botón de la campana */
.np::before {
  content: ''; position: absolute; top: -6px; right: 24px;
  width: 12px; height: 12px; transform: rotate(45deg);
  background: var(--color-surface, #FFFFFF);
  border-left: 1px solid var(--color-border-subtle, #E5E7EB);
  border-top: 1px solid var(--color-border-subtle, #E5E7EB);
}
.np-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px 16px; }
.np-head h3 { margin: 0; font: 700 20px 'Inter', sans-serif; color: var(--fg1); letter-spacing: -0.015em; }
.np-seg { position: relative; display: inline-flex; align-items: center; background: var(--color-bg-subtle); padding: 4px; border-radius: 12px; gap: 3px; flex-shrink: 0; }
/* S283 · Pastilla deslizante (magic thumb) · DS Exante · una sola pastilla que se desliza/redimensiona bajo el tab activo. */
.seg-thumb { position: absolute; top: 0; left: 0; width: 0; height: 0; border-radius: 8px; background: var(--color-surface, #fff); box-shadow: var(--shadow-sm), 0 0 0 1px rgba(15,20,25,0.04); transform: translate(0,0); pointer-events: none; z-index: 0; transition: transform var(--motion-base, 200ms) var(--ease-default), width var(--motion-base, 200ms) var(--ease-default), height var(--motion-base, 200ms) var(--ease-default); }
.np-seg:not([data-ready]) .seg-thumb, .nc-tabs:not([data-ready]) .seg-thumb { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .seg-thumb { transition: none; } }
.np-seg-btn {
  position: relative; z-index: 1;
  font: 500 13px 'Inter', sans-serif; color: var(--fg2);
  padding: 6px 15px; border-radius: 8px;
  border: 0; background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color var(--motion-fast) var(--ease-default);
}
.np-seg-btn.is-on { color: var(--fg1); font-weight: 600; }
.np-seg-badge {
  font: 600 11px 'Inter', sans-serif; background: var(--color-accent-green, #1FAE5F);
  color: #fff; min-width: 16px; height: 16px;
  padding: 0 5px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums;
}

.np-list {
  /* S282 · alto reservado estable: el panel abre directo a su tamaño final
     (cargando/vacío/lleno comparten alto) → sin el salto en dos tiempos. */
  min-height: min(408px, 64vh); max-height: min(408px, 64vh); overflow-y: auto;
  overscroll-behavior: contain;
}
/* Centra el estado de carga/vacío dentro del alto reservado. */
.np-list:has(.bo-loading), .np-list:has(.np-empty) { display: flex; align-items: center; justify-content: center; }
.np-list::-webkit-scrollbar { width: 10px; }
.np-list::-webkit-scrollbar-thumb {
  background: var(--color-border-default, #D1D5DB);
  border: 3px solid var(--color-surface);
  border-radius: 999px;
}
.np-list::-webkit-scrollbar-thumb:hover { background: var(--fg3); }

.np-group {
  font: 500 11px 'Inter', sans-serif;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--fg3);
  padding: 12px 20px 8px;
  background: var(--color-surface);
  position: sticky; top: 0; z-index: 1;
}

.np-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 16px 14px; position: relative;
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-default);
}
.np-item + .np-item { border-top: 1px solid var(--color-border-subtle, #E5E7EB); }
.np-list > .np-item:last-of-type { border-bottom: 0; }
.np-item:hover { background: var(--color-bg-subtle, #F2F4F6); }

/* S74-fix · Iconos de notificación estilo "Minimal":
   - sin caja (fondo transparente)
   - color 100% semántico (var(--ic))
   - trazo controlable con --icsw (Minimal = 2)
   - alineación: margin-top negativo para centrar óptico con la primera línea del título.
   Color y tinte se exponen por tipo como --ic/--tint y la regla visual se resuelve
   a partir de esas variables, así el color queda desacoplado del estilo. */
.np-ic {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  color: var(--ic, #6E7378);
  margin-top: 1px;
  --icsw: 1.7;
}
.np-ic svg { width: 20px; height: 20px; stroke-width: var(--icsw, 1.7); }
.np-ic.is-warning { --ic: var(--color-warning, #E89B2A); --tint: var(--color-warning-tint, #FAE5CC); }
.np-ic.is-success { --ic: var(--color-success, #1FAE5F); --tint: var(--color-success-tint, #D8EEDF); }
.np-ic.is-error   { --ic: var(--color-error,   #B83227); --tint: var(--color-error-tint,   #F4DCD7); }
.np-ic.is-notice  { --ic: #6E7378;                        --tint: #E8E9EA; }
.np-ic.is-assign,
.np-ic.is-info    { --ic: var(--color-info,    #3A6FB5); --tint: var(--color-info-tint,    #DCE6F1); }
.np-ic.is-mencion { --ic: var(--color-info,    #3A6FB5); --tint: var(--color-info-tint,    #DCE6F1); }

/* Modos alternativos (opt-in vía data-icns en .np / .nc-list) — Minimal queda default */
[data-icns="tile"]         .np-ic { background: var(--tint); --icsw: 1.5; }
[data-icns="circle"]       .np-ic { background: var(--tint); border-radius: 999px; --icsw: 1.5; }
[data-icns="outline"]      .np-ic { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ic); --icsw: 1.5; }
[data-icns="solid"]        .np-ic { background: var(--ic); color: #fff; --icsw: 1.5; }
[data-icns="circle-solid"] .np-ic { background: var(--ic); color: #fff; border-radius: 999px; --icsw: 1.5; }

.np-body { flex: 1; min-width: 0; padding-right: 18px; }
.np-item-title {
  font: 600 14px/1.3 'Inter', sans-serif; color: var(--fg1);
}
.np-item-title .np-sep { font-weight: 500; color: var(--fg2); }
.np-text {
  font: 400 13px/1.5 'Inter', sans-serif; color: var(--fg2);
  margin: 2px 0 6px; text-wrap: pretty;
}
.np-time {
  font: 400 12px 'Inter', sans-serif; color: var(--fg3);
  font-variant-numeric: tabular-nums; margin-top: 7px;
}
.np-acts {
  display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap;
}
.np-btn {
  font: 500 13px 'Inter', sans-serif;
  padding: 6px 12px; border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer; transition: background var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast);
}
.np-btn-outline {
  background: var(--color-surface); color: var(--fg1);
  border-color: var(--color-border-default, #D1D5DB);
}
.np-btn-outline:hover { background: var(--color-bg-subtle); }
.np-btn-text {
  background: transparent; color: var(--fg2);
  padding: 6px 4px;
}
.np-btn-text:hover { color: var(--fg1); }

.np-dot {
  position: absolute; right: 14px; top: 14px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-accent-green, #1FAE5F);
}
.np-item.is-read .np-ic { opacity: 1; }
.np-item.is-read .np-item-title { font-weight: 500; }

/* S74-fix2 · hover ocupa todo el footer hasta los bordes inferiores del panel */
.np-foot {
  border-top: 1px solid var(--color-border-subtle, #E5E7EB);
  padding: 0;
}
.np-foot button {
  width: 100%; padding: 14px 20px;
  background: transparent; border: 0;
  font: 500 13px 'Inter', sans-serif; color: var(--fg2);
  border-radius: 0 0 16px 16px;   /* coincide con border-radius del panel .np */
  cursor: pointer;
  transition: background var(--motion-fast), color var(--motion-fast);
}
.np-foot button:hover { background: var(--color-bg-subtle); color: var(--fg1); }

.np-empty {
  padding: 48px 24px; text-align: center;
}
.np-empty .check {
  width: 44px; height: 44px; border-radius: 50%;
  background: #E6F7EE;
  color: #16904E;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
}
.np-empty .check svg { width: 22px; height: 22px; }
.np-empty h4 {
  margin: 0 0 4px;
  font: 600 14px 'Inter', sans-serif; color: var(--fg1);
}
.np-empty p { margin: 0; font: 400 13px 'Inter', sans-serif; color: var(--fg3); }

/* ─────────────────────────────────────────────────────────────────
   S75 · Centro de notificaciones · master-detail (handoff v2)
   Lista 380px izquierda + panel detalle a la derecha. Iconos Minimal.
   ───────────────────────────────────────────────────────────────── */
.nc-split {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; height: 620px;
  overflow: hidden;
  display: flex;
  margin-top: 16px;
}
/* Lista */
.nc-split-list {
  width: 380px; flex-shrink: 0;
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
}
.nc-split-tabs {
  padding: 14px;
  border-bottom: 1px solid var(--border);
}
.nc-tabs {
  position: relative;
  display: flex; gap: 4px;
  background: var(--surface-2, #F2F4F6);
  border-radius: 10px; padding: 4px;
}
.nc-tab {
  position: relative; z-index: 1;
  flex: 1; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 10px; border-radius: 8px;
  background: transparent; border: 0;
  font: 500 13px 'Inter', sans-serif; color: var(--fg2);
  cursor: pointer;
  transition: color var(--motion-fast);
}
.nc-tab:hover { color: var(--fg1); }
.nc-tab.is-on {
  color: var(--fg1);
  font-weight: 600;
}
.nc-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 6px;
  border-radius: 9px;
  background: var(--color-accent-green, #1FAE5F);
  color: #fff;
  font: 600 10px 'Inter', sans-serif;
  font-variant-numeric: tabular-nums;
}
.nc-split-scroll { flex: 1; overflow-y: auto; }
.nc-group-sm {
  padding: 10px 16px;
  font: 500 11px 'Inter', sans-serif; color: var(--fg3);
  letter-spacing: .12em; text-transform: uppercase;
  background: var(--surface-2, #F8F9FA);
  border-bottom: 1px solid var(--border);
}
.nc-li {
  width: 100%; text-align: left;
  display: flex; align-items: flex-start; gap: 13px;
  padding: 13px 16px;
  border: 0; border-bottom: 1px solid var(--border);
  border-left: 2px solid transparent;
  background: var(--surface);
  cursor: pointer;
  transition: background var(--motion-fast);
  position: relative;
  font-family: inherit;
}
.nc-li:hover { background: var(--surface-2, #F2F4F6); }
.nc-li.is-sel { background: var(--surface-2, #F2F4F6); }
.nc-li .np-ic { margin-top: 1px; --icsw: 1.7; }
.nc-li .np-ic svg { width: 21px; height: 21px; stroke-width: var(--icsw, 1.7); }
.nc-li.is-read .np-ic { opacity: 1; }
.nc-li-body { flex: 1; min-width: 0; }
.nc-li-top {
  display: flex; justify-content: space-between; gap: 8px; align-items: baseline;
  padding-right: 16px; /* S187 · espacio para que el dot de no-leída no se empalme con la hora */
}
.nc-li-title {
  font: 600 14px 'Inter', sans-serif; color: var(--fg1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1; min-width: 0;
}
.nc-li.is-read .nc-li-title { font-weight: 500; }
.nc-li-time {
  font: 500 11px 'Inter', sans-serif; color: var(--fg3);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.nc-li-prev {
  margin: 4px 0 0;
  font: 400 12.5px/1.45 'Inter', sans-serif; color: var(--fg3);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.nc-li-dot {
  position: absolute; top: 18px; right: 14px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-accent-green, #1FAE5F);
}

/* Detalle */
.nc-detail {
  flex: 1; overflow-y: auto;
  padding: 32px 40px;
}
.nc-detail-empty {
  height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--fg3); font: 400 14px 'Inter';
}
.nc-detail-head {
  display: flex; align-items: center; gap: 16px;
}
.nc-detail-head .np-ic { margin-top: 0; --icsw: 1.7; }
.nc-detail-head .np-ic svg { width: 30px; height: 30px; stroke-width: var(--icsw, 1.7); }
.nc-detail-title {
  margin: 0;
  font: 600 22px/1.25 'Inter', sans-serif; color: var(--fg1);
  letter-spacing: -0.01em;
}
.nc-detail-col { padding-left: 0; margin-top: 18px; }
.nc-detail-body {
  margin: 16px 0 24px;
  font: 400 15px/1.6 'Inter', sans-serif; color: var(--fg2);
  max-width: 60ch;
}
.nc-detail-meta {
  border-top: 1px solid var(--border);
  padding-top: 16px;
}
.nc-meta-row {
  display: flex; gap: 14px; align-items: baseline;
  padding: 7px 0;
}
.nc-meta-k {
  width: 132px; flex-shrink: 0;
  font: 500 13px 'Inter', sans-serif; color: var(--fg3);
}
.nc-meta-v {
  font: 500 13px 'Inter', sans-serif; color: var(--fg1);
  font-variant-numeric: tabular-nums;
}
.nc-detail-acts {
  display: flex; gap: 10px; align-items: center;
  margin-top: 28px;
}
.nc-detail-resolve { margin-left: auto; }

/* Botones del centro (outline / texto / ghost para header) */
.nc-btn {
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: 10px;
  font: 500 13px 'Inter', sans-serif;
  padding: 9px 16px;
  cursor: pointer;
  transition: background var(--motion-fast), color var(--motion-fast), box-shadow var(--motion-fast);
}
.nc-btn-outline {
  background: var(--surface);
  color: var(--fg1);
  border: 1px solid var(--border);
}
.nc-btn-outline:hover { background: var(--surface-2); }
.nc-btn-text {
  background: transparent;
  color: var(--fg2);
  border: 0;
  padding: 9px 12px;
}
.nc-btn-text:hover { color: var(--fg1); background: var(--surface-2); }
.nc-btn-ghost {
  background: var(--surface);
  color: var(--fg1);
  border: 1px solid var(--border);
}
.nc-btn-ghost:hover { background: var(--surface-2); }
.nc-btn svg { color: var(--fg3); }
.nc-detail-acts .nc-btn-outline { background: var(--color-action-ink); color: #fff; border-color: var(--color-action-ink); }
.nc-detail-acts .nc-btn-outline:hover { filter: brightness(1.08); }
.nc-detail-acts .nc-btn-outline svg { color: #fff; }

/* Empty state */
.nc-empty {
  padding: 64px 24px; text-align: center;
}
.nc-empty .check {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--color-accent-green-bg, #E6F7EE);
  color: var(--color-accent-green-deep, #16904E);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.nc-empty .check svg { width: 28px; height: 28px; }
.nc-empty h4 { margin: 0 0 6px; font: 600 16px 'Inter', sans-serif; color: var(--fg1); }
.nc-empty p { margin: 0; font: 400 14px 'Inter', sans-serif; color: var(--fg3); }

/* S15-fix · Bell dropdown · mismo efecto Emerger que el chatbot (S57) */
body.bell-open #ddBell    { animation: bo-bell-emerge var(--motion-fast) var(--ease-default) both; transform-origin: top right; }
body.bell-closing #ddBell { animation: bo-bell-closeout var(--motion-fast) var(--ease-exit) both; transform-origin: top right; }
/* S74 · El panel rediseñado también emerge */
body.bell-open #notifPanel    { animation: bo-bell-emerge var(--motion-fast) var(--ease-default) both; transform-origin: top right; }
body.bell-closing #notifPanel { animation: bo-bell-closeout var(--motion-fast) var(--ease-exit) both; transform-origin: top right; }
@keyframes bo-bell-emerge {
  from { opacity: 0; transform: scale(0.92) translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@keyframes bo-bell-closeout {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: scale(0.92) translateY(-6px); }
}

/* S15-fix · Avatar dropdown · mismo efecto Emerger */
body.avatar-open #ddAvatar    { animation: bo-bell-emerge var(--motion-fast) var(--ease-default) both; transform-origin: top right; }
body.avatar-closing #ddAvatar { animation: bo-bell-closeout var(--motion-fast) var(--ease-exit) both; transform-origin: top right; }

/* S125 · Configuración dropdown · mismo efecto Emerger (homologado a campana/avatar) */
body.cfg-open #ddConfig    { animation: bo-bell-emerge var(--motion-fast) var(--ease-default) both; transform-origin: top right; }
body.cfg-closing #ddConfig { animation: bo-bell-closeout var(--motion-fast) var(--ease-exit) both; transform-origin: top right; }

@media (prefers-reduced-motion: reduce) {
  body.bell-open #ddBell,
  body.bell-closing #ddBell,
  body.avatar-open #ddAvatar,
  body.avatar-closing #ddAvatar,
  body.cfg-open #ddConfig,
  body.cfg-closing #ddConfig { animation-duration: 0.001s; }
}

/* HEADER · fondo gris claro · línea divisoria abajo (pedido específico) */
.bo-chat-head {
  flex-shrink: 0;
  padding: 16px 18px;
  background: var(--gradient-ai-strong-bold);   /* S278 · homologación handoff: gradiente de marca */
  border-bottom: 1px solid #E5E7EB;
  display: flex; align-items: center; gap: 12px;
  position: relative;
}
.bo-chat-head > * { position: relative; z-index: 1; }
.bo-chat-head::after {   /* velo para contraste AA del texto blanco sobre todo el gradiente */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.14));
}
.bo-chat-head-avatar {
  /* S278 · tile translúcido + iso blanco (handoff) */
  width: 34px; height: 34px; border-radius: 10px;
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.35);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.bo-chat-head-avatar svg { width: 19px; height: 19px; }
.bo-chat-head-avatar img { width: 34px; height: 34px; display: block; }
.bo-chat-head-text {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.bo-chat-head-title { font: 600 15px/1.2 'Inter'; color: #fff; }
.bo-chat-head-sub { font: 400 11.5px/1.3 'Inter'; color: rgba(255,255,255,0.85); }
.bo-chat-head-close {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: pointer;
  color: #8B92A1; border-radius: 6px;
  transition: background var(--motion-fast) var(--ease-default), color var(--motion-fast) var(--ease-default);
}
.bo-chat-head-close:hover { background: #E5E7EB; color: #0F1419; }
.bo-chat-head-close svg { width: 18px; height: 18px; }
.bo-chat-head-close:focus-visible { outline: none; box-shadow: none; }
/* S159 · maximizar chatbot + ventana grande + backdrop */
.bo-chat-head-btn { margin-left: auto; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.28); cursor: pointer; color: #fff; border-radius: 8px; transition: background var(--motion-fast), color var(--motion-fast); }
.bo-chat-head-btn:hover { background: rgba(255,255,255,0.28); color: #fff; }
.bo-chat-head-btn svg { width: 17px; height: 17px; }
.bo-chat-head-btn .ic-min { display: none; }
/* S291 · backdrop y modo maximizado del chat retirados (el asistente ahora es .dock split). */
/* S160 · centro de notificaciones como overlay sobre el shell (homologado al chat maximizado) */
.bo-notif-backdrop { position: fixed; inset: 0; background: rgba(15,20,25,0.32); z-index: 5000; opacity: 0; pointer-events: none; transition: opacity var(--motion-base) ease; }
body.notif-open .bo-notif-backdrop { opacity: 1; pointer-events: auto; }
body:not(.notif-open) .bo-view[data-view="notificaciones"] { display: none !important; }
body.notif-open .bo-view[data-view="notificaciones"] { display: flex !important; flex-direction: column; position: fixed; inset: 0; margin: auto; width: min(1280px, 94vw); height: min(860px, 90vh); max-width: 94vw; max-height: 90vh; z-index: 5001; background: var(--color-bg, #FAFBFC); border: 1px solid var(--color-border-subtle, #E5E7EB); border-radius: 16px; box-shadow: 0 24px 64px -12px rgba(15,20,25,.18); overflow: hidden; padding: 18px 22px; animation: bo-chat-emerge 0.40s var(--ease-spring) both; }
body.notif-open .bo-view[data-view="notificaciones"] .nc-split { flex: 1; min-height: 0; height: auto; }
/* S168 · centro notif: barra de acciones en fila · X fantasma alineada a la derecha (handoff) */
.bo-view[data-view="notificaciones"] .page-head { position: relative; }
.bo-view[data-view="notificaciones"] .page-actions { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.bo-view[data-view="notificaciones"] #ncClose { position: absolute; top: 0; right: 0; background: transparent; border: 0; box-shadow: none; color: var(--fg3); padding: 8px; border-radius: 8px; }
.bo-view[data-view="notificaciones"] #ncClose:hover { background: var(--surface-2, #F2F4F6); color: var(--fg1); }
.bo-view[data-view="notificaciones"] #ncClose svg { width: 18px; height: 18px; }

/* BANNER de contexto · azul info */
.bo-chat-banner {
  /* S54-fix3 · flex-shrink:0 para que el banner no se comprima ni el body
     se solape encima cuando el contenido inicial está justito al borde. */
  flex-shrink: 0;
  margin: 14px 18px 0;
  padding: 12px 14px;
  background: #DCE6F1;
  border: 1px solid rgba(58,111,181,.22);
  border-radius: 10px;
  display: flex; gap: 10px; align-items: flex-start;
  color: #265489;
  font: 400 12.5px/1.5 'Inter';
}
.bo-chat-banner svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }
.bo-chat-banner[hidden] { display: none !important; }

/* BODY de mensajes */
.bo-chat-msgs {
  flex: 1; overflow-y: auto;
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 14px;
  /* S54-fix · sin barra de scroll nativa · el área del panel ya la define */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.bo-chat-msgs::-webkit-scrollbar { display: none; width: 0; height: 0; }
.bo-chat-msg { display: flex; }
.bo-chat-msg.user { justify-content: flex-end; }
.bo-chat-msg.assistant { justify-content: flex-start; }
.bo-chat-bubble {
  max-width: 85%;
  padding: 13px 15px;
  border-radius: 10px;
  font: 400 14px/1.55 'Inter';
  color: #0F1419;
  white-space: pre-wrap; word-break: break-word;
}

/* Eyebrow + 3 prompts sugeridos · solo visibles en estado inicial */
.bo-chat-eyebrow {
  font: 500 11px 'Inter';
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #8B92A1;
  margin: 4px 0 8px;
}
.bo-chat-prompts {
  display: flex; flex-direction: column; gap: 8px;
}
.bo-chat-prompts[hidden] { display: none !important; }
.bo-chat-eyebrow[hidden] { display: none !important; }
.bo-chat-prompt {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: background var(--motion-fast) var(--ease-default), border-color var(--motion-fast) var(--ease-default);
}
.bo-chat-prompt:hover {
  background: #F2F4F6;
  border-color: #D1D5DB;
}
.bo-chat-prompt:focus-visible { outline: none; box-shadow: none; }
.bo-chat-prompt-chip {
  width: 30px; height: 30px;
  background: #F2F4F6;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #4B5563;
  flex-shrink: 0;
  transition: color var(--motion-fast) var(--ease-default);
}
.bo-chat-prompt:hover .bo-chat-prompt-chip { color: #0F1419; }
.bo-chat-prompt-chip svg { width: 16px; height: 16px; }
.bo-chat-prompt-text {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.bo-chat-prompt-title { font: 500 13px/1.3 'Inter'; color: #0F1419; }
.bo-chat-prompt-sub { font: 400 11.5px/1.3 'Inter'; color: #8B92A1; }
/* S46-fix · markdown rendering en mensajes del asistente */
.bo-chat-bubble strong { font-weight: 600; color: inherit; }
.bo-chat-bubble em { font-style: italic; }
.bo-chat-bubble code { background: rgba(15,20,25,0.08); padding: 1px 5px; border-radius: 4px; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 12px; }
.bo-chat-bubble pre { background: rgba(15,20,25,0.06); padding: 8px 10px; border-radius: 6px; overflow-x: auto; margin: 6px 0; font-size: 12px; }
.bo-chat-bubble pre code { background: transparent; padding: 0; font-size: 12px; }
.bo-chat-bubble h3, .bo-chat-bubble h4 { margin: 8px 0 4px; font-weight: 600; font-size: 13px; color: inherit; }
.bo-chat-bubble ul, .bo-chat-bubble ol { margin: 4px 0 4px 18px; padding: 0; }
.bo-chat-bubble li { margin: 2px 0; }
.bo-chat-bubble hr { border: 0; border-top: 1px solid var(--border); margin: 10px 0; }
.bo-chat-bubble a { color: var(--color-accent-green-deep, #1FAE5F); text-decoration: underline; }
.bo-chat-bubble table { border-collapse: collapse; margin: 6px 0; font-size: 12px; width: 100%; }
.bo-chat-bubble th, .bo-chat-bubble td { border: 1px solid var(--border); padding: 4px 8px; text-align: left; }
.bo-chat-bubble th { background: rgba(15,20,25,0.04); font-weight: 600; }
.bo-chat-bubble p { margin: 6px 0; }
.bo-chat-bubble p:first-child { margin-top: 0; }
.bo-chat-bubble p:last-child { margin-bottom: 0; }
/* Burbujas: usuario oscuro · asistente gris claro */
.bo-chat-msg.user .bo-chat-bubble {
  background: #0F1419;
  color: #FFFFFF;
  border-radius: 14px;
  border-bottom-right-radius: 4px;
  padding: 11px 14px;
  font-size: 14px;
}
.bo-chat-msg.assistant .bo-chat-bubble {
  background: #F2F4F6;
  color: #0F1419;
}
.bo-chat-msg.thinking .bo-chat-bubble { opacity: 0.6; font-style: italic; }

/* Indicador "escribiendo" · 3 puntitos */
.bo-chat-typing {
  display: inline-flex; gap: 4px; align-items: center;
  padding: 13px 15px;
}
.bo-chat-typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: #8B92A1;
  animation: bo-chat-dot 1.4s infinite ease-in-out;
}
.bo-chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.bo-chat-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes bo-chat-dot {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .bo-chat-typing span { animation: none; opacity: 0.7; }
}

/* FOOTER · sin border-top · composer en píldora */
.bo-chat-foot {
  flex-shrink: 0;
  padding: 14px 18px 16px;
  background: transparent;
  border-top: 0;
}
.bo-chat-composer {
  display: flex; align-items: center;
  background: #FFFFFF;
  border: 1px solid #D1D5DB;
  border-radius: 999px;
  padding: 7px 7px 7px 18px;
  box-shadow: 0 1px 2px rgba(15,20,25,.04);
  transition: border-color var(--motion-fast) var(--ease-default), box-shadow var(--motion-fast) var(--ease-default);
}
.bo-chat-composer:focus-within {
  /* S53 · Sin glow verde · borde ink sutil para marcar foco sin ruido */
  box-shadow: none;
}
.bo-chat-foot textarea {
  flex: 1; resize: none;
  background: transparent;
  border: 0; outline: 0;
  padding: 8px 0;
  font: 400 14px/1.45 'Inter';
  color: #0F1419;
  max-height: 110px;
  overflow-y: auto;
  /* S53d · ocultar scrollbar nativo · el wrapper composer ya marca el área */
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* IE / antiguo Edge */
}
.bo-chat-foot textarea::-webkit-scrollbar { display: none; width: 0; height: 0; } /* WebKit */
/* S53d · cancelar el focus-ring global SOLO para el textarea del composer.
   El borde + ring ya viven en .bo-chat-composer:focus-within. Sin esto se
   pintaba un segundo ring dentro, formando el "cuadrado gris" reportado. */
.bo-chat-foot textarea:focus,
.bo-chat-foot textarea:focus-visible {
  outline: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
}
.bo-chat-foot textarea::placeholder { color: #8B92A1; }
.bo-chat-send {
  width: 38px; height: 38px;
  background: var(--gradient-ai-strong-bold);   /* S278 · identidad del asistente */
  border: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: #FFFFFF;
  flex-shrink: 0;
  transition: background var(--motion-fast) var(--ease-default), transform var(--motion-fast) var(--ease-default);
}
.bo-chat-send:hover { background: var(--gradient-ai-strong-bold); transform: translateY(-1px); filter: brightness(1.06); }
.bo-chat-send:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.bo-chat-send:focus-visible { outline: none; box-shadow: none; }
.bo-chat-send svg { width: 18px; height: 18px; }

/* Disparador del asistente en la navbar (#chatFabTopbar) */
#chatFabTopbar { position: relative; }
#chatFabTopbar.active { background: var(--color-bg-subtle); color: var(--fg1); }
#chatFabTopbar .navdot { position: absolute; top: 8px; right: 9px; width: 6px; height: 6px; border-radius: 999px; background: var(--color-accent-green); border: 1.5px solid var(--color-surface); box-sizing: content-box; opacity: 1; transition: opacity var(--motion-fast); }
#chatFabTopbar.active .navdot { opacity: 0; }
#chatFabTopbar .navdot[hidden] { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════
   S291 · Asistente · Barra acoplada (dock / split) — handoff chatbot
   El panel #chatPanel se convierte en .dock: fijo bajo el topbar, a la
   derecha; .main se encoge con margin-right. Tokens del DS Exante.
   ═══════════════════════════════════════════════════════════════════ */
.dock {
  position: fixed;
  top: var(--h-topbar-backoffice, 64px);
  right: -460px;
  bottom: 0;
  width: 420px; max-width: 92vw;
  z-index: 4000;
  overflow: hidden;
  background: var(--color-surface);
  border-left: 1px solid var(--color-border-subtle);
  box-shadow: -16px 0 40px -20px rgba(15,20,25,.18);
  transition: right var(--motion-slow) var(--ease-default);
}
.dock[hidden] { display: none !important; }
.dock.open { right: 0; }
.dock-inner { width: 100%; height: 100%; display: flex; flex-direction: column; min-height: 0; }

/* .main se encoge cuando el dock está abierto (solo desktop) */
/* S290 · el Centro de notificaciones (barra acoplada) reusa esta reja para su reflow
   aplicando max-width inline !important vía JS; añadimos max-width a la transición. */
.app > .main { transition: margin-right var(--motion-slow) var(--ease-default); }
/* Reflow unificado: asistente y Centro de notificaciones empujan el contenido con margin-right
   vía clase del body. Mismo mecanismo y valor → exclusión mutua sin doble empuje y switch suave. */
body.dock-open .app > .main,
body.ncx2-open .app > .main,
body.settings-open .app > .main { margin-right: 420px; }
/* Operación (vista pipeline) monta su PROPIO .app > .main dentro de .op-scope, anidado
   dentro del .main externo ya empujado. El reflow de arriba golpea AMBOS → doble empuje
   (1428→1008) y deja una franja blanca de 420px a la derecha. Cancelamos el empuje SOLO en
   el main interno de op-scope: el externo empuja, el interno llena. !important por la
   anomalía de cascada conocida del proyecto. */
body.dock-open .op-scope .app > .main,
body.ncx2-open .op-scope .app > .main,
body.settings-open .op-scope .app > .main { margin-right: 0 !important; }

/* Header del dock */
.dk-head { display: flex; align-items: center; gap: 11px; padding: 14px 16px; background: var(--color-bg-subtle); border-bottom: 1px solid var(--color-border-default); flex-shrink: 0; }
.dk-head .ch-logo { width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(15,20,25,.07); }
.dk-head .hi { flex: 1; min-width: 0; }
.dk-head .ch-nm { font: 600 15px var(--font-sans); letter-spacing: -0.01em; color: var(--fg1); }
.dk-head .hbtns { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.dk-head .hbtn { width: 34px; height: 34px; border: none; background: transparent; border-radius: var(--radius-md); color: var(--fg2); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--motion-fast), color var(--motion-fast); }
.dk-head .hbtn:hover { background: rgba(15,20,25,.06); color: var(--fg1); }
.dk-head .hbtn svg { width: 18px; height: 18px; }

/* Indicador de contexto */
.dk-ctx { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--color-bg-subtle); border-bottom: 1px solid var(--color-border-subtle); flex-shrink: 0; }
.dk-ctx[hidden] { display: none !important; }
.dk-ctx .cav { width: 28px; height: 28px; border-radius: 999px; background: linear-gradient(135deg,#5A6CE5,#7A5BC2); color: #fff; display: flex; align-items: center; justify-content: center; font: 600 10px var(--font-sans); flex-shrink: 0; }
.dk-ctx .clbl { font: 600 9px var(--font-sans); text-transform: uppercase; letter-spacing: .1em; color: var(--fg2); margin-bottom: 2px; }
.dk-ctx .cn { font: 600 13px/1.2 var(--font-sans); color: var(--fg1); }
.dk-ctx .cn .cid { color: var(--fg3); font-weight: 500; }
.dk-ctx .cx { margin-left: auto; width: 26px; height: 26px; border-radius: 999px; border: none; background: none; color: var(--fg3); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: background var(--motion-fast), color var(--motion-fast); }
.dk-ctx .cx:hover { background: rgba(15,20,25,.06); color: var(--fg1); }
.dk-ctx .cx svg { width: 14px; height: 14px; }

/* Banner sin contexto (reusa el comportamiento del antiguo #chatBanner) */
.dk-banner { display: flex; gap: 9px; align-items: flex-start; padding: 11px 16px; background: var(--color-info-tint); color: var(--color-info-deep); font: 400 12.5px/1.45 var(--font-sans); border-bottom: 1px solid var(--color-border-subtle); flex-shrink: 0; }
.dk-banner[hidden] { display: none !important; }
.dk-banner svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }

/* Scroll de mensajes */
.dk-scroll { flex: 1; overflow-y: auto; min-height: 0; padding: 20px 16px; display: flex; flex-direction: column; gap: 18px; }
.dk-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }
.dk-scroll { scrollbar-width: none; -ms-overflow-style: none; }
.daydiv { display: flex; align-items: center; gap: 12px; color: var(--fg4); font: 500 11px var(--font-sans); text-transform: uppercase; letter-spacing: .08em; }
.daydiv::before, .daydiv::after { content: ''; height: 1px; background: var(--color-border-subtle); flex: 1; }

/* Estado vacío (bienvenida + chips) */
.dk-empty { display: flex; flex-direction: column; gap: 14px; }
.dk-empty[hidden] { display: none !important; }
.dk-empty .dk-hello { background: var(--color-bg-subtle); border-radius: var(--radius-md); padding: 15px 16px; font: 400 14.5px/1.5 var(--font-sans); color: var(--fg1); }
.dk-empty .dk-eyebrow { font: 600 11px var(--font-sans); text-transform: uppercase; letter-spacing: .1em; color: var(--fg3); margin: 2px 0 -4px; }
.dk-empty .dk-sugg { display: flex; flex-direction: column; gap: 10px; }
.dk-sug { display: flex; align-items: center; gap: 13px; padding: 13px 14px; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); background: var(--color-surface); cursor: pointer; text-align: left; transition: border-color var(--motion-fast), box-shadow var(--motion-fast); font-family: var(--font-sans); }
.dk-sug:hover { border-color: var(--color-border-default); box-shadow: var(--shadow-sm); }
.dk-sug .si { width: 38px; height: 38px; border-radius: var(--radius-md); background: var(--color-bg-subtle); display: flex; align-items: center; justify-content: center; color: var(--fg2); flex-shrink: 0; }
.dk-sug .si svg { width: 19px; height: 19px; }
.dk-sug .s1 { font: 600 14.5px var(--font-sans); color: var(--fg1); }
.dk-sug .s2 { font: 400 13px var(--font-sans); color: var(--fg3); margin-top: 2px; }

/* Mensajes: asistente (avatar + texto) / usuario (burbuja) */
.msg-a { display: flex; gap: 11px; }
.msg-a .av { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(15,20,25,.07); }
.msg-a .ab { min-width: 0; flex: 1; }
.msg-a .who { font: 600 12.5px var(--font-sans); color: var(--fg2); margin-bottom: 6px; }
.msg-a .ab p { margin: 0 0 11px; font: 400 14.5px/1.6 var(--font-sans); color: var(--fg1); }
.msg-a .ab p:last-child { margin-bottom: 0; }
.msg-a .ab strong { font-weight: 600; }
.msg-a .ab em { font-style: italic; }
.msg-a .ab code { background: rgba(15,20,25,.08); padding: 1px 5px; border-radius: 4px; font-family: var(--font-mono); font-size: 12.5px; }
.msg-a .ab pre { background: rgba(15,20,25,.06); padding: 8px 10px; border-radius: 6px; overflow-x: auto; margin: 6px 0; font-size: 12.5px; }
.msg-a .ab pre code { background: transparent; padding: 0; }
.msg-a .ab h3, .msg-a .ab h4 { margin: 8px 0 4px; font-weight: 600; font-size: 13.5px; color: var(--fg1); }
.msg-a .ab ul, .msg-a .ab ol { margin: 4px 0 8px 18px; padding: 0; }
.msg-a .ab li { margin: 2px 0; font-size: 14.5px; line-height: 1.55; }
.msg-a .ab hr { border: 0; border-top: 1px solid var(--color-border-subtle); margin: 10px 0; }
.msg-a .ab a { color: var(--color-accent-green-deep); text-decoration: underline; }
/* Tablas markdown · estilo handoff: contenedor redondeado, header gris, separadores horizontales (sin rejilla) */
.msg-a .ab table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 8px 0; font-size: 13px; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md, 10px); overflow: hidden; }
.msg-a .ab th, .msg-a .ab td { padding: 9px 13px; text-align: left; border-bottom: 1px solid var(--color-border-subtle); vertical-align: top; }
.msg-a .ab th { background: var(--color-bg-subtle); font-weight: 600; color: var(--fg1); font-size: 12.5px; }
.msg-a .ab tr:last-child td { border-bottom: none; }
.msg-u { display: flex; justify-content: flex-end; gap: 11px; }
.msg-u .uav { width: 30px; height: 30px; border-radius: 999px; flex-shrink: 0; background: linear-gradient(135deg,#5A6CE5,#7A5BC2); color: #fff; display: flex; align-items: center; justify-content: center; font: 600 11px var(--font-sans); order: 2; }
.msg-u .ub { max-width: 86%; background: var(--color-bg-subtle); color: var(--fg1); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); padding: 11px 15px; font: 400 14.5px/1.5 var(--font-sans); order: 1; white-space: pre-wrap; word-break: break-word; }

/* Indicador "escribiendo" */
.typing { display: inline-flex; align-items: center; gap: 5px; padding: 4px 2px; }
.typing i { width: 7px; height: 7px; border-radius: 999px; background: var(--fg4); animation: dk-blink 1.2s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: .18s; }
.typing i:nth-child(3) { animation-delay: .36s; }
@keyframes dk-blink { 0%,60%,100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }

/* Footer / composer */
.dk-foot { border-top: 1px solid var(--color-border-subtle); padding: 12px 16px 14px; flex-shrink: 0; background: var(--color-bg-subtle); }
.chips { display: flex; gap: 7px; margin-bottom: 10px; flex-wrap: wrap; }
.qchip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-pill); font: 500 12.5px var(--font-sans); color: var(--fg2); background: var(--color-surface); cursor: pointer; transition: border-color var(--motion-fast), color var(--motion-fast); }
.qchip:hover { border-color: var(--color-border-default); color: var(--fg1); }
.qchip svg { width: 13px; height: 13px; color: var(--fg3); }
.composer { display: flex; align-items: flex-end; gap: 8px; border: 1px solid var(--color-border-default); border-radius: var(--radius-pill); padding: 7px; background: var(--color-surface); box-shadow: var(--shadow-sm); transition: border-color var(--motion-fast); }
.composer:focus-within { border-color: var(--color-border-strong); }
.composer .attach { width: 38px; height: 38px; border-radius: var(--radius-md); border: none; background: none; color: var(--fg3); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: background var(--motion-fast), color var(--motion-fast); }
.composer .attach:hover { background: var(--color-bg-subtle); color: var(--fg1); }
.composer .attach svg { width: 19px; height: 19px; }
.composer textarea { flex: 1; border: none; outline: none; background: none; resize: none; font: 400 14.5px/1.5 var(--font-sans); color: var(--fg1); padding: 9px 2px; max-height: 110px; scrollbar-width: none; -ms-overflow-style: none; }
.composer textarea::-webkit-scrollbar { display: none; width: 0; height: 0; }
.composer textarea:focus, .composer textarea:focus-visible { outline: 0 !important; box-shadow: none !important; }
.composer textarea::placeholder { color: var(--fg3); }
.composer .send { width: 40px; height: 40px; border-radius: 999px; flex-shrink: 0; background: var(--color-action-ink); color: #fff; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--motion-fast); }
.composer .send:hover { background: var(--color-action-ink-hover); }
.composer .send:disabled { opacity: .4; cursor: not-allowed; }
.composer .send svg { width: 18px; height: 18px; }
.dk-disc { text-align: center; font: 400 11.5px var(--font-sans); color: var(--fg4); padding: 9px 0 0; }

/* Slide-over Conversaciones */
.dk-hist { position: absolute; inset: 0; background: var(--color-surface); display: flex; flex-direction: column; transform: translateX(100%); transition: transform var(--motion-base) var(--ease-default); z-index: 4; }
.dk-hist.show { transform: translateX(0); }
.dk-hist .dk-head .hi { display: flex; align-items: center; }
.dh-title { font: 600 15px var(--font-sans); letter-spacing: -0.01em; color: var(--fg1); flex: 1; }
.dh-top { padding: 12px 16px 13px; display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid var(--color-border-subtle); background: var(--color-bg-subtle); flex-shrink: 0; }
.dh-search { display: flex; align-items: center; gap: 8px; background: var(--color-surface); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-pill); padding: 8px 13px; }
.dh-search svg { width: 15px; height: 15px; color: var(--fg3); flex-shrink: 0; }
.dh-search input { flex: 1; border: 0; outline: 0; background: none; font: 400 13px var(--font-sans); color: var(--fg1); }
.dh-search input::placeholder { color: var(--fg3); }
.dh-list { flex: 1; overflow-y: auto; padding: 4px 8px 16px; }
.dh-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 10px; padding: 40px 24px; text-align: center; }
.dh-empty svg { width: 30px; height: 30px; color: var(--fg4); }
.dh-empty p { margin: 0; font: 400 13px var(--font-sans); color: var(--fg3); }
/* S293 · filas de conversaciones del historial (Hoy/Ayer/Esta semana/Anteriores) */
.dh-grp { font: 600 11px var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--fg4); padding: 14px 10px 6px; }
.dh-grp:first-child { padding-top: 6px; }
.dh-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius-md); cursor: pointer; transition: background var(--motion-fast); }
.dh-row:hover { background: var(--color-bg-subtle); }
.dh-row.active { background: var(--color-bg-subtle); box-shadow: inset 2px 0 0 var(--color-action-ink); }
.dh-ic { flex-shrink: 0; width: 30px; height: 30px; border-radius: var(--radius-md); background: var(--color-surface); border: 1px solid var(--color-border-subtle); display: flex; align-items: center; justify-content: center; color: var(--fg3); }
.dh-ic svg { width: 15px; height: 15px; }
.dh-info { flex: 1; min-width: 0; }
.dh-t { font: 500 13.5px var(--font-sans); color: var(--fg1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dh-m { font: 400 11.5px var(--font-sans); color: var(--fg3); margin-top: 2px; }
.dh-more { flex-shrink: 0; width: 28px; height: 28px; border-radius: var(--radius-md); border: none; background: none; color: var(--fg4); display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity var(--motion-fast), background var(--motion-fast), color var(--motion-fast); }
.dh-row:hover .dh-more, .dh-row.active .dh-more { opacity: 1; }
.dh-more:hover { background: var(--color-bg-subtle); color: var(--color-error); }
.dh-more svg { width: 15px; height: 15px; }

@media (max-width: 860px) {
  .dock { width: 100vw; max-width: 100vw; right: -100vw; }
  body.dock-open .app > .main { margin-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .dock, .app > .main, .dk-hist { transition: none; }
  .typing i { animation: none; opacity: .6; }
}

/* ════════════════════════════════════════════════════════════════════
   S292 · AJUSTES · Barra acoplada (.st) — handoff_ajustes_dock
   Gemela del dock del Asistente/Centro. TODO el CSS namespaceado bajo .st
   para no colisionar con las clases genéricas globales (.btn/.row/.chip/…).
   Reflow del contenido: body.settings-open .app > .main { margin-right:420px }
   (definido arriba, unificado con dock/ncx2).
   ════════════════════════════════════════════════════════════════════ */
.st { position: fixed; top: 64px; right: 0; bottom: 0; width: 420px; max-width: 92%; z-index: 4000; display: flex; flex-direction: column;
      background: var(--color-surface); border-left: 1px solid var(--color-border-subtle);
      box-shadow: -16px 0 40px -20px rgba(15,20,25,.18); transform: translateX(100%);
      transition: transform var(--motion-slow) var(--ease-default); }
/* S292-fix · !important obligatorio: la clase de estado no gana la cascada de backoffice
   (anomalía documentada, igual que el dock/ncx2 que usan inline !important). */
.st.open { transform: translateX(0) !important; }
.st[hidden] { display: none !important; }

/* HEADER (homologado dk-head) */
.st .st-head { display: flex; align-items: center; gap: 11px; padding: 13px 14px; background: var(--color-bg-subtle); border-bottom: 1px solid var(--color-border-default); flex-shrink: 0; }
.st .st-tile { width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--color-surface); border: 1px solid var(--color-border-subtle); color: var(--fg1); flex-shrink: 0; }
.st .st-tile svg { width: 17px; height: 17px; }
.st .st-hi { flex: 1; min-width: 0; }
.st .st-title { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; color: var(--fg1); }
.st .st-hactions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.st .hbtn { width: 34px; height: 34px; border: none; background: transparent; border-radius: var(--radius-md); color: var(--fg2); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--motion-fast), color var(--motion-fast); }
.st .hbtn:hover { background: rgba(15,20,25,.06); color: var(--fg1); }
.st .hbtn:focus-visible { outline: 2px solid var(--color-action-ink); outline-offset: 1px; }
.st .hbtn svg { width: 17px; height: 17px; }

/* SCREENS (push lista ⇄ detalle) */
.st .st-screens { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.st .screen { position: absolute; inset: 0; display: flex; flex-direction: column; min-height: 0; background: var(--color-surface); transition: transform var(--motion-base) var(--ease-default), opacity var(--motion-base) var(--ease-default); }
.st .screen.list { transform: translateX(0); }
.st.det .screen.list { transform: translateX(-22%) !important; opacity: 0; pointer-events: none; }
.st .screen.detail { transform: translateX(100%); opacity: 0; pointer-events: none; }
.st.det .screen.detail { transform: translateX(0) !important; opacity: 1; pointer-events: auto; }
.st .sc-scroll { flex: 1; min-height: 0; overflow-y: auto; }

/* IDENTIDAD */
.st .ident { display: flex; align-items: center; gap: 13px; padding: 20px 18px; border-bottom: 1px solid var(--color-border-subtle); }
.st .ident .av { width: 46px; height: 46px; border-radius: 999px; background: linear-gradient(135deg,#7A5BC2,#C42784); color: #fff; display: flex; align-items: center; justify-content: center; font: 600 16px var(--font-sans); flex-shrink: 0; }
.st .ident .who { min-width: 0; }
.st .ident .nm { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--fg1); }
.st .ident .em { font-size: 12.5px; color: var(--fg3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }

/* LISTA de secciones */
.st .sec-list { padding: 8px 8px 4px; }
.st .sec { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; border: none; background: transparent; cursor: pointer; padding: 11px 12px; border-radius: var(--radius-md); transition: background var(--motion-fast); }
.st .sec:hover { background: var(--color-bg-subtle); }
.st .sec:focus-visible { outline: 2px solid var(--color-action-ink); outline-offset: -2px; }
.st .sec .ic { width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--color-bg-subtle); color: var(--fg1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.st .sec .ic svg { width: 18px; height: 18px; }
.st .sec .tx { flex: 1; min-width: 0; }
.st .sec .t1 { display: block; font-size: 14px; font-weight: 600; letter-spacing: -0.005em; color: var(--fg1); }
.st .sec .t2 { display: block; font-size: 12.5px; color: var(--fg3); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st .sec .go { width: 16px; height: 16px; color: var(--fg4); flex-shrink: 0; }
.st .sec-sep { height: 1px; background: var(--color-border-subtle); margin: 8px 14px; }

/* DETALLE */
.st .det-head { display: flex; align-items: center; gap: 6px; padding: 11px 12px; border-bottom: 1px solid var(--color-border-subtle); flex-shrink: 0; }
.st .det-back { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 10px 0 8px; border: none; background: transparent; border-radius: var(--radius-md); color: var(--fg1); font: 600 14px var(--font-sans); cursor: pointer; transition: background var(--motion-fast); }
.st .det-back:hover { background: var(--color-bg-subtle); }
.st .det-back svg { width: 18px; height: 18px; color: var(--fg2); }
.st .det-body { padding: 18px; display: flex; flex-direction: column; gap: 18px; }
.st .grp { display: flex; flex-direction: column; gap: 10px; }
.st .grp-h { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--fg3); }
.st .field { display: flex; flex-direction: column; gap: 6px; }
.st .field label { font-size: 12.5px; font-weight: 500; color: var(--fg2); }
.st .field input, .st .field select { height: 40px; padding: 0 12px; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-surface); font: 400 14px var(--font-sans); color: var(--fg1); width: 100%; }
.st .field select { appearance: none; -webkit-appearance: none; padding-right: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.st .field input:focus, .st .field select:focus { outline: none; border-color: var(--color-border-focus); box-shadow: none; }
.st .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.st .row { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid var(--color-border-subtle); }
.st .row:first-child { border-top: none; }
.st .row .rt { flex: 1; min-width: 0; }
.st .row .r1 { font-size: 13.5px; font-weight: 600; color: var(--fg1); }
.st .row .r2 { font-size: 12px; color: var(--fg3); margin-top: 1px; }
.st .sw { width: 42px; height: 24px; border-radius: 999px; background: var(--color-border-default); position: relative; cursor: pointer; flex-shrink: 0; transition: background var(--motion-fast); border: none; }
.st .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(15,20,25,.3); transition: transform var(--motion-fast) var(--ease-default); }
.st .sw[aria-checked="true"] { background: var(--color-action-ink); }
.st .sw[aria-checked="true"]::after { transform: translateX(18px); }
.st .sw:focus-visible { outline: 2px solid var(--color-action-ink); outline-offset: 2px; }
.st .btn { height: 40px; padding: 0 16px; border-radius: var(--radius-md); border: 1px solid var(--color-border-default); background: var(--color-surface); color: var(--fg1); font: 600 13.5px var(--font-sans); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background var(--motion-fast), border-color var(--motion-fast); }
.st .btn:hover { background: var(--color-bg-subtle); }
.st .btn svg { width: 16px; height: 16px; color: var(--fg2); }
.st .btn.primary { background: var(--color-action-ink); border-color: var(--color-action-ink); color: #fff; }
.st .btn.primary:hover { background: var(--color-action-ink-hover); }
.st .btn.primary svg { color: #fff; }
.st .btn.danger { color: var(--color-error); border-color: color-mix(in srgb, var(--color-error) 35%, var(--color-border-default)); }
.st .btn.danger:hover { background: var(--color-error-tint); }
.st .btn.danger svg { color: var(--color-error); }
.st .chip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; font: 600 11px var(--font-sans); }
.st .chip.ok { background: var(--color-success-tint, #DCF2E4); color: var(--color-success-deep, #16904E); }
.st .chip.off { background: var(--color-bg-subtle); color: var(--fg3); }
.st .chip .dt { width: 7px; height: 7px; border-radius: 999px; background: currentColor; }
.st .perm { border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); overflow: hidden; }
.st .perm .pr { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-top: 1px solid var(--color-border-subtle); font-size: 13px; }
.st .perm .pr:first-child { border-top: none; }
.st .perm .pr .pn { flex: 1; }
.st .perm .pr .pv { color: var(--fg2); font-size: 12px; font-weight: 600; }
.st .perm .pr .pv.none { color: var(--fg4); font-weight: 500; }
.st .tl { display: flex; flex-direction: column; }
.st .tl .ti { display: flex; gap: 12px; padding-bottom: 16px; position: relative; }
.st .tl .ti::before { content: ""; position: absolute; left: 5px; top: 14px; bottom: -2px; width: 1.5px; background: var(--color-border-subtle); }
.st .tl .ti:last-child::before { display: none; }
.st .tl .dot { width: 11px; height: 11px; border-radius: 999px; background: var(--color-surface); border: 2px solid var(--color-border-default); margin-top: 3px; flex-shrink: 0; z-index: 1; }
.st .tl .ti.now .dot { border-color: var(--color-accent-green); background: var(--color-accent-green); }
.st .tl .tc .a1 { font-size: 13px; font-weight: 500; color: var(--fg1); }
.st .tl .tc .a2 { font-size: 12px; color: var(--fg3); margin-top: 1px; }
.st .empty { padding: 40px 18px; text-align: center; color: var(--fg3); }
.st .empty .et { font-size: 14px; font-weight: 600; color: var(--fg2); margin-bottom: 4px; }

/* TOAST del panel (namespaceado) */
.st-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 12px); opacity: 0; pointer-events: none; display: flex; align-items: center; gap: 14px; background: var(--color-action-ink); color: #fff; padding: 11px 14px 11px 16px; border-radius: var(--radius-md); box-shadow: 0 12px 28px -8px rgba(15,20,25,.4); z-index: 6000; transition: opacity var(--motion-base) var(--ease-default), transform var(--motion-base) var(--ease-default); font-size: 13.5px; }
.st-toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.st-toast button { background: none; border: none; color: #fff; font: 600 13.5px var(--font-sans); cursor: pointer; opacity: .85; }
.st-toast button:hover { opacity: 1; }

@media (max-width: 860px) {
  .st { width: 100%; max-width: 100%; right: 0; transform: translateX(100%); }
  body.settings-open .app > .main { margin-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .st, .st .screen { transition: none; }
}

/* #ajustesView reubicado DENTRO de la barra: una sola columna (sin master), encaja en 420px.
   La navegación la da la lista de la barra (#stSecList); el detalle es el .cfg-detail. */
.st #ajustesView { display: block !important; padding: 0 !important; margin: 0 !important; max-width: none !important; }
.st #ajustesView .cfg { display: block; border: 0; border-radius: 0; min-height: 0; background: transparent; overflow: visible; }
.st #ajustesView .cfg-list { display: none; }
.st #ajustesView .cfg-detail { display: block; }
.st #ajustesView .cfg-dhead { padding: 0 18px 12px; border-bottom: 1px solid var(--color-border-subtle); }
.st #ajustesView .cfg-dtitle { font-size: 15px; }
.st #ajustesView .cfg-ddesc { font-size: 12.5px; max-width: none; }
.st #ajustesView .cfg-dbody { padding: 18px; gap: 22px; }
.st #ajustesView .cfg-dfoot { padding: 14px 18px; }
.st #ajustesView .aj-grid2 { grid-template-columns: 1fr; }

.bo-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: #fff;
  padding: 12px 18px;
  border-radius: 10px;
  font: 500 13px 'Inter', sans-serif;
  box-shadow: var(--shadow-pop);
  z-index: 10000;
  opacity: 0; pointer-events: none;
  transition: opacity var(--motion-base), transform var(--motion-base);
}
.bo-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.bo-toast.is-error { background: var(--color-error); }
.bo-toast.is-success { background: var(--color-success-deep); }

/* ════════════════════════════════════════════════════════════════════
   VISTA EXPEDIENTE DEL CLIENTE · S5
   Breadcrumb + header + selector PF/PM + tabs + paneles de contenido.
   ════════════════════════════════════════════════════════════════════ */
.bo-breadcrumb {
  font: 500 12px 'Inter', sans-serif;
  color: var(--fg3);
  margin-bottom: 14px;
}
.bo-breadcrumb a {
  color: var(--fg2);
  text-decoration: none;
}
.bo-breadcrumb a:hover { color: var(--fg1); text-decoration: underline; }
.bo-breadcrumb .sep { margin: 0 8px; color: var(--fg4); }

.exp-header {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 18px;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px;
}
.exp-header-left h2 {
  margin: 0 0 4px;
  font: 600 22px 'Inter', sans-serif;
  letter-spacing: -0.015em;
}
.exp-header-left .exp-contact {
  font: 400 13px 'Inter', sans-serif;
  color: var(--fg2);
}
.exp-header-badges { display: inline-flex; gap: 8px; margin-top: 8px; }
.exp-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  font: 600 11px 'Inter', sans-serif;
  background: var(--surface-2); color: var(--fg2);
}
.exp-badge.is-pf { background: var(--color-info-tint); color: var(--color-info-deep); }
.exp-badge.is-pm { background: var(--color-warning-tint); color: var(--color-warning-deep); }
.exp-badge.is-listo { background: var(--color-success-tint); color: var(--color-success-deep); }

.exp-header-right { position: relative; }
.exp-acciones-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-button);
  background: var(--surface); color: var(--fg1);
  font: 500 13px 'Inter', sans-serif;
  font-family: inherit; cursor: pointer;
}
.exp-acciones-btn:hover { background: var(--surface-2); }
.exp-acciones-menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-pop);
  z-index: 100;
  min-width: 240px;
  overflow: hidden;
}
.exp-acciones-menu[hidden] { display: none !important; }
.exp-acciones-menu button {
  display: block; width: 100%;
  padding: 11px 16px;
  background: transparent; border: 0;
  text-align: left; cursor: pointer;
  font: 500 13px 'Inter', sans-serif;
  font-family: inherit;
  color: var(--fg1);
  transition: background var(--motion-fast);
}
.exp-acciones-menu button:hover { background: var(--surface-2); }
.exp-acciones-menu button.primary { color: var(--color-success-deep); font-weight: 600; }
.exp-acciones-menu hr { margin: 0; border: 0; border-top: 1px solid var(--border); }

/* Selector PF/PM */
.exp-selector {
  display: inline-flex; gap: 4px;
  padding: 4px;
  background: var(--surface-2);
  border-radius: var(--r-pill);
  margin-bottom: 16px;
}
.exp-selector button {
  padding: 6px 14px;
  border: 0; background: transparent;
  border-radius: var(--r-pill);
  font: 500 13px 'Inter', sans-serif;
  font-family: inherit;
  color: var(--fg2); cursor: pointer;
  transition: background var(--motion-fast), color var(--motion-fast);
}
.exp-selector button:hover { color: var(--fg1); }
.exp-selector button.is-active {
  background: var(--surface);
  color: var(--fg1);
  box-shadow: 0 1px 2px rgba(15,20,25,0.08);
  font-weight: 600;
}

/* Tabs */
.exp-tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 22px;
}
.exp-tab {
  padding: 10px 16px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  font: 500 14px 'Inter', sans-serif;
  font-family: inherit;
  color: var(--fg2);
  cursor: pointer;
  margin-bottom: -1px;
  transition: color var(--motion-fast), border-color var(--motion-fast);
}
.exp-tab:hover { color: var(--fg1); }
.exp-tab.is-active {
  color: var(--fg1);
  border-bottom-color: var(--ink);
  font-weight: 600;
}

.exp-tab-panel { display: none; }
.exp-tab-panel.is-active { display: block; }

/* S33 · Stepper del flujo de mesa de control */
.exp-stepper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 0 0 22px 0;
  padding: 14px 18px;
  background: var(--color-bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}
.exp-step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px;
  cursor: pointer;
  background: transparent;
  border: 0;
  text-align: left;
  font-family: inherit;
  transition: opacity var(--motion-fast);
}
.exp-step:hover { opacity: 0.85; }
.exp-step + .exp-step::before {
  content: '';
  position: absolute;
  left: -8px; top: 50%;
  width: 16px; height: 2px;
  background: var(--border);
  transform: translateY(-50%);
}
.exp-step-num {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 12px 'Inter', sans-serif;
  background: var(--color-bg);
  border: 1px solid var(--border);
  color: var(--fg2);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.exp-step-body { display: flex; flex-direction: column; min-width: 0; }
.exp-step-label { font: 500 12px 'Inter', sans-serif; color: var(--fg1); }
.exp-step-meta  { font: 400 11px 'Inter', sans-serif; color: var(--fg2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.exp-step.is-pendiente  .exp-step-num { background: var(--color-bg); color: var(--fg2); }
.exp-step.is-en_revision .exp-step-num { background: var(--color-warning-tint); color: var(--color-warning-deep); border-color: var(--color-warning); }
.exp-step.is-completo   .exp-step-num { background: var(--color-success-tint); color: var(--color-success-deep); border-color: var(--color-success); }
.exp-step.is-completo   .exp-step-num::before { content: '✓'; }
.exp-step.is-completo   .exp-step-num span { display: none; }
.exp-step.is-observado  .exp-step-num { background: var(--color-error-tint); color: var(--color-error-deep); border-color: var(--color-error); }
.exp-step.is-current { outline: 1px solid var(--ink); outline-offset: 4px; border-radius: 6px; }

/* S34a · Botón "Imprimir resumen" en tab Resumen */
.exp-resumen-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  margin: 0 0 16px 0;
}

/* S34a · CSS @media print · esconde chrome del backoffice y deja solo
   el contenido del Resumen para que se imprima como ficha del expediente.
   El navegador genera el PDF mediante el diálogo nativo (Cmd/Ctrl+P → Guardar PDF). */
@media print {
  /* Page setup */
  @page {
    size: letter;
    margin: 18mm 14mm;
  }

  body { background: white !important; }

  /* Esconder chrome operativo */
  .bo-sidebar,
  .bo-topbar,
  .bo-page-head,
  .exp-stepper,
  .exp-tabs,
  .exp-selector,
  .exp-resumen-actions,
  .exp-acciones-btn,
  .exp-acciones-menu,
  #boBell,
  #boBellPanel,
  .bo-toast-host,
  .exp-tab-panel:not([data-tab="resumen"]) {
    display: none !important;
  }

  /* Forzar visible el tab Resumen (incluso si no estaba activo cuando imprimió) */
  .exp-tab-panel[data-tab="resumen"] {
    display: block !important;
  }

  /* Layout limpio */
  .bo-shell {
    display: block !important;
    grid-template-columns: none !important;
  }
  .bo-main {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    overflow: visible !important;
  }

  /* Header del expediente sí imprimir */
  .exp-header {
    border-bottom: 1px solid #ddd;
    padding-bottom: 14px;
    margin-bottom: 18px;
  }

  /* Mantener legible el cuerpo */
  body, .exp-header, .exp-kpi-grid, #expPerfil {
    color: #0F1419 !important;
  }

  /* Evitar que el contenido se corte feo entre páginas */
  .exp-section, .exp-kpi-grid, #expPerfil > * {
    page-break-inside: avoid;
  }

  /* Pie de impresión sutil */
  body::after {
    content: "EXANTE · ficha de expediente · " attr(data-print-fecha);
    display: block;
    text-align: center;
    font-size: 10px;
    color: #888;
    margin-top: 18px;
    border-top: 1px solid #ddd;
    padding-top: 8px;
  }
}

/* S37 · Badge de estado global del expediente · sutil */
.estado-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font: 500 11px 'Inter', sans-serif;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  white-space: nowrap;
}
.estado-badge::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.estado-badge.estado-captura     { background: var(--color-bg-subtle); color: var(--fg2); border-color: var(--border); }
.estado-badge.estado-en_revision { background: var(--color-info-tint); color: var(--color-info-deep); border-color: rgba(58,111,181,0.18); }
.estado-badge.estado-validado    { background: var(--color-success-tint); color: var(--color-success-deep); border-color: rgba(31,174,95,0.22); }
.estado-badge.estado-rechazado   { background: var(--color-error-tint); color: var(--color-error-deep); border-color: rgba(184,50,39,0.22); }

/* ─────────────────────────────────────────────────────────────────
 * S39 · MESA DE CONTROL · MARCO C (rediseño)
 * Rail vertical de pasos como navegación + panel con slot por paso.
 * Reemplaza stepper horizontal (S33) + tabs.
 * ───────────────────────────────────────────────────────────────── */

/* ════════════════════════════════════════════════════════════════════
   S63 · Mesa de control · listado 1:1 según handoff_mesa_control 3
   - 6 columnas: solicitante · estado · responsable · antigüedad · vista
     previa (hover) · chevron
   - 5 estados pill: pendiente · en_revision · en_correccion (ámbar) ·
     validado · rechazado
   - mesa solo lectura · CTAs viven dentro del drawer del expediente
   ════════════════════════════════════════════════════════════════════ */

/* KPIs disposición compacta (etiqueta+número en línea) */
.mc-kpis {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}
.mc-kpi {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  background: var(--color-surface, #FFFFFF);
  border: 1px solid var(--color-border-subtle, #E5E7EB);
  border-radius: 16px;
}
.mc-kpi .lab {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 11px 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg3);
}
.mc-kpi .lab::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-bg-subtle, #E5E7EB);
  flex-shrink: 0;
}
.mc-kpi .num {
  font: 600 22px 'Inter', sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--fg1);
}
/* S66-UI · Colores KPI homologados a los badges de la tabla (fuente de verdad).
   Pendiente = notice gris (no ámbar); En revisión = info azul; Resueltas = success verde. */
.mc-kpi.is-pend .lab::before { background: #6E7378; }                          /* notice base */
.mc-kpi.is-pend .num         { color: var(--fg1); }
.mc-kpi.is-rev  .lab::before { background: var(--color-info, #3A6FB5); }
.mc-kpi.is-rev  .num         { color: var(--color-info-deep, #265489); }
.mc-kpi.is-done .lab::before { background: var(--color-accent-green, #1FAE5F); }
.mc-kpi.is-done .num         { color: var(--color-accent-green-deep, #16904E); }

/* Filtros · select + conteo a la derecha */
.mc-filters {
  display: flex; gap: 12px; align-items: center;
  margin-bottom: 20px;
}
.mc-select {
  position: relative; display: inline-flex; align-items: center;
}
.mc-select select {
  appearance: none; -webkit-appearance: none;
  height: 40px; padding: 0 38px 0 16px;
  border-radius: var(--radius-button, 10px);
  border: 1px solid var(--color-border-default, #D1D5DB);
  background: var(--color-surface, #FFFFFF);
  font: 500 13px 'Inter', sans-serif;
  color: var(--fg1);
  cursor: pointer;
  min-width: 200px;
}
.mc-select::after {
  content: ''; position: absolute; right: 14px; top: 50%;
  width: 8px; height: 8px;
  border-right: 1.8px solid var(--fg3);
  border-bottom: 1.8px solid var(--fg3);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.mc-select select:focus { outline: none; box-shadow: none; } /* S82b · border neutro */
.mc-count {
  margin-left: auto;
  font: 400 13px 'Inter', sans-serif;
  color: var(--fg3);
  font-variant-numeric: tabular-nums;
}

/* Listado · contenedor + grid 6 cols + listhead banda gris */
.mc-list {
  background: var(--color-surface, #FFFFFF);
  border: 1px solid var(--color-border-subtle, #E5E7EB);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15,20,25,0.04);
}
.mc-list-scroll { overflow-x: auto; }
.mc-list-scroll .mc-grid { min-width: 980px; }
.mc-grid {
  display: grid;
  grid-template-columns:
    36px                   /* 0. Checkbox (S66-UI) */
    minmax(210px, 2.2fr)   /* 1. Solicitante */
    minmax(112px, 0.7fr)   /* 2. Estado */
    minmax(160px, 1.4fr)   /* 3. Responsable */
    minmax(78px,  0.6fr)   /* 4. Antigüedad */
    minmax(116px, 0.9fr)   /* 5. Última actividad */
    minmax(104px, 0.7fr)   /* 6. Vista rápida */
    36px;                  /* 7. Chevron */
  align-items: center;
  gap: 16px;
}
.mc-list-scroll .mc-grid { min-width: 1000px; }
.mc-listhead {
  background: var(--color-bg-subtle, #F2F4F6);
  border-bottom: 1px solid var(--color-border-subtle, #E5E7EB);
  padding: 12px 20px;
  min-height: 44px;
}
.mc-listhead .col {
  font: 600 11px 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg3);
  display: flex; align-items: center;
  white-space: nowrap; line-height: 1;
}
/* S165 · header con sort (handoff_table): columnas clicables */
.mc-listhead .col.sortable { cursor: pointer; gap: 5px; transition: color var(--motion-fast); }
.mc-listhead .col.sortable:hover { color: var(--fg1); }
.mc-listhead .col .mc-sort-ic { width: 13px; height: 13px; opacity: .35; transition: opacity var(--motion-fast), transform var(--motion-fast); }
.mc-listhead .col.sort-asc .mc-sort-ic, .mc-listhead .col.sort-desc .mc-sort-ic { opacity: 1; color: var(--fg1); }
.mc-listhead .col.sort-asc, .mc-listhead .col.sort-desc { color: var(--fg1); }
.mc-listhead .col.sort-desc .mc-sort-ic { transform: rotate(180deg); }
/* S167 · barra de acciones de selección EN EL ENCABEZADO (handoff_table): oscura, reemplaza el header */
.mc-selbar { display: none; align-items: center; gap: 12px; padding: 0 16px; min-height: 46px; position: sticky; top: 0; z-index: 3; background: var(--color-action-ink, #0F1419); color: #fff; border-radius: 0; }
.mc-selbar.show { display: flex; }
.mc-selbar .bulk-count { font-size: 13px; color: #fff; }
.mc-selbar .bulk-count strong { font-weight: 600; }
.mc-selbar .bulk-div { flex: 1; background: transparent; width: auto; height: auto; }
.mc-selbar .bulk-act { background: rgba(255,255,255,0.12); border: 0; color: #fff; font: 500 12.5px 'Inter', sans-serif; padding: 7px 12px; border-radius: var(--radius-sm, 6px); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background var(--motion-fast); }
.mc-selbar .bulk-act:hover { background: rgba(255,255,255,0.22); }
.mc-selbar .bulk-act svg { width: 14px; height: 14px; }
.mc-selbar .bulk-act.danger { color: #FCA5A5; }
.mc-selbar .bulk-act.danger:hover { background: rgba(248,113,113,0.22); }
.mc-selbar .bulk-close { background: transparent; border: 0; color: rgba(255,255,255,0.7); cursor: pointer; display: inline-flex; align-items: center; padding: 6px; border-radius: 6px; }
.mc-selbar .bulk-close:hover { background: rgba(255,255,255,0.14); color: #fff; }
.mc-selbar .bulk-close svg { width: 16px; height: 16px; }

/* ───────── S66-UI · Checkbox por fila + bulk bar ──────── */
.mc-check-cell { display: flex; align-items: center; justify-content: center; }
.mc-check {
  width: 18px; height: 18px; flex-shrink: 0;
  border-radius: 6px;
  border: 1.5px solid var(--color-border-default, #D1D5DB);
  background: var(--color-surface, #FFFFFF);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-default), border-color var(--motion-fast) var(--ease-default);
}
.mc-check:hover { border-color: #0F1419; }
.mc-check.on, .mc-check.ind {
  background: #0F1419;
  border-color: #0F1419;
}
.mc-check svg { width: 12px; height: 12px; }
.mc-row.sel { background: var(--color-bg-subtle, #F2F4F6); }
.mc-row.sel:hover { background: var(--color-bg-subtle, #F2F4F6); }

/* Barra flotante bulk · presentación A (handoff default) */
.bulkbar--float {
  position: fixed;
  left: calc(50% + 240px / 2);
  bottom: 24px;
  transform: translateX(-50%) translateY(14px);
  display: flex; align-items: center; gap: 8px;
  background: #0F1419;
  padding: 8px 8px 8px 18px;
  border-radius: 999px;
  box-shadow: 0 24px 64px -12px rgba(15,20,25,0.18);
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-base) var(--ease-default), transform var(--motion-base) var(--ease-default);
}
.bulkbar--float.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.bulk-count {
  font: 500 13px 'Inter', sans-serif;
  white-space: nowrap;
  color: #B8BDC7;
}
.bulkbar--float .bulk-count { color: #B8BDC7; }
.bulk-count strong {
  font-weight: 600;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.bulk-div {
  width: 1px; height: 26px;
  background: rgba(255,255,255,0.16);
  margin: 0 4px;
}
.bulk-act {
  display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 14px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: #fff;
  font: 600 13px 'Inter', sans-serif;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--motion-fast), color var(--motion-fast);
}
.bulk-act svg {
  color: rgba(255,255,255,0.72);
  width: 16px; height: 16px;
}
.bulk-act:hover { background: rgba(255,255,255,0.10); }
.bulk-act.danger { color: #F0A99F; }
.bulk-act.danger svg { color: #F0A99F; }
.bulk-act.danger:hover { background: rgba(184,50,39,0.30); }
.bulk-act[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.bulk-act[disabled]:hover { background: transparent; }
.bulk-close {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: #B8BDC7;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background var(--motion-fast), color var(--motion-fast);
}
.bulk-close svg { width: 18px; height: 18px; }
.bulk-close:hover { background: rgba(255,255,255,0.10); color: #fff; }

/* Fila · button clickeable completo */
.mc-row {
  width: 100%; text-align: left; border: 0;
  background: var(--color-surface, #FFFFFF);
  cursor: pointer;
  padding: 8px 20px;
  min-height: 52px;
  font: inherit; color: inherit;
}
.mc-row + .mc-row { border-top: 1px solid var(--color-border-subtle, #E5E7EB); }
.mc-row:hover { background: var(--color-bg-subtle, #F2F4F6); }
.mc-row:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--color-accent-green, #1FAE5F);
}
.mc-row.is-empty {
  display: block;
  cursor: default;
  text-align: center;
  padding: 32px 20px;
  color: var(--fg3);
  font: 400 13px 'Inter', sans-serif;
}

/* 1 · Solicitante · avatar + nombre + tipo (texto) + correo */
.mc-applicant {
  display: flex; align-items: center; gap: 16px;
  padding-right: 24px;
  min-width: 0;
}
.mc-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--color-bg-subtle, #F2F4F6);
  border: 1px solid var(--color-border-subtle, #E5E7EB);
  color: var(--fg1);
  font: 600 11px 'Inter', sans-serif;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.mc-applicant .meta {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.mc-applicant .nm-row {
  display: flex; align-items: baseline; gap: 8px;
  min-width: 0;
}
.mc-applicant .nm {
  font: 600 13px 'Inter', sans-serif;
  color: var(--fg1);
  line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.mc-applicant .tipo {
  font: 600 10px 'Inter', sans-serif;
  color: var(--fg3);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.mc-applicant .em {
  font: 400 12px 'Inter', sans-serif;
  color: var(--fg3);
  line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 2 · Estado · píldora con tinte + dot */
.mc-state {
  display: inline-flex; align-items: center;
  height: 26px; padding: 0 12px 0 10px;
  border-radius: 999px;
  font: 500 12px 'Inter', sans-serif;
  gap: 7px;
}
.mc-state::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; opacity: 0.85;
  flex-shrink: 0;
}
.mc-state.is-pendiente {
  background: #E8E9EA; color: #4B5563;
}
.mc-state.is-en_revision {
  background: var(--color-info-tint, #DCE6F1);
  color: var(--color-info-deep, #265489);
}
.mc-state.is-en_correccion {
  background: var(--color-warning-tint, #FAE5CC);
  color: var(--color-warning-deep, #B05A00);
}
.mc-state.is-validado {
  background: var(--color-success-tint, #D8EEDF);
  color: var(--color-success-deep, #16904E);
}
.mc-state.is-rechazado {
  background: var(--color-error-tint, #F4DCD7);
  color: var(--color-error-deep, #7E1F1B);
}
/* S66 · Estado 'captura' (wizard incompleto) · solo visible con ?qa=1 */
.mc-state.is-captura {
  background: var(--color-bg-subtle, #F2F4F6);
  color: var(--fg3, #8B92A1);
  border: 1px dashed var(--color-border-default, #D1D5DB);
}

/* Banner QA mode */
.mc-qa-banner {
  margin-bottom: 16px;
  padding: 10px 14px;
  background: #0F1419;
  color: #fff;
  border-radius: 10px;
  font: 500 12px 'Inter', sans-serif;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.mc-qa-banner .lbl { display: flex; align-items: center; gap: 8px; }
.mc-qa-banner .lbl::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-warning, #E89B2A);
}
.mc-qa-banner button {
  background: transparent; color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 4px 10px; border-radius: 6px;
  font: 500 12px 'Inter', sans-serif; cursor: pointer;
}
.mc-qa-banner button:hover { background: rgba(255,255,255,0.10); color: #fff; }

/* 3 · Responsable · avatar verde + nombre · sin asignar punteado */
.mc-owner {
  display: flex; align-items: center; gap: 10px; min-width: 0;
}
.mc-owner .oav {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--color-bg-subtle, #F2F4F6);
  border: 1px solid var(--color-border-subtle, #E5E7EB);
  color: var(--color-accent-green-deep, #16904E);
  font: 600 11px 'Inter', sans-serif;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
/* S79 · handoff "Sin asignar v1" · anillo punteado + texto normal (sin itálica) */
.mc-owner.is-unassigned .oav {
  background: transparent;
  border: 1.5px dashed var(--color-border-default, #D1D5DB);
  color: var(--fg3, #8B92A1);          /* icono color terciario (no fg4) */
}
.mc-owner.is-unassigned .oav svg {
  width: 16px; height: 16px;            /* user glyph 57% del avatar 28 */
  stroke-width: 1.5;
}
.mc-owner .onm {
  font: 400 12px 'Inter', sans-serif;
  color: var(--fg1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.mc-owner.is-unassigned .onm {
  color: var(--fg3);
  font-style: normal;                   /* S79 · sin itálica · regla dura del handoff */
}

/* 4 · Antigüedad */
.mc-age {
  font: 400 12px 'Inter', sans-serif;
  color: var(--fg2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
}
.mc-age.old {
  color: var(--color-warning-deep, #B05A00);
  font-weight: 500;
}
.mc-age.old .pdot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-warning, #E89B2A);
}
.mc-age.done { color: var(--fg3); }

/* 5 · Última actividad del cliente (updated_at) · distinta de Antigüedad (firma) */
.mc-act {
  font: 400 12px 'Inter', sans-serif;
  color: var(--fg2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 6 · Vista rápida · botón outline, hover-visible · inhabilitado en pend */
.mc-prev { display: flex; align-items: center; }
.mc-summary {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px;
  border-radius: var(--radius-button, 10px);
  border: 1px solid var(--color-border-default, #D1D5DB);
  background: var(--color-surface, #FFFFFF);
  color: var(--fg1);
  font: 600 12px 'Inter', sans-serif;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15,20,25,0.04);
  opacity: 0;
  transition: opacity var(--motion-fast), background var(--motion-fast), border-color var(--motion-fast);
}
.mc-summary svg { width: 15px; height: 15px; flex-shrink: 0; }
.mc-row:hover .mc-summary,
.mc-row:focus-visible .mc-summary { opacity: 1; }
.mc-summary:hover {
  background: var(--color-bg-subtle, #F2F4F6);
  border-color: var(--fg3);
}
.mc-summary.disabled {
  cursor: default;
  color: var(--fg4, #B8BDC7);
  border-style: dashed;
  border-color: var(--color-border-subtle, #E5E7EB);
  box-shadow: none;
}
.mc-summary.disabled:hover { background: var(--color-surface, #FFFFFF); }

/* 6 · Chevron · sutil, refuerza en hover */
.mc-chevcell { display: flex; align-items: center; justify-content: flex-start; }
.mc-chev {
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg4, #B8BDC7);
  transition: color var(--motion-fast), background var(--motion-fast), transform var(--motion-fast), box-shadow var(--motion-fast);
}
.mc-chev svg { width: 18px; height: 18px; }
.mc-row:hover .mc-chev {
  color: var(--fg1);
  background: var(--color-surface, #FFFFFF);
  box-shadow: 0 1px 2px rgba(15,20,25,0.04);
  transform: translateX(2px);
}

/* Drawer placeholder · Vista rápida expediente (cuerpo se desarrolla en S62.1)
   S66-UI · pointer-events:none por default para que el backdrop invisible no
   intercepte clicks fuera del flujo del drawer (bug pantalla congelada). */
.mc-resumen-backdrop {
  position: fixed; inset: 0;
  background: rgba(15,20,25,0.45);
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-slow) var(--ease-default);
}
.mc-resumen-backdrop.is-open { opacity: 1; pointer-events: auto; }
.mc-resumen-drawer {
  position: fixed; top: 0; right: 0;
  height: 100vh;
  width: clamp(600px, 46vw, 760px);
  background: var(--color-surface, #FFFFFF);
  border-radius: 16px 0 0 16px;
  overflow: hidden;
  z-index: 60;
  display: flex; flex-direction: column;
  box-shadow: -8px 0 24px rgba(15,20,25,0.18);
  transform: translateX(100%);
  pointer-events: none;
  transition: transform var(--motion-slow) var(--ease-default);
}
.mc-resumen-drawer.is-open { transform: translateX(0); pointer-events: auto; }
.mc-resumen-topzone {
  background: var(--color-bg-subtle, #F2F4F6);
  border-bottom: 1px solid var(--color-border-subtle, #E5E7EB);
  padding: 24px 28px;
  display: flex; align-items: center; gap: 16px;
  flex-shrink: 0;
}
.mc-resumen-topzone .ic {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--color-surface, #FFFFFF);
  box-shadow: 0 1px 2px rgba(15,20,25,0.06);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg1);
  flex-shrink: 0;
}
.mc-resumen-topzone .ic svg { width: 18px; height: 18px; }
.mc-resumen-topzone .ttl {
  font: 600 17px 'Inter', sans-serif;
  color: var(--fg1);
  flex: 1; min-width: 0;
}
.mc-resumen-topzone .x {
  width: 38px; height: 38px; border-radius: 10px;
  border: 0; background: transparent; cursor: pointer;
  color: var(--fg2);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--motion-fast), color var(--motion-fast);
}
.mc-resumen-topzone .x:hover { background: var(--color-surface, #FFFFFF); color: var(--fg1); }
.mc-resumen-body {
  flex: 1; overflow-y: auto;
  padding: 32px 28px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  gap: 12px;
}
.mc-resumen-body .ph-ic {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--color-bg-subtle, #F2F4F6);
  color: var(--fg3);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 8px;
}
.mc-resumen-body .ph-ic svg { width: 28px; height: 28px; }
.mc-resumen-body .ph-ttl {
  font: 600 17px 'Inter', sans-serif;
  color: var(--fg1);
}
.mc-resumen-body .ph-desc {
  font: 400 13px/1.5 'Inter', sans-serif;
  color: var(--fg3);
  max-width: 320px;
}

/* S61 · Botón "Regresar a mesa de control" · estilo homologado con
   .wiz-back de mi-exante para consistencia entre portales. */
.mc-back {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 11px 20px;
  border-radius: var(--radius-button, 10px);
  font: 500 14px 'Inter', sans-serif;
  font-family: inherit;
  cursor: pointer;
  /* S61-fix · fondo blanco para destacar contra el bg-gris del expediente.
     En mi-exante el transparent hereda blanco del wiz-card; aquí hereda
     el bg gris del portal y se pierde. */
  background: var(--color-surface, #FFFFFF);
  border: 1px solid var(--color-border-default, #D1D5DB);
  color: var(--fg1);
  text-decoration: none;
  margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(15,20,25,0.04);
  transition: background var(--motion-fast), border-color var(--motion-fast);
}
.mc-back:hover {
  background: var(--color-bg-subtle, #F2F4F6);
  border-color: var(--fg3);
}
.mc-back:focus-visible { outline: none; box-shadow: none; }
.mc-back svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Breadcrumb legacy · queda oculto desde S61 (reemplazado por .mc-back) */
.mc-breadcrumb { display: none !important; }

/* Card cabecera del cliente */
.mc-client {
  background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 16px;
  padding: 24px 28px; display: flex; justify-content: space-between;
  align-items: flex-start; gap: 24px;
}
.mc-client-info { flex: 1; min-width: 0; }
.mc-client-name {
  font: 600 26px/1.2 'Inter', sans-serif; letter-spacing: -0.01em;
  color: var(--fg1); margin: 0;
}
.mc-client-sub {
  font: 400 14px 'Inter', sans-serif; color: var(--fg2);
  font-variant-numeric: tabular-nums; margin-top: 6px;
}
.mc-client-tags { margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; }
.mc-client-tag {
  height: 28px; padding: 0 12px; border-radius: 999px;
  font: 500 13px 'Inter', sans-serif; display: inline-flex; align-items: center;
}
.mc-client-tag.is-pf { background: #DCE6F1; color: #265489; }
.mc-client-tag.is-pm { background: #DCE6F1; color: #265489; }
.mc-client-tag.is-status { background: #E8E9EA; color: #0F1419; }
.mc-client-tag.is-unassigned {
  background: transparent; border: 1px dashed #D1D5DB; color: #8B92A1; cursor: pointer;
}
.mc-client-tag.is-unassigned a, .mc-client-tag.is-unassigned span.cta {
  color: #16904E; margin-left: 4px; cursor: pointer; text-decoration: none;
}
.mc-client-actions { display: flex; gap: 10px; flex-shrink: 0; position: relative; }

/* Botones del Marco C · sustituyen estilos legacy en esta vista */
.mc-btn {
  height: 40px; padding: 0 18px; border-radius: 10px;
  font: 500 14px 'Inter', sans-serif;
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid transparent; white-space: nowrap; cursor: pointer;
  transition: background var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast);
}
.mc-btn.ghost {
  background: #FFFFFF; border-color: #D1D5DB; color: var(--fg1);
}
.mc-btn.ghost:hover { background: #F2F4F6; }
.mc-btn.ink {
  background: #0F1419; color: #FFFFFF;
}
.mc-btn.ink:hover { background: #1F262E; }
.mc-btn.ink:disabled,
.mc-btn.ink[disabled] {
  background: #F2F4F6; color: #B8BDC7; border-color: #E5E7EB; cursor: not-allowed;
}
.mc-btn.sm { height: 34px; padding: 0 14px; font-size: 13px; }

/* Layout 2-col rail + panel */
.mcC2-layout {
  display: grid; grid-template-columns: 280px 1fr;
  gap: 20px; align-items: start; margin-top: 20px;
}

/* Rail vertical · LA NAVEGACIÓN */
.mcC2-rail {
  background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 16px;
  padding: 22px 16px 16px; position: sticky; top: 0;
}
.mcC2-railhead { padding: 0 8px 18px; }
.mcC2-eyebrow {
  font: 600 11px 'Inter', sans-serif; letter-spacing: 0.1em;
  text-transform: uppercase; color: #8B92A1;
}
.mcC2-progress-track {
  height: 6px; border-radius: 999px; background: #F2F4F6;
  margin-top: 12px;
}
.mcC2-progress-fill {
  height: 100%; width: 0;
  background: linear-gradient(to right, #1FAE5F, #5EE39E);
  border-radius: 999px;
  transition: width var(--motion-slow) var(--ease-default);
}
.mcC2-progress-text {
  font: 400 12px 'Inter', sans-serif; color: var(--fg2);
  font-variant-numeric: tabular-nums; margin-top: 8px;
}

.mcC2-steps {
  list-style: none; margin: 0; padding: 0;
  position: relative;
}
.mcC2-line {
  position: absolute; left: 24px; top: 30px; bottom: 30px;
  width: 2px; border-radius: 2px; background: #E5E7EB; z-index: 0;
}
.mcC2-step {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 16px 10px; border-radius: 10px;
  background: transparent; border: 0; text-align: left; cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: background var(--motion-fast) var(--ease-default);
}
.mc-app.hov-bg .mcC2-step:not(.is-locked):hover { background: #F2F4F6; }
.mcC2-step.is-locked { cursor: not-allowed; }

.mcC2-node {
  width: 28px; height: 28px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font: 600 13px 'Inter', sans-serif;
  font-variant-numeric: tabular-nums; flex: 0 0 28px;
  background: #FFFFFF; color: #8B92A1; border: 1.5px solid #D1D5DB;
  transition: background var(--motion-base), border-color var(--motion-base), color var(--motion-base);
}
/* pending · default ya cubierto */
.mcC2-node.is-active {
  background: #0F1419; color: #FFFFFF; border-color: transparent;
}
.mc-app.check-solid .mcC2-node.is-complete {
  background: #1FAE5F; color: #FFFFFF; border-color: transparent;
}
.mcC2-node.is-locked {
  background: #F2F4F6; color: #8B92A1; border-color: transparent;
}
.mcC2-node-check { width: 14px; height: 14px; }
.mcC2-node-lock  { width: 12px; height: 12px; }

.mcC2-title {
  font: 400 15px/1.3 'Inter', sans-serif; color: var(--fg1);
}
.mcC2-step.is-complete .mcC2-title { font-weight: 500; }
.mcC2-step.is-active   .mcC2-title { font-weight: 600; }
.mcC2-step.is-pending  .mcC2-title { font-weight: 400; color: #8B92A1; }
.mcC2-step.is-locked   .mcC2-title { font-weight: 400; color: #8B92A1; }

/* Panel del contenido · andamiaje */
.mc-panel {
  background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 16px;
  overflow: hidden;
}
.mc-panel-head {
  padding: 22px 28px 0;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
}
.mc-panel-eyebrow {
  font: 600 11px 'Inter', sans-serif; letter-spacing: 0.1em;
  text-transform: uppercase; color: #8B92A1;
}
.mc-panel-title {
  font: 600 18px 'Inter', sans-serif; color: var(--fg1);
  margin-top: 6px; display: flex; align-items: center; gap: 10px;
}
.mc-panel-title svg { color: var(--fg2); }

.mc-panel-status {
  height: 30px; padding: 0 12px; border-radius: 999px;
  font: 500 12.5px 'Inter', sans-serif;
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.mc-status-dot {
  width: 8px; height: 8px; border-radius: 50%;
}
.mc-panel-status.is-complete { background: #D8EEDF; color: #16904E; }
.mc-panel-status.is-complete .mc-status-dot { background: #1FAE5F; }
.mc-panel-status.is-active   { background: #FAE5CC; color: #B07614; }
.mc-panel-status.is-active   .mc-status-dot { background: #E89B2A; }
.mc-panel-status.is-pending  { background: #E8E9EA; color: #0F1419; }
.mc-panel-status.is-pending  .mc-status-dot { background: #6E7378; }
.mc-panel-status.is-locked   { background: #F2F4F6; color: #8B92A1; }
.mc-panel-status.is-locked   .mc-status-dot { background: #D1D5DB; }

.mc-panel-body {
  padding: 22px 28px;
}
.mc-step-content[hidden] { display: none; }

/* S49.1 · Sin línea divisoria arriba del footer (pedido Ricardo) */
.mc-panel-foot {
  padding: 16px 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.mc-panel-hint { font: 400 13px 'Inter', sans-serif; color: #8B92A1; }
.mc-foot-actions { display: flex; gap: 10px; }

/* Drawer Historial */
.mc-drawer { position: fixed; inset: 0; z-index: 200; }
.mc-drawer[hidden] { display: none; }
.mc-drawer-backdrop {
  position: absolute; inset: 0; background: rgba(15,20,25,0.32);
}
.mc-drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(480px, 92vw);
  background: #FFFFFF; border-left: 1px solid #E5E7EB;
  display: flex; flex-direction: column;
  box-shadow: -8px 0 24px rgba(15,20,25,0.08);
  animation: mcDrawerSlide var(--motion-slow) var(--ease-default);
}
@keyframes mcDrawerSlide { from { transform: translateX(100%); } to { transform: translateX(0); } }
.mc-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; border-bottom: 1px solid #E5E7EB;
}
.mc-drawer-body { padding: 20px 22px; overflow-y: auto; flex: 1; }

/* DEV BAR · S39.5 (strip antes de prod) */
.mc-devbar {
  background: #1A1F2A; color: #F1F5F9;
  border-radius: 12px; padding: 12px 16px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 16px 0 0; font: 500 12px 'Inter', sans-serif;
}
.mc-devbar-pill {
  background: #F59E0B; color: #1A1F2A; padding: 3px 10px;
  border-radius: 999px; font-weight: 600; font-size: 11px; letter-spacing: 0.04em;
}
.mc-devbar-group {
  display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding-left: 12px; border-left: 1px solid #2F3744;
}
.mc-devbar-label { color: #94A3B8; font-size: 11px; }
.mc-devbar-btn {
  background: #2F3744; color: #F1F5F9; border: 0;
  padding: 4px 10px; border-radius: 6px;
  font: 500 11px 'Inter', sans-serif; cursor: pointer;
  transition: background var(--motion-fast);
}
.mc-devbar-btn:hover { background: #3F495A; }
.mc-devbar-btn.primary { background: #1FAE5F; color: #FFFFFF; }
.mc-devbar-btn.primary:hover { background: #2BC36E; }

/* S66-UI.5 · Switch dentro de dev bar */
.mc-devbar-switch {
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer; user-select: none;
}
.mc-devbar-switch input { position: absolute; opacity: 0; pointer-events: none; }
.mc-devbar-switch-track {
  width: 30px; height: 16px;
  background: #2F3744;
  border-radius: 999px;
  position: relative;
  transition: background var(--motion-fast);
  flex-shrink: 0;
}
.mc-devbar-switch-track::after {
  content: ''; position: absolute;
  top: 2px; left: 2px;
  width: 12px; height: 12px;
  background: #F1F5F9;
  border-radius: 50%;
  transition: transform var(--motion-fast);
}
.mc-devbar-switch input:checked + .mc-devbar-switch-track { background: #1FAE5F; }
.mc-devbar-switch input:checked + .mc-devbar-switch-track::after { transform: translateX(14px); }
.mc-devbar-switch-lbl { font: 500 11px 'Inter', sans-serif; color: #F1F5F9; }

/* S33 · Footer paso en cada tab */
.exp-paso-footer {
  margin-top: 22px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--color-bg-subtle);
  display: flex; flex-direction: column; gap: 12px;
}
.exp-paso-footer-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.exp-paso-footer-info { font: 400 13px 'Inter', sans-serif; color: var(--fg2); }
.exp-paso-footer-actions { display: flex; gap: 8px; }
.exp-paso-notas {
  width: 100%;
  min-height: 64px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font: 400 13px 'Inter', sans-serif;
  resize: vertical;
}
.exp-paso-notas:focus { outline: 0; box-shadow: none; border-color: var(--fg2); }
.exp-paso-historico { font: 400 12px 'Inter', sans-serif; color: var(--fg2); }
.exp-paso-historico b { color: var(--fg1); font-weight: 600; }

/* S33 · Validación final · checklist */
.exp-validacion-checklist { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.exp-validacion-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--color-bg);
}
.exp-validacion-item.is-completo { background: var(--color-success-tint); border-color: var(--color-success); }
.exp-validacion-item.is-pendiente { border-style: dashed; opacity: 0.85; }
.exp-validacion-icon {
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 14px 'Inter', sans-serif;
  flex-shrink: 0;
}
.exp-validacion-item.is-completo .exp-validacion-icon { background: var(--color-success); color: #fff; }
.exp-validacion-item.is-pendiente .exp-validacion-icon { background: var(--color-bg-subtle); color: var(--fg2); border: 1px solid var(--border); }
.exp-validacion-item.is-observado .exp-validacion-icon { background: var(--color-error); color: #fff; }
.exp-validacion-text { flex: 1; }
.exp-validacion-text strong { display: block; font-weight: 600; color: var(--fg1); }
.exp-validacion-text small { color: var(--fg2); }

/* ════════════════════════════════════════════════════════════════════
   S65 · Panel Decisión final con composer · reemplaza Marcar listo /
   Rechazar / Comentar del menú Acciones. Vive en el paso 5 del rail
   Marco C, solo accesible cuando los 4 pasos previos están completos.
   ════════════════════════════════════════════════════════════════════ */
.decision-panel {
  background: var(--color-surface, #FFFFFF);
  border: 1px solid var(--color-border-subtle, #E5E7EB);
  border-radius: 16px;
  overflow: hidden;
}
.decision-head {
  padding: 24px 28px;
  background: var(--color-bg-subtle, #F2F4F6);
  border-bottom: 1px solid var(--color-border-subtle, #E5E7EB);
  display: flex; align-items: center; gap: 16px;
}
.decision-head .ic {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--color-surface, #FFFFFF);
  box-shadow: 0 1px 2px rgba(15,20,25,0.06);
  color: var(--color-warning-deep, #B05A00);
  display: inline-flex; align-items: center; justify-content: center;
}
.decision-head .ic svg { width: 22px; height: 22px; }
.decision-head .info { flex: 1; min-width: 0; }
.decision-head .ttl {
  font: 600 17px 'Inter', sans-serif;
  color: var(--fg1);
  margin: 0;
}
.decision-head .sub {
  font: 400 13px 'Inter', sans-serif;
  color: var(--fg2);
  margin: 2px 0 0;
}

.decision-body { padding: 28px; }
.decision-gate-wrap {
  text-align: center;
  padding: 32px 24px;
}
.decision-gate-ic {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--color-bg-subtle);
  color: var(--fg3);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.decision-gate-ic svg { width: 26px; height: 26px; }
.decision-gate-ttl {
  font: 600 16px 'Inter', sans-serif;
  color: var(--fg1);
  margin: 0 0 6px;
}
.decision-gate-desc {
  font: 400 13px/1.5 'Inter', sans-serif;
  color: var(--fg3);
  margin: 0;
  max-width: 360px;
  margin-left: auto; margin-right: auto;
}

.decision-resumen {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}
.decision-resumen .cell {
  border: 1px solid var(--color-border-subtle);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex; gap: 12px; align-items: center;
}
.decision-resumen .check {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--color-accent-green, #1FAE5F);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.decision-resumen .check svg { width: 12px; height: 12px; }
.decision-resumen .lbl { font: 500 13px 'Inter', sans-serif; color: var(--fg1); }
.decision-resumen .val { font: 400 12px 'Inter', sans-serif; color: var(--fg3); margin-top: 2px; }

.decision-mode {
  display: inline-flex;
  background: var(--color-bg-subtle);
  border-radius: 10px;
  padding: 4px;
  gap: 4px;
  margin-bottom: 20px;
}
.decision-mode button {
  height: 36px;
  padding: 0 16px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  color: var(--fg2);
  font: 600 13px 'Inter', sans-serif;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.decision-mode button.active {
  background: var(--color-surface);
  box-shadow: 0 1px 2px rgba(15,20,25,0.04);
}
.decision-mode button.active.is-validar { color: var(--color-accent-green-deep, #16904E); }
.decision-mode button.active.is-rechazar { color: var(--color-error-deep, #8C2018); }

.decision-composer {
  border: 1px solid var(--color-border-default, #D1D5DB);
  border-radius: 16px;
  padding: 18px 20px;
  background: var(--color-surface);
  transition: border-color var(--motion-fast) var(--ease-default);
}
.decision-composer.is-rechazar {
  border-color: var(--color-error);
  background: rgba(244,220,215,0.25);
}
.decision-composer .lbl-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.decision-composer .lbl-row .lbl { font: 600 13px 'Inter', sans-serif; color: var(--fg1); }
.decision-composer .lbl-row .req { font: 500 12px 'Inter', sans-serif; color: var(--color-error-deep); }
.decision-composer .lbl-row .opt { font: 500 12px 'Inter', sans-serif; color: var(--fg3); }
.decision-composer .hint {
  font: 400 12px 'Inter', sans-serif;
  color: var(--fg3);
  margin-bottom: 12px;
}
.decision-composer textarea {
  width: 100%;
  min-height: 100px;
  resize: vertical;
  border: 1px solid var(--color-border-subtle);
  border-radius: 8px;
  padding: 10px 12px;
  font: 400 13px/1.5 'Inter', sans-serif;
  color: var(--fg1);
  background: var(--color-surface);
  box-sizing: border-box;
}
.decision-composer textarea:focus {
  outline: none;
  border-color: var(--color-accent-green);
}
.decision-composer.is-rechazar textarea:focus {
  border-color: var(--color-error);
}
.decision-composer .meta {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 8px;
  font: 400 12px 'Inter', sans-serif;
  color: var(--fg3);
}

.decision-impact {
  margin-top: 14px;
  border-radius: 10px;
  padding: 12px 14px;
  display: flex; gap: 10px; align-items: flex-start;
  font: 400 12px/1.5 'Inter', sans-serif;
}
.decision-impact svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.decision-impact.is-ok { background: var(--color-success-tint, #D8EEDF); color: var(--color-accent-green-deep, #16904E); }
.decision-impact.is-warn { background: var(--color-error-tint, #F4DCD7); color: var(--color-error-deep, #8C2018); }

.decision-foot {
  padding: 20px 28px;
  border-top: 1px solid var(--color-border-subtle);
  background: var(--color-bg-subtle);
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px;
}
.decision-foot .hint {
  font: 400 12px 'Inter', sans-serif;
  color: var(--fg3);
  flex: 1;
}
.decision-cta {
  height: 44px;
  padding: 0 22px;
  border-radius: 10px;
  font: 600 14px 'Inter', sans-serif;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid transparent;
  transition: opacity var(--motion-fast);
}
.decision-cta svg { width: 16px; height: 16px; }
.decision-cta.primary { background: var(--color-accent-green-deep, #16904E); color: #fff; }
.decision-cta.primary:hover { background: #11703D; }
.decision-cta.danger {
  background: var(--color-surface);
  border-color: var(--color-error);
  color: var(--color-error-deep);
}
.decision-cta.danger:hover { background: var(--color-error-tint); }
.decision-cta[disabled] { opacity: 0.45; cursor: not-allowed; }

/* Histórico unificado de comentarios al fondo del expediente */
.historico-comentarios {
  margin-top: 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: 16px;
  overflow: hidden;
}
.historico-comentarios-head {
  padding: 18px 24px;
  border-bottom: 1px solid var(--color-border-subtle);
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer;
  user-select: none;
}
.historico-comentarios-head .ttl {
  font: 600 14px 'Inter', sans-serif;
  color: var(--fg1);
  display: flex; align-items: center; gap: 8px;
}
.historico-comentarios-head .count {
  background: var(--color-bg-subtle);
  border-radius: 999px;
  padding: 2px 8px;
  font: 500 11px 'Inter', sans-serif;
  color: var(--fg2);
}
.historico-comentarios-head .chev {
  color: var(--fg3);
  transition: transform var(--motion-fast);
}
.historico-comentarios-head .chev svg { width: 18px; height: 18px; }
.historico-comentarios.is-open .historico-comentarios-head .chev { transform: rotate(180deg); }
.historico-comentarios-body { display: none; padding: 0 24px 20px; }
.historico-comentarios.is-open .historico-comentarios-body { display: block; }
.historico-comentarios-body .empty {
  padding: 18px 0;
  color: var(--fg3);
  font: 400 13px 'Inter', sans-serif;
  text-align: center;
}
.hist-item {
  padding: 16px 0;
  border-bottom: 1px solid var(--color-border-subtle);
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
}
.hist-item:last-child { border-bottom: 0; }
.hist-ava {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--color-bg-subtle);
  color: var(--fg1);
  font: 600 12px 'Inter', sans-serif;
  display: inline-flex; align-items: center; justify-content: center;
}
.hist-content { min-width: 0; }
.hist-meta {
  display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
  font: 400 12px 'Inter', sans-serif;
  color: var(--fg3);
  margin-bottom: 4px;
}
.hist-meta .who { font-weight: 600; color: var(--fg1); }
.hist-meta .src {
  padding: 2px 8px;
  border-radius: 999px;
  font: 500 10px 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.hist-meta .src.is-doc        { background: var(--color-warning-tint); color: var(--color-warning-deep); }
.hist-meta .src.is-correccion { background: var(--color-info-tint);    color: var(--color-info-deep); }
.hist-meta .src.is-decision   { background: var(--color-success-tint); color: var(--color-accent-green-deep); }
.hist-meta .src.is-decision.is-rechazado { background: var(--color-error-tint); color: var(--color-error-deep); }
.hist-body {
  font: 400 13px/1.5 'Inter', sans-serif;
  color: var(--fg2);
  white-space: pre-wrap;
}

/* Resumen · KPIs */
.exp-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

/* Perfil consolidado del cliente · S5.11 */
.perfil-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 14px;
  overflow: hidden;
}
.perfil-section-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.perfil-section-head h4 {
  margin: 0;
  font: 600 13px 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg2);
}
.perfil-section-stats {
  font: 500 11px 'Inter', sans-serif;
  color: var(--fg3);
  font-variant-numeric: tabular-nums;
}
.perfil-row {
  display: grid;
  grid-template-columns: 160px 1fr auto;
  gap: 16px;
  padding: 12px 20px;
  align-items: center;
  border-bottom: 1px solid var(--border);
  font: 400 13px 'Inter', sans-serif;
}
.perfil-row:last-child { border-bottom: 0; }
.perfil-row-label { color: var(--fg3); font-weight: 500; }
.perfil-row-value {
  color: var(--fg1);
  font-weight: 500;
  word-break: break-word;
}
.perfil-row-value.empty { color: var(--fg4); font-weight: 400; font-style: italic; }
.perfil-row-value.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}
.perfil-row-value .alt {
  display: block;
  font-size: 11px;
  color: var(--color-error-deep);
  margin-top: 2px;
  font-weight: 400;
}
.perfil-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font: 600 11px 'Inter', sans-serif;
  white-space: nowrap;
}
.perfil-status .pst-icon {
  width: 12px; height: 12px;
  display: inline-flex; align-items: center; justify-content: center;
}
.perfil-status .pst-icon svg { width: 12px; height: 12px; stroke-width: 2.4; }
.perfil-status.validado { background: var(--color-success-tint); color: var(--color-success-deep); }
.perfil-status.parcial { background: var(--color-warning-tint); color: var(--color-warning-deep); }
.perfil-status.discrepancia { background: var(--color-error-tint); color: var(--color-error-deep); }
.perfil-status.sin-validar { background: var(--surface-2); color: var(--fg3); }
.perfil-fuentes {
  display: block;
  font: 400 11px 'Inter', sans-serif;
  color: var(--fg3);
  margin-top: 2px;
  text-align: right;
}
.exp-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 14px;
}
.exp-section-title {
  margin: 0 0 12px;
  font: 600 13px 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg3);
}

/* Timeline */
.exp-timeline { display: flex; flex-direction: column; gap: 10px; }
.exp-timeline-item {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  gap: 12px;
  align-items: start;
  font: 400 13px 'Inter', sans-serif;
  padding: 6px 0;
}
.exp-timeline-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-accent-green);
  margin-top: 6px;
}
.exp-timeline-evento { color: var(--fg1); font-weight: 500; }
.exp-timeline-payload {
  font: 400 12px ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--fg3); margin-top: 2px;
}
.exp-timeline-when {
  font: 400 12px 'Inter', sans-serif;
  color: var(--fg3); white-space: nowrap;
}

/* Tab Documentos · lista row con hover chevron (patrón solic-row de mi-exante) */
.exp-docs-list { display: flex; flex-direction: column; gap: 6px; }
.exp-doc-row {
  display: grid;
  grid-template-columns: 1fr auto auto 16px;
  gap: 18px;
  align-items: center;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: background var(--motion-fast), border-color var(--motion-fast);
}
.exp-doc-row:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
}
.exp-doc-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.exp-doc-row-tipo {
  font: 600 14px 'Inter', sans-serif; color: var(--fg1);
  letter-spacing: -0.005em;
}
.exp-doc-row-filename {
  font: 400 12px 'Inter', sans-serif; color: var(--fg3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 360px;
}
.exp-doc-row-meta {
  display: flex; gap: 10px; align-items: center;
  font: 400 12px 'Inter', sans-serif; color: var(--fg2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.exp-doc-status {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: var(--r-pill);
  font: 600 11px 'Inter', sans-serif; white-space: nowrap;
}
.exp-doc-status.is-ocr_ok { background: var(--color-success-tint); color: var(--color-success-deep); }
.exp-doc-status.is-ocr_failed { background: var(--color-error-tint); color: var(--color-error-deep); }
.exp-doc-status.is-revision_manual { background: var(--color-warning-tint); color: var(--color-warning-deep); }
.exp-doc-status.is-subido,
.exp-doc-status.is-procesando { background: var(--surface-2); color: var(--fg2); }
.exp-doc-status.is-expirado { background: var(--color-error-tint); color: var(--color-error-deep); }
/* S49 · Badge "Requiere atención" condicional · icono alert-triangle
   No usa la palabra "urgente" para no implicar prisa (decisión Ricardo) */
.exp-doc-prioridad {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: var(--r-pill);
  background: var(--color-warning-tint, #FFEEC7);
  color: var(--color-warning-deep, #8A5A00);
  font: 600 11px 'Inter', sans-serif; white-space: nowrap;
}
.exp-doc-prioridad svg { width: 12px; height: 12px; stroke-width: 2; }

/* S49 · Badge "Decisión del analista" en la fila de doc
   Pendiente | Validado | Rechazado | Con observación */
.exp-doc-decision {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--r-pill);
  font: 600 11px 'Inter', sans-serif; white-space: nowrap;
  background: var(--surface-2); color: var(--fg2);
}
.exp-doc-decision svg { width: 12px; height: 12px; }
.exp-doc-decision.is-pendiente {
  background: transparent;
  color: var(--fg3);
  border: 1px dashed var(--border);
}
.exp-doc-decision.is-validado {
  background: var(--color-success-tint, #D6F2DF);
  color: var(--color-success-deep, #0E6F3D);
}
.exp-doc-decision.is-rechazado {
  background: var(--color-error-tint, #FCE2E2);
  color: var(--color-error-deep, #8E1B1B);
}
.exp-doc-decision.is-observado {
  background: var(--color-warning-tint, #FFEEC7);
  color: var(--color-warning-deep, #8A5A00);
}

/* S49 · Meta de la fila · tiempo relativo + tooltip */
.exp-doc-time {
  cursor: help;
  border-bottom: 1px dotted transparent;
  transition: border-color var(--motion-fast);
}
.exp-doc-time:hover { border-bottom-color: var(--fg3); }

/* ════════════════════════════════════════════════════════════════════
   S51 · Documentos shell · 1:1 según handoff "Documentos - Mesa de control"
   ════════════════════════════════════════════════════════════════════ */
.docs-shell { display: flex; flex-direction: column; }

/* Progreso */
.docs-progress { display: flex; align-items: center; gap: 16px; margin-top: 4px; }
.docs-progress-bar {
  flex: 1; height: 6px;
  border-radius: 999px;
  background: #F2F4F6;
  overflow: hidden;
}
.docs-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #1FAE5F 0%, #4FD68A 100%);
  transition: width var(--motion-base) var(--ease-default);
}
.docs-progress-label {
  font: 400 13px 'Inter';
  color: var(--fg2, #4B5563);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.docs-progress-label b { color: var(--fg1, #0F1419); font-weight: 600; }

/* Chips de conteo por estatus */
.docs-stats {
  display: flex; gap: 8px; margin-top: 20px;
  flex-wrap: wrap;
}
.docs-stat {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  font: 500 13px 'Inter';
  background: #F2F4F6;
  color: var(--fg2, #4B5563);
}
.docs-stat b { font-weight: 600; font-variant-numeric: tabular-nums; }
.docs-stat .dot {
  width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0;
}
.docs-stat .docs-stat-ic {
  width: 13px; height: 13px; flex-shrink: 0;
  color: var(--fg3, #8B92A1);
}
.docs-stat.s-validado .dot   { background: #1FAE5F; } /* verde   · validado */
.docs-stat.s-porvalidar .dot { background: #4B5563; } /* neutro  · subido pendiente analista */
.docs-stat.s-porsubir .dot   { background: #9CA3AF; } /* gris    · cliente aún no lo envió */
.docs-stat.s-espera .dot     { background: #D97706; } /* ámbar   · esperando corrección */

/* Lista */
.docs-list { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
.docs-row {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: var(--bg, #FAFBFC);
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-default), border-color var(--motion-fast) var(--ease-default);
}
.docs-row:hover {
  background: #FFFFFF;
  border-color: #E5E7EB;
}

/* Tile (icono del tipo de doc) */
.docs-tile {
  width: 40px; height: 40px;
  border-radius: 8px;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: #FFFFFF;
  color: var(--fg2, #4B5563);
  border: 1px solid #E5E7EB;
}
.docs-tile svg { width: 20px; height: 20px; }

/* En "Esperando corrección" el tile es ámbar suave (NO toca el fondo de la fila) */
.docs-row.is-espera .docs-tile {
  background: #FFEEC7;
  color: #8A5A00;
  border-color: transparent;
}
/* Estado "Pendiente" (cliente NO ha enviado el doc) · misma fila que las demás
   con relleno · solo el tile se ve dashed para indicar que no hay archivo todavía */
.docs-row.is-porsubir {
  cursor: default;
}
.docs-row.is-porsubir:hover {
  background: var(--bg, #FAFBFC);
  border-color: transparent;
}
.docs-row.is-porsubir .docs-tile {
  background: transparent;
  color: var(--fg3, #8B92A1);
  border: 1px dashed #D1D5DB;
}
.docs-row.is-porsubir .docs-name { color: var(--fg2, #4B5563); }

/* Indicador "Por subir" · gris suave sin caja (paralelo visual a status-done/wait) */
.docs-status-porsubir {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  font: 500 13px 'Inter';
  color: var(--fg3, #8B92A1);
}
.docs-status-porsubir svg { width: 15px; height: 15px; }

/* Texto centro */
.docs-text {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 1px;
}
.docs-name {
  font: 600 14px 'Inter';
  color: var(--fg1, #0F1419);
  letter-spacing: -0.005em;
}
.docs-sub {
  font: 400 12.5px 'Inter';
  color: var(--fg3, #8B92A1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.docs-sub .sep { margin: 0 6px; color: #C7CCD4; }

/* Banderas adicionales (Requiere atención / Resubido) · van entre texto y estado */
.docs-flag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font: 600 11px 'Inter';
  white-space: nowrap;
  flex-shrink: 0;
}
.docs-flag svg { width: 12px; height: 12px; stroke-width: 2; }
.docs-flag.is-atencion {
  background: #FFEEC7;
  color: #8A5A00;
}
.docs-flag.is-resubido {
  background: #DBEAFE;
  color: #1E40AF;
}

/* Indicadores de estado (derecha) */
/* a) Validado · check + texto verde, sin caja */
.docs-status-done {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  font: 600 13px 'Inter';
  color: #0E6F3D;
}
.docs-status-done svg { width: 15px; height: 15px; }

/* b) Por validar · botón neutro "Revisar" */
.docs-action {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  height: 34px; padding: 0 14px;
  border-radius: 8px;
  font: 500 13px 'Inter';
  border: 1px solid #D1D5DB;
  background: #FFFFFF;
  color: var(--fg1, #0F1419);
  cursor: pointer;
  transition: background var(--motion-fast), border-color var(--motion-fast);
}
.docs-action:hover {
  background: #F2F4F6;
  border-color: #9CA3AF;
}
.docs-action svg { width: 15px; height: 15px; }

/* c) Esperando corrección · clock + texto ámbar, sin caja */
.docs-status-wait {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  font: 600 13px 'Inter';
  color: #8A5A00;
}
.docs-status-wait svg { width: 15px; height: 15px; }

/* Footer · botón "Validar y continuar" lo controla mc-panel-foot existente */
.exp-doc-row-chev {
  color: var(--fg4); opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--motion-fast), transform var(--motion-fast);
}
.exp-doc-row:hover .exp-doc-row-chev {
  opacity: 1; transform: translateX(0);
}
.exp-doc-row-chev svg { width: 16px; height: 16px; stroke-width: 2; display: block; }
@media (hover: none) {
  .exp-doc-row-chev { opacity: 1; transform: translateX(0); }
}

/* ════════════════════════════════════════════════════════════════════
   DRAWER · officer-friendly redesign (S5.10)
   Bloques semánticos en lugar de raw JSON.
   ════════════════════════════════════════════════════════════════════ */
/* S46.3 · .dr-confianza eliminado · el "Score OCR" no aporta al analista */

.dr-block { margin-bottom: 22px; }
.dr-block-title {
  font: 600 11px 'Inter', sans-serif;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--fg3); margin: 0 0 10px;
}

.dr-fields { display: grid; gap: 10px; }
.dr-field {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font: 400 13px 'Inter', sans-serif;
}
.dr-field:last-child { border-bottom: 0; }
.dr-field-label { color: var(--fg3); }
.dr-field-value { color: var(--fg1); font-weight: 500; word-break: break-word; }
.dr-field-value.empty { color: var(--fg4); font-weight: 400; font-style: italic; }
.dr-field-value.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}
/* S46.3 · Filas largas (observaciones) · etiqueta arriba, valor abajo */
.dr-field.dr-field-long {
  grid-template-columns: 1fr;
  gap: 4px;
}
.dr-field.dr-field-long .dr-field-value {
  font-weight: 400;
  color: var(--fg2);
  line-height: 1.5;
}
/* S46.3 · Grupos · padre tipo "Titular" + sub-filas indentadas */
.dr-field.dr-field-group {
  grid-template-columns: 1fr;
  gap: 6px;
  padding-bottom: 4px;
}
.dr-field.dr-field-group > .dr-field-label {
  font-weight: 500;
  color: var(--fg2);
}
.dr-field-children {
  display: grid;
  gap: 4px;
  margin-left: 12px;
  padding-left: 10px;
  border-left: 1px solid var(--color-border-subtle, var(--border));
}
.dr-field-children .dr-field {
  border-bottom: 0;
  padding: 2px 0;
  grid-template-columns: 140px 1fr;
}

.dr-match {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font: 400 13px 'Inter', sans-serif;
  align-items: center;
}
.dr-match:last-child { border-bottom: 0; }
.dr-match-label { color: var(--fg3); grid-column: 1 / 3; font: 600 11px 'Inter'; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: -4px; }
.dr-match-side {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: var(--surface-2);
  border-radius: 8px;
}
.dr-match-side strong { font-weight: 600; word-break: break-word; }
.dr-match-side.is-ok { background: var(--color-success-tint); color: var(--color-success-deep); }
.dr-match-side.is-warn { background: var(--color-warning-tint); color: var(--color-warning-deep); }
.dr-match-side.is-fail { background: var(--color-error-tint); color: var(--color-error-deep); }
.dr-match-side.is-empty { color: var(--fg4); font-style: italic; }

.dr-checks { display: flex; flex-direction: column; gap: 8px; }
.dr-check {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: flex-start;
  font: 400 13px 'Inter', sans-serif;
}
.dr-check-icon {
  width: 20px; height: 20px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.dr-check-icon svg { width: 12px; height: 12px; stroke-width: 2.4; }
.dr-check.ok .dr-check-icon { background: var(--color-success-tint); color: var(--color-success-deep); }
.dr-check.warn .dr-check-icon { background: var(--color-warning-tint); color: var(--color-warning-deep); }
.dr-check.fail .dr-check-icon { background: var(--color-error-tint); color: var(--color-error-deep); }
.dr-check.na .dr-check-icon { background: var(--surface-2); color: var(--fg3); }
.dr-check-text { color: var(--fg1); padding-top: 1px; }
.dr-check-sub { color: var(--fg3); font-size: 12px; margin-top: 2px; }

/* S178 · Tarjeta de ubicación (pin Google Maps del cliente) para el visitador */
.exp-geo-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; margin-bottom: 12px;
  background: var(--color-action-tint, var(--surface-2));
  border: 1px solid var(--border); border-radius: 10px;
}
.exp-geo-ic { font-size: 22px; line-height: 1; }
.exp-geo-body { flex: 1; min-width: 0; }
.exp-geo-title { font: 600 12px 'Inter', sans-serif; color: var(--fg2); text-transform: uppercase; letter-spacing: .02em; }
.exp-geo-addr { font: 400 14px/1.45 'Inter', sans-serif; color: var(--fg1); margin-top: 2px; }
.exp-geo-btn { white-space: nowrap; }
.dr-direcciones { display: flex; flex-direction: column; gap: 8px; }
.dr-direccion {
  padding: 10px 14px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  font: 400 13px/1.5 'Inter', sans-serif;
  color: var(--fg1);
  border: 1px solid var(--border);
}
.dr-direccion-fuente {
  font: 600 11px 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg3);
  margin-bottom: 4px;
}
.dr-banner-warn {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--color-warning-tint);
  border: 1px solid var(--color-warning-deep);
  border-radius: 8px;
  font: 500 13px 'Inter', sans-serif;
  color: var(--color-warning-deep);
  margin-bottom: 10px;
}

/* Tab PLD · cards de listas */
.exp-pld-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.exp-pld-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
}
/* S38b · Descartes automáticos · estilo distinto sutil */
.exp-pld-card-descartado {
  background: var(--color-bg-subtle);
  border-style: dashed;
  opacity: 0.92;
}
.exp-pld-card-descartado .exp-pld-card-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  margin-bottom: 8px;
}
.exp-pld-descarte-badge {
  background: var(--color-bg);
  color: var(--fg2);
  font: 500 11px 'Inter', sans-serif;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.exp-pld-descarte-razon {
  font: 400 12px 'Inter', sans-serif;
  color: var(--fg2);
  background: var(--color-bg);
  padding: 8px 10px;
  border-radius: 6px;
  line-height: 1.5;
}
.exp-pld-descarte-razon strong { color: var(--fg1); font-weight: 600; }
.exp-pld-card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.exp-pld-lista {
  font: 600 14px 'Inter', sans-serif; color: var(--fg1);
}
.exp-pld-fuente {
  font: 400 11px 'Inter', sans-serif; color: var(--fg3);
  margin-top: 4px;
}
.exp-pld-estado {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: var(--r-pill);
  font: 600 11px 'Inter', sans-serif;
}
.exp-pld-estado.is-no_encontrado { background: var(--color-success-tint); color: var(--color-success-deep); }
.exp-pld-estado.is-match { background: var(--color-error-tint); color: var(--color-error-deep); }
.exp-pld-estado.is-pendiente { background: var(--surface-2); color: var(--fg3); }
.exp-pld-detalle {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font: 400 12px 'Inter', sans-serif;
  color: var(--fg2);
}
.exp-pld-score-card {
  text-align: center;
  padding: 22px;
}
.exp-pld-score-value {
  font: 600 32px 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.exp-pld-score-value.verde { color: var(--color-success-deep); }
.exp-pld-score-value.ambar { color: var(--color-warning-deep); }
.exp-pld-score-value.rojo  { color: var(--color-error-deep); }

/* Tab SIC · placeholder */
.exp-sic-placeholder {
  text-align: center;
  padding: 32px 24px;
  color: var(--fg3);
  font: 400 13px 'Inter', sans-serif;
  background: var(--surface-2);
  border-radius: 12px;
  border: 1px dashed var(--border-strong);
}

/* Tab SIC · upload card (homologado al upload card del wizard mi-exante) */
.buro-upload {
  border-radius: 12px;
  padding: 28px 24px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  gap: 6px;
  min-height: 200px;
  box-sizing: border-box;
  cursor: pointer;
  transition: border-color var(--motion-base), background var(--motion-base);
  background: var(--color-bg-subtle, #F2F4F6);
  border: 1.5px dashed var(--color-border-default, #D1D5DB);
}
.buro-upload:hover,
.buro-upload.is-drag-over {
  background: var(--color-accent-green-bg, #E6F7EE);
  border-color: var(--color-accent-green, #1FAE5F);
}
.buro-upload .buro-ic {
  width: 44px; height: 44px;
  border-radius: 999px;
  background: var(--color-surface, #FFFFFF);
  color: var(--fg2);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.buro-upload .buro-ic svg { width: 20px; height: 20px; stroke-width: 1.8; }
.buro-upload .buro-title { font: 600 16px 'Inter', sans-serif; color: var(--fg1); letter-spacing: -0.005em; }
.buro-upload .buro-sub { font: 400 13px/1.5 'Inter', sans-serif; color: var(--fg3); margin: 0; }
.buro-upload .buro-cta {
  margin-top: 18px;
  height: 34px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center;
  font: 500 14px 'Inter', sans-serif;
  color: var(--fg1);
  cursor: pointer;
}
.buro-upload.is-uploaded {
  background: var(--color-bg-subtle, #F2F4F6);
  border: 1.5px solid var(--color-border-subtle, #E5E7EB);
  cursor: default;
}
.buro-upload.is-uploaded .buro-ic {
  background: var(--color-accent-green-tint-14, rgba(31,174,95,0.14));
  color: var(--color-accent-green-deep, #16904E);
}
.buro-upload.is-uploaded .buro-ic svg { stroke-width: 2.4; }
.buro-file-chip {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 18px;
  font: 500 12px 'Inter', sans-serif;
  color: var(--fg2);
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--color-surface, #FFFFFF);
  border: 1px solid var(--color-border-subtle, #E5E7EB);
  font-variant-numeric: tabular-nums;
}
.buro-file-chip button {
  background: transparent; border: 0; padding: 0 0 0 4px;
  color: var(--fg3); cursor: pointer; line-height: 1;
}
.buro-file-chip button:hover { color: var(--fg1); }
.buro-file-chip svg { width: 12px; height: 12px; stroke-width: 1.8; }

/* Visor PDF */
.buro-visor-frame {
  width: 100%; min-height: 540px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
}

/* Lista de previos */
.buro-prev-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 14px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  font: 400 13px 'Inter', sans-serif;
}
.buro-prev-row:last-child { border-bottom: 0; }
.buro-prev-row .file-name { color: var(--fg1); font-weight: 500; }
.buro-prev-row .meta { color: var(--fg3); font-size: 12px; font-variant-numeric: tabular-nums; }
.buro-prev-row button {
  background: transparent; border: 1px solid var(--border-strong);
  padding: 4px 10px; border-radius: var(--radius-button);
  font: 500 12px 'Inter', sans-serif;
  font-family: inherit;
  color: var(--fg1); cursor: pointer;
}
.buro-prev-row button:hover { background: var(--surface-2); }
.buro-prev-row button.danger { color: var(--color-error-deep); border-color: var(--color-error-tint); }
.buro-prev-row button.danger:hover { background: var(--color-error-tint); }

/* ============================================================
   Exante DS — Auth / Login system (handoff_backoffice 2)
   Réplica 1:1 del design system. Tokens ya viven en :root.
   ============================================================ */
:root {
  --color-border-strong: #0F1419;
  --color-action-text-on: #FFFFFF;
  --af-focus-border: color-mix(in srgb, var(--color-border-default) 42%, #0F1419);
}
.af-stage { min-height: 100%; display: flex; align-items: center; justify-content: center; background: var(--color-bg); padding: 40px 24px; box-sizing: border-box; font-family: var(--font-sans); color: var(--fg1); -webkit-font-smoothing: antialiased; }
.af-card { background: var(--color-surface); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg); width: 100%; max-width: 400px; padding: 36px 36px 28px; box-shadow: var(--shadow-md); box-sizing: border-box; }
.af-logo { display: flex; justify-content: center; margin-bottom: 18px; }
.af-logo img { width: 38px; height: 38px; display: block; }
.af-eyebrow { font: 500 11px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .14em; color: var(--fg3); text-align: center; margin: 0 0 8px; }
.af-title { font: 600 23px/1.2 var(--font-sans); letter-spacing: -0.01em; color: var(--fg1); text-align: center; margin: 0 0 8px; }
.af-subtitle { font: 400 14px/1.55 var(--font-sans); color: var(--fg2); text-align: center; margin: 0 auto 24px; max-width: 300px; }
.af-title:has(+ .af-subtitle[hidden]) { margin-bottom: 22px; }
/* Correo con dominio fijo (suffix addon) */
.af-affix { display: flex; align-items: stretch; }
.af-affix .af-input { flex: 1 1 auto; min-width: 0; }
.af-affix.has-suffix .af-input { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: none; }
.af-affix-suffix { display: flex; align-items: center; padding: 0 14px; flex-shrink: 0; border: 1px solid var(--color-border-default); border-left: none; border-radius: 0 var(--radius-md) var(--radius-md) 0; background: var(--color-bg-subtle); color: var(--fg2); font: 400 14px/1.2 var(--font-sans); white-space: nowrap; }
.af-affix.has-suffix:focus-within .af-input, .af-affix.has-suffix:focus-within .af-affix-suffix { border-color: var(--af-focus-border); }
.af-field.is-error .af-affix.has-suffix .af-input, .af-field.is-error .af-affix-suffix { border-color: var(--color-error); }
/* S281 · Avisos del login · sin relleno (DS) + expansión/contracción suave de la card al aparecer/desaparecer + shake en error. */
.af-notice { display: flex; gap: 9px; align-items: flex-start; padding: 0; border-radius: 0; font-size: 13px; line-height: 1.5; margin-bottom: 18px; overflow: hidden; transition: max-height 320ms var(--ease-default), opacity 200ms ease, margin-top 320ms var(--ease-default), margin-bottom 320ms var(--ease-default); }
.af-notice .af-n-ico { flex-shrink: 0; display: flex; align-items: center; height: calc(13px * 1.5); }
.af-notice .af-n-ico svg { width: 16px; height: 16px; }
.af-notice .af-n-body { color: var(--fg2); }
.af-notice .af-n-body strong { font-weight: 600; }
.af-notice .af-n-link { display: inline-block; margin-top: 3px; font-weight: 500; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; cursor: pointer; }
/* sin fondo: ícono, enlace y cuerpo toman el color semántico -deep */
.af-notice.info    { color: var(--color-info-deep); }
.af-notice.success { color: var(--color-success-deep); }
.af-notice.warning { color: var(--color-warning-deep); }
.af-notice.error   { color: var(--color-error-deep); }
.af-notice.info .af-n-body, .af-notice.success .af-n-body, .af-notice.warning .af-n-body, .af-notice.error .af-n-body { color: inherit; }
.af-notice .af-n-ico, .af-notice .af-n-link { color: inherit; }
/* contenido entra con leve ascenso (fade + 6px) mientras la altura se desliza */
.af-notice.af-in .af-n-ico, .af-notice.af-in .af-n-body { animation: af-step-in 320ms var(--ease-default); }
/* error: shake horizontal sutil (≤3px) — la altura la absorbe la transición */
.af-notice.error.shake { animation: af-err-in 380ms var(--ease-default); }
@keyframes af-step-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes af-err-in { 0% { opacity: 0; transform: translateX(0); } 20% { opacity: 1; transform: translateX(-3px); } 40% { transform: translateX(3px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } 100% { opacity: 1; transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .af-notice, .af-field-msg { transition: none; } .af-notice.af-in .af-n-ico, .af-notice.af-in .af-n-body, .af-notice.error.shake, .af-field-msg.shake { animation: none; } }
.af-fields { display: flex; flex-direction: column; gap: 13px; }
.af-field { position: relative; }
.af-field-label { display: block; font: 500 13px/1 var(--font-sans); color: var(--fg2); margin-bottom: 7px; }
.af-input { width: 100%; box-sizing: border-box; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); padding: 12px 14px; font: 400 14px/1.2 var(--font-sans); background: var(--color-surface); color: var(--fg1); outline: none; appearance: none; -webkit-appearance: none; transition: border-color var(--motion-fast) var(--ease-default); }
.af-input::placeholder { color: var(--fg3); }
input.af-input:focus, textarea.af-input:focus { outline: none; }
.af-input:focus { border-color: var(--af-focus-border); }
@keyframes af-focus-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--color-action-ink) 38%, transparent); } 100% { box-shadow: 0 0 0 8px color-mix(in oklab, var(--color-action-ink) 0%, transparent); } }
.af-field.is-pulsing .af-input { border-color: var(--af-focus-border); animation: af-focus-pulse 900ms var(--ease-default) 2; }
@media (prefers-reduced-motion: reduce) { .af-field.is-pulsing .af-input { animation: none; } }
.af-field.is-error .af-input { border-color: var(--color-error); }
.af-field.is-error .af-input:focus { border-color: var(--color-error); }
.af-field.is-success .af-input { border-color: var(--color-success-deep); }
.af-field.is-success .af-input:focus { border-color: var(--color-success-deep); }
.af-pass { position: relative; }
.af-pass .af-input { padding-right: 44px; }
.af-pass-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: none; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--fg3); border-radius: 8px; transition: color var(--motion-fast), background var(--motion-fast); }
.af-pass-toggle:hover { color: var(--fg1); background: var(--color-bg-subtle); }
.af-pass-toggle svg { width: 18px; height: 18px; }
.af-field-msg { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 1.4; margin-top: 6px; color: var(--color-error-deep); overflow: hidden; transition: max-height 320ms var(--ease-default), opacity 200ms ease, margin-top 320ms var(--ease-default); }
.af-field-msg svg { width: 13px; height: 13px; flex-shrink: 0; }
.af-field-msg.shake { animation: af-err-in 380ms var(--ease-default); }
.af-field-msg.is-success { color: var(--color-success-deep); }
.af-help { font-size: 12px; line-height: 1.5; color: var(--fg3); margin-top: 7px; }
.af-locked { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); background: var(--color-bg-subtle); color: var(--fg2); font: 400 14px/1.2 var(--font-sans); cursor: not-allowed; }
.af-locked .af-locked-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.af-locked svg { width: 16px; height: 16px; color: var(--fg3); flex-shrink: 0; }
.af-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 20px; }
.af-check { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.af-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.af-check .af-box { width: 17px; height: 17px; border-radius: 5px; flex-shrink: 0; border: 1.5px solid var(--color-border-default); background: var(--color-surface); display: flex; align-items: center; justify-content: center; transition: background var(--motion-fast), border-color var(--motion-fast); }
.af-check .af-box svg { width: 12px; height: 12px; color: #fff; opacity: 0; }
.af-check input:checked + .af-box { background: var(--color-action-ink); border-color: var(--color-action-ink); }
.af-check input:checked + .af-box svg { opacity: 1; }
.af-check .af-check-label { font: 400 13px/1 var(--font-sans); color: var(--fg2); }
.af-link { background: none; border: none; cursor: pointer; padding: 0; font: 500 13px/1 var(--font-sans); color: var(--fg1); text-decoration: underline; text-decoration-color: var(--color-border-default); text-underline-offset: 3px; transition: text-decoration-color var(--motion-fast); }
.af-link:hover { text-decoration-color: var(--fg1); }
.af-link:disabled { color: var(--fg3); cursor: default; text-decoration: none; }
.af-btn { width: 100%; box-sizing: border-box; padding: 14px 22px; border: none; border-radius: var(--radius-button); background: var(--color-action-ink); color: var(--color-action-text-on); font: 600 14px/1 var(--font-sans); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background var(--motion-fast) var(--ease-default), transform var(--motion-fast); }
.af-btn:hover { background: var(--color-action-ink-hover); }
.af-btn:active { transform: scale(0.985); }
.af-btn:disabled { opacity: 0.55; cursor: default; }
.af-btn.is-loading { cursor: default; }
.af-btn .af-spin { width: 16px; height: 16px; animation: af-spin 0.7s linear infinite; }
@keyframes af-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .af-btn .af-spin { animation: none; } }
.af-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; font: 400 12px/1 var(--font-sans); color: var(--fg3); }
.af-divider::before, .af-divider::after { content: ""; flex: 1; height: 1px; background: var(--color-border-subtle); }
.af-btn-ghost { width: 100%; box-sizing: border-box; padding: 12px 22px; border-radius: var(--radius-button); border: 1px solid var(--color-border-default); background: var(--color-surface); color: var(--fg1); font: 500 13px/1 var(--font-sans); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background var(--motion-fast), border-color var(--motion-fast); }
.af-btn-ghost:hover { background: var(--color-bg-subtle); border-color: var(--color-border-strong); }
.af-btn-ghost:disabled { opacity: .55; cursor: default; }
.af-btn-ghost .gicon { width: 18px; height: 18px; flex-shrink: 0; }
.af-footer { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--color-border-subtle); text-align: center; font: 400 13px/1.5 var(--font-sans); color: var(--fg2); }
.af-footer a, .af-footer .af-link { color: var(--fg1); font-weight: 500; }
.af-otp { display: flex; gap: 8px; justify-content: center; margin-bottom: 4px; }
.af-otp-box { width: 48px; height: 48px; border-radius: var(--radius-md); border: 1px solid var(--color-border-default); background: var(--color-surface); padding: 0; text-align: center; font: 600 22px/48px var(--font-sans); font-variant-numeric: tabular-nums; color: var(--fg1); outline: none; }
.af-otp-box.filled { border-color: var(--color-border-strong); }
.af-otp-box:focus, .af-otp-box.active { border-color: var(--af-focus-border); }
.af-otp.is-error .af-otp-box { border-color: var(--color-error); }
.af-status-ico { width: 52px; height: 52px; border-radius: 999px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; }
.af-status-ico svg { width: 26px; height: 26px; }
.af-status-ico.success { background: var(--color-accent-green); }
.af-status-ico.success svg { width: 28px; height: 28px; stroke-width: 3; color: #fff; }
.af-reqs { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.af-req { display: flex; align-items: center; gap: 7px; font: 400 12px/1 var(--font-sans); color: var(--fg3); }
.af-req svg { width: 14px; height: 14px; flex-shrink: 0; }
.af-req.met { color: var(--fg1); }
.af-req .af-req-badge { display: flex; color: var(--color-success); }