/* Primera parte del CSS global del portal actual, en el mismo orden que App.razor: lo que va antes del CSS aislado de los
componentes (Bheli.CompanyPortal.Web.styles.css). Después van los CSS Modules de las piezas compartidas (main.tsx) y
recién después legacy.css, así team.css y los demás pisan a los módulos igual que en Blazor. *//* Copper/Amber preset. Raw color values belong only in this file.
Components consume colors.css, never these palette/preset variables. */
:root,
[data-color-theme="bheli-copper"] {
--palette-copper-50: #FFF7F1;
--palette-copper-100: #FCEADB;
--palette-copper-200: #F7D0B5;
--palette-copper-300: #EFB28A;
--palette-copper-400: #E18E5D;
--palette-copper-500: #C96F3F;
--palette-copper-600: #AC5530;
--palette-copper-700: #8B4229;
--palette-copper-800: #703624;
--palette-copper-900: #5B2E21;
--palette-copper-950: #32170F;
--palette-amber-50: #FFF9EB;
--palette-amber-100: #FFF0C7;
--palette-amber-200: #FFDF8A;
--palette-amber-300: #F5C65A;
--palette-amber-400: #E3A43D;
--palette-amber-500: #C98527;
--palette-amber-600: #A5651D;
--palette-amber-700: #804B1A;
--palette-amber-800: #663D1A;
--palette-amber-900: #553418;
--palette-amber-950: #301A0B;
--palette-neutral-0: #FFFFFF;
--palette-neutral-50: #FBF8F6;
--palette-neutral-100: #F5EFEB;
--palette-neutral-200: #E9DED7;
--palette-neutral-300: #D8C8BE;
--palette-neutral-400: #B7A59B;
--palette-neutral-500: #948078;
--palette-neutral-600: #735F58;
--palette-neutral-700: #594943;
--palette-neutral-750: #463C3A;
--palette-neutral-800: #3C312D;
--palette-neutral-825: #322A26;
--palette-neutral-850: #2C2421;
--palette-neutral-900: #221B19;
--palette-neutral-925: #1B1614;
--palette-neutral-950: #15110F;
--palette-neutral-1000: #0D0A09;
--palette-success-50: #EFF8F3;
--palette-success-100: #D8F0E2;
--palette-success-200: #B4DFC8;
--palette-success-300: #82C8A5;
--palette-success-400: #52AC82;
--palette-success-500: #338F67;
--palette-success-600: #267451;
--palette-success-700: #205D43;
--palette-success-800: #1D4B37;
--palette-success-900: #193E30;
--palette-success-950: #0D241B;
--palette-danger-50: #FFF4F2;
--palette-danger-100: #FFE3DE;
--palette-danger-200: #FFC8BF;
--palette-danger-300: #F6A091;
--palette-danger-400: #EC6C5E;
--palette-danger-500: #D94F43;
--palette-danger-600: #B93C34;
--palette-danger-700: #96322D;
--palette-danger-800: #7C2C29;
--palette-danger-900: #672824;
--palette-danger-950: #381211;
--palette-info-50: #F2F7FC;
--palette-info-100: #DDEAF7;
--palette-info-200: #BDD5EE;
--palette-info-300: #9BBCE2;
--palette-info-400: #719BCF;
--palette-info-500: #527FB9;
--palette-info-600: #3D6EA8;
--palette-info-700: #2E5C91;
--palette-info-800: #294C75;
--palette-info-900: #263F60;
--palette-info-950: #17273D;
/* Independently designed low-luminance fills, not inverted scales. */
--palette-brand-dark-fill: #3A241A;
--palette-brand-dark-hover: #4A2C1E;
--palette-amber-dark-fill: #2C2112;
--palette-success-dark-fill: #13251E;
--palette-danger-dark-fill: #2B1715;
--palette-info-dark-fill: #142033;
--preset-canvas: light-dark(var(--palette-neutral-50), var(--palette-neutral-950));
--preset-surface: light-dark(var(--palette-neutral-0), var(--palette-neutral-925));
--preset-surface-subtle: light-dark(var(--palette-neutral-100), var(--palette-neutral-900));
--preset-surface-muted: light-dark(var(--palette-neutral-200), var(--palette-neutral-850));
--preset-surface-raised: light-dark(var(--palette-neutral-0), var(--palette-neutral-825));
--preset-surface-inverse: light-dark(var(--palette-neutral-900), var(--palette-neutral-100));
--preset-sidebar: light-dark(var(--palette-neutral-100), var(--palette-neutral-925));
--preset-text-primary: light-dark(var(--palette-neutral-900), var(--palette-neutral-100));
/* Texto del botón claro (secundario) según C04, #2A2420 en claro; antes el texto principal #221B19 (dueño, 26-10-2026). */
--preset-button-secondary-text: light-dark(#2A2420, var(--palette-neutral-100));
--preset-text-secondary: light-dark(var(--palette-neutral-700), var(--palette-neutral-300));
--preset-text-muted: light-dark(#756A62, var(--palette-neutral-400));
--preset-text-disabled: var(--palette-neutral-500);
--preset-text-inverse: light-dark(var(--palette-neutral-0), var(--palette-neutral-950));
--preset-border-subtle: light-dark(var(--palette-neutral-200), var(--palette-neutral-825));
--preset-border-default: light-dark(var(--palette-neutral-300), var(--palette-neutral-750));
--preset-border-strong: light-dark(var(--palette-neutral-400), var(--palette-neutral-700));
--preset-control-border: light-dark(#978A80, #796C63);
/* Terracota del kit (C26, base de acción y marca) en claro; antes copper-600 #AC5530 (decisión del dueño, 26-10-2026). */
--preset-brand: light-dark(oklch(0.55 0.14 40), var(--palette-copper-400));
/* Hover del kit (C26) en claro; antes copper-700 #8B4229 (decisión del dueño, 26-10-2026). */
--preset-brand-hover: light-dark(oklch(0.49 0.14 40), var(--palette-copper-300));
--preset-brand-active: light-dark(var(--palette-copper-800), var(--palette-copper-500));
--preset-brand-subtle: light-dark(var(--palette-copper-50), var(--palette-brand-dark-fill));
--preset-brand-subtle-hover: light-dark(var(--palette-copper-100), var(--palette-brand-dark-hover));
--preset-brand-border: light-dark(var(--palette-copper-300), var(--palette-copper-700));
--preset-on-brand: light-dark(var(--palette-neutral-0), #1E1A17);
--preset-selection-bg: light-dark(var(--palette-copper-100), var(--palette-brand-dark-fill));
--preset-selection-text: light-dark(var(--palette-copper-950), var(--palette-copper-200));
--preset-ai-accent: light-dark(var(--palette-amber-600), var(--palette-amber-300));
--preset-ai-bg: light-dark(var(--palette-amber-50), var(--palette-amber-dark-fill));
--preset-ai-border: light-dark(var(--palette-amber-200), var(--palette-amber-700));
--preset-ai-text: light-dark(var(--palette-amber-800), var(--palette-amber-200));
--preset-success-bg: light-dark(var(--palette-success-50), var(--palette-success-dark-fill));
--preset-success-text: light-dark(var(--palette-success-700), var(--palette-success-300));
--preset-success-border: light-dark(var(--palette-success-300), var(--palette-success-600));
--preset-success-icon: light-dark(var(--palette-success-600), var(--palette-success-300));
--preset-warning-bg: var(--preset-ai-bg);
--preset-warning-text: light-dark(var(--palette-amber-700), var(--palette-amber-300));
--preset-warning-border: light-dark(var(--palette-amber-300), var(--palette-amber-600));
--preset-warning-icon: var(--preset-ai-accent);
--preset-danger-bg: light-dark(var(--palette-danger-50), var(--palette-danger-dark-fill));
--preset-danger-text: light-dark(var(--palette-danger-700), var(--palette-danger-300));
--preset-danger-border: light-dark(var(--palette-danger-300), var(--palette-danger-700));
--preset-danger-icon: light-dark(var(--palette-danger-600), var(--palette-danger-300));
--preset-danger-action: light-dark(var(--palette-danger-600), var(--palette-danger-400));
--preset-danger-hover: light-dark(var(--palette-danger-700), var(--palette-danger-300));
--preset-info-bg: light-dark(var(--palette-info-50), var(--palette-info-dark-fill));
--preset-info-text: light-dark(var(--palette-info-700), var(--palette-info-300));
--preset-info-border: light-dark(var(--palette-info-300), var(--palette-info-600));
--preset-info-icon: light-dark(var(--palette-info-600), var(--palette-info-300));
--preset-overlay: light-dark(rgba(50,23,15,0.38), rgba(0,0,0,0.62));
--preset-shadow-color: light-dark(rgb(50 23 15 / .08), rgb(0 0 0 / .4));
--preset-shadow-lg-color: light-dark(rgb(50 23 15 / .12), rgb(0 0 0 / .5));
--preset-scroll-thumb: light-dark(var(--palette-neutral-400), var(--palette-neutral-700));
--preset-scroll-thumb-hover: light-dark(var(--palette-neutral-500), var(--palette-neutral-600));
--preset-code-text: light-dark(var(--palette-neutral-800), var(--palette-neutral-200));
--preset-skeleton-highlight: light-dark(var(--palette-neutral-100), var(--palette-neutral-800));
/* Chart series are not UI statuses. */
--preset-chart-1: var(--preset-brand);
--preset-chart-2: light-dark(var(--palette-info-600), #7FA7D6);
--preset-chart-3: light-dark(#2E7D5B, var(--palette-success-300));
--preset-chart-4: var(--preset-ai-accent);
--preset-chart-5: light-dark(#9B4D6F, #D990AE);
--preset-chart-6: light-dark(#3A7D78, #72B8B0);
--preset-chart-7: light-dark(#6B5CA5, #A89BDB);
--preset-chart-8: var(--preset-text-muted);
/* Identidad Bheli (kit BRAND.md): valores exactos de marca. brand.css los consume vía --logo-*. */
--bheli-cobre: #AC5530;
--bheli-cobre-dark: #E18E5D;
--bheli-miel: #A5651D;
--bheli-miel-dark: #F5C65A;
--bheli-crema: #FBF8F6;
--bheli-arena: #F5EFEB;
--bheli-arena-2: #E9DED7;
--bheli-espresso: #1B1614;
--bheli-espresso-0: #15110F;
--bheli-carbon: #221B19;
--bheli-font: 'Lexend', 'Segoe UI', system-ui, sans-serif;
--bheli-logo-black: #000000;
--bheli-logo-white: #FFFFFF;
}
/* Chat dedicado: tokens de la referencia aprobada, aislados del Dock y de la marca global. */
.chat-workspace {
--chat-accent: oklch(0.55 0.14 40);
--chat-accent-hover: oklch(0.49 0.14 40);
--chat-accent-soft: oklch(0.955 0.025 50);
--chat-accent-border: oklch(0.85 0.06 45);
--chat-accent-text: oklch(0.45 0.12 40);
--chat-ai-text: oklch(0.45 0.13 300);
--chat-ai-soft: oklch(0.955 0.022 300);
--chat-ai-border: oklch(0.86 0.05 300);
--chat-unassigned-text: oklch(0.52 0.1 70);
--chat-unassigned-soft: oklch(0.955 0.035 80);
--chat-unassigned-border: oklch(0.86 0.06 80);
--chat-text: #2A2420;
--chat-text-secondary: #6B615A;
/* C01: gris terciario AA sobre las cuatro superficies cálidas aprobadas. */
--chat-text-tertiary: #756A62;
/* C56 · íconos del cuadro de texto; C07 1.14.10 · línea entre grupos de la fila de filtros. */
--chat-composer-icon: #5F554E;
--chat-filter-divider: #E3DAD2;
--chat-border: #ECE5DE;
--chat-chip-border: #DFD5CC;
--chat-list-background: #FFFFFF;
--chat-thread-background: #F5EFE9;
--chat-search-background: #F3EEE9;
--chat-neutral-soft: #F2ECE6;
--chat-active-background: oklch(0.955 0.012 60);
--chat-own-background: oklch(0.955 0.035 55);
--chat-own-text: var(--chat-text);
--chat-note-background: oklch(0.95 0.02 70);
--chat-menu-radius: 14px;
--chat-row-radius: 12px;
--chat-menu-shadow: 0 12px 32px rgb(42 36 32 / .14), 0 2px 6px rgb(42 36 32 / .06);
--chat-bubble-shadow: 0 1px 1px rgb(42 36 32 / .07);
--chat-toast-shadow: 0 8px 24px rgb(0 0 0 / .18);
--chat-row-hover-shadow: inset 0 0 0 999px rgb(60 40 20 / .035);
--chat-on-unread: #FFF;
--chat-toast-background: #2A2420;
--chat-toast-text: #FFFFFF;
}
:root[data-theme="dark"] .chat-workspace {
--chat-on-unread: var(--primary-contrast);
--chat-accent: var(--primary);
--chat-accent-hover: var(--link-hover);
--chat-accent-soft: var(--primary-soft);
--chat-accent-border: #7B503D;
--chat-accent-text: #F2B493;
--chat-ai-text: #D6B8F4;
--chat-ai-soft: #302437;
--chat-ai-border: #665173;
--chat-unassigned-text: #E7C17A;
--chat-unassigned-soft: #362B1D;
--chat-unassigned-border: #756044;
--chat-text: var(--text);
--chat-text-secondary: var(--text-muted);
--chat-text-tertiary: var(--text-muted);
--chat-composer-icon: #B7A59B;
--chat-filter-divider: #5A4E48;
--chat-border: var(--border);
--chat-chip-border: var(--border);
--chat-list-background: var(--surface);
--chat-thread-background: var(--canvas);
--chat-search-background: var(--surface-muted);
--chat-neutral-soft: var(--surface-muted);
--chat-active-background: var(--surface-muted);
--chat-own-background: #493024;
--chat-note-background: var(--surface-muted);
--chat-menu-shadow: var(--shadow-lg);
}
/* Sin el adaptador JS, SYSTEM conserva la variante oscura del chat. */
@media (prefers-color-scheme: dark) {
:root[data-theme="system"] .chat-workspace {
--chat-on-unread: var(--primary-contrast);
--chat-accent: var(--primary);
--chat-accent-hover: var(--link-hover);
--chat-accent-soft: var(--primary-soft);
--chat-accent-border: #7B503D;
--chat-accent-text: #F2B493;
--chat-ai-text: #D6B8F4;
--chat-ai-soft: #302437;
--chat-ai-border: #665173;
--chat-unassigned-text: #E7C17A;
--chat-unassigned-soft: #362B1D;
--chat-unassigned-border: #756044;
--chat-text: var(--text);
--chat-text-secondary: var(--text-muted);
--chat-text-tertiary: var(--text-muted);
--chat-composer-icon: #B7A59B;
--chat-filter-divider: #5A4E48;
--chat-border: var(--border);
--chat-chip-border: var(--border);
--chat-list-background: var(--surface);
--chat-thread-background: var(--canvas);
--chat-search-background: var(--surface-muted);
--chat-neutral-soft: var(--surface-muted);
--chat-active-background: var(--surface-muted);
--chat-own-background: #493024;
--chat-note-background: var(--surface-muted);
--chat-menu-shadow: var(--shadow-lg);
}
}
/* Paleta finita estable: los componentes seleccionan clases, nunca estilos inline. */
.chat-workspace .chat-avatar-tone-0 { --chat-avatar-hue: 0; }
.chat-workspace .chat-avatar-tone-1 { --chat-avatar-hue: 30; }
.chat-workspace .chat-avatar-tone-2 { --chat-avatar-hue: 60; }
.chat-workspace .chat-avatar-tone-3 { --chat-avatar-hue: 90; }
.chat-workspace .chat-avatar-tone-4 { --chat-avatar-hue: 120; }
.chat-workspace .chat-avatar-tone-5 { --chat-avatar-hue: 150; }
.chat-workspace .chat-avatar-tone-6 { --chat-avatar-hue: 180; }
.chat-workspace .chat-avatar-tone-7 { --chat-avatar-hue: 210; }
.chat-workspace .chat-avatar-tone-8 { --chat-avatar-hue: 240; }
.chat-workspace .chat-avatar-tone-9 { --chat-avatar-hue: 270; }
.chat-workspace .chat-avatar-tone-10 { --chat-avatar-hue: 300; }
.chat-workspace .chat-avatar-tone-11 { --chat-avatar-hue: 330; }
.chat-workspace :is(.chat-row-avatar, .chat-thread-avatar, .a1-filter-avatar, .a1-agent-avatar, .a2-agent-avatar, .chat-contact-agent-avatar, .chat-group-chip-avatar) {
--chat-avatar-background: light-dark(oklch(0.93 0.035 var(--chat-avatar-hue, 50)), oklch(0.32 0.035 var(--chat-avatar-hue, 50)));
--chat-avatar-text: light-dark(oklch(0.42 0.08 var(--chat-avatar-hue, 50)), oklch(0.85 0.05 var(--chat-avatar-hue, 50)));
}
.reply-library{--reply-accent:oklch(.55 .14 40);--reply-accent-hover:oklch(.49 .14 40);--reply-soft:oklch(.955 .025 50);--reply-accent-border:oklch(.85 .06 45);--reply-accent-text:oklch(.45 .12 40);--reply-text:#2A2420;--reply-secondary:#6B615A;--reply-meta:#756A62;--reply-line:#ECE5DE;--reply-control-border:#DFD5CC;--reply-surface:#FFF;--reply-hover:#F3EDE7;--reply-search:#F3EEE9;--reply-chat:#F5EFE9;--reply-own:oklch(.955 .035 55);--reply-variable:oklch(.92 .08 85);--reply-neutral:#EFE8E1;--reply-ochre:oklch(.955 .035 80);--reply-ochre-text:oklch(.52 .1 70);--reply-focus:oklch(.93 .04 50);--reply-floating:0 12px 32px rgb(42 36 32/.14),0 2px 6px rgb(42 36 32/.06)}
:root[data-theme=dark] .reply-library{--reply-accent:var(--primary);--reply-accent-hover:var(--link-hover);--reply-soft:var(--primary-soft);--reply-accent-border:#7B503D;--reply-accent-text:#F2B493;--reply-text:var(--text);--reply-secondary:var(--text-muted);--reply-meta:var(--text-muted);--reply-line:var(--border);--reply-control-border:var(--border);--reply-surface:var(--surface);--reply-hover:var(--surface-muted);--reply-search:var(--surface-muted);--reply-chat:var(--canvas);--reply-own:#493024;--reply-variable:#655027;--reply-neutral:var(--surface-muted);--reply-ochre:#362B1D;--reply-ochre-text:#E7C17A;--reply-focus:var(--primary-soft);--reply-floating:var(--shadow-lg)}
/* Chat › Equipo R1 · tokens de .tm (catálogo 1.13, mismos pares que el Chat y Respuestas), claro y oscuro; team.css
solo los usa con var(). */
.tm{--tm-accent:oklch(.55 .14 40);--tm-accent-hover:oklch(.49 .14 40);--tm-accent-pressed:oklch(.44 .13 40);--tm-on-accent:#FFF;
--tm-soft:oklch(.955 .025 50);--tm-soft-pressed:oklch(.93 .035 50);--tm-accent-border:oklch(.85 .06 45);--tm-accent-text:oklch(.45 .12 40);
--tm-text:#2A2420;--tm-secondary:#6B615A;--tm-meta:#756A62;--tm-disabled:#B9AEA5;--tm-line:#ECE5DE;--tm-control-border:var(--control-border);
--tm-surface:#FFF;--tm-page:#FBF8F5;--tm-hover:#F3EDE7;--tm-row-hover:#F6F1EC;--tm-search:#F3EEE9;--tm-secondary-bg:#F3EDE7;
--tm-secondary-hover:#ECE4DC;--tm-secondary-pressed:#E3D9CF;--tm-neutral:#F2ECE6;--tm-switch-off:var(--control-border);--tm-ochre:oklch(.955 .035 80);
--tm-ochre-text:oklch(.52 .1 70);--tm-error:oklch(.5 .17 25);--tm-focus:oklch(.93 .04 50);
--tm-floating:0 12px 32px rgb(42 36 32/.14),0 2px 6px rgb(42 36 32/.06);
--tm-knob:#FFF;--tm-toast-background:#2A2420;--tm-toast-text:#FFF;--tm-toast-link:oklch(.82 .09 50);--tm-menu-border:#EFE8E1;--tm-mask:var(--ui-mask)}
:root[data-theme=dark] .tm{--tm-accent:var(--primary);--tm-accent-hover:var(--link-hover);--tm-accent-pressed:var(--link-hover);--tm-on-accent:#1E1A17;
--tm-soft:var(--primary-soft);--tm-soft-pressed:#4A3127;--tm-accent-border:#7B503D;--tm-accent-text:#F2B493;--tm-text:var(--text);
--tm-secondary:var(--text-muted);--tm-meta:var(--text-muted);--tm-disabled:#7E746D;--tm-line:var(--border);--tm-control-border:var(--control-border);
--tm-surface:var(--surface);--tm-page:var(--canvas);--tm-hover:var(--surface-muted);--tm-row-hover:var(--surface-muted);
--tm-search:var(--surface-muted);--tm-secondary-bg:var(--surface-muted);--tm-secondary-hover:#3A332F;--tm-secondary-pressed:#433B36;
--tm-neutral:var(--surface-muted);--tm-switch-off:var(--control-border);--tm-ochre:#362B1D;--tm-ochre-text:#E7C17A;--tm-error:oklch(.8 .1 25);
--tm-focus:var(--primary-soft);--tm-floating:var(--shadow-lg);--tm-menu-border:var(--tm-line)}
/* K7 · C01 1.14.5: el anillo de foco es el token global --focus-ring-shadow (color-controls.css); el tema .tm ya no tiene copia. */
.tm .tm-avatar{--tm-avatar-background:light-dark(oklch(.93 .035 var(--chat-avatar-hue,50)),oklch(.32 .035 var(--chat-avatar-hue,50)));
--tm-avatar-text:light-dark(oklch(.42 .08 var(--chat-avatar-hue,50)),oklch(.85 .05 var(--chat-avatar-hue,50)))}
/* A1 · C26: additional semantic pairs used by the revised components. */
:root {
--ui-tertiary: light-dark(#756A62,var(--preset-text-muted));
--ui-error: light-dark(oklch(.5 .17 25),oklch(.8 .1 25));
--ui-on-primary: var(--on-brand);
--ui-control-foreground: light-dark(#3E3631,var(--text-primary));
--ui-hover: light-dark(#F3EDE7,var(--background-surface-muted));
--ui-contact-tag-background: light-dark(#F2ECE6,var(--background-surface-muted));
--ui-contact-tag-foreground: light-dark(#6B615A,var(--text-secondary));
--channel-whatsapp-background: #25D366;
--channel-whatsapp-foreground: #FFFFFF;
}
.reply-library {
--reply-meta: var(--ui-tertiary);
--reply-on-accent: var(--ui-on-primary);
--reply-error: var(--ui-error);
}
:root{--ui-mask:#000;--ui-header-secondary:light-dark(#6B615A,var(--text-secondary));}
/* A1 decision3: accessible control borders preserve the approved hue, with adjusted lightness. */
:root{
--ui-control-border:light-dark(oklch(.64 .02 65),oklch(.66 .025 55));
--ui-accent-control-border:light-dark(oklch(.62 .06 45),oklch(.68 .06 45));
--ui-ai-control-border:light-dark(oklch(.62 .05 300),oklch(.68 .05 300));
}
:root .reply-library,:root[data-theme=dark] .reply-library{
--reply-control-border:var(--ui-control-border);
--reply-focus:var(--primary);
}
/* Contactos (rondas K y K.1, C04/C07/C13/C27/C28 1.13): píldoras encendidas y presionadas, ✓ de la hoja de orden,
× y «Deshacer» de las etiquetas, anillo de foco y textos desactivados. Valores del catálogo; en oscuro, los del tema. */
:root{
--contact-pill-off-border:light-dark(#DFD5CC,var(--border-default));
--contact-pill-on-background:light-dark(oklch(0.955 0.025 50),var(--brand-subtle));
--contact-pill-on-border:light-dark(oklch(0.85 0.06 45),var(--brand-border));
--contact-pill-on-text:light-dark(oklch(0.45 0.12 40),var(--selection-text));
--contact-pill-pressed:light-dark(oklch(0.93 0.035 50),var(--background-surface-raised));
--contact-pill-off-pressed:light-dark(oklch(0.955 0.025 50),var(--background-surface-muted));
--contact-pill-off-pressed-border:light-dark(oklch(0.85 0.06 45),var(--border-default));
--contact-sort-check:light-dark(oklch(0.5 0.14 40),var(--primary));
--contact-tag-remove-hover:light-dark(rgba(42,36,32,.08),rgba(255,255,255,.10));
--contact-tag-remove-pressed:light-dark(rgba(42,36,32,.12),rgba(255,255,255,.16));
--contact-toast-action:light-dark(oklch(0.82 0.09 50),oklch(0.45 0.12 40));
--contact-focus-ring:oklch(0.93 0.04 50);
/* KH7 · C01/C30: sombra de lo que flota (menús, toasts, ventanas) y fondo de página detrás de una ventana. */
--shadow-floating:0 12px 32px light-dark(rgba(42,36,32,.14),rgba(0,0,0,.45)),0 2px 6px light-dark(rgba(42,36,32,.06),rgba(0,0,0,.25));
--backdrop-page:light-dark(rgba(42,36,32,.40),rgba(0,0,0,.55));
--contact-disabled-text:#B9AEA5;
/* KD4 · C15: variante neutra de la etiqueta (#F2ECE6 / #6B615A); en oscuro, los neutros del tema. */
--contact-tag-neutral-background:light-dark(#F2ECE6,var(--palette-neutral-850));
--contact-tag-neutral-text:light-dark(#6B615A,var(--palette-neutral-300));
}
/* C15 1.14.3 · Etiquetas R1: los 20 colores de etiqueta viven en una sola definición, contacts/tagColor.ts (relleno y
texto de su par, iguales en claro y en oscuro); la etiqueta recibe --contact-tag-background/-foreground en línea. */
/* Píldora de etiqueta de los filtros (C15 1.14.3): sin elegir, la píldora de C07 con un punto de 10 px de su relleno
(anillo de 1 px) a 6 px del nombre; elegida, llena de su relleno, sin borde, con ✓ y el texto de su par. Sin color
guardado no recibe variables y va neutra; nunca un color de respaldo. */
.c2-tag-chip {
--contact-tag-chip-background: var(--contact-tag-background, var(--contact-tag-neutral-background));
--contact-tag-chip-foreground: var(--contact-tag-foreground, var(--contact-tag-neutral-text));
--contact-tag-dot-ring: light-dark(rgba(42,36,32,.2), rgba(255,255,255,.24));
}
.c2-tag-dot { flex: 0 0 10px; width: 10px; height: 10px; border-radius: 50%; background: var(--contact-tag-chip-background); box-shadow: 0 0 0 1px var(--contact-tag-dot-ring); }
/* El punto de color de una etiqueta (selector) es el color de su texto; sin color, el neutro. Nunca vacío. */
.e1-tag-dot { --contact-tag-dot: var(--contact-tag-foreground, var(--contact-tag-neutral-text)); }
/* C1 reutiliza el avatar ChatAvatar con sus pares fuera del workspace del chat. */
.c1-workspace .chat-avatar-tone-0{--chat-avatar-hue:0}
.c1-workspace .chat-avatar-tone-1{--chat-avatar-hue:30}
.c1-workspace .chat-avatar-tone-2{--chat-avatar-hue:60}
.c1-workspace .chat-avatar-tone-3{--chat-avatar-hue:90}
.c1-workspace .chat-avatar-tone-4{--chat-avatar-hue:120}
.c1-workspace .chat-avatar-tone-5{--chat-avatar-hue:150}
.c1-workspace .chat-avatar-tone-6{--chat-avatar-hue:180}
.c1-workspace .chat-avatar-tone-7{--chat-avatar-hue:210}
.c1-workspace .chat-avatar-tone-8{--chat-avatar-hue:240}
.c1-workspace .chat-avatar-tone-9{--chat-avatar-hue:270}
.c1-workspace .chat-avatar-tone-10{--chat-avatar-hue:300}
.c1-workspace .chat-avatar-tone-11{--chat-avatar-hue:330}
.c1-workspace :is(.c1-avatar,.c1-mobile-avatar,.c1-detail-avatar,.c1-agent-avatar){
--contact-avatar-background:light-dark(oklch(.93 .035 var(--chat-avatar-hue,50)),oklch(.32 .035 var(--chat-avatar-hue,50)));
--contact-avatar-foreground:light-dark(oklch(.42 .08 var(--chat-avatar-hue,50)),oklch(.85 .05 var(--chat-avatar-hue,50)));
}
.c1-workspace .c1-agent-avatar.agent{
--contact-avatar-background:light-dark(oklch(.955 .022 300),oklch(.3 .06 300));
--contact-avatar-foreground:light-dark(oklch(.45 .13 300),oklch(.86 .08 300));
}
/* E1.4 · EC6 (E43): empleado IA y toast con los mismos valores que el chat (--chat-ai-*, --chat-toast-*, S7), en claro y oscuro;
el bloque del chat no se toca (sus pruebas de contrato fijan sus selectores).
E1.4 · EC2/EC3/EC5: tonos del mapa según data-ref="calor-tonos" (1–3 con número oscuro, 4–5 con blanco, ≥ 4,5:1);
serie anterior #B9AEA5; línea guía, aviso y sombra del interruptor como tokens (sin literales en statistics.css).
E1.3 · Estadísticas: colores de la referencia aprobada (docs/design/referencias/Referencia Componentes Estadisticas.dc.html),
aislados como los del chat: en claro los del catálogo y en oscuro los del tema. Los textos usan --text, --text-secondary y --text-muted (C29). */
/* KH13: los tokens del calendario de rango también valen donde se reutiliza (Contactos). */
.stat-workspace,.stat-range{--stat-accent:oklch(0.55 0.14 40);--stat-accent-soft:oklch(0.955 0.025 50);--stat-accent-border:oklch(0.85 0.06 45);--stat-accent-text:oklch(0.45 0.12 40);--stat-on-accent:#FFFFFF;--stat-card:#FFFFFF;--stat-line:#ECE5DE;--stat-menu-border:#EFE8E1;--stat-chip-border:#DFD5CC;--stat-soft:#F3EDE7;--stat-hover:#F6F1EC;--stat-heat-base:#F3EEE9;--stat-heat-ink:#2A2420;--stat-ink:#2A2420;--stat-future:#B9AEA5;--stat-handle:#DDD3CA;--stat-float:0 12px 32px rgb(42 36 32/.14),0 2px 6px rgb(42 36 32/.06);--stat-sheet-shadow:0 -6px 30px rgb(42 36 32/.18);--stat-good:oklch(0.45 0.1 150);--stat-bad:oklch(0.45 0.12 40);--stat-heat-1:oklch(0.95 0.03 50);--stat-heat-2:oklch(0.88 0.06 48);--stat-heat-3:oklch(0.76 0.1 45);--stat-heat-4:oklch(0.55 0.14 40);--stat-heat-5:oklch(0.45 0.13 38);--stat-heat-on:#FFFFFF;--stat-series-1:oklch(0.55 0.14 40);--stat-series-2:oklch(0.5 0.06 250);--stat-series-total:#2A2420;--stat-series-ai:oklch(0.5 0.13 300);--stat-track:#F3EEE9;--stat-table-head:#F6F1EC;--stat-row-line:#F0EAE4;--stat-fail:oklch(0.45 0.12 40);--stat-read-text:oklch(0.55 0.14 40);--stat-subtab-on:oklch(0.955 0.025 50);--stat-subtab-on-border:oklch(0.85 0.06 45);--stat-subtab-on-text:oklch(0.45 0.12 40);--stat-subtab-border:#DFD5CC;--stat-segment-on-shadow:0 1px 2px rgb(42 36 32/.12);--stat-ai-soft:oklch(0.955 0.022 300);--stat-ai-border:oklch(0.86 0.05 300);--stat-ai-text:oklch(0.45 0.13 300);--stat-toast-bg:#2A2420;--stat-toast-text:#FFFFFF;--stat-toast-shadow:0 8px 24px rgb(0 0 0/.18);--stat-previous:#B9AEA5;--stat-guide:#DDD3CA;--stat-warn:oklch(0.48 0.1 70);--stat-knob-shadow:0 1px 2px rgb(0 0 0/.2)}
:root[data-theme="dark"] .stat-workspace,:root[data-theme="dark"] .stat-range{--stat-accent:var(--primary);--stat-accent-soft:oklch(0.3 0.05 45);--stat-accent-border:#7B503D;--stat-accent-text:oklch(0.86 0.08 55);--stat-on-accent:var(--primary-contrast);--stat-card:#211C19;--stat-line:#3A322D;--stat-menu-border:var(--border);--stat-chip-border:var(--border);--stat-soft:var(--surface-muted);--stat-hover:var(--surface-muted);--stat-heat-base:#2E2724;--stat-heat-ink:#F3ECE6;--stat-heat-on:#1B1512;--stat-series-1:oklch(0.7 0.13 45);--stat-series-2:oklch(0.74 0.06 250);--stat-series-total:#F3ECE6;--stat-series-ai:oklch(0.74 0.12 300);--stat-track:#2E2724;--stat-table-head:#2E2724;--stat-row-line:#3A322D;--stat-fail:oklch(0.78 0.12 40);--stat-read-text:oklch(0.86 0.08 55);--stat-subtab-on:oklch(0.3 0.05 45);--stat-subtab-on-border:#7B503D;--stat-subtab-on-text:oklch(0.86 0.08 55);--stat-subtab-border:var(--border);--stat-segment-on-shadow:0 1px 2px rgb(0 0 0/.4);--stat-heat-1:oklch(0.34 0.05 45);--stat-heat-2:oklch(0.42 0.08 44);--stat-heat-3:oklch(0.49 0.11 42);--stat-heat-4:oklch(0.66 0.13 42);--stat-heat-5:oklch(0.76 0.13 48);--stat-ink:#F5EFEB;--stat-future:#B9AEA5;--stat-handle:var(--border);--stat-float:var(--shadow-lg);--stat-sheet-shadow:var(--shadow-lg);--stat-good:oklch(0.8 0.12 150);--stat-bad:oklch(0.8 0.1 45);--stat-ai-soft:#302437;--stat-ai-border:#665173;--stat-ai-text:#D6B8F4}
/* E1.3 · C31: mini avatar de 18 px del panel de ▾ con el tono de la persona. */
.stat-workspace :is(.stat-assignee-avatar,.stat-sender-avatar,.stat-team-avatar,.stat-rank-avatar){--stat-avatar-soft:light-dark(oklch(.9 .05 var(--chat-avatar-hue,50)),oklch(.32 .05 var(--chat-avatar-hue,50)));--stat-avatar-text:light-dark(oklch(.38 .09 var(--chat-avatar-hue,50)),oklch(.86 .06 var(--chat-avatar-hue,50)))}
/* E1.1 · ES10: el detalle de Estadísticas reutiliza ChatAvatar con sus pares fuera del chat. */
.stat-workspace .chat-avatar-tone-0{--chat-avatar-hue:0}
.stat-workspace .chat-avatar-tone-1{--chat-avatar-hue:30}
.stat-workspace .chat-avatar-tone-2{--chat-avatar-hue:60}
.stat-workspace .chat-avatar-tone-3{--chat-avatar-hue:90}
.stat-workspace .chat-avatar-tone-4{--chat-avatar-hue:120}
.stat-workspace .chat-avatar-tone-5{--chat-avatar-hue:150}
.stat-workspace .chat-avatar-tone-6{--chat-avatar-hue:180}
.stat-workspace .chat-avatar-tone-7{--chat-avatar-hue:210}
.stat-workspace .chat-avatar-tone-8{--chat-avatar-hue:240}
.stat-workspace .chat-avatar-tone-9{--chat-avatar-hue:270}
.stat-workspace .chat-avatar-tone-10{--chat-avatar-hue:300}
.stat-workspace .chat-avatar-tone-11{--chat-avatar-hue:330}
.stat-workspace .stat-detail-avatar{
--chat-avatar-background:light-dark(oklch(.93 .035 var(--chat-avatar-hue,50)),oklch(.32 .035 var(--chat-avatar-hue,50)));
--chat-avatar-text:light-dark(oklch(.42 .08 var(--chat-avatar-hue,50)),oklch(.85 .05 var(--chat-avatar-hue,50)));
}
/* A2 C01/C27: shared bottom-sheet roles, preserving the existing dark surfaces. */
:root[data-theme]{--ui-sheet-overlay:light-dark(rgba(42,36,32,.35),rgba(0,0,0,.62));--ui-sheet-handle:light-dark(#DDD3CA,var(--text-muted));--ui-menu-border:light-dark(#EFE8E1,var(--border));}
/* E1.4 · EC2: sombra del botón flotante del dock (E1.3) como token, sin literales en chat-dock.css. */
:root{--chat-dock-launcher-shadow:0 8px 22px rgb(42 36 32/.25)}
/* E2.1 · EE4: estado de los mensajes salientes (referencia entrega-estado): entregado sin leer y fallido. */
.stat-workspace{--stat-delivered:oklch(0.78 0.08 50);--stat-failed:oklch(0.5 0.17 25)}
:root[data-theme="dark"] .stat-workspace{--stat-delivered:oklch(0.52 0.07 50);--stat-failed:oklch(0.68 0.16 25)}
/* Theme-independent color contract. Replace the preset, not component CSS.
light-dark() requires modern browsers (Chrome/Edge 123+, Firefox 120+, Safari 17.5+).
No Organization configuration or branding editor is implemented here. */
:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
:root[data-theme="system"], :root:not([data-theme]) { color-scheme: dark; }
}
:root,
[data-color-theme] {
--background-canvas: var(--preset-canvas);
--background-surface: var(--preset-surface);
--background-surface-subtle: var(--preset-surface-subtle);
--background-surface-muted: var(--preset-surface-muted);
--background-surface-raised: var(--preset-surface-raised);
--background-surface-inverse: var(--preset-surface-inverse);
--background-sidebar: var(--preset-sidebar);
--background-topbar: var(--background-surface);
--text-primary: var(--preset-text-primary);
--text-secondary: var(--preset-text-secondary);
--text-muted: var(--preset-text-muted);
--text-disabled: var(--preset-text-disabled);
--text-inverse: var(--preset-text-inverse);
--icon-primary: var(--text-secondary);
--icon-secondary: var(--text-muted);
--icon-muted: var(--text-disabled);
--icon-inverse: var(--text-inverse);
--border-subtle: var(--preset-border-subtle);
--border-default: var(--preset-border-default);
--border-strong: var(--preset-border-strong);
--border-brand: var(--preset-brand-border);
--brand-default: var(--preset-brand);
--brand-hover: var(--preset-brand-hover);
--brand-active: var(--preset-brand-active);
--brand-subtle: var(--preset-brand-subtle);
--brand-subtle-hover: var(--preset-brand-subtle-hover);
--brand-border: var(--border-brand);
--on-brand: var(--preset-on-brand);
/* Primary dependency deliberately shared by links, focus and navigation.
Default focus is darker than proposed copper-500 for stronger contrast. */
--focus-ring: var(--brand-default);
--focus-offset: var(--background-canvas);
--selection-background: var(--preset-selection-bg);
--selection-text: var(--preset-selection-text);
--link-default: light-dark(color-mix(in srgb, var(--brand-default) 85%, var(--text-primary)), var(--brand-default));
--link-hover: var(--brand-hover);
--link-active: var(--brand-active);
--ai-accent: var(--preset-ai-accent);
--ai-background: var(--preset-ai-bg);
--ai-border: var(--preset-ai-border);
--ai-text: var(--preset-ai-text);
--status-success-background: var(--preset-success-bg);
--status-success-text: var(--preset-success-text);
--status-success-border: var(--preset-success-border);
--status-success-icon: var(--preset-success-icon);
--status-warning-background: var(--preset-warning-bg);
--status-warning-text: var(--preset-warning-text);
--status-warning-border: var(--preset-warning-border);
--status-warning-icon: var(--preset-warning-icon);
--status-danger-background: var(--preset-danger-bg);
--status-danger-text: var(--preset-danger-text);
--status-danger-border: var(--preset-danger-border);
--status-danger-icon: var(--preset-danger-icon);
--status-info-background: var(--preset-info-bg);
--status-info-text: var(--preset-info-text);
--status-info-border: var(--preset-info-border);
--status-info-icon: var(--preset-info-icon);
--action-danger-background: var(--preset-danger-action);
--action-danger-hover: var(--preset-danger-hover);
--action-danger-text: var(--on-brand);
--control-background: var(--background-surface);
--control-border: var(--preset-control-border);
--control-placeholder: var(--text-muted);
--control-disabled-background: var(--background-surface-subtle);
--control-disabled-text: var(--text-disabled);
--button-secondary-background: var(--background-surface-subtle);
--button-secondary-text: var(--preset-button-secondary-text);
--button-secondary-hover: var(--background-surface-muted);
--navigation-hover: var(--brand-subtle);
--navigation-active-background: var(--selection-background);
--navigation-active-text: var(--link-default);
--navigation-active-indicator: var(--brand-default);
--chat-own-background: var(--selection-background);
--chat-own-text: var(--selection-text);
--chat-other-background: var(--background-surface-subtle);
--chat-other-text: var(--text-primary);
--chat-ai-background: var(--ai-background);
--chat-ai-text: var(--ai-text);
--chat-ai-border: var(--ai-border);
--chat-quote-background: var(--background-canvas);
--chat-quote-border: var(--brand-border);
--chat-composer-background: var(--background-surface);
--code-background: var(--background-surface-subtle);
--code-text: var(--preset-code-text);
--overlay-background: var(--preset-overlay);
--shadow-color: var(--preset-shadow-color);
--shadow-lg-color: var(--preset-shadow-lg-color);
--scrollbar-track: var(--background-sidebar);
--scrollbar-thumb: var(--preset-scroll-thumb);
--scrollbar-thumb-hover: var(--preset-scroll-thumb-hover);
--progress-track: var(--border-subtle);
--progress-value: var(--brand-default);
--skeleton-base: var(--background-surface-muted);
--skeleton-highlight: var(--preset-skeleton-highlight);
--chart-series-1: var(--preset-chart-1);
--chart-series-2: var(--preset-chart-2);
--chart-series-3: var(--preset-chart-3);
--chart-series-4: var(--preset-chart-4);
--chart-series-5: var(--preset-chart-5);
--chart-series-6: var(--preset-chart-6);
--chart-series-7: var(--preset-chart-7);
--chart-series-8: var(--preset-chart-8);
/* Compatibility aliases; no independent palettes per portal/module. */
--ink: var(--text-primary);
--canvas: var(--background-canvas);
--surface: var(--background-surface);
--surface-muted: var(--background-surface-subtle);
--text: var(--text-primary);
--border: var(--border-default);
--primary: var(--brand-default);
--primary-hover: var(--brand-hover);
--primary-contrast: var(--on-brand);
--primary-soft: var(--brand-subtle);
--accent: var(--ai-accent);
--success: var(--status-success-text);
--success-bg: var(--status-success-background);
--warning: var(--status-warning-text);
--warning-bg: var(--status-warning-background);
--error: var(--status-danger-text);
--error-bg: var(--status-danger-background);
--info: var(--status-info-text);
--info-bg: var(--status-info-background);
--avatar-agent-bg: var(--ai-background);
--avatar-agent-fg: var(--ai-text);
}
/* Identidad Bheli: logo, loader y avatar (componentes Brand de Bheli.Web.Feedback).
Los hosts enlazan este archivo tras colors.css, sin tocar otros CSS:
Los valores crudos de marca viven solo en themes/bheli-copper.css (--bheli-*);
aquí solo se consumen por variable. Sin literales de color en este archivo. */
/* Lexend autoalojada (nombres definitivos verificados en wwwroot/brand/fonts del Agente A).
Los hosts deben exponer wwwroot/brand en la ruta /brand/ (igual que /brand/ui/avatar-assistant.svg). */
@font-face {
font-family: 'Lexend';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/brand/fonts/Lexend-Regular.woff2') format('woff2'), url('/brand/fonts/Lexend-Regular.ttf') format('truetype');
}
@font-face {
font-family: 'Lexend';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('/brand/fonts/Lexend-Medium.woff2') format('woff2'), url('/brand/fonts/Lexend-Medium.ttf') format('truetype');
}
@font-face {
font-family: 'Lexend';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('/brand/fonts/Lexend-SemiBold.woff2') format('woff2'), url('/brand/fonts/Lexend-SemiBold.ttf') format('truetype');
}
/* 700: valores grandes de las tarjetas y títulos (C01/C29); sin este archivo el navegador sintetiza la negrita desde 600. */
@font-face {
font-family: 'Lexend';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/brand/fonts/Lexend-Bold.woff2') format('woff2'), url('/brand/fonts/Lexend-Bold.ttf') format('truetype');
}
/* Fuente global de la interfaz con fallback del kit. */
body {
font-family: var(--bheli-font, 'Segoe UI', system-ui, sans-serif);
}
/* Logo: isotipo inline + wordmark en texto vivo. */
.bheli-logo {
display: inline-flex;
align-items: center;
font-family: var(--bheli-font, 'Segoe UI', system-ui, sans-serif);
}
/* Size admite cualquier entero >=16: el componente aporta solo --logo-size invariante inline.
Excepción dimensional acotada para conservar la API sin JS ni attr() tipado experimental;
colores, proporciones y excepciones permanecen aquí. data-logo-size identifica las excepciones. */
.bheli-logo--horizontal {
flex-direction: row;
gap: calc(var(--logo-size, 24) * 1px / 6);
}
.bheli-logo--vertical {
flex-direction: column;
gap: calc(var(--logo-size, 24) * 0.1px);
text-align: center;
}
.bheli-logo__mark {
display: block;
flex: none;
}
.bheli-logo__top {
fill: var(--logo-top);
}
.bheli-logo__bottom {
fill: var(--logo-bottom);
}
.bheli-logo__wordmark {
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1;
white-space: nowrap;
color: var(--logo-wordmark);
}
/* Regla general del kit: horizontal .667 del isotipo, vertical .48. */
.bheli-logo--horizontal .bheli-logo__wordmark {
font-size: calc(var(--logo-size, 24) * 0.667px);
}
.bheli-logo--vertical .bheli-logo__wordmark {
font-size: calc(var(--logo-size, 24) * 0.48px);
}
/* Excepciones explícitas: cabecera isotipo 24 + texto 18 gap 8; auth isotipo 48 + texto 28 gap 5. */
.bheli-logo--horizontal[data-logo-size="24"] {
gap: 8px;
}
.bheli-logo--horizontal[data-logo-size="24"] .bheli-logo__wordmark {
font-size: 18px;
}
.bheli-logo--vertical[data-logo-size="48"] {
gap: 5px;
}
.bheli-logo--vertical[data-logo-size="48"] .bheli-logo__wordmark {
font-size: 28px;
}
/* Temas del logo, símbolo y wordmark. auto usa light, dark con data-theme explícito y SO con SYSTEM/sin atributo. */
.bheli-logo--theme-light,
.bheli-logo--theme-auto {
--logo-top: var(--bheli-cobre);
--logo-bottom: var(--bheli-miel);
--logo-wordmark: var(--bheli-espresso);
}
.bheli-logo--theme-dark {
--logo-top: var(--bheli-cobre-dark);
--logo-bottom: var(--bheli-miel-dark);
--logo-wordmark: var(--bheli-crema);
}
:root[data-theme="dark"] .bheli-logo--theme-auto {
--logo-top: var(--bheli-cobre-dark);
--logo-bottom: var(--bheli-miel-dark);
--logo-wordmark: var(--bheli-crema);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) .bheli-logo--theme-auto,
:root[data-theme="system"] .bheli-logo--theme-auto {
--logo-top: var(--bheli-cobre-dark);
--logo-bottom: var(--bheli-miel-dark);
--logo-wordmark: var(--bheli-crema);
}
}
.bheli-logo--theme-mono-black {
--logo-top: var(--bheli-logo-black);
--logo-bottom: var(--bheli-logo-black);
--logo-wordmark: var(--bheli-logo-black);
}
.bheli-logo--theme-mono-white {
--logo-top: var(--bheli-logo-white);
--logo-bottom: var(--bheli-logo-white);
--logo-wordmark: var(--bheli-logo-white);
}
.bheli-logo--theme-one-color {
--logo-top: var(--bheli-cobre);
--logo-bottom: var(--bheli-cobre);
--logo-wordmark: var(--bheli-cobre);
}
/* Loader: los módulos se encienden en orden, ciclo de 1.6 s, opacidad de 0.18 a 1. */
.bheli-loader {
display: inline-flex;
}
.bheli-loader svg {
display: block;
}
.bheli-loader--theme-light {
--logo-top: var(--bheli-cobre);
--logo-bottom: var(--bheli-miel);
}
.bheli-loader--theme-dark {
--logo-top: var(--bheli-cobre-dark);
--logo-bottom: var(--bheli-miel-dark);
}
.bheli-loader--16 svg {
width: 16px;
height: 16px;
}
.bheli-loader--24 svg {
width: 24px;
height: 24px;
}
.bheli-loader--32 svg {
width: 32px;
height: 32px;
}
.bheli-loader--48 svg {
width: 48px;
height: 48px;
}
.bheli-loader path {
opacity: 0.18;
animation: bheli-loader-pulse 1.6s ease-in-out infinite;
}
.bheli-loader .bheli-loader__m1 {
animation-delay: 0s;
}
.bheli-loader .bheli-loader__m2 {
animation-delay: 0.2s;
}
.bheli-loader .bheli-loader__m3 {
animation-delay: 0.4s;
}
.bheli-loader .bheli-loader__m4 {
animation-delay: 0.6s;
}
@keyframes bheli-loader-pulse {
0%, 100% {
opacity: 0.18;
}
25% {
opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
.bheli-loader path {
animation: none;
opacity: 1;
}
}
/* Avatar de Bheli Assistant. El fondo espresso cubre la ausencia del asset /brand/ui/. */
.bheli-avatar {
display: block;
flex: none;
border-radius: 50%;
object-fit: cover;
background-color: var(--bheli-espresso);
}
h1:focus,
h1:focus-visible {
outline: none;
}
.valid.modified:not([type=checkbox]) {
outline: 1px solid var(--status-success-icon);
}
.invalid {
outline: 1px solid var(--status-danger-icon);
}
.validation-message {
color: var(--status-danger-text);
}
.blazor-error-boundary {
/* Existing warning artwork is an asset exception, not a UI palette. */
background: url(images/error-boundary.svg) no-repeat 1rem/1.8rem, var(--action-danger-background);
padding: 1rem 1rem 1rem 3.7rem;
color: var(--action-danger-text);
}
.blazor-error-boundary::after {
content: "An error has occurred."
}
.darker-border-checkbox.form-check-input {
border-color: var(--control-border);
}
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
color: var(--text-muted);
text-align: end;
}
.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
text-align: start;
}
/* ERP Ligero: tarjetas, tablas y formularios compactos, mobile-first.
La navegación del módulo usa el app-shell del portal (.sidebar);
estas clases cubren solo el contenido. */
.erp-main { padding: 1rem; max-width: 1100px; margin: 0 auto; }
.erp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.erp-card { background: var(--background-surface); border: 1px solid var(--border-subtle); border-radius: .6rem; padding: .8rem; }
.erp-card .kpi { font-size: 1.4rem; font-weight: 600; }
.erp-card .label { color: var(--text-muted); font-size: .85rem; }
.erp-table { width: 100%; border-collapse: collapse; margin: .75rem 0; font-size: .92rem; }
.erp-table th, .erp-table td { border-bottom: 1px solid var(--border-subtle); padding: .45rem .5rem; text-align: left; }
.erp-table th { background: var(--background-surface-subtle); }
.erp-read-placeholder { display: inline-block; min-width: calc(var(--space-5) * 3); background: var(--background-surface-subtle); border-radius: var(--radius-sm); }
.erp-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .6rem; margin: .75rem 0; }
.erp-form > * { min-width: 0; }
.erp-form label { display: grid; gap: .2rem; font-size: .85rem; color: var(--text-primary); }
.erp-form input:not([type=checkbox]):not([type=hidden]), .erp-form select { padding: var(--space-2); border: var(--border-width) solid var(--control-border); border-radius: var(--radius-sm); max-width: 100%; min-width: 0; min-height: calc(var(--space-5) * 2); }
.erp-form label:has(input[type=checkbox]) { display: flex; align-items: center; gap: var(--space-2); min-height: calc(var(--space-5) * 2); }
.erp-form input[type=checkbox] { padding: 0; width: calc(var(--space-4) + var(--space-1)); min-height: calc(var(--space-4) + var(--space-1)); }
.erp-form-action { display: grid; align-self: end; }
@media (min-width: 700px) { .erp-form input:not([type=checkbox]):not([type=hidden]), .erp-form select, .erp-form label:has(input[type=checkbox]) { min-height: calc(var(--space-4) + var(--space-5)); } }
.erp-btn { padding: .45rem .9rem; border: 0; border-radius: .4rem; background: var(--primary); color: var(--on-brand); cursor: pointer; font-family: inherit; font-weight: 500; min-height: var(--touch-target, 44px); display: inline-flex; align-items: center; justify-content: center; }
.erp-btn.secondary { background: var(--button-secondary-background); color: var(--button-secondary-text); }
.erp-btn.danger { background: var(--action-danger-background); color: var(--action-danger-text); }
.erp-btn:disabled { background: var(--control-disabled-background); color: var(--control-disabled-text); opacity: 1; cursor: default; }
.erp-status { display: inline-block; padding: .1rem .5rem; border-radius: 1rem; font-size: .8rem; background: var(--background-surface-subtle); }
.erp-error { color: var(--error); margin: .5rem 0; }
.erp-section { margin: 1.25rem 0; }
.erp-row-actions { display: flex; gap: .35rem; flex-wrap: wrap; }
/* Controles ERP compartidos: misma tipografía y unidad legible en todos los motores. */
.erp-form input, .erp-form select, .erp-form textarea { font-family: inherit; font-size: 1rem; color: var(--text-primary); background: var(--background-surface); }
.erp-form input:not([type=checkbox]):not([type=hidden]), .erp-form select { min-height: var(--control-height-mobile, 48px); }
.erp-organization { min-width: 0; overflow-wrap: anywhere; }
.topbar.erp-topbar { z-index: 30; }
/* En móvil la empresa ocupa una fila propia: nunca se comprime entre marca y cuenta. */
@media (width < 900px) {
/* portal.css se carga después; la cabecera ERP conserva su composición sobre .topbar. */
.topbar.erp-topbar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; }
.erp-topbar .menu-button { grid-column: 1; grid-row: 1; }
.erp-topbar .brand { grid-column: 2; grid-row: 1; }
.erp-topbar .user-menu { grid-column: 3; grid-row: 1; min-width: 0; max-width: 48vw; }
.erp-topbar .user-trigger { max-width: 100%; }
.erp-topbar .user-trigger-name { min-width: 0; max-width: 100%; }
.erp-topbar .erp-organization { grid-column: 1 / -1; grid-row: 2; }
}
.erp-task-links, .erp-pagination { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-block: var(--space-3); }
.erp-inline-confirm { border: var(--border-width) solid var(--border-subtle); padding: var(--space-3); margin-block: var(--space-3); }
.erp-global-nav { display: block; }
.erp-module-nav { display: none; }
@media (min-width: 700px) {
.erp-form input:not([type=checkbox]):not([type=hidden]), .erp-form select { min-height: var(--control-height, 40px); }
.erp-global-nav { display: none; }
.erp-module-nav { display: block; }
}
/* Generado desde ContactWorkspace.razor.css del portal actual (scripts/razor-css-to-module.py): misma cascada que Blazor. */
.c1-workspace.b-mkaucp{container-type:inline-size; min-width:0; width:100%;}
.b-mkaucp .c2-tag-choices{max-height:14rem; overflow:auto;}
.b-mkaucp .c2-tag-filter .actions{padding-top:.75rem;}
.b-mkaucp .c2-contact-table{table-layout:fixed;}
.b-mkaucp .c2-contact-table .c1-check{width:2.5rem;}
.b-mkaucp .c2-contact-table .c1-chat{width:3rem;}
.b-mkaucp .c1-auto .c2-contact-table .c1-col-phone{width:7rem;}
.b-mkaucp .c1-auto .c2-contact-table .c1-col-tags{width:10rem;}
.b-mkaucp .c1-auto .c2-contact-table .c1-col-lastvisibleconversationactivityat{width:8.5rem;}
.b-mkaucp .c1-auto .c2-contact-table .c1-col-inbox,.b-mkaucp .c1-auto .c2-contact-table .c1-col-agent{width:7rem;}
.b-mkaucp .c1-auto .c2-contact-table .c1-col-email{width:11rem;}
.b-mkaucp .c1-auto .c2-contact-table .c1-col-createdat{width:7rem;}
.b-mkaucp .c2-cell-value{display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.b-mkaucp .c1-name a .c2-cell-value{flex:1;}
.b-mkaucp .c2-tags{display:flex; flex-wrap:nowrap; align-items:center; gap:.25rem; min-width:0;}
.b-mkaucp .c2-tags .chip{min-width:0; max-width:7rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.72rem; padding:.15rem .4rem; line-height:1.25;}
.b-mkaucp .c2-tag-trigger{flex-shrink:0; width:var(--control-height);}
.b-mkaucp .c2-tag-popover{position:fixed; inset:auto; margin:0; width:max-content; max-width:calc(100vw - 2rem); max-height:min(28rem,65dvh); overflow:auto; padding:12px; border:1px solid var(--border-subtle); border-radius:14px; background:var(--surface); color:var(--text); box-shadow:var(--shadow-floating);}
.b-mkaucp .c2-tag-popover ul{display:flex; flex-wrap:wrap; gap:8px; max-width:280px; margin:0; padding:0; list-style:none;}
.b-mkaucp .c2-tag-popover li{min-width:0; max-width:100%;}
.b-mkaucp .c2-directory{display:none; border:1px solid var(--border); border-radius:var(--control-radius); background:var(--surface);}
.b-mkaucp .c2-directory-select{padding:.4rem .65rem; border-bottom:1px solid var(--border);}
.b-mkaucp .c2-directory-row{display:flex; gap:.4rem; align-items:flex-start; padding:.5rem .4rem; border-bottom:1px solid var(--border);}
.b-mkaucp .c2-directory-row:last-child{border-bottom:0;}
.b-mkaucp .c2-directory-check{display:flex; align-items:center; justify-content:center; flex-shrink:0; width:2.5rem; min-height:var(--control-height-mobile);}
.b-mkaucp .c2-directory-check input{width:1.15rem; height:1.15rem; accent-color:var(--primary);}
.b-mkaucp .c2-directory-body{flex:1; min-width:0;}
.b-mkaucp .c2-directory-name{display:block; color:var(--text); font-weight:500; min-height:var(--control-height-mobile); align-content:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-decoration:none;}
.b-mkaucp .c2-directory-activity,.b-mkaucp .c2-directory-meta{color:inherit; font-size:.75rem;}
.b-mkaucp .c2-directory-meta{display:flex; gap:.6rem; margin-block:.25rem;}
.b-mkaucp .c2-directory-meta span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.b-mkaucp .c2-file-choice{position:relative; flex-wrap:wrap; margin-bottom:.75rem;}
.b-mkaucp .c2-file-input{position:absolute; width:1px; height:1px; min-width:0; min-height:0; overflow:hidden; clip-path:inset(50%); pointer-events:none; opacity:0;}
.b-mkaucp .c2-file-input:focus-visible + .c2-file-trigger{outline:2px solid var(--primary); outline-offset:2px;}
.b-mkaucp .c2-file-trigger{cursor:pointer;}
.b-mkaucp .c2-file-options{margin-block:1rem;}
.b-mkaucp .c2-file-options summary{cursor:pointer; min-height:var(--control-height); align-content:center;}
.b-mkaucp .c2-file-help{color:inherit; font-size:.82rem; margin-left:1.8rem;}
@container (max-width:600px){.b-mkaucp .c2-directory-table.c1-auto{display:none;}
.b-mkaucp .c2-directory{display:block;}
}
.b-mkaucp svg.chat-r2-icon{width:1.15rem; height:1.15rem; flex:0 0 1.15rem;}
.b-mkaucp .button{display:inline-flex; gap:.5rem; align-items:center;}
.b-mkaucp select{min-height:var(--control-height); border:1px solid var(--border); border-radius:var(--control-radius); background:var(--surface); color:var(--text); padding:.45rem .65rem;}
.b-mkaucp .c1-col-phone{white-space:nowrap;}
.c1-back.b-mkaucp{margin:0 0 1rem;}
.c1-back a.b-mkaucp{display:inline-flex; align-items:center; gap:.6rem; min-height:var(--control-height); text-decoration:none;}
.b-mkaucp .c1-icon{width:var(--control-height); min-width:var(--control-height); padding:.55rem; justify-content:center;}
.b-mkaucp .actions{align-items:center;}
.b-mkaucp .c1-search-row{display:flex; gap:.75rem; align-items:center; margin-block:1rem;}
.b-mkaucp .c1-search{display:flex; gap:.6rem; flex:1; min-width:0; align-items:center; padding-inline:.75rem; border:1px solid var(--border); border-radius:var(--control-radius); background:var(--surface);}
.b-mkaucp .c1-search input{min-width:0; width:100%; min-height:var(--control-height); border:0; background:transparent; color:var(--text); font:inherit; padding:.45rem 0;}
.b-mkaucp .c1-table-tools{display:flex; justify-content:space-between; align-items:center; gap:.75rem; margin-block:.75rem;}
.b-mkaucp .c1-table-tools p{font-size:.82rem; color:inherit; margin:0;}
.b-mkaucp .c1-table-tools select{max-width:13rem;}
.b-mkaucp .c1-table-scroll{overflow:visible; max-width:100%; border:1px solid var(--border); border-radius:var(--control-radius); background:var(--surface);}
.b-mkaucp .c1-table{width:100%; border-collapse:collapse; font-size:.82rem;}
.b-mkaucp .c1-table th{text-align:left; background:var(--surface); font-weight:500;}
.b-mkaucp .c1-table th,.b-mkaucp .c1-table td{padding:.55rem .65rem; border-bottom:1px solid var(--border); vertical-align:middle; overflow-wrap:anywhere;}
.b-mkaucp .c1-table tr:last-child td{border-bottom:0;}
.b-mkaucp .c1-check{width:2.5rem;}
.b-mkaucp .c1-check input{width:1.15rem; height:1.15rem; accent-color:var(--primary);}
.b-mkaucp .c1-name{min-width:8rem;}
.b-mkaucp .c1-name a{display:flex; gap:.65rem; align-items:center; min-height:var(--control-height); color:var(--text); text-decoration:none; font-weight:500;}
.b-mkaucp .c1-avatar{display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; border-radius:50%; width:2rem; height:2rem; background:var(--primary-soft,var(--surface)); color:var(--primary); font-size:.72rem; font-weight:400;}
.b-mkaucp .c1-tags{display:flex; flex-wrap:wrap; align-items:center; gap:.35rem;}
.b-mkaucp .c1-tags .chip{max-width:100%; overflow-wrap:anywhere; font-size:.75rem;}
.b-mkaucp .c1-chosen .c1-table th:not(.c1-check),.b-mkaucp .c1-chosen .c1-table td:not(.c1-check){min-width:9rem;}
.b-mkaucp .c1-chat{width:3rem;}
.b-mkaucp .c1-popover{position:relative;}
.b-mkaucp .c1-popover summary{list-style:none; cursor:pointer;}
.b-mkaucp .c1-popover summary::-webkit-details-marker{display:none;}
.b-mkaucp .c1-popover-panel{position:absolute; right:0; top:100%; z-index:40; min-width:16rem; max-width:min(22rem,calc(100vw - 2rem)); max-height:65vh; overflow:auto; padding:1rem; background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow-floating);}
.b-mkaucp .checkbox-row{display:flex; align-items:center; gap:.65rem; min-height:var(--control-height);}
.b-mkaucp .checkbox-row input{flex-shrink:0; width:1.15rem; height:1.15rem; accent-color:var(--primary);}
.b-mkaucp .c1-dialog{border:1px solid var(--border); border-radius:var(--control-radius); background:var(--surface); color:var(--text); width:32rem; max-width:calc(100vw - 2rem); max-height:calc(100dvh - 2rem); padding:1.25rem; overflow:auto;}
.b-mkaucp .c1-dialog::backdrop{background:var(--backdrop-page);}
.b-mkaucp .c1-dialog-head{display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1rem;}
.b-mkaucp .c1-dialog-head h2{margin:0;}
.b-mkaucp .c1-dialog .field{margin-block:.85rem;}
.b-mkaucp .c1-dialog textarea{width:100%; min-height:12rem;}
.b-mkaucp .c1-form-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem;}
.b-mkaucp .c1-editor{max-width:48rem;}
.b-mkaucp .c1-editor .field span:not(:where(.feedback-field-error)){font-size:.82rem;}
.b-mkaucp .c1-editor .field span:not(:where(.c1-inline-tag-selector *, .feedback-field-error)){color:inherit;}
.b-mkaucp .c1-editor details{margin-block:1rem;}
.b-mkaucp .c1-editor summary,.b-mkaucp .c1-sessions summary{min-height:var(--control-height); cursor:pointer; padding-block:.5rem;}
.b-mkaucp .c1-detail-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:1.25rem;}
.b-mkaucp .c1-detail-grid dl{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:.6rem 1rem;}
.b-mkaucp .c1-detail-grid dt{color:inherit;}
.b-mkaucp .c1-detail-grid dd{margin:0; overflow-wrap:anywhere;}
.b-mkaucp .c1-session-head{display:flex; align-items:center; justify-content:space-between; gap:1rem;}
.b-mkaucp .c1-session-head h3{margin:0;}
.b-mkaucp .c1-session-head p{color:inherit; font-size:.82rem;}
.b-mkaucp .c1-sessions article{margin-bottom:1rem;}
.b-mkaucp .c1-pagination{display:flex; justify-content:space-between; flex-wrap:wrap; align-items:center; gap:1rem; margin-top:1rem; font-size:.82rem;}
.b-mkaucp .c1-pagination label{display:flex; align-items:center; gap:.6rem;}
.b-mkaucp .c1-pagination .actions{gap:.25rem;}
.b-mkaucp .c1-import{width:48rem;}
.b-mkaucp .c1-steps{display:flex; list-style:none; gap:.75rem; padding:0; font-size:.8rem; color:inherit;}
.b-mkaucp .c1-steps [aria-current=step]{color:var(--primary); font-weight:500;}
.b-mkaucp .c1-mapping{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.85rem 1rem;}
.b-mkaucp .c1-example{font-size:.82rem; color:inherit; overflow-wrap:anywhere;}
.b-mkaucp .c1-preview-field{display:none;}
.b-mkaucp .c1-preview-table td{min-width:5rem;}
@media(min-width:601px){.b-mkaucp .c1-preview-table{min-width:64rem;}
.b-mkaucp .c1-preview-table th,.b-mkaucp .c1-preview-table td:nth-child(6),.b-mkaucp .c1-preview-table td:nth-child(7){white-space:nowrap;}
.b-mkaucp .c1-preview-table th:last-child,.b-mkaucp .c1-preview-table td:last-child{min-width:10rem;}
}
.b-mkaucp .c1-drop{border:1px dashed var(--border); padding:1rem; border-radius:var(--control-radius);}
.b-mkaucp .c1-drop input{max-width:100%;}
@container (max-width:730px){.b-mkaucp .c1-detail-grid{grid-template-columns:1fr;}
}
@container (max-width:480px){.b-mkaucp .c1-avatar{display:none;}
.b-mkaucp .c1-search-row{flex-wrap:wrap; gap:.25rem;}
.b-mkaucp .c1-search{flex-basis:100%;}
.b-mkaucp .c1-table-tools{align-items:flex-start; flex-direction:column;}
.b-mkaucp .c1-table-tools .actions{width:100%; justify-content:flex-end; gap:.4rem; flex-wrap:wrap;}
.b-mkaucp .c1-table-tools select{width:100%; max-width:none; min-width:0; flex-basis:100%;}
.b-mkaucp .c1-search input{min-height:var(--control-height-mobile);}
.b-mkaucp .c1-table th,.b-mkaucp .c1-table td{padding-inline:.4rem;}
.b-mkaucp .c1-auto .c1-name{min-width:0;}
}
@media(max-width:600px){.b-mkaucp .c1-form-grid{grid-template-columns:1fr;}
.b-mkaucp .c1-detail-grid dl{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);}
.b-mkaucp .c1-dialog{padding:1rem; max-width:calc(100vw - 1rem); max-height:calc(100dvh - 1rem);}
.b-mkaucp .c1-import .c1-steps{gap:.4rem; font-size:.72rem; flex-wrap:wrap;}
.b-mkaucp .c1-preview-field{display:flex;}
.b-mkaucp .c1-preview-table td:not(:first-child):not(:nth-child(2)):not(:last-child):not(.c1-reviewed),.b-mkaucp .c1-preview-table th:not(:first-child):not(:nth-child(2)):not(:last-child):not(.c1-reviewed){display:none;}
.b-mkaucp .c1-preview-table td{min-width:0;}
.b-mkaucp .c1-pagination .actions{flex-wrap:wrap;}
.b-mkaucp .c1-icon,.b-mkaucp .checkbox-row,.b-mkaucp .c1-back a{min-height:var(--control-height-mobile);}
}
.b-mkaucp .c2-contact-table th,.b-mkaucp .c2-contact-table td{overflow-wrap:normal;}
.b-mkaucp .c2-tag-filter{position:fixed; inset:auto; margin:0;}
.b-mkaucp .c2-tags .c2-tag-trigger{width:2rem; min-width:2rem; height:2rem; min-height:2rem; padding:.25rem;}
@container (max-width:600px){.b-mkaucp .c2-tags .c2-tag-trigger{width:var(--control-height-mobile); min-width:var(--control-height-mobile); height:var(--control-height-mobile); min-height:var(--control-height-mobile);}
}
.b-mkaucp .c2-tags .chip{display:block;}
@container (max-width:600px){.b-mkaucp .c2-directory-check{width:var(--control-height-mobile);}
.b-mkaucp .c2-directory .c1-icon{width:var(--control-height-mobile); min-width:var(--control-height-mobile);}
}
/* I13/C22 · primera carga: la tabla ya armada con 5 filas de esqueleto de 56 px, sin caja
(la tabla no tiene bordes: el esqueleto ocupa el mismo lugar que las filas). */
.e1-contact-skeleton.b-mkaucp{opacity:0; animation:e1-show-wait 1ms 150ms forwards;}
.e1-contact-skeleton > .e1-skeleton-row{border-bottom:1px solid var(--border-subtle);}
.b-mkaucp .e1-skeleton-row{height:56px;}
.b-mkaucp .e1-skeleton-line{display:flex; align-items:center; gap:12px; height:100%;}
.b-mkaucp .e1-skeleton-avatar{flex:none; width:28px; height:28px; border-radius:50%; background:var(--background-surface-subtle);}
.b-mkaucp .e1-skeleton-bar{height:12px; flex:2 1 0; border-radius:var(--radius-sm); background:var(--background-surface-subtle);}
.b-mkaucp .e1-skeleton-short{flex:1 1 0;}
.b-mkaucp .e1-skeleton-card{height:auto; min-height:64px; padding:10px 0;}
/* K1 · C22 1.14.5: en línea, para que el párrafo del contador tenga el alto de su texto y quede en el mismo lugar. */
.b-mkaucp .c1-total-skel{display:inline-block; vertical-align:middle; width:120px; height:12px; border-radius:var(--radius-sm); background:var(--background-surface-subtle);}
.e1-order-menu.b-mkaucp{width:max-content; max-width:calc(100vw - 16px);}
.e1-order-menu .button.b-mkaucp{display:flex; width:100%; justify-content:flex-start;}
@keyframes e1-show-wait{ to { opacity:1; } }
.c1-workspace.b-mkaucp{position:relative;}
.c1-progress.b-mkaucp{position:absolute; top:0; left:0; right:0; z-index:5; height:2px; overflow:hidden; opacity:0; animation:e1-show-wait 1ms 150ms forwards;}
.c1-progress.b-mkaucp::before{content:""; position:absolute; top:0; bottom:0; left:0; width:40%; background:var(--primary); animation:c1-progress 1.1s ease-in-out infinite;}
@keyframes c1-progress{ from { transform:translateX(-100%); } to { transform:translateX(250%); } }
.c1-refreshing.b-mkaucp :is(.c1-table-scroll,.c2-directory,.c1-detail-panel){opacity:.55; transition:opacity .15s .15s;}
.b-mkaucp .c1-auto .c2-contact-table .c1-col-tags{width:154px;}
.b-mkaucp .c2-tags{display:flex; flex-wrap:wrap; align-items:flex-start; align-content:start; gap:4px; min-width:0; max-width:100%;}
.b-mkaucp .c2-tags .chip{flex:0 1 auto; max-width:100%; font-size:.8125rem; line-height:20px; padding:1px 6px; box-sizing:border-box;}
.b-mkaucp .c2-tags .chip[hidden],.b-mkaucp .c2-tags .c2-tag-trigger[hidden]{display:none;}
.b-mkaucp .c2-tags .c2-tag-trigger{flex:0 0 auto; width:auto; min-width:32px; height:32px; min-height:32px; padding:2px 4px;}
.b-mkaucp .c2-tags .chip:focus-visible{outline:2px solid var(--primary); outline-offset:2px;}
@container (max-width:600px){.b-mkaucp .c2-tags .c2-tag-trigger{width:auto; min-width:44px; height:44px; min-height:44px;}
}
.b-mkaucp .c2-tags .chip{min-height:24px;height:24px;border-radius:var(--control-radius);}
.c1-workspace.b-mkaucp{position:relative;container-type:inline-size;padding-bottom:16px;scroll-padding-bottom:76px}
.b-mkaucp .page-header{align-items:center;gap:16px}
.b-mkaucp .page-titles{display:flex;align-items:center;gap:10px}
.b-mkaucp .page-header h1{font-size:26px;font-weight:700;margin:0}
.b-mkaucp .button{border:0;border-radius:999px;min-height:40px;padding:0 18px;font-size:14px;font-weight:600;gap:8px;white-space:nowrap;text-decoration:none;box-shadow:none}
.b-mkaucp .button:not(.secondary):not(.ghost){background:var(--primary);color:var(--primary-contrast,var(--on-brand))}
.b-mkaucp .button.secondary{background:var(--background-surface-subtle);color:var(--text-primary)}
.b-mkaucp .button.ghost{background:transparent;color:var(--text-secondary)}
.b-mkaucp .c1-icon,.b-mkaucp .report-columns-launcher{display:inline-flex;align-items:center;justify-content:center;flex:none;width:36px;min-width:36px;height:36px;min-height:36px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--text-secondary);text-decoration:none}
@media (hover: hover){.b-mkaucp .c1-icon:hover,.b-mkaucp .report-columns-launcher:hover{background:var(--background-surface-subtle)}
}
.b-mkaucp .c1-icon svg,.b-mkaucp .report-columns-launcher svg{width:18px;height:18px}
.b-mkaucp :is(button,a,input):focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.b-mkaucp .c1-search-row{display:flex;align-items:center;flex-wrap:nowrap;gap:10px;margin-block:18px 12px;min-width:0}
.b-mkaucp .c1-search{display:flex;align-items:center;gap:8px;flex:1 1 260px;min-width:180px;height:40px;padding-inline:12px;border:1.5px solid transparent;border-radius:999px;background:var(--background-surface-subtle)}
.b-mkaucp .c1-search:focus-within{border:1.5px solid var(--primary);outline:none}
.b-mkaucp .c1-search input{width:100%;min-width:0;height:38px;min-height:0;border:0;outline:0!important;background:transparent;box-shadow:none!important;padding:0;font:inherit;color:var(--text-primary)}
.b-mkaucp .c1-search input::-webkit-search-cancel-button{display:none}
.b-mkaucp .c1-search svg{width:16px;height:16px;flex:none;color:var(--text-secondary)}
.b-mkaucp .c1-search .c1-icon{width:28px;min-width:28px;height:28px;min-height:28px}
.b-mkaucp .c1-filter-strip{display:flex;align-items:center;gap:6px;min-width:0;overflow-x:auto;scrollbar-width:none;padding:4px 12px 4px 0}
.b-mkaucp .c1-filter-strip::-webkit-scrollbar{display:none}
@media(min-width:768px){.b-mkaucp .c1-search-row>.c1-search{flex:1 1 320px;min-width:320px}
}
@media(min-width:768px){.b-mkaucp .c1-filter-strip{padding-right:5px;margin-right:-5px}
}
@media(max-width:767px){.b-mkaucp .c1-filter-strip>.chip,.b-mkaucp .c1-filter-strip .bh-filter-trigger{position:relative}
.b-mkaucp .c1-filter-strip>.chip::before,.b-mkaucp .c1-filter-strip .bh-filter-trigger::before{content:"";position:absolute;inset:-3px -1px}
}
.b-mkaucp .c1-filter-strip>.chip{display:inline-flex;align-items:center;gap:6px;flex:none;border:1px solid var(--border-default);border-radius:999px;min-height:32px;padding:0 10px;background:var(--surface);font-size:13px;font-weight:600;color:var(--text-secondary);white-space:nowrap}
.b-mkaucp .c1-filter-strip>.chip.active,.b-mkaucp .c1-filter-options .chip.active{background:var(--contact-pill-on-background);color:var(--contact-pill-on-text);border-color:var(--contact-pill-on-border)}
.b-mkaucp .c1-filter-strip>.chip svg{width:15px;height:15px}
.b-mkaucp .c1-filter-strip>.chip.c1-date-pill svg{width:14px;height:14px;flex:0 0 14px}
/* C15 1.14.3: píldora de etiqueta. Sin elegir, la de C07 con el punto de su color; elegida, llena de su relleno, sin borde,
con ✓ de 14 px y el texto de su par. */
.b-mkaucp :is(.c1-filter-strip>.chip,.c1-filter-options .chip).c2-tag-chip{gap:6px}
.b-mkaucp :is(.c1-filter-strip>.chip,.c1-filter-options .chip).c2-tag-chip.active{background:var(--contact-tag-chip-background);border-color:transparent;color:var(--contact-tag-chip-foreground)}
.b-mkaucp :is(.c1-filter-strip>.chip,.c1-filter-options .chip).c2-tag-chip.active svg{width:14px;height:14px;flex:0 0 14px;color:inherit}
.b-mkaucp .c1-filter-group h3{font-size:14px;font-weight:600;margin:0 0 10px}
.b-mkaucp .c1-range{margin-top:14px}
.b-mkaucp .c1-range-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:12px}
.b-mkaucp .c1-range-fields .field{display:flex;flex-direction:column;gap:6px;margin:0;min-width:0}
.b-mkaucp .c1-range-fields .c1-field-label{display:block;font-size:14px;font-weight:600;line-height:20px;color:var(--text-primary)}
.b-mkaucp .c1-range-fields .field>input{width:100%;height:42px;min-height:42px;border:1px solid var(--border-default);border-radius:10px;background:var(--surface);color:var(--text-primary);padding:0 12px;font:inherit;font-size:14.5px}
.b-mkaucp .c1-range-fields .field>input::placeholder{color:var(--ui-tertiary)}
.b-mkaucp .c1-range-fields .field>input[aria-invalid=true]{border-color:var(--error)}
@media(max-width:767px){.b-mkaucp .c1-range-fields{grid-template-columns:1fr}
}
.b-mkaucp .c1-range-calendar .stat-range-month.second{display:none}
.b-mkaucp .c1-range-calendar .stat-range-month header .stat-range-prev-mobile{display:flex}
.b-mkaucp .c1-range-calendar .stat-range-foot{display:none}
.b-mkaucp .c1-range-calendar .stat-range-month{min-width:0}
.b-mkaucp .c1-filter-group h3:not(:first-child){margin-top:18px}
.b-mkaucp .c1-filter-options{display:flex;flex-wrap:wrap;gap:6px;margin-block:10px}
.b-mkaucp .c1-filter-options .chip{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:6px 10px;border-radius:999px;border:1px solid var(--border-default);background:var(--surface);color:var(--text-secondary);font-size:13px}
.b-mkaucp .c1-filter-options .chip>svg{width:15px;height:15px;flex:none}
.b-mkaucp button.chip{font-family:inherit}
.b-mkaucp .c1-filter-options .chip:has(>.c1-agent-avatar){padding-left:5px}
.b-mkaucp .c1-filter-options .c1-agent-avatar{width:20px;height:20px;min-width:20px;font-size:9px}
.b-mkaucp .c1-filter-options .c1-agent-avatar svg{width:14px;height:14px}
.b-mkaucp .c1-filter-group p{font-size:12.5px;color:var(--text-secondary)}
.b-mkaucp .bh-table-toolbar p{margin:0;font-size:13px}
.b-mkaucp .c1-table-scroll,.b-mkaucp .c2-directory{border:0;border-radius:0;box-shadow:none;background:transparent}
.b-mkaucp .c2-directory-table{box-sizing:border-box}
.b-mkaucp .c2-contact-table{max-width:none!important}
.b-mkaucp .bh-table-frame.c1-table-scroll{overflow:visible;max-width:100%}
.b-mkaucp .bh-table-frame.c1-table-scroll.c1-scroll-x{overflow-x:auto;overscroll-behavior-x:contain}
.b-mkaucp .c1-scroll-x .c2-contact-table [data-sticky-column]{position:sticky;z-index:1;background:var(--background-canvas)}
.b-mkaucp .c1-scroll-x .c2-contact-table th[data-sticky-column]{z-index:2}
.b-mkaucp .c1-scroll-x .c2-contact-table [data-sticky-column="last"]{box-shadow:inset -1px 0 0 var(--border-subtle),8px 0 10px -8px var(--shadow-lg-color,var(--shadow-color))}
.b-mkaucp .c2-contact-table thead>tr{z-index:3}
@media (hover: hover){.b-mkaucp .c1-scroll-x .c2-contact-table tbody tr:hover>[data-sticky-column]{background:var(--background-surface-subtle)}
}
.b-mkaucp .c1-scroll-x .c2-contact-table tbody tr:active>[data-sticky-column],.b-mkaucp .c1-scroll-x [data-contact-row]:is([aria-selected=true],[aria-current=true])>[data-sticky-column]{background:var(--brand-subtle)}
.b-mkaucp .c2-contact-table{table-layout:fixed;width:100%}
.b-mkaucp .c2-contact-table :is(th,td){box-sizing:border-box}
.b-mkaucp .c2-contact-table{font-size:13.5px;background:transparent}
.b-mkaucp .c2-contact-table th{height:40px;font-size:12px;font-weight:600;background:var(--background-canvas);color:var(--text-muted);position:sticky;top:0;z-index:1}
.b-mkaucp .c2-contact-table td{height:56px;padding-block:8px;vertical-align:middle;align-content:center;color:var(--text-secondary);border-bottom:1px solid var(--border-subtle)}
.b-mkaucp .c2-contact-table tr{align-items:center;cursor:pointer}
@media (hover: hover){.b-mkaucp .c2-contact-table tbody tr:hover{background:var(--background-surface-subtle)}
}
.b-mkaucp .c2-contact-table tbody tr:active,.b-mkaucp [data-contact-row]:is([aria-selected=true],[aria-current=true]){background:var(--brand-subtle)}
.b-mkaucp .c2-contact-table .c1-name a{min-height:0;font-size:14px;font-weight:600;color:var(--text-primary)}
.b-mkaucp .c1-column-order{display:flex;align-items:center;gap:4px;max-width:100%;padding:0;border:0;background:transparent;font:inherit;color:inherit;text-align:left;min-height:32px}
.b-mkaucp .c1-column-order span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.b-mkaucp .c1-column-order svg{width:14px;height:14px;flex:none}
.b-mkaucp .c1-column-static{display:flex;align-items:center;min-height:32px;white-space:nowrap}
.b-mkaucp .c1-order-up{transform:rotate(180deg)}
.b-mkaucp .c1-avatar{display:inline-flex;width:28px;height:28px;min-width:28px;border-radius:50%;align-items:center;justify-content:center;font-size:11px}
.b-mkaucp .c1-agent{display:flex;align-items:center;gap:6px;min-width:0}
.b-mkaucp .c1-agent-avatar{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;min-width:18px;border-radius:50%;font-size:9px}
.b-mkaucp .c1-agent-avatar svg{width:14px;height:14px}
.b-mkaucp .c1-unassigned{color:var(--text-muted)}
.b-mkaucp .c2-contact-table :is(th,td).c1-chat{padding-inline:10px}
.b-mkaucp .c1-chat .c1-icon{opacity:1;color:var(--text-muted)}
@media (hover: hover){.b-mkaucp tr:hover .c1-chat .c1-icon{background:var(--background-surface-muted)}
}
.b-mkaucp tr:focus-within .c1-chat .c1-icon{background:var(--background-surface-muted)}
.b-mkaucp .c2-tags{align-items:center;align-content:center;gap:4px}
.b-mkaucp .c2-tags .chip{height:20px;min-height:20px;padding:0;border:0;border-radius:999px;background:transparent;line-height:20px}
.b-mkaucp mark.chat-match{background:transparent;color:var(--link-default);font-weight:700}
.b-mkaucp .c1-pagination{min-height:56px;margin-top:8px;padding-right:calc(var(--c1-dock-width,100px) + 12px);justify-content:space-between;flex-wrap:nowrap}
.b-mkaucp .c1-pagination .actions{display:flex;align-items:center;gap:4px;flex-wrap:nowrap;min-width:0}
.b-mkaucp .c1-pagination .c1-range{white-space:nowrap}
.b-mkaucp .c1-pagination .c1-page-numbers{display:inline-flex;align-items:center;gap:2px}
.b-mkaucp .c1-page-size{display:flex;align-items:center;gap:8px;min-width:0}
.b-mkaucp .c1-page-size .bh-choice{width:80px}
.b-mkaucp .c1-empty{padding:48px 16px;text-align:center}
.b-mkaucp .c1-empty h2{font-size:15px;font-weight:600}
.b-mkaucp .c1-empty p{font-size:14px;color:var(--text-secondary)}
.b-mkaucp .c1-empty-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:8px}
.b-mkaucp .c1-detail-panel{position:fixed;top:var(--c1-panel-top,104px);right:0;bottom:0;width:320px;padding:0 18px;border-left:1px solid var(--border-subtle);background:var(--surface);display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow-lg);z-index:35}
.b-mkaucp .c1-detail-panel:is(:focus,:focus-visible){outline:none}
.b-mkaucp .c1-detail-panel[data-focus-quiet] :focus-visible{outline:none}
.b-mkaucp .c1-detail-panel>header{display:flex;flex-shrink:0;align-items:center;justify-content:space-between;gap:8px;padding-block:12px;background:var(--surface);z-index:2}
.b-mkaucp .c1-detail-panel>.c1-contact-detail{min-height:0;overflow-y:auto;padding-bottom:24px;scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}
.b-mkaucp .c1-detail-panel>.c1-contact-detail::-webkit-scrollbar{width:6px}
.b-mkaucp .c1-detail-panel>.c1-contact-detail::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:999px}
.b-mkaucp .c1-detail-panel>header h2{font-size:16px;font-weight:700;margin:0}
.b-mkaucp .c1-detail-skeleton>div{display:grid;gap:10px;padding-block:4px 8px}
.b-mkaucp .c1-detail-skeleton>div>span{display:block;height:16px;border-radius:var(--radius-sm);background:var(--background-surface-subtle)}
.b-mkaucp .c1-detail-skeleton>div>span:nth-child(2){width:72%}
.b-mkaucp .c1-detail-skeleton>div>span:nth-child(3){width:56%}
.b-mkaucp .c1-detail-skeleton>div>span.c1-skeleton-row{height:44px;width:100%}
.b-mkaucp .c1-panel-mobile-back{display:none}
.b-mkaucp .c1-detail-identity{text-align:center;padding:12px 0 20px}
.b-mkaucp .c1-detail-avatar{display:inline-flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:50%;font-size:24px}
.b-mkaucp .c1-detail-identity h3{font-size:17px;font-weight:600;margin:12px 0 4px}
.b-mkaucp .c1-detail-identity p{margin:0 0 12px;color:var(--text-secondary)}
.b-mkaucp .c1-contact-detail section{padding-block:16px;border-top:1px solid var(--border-subtle)}
.b-mkaucp .c1-contact-detail h3{font-size:14px;font-weight:600;margin:0 0 12px}
.b-mkaucp .c1-contact-detail dl{display:grid;grid-template-columns:minmax(70px,1fr) minmax(0,2fr);gap:10px;font-size:13px}
.b-mkaucp .c1-contact-detail dt{color:var(--text-secondary)}
.b-mkaucp .c1-contact-detail dd{margin:0;overflow-wrap:anywhere}
.b-mkaucp .c1-meta{color:var(--text-muted);font-size:12px;font-weight:400}
.b-mkaucp .c1-conversation-row{display:flex;align-items:center;gap:10px;width:100%;border:0;border-radius:12px;padding:10px;background:transparent;color:var(--text-primary);text-align:left}
@media (hover: hover){.b-mkaucp .c1-conversation-row:hover{background:var(--background-surface-subtle)}
}
.b-mkaucp .c1-conversation-row>svg{width:20px;height:20px;flex:none}
.b-mkaucp .c1-conversation-row>span{display:grid;gap:4px;min-width:0;font-size:13px}
.b-mkaucp .c1-conversation-row time{font-size:12px;color:var(--text-muted)}
.b-mkaucp .c1-disclosure summary,.b-mkaucp .c2-file-options summary{display:flex;align-items:center;gap:8px;min-height:40px;list-style:none;cursor:pointer;font-size:14px;font-weight:600}
.b-mkaucp .c1-disclosure summary::-webkit-details-marker,.b-mkaucp .c2-file-options summary::-webkit-details-marker{display:none}
.b-mkaucp .c1-disclosure summary>svg,.b-mkaucp .c2-file-options summary>svg{width:16px;height:16px;transform:rotate(-90deg);flex:none}
.b-mkaucp details[open]>summary>svg{transform:none}
.b-mkaucp .c1-disclosure>div,.b-mkaucp .c1-disclosure>dl{padding-left:24px}
.b-mkaucp .c1-editor{max-width:900px;padding-bottom:80px}
.b-mkaucp .c1-editor .field{display:flex;flex-direction:column;gap:6px;align-self:start}
.b-mkaucp .c1-editor .field>input{height:42px;min-height:42px;border:1px solid var(--border-default);border-radius:10px;background:var(--surface);color:var(--text-primary);padding:0 12px;font:inherit}
.b-mkaucp .c1-phone-field{display:flex;align-items:center;gap:0;box-sizing:border-box;height:42px;min-height:42px;border:1px solid var(--border-default);border-radius:10px;background:var(--surface);color:var(--text-primary);padding:0 12px;font:inherit}
.b-mkaucp .c1-phone-field>span,.b-mkaucp .c1-phone-field>strong{flex:none;color:var(--text-primary)}
.b-mkaucp .c1-editor .field .c1-phone-field input.c1-phone-input{width:100%;height:40px;border:0;border-radius:0;background:transparent;box-shadow:none;color:var(--text-primary);font:inherit;min-width:0;padding:0 0 0 2px}
.b-mkaucp .c1-phone-field:focus-within{outline:3px solid var(--focus-ring);outline-offset:2px}
.b-mkaucp .c1-editor .field .c1-phone-field input.c1-phone-input:focus{outline:0}
.b-mkaucp .c1-optional{font-size:12px;color:var(--text-muted)}
.c1-workspace.c1-editing.b-mkaucp{max-width:900px}
.b-mkaucp .c1-editor .field .c1-field-label{display:block;font-size:14px;font-weight:600;line-height:20px;color:var(--text-primary)}
.b-mkaucp .c1-editor .field .c1-field-label .c1-optional{font-size:inherit;font-weight:400;color:var(--ui-tertiary)}
.b-mkaucp .c1-editor .field #c1-phone-help{font-size:12.5px;color:var(--text-secondary)}
.b-mkaucp .c1-editor-actions{position:absolute;top:0;right:0;display:flex;justify-content:flex-end;gap:8px}
.b-mkaucp .c1-inline-tag-selector .c1-tags{margin-bottom:8px}
.b-mkaucp .c1-tag-menu{width:280px;max-width:calc(100vw - 16px);position:fixed;inset:auto;margin:0;max-height:65dvh;padding:6px;border:1px solid var(--border-subtle);border-radius:14px;background:var(--surface);box-shadow:var(--shadow-floating)}
.b-mkaucp .c1-tag-menu .c1-search{width:100%;min-width:0;height:38px;margin-bottom:6px}
.b-mkaucp .c1-tag-options>button{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:40px;padding:10px 12px;border:0;border-radius:10px;background:transparent;color:var(--text-primary);font:inherit}
@media (hover: hover){.b-mkaucp .c1-tag-options>button:hover:not(:disabled){background:var(--background-surface-subtle)}
}
.b-mkaucp .c1-tag-options>button:disabled{background:transparent;color:var(--control-disabled-text);cursor:default}
.b-mkaucp .c1-tag-options svg{width:16px;height:16px}
.b-mkaucp .c1-tag-manage{display:block;min-height:40px;padding:10px 12px;border-top:1px solid var(--border-subtle);color:var(--link-default);text-decoration:none}
.b-mkaucp .c1-tag-menu .trace{font-size:12px;margin:6px 12px;color:var(--text-secondary)}
.b-mkaucp .c1-sheet-head{display:none}
@media(max-width:767px){.b-mkaucp .c1-sheet:popover-open{position:fixed;inset:0;box-sizing:border-box;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;padding:0 16px 16px;border:0;border-radius:0;box-shadow:none;overflow-y:auto}
.b-mkaucp .c1-sheet-head{display:flex;align-items:center;gap:4px;position:sticky;top:0;z-index:2;box-sizing:border-box;height:56px;margin:0 -16px 12px;padding:0 8px;border-bottom:1px solid var(--border-subtle);background:var(--surface)}
.b-mkaucp .c1-sheet-head h2{flex:1 1 auto;min-width:0;margin:0;overflow:hidden;font-size:17px;font-weight:700;line-height:24px;text-overflow:ellipsis;white-space:nowrap}
.b-mkaucp .c1-sheet .c1-search{height:44px}
.b-mkaucp .c1-sheet .c1-tag-options>button{min-height:44px}
}
.b-mkaucp .c1-dialog{border-radius:16px;box-shadow:var(--shadow-floating)}
.b-mkaucp .c1-dialog-head{position:sticky;top:-20px;background:var(--surface);z-index:3;padding-block:8px}
.b-mkaucp .c1-import .c1-mobile-back{display:none}
.b-mkaucp .c1-dialog-head h2{font-size:16px;font-weight:700}
.b-mkaucp dialog.c1-import[open]{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"head head" "body body" "sum foot";width:min(1280px,calc(100vw - 64px));max-height:calc(100dvh - 64px);padding:0;overflow:hidden}
.b-mkaucp .c1-import h3{font-size:15px}
.b-mkaucp .c1-import>.c1-dialog-head{grid-area:head;position:static;display:flex;align-items:center;gap:16px;margin:0;padding:14px 20px;border-bottom:1px solid var(--border-subtle);background:var(--surface)}
.b-mkaucp .c1-import>.c1-dialog-head h2{flex:1 1 auto;min-width:0;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.b-mkaucp .c1-import>.c2-step-of{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.b-mkaucp .c1-import>.c2-step-of:is(:focus,:focus-visible){outline:none}
.b-mkaucp .c1-import>.c1-import-body{grid-area:body;min-height:0;overflow-y:auto;padding:16px 20px}
.b-mkaucp .c1-import>.c1-import-body:has(>.c2-map-list){padding-bottom:0}
.b-mkaucp .c1-import>.c1-import-summary{grid-area:sum;display:flex;align-items:center;min-width:0;margin:0;padding:12px 20px;border-top:1px solid var(--border-subtle);background:var(--surface);font-size:13px;color:var(--text-secondary)}
.b-mkaucp .c1-import>.c1-import-foot{grid-area:foot;position:static;display:flex;justify-content:flex-end;align-items:center;gap:10px;margin:0;padding:12px 20px;border-top:1px solid var(--border-subtle);background:var(--surface)}
.b-mkaucp .c6-result{display:flex;align-items:flex-start;gap:12px;margin:0 0 16px}
.b-mkaucp .c6-result:last-child{margin-bottom:0}
.b-mkaucp .c6-result-icon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;border-radius:50%}
.b-mkaucp .c6-result-icon svg{width:20px;height:20px;flex:0 0 20px;stroke-width:2.5}
.b-mkaucp .c6-result-warn svg{stroke-width:3}
.b-mkaucp .c6-result-ok{background:var(--status-success-background);color:var(--status-success-icon)}
.b-mkaucp .c6-result-warn{background:var(--status-warning-background);color:var(--status-warning-icon)}
.b-mkaucp .c6-result-text{display:flex;flex-direction:column;min-width:0;padding-top:4px}
.b-mkaucp .c6-result-text p{margin:0}
.b-mkaucp .c6-result-title{font-size:17px;font-weight:700;line-height:24px;color:var(--text-primary)}
.b-mkaucp .c6-result-note{font-size:14px;line-height:20px;color:var(--text-secondary)}
.b-mkaucp .c6-result-links{display:flex;flex-wrap:wrap;column-gap:16px}
.b-mkaucp .c6-link{display:inline-flex;align-items:center;min-height:32px;padding:0;border:0;background:none;font:inherit;font-size:14px;font-weight:600;color:var(--link-default);cursor:pointer}
@media (hover: hover){.b-mkaucp .c6-link:hover{text-decoration:underline}
}
.b-mkaucp .c6-link:disabled{background:transparent;color:var(--text-muted);cursor:default;text-decoration:none}
.b-mkaucp .c6-pending>div{padding-left:0}
.b-mkaucp .c6-pending-scroll{overflow-x:auto;max-width:100%}
.b-mkaucp .c6-pending-table{width:100%;font-size:13.5px}
.b-mkaucp .c6-pending-table :is(thead,th){background:transparent}
.b-mkaucp .c6-pending-table th{font-size:12px;font-weight:600;color:var(--text-muted);white-space:nowrap}
.b-mkaucp .c6-pending-table :is(th,td){border-bottom:1px solid var(--border-subtle);overflow-wrap:normal}
.b-mkaucp .c6-pending-table td{height:44px;padding-block:0;color:var(--text-primary);white-space:nowrap}
.b-mkaucp .c6-pending-table :is(th,td).c6-pending-rownum{width:48px;color:var(--text-secondary)}
.b-mkaucp .c6-pending-table td.c6-pending-reason{color:var(--status-warning-text);font-weight:600}
.b-mkaucp .c6-pending-mobile{display:none;margin:0;padding:0;list-style:none}
.b-mkaucp .c2-preview-pills{display:flex;flex-wrap:wrap;gap:6px;margin-block:12px}
.b-mkaucp .c2-preview-pills .chip{font-family:inherit;min-height:32px;padding:6px 12px;border-radius:999px;border:1px solid var(--border-default);background:var(--surface);font-size:13px;font-weight:600}
.b-mkaucp .c2-preview-pills .chip.active{background:var(--contact-pill-on-background);border-color:var(--contact-pill-on-border);color:var(--contact-pill-on-text)}
.b-mkaucp .c2-preview-scroll{overflow-x:auto;max-width:100%}
.b-mkaucp .c2-preview-table{min-width:64rem}
.b-mkaucp .c2-preview-table th{vertical-align:top;text-align:left}
.b-mkaucp .c2-preview-field{display:block;font-size:12px;font-weight:600}
.b-mkaucp .c2-preview-source{display:block;font-size:11px;font-weight:400;color:var(--text-muted)}
.b-mkaucp .c2-preview-omitted{background:var(--background-surface-subtle);color:var(--text-muted)}
.b-mkaucp .c2-preview-warn{background:var(--status-warning-background)}
.b-mkaucp .c2-preview-rownum{position:sticky;left:0;background:var(--surface);z-index:2}
.b-mkaucp .c2-preview-table :is(th,td).c2-preview-rownum{box-sizing:border-box;width:48px;min-width:0;max-width:48px;padding-inline:12px}
.b-mkaucp .c2-preview-flag{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:6px;border-radius:50%;background:var(--status-warning-text);color:var(--surface);font-size:12px;font-weight:700}
.b-mkaucp .c2-preview-mobile{display:none}
.b-mkaucp .c2-tagline{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 12px;font-size:13px;color:var(--text-secondary)}
.b-mkaucp .c2-tagline-tag{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:6px;background:transparent;padding:0;font:inherit;font-size:12.5px;color:var(--text-secondary)}
.b-mkaucp button.c2-tagline-tag{cursor:pointer;min-height:32px}
.b-mkaucp .c2-preview-table .e3-row-diagnostic{display:inline-block;vertical-align:middle;margin:0 0 0 8px}
.b-mkaucp .c2-preview-table .e3-row-diagnostic>summary{min-height:24px;font-size:13px}
.b-mkaucp .c2-preview-table .e3-row-diagnostic[open]{display:block;margin:4px 0 0}
.b-mkaucp .c2-preview-pager{justify-content:flex-end;align-items:center;gap:4px;margin-block:8px 0;font-size:12.5px;color:var(--text-secondary)}
.b-mkaucp .c2-preview-pager .c1-icon{width:32px;min-width:32px;height:32px;min-height:32px}
@media(max-width:767px){.b-mkaucp .c2-preview-scroll{display:none}
.b-mkaucp .c2-preview-mobile{display:block}
.b-mkaucp .c2-preview-pills{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-right:24px;-webkit-mask-image:linear-gradient(to right,black calc(100% - 24px),transparent);mask-image:linear-gradient(to right,black calc(100% - 24px),transparent)}
.b-mkaucp .c2-preview-pills::-webkit-scrollbar{display:none}
.b-mkaucp .c2-preview-pills .chip{flex:none}
.b-mkaucp .c2-preview-mrow{border-bottom:1px solid var(--border-subtle);padding-block:8px}
.b-mkaucp .c2-preview-mrow summary{display:grid;grid-template-columns:16px minmax(0,1fr) auto;column-gap:8px;align-items:center;min-height:44px;list-style:none;cursor:pointer}
.b-mkaucp .c2-preview-mrow summary>span{grid-column:2;grid-row:1}
.b-mkaucp .c2-preview-mrow summary>small{grid-column:2;grid-row:2;font-size:12px;font-weight:400;color:var(--text-muted)}
.b-mkaucp .c2-preview-mrow summary>svg{grid-column:1;grid-row:1 / span 2}
.b-mkaucp .c2-preview-mrow summary>.c2-preview-flag{grid-column:3;grid-row:1 / span 2}
.b-mkaucp .c2-preview-mrow summary::-webkit-details-marker{display:none}
}
.b-mkaucp .c1-steps{gap:12px;margin:0}
.b-mkaucp .c2-map-head{display:grid;grid-template-columns:minmax(120px,200px) minmax(0,1fr) 200px 24px;gap:16px;align-items:center;margin:-16px -20px 0;padding:10px 20px;border-bottom:1px solid var(--border-subtle);font-size:12px;font-weight:600;color:var(--text-muted)}
.b-mkaucp .c2-map-list{list-style:none;margin:0 -20px;padding:0;display:grid;gap:0}
.b-mkaucp .c2-map-list:is(:focus,:focus-visible){outline:none}
.b-mkaucp .c2-map-row{display:grid;grid-template-columns:minmax(120px,200px) minmax(0,1fr) 200px 24px;gap:16px;align-items:center;box-sizing:border-box;height:44px;min-height:44px;padding:0 20px;border-bottom:1px solid var(--border-subtle)}
.b-mkaucp .c2-map-row:last-child{border-bottom:0}
.b-mkaucp .c2-map-file{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.b-mkaucp .c2-map-example{font-size:13px;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.b-mkaucp .c2-map-row>.bh-choice{width:200px;min-width:0}
.b-mkaucp .c2-map-row .bh-choice-trigger{width:200px;height:32px;min-height:32px;padding:0 12px;gap:8px;justify-content:space-between;border:0;border-radius:999px;background:var(--background-surface-subtle);font-size:13.5px;font-weight:600;color:var(--text-primary)}
.b-mkaucp .c2-map-row .bh-choice-trigger>span{flex:1 1 auto;min-width:0;text-align:left}
.b-mkaucp .c2-map-row:has(.c2-map-omit) .bh-choice-trigger{font-weight:500;color:var(--text-secondary)}
.b-mkaucp .c2-map-row .bh-choice-trigger[aria-invalid=true]{box-shadow:inset 0 0 0 1.5px var(--status-danger-text)}
.b-mkaucp .c2-map-row svg{width:16px;height:16px}
.b-mkaucp .c2-map-row>span[aria-hidden] svg{color:var(--status-success-text,var(--text-secondary))}
.b-mkaucp .c2-map-omit{color:var(--text-muted)}
.b-mkaucp .c2-map-error{list-style:none}
.b-mkaucp .c1-steps li{display:flex;align-items:center;gap:6px;font-size:12.5px;white-space:nowrap}
.b-mkaucp .c1-step-circle{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border:1px solid var(--border-strong);border-radius:50%;flex:none;font-size:12px}
.b-mkaucp .c1-step-circle svg{width:14px;height:14px}
.b-mkaucp .c1-steps [aria-current=step] .c1-step-circle,.b-mkaucp .c1-step-done .c1-step-circle{background:var(--primary);color:var(--on-brand);border-color:var(--primary)}
.b-mkaucp .c1-drop{display:flex;align-items:center;justify-content:center;text-align:center;gap:12px;min-height:170px;border:1px dashed var(--border-strong);border-radius:14px;padding:20px}
.b-mkaucp .c1-drop>svg{width:28px;height:28px;color:var(--text-secondary)}
.b-mkaucp .c1-drop p{margin:0;color:var(--text-secondary)}
.b-mkaucp .c2-file-choice{margin:0;justify-content:center}
.b-mkaucp .c1-template{margin-block:8px 12px}
.b-mkaucp .c1-window-actions,.b-mkaucp .c1-import>.actions,.b-mkaucp .c1-window>.actions{display:flex;justify-content:flex-end;gap:10px;padding-top:16px}
.b-mkaucp .feedback-toast{position:fixed;left:50%;right:auto;bottom:calc(var(--c1-toast-offset,56px) + 24px);transform:translateX(-50%);max-width:calc(100vw - 32px);width:max-content;background:var(--background-surface-inverse);color:var(--text-inverse);border:0;border-radius:999px;box-shadow:var(--shadow-floating);z-index:100}
.b-mkaucp .feedback-toast .button{color:inherit;text-decoration:underline}
.c1-mobile-overflow.b-mkaucp{display:none}
@media(hover:none){.b-mkaucp .c1-chat .c1-icon{opacity:1}
}
@media(max-width:767px){.b-mkaucp .page-header h1{font-size:18px}
.b-mkaucp .page-header{gap:8px}
.b-mkaucp .page-actions{gap:4px}
.b-mkaucp .page-actions .button{padding-inline:12px}
.b-mkaucp .button{min-height:44px}
.b-mkaucp .c1-icon{width:40px;min-width:40px;height:40px;min-height:40px}
.b-mkaucp .c1-desktop-action{display:none!important}
.c1-mobile-overflow.b-mkaucp{display:block}
.b-mkaucp .c1-search-row{display:flex;flex-direction:column;align-items:stretch;gap:6px}
.b-mkaucp .c1-search{flex:0 0 40px;min-width:0}
.b-mkaucp .c1-filter-strip{width:100%;min-height:48px;mask-image:linear-gradient(to right,black calc(100% - 24px),transparent)}
.b-mkaucp .c1-filter-strip>.chip{min-height:40px}
.b-mkaucp .c2-directory-table{display:none!important}
.b-mkaucp .c2-directory{display:block}
.b-mkaucp .c2-directory-select{display:none}
.b-mkaucp .c2-directory-row{align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border-subtle);-webkit-tap-highlight-color:transparent}
.b-mkaucp .c2-directory-check{display:none}
.b-mkaucp .c2-directory-check.c1-selection-active{display:flex;width:28px}
.b-mkaucp .c2-directory-row:has(.c1-selection-active) .c1-mobile-avatar{display:none}
.b-mkaucp .c1-mobile-avatar{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;min-width:40px;border-radius:50%;font-size:13px}
.b-mkaucp .c2-directory-name{min-height:0;font-weight:600;font-size:15px;line-height:22px}
.b-mkaucp .c2-directory-phone{display:block;font-size:13px;line-height:20px;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.b-mkaucp .c2-directory-meta{display:inline-flex;margin:0 6px 0 0;font-size:13px;line-height:20px;vertical-align:middle}
.b-mkaucp .c2-directory-body>.c2-tags{display:flex;max-width:100%;flex-wrap:nowrap;max-height:20px;overflow:visible}
.b-mkaucp .c2-tags .c2-tag-trigger{position:relative;height:20px;min-height:20px;width:auto;min-width:24px}
.b-mkaucp .c2-tags .c2-tag-trigger::before{content:"";position:absolute;inset:-12px -10px}
.b-mkaucp .c1-pagination{gap:8px;padding-right:calc(var(--c1-dock-width,56px) + 12px);align-items:center;font-size:12px;flex-wrap:nowrap;min-height:56px}
.b-mkaucp .c1-pagination .actions{display:flex;flex-wrap:nowrap;align-items:center;gap:4px;min-width:0}
.b-mkaucp .c1-pagination .c1-range{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:none}
.b-mkaucp .c1-pagination .c1-page-numbers{display:none}
.b-mkaucp .c1-pagination .c1-icon{width:40px;min-width:40px;height:40px;min-height:40px}
.b-mkaucp .c1-page-size{flex-direction:row;align-items:center;gap:6px;flex:none}
.b-mkaucp .c1-page-size .bh-choice{width:68px}
.b-mkaucp .c1-detail-panel{inset:0;width:100%;border:0;padding-inline:16px;z-index:60;max-height:100dvh}
.b-mkaucp .c1-detail-panel>header{padding-block:10px;justify-content:flex-start}
.b-mkaucp .c1-detail-panel>header h2{flex:1;min-width:0;font-size:18px}
.b-mkaucp .c1-panel-mobile-back{display:inline-flex}
.b-mkaucp .c1-panel-close{display:none}
.b-mkaucp .c1-form-grid{grid-template-columns:1fr;gap:16px}
.b-mkaucp .c1-editor-actions{position:fixed;inset:auto 0 var(--c1-keyboard-offset,0) 0;z-index:65;background:var(--surface);border-top:1px solid var(--border-subtle);padding:10px 12px calc(14px + env(safe-area-inset-bottom));display:grid;grid-template-columns:minmax(max-content,1fr) minmax(max-content,1.4fr)}
.b-mkaucp .c1-editor-actions .button{justify-content:center;padding-inline:16px}
.b-mkaucp .c1-editor{padding-bottom:100px}
.b-mkaucp dialog.c1-import[open]{position:fixed;inset:0;box-sizing:border-box;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border:0;border-radius:0;padding:0;
grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto minmax(0,1fr) auto;grid-template-areas:"head" "step" "sum" "body" "foot"}
.b-mkaucp .c1-import>.c1-dialog-head{box-sizing:border-box;height:56px;padding:0 8px;gap:4px}
.b-mkaucp .c1-import>.c1-dialog-head h2{font-size:17px}
.b-mkaucp .c1-import .c1-mobile-back{display:inline-flex}
.b-mkaucp .c1-import .c1-steps{display:none}
.b-mkaucp .c1-import>.c2-step-of{grid-area:step;position:static;width:auto;height:auto;margin:0;overflow:visible;clip-path:none;white-space:normal;padding:12px 16px 0;font-size:13px;font-weight:600;color:var(--link-default)}
.b-mkaucp .c1-import>.c1-import-summary{padding:2px 16px 12px;border-top:0;border-bottom:1px solid var(--border-subtle)}
.b-mkaucp .c1-import>.c1-import-summary:empty{padding:0 0 12px}
.b-mkaucp .c1-import>.c1-import-body{padding:16px}
.b-mkaucp .c1-import>.c1-import-foot{display:grid;grid-template-columns:minmax(max-content,1fr) minmax(max-content,1.4fr);gap:10px;padding:10px 12px calc(14px + env(safe-area-inset-bottom))}
.b-mkaucp .c1-import>.c1-import-foot .button{width:100%;min-width:0;min-height:44px;justify-content:center;padding-inline:16px;white-space:nowrap;text-align:center}
.b-mkaucp .c1-import>.c1-import-foot>:only-child{grid-column:1 / -1}
.b-mkaucp .c6-pending-scroll{display:none}
.b-mkaucp .c6-pending-mobile{display:block}
.b-mkaucp .c6-pending-mobile li{display:flex;flex-direction:column;gap:2px;padding:10px 0;border-bottom:1px solid var(--border-subtle)}
.b-mkaucp .c6-pending-mobile li:last-child{border-bottom:0}
.b-mkaucp .c6-pending-mobile strong{font-size:15px;font-weight:600;line-height:22px;color:var(--text-primary)}
.b-mkaucp .c6-pending-mobile span{font-size:13px;line-height:20px;color:var(--status-warning-text);overflow-wrap:anywhere}
.b-mkaucp .c6-pending>summary{min-height:44px}
.b-mkaucp .c6-link{min-height:44px}
.b-mkaucp .c2-map-head{display:none}
.b-mkaucp .c2-map-list{margin:-16px -16px 0}
.b-mkaucp .c2-map-row{grid-template-columns:minmax(0,1fr) auto 20px;grid-template-rows:auto auto;column-gap:10px;row-gap:0;height:56px;min-height:56px;padding:0 16px}
.b-mkaucp .c2-map-file{grid-column:1;grid-row:1;align-self:end;font-size:15px}
.b-mkaucp .c2-map-example{grid-column:1;grid-row:2;align-self:start}
.b-mkaucp .c2-map-row>.bh-choice{grid-column:2;grid-row:1 / span 2;align-self:center;width:136px}
.b-mkaucp .c2-map-row .bh-choice-trigger{width:136px;height:40px;min-height:40px}
.b-mkaucp .c2-map-row>span[aria-hidden],.b-mkaucp .c2-map-row>.c2-map-omit{grid-column:3;grid-row:1 / span 2;align-self:center}
@media(max-width:359px){.b-mkaucp .c2-map-row>.bh-choice,.b-mkaucp .c2-map-row .bh-choice-trigger{width:116px}
}
.b-mkaucp .c1-steps{flex-wrap:wrap;gap:8px}
.b-mkaucp .c1-dialog .c1-icon{width:40px;min-width:40px}
}
@media(min-width:768px){.b-mkaucp .c2-directory{display:none}
}
@media(prefers-reduced-motion:reduce){.b-mkaucp *,.b-mkaucp *::before,.b-mkaucp *::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}
.e1-contact-skeleton.b-mkaucp,.c1-progress.b-mkaucp{opacity:1}
.c1-progress.b-mkaucp::before{width:100%;animation:none}
}
.b-mkaucp :is(.c1-avatar,.c1-mobile-avatar,.c1-detail-avatar,.c1-agent-avatar){background:var(--contact-avatar-background);color:var(--contact-avatar-foreground)}
.b-mkaucp .c1-search input{background:transparent!important;box-shadow:none}
.b-mkaucp .c1-search-row .report-columns-launcher{border:0!important;box-shadow:none}
.b-mkaucp .report-columns-launcher,.b-mkaucp .c1-icon{border:0!important}
.b-mkaucp .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.b-mkaucp .c1-drop{flex-direction:column}
@media(max-width:767px){.b-mkaucp .c1-filter-options .chip{min-height:40px}
.b-mkaucp .c1-search .c1-icon{width:40px;min-width:40px;height:40px;min-height:40px}
}
@media(max-width:359px){.b-mkaucp .c1-page-size>span{display:none}
.b-mkaucp .c1-pagination{font-size:11px;gap:4px}
}
@media(max-width:767px){.b-mkaucp .bh-selection-toolbar{gap:6px}
.b-mkaucp .bh-selection-toolbar>.actions{min-width:0;flex:1;flex-wrap:nowrap;gap:4px}
.b-mkaucp .bh-selection-toolbar strong{font-size:12px;line-height:16px}
.b-mkaucp .bh-selection-toolbar>.button{padding-inline:8px;gap:6px;flex:none}
}
.b-mkaucp dialog.c1-mobile-sheet{border:0;padding:0 0 env(safe-area-inset-bottom);background:var(--surface);color:var(--text);width:100%;max-width:100%;margin:auto 0 0;border-radius:18px 18px 0 0;box-shadow:var(--shadow-floating);overflow:hidden;max-height:calc(100dvh - 12px)}
.b-mkaucp .c1-mobile-more{display:none;min-height:1px}
.b-mkaucp .c1-mobile-end{display:none}
.b-mkaucp .c1-mobile-loading{display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px;color:var(--text-secondary);font-size:13px}
.b-mkaucp .c1-mobile-error{display:flex;align-items:center;justify-content:center;gap:8px;min-height:56px;font-size:13px;color:var(--text-secondary)}
.b-mkaucp .c1-filter-strip>.chip:active:not(:disabled),.b-mkaucp .c1-filter-options .chip:active:not(:disabled){background-color:var(--contact-pill-off-pressed);border-color:var(--contact-pill-off-pressed-border);color:inherit}
.b-mkaucp .c1-filter-strip>.chip.active:active:not(:disabled),.b-mkaucp .c1-filter-options .chip.active:active:not(:disabled){background-color:var(--contact-pill-pressed);color:var(--contact-pill-on-text);border-color:var(--contact-pill-on-border)}
.b-mkaucp :is(.c1-filter-strip>.chip,.c1-filter-options .chip).c2-tag-chip.active:active:not(:disabled){background-color:var(--contact-tag-chip-background);border-color:transparent;color:var(--contact-tag-chip-foreground);filter:brightness(.94)}
@media(max-width:767px){.b-mkaucp .c1-desktop-pagination{display:none!important}
.b-mkaucp .c1-mobile-more{display:flex;align-items:center;justify-content:center;min-height:56px}
.b-mkaucp .c1-mobile-end{display:block;height:84px}
}
.b-mkaucp dialog.c1-mobile-sheet::backdrop{background:var(--ui-sheet-overlay)}
.b-mkaucp dialog.c1-mobile-sheet .bh-sheet-handle{display:flex;justify-content:center;padding:12px 0 6px}
.b-mkaucp dialog.c1-mobile-sheet .bh-sheet-handle>span{width:36px;height:4px;border-radius:2px;background:var(--ui-sheet-handle)}
.b-mkaucp dialog.c1-mobile-sheet [role="menu"]{display:flex;flex-direction:column;padding:8px 0 14px}
.b-mkaucp .c1-sheet-item{display:flex;align-items:center;gap:14px;min-height:56px;padding:0 20px;border:0;background:transparent;color:var(--text);font:inherit;font-size:15px;text-align:left;cursor:pointer}
@media (hover: hover){.b-mkaucp .c1-sheet-item:hover{background:var(--background-surface-subtle)}
}
.b-mkaucp .c1-sheet-item:active{background:var(--brand-subtle)}
.b-mkaucp .c1-sheet-item svg{width:20px;height:20px;flex:none}
.b-mkaucp .c1-sheet-item .c1-sheet-main{flex:1}
.b-mkaucp .c1-sheet-item .c1-sheet-sub{font-size:13.5px;color:var(--text-secondary)}
.b-mkaucp .c1-sheet-item .c1-sheet-text{flex:1;display:flex;flex-direction:column;line-height:1.3}
.b-mkaucp .c1-sheet-item .c1-sheet-text small{font-size:12.5px;color:var(--text-secondary)}
.b-mkaucp .c1-sort-sheet .c1-sheet-head{display:flex;align-items:center;gap:4px;min-height:48px;padding:0 8px;margin-inline:0}
.b-mkaucp .c1-sort-sheet .c1-sheet-head .c1-sheet-title{font-size:16px;font-weight:600}
.b-mkaucp .c1-table-scroll,.b-mkaucp .c2-directory{max-height:none;margin-bottom:var(--c1-toast-lane,0px);overflow:visible;scroll-padding-block:40px 12px}
.b-mkaucp .feedback-toast-timed{animation-duration:3s!important}
@media(prefers-reduced-motion:reduce){.b-mkaucp .feedback-toast-timed{animation:feedback-dismiss 3s steps(1,end) forwards!important}
}
.b-mkaucp .c1-dialog-back{display:none}
.b-mkaucp .c1-format .c1-field-label{display:block;margin-top:16px;font-size:14px;font-weight:600;line-height:20px;color:var(--text-primary)}
.b-mkaucp .c1-format .c1-filter-options{margin-block:8px 0}
.b-mkaucp .c1-export-summary{margin:0;font-size:14px;line-height:20px;color:var(--text-secondary)}
@media(max-width:767px){.b-mkaucp .c1-import>.c1-dialog-head>h2:first-child{padding-left:8px}
}
@media(max-width:767px){.b-mkaucp dialog.c1-window[open]{position:fixed;inset:0;display:flex;flex-direction:column;box-sizing:border-box;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;padding:0 16px;border:0;border-radius:0;box-shadow:none;overflow-y:auto}
.b-mkaucp .c1-window>.c1-dialog-head{position:sticky;top:0;flex:none;justify-content:flex-start;gap:4px;box-sizing:border-box;height:56px;margin:0 -16px 12px;padding:0 8px;border-bottom:1px solid var(--border-subtle)}
.b-mkaucp .c1-window>.c1-dialog-head h2{flex:1 1 auto;min-width:0;overflow:hidden;font-size:17px;line-height:24px;text-overflow:ellipsis;white-space:nowrap}
.b-mkaucp .c1-window .c1-dialog-back{display:inline-flex}
.b-mkaucp .c1-window .c1-dialog-close{display:none}
.b-mkaucp .c1-window>.actions{position:sticky;bottom:0;display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin:auto -16px 0;padding:10px 12px 14px;border-top:1px solid var(--border-subtle);background:var(--surface)}
.b-mkaucp .c1-window>.actions .button{width:100%;min-height:44px;justify-content:center}
.b-mkaucp .c1-window>.actions .c1-window-dismiss{display:none}
.b-mkaucp .bh-filter-panel footer{grid-template-columns:minmax(max-content,1fr) minmax(max-content,1.4fr)}
.b-mkaucp .bh-filter-panel footer .button{justify-content:center;padding-inline:16px}
}
.b-mkaucp .c1-sheet-item.c1-sort-entry{min-height:60px;padding-block:6px}
.b-mkaucp .c1-sheet-item.c1-sort-entry>svg:last-child{width:16px;height:16px;color:var(--text-muted)}
.b-mkaucp .c1-sort-sheet{display:flex;flex-direction:column;max-height:calc(100dvh - 34px - env(safe-area-inset-bottom))}
.b-mkaucp .c1-sort-sheet>:not(.c1-sort-columns){flex:none}
.b-mkaucp .c1-sort-sheet .c1-sheet-title:focus{outline:none}
.b-mkaucp .c1-sort-columns{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.b-mkaucp .c1-sheet-item.c1-sort-column{min-height:46px;flex:none}
.b-mkaucp .c1-sheet-item.c1-sort-column>svg{width:18px;height:18px;color:var(--contact-sort-check)}
.b-mkaucp .c1-sort-order{display:flex;flex-direction:column;gap:8px;padding:12px 16px;border-top:1px solid var(--border-subtle)}
.b-mkaucp .c1-sort-order-label{padding-left:4px;font-size:13px;font-weight:600;color:var(--text-secondary)}
.b-mkaucp .c1-sort-pills{display:flex;gap:6px}
.b-mkaucp .c1-sort-pill{flex:1;min-width:0;height:40px;padding:0 12px;display:flex;align-items:center;justify-content:center;border:1px solid var(--contact-pill-off-border);border-radius:999px;background:var(--background-surface);color:var(--text-secondary);font:inherit;font-size:13px;font-weight:600;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent}
.b-mkaucp .c1-sort-pill[aria-checked=true]{background:var(--contact-pill-on-background);border-color:var(--contact-pill-on-border);color:var(--contact-pill-on-text)}
.b-mkaucp .c1-sort-pill:active{background:var(--contact-pill-pressed)}
.b-mkaucp .c1-sort-pill:focus-visible{outline:3px solid var(--contact-focus-ring);outline-offset:2px}
.b-mkaucp .c1-sort-apply{padding:10px 16px 14px;border-top:1px solid var(--border-subtle)}
.b-mkaucp .c1-sort-apply .button{width:100%;height:44px}
.b-mkaucp .c1-order-arrow{display:inline-flex;flex:none}
/* J14 · C15 1.14.4 (D11): en la tabla, las etiquetas de una fila van en una sola línea centrada, 6 px entre ellas; las que
no entran pasan a «+n», etiqueta neutra de 20 px. La celda nunca crece en alto (nunca dos líneas de etiquetas). */
.b-mkaucp .c2-contact-table .c2-tags{flex-wrap:nowrap; align-items:center; gap:6px; overflow:hidden; white-space:nowrap;}
.b-mkaucp .c2-contact-table .c2-tags .chip{flex:0 1 auto; min-width:0; max-width:100%; padding:0; border:0; background:none; line-height:20px;}
/* K5 · C15 1.14.5: «+n» es la misma etiqueta neutra en la fila del celular (antes texto suelto). */
.b-mkaucp :is(.c2-contact-table,.c2-directory) :is(.c2-tags,.c2-tag-probe-list) .c2-tag-trigger{flex:none; width:auto; min-width:0; height:20px; min-height:20px; padding:0 7px; border:0; border-radius:6px; background:#F2ECE6; color:#6B615A; font:inherit; font-size:11.5px; font-weight:600; line-height:20px;}
:root[data-theme=dark] .b-mkaucp :is(.c2-contact-table,.c2-directory) :is(.c2-tags,.c2-tag-probe-list) .c2-tag-trigger{background:#2A2320; color:#B7A59B;}
.b-mkaucp .c2-directory .c2-tags .c2-tag-trigger{margin-left:2px} /* K5: 6 px después de la última etiqueta (la fila usa 4 px entre etiquetas) */
/* J4 · C22 1.14.4: sin color conocido todavía, la píldora del filtro va con su forma y ancho finales y relleno de
esqueleto, hasta que llega el catálogo (nunca gris y después de color). */
.b-mkaucp .c2-tag-chip.c2-tag-pending{background:var(--background-surface-subtle) !important; border-color:transparent !important; color:transparent !important;}
.b-mkaucp .c2-tag-chip.c2-tag-pending *{color:transparent !important;}
/* J12 · C28 1.14.4 (D9): la tabla sin fondo propio; las filas sobre el fondo de la página (color-controls.css pinta toda
fila con la superficie) y la línea entre filas como única marca. Hover #F6F1EC (oscuro #241D1A); marcada en tinte. */
.b-mkaucp .c2-contact-table tbody tr{background-color:transparent}
@media (hover: hover){.b-mkaucp .c2-contact-table tbody tr:hover{background:#F6F1EC}
:root[data-theme=dark] .b-mkaucp .c2-contact-table tbody tr:hover{background:#241D1A}
.b-mkaucp .c1-scroll-x .c2-contact-table tbody tr:hover>[data-sticky-column]{background:#F6F1EC}
:root[data-theme=dark] .b-mkaucp .c1-scroll-x .c2-contact-table tbody tr:hover>[data-sticky-column]{background:#241D1A}
}
/* K1 · C22 1.14.5: el lanzador de columnas de la barra no dibuja nada en Contactos; vacío no ocupa el espacio entre
botones y «Exportar» termina en el borde de la tabla, igual cargando y cargada. */
.b-mkaucp .c1-desktop-action>[data-report-launcher]:empty{display:none}
/* K4 · C15 1.14.5: copia oculta de las etiquetas del filtro para medir el ancho que pide la columna (ContactTable). */
.b-mkaucp .c2-contact-table .c2-tag-probe{position:absolute; left:0; top:0; width:0; height:0; overflow:hidden; visibility:hidden; pointer-events:none; font-weight:400;}
.b-mkaucp .c2-contact-table .c2-tag-probe-list{display:inline-flex; align-items:center; gap:6px; width:max-content; white-space:nowrap;}
.b-mkaucp .c2-contact-table .c2-tag-probe-list .chip{flex:none; max-width:none; padding:0; border:0; background:none; line-height:20px;}
/* C28 · referencia menu-por-pagina: en escritorio el paginado de Contactos es la misma pieza que el de Etiquetas: todo junto
a la derecha, «Por página» en gris, botón compacto, el rango y los números redondos con la página actual en tinte. */
@media(min-width:768px){
.b-mkaucp .c1-pagination{justify-content:flex-end;gap:6px}
.b-mkaucp .c1-page-size{gap:6px}
.b-mkaucp .c1-page-size>span{font-size:12px;font-weight:400;color:#756A62}
.b-mkaucp .c1-page-size .bh-choice{width:auto}
.b-mkaucp .c1-page-size .bh-choice-trigger{width:auto;min-height:34px;height:34px;padding:0 10px 0 12px;gap:8px;border-radius:10px;font-size:13.5px}
.b-mkaucp .c1-pagination .c1-range{margin:0 6px;font-size:13px;font-weight:400;color:#6B615A;font-variant-numeric:tabular-nums}
.b-mkaucp .c1-pagination .actions .c1-icon{width:34px;min-width:34px;height:34px;min-height:34px;padding:0;border:0;border-radius:999px;font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums}
.b-mkaucp .c1-pagination .c1-page-numbers .button{background:transparent;color:#6B615A}
.b-mkaucp .c1-pagination .c1-page-numbers .button[aria-current=page]{background:oklch(.955 .025 50);color:oklch(.45 .12 40)}
:root[data-theme=dark] .b-mkaucp .c1-page-size>span,:root[data-theme=dark] .b-mkaucp .c1-pagination .c1-range,:root[data-theme=dark] .b-mkaucp .c1-pagination .c1-page-numbers .button{color:var(--text-muted)}
:root[data-theme=dark] .b-mkaucp .c1-pagination .c1-page-numbers .button[aria-current=page]{background:var(--primary-soft);color:#F2B493}
}
/* C22 · referencia contactos-cargando: la fila de esqueleto de la tabla ocupa todo el ancho (el motor de columnas la pasa
a bloque y la celda se encogía al círculo, sin barras): círculo, nombre a la izquierda, dato a la derecha y la línea
entre filas de borde a borde. */
.b-mkaucp .c2-contact-table .e1-skeleton-row{grid-column:1/-1;width:100%}
.b-mkaucp .c2-contact-table .e1-skeleton-row>td{grid-column:1/-1;display:block;width:100%;height:100%;padding:0 10px;box-sizing:border-box;border-bottom:1px solid var(--border-subtle)}
.b-mkaucp .c2-contact-table .e1-skeleton-bar{flex:0 0 28%;height:10px;border-radius:999px}
.b-mkaucp .c2-contact-table .e1-skeleton-row:nth-child(2n) .e1-skeleton-bar:not(.e1-skeleton-short){flex-basis:22%}
.b-mkaucp .c2-contact-table .e1-skeleton-row:nth-child(3n) .e1-skeleton-bar:not(.e1-skeleton-short){flex-basis:26%}
.b-mkaucp .c2-contact-table .e1-skeleton-short{flex:0 0 18%;margin-left:auto}
/* Generado desde ContactTagSelector.razor.css del portal actual (scripts/razor-css-to-module.py): misma cascada que Blazor. */
.e1-tag-assignment.b-12jf1h{min-width:0;}
.e1-tag-assignment.b-12jf1h .chat-r2-icon{width:18px; height:18px; flex:none;}
.e1-tag-assignment > .button.b-12jf1h{gap:8px;}
.c1-tags.b-12jf1h{display:flex; gap:var(--space-1); flex-wrap:wrap;}
.chip.b-12jf1h{display:inline-block; padding:var(--space-1) var(--space-2); border-radius:var(--radius-sm); background:var(--background-surface-subtle); overflow-wrap:anywhere;}
.e1-tag-selector.b-12jf1h{width:min(400px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow-y:auto; padding:var(--space-4); border:1px solid var(--border-subtle); border-radius:var(--radius-sm); color:var(--text-primary); background:var(--background-surface);}
.e1-tag-selector.b-12jf1h::backdrop{background:var(--backdrop-page);}
.c1-dialog-head.b-12jf1h{display:flex; align-items:center; justify-content:space-between; gap:var(--space-2);}
.c1-dialog-head h2.b-12jf1h{font-size:inherit;}
.e1-tag-selector > input[type=search].b-12jf1h{display:block; width:100%; min-height:44px; padding:var(--space-2) var(--space-3); border:1px solid var(--border-subtle); border-radius:var(--control-radius); background:var(--background-surface); color:var(--text-primary); font:inherit;}
.e1-tag-options.b-12jf1h{display:flex; flex-direction:column; gap:var(--space-2); margin-block:var(--space-3);}
.e1-tag-option.b-12jf1h{display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); min-height:48px; padding:var(--space-3); border:1px solid var(--border-subtle); border-radius:var(--radius-sm); cursor:pointer; background:var(--background-surface);}
@media (hover: hover){.e1-tag-option:hover.b-12jf1h{background:var(--background-surface-subtle);}
}
.e1-tag-option:focus-within.b-12jf1h{outline:2px solid var(--shell-accent); outline-offset:2px;}
.e1-tag-option.selected.b-12jf1h{border-color:var(--shell-accent); background:var(--navigation-active-background);}
.e1-tag-option > span.b-12jf1h{min-width:0; overflow-wrap:anywhere;}
.e1-tag-option strong.b-12jf1h{font-weight:500;}
.e1-tag-option small.b-12jf1h{display:block; margin-top:var(--space-1); color:var(--text-muted);}
.e1-tag-option input.b-12jf1h{flex:none;}
.e1-tag-dot.b-12jf1h{display:inline-block; margin-right:var(--space-2); width:8px; height:8px; border-radius:50%; background:var(--contact-tag-dot);}
.contact-tag-wrap.b-12jf1h{display:inline-flex; align-items:center; max-width:100%; border-radius:5px; background:var(--contact-tag-background, var(--contact-tag-neutral-background)); color:var(--contact-tag-foreground, var(--contact-tag-neutral-text));}
.contact-tag-wrap.b-12jf1h .contact-tag{background:transparent; color:inherit;}
.contact-tag-wrap.b-12jf1h .contact-tag:not(:last-child){padding-right:2px;}
.c1-tag-remove.b-12jf1h{display:inline-flex; align-items:center; justify-content:center; flex:none; width:22px; height:22px; border:0; border-radius:4px; background:transparent; color:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent;}
@media (hover: hover){.c1-tag-remove:hover:not(:disabled).b-12jf1h{background:var(--contact-tag-remove-hover);}
}
.e1-tag-assignment .contact-tag-wrap .c1-tag-remove:disabled.b-12jf1h{background:transparent; color:inherit; cursor:default;}
.c1-tag-remove:disabled.b-12jf1h svg{opacity:.45;}
.c1-tag-remove:active.b-12jf1h{background:var(--contact-tag-remove-pressed);}
.c1-tag-remove.b-12jf1h svg.chat-r2-icon{width:14px; height:14px;}
@media (max-width:767px){.c1-inline-tag-selector .c1-tags.b-12jf1h{gap:8px;}
.c1-tag-remove.b-12jf1h{position:relative;}
.c1-tag-remove.b-12jf1h::before{content:""; position:absolute; inset:-11px -4px;}
}
.e1-tag-selector .actions.b-12jf1h{display:flex; justify-content:space-between; flex-wrap:wrap; position:sticky; bottom:0; padding-block:var(--space-2); background:var(--background-surface);}
.c1-toast-undo.b-12jf1h{display:inline-flex; align-items:center; min-height:32px; padding:0 4px; border:0; border-radius:4px; background:transparent; color:var(--contact-toast-action); font:inherit; font-size:13.5px; font-weight:600; text-decoration:none; white-space:nowrap; cursor:pointer;}
@media (hover: hover){.c1-toast-undo:hover:not(:disabled).b-12jf1h{text-decoration:underline;}
}
.c1-toast-undo:focus-visible.b-12jf1h{outline:3px solid var(--contact-focus-ring); outline-offset:2px;}
.c1-toast-undo:disabled.b-12jf1h{background:transparent; color:var(--contact-disabled-text); cursor:default;}
.e1-tag-assignment.c1-inline-tag-selector .c1-tags.b-12jf1h{gap:.35rem;}
@media (max-width:767px){.e1-tag-assignment.c1-inline-tag-selector .c1-tags.b-12jf1h{gap:12px 8px;}
.c1-inline-tag-selector .contact-tag-wrap.b-12jf1h{height:32px; padding:0 4px 0 10px; gap:2px; border-radius:8px;}
.c1-inline-tag-selector .contact-tag-wrap.b-12jf1h .contact-tag{height:auto; padding:0; font-size:13px; font-weight:600; line-height:1.2;}
.c1-inline-tag-selector .contact-tag-wrap.b-12jf1h .contact-tag:last-child{padding-right:6px;}
.c1-inline-tag-selector .c1-tag-remove.b-12jf1h{width:24px; height:24px;}
.c1-inline-tag-selector .c1-tag-remove.b-12jf1h::before{inset:-10px -3px;}
}
.c1-inline-tag-selector .c1-tags.b-12jf1h{margin-bottom:8px;}
.c1-tag-menu.b-12jf1h{position:fixed; inset:auto; z-index:40; box-sizing:border-box; width:280px; max-width:calc(100vw - 16px); margin:0; max-height:65dvh; overflow:auto; padding:6px; border:1px solid var(--border-subtle); border-radius:14px; background:var(--surface); box-shadow:var(--shadow-floating);}
.c1-tag-menu .c1-sheet-head.b-12jf1h{display:none;}
.c1-tag-menu .c1-search.b-12jf1h{display:flex; align-items:center; gap:8px; box-sizing:border-box; width:100%; min-width:0; height:38px; margin-bottom:6px; padding-inline:12px; border:1.5px solid transparent; border-radius:999px; background:var(--background-surface-subtle);}
.c1-tag-menu .c1-search:focus-within.b-12jf1h{border:1.5px solid var(--primary); outline:none;}
.c1-tag-menu .c1-search input.b-12jf1h{width:100%; min-width:0; height:38px; min-height:0; border:0; outline:0; background:transparent; box-shadow:none; padding:0; font:inherit; color:var(--text-primary);}
.c1-tag-menu .c1-search input.b-12jf1h::-webkit-search-cancel-button{display:none;}
.c1-tag-menu .c1-search.b-12jf1h svg{width:16px; height:16px; flex:none; color:var(--text-secondary);}
.c1-tag-menu .c1-icon.b-12jf1h{display:inline-flex; align-items:center; justify-content:center; flex:none; width:36px; min-width:36px; height:36px; min-height:36px; padding:0; border:0; border-radius:50%; background:transparent; color:var(--text-secondary); cursor:pointer;}
@media (hover: hover){.c1-tag-menu .c1-icon:hover.b-12jf1h{background:var(--background-surface-subtle);}
}
.c1-tag-menu .c1-icon.b-12jf1h svg{width:18px; height:18px;}
.c1-tag-menu .c1-search .c1-icon.b-12jf1h{width:28px; min-width:28px; height:28px; min-height:28px;}
.c1-tag-options > button.b-12jf1h{display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; min-height:40px; padding:10px 12px; border:0; border-radius:10px; background:transparent; color:var(--text-primary); font:inherit;}
@media (hover: hover){.c1-tag-options > button:hover:not(:disabled).b-12jf1h{background:var(--background-surface-subtle);}
}
.c1-tag-options > button:disabled.b-12jf1h{background:transparent; color:var(--control-disabled-text); cursor:default;}
.c1-tag-options.b-12jf1h svg{width:16px; height:16px;}
.c1-tag-manage.b-12jf1h{display:block; min-height:40px; padding:10px 12px; border-top:1px solid var(--border-subtle); color:var(--link-default); text-decoration:none;}
.c1-tag-menu .trace.b-12jf1h{font-size:12px; margin:6px 12px; color:var(--text-secondary);}
@media (max-width:767px){.c1-tag-menu:popover-open.b-12jf1h{position:fixed; inset:0; width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; margin:0; padding:0 16px 16px; border:0; border-radius:0; box-shadow:none; overflow-y:auto;}
.c1-tag-menu .c1-sheet-head.b-12jf1h{display:flex; align-items:center; gap:4px; position:sticky; top:0; z-index:2; box-sizing:border-box; height:56px; margin:0 -16px 12px; padding:0 8px; border-bottom:1px solid var(--border-subtle); background:var(--surface);}
.c1-tag-menu .c1-icon.b-12jf1h,.c1-tag-menu .c1-search .c1-icon.b-12jf1h{width:40px; min-width:40px; height:40px; min-height:40px;}
.c1-tag-menu .c1-sheet-head h2.b-12jf1h{flex:1 1 auto; min-width:0; margin:0; overflow:hidden; font-size:17px; font-weight:700; line-height:24px; text-overflow:ellipsis; white-space:nowrap;}
.c1-tag-menu .c1-search.b-12jf1h{height:44px;}
.c1-tag-menu .c1-tag-options > button.b-12jf1h{min-height:44px;}
}
/* Generado desde ContactImportWizard.razor.css del portal actual (scripts/razor-css-to-module.py): misma cascada que Blazor. */
.e2-import-tags.b-2zemy8{padding:var(--space-3); margin-bottom:var(--space-3); border:1px solid var(--border-subtle); border-radius:var(--radius-sm); background:var(--background-surface-subtle);}
.e2-import-tags h4.b-2zemy8{margin:0 0 var(--space-2);}
.e2-import-tags p.b-2zemy8{margin-block:var(--space-2);}
.e2-import-pending.b-2zemy8{max-height:180px; overflow-y:auto;}
.e2-import-tag.b-2zemy8{display:flex; justify-content:space-between; align-items:center; gap:var(--space-2); padding-block:var(--space-2); border-bottom:1px solid var(--border-subtle);}
.e2-import-tag span.b-2zemy8{min-width:0; overflow-wrap:anywhere;}
.e2-import-tag small.b-2zemy8{display:block; color:var(--text-muted);}
.e2-import-resolver.b-2zemy8{display:grid; gap:var(--space-2); margin-top:var(--space-3);}
.e2-import-resolver h4.b-2zemy8{overflow-wrap:anywhere;}
.e2-import-resolver > .trace.b-2zemy8{margin:0;}
.e2-import-resolver > .button.b-2zemy8{justify-self:start;}
.e3-tag-results.b-2zemy8{margin-block:var(--space-3); overflow-wrap:anywhere;}
.e2-import-resolver input.b-2zemy8{box-sizing:border-box; width:100%; padding:var(--space-2); font:inherit; color:var(--text-primary); background:var(--background-surface); border:1px solid var(--border-subtle); border-radius:var(--control-radius);}
.e2-import-existing.b-2zemy8{max-height:180px; overflow-y:auto; display:flex; flex-direction:column; align-items:stretch;}
.e2-import-existing .button.b-2zemy8{justify-content:flex-start;}
@media(max-width:600px){.e2-import-tags .button.b-2zemy8,.e2-import-tags input.b-2zemy8{min-height:44px;}
}
/* Generado desde ContactTagBadge.razor.css del portal actual (scripts/razor-css-to-module.py): misma cascada que Blazor. */
.contact-tag.b-ahz2zb{display:inline-block;max-width:100%;height:20px;padding:0 7px;border:0;border-radius:999px;background:var(--contact-tag-neutral-background);color:var(--contact-tag-neutral-text);font-size:11.5px;font-weight:600;line-height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.contact-tag-colored.b-ahz2zb{background:var(--contact-tag-background);color:var(--contact-tag-foreground)}
.contact-tag.b-ahz2zb mark.chat-match,.contact-tag.b-ahz2zb .chat-match.chat-match{padding:0;background:none;color:inherit;font-weight:700;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
/* Generado desde ManualCopyDialog.razor.css del portal actual (scripts/razor-css-to-module.py): misma cascada que Blazor. */
.e2-copy-dialog.b-gi7ebf{box-sizing:border-box; width:min(600px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow-y:auto; padding:var(--space-4); border:1px solid var(--border-subtle); border-radius:var(--radius-sm); background:var(--background-surface); color:var(--text-primary);}
.e2-copy-dialog.b-gi7ebf::backdrop{background:var(--backdrop-page);}
.e2-copy-head.b-gi7ebf{display:flex; align-items:center; justify-content:space-between; gap:var(--space-2);}
.e2-copy-head h2.b-gi7ebf{margin:0;}
textarea.b-gi7ebf{box-sizing:border-box; width:100%; height:210px; max-height:40dvh; min-height:120px; padding:var(--space-3); font:inherit; font-size:inherit; color:var(--text-primary); background:var(--background-surface); border:1px solid var(--border-subtle); border-radius:var(--control-radius); resize:vertical;}
.actions.b-gi7ebf{display:flex; justify-content:flex-end; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-3);}
@media(max-width:480px){.button.b-gi7ebf{min-height:44px;}
}
.e2-copy-head .button.b-gi7ebf{display:inline-flex;align-items:center;justify-content:center;width:36px;min-width:36px;height:36px;padding:0}
.e2-copy-head.b-gi7ebf svg{width:18px;height:18px}
.e2-copy-back.b-gi7ebf{display:none!important}
@media(max-width:767px){.e2-copy-dialog[open].b-gi7ebf{position:fixed; inset:0; display:flex; flex-direction:column; width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; margin:0; padding:0 16px; border:0; border-radius:0;}
.e2-copy-head.b-gi7ebf{position:sticky; top:0; justify-content:flex-start; gap:4px; height:56px; margin:0 -16px 12px; padding:0 8px; border-bottom:1px solid var(--border-subtle); background:var(--background-surface);}
.e2-copy-head h2.b-gi7ebf{flex:1 1 auto; min-width:0; font-size:17px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.e2-copy-back.b-gi7ebf{display:inline-flex!important; width:40px!important; min-width:40px!important; height:40px!important;}
.e2-copy-close.b-gi7ebf{display:none!important;}
textarea.b-gi7ebf{flex:1 1 auto; max-height:none;}
.actions.b-gi7ebf{position:sticky; bottom:0; display:grid; grid-template-columns:minmax(0,1fr); margin:12px -16px 0; padding:10px 12px 14px; border-top:1px solid var(--border-subtle); background:var(--background-surface);}
.actions .button.b-gi7ebf{width:100%; min-height:44px; justify-content:center;}
.actions .e2-copy-done.b-gi7ebf{display:none;}
.actions .e2-copy-select.b-gi7ebf{background:var(--primary); color:var(--primary-contrast,var(--on-brand));}
}
/* Etiquetas R1 (kit 1.14.3): medidas de la referencia «Referencia Etiquetas.dc.html» con los tokens --tm-* del tema
(claro y oscuro). Las piezas del kit de Configuración (tm-head, tm-tabs, tm-search, tm-pill, tm-btn, tm-menu-items,
tm-window) vienen de team.css; aquí solo va lo propio de la pantalla. */
.b-6qd84q{--tg-check:var(--control-border)}
/* I3 · Encabezado: ← de 36 px en el color del título, título de 26 px, «Nueva etiqueta» de 40 px; pestañas a 12 px. */
.b-6qd84q .tg-head{margin:0 0 12px;flex-wrap:nowrap}
.b-6qd84q .tg-head .tm-head-title{gap:8px}
.b-6qd84q .tg-head h1{margin:0;font-size:26px;font-weight:700;line-height:40px;letter-spacing:-.01em}
.b-6qd84q .tg-back{display:inline-flex;align-items:center;justify-content:center;flex:none;width:36px;height:36px;margin-left:-6px;border-radius:999px;color:var(--tm-text)}
.b-6qd84q .tg-back .chat-r2-icon{width:20px;height:20px}
.b-6qd84q .tg-back:hover{background:var(--tm-hover)}
.b-6qd84q .tg-head .tm-btn .chat-r2-icon{width:16px;height:16px}
.b-6qd84q .tg-sub{margin:12px 0 0;font-size:12.5px;color:var(--tm-secondary)}
/* I4 · Buscador de 420 px y píldoras de estado a 8 px; línea vertical y «Más filtros» al final. */
.b-6qd84q .tg-filters{display:flex;align-items:center;gap:8px;margin-top:16px;min-width:0}
.b-6qd84q .tg-search{flex:0 0 420px;width:420px;min-width:0}
.b-6qd84q .tg-pill-row{display:flex;align-items:center;gap:8px;min-width:0;overflow-x:auto;scrollbar-width:none}
/* J15 · aire para el anillo de foco (2 + 2 px): el desplazamiento lateral de la fila lo cortaba arriba y abajo. */
.b-6qd84q .tg-pill-row{padding:4px;margin:-4px}
.b-6qd84q .tg-pill-row::-webkit-scrollbar{display:none}
.b-6qd84q .tg-state{flex:none;flex-wrap:nowrap;gap:8px}
.b-6qd84q .tg-pill-row>*{flex:none}
.b-6qd84q .tg-divider{flex:none;width:1px;height:20px;background:var(--tm-line)}
.b-6qd84q .tg-date-pill .chat-r2-icon{width:14px;height:14px}
.b-6qd84q .tg-filters .bh-filter-trigger{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px 0 12px;border:1px solid var(--tm-control-border);border-radius:999px;background:var(--tm-surface);color:var(--tm-secondary);font:inherit;font-size:13px;font-weight:600;white-space:nowrap;cursor:pointer}
.b-6qd84q .tg-filters .bh-filter-trigger .chat-r2-icon{width:14px;height:14px}
/* J8 · C07 1.14.4: «Más filtros» en tinte (encendida) mientras su panel o su hoja están abiertos. */
.b-6qd84q .tg-filters .bh-filter-trigger[aria-expanded=true]{background:var(--tm-soft);border-color:var(--tm-accent-border);color:var(--tm-accent-text)}
.b-6qd84q .tg-filter-options .tm-pill{gap:6px}
.b-6qd84q .tg-range-fields input::placeholder{color:var(--tm-meta);opacity:1}
/* J9 · celular: Desde y Hasta son botones con aspecto de campo (C05, 42 px) que abren «← Elegir fechas». */
.b-6qd84q .tg-date-button{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;height:42px;padding:0 12px;border:1px solid var(--tm-control-border);border-radius:10px;background:var(--tm-surface);color:var(--tm-text);font:inherit;font-size:14.5px;text-align:left;cursor:pointer}
.b-6qd84q .tg-date-button .chat-r2-icon{flex:none;width:16px;height:16px;color:var(--tm-secondary)}
.b-6qd84q .tg-date-empty{color:var(--tm-meta)}
.b-6qd84q .tg-date-screen{display:flex;flex-direction:column;gap:8px}
.b-6qd84q .tg-date-screen .tg-sort-head{padding:0 0 4px;margin-left:-8px}
/* J9 · «← Elegir fechas»: el rango debajo del mes, centrado, 13 px; «Aplicar» a todo el ancho (44 px) en la barra fija. */
.b-6qd84q .tg-date-screen .stat-range-foot{display:flex;justify-content:center;text-align:center;font-size:13px;color:var(--tm-secondary)}
.b-6qd84q .bh-filter-panel footer:has(>.tg-wide){display:flex}
.b-6qd84q .bh-filter-panel footer>.tg-wide{flex:1;height:44px}
/* C07 · panel «Más filtros» en escritorio como la referencia panel-mas-filtros-etiquetas: 16 px de aire, radio 14,
12 px entre partes, «Limpiar filtros» y «Aplicar» de 40 px (150 px como mínimo) abajo a la derecha, sin pie pegado. */
@media(min-width:768px){
/* J10 · un solo grupo («Creación»): el panel no estira al ancho de la fila. FilterPanel.tsx pone el ancho de la
fila en línea (box.width); sin tope, los 420 px de Desde/Hasta quedaban sueltos en una tarjeta de 1400+ px,
con «Limpiar filtros»/«Aplicar» lejos a la derecha. El panel mide su contenido (16 px de aire + 420 px de
Desde/Hasta) hasta 488 px; max-width gana sobre el ancho en línea. La hoja del celular no se toca. */
.b-6qd84q dialog.bh-filter-panel{padding:16px;border-radius:14px;max-width:488px}
.b-6qd84q .bh-filter-panel .bh-filter-groups{display:flex;flex-direction:column;gap:12px}
.b-6qd84q .bh-filter-panel footer{position:static;margin:12px 0 0;padding:0;gap:8px}
.b-6qd84q .bh-filter-panel footer .button{min-width:150px;height:40px;min-height:40px;padding:0 18px;border-radius:999px;font-size:14px;font-weight:600}
}
.b-6qd84q .tg-filter-group h3{margin:0 0 12px;font-size:12px;font-weight:600;color:var(--tm-meta)}
.b-6qd84q .tg-filter-options{display:flex;flex-wrap:wrap;gap:8px}
.b-6qd84q .tg-range{margin-top:12px;display:flex;flex-direction:column;gap:12px}
.b-6qd84q .tg-range-fields{display:grid;grid-template-columns:repeat(2,204px);gap:12px}
.b-6qd84q .tg-date{position:relative;display:block}
.b-6qd84q .tg-date .chat-r2-icon{position:absolute;top:50%;right:12px;width:16px;height:16px;color:var(--tm-secondary);transform:translateY(-50%);pointer-events:none}
.b-6qd84q .tg-filter-options .tm-pill .chat-r2-icon{width:14px;height:14px}
.b-6qd84q .tg-range-fields input{padding-right:38px!important;height:42px;width:100%;padding:0 12px;border:1px solid var(--tm-control-border);border-radius:10px;background:var(--tm-surface);color:var(--tm-text);font:inherit;font-size:14.5px}
/* I5 · Vacío centrado a 24 px de los filtros. */
.b-6qd84q .tg-empty{padding:24px 16px 0}
.b-6qd84q .tg-loading{margin-top:16px}
/* I8 · Barra de la tabla (44 px, a 12 px de los filtros) y barra de selección en el mismo lugar y alto. */
.b-6qd84q .tg-bar{display:flex;align-items:center;gap:8px;height:44px;margin-top:12px}
.b-6qd84q .tg-count{flex:1;font-size:14px;font-weight:600;white-space:nowrap}
.b-6qd84q .tg-bar-end{display:flex;align-items:center;gap:8px;margin-left:auto}
.b-6qd84q .tg-export{height:36px;padding:0 16px;font-size:14px}
.b-6qd84q .tg-export .chat-r2-icon{width:16px;height:16px}
.b-6qd84q .tg-bar .tm-icon-btn{color:var(--tm-text)}
.b-6qd84q .tg-selection{padding:0 6px;border-radius:12px;background:var(--tm-soft)}
.b-6qd84q .tg-selection>strong{flex:1;font-size:14px;font-weight:600;color:var(--tm-accent-text);white-space:nowrap}
.b-6qd84q .tg-selection>.tm-icon-btn{color:var(--tm-accent-text)}
.b-6qd84q .tg-bar-actions{display:flex;align-items:center;gap:8px}
.b-6qd84q .tg-bar-btn{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border:0;border-radius:999px;background:var(--tm-surface);color:var(--tm-text);font:inherit;font-size:13.5px;font-weight:600;white-space:nowrap;cursor:pointer}
.b-6qd84q .tg-bar-btn .chat-r2-icon{width:16px;height:16px}
/* I6 · Tabla C28 sin caja: solo la línea entre filas, encabezado de 40 px y filas de 56 px centradas. */
.b-6qd84q .tg-table-wrap{margin-top:4px;min-width:0}
.b-6qd84q .tg-table-wrap[hidden]{display:none}
.b-6qd84q .tg-columns-launcher{display:none}
.b-6qd84q .tg-table{width:100%;border-collapse:collapse;table-layout:auto}
.b-6qd84q .tg-table th{height:40px;padding:0 12px;text-align:left;font-size:12px;font-weight:600;color:var(--tm-meta);border-bottom:1px solid var(--tm-line);white-space:nowrap;background:var(--tm-page);position:sticky;top:0;z-index:1}
.b-6qd84q .tg-table td{height:56px;padding:0 12px;border-bottom:1px solid var(--tm-line);font-size:13.5px;color:var(--tm-secondary);white-space:nowrap;vertical-align:middle}
/* J12 · C28 1.14.4 (D9): sin fondo propio; color-controls.css pinta toda fila con la superficie. */
.b-6qd84q .tg-table tbody tr{background-color:transparent}
.b-6qd84q .tg-table tbody tr:hover td{background:var(--tm-row-hover)}
.b-6qd84q .tg-table tbody tr.tg-marked td{background:var(--tm-soft)}
/* Filas marcadas seguidas: un solo tinte, sin línea entre ellas (referencia barra-seleccion-etiquetas). */
.b-6qd84q .tg-table tbody tr.tg-marked:has(+tr.tg-marked) td{border-bottom-color:transparent}
/* «Columnas y vistas» dibuja la tabla como grilla (feedback.css, data-view-managed): cada celda centra su contenido. */
.b-6qd84q .tg-table[data-view-managed=true]>:is(thead,tbody)>tr>:is(th,td):not([hidden]){display:flex!important;align-items:center;min-width:0}
.b-6qd84q .tg-table[data-view-managed=true]>:is(thead,tbody)>tr>.tg-col-contacts{justify-content:flex-end}
.b-6qd84q .tg-table[data-view-managed=true]>:is(thead,tbody)>tr>.tg-col-action{justify-content:flex-end}
.b-6qd84q .tg-table[data-view-managed=true]>tbody>tr>.tg-col-description{display:block!important;line-height:56px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* I6 · Primera columna fija con sombra cuando la tabla se desplaza de lado (ReportViews marca data-sticky-column y
tg-scroll-x; fondos como Contactos: página, hover y marcada). */
.b-6qd84q .tg-table-wrap.tg-scroll-x .tg-table [data-sticky-column]{position:sticky;z-index:1;background:var(--tm-page)}
.b-6qd84q .tg-table-wrap.tg-scroll-x .tg-table th[data-sticky-column]{z-index:2}
.b-6qd84q .tg-table-wrap.tg-scroll-x .tg-table [data-sticky-column="last"]{box-shadow:inset -1px 0 0 var(--tm-line),8px 0 10px -8px var(--shadow-lg-color,var(--shadow-color))}
.b-6qd84q .tg-table-wrap.tg-scroll-x .tg-table tbody tr:hover>[data-sticky-column]{background:var(--tm-row-hover)}
.b-6qd84q .tg-table-wrap.tg-scroll-x .tg-table tbody tr.tg-marked>[data-sticky-column]{background:var(--tm-soft)}
.b-6qd84q .tg-col-check{width:44px;padding:0 0 0 13px!important}
.b-6qd84q .tg-col-tag{min-width:200px}
.b-6qd84q .tg-col-description{min-width:0;overflow:hidden;text-overflow:ellipsis}
.b-6qd84q .tg-col-contacts{min-width:110px;text-align:right!important;font-variant-numeric:tabular-nums}
.b-6qd84q th.tg-col-contacts .tg-sort{justify-content:flex-end}
.b-6qd84q .tg-col-created{min-width:130px}
.b-6qd84q .tg-col-action{width:50px;padding:0 4px 0 0!important;text-align:right}
.b-6qd84q .tg-sort{display:inline-flex;align-items:center;gap:4px;height:40px;padding:0;border:0;background:none;font:inherit;font-size:12px;font-weight:600;color:var(--tm-meta);cursor:pointer;white-space:nowrap}
.b-6qd84q th[aria-sort=ascending] .tg-sort,.b-6qd84q th[aria-sort=descending] .tg-sort{color:var(--tm-text)}
.b-6qd84q .tg-sort .chat-r2-icon{width:14px;height:14px}
.b-6qd84q .tg-tag-cell{display:inline-flex;align-items:center;gap:6px;max-width:100%;vertical-align:middle}
.b-6qd84q .tg-state-tag{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:6px;background:var(--tm-neutral);color:var(--tm-secondary);font-size:11.5px;font-weight:600;white-space:nowrap}
.b-6qd84q .tg-none,.b-6qd84q .tg-zero{color:var(--tm-meta)}
.b-6qd84q .tg-col-description .chat-match{padding:0;background:none;color:var(--tm-accent);font-weight:700}
.b-6qd84q .tg-count-link{color:var(--tm-text);text-decoration:none;font-variant-numeric:tabular-nums}
.b-6qd84q .tg-count-link:hover{color:var(--tm-accent);text-decoration:underline}
.b-6qd84q .tg-row-more{width:34px;height:34px;color:var(--tm-text)}
@media(hover:hover){
.b-6qd84q .tg-table .tg-row-menu:not([open]) .tg-row-more{opacity:0}
/* J6 · el ⋮ aparece con el mouse sobre cualquier celda de la fila o con el foco dentro de ella (pesa más que la regla
que lo oculta: 0,5,2 contra 0,5,0). */
.b-6qd84q .tg-table tbody tr:is(:hover,:focus-within) .tg-row-menu .tg-row-more,.b-6qd84q .tg-table .tg-row-menu .tg-row-more:focus-visible{opacity:1}
}
.b-6qd84q .tg-row-more .chat-r2-icon{width:18px;height:18px}
/* Casilla de C28 1.14.3: 18 px con borde de control; marcada, terracota con ✓; algunas, con −. Zona de 44 px. */
.b-6qd84q .tg-check{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;padding:0;border:1.5px solid var(--tg-check);border-radius:5px;background:var(--tm-surface);color:var(--tm-on-accent);cursor:pointer;vertical-align:middle;position:relative}
.b-6qd84q .tg-check::before{content:"";position:absolute;inset:-13px}
.b-6qd84q .tg-check[aria-checked=true],.b-6qd84q .tg-check[aria-checked=mixed]{background:var(--tm-accent);border-color:var(--tm-accent)}
.b-6qd84q .tg-check .chat-r2-icon{width:13px;height:13px;stroke-width:3}
/* I10 · Paginado de 44 px a la derecha; un solo scroll, el de la página. */
.b-6qd84q .tg-pager{display:flex;align-items:center;justify-content:flex-end;gap:6px;min-height:44px;margin-top:8px;padding-right:calc(var(--chat-launcher-width,56px) + 12px)}
.b-6qd84q .tg-pager-label{font-size:12px;color:var(--tm-meta)}
.b-6qd84q .tg-pager .tm-menu{position:relative}
.b-6qd84q .tg-size{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 10px 0 12px;border:1px solid var(--tm-control-border);border-radius:10px;background:var(--tm-surface);color:var(--tm-text);font:inherit;font-size:13.5px;cursor:pointer}
.b-6qd84q .tg-size .chat-r2-icon{width:16px;height:16px;color:var(--tm-secondary)}
/* J7 · C11 1.14.4 menú de valores cortos: debajo del botón y alineado a su borde izquierdo (lo ubica el paginado, fijo
a la ventana; arriba solo si abajo no entra), del ancho de su contenido (la opción más larga, 12 px de aire y la
columna del ✓ de 16 px) y nunca más angosto que el botón; opciones de 40 px. */
.b-6qd84q .tg-size-menu{top:calc(100% + 6px);bottom:auto;left:0;right:auto;width:max-content;min-width:100%;padding:6px}
.b-6qd84q .tg-size-menu [role=menuitemradio]{display:grid;grid-template-columns:auto 16px;gap:24px;min-height:40px;height:40px;padding:0 12px}
.b-6qd84q .tg-size-menu [role=menuitemradio]>.tg-option-text{font-variant-numeric:tabular-nums}
.b-6qd84q .tg-range-text{margin:0 6px;font-size:13px;color:var(--tm-secondary);font-variant-numeric:tabular-nums}
.b-6qd84q .tg-page{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border:0;border-radius:999px;background:transparent;color:var(--tm-secondary);font:inherit;font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums;cursor:pointer}
.b-6qd84q .tg-page:hover:not(:disabled){background:var(--tm-hover)}
.b-6qd84q .tg-page[aria-current=page]{background:var(--tm-soft);color:var(--tm-accent-text)}
.b-6qd84q .tg-page:disabled{background:transparent;color:var(--tm-disabled);cursor:default}
.b-6qd84q .tg-page .chat-r2-icon{width:18px;height:18px}
.b-6qd84q .tg-gap{width:20px;text-align:center;color:var(--tm-meta)}
/* I9 · Menú de fila C11 (TeamMenu): opciones de 40 px con ícono de 18 px; separador antes de Archivar. */
.b-6qd84q .tg-row-menu{position:relative;display:inline-flex}
.b-6qd84q .tm-menu-divider{height:1px;margin:6px 0;background:var(--tm-line);flex:none}
.b-6qd84q .tg-option-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;text-align:left}
.b-6qd84q .tg-option-text small{font-size:12.5px;color:var(--tm-secondary)}
.b-6qd84q .tm-menu-items [role=menuitemradio]{display:flex;align-items:center;gap:12px;width:100%;min-height:40px;padding:10px 12px;border:0;border-radius:10px;background:none;color:var(--tm-text);font:inherit;font-size:14px;cursor:pointer}
.b-6qd84q .tm-menu-items [role=menuitemradio]:hover{background:var(--tm-row-hover)}
.b-6qd84q .tm-menu-items [role=menuitemradio] .chat-r2-icon{width:16px;height:16px;color:var(--tm-accent-text)}
.b-6qd84q .tg-sheet-tag{padding:0 20px 8px}
/* I2 · Ventana de 480 px y formulario (C05): campos de 42 px, ayuda de 12,5 px, error de 12 px con borde de error. */
.b-6qd84q .tg-form{display:flex;flex-direction:column;gap:14px}
.b-6qd84q .tg-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.b-6qd84q .tg-field>label,.b-6qd84q .tg-label{font-size:14px;font-weight:600;color:var(--tm-text)}
.b-6qd84q .tg-optional{color:var(--tm-meta);font-weight:400}
.b-6qd84q .tg-input{height:42px;width:100%;padding:0 12px;border:1px solid var(--tm-control-border);border-radius:10px;background:var(--tm-surface);color:var(--tm-text);font:inherit;font-size:14.5px;outline:0}
.b-6qd84q .tg-input::placeholder{color:var(--tm-meta)}
.b-6qd84q .tg-input:focus-visible{border-color:var(--tm-accent);box-shadow:0 0 0 3px var(--tm-focus)}
.b-6qd84q .tg-input.invalid,.b-6qd84q .tg-input.invalid:focus,.b-6qd84q .tg-input.invalid:focus-visible{border-color:var(--tm-error);box-shadow:none;outline:0}
.b-6qd84q .tg-textarea{height:auto;min-height:110px;padding:10px 12px;resize:vertical;line-height:1.45}
.b-6qd84q .tg-help{font-size:12.5px;color:var(--tm-secondary)}
.b-6qd84q .tg-help.tg-error{font-size:12px;color:var(--tm-error)}
.b-6qd84q .tg-preview{display:flex;align-items:center;gap:10px}
.b-6qd84q .tg-export-line{margin:0;font-size:14px;color:var(--tm-text)}
.b-6qd84q .tm-window:has(.tg-form),.b-6qd84q .tm-window:has(.tg-export-line),.b-6qd84q .tm-window:has(.tg-copy){width:480px}
.b-6qd84q .tm-window:has(:is(.tg-form,.tg-export-line,.tg-copy)) footer{padding:12px 20px 16px;border-top:1px solid var(--tm-line)}
.b-6qd84q .tm-window:has(:is(.tg-form,.tg-export-line,.tg-copy)) footer .tm-btn .chat-r2-icon{width:16px;height:16px}
/* J1 · C46 ventana de respaldo de «Copiar para pegar en Excel»: frase, campo de solo lectura de 132 px sin partir filas
(desplazamiento lateral dentro del campo) y la cantidad debajo. */
.b-6qd84q .tg-copy{display:flex;flex-direction:column;gap:12px}
.b-6qd84q .tg-copy-line{margin:0;font-size:14px;font-weight:400;line-height:1.45;color:var(--tm-text)}
.b-6qd84q .tg-copy-text{display:block;box-sizing:border-box;width:100%;height:132px;margin:0;padding:10px 12px;border:1px solid var(--tm-control-border);border-radius:10px;background:var(--tm-surface);color:var(--tm-text);font:inherit;font-size:13px;line-height:1.55;font-variant-numeric:tabular-nums;white-space:pre;overflow:auto;resize:none;outline:0}
.b-6qd84q .tg-copy-text:focus{border-color:var(--tm-accent);box-shadow:0 0 0 3px var(--tm-focus)}
.b-6qd84q .tg-copy-meta{margin:-4px 0 0;font-size:12px;font-weight:400;color:var(--tm-meta)}
.b-6qd84q .tm-window.tm-confirm{width:420px}
/* J16 · C12: «¿Descartar los cambios?» con la línea de 1 px del pie sobre los botones, como las demás ventanas. */
.b-6qd84q .tm-window.tm-confirm footer{padding:12px 20px 16px;border-top:1px solid var(--tm-line)}
/* C45 · Selector de color: 10 columnas de 44 px; círculo de 28 px; elegido con anillo de 2 px a 2 px y punto de 8 px. */
.b-6qd84q .tg-colors{display:grid;grid-template-columns:repeat(10,44px)}
.b-6qd84q .tg-color{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:999px;background:transparent;cursor:pointer}
.b-6qd84q .tg-swatch{position:relative;display:block;width:28px;height:28px;border-radius:50%}
.b-6qd84q .tg-color:hover .tg-swatch{box-shadow:0 0 0 2px var(--tm-surface),0 0 0 4px var(--tm-line)}
.b-6qd84q .tg-color[aria-checked=true] .tg-swatch{box-shadow:0 0 0 2px var(--tm-surface),0 0 0 4px var(--tm-text)}
.b-6qd84q .tg-swatch-dot{position:absolute;inset:10px;border-radius:50%}
.b-6qd84q .tg-color:focus-visible{outline:0;box-shadow:var(--focus-ring-shadow)}
/* J15 · C01/C04/C28 1.14.4 (D7): el anillo de foco terracota del tema también en los controles propios de Etiquetas
(casillas, enlaces de conteo, paginado, orden, «Más filtros» y los campos-botón de fecha del celular). */
.b-6qd84q :is(.tg-check,.tg-count-link,.tg-size,.tg-page,.tg-sort,.tg-bar-btn,.tg-date-button,.tg-sort-column):focus-visible,
.b-6qd84q .tg-filters .bh-filter-trigger:focus-visible{outline:none;box-shadow:var(--focus-ring-shadow)}
.b-6qd84q .tg-count-link{border-radius:4px}
/* I11 · Celular: nada de escritorio; lista C17 con hojas inferiores; todo lo tocable de 44 px. */
.b-6qd84q .tg-list{margin:0;padding:0;list-style:none}
.b-6qd84q .tg-item{display:flex;align-items:center;gap:8px;min-height:64px;padding:8px 0;-webkit-touch-callout:none;user-select:none}
.b-6qd84q .tg-item.tg-marked{margin:0 -16px;padding:8px 16px;background:var(--tm-soft)}
.b-6qd84q .tg-item-check{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;margin-left:-13px}
.b-6qd84q .tg-item-text{display:flex;flex-direction:column;align-items:flex-start;gap:6px;flex:1;min-width:0}
.b-6qd84q .tg-item-line1{display:flex;align-items:center;gap:6px;max-width:100%}
.b-6qd84q .tg-item-line2{display:flex;max-width:100%;font-size:13.5px;color:var(--tm-secondary);white-space:nowrap;overflow:hidden;font-variant-numeric:tabular-nums}
.b-6qd84q .tg-item-count{flex:none}
.b-6qd84q .tg-item-date{min-width:0;overflow:hidden;text-overflow:ellipsis}
.b-6qd84q .tg-item .tg-row-more{width:44px;height:44px;margin-right:-12px}
.b-6qd84q .tg-more{display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px;font-size:13px;color:var(--tm-secondary)}
.b-6qd84q .tg-table[hidden]{display:none!important}
.b-6qd84q .tg-sort-host{position:static}
.b-6qd84q .tg-sort-sheet .bheli-bottom-sheet{display:flex;flex-direction:column;padding:0}
.b-6qd84q .tg-sheet-title{font-size:16px;font-weight:700;color:var(--tm-text)}
.b-6qd84q .tg-sort-head{display:flex;align-items:center;gap:8px;padding:0 20px 8px 8px}
.b-6qd84q .tg-sort-back{width:44px;height:44px;flex:none}
.b-6qd84q .tg-sort-sheet h3{margin:0;font-size:12px;font-weight:600;color:var(--tm-meta)}
/* Referencia hoja-ordenar-etiquetas: cuerpo «Orden» con dos píldoras que se reparten el ancho y barra fija con Aplicar. */
.b-6qd84q .tg-sort-body{display:flex;flex-direction:column;gap:12px;padding:4px 16px 16px}
.b-6qd84q .tg-sort-body .tm-pills{display:flex;gap:8px}
.b-6qd84q .tg-sort-body .tm-pill{flex:1;justify-content:center}
.b-6qd84q .tg-sort-bar{display:flex;padding:10px 12px 14px;border-top:1px solid var(--tm-line)}
.b-6qd84q .tg-sort-column{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:48px;padding:12px 20px;border:0;background:none;color:var(--tm-text);font:inherit;font-size:14px;cursor:pointer}
.b-6qd84q .tg-sort-column .chat-r2-icon{width:18px;height:18px;color:var(--tm-accent-text)}
.b-6qd84q .tg-sort-sheet .tm-pill{height:40px;padding:0 14px}
.b-6qd84q .tg-wide{width:100%}
@media(max-width:767px){
.b-6qd84q .tg-head{margin:0 0 4px}
.b-6qd84q .tg-head h1{font-size:18px;line-height:24px}
.b-6qd84q .tg-back{width:44px;height:44px;margin-left:-12px}
.b-6qd84q .tg-plus{width:44px;height:44px;padding:0;border-radius:999px}
.b-6qd84q .tg-plus .chat-r2-icon{width:20px;height:20px}
.b-6qd84q .tg-sub{display:none}
.b-6qd84q .tg-filters{flex-direction:column;align-items:stretch;gap:12px;margin-top:12px}
.b-6qd84q .tg-search{flex:none;width:100%}
.b-6qd84q .tg-pill-row{overflow-x:auto;scrollbar-width:none;margin-right:-16px;padding:3px 12px 3px 0;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}
/* K3 · C07 1.14.5: con contenido escondido a la izquierda, también se desvanece ese lado (24 px). */
.b-6qd84q .tg-pill-row[data-scrolled]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
.b-6qd84q .tg-pill-row::-webkit-scrollbar{display:none}
.b-6qd84q .tg-pill-row .tm-pill,.b-6qd84q .tg-filters .bh-filter-trigger{height:40px;padding:0 14px;position:relative}
/* I11/E79 · 40 px visibles, 44 de zona táctil (patrón ::before de Contactos): no se ve ni mueve nada. */
.b-6qd84q .tg-sort-sheet .tm-pill{position:relative}
.b-6qd84q .tg-pill-row .tm-pill::before,.b-6qd84q .tg-filters .bh-filter-trigger::before,.b-6qd84q .tg-sort-sheet .tm-pill::before{content:"";position:absolute;inset:-3px 0}
.b-6qd84q .tg-divider{display:none}
.b-6qd84q .tg-bar{margin-top:4px;margin-right:-12px}
.b-6qd84q .tg-bar .tm-icon-btn{width:44px;height:44px}
.b-6qd84q .tg-selection{margin-right:0}
/* J10 · C29 1.14.4: × · «{n} seleccionadas» · ⋮ al borde derecho; las acciones van en la hoja del ⋮ con su texto. */
.b-6qd84q .tg-selection{gap:4px;padding:0}
.b-6qd84q .tg-selection .tg-bar-actions[hidden]{display:none}
.b-6qd84q .tg-selection-menu{position:static;margin-left:auto;display:inline-flex}
.b-6qd84q .tg-selection-more{width:44px;height:44px;color:var(--tm-accent-text)}
.b-6qd84q .tg-selection-more .chat-r2-icon{width:20px;height:20px}
.b-6qd84q .tg-sheet-count{margin:0;padding:4px 20px 8px;font-size:13px;color:var(--tm-secondary)}
.b-6qd84q .tg-colors{grid-template-columns:repeat(8,44px)}
/* I11 · «Aplicar» de Ordenar: 44 px a todo el ancho. */
.b-6qd84q .tg-sort-sheet .tg-wide{height:44px}
.b-6qd84q .tm-window:has(:is(.tg-form,.tg-copy)){width:100%}
.b-6qd84q .tg-copy-text{height:160px}
body:has(dialog[open] .tg-copy) .chat-dock-launcher{display:none}
/* I11 · editor en pantalla completa: título de 18 px; el botón Chats se esconde mientras está abierto. */
.b-6qd84q .tm-window:has(:is(.tg-form,.tg-copy)) h2{font-size:18px}
body:has(dialog[open] .tg-form) .chat-dock-launcher{display:none}
.b-6qd84q .tg-range-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
.b-6qd84q .tg-range-fields input{height:44px}
/* C11 1.14.2 · hojas de Etiquetas a todo el ancho con opciones de 48 px (referencia hoja-fila y hoja-lista). */
.b-6qd84q .tm-menu-items:not(.tm-filter-menu):has(>.bheli-bottom-sheet){padding:6px 0 calc(12px + env(safe-area-inset-bottom,0px))}
.b-6qd84q .tg-sort-sheet.tm-menu-items:not(.tm-filter-menu):has(>.bheli-bottom-sheet){padding-bottom:env(safe-area-inset-bottom,0px)}
.b-6qd84q .tm-menu-items:not(.tm-filter-menu):has(>.bheli-bottom-sheet) [role=menuitem]{min-height:48px;padding:12px 20px;border-radius:0;font-size:14px}
.b-6qd84q .tm-menu-items:not(.tm-filter-menu):has(>.bheli-bottom-sheet) .bheli-sheet-handle{margin-bottom:0}
/* C01 · el editor a pantalla completa a 16 px del borde. */
.b-6qd84q .tm-window:has(:is(.tg-form,.tg-copy)) header{padding-left:4px}
.b-6qd84q .tm-window:has(:is(.tg-form,.tg-copy)) .tm-window-body{padding-left:16px;padding-right:16px}
}
.b-6qd84q .tg-table>thead{background:none;position:relative;z-index:2}
/* Páginas legales públicas (B3) y enlaces del pie legal del ingreso. Solo `scope` es local (vite.config.ts); las demás
clases conservan su nombre. Se registra en styles/scopedOrder.ts, antes de team.css: por eso la columna lleva
.tm.auth-page.scope (más específica que .tm.auth-page de team.css). Colores solo con tokens del tema (claro y oscuro). */
/* Columna de lectura: el texto corrido se lee mejor en ~70 caracteres (640 px de texto a 14 px). */
.tm.auth-page.b-1m8bdw7 { max-width: 672px; }
.b-1m8bdw7 .legal-meta {
margin: -16px 0 24px;
color: var(--tm-secondary);
font-size: 12.5px;
line-height: 1.5;
}
.b-1m8bdw7 .legal-meta .tm-link { font-size: inherit; }
.b-1m8bdw7 .legal-section { margin-top: 24px; }
.b-1m8bdw7 h2 {
margin: 0 0 8px;
color: var(--tm-text);
font-size: 19px;
font-weight: 700;
line-height: 1.3;
}
.b-1m8bdw7 p,
.b-1m8bdw7 li {
color: var(--tm-text);
font-size: 14px;
line-height: 1.6;
overflow-wrap: anywhere;
}
.b-1m8bdw7 p { margin: 0 0 8px; }
.b-1m8bdw7 ul {
display: flex;
flex-direction: column;
gap: 4px;
margin: 0 0 8px;
padding-inline-start: 20px;
}
@media (max-width: 767px) {
.b-1m8bdw7 .legal-meta { margin: -8px 0 16px; }
.b-1m8bdw7 h2 { font-size: 17px; }
}
/* Pie legal: la línea del responsable (sin cambios) y debajo los tres documentos. Enlaces subrayados (no solo color) y
zona de toque de 26 px (≥ 24 px, WCAG 2.2 AA). */
.auth-legal-line { margin: 0; }
/* Mientras llega el código de los enlaces (carga aparte): el alto de su renglón, para que el pie no salte. */
.auth-legal-links-reserva { min-height: 30px; margin-top: 4px; }
.auth-legal-links ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0 16px;
margin: 4px 0 0;
padding: 0;
list-style: none;
}
.auth-legal-links a {
display: inline-block;
padding: 4px 2px;
border-radius: 4px;
color: inherit;
font: inherit;
text-decoration: underline;
text-underline-offset: 2px;
}
.auth-legal-links a:hover { color: var(--text); }
.auth-legal-links a:focus-visible {
outline: none;
box-shadow: var(--focus-ring-shadow);
}
/* El documento abierto: sin subrayado y en negrita (no depende solo del color). */
.auth-legal-links a[aria-current="page"] {
color: var(--text);
font-weight: 600;
text-decoration: none;
}
/* Generado desde ChoiceMenu.razor.css del portal actual (scripts/razor-css-to-module.py): misma cascada que Blazor. */
.bh-choice.b-4trenz{min-width:0;anchor-scope:--bh-choice}
.bh-choice-trigger.b-4trenz{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:42px;padding:8px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);font:inherit;anchor-name:--bh-choice}
.bh-choice-trigger span.b-4trenz{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bh-choice-trigger span[data-empty="true"].b-4trenz{color:var(--text-tertiary,#756A62)}
.bh-choice-trigger.b-4trenz svg,.bh-choice-menu.b-4trenz svg{width:16px;height:16px;flex:none}
.bh-choice-menu.b-4trenz{position:fixed;position-anchor:--bh-choice;position-area:bottom span-right;position-try-fallbacks:flip-block,flip-inline;margin:4px 0;padding:6px;width:max-content;min-width:240px;max-width:min(320px,calc(100vw - 16px));max-height:min(360px,60dvh);overflow:auto;border:1px solid var(--border-subtle,var(--border));border-radius:14px;background:var(--surface);color:var(--text);box-shadow:var(--shadow-floating)}
.bh-choice-menu button.b-4trenz{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:40px;border:0;border-radius:10px;padding:10px 12px;background:transparent;color:var(--text);font:inherit;text-align:left;white-space:nowrap}
@media (hover: hover){.bh-choice-menu button:hover.b-4trenz{background:light-dark(#F6F1EC,var(--background-surface-muted))}
}
.bh-choice-search.b-4trenz{width:100%;height:38px;border:0;border-radius:999px;background:var(--background-surface-subtle);color:var(--text);padding:0 12px;margin-bottom:6px}
.bh-choice-search.b-4trenz{display:flex;align-items:center;gap:8px}
.bh-choice-search input.b-4trenz{width:100%;min-width:0;height:36px;min-height:0!important;border:0!important;background:transparent!important;padding:0;color:var(--text);font:inherit;outline:0!important;box-shadow:none!important}
.bh-choice-search:focus-within.b-4trenz{outline:3px solid var(--focus-ring);outline-offset:2px}
.bh-choice-menu .bh-choice-clear.b-4trenz{width:28px;min-width:28px;min-height:28px;height:28px;padding:0;justify-content:center;border:0;border-radius:50%}
:is(button,input):focus-visible.b-4trenz{outline:3px solid var(--focus-ring,var(--primary));outline-offset:2px}
.bh-choice-trigger[aria-invalid=true].b-4trenz{border-color:var(--error)}
@media(max-width:767px){.bh-choice-trigger.b-4trenz{min-height:42px}
}
/* K6 · C11 1.14.5: menú de valores cortos (Por página): abajo y alineado al borde izquierdo del botón, arriba solo si
abajo no entra; ancho de su contenido (opción más larga, 12 px de aire y la columna del ✓ de 16 px), nunca menos
que el botón; opciones de 40 px. */
.bh-choice-menu.bh-choice-short.b-4trenz{position-area:bottom span-right;position-try-fallbacks:flip-block;margin:6px 0;min-width:anchor-size(width);width:max-content;padding:6px}
.bh-choice-menu.bh-choice-short button.b-4trenz{display:grid;grid-template-columns:auto 16px;gap:24px;height:40px;min-height:40px;padding:0 12px;font-weight:400;font-variant-numeric:tabular-nums}
.bh-choice-menu.bh-choice-short button.b-4trenz>svg{grid-column:2}
/* Generado desde DataTableFrame.razor.css del portal actual (scripts/razor-css-to-module.py): misma cascada que Blazor. */
.bh-table-frame.b-gn7l2u{min-width:0;max-width:100%;overflow:auto;border:0;border-radius:0;box-shadow:none;background:transparent}
/* Generado desde FilterPanel.razor.css del portal actual (scripts/razor-css-to-module.py): misma cascada que Blazor. */
.bh-filter-host.b-114x42b{display:contents}
.bh-filter-trigger.b-114x42b{display:inline-flex;align-items:center;gap:6px;flex:none;min-height:32px;padding:0 12px;border:1px solid var(--border-default,var(--border));border-radius:999px;background:var(--surface);color:var(--text-secondary);font:inherit;font-size:13px;font-weight:600;white-space:nowrap}
.bh-filter-trigger.b-114x42b svg{width:15px;height:15px}
.bh-filter-panel.b-114x42b{position:fixed;inset:auto;margin:0;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow:auto;padding:20px;border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-floating);background:var(--surface);color:var(--text);z-index:50}
.bh-filter-panel.b-114x42b::backdrop{background:var(--backdrop-page)}
@media(min-width:768px){.bh-filter-panel.b-114x42b::backdrop{background:transparent}
}
.bh-filter-groups.b-114x42b{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
footer.b-114x42b{display:flex;justify-content:flex-end;gap:12px;position:sticky;bottom:-20px;margin:8px 0 -20px;padding:12px 0 20px;background:var(--surface)}
footer button.b-114x42b{min-width:150px}
.bh-filter-handle.b-114x42b{display:none}
@media(max-width:767px){.bh-filter-trigger.b-114x42b{min-height:40px}
.bh-filter-panel.b-114x42b{inset:auto 0 0;width:100%;max-width:100%;max-height:calc(100dvh - 12px);padding:0;border:0;border-radius:18px 18px 0 0;overflow:hidden}
.bh-filter-panel[open].b-114x42b{display:flex;flex-direction:column}
.bh-filter-handle.b-114x42b{display:block;flex:none;width:36px;height:4px;margin:12px auto 16px;border-radius:2px;background:var(--border)}
.bh-filter-groups.b-114x42b{grid-template-columns:1fr;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 16px 16px}
footer.b-114x42b{position:static;flex:none;display:grid;grid-template-columns:1fr 1.4fr;gap:10px;margin:0;padding:10px 12px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--border-subtle,var(--border));background:var(--surface)}
footer button.b-114x42b{min-width:0;min-height:44px}
}
/* C01: abierto con el mouse, el foco queda en el panel mismo, sin anillo (FilterPanel.tsx). */
.bh-filter-panel.b-114x42b:focus{outline:none}
/* Generado desde SelectionToolbar.razor.css del portal actual (scripts/razor-css-to-module.py): misma cascada que Blazor. */
.bh-table-toolbar.b-16evmr4{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;margin:8px 0;color:inherit;font-size:14px}
.bh-selection-toolbar.b-16evmr4{border-radius:12px;padding:0 8px;background:var(--primary-soft);color:var(--text)}
/* Generado desde TaskWindow.razor.css del portal actual (scripts/razor-css-to-module.py): misma cascada que Blazor. */
.bh-task-window.b-1hpgdka{width:480px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 24px);margin:auto;padding:20px;border:1px solid var(--border-subtle,var(--border));border-radius:16px;overflow:auto;background:var(--surface);color:var(--text);box-shadow:var(--shadow-floating)}
.bh-task-window.b-1hpgdka::backdrop{background:var(--backdrop-page)}
@media(max-width:767px){.bh-task-window.b-1hpgdka{position:fixed;inset:0;width:100%;max-width:100%;height:100dvh;max-height:100dvh;margin:0;border:0;border-radius:0;padding:16px 12px 88px}
}
/* CSS global del portal actual, copiado byte a byte y en el mismo orden que App.razor (T11). No se edita aquí:
las diferencias propias del portal nuevo van en CSS Modules de cada componente. *//* Bheli Company Portal: SaaS del cliente, mobile-first, light/dark/system. */
.login-persistence { display: flex; align-items: center; gap: var(--space-2); min-height: var(--touch-target); margin-bottom: var(--space-3); cursor: pointer; }
.login-persistence input { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
/* Color contract/preset shared with Platform Admin; structural tokens stay here. */
:root {
--radius-sm: 8px;
--radius: 12px;
--radius-lg: 16px;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--font: 'Lexend', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--shadow: 0 1px 2px var(--shadow-color);
--shadow-lg: 0 8px 16px var(--shadow-lg-color);
--content-max: 1080px;
--content-narrow: 640px;
--touch-target: 44px;
--control-height: 40px;
--control-height-mobile: 48px;
--control-radius: var(--radius-sm);
--border-width: 1px;
--sidebar-width: 240px;
--header-height: 56px;
}
* { box-sizing: border-box; }
/* C01 / A3 N4: native controls inherit Lexend, including controls in overlays. */
button, input, select, textarea { font: inherit; }
body {
margin: 0;
background: var(--canvas);
color: var(--text);
font-family: var(--font);
line-height: 1.5;
}
/* Jerarquía tipográfica por tokens: títulos semibold, nunca bold arbitrario. */
h1 {
font-weight: 600;
}
h2 {
font-weight: 600;
}
h3 {
font-weight: 600;
}
.skip {
position: absolute;
left: -999px;
top: 0;
background: var(--primary);
color: var(--primary-contrast);
padding: .6rem 1rem;
z-index: 50;
}
.skip:focus { left: 0; }
/* Foco visible de teclado en controles interactivos (el h1 no es
interactivo y nunca pinta foco). */
button:focus-visible,
a:focus-visible,
input:not(.bheli-composite-input):focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
.topbar {
display: flex;
align-items: center;
gap: .75rem;
padding: .6rem 1rem;
background: var(--surface);
border-bottom: 1px solid var(--border);
position: sticky;
top: 0;
z-index: 10;
}
/* Back explícito mobile: control canónico de navegación, no micro-enlace.
Solo en vistas anidadas que lo renderizan. */
.mobile-back {
display: none;
}
@media (max-width: 699px) {
/* Page navigation canonica: barra de ancho completo que integra el
Back al flujo de la pagina, nunca chip aislado ni micro-link. */
.mobile-back {
display: flex;
align-items: center;
gap: var(--space-2);
min-height: 48px;
min-width: var(--touch-target);
padding: var(--space-2) var(--space-1);
margin-bottom: var(--space-3);
border-bottom: 1px solid var(--border);
color: var(--text);
text-decoration: none;
font-weight: 600;
font-size: 1rem;
}
.mobile-back > span[aria-hidden="true"] {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--touch-target);
height: var(--touch-target);
flex: none;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--surface);
font-size: 1.3rem;
line-height: 1;
}
.mobile-back:hover > span[aria-hidden="true"] {
background: var(--surface-muted);
}
/* En mobile manda el Back canónico; el breadcrumb desktop se oculta
para no duplicar navegación. */
.breadcrumb {
display: none;
}
}
/* App-shell: topbar compacto + sidebar persistente en desktop y drawer
overlay en mobile. Mismo contrato visual que PlatformAdmin. */
.nav-toggle {
position: absolute;
opacity: 0;
pointer-events: none;
}
.menu-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
flex: none;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--surface);
color: var(--text);
font-size: 1.25rem;
cursor: pointer;
}
.drawer-scrim {
display: none;
}
.brand {
font-weight: 600;
font-size: 1.15rem;
color: var(--text);
text-decoration: none;
}
.brand-sub {
display: block;
font-weight: 500;
font-size: 0.72rem;
color: var(--text-muted);
line-height: 1.2;
}
.sidebar {
position: fixed;
top: var(--header-height);
bottom: 0;
left: 0;
width: min(var(--sidebar-width), 84vw);
padding: var(--space-4);
background: var(--surface);
border-right: 1px solid var(--border);
transform: translateX(-100%);
transition: transform 0.18s ease-out;
overflow-y: auto;
z-index: 30;
}
@media (prefers-reduced-motion: reduce) {
.sidebar {
transition: none;
}
}
.nav-toggle:checked ~ .sidebar {
transform: none;
}
.nav-toggle:checked ~ .drawer-scrim {
display: block;
position: fixed;
inset: var(--header-height) 0 0 0;
background: var(--overlay-background);
z-index: 25;
}
.sidebar nav {
display: flex;
flex-direction: column;
gap: 2px;
}
/* Q23: la navegacion inactiva baja jerarquia; la activa es inequivoca. */
.nav-link {
display: flex;
align-items: center;
min-height: 44px;
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-sm);
color: var(--text-muted);
text-decoration: none;
}
.nav-link:hover {
background: var(--surface-muted);
}
.nav-link.active {
background: var(--primary-soft);
color: var(--primary-hover);
font-weight: 600;
}
.shell-main {
min-width: 0;
}
@media (min-width: 900px) {
.menu-button,
.drawer-scrim {
display: none;
}
.sidebar {
transform: none;
}
.shell-main {
margin-left: var(--sidebar-width);
}
}
/* Menú de usuario: utilidades globales, no navegación del producto. */
.user-menu {
margin-left: auto;
position: relative;
}
.user-trigger {
display: inline-flex;
align-items: center;
gap: var(--space-2);
min-height: 44px;
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-sm);
cursor: pointer;
list-style: none;
color: var(--text);
}
.user-trigger::-webkit-details-marker {
display: none;
}
.user-trigger:hover,
.user-menu[open] .user-trigger {
background: var(--surface-muted);
}
.user-trigger .avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--primary-soft);
color: var(--primary-hover);
font-weight: 600;
}
.user-trigger .chevron {
color: var(--text-muted);
font-size: 0.8rem;
}
.user-menu .menu {
position: absolute;
right: 0;
top: calc(100% + var(--space-1));
min-width: 220px;
padding: var(--space-2);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
z-index: 40;
}
.user-menu .menu a {
display: flex;
align-items: center;
min-height: 44px;
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-sm);
color: var(--text);
text-decoration: none;
}
.user-menu .menu a:hover {
background: var(--surface-muted);
}
.user-menu .menu form {
margin: 0;
}
.user-menu .menu button[type="submit"] {
display: flex;
align-items: center;
width: 100%;
min-height: 44px;
padding: var(--space-2) var(--space-3);
border: 0;
border-radius: var(--radius-sm);
background: transparent;
color: var(--text);
font: inherit;
cursor: pointer;
text-align: left;
}
.user-menu .menu button[type="submit"]:hover {
background: var(--surface-muted);
}
/* Las secciones y filtros ordinarios hacen reflow: ningún destino requiere swipe. */
.context-nav {
display: flex;
gap: var(--space-1);
flex-wrap: wrap;
margin-bottom: var(--space-4);
padding-bottom: var(--space-2);
border-bottom: 1px solid var(--border);
}
@media (max-width: 699px) {
.context-nav .context-link { white-space: normal; overflow-wrap: anywhere; }
}
.context-link {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-sm);
color: var(--text-muted);
text-decoration: none;
font-weight: 500;
}
.context-link:hover {
background: var(--surface-muted);
color: var(--text);
}
.context-link.active {
background: var(--primary-soft);
color: var(--primary-hover);
font-weight: 600;
}
.actions, .inline { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.inline > * { min-width: 0; max-width: 100%; }
/* Tablas con scroll horizontal interno: la pagina nunca desborda.
Grilla especializada documentada: contenida, señalizada y con columna
clave fija en mobile. */
.table-wrap {
overflow-x: auto;
border: var(--border-width) solid var(--border);
border-radius: var(--radius);
background: var(--surface);
}
@media (max-width: 699px) {
.table-wrap {
background-image: linear-gradient(to right, var(--surface) 0, transparent 0),
linear-gradient(to left, var(--shadow-lg-color), transparent 1.25rem);
background-repeat: no-repeat;
background-position: left center, right center;
background-size: auto, 1.25rem 100%;
background-attachment: local, scroll;
}
.table-wrap table th:first-child,
.table-wrap table td:first-child {
position: sticky;
left: 0;
background: var(--surface);
z-index: 1;
}
.table-wrap table thead th:first-child {
background: var(--surface-muted);
}
}
.wrap { max-width: var(--content-max); margin: 0 auto; padding: 1rem; }
.wrap.narrow { max-width: var(--content-narrow); }
.hero { padding: 2.5rem 0 1.5rem; }
.hero h1 { font-size: 2rem; margin: 0 0 .5rem; font-weight: 600; }
.hero p { color: var(--text-muted); font-size: 1.1rem; max-width: 40rem; }
.cta-row { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }
.button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: .6rem 1.1rem;
border: 0;
border-radius: var(--radius);
background: var(--primary);
color: var(--primary-contrast);
font-family: inherit;
font-size: 1rem;
font-weight: 500;
text-decoration: none;
cursor: pointer;
}
.button.ghost { background: transparent; color: var(--link-default); border: 1px solid var(--border); }
.button.secondary { background: var(--button-secondary-background); color: var(--button-secondary-text); }
.button:disabled { background: var(--control-disabled-background); color: var(--control-disabled-text); opacity: 1; cursor: default; }
.grid-cards { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin: 1rem 0; }
@media (min-width: 700px) {
.grid-cards.cols-2 { grid-template-columns: 1fr 1fr; }
.hero h1 { font-size: 2.6rem; }
}
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1rem;
}
.card h2, .card h3 { margin-top: 0; }
.card .go { margin-top: .8rem; }
/* Tile de destino único (§11.4): toda la superficie es el enlace.
Sin botón genérico cuando la card entera representa un destino. */
.card-link {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
text-decoration: none;
color: inherit;
cursor: pointer;
}
.card-link:hover { border-color: var(--primary); }
.card-link:focus-visible {
outline: 3px solid var(--focus-ring);
outline-offset: 2px;
}
.card-link:active { background: var(--surface-muted); }
.card-link-body { display: grid; gap: .4rem; }
.card-link-go {
flex: none;
font-size: 1.4rem;
line-height: 1;
color: var(--text-muted);
}
.card-link:hover .card-link-go { color: var(--primary); }
.badge {
display: inline-block;
padding: .15rem .6rem;
border-radius: 999px;
font-size: .8rem;
background: var(--border);
color: var(--text);
}
.badge-active { background: var(--success-bg); color: var(--success); }
.badge-inactive { background: var(--background-surface-subtle); color: var(--text-primary); }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.badge-error { background: var(--error-bg); color: var(--error); }
.field { display: grid; gap: .3rem; margin-bottom: .8rem; }
.field label { font-weight: 500; }
.field .hint { color: var(--text-muted); font-size: .85rem; font-weight: 400; }
.field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .field select, .field textarea, .cfg1-search input, .cfg1-toolbar select {
width: 100%;
min-height: 44px;
padding: .6rem .7rem;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface);
color: var(--text);
font-size: 1rem;
}
.field input[type="checkbox"], .field input[type="radio"] { width: 1.25rem; height: 1.25rem; min-height: 0; padding: 0; flex: none; accent-color: var(--primary); }
.field .checkbox-row { display: flex; align-items: center; gap: var(--space-2); min-height: var(--touch-target); font-weight: 400; }
fieldset.field { border: var(--border-width) solid var(--border); border-radius: var(--radius-sm); padding: var(--space-3); }
.field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .field select, .field textarea, .cfg1-search input, .cfg1-toolbar select { min-width: 0; font-family: inherit; }
.field, .field fieldset, form fieldset { min-width: 0; max-width: 100%; }
form fieldset { margin-inline: 0; }
h1[tabindex="-1"]:focus, h1[tabindex="-1"]:focus-visible { outline: none; }
.field textarea { min-height: 96px; resize: vertical; }
.steps { display: flex; gap: .4rem; list-style: none; padding: 0; margin: 0 0 1rem; }
.steps li {
flex: 1;
text-align: center;
font-size: .8rem;
color: var(--text-muted);
border-top: 3px solid var(--border);
padding-top: .3rem;
}
.steps li.now { color: var(--text); border-color: var(--primary); font-weight: 600; }
/* Progreso compacto del wizard: solo mobile muestra paso actual; desktop
conserva la secuencia completa. Sin deep-link alterado. */
.step-progress { display: none; font-weight: 600; margin: 0 0 1rem; }
@media (max-width: 699px) {
.step-progress { display: block; }
ol.steps { display: none; }
}
.jobs { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: 1rem 0; }
.jobs button {
min-height: 64px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface);
color: var(--text);
font-size: 1rem;
cursor: pointer;
}
.jobs button.picked { border: 2px solid var(--primary); }
.review { display: grid; gap: .4rem; margin: 1rem 0; }
.review dt { font-weight: 600; }
.review dd { margin: 0 0 .5rem; white-space: pre-wrap; }
.chat { display: grid; gap: .5rem; margin: 1rem 0; }
.msg {
max-width: 85%;
padding: .6rem .8rem;
border-radius: var(--radius);
background: var(--chat-other-background);
color: var(--chat-other-text);
border: 1px solid var(--border-subtle);
white-space: pre-wrap;
overflow-wrap: anywhere;
min-width: 0;
}
.msg.in { justify-self: start; }
.msg.out { justify-self: end; background: var(--chat-own-background); color: var(--chat-own-text); border: 0; }
.msg .who { display: block; font-size: .75rem; opacity: .75; margin-bottom: .2rem; }
.human-composer { position: sticky; bottom: var(--space-2); z-index: 2; }
.human-composer textarea { min-height: 4.5rem; }
.trace { font-size: .8rem; color: var(--text-muted); }
.alert {
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-sm);
border: 1px solid transparent;
margin: 1rem 0;
background: var(--surface);
}
/* Vista de soporte: banner persistente ámbar, visible en desktop y mobile,
sin cubrir navegación ni contenido. Señal por texto, no solo por color. */
.support-banner {
position: sticky;
top: 0;
z-index: 20;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2) var(--space-3);
padding: var(--space-2) var(--space-4);
background: var(--warning-bg);
border-bottom: 2px solid var(--warning);
color: var(--text);
}
.support-banner form { margin-left: auto; }
.alert-error { background: var(--error-bg); border-color: var(--error); color: var(--error); }
.alert-warning { background: var(--warning-bg); border-color: var(--warning); color: var(--warning); }
.alert-success { background: var(--success-bg); border-color: var(--success); color: var(--success); }
.alert-info { background: var(--info-bg); border-color: var(--status-info-border); color: var(--info); }
/* Encabezado de pagina: titulo, subtitulo y acciones alineadas.
Misma anatomia que PlatformAdmin. */
.page-header {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: var(--space-3) var(--space-4);
margin-bottom: var(--space-4);
}
.page-header .page-titles {
flex: 1 1 240px;
min-width: 0;
}
.page-header .page-titles h1 {
margin: 0;
}
.page-header .page-subtitle {
margin: 0;
color: var(--text-muted);
}
.page-header .page-actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.breadcrumb { font-size: .85rem; color: var(--text-muted); margin-bottom: .6rem; }
.breadcrumb a { color: var(--primary); }
.foot {
max-width: var(--content-max);
margin: 2rem auto 0;
padding: 1rem;
color: var(--text-muted);
font-size: .85rem;
border-top: 1px solid var(--border);
}
.empty-state { text-align: center; padding: 3rem 1rem; }
.empty-state p { color: var(--text-muted); }
.rows { display: grid; gap: .6rem; margin: 1rem 0; }
.rowline {
display: flex;
flex-wrap: wrap;
gap: .6rem;
align-items: center;
justify-content: space-between;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: .8rem 1rem;
}
.rowline.link { text-decoration: none; color: var(--text); }
.rowline.link:hover { border-color: var(--primary); }
/* Lista de definición para fichas de detalle (misma primitiva admin). */
dl.detail {
display: grid;
grid-template-columns: minmax(120px, 180px) 1fr;
gap: var(--space-2) var(--space-3);
margin: 0 0 var(--space-4);
}
dl.detail dt {
color: var(--text-muted);
}
dl.detail dd {
margin: 0;
overflow-wrap: anywhere;
}
@media (max-width: 699px) {
dl.detail {
grid-template-columns: 1fr;
}
}
.rowline > div:first-child { display: grid; gap: .2rem; justify-items: start; }
.rowline details { flex-basis: 100%; }
/* ResponsiveDataView canónico: tabla en desktop, filas de lista con
etiqueta visible en mobile. Cada td lleva data-label con el nombre
de su columna; sin data-label no hay transformación. */
.data-table {
width: 100%;
border-collapse: collapse;
}
@media (max-width: 699px) {
.data-table thead {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.data-table,
.data-table tbody,
.data-table tr,
.data-table td {
display: block;
width: 100%;
}
.data-table tr {
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--surface);
margin-bottom: var(--space-3);
padding: var(--space-2) var(--space-3);
}
.data-table td {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: var(--space-2);
border: 0;
padding: var(--space-1) 0;
font-size: 1rem;
}
.data-table td > * {
min-width: 0;
overflow-wrap: anywhere;
}
.data-table td[data-label]::before {
content: attr(data-label);
flex: none;
min-width: 8rem;
color: var(--text-muted);
font-size: 0.85rem;
font-weight: 500;
}
.data-table td.row-action {
padding-top: var(--space-2);
}
}
.card h3 { margin-top: 1.2rem; }
/* Breadcrumb Desktop: solo desktop; en mobile manda el Back canonico
(regla de ocultamiento anterior). */
@media (min-width: 700px) {
.breadcrumb {
display: flex;
align-items: center;
/* El flex recorta los espacios del texto junto a los enlaces ("Inicio/ Mi perfil"): el hueco los repone. */
column-gap: .3em;
margin-bottom: var(--space-3);
}
.breadcrumb ol {
display: flex;
align-items: center;
gap: var(--space-2);
list-style: none;
padding: 0;
margin: 0;
font-size: 0.9rem;
}
.breadcrumb li {
display: flex;
align-items: center;
gap: var(--space-2);
color: var(--text-muted);
}
.breadcrumb li + li::before {
content: "›";
color: var(--text-muted);
}
.breadcrumb a {
color: var(--primary);
text-decoration: none;
}
.breadcrumb a:hover {
text-decoration: underline;
}
}
/* ContextBarMobile & ContextSheetMobile (§3.2) */
.context-bar-mobile {
display: none;
}
@media (max-width: 699px) {
.context-bar-mobile {
display: block;
background: var(--surface);
border-bottom: 1px solid var(--border);
position: sticky;
top: var(--header-height);
z-index: 20;
}
.context-sheet-toggle summary {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 44px;
padding: var(--space-2) var(--space-4);
cursor: pointer;
list-style: none;
font-weight: 500;
}
.context-sheet-toggle summary::-webkit-details-marker {
display: none;
}
.context-bar-text {
display: flex;
align-items: center;
gap: var(--space-2);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.context-parent-name {
color: var(--text-muted);
font-size: 0.85rem;
}
.context-sep {
color: var(--text-muted);
}
.context-section-name {
color: var(--text);
font-weight: 600;
font-size: 1rem;
}
.context-chevron {
font-size: 1rem;
color: var(--text-muted);
}
.context-sheet-toggle[open] .context-chevron {
transform: rotate(180deg);
}
.context-sheet {
padding: var(--space-2) var(--space-3) var(--space-4);
background: var(--surface);
border-top: 1px solid var(--border);
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.context-sheet-header {
padding: var(--space-2) var(--space-3);
display: flex;
flex-direction: column;
gap: 2px;
border-bottom: 1px solid var(--border);
margin-bottom: var(--space-2);
}
.context-sheet-header strong {
font-size: 0.85rem;
color: var(--text);
}
.context-sheet-header span {
font-size: 0.75rem;
color: var(--text-muted);
}
.context-sheet-link {
display: flex;
align-items: center;
min-height: 44px;
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-sm);
text-decoration: none;
color: var(--text);
font-size: 1rem;
}
.context-sheet-link:hover {
background: var(--surface-muted);
}
.context-sheet-link.active {
background: var(--primary-soft);
color: var(--primary-hover);
font-weight: 600;
}
}
/* Shell v2: sidebar FULL/RAIL + identidad firmada (I2/I3). Solo tokens. */
:root {
--sidebar-rail: 64px;
}
.sidebar-collapse {
display: none;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
flex: none;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--surface);
color: var(--text);
font-size: 1.1rem;
line-height: 1;
cursor: pointer;
}
.sidebar nav .nav-link {
gap: var(--space-3);
}
.nav-icon {
width: 22px;
height: 22px;
flex: none;
}
.nav-label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.user-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
flex: none;
border-radius: 50%;
background: var(--primary-soft);
color: var(--primary-hover);
font-weight: 600;
font-size: .85rem;
}
.user-trigger-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 12rem;
}
@media (min-width: 900px) {
.sidebar-collapse {
display: inline-flex;
}
body.shell-rail [data-company-shell] .sidebar {
width: var(--sidebar-rail);
padding: var(--space-4) var(--space-2);
}
body.shell-rail [data-company-shell] .shell-main {
margin-left: var(--sidebar-rail);
}
body.shell-rail [data-company-shell] .sidebar nav .nav-link {
justify-content: center;
padding: var(--space-2);
}
body.shell-rail [data-company-shell] .nav-label {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
}
/* El header ocupa su altura intrínseca; sidebar y workspace comparten la segunda fila. */
.app-shell {
display: grid;
grid-template-rows: auto minmax(0, 1fr);
height: 100dvh;
min-width: 0;
}
.app-shell .skip { position: absolute; left: -999px; top: 0; padding: var(--space-3) var(--space-4); background: var(--brand-default); color: var(--on-brand); z-index: 90; }
.app-shell .skip:focus { left: 0; }
.app-shell .shell-header { min-width: 0; z-index: 30; background: var(--surface); }
.app-shell .topbar {
position: relative;
/* El menú de cuenta pasa por encima de la ContextBar, no por debajo. */
z-index: 30;
top: auto;
height: auto;
min-height: var(--header-height);
flex-wrap: wrap;
padding-block: var(--space-2);
}
.app-shell .brand { min-width: 0; overflow-wrap: anywhere; }
.app-shell .brand-sub { white-space: normal; }
.app-shell .shell-workspace {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: minmax(0, 1fr);
position: relative;
min-height: 0;
min-width: 0;
}
.app-shell .shell-main { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto; position: relative; min-width: 0; min-height: 0; margin-left: 0; overflow: hidden; }
.app-shell .shell-main > main { grid-column: 1; grid-row: 2; min-height: 0; min-width: 0; width: 100%; overflow-y: auto; }
.app-shell .shell-main > .shell-context-desktop { grid-column: 1 / -1; grid-row: 1; }
.app-shell .sidebar {
position: static;
inset: auto;
margin: 0;
width: 100%;
max-width: none;
max-height: none;
height: 100%;
min-height: 0;
color: var(--text);
transform: none;
transition: none;
border: 0;
border-right: var(--border-width) solid var(--border);
overflow-y: auto;
}
.app-shell .sidebar:not([open]) { display: none; }
.app-shell .sidebar[open] { display: block; }
.app-shell .sidebar:modal {
position: fixed;
inset: 0 auto 0 0;
width: min(var(--sidebar-width), calc(100vw - var(--space-5)));
max-height: 100dvh;
height: 100dvh;
z-index: 80;
}
.app-shell .sidebar::backdrop { background: var(--overlay-background); }
.shell-drawer-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; position: sticky; top: 0; background: var(--surface); }
.shell-close, .context-sheet-close { display: none; }
.shell-enhanced .shell-close, .shell-enhanced .context-sheet-close { display: inline-flex; }
.app-shell .sidebar .nav-label { white-space: normal; overflow-wrap: anywhere; }
.app-shell .user-menu { min-width: 0; }
.app-shell .user-trigger { max-width: 100%; }
.app-shell .user-trigger-name { min-width: 0; max-width: min(12rem, 35vw); }
.app-shell .user-menu .menu {
width: min(20rem, calc(100vw - var(--space-6)));
min-width: 0;
max-height: 70dvh;
overflow-y: auto;
overflow-wrap: anywhere;
}
.app-shell .user-menu .menu a { display: flex; align-items: center; min-height: var(--touch-target); padding: var(--space-2) var(--space-3); color: var(--text); text-decoration: none; border-radius: var(--radius-sm); }
.app-shell .user-menu .menu a:hover { background: var(--surface-muted); }
.app-shell .user-menu .menu button { min-height: var(--touch-target); }
.app-shell .context-bar-mobile { position: relative; top: auto; }
.app-shell .context-bar-text { min-width: 0; flex-wrap: wrap; white-space: normal; overflow: visible; }
.app-shell .context-parent-name, .app-shell .context-section-name { overflow-wrap: anywhere; }
.app-shell .context-sheet { max-height: 50dvh; overflow-y: auto; }
.app-shell .context-sheet-header { align-items: start; }
.shell-context-desktop { display: none; }
.shell-organization { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); padding: var(--space-1) var(--space-4); color: var(--text); text-decoration: none; min-height: var(--touch-target); overflow-wrap: anywhere; border-bottom: var(--border-width) solid var(--border); }
.shell-organization > span { color: var(--text-muted); }
.app-shell .org-context strong { overflow: visible; white-space: normal; overflow-wrap: anywhere; }
@media (width < 768px) {
/* Sin JS la misma navegación está en el flujo y el enlace de apertura lleva a ella. */
html:not(.shell-enhanced) .app-shell .shell-workspace { display: block; overflow-y: auto; }
html:not(.shell-enhanced) .app-shell .sidebar { height: auto; }
html:not(.shell-enhanced) .app-shell .shell-main { display: block; overflow: visible; }
/* El SSR trae open para noJS; con el helper preparado no ocupa una fila antes de showModal. */
html.shell-enhanced .app-shell .sidebar[open]:not(:modal) { display: none; }
}
@media (min-width: 700px) {
.shell-context-desktop { display: flex; padding: var(--space-3) var(--space-4); margin: 0; }
}
@media (min-width: 900px) {
.app-shell .shell-workspace { grid-template-columns: var(--sidebar-width) minmax(0, 1fr); }
.app-shell .shell-drawer-heading, .app-shell .menu-button { display: none; }
body.shell-rail .app-shell .shell-workspace { grid-template-columns: var(--sidebar-rail) minmax(0, 1fr); }
body.shell-rail .app-shell .sidebar { width: 100%; }
body.shell-rail .app-shell .shell-main { margin-left: 0; }
}
/* QA H1–H13: estructura Company opt-in; colores derivados del contrato light/dark. */
[data-company-shell] {
--shell-accent: var(--link-default);
--shell-hover: color-mix(in srgb, var(--background-surface-subtle) 70%, var(--background-surface-muted));
--shell-radius-popover: 10px;
--shell-font: 14.5px;
--shell-badge-font: 11.5px;
--shell-width-motion: 200ms ease;
--shell-label-motion: 150ms ease;
--shell-popover-shadow: 0 10px 28px var(--shadow-lg-color);
}
.app-shell[data-company-shell] .shell-topbar {
height: var(--header-height); min-height: var(--header-height); padding: 0 var(--space-4);
flex-wrap: nowrap; gap: var(--space-2); background: var(--background-topbar);
}
.shell-topbar .shell-brand { display: inline-flex; align-items: center; height: 36px; padding: 0 6px; border-radius: var(--radius-sm); flex: none; font-size: 17px; letter-spacing: -.01em; }
.shell-topbar .shell-brand:hover { background: var(--background-surface-subtle); text-decoration: none; }
.shell-divider { width: 1px; height: 24px; margin-inline: var(--space-1); background: var(--border-subtle); flex: none; }
.shell-icon { width: 18px; height: 18px; flex: none; }
.shell-chevron { width: 16px; height: 16px; flex: none; color: var(--text-muted); }
.company-menu { min-width: 0; position: relative; }
.company-trigger, .shell-topbar .user-trigger { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; color: var(--text-primary); font-size: var(--shell-font); list-style: none; }
.company-trigger::-webkit-details-marker, .shell-topbar .user-trigger::-webkit-details-marker { display: none; }
.company-trigger { height: 36px; padding: 0 10px; border-radius: var(--radius-sm); }
.company-trigger > .shell-icon { width: 16px; height: 16px; color: var(--text-muted); }
.company-trigger-name { max-width: 240px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.company-trigger:hover, .company-menu[open] > summary, .shell-topbar .user-trigger:hover, .shell-topbar .user-menu[open] > summary { background: var(--background-surface-subtle); }
.company-trigger[aria-busy="true"] { opacity: .65; cursor: progress; }
.shell-header-actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; min-width: 0; }
.shell-tools { display: flex; align-items: center; gap: var(--space-1); flex: none; }
.shell-tool { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-sm); text-decoration: none; color: var(--text-muted); }
.shell-tool:hover { background: var(--background-surface-subtle); color: var(--text-primary); }
.shell-tool.active { background: var(--navigation-active-background); color: var(--shell-accent); }
.shell-topbar .user-menu { position: relative; margin-left: 0; }
.shell-topbar .user-trigger { height: 40px; min-height: 40px; padding: 0 8px 0 4px; border: 0; border-radius: 999px; }
.shell-topbar .user-trigger-name { max-width: 180px; }
.shell-topbar .user-avatar { width: 28px; height: 28px; background: var(--navigation-active-background); color: var(--shell-accent); font-size: var(--shell-badge-font); font-weight: 700; }
.shell-popover { position: absolute; top: calc(100% + 6px); padding: 6px; background: var(--background-surface); border: 1px solid var(--border-subtle); border-radius: var(--shell-radius-popover); box-shadow: var(--shell-popover-shadow); z-index: 60; max-height: min(70dvh, 560px); overflow-y: auto; }
.company-popover { left: 0; width: 268px; }
.user-popover { right: 0; width: 240px; }
.shell-menu-heading { font-size: 12px; font-weight: 600; color: var(--text-muted); padding: 6px var(--space-2); }
.shell-menu-divider { height: 1px; background: var(--border-subtle); margin: 6px 0; }
.shell-menu-item { display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: 40px; padding: 6px var(--space-2); background: transparent; border: 0; border-radius: 6px; color: var(--text-primary); text-decoration: none; text-align: left; font-family: inherit; font-size: var(--shell-font); cursor: pointer; }
.shell-menu-item:hover { background: var(--background-surface-subtle); text-decoration: none; }
.shell-menu-item > .shell-icon { width: 16px; height: 16px; color: var(--text-muted); }
.company-avatar { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none; border-radius: 6px; background: var(--navigation-active-background); color: var(--shell-accent); font-size: 10.5px; font-weight: 700; }
.shell-option-name { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.company-option[aria-checked="true"] > .shell-icon { color: var(--shell-accent); }
.shell-user-identity { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2); }
.shell-user-identity .user-avatar { width: 32px; height: 32px; }
.shell-user-identity > div { min-width: 0; }
.shell-user-identity strong { display: block; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.shell-user-identity > div > span, .shell-menu-context { display: block; font-size: 12.5px; color: var(--text-muted); overflow-wrap: anywhere; }
.shell-nav-badge { margin-left: auto; margin-right: 2px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--shell-accent); color: var(--on-brand); font-size: var(--shell-badge-font); font-weight: 700; text-align: center; flex: none; }
.shell-nav-dot { display: none; }
.shell-collapse-right { display: none; }
.shell-collapse-left, .shell-collapse-right { width: 14px; height: 14px; flex: none; }
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
.app-shell[data-company-shell] .shell-workspace { display: grid; grid-template-columns: var(--sidebar-rail) minmax(0,1fr); transition: none; overflow: visible; }
.app-shell[data-company-shell] .shell-main { display: grid; grid-column: 2; margin-left: 0; overflow: hidden; }
.app-shell[data-company-shell] .sidebar[open]:not(:modal) { display: block; }
.app-shell[data-company-shell] .sidebar { position: relative; grid-column: 1; grid-row: 1; padding: 0; width: var(--sidebar-width); overflow: visible; background: var(--background-sidebar); z-index: 20; transition: width var(--shell-label-motion); box-shadow: 4px 0 16px var(--shadow-lg-color); }
.app-shell[data-company-shell] .shell-drawer-heading, .app-shell[data-company-shell] .menu-button { display: none; }
.app-shell[data-company-shell] .sidebar nav { height: 100%; overflow-y: auto; overflow-x: hidden; padding: var(--space-2); gap: 2px; }
.app-shell[data-company-shell] .sidebar .nav-link { position: relative; min-height: 40px; height: 40px; flex: none; padding: 0 10px 0 15px; gap: var(--space-3); justify-content: flex-start; white-space: nowrap; font-size: var(--shell-font); color: var(--text-muted); }
.app-shell[data-company-shell] .sidebar .nav-link:hover:not(.active) { background: var(--shell-hover); }
.app-shell[data-company-shell] .sidebar .nav-link.active { background: var(--navigation-active-background); color: var(--shell-accent); }
.app-shell[data-company-shell] .nav-icon { width: 18px; height: 18px; flex: none; }
.app-shell[data-company-shell] .sidebar .nav-label { position: static; width: auto; height: auto; clip-path: none; white-space: nowrap; overflow-wrap: normal; overflow: hidden; opacity: 1; transition: opacity var(--shell-label-motion); flex: 1; }
.app-shell[data-company-shell] .shell-main > main { padding-left: var(--space-4); }
html.shell-rail .app-shell[data-company-shell] .shell-workspace { grid-template-columns: var(--sidebar-rail) minmax(0,1fr); }
html.shell-rail .app-shell[data-company-shell] .sidebar { width: var(--sidebar-rail); box-shadow: none; }
html.shell-rail .app-shell[data-company-shell] .sidebar .nav-label { opacity: 0; pointer-events: none; }
html.shell-rail .app-shell[data-company-shell] .shell-nav-badge { display: none; }
html.shell-rail .app-shell[data-company-shell] .shell-nav-dot { display: block; position: absolute; left: 28px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--shell-accent); box-shadow: 0 0 0 2px var(--background-sidebar); }
html.shell-rail .app-shell[data-company-shell] .active .shell-nav-dot { box-shadow: 0 0 0 2px var(--navigation-active-background); }
html.shell-rail .app-shell[data-company-shell] .shell-collapse-left { display: none; }
html.shell-rail .app-shell[data-company-shell] .shell-collapse-right { display: block; }
}
@media (width < 768px) {
.app-shell[data-company-shell] .shell-topbar { padding-inline: var(--space-2); gap: var(--space-1); }
.shell-topbar .shell-brand { padding: 0 2px; }
.shell-topbar .shell-divider { display: none; }
.shell-topbar .company-menu { flex: 1; }
.shell-topbar .company-trigger { padding-inline: var(--space-1); min-height: var(--touch-target); }
.shell-topbar .company-trigger > .shell-icon { display: none; }
.shell-topbar .company-trigger-name { max-width: 100%; font-size: 13px; }
.shell-header-actions { gap: var(--space-1); flex: none; }
.shell-topbar .user-trigger-name, .shell-topbar .user-trigger > .shell-chevron { display: none; }
.shell-topbar .user-trigger { min-width: var(--touch-target); min-height: var(--touch-target); padding: 0; justify-content: center; }
.shell-topbar .shell-tool { width: var(--touch-target); height: var(--touch-target); }
.company-popover { position: fixed; top: calc(var(--header-height) + 6px); left: var(--space-2); width: min(268px, calc(100vw - var(--space-4))); }
.shell-menu-item { min-height: var(--touch-target); }
.app-shell[data-company-shell] .sidebar-collapse { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.app-shell[data-company-shell] .shell-workspace, .app-shell[data-company-shell] .sidebar, .app-shell[data-company-shell] .nav-label { transition: none; }
}
/* N1–N6: contexto integrado y navegación adaptable al ancho real de la cabecera. */
html .app-shell[data-company-shell][data-single-destination="true"] .shell-workspace { grid-template-columns: minmax(0, 1fr); }
.app-shell[data-company-shell][data-single-destination="true"] .shell-main { grid-column: 1; }
.shell-header-context { flex: 1; min-width: 0; }
.shell-context-row { display: flex; align-items: center; gap: var(--space-2); width: 100%; min-width: 0; }
.shell-context-name { flex: none; max-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); }
.shell-context-visible { display: flex; align-items: center; gap: var(--space-1); flex: 1; min-width: 0; }
.shell-context-visible .context-link { flex: none; margin: 0; min-height: 40px; white-space: nowrap; }
.shell-context-overflow { flex: none; position: relative; }
.shell-context-overflow summary { display: flex; align-items: center; gap: var(--space-1); min-height: 40px; padding: var(--space-2); border-radius: var(--radius-sm); cursor: pointer; list-style: none; }
.shell-context-overflow summary::-webkit-details-marker { display: none; }
.shell-context-overflow summary:hover { background: var(--shell-hover); }
.shell-context-overflow summary.active, .shell-overflow-links .active { background: var(--navigation-active-background); color: var(--shell-accent); }
.shell-overflow-links { left: 0; right: auto; width: max-content; min-width: 12rem; max-width: min(22rem, calc(100vw - var(--space-4))); max-height: 60dvh; overflow-y: auto; transform: translateX(var(--shell-menu-offset, 0px)); }
.shell-header-context .context-bar-mobile, .shell-context-compact-name { display: none; }
.shell-header-context [hidden] { display: none !important; }
.shell-header-context .context-sheet { transform: translateX(var(--shell-menu-offset, 0px)); }
.shell-header-context .context-bar-summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-1); min-height: var(--touch-target); padding: 0 var(--space-1); background: transparent; border: 0; cursor: pointer; list-style: none; }
.shell-header-context summary::-webkit-details-marker { display: none; }
.shell-header-context .context-bar-text { display: flex; flex-direction: column; align-items: flex-start; gap: 0; flex-wrap: nowrap; line-height: 1.35; }
.shell-header-context .context-parent-name { font-size: .75rem; font-weight: 400; color: var(--text-muted); }
.shell-header-context .context-section-name { font-size: .8125rem; font-weight: 500; }
.shell-header-context .context-sep { display: none; }
.shell-header-context .context-chevron { flex: none; font-size: 1rem; color: var(--text-muted); }
.shell-header-context details[open] .context-chevron { transform: rotate(180deg); }
.shell-header-context .context-sheet { position: absolute; top: calc(100% + var(--space-2)); left: 0; right: auto; display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-2) var(--space-3) var(--space-4); background: var(--surface); width: min(22rem, calc(100vw - var(--space-4))); max-height: 65dvh; z-index: 70; border: var(--border-width) solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shell-popover-shadow); }
.shell-header-context .context-sheet-header { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-2) var(--space-3); border-bottom: var(--border-width) solid var(--border); margin-bottom: var(--space-2); }
.shell-header-context .context-sheet-header strong { font-size: .875rem; }
.shell-header-context .context-sheet-header > span { font-size: .75rem; color: var(--text-muted); }
.shell-header-context .context-sheet-link { display: flex; align-items: center; min-height: var(--touch-target); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); text-decoration: none; color: var(--text); }
.shell-header-context .context-sheet-link:hover { background: var(--shell-hover); }
.shell-header-context .context-sheet-link.active { background: var(--navigation-active-background); color: var(--shell-accent); font-weight: 600; }
/* Sin JavaScript, el selector nativo conserva todos los destinos sin desbordarse. */
html:not(.shell-enhanced) [data-company-shell] .shell-context-row { display: none; }
html:not(.shell-enhanced) [data-company-shell] .shell-header-context .context-bar-mobile { display: block; background: transparent; border: 0; padding: 0; }
html:not(.shell-enhanced) [data-company-shell] .shell-context-compact-name { display: block; }
html:not(.shell-enhanced) [data-company-shell] .shell-header-context .context-sheet { position: fixed; top: calc(var(--header-height) + var(--space-2)); left: var(--space-2); right: var(--space-2); width: auto; }
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
html:not(.shell-enhanced) .app-shell[data-company-shell] .shell-workspace { grid-template-columns: var(--sidebar-width) minmax(0, 1fr); }
}
@media (width < 900px), (hover: none), (pointer: coarse) {
body .app-shell[data-company-shell] .shell-workspace { grid-template-columns: minmax(0, 1fr); }
.app-shell[data-company-shell] .shell-main { grid-column: 1; }
.app-shell[data-company-shell] .menu-button { display: inline-flex; flex: none; width: var(--touch-target); min-height: var(--touch-target); }
.app-shell[data-company-shell] .shell-drawer-heading { display: flex; }
html.shell-enhanced .app-shell[data-company-shell] .sidebar[open]:not(:modal) { display: none; }
.app-shell[data-company-shell] .sidebar:modal { width: min(var(--sidebar-width), calc(100vw - var(--space-5))); }
.shell-topbar .user-trigger-name, .shell-topbar .user-trigger > .shell-chevron { display: none; }
.shell-topbar .user-trigger { min-width: var(--touch-target); min-height: var(--touch-target); padding: 0; justify-content: center; }
.shell-topbar .shell-tool { width: var(--touch-target); height: var(--touch-target); }
.shell-topbar .shell-divider { display: none; }
.shell-header-actions { flex: none; }
}
/* El drawer depende del puntero; el contexto depende únicamente del espacio útil. */
@media (width < 900px) {
.shell-context-row { display: none; }
.shell-header-context .context-bar-mobile { display: block; background: transparent; border: 0; padding: 0; margin: 0; }
.shell-context-compact-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
.shell-header-context[data-context-compact] .shell-context-row { display: none; }
.shell-header-context[data-context-compact] .context-bar-mobile { display: block; background: transparent; border: 0; padding: 0; }
@media (hover: none), (pointer: coarse) {
.shell-context-visible .context-link, .shell-context-overflow summary { min-height: var(--touch-target); }
}
@media (width < 360px) {
.shell-topbar .shell-brand .bheli-logo__wordmark { display: none; }
}
/* Identidad Bheli (bloque C/D): cabecera con logo horizontal 24/18 gap 8,
auth con lockup vertical 48/28 y cargas con loader de marca.
Tamaños y legibilidad existentes se conservan; solo cambia la familia. */
.brand.bheli-brand {
display: inline-flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.auth-shell {
display: flex;
flex-direction: column;
align-items: center;
}
/* Pie legal del ingreso (dueño, 2026-11-02): al fondo de la pantalla, debajo del contenido, sin competir con él. En
el celular main ya termina donde empieza la barra fija de acciones, así que el pie nunca queda debajo de ella. */
.auth-legal {
margin-top: auto;
width: 100%;
max-width: 640px;
padding: 0 16px 16px;
color: var(--text-muted);
font-size: 12px;
line-height: 1.5;
text-align: center;
text-wrap: balance;
}
.auth-shell { min-height: 100dvh; }
/* Con la barra fija de acciones del celular manda la altura de team.css (main termina donde empieza la barra). */
@media (max-width: 767px) {
main.auth-shell:has(.auth-actions) { min-height: 0; }
}
.auth-brand {
display: flex;
flex-direction: column;
align-items: center;
padding: var(--space-6) var(--space-4) 0;
text-align: center;
}
.bheli-loading {
display: flex;
align-items: center;
gap: var(--space-2);
}
/* El loader conserva su API light/dark y sigue al tema efectivo por CSS:
data-theme oscuro y SYSTEM con SO oscuro usan los tokens oscuros del preset. */
:root[data-theme="dark"] .bheli-loader--theme-light {
--logo-top: var(--bheli-cobre-dark);
--logo-bottom: var(--bheli-miel-dark);
}
@media (prefers-color-scheme: dark) {
:root[data-theme="system"] .bheli-loader--theme-light {
--logo-top: var(--bheli-cobre-dark);
--logo-bottom: var(--bheli-miel-dark);
}
}
.chat-history-pager .bheli-loader {
margin-right: 6px;
vertical-align: -3px;
}
/* C1's data directory uses the available content width; other page templates keep their sizing. */
main.wrap.contacts-main { max-width:none; width:100%; }
/* E1: geometría común del rail y navegación de contexto en una sola cabecera. */
.app-shell[data-company-shell] {
--sidebar-rail: 72px;
--sidebar-width: 240px;
--chat-page-padding: var(--space-4);
}
.app-shell[data-company-shell] .sidebar .nav-link { min-height: 48px; height: 48px; }
.app-shell[data-company-shell] .nav-icon { width: 24px; height: 24px; }
.shell-context-name { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600; color: var(--text-primary); }
.shell-context-name > .shell-icon { width: 22px; height: 22px; color: var(--shell-accent); }
.shell-context-visible .context-link { display: inline-flex; flex-direction: column; justify-content: center; gap: var(--space-1); min-height: 62px; padding: var(--space-2); font-size: 12px; }
.shell-context-visible .context-link > .shell-icon { width: 25px; height: 25px; }
@media (min-width: 769px) {
.app-shell[data-company-shell] .shell-topbar { --header-height: 74px; }
}
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
body.shell-rail .app-shell[data-company-shell] .sidebar { padding:0; }
.app-shell[data-company-shell] .sidebar nav { padding: var(--space-2) 12px; }
.app-shell[data-company-shell] .sidebar .nav-link { padding: 12px; width: 216px; gap: 12px; }
html.shell-rail .app-shell[data-company-shell] .sidebar .nav-link { width: 48px; }
html.shell-rail .app-shell[data-company-shell] .sidebar .nav-label { display:none; }
html.shell-rail .app-shell[data-company-shell] .shell-nav-dot { left: 32px; }
}
/* Marco exterior único de Chat; las tarjetas y el dock mantienen su padding interior. */
.app-shell[data-company-shell] .shell-main > main.chat-section-main {
width: 100%; max-width: none; margin: 0;
padding: var(--chat-page-padding);
}
main.chat-section-main > :is(h1,.page-header) { margin-top: 0; }
.app-shell[data-company-shell] .shell-main > main.chat-section-main.chat-main { padding:0; }
/* Contactos C7-09 · catálogo 1.10 "Módulo Chat" (M15): el lugar de la barra de scroll se reserva siempre en el contenedor
de sus páginas, así la cabecera no salta cuando la página no tiene scroll. Conversaciones (.chat-main) hace su scroll
adentro y no lo usa; el resto del portal no cambia. */
.app-shell[data-company-shell] .shell-main > main.chat-section-main:not(.chat-main) { scrollbar-gutter: stable; }
.cfg1-page-heading { display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4); }
.cfg1-page-heading h1 { margin:0;min-width:0;overflow-wrap:anywhere; }
.cfg1-page-heading .page-back-icon { display:grid;place-items:center;flex:none;width:44px;height:44px;min-height:44px;margin:0;padding:0;border:1px solid var(--border);border-radius:50%; }
.cfg1-form, .cfg1-assignments, .cfg1-closures { min-width:0; margin-block:var(--space-4); }
.cfg1-form { max-width:52rem; }
.cfg1-toolbar, .cfg1-search, .cfg1-form-actions, .cfg1-selector-controls, .cfg1-selector-title,
.cfg1-step-heading, .cfg1-inline-actions { display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap; }
.cfg1-toolbar { justify-content:space-between;margin-block:var(--space-4); }
.cfg1-search { flex:1;min-width:0; }
.cfg1-search input { min-width:0;flex:1;width:auto; }
.cfg1-selector .sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0; }
.cfg1-form-actions { margin-block:var(--space-4);padding-block:var(--space-2); }
.cfg1-assignment-columns, .cfg1-form-columns, .cfg1-time-pair { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4); }
.cfg1-assignment-columns>section { min-width:0; }
.cfg1-selector-title, .cfg1-selector-controls { justify-content:space-between;margin-block:var(--space-2); }
.cfg1-selector { min-width:0; }
.cfg1-activation:has(.cfg1-live) > .cfg1-startup { display:none; }
.cfg1-select-row { display:flex;align-items:center;gap:var(--space-3);min-height:52px;padding:var(--space-2);border-bottom:1px solid var(--border);cursor:pointer; }
.cfg1-select-row:hover, .cfg1-select-row.selected { background:var(--surface-muted); }
.cfg1-select-row input { width:20px;height:20px;flex:none; }
.cfg1-select-row span, .cfg1-select-row strong, .cfg1-select-row small { display:block;min-width:0;overflow-wrap:anywhere; }
.cfg1-select-row small { color:var(--text-secondary); }
.cfg1-days { display:flex;gap:var(--space-3);flex-wrap:wrap; }
.cfg1-days label { display:flex;align-items:center;gap:var(--space-1);min-height:44px; }
.cfg1-interval { display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap;margin-block:var(--space-2); }
.cfg1-interval input[type=time] { width:8rem; }
.cfg1-advanced { margin-block:var(--space-4); }
.cfg1-advanced summary { min-height:44px;display:flex;align-items:center;cursor:pointer; }
.cfg1-details { display:grid;grid-template-columns:max-content minmax(0,1fr);gap:var(--space-2) var(--space-4); }
.cfg1-details dd { margin:0;overflow-wrap:anywhere; }
.cfg1-assignments .cfg1-desktop-label { display:flex;justify-content:space-between;align-items:center;gap:var(--space-2);margin-block:0 var(--space-2);font-size:inherit; }
.cfg1-assignments .cfg1-desktop-label small { font-weight:normal; }
.cfg1-assignments .cfg1-schedule-summary { margin-block:var(--space-1); }
.cfg1-assignments .cfg1-assignment-body>.trace { margin-block:0 var(--space-1); }
.cfg1-assignments .cfg1-selector-title { margin-block:0 var(--space-1); }
.cfg1-assignments .cfg1-select-row { min-height:52px;padding-block:var(--space-1); }
.cfg1-assignments>.trace { margin-block:var(--space-1); }
.cfg1-assignments .cfg1-selector-controls { margin-block:var(--space-1); }
.cfg1-assignments .cfg1-form-actions { margin-block:var(--space-1) 0;padding-block:var(--space-1); }
.cfg1-disclosure { display:none; }
.cfg1-config-list .rowline { min-height:64px; }
.cfg1-config-entry { display:flex;align-items:center;gap:var(--space-3);min-width:0; }
.cfg1-config-entry>span { min-width:0; }
.cfg1-config-entry small { display:block; }
.cfg1-member-link { flex:1;min-width:0;overflow-wrap:anywhere;color:var(--text); }
.cfg1-member-link small { display:block; }
.cfg1-member-row, .cfg1-member-actions { display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap; }
@media(max-width:767px) {
.cfg1-assignment-columns, .cfg1-form-columns, .cfg1-time-pair { grid-template-columns:1fr;gap:var(--space-3); }
.cfg1-desktop-label { display:none; }
.cfg1-assignments .cfg1-desktop-label { display:none; }
.cfg1-assignments { margin-block:var(--space-2); }
.cfg1-page-heading:has(~ .cfg1-assignments) { margin-bottom:var(--space-2); }
.cfg1-assignments .cfg1-assignment-columns { gap:var(--space-2); }
.cfg1-disclosure { display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);width:100%;min-height:48px;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--space-3);font:inherit;text-align:left;cursor:pointer; }
.cfg1-assignment-body.closed { display:none; }
.cfg1-form-actions { background:var(--surface);min-height:48px;padding-bottom:max(var(--space-2),env(safe-area-inset-bottom));padding-inline-end:84px; }
.cfg1-assignments .cfg1-form-actions { padding-inline-end:0;padding-top:0; }
.cfg1-disclosure>span:first-of-type { margin-inline-start:auto; }
.cfg1-details { grid-template-columns:1fr; }
}
@media(max-width:359px) {
.cfg1-assignments .cfg1-form-actions { padding-inline-end:84px; }
}
main.chat-section-main :is(.reply-library,.reply-editor) { padding-top: 0; }
main.chat-section-main .reply-page-head { margin-top: 0; }
.chat-section-main .page-back {
display:flex; align-items:center; gap:var(--space-2); min-height:48px;
margin:0 0 var(--space-3); color:var(--text); font-weight:600; text-decoration:none;
}
.chat-section-main .page-back > span { display:grid; place-items:center; width:44px; height:44px; }
@media (min-width:768px) {
.app-shell[data-company-shell] { --chat-page-padding: var(--space-5); }
}
@media (width < 900px), (hover: none), (pointer: coarse) {
.app-shell[data-company-shell] .sidebar:modal {
width:min(320px,calc(100vw - 24px)); max-width:none;
padding:0; padding-bottom:env(safe-area-inset-bottom);
}
.app-shell[data-company-shell] .shell-drawer-heading {
padding:var(--space-4); padding-top:max(var(--space-4),env(safe-area-inset-top));
background:var(--background-sidebar); flex-wrap:nowrap;
}
.app-shell[data-company-shell] .sidebar nav { padding:0; }
.app-shell[data-company-shell] .sidebar .nav-link { min-height:52px; height:52px; padding:0 16px; gap:var(--space-3); }
.app-shell[data-company-shell] .shell-close {
display:grid; place-items:center; width:48px; height:48px; padding:0;
border:0; border-radius:var(--radius-sm); background:transparent; color:var(--text); cursor:pointer;
}
.app-shell[data-company-shell] .shell-close:hover { background:var(--shell-hover); }
.app-shell[data-company-shell] .shell-close .shell-icon { width:24px; height:24px; }
}
.cfg1-participation-info small { display: block; }
/* A1 · C02/C04: consistent header icon buttons, independent of text glyph rasterisation. */
.app-shell .shell-topbar .menu-button,.app-shell .shell-topbar .shell-tool{width:40px;height:40px;min-width:40px;min-height:40px;display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;padding:0;background:transparent;color:var(--text-secondary);}
.app-shell .shell-topbar :is(.menu-button,.shell-tool):hover{background:var(--ui-hover);}
.app-shell .shell-topbar :is(.menu-button,.shell-tool):focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;}
.app-shell .shell-topbar :is(.menu-button,.shell-tool)>svg{width:20px;height:20px;flex:none;stroke-width:2;}
.context-bar-summary{min-height:40px;gap:4px;}
.context-bar-summary>.context-chevron{width:16px;height:16px;flex:none;color:var(--ui-header-secondary);}
/* Corrección B-1 · Bandejas › Miembros: la oferta de Coordinador de atención tiene tres respuestas (Cancelar, Dejar como Agente
y Pasar a Coordinador); el diálogo se ensancha para que vayan en una fila y se vea cuál avanza (M11). */
.confirmation-dialog:has([data-part=pasar-coordinador]){width:min(100% - 2 * var(--space-4),640px)}
/* C11: explicit button triggers retain the existing menu appearance. */
[data-chat-menu-trigger]{appearance:none;font:inherit;text-align:inherit;color:inherit;background:transparent;border:0;cursor:pointer;}
/* Contexto V1: columna real cuando cabe; en compacto reemplaza el hilo, nunca lo cubre. */
.chat-icon-action {
display: inline-flex; align-items: center; justify-content: center;
width: 44px; min-width: 44px; height: 44px; border-radius: var(--radius-sm);
color: var(--text); text-decoration: none; background: transparent; border: 0;
}
.chat-icon-action svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.chat-icon-action:hover, .chat-contact-trigger:hover { background: var(--surface-muted); }
.chat-icon-action:focus-visible, .chat-contact-trigger:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.chat-contact-trigger { display: flex; flex: 1; min-width: 0; gap: var(--space-3); align-items: center; min-height: 48px; padding: var(--space-1); border-radius: var(--radius-sm); text-decoration: none; color: var(--text); cursor: pointer; }
.chat-identity-disclosure { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; color: var(--text-muted); }
.chat-contact-trigger:hover, .chat-contact-trigger[aria-expanded="true"] { background: var(--primary-soft); }
.chat-context-long-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-schedule-summary { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-2) var(--space-4); background: var(--primary-soft); }
.chat-schedule-summary span { min-width: 0; overflow-wrap: anywhere; }
.chat-schedule-surface { color: var(--text); background: var(--surface); padding: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); width: min(520px, calc(100% - 32px)); max-height: calc(100dvh - 32px); box-shadow: var(--shadow-lg); }
.chat-schedule-surface:modal { display: flex; flex-direction: column; }
/* SSR sin JavaScript: el editor ocupa su espacio real, no queda debajo del historial. */
.chat-schedule-surface[open]:not(:modal) { position: relative; display: flex; flex-direction: column; flex: 0 1 auto; min-height: 0; margin: var(--space-2) auto; max-height: calc(100dvh - 160px); }
.chat-schedule-surface::backdrop { background: var(--overlay-background); }
.chat-schedule-surface .chat-context-head { display: flex; justify-content: space-between; }
.chat-schedule-date-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-3); }
@media(max-width:699px) { .chat-schedule-surface { margin: auto 0 0; width: 100%; max-width: 100%; max-height: 90dvh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; } }
.chat-context-surface { display: flex; flex-direction: column; min-width: 0; min-height: 0; width: 100%; height: 100%; color: var(--text); background: var(--surface); border: 0; padding: 0; margin: 0; box-sizing: border-box; }
.chat-detail-pane.context-open:not(.context-inline) > .chat-detail { display: none; }
.chat-context-return { flex: none; gap: var(--space-1); width: fit-content; max-width: 100%; padding: 0 var(--space-2); justify-content: flex-start; }
.chat-context-return svg { flex: none; }
.chat-context-back-text { font-size: .875rem; }
.chat-context-close-icon { display: none; }
.chat-context-head { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: var(--space-1); min-height: 64px; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); }
.chat-context-head h2 { font-size: 1rem; margin: 0; min-width: 0; overflow-wrap: anywhere; }
.chat-context-body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-4); overscroll-behavior: contain; }
.chat-context-identity { display: flex; align-items: center; gap: var(--space-3); overflow-wrap: anywhere; }
.chat-context-facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-1); margin: var(--space-4) 0; }
.chat-context-facts dt { color: var(--text-muted); font-size: .82rem; }
.chat-context-facts dd { margin: 0 0 var(--space-2); overflow-wrap: anywhere; }
.chat-context-tags { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.chat-context-section { border-top: 1px solid var(--border); margin-top: var(--space-3); padding-top: var(--space-1); }
.chat-context-section > :is(summary,[data-chat-menu-trigger]) { min-height: 44px; cursor: pointer; font-weight: 600; }
.chat-context-record { display: grid; min-height: 44px; gap: var(--space-1); color: var(--text); text-decoration: none; padding: var(--space-2); overflow-wrap: anywhere; border-radius: var(--radius-sm); }
.chat-context-record:hover { background: var(--surface-muted); }
.chat-context-record span, .chat-context-record small { color: var(--text-muted); }
.chat-context-footer { padding: var(--space-3); margin-top: auto; border-top: 1px solid var(--border); }
.chat-detail-pane.context-inline { display: grid; grid-template-columns: minmax(400px, 1fr) 320px; }
.chat-detail-pane.context-inline > .chat-context-surface { position: static; width: 320px; height: 100%; max-height: 100%; border-left: 1px solid var(--border); }
.context-inline .chat-context-head h2 { order: -1; }
.context-inline .chat-context-head { display: flex; justify-content: space-between; gap: var(--space-2); }
.context-inline .chat-context-return { width: 44px; padding: 0; justify-content: center; }
.context-inline .chat-context-close-icon { display: block; }
.context-inline .chat-context-back-icon, .context-inline .chat-context-back-text { display: none; }
.chat-workspace .chat-filters-panel { border-bottom-color: transparent; padding-bottom: var(--space-2); }
.chat-workspace .chat-list-head { border-bottom: 0; }
.chat-js-action { display: none; }
.js .chat-js-action { display: block; }
/* Bheli Chat workspace + Dock persistente (v1): aplicacion de chat, no tabla. */
.chat-shell {
display: grid;
grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
gap: var(--space-4);
align-items: start;
}
.chat-list {
display: grid;
gap: var(--space-2);
margin: var(--space-3) 0;
max-height: calc(100vh - 320px);
min-height: 240px;
overflow-y: auto;
}
.chat-row {
display: grid;
gap: .2rem;
justify-items: start;
padding: var(--space-3);
border: var(--border-width) solid var(--border);
border-radius: var(--radius);
background: var(--surface);
text-decoration: none;
color: var(--text);
min-height: var(--touch-target);
}
button.chat-row {
font: inherit;
text-align: start;
cursor: pointer;
width: 100%;
}
.chat-row:hover {
border-color: var(--primary);
}
.chat-row.active {
border-color: var(--primary);
background: var(--primary-soft);
}
.chat-row-top {
display: flex;
align-items: center;
gap: var(--space-2);
width: 100%;
}
.chat-row-top strong {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.chat-preview {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
color: var(--text-muted);
}
.chat-unread-dot {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 6px;
border-radius: 999px;
background: var(--primary);
color: var(--primary-contrast);
font-size: .75rem;
font-weight: 600;
margin-left: auto;
}
.chat-detail {
display: grid;
gap: var(--space-3);
min-width: 0;
}
.chat-toolbar {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
align-items: center;
}
/* Cabecera compacta: titulo + origen en una sola fila. */
.chat-top {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-2);
}
.chat-top h1 {
font-size: 1.25rem;
margin: 0;
}
.chat-origins {
display: inline-flex;
border: var(--border-width) solid var(--border);
border-radius: 999px;
overflow: hidden;
}
.chat-origins a {
padding: var(--space-2) var(--space-4);
min-height: var(--touch-target);
display: inline-flex;
align-items: center;
text-decoration: none;
color: var(--text-muted);
font-weight: 600;
}
.chat-origins a.active {
background: var(--primary);
color: var(--primary-contrast);
}
.chat-subfilters {
display: flex;
flex-wrap: wrap;
gap: var(--space-1);
margin: var(--space-2) 0;
}
.chat-subfilters a {
display: inline-flex;
align-items: center;
min-height: 36px;
padding: var(--space-1) var(--space-3);
border-radius: 999px;
text-decoration: none;
color: var(--text-muted);
font-size: .9rem;
}
.chat-subfilters a.active {
background: var(--surface-muted);
color: var(--text);
font-weight: 600;
}
.chat-filters-panel {
margin: var(--space-2) 0;
}
.chat-filters-panel > :is(summary,[data-chat-menu-trigger]) {
min-height: var(--touch-target);
display: inline-flex;
align-items: center;
cursor: pointer;
color: var(--text-muted);
font-weight: 600;
}
.chat-search-pane {
position: sticky;
top: 0;
background: var(--surface);
padding: var(--space-2) 0;
z-index: 1;
}
/* Filtros compactos y secundarios: la conversacion manda en el viewport. */
.chat-filters {
display: flex;
flex-wrap: wrap;
gap: var(--space-1);
margin: var(--space-2) 0;
}
.chip {
display: inline-flex;
align-items: center;
min-height: 36px;
padding: var(--space-1) var(--space-3);
border: var(--border-width) solid var(--border);
border-radius: 999px;
background: var(--surface);
color: var(--text);
text-decoration: none;
font-size: .9rem;
}
.chip:hover {
border-color: var(--primary);
}
.chip.active {
background: var(--primary);
border-color: var(--primary);
color: var(--primary-contrast);
font-weight: 600;
}
.chat-secondary {
margin: var(--space-2) 0;
}
.chat-secondary > :is(summary,[data-chat-menu-trigger]) {
min-height: var(--touch-target);
display: inline-flex;
align-items: center;
cursor: pointer;
color: var(--text-muted);
}
/* Pill de novedades realtime: converge con navegacion mejorada, sin reload. */
.update-pill {
display: inline-flex;
align-items: center;
min-height: var(--touch-target);
padding: var(--space-2) var(--space-4);
margin: var(--space-2) 0;
border-radius: 999px;
background: var(--primary-soft);
color: var(--primary-hover);
font-weight: 600;
text-decoration: none;
border: var(--border-width) solid var(--primary);
}
.chat-search {
display: flex;
gap: var(--space-2);
margin: var(--space-3) 0;
}
.chat-search input {
flex: 1;
min-width: 0;
min-height: 40px;
}
.chat-search button {
white-space: nowrap;
}
.dock-icon-button svg { width: 24px; height: 24px; }
.dock-icon-button[aria-pressed="true"] { color: var(--primary); background: var(--primary-soft); }
.dock-icon-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: var(--touch-target);
min-height: var(--touch-target);
border: 0;
background: transparent;
color: var(--text-muted);
border-radius: var(--radius-sm);
font-size: 1rem;
flex: none;
text-decoration: none;
cursor: pointer;
}
.dock-icon-button:hover {
background: var(--surface-muted);
color: var(--text);
}
/* Mobile: lista primero; la conversacion ocupa la vista con volver. */
@media (max-width: 699px) {
.chat-shell {
grid-template-columns: minmax(0, 1fr);
}
.chat-shell.has-selection .chat-list-pane {
display: none;
}
.chat-shell:not(.has-selection) .chat-detail-pane {
display: none;
}
.chat-list {
max-height: none;
}
}
/* El workspace de Chat es una superficie del shell, no una pagina de cards. */
body:has(main.chat-main) {
overflow: hidden;
}
body:has(main.chat-main) .topbar {
min-height: var(--header-height);
box-sizing: border-box;
}
.shell-main:has(main.chat-main) {
height: calc(100dvh - var(--header-height));
overflow: hidden;
}
.wrap.chat-main {
display: flex;
flex-direction: column;
width: 100%;
max-width: none;
height: 100%;
padding: 0;
margin: 0;
min-height: 0;
}
.chat-workspace {
flex: 1;
min-height: 0;
height: 100%;
gap: 0;
align-items: stretch;
grid-template-columns: var(--chat-list-w, 400px) auto minmax(0, 1fr);
background: var(--surface);
}
/* El aviso realtime ocupa una fila compacta, no una fila implícita expandida
que desplaza el panel CRM y el hilo al conectarse. No altera la política Chat. */
.chat-workspace:has(> .update-pill) { grid-template-rows: auto minmax(0, 1fr); }
.chat-workspace > .update-pill { grid-column: 1 / -1; grid-row: 1; justify-self: start; }
.chat-workspace:has(> .update-pill) > :is(.chat-list-pane, .chat-splitter, .chat-detail-pane) { grid-row: 2; }
/* El divisor oculto no debe auto-colocar el hilo en la columna intermedia antes de cargar JS. */
@media (min-width: 700px) {
.chat-workspace .chat-list-pane { grid-column: 1; }
.chat-workspace .chat-splitter { grid-column: 2; }
.chat-workspace .chat-detail-pane { grid-column: 3; }
}
/* I1: divisor redimensionable entre lista y thread (patron W3C separator).
Sin JavaScript la columna usa el ancho por defecto y el divisor se oculta. */
.chat-splitter {
display: none;
width: 8px;
min-height: 0;
padding: 0;
border: 0;
border-left: 1px solid var(--border);
background: transparent;
cursor: col-resize;
touch-action: none;
}
.chat-splitter > span {
display: block;
width: 3px;
height: 48px;
margin: 40vh auto 0;
border-radius: 999px;
background: var(--border);
}
.chat-splitter:hover > span {
background: var(--primary);
}
.chat-splitter:focus-visible {
outline: 2px solid var(--primary);
outline-offset: -2px;
}
.chat-splitter:focus-visible > span {
background: var(--primary);
}
.js-chat-split .chat-splitter {
display: block;
}
.chat-workspace.list-collapsed {
grid-template-columns: 0 8px minmax(0, 1fr);
}
.chat-workspace.list-collapsed .chat-list-pane {
display: none;
}
.chat-workspace .chat-list-pane {
display: flex;
flex-direction: column;
min-width: 0;
min-height: 0;
border-right: 1px solid var(--border);
}
/* Q02: misma grilla que el header del thread (64px, mismo padding y borde). */
.chat-list-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
min-height: 64px;
border-bottom: 1px solid var(--border);
}
.chat-list-head h1 {
margin: 0;
font-size: 1.35rem;
font-weight: 600;
}
.chat-new-group, .chat-thread-action {
color: var(--primary);
font-size: .875rem;
text-decoration: none;
}
.chat-new-group {
padding: var(--space-2);
min-height: 36px;
display: inline-flex;
align-items: center;
}
.chat-workspace .chat-search-pane {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
margin: 0 var(--space-3) var(--space-2);
padding: 0;
gap: 0;
}
.chat-workspace .chat-search input {
flex: 1 1 auto;
width: auto;
min-width: 0;
padding-right: 44px;
border-radius: var(--radius-sm);
background: var(--surface-muted);
border: 1px solid var(--border);
color: var(--text);
font: inherit;
}
.chat-search-submit {
position: absolute;
right: 0;
top: 0;
width: 40px;
height: 40px;
border: 0;
border-radius: var(--radius-sm);
background: transparent;
color: var(--text-muted);
cursor: pointer;
font-size: 1.35rem;
}
/* Q26: limpiar la busqueda sin reescribirla; en su propia fila para no
tapar la lupa ni romper el input en mobile. */
.chat-search .chat-search-clear {
flex: 1 0 100%;
min-height: 40px;
display: inline-flex;
align-items: center;
justify-content: flex-end;
margin-top: var(--space-1);
padding: 0 var(--space-2);
color: var(--primary);
font-size: .85rem;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
}
.chat-search-clear:hover {
text-decoration: underline;
}
.chat-quick-filters {
display: flex;
align-items: center;
gap: var(--space-1);
padding: 0 var(--space-3) var(--space-2);
flex-wrap: wrap;
}
.chat-quick-filters .chip, .chat-filter-options .chip {
min-height: 34px;
padding: var(--space-1) var(--space-2);
font-size: .82rem;
white-space: nowrap;
}
.chat-workspace .chat-filters-panel {
margin: 0;
border-bottom: 0;
}
.chat-workspace .chat-filters-panel > :is(summary,[data-chat-menu-trigger]) {
padding: 0 var(--space-4);
min-height: 36px;
font-size: .82rem;
}
.chat-filter-options {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
padding: var(--space-2) var(--space-3);
}
.chat-filter-caption {
width: 100%;
color: var(--text-muted);
font-size: .8rem;
}
.chat-workspace .chat-list {
display: block;
flex: 1;
min-height: 0;
max-height: none;
margin: 0;
overflow-y: auto;
overscroll-behavior: contain;
/* Q24: scrollbar al tono del tema, sin angostarla (touch intacto). */
scrollbar-color: var(--text-muted) transparent;
}
.chat-workspace .chat-row {
display: grid;
grid-template-columns: 42px minmax(0, 1fr);
align-items: center;
justify-items: stretch;
gap: var(--space-3);
min-height: 70px;
padding: var(--space-2) var(--space-3);
border: 0;
border-bottom: 1px solid var(--border);
border-radius: 0;
background: var(--surface);
}
.chat-workspace .chat-row:hover { background: var(--surface-muted); }
.chat-workspace .chat-row.active {
background: var(--primary-soft);
box-shadow: inset 3px 0 var(--primary);
}
.chat-row-avatar, .chat-thread-avatar {
display: inline-flex;
justify-content: center;
align-items: center;
flex: none;
width: 42px;
height: 42px;
border-radius: 50%;
background: var(--surface-muted);
color: var(--text);
font-weight: 600;
}
/* Q28: el Empleado IA se distingue del humano sin leer el nombre. */
.chat-row-avatar.agent, .chat-thread-avatar.agent {
background: var(--avatar-agent-bg);
color: var(--avatar-agent-fg);
}
.chat-row-content { display: grid; gap: var(--space-1); min-width: 0; }
.chat-workspace .chat-row-top, .chat-row-bottom { display: flex; align-items: center; min-width: 0; gap: var(--space-2); }
.chat-workspace .chat-row-top strong { min-width: 0; font-size: .92rem; font-weight: 500; }
.chat-workspace .chat-row.unread strong { font-weight: 600; }
.chat-row-top time { margin-left: auto; flex: none; font-size: .73rem; color: var(--text-muted); }
.chat-row-bottom .chat-preview { display: block; min-width: 0; flex: 1; font-size: .82rem; }
.chat-row-bottom .chat-unread-dot { flex: none; min-width: 20px; height: 20px; }
.chat-workspace .chat-detail-pane, .chat-workspace .chat-detail {
min-width: 0;
min-height: 0;
height: 100%;
}
.chat-workspace .chat-detail-pane { background: var(--canvas); }
.chat-workspace .chat-detail-pane > .empty-state { display: grid; place-items: center; height: 100%; margin: 0; }
.chat-workspace .chat-detail {
display: flex;
flex-direction: column;
gap: 0;
}
.chat-thread-head {
display: flex;
align-items: center;
gap: var(--space-3);
min-height: 64px;
padding: var(--space-2) var(--space-4);
background: var(--surface);
border-bottom: 1px solid var(--border);
}
.chat-thread-back { display: none; }
.chat-workspace.list-collapsed .chat-thread-back { display: inline-flex; align-items: center; min-height: 40px; color: var(--primary); text-decoration: none; }
.chat-thread-head strong, .chat-thread-head small { display: block; }
.chat-thread-head small { color: var(--text-muted); font-size: .8rem; }
.chat-thread-identity { flex: 1; min-width: 0; }
.chat-workspace .chat-thread-action { flex: none; margin: var(--space-2) var(--space-4); }
.chat-workspace .chat-detail > .alert { flex: none; margin: var(--space-2) var(--space-4); }
.conversation-viewport .chat {
display: flex;
flex-direction: column;
align-items: flex-start;
flex: 1;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
gap: var(--space-2);
margin: 0;
padding: var(--space-3) clamp(var(--space-3), 3vw, var(--space-5));
scrollbar-color: var(--text-muted) transparent;
}
:is(.chat-workspace, .conversation-surface) .msg {
width: fit-content;
/* Markdown conserva los saltos del mensaje; el markup del renderer no agrega filas vacías. */
white-space: normal;
max-width: min(68%, 480px);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-lg);
font-size: .93rem;
line-height: 1.42;
box-shadow: var(--shadow);
}
:is(.chat-workspace, .conversation-surface) .msg.out { align-self: flex-end; }
:is(.chat-workspace, .conversation-surface) .msg.in { align-self: flex-start; }
:is(.chat-workspace, .conversation-surface) .msg.out {
background: var(--chat-own-background);
color: var(--chat-own-text);
border: 1px solid var(--border);
border-bottom-right-radius: var(--radius-sm);
}
:is(.chat-workspace, .conversation-surface) .msg.in { border-bottom-left-radius: var(--radius-sm); }
:is(.chat-workspace, .conversation-surface) .msg.ai {
background: var(--chat-ai-background);
color: var(--chat-ai-text);
border-color: var(--chat-ai-border);
}
:is(.chat-workspace, .conversation-surface) .msg .who { font-size: .76rem; color: var(--text-muted); opacity: 1; font-weight: 500; }
/* La metadata ocupa ancho de la última línea, nunca un footer vacío. */
.chat .msg-body { position: relative; --msg-meta-width: calc(5ch + var(--space-2)); }
.chat .msg-body.has-delivery-check { --msg-meta-width: calc(5ch + 1.5em + 2 * var(--space-2)); }
.chat .msg-meta {
position: absolute;
inset-inline-end: 0;
bottom: 0;
display: inline-flex;
align-items: baseline;
gap: var(--space-1);
font-size: .72rem;
line-height: 1.42;
color: var(--text-muted);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.chat .msg .msg-meta time { display: inline; float: none; margin: 0; font: inherit; color: inherit; opacity: 1; }
.chat .msg-local-state, .chat .msg-simulated-state { display: block; margin-top: var(--space-1); font-size: .875rem; color: var(--text-muted); }
/* Solo la hoja final del texto (la marca markLastBlock en el cliente con msg-last): antes se buscaba con
:has(~ *), que obligaba a recalcular el estilo de todo el chat ante cualquier cambio de la página. */
.chat .msg-body [data-msg-text] .msg-last::after {
content: "";
display: inline-block;
width: var(--msg-meta-width);
height: 1px;
font-size: .72rem;
}
.chat .msg-body [data-msg-text] > :last-child { margin-bottom: 0; }
.chat-detail.kind-direct .msg > .who,
.chat-detail.kind-direct .msg-quote > .who{
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
/* Q08/Q10: Markdown seguro con el mismo sistema visual humano/IA. */
.chat .msg [data-msg-text] p { margin: 0 0 .45em; }
.chat .msg [data-msg-text] p:last-child { margin-bottom: 0; }
.chat .msg [data-msg-text] ul,
.chat .msg [data-msg-text] ol { margin: .3em 0 .45em 1.25em; padding: 0; }
.chat .msg [data-msg-text] li { margin: .15em 0; }
.chat .msg [data-msg-text] li:last-child { margin-bottom: 0; }
.chat .msg [data-msg-text] strong { font-weight: 600; }
.chat .msg [data-msg-text] h1,
.chat .msg [data-msg-text] h2,
.chat .msg [data-msg-text] h3,
.chat .msg [data-msg-text] h4,
.chat .msg [data-msg-text] h5,
.chat .msg [data-msg-text] h6 { margin: .3em 0; font-size: 1em; font-weight: 600; }
.chat .msg [data-msg-text] code {
padding: 0 .3em;
border-radius: 4px;
background: var(--code-background);
color: var(--code-text);
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: .85em;
}
.chat .msg [data-msg-text] pre {
margin: .3em 0 .45em;
padding: var(--space-2);
border-radius: var(--radius-sm);
background: var(--code-background);
color: var(--code-text);
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.chat .msg [data-msg-text] pre code { padding: 0; background: none; }
.chat .msg [data-msg-text] a { color: var(--link-default); text-decoration: underline; }
.chat .msg [data-msg-text] a:hover { color: var(--link-hover); }
.chat .msg [data-msg-text] a:active { color: var(--link-active); }
.chat-workspace .chat-to-end {
align-self: center;
flex: none;
min-height: 36px;
margin-top: -48px;
margin-bottom: var(--space-2);
padding: var(--space-1) var(--space-3);
border: 1px solid var(--primary);
border-radius: 999px;
background: var(--surface);
color: var(--primary);
cursor: pointer;
box-shadow: var(--shadow-lg);
z-index: 1;
}
.chat-workspace .chat-to-end[hidden] { display: none; }
:is(.chat-workspace, .conversation-surface) .human-composer {
position: static;
flex: none;
padding: var(--space-2) var(--space-3);
padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
border-top: 1px solid var(--border);
background: var(--surface);
}
:is(.chat-workspace, .conversation-surface) .human-composer :is(form, .chat-composer-controls) {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
gap: var(--space-1);
min-width: 0;
padding: var(--space-1);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--surface);
}
:is(.chat-workspace, .conversation-surface) .human-composer :is(form, .chat-composer-controls):focus-within {
border-color: var(--primary);
outline: 2px solid var(--primary);
outline-offset: -2px;
}
/* Un solo foco para el composer integrado; el botón conserva su foco propio. */
:is(.chat-workspace, .conversation-surface) .human-composer textarea:focus-visible { outline: none; }
:is(.chat-workspace, .conversation-surface) .human-composer textarea {
grid-column: 1;
grid-row: 1;
width: 100%;
min-width: 0;
min-height: var(--touch-target);
max-height: calc(6lh + 2 * var(--space-2));
padding: var(--space-2) var(--space-3);
font: inherit;
line-height: 1.4;
color: var(--text);
background: transparent;
border: 0;
border-radius: var(--radius-sm);
resize: none;
field-sizing: content;
overflow-y: auto;
}
.human-composer .chat-send-button {
grid-column: 2;
grid-row: 1;
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--touch-target);
min-width: var(--touch-target);
height: var(--touch-target);
min-height: var(--touch-target);
padding: var(--space-2);
border-radius: var(--radius);
}
.chat-send-button svg { width: 24px; height: 24px; }
.human-composer :is(form, .chat-composer-controls):has(.composer-quote) :is(textarea, .chat-send-button) { grid-row: 2; }
/* El renderer conserva la densidad del hilo independientemente del host. */
.chat-message-list { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.chat-message-list .msg { flex: none; white-space: normal; }
/* El mismo eje vertical en Full/Dock/Simulator: el espacio corto queda antes del historial. */
.conversation-viewport { position: relative; display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; }
.conversation-viewport .chat::before { content: ""; display: block; flex: 1 0 0; width: 100%; }
.conversation-viewport .chat > :is(.msg, .msg-date, .chat-history-pager) { flex-shrink: 0; }
.conversation-viewport [hidden] { display: none; }
.conversation-viewport .chat-to-end {
align-self: center; flex: none; min-height: var(--touch-target);
margin: var(--space-1); padding: var(--space-1) var(--space-3);
border: var(--border-width) solid var(--border); border-radius: var(--radius);
background: var(--surface); color: var(--primary); cursor: pointer;
}
.conversation-typing { flex: none; padding: var(--space-1) var(--space-3); color: var(--text-muted); font-size: .875rem; }
@media (max-width: 699px) {
.chat-workspace { grid-template-columns: minmax(0, 1fr); }
.chat-workspace .chat-splitter,
.js-chat-split .chat-splitter { display: none; }
.chat-workspace.list-collapsed { grid-template-columns: minmax(0, 1fr); }
.chat-workspace.list-collapsed .chat-list-pane { display: revert; }
.chat-back { min-height: 44px; }
}
/* I4: el directorio Nuevo chat reusa filas, chips y search del panel. */
.chat-back {
display: inline-flex;
align-items: center;
min-height: 36px;
padding: var(--space-1) var(--space-4);
color: var(--primary);
text-decoration: none;
font-size: .875rem;
font-weight: 600;
}
.chat-back:hover {
text-decoration: underline;
}
.chat-rail-tooltip {
position: fixed;
z-index: 70;
pointer-events: none;
max-width: 220px;
padding: var(--space-2) var(--space-3);
background: var(--text);
color: var(--surface);
border-radius: var(--radius-sm);
font-size: .82rem;
box-shadow: var(--shadow-lg);
}
.chat-main .mobile-back { display: none; }
/* I6/I7: menus de fila y de header con nativo (sin JS para abrir).
Acciones siempre con backend real; nada muerto. */
.chat-row-wrap {
position: relative;
}
.chat-row-wrap > .chat-row {
padding-right: 52px;
}
.chat-row-menu {
position: absolute;
top: 8px;
right: 6px;
}
.chat-row-menu > :is(summary,[data-chat-menu-trigger]),
.chat-thread-menu > :is(summary,[data-chat-menu-trigger]) {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
min-height: 40px;
border-radius: var(--radius-sm);
color: var(--text-muted);
font-size: 1.1rem;
letter-spacing: .1em;
cursor: pointer;
list-style: none;
}
.chat-row-menu > :is(summary,[data-chat-menu-trigger])::-webkit-details-marker,
.chat-thread-menu > :is(summary,[data-chat-menu-trigger])::-webkit-details-marker {
display: none;
}
.chat-row-menu > :is(summary,[data-chat-menu-trigger]) {
opacity: 0;
}
.chat-row-wrap:hover .chat-row-menu > :is(summary,[data-chat-menu-trigger]),
.chat-row-menu:focus-within > :is(summary,[data-chat-menu-trigger]),
.chat-row-menu[open] > :is(summary,[data-chat-menu-trigger]) {
opacity: 1;
}
.no-hover .chat-row-menu > :is(summary,[data-chat-menu-trigger]),
.no-hover .msg-menu > :is(summary,[data-chat-menu-trigger]) {
opacity: 1;
}
.chat-row-menu > :is(summary,[data-chat-menu-trigger]):hover,
.chat-thread-menu > :is(summary,[data-chat-menu-trigger]):hover,
.chat-row-menu > :is(summary,[data-chat-menu-trigger]):focus-visible,
.chat-thread-menu > :is(summary,[data-chat-menu-trigger]):focus-visible {
background: var(--surface-muted);
color: var(--text);
outline: 2px solid var(--primary);
outline-offset: -2px;
}
.chat-row-menu-items,
.chat-thread-menu-items {
position: absolute;
right: 0;
top: calc(100% + 4px);
z-index: 5;
display: grid;
gap: 2px;
min-width: 200px;
padding: var(--space-1);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-lg);
}
.chat-row-menu.menu-up .chat-row-menu-items,
.chat-thread-menu.menu-up .chat-thread-menu-items {
top: auto;
bottom: calc(100% + 4px);
}
.chat-row-menu-items a,
.chat-thread-menu-items a,
.chat-thread-menu-items button,
.chat-row-menu-items button {
display: flex;
align-items: center;
min-height: 40px;
padding: var(--space-1) var(--space-3);
border: 0;
border-radius: var(--radius-sm);
background: transparent;
color: var(--text);
font: inherit;
text-align: start;
text-decoration: none;
cursor: pointer;
width: 100%;
}
.chat-row-menu-items a:hover,
.chat-thread-menu-items a:hover,
.chat-thread-menu-items button:hover,
.chat-row-menu-items button:hover {
background: var(--surface-muted);
}
.chat-thread-menu {
position: relative;
flex: none;
margin-left: auto;
}
.chat-thread-menu > :is(summary,[data-chat-menu-trigger]) { width: 44px; height: 44px; min-width: 44px; min-height: 44px; color: var(--text); letter-spacing: normal; }
.chat-thread-menu > :is(summary,[data-chat-menu-trigger]) svg { width: 22px; height: 22px; fill: currentColor; }
.chat-thread-menu[open] > :is(summary,[data-chat-menu-trigger]) { background: var(--surface-muted); }
.chat-thread-menu-items { min-width: min(280px, calc(100vw - 32px)); max-width: calc(100vw - 32px); gap: var(--space-1); padding: var(--space-2); }
.chat-thread-menu-items :is(a, button) { min-height: 44px; gap: var(--space-3); }
.chat-thread-menu-items :is(a, button) svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.chat-thread-menu-items :is(a, button):focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.chat-thread-menu-items button.chat-js-action { display: none; }
.js .chat-thread-menu-items button.chat-js-action { display: flex; }
/* I8/I9/I10/I11: acciones por mensaje, citas, info, seleccion y hint.
Sin JavaScript funcionan Responder e Info; Copiar/Seleccionar se muestran
solo con JavaScript (html.js) para no ofrecer botones muertos. */
.msg {
position: relative;
}
/* Q11: el disparador flota en la esquina de la burbuja completa, nunca
sobre la cita ni el texto: pertenece al mensaje, no a una parte. */
.msg-menu {
position: absolute;
top: -14px;
right: -8px;
z-index: 2;
}
/* El menú abierto recibe sus clicks, no los triggers de mensajes vecinos. */
.msg-menu[open] { z-index: 4; }
.msg-menu > :is(summary,[data-chat-menu-trigger]) {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 32px;
min-height: 32px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--surface);
box-shadow: var(--shadow);
color: var(--text-muted);
font-size: .95rem;
letter-spacing: .1em;
cursor: pointer;
list-style: none;
opacity: 0;
}
.msg-menu > :is(summary,[data-chat-menu-trigger])::-webkit-details-marker {
display: none;
}
.msg:hover .msg-menu > :is(summary,[data-chat-menu-trigger]),
.msg:focus-within .msg-menu > :is(summary,[data-chat-menu-trigger]),
.msg-menu[open] > :is(summary,[data-chat-menu-trigger]) {
opacity: 1;
}
.msg-menu > :is(summary,[data-chat-menu-trigger]):hover,
.msg-menu > :is(summary,[data-chat-menu-trigger]):focus-visible {
color: var(--text);
outline: 2px solid var(--primary);
outline-offset: -2px;
}
.msg-menu-items {
position: absolute;
right: 0;
top: calc(100% + 4px);
z-index: 5;
display: grid;
gap: 2px;
min-width: 180px;
padding: var(--space-1);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-lg);
}
.msg-menu.menu-up .msg-menu-items {
top: auto;
bottom: calc(100% + 4px);
}
.msg-menu-items a,
.msg-menu-items button {
display: flex;
align-items: center;
min-height: var(--touch-target);
padding: var(--space-1) var(--space-3);
border: 0;
border-radius: var(--radius-sm);
background: transparent;
color: var(--text);
font: inherit;
text-align: start;
text-decoration: none;
cursor: pointer;
width: 100%;
}
.msg-menu-items a:hover,
.msg-menu-items button:hover {
background: var(--surface-muted);
}
.msg-menu-items [data-requires-js] {
display: none;
}
html.js .msg-menu-items [data-requires-js] {
display: flex;
}
/* Q14: separador de fecha del thread (Hoy, Ayer o fecha). */
.chat-floating-date {
position: sticky;
top: var(--space-2);
z-index: 3;
align-self: stretch;
display: flex;
justify-content: center;
align-items: flex-start;
flex: none;
height: 0;
/* Compensa el gap del hilo: aparecer/desaparecer nunca mueve mensajes. */
margin-bottom: calc(-1 * var(--space-2));
visibility: hidden;
pointer-events: none;
}
.chat-floating-date[data-visible="true"] { visibility: visible; }
.chat-floating-date > span {
max-width: 100%;
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-lg);
background: color-mix(in srgb, var(--surface-muted) 88%, transparent);
color: var(--text-muted);
font-size: .75rem;
font-weight: 600;
line-height: 1.5;
box-shadow: var(--shadow);
overflow-wrap: anywhere;
pointer-events: none;
}
.msg-date {
align-self: center;
margin: var(--space-2) 0 var(--space-1);
}
.msg-date > span {
display: inline-block;
padding: var(--space-1) var(--space-3);
border-radius: 999px;
background: var(--surface-muted);
color: var(--text-muted);
font-size: .75rem;
font-weight: 600;
}
.msg-quote {
display: block;
margin-bottom: var(--space-1);
/* Q11: el menu flota arriba-derecha; la cita le deja sitio. */
padding: var(--space-1) 40px var(--space-1) var(--space-2);
border-left: 3px solid var(--chat-quote-border);
border-radius: var(--radius-sm);
background: var(--chat-quote-background);
color: var(--text);
text-decoration: none;
font-size: .82rem;
}
:root[data-theme="dark"] .msg-quote {
background: var(--chat-quote-background);
}
:root[data-theme="dark"] .msg.out .msg-quote {
background: var(--chat-quote-background);
border-left-color: var(--chat-quote-border);
}
/* Q09: cita inmediata y obvia: una linea compacta, sin perder el enlace. */
.msg-quote.compact {
padding-top: 2px;
padding-bottom: 2px;
font-size: .76rem;
}
.msg-quote.compact > span:last-child {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
.msg.out .msg-quote {
background: var(--chat-quote-background);
border-left-color: var(--chat-quote-border);
}
.msg-quote .who {
font-size: .72rem;
}
.msg-info {
min-width: 0;
color: var(--text);
}
.msg-info > :is(summary,[data-chat-menu-trigger]) {
display: flex;
align-items: center;
min-height: var(--touch-target);
padding: var(--space-1) var(--space-3);
cursor: pointer;
border-radius: var(--radius-sm);
}
.msg-info > div {
max-width: 260px;
padding: var(--space-2) var(--space-3);
font-size: .8rem;
line-height: 1.4;
color: var(--text-muted);
overflow-wrap: anywhere;
}
.msg-info > :is(summary,[data-chat-menu-trigger]):hover,
.msg-info > :is(summary,[data-chat-menu-trigger]):focus-visible {
color: var(--text);
outline: 2px solid var(--primary);
outline-offset: -2px;
}
.msg.selected {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
.msg-select-bar {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-2);
flex: none;
padding: var(--space-2) var(--space-4);
border-top: 1px solid var(--border);
background: var(--surface);
font-size: .875rem;
}
/* En seleccion el pill de ir-al-final estorba a la barra: se oculta. */
.chat-workspace.selecting .chat-to-end {
display: none;
}
/* El display de las acciones no debe sobrescribir el gating nativo hidden. */
.msg-select-bar[hidden],
.msg-select-bar a[data-select-reply][hidden],
.msg-select-bar button[hidden] {
display: none;
}
.composer-quote {
display: flex;
align-items: center;
gap: var(--space-2);
grid-column: 1 / -1;
padding: var(--space-1) var(--space-3);
border-left: 3px solid var(--primary);
border-radius: var(--radius-sm);
background: var(--surface-muted);
font-size: .85rem;
}
.composer-quote > a {
margin-left: auto;
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
min-height: 36px;
border-radius: var(--radius-sm);
color: var(--text-muted);
text-decoration: none;
font-size: 1.2rem;
}
.composer-quote > a:hover {
background: var(--surface);
color: var(--text);
}
/* Q17: placeholder con el mismo muted medido AA del resto del texto. */
.chat-workspace .human-composer textarea::placeholder {
color: var(--text-muted);
opacity: 1;
}
/* Q13: indicador discreto con el nombre real mientras el empleado responde. */
.msg.temp-typing {
animation: typing-pulse 1.6s ease-in-out infinite;
}
@keyframes typing-pulse {
0%, 100% { opacity: 1; }
50% { opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
.msg.temp-typing {
animation: none;
}
}
/* F11: modo de seleccion multiple. El composer y los menus por burbuja se
ocultan para no fingir normalidad; la barra contextual manda. */
.chat-workspace.selecting .human-composer,
.chat-workspace.selecting .msg-menu {
display: none;
}
.msg-select-check {
display: none;
}
.chat-workspace.selecting .msg {
padding-left: 56px;
}
.chat-workspace.selecting .msg-select-check {
display: inline-flex;
align-items: center;
justify-content: center;
position: absolute;
left: 4px;
top: 8px;
width: 44px;
height: 44px;
border: 0;
border-radius: var(--radius-sm);
background: transparent;
cursor: pointer;
}
.msg-select-check > span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border: 2px solid var(--text-muted);
border-radius: 6px;
background: var(--surface);
color: transparent;
font-size: 1rem;
line-height: 1;
}
.msg-select-check[aria-checked="true"] > span {
border-color: var(--primary);
background: var(--primary);
color: var(--primary-contrast);
}
.msg-select-check:hover > span,
.msg-select-check:focus-visible > span {
border-color: var(--primary);
}
.msg-select-check:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
.msg-select-bar a[data-select-reply],
.msg-select-bar button {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-sm);
color: var(--primary);
font: inherit;
font-weight: 600;
text-decoration: none;
background: transparent;
border: 0;
cursor: pointer;
}
.msg-select-bar a[data-select-reply]:hover,
.msg-select-bar button:hover {
background: var(--surface-muted);
}
.msg-select-bar [data-selected-count] {
font-weight: 600;
}
/* En el ancho de una sola columna el retorno vive dentro del header persistente. */
@media (max-width: 699px) {
.chat-main .mobile-back { display: none; }
/* F14: en modo directorio el movil muestra el directorio aunque haya
seleccion preservada para el thread de desktop. */
.chat-workspace.dir-mode.has-selection .chat-list-pane { display: flex; }
.chat-workspace.dir-mode.has-selection .chat-detail-pane { display: none; }
.chat-workspace.has-selection:not(.list-mode):not(.dir-mode) .chat-list-pane { display: none; }
.chat-workspace.list-mode .chat-list-pane { display: flex; }
.chat-workspace:not(.has-selection) .chat-detail-pane,
.chat-workspace.list-mode .chat-detail-pane { display: none; }
.chat-thread-back {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
min-width: 44px;
min-height: 44px;
border-radius: var(--radius-sm);
color: var(--primary);
font-size: 1.6rem;
text-decoration: none;
}
.chat-thread-back span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.chat-thread-back:hover { background: var(--surface-muted); }
.chat-workspace .chat-detail > .chat { padding: var(--space-3); }
.chat-workspace .msg { max-width: 86%; }
.chat-workspace .human-composer { padding-inline: var(--space-2); }
.msg-select-bar { gap: var(--space-1); padding: var(--space-2); }
.msg-select-bar a[data-select-reply],
.msg-select-bar button { padding: var(--space-1) var(--space-2); }
}
.chat-history-pager {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 8px;
min-width: 0;
padding-block: 8px;
color: var(--muted);
}
.chat-history-pager [aria-disabled="true"] { pointer-events: none; opacity: .6; }
.chat-history-pager [hidden] { display: none !important; }
.chat[data-history-managed] { overflow-anchor: none; }
/* Solo la composición exterior usa la altura disponible del shell, no 100dvh menos 60px. */
.app-shell .shell-main:has(main.chat-main) { height: 100%; }
.app-shell .shell-main > .chat-main { overflow: hidden; }
/* Posponer reutiliza la superficie transaccional y el bottom sheet de Chat. */
.chat-snooze-presets { display: grid; gap: var(--space-2, 8px); border: 0; padding: 0; min-width: 0; }
.chat-snooze-presets label { display: flex; align-items: flex-start; gap: var(--space-2, 8px); padding-block: var(--space-2, 8px); }
.chat-snooze-presets small { display: block; color: var(--text-muted); overflow-wrap: anywhere; }
.chat-scheduled-workspace { min-width:0; flex:1; overflow:auto; background:var(--surface); }
.chat-scheduled-workspace .chat-context-body { max-width:50rem; margin-inline:auto; }
.scheduled-open .conversation-viewport > :not(.chat-scheduled-workspace) { display:none; }
.chat-scheduled-records { display:grid; gap:var(--space-3); }
.chat-scheduled-record { padding-block:var(--space-3); border-bottom:1px solid var(--border); }
.chat-scheduled-body { white-space:pre-wrap; overflow-wrap:anywhere; }
.chat-scheduled-record dl { display:grid; grid-template-columns:minmax(7rem,auto) minmax(0,1fr); gap:var(--space-2); }
.chat-scheduled-record dd { margin:0; overflow-wrap:anywhere; }
.chat-scheduled-record .actions { display:flex; flex-wrap:wrap; gap:var(--space-2); }
/* Chat bloque 1: tokens y composición exclusivos del workspace.
Nunca se aplican al Dock ni al simulador. Light sigue la referencia aprobada;
dark conserva el sistema de tema y los contrastes de la aplicación. */
.chat-workspace {
color: var(--chat-text);
background: var(--chat-list-background);
}
/* El breakpoint usa el espacio útil del chat, no el ancho del dispositivo. */
.chat-main { container: dedicated-chat / inline-size; }
.chat-workspace .chat-list-pane { background: var(--chat-list-background); border-color: var(--chat-border); }
.chat-workspace .chat-list-head { min-height: 56px; padding: 10px 8px 8px 18px; gap: 4px; }
.chat-workspace .chat-list-head h1 { font-size: 21px; font-weight: 600; min-width: 0; }
.chat-workspace .chat-list-head .chat-icon-action { border-radius: 999px; width: 38px; min-width: 38px; height: 38px; }
.chat-workspace .chat-search-pane { margin: 0 16px; }
.chat-workspace .chat-search { --control-background: var(--chat-search-background); --control-placeholder: var(--chat-text-secondary); }
.chat-workspace .chat-search input { min-height: 38px; height: 38px; border: 0; border-radius: 999px; background: var(--chat-search-background); color: var(--chat-text); padding-inline: 16px 44px; font-size: 13.5px; }
.chat-workspace .chat-search input::placeholder { color: var(--chat-text-secondary); opacity: 1; }
.chat-workspace .chat-search-submit { width: 38px; height: 38px; border-radius: 999px; color: var(--chat-text-secondary); }
.chat-workspace .chat-quick-filters { padding: 12px 16px 10px; gap: 6px; }
.chat-workspace .chat-quick-filters .chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--chat-chip-border); background: transparent; font-size: 13px; font-weight: 600; color: var(--chat-text-secondary); text-decoration: none; }
.chat-workspace .chat-quick-filters .chip.active { background: var(--chat-accent-soft); border-color: var(--chat-accent-border); color: var(--chat-accent-text); }
.chat-workspace .chat-list { padding: 2px 8px 16px; min-height: 0; }
.chat-workspace .chat-row-wrap { margin: 0; }
.chat-workspace .chat-row { grid-template-columns: 48px minmax(0, 1fr); min-height: 76px; gap: 12px; padding: 10px 12px; border: 0; border-radius: var(--chat-row-radius); background: var(--chat-list-background); color: var(--chat-text); }
.chat-workspace .chat-row-wrap > .chat-row { padding-right: 42px; }
.chat-workspace .chat-row:hover { background: var(--chat-list-background); box-shadow: var(--chat-row-hover-shadow); }
:root[data-theme="dark"] .chat-workspace .chat-row:hover { background: var(--surface-muted); }
.chat-workspace .chat-row.active { background: var(--chat-active-background); box-shadow: none; }
/* Realtime owns the existing 1500ms lifetime; static fill also survives reduced motion. */
.chat-workspace .chat-row.chat-row-realtime-highlight,
:root[data-theme="dark"] .chat-workspace .chat-row.chat-row-realtime-highlight { background: var(--chat-accent-soft); }
.chat-workspace .chat-row-avatar { width: 48px; height: 48px; background: var(--chat-avatar-background); color: var(--chat-avatar-text); font-size: 15px; }
.chat-workspace .chat-row-avatar.agent { background: var(--chat-ai-soft); color: var(--chat-ai-text); }
.chat-workspace .chat-row-top { gap: 6px; }
.chat-workspace .chat-row-top strong { font-size: 15.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-workspace .chat-row.unread .chat-row-top strong { font-weight: 600; }
.chat-workspace .chat-row-top time { font-size: 12px; color: var(--chat-text-tertiary); }
.chat-workspace .chat-row.unread .chat-row-top time { color: var(--chat-accent); font-weight: 600; }
.chat-workspace .chat-preview { color: var(--chat-text-secondary); font-size: 13.5px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.chat-workspace .chat-unread-dot { background: var(--chat-accent); color: var(--chat-on-unread); min-width: 20px; height: 20px; border-radius: 10px; padding-inline: 5px; font-size: 11.5px; font-weight: 600; }
.chat-workspace .chat-row .badge { border: 0; border-radius: 4px; background: var(--chat-neutral-soft); color: var(--chat-text-secondary); font-size: 10.5px; padding: 1px 4px; flex: none; }
.chat-workspace .chat-detail-pane { background: var(--chat-thread-background); }
.chat-workspace .chat-thread-head { background: var(--chat-list-background); border-color: var(--chat-border); gap: 8px; }
.chat-workspace .chat-thread-avatar { width: 40px; height: 40px; background: var(--chat-avatar-background); color: var(--chat-avatar-text); }
.chat-workspace .chat-thread-avatar.agent { background: var(--chat-ai-soft); color: var(--chat-ai-text); }
.chat-workspace .chat-thread-identity strong { font-size: 15.5px; font-weight: 600; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.chat-workspace .chat-thread-identity small { font-size: 12.5px; color: var(--chat-text-secondary); }
.chat-workspace .conversation-viewport { background: var(--chat-thread-background); }
.chat-workspace .msg { font-size: 14px; line-height: 1.42; box-shadow: var(--chat-bubble-shadow); border: 0; padding: 8px 12px; }
.chat-workspace .msg.out, .chat-workspace .msg.out.ai { background: var(--chat-own-background); color: var(--chat-own-text); border-radius: 10px 10px 3px 10px; }
.chat-workspace .msg.in, .chat-workspace .msg.in.ai { background: var(--chat-list-background); color: var(--chat-text); border-radius: 10px 10px 10px 3px; }
.chat-workspace .msg .who { font-size: 12px; font-weight: 600; }
.chat-workspace .msg.ai .who { color: var(--chat-ai-text); }
.chat-workspace .msg-meta { font-size: 11px; color: var(--chat-text-secondary); }
.chat-workspace .msg-meta time { color: inherit; }
/* R04: reserva intrÃnseca del marcador localizado + hora, solo en el workspace opt-in.
La hoja Markdown final es la misma del spacer legacy; no altera listas/citas anteriores. */
.chat-workspace .msg-body.has-simulated-meta .msg-meta {
font-family: var(--font);
font-weight: 400;
font-style: normal;
}
.chat-workspace .msg-body.has-simulated-meta [data-msg-text] .msg-last::after {
content: var(--msg-meta-content);
width: auto;
height: auto;
line-height: 1.42;
padding-inline-start: calc(var(--space-1) + var(--space-2));
font-size: 11px;
font-family: var(--font);
font-weight: 400;
font-style: normal;
font-variant-numeric: tabular-nums;
white-space: nowrap;
visibility: hidden;
}
.chat-workspace .msg-delivery-check[data-delivery-status="READ"] { color: var(--chat-accent); }
.chat-workspace .chat-workspace-system-note { justify-self: center; max-width: 85%; margin: 8px auto; padding: 5px 10px; border-radius: 999px; background: var(--chat-note-background); color: var(--chat-text-secondary); text-align: center; font-size: 12px; line-height: 1.4; }
.chat-workspace .chat-history-pager { align-self: stretch; width: 100%; }
.chat-workspace .msg-date { background: var(--chat-list-background); color: var(--chat-text-secondary); box-shadow: var(--chat-bubble-shadow); border-radius: 999px; }
.chat-workspace .human-composer { border: 0; background: var(--chat-thread-background); padding: 8px 16px 14px; }
.chat-workspace .human-composer :is(form, .chat-composer-controls) { background: var(--chat-list-background); border: 0; border-radius: 28px; padding: 4px 6px; box-shadow: var(--chat-bubble-shadow); }
.chat-workspace .human-composer textarea { font-size: 14.5px; line-height: 22px; color: var(--chat-text); }
.chat-workspace .human-composer .chat-send-button { background: var(--chat-accent); color: var(--primary-contrast); border-radius: 999px; }
.chat-workspace .chat-thread-menu-items, .chat-workspace .chat-row-menu-items { background: var(--chat-list-background); border-color: var(--chat-border); border-radius: var(--chat-menu-radius); box-shadow: var(--chat-menu-shadow); max-width: min(296px, calc(100cqw - 24px)); }
.chat-workspace .chat-thread-menu-items :is(a, button), .chat-workspace .chat-row-menu-items :is(a, button) { border-radius: 10px; font-size: 14px; color: var(--chat-text); }
.chat-workspace .empty-state { color: var(--chat-text-secondary); font-size: 13.5px; }
.chat-workspace .empty-state strong { display: block; font-size: 15px; color: var(--chat-text); font-weight: 600; }
.chat-workspace :is(a, button, :is(summary,[data-chat-menu-trigger]), input:not(.bheli-composite-input)):focus-visible { outline: 2px solid var(--chat-accent); outline-offset: 2px; }
.chat-workspace [hidden] { display: none !important; }
.chat-workspace .feedback-toast { position: fixed; inset: auto auto calc(24px + env(safe-area-inset-bottom, 0px)) 50%; transform: translateX(-50%); z-index: 70; max-width: min(520px, calc(100vw - 32px)); margin: 0; padding: 10px 16px; border: 0; border-radius: 999px; background: var(--chat-toast-background); color: var(--chat-toast-text); font-size: 13.5px; box-shadow: var(--chat-toast-shadow); pointer-events: none; }
.chat-workspace .feedback-toast-timed { animation-duration: 2.8s; }
/* Selectores nativos: el contenido sigue operable sin JavaScript. */
.chat-workspace :is(.chat-type-menu, .chat-list-menu, .chat-inbox-selector, .chat-assign-menu, .chat-bulk-menu) { position: relative; }
.chat-workspace .chat-type-menu { flex: 1; min-width: 0; }
.chat-workspace :is(.chat-type-menu, .chat-list-menu, .chat-inbox-selector, .chat-assign-menu, .chat-bulk-menu) > :is(summary,[data-chat-menu-trigger]) { display: flex; align-items: center; gap: 6px; min-height: 38px; list-style: none; cursor: pointer; border-radius: 10px; }
.chat-workspace :is(.chat-type-menu, .chat-list-menu, .chat-inbox-selector, .chat-assign-menu, .chat-bulk-menu) > :is(summary,[data-chat-menu-trigger])::-webkit-details-marker { display: none; }
.chat-workspace .chat-inbox-selector { margin: 12px 12px 0; }
.chat-workspace .chat-inbox-selector > :is(summary,[data-chat-menu-trigger]) { padding: 8px 10px; border: 1px solid var(--chat-border); border-radius: 12px; font-size: 13.5px; font-weight: 600; }
.chat-workspace .chat-inbox-selector > :is(summary,[data-chat-menu-trigger]) > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-workspace .chat-inbox-menu-items { left: 0; right: 0; }
.chat-workspace .chat-inbox-menu-items > strong { padding: 6px 10px; color: var(--chat-text-tertiary); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.chat-workspace :is(.chat-inbox-avatar, .chat-assignee-avatar) { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 8px; background: var(--chat-neutral-soft); color: var(--chat-text-secondary); }
.chat-workspace .chat-assignee-avatar { border-radius: 999px; }
.chat-workspace .chat-view-back { display: grid; place-items: center; width: 38px; min-height: 38px; color: var(--chat-text); text-decoration: none; font-size: 22px; }
.chat-workspace .chat-type-menu > :is(summary,[data-chat-menu-trigger]) { width: fit-content; max-width: 100%; padding: 4px 8px; margin-left: -8px; }
.chat-workspace .chat-type-menu > :is(summary,[data-chat-menu-trigger]) h1 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.chat-workspace .chat-list-menu > :is(summary,[data-chat-menu-trigger]) { width: 36px; justify-content: center; }
.chat-workspace :is(.chat-type-menu-items, .chat-list-menu-items, .chat-inbox-menu-items, .chat-assign-menu-items, .chat-bulk-menu-items) { position: absolute; z-index: 20; top: calc(100% + 6px); display: grid; gap: 2px; padding: 6px; border: 1px solid var(--chat-border); border-radius: var(--chat-menu-radius); background: var(--chat-list-background); box-shadow: var(--chat-menu-shadow); max-width: calc(100cqw - 24px); }
.chat-workspace .chat-type-menu-items { width: 320px; left: -8px; }
.chat-workspace .chat-list-menu-items { width: 268px; right: 0; }
.chat-workspace :is(.chat-type-menu-items, .chat-list-menu-items, .chat-inbox-menu-items, .chat-assign-menu-items, .chat-bulk-menu-items) :is(a, button) { display: flex; align-items: center; gap: 12px; min-height: 40px; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--chat-text); text-align: start; text-decoration: none; font: inherit; font-size: 14px; cursor: pointer; }
.chat-workspace :is(.chat-type-menu-items, .chat-list-menu-items, .chat-inbox-menu-items, .chat-assign-menu-items, .chat-bulk-menu-items) :is(a, button):hover { background: var(--chat-active-background); }
.chat-workspace :is(.chat-type-menu-items, .chat-inbox-menu-items) a > span:nth-child(2) { flex: 1; min-width: 0; }
.chat-workspace .chat-type-menu-items strong { display: block; font-weight: 500; }
.chat-workspace .chat-type-menu-items small { display: block; color: var(--chat-text-tertiary); font-size: 12px; }
.chat-workspace .chat-type-icon { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 999px; background: var(--chat-neutral-soft); color: var(--chat-text-secondary); }
.chat-workspace .chat-type-icon.agent { background: var(--chat-ai-soft); color: var(--chat-ai-text); }
.chat-workspace :is(.chat-list-menu, .chat-quick-filters, .chat-type-icon) svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.chat-workspace .chat-quick-filters .chat-ai-filter.active { background: var(--chat-ai-soft); border-color: var(--chat-ai-border); color: var(--chat-ai-text); }
.chat-workspace .chat-filter-divider { flex: none; width: 1px; height: 20px; background: var(--chat-filter-divider); }
.chat-workspace .chat-quick-filters .chat-supervise-filter.active { background: var(--chat-text); color: var(--chat-list-background); border-color: var(--chat-text); }
.chat-workspace .chat-switch-track { display: inline-flex; align-items: center; width: 28px; height: 16px; padding: 2px; background: var(--chat-chip-border); border-radius: 999px; flex: none; }
.chat-workspace .chat-switch-track > span { width: 12px; height: 12px; background: var(--chat-list-background); border-radius: 999px; }
.chat-workspace .chat-unread-filter.active .chat-switch-track { background: var(--chat-accent); justify-content: flex-end; }
.chat-workspace .chat-owner-pill { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; max-width: 60%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; flex: 0 1 auto; border-radius: 999px; background: var(--chat-neutral-soft); color: var(--chat-text-secondary); font-size: 11.5px; font-weight: 500; }
.chat-workspace .chat-owner-pill:is(.agent, .ai, .employee) { background: var(--chat-ai-soft); color: var(--chat-ai-text); }
.chat-workspace .chat-owner-pill:is(.unassigned, .pending) { background: var(--chat-unassigned-soft); color: var(--chat-unassigned-text); font-weight: 600; }
.chat-workspace .chat-kind-tag { display: inline-flex; align-items: center; flex: none; height: 20px; padding: 0 8px; border-radius: 999px; background: var(--chat-neutral-soft); color: var(--chat-text-secondary); font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.chat-workspace .chat-hidden-ai { margin: 8px 16px 16px; padding: 8px 12px; border: 1px dashed var(--chat-ai-border); border-radius: 12px; color: var(--chat-ai-text); font-size: 12.5px; }
.chat-workspace .chat-hidden-ai a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 8px; color: inherit; font-weight: 600; }
.chat-workspace .chat-selection-bar { display: flex; flex-wrap: nowrap; min-width: 0; align-items: center; gap: 8px; padding: 4px 8px; margin: 8px 16px; border-radius: 12px; background: var(--chat-neutral-soft); color: var(--chat-text); font-size: 13.5px; }
.chat-workspace .chat-selection-bar > span { flex: 1 1 0; min-width: 0; }
.chat-workspace .chat-selection-bar > button { flex: 1 1 auto; min-width: 0; max-width: 100%; white-space: normal; word-break: normal; line-height: 1.35; }
.chat-workspace .chat-selection-bar > a { display: grid; place-items: center; min-width: 36px; min-height: 36px; color: inherit; font-size: 24px; text-decoration: none; }
/* R5.1 (R5-7) · C35 Casilla: cuadrada de 18 px, radio 5, borde 1,5 px de controles (C35 1.22, 3:1 en claro y oscuro); marcada, terracota con ✓ blanca (en oscuro,
los tokens del tema). Nunca la del navegador. Tocar la fila entera marca (ChatRowItem); el anillo de foco, solo con teclado. */
.chat-workspace { --chat-check-border: var(--ui-control-border); --chat-check-ring: var(--contact-focus-ring); --chat-check-on: var(--primary); }
.chat-workspace .chat-row-checkbox { -webkit-appearance: none; appearance: none; position: absolute; z-index: 1; top: calc(50% - 9px); left: 11px; width: 18px; height: 18px; margin: 0; box-sizing: border-box; border: 1.5px solid var(--chat-check-border); border-radius: 5px; background: var(--chat-list-background); cursor: pointer; }
.chat-workspace .chat-row-checkbox:checked { border-color: var(--chat-check-on); background: var(--chat-check-on); }
.chat-workspace .chat-row-wrap > .chat-row-checkbox:focus-visible { outline: none; border-color: var(--chat-check-on); box-shadow: 0 0 0 3px var(--chat-check-ring); }
.chat-workspace .chat-row-check-mark { position: absolute; z-index: 2; top: calc(50% - 9px); left: 11px; display: grid; place-items: center; width: 18px; height: 18px; color: var(--chat-on-unread); pointer-events: none; visibility: hidden; }
.chat-workspace .chat-row-checkbox:checked + .chat-row-check-mark { visibility: visible; }
.chat-workspace .chat-row-check-mark .chat-r2-icon { width: 12px; height: 12px; stroke-width: 3; }
.chat-workspace .chat-row-wrap:has(.chat-row-checkbox) .chat-row { padding-left: 42px; }
.chat-workspace .chat-row-wrap:has(.chat-row-checkbox:checked) .chat-row { background: var(--chat-accent-soft); }
.chat-workspace .chat-ownership-notice { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 12px 16px; padding: 12px 16px; border: 1px solid var(--chat-border); border-radius: 16px; background: var(--chat-list-background); font-size: 13.5px; line-height: 1.35; }
.chat-workspace .chat-ownership-notice > :is(p, span) { flex: 1; margin: 0; min-width: 0; }
.chat-workspace .chat-ownership-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.chat-workspace .chat-ownership-notice .button { border-radius: 999px; }
.chat-workspace .chat-ownership-notice.management-only { margin: 0; padding: 4px 16px; border: 0; border-radius: 0; background: transparent; }
.chat-workspace .chat-owner-mobile { display: none; }
.chat-workspace .chat-owner-header { max-width: 35%; height: 28px; padding-inline: 10px; font-size: 12.5px; }
.chat-workspace .chat-assign-menu-items { width: 264px; bottom: calc(100% + 6px); top: auto; right: 0; }
@container dedicated-chat (max-width: 859px) {
.chat-workspace, .chat-workspace.list-collapsed { grid-template-columns: minmax(0, 1fr); }
.chat-workspace .chat-splitter { display: none; }
.chat-workspace .chat-list-pane, .chat-workspace .chat-detail-pane { grid-column: 1; }
.chat-workspace .chat-list-pane { border: 0; }
.chat-workspace.has-selection:not(.list-mode):not(.dir-mode) .chat-list-pane { display: none; }
.chat-workspace.list-mode .chat-list-pane, .chat-workspace.dir-mode .chat-list-pane, .chat-workspace:not(.has-selection) .chat-list-pane { display: flex; }
.chat-workspace:not(.has-selection) .chat-detail-pane, .chat-workspace.list-mode .chat-detail-pane, .chat-workspace.dir-mode .chat-detail-pane { display: none; }
.chat-workspace .chat-thread-back { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 44px; min-height: 44px; color: var(--chat-text); font-size: 24px; text-decoration: none; }
.chat-workspace .chat-thread-back span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.chat-workspace .chat-thread-head { padding: 8px; gap: 4px; }
.chat-workspace .msg { max-width: 86%; }
.chat-workspace .conversation-viewport .chat { padding: 12px; }
.chat-workspace .chat-list-head .chat-icon-action { width: 44px; min-width: 44px; height: 44px; }
.chat-workspace .chat-quick-filters .chip { min-height: 44px; }
.chat-workspace .chat-search input { min-height: 44px; height: 44px; font-size: 16px; }
.chat-workspace .chat-search-submit { width: 44px; height: 44px; }
.chat-workspace .human-composer { padding-inline: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
.chat-workspace .human-composer textarea { font-size: 16px; }
.chat-workspace .chat-supervise-filter span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.chat-workspace .chat-supervise-filter { min-width: 44px; justify-content: center; padding-inline: 8px; }
.chat-workspace :is(.chat-type-menu, .chat-list-menu, .chat-inbox-selector, .chat-assign-menu) > :is(summary,[data-chat-menu-trigger]) { min-height: 44px; }
.chat-workspace .chat-list-menu > :is(summary,[data-chat-menu-trigger]) { min-width: 44px; }
.chat-workspace .chat-selection-bar > a { min-width: 44px; min-height: 44px; }
.chat-workspace .chat-ownership-actions { flex: 1 0 100%; justify-content: flex-end; position: relative; }
/* Con dos acciones, anclar al botón izquierdo puede sacar el menú
de la pantalla; la barra completa es el anclaje compacto estable. */
.chat-workspace .chat-ownership-actions .chat-assign-menu { position: static; }
.chat-workspace .chat-owner-header { display: none; }
.chat-workspace .chat-thread-identity .chat-owner-mobile { display: block; font-size: 12.5px; }
.chat-workspace .chat-owner-mobile.agent { color: var(--chat-ai-text); }
.chat-workspace .chat-owner-mobile.unassigned { color: var(--chat-unassigned-text); }
.chat-workspace .chat-thread-identity:has(.chat-owner-mobile) > small:not(.chat-owner-mobile) { display: none; }
.chat-workspace .chat-view-back { width: 44px; min-height: 44px; }
}
/* Chat P1-P10: contadores workspace solo lectura y aviso de otras bandejas.
Los spans con [hidden] nunca se muestran: el realtime de MAIN los revela al actualizar. */
.chat-workspace .chat-counter { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 20px; height: 20px; border-radius: 10px; padding-inline: 5px; background: var(--chat-accent); color: var(--chat-on-unread); font-size: 11.5px; font-weight: 600; }
.chat-workspace .chat-counter[hidden] { display: none; }
.chat-workspace :is(.chat-type-menu-items, .chat-list-menu-items) .chat-counter { margin-inline-start: auto; }
.chat-workspace .chat-counter-unassigned { background: transparent; border: 1px solid var(--chat-unassigned-text); color: var(--chat-unassigned-text); }
.chat-workspace .chat-inbox-menu-items .chat-inbox-option { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 4px 8px; min-width: 0; }
.chat-workspace .chat-inbox-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-workspace .chat-inbox-counts { display: inline-flex; align-items: center; gap: 4px; }
.chat-workspace .chat-inbox-unassigned { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.chat-workspace .chat-inbox-unassigned:has(.chat-counter[hidden]) { display: none; }
.chat-workspace .chat-inbox-unassigned small { font-size: 11.5px; }
.chat-workspace .chat-inbox-selector > :is(summary,[data-chat-menu-trigger]) > .chat-inbox-summary-identity { display: grid; gap: 2px; white-space: normal; }
.chat-workspace .chat-inbox-summary-identity > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-workspace .chat-inbox-summary-identity > small { color: var(--chat-text-secondary); font-size: 12px; font-weight: 400; overflow-wrap: anywhere; }
.chat-workspace .chat-inbox-phones { grid-column: 2 / -1; min-width: 0; margin: 0; color: var(--chat-text-secondary); font-size: 12px; white-space: normal; overflow-wrap: anywhere; }
/* P7: confirmación y resultados masivos solo lectura inicial; el realtime de MAIN los conserva. */
.chat-workspace .chat-confirm { display: grid; gap: 8px; margin: 0 16px 8px; padding: 12px; border: 1px solid var(--chat-border); border-radius: 10px; background: var(--chat-active-background); color: var(--chat-text); font-size: 13.5px; }
.chat-workspace .chat-confirm strong { font-size: 14px; }
.chat-workspace .chat-confirm p { margin: 0; }
.chat-workspace .chat-confirm-names { color: var(--chat-text-secondary); font-size: 12.5px; overflow-wrap: anywhere; }
.chat-workspace .chat-confirm label { display: grid; gap: 4px; font-weight: 600; }
.chat-workspace .chat-confirm select, .chat-workspace .chat-confirm input[type="datetime-local"] { min-height: 38px; border: 1px solid var(--chat-border); border-radius: 8px; background: var(--chat-list-background); color: var(--chat-text); padding-inline: 10px; font: inherit; }
.chat-workspace .chat-confirm-actions { display: flex; gap: 8px; justify-content: flex-end; }
.chat-workspace .chat-bulk-results { display: grid; gap: 6px; margin: 0 16px 8px; padding: 12px; border: 1px solid var(--chat-border); border-radius: 10px; background: var(--chat-list-background); color: var(--chat-text); font-size: 13px; }
.chat-workspace .chat-bulk-results p { margin: 0; }
.chat-workspace .chat-bulk-results .chat-bulk-failure { color: var(--chat-unassigned-text); }
.chat-workspace .chat-bulk-results .chat-bulk-warning { color: var(--chat-ai-text); }
.chat-workspace .chat-bulk-results .chat-undo-receipt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* Observaciones UI: ellipsis de selección, chevron Chats como referencia,
asignar visible, transferir en ellipsis, búsqueda en hilo. Tokens del
workspace: paridad light/dark sin colores sueltos. */
.chat-workspace .chat-select-chevron { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--chat-text-secondary); }
.chat-workspace .chat-bulk-menu { margin-left: auto; flex: none; }
.chat-workspace .chat-bulk-menu > :is(summary,[data-chat-menu-trigger]) { width: 38px; min-height: 38px; justify-content: center; }
.chat-workspace .chat-bulk-menu > :is(summary,[data-chat-menu-trigger]) svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.chat-workspace .chat-bulk-menu-items { width: 268px; right: 0; }
.chat-workspace .chat-menu-divider { height: 1px; background: var(--chat-border); margin: 6px 10px; }
.chat-workspace .chat-assign-empty { margin: 0; padding: 8px 10px; font-size: 13px; color: var(--chat-text-secondary); }
.chat-workspace .chat-thread-menu-items .chat-transfer-menu-item { display: grid; gap: 6px; padding: 8px 10px; }
.chat-workspace .chat-thread-menu-items .chat-transfer-menu-item label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: var(--chat-text); }
.chat-workspace .chat-thread-menu-items .chat-transfer-menu-item select { min-height: 38px; border: 1px solid var(--chat-border); border-radius: 8px; background: var(--chat-list-background); color: var(--chat-text); padding-inline: 10px; font: inherit; font-weight: 400; }
.chat-workspace .chat-search-toggle { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border: 0; border-radius: 50%; background: transparent; color: var(--chat-text); cursor: pointer; padding: 0; text-decoration: none; }
.chat-workspace .chat-search-toggle:hover { background: var(--chat-active-background); }
.chat-workspace .chat-search-toggle svg { width: 19px; height: 19px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.chat-workspace .chat-thread-search-panel { padding: 8px 16px; border-bottom: 1px solid var(--chat-border); background: var(--chat-list-background); }
.chat-workspace .chat-thread-search-form { display: flex; align-items: center; gap: 6px; }
.chat-workspace .chat-thread-search-form input[type="search"] { flex: 1; min-width: 0; min-height: 38px; border: 1px solid var(--chat-border); border-radius: 999px; background: var(--chat-thread-background); color: var(--chat-text); padding-inline: 14px; font: inherit; font-size: 14px; }
.chat-workspace .chat-thread-search-form button { position: static; inset: auto; display: grid; place-items: center; flex: none; min-width: 38px; height: 38px; border: 0; border-radius: 50%; background: transparent; color: var(--chat-text); font-size: 16px; cursor: pointer; }
.chat-workspace .chat-thread-search-form button:hover { background: var(--chat-active-background); }
.chat-workspace .chat-thread-search-result { margin: 6px 2px 0; font-size: 12.5px; color: var(--chat-text-secondary); }
.chat-workspace .chat-thread-search-back { display: inline-flex; align-items: center; min-height: 36px; margin-top: 2px; font-size: 13px; font-weight: 600; color: var(--chat-accent-text); }
.chat-workspace .chat-thread-search-form .chat-search-clear { display: grid; place-items: center; flex: none; min-width: 38px; min-height: 38px; border-radius: 50%; color: var(--chat-text); text-decoration: none; font-size: 16px; }
.chat-workspace .chat-thread-search-form .chat-search-clear:hover { background: var(--chat-active-background); }
/* Solo simulaciones: identidad y responsable comparten un enlace, sin controles
anidados. En estrecho el estado conserva el borde derecho y el subtÃtulo. */
.chat-workspace .chat-simulation-identity { gap: 8px; }
.chat-workspace .chat-simulation-owner { margin-inline-start: auto; max-width: 45%; height: auto; min-height: 28px; padding: 4px 8px; font-size: 12.5px; white-space: normal; overflow-wrap: anywhere; }
/* Overrides narrow/coarse DESPUÉS de las bases nuevas: a igual especificidad
gana el orden y el móvil conserva 44px. Mismo breakpoint y tokens aprobados,
sin rediseño. Solo controles touch nuevos (policy móvil 44px); el tag kind
de primera fila (11.5px, no touch) no se eleva. */
@container dedicated-chat (max-width: 859px) {
.chat-workspace .chat-simulation-identity { display: grid; grid-template-columns: 40px minmax(0, 1fr) 18px; gap: 4px 8px; }
.chat-workspace .chat-simulation-identity .chat-thread-avatar { grid-column: 1; grid-row: 1 / 3; }
.chat-workspace .chat-simulation-identity .chat-thread-identity { grid-column: 2; grid-row: 1; }
.chat-workspace .chat-simulation-identity .chat-identity-disclosure { grid-column: 3; grid-row: 1; }
.chat-workspace .chat-simulation-owner { grid-column: 2 / 4; grid-row: 2; justify-self: end; max-width: 100%; font-size: 11.5px; min-height: 20px; padding: 2px 6px; }
.chat-workspace .chat-bulk-menu > :is(summary,[data-chat-menu-trigger]) { min-height: 44px; min-width: 44px; }
.chat-workspace .chat-search-toggle { width: 44px; height: 44px; }
.chat-workspace .chat-thread-search-form input[type="search"] { min-height: 44px; font-size: 16px; }
.chat-workspace .chat-thread-search-form button { min-width: 44px; height: 44px; }
.chat-workspace .chat-thread-search-form .chat-search-clear { min-width: 44px; min-height: 44px; }
.chat-workspace .chat-thread-search-back { min-height: 44px; }
}
/* R2: exclusivamente /portal/chat. Los datasets son el contrato del helper
global existente; este stylesheet nunca introduce comportamiento del Dock. */
.chat-workspace .chat-r2-icon { width: 18px; height: 18px; flex: none; vertical-align: middle; }
.chat-workspace .chat-search-pane input { padding-inline: 44px 40px; }
.chat-workspace .chat-search-pane .chat-search-submit { left: 0; right: auto; inset-inline: 0 auto; display: grid; place-items: center; }
.chat-workspace .chat-filters-panel:not([open]) { display: none; }
.chat-workspace .chat-row-wrap > .chat-row { padding-right: 12px; }
.chat-workspace .chat-row-menu { top: auto; bottom: 6px; right: 8px; }
.chat-workspace .chat-row-menu > :is(summary,[data-chat-menu-trigger]) { width: 32px; height: 32px; background: var(--chat-list-background); border-radius: 50%; }
.chat-workspace .chat-row-menu .chat-r2-icon { width: 16px; height: 16px; }
.chat-workspace .chat-row-wrap:has(.chat-row.active) .chat-row-menu > :is(summary,[data-chat-menu-trigger]) { background: var(--chat-active-background); }
/* R5.1 (R5-4, C17 1.21): como WhatsApp, el número de no leídos va a la derecha, bajo la hora. La ⌄ no reserva lugar: al
pasar el mouse (o con el menú abierto o enfocado) aparece a la derecha del número y el número se corre su ancho; la hora no
se mueve. En táctil no hay ⌄ (.no-hover) y el número queda siempre a la derecha. */
.chat-workspace .chat-row-wrap .chat-row-bottom { padding-right: 0; }
:root:not(.no-hover) .chat-workspace .chat-row-wrap:has(.chat-row-menu:is(:focus-within, [open])) .chat-row-bottom { padding-right: 32px; }
@media (hover: hover) { :root:not(.no-hover) .chat-workspace .chat-row-wrap:has(.chat-row-menu):hover .chat-row-bottom { padding-right: 32px; } }
.chat-workspace .chat-row-bottom { position: relative; }
.chat-workspace .chat-row-bottom .chat-unread-dot { margin-inline-start: auto; }
.chat-workspace .chat-owner-pill .chat-r2-icon { width: 14px; height: 14px; }
.chat-workspace .chat-owner-avatar { display: inline-grid; place-items: center; flex: 0 0 14px; width: 14px; height: 14px; border-radius: 50%; background: oklch(.93 .035 var(--chat-avatar-hue,50)); color: oklch(.42 .08 var(--chat-avatar-hue,50)); font-size: 7px; font-weight: 700; text-transform: uppercase; line-height: 1; }
.chat-workspace :is(.chat-owner-header,.chat-simulation-owner) .chat-owner-avatar { flex-basis: 18px; width: 18px; height: 18px; font-size: 8px; }
.chat-workspace .chat-owner-header .chat-r2-icon { width: 14px; height: 14px; }
.chat-workspace .chat-thread-identity { min-width: 0; }
.chat-workspace .chat-thread-identity > small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-workspace .chat-contact-trigger { cursor: pointer; border-radius: 10px; }
.chat-workspace .chat-contact-trigger:hover { background: var(--chat-search-background); }
.chat-workspace .chat-menu-count { margin-inline-start: auto; color: var(--chat-text-secondary); font-size: 12.5px; font-weight: 400; }
.chat-workspace :is(.chat-list-menu-items,.chat-thread-menu-items) > :is(a,button) { display: flex; align-items: center; gap: 12px; }
.chat-workspace :is(.chat-list-menu-items,.chat-thread-menu-items) button:disabled { opacity: .5; cursor: not-allowed; }
.chat-workspace .chat-assignment-section { display: block; padding: 8px 10px 4px; text-transform: uppercase; color: var(--chat-text-tertiary); font-size: 11px; font-weight: 600; letter-spacing: .04em; }
.chat-workspace .chat-assignee-avatar { --chat-avatar-background: oklch(.93 .035 var(--chat-avatar-hue,50)); --chat-avatar-text: oklch(.42 .08 var(--chat-avatar-hue,50)); width: 26px; height: 26px; font-size: 10px; font-weight: 700; background: var(--chat-avatar-background); color: var(--chat-avatar-text); }
.chat-workspace .chat-assignee-avatar.agent, .chat-workspace .chat-ai-badge { background: var(--chat-ai-soft); color: var(--chat-ai-text); }
.chat-workspace .chat-ai-badge { border-radius: 4px; padding: 2px 4px; font-size: 10.5px; font-weight: 600; }
.chat-workspace .chat-assignee-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-workspace .chat-assign-menu-items :is(button,label) { gap: 8px; }
.chat-workspace .chat-assign-menu-items small { flex: none; white-space: nowrap; color: var(--chat-text-secondary); font-size: 11.5px; }
.chat-workspace .chat-assign-header .chat-assign-menu-items { top: 100%; bottom: auto; right: 0; }
.chat-workspace .chat-ownership-notice > .chat-r2-icon { width: 20px; height: 20px; color: var(--chat-text-secondary); }
.chat-workspace .chat-ownership-notice.agent > .chat-r2-icon { color: var(--chat-ai-text); }
.chat-workspace .chat-ownership-notice:is(.unassigned,.activation-failed) { background: var(--chat-unassigned-soft); border-color: var(--chat-unassigned-soft); color: var(--chat-unassigned-text); }
.chat-workspace .chat-ownership-notice:is(.unassigned,.activation-failed) > .chat-r2-icon { color: inherit; }
.chat-workspace .chat-inbox-selector > :is(summary,[data-chat-menu-trigger]) > span.chat-inbox-avatar:first-child { flex: 0 0 32px; width: 32px; height: 32px; overflow: visible; }
.chat-workspace .chat-inbox-selector > :is(summary,[data-chat-menu-trigger]) > .chat-inbox-summary-identity { flex: 1; min-width: 0; }
.chat-workspace .chat-inbox-summary-identity > small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
.chat-workspace .chat-inbox-option .chat-inbox-avatar { grid-row: 1 / 4; }
/* CH7 (propuesta): la bandeja actual lleva ✓ y su fila tiene el tinte de la opción elegida. */
.chat-workspace .chat-inbox-option[aria-current="true"] { background: var(--chat-active-background); }
/* Texto solo para el lector de pantalla (p. ej., qué significa el número de otras bandejas). */
.chat-workspace .chat-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.chat-workspace .chat-inbox-option .chat-inbox-counts { grid-column: 3; grid-row: 1 / 4; }
.chat-workspace .chat-inbox-phones { grid-column: 2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* R5.1 (R5-5, C17 1.21): «N sin asignar» en el ámbar de su etiqueta, como en la fila y en la etiqueta del chat; el rojo
(y el terracota, que se lee como rojo) quedan para los errores. La guarda check_chat_r5 lo comprueba. */
.chat-workspace .chat-inbox-unassigned { grid-column: 2; color: var(--chat-unassigned-text); font-size: 11.5px; }
.chat-workspace .chat-connection-notice { display: flex; align-items: center; gap: 6px; flex: none; min-height: 34px; margin: 8px 12px 0; padding: 4px 10px; border-radius: 10px; background: var(--chat-unassigned-soft); color: var(--chat-unassigned-text); font-size: 12.5px; font-weight: 600; }
.chat-workspace .chat-connection-notice .chat-r2-icon { width: 14px; height: 14px; }
/* Conversación de un cliente sumada por Agentes IA en Mis conversaciones: se supervisa, no es propia. */
.chat-workspace .chat-row-supervised { display: inline-flex; flex: none; margin-left: auto; color: var(--chat-text-tertiary); }
.chat-workspace .chat-row-supervised .chat-r2-icon { width: 14px; height: 14px; }
.chat-workspace .chat-row-supervised + time { margin-left: 0; }
/* Sin asignar: primera fila de la lista (tinte ocre del chat) que sube con ella al desplazar, como «Archivados» en
WhatsApp; ya no queda fija ni tapa chats (decisión del dueño, 26-10-2026). Abre la cola existente. */
.chat-workspace .chat-unassigned-entry { display: flex; align-items: center; gap: 8px; width: calc(100% - 16px); min-height: 44px; margin: 4px 8px; padding: 0 12px; border: 0; border-radius: 12px; background: var(--chat-unassigned-soft); color: var(--chat-unassigned-text); font: inherit; font-size: 14px; font-weight: 600; text-align: start; cursor: pointer; }
@media (hover: hover) { .chat-workspace .chat-unassigned-entry:hover { filter: brightness(.98); } }
.chat-workspace .chat-unassigned-entry:focus-visible { outline: 2px solid var(--chat-accent); outline-offset: 2px; }
.chat-workspace .chat-unassigned-entry-icon { display: inline-flex; width: 28px; justify-content: center; }
.chat-workspace .chat-unassigned-entry .chat-r2-icon { width: 16px; height: 16px; flex: none; }
.chat-workspace .chat-unassigned-entry-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-workspace .chat-unassigned-entry-count { flex: none; min-width: 20px; text-align: end; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.chat-workspace .chat-connection-mobile { display: none; }
.chat-workspace .feedback-toast { bottom: var(--chat-toast-bottom,100px); left: var(--chat-toast-left,50vw); transform: translateX(-50%); }
.chat-workspace .chat-scheduled-counter { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 4px 8px; border-radius: 999px; background: var(--chat-neutral-soft); color: var(--chat-text-secondary); white-space: nowrap; }
.chat-workspace .chat-scheduled-counter .chat-r2-icon { width: 14px; height: 14px; }
.chat-workspace .chat-schedule-composer { display: grid; place-items: center; width: 38px; min-width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--chat-text-secondary); font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.chat-workspace .chat-schedule-composer .chat-r2-icon { width: 19px; height: 19px; }
.chat-workspace .conversation-viewport { position: relative; }
.chat-workspace .chat-r2-schedule-panel { position: absolute; z-index: 25; left: 12px; right: 12px; bottom: 80px; max-height: calc(100% - 92px); overflow-y: auto; border-radius: 16px; padding: 16px; background: var(--chat-list-background); box-shadow: 0 12px 32px rgba(42,36,32,.14); color: var(--chat-text); }
.chat-workspace .chat-r2-schedule-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.chat-workspace .chat-r2-schedule-panel h2 { margin: 0; font-size: 16px; font-weight: 600; }
.chat-workspace .chat-r2-schedule-panel > header > a { display: grid; place-items: center; width: 36px; height: 36px; color: inherit; border-radius: 50%; }
.chat-workspace .chat-r2-schedule-panel textarea { --control-background: #F6F1EC; width: 100%; min-height: 90px; border: 0; border-radius: 12px; padding: 12px; background: var(--control-background); color: var(--chat-text); font: inherit; resize: vertical; }
:root[data-theme="dark"] .chat-workspace .chat-r2-schedule-panel textarea { --control-background: var(--chat-search-background); }
.chat-workspace .chat-r2-schedule-panel .field { margin: 10px 0; }
.chat-workspace .chat-r2-schedule-panel label, .chat-workspace .chat-r2-schedule-panel legend { font-size: 13px; }
.chat-workspace .chat-r2-schedule-panel fieldset { min-width: 0; border: 0; padding: 0; margin: 12px 0; }
.chat-workspace .chat-r2-schedule-panel :is(.feedback-field-error,.field-error,.chat-r2-field-error) { color: oklch(.5 .17 25); font-size: 12px; }
.chat-workspace .chat-r2-date-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chat-workspace .chat-r2-date-chips .chip { display: inline-flex; align-items: center; cursor: pointer; border: 1px solid var(--chat-chip-border); border-radius: 999px; padding: 7px 10px; min-height: 36px; background: var(--chat-list-background); color: var(--chat-text-secondary); }
.chat-workspace .chat-r2-date-chips .chip:has(input:checked) { background: var(--chat-accent-soft); border-color: var(--chat-accent-border); color: var(--chat-accent-text); }
.chat-workspace .chat-r2-date-chips input, .chat-workspace .chat-r2-day input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chat-workspace :is(.chip,.chat-r2-day):has(input:focus-visible) { outline: 2px solid var(--chat-accent); outline-offset: 2px; }
.chat-workspace .chat-r2-select { position: relative; }
.chat-workspace .chat-r2-select > :is(summary,[data-chat-menu-trigger]) { display: flex; align-items: center; justify-content: space-between; gap: 8px; list-style: none; cursor: pointer; min-height: 38px; padding: 8px 10px; border: 1px solid var(--chat-border); border-radius: 10px; font-size: 13px; }
.chat-workspace .chat-r2-select > :is(summary,[data-chat-menu-trigger])::-webkit-details-marker, .chat-workspace .chat-r2-calendar > :is(summary,[data-chat-menu-trigger])::-webkit-details-marker { display: none; }
.chat-workspace .chat-r2-select > div { display: grid; gap: 2px; max-height: 240px; overflow: auto; margin-top: 4px; padding: 6px; background: var(--chat-list-background); border: 1px solid var(--chat-border); border-radius: 10px; }
.chat-workspace .chat-r2-select label { display: flex; align-items: center; gap: 8px; padding: 8px; min-height: 36px; cursor: pointer; }
.chat-workspace .chat-r2-select input { accent-color: var(--chat-accent); }
.chat-workspace .chat-r2-schedule-panel footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.chat-workspace .chat-r2-zone { margin-right: auto; flex: 1 1 150px; min-width: 0; }
.chat-workspace .chat-r2-zone > :is(summary,[data-chat-menu-trigger]) { border: 0; color: var(--chat-text-secondary); padding-inline: 0; justify-content: flex-start; }
.chat-workspace .chat-r2-zone > div { max-width: 100%; }
.chat-workspace .chat-r2-calendar > :is(summary,[data-chat-menu-trigger]) { display: flex; align-items: center; gap: 8px; list-style: none; min-height: 38px; font-size: 13px; cursor: pointer; }
.chat-workspace .chat-r2-calendar-body { border: 1px solid var(--chat-border); border-radius: 12px; padding: 8px; max-width: 320px; }
.chat-workspace .chat-r2-calendar-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.chat-workspace .chat-r2-calendar-head button { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: inherit; }
.chat-workspace .chat-r2-calendar-head strong { font-size: 13px; font-weight: 600; text-transform: capitalize; }
.chat-workspace .chat-r2-calendar-grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 2px; }
.chat-workspace .chat-r2-weekday { font-size: 11px; color: var(--chat-text-tertiary); text-align: center; padding: 6px 0; }
.chat-workspace .chat-r2-day { display: grid; place-items: center; height: 36px; border-radius: 8px; cursor: pointer; }
.chat-workspace .chat-r2-day.outside { color: var(--chat-text-tertiary); }
.chat-workspace .chat-r2-day:has(input:checked) { background: var(--chat-accent); color: var(--chat-on-unread); }
.chat-workspace .chat-r2-time { display: flex; align-items: end; gap: 6px; }
.chat-workspace .chat-r2-time legend { margin-bottom: 6px; }
.chat-workspace .chat-r2-time label { display: grid; gap: 4px; }
.chat-workspace .chat-r2-time input { max-width: 72px; min-height: 36px; border-radius: 8px; border: 1px solid var(--chat-border); background: var(--chat-list-background); color: inherit; padding: 6px; }
.chat-workspace .chat-r2-recurrence-custom { display: none; gap: 8px; }
.chat-workspace .chat-r2-schedule-panel form:has(input[name="ScheduleForm.Repeat"][value="CUSTOM"]:checked) .chat-r2-recurrence-custom { display: grid; }
.chat-workspace .chat-r2-schedule-panel form:has(input[name="ScheduleForm.Repeat"][value="NONE"]:checked) .chat-r2-recurrence-end { display: none; }
.chat-workspace .chat-r2-recurrence-custom fieldset { display: flex; flex-wrap: wrap; gap: 8px; }
.chat-workspace .chat-r2-recurrence-custom label { display: inline-flex; align-items: center; gap: 6px; }
.chat-workspace .chat-r2-preview { border: 0; background: transparent; color: var(--chat-text-secondary); font: inherit; font-size: 12px; min-height: 36px; text-align: start; padding: 8px; }
:root[data-theme="dark"] .chat-workspace :is(.chat-row-avatar,.chat-thread-avatar,.chat-assignee-avatar):not(.agent) { background: oklch(.32 .035 var(--chat-avatar-hue,50)); color: oklch(.85 .05 var(--chat-avatar-hue,50)); }
@container dedicated-chat (max-width: 859px) {
.chat-workspace .chat-connection-mobile:not([hidden]) { display: flex; margin-top: 4px; }
.chat-workspace .chat-search-toggle { display: none; }
.chat-workspace .chat-owner-mobile:not([hidden]) { align-items: center; gap: 4px; }
.chat-workspace .chat-owner-mobile .chat-r2-icon { width: 14px; height: 14px; }
.chat-workspace .chat-inbox-selector > :is(summary,[data-chat-menu-trigger]) { flex-wrap: wrap; }
.chat-workspace .chat-r2-schedule-panel { left: 12px; right: 12px; padding: 12px; bottom: 80px; max-height: calc(100% - 88px); }
.chat-workspace .chat-r2-schedule-panel textarea { font-size: 16px; }
.chat-workspace .chat-r2-schedule-panel footer .button, .chat-workspace .chat-r2-select label, .chat-workspace .chat-r2-date-chips .chip { min-height: 44px; }
.chat-workspace .chat-r2-calendar-head button, .chat-workspace .chat-schedule-composer { min-width: 44px; min-height: 44px; }
.chat-workspace .chat-r2-zone { flex-basis: 100%; }
.chat-workspace .chat-r2-day { min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) { .chat-workspace .chat-row { animation: none; transition: none; } }
.chat-workspace .chat-r2-sender-icon { width: 12px; height: 12px; }
.chat-workspace .chat-row-delivery { display: inline-flex; vertical-align: middle; margin-right: 4px; color: var(--chat-text-secondary); }
.chat-workspace .chat-row-delivery .chat-r2-icon { width: 14px; height: 14px; }
.chat-workspace .chat-row-delivery.read { color: var(--chat-accent); }
.chat-workspace .msg .chat-sender-ai { color: var(--chat-ai-text); }
.chat-workspace .chat-r2-custom-date { display: none; margin-top: 8px; }
.chat-workspace .chat-r2-when:has([data-chat-date-custom]:checked) .chat-r2-custom-date { display: block; }
.chat-workspace .chat-detail { position: relative; }
.chat-workspace .chat-r2-snoozed { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; align-self: start; margin: 8px 12px; padding: 4px 10px; border-radius: 10px; background: var(--chat-unassigned-soft); color: var(--chat-unassigned-text); font-size: 12.5px; }
.chat-workspace .chat-r2-snoozed button { border: 0; background: transparent; color: inherit; min-height: 36px; padding: 4px 8px; font: inherit; text-decoration: underline; cursor: pointer; }
.chat-workspace .chat-r2-snoozed .chat-r2-icon { width: 14px; height: 14px; }
.chat-workspace .chat-bulk-submenu > :is(summary,[data-chat-menu-trigger]) { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 8px 10px; border-radius: 10px; list-style: none; cursor: pointer; font-size: 14px; }
.chat-workspace .chat-bulk-submenu > :is(summary,[data-chat-menu-trigger])::-webkit-details-marker { display: none; }
.chat-workspace .chat-bulk-submenu > :is(summary,[data-chat-menu-trigger]) .chat-r2-icon:last-child { margin-left: auto; }
.chat-workspace .chat-bulk-submenu > div { padding-left: 29px; }
.chat-workspace .chat-bulk-submenu[open] > :is(summary,[data-chat-menu-trigger]) .chat-r2-icon:last-child { transform: rotate(90deg); }
.chat-workspace .chat-bulk-menu-items > button > .chat-r2-icon:last-child:not(:first-child) { margin-inline-start: auto; }
.chat-workspace .chat-bulk-menu-items .chat-r2-icon { width: 17px; height: 17px; }
.chat-workspace .chat-bulk-assign-picker > button { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; border: 0; border-radius: 10px; padding: 8px; background: transparent; color: var(--chat-text); font: inherit; text-align: left; cursor: pointer; }
.chat-workspace .chat-bulk-assign-picker > button:hover { background: var(--chat-active-background); }
.chat-workspace .chat-bulk-assign-picker > button small { flex: none; font-size: 11.5px; color: var(--chat-text-secondary); white-space: nowrap; }
.chat-workspace .feedback-toast:has(.chat-toast-undo) { pointer-events: auto; display: flex; align-items: center; gap: 8px; }
.chat-workspace .chat-toast-undo { display: flex; gap: 4px; }
.chat-workspace .chat-toast-undo button { color: inherit; font-size: 12.5px; min-height: 36px; padding: 4px 8px; }
@container dedicated-chat (max-width: 859px) {
.chat-workspace .chat-r2-snoozed button, .chat-workspace .chat-bulk-submenu > :is(summary,[data-chat-menu-trigger]), .chat-workspace .chat-bulk-submenu button, .chat-workspace .chat-bulk-assign-picker > button { min-height: 44px; }
}
/* R3: override the more specific shared outgoing rule, never the Dock. */
.chat-workspace .msg:is(.out,.in,.ai) { border: 0; box-shadow: 0 1px 1px rgba(42,36,32,.07); }
.chat-workspace .msg :is(.chat-sender-ai-deleted,.chat-sender-ai[data-chat-ai-deleted="true"]) { color: #80756D; }
.chat-workspace :is(.chat-row,.chat-thread-identity) .chat-simulation-tag { display: inline-flex; align-items: center; height: 18px; padding: 0 4px; border: 0; border-radius: 4px; background: #F0E8E1; color: #6B615A; font-size: 10.5px; font-weight: 500; vertical-align: middle; }
.chat-workspace .chat-thread-identity strong .chat-simulation-tag { margin-inline-start: 8px; }
:root[data-theme="dark"] .chat-workspace .chat-simulation-tag { background: var(--chat-neutral-soft); color: var(--chat-text-secondary); }
:root[data-theme="dark"] .chat-workspace .chat-owner-avatar { background: oklch(.32 .035 var(--chat-avatar-hue,50)); color: oklch(.85 .05 var(--chat-avatar-hue,50)); }
.chat-workspace .human-composer form:has(.chat-schedule-composer) { grid-template-columns: minmax(0,1fr) auto auto; align-items: end; }
.chat-workspace .human-composer .chat-schedule-composer { grid-column: 2; grid-row: 1; }
.chat-workspace .human-composer form:has(.chat-schedule-composer) .chat-send-button { grid-column: 3; }
.chat-workspace .human-composer form:has(.composer-quote) .chat-schedule-composer { grid-row: 2; }
.chat-workspace .human-composer textarea { max-height: calc(5 * 22px + 18px); }
.chat-workspace .conversation-viewport:has([data-chat-schedule-panel]) .human-composer { visibility: hidden; pointer-events: none; }
/* Disabled must remain visibly unavailable, including on hover and offline. R5.1 final (K.4, como color-controls.css): la ×
de una etiqueta (C15) define su propio desactivado en su pieza y queda fuera; :where no cambia el peso de la regla. */
.chat-workspace :is(button,input,textarea,select,a,:is(summary,[data-chat-menu-trigger])):is(:disabled,[aria-disabled="true"]):not(:where(.c1-tag-remove)),
.chat-workspace :is(button,input,textarea,select,a,:is(summary,[data-chat-menu-trigger])):is(:disabled,[aria-disabled="true"]):not(:where(.c1-tag-remove)):hover { background: #D9CFC6; color: #fff; border-color: #D9CFC6; box-shadow: none; opacity: 1; cursor: not-allowed; }
.chat-workspace .human-composer .chat-send-button:is(:disabled,[aria-disabled="true"]),
.chat-workspace .human-composer .chat-send-button:is(:disabled,[aria-disabled="true"]):hover { background: #D9CFC6; color: #fff; border-color: #D9CFC6; box-shadow: none; opacity: 1; cursor: not-allowed; }
:root[data-theme="dark"] .chat-workspace :is(button,input,textarea,select,a,:is(summary,[data-chat-menu-trigger])):is(:disabled,[aria-disabled="true"]):not(:where(.c1-tag-remove)),
:root[data-theme="dark"] .chat-workspace :is(button,input,textarea,select,a,:is(summary,[data-chat-menu-trigger])):is(:disabled,[aria-disabled="true"]):not(:where(.c1-tag-remove)):hover,
:root[data-theme="dark"] .chat-workspace .human-composer .chat-send-button:is(:disabled,[aria-disabled="true"]),
:root[data-theme="dark"] .chat-workspace .human-composer .chat-send-button:is(:disabled,[aria-disabled="true"]):hover { background: oklch(.35 .01 60); color: oklch(.7 .01 60); border-color: oklch(.35 .01 60); }
/* ===== Ronda 4: Ãtems B y C. Solo el chat completo (.chat-workspace), nunca el Dock. ===== */
/* B3: avisos con dos botones en móvil: una sola fila, mismo ancho (50 % menos medio gap), nunca apilados. */
@container dedicated-chat (max-width: 859px) {
.chat-workspace .chat-ownership-actions.has-several { flex-wrap: nowrap; }
.chat-workspace .chat-ownership-actions.has-several > * { flex: 0 0 calc(50% - 4px); min-width: 0; }
.chat-workspace .chat-ownership-actions.has-several > .chat-assign-menu > :is(summary,[data-chat-menu-trigger]),
.chat-workspace .chat-ownership-actions.has-several > .button { width: 100%; justify-content: center; padding-inline: 12px; font-size: 14px; white-space: nowrap; }
}
/* B4: burbuja como WhatsApp: texto 14/1.42, padding 6 10 7, chevron dentro arriba a la derecha sobre un
degradado del color de la burbuja, hora 11 px abajo a la derecha alineada con la última lÃnea. */
.chat-workspace .msg { padding: 6px 10px 7px; max-width: min(560px, 78%); color: var(--chat-text); font-size: 14px; line-height: 1.42; }
.chat-workspace .msg.out { --msg-bg: var(--chat-own-background); }
.chat-workspace .msg.in { --msg-bg: var(--chat-list-background); }
.chat-workspace .chat > .msg.msg-run { margin-top: -6px; }
.chat-workspace .msg-menu { top: 0; right: 0; }
.chat-workspace .msg-menu > :is(summary,[data-chat-menu-trigger]) { position: relative; display: block; width: 40px; height: 24px; min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 0 10px 0 0; background: linear-gradient(to right, transparent, var(--msg-bg) 45%); box-shadow: none; color: var(--chat-text-tertiary); }
.chat-workspace .msg-menu > :is(summary,[data-chat-menu-trigger]) .chat-r2-icon { position: absolute; top: 3px; right: 4px; width: 18px; height: 18px; }
.chat-workspace .msg-menu > :is(summary,[data-chat-menu-trigger]):hover { outline: 0; color: var(--chat-text-secondary); }
.chat-workspace .msg-menu > :is(summary,[data-chat-menu-trigger]):focus-visible { outline: 2px solid var(--chat-accent); outline-offset: -2px; }
.no-hover .chat-workspace .msg-menu > :is(summary,[data-chat-menu-trigger]) { display: none; }
.no-hover .chat-workspace .msg { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.chat-workspace .msg-menu-items { right: 4px; top: calc(100% + 2px); min-width: 200px; padding: 6px; gap: 2px; border: 1px solid var(--chat-border); border-radius: var(--chat-menu-radius); background: var(--chat-list-background); box-shadow: var(--chat-menu-shadow); }
.chat-workspace .msg-menu.menu-up .msg-menu-items { top: auto; bottom: calc(100% + 2px); }
.chat-workspace .msg-menu-items > :is(a, button), .chat-workspace .msg-info > :is(summary,[data-chat-menu-trigger]) { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 8px 10px; border-radius: 10px; color: var(--chat-text); font-size: 14px; list-style: none; }
.chat-workspace .msg-info > :is(summary,[data-chat-menu-trigger])::-webkit-details-marker { display: none; }
.chat-workspace .msg-menu-items > :is(a, button):hover, .chat-workspace .msg-info > :is(summary,[data-chat-menu-trigger]):hover { background: var(--chat-active-background); outline: 0; }
.chat-workspace .msg-info > div { padding: 2px 10px 8px 40px; color: var(--chat-text-secondary); }
.chat-workspace .msg-menu-items .chat-menu-divider { margin: 4px 10px; }
/* La hora y los vistos quedan por encima del degradado del chevron y abajo a la derecha, 5 px por debajo del texto
(como WhatsApp): en burbujas de una lÃnea el chevron queda arriba con aire y nunca los tapa. */
.chat-workspace .msg-meta { z-index: 3; bottom: -5px; gap: 3px; color: var(--chat-text-tertiary); font-family: var(--font); font-size: 11px; font-weight: 400; font-style: normal; line-height: 1.42; }
.chat-workspace .msg-delivery-check { display: inline-flex; align-self: center; }
.chat-workspace .msg-delivery-check .chat-r2-icon { width: 15px; height: 15px; }
/* Espaciador invisible al final del texto: mismo contenido de la hora (y vistos 3 + 15 px) más 8 px de aire. */
.chat-workspace .chat .msg-body [data-msg-text] .msg-last::after {
content: var(--msg-meta-content);
display: inline-block;
width: auto;
height: auto;
padding-inline: 8px 0;
font-family: var(--font);
font-size: 11px;
font-weight: 400;
font-style: normal;
font-variant-numeric: tabular-nums;
line-height: 1;
white-space: nowrap;
visibility: hidden;
}
.chat-workspace .chat .msg-body.has-delivery-check [data-msg-text] .msg-last::after { padding-inline-end: 18px; }
@container dedicated-chat (max-width: 859px) {
.chat-workspace .msg { max-width: 85%; }
}
/* B5: toda cita muestra el autor, también en los chats internos de a dos. */
.chat-workspace .chat-detail.kind-direct .msg-quote > .who { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }
/* B6: × para limpiar dentro del buscador (Ãcono 16 px, área 32 px); sin la × nativa del navegador. */
.chat-workspace .chat-search-pane input::-webkit-search-cancel-button,
.chat-workspace .chat-search-pane input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.chat-workspace .chat-search-x { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); display: grid; place-items: center; width: 32px; height: 32px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--chat-text-tertiary); cursor: pointer; }
.chat-workspace .chat-search-x .chat-r2-icon { width: 16px; height: 16px; }
.chat-workspace .chat-search-x:hover { background: var(--chat-active-background); }
/* B7: hora con un solo rótulo y dos campos separados por ":"; dÃas pasados en gris sin clic; hoy marcado. */
.chat-workspace .chat-r2-time { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; padding: 0; border: 0; }
.chat-workspace .chat-r2-time legend { margin: 0 0 6px; padding: 0; color: var(--chat-text); font-size: 13px; font-weight: 600; }
.chat-workspace .chat-r2-time input { --control-background: #F6F1EC; box-sizing: border-box; width: 56px; max-width: 56px; height: 40px; min-height: 40px; padding: 0 8px; border: 0; border-radius: 10px; background: var(--control-background); color: var(--chat-text); font: inherit; font-size: 15px; font-variant-numeric: tabular-nums; text-align: center; }
.chat-workspace .chat-r2-time input:focus, .chat-workspace .chat-r2-time input:focus-visible { outline: 0; box-shadow: 0 0 0 2px var(--chat-accent); }
.chat-workspace .chat-r2-time > span { color: var(--chat-text-secondary); font-weight: 600; }
:root[data-theme="dark"] .chat-workspace .chat-r2-time input { --control-background: var(--surface-muted); }
.chat-workspace .chat-r2-day.past { color: #B9AEA5; cursor: default; pointer-events: none; }
.chat-workspace .chat-r2-day.past:hover { background: transparent; }
:root[data-theme="dark"] .chat-workspace .chat-r2-day.past { color: color-mix(in srgb, var(--text-muted) 55%, transparent); }
.chat-workspace .chat-r2-day.today:not(:has(input:checked)) { box-shadow: inset 0 0 0 1.5px var(--chat-accent); }
/* B7/C3: el panel se ancla abajo, en el lugar del cuadro de texto, y hace scroll interno si no entra. */
.chat-workspace .chat-r2-schedule-panel { bottom: 14px; max-height: calc(100% - 24px); overflow-y: auto; overscroll-behavior: contain; }
@container dedicated-chat (max-width: 859px) {
.chat-workspace .chat-r2-schedule-panel { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); max-height: calc(100% - 24px); }
}
/* C3: Cuándo, Mensaje y Repetir con el mismo peso, tamaño y sangrÃa. */
.chat-workspace .chat-r2-schedule-panel :is(.field > label, .chat-r2-when > legend) { display: block; margin: 0 0 6px; padding: 0; color: var(--chat-text); font-size: 13px; font-weight: 600; }
/* B8: en todos los menús del chat, Ãcono en caja fija de 18 × 18 px y 12 px hasta el texto. */
.chat-workspace :is(.chat-thread-menu-items, .chat-list-menu-items, .chat-bulk-menu-items, .msg-menu-items) :is(a, button, :is(summary,[data-chat-menu-trigger])) { gap: 12px; }
.chat-workspace :is(.chat-thread-menu-items, .chat-list-menu-items, .chat-bulk-menu-items, .msg-menu-items) :is(a, button, :is(summary,[data-chat-menu-trigger])) > svg:first-child { flex: 0 0 18px; width: 18px; height: 18px; }
/* B9: panel de detalle fijo como cuarta columna o superpuesto en escritorio (móvil sin cambios). */
.chat-workspace .chat-detail-pane { position: relative; }
.chat-workspace .chat-detail-pane.context-inline > .chat-context-surface { width: 320px; background: var(--chat-list-background); border-left: 1px solid var(--chat-border); }
.chat-workspace .chat-detail-pane.context-overlay > .chat-detail { display: flex; }
.chat-workspace .chat-detail-pane.context-overlay > .chat-context-surface { position: absolute; z-index: 30; top: 0; right: 0; bottom: 0; width: 320px; height: auto; background: var(--chat-list-background); border-left: 1px solid var(--chat-border); box-shadow: 0 12px 32px rgba(42,36,32,.14); }
.chat-workspace .context-overlay .chat-context-head { display: flex; justify-content: space-between; gap: var(--space-2); }
.chat-workspace .context-overlay .chat-context-head h2 { order: -1; }
.chat-workspace .context-overlay .chat-context-return { width: 44px; padding: 0; justify-content: center; }
.chat-workspace .context-overlay .chat-context-close-icon { display: block; }
.chat-workspace .context-overlay :is(.chat-context-back-icon, .chat-context-back-text) { display: none; }
/* Con el panel fijo abierto por defecto, el nombre del encabezado no queda resaltado de forma permanente. */
.chat-workspace .chat-detail-pane.context-inline .chat-contact-trigger[aria-expanded="true"]:not(:hover) { background: transparent; }
/* C1: 4 px entre el Ãcono y el nombre en la firma de la IA (también "Empleado IA eliminado"). */
.chat-workspace .msg .who.chat-sender-ai:not([hidden]) { display: inline-flex; align-items: center; gap: 4px; }
/* C2: 6 px entre notas del historial seguidas y 12 px entre una nota y una burbuja (fechas sin cambio). */
.chat-workspace .chat > .chat-workspace-system-note[data-timeline] { margin-block: 0; }
.chat-workspace .chat > .chat-workspace-system-note[data-timeline] + .chat-workspace-system-note[data-timeline] { margin-top: -2px; }
.chat-workspace .chat > .msg + .chat-workspace-system-note[data-timeline],
.chat-workspace .chat > .chat-workspace-system-note[data-timeline] + .msg { margin-top: 4px; }
.chat-workspace .chat > .msg-date + .chat-workspace-system-note[data-timeline] { margin-top: 8px; }
.chat-workspace .chat > .chat-workspace-system-note[data-timeline] + .msg-date { margin-top: 16px; }
/* C4: Ir al final como WhatsApp: botón redondo de 40 px, 12 px sobre el cuadro de texto o el aviso. */
.chat-workspace .chat-to-end { position: relative; align-self: flex-end; display: grid; place-items: center; width: 40px; height: 40px; min-height: 40px; margin: -52px 16px 12px auto; padding: 0; border: 0; border-radius: 50%; background: var(--chat-list-background); color: var(--chat-text-secondary); box-shadow: 0 2px 6px rgba(42,36,32,.16); z-index: 4; }
.chat-workspace .chat-to-end .chat-r2-icon { width: 20px; height: 20px; }
.chat-workspace .chat-to-end-count { position: absolute; top: -6px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--chat-accent); color: var(--chat-on-unread); font-size: 11px; font-weight: 600; line-height: 20px; text-align: center; }
/* La sección del cuadro de texto tiene 8 px de padding arriba: el botón queda a 12 px del campo visible. */
.chat-workspace .chat-to-end:has(~ .human-composer):not(:has(~ .chat-ownership-notice)) { margin-bottom: 4px; }
/* El ⌄ de la fila mide sus 32 px reales: con el mÃnimo de 40 px de la base tapaba la hora ("Ayer") en táctil y al pasar el mouse. */
.chat-workspace .chat-row-menu > :is(summary,[data-chat-menu-trigger]) { min-width: 32px; min-height: 32px; }
/* C5: en móvil el aviso de conexión va en el flujo, bajo el encabezado, y empuja el hilo. */
@container dedicated-chat (max-width: 859px) {
.chat-workspace .chat-detail > .chat-connection-mobile:not([hidden]) { position: static; display: flex; flex: none; margin: 8px 12px 0; }
}
/* C6: en móvil, quién atiende va en la segunda lÃnea, sin fondo, en lugar del subtÃtulo. */
@container dedicated-chat (max-width: 859px) {
.chat-workspace .chat-simulation-owner { display: none; }
.chat-workspace .chat-thread-identity .chat-owner-mobile { display: flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; padding: 0; background: none; color: var(--chat-text-secondary); font-size: 12.5px; line-height: 1.3; }
.chat-workspace .chat-owner-mobile.agent { color: var(--chat-ai-text); }
.chat-workspace .chat-owner-mobile.unassigned { color: var(--chat-unassigned-text); }
.chat-workspace .chat-owner-mobile .chat-owner-symbol { display: inline-flex; flex: none; }
.chat-workspace .chat-owner-mobile .chat-r2-icon { width: 14px; height: 14px; }
.chat-workspace .chat-owner-mobile .chat-owner-avatar { flex: 0 0 16px; width: 16px; height: 16px; font-size: 7.5px; }
.chat-workspace .chat-owner-mobile .chat-owner-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* ===== Ronda 5: Ãtems E1–E15. Solo el chat completo (.chat-workspace), nunca el Dock. ===== */
/* E1: Ãtem desactivado en los menús del chat: texto e Ãcono gris claro, sin fondo ni efecto al pasar, cursor normal. */
.chat-workspace :is(.chat-list-menu-items, .chat-thread-menu-items, .chat-bulk-menu-items, .chat-row-menu-items, .msg-menu-items, .chat-bulk-assign-picker) :is(button, a):is(:disabled, [aria-disabled="true"]),
.chat-workspace :is(.chat-list-menu-items, .chat-thread-menu-items, .chat-bulk-menu-items, .chat-row-menu-items, .msg-menu-items, .chat-bulk-assign-picker) :is(button, a):is(:disabled, [aria-disabled="true"]):hover { background: none; border-color: transparent; box-shadow: none; color: #B9AEA5; opacity: 1; cursor: default; outline: none; }
.chat-workspace :is(.chat-list-menu-items, .chat-thread-menu-items, .chat-bulk-menu-items, .chat-row-menu-items, .msg-menu-items, .chat-bulk-assign-picker) :is(button, a):is(:disabled, [aria-disabled="true"]) .chat-r2-icon { color: inherit; }
:root[data-theme="dark"] .chat-workspace :is(.chat-list-menu-items, .chat-thread-menu-items, .chat-bulk-menu-items, .chat-row-menu-items, .msg-menu-items, .chat-bulk-assign-picker) :is(button, a):is(:disabled, [aria-disabled="true"]),
:root[data-theme="dark"] .chat-workspace :is(.chat-list-menu-items, .chat-thread-menu-items, .chat-bulk-menu-items, .chat-row-menu-items, .msg-menu-items, .chat-bulk-assign-picker) :is(button, a):is(:disabled, [aria-disabled="true"]):hover { background: none; color: color-mix(in srgb, var(--text-muted) 55%, transparent); }
/* E2: fila pospuesta: etiqueta ocre "Vuelve …" con el estilo de "Sin asignar", en una lÃnea, antes de la vista previa. */
.chat-workspace .chat-snooze-pill { min-width: 0; max-width: 75%; flex-shrink: 0; background: var(--chat-unassigned-soft); color: var(--chat-unassigned-text); font-weight: 600; }
.chat-workspace .chat-snooze-pill .chat-r2-icon { flex: none; width: 12px; height: 12px; }
.chat-workspace .chat-snooze-pill > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* E4: encabezado del panel del contacto como WhatsApp (avatar de 72 px, nombre y teléfono) y avisos neutros. */
.chat-workspace .chat-contact-profile { display: grid; justify-items: center; gap: 4px; padding: 4px 0 8px; text-align: center; }
.chat-workspace .chat-contact-avatar { --chat-avatar-background: oklch(0.93 0.035 var(--chat-avatar-hue, 50)); --chat-avatar-text: oklch(0.42 0.08 var(--chat-avatar-hue, 50)); display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: 6px; border-radius: 50%; background: var(--chat-avatar-background); color: var(--chat-avatar-text); font-size: 26px; font-weight: 600; }
/* CH1: el ícono de persona del avatar grande mide 32 px; el logo del canal conserva su tamaño de C20 (19 px). */
.chat-workspace .chat-contact-avatar > .chat-avatar-content .chat-r2-icon { width: 32px; height: 32px; }
:root[data-theme="dark"] .chat-workspace .chat-contact-avatar { background: oklch(.32 .035 var(--chat-avatar-hue,50)); color: oklch(.85 .05 var(--chat-avatar-hue,50)); }
.chat-workspace .chat-contact-name { color: var(--chat-text); font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
.chat-workspace .chat-contact-subtitle { color: #6B615A; font-size: 13px; }
:root[data-theme="dark"] .chat-workspace .chat-contact-subtitle { color: var(--chat-text-secondary); }
.chat-workspace .chat-contact-profile .badge { margin: 6px 0 0; }
.chat-workspace .chat-context-notice { margin: 8px 0; padding: 10px 12px; border: 0; border-radius: 10px; background: #F6F1EC; color: #6B615A; font-size: 13px; line-height: 1.45; }
/* El tÃtulo del aviso sin permiso va en su propia lÃnea, como en la ronda 4. */
.chat-workspace .chat-context-notice strong { display: block; margin-bottom: 2px; color: inherit; font-weight: 600; }
:root[data-theme="dark"] .chat-workspace .chat-context-notice { background: var(--chat-search-background); color: var(--chat-text-secondary); }
/* E5: en táctil las filas no muestran el ⌄: el menú se abre manteniendo presionada la fila (500 ms), sin seleccionar texto. */
.no-hover .chat-workspace .chat-row-menu > :is(summary,[data-chat-menu-trigger]) { display: none; }
.no-hover .chat-workspace .chat-row-wrap { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* E6: Programar con tÃtulo y pie fijos; solo el contenido entre ambos se desplaza. Alto máximo: el área de la
conversación menos 28 px. El campo Mensaje no se estira a mano: crece solo de 3 a 8 lÃneas. */
.chat-workspace .chat-r2-schedule-panel[data-chat-schedule-panel]:not([data-chat-snooze-panel]) { display: flex; flex-direction: column; max-height: calc(100% - 28px); overflow: hidden; }
.chat-workspace .chat-r2-schedule-panel[data-chat-schedule-panel]:not([data-chat-snooze-panel]) > header { flex: none; }
.chat-workspace .chat-r2-schedule-form { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
.chat-workspace .chat-r2-schedule-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.chat-workspace .chat-r2-schedule-form > footer { flex: none; margin-top: 12px; }
.chat-workspace .chat-r2-schedule-panel #chat-r2-schedule-content { resize: none; field-sizing: content; min-height: calc(3lh + 24px); max-height: calc(8lh + 24px); overflow-y: auto; }
/* E7: indicador circular de 16 px arriba del historial mientras cargan los mensajes anteriores. */
.chat-workspace .chat-history-loading { display: flex; justify-content: center; padding: 8px 0 4px; }
.chat-workspace .chat-history-loading[hidden] { display: none; }
.chat-workspace .chat-spinner { width: 16px; height: 16px; border: 2px solid var(--chat-border); border-top-color: var(--chat-accent); border-radius: 50%; animation: chat-r5-spin .8s linear infinite; }
@keyframes chat-r5-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .chat-workspace .chat-spinner { animation-duration: 2.4s; } }
/* E10: "Mostrar" en la misma lÃnea, a la derecha; si no entra, el texto hace elipsis y "Mostrar" sigue visible. */
.chat-workspace .chat-hidden-ai:not([hidden]) { display: flex; align-items: center; gap: 8px; }
.chat-workspace .chat-hidden-ai > span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-workspace .chat-hidden-ai > a { flex: none; margin-left: auto; }
/* E11: en móvil el chip de programados lleva solo el Ãcono y el número (su nombre accesible es "2 programados"). */
.chat-workspace .chat-scheduled-number { display: none; }
@container dedicated-chat (max-width: 859px) {
.chat-workspace .chat-scheduled-counter .chat-scheduled-text { display: none; }
.chat-workspace .chat-scheduled-counter .chat-scheduled-number { display: inline; }
}
/* E6: los radios ocultos del calendario y de los chips no se pintan aunque estén desactivados (dÃas pasados):
la regla general de controles desactivados les daba fondo y opacidad 1 y quedaba un punto bajo cada dÃa. */
.chat-workspace :is(.chat-r2-day, .chat-r2-date-chips) input:disabled { opacity: 0; background: none; border: 0; box-shadow: none; }
/* E5: el menú de la fila toma el ancho de su opción más larga (hasta su máximo) en vez de partirla en dos lÃneas. */
.chat-workspace .chat-row-menu-items { width: max-content; }
/* Ronda 6: identidad, participantes, menú contextual y filtros homogéneos. */
.chat-workspace .chat-participants-title { font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--chat-text-tertiary); margin:16px 0 6px; }
.chat-workspace .chat-participant { display:flex; align-items:center; gap:12px; min-height:56px; }
.chat-workspace .chat-participant .chat-thread-avatar { flex:0 0 40px; width:40px; height:40px; }
.chat-workspace .chat-participant-text { min-width:0; flex:1; }
.chat-workspace .chat-participant-text strong { display:block; font-size:14.5px; font-weight:600; }
.chat-workspace .chat-participant-text strong span { font-weight:400; color:var(--chat-text-tertiary); }
.chat-workspace .chat-participant-text small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12.5px; color:var(--chat-text-secondary); }
.chat-workspace .chat-instructions-summary { display:flex; align-items:center; gap:6px; list-style:none; }
.chat-workspace .chat-instructions-summary::-webkit-details-marker { display:none; }
.chat-workspace .chat-instructions-summary svg { width:16px; height:16px; }
.chat-workspace details:not([open])>.chat-instructions-summary svg { transform:rotate(-90deg); }
.chat-workspace .msg.message-menu-open { box-shadow:inset 0 0 0 100vmax rgba(42,36,32,.08); }
:root[data-theme="dark"] .chat-workspace .msg.message-menu-open { box-shadow:inset 0 0 0 100vmax rgba(255,255,255,.08); }
.chat-workspace .chat-quick-filters :is(.chat-unread-filter,.chat-ai-filter,.chat-supervise-filter) { height:32px; min-height:32px; border-radius:999px; border:1px solid #DFD5CC; padding:0 12px 0 10px; display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; background:#FFF; color:#6B615A; }
.chat-workspace .chat-quick-filters svg { width:15px; height:15px; }
.chat-workspace .chat-quick-filters :is(.chat-unread-filter,.chat-supervise-filter).active { background:oklch(.955 .025 50); border-color:oklch(.85 .06 45); color:oklch(.45 .12 40); }
.chat-workspace .chat-quick-filters .chat-ai-filter.active { background:oklch(.955 .022 300); border-color:oklch(.86 .05 300); color:oklch(.45 .13 300); }
:root[data-theme="dark"] .chat-workspace .chat-quick-filters :is(.chat-unread-filter,.chat-ai-filter,.chat-supervise-filter) { background:transparent; border-color:var(--chat-border); color:var(--chat-text-secondary); }
:root[data-theme="dark"] .chat-workspace .chat-quick-filters :is(.chat-unread-filter,.chat-supervise-filter).active { background:oklch(.3 .05 45); border-color:oklch(.45 .08 45); color:oklch(.86 .08 55); }
:root[data-theme="dark"] .chat-workspace .chat-quick-filters .chat-ai-filter.active { background:oklch(.3 .06 300); border-color:oklch(.45 .09 300); color:oklch(.86 .08 300); }
.chat-starting .chat-list-pane::before { content:""; position:absolute; left:0; right:0; top:0; height:2px; background:oklch(.93 .03 50); z-index:20; }
.chat-starting .chat-list-pane::after { content:""; position:absolute; left:0; top:0; width:35%; height:2px; background:oklch(.55 .14 40); z-index:21; animation:chat-start-progress 1.2s ease-in-out infinite alternate; }
@keyframes chat-start-progress { to { left:65%; } }
@media(prefers-reduced-motion:reduce) { .chat-starting .chat-list-pane::after { animation:none; width:100%; } }
@container dedicated-chat (max-width:767px) { .chat-workspace .chat-quick-filters :is(.chat-unread-filter,.chat-ai-filter,.chat-supervise-filter) { height:44px; min-height:44px; } .chat-workspace .chat-quick-filters .chat-supervise-filter { width:44px; padding:0; } }
.chat-workspace .chat-match { background:none; color:oklch(.45 .12 40); font-weight:700; }
:root[data-theme="dark"] .chat-workspace .chat-match { color:oklch(.86 .08 55); }
/* R6 búsqueda contextual: cuarta columna o encabezado compacto. */
.chat-workspace .chat-search-results { display:flex; flex-direction:column; min-height:0; }
.chat-workspace .chat-search-results .chat-context-header { display:flex; justify-content:space-between; align-items:center; padding:16px; border-bottom:1px solid var(--chat-border); }
.chat-workspace .chat-thread-search-form { display:flex; align-items:center; border-radius:999px; background:var(--chat-search-background,#F3EEE9); padding:0 10px; gap:6px; min-width:0; }
.chat-workspace .chat-search-results .chat-thread-search-form { margin:12px; }
.chat-workspace .chat-thread-search-form input { flex:1; width:0; border:0; background:transparent; min-width:0; box-shadow:none; }
.chat-workspace .chat-thread-search-form svg { width:16px; height:16px; flex-shrink:0; }
.chat-workspace .chat-search-count { margin:0 16px 8px; font-size:12.5px; color:var(--chat-text-tertiary); }
.chat-workspace .chat-search-result-list { overflow-y:auto; padding:0 8px; }
.chat-workspace .chat-search-result { display:block; width:100%; text-align:left; padding:10px; border:0; border-radius:10px; background:transparent; }
.chat-workspace .chat-search-result:hover,.chat-workspace .chat-search-result.active { background:var(--chat-active-background,oklch(.955 .025 50)); }
.chat-workspace .chat-search-result small { display:block; font-size:12px; color:var(--chat-text-tertiary); margin-bottom:4px; }
.chat-workspace .chat-search-result>span { font-size:13.5px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.chat-workspace .chat-search-compact { display:flex; align-items:center; gap:4px; padding:8px; position:relative; flex-shrink:0; min-height:64px; }
.chat-workspace .chat-search-compact .chat-thread-search-form { flex:1; }
.chat-workspace .chat-search-compact button { width:32px; height:40px; flex-shrink:0; padding:4px; }
.chat-workspace .chat-search-compact>button svg { width:16px; height:16px; }
.chat-workspace .chat-search-position { font-size:12px; white-space:nowrap; color:var(--chat-text-secondary); }
.chat-workspace .chat-search-empty { position:absolute; top:100%; left:0; right:0; padding:8px; background:var(--chat-list-background); font-size:12.5px; z-index:4; }
.chat-workspace .chat-search-match { background:oklch(.92 .08 85); color:var(--chat-text); border-radius:3px; padding:0 2px; }
.chat-workspace .chat-search-active-match { background:oklch(.55 .14 40); color:white; border-radius:3px; padding:0 2px; }
.chat-workspace .msg.chat-search-halo { outline:3px solid oklch(.86 .07 50); }
:root[data-theme="dark"] .chat-workspace .chat-search-match { background:oklch(.4 .08 85); }
.chat-workspace .chat-mobile-search-action { display:none; }
@container dedicated-chat (max-width:767px) { .chat-workspace .chat-search-toggle { display:none; } .chat-workspace .chat-mobile-search-action { display:flex; } }
.chat-workspace .chat-thread-search-form input[type="search"] {border:0;background:transparent;box-shadow:none;padding:0;min-width:0;outline:0;}
.chat-workspace .chat-thread-search-form button,.chat-workspace .chat-search-back,.chat-workspace .chat-search-compact>button,.chat-workspace .chat-search-results .chat-context-header button {border:0;background:transparent;border-radius:50%;color:var(--chat-text-secondary);display:grid;place-items:center;cursor:pointer;}
.chat-workspace .chat-thread-search-form button:hover,.chat-workspace .chat-search-back:hover,.chat-workspace .chat-search-compact>button:hover {background:var(--chat-neutral-soft);}
.chat-workspace .chat-thread-search-form:focus-within {outline:2px solid var(--primary);outline-offset:2px;}
.chat-workspace .chat-search-compact>button:disabled {opacity:.4;cursor:default;}
@container dedicated-chat (max-width:767px) { .chat-workspace .chat-search-compact button {width:44px;height:44px;} }
/* R6: retain the IA identity and let the search pill own its background. */
.chat-workspace .chat-contact-avatar.agent,
:root[data-theme="dark"] .chat-workspace .chat-contact-avatar.agent { background:var(--chat-ai-soft); color:var(--chat-ai-text); }
.chat-workspace .chat-thread-search-form input[type="search"] { --control-background:transparent; }
.chat-starting .chat-list-pane { position:relative; }
/* R7: estados perceptibles en filtros y controles; solo dentro del chat. */
.chat-workspace :is(button:not(:disabled),a[href],:is(summary,[data-chat-menu-trigger])) { cursor:pointer; }
@media(hover:hover) {
.chat-workspace :is(.chat-type-menu,.chat-list-menu,.chat-thread-menu,.chat-row-menu,.chat-inbox-menu)>:is(summary,[data-chat-menu-trigger]):hover,
.chat-workspace :is(.chat-context-return,.chat-context-record,.chat-context-section>:is(summary,[data-chat-menu-trigger]),.chat-schedule-composer,.chat-search-results .chat-context-header button):hover,
.chat-workspace .chat-thread-menu-items :is(a,button):not(:disabled):hover,
.chat-workspace .chat-row-menu-items :is(a,button):not(:disabled):hover { background:var(--chat-neutral-soft); }
}
.chat-workspace .chat-quick-filters :is(.chat-unread-filter,.chat-ai-filter,.chat-supervise-filter) { transition:background-color 120ms,border-color 120ms,color 120ms; }
.chat-workspace .chat-quick-filters :is(.chat-unread-filter,.chat-ai-filter,.chat-supervise-filter):focus-visible { outline:2px solid oklch(.55 .14 40); outline-offset:2px; }
@media(hover:hover) {
.chat-workspace .chat-quick-filters :is(.chat-unread-filter,.chat-ai-filter,.chat-supervise-filter):not(.active):hover { background:#F3EDE7;border-color:#CFC4BA;color:#2A2420; }
.chat-workspace .chat-quick-filters :is(.chat-unread-filter,.chat-supervise-filter).active:hover {background:oklch(.93 .04 50);border-color:oklch(.8 .08 45);}
.chat-workspace .chat-quick-filters .chat-ai-filter.active:hover {background:oklch(.93 .035 300);border-color:oklch(.8 .07 300);}
:root[data-theme="dark"] .chat-workspace .chat-quick-filters :is(.chat-unread-filter,.chat-ai-filter,.chat-supervise-filter):not(.active):hover {background:rgba(255,255,255,.06);border-color:var(--chat-text-tertiary);color:var(--chat-text);}
:root[data-theme="dark"] .chat-workspace .chat-quick-filters :is(.chat-unread-filter,.chat-supervise-filter).active:hover {background:oklch(.34 .06 45);border-color:oklch(.5 .08 45);}
:root[data-theme="dark"] .chat-workspace .chat-quick-filters .chat-ai-filter.active:hover {background:oklch(.34 .07 300);border-color:oklch(.5 .09 300);}
}
.chat-workspace .chat-quick-filters :is(.chat-unread-filter,.chat-ai-filter,.chat-supervise-filter):not(.active):active {background:#ECE4DC;}
.chat-workspace .chat-quick-filters :is(.chat-unread-filter,.chat-supervise-filter).active:active {background:oklch(.91 .05 50);}
.chat-workspace .chat-quick-filters .chat-ai-filter.active:active {background:oklch(.91 .045 300);}
:root[data-theme="dark"] .chat-workspace .chat-quick-filters :is(.chat-unread-filter,.chat-ai-filter,.chat-supervise-filter):not(.active):active {background:rgba(255,255,255,.1);}
:root[data-theme="dark"] .chat-workspace .chat-quick-filters :is(.chat-unread-filter,.chat-supervise-filter).active:active {background:oklch(.38 .07 45);}
:root[data-theme="dark"] .chat-workspace .chat-quick-filters .chat-ai-filter.active:active {background:oklch(.38 .08 300);}
@media(prefers-reduced-motion:reduce) { .chat-workspace .chat-quick-filters :is(.chat-unread-filter,.chat-ai-filter,.chat-supervise-filter) {transition:none;} }
.chat-workspace input[type="search"]::-webkit-search-cancel-button,.chat-workspace input[type="search"]::-webkit-search-decoration {appearance:none;-webkit-appearance:none;display:none;}
.chat-workspace .chat-profile-link {display:flex;flex-direction:column;align-items:center;gap:8px;color:inherit;text-decoration:none;}
.chat-workspace .chat-profile-avatar {position:relative;display:block;}
.chat-workspace .chat-profile-veil {position:absolute;inset:0;border-radius:50%;background:rgba(42,36,32,.4);display:grid;place-items:center;color:white;opacity:0;transition:opacity 120ms;}
.chat-workspace .chat-profile-veil svg {width:22px;height:22px;}
.chat-workspace .chat-profile-link .chat-contact-name svg {display:inline;width:16px;height:16px;opacity:.55;vertical-align:middle;}
.chat-workspace .chat-profile-tooltip {position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);white-space:nowrap;background:#2A2420;color:white;font-size:12px;border-radius:6px;padding:6px 8px;opacity:0;visibility:hidden;transition:opacity 120ms,visibility 0s 120ms;pointer-events:none;z-index:5;}
.chat-workspace .chat-profile-link:focus-visible .chat-profile-tooltip {opacity:1;visibility:visible;transition-delay:0s;}
.chat-workspace .chat-profile-link:focus-visible .chat-profile-veil {opacity:1;}
@media(hover:hover) { .chat-workspace .chat-profile-link:hover .chat-contact-name {color:var(--chat-accent-text,oklch(.45 .12 40));text-decoration:underline;} .chat-workspace .chat-profile-link:hover .chat-profile-veil {opacity:1;} .chat-workspace .chat-profile-link:hover .chat-profile-tooltip {opacity:1;visibility:visible;transition-delay:400ms;} }
.chat-workspace :is(.chat-list,.chat-list-body,.chat,.chat-context-body,.chat-search-result-list,.chat-context-surface) {scrollbar-width:thin;scrollbar-color:rgba(42,36,32,.25) transparent;}
.chat-workspace :is(.chat-list,.chat-list-body,.chat,.chat-context-body,.chat-search-result-list,.chat-context-surface)::-webkit-scrollbar {width:6px;height:6px;}
.chat-workspace :is(.chat-list,.chat-list-body,.chat,.chat-context-body,.chat-search-result-list,.chat-context-surface)::-webkit-scrollbar-thumb {border-radius:999px;background:rgba(42,36,32,.25);}
.chat-workspace ::-webkit-scrollbar-track {background:transparent;}
.chat-workspace ::-webkit-scrollbar-button {display:none;width:0;height:0;}
.chat-workspace ::-webkit-scrollbar-thumb:hover {background:rgba(42,36,32,.4);}
:root[data-theme="dark"] .chat-workspace :is(.chat-list,.chat-list-body,.chat,.chat-context-body,.chat-search-result-list,.chat-context-surface) {scrollbar-color:rgba(255,255,255,.2) transparent;}
:root[data-theme="dark"] .chat-workspace ::-webkit-scrollbar-thumb {background:rgba(255,255,255,.2);}
:root[data-theme="dark"] .chat-workspace ::-webkit-scrollbar-thumb:hover {background:rgba(255,255,255,.35);}
.chat-workspace .chat-search-navigation {display:flex;align-items:center;gap:4px;height:56px;min-height:56px;padding:0 12px;border-top:1px solid var(--chat-border);background:var(--chat-composer-background,var(--chat-list-background));}
.chat-workspace .chat-search-navigation .chat-search-position {flex:1;font-size:13px;min-width:0;}
.chat-workspace .chat-search-navigation button {width:44px;height:44px;border:0;background:transparent;color:var(--chat-text-secondary);border-radius:50%;display:grid;place-items:center;flex-shrink:0;}
.chat-workspace .chat-search-navigation button:disabled {opacity:.4;cursor:default;}
.chat-workspace .chat-search-navigation button:hover:not(:disabled) {background:var(--chat-neutral-soft);}
.chat-workspace .chat-search-navigation svg {width:18px;height:18px;}
.chat-workspace .chat-search-navigation .chat-spinner {margin-right:auto;}
@container dedicated-chat (max-width:767px) {
.chat-workspace .chat-search-compact {height:64px;}
.chat-workspace .chat-search-compact>.chat-search-back {width:44px;height:44px;}
.chat-workspace .chat-search-compact .chat-thread-search-form {height:44px;}
.chat-workspace .chat-context-head {height:56px;min-height:56px;display:flex;flex-direction:row;align-items:center;gap:8px;padding:0 12px;border-bottom:1px solid var(--chat-border);}
.chat-workspace .chat-context-head .chat-context-return {width:44px;height:44px;min-height:44px;padding:0;display:grid;place-items:center;flex-shrink:0;background:transparent;}
.chat-workspace .chat-context-head .chat-context-back-text {display:none;}
.chat-workspace .chat-context-head h2 {margin:0;font-size:17px;font-weight:600;}
}
@media(prefers-reduced-motion:reduce) { .chat-workspace :is(.chat-profile-veil,.chat-profile-tooltip) {transition:none;} }
/* El tooltip del perfil queda dentro de la región desplazable, encima del avatar. */
.chat-workspace .chat-profile-link {padding-top:24px;}
/* Chromium usa su barra nativa si thin/color están activos; dejar el tamaño a WebKit evita las flechas. */
@supports selector(::-webkit-scrollbar) and (not (-moz-appearance: none)) {
.chat-workspace :is(.chat-list,.chat-list-body,.chat,.chat-context-body,.chat-search-result-list,.chat-context-surface),
:root[data-theme="dark"] .chat-workspace :is(.chat-list,.chat-list-body,.chat,.chat-context-body,.chat-search-result-list,.chat-context-surface) {scrollbar-width:auto;scrollbar-color:auto;}
}
.r3-quick-filters{display:flex;flex-wrap:nowrap;gap:4px;align-items:center;min-width:0;max-width:100%;overflow:visible}
.r3-quick-filters>.chip,.r3-quick-filters>.r3-filter-overflow{flex:0 0 auto}
.r3-quick-filters .chip{min-height:40px;padding:6px 8px;gap:4px;white-space:nowrap}
.r3-quick-filters svg{width:18px;height:18px;flex:0 0 auto}
.r3-quick-filters .r3-filter-icon,.r3-agent-clear,.r3-filter-overflow>:is(summary,[data-chat-menu-trigger]){width:40px;min-width:40px;justify-content:center}
.r3-quick-filters [hidden]{display:none!important}
.r3-agent-control{display:flex;align-items:center;gap:0;min-width:0;flex:0 0 auto}
.r3-agent-filter{position:relative;min-width:0}
.r3-agent-filter>:is(summary,[data-chat-menu-trigger]){display:flex;min-width:0}
.r3-agent-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:90px;min-width:0}
.r3-agent-popup,.r3-filter-popup{z-index:90;box-sizing:border-box;padding:8px;border:1px solid var(--border);border-radius:var(--control-radius);background:var(--surface);color:var(--text);box-shadow:0 8px 24px rgb(0 0 0/.16);overflow:auto;margin:0}
.r3-agent-popup>input{width:100%;box-sizing:border-box;min-width:0}
.r3-agent-options{max-height:min(320px,45dvh);overflow:auto;margin-top:8px}
.r3-agent-options>button,.r3-filter-popup>button{display:flex;width:100%;align-items:center;gap:8px;min-height:44px;text-align:left;background:transparent;border:0;border-radius:var(--control-radius);padding:8px;color:var(--text)}
.r3-agent-options>button>span,.r3-filter-popup>button>span{flex:1;overflow-wrap:anywhere}
.r3-agent-options>button[aria-selected=true],.r3-filter-popup>button[aria-pressed=true]{background:var(--primary-soft);color:var(--primary)}
.r3-filter-popup .chat-filter-options{position:static;display:flex;flex-wrap:wrap;padding:0;gap:4px}
.r3-filter-popup .chat-filter-group + .chat-filter-group{margin-top:12px}
.r3-filter-popup .chat-filter-group:not(:has(> :not([hidden]))){display:none}
.chat-workspace .r3-quick-filters .r3-filter-popup .chip{height:auto;min-height:40px;white-space:normal;text-align:start;font-weight:500;line-height:1.35}
.chat-workspace .r3-filter-popup .chip svg{width:16px;height:16px;flex:none}
@media(max-width:640px){.chat-workspace .r3-quick-filters .r3-filter-popup .chip{min-height:44px}}
.chat-workspace :is(.chat-row-avatar,.chat-thread-avatar,.chat-contact-avatar)>svg{width:55%;height:55%;flex:none}
.r3-overflow-active{font-size:.75rem;line-height:1}
.r3-filter-pagination{display:flex;gap:8px;justify-content:space-between;padding:8px}
@media(pointer:coarse){.r3-quick-filters .chip{min-height:44px}.r3-quick-filters .r3-filter-icon,.r3-agent-clear,.r3-filter-overflow>:is(summary,[data-chat-menu-trigger]){width:44px;min-width:44px}}
.chat-workspace .r3-quick-filters{display:flex;flex-wrap:nowrap;gap:4px;overflow:visible}
.chat-workspace .r3-quick-filters .chip{height:40px;min-height:40px;padding:6px 8px;gap:4px;font-weight:500}
.chat-workspace .r3-agent-filter>:is(summary,[data-chat-menu-trigger]){width:auto;max-width:126px;min-width:82px;box-sizing:border-box}
.chat-workspace .r3-quick-filters .r3-filter-icon,.chat-workspace .r3-quick-filters .r3-agent-clear,.chat-workspace .r3-filter-overflow>:is(summary,[data-chat-menu-trigger]){width:40px;min-width:40px;justify-content:center}
.r3-filter-icon.active{position:relative}.r3-filter-icon.active::after{content:'✓';position:absolute;right:0;bottom:0;font-size:10px;line-height:12px}
@media(pointer:coarse){.chat-workspace .r3-quick-filters .chip{height:44px;min-height:44px}.chat-workspace .r3-filter-popup .chip{height:auto;min-height:44px}.chat-workspace .r3-quick-filters .r3-filter-icon,.chat-workspace .r3-quick-filters .r3-agent-clear,.chat-workspace .r3-filter-overflow>:is(summary,[data-chat-menu-trigger]){width:44px;min-width:44px}}
/* I7: recuperar las píldoras aprobadas; el tamaño depende de la columna, también en dock. */
.chat-workspace .chat-list-pane { container-name: chat-list; container-type: inline-size; }
.chat-workspace .chat-i1-filters { display:flex; flex-wrap:nowrap; align-items:center; gap:6px; }
.chat-workspace .chat-i1-filters .chip { height:32px; min-height:32px; flex:none; padding:0 12px 0 10px; font-weight:600; white-space:nowrap; }
.chat-workspace .chat-i1-filters svg { width:15px; height:15px; }
.chat-dock-window[data-fullscreen="false"] .chat-workspace .chat-i1-filters .chat-supervise-filter { width:32px; min-width:32px; padding:0; justify-content:center; }
@container chat-list (width < 400px) {
.chat-workspace .chat-i1-filters .chat-supervise-filter { width:32px; min-width:32px; padding:0; justify-content:center; }
.chat-workspace .chat-i1-filters .chat-supervise-filter span { display:none; }
}
@container chat-list (width < 300px) {
.chat-workspace .chat-i1-filters { padding-inline:4px; gap:2px; }
}
/* A1 · C07/C11: the actual row width decides compact labels; the disclosure always remains visible. */
.chat-workspace .chat-a1-filters{display:flex;align-items:center;flex-wrap:nowrap;gap:6px;padding:10px 8px;min-width:0;}
.chat-workspace .chat-a1-filters>.chip,.chat-workspace .chat-a1-filters .a1-selected-filters>.chip,.chat-workspace .chat-a1-filters .a1-more-filters>:is(summary,[data-chat-menu-trigger]){display:inline-flex;align-items:center;justify-content:center;gap:5px;flex:none;height:32px;min-height:32px;padding:0 9px;border:1px solid var(--chat-chip-border);border-radius:999px;font-size:13px;font-weight:600;white-space:nowrap;background:var(--chat-list-background);color:var(--chat-text-secondary);}
.chat-workspace .chat-a1-filters .chat-r2-icon{width:15px;height:15px;flex:none;}
.chat-workspace .chat-a1-filters .chip.active,.chat-workspace .a1-more-filters[open]>:is(summary,[data-chat-menu-trigger]){background:var(--chat-accent-soft);color:var(--chat-accent-text);border-color:var(--chat-accent-border);}
.chat-workspace .chat-a1-filters :is(.chat-ai-filter.active,.a1-employee-filter){background:var(--chat-ai-soft);border-color:var(--chat-ai-border);color:var(--chat-ai-text);}
.chat-workspace .chat-a1-filters .a1-more-filters{margin:0;flex:none;position:relative;}
.chat-workspace .chat-a1-filters .a1-more-filters>:is(summary,[data-chat-menu-trigger]){width:32px;min-width:32px;padding:0;list-style:none;color:var(--ui-control-foreground);}
.chat-workspace .chat-a1-filters .a1-more-filters>:is(summary,[data-chat-menu-trigger]) .chat-r2-icon{width:16px;height:16px;}
.chat-workspace .chat-a1-filters[data-supervise-compact=true] .chat-supervise-filter,.chat-workspace .chat-a1-filters[data-ai-compact=true] .chat-ai-filter{width:32px;min-width:32px;padding:0;}
.chat-workspace .chat-a1-filters[data-supervise-compact=true] .chat-supervise-filter .a1-filter-label,.chat-workspace .chat-a1-filters[data-ai-compact=true] .chat-ai-filter .a1-filter-label{display:none;}
.chat-workspace .chat-a1-filters[data-supervise-compact=false] .chat-supervise-filter .a1-filter-label{position:static;width:auto;height:auto;overflow:visible;clip-path:none;display:inline;}
.a1-selected-filters:empty{display:none;}.a1-selected-filters{display:flex;align-items:center;gap:6px;min-width:0;flex:0 1 auto;overflow-x:auto;scrollbar-width:none;}
.a1-selected-filters::-webkit-scrollbar{display:none;}
.chat-a1-filters[data-more-end=true] .a1-selected-filters{mask-image:linear-gradient(to right,var(--ui-mask) calc(100% - 28px),transparent);}
.chat-a1-filters[data-more-start=true] .a1-selected-filters{mask-image:linear-gradient(to right,transparent,var(--ui-mask) 28px);}
.chat-a1-filters[data-more-start=true][data-more-end=true] .a1-selected-filters{mask-image:linear-gradient(to right,transparent,var(--ui-mask) 28px,var(--ui-mask) calc(100% - 28px),transparent);}
/* S1: en la columna única (Conversaciones de una columna y el dock, en el celular y en escritorio) bandeja, buscador, fila
de píldoras y títulos de sección arrancan en un solo borde de 16 px y terminan a 16 px del otro lado. Las filas no
cambian (su avatar sigue en 20). Misma condición que pasa el chat a una columna. */
@container dedicated-chat (max-width: 859px){
.chat-workspace .chat-inbox-selector{margin-inline:16px;}
.chat-workspace .chat-a1-filters{padding-inline:16px;}
.chat-workspace .chat-filter-caption{margin-inline-start:8px;}
}
.chat-workspace .a1-filter-popup{box-sizing:border-box;width:260px;padding:6px;border:1px solid var(--chat-border);border-radius:14px;background:var(--chat-list-background);color:var(--chat-text);box-shadow:var(--chat-menu-shadow);overflow-y:auto;z-index:95;}
.chat-workspace .a1-filter-content>button{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:10px 12px;border:0;border-radius:10px;background:transparent;color:var(--chat-text);font-size:14px;text-align:left;white-space:nowrap;}
.chat-workspace .a1-filter-content>button:hover{background:var(--chat-search-background);}
.a1-filter-content>button>span:not(.chat-menu-count):not(.a1-agent-avatar){flex:1;min-width:0;}
.a1-filter-content>button small{display:block;color:var(--chat-text-secondary);font-size:12.5px;font-weight:400;overflow:hidden;text-overflow:ellipsis;}
.a1-filter-popup .chat-menu-count{margin-left:auto;color:var(--chat-text-tertiary);font-size:12.5px;font-weight:400;flex:none;}
.a1-unchecked{visibility:hidden;}
.a1-filter-content>header{display:flex;align-items:center;gap:6px;min-height:40px;}
.a1-agent-search{display:flex;align-items:center;gap:6px;min-height:38px;background:var(--chat-search-background);border-radius:999px;padding:0 10px;margin:6px;}
.a1-agent-search>input{min-width:0;width:100%;border:0;background:transparent;color:var(--chat-text);box-shadow:none;}
.a1-filter-avatar,.chat-workspace .a1-filter-avatar{width:18px;height:18px;min-width:18px;border-radius:50%;display:grid;place-items:center;background:var(--chat-avatar-background);color:var(--chat-avatar-text);font-size:11px;flex:none;}
.a1-agent-avatar,.chat-workspace .a1-agent-avatar{width:28px;height:28px;min-width:28px;border-radius:50%;display:grid;place-items:center;background:var(--chat-avatar-background);color:var(--chat-avatar-text);font-size:11px;flex:none;}
.a1-agent-avatar:has(>.chat-r2-icon){background:var(--chat-ai-soft);color:var(--chat-ai-text);}
.chat-workspace :is(.chat-list-menu-items,.chat-row-menu-items,.chat-thread-menu-items,.chat-bulk-menu-items){min-width:240px;width:max-content;max-width:320px;}
.chat-workspace :is(.chat-list-menu-items,.chat-row-menu-items,.chat-thread-menu-items,.chat-bulk-menu-items)>:is(a,button){white-space:nowrap;}
.chat-workspace .chat-detail-pane.context-inline{grid-template-columns:minmax(520px,1fr) 320px;}
.chat-workspace .chat-owner-pill{min-width:0;}
.chat-workspace .chat-owner-pill>.chat-owner-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.chat-workspace .chat-owner-pill[data-owner-compact=true]>.chat-owner-label{visibility:hidden;}
.chat-section-trigger{display:flex;align-items:center;gap:8px;min-height:40px;width:100%;border:0;background:transparent;color:var(--chat-text);font-size:14px;font-weight:600;text-align:left;padding:0;cursor:pointer;}
.chat-section-trigger>.chat-section-chevron{width:16px;height:16px;transform:rotate(-90deg);flex:none;}
.chat-section-trigger[aria-expanded=true]>.chat-section-chevron{transform:none;}
.chat-section-content{padding-left:24px;}
/* R5.1 · C04: «+ Agregar» del detalle del contacto es un secundario como «Reasignar» y «Editar» (40 px, 44 en el celular, con su
fondo, hover y presionado de .button.secondary); antes medía 36 px con otro fondo y, en oscuro, sin hover. */
.chat-workspace .e1-tag-assignment>.button{height:40px;min-height:40px;padding:0 14px;border:0;font-size:14px;font-weight:600;}
.chat-workspace .e1-tag-assignment>.button>.chat-r2-icon{width:16px;height:16px;}
/* C20: official channel marks inherit the row's surface, including selected/hover/dark states. */
.chat-avatar-content{display:contents;}
:is(.chat-row-avatar,.chat-thread-avatar,.chat-contact-avatar){position:relative;overflow:visible;}
.chat-channel-badge{position:absolute;right:-2px;bottom:-2px;display:grid;place-items:center;width:19px;height:19px;border-radius:50%;box-shadow:0 0 0 2px var(--channel-ring,var(--chat-list-background));}
.chat-channel-badge[data-channel=whatsapp]{background:var(--channel-whatsapp-background);color:var(--channel-whatsapp-foreground);}
.chat-channel-badge>.chat-r2-icon{width:100%;height:100%;}
.chat-thread-avatar>.chat-channel-badge{width:16px;height:16px;}
.chat-row.active{--channel-ring:var(--chat-active-background);}
:root[data-theme=dark] .chat-row:hover{--channel-ring:var(--surface-muted);}
@media(prefers-reduced-motion:reduce){.chat-section-chevron{transition:none;}.a1-selected-filters{scroll-behavior:auto;}}
/* A1 C10/C27: separadores del panel y controles táctiles del contacto. */
.chat-workspace .chat-context-section{border-color:var(--chat-border);}
.chat-workspace dialog.a1-filter-popup{margin:0;color:var(--chat-text);}
.chat-workspace dialog.a1-filter-popup::backdrop{background:var(--preset-overlay);}
.chat-workspace dialog.a1-filter-popup[data-sheet=false]::backdrop{background:transparent;}
@container dedicated-chat (max-width:767px){.chat-workspace .e1-tag-assignment>.button{height:44px;min-height:44px;}}
.chat-workspace .chat-inbox-selector>[data-chat-menu-trigger]{width:100%;}
@media(max-width:767px){
.chat-workspace .chat-a1-filters>.chip,.chat-workspace .chat-a1-filters .a1-selected-filters>.chip,.chat-workspace .chat-a1-filters .a1-more-filters>[data-chat-menu-trigger]{height:40px;min-height:40px;}
.chat-workspace .chat-a1-filters .a1-more-filters>[data-chat-menu-trigger],.chat-workspace .chat-a1-filters[data-supervise-compact=true] .chat-supervise-filter,.chat-workspace .chat-a1-filters[data-ai-compact=true] .chat-ai-filter{width:40px;min-width:40px;}
}
/* A1 decision3: stronger borders only on the revised filter controls. */
:root[data-theme] .chat-workspace .chat-a1-filters>.chip,:root[data-theme] .chat-workspace .chat-a1-filters .a1-selected-filters>.chip,:root[data-theme] .chat-workspace .chat-a1-filters .a1-more-filters>[data-chat-menu-trigger]{border-color:var(--ui-control-border);}
:root[data-theme] .chat-workspace .chat-a1-filters .chip.active,:root[data-theme] .chat-workspace .chat-a1-filters .a1-more-filters[open]>[data-chat-menu-trigger]{border-color:var(--ui-accent-control-border);}
:root[data-theme] .chat-workspace .chat-a1-filters :is(.chat-ai-filter.active,.a1-employee-filter){border-color:var(--ui-ai-control-border);}
/* Preserve the existing avatar glyph geometry through the channel wrapper. */
.chat-workspace :is(.chat-row-avatar,.chat-thread-avatar,.chat-contact-avatar)>.chat-avatar-content>svg{width:55%;height:55%;flex:none;}
/* A2 S11/S13: pending chips and one shared sheet surface. */
.chat-workspace dialog.a2-filter-popup{padding:0;border:1px solid var(--ui-menu-border);border-radius:14px;background:var(--chat-list-background);color:var(--chat-text);box-shadow:var(--chat-menu-shadow);overflow:hidden;}
.chat-workspace dialog.a2-filter-popup::backdrop{background:transparent;}
.chat-workspace dialog.a2-filter-popup[data-sheet=true]::backdrop{background:var(--ui-sheet-overlay);}
/* S2 · C27: el menú ⋮ de la lista en el celular va en esta misma hoja (dialog.a2-filter-popup + ChatBottomSheet), abajo y a
todo el ancho, con las mismas opciones; cada opción de 52 px, como las demás hojas de menú (Asignar, Equipo). */
.chat-workspace dialog.chat-list-sheet{position:fixed;inset:auto 0 0 0;width:100%;max-width:100vw;max-height:calc(100dvh - 12px);margin:0;}
.chat-workspace dialog.chat-list-sheet .chat-list-menu-items{position:static;width:auto;min-width:0;max-width:none;padding:0 8px 12px;border:0;border-radius:0;background:transparent;box-shadow:none;overflow-y:auto;}
.chat-workspace dialog.chat-list-sheet .chat-list-menu-items>:is(a,button){min-height:52px;border-radius:12px;font-size:15px;}
.bheli-bottom-sheet{display:flex;flex-direction:column;min-height:0;height:100%;max-height:inherit;background:inherit;}
.bheli-sheet-handle{display:none;}
.a2-filter-scroll{overflow-y:auto;min-height:0;padding:16px 14px;}
.a2-filter-chips{display:flex;flex-wrap:wrap;gap:6px;}
.chat-workspace .a2-filter-chip{display:inline-flex;align-items:center;gap:6px;min-height:32px;height:32px;max-width:100%;padding:0 12px;border:1px solid var(--ui-control-border);border-radius:999px;background:var(--chat-list-background);color:var(--chat-text-secondary);font-size:13px;font-weight:500;white-space:nowrap;}
.chat-workspace .a2-filter-chip>span:last-child{overflow:hidden;text-overflow:ellipsis;}
.chat-workspace .a2-filter-chip.active{background:var(--chat-accent-soft);border-color:var(--ui-accent-control-border);color:var(--chat-accent-text);font-weight:600;}
.chat-workspace .a2-filter-chip.a2-filter-ai.active{background:var(--chat-ai-soft);border-color:var(--ui-ai-control-border);color:var(--chat-ai-text);}
.a2-filter-agents{margin-top:18px;}.a2-filter-agents>h2{font-size:12.5px;font-weight:600;color:var(--chat-text-secondary);margin:0 0 10px;}
.chat-workspace .a2-agent-avatar{width:20px;height:20px;min-width:20px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:9px;background:var(--chat-avatar-background);color:var(--chat-avatar-text);}
.a2-agent-avatar:has(svg){background:var(--chat-ai-soft);color:var(--chat-ai-text);}.a2-agent-avatar>svg{width:14px;height:14px;}
.a2-filter-agents .a1-agent-search{margin:0 0 10px;}.a1-agent-search>button{background:transparent;border:0;border-radius:50%;height:32px;width:32px;flex:none;color:var(--chat-text-secondary);}
.a2-filter-actions{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--ui-menu-border);flex:none;background:var(--chat-list-background);}
.chat-workspace .a2-filter-actions>.button{flex:1;min-height:40px;height:40px;border:0;border-radius:999px;padding:0 12px;justify-content:center;}
.chat-workspace .a2-filter-actions>.primary{background:var(--primary);color:var(--primary-contrast);}
.chat-workspace .a2-filter-actions>.secondary{background:var(--ui-hover);color:var(--chat-text);}
.chat-workspace .chat-search.bheli-composite-field{background:var(--chat-search-background);border-radius:999px;}
.chat-workspace .chat-thread-search-form.bheli-composite-field{background:var(--chat-search-background);border-radius:999px;outline:none;padding:0 10px;}
.chat-workspace :is(.chat-thread-back,.chat-view-back,.chat-back,.chat-context-return){width:36px;min-width:36px;height:36px;min-height:36px;padding:0;border:0;border-radius:50%;align-items:center;justify-content:center;flex:none;}
.chat-workspace :is(.chat-thread-back,.chat-view-back,.chat-back,.chat-context-return)>.chat-r2-icon{width:20px;height:20px;}
.chat-workspace .chat-thread-back>span{display:none;}
@media(max-width:767px){
.chat-workspace dialog.a2-filter-popup[data-sheet=true]{max-width:100vw;border:0;border-radius:18px 18px 0 0;padding-bottom:env(safe-area-inset-bottom);}
.bheli-sheet-handle{display:grid;place-items:center;height:20px;min-height:20px;flex:none;touch-action:none;}
.bheli-sheet-handle>span{width:36px;height:4px;border-radius:2px;background:var(--ui-sheet-handle);}
.chat-dock-window[data-fullscreen=true] .chat-dock-surface>.bheli-bottom-sheet>.bheli-sheet-handle{display:none;}
.chat-workspace .a2-filter-chip{min-height:40px;height:40px;}
.chat-workspace :is(.chat-thread-back,.chat-view-back,.chat-back,.chat-context-return){width:44px;min-width:44px;height:44px;min-height:44px;}
}
.chat-workspace .chat-search-back{width:36px;min-width:36px;height:36px;min-height:36px;border:0;border-radius:50%;}
.chat-workspace .chat-search-back>.chat-r2-icon{width:20px;height:20px;}
@media(max-width:767px){.chat-workspace .chat-search-back{width:44px;min-width:44px;height:44px;min-height:44px;}}
.chat-workspace .chat-back{display:inline-flex;}
.chat-workspace .chat-context-head .chat-context-return{width:36px;min-width:36px;height:36px;min-height:36px;}
@media(max-width:767px){.chat-workspace .chat-context-head .chat-context-return{width:44px;min-width:44px;height:44px;min-height:44px;}}
.chat-workspace :is(.chat-thread-back,.chat-view-back,.chat-back,.chat-search-back,.chat-panel-back),
.chat-workspace :is(.chat-thread-back,.chat-view-back,.chat-back,.chat-search-back,.chat-panel-back)>.chat-r2-icon,
.chat-workspace .chat-context-return>.chat-context-back-icon{color:var(--chat-text);}
.chat-workspace .a2-filter-ai>.a2-agent-avatar{background:var(--chat-ai-soft);color:var(--chat-ai-text);}
/* R9 keeps the original search/row geometry while the outer shape owns focus. */
:root[data-theme] .chat-workspace .chat-search.bheli-composite-field{height:38px;}
:root[data-theme] .chat-workspace .chat-search.bheli-composite-field input.bheli-composite-input{height:100%;min-height:0;}
@media(max-width:767px){:root[data-theme] .chat-workspace .chat-search.bheli-composite-field{height:44px;}}
/* CH2 (como WhatsApp): al elegir mensajes, cada mensaje es una fila de todo el ancho; la casilla va a la izquierda,
centrada con la burbuja, y la fila elegida se tiñe con el tinte de selección de la lista (C17). Tocar la fila elige.
Sobrescribe la casilla montada sobre la burbuja de chat.css (que sigue sirviendo al chat sin la app). */
/* El relleno lateral del historial, en una variable: la fila llega de borde a borde sin desbordar (el historial cambia de
relleno en el chat angosto y en el dock). */
.chat-workspace[data-chat-app] .conversation-viewport .chat { --msg-row-pad: clamp(var(--space-3), 3vw, var(--space-5)); }
@container dedicated-chat (max-width: 859px) { .chat-workspace[data-chat-app] .conversation-viewport .chat { --msg-row-pad: 12px; } }
.chat-workspace[data-chat-app].selecting .chat > .msg-select-row { display: flex; align-items: center; gap: 4px; flex: none; align-self: stretch; margin-inline: calc(-1 * var(--msg-row-pad)); padding: 2px var(--msg-row-pad) 2px 4px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.chat-workspace[data-chat-app].selecting .chat > .msg-select-row.msg-run-row { margin-top: -6px; }
.chat-workspace[data-chat-app].selecting .msg-select-row.out > .msg { margin-inline-start: auto; }
.chat-workspace[data-chat-app].selecting .msg-select-row.selected { background: var(--chat-accent-soft); }
.chat-workspace[data-chat-app].selecting .msg-select-row > .msg { align-self: center; margin-block: 0; padding-left: 10px; }
/* Al elegir, tocar la burbuja elige la fila y nada más: ni abre la cita, ni el archivo, ni el video. */
.chat-workspace[data-chat-app].selecting .msg-select-row > .msg { pointer-events: none; }
.chat-workspace[data-chat-app].selecting .msg-select-row > .msg.selected { outline: 0; }
.chat-workspace[data-chat-app].selecting .msg-select-row .msg-select-check { position: static; display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--chat-on-unread); cursor: pointer; }
.chat-workspace[data-chat-app].selecting .msg-select-row .msg-select-check::before { content: ""; grid-area: 1 / 1; width: 18px; height: 18px; box-sizing: border-box; border: 1.5px solid var(--chat-check-border); border-radius: 5px; background: var(--chat-list-background); }
.chat-workspace[data-chat-app].selecting .msg-select-row .msg-select-check[aria-checked="true"]::before { border-color: var(--chat-check-on); background: var(--chat-check-on); }
.chat-workspace[data-chat-app].selecting .msg-select-row .msg-select-check .chat-r2-icon { grid-area: 1 / 1; position: relative; width: 12px; height: 12px; stroke-width: 3; visibility: hidden; }
.chat-workspace[data-chat-app].selecting .msg-select-row .msg-select-check[aria-checked="true"] .chat-r2-icon { visibility: visible; }
.chat-workspace[data-chat-app].selecting .msg-select-row .msg-select-check:focus-visible { outline: none; }
.chat-workspace[data-chat-app].selecting .msg-select-row .msg-select-check:focus-visible::before { border-color: var(--chat-check-on); box-shadow: 0 0 0 3px var(--chat-check-ring); }
@media (hover: hover) { .chat-workspace[data-chat-app].selecting .msg-select-row:not(.selected):hover { background: var(--chat-active-background); } }
/* La barra de selección ocupa la cabecera de la conversación (C29): mismo alto, × · «{n} seleccionados» · acciones de ícono. */
.chat-workspace[data-chat-app] .msg-select-bar { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; padding: 0 12px 0 8px; border-top: 0; background: var(--chat-accent-soft); font-size: 14px; }
.chat-workspace[data-chat-app] .msg-select-bar [data-selected-count] { flex: 1 1 auto; min-width: 0; overflow: hidden; color: var(--chat-text); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.chat-workspace[data-chat-app] .msg-select-actions { display: inline-flex; flex: none; align-items: center; gap: 2px; }
.chat-workspace[data-chat-app] .msg-select-bar .msg-select-action { display: inline-grid; place-items: center; width: 38px; min-width: 38px; height: 38px; min-height: 38px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--chat-text); cursor: pointer; }
.chat-workspace[data-chat-app] .msg-select-bar .msg-select-action .chat-r2-icon { width: 20px; height: 20px; }
.chat-workspace[data-chat-app] .msg-select-bar .msg-select-action:disabled { color: var(--control-disabled-text); cursor: default; }
@media (hover: hover) { .chat-workspace[data-chat-app] .msg-select-bar .msg-select-action:hover:not(:disabled) { background: var(--chat-active-background); } }
.chat-workspace[data-chat-app] .msg-select-bar .msg-select-action:active:not(:disabled) { background: var(--chat-active-background); }
@container dedicated-chat (max-width:767px) { .chat-workspace[data-chat-app] .msg-select-bar .msg-select-action { width: 40px; min-width: 40px; height: 40px; min-height: 40px; } }
/* CH1: lo mínimo del detalle del contacto (C23): Etiquetas, Agente asignado y Datos del contacto, cada bloque con su título
y una línea arriba como las secciones; «Reasignar» y «Editar» a la derecha del bloque. */
.chat-workspace .chat-contact-block { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--chat-border); }
.chat-workspace .chat-contact-block h3 { margin: 0 0 8px; color: var(--chat-text); font-size: 14px; font-weight: 600; line-height: 20px; }
.chat-workspace .chat-contact-block-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.chat-workspace .chat-contact-block-head h3 { margin: 0; }
.chat-workspace .chat-contact-block .chat-context-facts { margin: 0; }
/* R5.1 (R5-1): «Editar» y «Reasignar» con el mismo espacio entre ícono y texto que «+ Agregar» (8 px, el de Contactos). */
.chat-workspace .chat-contact-edit { flex: none; gap: 8px; white-space: nowrap; }
.chat-workspace .chat-assign-panel > [data-chat-menu-trigger] { gap: 8px; }
.chat-workspace .chat-contact-edit .chat-r2-icon { width: 16px; height: 16px; }
.chat-workspace .chat-contact-agent { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.chat-workspace .chat-contact-agent-avatar { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--chat-avatar-background); color: var(--chat-avatar-text); font-size: 12px; font-weight: 600; }
.chat-workspace .chat-contact-agent-avatar.agent { background: var(--chat-ai-soft); color: var(--chat-ai-text); }
.chat-workspace .chat-contact-agent-avatar.chat-contact-agent-none { background: var(--chat-unassigned-soft); color: var(--chat-unassigned-text); }
.chat-workspace .chat-contact-agent-avatar .chat-r2-icon { width: 16px; height: 16px; }
.chat-workspace .chat-contact-agent-name { flex: 1 1 auto; min-width: 0; overflow: hidden; color: var(--chat-text); font-size: 14px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.chat-workspace .chat-assign-panel { flex: none; }
/* Botones del panel como C04: píldoras de 14 px / 600, alto 40 (44 en el celular). */
.chat-workspace #chat-contact-context :is(.button, .chat-assign-panel > [data-chat-menu-trigger]) { border-radius: 999px; }
.chat-workspace :is(.chat-contact-edit, .chat-contact-retry, .chat-assign-panel > :is(summary,[data-chat-menu-trigger])) { min-height: 40px; padding: 0 14px; font-size: 14px; font-weight: 600; }
.chat-workspace .chat-assign-panel > :is(summary,[data-chat-menu-trigger]) .chat-r2-icon { width: 16px; height: 16px; }
@container dedicated-chat (max-width:767px) { .chat-workspace :is(.chat-contact-edit, .chat-contact-retry, .chat-assign-panel > :is(summary,[data-chat-menu-trigger])) { min-height: 44px; } }
.chat-workspace .chat-assign-panel .chat-assign-menu-items { top: calc(100% + 6px); bottom: auto; right: 0; }
.chat-workspace #chat-contact-context .feedback-section { margin: 12px 0 0; }
/* CH5 (como WhatsApp): «Nuevo grupo» como primera fila de Nuevo chat y sus pasos en el mismo panel. */
.chat-workspace.dir-mode .chat-list-head { justify-content: flex-start; gap: 8px; }
.chat-workspace .chat-new-group-icon { display: grid; place-items: center; background: var(--chat-accent); color: var(--chat-on-unread); }
.chat-workspace .chat-new-group-icon .chat-r2-icon { width: 22px; height: 22px; }
.chat-workspace .chat-new-group-row { min-height: 64px; }
/* Elegidos arriba, como chips con su avatar de 20 px (C20) y ×. */
.chat-workspace .chat-group-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: none; max-height: 30%; overflow-y: auto; margin: 0 16px 10px; }
.chat-workspace .chat-group-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 32px; padding: 0 2px 0 6px; border-radius: 999px; background: var(--chat-neutral-soft); color: var(--chat-text); font-size: 13px; font-weight: 500; }
.chat-workspace .chat-group-chip-avatar { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--chat-avatar-background); color: var(--chat-avatar-text); font-size: 8px; font-weight: 600; }
.chat-workspace .chat-group-chip-avatar.agent { background: var(--chat-ai-soft); color: var(--chat-ai-text); }
.chat-workspace .chat-group-chip-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-workspace .chat-group-chip-remove { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--chat-text-secondary); cursor: pointer; }
.chat-workspace .chat-group-chip-remove .chat-r2-icon { width: 14px; height: 14px; }
@media (hover: hover) { .chat-workspace .chat-group-chip-remove:hover { background: var(--chat-active-background); } }
.chat-workspace .chat-group-chip-remove:active { background: var(--chat-active-background); }
/* Filas con círculo de elección a la derecha; tocar la fila elige. */
.chat-workspace .chat-group-option { grid-template-columns: 48px minmax(0, 1fr) 24px; align-items: center; }
.chat-workspace .chat-group-check { display: grid; place-items: center; width: 20px; height: 20px; box-sizing: border-box; border: 1.5px solid var(--chat-check-border); border-radius: 50%; background: var(--chat-list-background); color: transparent; }
.chat-workspace .chat-group-check .chat-r2-icon { width: 12px; height: 12px; stroke-width: 3; }
.chat-workspace .chat-group-option[aria-checked="true"], :root[data-theme] .chat-workspace .chat-group-option[aria-checked="true"] { background: var(--chat-accent-soft); }
.chat-workspace .chat-group-option[aria-checked="true"] .chat-group-check { border-color: var(--chat-check-on); background: var(--chat-check-on); color: var(--chat-on-unread); }
.chat-workspace .chat-list .chat-group-option:focus-visible { outline: none; }
.chat-workspace .chat-list .chat-group-option:focus-visible .chat-group-check { border-color: var(--chat-check-on); box-shadow: 0 0 0 3px var(--chat-check-ring); }
/* Paso del nombre: el campo, el resumen de miembros y la barra fija abajo con «Crear grupo». */
.chat-workspace .chat-group-form { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.chat-workspace .chat-group-name { padding: 16px 16px 12px; }
.chat-workspace .chat-group-name .field { display: grid; gap: 6px; margin: 0 0 12px; }
.chat-workspace .chat-group-name .field label { color: var(--chat-text); font-size: 14px; font-weight: 600; }
.chat-workspace .chat-group-summary { padding: 0; border-radius: 8px; }
.chat-workspace .chat-group-summary p { margin: 0; color: var(--chat-text-secondary); font-size: 13.5px; line-height: 1.45; }
.chat-workspace .chat-group-summary:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.chat-workspace .chat-group-name .feedback-section { margin: 0 0 12px; }
.chat-workspace .chat-group-option { min-height: 64px; }
/* Escritorio (propuesta CH5, paso «Nuevo grupo»): «Crear grupo» va bajo el resumen; en el celular, en la barra fija (C21). */
.chat-workspace .chat-group-form > .chat-group-name { flex: none; }
.chat-workspace .chat-group-form > .chat-group-bar { padding: 12px 16px 16px; border-top: 0; background: transparent; }
@container dedicated-chat (max-width:767px) {
.chat-workspace .chat-group-form > .chat-group-name { flex: 1; }
.chat-workspace .chat-group-form > .chat-group-bar { padding: 10px 12px 14px; border-top: 1px solid var(--chat-border); background: var(--chat-list-background); }
}
/* Barra fija abajo del panel (C21): sólida, con la acción principal a todo el ancho. */
.chat-workspace .chat-group-bar { display: flex; flex: none; padding: 10px 12px 14px; border-top: 1px solid var(--chat-border); background: var(--chat-list-background); }
.chat-workspace .chat-group-bar .button { flex: 1 1 auto; min-height: 40px; border-radius: 999px; } /* C04: el principal es una píldora. */
@container dedicated-chat (max-width:767px) { .chat-workspace .chat-group-bar .button { min-height: 44px; } .chat-workspace .chat-group-chip-remove { width: 32px; height: 32px; } }
/* ===== Chat › Conversaciones · Quién atiende R1 (P1–P5). Medidas de la propuesta aprobada (25-10-2026); colores por token
del tema con su par oscuro (C26). Persona: neutro; empleado IA: morado con user-cog; sin asignar: ocre; tuya: nada. ===== */
/* P2 · píldora del encabezado (escritorio): 32 px, 13 px en una línea, máximo 280 px con «…» (el nombre completo va en title). */
.chat-workspace .chat-owner-header { flex: none; gap: 6px; height: 32px; max-width: 280px; padding: 0 12px 0 10px; border-radius: 999px; font-size: 13px; font-weight: 500; }
.chat-workspace .chat-owner-header.person { padding-left: 6px; }
.chat-workspace .chat-owner-header.unassigned { font-weight: 600; }
.chat-workspace .chat-owner-header .chat-owner-symbol { display: inline-flex; flex: none; }
.chat-workspace .chat-owner-header .chat-owner-avatar { flex: 0 0 20px; width: 20px; height: 20px; font-size: 8px; }
.chat-workspace .chat-owner-header.agent .chat-r2-icon { width: 16px; height: 16px; }
.chat-workspace .chat-owner-header.unassigned .chat-r2-icon { width: 14px; height: 14px; }
.chat-workspace .chat-owner-header > .chat-owner-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* P2 · celular: la misma información en la segunda línea, 12,5 px / 600 con el color de la píldora, 5 px entre ícono y texto. */
@container dedicated-chat (max-width: 859px) {
.chat-workspace .chat-thread-identity .chat-owner-mobile { gap: 5px; font-weight: 600; }
.chat-workspace .chat-owner-mobile.person { color: var(--chat-text-secondary); }
.chat-workspace .chat-owner-mobile .chat-owner-avatar { flex: 0 0 15px; width: 15px; height: 15px; font-size: 7px; }
.chat-workspace .chat-owner-mobile.agent .chat-r2-icon { width: 14px; height: 14px; }
.chat-workspace .chat-owner-mobile.unassigned .chat-r2-icon { width: 13px; height: 13px; }
}
/* P3 · etiqueta de quién atiende en la fila (C15): 20 px, 11,5 px, padding 0 7px 0 4px, 4 px entre ícono y texto, 6 px hasta
el mensaje y como máximo el 60 % de la línea. Mismos colores que la píldora del encabezado (E48). */
.chat-workspace .chat-row-bottom { gap: 6px; }
.chat-workspace .chat-row-bottom > .chat-owner-pill:not(.chat-snooze-pill) { gap: 4px; height: 20px; max-width: 60%; padding: 0 7px 0 4px; font-size: 11.5px; font-weight: 500; }
.chat-workspace .chat-row-bottom > .chat-owner-pill.unassigned { font-weight: 600; }
.chat-workspace .chat-row-bottom > .chat-owner-pill .chat-owner-avatar { flex: 0 0 14px; width: 14px; height: 14px; font-size: 7px; }
.chat-workspace .chat-row-bottom > .chat-owner-pill.agent .chat-r2-icon { flex: none; width: 13px; height: 13px; }
.chat-workspace .chat-row-bottom > .chat-owner-pill.unassigned .chat-r2-icon { flex: none; width: 12px; height: 12px; }
/* P4 · barra de quién atiende (C14): radio 16, padding 10 10 10 16, 10 px entre ícono y texto, texto 13,5 / 1,35 y botones a
la derecha con 8 px; si no entran, bajan a otra línea alineados a la derecha. */
.chat-workspace .chat-ownership-notice:not(.management-only) { gap: 10px 12px; margin: 8px 16px 14px; padding: 10px 10px 10px 16px; border-radius: 16px; }
.chat-workspace .chat-ownership-notice:not(.management-only) > p { flex: 1 1 200px; font-size: 13.5px; line-height: 1.35; }
.chat-workspace .chat-ownership-notice.person { background: var(--chat-list-background); border-color: var(--chat-border); color: var(--chat-text-secondary); }
.chat-workspace .chat-ownership-notice.person > .chat-r2-icon { width: 18px; height: 18px; color: inherit; }
.chat-workspace .chat-ownership-notice.agent { background: var(--chat-ai-soft); border-color: var(--chat-ai-border); color: var(--chat-ai-text); }
.chat-workspace .chat-ownership-notice.agent > .chat-r2-icon { width: 19px; height: 19px; color: inherit; }
.chat-workspace .chat-ownership-notice:is(.unassigned,.activation-failed) { border-color: var(--chat-unassigned-border); }
.chat-workspace .chat-ownership-notice.unassigned > .chat-r2-icon { width: 18px; height: 18px; }
.chat-workspace .chat-ownership-notice .chat-ownership-actions { gap: 8px; }
.chat-workspace .chat-ownership-notice .chat-ownership-actions :is(.button, .chat-assign-menu > [data-chat-menu-trigger]) { height: 40px; min-height: 40px; padding: 0 18px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.chat-workspace :is(.chat-ownership-notice, .chat-contact-block-head) .chat-assign-menu > [data-chat-menu-trigger] { gap: 6px; }
.chat-workspace .chat-assign-menu > [data-chat-menu-trigger] > .chat-r2-icon:first-child { width: 16px; height: 16px; }
.chat-workspace .chat-assign-menu > [data-chat-menu-trigger] > .chat-r2-icon:last-child { width: 15px; height: 15px; }
/* P4 · menú Asignar (C11, guía «Asignar»): 280 px; desde la barra se abre hacia arriba alineado al borde derecho del botón.
Personas: avatar de 26 px, nombre 14 px y «N activas» 12,5 px a la derecha; agentes IA: user-cog morado en un círculo de
26 px y «IA» 11 px / 600 en morado. */
.chat-workspace .chat-assign-menu:not(.chat-assign-header) > .chat-assign-menu-items { width: 280px; }
.chat-workspace .chat-ownership-actions .chat-assign-menu > .chat-assign-menu-items { top: auto; bottom: calc(100% + 8px); right: 0; }
.chat-workspace .chat-assign-menu-items > .bheli-bottom-sheet { gap: 2px; }
.chat-workspace .chat-assign-menu-items .chat-assignment-section { padding: 6px 12px 4px; font-size: 11.5px; }
.chat-workspace .chat-assign-menu-items button { gap: 12px; min-height: 40px; padding: 8px 12px; border-radius: 10px; font-size: 14px; }
.chat-workspace .chat-assign-menu-items .chat-assignee-avatar.agent .chat-r2-icon { width: 15px; height: 15px; }
.chat-workspace .chat-assign-menu-items small { color: var(--chat-text-tertiary); font-size: 12.5px; }
.chat-workspace .chat-assign-menu-items .chat-ai-badge { flex: none; padding: 0; border-radius: 0; background: none; color: var(--chat-ai-text); font-size: 11px; font-weight: 600; }
.chat-workspace :is(.chat-assign-sheet-backdrop, .chat-assign-sheet-title) { display: none; }
/* P4 · celular (C27): el mismo menú en la hoja inferior compartida (ChatBottomSheet): radio 18 arriba, tirador, fondo de la
página, opciones de 52 px y título 16 px / 700 con el texto del botón que la abrió; tocar el fondo la cierra. */
@media (max-width: 767px) {
.chat-workspace .chat-assign-menu[open]:not(.chat-assign-header) > .chat-assign-sheet-backdrop { display: block; position: fixed; inset: 0; z-index: 90; padding: 0; border: 0; border-radius: 0; background: var(--ui-sheet-overlay); cursor: default; }
.chat-workspace .chat-assign-menu:not(.chat-assign-header) > .chat-assign-menu-items,
.chat-workspace .chat-ownership-actions .chat-assign-menu > .chat-assign-menu-items { position: fixed; inset: auto 0 0 0; z-index: 91; width: auto; max-width: none; max-height: 85dvh; overflow-y: auto; padding: 8px 8px calc(20px + env(safe-area-inset-bottom, 0px)); border: 0; border-radius: 18px 18px 0 0; background: var(--chat-list-background); box-shadow: 0 -8px 32px rgba(42,36,32,.16); }
.chat-workspace .chat-assign-menu-items > .bheli-bottom-sheet > .bheli-sheet-handle { margin-bottom: 4px; }
.chat-workspace .chat-assign-menu-items .chat-assign-sheet-title { display: block; padding: 2px 12px 8px; color: var(--chat-text); font-size: 16px; font-weight: 700; }
.chat-workspace .chat-assign-menu:not(.chat-assign-header) .chat-assignment-section { padding: 8px 12px 4px; }
.chat-workspace .chat-assign-menu:not(.chat-assign-header) .chat-assign-menu-items button { min-height: 52px; border-radius: 12px; font-size: 15px; }
.chat-workspace .chat-assign-menu:not(.chat-assign-header) .chat-assignee-avatar { width: 32px; height: 32px; font-size: 11.5px; }
.chat-workspace .chat-assign-menu:not(.chat-assign-header) .chat-assign-menu-items small { font-size: 13px; }
}
/* P4 · celular: los botones bajan a una segunda fila a todo el ancho, de 44 px; 1 : 1,4 si los dos textos entran y, si no, el
secundario toma el ancho de su texto (padding 16 px) y el principal el resto (C21). */
@container dedicated-chat (max-width: 859px) {
.chat-workspace .chat-ownership-notice:not(.management-only) { gap: 10px; margin: 8px 10px calc(12px + env(safe-area-inset-bottom, 0px)); padding: 12px 12px 12px 14px; }
/* Si ni así entran (320 px y «Tomar conversación»), el principal baja a su propia fila a todo el ancho: nunca se sale. */
.chat-workspace .chat-ownership-actions.has-several { flex-wrap: wrap; }
.chat-workspace .chat-ownership-actions.has-several > .chat-assign-menu { flex: 1 1 0; min-width: max-content; }
.chat-workspace .chat-ownership-actions.has-several > .button { flex: 1.4 1 0; min-width: max-content; }
.chat-workspace .chat-ownership-actions.has-several > .chat-assign-menu > [data-chat-menu-trigger] { padding-inline: 16px; }
.chat-workspace .chat-ownership-notice .chat-ownership-actions :is(.button, .chat-assign-menu > [data-chat-menu-trigger]) { height: 44px; min-height: 44px; }
}
/* P5 · panel del contacto: bajo el nombre, el canal con su logo (15 px) y su nombre (13 px, terciario); la bandeja no se repite.
«Agente asignado»: avatar de 32 px y nombre de 15 px; empleado IA en morado con user-cog de 17 px y «IA». */
.chat-workspace .chat-contact-channel { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; color: var(--chat-text-tertiary); font-size: 13px; }
.chat-workspace .chat-contact-channel-logo { display: grid; place-items: center; flex: none; width: 15px; height: 15px; border-radius: 50%; }
.chat-workspace .chat-contact-channel-logo[data-channel=whatsapp] { background: var(--channel-whatsapp-background); color: var(--channel-whatsapp-foreground); }
.chat-workspace .chat-contact-channel-logo > .chat-r2-icon { width: 100%; height: 100%; }
.chat-workspace .chat-contact-agent { margin-top: 10px; min-height: 36px; }
.chat-workspace .chat-contact-agent-avatar { font-size: 12px; font-weight: 700; }
.chat-workspace .chat-contact-agent-avatar.agent .chat-r2-icon { width: 17px; height: 17px; }
.chat-workspace .chat-contact-agent-name { flex: 0 1 auto; font-size: 15px; font-weight: 400; }
.chat-workspace .chat-contact-agent-ai { flex: none; color: var(--chat-ai-text); font-size: 11px; font-weight: 600; }
/* Toast (C13, C27): centrado sobre la columna de la conversación (--chat-toast-left, positionToast); mientras se ve, la lista
de mensajes deja libre abajo lo que el toast le tapa más 12 px (--chat-toast-space) para que no tape la última línea. */
.chat-workspace .conversation-viewport .chat[data-toast-space] { padding-bottom: var(--chat-toast-space); scroll-padding-bottom: var(--chat-toast-space); }
/* Con left al centro, un fijo solo puede usar el ancho que le queda a la derecha (la mitad en el celular): el toast toma el ancho de su texto, hasta el tope de max-width, y no se parte en dos líneas sin necesidad. */
.chat-workspace .feedback-toast { width: max-content; }
/* P4 (revisión del dueño): si con los botones al lado el texto pasa de 2 líneas, los botones bajan a su propia fila, alineados
a la derecha (data-stacked lo pone ChatOwnershipNotice al medir). */
.chat-workspace .chat-ownership-notice[data-stacked] > .chat-ownership-actions { flex: 1 0 100%; justify-content: flex-end; }
/* Chat de un enlace sin acceso (decisión del dueño, pregunta 1): aviso en línea C14 neutro en el lugar del chat, con volver. */
.chat-workspace .chat-unavailable { display: grid; place-items: center; flex: 1 1 auto; min-height: 100%; padding: 16px; }
.chat-workspace .chat-unavailable > .chat-unavailable-notice { width: min(560px, 100%); margin: 0; }
.chat-workspace .chat-unavailable-notice > .chat-r2-icon { width: 18px; height: 18px; color: inherit; }
/* ===== Archivos del chat R2 (2026-10-31, pedido del dueño: «tiene que parecer WhatsApp» y «todo debe seguir el kit»):
cuadro de texto en una píldora (clip · texto · programar · micrófono o enviar), menú del clip (C11; hoja C27 en el
celular), panel de adjuntos sobre la conversación, barra de la nota de voz y archivos en la burbuja (imagen y video con
marco de 3 px y la hora encima, audio con ▶ y barra, documento como tarjeta, estados). El catálogo no define estas
piezas: se arman con las del chat (C04, C11, C14, C16, C19, C20, C22, C27) y su ficha queda propuesta en
artifacts/chat-media-r2/reporte/pendientes_catalogo.md. Solo el chat (.chat-workspace, también el Dock). ===== */
/* --- Cuadro de texto: una píldora como la referencia Chat Bheli v3 y WhatsApp; la cita ocupa su propia línea. --- */
.chat-workspace .human-composer form[data-media-composer] { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 2px; padding: 4px 5px 4px 6px; }
.chat-workspace .human-composer form[data-media-composer] > .composer-quote { flex: 1 0 100%; }
.chat-workspace .human-composer form[data-media-composer] > textarea { flex: 1 1 0; width: auto; min-width: 0; min-height: 40px; padding: 9px 8px; }
.chat-workspace .human-composer form[data-media-composer] > :is(.chat-attach-menu, .chat-attach-composer, .chat-schedule-composer, .chat-send-button, .chat-mic-button) { flex: none; }
.chat-workspace .human-composer form[data-media-composer] > .chat-schedule-composer { width: 40px; min-width: 40px; height: 40px; }
.chat-workspace .human-composer form[data-media-composer] > .chat-send-button { width: 40px; min-width: 40px; height: 40px; min-height: 40px; padding: 0; }
.chat-workspace .human-composer form[data-media-composer] > .chat-send-button svg { width: 20px; height: 20px; }
/* Mientras hay una nota de voz en curso, su barra reemplaza al cuadro (que sigue en la página con su borrador). */
.chat-workspace .human-composer[data-recording="true"] > form[data-media-composer] { display: none; }
/* Botones de ícono del cuadro, de la barra de la nota de voz y del documento (C04: redondos, sin fondo). */
.chat-workspace .chat-attach-composer,
.chat-workspace .human-composer .chat-mic-button,
.chat-workspace .chat-recorder-action,
.chat-workspace .chat-media-download { display: grid; place-items: center; width: 40px; min-width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--chat-text-secondary); cursor: pointer; font: inherit; -webkit-tap-highlight-color: transparent; }
.chat-workspace :is(.chat-attach-composer, .chat-mic-button, .chat-recorder-action, .chat-media-download) .chat-r2-icon { width: 20px; height: 20px; }
@media (hover: hover) {
.chat-workspace :is(.chat-attach-composer, .chat-schedule-composer, .chat-mic-button, .chat-recorder-action, .chat-media-download):not(:disabled):hover { background: var(--chat-neutral-soft); color: var(--chat-text); }
}
.chat-workspace :is(.chat-attach-composer, .chat-schedule-composer, .chat-mic-button, .chat-recorder-action, .chat-media-download):not(:disabled):active { background: var(--chat-active-background); }
.chat-workspace .chat-attach-menu[open] > .chat-attach-composer { background: var(--chat-neutral-soft); color: var(--chat-text); }
/* E65: el desactivado genérico pinta un círculo gris; un botón de ícono se ve apagado, sin fondo. */
.chat-workspace .human-composer .chat-attach-composer:disabled,
.chat-workspace .human-composer .chat-attach-composer:disabled:hover,
.chat-workspace .msg .chat-media-download:disabled,
.chat-workspace .msg .chat-media-download:disabled:hover { background: transparent; border-color: transparent; color: var(--chat-text-tertiary); opacity: .55; cursor: default; }
.chat-workspace .human-composer .chat-recorder-send .chat-r2-icon { width: 22px; height: 22px; }
/* --- Menú del clip (C11): sobre el clip, alineado a su borde izquierdo; opciones de 40 px con ícono de 18 px. --- */
.chat-workspace .chat-attach-menu { position: relative; display: flex; }
.chat-workspace .chat-attach-menu-items { position: absolute; z-index: 20; left: 0; bottom: calc(100% + 10px); width: max-content; min-width: 240px; max-width: 320px; padding: 6px; border: 1px solid var(--chat-border); border-radius: var(--chat-menu-radius); background: var(--chat-list-background); box-shadow: var(--chat-menu-shadow); }
.chat-workspace .chat-attach-menu-items > .bheli-bottom-sheet { gap: 2px; height: auto; }
.chat-workspace .chat-attach-menu-items button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 40px; padding: 10px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--chat-text); font: inherit; font-size: 14px; line-height: 1.3; text-align: start; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.chat-workspace .chat-attach-menu-items button .chat-r2-icon { flex: none; width: 18px; height: 18px; color: var(--chat-text-secondary); }
@media (hover: hover) {
.chat-workspace .chat-attach-menu-items button:hover { background: var(--chat-active-background); }
}
.chat-workspace .chat-attach-menu-items button:active { background: var(--chat-accent-soft); }
.chat-workspace .chat-attach-sheet-backdrop { display: none; }
/* --- Barra de la nota de voz, como WhatsApp: descartar · punto y duración · pausar · enviar, en la misma píldora. --- */
.chat-workspace .human-composer .chat-recorder { display: flex; align-items: center; justify-content: flex-end; gap: 4px; min-height: 48px; padding: 4px 5px 4px 6px; }
.chat-workspace .chat-recorder-state { display: flex; flex: 0 1 auto; align-items: center; gap: 8px; min-width: 0; margin-inline: 4px 8px; color: var(--chat-text); font-size: 14px; }
.chat-workspace .chat-recorder-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--chat-text-tertiary); }
.chat-workspace .chat-recorder-dot.live { background: var(--error); animation: chat-recorder-pulse 1.2s ease-in-out infinite; }
@keyframes chat-recorder-pulse { 50% { opacity: .35; } }
.chat-workspace .chat-recorder-clock { flex: none; min-width: 4ch; font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }
.chat-workspace .chat-recorder-text { min-width: 0; overflow: hidden; color: var(--chat-text-secondary); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.chat-workspace .chat-recorder-state[data-failed="true"] { flex: 1 1 auto; }
.chat-workspace .chat-recorder-state[data-failed="true"] .chat-recorder-text { color: var(--error); white-space: normal; }
.chat-workspace .chat-recorder-alert { flex: none; width: 18px; height: 18px; color: var(--error); }
.chat-workspace .human-composer .chat-recorder .chat-media-retry { flex: none; }
.chat-workspace .human-composer .chat-recorder .chat-recorder-send { width: 40px; min-width: 40px; height: 40px; min-height: 40px; padding: 0; }
/* --- Panel de adjuntos: tapa los mensajes (escritorio) o toda la conversación (celular), como WhatsApp. --- */
.chat-workspace .chat-detail { position: relative; }
.chat-workspace .chat-attach-host { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; min-height: 0; }
.chat-workspace .chat-attach-panel { display: grid; flex: 1 1 auto; grid-template-rows: auto minmax(0, 1fr) auto auto; min-height: 0; background: var(--chat-thread-background); color: var(--chat-text); }
.chat-workspace .chat-attach-head { display: flex; align-items: center; min-height: 56px; padding: 8px 12px; }
.chat-workspace .chat-attach-close { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--chat-text); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.chat-workspace .chat-attach-close .chat-r2-icon { width: 22px; height: 22px; }
@media (hover: hover) {
.chat-workspace .chat-attach-close:not(:disabled):hover { background: var(--chat-neutral-soft); }
}
.chat-workspace .chat-attach-close:not(:disabled):active { background: var(--chat-active-background); }
.chat-workspace .chat-attach-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; min-height: 0; padding: 8px 24px 16px; overflow: hidden; }
/* La imagen entra entera; un fondo claro deja ver las de fondo transparente (un logo oscuro no queda invisible). */
.chat-workspace .chat-attach-image { display: block; flex: 0 1 auto; max-width: 100%; max-height: 100%; min-height: 0; border-radius: 4px; background: #F3EEE9; object-fit: contain; }
.chat-workspace .chat-attach-video { display: block; flex: 0 1 auto; max-width: 100%; max-height: 100%; min-height: 0; border-radius: 4px; background: #1E1A17; }
.chat-workspace .chat-attach-card { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: min(420px, 100%); text-align: center; }
.chat-workspace .chat-attach-card-icon { display: grid; place-items: center; width: 88px; height: 88px; margin-bottom: 4px; border-radius: 20px; background: var(--chat-list-background); color: var(--chat-accent-text); box-shadow: var(--chat-bubble-shadow); }
.chat-workspace .chat-attach-card-icon .chat-r2-icon { width: 40px; height: 40px; }
.chat-workspace .chat-attach-card-name { display: -webkit-box; overflow: hidden; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.chat-workspace .chat-attach-card-detail { color: var(--chat-text-secondary); font-size: 13px; }
.chat-workspace .chat-attach-problem { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; max-width: min(520px, 100%); }
.chat-workspace .chat-attach-problem p { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--error); font-size: 13.5px; }
.chat-workspace .chat-attach-problem p .chat-r2-icon { flex: none; width: 18px; height: 18px; }
.chat-workspace .chat-attach-compose { display: grid; justify-items: center; gap: 8px; padding: 0 24px 16px; }
.chat-workspace .chat-attach-compose > * { width: min(480px, 100%); }
.chat-workspace .chat-attach-recovery { margin: 0; color: var(--chat-text-secondary); font-size: 13px; text-align: center; }
.chat-workspace .chat-attach-compose > .chat-error { margin: 0; }
.chat-workspace .chat-attach-quote { margin: 0; }
/* El comentario: la misma píldora blanca del cuadro de texto. */
.chat-workspace .chat-attach-caption { display: flex; border-radius: 24px; background: var(--chat-list-background); box-shadow: var(--chat-bubble-shadow); }
.chat-workspace .chat-attach-caption:focus-within { box-shadow: 0 0 0 1px var(--chat-accent), var(--chat-bubble-shadow); }
.chat-workspace .chat-attach-caption textarea { flex: 1 1 auto; min-width: 0; min-height: 44px; max-height: calc(5 * 1.42em + 20px); padding: 11px 18px; border: 0; border-radius: 24px; background: transparent; color: var(--chat-text); font: inherit; font-size: 14px; line-height: 1.42; resize: none; field-sizing: content; overflow-y: auto; }
.chat-workspace .chat-attach-caption textarea:focus-visible { outline: none; box-shadow: none; }
.chat-workspace .chat-attach-caption textarea::placeholder { color: var(--chat-text-tertiary); opacity: 1; }
/* Abajo, sobre una línea: las miniaturas al centro y Enviar a la derecha. */
.chat-workspace .chat-attach-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 4px 20px 16px; border-top: 1px solid var(--chat-border); }
.chat-workspace .chat-attach-strip { display: flex; align-items: center; justify-content: safe center; gap: 10px; min-width: 0; padding: 14px 14px 6px; overflow-x: auto; scrollbar-width: thin; }
.chat-workspace .chat-attach-thumb { position: relative; flex: none; width: 56px; height: 56px; }
.chat-workspace .chat-attach-thumb-pick { position: relative; display: grid; place-items: center; width: 100%; height: 100%; padding: 0; overflow: hidden; border: 1px solid var(--chat-border); border-radius: 8px; background: var(--chat-list-background); color: var(--chat-text-secondary); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.chat-workspace .chat-attach-thumb-pick > :is(img, video) { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
/* Detrás de una imagen, un fondo claro: una de fondo transparente (un logo oscuro) se ve también en oscuro. */
.chat-workspace .chat-attach-thumb-pick > img { background: #F3EEE9; }
/* La elegida: borde terracota de 2 px (el color del anillo del kit); el foco del teclado sigue siendo el anillo, por fuera. */
.chat-workspace .chat-attach-thumb[data-selected] .chat-attach-thumb-pick::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--focus-ring-accent, var(--chat-accent)); border-radius: 8px; pointer-events: none; }
.chat-workspace .chat-attach-thumb[data-state="error"] .chat-attach-thumb-pick { border-color: var(--error); }
.chat-workspace .chat-attach-thumb-file { display: grid; justify-items: center; gap: 1px; color: var(--chat-accent-text); }
.chat-workspace .chat-attach-thumb-file .chat-r2-icon { width: 22px; height: 22px; }
.chat-workspace .chat-attach-thumb-file small { color: var(--chat-text-secondary); font-size: 11px; font-weight: 600; line-height: 1.2; }
.chat-workspace .chat-attach-thumb-badge { position: absolute; left: 4px; bottom: 3px; display: flex; color: #FFFFFF; filter: drop-shadow(0 1px 1px rgb(0 0 0 / .5)); }
.chat-workspace .chat-attach-thumb-badge .chat-r2-icon { width: 14px; height: 14px; }
.chat-workspace :is(.chat-attach-thumb-busy, .chat-attach-thumb-error) { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 7px; background: rgb(30 26 23 / .45); pointer-events: none; }
.chat-workspace .chat-attach-thumb-busy .chat-spinner { width: 20px; height: 20px; border-color: rgb(255 255 255 / .45); border-top-color: #FFFFFF; }
.chat-workspace .chat-attach-thumb-error { background: rgb(30 26 23 / .3); }
.chat-workspace .chat-attach-thumb-error .chat-r2-icon { width: 24px; height: 24px; padding: 2px; border-radius: 50%; background: #FFFFFF; color: oklch(0.5 0.17 25); }
/* La × de cada miniatura: al pasar el mouse o con el foco (siempre visible en pantallas táctiles, 44 px de zona). */
.chat-workspace .chat-attach-thumb-remove { position: absolute; z-index: 2; top: -11px; right: -11px; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--chat-list-background); opacity: 0; pointer-events: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.chat-workspace .chat-attach-thumb-remove::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--chat-text); box-shadow: 0 1px 2px rgb(42 36 32 / .25); }
.chat-workspace .chat-attach-thumb-remove .chat-r2-icon { position: relative; width: 14px; height: 14px; stroke-width: 2.5; }
.chat-workspace .chat-attach-thumb:is(:hover, :focus-within) .chat-attach-thumb-remove { opacity: 1; pointer-events: auto; }
@media (hover: hover) {
.chat-workspace .chat-attach-thumb-remove:hover::before { background: var(--chat-text-secondary); }
}
.chat-workspace .chat-attach-add { display: grid; flex: none; place-items: center; width: 56px; height: 56px; padding: 0; border: 1px solid var(--control-border, #978A80); border-radius: 8px; background: var(--chat-list-background); color: var(--chat-text); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.chat-workspace .chat-attach-add .chat-r2-icon { width: 22px; height: 22px; }
@media (hover: hover) {
.chat-workspace .chat-attach-add:hover { background: var(--chat-neutral-soft); }
}
.chat-workspace .chat-attach-add:active { background: var(--chat-active-background); }
/* Enviar: el botón principal redondo del chat, con el número de archivos (como el contador del botón Chats). */
.chat-workspace .chat-attach-send { position: relative; display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background: var(--chat-accent); color: var(--primary-contrast, #FFFFFF); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.chat-workspace .chat-attach-send .chat-r2-icon { width: 24px; height: 24px; }
.chat-workspace .chat-attach-send .chat-spinner { width: 20px; height: 20px; border-color: rgb(255 255 255 / .45); border-top-color: currentColor; }
@media (hover: hover) {
.chat-workspace .chat-attach-send:not(:disabled):hover { background: var(--chat-accent-hover); }
}
.chat-workspace .chat-attach-send:not(:disabled):active { background: oklch(0.44 0.13 40); }
.chat-workspace .chat-attach-count { position: absolute; top: -4px; right: -4px; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border: 2px solid var(--chat-accent); border-radius: 11px; background: var(--chat-list-background); color: var(--chat-accent-text); font-size: 11.5px; font-weight: 700; line-height: 1; }
.chat-workspace .chat-attach-send:disabled .chat-attach-count { border-color: #D9CFC6; color: var(--chat-text-secondary); }
.chat-workspace .chat-attach-panel[data-loading] { display: block; }
/* --- Burbuja con archivo --- */
/* Imagen y video listos: marco de 3 px del color de la burbuja, esquinas de 7 px y hasta 330 px de ancho (WhatsApp). */
.chat-workspace .msg.msg-visual { padding: 3px; max-width: min(336px, 85%); }
.chat-workspace .msg.msg-visual > .who { padding: 3px 7px 2px; }
.chat-workspace .msg.msg-visual > .msg-quote { margin: 0 0 3px; }
.chat-workspace .chat .msg.msg-visual .msg-body [data-msg-text] { padding: 4px 7px 3px; }
.chat-workspace .chat .msg.msg-visual .msg-body > .msg-meta { inset-inline-end: 7px; bottom: -2px; }
.chat-workspace .chat-media-visual { position: relative; display: block; width: fit-content; max-width: 100%; overflow: hidden; border-radius: 7px; line-height: 0; }
.chat-workspace .chat-media-image { display: block; max-width: 100%; height: auto; padding: 0; overflow: hidden; border: 0; border-radius: 7px; background: var(--chat-neutral-soft); cursor: zoom-in; }
/* La primera vez el navegador la dimensiona al llegar: entra en 330 × 330 con su proporción, nunca menos de 160 × 120 (lo
que sobra se recorta). Con sus medidas ya conocidas (data-sized) la burbuja reserva ese mismo lugar desde el inicio. */
.chat-workspace .chat-media-image:not([data-sized]) img { width: auto; height: auto; max-width: min(330px, 100%); max-height: 330px; min-width: min(160px, 100%); min-height: 120px; }
.chat-workspace .chat-media-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.chat-workspace .chat-media-video { display: block; width: 330px; max-width: 100%; height: auto; max-height: 330px; border-radius: 7px; background: #1E1A17; object-fit: cover; }
/* Sin pie: la hora y los vistos encima de la imagen, abajo a la derecha, sobre un degradado oscuro. */
.chat-workspace .chat-media-visual:is([data-has-meta], [data-kind="video"]):not([data-playing])::after { content: ""; position: absolute; inset: auto 0 0 0; height: 40px; border-radius: 0 0 7px 7px; background: linear-gradient(to top, rgb(0 0 0 / .5), transparent); pointer-events: none; }
.chat-workspace .chat .msg .chat-media-visual > .msg-meta { z-index: 2; inset: auto 8px 5px auto; color: #FFFFFF; line-height: 1.2; text-shadow: 0 1px 2px rgb(0 0 0 / .45); }
.chat-workspace .chat .msg .chat-media-visual > .msg-meta :is(time, .msg-delivery-check) { color: inherit; }
.chat-workspace .chat .msg .chat-media-visual > .msg-meta .msg-delivery-check[data-delivery-status="READ"] { color: oklch(0.82 0.09 50); }
/* Video: ▶ al centro y su duración abajo a la izquierda (al reproducir, sus controles). */
.chat-workspace .chat-media-play { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; width: 56px; height: 56px; margin: auto; padding: 0; border: 0; border-radius: 50%; background: rgb(0 0 0 / .5); color: #FFFFFF; cursor: pointer; }
.chat-workspace .chat-media-play .chat-r2-icon { width: 24px; height: 24px; margin-left: 3px; fill: currentColor; }
@media (hover: hover) {
.chat-workspace .chat-media-play:hover { background: rgb(0 0 0 / .62); }
}
.chat-workspace .chat-media-duration { position: absolute; z-index: 2; left: 8px; bottom: 5px; display: flex; align-items: center; gap: 4px; color: #FFFFFF; font-size: 11px; line-height: 1.2; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px rgb(0 0 0 / .45); }
.chat-workspace .chat-media-duration .chat-r2-icon { width: 14px; height: 14px; }
/* El ⌄ del mensaje sobre una imagen sin nombre ni cita arriba: blanco sobre un degradado oscuro, como WhatsApp. */
.chat-workspace .msg.msg-visual-top .msg-menu { top: 3px; right: 3px; }
.chat-workspace .msg.msg-visual-top .msg-menu > :is(summary,[data-chat-menu-trigger]) { border-radius: 0 7px 0 0; background: radial-gradient(farthest-side at top right, rgb(0 0 0 / .45), transparent); color: #FFFFFF; }
/* Audio y nota de voz: ▶/⏸ · barra con su punto · duración debajo a la izquierda y la hora a la derecha. */
.chat-workspace .chat-media-audio { position: relative; display: flex; align-items: center; gap: 8px; width: 300px; max-width: 100%; min-height: 44px; padding: 2px 0 13px; }
.chat-workspace .chat-media-audio-play { display: grid; flex: none; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--chat-text-secondary); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.chat-workspace .chat-media-audio-play .chat-r2-icon { width: 22px; height: 22px; fill: currentColor; }
@media (hover: hover) {
.chat-workspace button.chat-media-audio-play:hover { background: color-mix(in oklab, currentColor 10%, transparent); }
}
.chat-workspace .chat-media-audio-track { display: flex; flex: 1 1 auto; align-items: center; min-width: 0; height: 24px; }
/* Más peso que el fondo y el borde generales de los campos (color-controls.css, 0,3,1): el control deslizante no es un campo. */
.chat-workspace .chat-media-audio input.chat-media-audio-seek[type="range"] { width: 100%; height: 24px; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; appearance: none; -webkit-appearance: none; }
.chat-workspace .chat-media-audio-seek::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--chat-accent) var(--chat-media-progress, 0%), color-mix(in oklab, var(--chat-text) 22%, transparent) var(--chat-media-progress, 0%)); }
.chat-workspace .chat-media-audio-seek::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--chat-accent) var(--chat-media-progress, 0%), color-mix(in oklab, var(--chat-text) 22%, transparent) var(--chat-media-progress, 0%)); }
.chat-workspace .chat-media-audio-seek::-webkit-slider-thumb { width: 14px; height: 14px; margin-top: -5px; border: 0; border-radius: 50%; background: var(--chat-accent); -webkit-appearance: none; appearance: none; }
.chat-workspace .chat-media-audio-seek::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--chat-accent); }
.chat-workspace .chat-media-audio input.chat-media-audio-seek[type="range"]:disabled { cursor: default; opacity: 1; background: transparent; }
.chat-workspace .chat-media-audio-seek:focus-visible { outline: none; box-shadow: none; }
.chat-workspace .chat-media-audio-seek:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--msg-bg, var(--chat-list-background)), 0 0 0 4px var(--focus-ring-accent, var(--chat-accent)); }
.chat-workspace .chat-media-audio-seek:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px var(--msg-bg, var(--chat-list-background)), 0 0 0 4px var(--focus-ring-accent, var(--chat-accent)); }
.chat-workspace .chat-media-audio[aria-busy] .chat-media-audio-track::before { content: ""; width: 100%; height: 4px; border-radius: 2px; background: color-mix(in oklab, var(--chat-text) 22%, transparent); }
.chat-workspace .chat-media-audio-time { position: absolute; left: 100px; bottom: -3px; color: var(--chat-text-tertiary); font-size: 11px; line-height: 1.42; font-variant-numeric: tabular-nums; }
.chat-workspace .chat .msg .chat-media-audio > .msg-meta { inset: auto 0 -3px auto; }
.chat-workspace .chat-media-voice { position: relative; flex: none; width: 44px; height: 44px; }
.chat-workspace .chat-media-voice-avatar { --chat-avatar-background: oklch(0.93 0.035 var(--chat-avatar-hue, 50)); --chat-avatar-text: oklch(0.42 0.08 var(--chat-avatar-hue, 50)); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--chat-avatar-background); color: var(--chat-avatar-text); font-size: 15px; font-weight: 600; }
.chat-workspace .chat-media-voice-avatar.agent { background: var(--chat-ai-soft); color: var(--chat-ai-text); }
.chat-workspace .chat-media-voice-avatar > .chat-avatar-content { display: grid; place-items: center; }
.chat-workspace .chat-media-voice-avatar .chat-r2-icon { width: 22px; height: 22px; }
:root[data-theme="dark"] .chat-workspace .chat-media-voice-avatar:not(.agent) { background: oklch(.32 .035 var(--chat-avatar-hue,50)); color: oklch(.85 .05 var(--chat-avatar-hue,50)); }
.chat-workspace .chat-media-voice-mic { position: absolute; right: -3px; bottom: -2px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--msg-bg, var(--chat-list-background)); color: var(--chat-accent); }
.chat-workspace .chat-media-voice-mic .chat-r2-icon { width: 14px; height: 14px; stroke-width: 2.25; }
/* Documento: tarjeta con el ícono de su tipo, el nombre y Descargar; debajo «PDF · 1,2 MB» y la hora. */
.chat-workspace .chat-media-document { width: 300px; max-width: 100%; margin-top: 1px; }
.chat-workspace .chat-media-document-card { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 4px 8px 10px; border-radius: 8px; background: color-mix(in oklab, var(--chat-text) 6%, transparent); }
.chat-workspace .chat-media-document-icon { display: grid; place-items: center; width: 36px; height: 40px; color: var(--chat-accent-text); }
.chat-workspace .chat-media-document-icon .chat-r2-icon { width: 30px; height: 30px; stroke-width: 1.5; }
.chat-workspace .chat-media-document-name { display: -webkit-box; overflow: hidden; font-size: 14px; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.chat-workspace .chat-media-document-foot { display: flex; align-items: center; min-height: 18px; padding: 4px 64px 0 2px; }
.chat-workspace .chat-media-document-foot small { color: var(--chat-text-secondary); font-size: 12px; line-height: 1.3; }
/* Estados (descargando, no se pudo, ya no está): una fila; sin pie, la hora en su línea debajo. */
.chat-workspace .chat-media-state { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 1px 0 0; padding: 10px; border-radius: 8px; background: color-mix(in oklab, var(--chat-text) 6%, transparent); color: var(--chat-text-secondary); font-size: 13.5px; }
.chat-workspace .chat-media-state-icon { flex: none; width: 20px; height: 20px; color: var(--chat-text-tertiary); }
.chat-workspace .chat-media-state:is([data-media-state="failed"], [data-media-state="load-failed"]) .chat-media-state-icon { color: var(--error); }
.chat-workspace .chat-media-state-text { display: flex; flex: 1 1 140px; flex-direction: column; min-width: 0; }
.chat-workspace .chat-media-state-name { overflow: hidden; color: var(--chat-text-tertiary); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.chat-workspace .chat-media-foot { min-height: 18px; }
.chat-workspace .msg.msg-media:not(.msg-visual) { min-width: min(240px, 100%); }
.chat-workspace .chat-media-retry { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; font-size: 13px; white-space: nowrap; }
.chat-workspace .chat-media-retry .chat-r2-icon { width: 15px; height: 15px; }
/* --- Visor de imágenes: a pantalla completa sobre un fondo oscuro; ‹ › recorren las de la conversación. --- */
.chat-workspace dialog.chat-media-viewer { position: fixed; inset: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 72px 80px 24px; border: 0; background: transparent; box-shadow: none; color: #FFFFFF; }
.chat-workspace dialog.chat-media-viewer[open] { display: flex; align-items: center; justify-content: center; }
.chat-workspace dialog.chat-media-viewer::backdrop { background: rgb(30 26 23); }
.chat-workspace .chat-media-viewer-bar { position: absolute; top: 8px; right: 8px; left: 20px; display: flex; align-items: center; gap: 4px; }
.chat-workspace .chat-media-viewer-who { display: flex; flex-direction: column; min-width: 0; margin-right: auto; line-height: 1.3; }
.chat-workspace .chat-media-viewer-who strong { overflow: hidden; font-size: 15px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.chat-workspace .chat-media-viewer-who span { color: rgb(255 255 255 / .82); font-size: 12.5px; }
.chat-workspace .chat-media-viewer-action,
.chat-workspace .chat-media-viewer-nav { display: grid; flex: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #FFFFFF; cursor: pointer; }
.chat-workspace .chat-media-viewer-action .chat-r2-icon { width: 22px; height: 22px; }
.chat-workspace .chat-media-viewer-nav { position: absolute; top: 0; bottom: 0; width: 48px; height: 48px; margin: auto 0; background: rgb(255 255 255 / .12); }
.chat-workspace .chat-media-viewer-nav[data-direction="previous"] { left: 16px; }
.chat-workspace .chat-media-viewer-nav[data-direction="next"] { right: 16px; }
.chat-workspace .chat-media-viewer-nav .chat-r2-icon { width: 26px; height: 26px; }
@media (hover: hover) {
.chat-workspace :is(.chat-media-viewer-action, .chat-media-viewer-nav):hover { background: rgb(255 255 255 / .2); }
}
.chat-workspace :is(.chat-media-viewer-action, .chat-media-viewer-nav):active { background: rgb(255 255 255 / .26); }
.chat-workspace .chat-media-viewer-figure { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 100%; max-height: 100%; min-height: 0; margin: 0; }
.chat-workspace .chat-media-viewer-image { display: block; max-width: 100%; max-height: calc(100dvh - 140px); min-height: 0; border-radius: 4px; object-fit: contain; }
.chat-workspace .chat-media-viewer-figure figcaption { max-width: 640px; color: #FFFFFF; font-size: 14px; line-height: 1.42; text-align: center; overflow-wrap: anywhere; }
/* --- Celular: todo lo que se toca mide 44 px; el panel ocupa toda la conversación y el menú del clip es la hoja. --- */
@media (max-width: 767px) {
.chat-workspace .human-composer form[data-media-composer] > textarea { min-height: 44px; padding-block: 11px; }
.chat-workspace .human-composer form[data-media-composer] > :is(.chat-schedule-composer, .chat-send-button),
.chat-workspace .chat-attach-composer,
.chat-workspace .human-composer .chat-mic-button,
.chat-workspace .chat-recorder-action,
.chat-workspace .chat-media-download,
.chat-workspace .human-composer .chat-recorder .chat-recorder-send,
.chat-workspace .chat-media-audio-play { width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
.chat-workspace .chat-media-retry { min-height: 44px; }
.chat-workspace .chat-media-audio input.chat-media-audio-seek[type="range"] { height: 44px; }
.chat-workspace .chat-media-audio-track { height: 44px; }
.chat-workspace .chat-media-audio-time { left: 104px; }
.chat-workspace .chat-attach-menu[open] > .chat-attach-sheet-backdrop { display: block; position: fixed; inset: 0; z-index: 90; padding: 0; border: 0; border-radius: 0; background: var(--ui-sheet-overlay); cursor: default; }
.chat-workspace .chat-attach-menu > .chat-attach-menu-items { position: fixed; inset: auto 0 0 0; z-index: 91; width: auto; min-width: 0; max-width: none; max-height: 85dvh; overflow-y: auto; padding: 8px 8px calc(20px + env(safe-area-inset-bottom, 0px)); border: 0; border-radius: 18px 18px 0 0; background: var(--chat-list-background); box-shadow: 0 -8px 32px rgba(42,36,32,.16); }
.chat-workspace .chat-attach-menu-items > .bheli-bottom-sheet > .bheli-sheet-handle { margin-bottom: 4px; }
.chat-workspace .chat-attach-menu-items button { min-height: 52px; border-radius: 12px; font-size: 15px; }
.chat-workspace .chat-attach-host { z-index: 40; }
.chat-workspace .chat-attach-head { min-height: 56px; padding: 6px 4px; }
.chat-workspace .chat-attach-close { width: 44px; height: 44px; }
.chat-workspace .chat-attach-stage { padding: 4px 12px 12px; }
.chat-workspace .chat-attach-compose { padding: 0 12px 12px; }
.chat-workspace .chat-attach-caption textarea { font-size: 16px; }
/* Como WhatsApp en el celular: las miniaturas en su fila (con «+» primero, siempre a la vista) y debajo el comentario
con Enviar al lado; la tira ya no pasa por debajo de Enviar. */
.chat-workspace .chat-attach-panel { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head head" "stage stage" "strip strip" "compose send"; }
.chat-workspace .chat-attach-head { grid-area: head; }
.chat-workspace .chat-attach-stage { grid-area: stage; }
.chat-workspace .chat-attach-foot { display: contents; }
.chat-workspace .chat-attach-strip { grid-area: strip; justify-content: flex-start; gap: 16px; padding: 18px 16px 10px; border-top: 1px solid var(--chat-border); }
.chat-workspace .chat-attach-add { order: -1; }
.chat-workspace .chat-attach-compose { grid-area: compose; padding: 0 8px calc(12px + env(safe-area-inset-bottom, 0px)) 12px; }
.chat-workspace .chat-attach-compose > * { width: 100%; }
.chat-workspace .chat-attach-send { grid-area: send; align-self: end; width: 48px; height: 48px; margin: 0 12px calc(12px + env(safe-area-inset-bottom, 0px)) 0; }
.chat-workspace .chat-attach-thumb, .chat-workspace .chat-attach-add { width: 56px; height: 56px; }
.chat-workspace .chat-attach-thumb-remove { top: -16px; right: -16px; width: 44px; height: 44px; }
.chat-workspace .chat-attach-thumb-remove::before { inset: 10px; }
.chat-workspace .msg.msg-visual { max-width: 85%; }
.chat-workspace dialog.chat-media-viewer { padding: 64px 8px 16px; }
.chat-workspace .chat-media-viewer-nav { top: auto; bottom: 16px; margin: 0; }
}
/* Pantallas táctiles: la × de cada miniatura siempre a la vista y con su zona de 44 px. */
@media (hover: none) {
.chat-workspace .chat-attach-thumb-remove { opacity: 1; pointer-events: auto; top: -16px; right: -16px; width: 44px; height: 44px; }
.chat-workspace .chat-attach-thumb-remove::before { inset: 10px; }
}
@media (max-width: 767px) {
.chat-workspace .chat-attach-thumb-remove { opacity: 1; pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) {
.chat-workspace .chat-recorder-dot.live { animation: none; }
}
/* --- Revisión independiente (2026-10-31) --- */
/* El menú del clip abierto queda por encima de las horas de las burbujas (que tienen su propia capa). */
.chat-workspace .human-composer[data-attach-menu="open"] { z-index: 30; }
/* La miniatura elegida muestra siempre su ×; las demás al pasar el mouse o con el foco. */
.chat-workspace .chat-attach-thumb[data-selected] .chat-attach-thumb-remove { opacity: 1; pointer-events: auto; }
/* Por qué Enviar está apagado (un adjunto con error). */
.chat-workspace .chat-attach-hint { margin: 0; color: var(--chat-text-secondary); font-size: 12.5px; text-align: center; }
/* Ícono del audio (no nota de voz), en el lugar del avatar: audífonos en el tinte terracota (C26). */
.chat-workspace .chat-media-audio-badge { display: grid; flex: none; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--chat-accent-soft); color: var(--chat-accent-text); }
.chat-workspace .chat-media-audio-badge .chat-r2-icon { width: 22px; height: 22px; }
/* Confirmar descartar con la anatomía de C12 del kit (referencia «confirmacion-destino»): 440 px, radio 16, título
16/700, explicación 13,5 px y Cancelar + Descartar a la derecha en píldoras de 40 px (44 en el celular). */
.chat-workspace dialog.chat-attach-confirm { width: min(440px, calc(100vw - 32px)); max-width: none; padding: 20px; border: 1px solid var(--chat-border); border-radius: 16px; background: var(--chat-list-background); color: var(--chat-text); box-shadow: var(--chat-menu-shadow); }
.chat-workspace dialog.chat-attach-confirm[open] { display: flex; flex-direction: column; gap: 12px; }
.chat-workspace dialog.chat-attach-confirm h2 { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.35; }
.chat-workspace dialog.chat-attach-confirm p { margin: 0; color: var(--chat-text-secondary); font-size: 13.5px; line-height: 1.42; }
.chat-workspace dialog.chat-attach-confirm .confirmation-actions { display: flex; justify-content: flex-end; gap: 8px; margin: 8px 0 0; }
.chat-workspace dialog.chat-attach-confirm .confirmation-actions .button { height: 40px; min-height: 40px; padding: 0 18px; border-radius: 999px; font-size: 14px; font-weight: 600; white-space: nowrap; }
/* Celular: el panel va en una ventana nativa a pantalla completa (capa superior), como WhatsApp. */
.chat-workspace dialog.chat-attach-host { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; overflow: hidden; background: var(--chat-thread-background); color: var(--chat-text); }
.chat-workspace dialog.chat-attach-host[open] { display: flex; flex-direction: column; }
.chat-workspace dialog.chat-attach-host::backdrop { background: transparent; }
@media (max-width: 767px) {
.chat-workspace dialog.chat-attach-confirm .confirmation-actions .button { height: 44px; min-height: 44px; }
}
/* ===== C56 · Cuadro de texto del chat (kit 1.14.10, BHELI_CHAT_CUADRO_TEXTO_R1). Escritorio: Adjuntar · Emojis · campo ·
Programar · Nota de voz o Enviar, en una píldora de 48 px; con una línea, el texto y cada ícono comparten el centro
(24 px desde arriba): botones alineados abajo, los de 38 px con 1 px de margen abajo. Solo Enviar lleva relleno. ===== */
.chat-workspace:where(:not(.chat-dock-window[data-fullscreen="false"] *)) .human-composer form[data-media-composer] > :is(.chat-attach-composer, .chat-schedule-composer),
.chat-workspace:where(:not(.chat-dock-window[data-fullscreen="false"] *)) .human-composer form[data-media-composer] > .chat-attach-menu > .chat-attach-composer,
.chat-workspace:where(:not(.chat-dock-window[data-fullscreen="false"] *)) .human-composer form[data-media-composer] .chat-emoji-button { width: 38px; min-width: 38px; height: 38px; min-height: 38px; margin-bottom: 1px; }
.chat-workspace:where(:not(.chat-dock-window[data-fullscreen="false"] *)) .human-composer form[data-media-composer] :is(.chat-attach-composer, .chat-emoji-button, .chat-schedule-composer, .chat-mic-button) { color: var(--chat-composer-icon); }
.chat-workspace:where(:not(.chat-dock-window[data-fullscreen="false"] *)) .human-composer form[data-media-composer] :is(.chat-attach-composer, .chat-emoji-button, .chat-schedule-composer, .chat-mic-button) .chat-r2-icon { width: 19px; height: 19px; }
/* C56 · superficie en claro: sombra 0 1px 2px .08 (oscuro: la superficie del tema sobre el fondo, sin cambio). */
:root:not([data-theme="dark"]) .chat-workspace:where(:not(.chat-dock-window[data-fullscreen="false"] *)) .human-composer form[data-media-composer] { box-shadow: 0 1px 2px rgba(42, 36, 32, .08); }
/* Un solo foco: con el foco en el panel de emojis, la píldora no dibuja el suyo (el buscador ya lo tiene). */
.chat-workspace .human-composer form[data-media-composer]:has(.chat-emoji-panel:focus-within) { outline: none; }
/* El Dock conserva su línea de antes (1,4 con su texto de 16 px). */
.chat-dock-window[data-fullscreen="false"] .human-composer textarea { line-height: 1.4; }
.chat-workspace .human-composer form[data-media-composer] > .chat-mic-button { width: 40px; min-width: 40px; height: 40px; min-height: 40px; }
/* Emojis: botón de ícono de C04 (sin fondo, hover y presionado como Adjuntar). */
.chat-workspace .chat-emoji { position: relative; display: flex; flex: none; }
.chat-workspace .chat-emoji-button { display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; font: inherit; -webkit-tap-highlight-color: transparent; }
@media (hover: hover) {
.chat-workspace .chat-emoji-button:not(:disabled):hover { background: var(--chat-neutral-soft); color: var(--chat-text); }
}
.chat-workspace .chat-emoji-button:not(:disabled):active { background: var(--chat-active-background); }
.chat-workspace .chat-emoji-button[aria-expanded="true"] { background: var(--chat-neutral-soft); color: var(--chat-text); }
.chat-workspace .human-composer .chat-emoji-button:disabled { background: transparent; color: var(--chat-text-tertiary); opacity: .55; cursor: default; }
/* Panel de emojis: flotante como un menú de C11, 352 × 380 px, sobre el botón y alineado a su borde izquierdo, a 8 px. */
.chat-workspace .human-composer:has(.chat-emoji-panel) { z-index: 30; }
.chat-workspace .chat-emoji-panel { position: absolute; z-index: 20; left: 0; bottom: calc(100% + 8px); display: flex; flex-direction: column; box-sizing: border-box; width: 352px; height: 380px; border: 1px solid var(--ui-menu-border); border-radius: 14px; background: var(--chat-list-background); color: var(--chat-text); box-shadow: var(--chat-menu-shadow); overflow: hidden; }
.chat-workspace .chat-emoji-panel .chat-emoji-search { flex: none; margin: 8px 8px 4px; }
.chat-workspace .chat-emoji-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 0 4px 8px; overscroll-behavior: contain; scrollbar-width: thin; }
.chat-workspace .chat-emoji-rows { position: relative; width: 100%; }
.chat-workspace .chat-emoji-rows > * { position: absolute; top: 0; left: 0; right: 0; }
/* Título de grupo de C11: 11,5 px en mayúsculas, el gris terciario; fila de 30 px con el texto abajo. */
.chat-workspace .chat-emoji-group-title { display: flex; align-items: flex-end; box-sizing: border-box; height: 30px; padding: 0 8px 6px; color: var(--chat-text-tertiary); font-size: 11.5px; font-weight: 600; letter-spacing: .04em; line-height: 16px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-workspace .chat-emoji-grid { display: grid; grid-template-columns: repeat(9, 36px); justify-content: center; height: 36px; }
.chat-workspace .chat-emoji-cell { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 8px; background: transparent; font: inherit; font-size: 22px; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; }
@media (hover: hover) {
.chat-workspace .chat-emoji-cell:hover { background: var(--chat-active-background); }
}
.chat-workspace .chat-emoji-cell:active { background: var(--chat-accent-soft); }
.chat-workspace .chat-emoji-state { margin: 0; padding: 16px 12px; color: var(--chat-text-secondary); font-size: 13.5px; line-height: 1.4; }
.chat-workspace .chat-emoji-retry { padding: 0; border: 0; background: transparent; color: var(--chat-accent-text, var(--chat-accent)); font: inherit; font-weight: 600; cursor: pointer; }
@media (hover: hover) {
.chat-workspace .chat-emoji-retry:hover { text-decoration: underline; }
}
/* Celular (≤ 767 px) y Dock (C44): Adjuntar · campo · Nota de voz o Enviar. Sin Emojis (el teclado trae los suyos) y sin
Programar (se programa desde ⋮ de la conversación); la pantalla completa del Dock es Conversaciones y ahí rige C56. */
.chat-dock-window[data-fullscreen="false"] .human-composer :is(.chat-emoji, .chat-schedule-composer) { display: none; }
@media (max-width: 767px) {
.chat-workspace .human-composer :is(.chat-emoji, .chat-schedule-composer) { display: none; }
/* C56 · celular: margen 8 · 16 · 14 (el Dock conserva el suyo). */
.chat-workspace:where(:not(.chat-dock-window[data-fullscreen="false"] *)) .human-composer { padding: 8px 16px calc(14px + env(safe-area-inset-bottom, 0px)); }
.chat-workspace .human-composer form[data-media-composer] > .chat-attach-menu > .chat-attach-composer,
.chat-workspace .human-composer form[data-media-composer] > .chat-attach-composer,
.chat-workspace .human-composer form[data-media-composer] > .chat-mic-button { width: 44px; min-width: 44px; height: 44px; min-height: 44px; margin-bottom: 0; }
.chat-workspace .human-composer textarea { max-height: calc(5 * 22px + 22px); }
}
/* ===== ⋮ de la conversación (BHELI_CHAT_CUADRO_TEXTO_R2 · C11 1.14.11, C27, C08) ===== */
/* Opciones de menú: presionado con el tinte suave (C11; un claro nunca se vuelve oscuro, ver color-controls.css). */
.chat-workspace :is(.chat-thread-menu-items, .chat-assign-menu-items) .chat-menu-option:not(:disabled):active,
.chat-workspace .chat-transfer-option:active { background: var(--chat-accent-soft); }
.chat-workspace .chat-menu-more > .chat-r2-icon:last-child { width: 16px; height: 16px; margin-left: auto; color: var(--chat-text-tertiary); }
/* Celular: la hoja inferior compartida (C27) con las medidas de la referencia aprobada «menu-conversacion-celular-oscuro»
(Referencia Cuadro de texto celular menu.dc.html): relleno 8 · 8 · 14, opciones de 44 px con relleno 0 · 12, radio 10,
texto 14 px, 12 px entre ícono y texto, íconos de 18 px en el gris de los íconos y separador con 6 · 12 de margen. */
.chat-workspace dialog.chat-thread-sheet .chat-thread-menu-items { position: static; display: flex; flex-direction: column; gap: 0; width: auto; min-width: 0; max-width: none; padding: 0 8px 14px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.chat-workspace dialog.chat-thread-sheet :is(.chat-thread-menu-items, .chat-sheet-options) > :is(a, button) { min-height: 44px; height: auto; padding: 0 12px; gap: 12px; border-radius: 10px; font-size: 14px; white-space: normal; }
.chat-workspace dialog.chat-thread-sheet :is(.chat-thread-menu-items, .chat-sheet-options) > :is(a, button) > svg:first-child { flex: 0 0 18px; width: 18px; height: 18px; }
.chat-workspace dialog.chat-thread-sheet :is(.chat-thread-menu-items, .chat-sheet-options) > :is(a, button):not(:disabled):not([aria-disabled="true"]) > svg:first-child { color: var(--chat-composer-icon); }
.chat-workspace dialog.chat-thread-sheet .chat-menu-divider { margin: 6px 12px; }
.chat-workspace dialog.chat-thread-sheet .chat-sheet-options { position: static; display: flex; flex-direction: column; gap: 0; width: auto; min-width: 0; max-width: none; padding: 0 8px 14px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
/* La hoja se desplaza por dentro cuando no entra (C11: nunca queda cortada); el encabezado «← …» queda arriba. */
.chat-workspace .chat-thread-sheet-body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; outline: none; }
.chat-workspace dialog.chat-thread-sheet .chat-sheet-head { position: sticky; top: 0; z-index: 1; flex: none; background: var(--chat-list-background); }
/* «← {opción}»: ← de 44 px y el título, como «← Elegir fechas» (C07) y «← Ordenar por» (Contactos). */
.chat-workspace .chat-sheet-head { display: flex; align-items: center; gap: 4px; min-height: 56px; padding: 0 8px; }
.chat-workspace .chat-sheet-back { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--chat-text); font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
@media (hover: hover) { .chat-workspace .chat-sheet-back:hover { background: var(--chat-neutral-soft); } }
.chat-workspace .chat-sheet-back:active { background: var(--chat-active-background); }
.chat-workspace .chat-sheet-back .chat-r2-icon { width: 20px; height: 20px; }
.chat-workspace .chat-sheet-title { min-width: 0; overflow: hidden; font-size: 17px; font-weight: 600; line-height: 24px; text-overflow: ellipsis; white-space: nowrap; }
/* «Transferir» (C08, nunca