/* ----- konecia design system ---------------------------------------------------- */
/* Aliases mapped to Konecia design tokens (--kc-*) — Brand Kit v2.1.
   Source of truth: brand/tokens/tokens.css. Do not hardcode hex values here;
   if a new color is needed, add it to tokens.json + tokens.css first. */

:root {
    --bg-content: var(--kc-bg);
    --bg-card: var(--kc-bg-elevated);
    --bg-sidebar: var(--kc-color-ink);
    --bg-sidebar-hover: var(--kc-color-ink-2);
    --bg-sidebar-active: rgba(198, 242, 75, 0.10);
    --bg-header: var(--kc-bg-elevated);

    --color-accent: var(--kc-color-emerald);
    --color-accent-hover: var(--kc-color-emerald-2);
    --color-accent-soft: rgba(16, 185, 129, 0.10);

    --text-primary: var(--kc-fg);
    --text-secondary: var(--kc-fg-muted);
    --text-tertiary: var(--kc-fg-subtle);
    --text-on-sidebar: rgba(244, 241, 234, 0.78);
    --text-on-sidebar-muted: rgba(244, 241, 234, 0.45);
    --text-on-sidebar-active: var(--kc-color-bone);
    --text-on-sidebar-section: rgba(244, 241, 234, 0.5);

    --border: var(--kc-border);
    --border-light: rgba(11, 20, 16, 0.06);

    --color-success: var(--kc-color-success);
    --color-success-bg: rgba(16, 185, 129, 0.15);
    --color-warning: var(--kc-color-warning);
    --color-warning-bg: rgba(245, 158, 11, 0.15);
    --color-danger: var(--kc-color-danger);
    --color-danger-bg: rgba(239, 68, 68, 0.15);
    /* Familia danger normalizada — usar en lugar de los hex hardcoded var(--color-danger-strong) / var(--kc-color-danger) / var(--color-danger-soft) / var(--color-danger-border)
       que aparecían dispersos. Las 3 tonalidades cubren texto fuerte / bg suave / borde claro. */
    --color-danger-strong: #B91C1C;
    --color-danger-soft: #FEF2F2;
    --color-danger-border: #FECACA;
    --color-info: var(--kc-color-info);
    --color-info-bg: rgba(59, 130, 246, 0.15);
    --color-pink: var(--kc-color-ai-suggested);
    --color-pink-bg: rgba(167, 139, 250, 0.15);

    --shadow-sm: var(--kc-shadow-sm);
    --shadow-md: var(--kc-shadow-md);
    --shadow-lg: var(--kc-shadow-lg);

    --radius: var(--kc-radius-md);
    --radius-sm: var(--kc-radius-sm);
    --radius-lg: var(--kc-radius-lg);

    --sidebar-width: 248px;
    --header-height: 76px;
}

/* ----- base --------------------------------------------------------------------- */

html, body { margin: 0; padding: 0; height: 100%; background: var(--bg-content); color: var(--text-primary); }
body { font-family: var(--kc-font-sans); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }

a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-hover); }

::selection { background: var(--color-accent); color: white; }

/* ----- shell -------------------------------------------------------------------- */

.shell { display: grid; grid-template-columns: var(--sidebar-width) 1fr; min-height: 100vh; }

.sidebar {
    background: var(--bg-sidebar);
    color: var(--text-on-sidebar);
    padding: 0;
    position: sticky; top: 0; height: 100vh;
    overflow-y: auto;
    display: flex; flex-direction: column;
}

.sidebar-brand {
    height: var(--header-height);
    display: flex; align-items: center;
    padding: 0 20px;
    border-bottom: 1px solid var(--kc-color-ink-4);
    text-decoration: none;
}
.sidebar-brand-logo {
    /* Brand-kit minimum for the horizontal lockup is comfortable around 40px;
       smaller and the wordmark glyph weight starts looking stranded inside the
       248px-wide ink sidebar. Width is auto to keep the SVG aspect ratio. */
    height: 40px; width: auto;
    max-width: calc(var(--sidebar-width) - 40px);
    display: block;
}

.sidebar nav { flex: 1; padding: 16px 12px; }

.nav-section {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-on-sidebar-section);
    padding: 16px 12px 6px;
}

/* SaaS-scoped sidebar entries — visually distinct from tenant nav. The eyebrow uses
 * the lime accent and the link gets a subtle left border to hint at "Konecia operator
 * scope, not tenant admin scope". */
.nav-section.saas-section {
    color: var(--kc-color-lime, #C6F24B);
    margin-top: 8px;
    border-top: 1px dashed rgba(244, 241, 234, 0.12);
    padding-top: 18px;
}
.nav-link.saas-link {
    border-left: 2px solid var(--kc-color-lime, #C6F24B);
    padding-left: 10px;
}
.nav-link.saas-link i { color: var(--kc-color-lime, #C6F24B); }

.nav-link {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    color: var(--text-on-sidebar);
    font-size: 13.5px; font-weight: 500;
    transition: background 120ms ease, color 120ms ease;
    cursor: pointer;
}
.nav-link:hover { background: var(--bg-sidebar-hover); color: white; }
.nav-link.active {
    background: var(--bg-sidebar-active);
    color: var(--text-on-sidebar-active);
    box-shadow: inset 3px 0 0 var(--color-accent);
}
.nav-link svg, .nav-link i { width: 18px; flex-shrink: 0; opacity: 0.85; font-size: 14px; text-align: center; }
.nav-link.active svg, .nav-link.active i { opacity: 1; color: var(--color-accent); }

.nav-link-overview { margin: 4px 0 6px; }
.nav-link-soon {
    opacity: 0.42;
    cursor: default;
    pointer-events: none;
}
.nav-link-soon:hover { background: transparent; color: var(--text-on-sidebar); }
.nav-soon-badge {
    margin-left: auto;
    font-family: var(--kc-font-mono);
    font-size: 9.5px;
    letter-spacing: var(--kc-tracking-mono);
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: var(--kc-radius-pill);
    background: rgba(244, 241, 234, 0.10);
    color: rgba(244, 241, 234, 0.6);
    font-weight: var(--kc-weight-semibold);
}

.sidebar-footer {
    padding: 16px;
    border-top: 1px solid var(--kc-color-ink-4);
    font-size: 12px; color: var(--text-on-sidebar-muted);
}

/* ----- header ------------------------------------------------------------------- */

.main { display: flex; flex-direction: column; min-width: 0; }

.topbar {
    height: var(--header-height);
    background: var(--bg-header);
    border-bottom: 1px solid var(--border-light);
    padding: 0 28px;
    display: flex; align-items: center; gap: 18px;
    position: sticky; top: 0; z-index: 10;
}
.topbar-search {
    flex: 1; max-width: 460px;
    position: relative;
}
.topbar-search input {
    width: 100%;
    background: #f4f1ec;
    border: 1px solid transparent;
    border-radius: var(--radius);
    padding: 9px 14px 9px 38px;
    font-size: 13.5px;
    font-family: inherit;
    color: var(--text-primary);
    outline: none;
    transition: border-color 120ms ease, background 120ms ease;
}
.topbar-search input:focus { border-color: var(--color-accent); background: white; }
.topbar-search-icon {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px; color: var(--text-tertiary);
    font-size: 13px;
}

.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.icon-btn {
    width: 38px; height: 38px;
    border-radius: 10px;
    border: 1px solid var(--border-light);
    background: white;
    display: grid; place-items: center;
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color 120ms ease, color 120ms ease;
}
.icon-btn:hover { border-color: var(--color-accent); color: var(--color-accent); }
.icon-btn svg { width: 17px; height: 17px; }
.icon-btn i { font-size: 15px; }

.user-pill {
    display: flex; align-items: center; gap: 10px;
    padding: 4px 10px 4px 4px;
    border-radius: 999px;
    border: 1px solid var(--border-light);
    background: white;
    cursor: pointer;
}
.user-pill .avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--kc-color-emerald), var(--kc-color-lime)); color: white; display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.user-pill .meta { line-height: 1.15; }
.user-pill .name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.user-pill .role { font-size: 11px; color: var(--text-secondary); }

/* ----- content ------------------------------------------------------------------ */

.content { flex: 1; padding: 28px 32px; min-width: 0; }
.page-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 22px; gap: 16px; flex-wrap: wrap; }
.page-title { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-secondary); margin-top: 4px; }
.breadcrumb svg { width: 12px; height: 12px; }
.breadcrumb a { color: var(--text-secondary); }
.breadcrumb a:hover { color: var(--color-accent); }
.breadcrumb .crumb-current { color: var(--text-primary); font-weight: 500; }

/* ----- buttons ------------------------------------------------------------------ */

.btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px;
    border-radius: var(--radius);
    font-family: inherit; font-weight: 600; font-size: 13px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 80ms ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--color-accent); color: var(--kc-accent-fg); box-shadow: var(--kc-shadow-button); border-radius: var(--kc-radius-pill); padding: 9px 20px; }
.btn-primary:hover { background: var(--color-accent-hover); color: var(--kc-accent-fg); }
.btn-ghost { background: var(--kc-bg-elevated); color: var(--text-primary); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--color-accent); color: var(--color-accent); }
.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ----- cards / KPI -------------------------------------------------------------- */

.card { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.card-header { padding: 18px 22px; border-bottom: 1px solid var(--border-light); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card-title { font-size: 15px; font-weight: 700; margin: 0; }
.card-body { padding: 18px 22px; }

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 22px; }
.kpi {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
    display: flex; align-items: center; gap: 14px;
    box-shadow: var(--shadow-sm);
    transition: transform 160ms ease, box-shadow 160ms ease;
}
.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.kpi-icon { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; flex-shrink: 0; }
.kpi-icon svg { width: 20px; height: 20px; }
.kpi-icon i { font-size: 19px; }
.kpi-icon.tone-orange { background: var(--color-accent-soft); color: var(--color-accent); }
.kpi-icon.tone-green { background: var(--color-success-bg); color: var(--color-success); }
.kpi-icon.tone-pink { background: var(--color-pink-bg); color: var(--color-pink); }
.kpi-icon.tone-blue { background: var(--color-info-bg); color: var(--color-info); }
.kpi-icon.tone-red { background: var(--color-danger-bg); color: var(--color-danger); }
.kpi-label { font-size: 12.5px; color: var(--text-secondary); margin-bottom: 2px; }
.kpi-value { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.kpi-delta { font-size: 11.5px; color: var(--color-success); margin-top: 2px; font-weight: 600; }
.kpi-delta.down { color: var(--color-danger); }

/* ----- table -------------------------------------------------------------------- */

table.kt { width: 100%; border-collapse: separate; border-spacing: 0; }
table.kt th { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; color: var(--text-secondary); text-align: left; padding: 10px 14px; background: var(--kc-color-paper); border-bottom: 1px solid var(--border-light); }
table.kt td { padding: 12px 14px; border-bottom: 1px solid var(--border-light); font-size: 13px; }
table.kt tr:last-child td { border-bottom: 0; }
table.kt tr:hover td { background: var(--kc-color-paper); }

.avatar-cell { display: flex; align-items: center; gap: 10px; }
.avatar-cell .avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--kc-color-emerald), var(--kc-color-lime)); color: white; display: grid; place-items: center; font-weight: 700; font-size: 12px; }
.avatar-cell .name { font-weight: 600; color: var(--text-primary); }
.avatar-cell .role { font-size: 11.5px; color: var(--text-secondary); }

.pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.success { background: var(--color-success-bg); color: var(--color-success); }
.pill.warning { background: var(--color-warning-bg); color: var(--color-warning); }
.pill.danger { background: var(--color-danger-bg); color: var(--color-danger); }
.pill.info { background: var(--color-info-bg); color: var(--color-info); }
.pill.neutral { background: var(--kc-bg-muted); color: var(--text-secondary); }
/* Suppress the auto leading dot from .pill::before when the caller is supplying its
   own colored dot (status pills where dot color is the signal, not the pill chrome). */
.pill.pill-no-dot::before { display: none; }

/* ----- inbox specific ----------------------------------------------------------- */

.inbox-shell {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 14px;
    height: calc(100vh - var(--header-height) - 96px);
    min-height: 460px;
    transition: grid-template-columns 0.2s ease;
}
.inbox-shell.with-drawer { grid-template-columns: 280px 1fr 340px; gap: 12px; }
@media (max-width: 1400px) {
    .inbox-shell { grid-template-columns: 280px 1fr; }
    .inbox-shell.with-drawer { grid-template-columns: 260px 1fr 320px; }
}
@media (max-width: 1100px) {
    .inbox-shell.with-drawer { grid-template-columns: 240px 1fr 300px; }
}
@media (max-width: 900px) {
    .inbox-shell, .inbox-shell.with-drawer { grid-template-columns: 1fr; }
}
.inbox-list { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-lg); display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
.inbox-list-header { padding: 12px 14px; border-bottom: 1px solid var(--border-light); flex-shrink: 0; }
.inbox-search { position: relative; }
.inbox-search input { width: 100%; padding: 9px 12px 9px 36px; border-radius: var(--radius); border: 1px solid var(--border); font-family: inherit; font-size: 13px; background: var(--kc-color-paper); outline: none; }
.inbox-search input:focus { border-color: var(--color-accent); background: white; }
.inbox-search svg, .inbox-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--text-tertiary); font-size: 12px; }

.inbox-list-items { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.conv-item { padding: 10px 14px; border-bottom: 1px solid var(--border-light); cursor: pointer; transition: background 100ms ease; display: flex; gap: 10px; }
.conv-item:hover { background: var(--kc-color-paper); }
.conv-item.active { background: var(--color-accent-soft); border-left: 3px solid var(--color-accent); padding-left: 11px; }
.conv-item .avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--kc-color-emerald), var(--kc-color-lime)); color: white; display: grid; place-items: center; font-weight: 700; font-size: 12px; flex-shrink: 0; }
.conv-item-body { flex: 1; min-width: 0; }
.conv-item-row1 { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 2px; }
.conv-item-name { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-item-time { font-size: 10.5px; color: var(--text-tertiary); flex-shrink: 0; }
.conv-item-channel { font-size: 10.5px; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; }
.conv-item-channel .conv-item-account { font-family: var(--kc-font-mono, ui-monospace), monospace; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }

/* Row 2: channel pill + preview muted + unread dot. Patrón Intercom/Front — preview
   en 1 línea con ellipsis para max densidad de información sin sacrificar legibilidad. */
.conv-item-row2 {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    min-width: 0;
}
.conv-item-preview {
    flex: 1;
    min-width: 0;
    font-size: 11.5px;
    color: var(--kc-fg-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.conv-item-unread-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--kc-color-emerald);
    flex-shrink: 0;
    box-shadow: 0 0 0 2px var(--kc-color-emerald-soft);
}
/* Unread: name + preview en bold + tono más fuerte. Funciona en hover/active también. */
.conv-item.unread .conv-item-name { font-weight: var(--kc-weight-bold); }
.conv-item.unread .conv-item-preview { color: var(--kc-fg); font-weight: var(--kc-weight-medium); }

.thread-shell { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-lg); display: flex; flex-direction: column; overflow: hidden; min-height: 0; min-width: 0; }
.thread-header { padding: 12px 18px; border-bottom: 1px solid var(--border-light); display: flex; align-items: center; gap: 12px; flex-shrink: 0; flex-wrap: wrap; }
.thread-header .avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--kc-color-emerald), var(--kc-color-lime)); color: white; display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.thread-header h3 { margin: 0; font-size: 14.5px; font-weight: 700; }
.thread-header .sub { font-size: 11.5px; color: var(--text-secondary); }

/* Thread body: textura sutil de puntos sobre el paper background para dar profundidad
   al chat (estilo HubSpot Conversations / Intercom). El radial gradient es muy suave —
   no compite con las burbujas pero evita la sensación de "lienzo plano vacío". */
.thread-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 18px 22px;
    background: var(--kc-color-paper);
    background-image: radial-gradient(rgba(11, 20, 16, 0.04) 1px, transparent 1px);
    background-size: 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
}
.bubble-row { display: flex; }
.bubble-row.in { justify-content: flex-start; }
.bubble-row.out { justify-content: flex-end; }
.bubble {
    max-width: 64%; padding: 10px 14px; border-radius: 14px;
    font-size: 13.5px; line-height: 1.45;
    box-shadow: var(--kc-shadow-sm);
}
.bubble.in { background: white; border: 1px solid var(--border-light); border-top-left-radius: 4px; color: var(--text-primary); }
.bubble.out { background: var(--color-accent); color: white; border-top-right-radius: 4px; }
.bubble-meta { font-size: 10.5px; opacity: 0.75; margin-top: 4px; display: flex; gap: 6px; align-items: center; }

.thread-footer {
    padding: 10px 16px 12px;
    border-top: 1px solid var(--border-light);
    background: white;
    flex-shrink: 0;
    position: relative;
    /* Z-index 26 = encima del popover-backdrop (z 25), no del popover-canned-menu (z 30).
       Sin esto, position+z-index:2 creaba un stacking context que enterraba los popovers
       (attach/emoji/translate/canned) bajo el backdrop transparente — clicks sobre los
       items y el botón "Gestionar respuestas" se los tragaba el backdrop. */
    z-index: 26;
    box-shadow: 0 -4px 16px -10px rgba(0,0,0,0.08);
}
.composer { display: flex; gap: 8px; align-items: flex-end; position: relative; }
.composer textarea {
    flex: 1; resize: none; min-height: 38px; max-height: 110px;
    padding: 9px 13px; border-radius: var(--radius); border: 1px solid var(--border);
    font-family: inherit; font-size: 13px; outline: none; line-height: 1.45;
}
.composer textarea:focus { border-color: var(--color-accent); }

/* ── AI classification chips on conv-item (intent + sentiment) ──────────── */
.conv-item-tags {
    display: flex; gap: 4px; margin-top: 4px;
    flex-wrap: wrap;
}
.conv-tag {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: lowercase;
    line-height: 1.4;
}
.conv-tag-red {
    background: var(--kc-color-danger-soft);
    color: var(--color-danger-strong);
    border: 1px solid var(--color-danger-border);
}
.conv-tag-orange {
    background: rgba(245, 158, 11, 0.12);
    color: #B45309;
    border: 1px solid rgba(245, 158, 11, 0.30);
}
.conv-tag-emerald {
    background: rgba(16, 185, 129, 0.10);
    color: #047857;
    border: 1px solid rgba(16, 185, 129, 0.25);
}
.conv-tag-blue {
    background: rgba(37, 99, 235, 0.10);
    color: #1D4ED8;
    border: 1px solid rgba(37, 99, 235, 0.25);
}
.conv-tag-neutral {
    background: var(--kc-color-bone-2, var(--kc-color-bone-2));
    color: var(--kc-fg-muted, #64748b);
    border: 1px solid var(--kc-border, #e5e7eb);
}

/* ── Bubble media renderers (image / audio / video / doc / location / sticker) ── */
.bubble-text { white-space: pre-wrap; word-break: break-word; }
.bubble-text-caption { margin-top: 6px; font-size: 13px; }
.bubble-text a { color: var(--kc-color-emerald, #10B981); text-decoration: underline; }
.bubble.out .bubble-text a { color: white; text-decoration: underline; opacity: 0.95; }

.bubble-media-image-wrap {
    display: block;
    border-radius: 8px;
    overflow: hidden;
    line-height: 0;
    cursor: zoom-in;
    max-width: 320px;
}
.bubble-media-image {
    width: 100%;
    height: auto;
    max-height: 360px;
    object-fit: cover;
    display: block;
    transition: transform 0.2s ease;
}
.bubble-media-image-wrap:hover .bubble-media-image { transform: scale(1.02); }

.bubble-media-audio {
    width: 100%;
    min-width: 260px;
    max-width: 320px;
    height: 40px;
}

.bubble-media-video {
    width: 100%;
    max-width: 360px;
    max-height: 360px;
    border-radius: 8px;
    background: #000;
    display: block;
}

.bubble-media-doc {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    min-width: 240px;
    max-width: 340px;
    transition: background 0.15s ease;
}
.bubble-media-doc:hover { background: rgba(0, 0, 0, 0.08); }
.bubble.out .bubble-media-doc { background: rgba(255, 255, 255, 0.18); color: white; }
.bubble.out .bubble-media-doc:hover { background: rgba(255, 255, 255, 0.28); }
.bubble-media-doc-icon {
    width: 36px; height: 36px;
    background: rgba(16, 185, 129, 0.15);
    color: var(--kc-color-emerald, #10B981);
    border-radius: 8px;
    display: grid; place-items: center;
    font-size: 16px;
    flex: 0 0 36px;
}
.bubble.out .bubble-media-doc-icon { background: rgba(255, 255, 255, 0.25); color: white; }
.bubble-media-doc-meta { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.bubble-media-doc-name {
    font-size: 13px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bubble-media-doc-sub {
    font-size: 11px; opacity: 0.7;
    font-family: var(--kc-font-mono, ui-monospace);
}
.bubble-media-doc-action { font-size: 14px; opacity: 0.55; }

.bubble-media-location {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    min-width: 240px;
    max-width: 320px;
}
.bubble-media-location:hover { background: rgba(0, 0, 0, 0.08); }
.bubble.out .bubble-media-location { background: rgba(255, 255, 255, 0.18); color: white; }
.bubble-media-location-icon {
    width: 36px; height: 36px;
    background: var(--kc-color-danger-soft-2);
    color: var(--color-danger-strong);
    border-radius: 8px;
    display: grid; place-items: center;
    flex: 0 0 36px;
    font-size: 16px;
}
.bubble.out .bubble-media-location-icon { background: rgba(255, 255, 255, 0.25); color: white; }
.bubble-media-location-meta { display: flex; flex-direction: column; gap: 1px; }
.bubble-media-location-title { font-size: 12.5px; font-weight: 600; }
.bubble-media-location-coords {
    font-size: 11px; opacity: 0.7;
    font-family: var(--kc-font-mono, ui-monospace);
}

.bubble-media-sticker {
    width: 128px; height: 128px;
    object-fit: contain;
    background: transparent;
    display: block;
}

.bubble-interactive-badge {
    display: inline-block;
    padding: 1px 8px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: rgba(126, 91, 255, 0.15);
    color: var(--kc-color-ai-suggested);
    border-radius: 999px;
    margin-bottom: 6px;
}

/* ── Contact drawer (3rd panel of the inbox) ───────────────────────────── */
.inbox-drawer {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    display: flex; flex-direction: column;
    overflow: hidden;
    min-width: 0;
}
.inbox-drawer-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-light);
}
.inbox-drawer-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--kc-fg-muted, #64748b);
}
.inbox-drawer-close {
    background: transparent; border: 0; cursor: pointer;
    color: var(--kc-fg-muted, #64748b);
    padding: 4px 8px; font-size: 16px;
}
.inbox-drawer-close:hover { color: var(--kc-fg, #1f2937); }

.inbox-drawer-body { flex: 1; overflow-y: auto; padding: 16px; }

.contact-hero {
    display: flex; flex-direction: column; align-items: center;
    text-align: center; padding-bottom: 14px;
    border-bottom: 1px dashed var(--kc-border, #e5e7eb);
    margin-bottom: 14px;
}
.contact-avatar-lg {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--kc-color-emerald, #10B981), var(--kc-color-lime, #C6F24B));
    color: white;
    font-size: 24px; font-weight: 700;
    display: grid; place-items: center;
    margin-bottom: 10px;
}
.contact-name { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.contact-handle {
    font-family: var(--kc-font-mono, ui-monospace);
    font-size: 12px;
    color: var(--kc-fg-muted, #64748b);
    margin-top: 2px;
}
.contact-status-pill {
    display: inline-flex; align-items: center; gap: 5px;
    margin-top: 8px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px; font-weight: 600;
    text-transform: lowercase;
}
.contact-status-active { background: rgba(16,185,129,.10); color: #047857; border: 1px solid rgba(16,185,129,.25); }
.contact-status-lead { background: rgba(245,158,11,.12); color: #B45309; border: 1px solid rgba(245,158,11,.30); }
.contact-status-other { background: var(--kc-color-bone-2, var(--kc-color-bone-2)); color: var(--kc-fg-muted, #64748b); border: 1px solid var(--kc-border, #e5e7eb); }

.contact-field {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 0;
    font-size: 13px;
}
.contact-field-icon {
    width: 28px; height: 28px;
    border-radius: 8px;
    background: var(--kc-color-bone-2, var(--kc-color-bone-2));
    color: var(--kc-color-emerald, #10B981);
    display: grid; place-items: center;
    flex: 0 0 28px;
}
.contact-field-label {
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--kc-fg-muted, #64748b);
    margin-bottom: 1px;
}
.contact-field-value {
    color: var(--kc-fg, #1f2937);
    word-break: break-word;
}
.contact-field-empty { color: var(--kc-fg-muted, #64748b); font-style: italic; }

.contact-section-title {
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--kc-fg-muted, #64748b);
    margin: 16px 0 8px;
    padding-top: 12px;
    border-top: 1px dashed var(--kc-border, #e5e7eb);
}

.contact-actions { display: grid; gap: 6px; }
.contact-action-btn {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px;
    background: var(--kc-color-paper, white);
    border: 1px solid var(--kc-border, #e5e7eb);
    border-radius: 8px;
    cursor: pointer; font-size: 12.5px; font-weight: 600;
    color: var(--kc-fg, #1f2937);
    text-align: left;
    transition: all 0.15s ease;
}
.contact-action-btn:hover { border-color: var(--kc-color-emerald, #10B981); background: rgba(16, 185, 129, 0.04); }
.contact-action-btn i { color: var(--kc-color-emerald, #10B981); width: 16px; text-align: center; }
.contact-action-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.contact-notes-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.contact-note {
    padding: 8px 10px;
    background: var(--kc-color-bone-2, var(--kc-color-bone-2));
    border: 1px solid var(--kc-border, #e5e7eb);
    border-left: 3px solid var(--kc-color-emerald, #10B981);
    border-radius: 6px;
    font-size: 12.5px;
    color: var(--kc-fg, #1f2937);
    line-height: 1.45;
    white-space: pre-wrap;
}
.contact-note-meta {
    font-size: 10.5px;
    color: var(--kc-fg-muted, #64748b);
    margin-top: 4px;
    font-family: var(--kc-font-mono, ui-monospace);
}
.contact-note-add textarea {
    width: 100%;
    min-height: 60px;
    padding: 8px 10px;
    border: 1px solid var(--kc-border, #e5e7eb);
    border-radius: 6px;
    font-family: inherit; font-size: 12.5px;
    resize: vertical;
}
.contact-note-add textarea:focus { outline: none; border-color: var(--kc-color-emerald, #10B981); }

.contact-empty {
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
    padding: 24px 12px;
    color: var(--kc-fg-muted, #64748b);
    font-size: 13px;
    line-height: 1.5;
}
.contact-empty i { font-size: 32px; opacity: 0.5; margin-bottom: 10px; color: var(--kc-color-emerald, #10B981); }

.drawer-toggle-btn {
    background: transparent;
    border: 1px solid var(--kc-border, #e5e7eb);
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
    color: var(--kc-fg-muted, #64748b);
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px;
}
.drawer-toggle-btn:hover { color: var(--kc-color-emerald, #10B981); border-color: var(--kc-color-emerald, #10B981); }
.drawer-toggle-btn.is-on { background: rgba(16, 185, 129, 0.08); color: var(--kc-color-emerald, #10B981); border-color: var(--kc-color-emerald, #10B981); }

/* ── AI summary banner inside thread (auto-summarize on resolve) ────────── */
.thread-ai-summary {
    margin: 12px 18px;
    padding: 12px 14px;
    border: 1px solid var(--kc-color-emerald, #10B981);
    border-left-width: 3px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.06), rgba(198, 242, 75, 0.05));
}
.thread-ai-summary-head {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
    font-weight: 700;
    color: var(--kc-color-emerald, #10B981);
    margin-bottom: 6px;
}
.thread-ai-summary-time {
    font-weight: 400; color: var(--kc-fg-muted, #64748b);
    text-transform: none; letter-spacing: 0;
}
.thread-ai-summary-body {
    font-size: 13px; line-height: 1.55;
    color: var(--kc-fg, #1f2937);
    white-space: pre-wrap;
}

/* ── Interactive composer — variant picker + list sections (chunk 7) ─────── */
.ix-variant-picker {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: 12px;
}
.ix-variant {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 9px 10px;
    background: var(--kc-color-paper, white);
    border: 1px solid var(--kc-border, #e5e7eb);
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px; font-weight: 600;
    color: var(--kc-fg-muted, #64748b);
    transition: all 0.15s ease;
}
.ix-variant:hover { border-color: var(--kc-color-emerald, #10B981); color: var(--kc-color-emerald, #10B981); }
.ix-variant.is-on {
    background: rgba(16, 185, 129, 0.08);
    border-color: var(--kc-color-emerald, #10B981);
    color: var(--kc-color-emerald, #10B981);
}
.ix-variant i { font-size: 13px; }

.ix-section {
    background: var(--kc-color-bone-2, var(--kc-color-bone-2));
    border: 1px solid var(--kc-border, #e5e7eb);
    border-radius: 8px;
    padding: 8px;
    margin-bottom: 6px;
}

/* ── Reaction trigger + popover on inbound bubbles (chunk 6) ──────────────── */
.bubble-react-wrap {
    position: absolute;
    top: -10px;
    right: -36px;
    display: none; /* shown on bubble-row:hover below */
}
.bubble-row.in:hover .bubble-react-wrap { display: block; }
.bubble-row { position: relative; }

.bubble-react-btn {
    width: 28px; height: 28px;
    background: white;
    border: 1px solid var(--kc-border, #e5e7eb);
    box-shadow: var(--kc-shadow-sm);
    border-radius: 50%;
    cursor: pointer;
    color: var(--kc-fg-muted, #64748b);
    display: grid; place-items: center;
    font-size: 13px;
    transition: all 0.15s ease;
}
.bubble-react-btn:hover {
    color: var(--kc-color-emerald, #10B981);
    border-color: var(--kc-color-emerald, #10B981);
    transform: scale(1.08);
}

.bubble-react-popover {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 2px;
    padding: 6px;
    background: white;
    border: 1px solid var(--kc-border, #e5e7eb);
    border-radius: 999px;
    box-shadow: var(--kc-shadow-md);
    z-index: 20;
}
.bubble-react-emoji {
    background: transparent;
    border: 0;
    width: 32px; height: 32px;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.1s ease, transform 0.1s ease;
}
.bubble-react-emoji:hover {
    background: var(--kc-color-bone-2, var(--kc-color-bone-2));
    transform: scale(1.2);
}

/* ── Composer attach + emoji + preview (chunk 3) ─────────────────────────── */
.composer-actions {
    display: flex; align-items: center; gap: 4px;
    margin-bottom: 6px;
}
.composer-icon-btn {
    width: 32px; height: 32px;
    background: transparent;
    border: 1px solid var(--kc-border, #e5e7eb);
    border-radius: 8px;
    cursor: pointer;
    color: var(--kc-fg-muted, #64748b);
    display: grid; place-items: center;
    font-size: 14px;
    transition: all 0.15s ease;
}
.composer-icon-btn:hover:not(:disabled) {
    color: var(--kc-color-emerald, #10B981);
    border-color: var(--kc-color-emerald, #10B981);
    background: rgba(16, 185, 129, 0.04);
}
.composer-icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.composer-icon-btn.is-on {
    color: var(--kc-color-emerald, #10B981);
    background: rgba(16, 185, 129, 0.08);
    border-color: var(--kc-color-emerald, #10B981);
}

.composer-attach-wrap, .composer-emoji-wrap { position: relative; display: inline-block; }

/* Backdrop transparente — capa fullscreen que cierra los popovers (attach/emoji/translate/assign)
   al click outside. Z-index 25 = encima del thread/sidebar pero debajo de los popovers (z 30). */
.popover-backdrop {
    position: fixed;
    inset: 0;
    z-index: 25;
    background: transparent;
    cursor: default;
}

.composer-attach-menu {
    position: absolute; bottom: calc(100% + 6px); left: 0;
    background: white;
    border: 1px solid var(--kc-border, #e5e7eb);
    border-radius: 10px;
    box-shadow: var(--kc-shadow-md);
    padding: 4px;
    min-width: 180px;
    z-index: 30;
    display: flex; flex-direction: column; gap: 1px;
}
.composer-attach-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    color: var(--kc-fg, #1f2937);
    cursor: pointer;
}
.composer-attach-item:hover { background: var(--kc-color-bone-2, var(--kc-color-bone-2)); }
.composer-attach-item i { width: 16px; text-align: center; }

/* Attach menu icons — colores semánticos de la paleta brand kit (no hex hardcoded).
   Image=emerald (acción positiva), Video=lavender (interactivo), Document=info azul,
   Location=danger (alerta), Buttons=lavender (interactivo). */
.attach-icon-image    { color: var(--kc-color-emerald); }
.attach-icon-video    { color: var(--kc-color-ai-suggested); }
.attach-icon-doc      { color: var(--kc-color-info); }
.attach-icon-location { color: var(--kc-color-danger); }
.attach-icon-buttons  { color: var(--kc-color-ai-suggested); }
.attach-item-button   { border: 0; background: transparent; width: 100%; text-align: left; }

/* AI agent avatar pill — gradient lavender → lime (brand kit AI states). Reusable en
   cualquier surface que muestre presencia de un AI agent (inbox header, assign popover). */
.kc-ai-avatar-pill {
    width: 22px;
    height: 22px;
    font-size: 11px;
    background: linear-gradient(135deg, var(--kc-color-ai-suggested), var(--kc-color-lime));
    color: white;
    border-radius: var(--kc-radius-pill);
    display: grid;
    place-items: center;
    font-weight: var(--kc-weight-bold);
    flex-shrink: 0;
}

.composer-emoji-menu {
    position: absolute; bottom: calc(100% + 6px); left: 0;
    background: white;
    border: 1px solid var(--kc-border, #e5e7eb);
    border-radius: 10px;
    box-shadow: var(--kc-shadow-md);
    padding: 8px;
    width: 260px;
    z-index: 30;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
}
.composer-emoji-btn {
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 4px;
    font-size: 18px;
    line-height: 1;
    border-radius: 5px;
    transition: background 0.1s ease;
}
.composer-emoji-btn:hover { background: var(--kc-color-bone-2, var(--kc-color-bone-2)); }

.composer-recording {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 4px 10px;
    background: var(--kc-color-danger-soft);
    border: 1px solid var(--color-danger-border);
    border-radius: 999px;
    font-size: 12px;
    color: var(--color-danger-strong);
    margin-left: 4px;
}
.composer-rec-dot {
    width: 8px; height: 8px;
    background: var(--kc-color-danger);
    border-radius: 50%;
    animation: rec-pulse 1s ease-in-out infinite;
}
@keyframes rec-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}
.composer-rec-label { font-weight: 600; }
.composer-rec-timer {
    font-family: var(--kc-font-mono, ui-monospace);
    font-size: 11.5px;
    opacity: 0.8;
}
.composer-icon-btn.rec-stop {
    background: var(--kc-color-danger);
    border-color: var(--kc-color-danger);
    color: white;
    width: 28px; height: 28px;
}
.composer-icon-btn.rec-stop:hover:not(:disabled) {
    background: var(--color-danger-strong);
    border-color: var(--color-danger-strong);
    color: white;
}
.composer-icon-btn.rec-cancel {
    width: 28px; height: 28px;
}

.composer-uploading {
    display: inline-flex; align-items: center; gap: 6px;
    margin-left: 6px;
    font-size: 11.5px;
    color: var(--kc-color-emerald, #10B981);
    font-weight: 600;
}

.composer-attachment-preview {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    margin-bottom: 8px;
    background: var(--kc-color-bone-2, var(--kc-color-bone-2));
    border: 1px solid var(--kc-border, #e5e7eb);
    border-radius: 8px;
}
.composer-attachment-icon {
    width: 44px; height: 44px;
    flex: 0 0 44px;
    background: rgba(16, 185, 129, 0.10);
    color: var(--kc-color-emerald, #10B981);
    border-radius: 6px;
    display: grid; place-items: center;
    overflow: hidden;
    font-size: 18px;
}
.composer-attachment-icon img { width: 100%; height: 100%; object-fit: cover; }
.composer-attachment-meta { flex: 1; min-width: 0; }
.composer-attachment-name {
    font-size: 12.5px; font-weight: 600;
    color: var(--kc-fg, #1f2937);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.composer-attachment-size {
    font-size: 10.5px;
    color: var(--kc-fg-muted, #64748b);
    font-family: var(--kc-font-mono, ui-monospace);
    margin-top: 2px;
}
.composer-attachment-remove {
    background: transparent;
    border: 0;
    color: var(--kc-fg-muted, #64748b);
    cursor: pointer;
    padding: 4px 8px;
    font-size: 14px;
    border-radius: 4px;
}
.composer-attachment-remove:hover { color: var(--color-danger-strong); background: var(--kc-color-danger-soft); }

/* ── Composer assistant (slash commands ✨) ─────────────────────────────── */
.composer-assistant {
    display: flex; align-items: center; gap: 5px;
    margin-bottom: 6px; flex-wrap: wrap;
}
.composer-ai-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 9px;
    background: var(--kc-color-bone-2, var(--kc-color-bone-2));
    border: 1px solid var(--kc-border, #e5e7eb);
    border-radius: 999px;
    font-size: 11px; font-weight: 600;
    color: var(--kc-fg, #1f2937);
    cursor: pointer;
    transition: all 0.15s ease;
}
.composer-ai-chip:hover:not(:disabled) {
    border-color: var(--kc-color-emerald, #10B981);
    color: var(--kc-color-emerald, #10B981);
    background: rgba(16, 185, 129, 0.05);
}
.composer-ai-chip:disabled { opacity: 0.5; cursor: not-allowed; }
.composer-ai-chip i { font-size: 11px; }

.composer-translate-wrap { position: relative; display: inline-block; }
.composer-translate-popover {
    position: absolute; bottom: calc(100% + 6px); left: 0;
    background: white;
    border: 1px solid var(--kc-border, #e5e7eb);
    border-radius: 10px;
    box-shadow: var(--kc-shadow-md);
    padding: 6px;
    min-width: 160px;
    z-index: 30;
    display: flex; flex-direction: column; gap: 2px;
}
.translate-lang {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px;
    border: 0; background: transparent;
    border-radius: 6px;
    font-size: 12.5px;
    color: var(--kc-fg);
    cursor: pointer;
    text-align: left;
}
.translate-lang:hover { background: var(--kc-color-bone-2, var(--kc-color-bone-2)); }
.translate-lang .lang-flag { font-size: 14px; }

.composer-ai-busy {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11.5px;
    color: var(--kc-color-emerald, #10B981);
    font-weight: 600;
}
.composer-ai-error {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11.5px;
    color: var(--color-danger-strong);
    background: var(--color-danger-soft);
    border: 1px solid var(--color-danger-border);
    padding: 3px 8px;
    border-radius: 6px;
}
.composer-ai-error-x {
    background: transparent; border: 0; color: var(--color-danger-strong);
    font-size: 14px; line-height: 1; cursor: pointer;
    padding: 0 0 0 4px;
}

/* Banner expandido para errores del asistente IA — sustituye al chip-only para mensajes
   accionables (ej. "configura tu proveedor LLM"). Va a ancho completo del composer. */
.composer-ai-error-banner {
    display: flex; align-items: flex-start; gap: 10px;
    width: 100%;
    padding: 9px 12px;
    margin-bottom: 8px;
    background: var(--color-danger-soft);
    border: 1px solid var(--color-danger-border);
    border-left: 3px solid var(--kc-color-danger);
    border-radius: 8px;
    font-size: 12.5px; line-height: 1.45;
    color: #991B1B;
}
.composer-ai-error-banner > i { color: var(--kc-color-danger); font-size: 13px; flex-shrink: 0; margin-top: 1px; }
.composer-ai-error-banner .composer-ai-error-text { flex: 1; }
.composer-ai-error-banner .composer-ai-error-x {
    background: transparent; border: 0; color: #991B1B;
    font-size: 18px; line-height: 1; cursor: pointer;
    padding: 0 4px; flex-shrink: 0;
}
.composer-ai-error-banner .composer-ai-error-x:hover { color: var(--kc-color-danger); }

/* ── Pinned conversation summary card (from /summary) ───────────────────── */
.composer-summary-card {
    margin-bottom: 10px;
    border: 1px solid var(--kc-color-emerald, #10B981);
    border-left-width: 3px;
    border-radius: 10px;
    background: rgba(16, 185, 129, 0.05);
    overflow: hidden;
}
.composer-summary-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 12px;
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
    font-weight: 700;
    color: var(--kc-color-emerald, #10B981);
    border-bottom: 1px solid rgba(16, 185, 129, 0.2);
}
.composer-summary-x {
    background: transparent; border: 0; cursor: pointer;
    color: var(--kc-fg-muted, #64748b);
    padding: 2px 6px;
}
.composer-summary-x:hover { color: var(--kc-fg); }
.composer-summary-body {
    padding: 10px 14px;
    font-size: 13px; line-height: 1.55;
    color: var(--kc-fg, #1f2937);
    white-space: pre-wrap;
}

/* ----- login -------------------------------------------------------------------- */

.login-bg { min-height: 100vh; display: grid; place-items: center; background: radial-gradient(1200px 600px at 80% 20%, rgba(198, 242, 75, 0.18) 0%, transparent 60%), radial-gradient(800px 400px at 10% 90%, rgba(16, 185, 129, 0.12) 0%, transparent 70%), var(--bg-content); }
.login-card { width: 420px; max-width: calc(100vw - 32px); background: white; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 36px; }
.login-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; }
.login-brand-logo { height: 32px; width: auto; display: block; }
.login-card h1 { font-size: 20px; font-weight: 700; margin: 0 0 4px; letter-spacing: -0.01em; }
.login-card .lead { font-size: 13.5px; color: var(--text-secondary); margin: 0 0 22px; }

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }
.field input { width: 100%; padding: 10px 14px; border-radius: var(--radius); border: 1px solid var(--border); font-family: inherit; font-size: 13.5px; outline: none; transition: border-color 120ms ease; }
.field input:focus { border-color: var(--color-accent); }

.alert-error { background: var(--color-danger-bg); color: var(--color-danger); padding: 10px 12px; border-radius: var(--radius); font-size: 12.5px; margin-bottom: 14px; }

/* ----- utility ----------------------------------------------------------------- */

.muted { color: var(--text-secondary); }
.text-sm { font-size: 12.5px; }
.flex { display: flex; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.mt-2 { margin-top: 8px; }
.mt-4 { margin-top: 16px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }

.empty-state { padding: 48px; text-align: center; color: var(--text-secondary); }
.empty-state .icon { font-size: 32px; margin-bottom: 12px; opacity: 0.6; }

/* ----- toolbar (filters above tables) ----------------------------------------- */

.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border-light); flex-wrap: wrap; }
.toolbar .toolbar-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.toolbar .toolbar-right { display: flex; align-items: center; gap: 8px; }
.toolbar select, .toolbar .input {
    background: white; border: 1px solid var(--border); border-radius: var(--radius); padding: 7px 12px;
    font-family: inherit; font-size: 12.5px; color: var(--text-primary); outline: none; cursor: pointer;
}
.toolbar select:focus, .toolbar .input:focus { border-color: var(--color-accent); }
.toolbar .input.search { padding-left: 32px; min-width: 220px; cursor: text; }
.search-wrap { position: relative; }
.search-wrap > i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-tertiary); font-size: 12px; }

.row-actions { display: flex; gap: 4px; }
.row-actions .icon-btn { width: 30px; height: 30px; border-radius: 7px; }
.row-actions .icon-btn i { font-size: 12px; }

.pagination { padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--border-light); font-size: 12.5px; color: var(--text-secondary); }
.pagination button { background: white; border: 1px solid var(--border); border-radius: 7px; padding: 5px 10px; font-family: inherit; font-size: 12px; cursor: pointer; color: var(--text-primary); }
.pagination button:hover:not(:disabled) { border-color: var(--color-accent); color: var(--color-accent); }
.pagination button:disabled { opacity: 0.4; cursor: not-allowed; }

/* ----- drawer (slide-in form) ------------------------------------------------- */

.drawer-backdrop {
    position: fixed; inset: 0; background: rgba(15, 23, 42, 0.4);
    display: flex; justify-content: flex-end;
    z-index: 100;
    animation: fade-in 160ms ease-out;
}
.drawer {
    width: 480px; max-width: 100vw; height: 100vh;
    background: white; box-shadow: -20px 0 40px rgba(0,0,0,0.1);
    display: flex; flex-direction: column;
    animation: slide-in 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.drawer-wide { width: 640px; }

/* ----- approvals page (Phase 2 closure) -------------------------------------- */
.approval-section { margin-bottom: 22px; }
.approval-section h4 { margin: 0 0 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); font-family: var(--kc-font-mono, ui-monospace, monospace); }
.approval-row { display: flex; align-items: baseline; gap: 12px; padding: 6px 0; font-size: 13px; }
.approval-row .muted { min-width: 110px; font-size: 12px; color: var(--text-secondary); }
.approval-summary { font-size: 13px; line-height: 1.55; color: var(--text-primary); margin: 0; padding: 12px 14px; background: var(--bg-content); border-radius: var(--radius); border: 1px solid var(--border-light); }
.approval-payload { margin: 0; padding: 12px 14px; background: #14171c; color: #e9eef5; border-radius: var(--radius); font-size: 12px; line-height: 1.5; max-height: 260px; overflow: auto; }
.approval-payload code { font-family: var(--kc-font-mono, ui-monospace, monospace); white-space: pre; }
.approval-reason { width: 100%; padding: 9px 12px; border-radius: var(--radius); border: 1px solid var(--border); font-family: inherit; font-size: 13px; outline: none; resize: vertical; }
.approval-reason:focus { border-color: var(--color-accent); }
.kind-pill { font-family: var(--kc-font-mono, ui-monospace, monospace); font-size: 11.5px; padding: 2px 8px; background: var(--bg-content); border: 1px solid var(--border-light); border-radius: 6px; color: var(--text-primary); }

/* ----- in-app feedback "Reportar problema" (Phase 2.7 Beta Launch) -------------- */
.kc-feedback-fab {
    position: fixed; right: 20px; bottom: 20px; z-index: 90;
    width: 52px; height: 52px; border-radius: 999px;
    background: var(--kc-color-emerald, #10B981); color: white; border: none;
    box-shadow: var(--kc-shadow-emerald);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 20px; transition: transform 160ms ease, box-shadow 160ms ease;
}
.kc-feedback-fab:hover { transform: translateY(-2px); box-shadow: var(--kc-shadow-emerald-hover); }
.kc-feedback-fab:active { transform: translateY(0); }

.kc-feedback-backdrop {
    position: fixed; inset: 0; background: rgba(15, 23, 42, 0.4);
    display: flex; align-items: center; justify-content: center;
    z-index: 200; animation: fade-in 160ms ease-out;
}
.kc-feedback-modal {
    width: 480px; max-width: calc(100vw - 32px);
    background: white; border-radius: var(--radius-lg, 14px);
    box-shadow: var(--kc-shadow-modal);
    display: flex; flex-direction: column;
    animation: feedback-pop 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes feedback-pop { from { opacity: 0; transform: translateY(8px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }

.kc-feedback-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--border-light); }
.kc-feedback-header h3 { margin: 0 0 2px; font-size: 16px; font-weight: 700; }
.kc-feedback-subtitle { font-size: 12.5px; color: var(--text-secondary); line-height: 1.4; }

.kc-feedback-body { padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; }
.kc-feedback-label { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.kc-feedback-textarea {
    width: 100%; padding: 10px 12px; border-radius: var(--radius); border: 1px solid var(--border);
    font-family: inherit; font-size: 13px; outline: none; resize: vertical; min-height: 92px;
}
.kc-feedback-textarea:focus { border-color: var(--color-accent); }
.kc-feedback-checkbox { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.kc-feedback-checkbox input[type="checkbox"] { accent-color: var(--kc-color-emerald, #10B981); }
.kc-feedback-error { background: #fef2f2; color: #b91c1c; border-radius: var(--radius); padding: 8px 12px; font-size: 12.5px; }
.kc-feedback-footer { padding: 14px 22px; border-top: 1px solid var(--border-light); display: flex; justify-content: flex-end; gap: 8px; background: var(--kc-color-bone-2); border-radius: 0 0 var(--radius-lg, 14px) var(--radius-lg, 14px); }

.kc-feedback-sent { align-items: center; text-align: center; padding: 32px 22px; }
.kc-feedback-sent-icon { font-size: 42px; color: var(--kc-color-emerald, #10B981); margin-bottom: 8px; }
.kc-feedback-sent h4 { margin: 0 0 4px; font-size: 18px; font-weight: 700; }
.kc-feedback-sent p { margin: 0; color: var(--text-secondary); font-size: 13.5px; }

/* Sidebar legal links (Phase 2.7) */
.sidebar-legal { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; font-size: 11px; color: var(--text-secondary); opacity: 0.7; }
.sidebar-legal a { color: inherit; text-decoration: none; }
.sidebar-legal a:hover { color: var(--kc-color-emerald, #10B981); opacity: 1; }
.sidebar-legal span { opacity: 0.5; }

/* Signup terms checkbox (Phase 2.7) */
/* Closed-beta splash. Mirrors VerifyEmail's centered card aesthetic so the user feels
   they hit a soft door, not a 404. */
.kc-signup-disabled { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px 24px; background: radial-gradient(circle at 20% 0%, rgba(198, 242, 75, 0.18) 0%, transparent 50%), radial-gradient(circle at 80% 100%, rgba(16, 185, 129, 0.10) 0%, transparent 60%), var(--kc-color-paper, #FAF7F0); }
.kc-signup-disabled-card { background: var(--kc-bg-elevated, #FFFFFF); border: 1px solid var(--kc-border, rgba(11, 20, 16, 0.08)); border-radius: 18px; box-shadow: 0 24px 64px -32px rgba(11, 20, 16, 0.20); padding: 48px 40px; max-width: 460px; text-align: center; }
.kc-signup-disabled-card .kc-signup-disabled-mark { width: 56px; height: 56px; margin-bottom: 24px; }
.kc-signup-disabled-card h1 { font-family: var(--kc-font-sans, system-ui), sans-serif; font-size: 26px; font-weight: 600; letter-spacing: -0.02em; color: var(--kc-fg, #0B1410); margin: 0 0 12px; }
.kc-signup-disabled-card p { color: var(--kc-fg-muted, rgba(11, 20, 16, 0.65)); font-size: 14px; line-height: 1.55; margin: 0 0 24px; }
.kc-signup-disabled-card .btn-primary { display: inline-flex; align-items: center; gap: 8px; }
.kc-signup-terms { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: var(--text-secondary); cursor: pointer; user-select: none; padding: 4px 0; }
.kc-signup-terms input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; accent-color: var(--kc-color-emerald, #10B981); width: 16px; height: 16px; cursor: pointer; }
.kc-signup-terms a { color: var(--kc-color-emerald, #10B981); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* Widget embed admin page (Phase 2.7 Slice D) */
.kc-widget-embed-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; align-items: start; }
.kc-widget-embed-snippet, .kc-widget-embed-preview { padding: 18px 22px; }
.kc-widget-embed-code { position: relative; margin: 14px 0 18px; }
.kc-widget-embed-code pre {
    margin: 0; padding: 14px 16px;
    background: #14171c; color: #e9eef5; border-radius: var(--radius);
    font-family: var(--kc-font-mono, ui-monospace, monospace);
    font-size: 13px; line-height: 1.5; overflow-x: auto;
    white-space: pre-wrap; word-break: break-all;
}
.kc-widget-embed-code button { position: absolute; top: 8px; right: 8px; }
.kc-widget-embed-steps { padding-left: 20px; margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--text-secondary); }
.kc-widget-embed-steps li { margin-bottom: 4px; }
.kc-widget-embed-iframe { width: 100%; min-height: 480px; border: 1px solid var(--border-light); border-radius: var(--radius); background: var(--bg-content); margin-top: 12px; }
@media (max-width: 1100px) { .kc-widget-embed-grid { grid-template-columns: 1fr; } }

/* Onboarding wizard (Phase 2.7 Slice F) */
.kc-onboarding-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 28px; }
.kc-onboarding-step { background: white; border: 1px solid var(--border-light); border-radius: var(--radius-lg, 14px); padding: 22px; display: flex; flex-direction: column; gap: 10px; transition: transform 160ms ease, box-shadow 160ms ease; }
.kc-onboarding-step:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.kc-onboarding-step header { display: flex; align-items: center; gap: 12px; }
.kc-onboarding-step-num {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--bg-content); color: var(--text-secondary);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px;
    border: 2px solid var(--border-light);
    flex-shrink: 0;
}
.kc-onboarding-step h3 { margin: 0; font-size: 16px; font-weight: 700; }
.kc-onboarding-step p { margin: 0; color: var(--text-secondary); font-size: 13.5px; line-height: 1.5; flex: 1; }
.kc-onboarding-step footer { margin-top: auto; }
.kc-onboarding-step--done { border-color: var(--kc-color-emerald, #10B981); background: linear-gradient(135deg, white 0%, rgba(16,185,129,0.04) 100%); }
.kc-onboarding-step--done .kc-onboarding-step-num { background: var(--kc-color-emerald, #10B981); color: white; border-color: var(--kc-color-emerald, #10B981); }

.kc-onboarding-cta { display: flex; justify-content: flex-end; gap: 10px; padding: 20px 0; }

/* Banner "Completa tu configuración" (Phase 2.7 Slice F) */
.kc-onboarding-banner {
    background: linear-gradient(135deg, rgba(16,185,129,0.08) 0%, rgba(198,242,75,0.06) 100%);
    border: 1px solid rgba(16,185,129,0.3);
    border-radius: var(--radius-lg, 14px);
    padding: 16px 22px;
    margin-bottom: 18px;
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.kc-onboarding-banner i.fa-duotone, .kc-onboarding-banner i.fa-solid { color: var(--kc-color-emerald, #10B981); font-size: 24px; }
.kc-onboarding-banner-text { flex: 1; min-width: 240px; }
.kc-onboarding-banner-title { font-weight: 700; margin-bottom: 2px; }
.kc-onboarding-banner-sub { font-size: 13px; color: var(--text-secondary); }

@media (max-width: 900px) { .kc-onboarding-grid { grid-template-columns: 1fr; } }

/* ----- legal pages /privacy /terms /cookies (Phase 2.7 Beta Launch) ----------- */
.kc-legal { min-height: 100vh; background: var(--kc-color-paper, #FAFAF7); display: flex; flex-direction: column; }
.kc-legal-header {
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    padding: 18px 32px; border-bottom: 1px solid var(--border-light);
    background: white;
}
.kc-legal-brand img { height: 32px; display: block; }
.kc-legal-nav { display: flex; align-items: center; gap: 18px; }
.kc-legal-nav a { color: var(--text-secondary); font-size: 13.5px; text-decoration: none; transition: color 120ms ease; }
.kc-legal-nav a:hover { color: var(--kc-color-emerald, #10B981); }

.kc-legal-main { flex: 1; padding: 48px 24px; display: flex; justify-content: center; }
.kc-legal-article { max-width: 760px; width: 100%; }
.kc-legal-article-header { margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--border-light); }
.kc-legal-article-header h1 { font-size: 38px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 8px; line-height: 1.15; }
.kc-legal-updated { margin: 0; color: var(--text-secondary); font-size: 13px; font-family: var(--kc-font-mono, ui-monospace, monospace); }

.kc-legal-body { font-size: 15.5px; line-height: 1.65; color: var(--text-primary); }
.kc-legal-body h2 { font-size: 20px; font-weight: 700; margin: 36px 0 12px; letter-spacing: -0.01em; }
.kc-legal-body p { margin: 0 0 14px; }
.kc-legal-body ul { padding-left: 22px; margin: 0 0 18px; }
.kc-legal-body li { margin-bottom: 6px; }
.kc-legal-body a { color: var(--kc-color-emerald, #10B981); }
.kc-legal-body code { font-family: var(--kc-font-mono, ui-monospace, monospace); font-size: 13.5px; padding: 1px 6px; background: var(--bg-content); border-radius: 4px; border: 1px solid var(--border-light); }
.kc-legal-lead { font-size: 17px; color: var(--text-secondary); margin-bottom: 28px; line-height: 1.55; }

.kc-legal-table { width: 100%; border-collapse: collapse; margin: 16px 0 24px; font-size: 14px; }
.kc-legal-table th { text-align: left; padding: 10px 12px; background: var(--bg-content); font-weight: 600; border-bottom: 2px solid var(--border-light); font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); }
.kc-legal-table td { padding: 10px 12px; border-bottom: 1px solid var(--border-light); vertical-align: top; }
.kc-legal-table td code { white-space: nowrap; }

.kc-legal-disclaimer {
    margin-top: 48px; padding: 16px 18px;
    background: rgba(245, 158, 11, 0.08);
    border-left: 3px solid #F59E0B;
    border-radius: 6px;
    font-size: 13.5px; color: #92400E;
}

.kc-legal-footer {
    padding: 24px 32px; border-top: 1px solid var(--border-light);
    background: white;
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.kc-legal-footer-brand { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-secondary); }
.kc-legal-footer-brand img { height: 22px; }
.kc-legal-footer-nav { display: flex; gap: 18px; }
.kc-legal-footer-nav a { font-size: 12.5px; color: var(--text-secondary); text-decoration: none; }
.kc-legal-footer-nav a:hover { color: var(--kc-color-emerald, #10B981); }

@media (max-width: 640px) {
    .kc-legal-header { padding: 14px 18px; }
    .kc-legal-nav { gap: 12px; }
    .kc-legal-nav a:not(.kc-pill) { display: none; }
    .kc-legal-main { padding: 28px 18px; }
    .kc-legal-article-header h1 { font-size: 30px; }
    .kc-legal-footer { padding: 18px; flex-direction: column; align-items: flex-start; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }

.drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--border-light); }
.drawer-header h3 { margin: 0; font-size: 16px; font-weight: 700; }
.drawer-body { flex: 1; overflow-y: auto; padding: 22px; }
.drawer-footer { padding: 16px 22px; border-top: 1px solid var(--border-light); display: flex; justify-content: flex-end; gap: 8px; background: var(--kc-color-bone-2); }

.form-grid { display: grid; gap: 14px; }
.form-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.form-grid label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 5px; color: var(--text-primary); }
.form-grid input, .form-grid select, .form-grid textarea {
    width: 100%; padding: 9px 12px; border-radius: var(--radius); border: 1px solid var(--border);
    font-family: inherit; font-size: 13px; outline: none; background: white;
}
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { border-color: var(--color-accent); }

/* ----- kanban ----------------------------------------------------------------- */

.kanban { display: flex; gap: 14px; padding: 4px; overflow-x: auto; min-height: calc(100vh - var(--header-height) - 140px); }
.kanban-col { background: #ecebe6; border-radius: var(--radius-lg); width: 300px; flex-shrink: 0; display: flex; flex-direction: column; padding: 12px; }
.kanban-col-header { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 12px; }
.kanban-col-title { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-primary); display: flex; align-items: center; gap: 8px; }
.kanban-col-title .dot { width: 8px; height: 8px; border-radius: 50%; }
.kanban-col-count { font-size: 11px; color: var(--text-secondary); background: white; border-radius: 999px; padding: 2px 8px; font-weight: 600; }
.kanban-cards { display: flex; flex-direction: column; gap: 8px; min-height: 80px; }
.kanban-card { background: white; border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow-sm); border: 1px solid var(--border-light); cursor: grab; transition: box-shadow 120ms ease, transform 120ms ease; }
.kanban-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.kanban-card.dragging { opacity: 0.4; }
.kanban-card-title { font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.kanban-card-amount { font-size: 14px; font-weight: 700; color: var(--color-accent); margin-bottom: 6px; letter-spacing: -0.01em; }
.kanban-card-meta { font-size: 11px; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; }
.kanban-col.drop-target .kanban-cards { background: rgba(16, 185, 129, 0.08); border-radius: var(--radius); outline: 2px dashed rgba(16, 185, 129, 0.45); outline-offset: -2px; }

/* ----- scrollbar refinement ----------------------------------------------------- */

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d4d0c7; border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #b3afa6; border: 2px solid transparent; background-clip: padding-box; }
.sidebar ::-webkit-scrollbar-thumb { background: var(--kc-color-ink-4); }

/* ----- stage editor (inside pipeline drawer) ---------------------------------- */

.stage-editor { display: flex; flex-direction: column; gap: 8px; }
.stage-row {
    display: grid;
    grid-template-columns: 28px 1fr 90px auto auto auto;
    gap: 8px; align-items: center;
    padding: 10px;
    background: var(--kc-color-paper);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
}
.stage-row .order-handle { width: 28px; height: 28px; border-radius: 7px; background: white; border: 1px solid var(--border); display: grid; place-items: center; color: var(--text-tertiary); font-size: 11px; font-weight: 700; }
.stage-row input[type="text"], .stage-row input[type="number"] {
    padding: 7px 10px; border-radius: 7px; border: 1px solid var(--border);
    font-family: inherit; font-size: 12.5px; outline: none; width: 100%;
    background: white;
}
.stage-row input:focus { border-color: var(--color-accent); }
.stage-row .flag {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 10px; border-radius: 999px;
    font-size: 11px; font-weight: 600;
    background: white; border: 1px solid var(--border);
    cursor: pointer; user-select: none;
    color: var(--text-secondary);
    white-space: nowrap;
}
.stage-row .flag.active.win { background: var(--color-success-bg); color: var(--color-success); border-color: transparent; }
.stage-row .flag.active.loss { background: var(--color-danger-bg); color: var(--color-danger); border-color: transparent; }
.stage-row .remove-btn {
    width: 28px; height: 28px; border-radius: 7px;
    background: white; border: 1px solid var(--border);
    color: var(--text-secondary); display: grid; place-items: center;
    cursor: pointer;
}
.stage-row .remove-btn:hover { color: var(--color-danger); border-color: var(--color-danger); }
.stage-add { padding: 9px; border: 1px dashed var(--border); background: transparent; border-radius: var(--radius); color: var(--text-secondary); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: border-color 120ms ease, color 120ms ease; width: 100%; }
.stage-add:hover { border-color: var(--color-accent); color: var(--color-accent); }

.toggle-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.toggle-row .toggle-label { flex: 1; font-size: 13px; }
.toggle { position: relative; display: inline-block; width: 38px; height: 22px; flex-shrink: 0; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle .track { position: absolute; cursor: pointer; inset: 0; background: var(--kc-border-strong); border-radius: 999px; transition: background 160ms ease; }
.toggle .track::before { content: ''; position: absolute; height: 16px; width: 16px; left: 3px; top: 3px; background: white; border-radius: 50%; transition: transform 160ms ease; box-shadow: var(--kc-shadow-knob); }
.toggle input:checked + .track { background: var(--color-accent); }
.toggle input:checked + .track::before { transform: translateX(16px); }

/* ----- admin / seed ----------------------------------------------------------- */

.seed-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.seed-item {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; background: #fafaf6; border: 1px solid var(--border-light);
    border-radius: var(--radius);
}
.seed-icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--color-accent-soft); color: var(--color-accent); }
.seed-icon i { font-size: 17px; }
.seed-num { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.seed-lbl { font-size: 11.5px; color: var(--text-secondary); margin-top: 2px; }

.callout { display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--radius); align-items: flex-start; line-height: 1.5; font-size: 13px; }
.callout > i { font-size: 18px; flex-shrink: 0; margin-top: 2px; }
.callout.warn { background: var(--color-warning-bg); color: var(--kc-color-warning); }
.callout.warn > i { color: var(--color-warning); }
.callout.success { background: var(--color-success-bg); color: var(--kc-color-success); }
.callout.success > i { color: var(--color-success); }
.callout code { background: rgba(0,0,0,0.05); padding: 1px 6px; border-radius: 4px; font-size: 11.5px; }

.confirm-card {
    background: white; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
    padding: 28px; max-width: 440px; text-align: center;
    animation: pop-in 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes pop-in { from { transform: scale(0.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.confirm-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--color-warning-bg); color: var(--color-warning); display: grid; place-items: center; margin: 0 auto 14px; font-size: 24px; }
.confirm-card h3 { margin: 0 0 8px; font-size: 18px; font-weight: 700; }
.confirm-card p { margin: 0 0 22px; color: var(--text-secondary); font-size: 13.5px; }
.confirm-actions { display: flex; gap: 10px; justify-content: center; }
.confirm-actions .btn { min-width: 120px; justify-content: center; }

/* ----- stage picker (chip selector inside deal drawer) ----------------------- */

.stage-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.stage-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 999px;
    background: white; border: 1px solid var(--border);
    font-family: inherit; font-size: 12px; font-weight: 600;
    color: var(--text-primary); cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease;
}
.stage-chip:hover { border-color: var(--color-accent); }
.stage-chip.selected { background: var(--color-accent-soft); border-color: var(--color-accent); color: var(--color-accent); }
.stage-chip .dot { width: 8px; height: 8px; border-radius: 50%; }

/* ----- provider grid (integrations) ------------------------------------------ */

.provider-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; padding: 14px 18px; }
.provider-card {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 16px; background: white;
    border: 1px solid var(--border-light); border-radius: var(--radius-lg);
    transition: box-shadow 160ms ease, transform 160ms ease;
}
.provider-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.provider-card.muted { opacity: 0.65; }
.provider-icon { width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0; font-size: 19px; }
.provider-body { flex: 1; min-width: 0; }
.provider-title { font-weight: 700; font-size: 14px; display: flex; align-items: center; flex-wrap: wrap; }
.provider-meta { font-size: 11.5px; color: var(--text-secondary); margin-top: 3px; }
.provider-actions { display: flex; gap: 4px; }
.provider-actions .icon-btn { width: 30px; height: 30px; border-radius: 7px; }
.provider-actions .icon-btn i { font-size: 12px; }

.provider-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.provider-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 14px; border-radius: var(--radius);
    background: white; border: 1px solid var(--border);
    font-family: inherit; font-size: 13px; font-weight: 600;
    color: var(--text-primary); cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease;
}
.provider-chip:hover { border-color: var(--color-accent); }
.provider-chip.selected { background: var(--color-accent-soft); border-color: var(--color-accent); color: var(--color-accent); }
.provider-chip i { font-size: 15px; }

/* ----- channel account row (inside drawer) ---------------------------------- */

.account-row {
    display: grid; grid-template-columns: 1fr 1fr 100px 28px;
    gap: 8px; align-items: center;
    padding: 10px; background: var(--kc-color-paper);
    border: 1px solid var(--border-light); border-radius: var(--radius);
}
.account-row input { padding: 7px 10px; border-radius: 7px; border: 1px solid var(--border); font-family: inherit; font-size: 12.5px; outline: none; background: white; }
.account-row input:focus { border-color: var(--color-accent); }
.account-row .default-toggle { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); cursor: pointer; }
.account-row .default-toggle input { width: 14px; height: 14px; cursor: pointer; }

/* ----- role picker (invite) + role list (editor) ---------------------------- */

.role-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.role-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 999px;
    background: white; border: 1px solid var(--border);
    font-family: inherit; font-size: 12px; font-weight: 600;
    color: var(--text-secondary); cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}
.role-chip:hover { border-color: var(--color-accent); }
.role-chip.selected { background: var(--color-accent-soft); border-color: var(--color-accent); color: var(--color-accent); }
.role-chip i { font-size: 10px; }

.role-list { display: flex; flex-direction: column; gap: 8px; }
.role-item {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 12px 14px;
    background: var(--kc-color-paper); border: 1px solid var(--border-light);
    border-radius: var(--radius);
}

/* ----- inline assign popover (Inbox thread) --------------------------------- */

.assign-wrap { position: relative; }
.assign-popover {
    position: absolute; right: 0; top: calc(100% + 6px);
    background: white; border: 1px solid var(--border-light);
    border-radius: var(--radius); box-shadow: var(--shadow-lg);
    width: 280px; max-height: 360px; overflow-y: auto;
    z-index: 50;
    animation: pop-in 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
.assign-popover-header { padding: 10px 14px; border-bottom: 1px solid var(--border-light); font-size: 11px; color: var(--text-secondary); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.assign-option { display: flex; align-items: center; gap: 10px; padding: 9px 14px; cursor: pointer; transition: background 100ms ease; }
.assign-option:hover { background: var(--color-accent-soft); }
.assign-option.selected { background: var(--color-accent-soft); }
.assign-option .avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--kc-color-emerald), var(--kc-color-lime)); color: white; display: grid; place-items: center; font-weight: 700; font-size: 11px; }
.assign-option .meta { flex: 1; min-width: 0; }
.assign-option .nm { font-size: 13px; font-weight: 600; }
.assign-option .em { font-size: 11px; color: var(--text-secondary); }
.assign-option .check { color: var(--color-accent); font-size: 13px; }

/* ============================================================================
   Topbar popovers — notifications bell + profile dropdown
   ============================================================================ */
.topbar-pop-wrap { position: relative; display: inline-flex; }

.icon-btn { position: relative; }
.icon-btn .badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--color-accent);
    color: white;
    font-size: 10px;
    font-weight: 700;
    display: grid;
    place-items: center;
    box-shadow: 0 0 0 2px white;
    line-height: 1;
}

.topbar-pop-backdrop {
    position: fixed; inset: 0; z-index: 40; background: transparent;
}
.topbar-pop {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 340px;
    max-width: 420px;
    background: white;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 36px -8px rgba(15, 23, 42, 0.18), 0 4px 12px rgba(15, 23, 42, 0.08);
    z-index: 50;
    overflow: hidden;
    animation: topbar-pop-in 140ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes topbar-pop-in {
    from { opacity: 0; transform: translateY(-6px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.topbar-pop-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--border-light);
}
.topbar-pop-header h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}
.link-btn {
    background: none; border: none; padding: 0;
    color: var(--color-accent); font-size: 12px; font-weight: 600; cursor: pointer;
}
.link-btn:hover { color: var(--color-accent-hover); }

.topbar-pop-body { max-height: 420px; overflow-y: auto; }
.topbar-pop-empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
}
.topbar-pop-empty i {
    font-size: 28px;
    color: var(--text-muted);
    display: block;
    margin-bottom: 10px;
    opacity: 0.6;
}
.topbar-pop-footer {
    padding: 10px 16px;
    border-top: 1px solid var(--border-light);
    background: #fbfaf6;
    font-size: 12.5px;
    text-align: center;
}
.topbar-pop-footer a { color: var(--color-accent); font-weight: 600; }

/* Notification rows */
.notif-pop { width: 380px; }
.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-primary);
    transition: background 80ms ease;
    position: relative;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: #fbf9f5; }
.notif-item.unread { background: rgba(198, 242, 75, 0.08); }
.notif-icon {
    width: 34px; height: 34px;
    border-radius: 10px;
    background: var(--color-accent-soft);
    color: var(--color-accent);
    display: grid; place-items: center;
    font-size: 14px;
    flex-shrink: 0;
}
.notif-body { flex: 1; min-width: 0; }
.notif-text {
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.notif-meta {
    font-size: 11.5px;
    color: var(--text-secondary);
    margin-top: 3px;
}
.notif-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--color-accent);
    align-self: center;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px white;
}

/* Profile dropdown */
.user-pill { cursor: pointer; padding-right: 12px; }
.user-pill:hover { background: #fbf9f5; }
.avatar.gradient {
    background: linear-gradient(135deg, var(--kc-color-emerald), var(--kc-color-lime));
    color: white;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 700;
    width: 32px; height: 32px;
    font-size: 13px;
    box-shadow: 0 2px 6px rgba(255, 107, 61, 0.32);
}
.avatar.gradient.lg { width: 52px; height: 52px; font-size: 18px; }
/* Avatar rendered as <img> directly. Same dimensions as the gradient variant for layout
   parity; object-fit: cover crops non-square uploads neatly into the circle. */
.avatar.avatar-img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.avatar.avatar-img.lg { width: 52px; height: 52px; }

.profile-pop { width: 320px; padding: 0; }
.profile-header {
    display: flex;
    gap: 14px;
    padding: 20px 18px 14px;
    background: linear-gradient(135deg, rgba(198, 242, 75, 0.10) 0%, var(--kc-bg-elevated) 100%);
    border-bottom: 1px solid var(--border-light);
}
.profile-meta { flex: 1; min-width: 0; }
.profile-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    margin-bottom: 2px;
}
.profile-email {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 8px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.profile-tenant {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--text-secondary);
    background: white;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid var(--border-light);
}
.profile-tenant i { color: var(--color-accent); font-size: 10px; }
.profile-slug { color: var(--text-muted); font-family: var(--kc-font-mono); font-size: 10.5px; }
.profile-roles {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--border-light);
}
.role-chip {
    background: var(--color-accent-soft);
    color: var(--color-accent);
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
}
.profile-divider { height: 1px; background: var(--border-light); margin: 0; }

/* Availability selector inside profile dropdown.
   4 buttons in a 2x2 grid; clicking a button flips the user's manual status
   without closing the dropdown so the user sees the dot change immediately. */
.profile-availability { padding: 12px 18px; }
.profile-availability-label {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.profile-availability-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.availability-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 9px;
    background: var(--kc-bg-muted, #f3f0ea);
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    color: var(--text-primary);
    transition: background 80ms ease, border-color 80ms ease;
}
.availability-btn:hover { background: #fbf9f5; }
.availability-btn.active {
    background: var(--color-accent-soft);
    border-color: var(--color-accent);
    color: var(--color-accent);
    font-weight: 600;
}

/* Shared status dots — also used in the team grid availability column. Each color
   maps to AgentAvailabilityStatus: Available=emerald, Busy=amber, Away=orange, Offline=gray. */
.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
.status-dot.dot-available { background: var(--kc-color-emerald, #10b981); }
.status-dot.dot-busy      { background: var(--kc-color-amber, #f59e0b); }
.status-dot.dot-away      { background: #fb923c; }
.status-dot.dot-offline   { background: #94a3b8; }
.profile-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 18px;
    color: var(--text-primary);
    background: none;
    border: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
    font-family: inherit;
    font-size: 13px;
    transition: background 80ms ease;
}
.profile-item:hover { background: #fbf9f5; color: var(--color-accent); }
.profile-item i { color: var(--text-secondary); font-size: 14px; width: 18px; text-align: center; }
.profile-item:hover i { color: var(--color-accent); }
.profile-item.danger { color: var(--kc-color-danger); border-top: 1px solid var(--border-light); }
.profile-item.danger:hover { background: rgba(239, 68, 68, 0.08); color: var(--kc-color-danger); }
.profile-item.danger i { color: var(--kc-color-danger); }

/* ============================================================================
   Konecia Brand Kit v2.1 utilities
   Use these classes when building new components. Prefer them over the legacy
   `.btn`, `.card`, `.pill` classes above (which now alias to --kc-* but keep
   the visual look of the previous orange design system).
   ============================================================================ */

/* Eyebrow / mono labels — Brand Kit Extended page 11, page 14 */
.kc-eyebrow {
    font-family: var(--kc-font-mono);
    font-size: var(--kc-text-xs);
    letter-spacing: var(--kc-tracking-mono);
    text-transform: uppercase;
    color: var(--kc-fg-muted);
    font-weight: var(--kc-weight-medium);
}

/* Display + heading scale — Brand Kit base page 14 */
.kc-display { font-size: var(--kc-text-6xl); line-height: 0.92; letter-spacing: -0.05em; font-weight: var(--kc-weight-semibold); font-family: var(--kc-font-sans); }
.kc-h1 { font-size: var(--kc-text-4xl); line-height: 1.05; letter-spacing: -0.04em; font-weight: var(--kc-weight-semibold); font-family: var(--kc-font-sans); }
.kc-h2 { font-size: var(--kc-text-3xl); line-height: 1.1;  letter-spacing: -0.03em; font-weight: var(--kc-weight-semibold); font-family: var(--kc-font-sans); }
.kc-h3 { font-size: var(--kc-text-2xl); line-height: 1.2;  letter-spacing: -0.02em; font-weight: var(--kc-weight-semibold); font-family: var(--kc-font-sans); }

.kc-card-elevated {
    background: var(--kc-bg-elevated);
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius-xl);
    box-shadow: var(--kc-shadow-md);
}

/* Pill button — Brand Kit Extended page 13 (CTA Reagendar / Cancel pills) */
.kc-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 20px;
    border-radius: var(--kc-radius-pill);
    font-family: var(--kc-font-sans);
    font-weight: var(--kc-weight-semibold);
    font-size: var(--kc-text-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform var(--kc-duration-fast) var(--kc-ease-standard), background var(--kc-duration-fast) var(--kc-ease-standard);
}
.kc-pill:active { transform: translateY(1px); }
.kc-pill.kc-primary { background: var(--kc-accent); color: var(--kc-accent-fg); }
.kc-pill.kc-primary:hover { background: var(--kc-color-emerald-2); }
.kc-pill.kc-ghost { background: transparent; color: var(--kc-fg); border-color: var(--kc-border-strong); }
.kc-pill.kc-ghost:hover { border-color: var(--kc-accent); color: var(--kc-accent); }

/* Lime focus glow — used on AI suggestion CTAs and focus rings */
.kc-glow { box-shadow: var(--kc-shadow-glow); }

/* Konecia signature gradient (lime → emerald). Hero, mocks, AI states. */
.kc-gradient-hero { background: linear-gradient(135deg, var(--kc-color-emerald) 0%, var(--kc-color-lime) 100%); }

/* Status / AI tone chips — semantic background tints */
.kc-tone-success { background: rgba(16, 185, 129, 0.12); color: var(--kc-color-success); }
.kc-tone-warning { background: rgba(245, 158, 11, 0.12); color: var(--kc-color-warning); }
.kc-tone-danger  { background: rgba(239, 68, 68, 0.12);  color: var(--kc-color-danger); }
.kc-tone-info    { background: rgba(59, 130, 246, 0.12); color: var(--kc-color-info); }
.kc-tone-ai-suggested { background: rgba(167, 139, 250, 0.15); color: var(--kc-color-ai-suggested); }
.kc-tone-ai-auto      { background: rgba(198, 242, 75, 0.22);  color: #4d6b1e; }
.kc-tone-ai-human     { background: var(--kc-color-bone-2);    color: var(--kc-fg); }
.kc-tone-ai-escalated { background: rgba(245, 158, 11, 0.15);  color: var(--kc-color-warning); }

/* Channel chips — only when channel is the subject of the UI (filter, source badge,
   selector). Supports either a leading dot or an inline SVG icon. */
.kc-channel-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--kc-radius-pill); font-family: var(--kc-font-mono); font-size: var(--kc-text-xs); letter-spacing: var(--kc-tracking-mono); text-transform: uppercase; font-weight: var(--kc-weight-medium); }
.kc-channel-chip-icon { width: 14px; height: 14px; flex-shrink: 0; }
.kc-channel-chip.kc-ch-whatsapp  { color: var(--kc-channel-whatsapp);  background: rgba(37, 211, 102, 0.12); }
.kc-channel-chip.kc-ch-instagram { color: var(--kc-channel-instagram); background: rgba(225, 48, 108, 0.12); }
.kc-channel-chip.kc-ch-messenger { color: var(--kc-channel-messenger); background: rgba(0, 132, 255, 0.12); }
.kc-channel-chip.kc-ch-webchat   { color: #4d6b1e; background: rgba(198, 242, 75, 0.22); }
.kc-channel-chip.kc-ch-email     { color: var(--kc-channel-email);     background: rgba(167, 139, 250, 0.15); }
.kc-channel-chip.kc-ch-sms       { color: var(--kc-channel-sms);       background: rgba(16, 185, 129, 0.12); }
.kc-channel-chip.kc-ch-telegram  { color: var(--kc-channel-telegram);  background: rgba(34, 158, 217, 0.12); }
.kc-channel-chip.kc-ch-tiktok    { color: #000;                        background: linear-gradient(135deg, rgba(37, 244, 238, 0.16), rgba(254, 44, 85, 0.14)); }
.kc-channel-chip.kc-ch-unknown   { color: var(--kc-fg-muted);          background: var(--kc-bg-muted); }

/* AI origin badge — Brand Kit Extended page 7. Identifies who said what. */
.kc-ai-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px;
    border-radius: var(--kc-radius-pill);
    font-family: var(--kc-font-mono);
    font-size: var(--kc-text-xs);
    letter-spacing: var(--kc-tracking-mono);
    text-transform: uppercase;
    font-weight: var(--kc-weight-semibold);
    line-height: 1;
}
.kc-ai-badge-glyph { font-size: 11px; }
.kc-ai-badge--suggested { background: rgba(167, 139, 250, 0.16); color: var(--kc-color-ai-suggested); }
.kc-ai-badge--auto      { background: rgba(198, 242, 75, 0.22);  color: #4d6b1e; }
.kc-ai-badge--human     { background: var(--kc-color-bone-2);    color: var(--kc-fg); }
.kc-ai-badge--escalated { background: rgba(245, 158, 11, 0.18);  color: var(--kc-color-warning); }
.kc-ai-badge--contact   { background: var(--kc-bg-muted);        color: var(--kc-fg-muted); }

/* Editorial italic — Brand Kit base page 13 */
.kc-serif-italic { font-family: var(--kc-font-serif); font-style: italic; }

/* Language switcher (topbar) */
.lang-switcher { position: relative; display: inline-flex; }
.lang-trigger {
    width: auto;
    padding: 0 12px;
    gap: 6px;
}
.lang-trigger .lang-current {
    font-family: var(--kc-font-mono);
    font-size: 11px;
    letter-spacing: var(--kc-tracking-mono);
    text-transform: uppercase;
    font-weight: var(--kc-weight-semibold);
}
.lang-pop { width: 220px; }
.lang-option {
    display: flex; align-items: center; gap: 12px;
    width: 100%;
    padding: 10px 16px;
    background: none; border: none;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: background var(--kc-duration-fast) var(--kc-ease-standard);
}
.lang-option:hover { background: var(--kc-bg-muted); }
.lang-option.selected { background: rgba(16, 185, 129, 0.08); }
.lang-option .lang-code {
    font-family: var(--kc-font-mono);
    font-size: 11px;
    letter-spacing: var(--kc-tracking-mono);
    text-transform: uppercase;
    font-weight: var(--kc-weight-semibold);
    width: 22px;
    color: var(--kc-fg-muted);
}
.lang-option .lang-name {
    flex: 1;
    font-size: 13px;
    color: var(--kc-fg);
}
.lang-option i {
    color: var(--kc-color-emerald);
    font-size: 12px;
}

/* ============================================================================
 * AI suggestion bubble (Brand Kit Extended page 7 — "suggested" state)
 * Lavender accent + ✦ badge + inline Approve/Edit/Discard. The whole bubble is
 * "ghosted" until human action: lighter background, dashed border so it reads
 * as draft. Once approved, the server flips status and the row re-renders as a
 * normal outbound bubble.
 * ============================================================================ */
.bubble-row.suggested { /* same alignment as outbound; nothing special — kept for hooks */ }

.bubble.ai-suggested {
    background: rgba(167, 139, 250, 0.08);
    border: 1px dashed var(--kc-color-ai-suggested);
    color: var(--kc-fg);
    box-shadow: none;
}

.ai-suggested-header { margin-bottom: 6px; }

.ai-suggested-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 9px;
    border-radius: var(--kc-radius-pill);
    background: rgba(167, 139, 250, 0.18);
    color: var(--kc-color-ai-suggested);
    font-family: var(--kc-font-mono);
    font-size: 10px;
    letter-spacing: var(--kc-tracking-mono);
    text-transform: uppercase;
    font-weight: var(--kc-weight-semibold);
    line-height: 1;
}

.ai-suggested-edit {
    width: 100%;
    margin: 6px 0;
    padding: 8px 10px;
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius-md);
    background: var(--kc-bg-elevated);
    color: var(--kc-fg);
    font-family: var(--kc-font-sans);
    font-size: 14px;
    resize: vertical;
    min-height: 60px;
}
.ai-suggested-edit:focus {
    outline: none;
    border-color: var(--kc-color-ai-suggested);
    box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.25);
}

.ai-suggested-actions {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-top: 8px;
}

/* Smaller pill for inline actions inside a bubble. */
.kc-pill.kc-pill-sm {
    padding: 5px 12px;
    font-size: 12px;
    gap: 5px;
}
.kc-pill.kc-pill-sm i { font-size: 11px; }

/* Ghost pill colored as danger for Discard. */
.kc-pill.kc-ghost.danger-text { color: var(--kc-color-danger); border-color: rgba(239, 68, 68, 0.4); }
.kc-pill.kc-ghost.danger-text:hover { border-color: var(--kc-color-danger); background: rgba(239, 68, 68, 0.06); }

/* Button-as-link for clickable cell content. Sin background ni borde, hereda font
   y alinea texto a la izquierda. Hover sutil para indicar interactividad. Resuelve
   el problema de "no se nota que la celda es clickeable" sin obligar al user a
   buscar un botón en una columna de acción que se le corta del viewport. */
.kc-row-link {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.kc-row-link:hover > div:first-child { color: var(--kc-color-emerald); }
/* Cuando combinamos kc-row-link con avatar-cell (botón clickeable que envuelve
   avatar + texto), el display:block de kc-row-link gana en source-order sobre el
   display:flex de avatar-cell. Esto hace specificity 0,2,0 → flex se respeta y el
   layout horizontal del avatar+nombre queda intacto. */
.kc-row-link.avatar-cell { display: flex; }
.kc-row-link.avatar-cell:hover .name { color: var(--kc-color-emerald); }

/* Inline status banner — used for surfaceable backend errors (sync, validation,
 * provider failures). Lives below the page header. Brand-kit colors only. */
.kc-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--kc-radius-md, 10px);
    border: 1px solid;
    margin: 14px 0;
    font-size: 13px;
    line-height: 1.45;
    animation: kc-banner-in 220ms ease-out;
}
.kc-banner > i:first-child { padding-top: 2px; flex: 0 0 auto; font-size: 15px; }
.kc-banner > span { flex: 1; word-break: break-word; }
.kc-banner-close {
    flex: 0 0 auto;
    background: transparent;
    border: 0;
    padding: 2px 6px;
    cursor: pointer;
    color: inherit;
    opacity: 0.65;
    border-radius: 6px;
}
.kc-banner-close:hover { opacity: 1; background: rgba(0, 0, 0, 0.05); }
.kc-banner-success {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.3);
    color: var(--kc-color-emerald-2, #047857);
}
.kc-banner-error {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.35);
    color: #b91c1c;
}
@keyframes kc-banner-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================================================
 * Routing queues page (Phase 3 Slice 3)
 * Page subtitle, queue members drawer, member list cards.
 * ============================================================================ */
.page-subtitle {
    margin: -10px 0 22px 0;
    color: var(--kc-fg-muted, var(--text-secondary));
    font-size: 14px;
    max-width: 720px;
}

.add-member-row {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 18px;
}
.add-member-row .add-member-combo { flex: 1; }

.member-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.member-list .member-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--kc-color-bone-2, #f3efe8);
    transition: background 120ms;
}
.member-list .member-item:hover { background: var(--kc-bg-muted, #ebe7df); }
.member-list .member-item .avatar {
    width: 36px; height: 36px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--kc-color-emerald), var(--kc-color-lime));
    color: white;
    border-radius: 50%;
    display: grid; place-items: center;
    font-weight: 700;
    font-size: 12px;
}
.member-list .member-item .member-meta { flex: 1; min-width: 0; }
.member-list .member-item .member-meta .nm {
    font-weight: 600;
    color: var(--kc-fg, var(--text-primary));
    font-size: 14px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.member-list .member-item .member-meta .em {
    color: var(--kc-fg-muted, var(--text-secondary));
    font-size: 12px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.member-list .member-item .btn-icon.danger-text { color: var(--kc-color-danger); }

.status-actions-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: space-between;
}

/* ── Canned responses · popover en el composer del inbox ───────────────── */
.composer-canned-wrap { position: relative; display: inline-block; }
.composer-canned-menu {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    width: 340px;
    max-height: 420px;
    background: white;
    border: 1px solid var(--kc-border, #e5e7eb);
    border-radius: 12px;
    box-shadow: var(--kc-shadow-md);
    z-index: 30;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.canned-menu-search {
    position: relative;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-light);
    background: var(--kc-color-bone-2, var(--kc-color-bone-2));
}
.canned-menu-search i {
    position: absolute;
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary);
    font-size: 12px;
}
.canned-menu-search input {
    width: 100%;
    padding: 7px 10px 7px 32px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: white;
    font-family: inherit;
    font-size: 12.5px;
    outline: none;
}
.canned-menu-search input:focus { border-color: var(--kc-color-emerald, #10B981); }
.canned-menu-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.canned-menu-empty {
    padding: 16px;
    text-align: center;
    color: var(--text-tertiary);
    font-size: 12px;
}
.canned-menu-item {
    text-align: left;
    background: transparent;
    border: 0;
    padding: 9px 12px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 3px;
    transition: background 0.1s ease;
}
.canned-menu-item:hover { background: var(--kc-color-bone-2, var(--kc-color-bone-2)); }
.canned-menu-item-head {
    display: flex;
    align-items: center;
    gap: 8px;
}
.canned-menu-item-head > i {
    color: var(--kc-color-emerald, #10B981);
    font-size: 12px;
}
.canned-menu-item-title {
    flex: 1;
    font-weight: 600;
    font-size: 12.5px;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.canned-menu-item-shortcut {
    font-family: var(--kc-font-mono, ui-monospace), monospace;
    font-size: 10px;
    color: var(--text-tertiary);
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--kc-color-bone-3, #f0efea);
}
.canned-menu-item-body {
    font-size: 11.5px;
    color: var(--text-secondary);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-left: 20px;
}
.canned-menu-footer {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    box-sizing: border-box;
    padding: 9px 12px;
    border: 0;
    border-top: 1px solid var(--border-light);
    background: var(--kc-color-bone-2, var(--kc-color-bone-2));
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--kc-color-emerald, #10B981);
    text-decoration: none;
    text-align: left;
    cursor: pointer;
    transition: background 0.1s ease;
}
.canned-menu-footer:hover { background: rgba(16, 185, 129, 0.08); color: var(--kc-color-emerald, #10B981); }
.canned-menu-empty-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    color: var(--kc-color-emerald, #10B981);
    font-weight: 600;
    text-decoration: none;
}
.canned-menu-empty-link:hover { text-decoration: underline; }

/* ── Toast de error para acciones del header del inbox ─────────────────────
   Antes asignar IA/human/takeover/return fallaban silente cuando el backend
   devolvía 4xx/5xx. Ahora ese error sale como banner arriba del thread y se
   puede cerrar con la X. Se auto-resetea cuando la siguiente acción funciona. */
.kc-action-toast {
    margin: 8px 16px 0;
    padding: 10px 14px;
    border-radius: 8px;
    background: rgba(220, 38, 38, 0.08);
    border: 1px solid rgba(220, 38, 38, 0.3);
    color: var(--kc-color-danger, #DC2626);
    display: flex; align-items: center; gap: 10px;
    font-size: 13px;
}
.kc-action-toast-x {
    margin-left: auto;
    border: 0; background: transparent;
    color: inherit; cursor: pointer;
    width: 24px; height: 24px;
    border-radius: 4px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.12s;
}
.kc-action-toast-x:hover { background: rgba(220, 38, 38, 0.12); }

/* ── Composer slash-autocomplete popover ────────────────────────────────────
   Aparece cuando el operador tipea "/word" en el textarea del inbox. Filtra
   shortcuts live, muestra max 8 hits, navega con flechas + Enter/Tab.
   Position absolute sobre el wrapper relative del textarea, bottom: 100% pega
   el popover apenas arriba del input. */
/* El popover vive como sibling del textarea, anclado al .composer (position:relative).
   Antes lo wrappeaba con .composer-textarea-wrap que rompía el flex del composer y dejaba
   el textarea angosto. Esta versión es estructuralmente más simple. */
.composer-slash-popover {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--kc-border, #e5e7eb);
    border-radius: 12px;
    box-shadow: 0 12px 32px -12px rgba(0,0,0,0.18);
    max-width: 520px;
    z-index: 40;
    overflow: hidden;
}
.composer-slash-head {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-light, #f0eee9);
    background: var(--kc-color-bone-2, #f8f6f1);
    font-family: var(--kc-font-mono, ui-monospace, monospace);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--kc-fg-muted);
    display: flex; align-items: center; gap: 8px;
}
.composer-slash-hint { margin-left: auto; opacity: 0.7; }
.composer-slash-list { max-height: 280px; overflow-y: auto; }
.composer-slash-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    color: var(--kc-fg);
    transition: background 0.1s;
}
.composer-slash-item > i { color: var(--kc-fg-muted); font-size: 14px; padding-top: 2px; flex-shrink: 0; }
.composer-slash-item:hover, .composer-slash-item.is-on {
    background: rgba(16, 185, 129, 0.08);
}
.composer-slash-item.is-on > i { color: var(--kc-color-emerald, #10B981); }
.composer-slash-item-body { flex: 1; min-width: 0; }
.composer-slash-item-head { display: flex; align-items: baseline; gap: 8px; }
.composer-slash-item-shortcut {
    font-family: var(--kc-font-mono, ui-monospace, monospace);
    font-size: 12px;
    font-weight: 600;
    color: var(--kc-color-emerald, #10B981);
    background: rgba(16, 185, 129, 0.1);
    padding: 1px 6px;
    border-radius: 4px;
    flex-shrink: 0;
}
.composer-slash-item-title { font-weight: 500; font-size: 13px; }
.composer-slash-item-preview {
    margin-top: 3px;
    font-size: 11.5px;
    color: var(--kc-fg-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

/* ── Canned response drawer: emoji picker en body ───────────────────────────
   Botón flotante en la esquina inferior derecha del textarea; abre un popover
   con grid de emojis. Mismo set que el composer del inbox. */
.builder-textarea-wrap { position: relative; }
.builder-textarea-emoji-btn {
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 32px; height: 32px;
    border: 0;
    background: white;
    border-radius: 8px;
    color: var(--kc-fg-muted);
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    transition: color 0.12s, transform 0.12s;
}
.builder-textarea-emoji-btn:hover { color: var(--kc-color-emerald, #10B981); transform: scale(1.06); }
.builder-emoji-popover {
    position: absolute;
    right: 8px;
    bottom: 50px;
    background: white;
    border: 1px solid var(--kc-border);
    border-radius: 12px;
    box-shadow: 0 8px 28px -8px rgba(0,0,0,0.18);
    padding: 10px;
    z-index: 60;
    width: 304px;
}
.builder-emoji-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
}
.builder-emoji-btn {
    border: 0;
    background: transparent;
    width: 32px; height: 32px;
    font-size: 18px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.1s;
    display: inline-flex; align-items: center; justify-content: center;
}
.builder-emoji-btn:hover { background: var(--kc-color-bone-2, #f8f6f1); }

/* ── Category drawer: icon picker grid (sustituye al input tipo "fa-regular fa-folder") ──
   Catálogo curado de 40 íconos FA6 para categorías. Click = selecciona. UX inspirado
   en cómo HubSpot/Intercom hacen su icon-pick (no input crudo, no string. Visual). */
.kc-icon-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
    gap: 6px;
    padding: 12px;
    max-height: 220px;
    overflow-y: auto;
    background: var(--kc-color-paper, #FAFAF7);
    border: 1px solid var(--kc-border);
    border-radius: 10px;
}
.kc-icon-picker-cell {
    aspect-ratio: 1;
    border: 1px solid transparent;
    background: white;
    border-radius: 8px;
    color: var(--kc-fg-muted);
    font-size: 16px;
    cursor: pointer;
    transition: border-color 0.12s, color 0.12s, background 0.12s, transform 0.12s;
    display: inline-flex; align-items: center; justify-content: center;
}
.kc-icon-picker-cell:hover {
    border-color: var(--kc-border);
    color: var(--kc-fg);
    transform: scale(1.05);
}
.kc-icon-picker-cell.is-on {
    border-color: var(--kc-color-emerald, #10B981);
    background: rgba(16, 185, 129, 0.08);
    color: var(--kc-color-emerald, #10B981);
}

/* ── Content-type picker (drawer admin) ────────────────────────────────── */
.ct-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.ct-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: white;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}
.ct-chip:hover { border-color: var(--kc-color-emerald, #10B981); color: var(--kc-color-emerald, #10B981); }
.ct-chip.is-on {
    background: rgba(16, 185, 129, 0.08);
    border-color: var(--kc-color-emerald, #10B981);
    color: var(--kc-color-emerald, #10B981);
}
.ct-chip i { font-size: 12px; }

/* ── Upload preview / button (admin drawer) ────────────────────────────── */
.upload-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px dashed var(--border);
    border-radius: 10px;
    background: var(--kc-color-bone-2, var(--kc-color-bone-2));
    cursor: pointer;
    font-size: 12.5px;
    color: var(--text-secondary);
    transition: all 0.15s ease;
}
.upload-button:hover { border-color: var(--kc-color-emerald, #10B981); color: var(--kc-color-emerald, #10B981); }
.upload-button input[type="file"] { display: none; }
.upload-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--kc-color-bone-2, var(--kc-color-bone-2));
    border-radius: 8px;
    font-size: 12px;
}
.upload-name { font-weight: 600; flex: 1; }
.upload-meta { color: var(--text-tertiary); font-size: 11px; }

.cat-list { display: flex; flex-direction: column; gap: 6px; }
.cat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--kc-color-bone-2, var(--kc-color-bone-2));
    border-radius: 8px;
    font-size: 12.5px;
}

.form-help {
    background: var(--kc-color-bone-2, var(--kc-color-bone-2));
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 12px;
}
.form-help summary { cursor: pointer; font-weight: 600; color: var(--text-secondary); }
.form-help-body { margin-top: 8px; color: var(--text-secondary); line-height: 1.5; }
.form-help-body code {
    font-family: var(--kc-font-mono, ui-monospace);
    font-size: 11px;
    padding: 1px 5px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 4px;
}
.form-help-body ul { margin: 6px 0 0; padding-left: 18px; }
.form-help-body li { margin-bottom: 4px; }

/* ── WhatsApp template editor — toolbar de formato + emoji picker + validity ── */
.wa-body-toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-bottom: 4px;
    padding: 4px;
    background: var(--kc-color-bone-2, var(--kc-color-bone-2));
    border: 1px solid var(--kc-border, #e5e7eb);
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    position: relative;
}
.wa-toolbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 28px;
    padding: 0 8px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-secondary);
    transition: all 0.1s ease;
}
.wa-toolbar-btn:hover:not(:disabled) {
    background: white;
    border-color: var(--kc-border, #e5e7eb);
    color: var(--kc-color-emerald, #10B981);
}
.wa-toolbar-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.wa-toolbar-btn code { font-family: var(--kc-font-mono, ui-monospace); font-size: 11px; }
.wa-toolbar-sep {
    width: 1px;
    height: 18px;
    background: var(--kc-border, #e5e7eb);
    margin: 0 4px;
}

.wa-emoji-popover {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 30;
    background: white;
    border: 1px solid var(--kc-border, #e5e7eb);
    border-radius: 10px;
    box-shadow: var(--kc-shadow-md);
    padding: 6px;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 2px;
    width: 320px;
}
.wa-emoji-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
}
.wa-emoji-btn:hover { background: var(--kc-color-bone-2, var(--kc-color-bone-2)); }

/* Cuando el toolbar está activo, redondear el textarea solo abajo para que se vea unido. */
.wa-body-toolbar + textarea.builder-input {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* Validity row — toggle switch estilo iOS + número de minutos. */
.wa-validity-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.wa-switch {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 22px;
    flex-shrink: 0;
}
.wa-switch input { opacity: 0; width: 0; height: 0; }
.wa-switch-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: #cbd5e1;
    border-radius: 22px;
    transition: 0.2s;
}
.wa-switch-slider::before {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: 0.2s;
    box-shadow: var(--kc-shadow-knob);
}
.wa-switch input:checked + .wa-switch-slider { background: var(--kc-color-emerald, #10B981); }
.wa-switch input:checked + .wa-switch-slider::before { transform: translateX(16px); }
.wa-switch input:disabled + .wa-switch-slider { opacity: 0.5; cursor: not-allowed; }

/* Preview: indicador de modo lista cuando >3 botones. */
.wa-preview-list-trigger {
    background: var(--kc-color-bone-2, var(--kc-color-bone-2)) !important;
    border: 1px solid var(--kc-border, #e5e7eb) !important;
    font-weight: 600;
}
.wa-preview-list-hint {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 8px;
    padding: 8px 10px;
    background: rgba(16, 185, 129, 0.06);
    border-left: 3px solid var(--kc-color-emerald, #10B981);
    border-radius: 6px;
    font-size: 11.5px;
    color: var(--text-secondary);
    line-height: 1.4;
}
.wa-preview-list-hint i { color: var(--kc-color-emerald, #10B981); margin-top: 1px; }

/* ── WhatsApp Flows editor drawer ──────────────────────────────────────── */
.flow-editor-drawer {
    max-width: 1100px;
}
.flow-editor-body {
    overflow-y: auto;
}
.flow-editor-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 20px;
}
@media (max-width: 1024px) {
    .flow-editor-grid { grid-template-columns: 1fr; }
}
.flow-editor-pane {
    min-width: 0;
}
.flow-json-editor {
    font-family: var(--kc-font-mono, ui-monospace, monospace);
    font-size: 12px;
    line-height: 1.5;
    white-space: pre;
    tab-size: 2;
}
.flow-preview-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 480px;
    padding: 20px;
    background: var(--kc-color-bone-2, var(--kc-color-bone-2));
    border: 1px dashed var(--border);
    border-radius: 12px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
}
.flow-preview-iframe {
    width: 100%;
    height: 600px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: white;
}
.flow-editor-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Starter picker — chips para escoger un preset al crear Flow. */
.flow-starter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 6px;
    margin-bottom: 4px;
}
.flow-starter-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-secondary);
    transition: all 0.15s ease;
    text-align: left;
}
.flow-starter-chip:hover {
    border-color: var(--kc-color-emerald, #10B981);
    color: var(--kc-color-emerald, #10B981);
}
.flow-starter-chip.is-on {
    background: rgba(16, 185, 129, 0.08);
    border-color: var(--kc-color-emerald, #10B981);
    color: var(--kc-color-emerald, #10B981);
}
.flow-starter-chip i { font-size: 14px; flex-shrink: 0; }

/* ── Toggle Visual / JSON ─────────────────────────────────────────────── */
.flow-mode-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 8px;
}
.flow-mode-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.1s ease;
}
.flow-mode-btn:hover { color: var(--kc-color-emerald, #10B981); border-color: var(--kc-color-emerald, #10B981); }
.flow-mode-btn.is-on {
    background: rgba(16, 185, 129, 0.10);
    border-color: var(--kc-color-emerald, #10B981);
    color: var(--kc-color-emerald, #10B981);
}

/* ── Flow Visual Editor (Capa 3) ──────────────────────────────────────── */
.flow-ve {
    display: grid;
    grid-template-columns: 200px 1fr 280px;
    gap: 12px;
    min-height: 540px;
    background: var(--kc-color-bone-2, var(--kc-color-bone-2));
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
}
@media (max-width: 1100px) {
    .flow-ve { grid-template-columns: 180px 1fr 240px; }
}

/* Palette */
.flow-ve-palette {
    background: white;
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    max-height: 600px;
}
.flow-ve-palette-head {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    gap: 6px;
}
.flow-ve-palette-group { display: flex; flex-direction: column; gap: 3px; }
.flow-ve-palette-group-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    margin: 4px 0 2px;
}
.flow-ve-palette-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    background: var(--kc-color-bone-2, var(--kc-color-bone-2));
    border: 1px solid var(--border-light);
    border-radius: 8px;
    cursor: grab;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-primary);
    transition: all 0.1s ease;
    user-select: none;
}
.flow-ve-palette-item:hover {
    background: rgba(16, 185, 129, 0.08);
    border-color: var(--kc-color-emerald, #10B981);
    color: var(--kc-color-emerald, #10B981);
}
.flow-ve-palette-item:active { cursor: grabbing; }
.flow-ve-palette-item i { font-size: 12px; color: var(--text-secondary); }
.flow-ve-palette-item:hover i { color: var(--kc-color-emerald, #10B981); }

/* Canvas */
.flow-ve-canvas {
    background: white;
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 12px;
    overflow-y: auto;
    max-height: 600px;
    min-width: 0;
}
.flow-ve-canvas-head { margin-bottom: 10px; }
.flow-ve-screen-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 8px;
    flex-wrap: wrap;
}
.flow-ve-tab {
    padding: 5px 10px;
    background: transparent;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    font-family: var(--kc-font-mono, ui-monospace);
    font-size: 11px;
    color: var(--text-secondary);
    cursor: pointer;
}
.flow-ve-tab:hover { color: var(--kc-color-emerald, #10B981); border-color: var(--kc-color-emerald, #10B981); }
.flow-ve-tab.is-on {
    background: var(--kc-color-emerald, #10B981);
    border-color: var(--kc-color-emerald, #10B981);
    color: white;
}
.flow-ve-tab-add {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    background: transparent;
    border: 1px dashed var(--border);
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-tertiary);
}
.flow-ve-tab-add:hover { color: var(--kc-color-emerald, #10B981); border-color: var(--kc-color-emerald, #10B981); }

.flow-ve-screen { display: flex; flex-direction: column; gap: 10px; }
.flow-ve-screen-meta {
    padding: 10px;
    background: var(--kc-color-bone-2, var(--kc-color-bone-2));
    border-radius: 8px;
}
.flow-ve-screen-delete {
    padding: 5px 10px;
    background: transparent;
    border: 1px solid var(--color-danger-border);
    border-radius: 6px;
    color: var(--color-danger-strong);
    font-size: 11.5px;
    cursor: pointer;
}
.flow-ve-screen-delete:hover { background: var(--color-danger-soft); }

.flow-ve-drop-zone {
    min-height: 200px;
    padding: 10px;
    border: 2px dashed var(--border);
    border-radius: 10px;
    transition: all 0.15s ease;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.flow-ve-drop-zone.is-dragover {
    border-color: var(--kc-color-emerald, #10B981);
    background: rgba(16, 185, 129, 0.05);
}
.flow-ve-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 30px;
    color: var(--text-tertiary);
    font-size: 12.5px;
    text-align: center;
}

/* Node — un componente en el canvas. Layout estilo Notion/Figma: drag handle visible
   como columna dedicada a la izquierda, actions a la derecha aparecen on hover para
   reducir ruido. Hover/selected con anillo emerald consistente con el resto del UI. */
.flow-ve-node {
    background: var(--kc-bg-elevated);
    border: 1px solid var(--border-light);
    border-radius: var(--kc-radius-md);
    padding: 10px 10px 10px 6px;
    cursor: pointer;
    transition: border-color var(--kc-duration-fast) var(--kc-ease-standard),
                box-shadow var(--kc-duration-fast) var(--kc-ease-standard);
    position: relative;
}
.flow-ve-node:hover { border-color: var(--kc-color-emerald); }
.flow-ve-node:hover .flow-ve-node-actions { opacity: 1; }
.flow-ve-node.is-selected {
    border-color: var(--kc-color-emerald);
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.15);
}
.flow-ve-node.is-selected .flow-ve-node-actions { opacity: 1; }
.flow-ve-node-head {
    display: flex;
    align-items: center;
    gap: 8px;
}
.flow-ve-node-head > i { font-size: 12px; color: var(--kc-fg-muted); }
.flow-ve-node-type {
    font-family: var(--kc-font-mono);
    font-size: 11px;
    font-weight: var(--kc-weight-bold);
    color: var(--kc-fg);
}
.flow-ve-node-label {
    font-size: 12.5px;
    color: var(--kc-fg-muted);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.flow-ve-node-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    opacity: 0;
    transition: opacity var(--kc-duration-fast) var(--kc-ease-standard);
}
.flow-ve-node-actions button {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    background: transparent;
    border: 0;
    border-radius: 4px;
    color: var(--text-tertiary);
    cursor: pointer;
    font-size: 10px;
}
.flow-ve-node-actions button:hover { background: var(--kc-color-bone-2, var(--kc-color-bone-2)); color: var(--text-primary); }
.flow-ve-node-actions button.danger:hover { color: var(--color-danger-strong); background: var(--color-danger-soft); }

/* Form como container con dropzone anidada */
.flow-ve-form-body {
    margin-top: 8px;
    padding: 10px;
    background: rgba(126, 91, 255, 0.04);
    border: 1px dashed rgba(126, 91, 255, 0.30);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.flow-ve-form-body.is-dragover {
    background: rgba(16, 185, 129, 0.08);
    border-color: var(--kc-color-emerald, #10B981);
}
.flow-ve-form-empty {
    text-align: center;
    padding: 12px;
    color: var(--text-tertiary);
    font-size: 11px;
    font-style: italic;
}

/* Property panel */
.flow-ve-props {
    background: white;
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 12px;
    overflow-y: auto;
    max-height: 600px;
}
.flow-ve-props-head {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-light);
}
.flow-ve-props-empty {
    text-align: center;
    color: var(--text-tertiary);
    font-size: 12px;
    padding: 20px 10px;
}
.flow-ve-props-body { display: flex; flex-direction: column; gap: 10px; }
.flow-ve-props-type {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid var(--kc-color-emerald, #10B981);
    border-radius: 8px;
    font-family: var(--kc-font-mono, ui-monospace);
    font-size: 11px;
    font-weight: 700;
    color: var(--kc-color-emerald, #10B981);
    width: fit-content;
}

.flow-ve-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}
.flow-ve-checkbox input { accent-color: var(--kc-color-emerald, #10B981); }

.flow-ve-option-row {
    display: flex;
    gap: 6px;
    margin-bottom: 4px;
}
.flow-ve-option-del {
    width: 28px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-tertiary);
    cursor: pointer;
    flex-shrink: 0;
}
.flow-ve-option-del:hover { color: var(--color-danger-strong); border-color: var(--color-danger-border); }
.flow-ve-add-option {
    padding: 5px 10px;
    background: transparent;
    border: 1px dashed var(--border);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 11.5px;
    cursor: pointer;
    margin-top: 4px;
}
.flow-ve-add-option:hover { color: var(--kc-color-emerald, #10B981); border-color: var(--kc-color-emerald, #10B981); }

.flow-ve-mono { font-family: var(--kc-font-mono, ui-monospace); font-size: 12px; }

/* Property panel: secciones colapsables (patrón Notion/HubSpot). Reducen ruido visual
   en pickers complejos — el operador ve "Básico" abierto + "Validación"/"Avanzado" a un click. */
.flow-ve-section {
    border-top: 1px solid var(--border-light);
    padding: 6px 0;
}
.flow-ve-section:first-of-type { border-top: 0; padding-top: 4px; }
.flow-ve-section-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 2px;
    cursor: pointer;
    font-size: 11px;
    font-weight: var(--kc-weight-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--kc-fg-muted);
    list-style: none;
    user-select: none;
    transition: color var(--kc-duration-fast) var(--kc-ease-standard);
}
.flow-ve-section-head:hover { color: var(--kc-color-emerald); }
.flow-ve-section-head::-webkit-details-marker { display: none; }
.flow-ve-section-chevron {
    font-size: 9px !important;
    transition: transform var(--kc-duration-fast) var(--kc-ease-standard);
}
.flow-ve-section[open] .flow-ve-section-chevron { transform: rotate(90deg); }
.flow-ve-section-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 8px 0 4px;
}

/* Warning banner — reusable. Reemplaza el style="color:#B45309" inline. */
.flow-ve-warn {
    background: var(--kc-color-warning-soft);
    border-left: 3px solid var(--kc-color-warning);
    padding: 8px 10px;
    border-radius: var(--kc-radius-sm);
    color: var(--kc-fg);
    margin: 4px 0 0;
}
.flow-ve-warn i { color: var(--kc-color-warning); margin-right: 4px; }

/* WA template radios — botones tipo pill que se comportan como radio buttons. */
.wa-radio-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.wa-radio {
    flex: 1 1 200px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 10px 14px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
    font-family: var(--kc-font-mono, ui-monospace);
}
.wa-radio:hover:not(:disabled) {
    border-color: var(--kc-color-emerald, #10B981);
    color: var(--kc-color-emerald, #10B981);
}
.wa-radio.is-on {
    background: rgba(16, 185, 129, 0.08);
    border-color: var(--kc-color-emerald, #10B981);
    color: var(--kc-color-emerald, #10B981);
}
.wa-radio:disabled { opacity: 0.5; cursor: not-allowed; }
.wa-radio strong { font-weight: 700; font-size: 12.5px; letter-spacing: 0.02em; }
.wa-radio-hint {
    font-family: var(--kc-font-sans, system-ui);
    font-weight: 500;
    font-size: 11px;
    color: var(--text-secondary);
}
.wa-radio.is-on .wa-radio-hint { color: var(--kc-color-emerald, #10B981); }

/* ── Flow Visual Editor — Iteración 3.5 ───────────────────────────────── */

/* Drop indicator entre nodos del canvas (zona "above"). Línea fina que se enciende
   cuando el operador arrastra encima — proporciona feedback visual de dónde caería el drop. */
.flow-ve-drop-indicator {
    height: 4px;
    margin: -3px 0;
    border-radius: 2px;
    transition: background 0.15s ease;
    pointer-events: auto;
}
.flow-ve-drop-indicator.is-active {
    background: var(--kc-color-emerald, #10B981);
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.20);
    height: 5px;
}

/* Drag handle — columna dedicada a la izquierda del nodo. Visible siempre como affordance
   pero atenuado; al hover del nodo entero se enciende para mostrar que el nodo es draggable. */
.flow-ve-drag-handle {
    cursor: grab;
    color: var(--kc-fg-subtle) !important;
    font-size: 11px !important;
    width: 14px;
    margin: 0 2px 0 -2px;
    transition: color var(--kc-duration-fast) var(--kc-ease-standard);
    flex-shrink: 0;
}
.flow-ve-node:hover .flow-ve-drag-handle { color: var(--kc-fg-muted) !important; }
.flow-ve-node:active .flow-ve-drag-handle { cursor: grabbing; color: var(--kc-color-emerald) !important; }
.flow-ve-node[draggable="true"] { cursor: default; }

/* ─── WhatsApp Flow Wizard (Meta-style step 1, full-page) ──────────────────── */
.flow-wizard-shell { display: flex; flex-direction: column; min-height: calc(100vh - 64px); background: var(--kc-color-paper, #FAFAF7); }
.flow-wizard-head { display: flex; align-items: center; gap: 16px; padding: 18px 28px; border-bottom: 1px solid var(--kc-border, #e5e7eb); background: white; }
.flow-wizard-back { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; color: var(--kc-fg-muted); font-size: 13px; cursor: pointer; padding: 6px 10px; border-radius: 6px; transition: background 0.12s ease; }
.flow-wizard-back:hover { background: var(--kc-color-bone-2); color: var(--kc-fg); }
.flow-wizard-titles { display: flex; flex-direction: column; gap: 2px; }
.flow-wizard-eyebrow { font-family: var(--kc-font-mono, ui-monospace, monospace); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kc-fg-muted); }
.flow-wizard-title { font-size: 22px; font-weight: 700; margin: 0; color: var(--kc-fg); }
.flow-wizard-grid { flex: 1; display: grid; grid-template-columns: minmax(380px, 1fr) minmax(340px, 1fr); gap: 32px; padding: 28px; max-width: 1280px; margin: 0 auto; width: 100%; box-sizing: border-box; }
@media (max-width: 900px) { .flow-wizard-grid { grid-template-columns: 1fr; } }
.flow-wizard-form { display: flex; flex-direction: column; gap: 16px; }
.flow-wizard-card { background: white; border: 1px solid var(--kc-border, #e5e7eb); border-radius: 12px; padding: 18px 20px; }
.flow-wizard-label { display: block; font-family: var(--kc-font-mono, ui-monospace, monospace); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kc-fg-muted); margin-bottom: 8px; font-weight: 600; }
.flow-wizard-label-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.flow-wizard-label-row .flow-wizard-label { margin-bottom: 0; }
.flow-wizard-input { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--kc-border, #e5e7eb); border-radius: 8px; font-family: inherit; font-size: 14px; color: var(--kc-fg); background: white; transition: border-color 0.12s ease, box-shadow 0.12s ease; }
.flow-wizard-input:focus { outline: 0; border-color: var(--kc-color-emerald, #10B981); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12); }
.flow-wizard-input-row { position: relative; }
.flow-wizard-input-row .flow-wizard-input { padding-right: 64px; }
.flow-wizard-counter { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-family: var(--kc-font-mono, ui-monospace, monospace); font-size: 11px; color: var(--kc-fg-muted); }
.flow-wizard-hint { margin-top: 8px; font-size: 12px; color: var(--kc-fg-muted); }
.flow-wizard-tabs { display: inline-flex; background: var(--kc-color-bone-2, #f3f1ec); border-radius: 8px; padding: 4px; margin-bottom: 14px; gap: 2px; }
.flow-wizard-tab { border: 0; background: transparent; padding: 6px 14px; border-radius: 6px; font-size: 12.5px; color: var(--kc-fg-muted); cursor: pointer; transition: background 0.12s ease, color 0.12s ease; }
.flow-wizard-tab.is-on { background: white; color: var(--kc-fg); box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.flow-wizard-tab:hover:not(.is-on) { color: var(--kc-fg); }
.flow-wizard-starter-list { display: flex; flex-direction: column; gap: 2px; }
.flow-wizard-starter { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid transparent; border-radius: 8px; background: transparent; cursor: pointer; transition: background 0.12s ease, border-color 0.12s ease; font-family: inherit; color: var(--kc-fg); text-align: left; }
.flow-wizard-starter:hover { background: var(--kc-color-bone-2, #f8f6f1); }
.flow-wizard-starter.is-on { background: rgba(16, 185, 129, 0.06); border-color: rgba(16, 185, 129, 0.3); }
.flow-wizard-starter-radio { color: var(--kc-color-emerald, #10B981); font-size: 16px; }
.flow-wizard-starter-icon { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; background: var(--kc-color-bone-2); border-radius: 8px; color: var(--kc-fg-muted); }
.flow-wizard-starter.is-on .flow-wizard-starter-icon { background: rgba(16, 185, 129, 0.12); color: var(--kc-color-emerald); }
.flow-wizard-starter-name { font-size: 14px; font-weight: 500; }
.flow-wizard-loading { display: flex; align-items: center; gap: 10px; padding: 16px; color: var(--kc-fg-muted); font-size: 13px; }
.flow-wizard-channel-badge { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--kc-color-bone-2, #f8f6f1); border: 1px solid var(--kc-border, #e5e7eb); border-radius: 8px; font-size: 14px; color: var(--kc-fg); }
.flow-wizard-channel-badge i.fa-whatsapp { color: var(--kc-channel-whatsapp, #25D366); font-size: 18px; }
.flow-wizard-channel-badge small { margin-left: 4px; padding: 2px 8px; font-family: var(--kc-font-mono, ui-monospace, monospace); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--kc-fg-muted); background: white; border-radius: 4px; }

/* Validación inline — el botón Create del wizard ya NO se deshabilita por campos vacíos,
   sino que dispara estos mensajes para que el operador vea QUÉ falta (no botón muerto). */
.flow-wizard-input.has-error { border-color: var(--kc-color-danger, #ef4444); box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12); }
.flow-wizard-card.has-error-card { border-color: var(--kc-color-danger, #ef4444); box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.08); }
.flow-wizard-field-error { margin: 8px 0 0; display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--kc-color-danger, #ef4444); }
.flow-wizard-field-error i { font-size: 13px; }

/* Barra de progreso "Hablando con Meta…" — banda fina sticky bajo el header del editor
   con shimmer indeterminado. Aparece SOLO durante round-trips a Meta (push/publish/deprecate/sync),
   no durante Save (que es local). Indicación pasiva: el operador sabe que algo está pasando
   sin tener que mirar al botón. */
.flow-editor-meta-progress { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 6px 18px; background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.88)); border-bottom: 1px solid var(--kc-border, #e5e7eb); backdrop-filter: blur(6px); }
.flow-editor-meta-progress-bar { position: absolute; left: 0; top: 0; right: 0; height: 2px; overflow: hidden; background: rgba(16, 185, 129, 0.12); }
.flow-editor-meta-progress-bar::after { content: ""; position: absolute; left: -40%; top: 0; bottom: 0; width: 40%; background: linear-gradient(90deg, transparent, var(--kc-color-emerald, #10B981), transparent); animation: kc-meta-shimmer 1.1s linear infinite; }
@keyframes kc-meta-shimmer { 0% { left: -40%; } 100% { left: 100%; } }
.flow-editor-meta-progress-label { display: inline-flex; align-items: center; gap: 8px; font-family: var(--kc-font-mono, ui-monospace, monospace); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--kc-fg-muted); font-weight: 600; }
.flow-editor-meta-progress-label i { color: var(--kc-color-emerald, #10B981); font-size: 13px; }
.flow-wizard-preview { position: sticky; top: 24px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.flow-wizard-preview-title { align-self: flex-start; font-family: var(--kc-font-mono, ui-monospace, monospace); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kc-fg-muted); font-weight: 600; }
.flow-wizard-phone { width: 320px; height: 600px; background: white; border-radius: 32px; border: 8px solid #1f1f1f; box-shadow: 0 20px 50px -20px rgba(0,0,0,0.25); overflow: hidden; position: relative; }
.flow-wizard-phone-notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 110px; height: 22px; background: #1f1f1f; border-radius: 0 0 14px 14px; z-index: 2; }
.flow-wizard-phone-screen { height: 100%; display: flex; flex-direction: column; background: var(--kc-color-paper, #FAFAF7); }
.flow-wizard-phone-header { display: flex; align-items: center; gap: 12px; padding: 34px 16px 12px; border-bottom: 1px solid var(--kc-border); background: white; font-weight: 600; font-size: 14px; }
.flow-wizard-phone-header > span { flex: 1; text-align: center; }
.flow-wizard-phone-header i { color: var(--kc-fg-muted); font-size: 14px; }
.flow-wizard-phone-body { flex: 1; padding: 16px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
.flow-wizard-phone-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--kc-fg-muted); text-align: center; gap: 12px; }
.flow-wizard-phone-empty i { font-size: 36px; opacity: 0.5; }
.flow-wizard-phone-empty p { margin: 0; font-size: 12px; }
.flow-wizard-phone-text { font-size: 13px; color: var(--kc-fg); padding: 4px 0; }
.flow-wizard-phone-input-stub { height: 44px; border: 1px solid var(--kc-border); border-radius: 8px; padding: 10px 14px; color: var(--kc-fg-muted); font-size: 13px; background: white; display: flex; align-items: center; }
.flow-wizard-phone-section { font-weight: 600; font-size: 13px; margin-top: 4px; color: var(--kc-fg); }
.flow-wizard-phone-radio { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; font-size: 13px; color: var(--kc-fg); border-bottom: 1px solid var(--kc-border); }
.flow-wizard-phone-radio i { color: var(--kc-fg-muted); }
.flow-wizard-phone-cta { margin-top: auto; padding-top: 16px; }
.flow-wizard-phone-cta button { width: 100%; padding: 12px; border: 0; background: var(--kc-color-bone-2); color: var(--kc-fg-muted); font-weight: 600; font-size: 14px; border-radius: 24px; cursor: not-allowed; }
.flow-wizard-preview-hint { font-size: 11px; color: var(--kc-fg-muted); text-align: center; max-width: 320px; }
.flow-wizard-foot { display: flex; align-items: center; gap: 10px; padding: 16px 28px; background: white; border-top: 1px solid var(--kc-border); position: sticky; bottom: 0; z-index: 5; }

/* ─── WhatsApp Flow Editor (Monaco + phone preview + bottom tabs, full-page) ── */
.flow-editor-shell { display: flex; flex-direction: column; height: calc(100vh - 64px); overflow: hidden; background: var(--kc-color-paper, #FAFAF7); }
.flow-editor-head { display: flex; align-items: center; gap: 12px; padding: 14px 24px; background: white; border-bottom: 1px solid var(--kc-border, #e5e7eb); flex-shrink: 0; }
.flow-editor-head-left { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1; }
.flow-editor-back { border: 0; background: transparent; cursor: pointer; width: 36px; height: 36px; border-radius: 8px; color: var(--kc-fg-muted); font-size: 14px; display: inline-flex; align-items: center; justify-content: center; transition: background 0.12s ease; }
.flow-editor-back:hover { background: var(--kc-color-bone-2); color: var(--kc-fg); }
.flow-editor-icon { width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(135deg, var(--kc-color-emerald, #10B981), var(--kc-color-lime, #C6F24B)); color: white; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.flow-editor-meta { display: flex; flex-direction: column; min-width: 0; }
.flow-editor-name-row { display: flex; align-items: center; gap: 10px; }
.flow-editor-name { font-weight: 700; font-size: 16px; color: var(--kc-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 480px; }
.flow-editor-sub { margin-top: 2px; font-size: 12px; color: var(--kc-fg-muted); display: flex; gap: 8px; }
.flow-editor-meta-id { font-family: var(--kc-font-mono, ui-monospace, monospace); font-size: 11px; }
.flow-editor-head-right { display: flex; align-items: center; gap: 8px; position: relative; }
.flow-editor-icon-btn { border: 0; background: transparent; cursor: pointer; width: 36px; height: 36px; border-radius: 8px; color: var(--kc-fg-muted); font-size: 14px; display: inline-flex; align-items: center; justify-content: center; transition: background 0.12s ease, color 0.12s ease; }
.flow-editor-icon-btn:hover:not(:disabled) { background: var(--kc-color-bone-2); color: var(--kc-fg); }
.flow-editor-icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.flow-editor-menu { position: absolute; top: calc(100% + 4px); right: 0; background: white; border: 1px solid var(--kc-border); border-radius: 10px; box-shadow: 0 8px 28px -8px rgba(0,0,0,0.18); z-index: 50; min-width: 200px; overflow: hidden; }
.flow-editor-menu button { width: 100%; text-align: left; background: transparent; border: 0; padding: 10px 14px; font-size: 13px; color: var(--kc-fg); cursor: pointer; display: flex; align-items: center; gap: 10px; transition: background 0.12s ease; }
.flow-editor-menu button:hover { background: var(--kc-color-bone-2); }
.flow-editor-menu button.danger { color: var(--kc-color-danger, #DC2626); }
.flow-editor-menu button.danger:hover { background: rgba(220, 38, 38, 0.06); }
.flow-editor-main { flex: 1; display: grid; grid-template-columns: 1fr 420px; min-height: 0; overflow: hidden; }
@media (max-width: 1100px) { .flow-editor-main { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; } }
.flow-editor-json, .flow-editor-preview { background: white; display: flex; flex-direction: column; overflow: hidden; }
.flow-editor-preview { border-left: 1px solid var(--kc-border); }
.flow-editor-pane-head { padding: 12px 18px; border-bottom: 1px solid var(--kc-border); display: flex; align-items: center; gap: 10px; background: var(--kc-color-bone-2, #f8f6f1); flex-shrink: 0; }
.flow-editor-pane-head h3 { margin: 0; font-size: 12px; font-weight: 600; color: var(--kc-fg); flex: 1; font-family: var(--kc-font-mono, ui-monospace, monospace); letter-spacing: 0.05em; text-transform: uppercase; }
.flow-editor-pane-hint { font-family: var(--kc-font-mono, ui-monospace, monospace); font-size: 10.5px; color: var(--kc-fg-muted); }
.flow-editor-monaco { flex: 1; min-height: 0; position: relative; background: white; }
.flow-editor-monaco-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--kc-fg-muted); font-size: 13px; }
.flow-editor-preview-frame { flex: 1; overflow: auto; padding: 20px; background: var(--kc-color-bone-2, #f8f6f1); display: flex; align-items: flex-start; justify-content: center; }
.flow-editor-preview-empty { flex: 1; align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--kc-fg-muted); text-align: center; gap: 8px; }
.flow-editor-preview-empty i { font-size: 40px; opacity: 0.4; }
.flow-editor-preview-empty p { margin: 0; font-size: 13px; color: var(--kc-fg); }
.flow-editor-preview-empty small { font-size: 11.5px; }
.flow-editor-preview-iframe { width: 100%; height: 100%; min-height: 540px; border: 0; border-radius: 12px; background: white; box-shadow: 0 8px 24px -12px rgba(0,0,0,0.15); }
.flow-editor-bottom { flex-shrink: 0; border-top: 1px solid var(--kc-border); background: white; }
.flow-editor-bottom-tabs { display: flex; align-items: center; gap: 4px; padding: 4px 8px; border-bottom: 1px solid var(--kc-border); background: var(--kc-color-bone-2, #f8f6f1); }
.flow-editor-bottom-tab { border: 0; background: transparent; cursor: pointer; padding: 8px 14px; font-size: 12px; color: var(--kc-fg-muted); font-weight: 500; border-radius: 6px; display: inline-flex; align-items: center; gap: 8px; transition: background 0.12s ease, color 0.12s ease; }
.flow-editor-bottom-tab:hover { background: white; color: var(--kc-fg); }
.flow-editor-bottom-tab.is-on { background: white; color: var(--kc-fg); }
.flow-editor-bottom-count { background: var(--kc-color-bone-2); color: var(--kc-fg-muted); font-family: var(--kc-font-mono, ui-monospace, monospace); font-size: 10.5px; padding: 1px 6px; border-radius: 8px; min-width: 18px; text-align: center; }
.flow-editor-bottom-count.danger { background: rgba(220, 38, 38, 0.12); color: var(--kc-color-danger, #DC2626); }
.flow-editor-bottom-body { padding: 14px 18px; max-height: 220px; overflow-y: auto; font-size: 13px; color: var(--kc-fg); }
.flow-editor-bottom-empty { display: flex; align-items: center; gap: 8px; color: var(--kc-color-emerald); }
.flow-editor-bottom-text { color: var(--kc-fg-muted); margin: 0; }
.flow-editor-error-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.flow-editor-error-list li { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; background: rgba(220, 38, 38, 0.05); border-radius: 6px; color: var(--kc-color-danger, #DC2626); font-size: 12.5px; }
.flow-editor-label { display: block; font-family: var(--kc-font-mono, ui-monospace, monospace); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kc-fg-muted); margin-bottom: 6px; }
.flow-editor-input { width: 100%; box-sizing: border-box; padding: 9px 12px; border: 1px solid var(--kc-border); border-radius: 8px; font-family: inherit; font-size: 13px; }
.flow-editor-input:focus { outline: 0; border-color: var(--kc-color-emerald); box-shadow: 0 0 0 3px rgba(16,185,129,0.12); }
.flow-editor-hint { margin-top: 6px; font-size: 11.5px; color: var(--kc-fg-muted); }
.flow-editor-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 100; display: flex; align-items: center; gap: 10px; max-width: 600px; }
.flow-editor-toast button { border: 0; background: transparent; cursor: pointer; color: inherit; padding: 4px; border-radius: 4px; }
.kc-modal-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(20, 20, 20, 0.4); }
.kc-modal { position: fixed; z-index: 61; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; border-radius: 14px; box-shadow: 0 24px 60px -20px rgba(0,0,0,0.3); width: 560px; max-width: calc(100vw - 32px); overflow: hidden; }
.kc-modal-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--kc-border); }
.kc-modal-head h3 { margin: 0; flex: 1; font-size: 16px; }
.kc-modal-body { padding: 18px 20px 22px; }
.flow-share-url-row { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.flow-share-url-row input { font-family: var(--kc-font-mono, ui-monospace, monospace); font-size: 12px; }
.flow-editor-copied { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--kc-color-emerald); font-size: 12px; }

/* ── Email Template Editor (full-page WYSIWYG · estilo Salesforce/HubSpot) ───────────────
   Layout: header sticky → subject row → main split (DxHtmlEditor izq + iframe der)
   → bottom tabs collapsable. Sigue el patrón visual del flow-editor pero con focus en
   email composition (preview iframe sandbox, variables como chips emerald). */

.email-editor-shell { display: flex; flex-direction: column; height: calc(100vh - 64px); min-height: 600px; background: var(--kc-bg, #fafafa); }
.email-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; background: white; border-bottom: 1px solid var(--kc-border, #e5e7eb); position: sticky; top: 0; z-index: 4; }
.email-editor-head-left { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
.email-editor-back { width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--kc-border, #e5e7eb); background: white; cursor: pointer; color: var(--kc-fg-muted); transition: background 0.12s, border-color 0.12s; }
.email-editor-back:hover { background: var(--kc-color-bone-2, #f8f6f1); border-color: var(--kc-fg-muted, #888); color: var(--kc-fg); }
.email-editor-icon { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(16,185,129,0.10), rgba(198,242,75,0.18)); border-radius: 10px; color: var(--kc-color-emerald, #10B981); font-size: 20px; flex-shrink: 0; }
.email-editor-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.email-editor-name-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.email-editor-name-input { font-size: 18px; font-weight: 600; border: 0; background: transparent; padding: 4px 8px; border-radius: 6px; color: var(--kc-fg); width: 100%; max-width: 420px; transition: background 0.12s; font-family: inherit; }
.email-editor-name-input:hover { background: var(--kc-color-bone-2, #f8f6f1); }
.email-editor-name-input:focus { outline: 0; background: var(--kc-color-bone-2, #f8f6f1); box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.15); }
.email-editor-sub { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--kc-fg-muted); margin-top: 2px; padding-left: 8px; }
.email-editor-head-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; position: relative; }

.email-editor-subject-row { display: flex; align-items: center; gap: 12px; padding: 12px 20px; background: white; border-bottom: 1px solid var(--kc-border, #e5e7eb); }
.email-editor-subject-label { font-family: var(--kc-font-mono, ui-monospace, monospace); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kc-fg-muted); font-weight: 600; flex-shrink: 0; }
.email-editor-subject-input { flex: 1; padding: 8px 12px; border: 1px solid var(--kc-border, #e5e7eb); border-radius: 8px; font-family: inherit; font-size: 14px; color: var(--kc-fg); background: white; transition: border-color 0.12s, box-shadow 0.12s; }
.email-editor-subject-input:focus { outline: 0; border-color: var(--kc-color-emerald, #10B981); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12); }
.email-editor-subject-input.has-error { border-color: var(--kc-color-danger, #ef4444); box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12); }
.email-editor-subject-error { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--kc-color-danger, #ef4444); flex-shrink: 0; }

.email-editor-main { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 16px 20px; overflow: hidden; min-height: 0; }
@media (max-width: 1100px) { .email-editor-main { grid-template-columns: 1fr; } }
.email-editor-pane { display: flex; flex-direction: column; background: white; border: 1px solid var(--kc-border, #e5e7eb); border-radius: 12px; overflow: hidden; min-height: 0; }
.email-editor-preview { display: flex; flex-direction: column; background: white; border: 1px solid var(--kc-border, #e5e7eb); border-radius: 12px; overflow: hidden; min-height: 0; }
.email-editor-pane-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--kc-border, #e5e7eb); background: var(--kc-color-bone-2, #f8f6f1); }
.email-editor-pane-head h3 { margin: 0; font-size: 12px; font-family: var(--kc-font-mono, ui-monospace, monospace); letter-spacing: 0.06em; text-transform: uppercase; color: var(--kc-fg); font-weight: 700; }
.email-editor-pane-hint { font-size: 11px; color: var(--kc-fg-muted); }
.email-editor-wysiwyg { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 8px; }
.email-editor-wysiwyg .kc-html-editor, .email-editor-wysiwyg .dxbl-htmleditor { height: 100% !important; min-height: 360px; }
.email-editor-preview-frame { flex: 1; background: #fdfdfd; padding: 16px; min-height: 0; overflow: auto; }
.email-editor-preview-iframe { width: 100%; height: 100%; min-height: 360px; border: 0; background: white; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }

.email-editor-bottom { background: white; border-top: 1px solid var(--kc-border, #e5e7eb); }
.email-editor-bottom.is-collapsed .email-editor-bottom-body { display: none; }
.email-editor-bottom-tabs { display: flex; align-items: center; gap: 4px; padding: 4px 14px; border-bottom: 1px solid var(--kc-border, #e5e7eb); background: var(--kc-color-bone-2, #f8f6f1); }
.email-editor-bottom-tab { border: 0; background: transparent; padding: 9px 14px; cursor: pointer; font-family: var(--kc-font-mono, ui-monospace, monospace); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--kc-fg-muted); font-weight: 600; border-radius: 6px 6px 0 0; display: inline-flex; align-items: center; gap: 6px; transition: background 0.12s, color 0.12s; }
.email-editor-bottom-tab:hover { background: rgba(16, 185, 129, 0.06); color: var(--kc-fg); }
.email-editor-bottom-tab.is-on { background: white; color: var(--kc-color-emerald, #10B981); }
.email-editor-bottom-body { padding: 16px 20px; max-height: 280px; overflow: auto; }
.email-editor-bottom-text { font-size: 13px; color: var(--kc-fg-muted); line-height: 1.5; margin: 0 0 12px; }
.email-editor-icon-btn { width: 30px; height: 30px; border-radius: 6px; border: 0; background: transparent; cursor: pointer; color: var(--kc-fg-muted); transition: background 0.12s, color 0.12s; display: inline-flex; align-items: center; justify-content: center; }
.email-editor-icon-btn:hover { background: rgba(0,0,0,0.05); color: var(--kc-fg); }

.email-editor-vars-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px 16px; }
.email-editor-vars-list li { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; background: var(--kc-color-bone-2, #f8f6f1); border-radius: 6px; border: 1px solid var(--kc-border, #e5e7eb); }
.email-editor-vars-list code { font-family: var(--kc-font-mono, ui-monospace, monospace); font-size: 12px; color: var(--kc-color-emerald, #10B981); font-weight: 600; }
.email-editor-vars-list span { font-size: 12px; color: var(--kc-fg-muted); }

.email-editor-html-source, .email-editor-text-input { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--kc-border, #e5e7eb); border-radius: 8px; font-family: var(--kc-font-mono, ui-monospace, monospace); font-size: 12.5px; color: var(--kc-fg); background: white; line-height: 1.5; resize: vertical; }
.email-editor-text-input { font-family: inherit; font-size: 13.5px; }
.email-editor-html-source:focus, .email-editor-text-input:focus { outline: 0; border-color: var(--kc-color-emerald, #10B981); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12); }

.email-editor-meta-grid { display: grid; grid-template-columns: 120px 1fr; gap: 10px 16px; align-items: center; }
.email-editor-label { font-family: var(--kc-font-mono, ui-monospace, monospace); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kc-fg-muted); font-weight: 600; }
.email-editor-input { padding: 8px 12px; border: 1px solid var(--kc-border, #e5e7eb); border-radius: 6px; font-family: inherit; font-size: 13.5px; color: var(--kc-fg); background: white; }
.email-editor-input:focus { outline: 0; border-color: var(--kc-color-emerald, #10B981); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12); }

/* DxHtmlEditor variable chip — pinta el emerald del brand kit en lugar del bootstrap blue.
   El selector `.dx-variable` viene del propio DxHtmlEditor; no podemos cambiar el markup. */
.email-editor-wysiwyg .dx-variable, .kc-html-editor .dx-variable { background: rgba(16, 185, 129, 0.12) !important; color: var(--kc-color-emerald, #10B981) !important; padding: 1px 6px; border-radius: 4px; font-family: var(--kc-font-mono, ui-monospace, monospace); font-size: 0.92em; font-weight: 600; }

.email-templates-row-link { color: inherit; text-decoration: none; display: block; }
.email-templates-row-link:hover { color: var(--kc-color-emerald, #10B981); text-decoration: none; }

/* Pill danger variant — para botones de borrar (Delete row, etc.). Mismo shape que kc-ghost
   pero hover y color rojo. Mantiene contrast en focus para accesibilidad. */
.kc-pill.kc-danger { color: var(--kc-color-danger, #ef4444); }
.kc-pill.kc-danger:hover { background: rgba(239, 68, 68, 0.08); border-color: var(--kc-color-danger, #ef4444); }

/* ── Email Template Wizard (creación · /admin/email-templates/new) ─────────────────────── */

.email-wizard-shell { display: flex; flex-direction: column; min-height: calc(100vh - 64px); background: var(--kc-bg, #fafafa); }
.email-wizard-head { display: flex; align-items: center; gap: 16px; padding: 14px 28px; background: white; border-bottom: 1px solid var(--kc-border, #e5e7eb); }
.email-wizard-back { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--kc-border, #e5e7eb); border-radius: 8px; background: white; cursor: pointer; color: var(--kc-fg-muted); font-family: inherit; font-size: 13px; transition: background 0.12s; }
.email-wizard-back:hover { background: var(--kc-color-bone-2, #f8f6f1); color: var(--kc-fg); }
.email-wizard-titles { display: flex; flex-direction: column; gap: 2px; }
.email-wizard-eyebrow { font-family: var(--kc-font-mono, ui-monospace, monospace); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kc-fg-muted); font-weight: 600; }
.email-wizard-title { margin: 0; font-size: 20px; font-weight: 600; color: var(--kc-fg); }
.email-wizard-grid { flex: 1; display: grid; grid-template-columns: minmax(380px, 1fr) minmax(340px, 1fr); gap: 32px; padding: 28px; max-width: 1280px; margin: 0 auto; width: 100%; box-sizing: border-box; }
@media (max-width: 900px) { .email-wizard-grid { grid-template-columns: 1fr; } }
.email-wizard-form { display: flex; flex-direction: column; gap: 16px; }
.email-wizard-card { background: white; border: 1px solid var(--kc-border, #e5e7eb); border-radius: 12px; padding: 18px 20px; }
.email-wizard-label { display: block; font-family: var(--kc-font-mono, ui-monospace, monospace); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kc-fg-muted); margin-bottom: 8px; font-weight: 600; }
.email-wizard-input { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--kc-border, #e5e7eb); border-radius: 8px; font-family: inherit; font-size: 14px; color: var(--kc-fg); background: white; transition: border-color 0.12s, box-shadow 0.12s; }
.email-wizard-input:focus { outline: 0; border-color: var(--kc-color-emerald, #10B981); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12); }
.email-wizard-input.has-error { border-color: var(--kc-color-danger, #ef4444); box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12); }
.email-wizard-hint { margin-top: 8px; font-size: 12px; color: var(--kc-fg-muted); }
.email-wizard-field-error { margin: 8px 0 0; display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--kc-color-danger, #ef4444); }
.email-wizard-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .email-wizard-meta-grid { grid-template-columns: 1fr; } }
.email-wizard-base-list { display: flex; flex-direction: column; gap: 2px; }
.email-wizard-base { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid transparent; border-radius: 8px; background: transparent; cursor: pointer; transition: background 0.12s, border-color 0.12s; font-family: inherit; color: var(--kc-fg); text-align: left; width: 100%; }
.email-wizard-base:hover { background: var(--kc-color-bone-2, #f8f6f1); }
.email-wizard-base.is-on { background: rgba(16, 185, 129, 0.06); border-color: rgba(16, 185, 129, 0.3); }
.email-wizard-base-radio { color: var(--kc-color-emerald, #10B981); font-size: 16px; flex-shrink: 0; }
.email-wizard-base-icon { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: var(--kc-color-bone-2); border-radius: 8px; color: var(--kc-fg-muted); flex-shrink: 0; }
.email-wizard-base.is-on .email-wizard-base-icon { background: rgba(16, 185, 129, 0.12); color: var(--kc-color-emerald); }
.email-wizard-base-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.email-wizard-base-name { font-size: 14px; font-weight: 500; }
.email-wizard-base-desc { font-size: 12px; color: var(--kc-fg-muted); }
.email-wizard-preview { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 14px; align-self: flex-start; }
.email-wizard-preview-title { font-family: var(--kc-font-mono, ui-monospace, monospace); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kc-fg-muted); font-weight: 600; }
.email-wizard-preview-card { background: white; border-radius: 10px; border: 1px solid var(--kc-border, #e5e7eb); padding: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.04); }
.email-wizard-preview-from { font-family: var(--kc-font-mono, ui-monospace, monospace); font-size: 11px; color: var(--kc-fg-muted); margin-bottom: 6px; }
.email-wizard-preview-subject { font-size: 15px; font-weight: 600; color: var(--kc-fg); margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--kc-border, #e5e7eb); }
.email-wizard-preview-body { font-size: 13.5px; line-height: 1.5; color: var(--kc-fg); }
.email-wizard-preview-hint { font-size: 11px; color: var(--kc-fg-muted); margin: 0; }
.email-wizard-foot { display: flex; align-items: center; gap: 12px; padding: 16px 28px; background: white; border-top: 1px solid var(--kc-border, #e5e7eb); }

/* ── Automations · Condition Builder (estilo HubSpot · value widgets tipados) ───── */

.cond-when-line { display: flex; align-items: center; gap: 8px; margin: 12px 0 8px; font-size: 13px; color: var(--kc-fg-muted); }
.cond-when-keyword { font-family: var(--kc-font-mono, ui-monospace, monospace); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--kc-color-emerald, #10B981); font-weight: 600; padding: 4px 10px; background: rgba(16, 185, 129, 0.08); border-radius: 6px; }
.cond-row { background: white; border: 1px solid var(--kc-border, #e5e7eb); border-radius: 10px; padding: 12px 14px; margin-bottom: 4px; transition: border-color 0.12s, box-shadow 0.12s; }
.cond-row:hover { border-color: rgba(16, 185, 129, 0.4); box-shadow: 0 1px 6px rgba(16, 185, 129, 0.06); }
.cond-row-grid { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(110px, 0.7fr) minmax(180px, 1.6fr) auto; gap: 8px; align-items: start; }
@media (max-width: 700px) { .cond-row-grid { grid-template-columns: 1fr; } }
.cond-input { padding: 8px 10px; border: 1px solid var(--kc-border, #e5e7eb); border-radius: 6px; font-family: inherit; font-size: 13.5px; color: var(--kc-fg); background: white; transition: border-color 0.12s, box-shadow 0.12s; min-width: 0; box-sizing: border-box; }
.cond-input:focus { outline: 0; border-color: var(--kc-color-emerald, #10B981); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12); }
.cond-input-mono { font-family: var(--kc-font-mono, ui-monospace, monospace); font-size: 12.5px; }
.cond-value { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cond-value .cond-input { width: 100%; }
.cond-trash { width: 32px; height: 32px; border-radius: 6px; border: 1px solid var(--kc-border, #e5e7eb); background: white; color: var(--kc-fg-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.12s, color 0.12s, border-color 0.12s; align-self: center; }
.cond-trash:hover { background: rgba(239, 68, 68, 0.08); color: var(--kc-color-danger, #ef4444); border-color: var(--kc-color-danger, #ef4444); }
.cond-row-hint { margin: 8px 0 0; padding: 0 2px; font-size: 11.5px; color: var(--kc-fg-muted); font-style: italic; }
.cond-and-divider { display: flex; align-items: center; gap: 8px; padding: 4px 0; margin: 2px 0; }
.cond-and-divider::before, .cond-and-divider::after { content: ""; flex: 1; height: 1px; background: var(--kc-border, #e5e7eb); }
.cond-and-divider span { font-family: var(--kc-font-mono, ui-monospace, monospace); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kc-fg-muted); font-weight: 600; }

/* Multi-select chip widget (enum in/notIn + ContactTag) — chips clickeables que se prenden con check. */
.cond-enum-multi { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 0; }
.cond-enum-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--kc-border, #e5e7eb); border-radius: 999px; background: white; cursor: pointer; font-size: 12.5px; color: var(--kc-fg); transition: background 0.12s, border-color 0.12s, color 0.12s; user-select: none; }
.cond-enum-chip:hover { border-color: var(--kc-fg-muted); background: var(--kc-color-bone-2, #f8f6f1); }
.cond-enum-chip input[type="checkbox"] { width: 14px; height: 14px; margin: 0; accent-color: var(--kc-color-emerald, #10B981); }
.cond-enum-chip.is-on { background: rgba(16, 185, 129, 0.1); border-color: rgba(16, 185, 129, 0.5); color: var(--kc-color-emerald, #10B981); font-weight: 500; }
.cond-enum-chip.is-on:hover { background: rgba(16, 185, 129, 0.14); }

/* ── Automations · Action card (S2 · form builder por Kind con pickers tipados) ── */
.action-card { background: white; border: 1px solid var(--kc-border, #e5e7eb); border-radius: 10px; padding: 0; margin-bottom: 8px; overflow: hidden; transition: border-color 0.12s, box-shadow 0.12s; }
.action-card:hover { border-color: rgba(16, 185, 129, 0.35); box-shadow: 0 1px 6px rgba(16, 185, 129, 0.06); }
.action-card-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--kc-color-bone-2, #f8f6f1); border-bottom: 1px solid var(--kc-border, #e5e7eb); }
.action-card-num { width: 26px; height: 26px; border-radius: 50%; background: var(--kc-color-emerald, #10B981); color: white; font-family: var(--kc-font-mono, ui-monospace, monospace); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.action-kind-select { flex: 1; min-width: 0; }
.action-card-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.action-card-body .cond-input { width: 100%; }
.action-card-body textarea.cond-input { resize: vertical; }
.action-label { display: block; font-family: var(--kc-font-mono, ui-monospace, monospace); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kc-fg-muted); margin-top: 4px; font-weight: 600; }
.action-label:first-child { margin-top: 0; }
.action-hint { margin: 4px 0 0; font-size: 11.5px; color: var(--kc-fg-muted); font-style: italic; }
.action-stub-banner { padding: 8px 12px; border-radius: 6px; background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.3); font-size: 12px; color: #92400e; }
.action-card-cox { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--kc-border, #e5e7eb); background: var(--kc-color-bone-2, #f8f6f1); font-size: 12.5px; color: var(--kc-fg); cursor: pointer; user-select: none; }
.action-card-cox input { accent-color: var(--kc-color-emerald, #10B981); margin: 0; }

/* ── Phase 7C follow-up · CreateQuote action builder ──────────────────── */
.quote-items { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.quote-item-row { display: grid; grid-template-columns: 1fr 90px 110px 32px; gap: 6px; align-items: center; }
.quote-item-row .cond-input { margin: 0; }
.quote-item-row .quote-qty,
.quote-item-row .quote-price { font-family: var(--kc-font-mono, ui-monospace, monospace); font-size: 12.5px; text-align: right; }
.quote-item-remove { width: 32px; height: 32px; padding: 0; border: 1px solid var(--kc-border, #e5e7eb); border-radius: 6px; background: var(--kc-color-bone-2, #f8f6f1); color: var(--kc-fg-muted); font-size: 18px; line-height: 1; cursor: pointer; }
.quote-item-remove:hover { color: #b91c1c; border-color: #b91c1c; background: rgba(185, 28, 28, 0.06); }
.quote-add-row { align-self: flex-start; padding: 6px 12px; border: 1px dashed var(--kc-border, #e5e7eb); border-radius: 6px; background: transparent; color: var(--kc-fg-muted); font-family: var(--kc-font-mono, ui-monospace, monospace); font-size: 11.5px; letter-spacing: 0.04em; cursor: pointer; }
.quote-add-row:hover { color: var(--kc-color-emerald, #10B981); border-color: var(--kc-color-emerald, #10B981); }
.quote-total { margin-top: 6px; padding: 6px 10px; border-radius: 6px; background: var(--kc-color-bone-2, #f8f6f1); font-size: 12.5px; font-weight: 600; text-align: right; color: var(--kc-fg); }
.quote-total.mono { font-family: var(--kc-font-mono, ui-monospace, monospace); }

/* ── SaaS-7 · Platform WhatsApp Templates (operations command center) ───────── */

/* Head aside with WABA info (right side of page header) */
.head-aside-wa { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; padding-top: 4px; }
.waba-tag { font-family: var(--kc-font-mono, ui-monospace, monospace); font-size: 11px; color: var(--kc-fg-muted); text-align: right; }
.waba-tag b { color: var(--kc-fg); font-weight: 600; }
.waba-number { font-family: var(--kc-font-mono, ui-monospace, monospace); font-size: 13px; font-weight: 600; color: var(--kc-fg); display: inline-flex; align-items: center; gap: 7px; }
.waba-verified { width: 14px; height: 14px; border-radius: 50%; background: var(--kc-color-emerald, #10B981); color: white; display: inline-flex; align-items: center; justify-content: center; }

/* Paused incident banner */
.wa-paused-alarm { display: flex; align-items: center; gap: 14px; background: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%); border: 1px solid var(--kc-color-danger, #DC2626); border-left: 4px solid var(--kc-color-danger, #DC2626); border-radius: 10px; padding: 14px 18px; margin-bottom: 16px; }
.wa-paused-icon { width: 36px; height: 36px; border-radius: 50%; background: var(--kc-color-danger, #DC2626); color: white; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.wa-paused-text { flex: 1; min-width: 0; }
.wa-paused-eyebrow { font-family: var(--kc-font-mono, ui-monospace, monospace); font-size: 10px; font-weight: 700; letter-spacing: 0.2em; color: var(--kc-color-danger, #DC2626); text-transform: uppercase; }
.wa-paused-text h3 { font-size: 15.5px; font-weight: 600; color: #7F1D1D; margin: 2px 0; letter-spacing: -0.01em; }
.wa-paused-text p { font-size: 13px; color: #991B1B; margin: 0; line-height: 1.5; }
.wa-paused-text code { font-family: var(--kc-font-mono, ui-monospace, monospace); font-size: 12px; background: rgba(127, 29, 29, 0.12); padding: 1.5px 6px; border-radius: 3px; font-weight: 500; }

/* System health panel */
.wa-system-panel { background: white; border: 1px solid var(--kc-color-border, #e5e1d6); border-radius: 10px; padding: 16px 18px 18px; margin-bottom: 16px; }
.wa-system-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; gap: 12px; }
.wa-system-label { font-family: var(--kc-font-mono, ui-monospace, monospace); font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kc-fg); display: inline-flex; align-items: center; gap: 8px; }
.wa-system-marker { width: 4px; height: 14px; background: var(--kc-color-emerald, #10B981); border-radius: 2px; }
.wa-system-hint { font-size: 12px; color: var(--kc-fg-muted); }
.wa-kind-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (max-width: 1280px) { .wa-kind-grid { grid-template-columns: repeat(2, 1fr); } }
.wa-kind-chip { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 8px; background: var(--kc-color-bone-2, #f3f1ec); border: 1px solid var(--kc-color-border, #e5e1d6); transition: all 0.14s ease; }
.wa-kind-chip:hover { transform: translateY(-1px); background: white; box-shadow: 0 1px 6px rgba(11, 15, 14, 0.04); }
.wa-kind-icon { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 12px; }
.wa-kind-body { flex: 1; min-width: 0; }
.wa-kind-name { font-size: 12.5px; font-weight: 600; color: var(--kc-fg); letter-spacing: -0.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-kind-meta { font-family: var(--kc-font-mono, ui-monospace, monospace); font-size: 10px; color: var(--kc-fg-muted); letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-kind-status { font-family: var(--kc-font-mono, ui-monospace, monospace); font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; padding: 3px 7px; border-radius: 3px; flex-shrink: 0; }
.wa-kind-approved .wa-kind-icon { background: rgba(16, 185, 129, 0.10); color: var(--kc-color-emerald, #10B981); }
.wa-kind-approved .wa-kind-status { background: var(--kc-color-emerald, #10B981); color: white; }
.wa-kind-approved { border-color: rgba(16, 185, 129, 0.20); }
.wa-kind-pending .wa-kind-icon { background: rgba(217, 119, 6, 0.10); color: #B45309; }
.wa-kind-pending .wa-kind-status { background: #D97706; color: white; }
.wa-kind-pending { border-color: rgba(217, 119, 6, 0.22); }
.wa-kind-danger .wa-kind-icon { background: rgba(220, 38, 38, 0.08); color: var(--kc-color-danger, #DC2626); }
.wa-kind-danger .wa-kind-status { background: var(--kc-color-danger, #DC2626); color: white; }
.wa-kind-danger { border-color: rgba(220, 38, 38, 0.28); background: linear-gradient(180deg, rgba(220, 38, 38, 0.04), var(--kc-color-bone-2, #f3f1ec) 70%); animation: wa-kind-shake 0.9s ease-in-out infinite alternate; animation-delay: 0.3s; }
@keyframes wa-kind-shake { 0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.18); } 100% { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.06); } }
.wa-kind-missing { background: transparent; border: 1px dashed #94A09B; }
.wa-kind-missing .wa-kind-icon { background: transparent; color: #94A09B; border: 1px dashed #94A09B; }
.wa-kind-missing .wa-kind-name { color: var(--kc-fg-muted); }
.wa-kind-missing .wa-kind-meta { color: #94A09B; font-style: italic; }
.wa-kind-missing .wa-kind-status { background: transparent; border: 1px dashed #94A09B; color: var(--kc-fg-muted); }
.wa-kind-chip-clickable { cursor: pointer; }
.wa-kind-chip-clickable:hover { border-color: var(--kc-color-emerald, #10B981); border-style: solid; background: rgba(16, 185, 129, 0.05); }
.wa-kind-chip-clickable:hover .wa-kind-icon { background: rgba(16, 185, 129, 0.10); color: var(--kc-color-emerald, #10B981); border-style: solid; border-color: var(--kc-color-emerald, #10B981); }
.wa-kind-cta { font-family: var(--kc-font-mono, ui-monospace, monospace); font-size: 9.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 8px; border-radius: 4px; cursor: pointer; background: var(--kc-color-emerald, #10B981); color: white; border: 0; display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; transition: background 0.12s ease; }
.wa-kind-cta:hover { background: #059669; }
.wa-kind-cta i { font-size: 9px; }

/* Toolbar */
.wa-toolbar { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--kc-color-border, #e5e1d6); background: var(--kc-color-bone, #f8f6f1); flex-wrap: wrap; }
.wa-search { position: relative; width: 280px; }
.wa-search input { width: 100%; padding: 8px 12px 8px 34px; background: white; border: 1px solid var(--kc-color-border, #e5e1d6); border-radius: 6px; font-family: inherit; font-size: 13px; color: var(--kc-fg); }
.wa-search input:focus { outline: 0; border-color: var(--kc-color-emerald, #10B981); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12); }
.wa-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--kc-fg-muted); font-size: 12px; }
.wa-combo { background: white; border: 1px solid var(--kc-color-border, #e5e1d6); border-radius: 6px; padding: 8px 12px; font-size: 13px; cursor: pointer; font-family: inherit; color: var(--kc-fg); }
.wa-combo:hover { border-color: var(--kc-fg-muted); }
.wa-last-sync { display: inline-flex; align-items: center; gap: 7px; font-family: var(--kc-font-mono, ui-monospace, monospace); font-size: 11px; color: var(--kc-fg-muted); }
.wa-last-sync i { color: var(--kc-color-emerald, #10B981); font-size: 11px; }
.wa-sync-rotating { animation: wa-spin 1.5s linear infinite; }
@keyframes wa-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* Grid cell content */
.wa-sys-badge { font-family: var(--kc-font-mono, ui-monospace, monospace); font-size: 9.5px; font-weight: 700; letter-spacing: 0.16em; background: var(--kc-color-ink, #0B0F0E); color: var(--kc-color-lime, #C6F24B); padding: 3px 7px; border-radius: 3px; display: inline-block; }
.wa-tpl-name { font-family: var(--kc-font-mono, ui-monospace, monospace); font-size: 13px; font-weight: 500; color: var(--kc-color-ink, #0B0F0E); letter-spacing: -0.005em; }
.wa-tpl-sub { display: block; font-family: inherit; font-size: 11.5px; color: var(--kc-fg-muted); margin-top: 2px; font-weight: 400; }
.wa-lang-pill { font-family: var(--kc-font-mono, ui-monospace, monospace); font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: lowercase; background: var(--kc-color-bone-2, #f3f1ec); color: var(--kc-fg); padding: 3px 8px; border-radius: 3px; border: 1px solid var(--kc-color-border, #e5e1d6); }
.wa-cat-badge { font-family: var(--kc-font-mono, ui-monospace, monospace); font-size: 9.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 8px; border-radius: 3px; display: inline-block; }
.wa-cat-auth { background: rgba(29, 78, 216, 0.08); color: #1D4ED8; border: 1px solid rgba(29, 78, 216, 0.18); }
.wa-cat-marketing { background: rgba(124, 58, 237, 0.08); color: #7C3AED; border: 1px solid rgba(124, 58, 237, 0.18); }
.wa-cat-utility { background: rgba(16, 185, 129, 0.10); color: #047857; border: 1px solid rgba(4, 120, 87, 0.18); }
.wa-status-pill { font-family: var(--kc-font-mono, ui-monospace, monospace); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 5px 9px; border-radius: 5px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.wa-status-pill i { font-size: 9px; }
.wa-s-approved { background: var(--kc-color-emerald, #10B981); color: white; }
.wa-s-pending { background: #D97706; color: white; }
.wa-s-rejected { background: var(--kc-color-danger, #DC2626); color: white; }
.wa-s-paused { background: white; color: var(--kc-color-danger, #DC2626); border: 1.5px solid var(--kc-color-danger, #DC2626); animation: wa-kind-shake 1.4s ease-in-out infinite; }
.wa-s-disabled { background: #7F1D1D; color: white; text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, 0.5); text-decoration-thickness: 1.5px; }
.wa-s-draft { background: #EBE7DD; color: var(--kc-fg-muted); border: 1px dashed #94A09B; }
.wa-quality { display: inline-flex; align-items: center; gap: 6px; font-family: var(--kc-font-mono, ui-monospace, monospace); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kc-fg-muted); }
.wa-q-dot { width: 7px; height: 7px; border-radius: 50%; }
.wa-q-green .wa-q-dot { background: var(--kc-color-emerald, #10B981); }
.wa-q-yellow .wa-q-dot { background: #D97706; }
.wa-q-red .wa-q-dot { background: var(--kc-color-danger, #DC2626); }
.wa-q-unknown .wa-q-dot { background: #94A09B; }

/* Row actions */
.wa-row-actions { display: inline-flex; gap: 4px; }
.wa-icon-btn { width: 28px; height: 28px; border-radius: 5px; border: 1px solid transparent; background: transparent; color: var(--kc-fg-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; transition: all 0.12s ease; }
.wa-icon-btn:hover:not(:disabled) { border-color: var(--kc-color-border, #e5e1d6); background: var(--kc-color-bone, #f8f6f1); color: var(--kc-color-ink, #0B0F0E); }
.wa-icon-btn:disabled { cursor: not-allowed; opacity: 0.4; }
.wa-icon-btn.wa-danger:hover:not(:disabled) { color: var(--kc-color-danger, #DC2626); border-color: rgba(220, 38, 38, 0.28); }

/* Drawer (reusa kc-drawer-* del brand kit + extensiones específicas) */
.kc-drawer-backdrop { position: fixed; inset: 0; background: rgba(11, 15, 14, 0.32); z-index: 50; backdrop-filter: blur(2px); }
.kc-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 51; background: var(--kc-color-bg, #fafafa); border-left: 1px solid var(--kc-color-border, #e5e1d6); box-shadow: -12px 0 40px rgba(11, 15, 14, 0.10); display: flex; flex-direction: column; }
.wa-drawer { width: 980px; max-width: 100vw; }
@media (max-width: 1100px) { .wa-drawer { width: 100vw; } }
.kc-drawer-head { padding: 22px 24px 18px; border-bottom: 1px solid var(--kc-color-border, #e5e1d6); background: white; display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.kc-drawer-head h2 { font-family: var(--kc-font-mono, ui-monospace, monospace); font-size: 15px; font-weight: 600; letter-spacing: 0.02em; color: var(--kc-color-ink, #0B0F0E); margin: 4px 0 0; }
.kc-drawer-close { width: 30px; height: 30px; border-radius: 6px; border: 1px solid var(--kc-color-border, #e5e1d6); background: white; color: var(--kc-fg-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
.kc-drawer-close:hover { color: var(--kc-color-ink, #0B0F0E); border-color: var(--kc-color-ink, #0B0F0E); }
.kc-drawer-body { flex: 1; overflow-y: auto; padding: 22px 24px; }
.wa-drawer-body { display: flex; flex-direction: column; gap: 18px; }
.wa-field { display: flex; flex-direction: column; }
.wa-field label { display: block; font-family: var(--kc-font-mono, ui-monospace, monospace); font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--kc-fg-muted); margin-bottom: 6px; }
.wa-input { width: 100%; padding: 9px 12px; border: 1px solid var(--kc-color-border, #e5e1d6); border-radius: 6px; font-family: var(--kc-font-mono, ui-monospace, monospace); font-size: 12.5px; color: var(--kc-color-ink, #0B0F0E); background: white; box-sizing: border-box; }
.wa-input:focus { outline: 0; border-color: var(--kc-color-emerald, #10B981); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12); }
.wa-input[readonly] { background: var(--kc-color-bone-2, #f3f1ec); cursor: not-allowed; }
.wa-textarea { font-family: inherit; resize: vertical; min-height: 110px; }
.wa-hint { font-size: 11px; color: var(--kc-fg-muted); margin-top: 5px; }
.wa-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.kc-drawer-foot { display: flex; align-items: center; gap: 8px; padding: 14px 24px; border-top: 1px solid var(--kc-color-border, #e5e1d6); background: white; }

/* Toolbar wrap responsive */
@media (max-width: 900px) { .wa-toolbar { flex-direction: column; align-items: stretch; } .wa-search { width: 100%; } }

/* ── Drawer split (form izq + preview der) ── */
.wa-drawer-split { display: grid; grid-template-columns: 1fr 380px; gap: 24px; align-items: start; }
@media (max-width: 1100px) { .wa-drawer-split { grid-template-columns: 1fr; } }
.wa-form-pane { display: flex; flex-direction: column; gap: 18px; }
.wa-preview-pane { position: sticky; top: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 4px; }
.wa-preview-eyebrow { width: 100%; font-family: var(--kc-font-mono, ui-monospace, monospace); font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--kc-fg-muted); display: flex; align-items: center; gap: 8px; }
.wa-preview-hint { font-size: 11px; color: var(--kc-fg-muted); margin: 0; text-align: center; max-width: 280px; line-height: 1.5; }

/* Phone mockup — más sobrio que el del mockup HTML porque el espacio del drawer es justo */
.wa-phone { width: 280px; background: #0B0F0E; border-radius: 28px; padding: 8px; box-shadow: 0 6px 18px rgba(11, 15, 14, 0.18); position: relative; }
.wa-phone-notch { display: block; width: 60px; height: 5px; margin: 0 auto 6px; background: #222b29; border-radius: 3px; }
.wa-phone-screen { background: #EAE5DD; border-radius: 20px; padding: 14px 12px; min-height: 360px; background-image: radial-gradient(rgba(11, 15, 14, 0.025) 1px, transparent 1px); background-size: 14px 14px; }
.wa-phone-header { font-family: var(--kc-font-mono, ui-monospace, monospace); font-size: 9.5px; color: #3F4744; text-transform: uppercase; letter-spacing: 0.12em; text-align: center; margin-bottom: 10px; }
.wa-bubble { background: white; border-radius: 8px; padding: 11px 13px; font-size: 13px; line-height: 1.45; color: #1A211F; position: relative; box-shadow: 0 1px 1px rgba(11, 15, 14, 0.08); margin-bottom: 6px; }
.wa-bubble::before { content: ""; position: absolute; left: -6px; top: 0; width: 0; height: 0; border-style: solid; border-width: 0 6px 8px 0; border-color: transparent white transparent transparent; }
.wa-bubble-body { font-size: 13px; color: #1A211F; word-wrap: break-word; }
.wa-bubble-empty { color: #94A09B; font-style: italic; font-size: 12px; }
.wa-bubble-footer { font-size: 11px; color: #6A7672; margin-top: 8px; padding-top: 6px; border-top: 1px solid #f0ece6; }
.wa-bubble-time { display: block; text-align: right; font-size: 9.5px; color: #94A09B; font-family: var(--kc-font-mono, ui-monospace, monospace); margin-top: 6px; }
.wa-bubble-buttons { display: flex; flex-direction: column; gap: 1px; margin-top: 6px; }
.wa-bubble-btn { background: white; color: #0084FF; padding: 9px 13px; border-radius: 7px; font-size: 12px; font-weight: 500; text-align: center; display: flex; align-items: center; justify-content: center; gap: 6px; }
.wa-bubble-btn i { font-size: 10px; }

/* Variable chip emerald — signature konecia, distinto del bootstrap blue del DxHtmlEditor */
.wa-var-chip { background: rgba(16, 185, 129, 0.16); color: #047857; font-family: var(--kc-font-mono, ui-monospace, monospace); font-size: 11.5px; padding: 1px 6px; border-radius: 3px; font-weight: 600; white-space: nowrap; }

/* Detected vars helper debajo del textarea */
.wa-detected-vars { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; padding: 6px 8px; background: rgba(16, 185, 129, 0.06); border-radius: 5px; }
.wa-detected-label { font-family: var(--kc-font-mono, ui-monospace, monospace); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kc-fg-muted); }
.wa-var-mini { font-family: var(--kc-font-mono, ui-monospace, monospace); font-size: 11px; color: #047857; background: rgba(16, 185, 129, 0.12); padding: 1px 5px; border-radius: 3px; font-weight: 600; }
.wa-var-mini-sample { font-size: 11px; color: var(--kc-fg-muted); margin-right: 4px; }

/* Buttons editor (form izq) */
.wa-buttons-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.wa-buttons-header label { margin-bottom: 0; }
.wa-btn-add { font-family: var(--kc-font-mono, ui-monospace, monospace); font-size: 10.5px; letter-spacing: 0.06em; color: var(--kc-color-emerald, #10B981); background: rgba(16, 185, 129, 0.08); border: 1px solid rgba(16, 185, 129, 0.2); padding: 4px 9px; border-radius: 4px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.wa-btn-add:hover:not(:disabled) { background: rgba(16, 185, 129, 0.14); border-color: var(--kc-color-emerald, #10B981); }
.wa-btn-add:disabled { opacity: 0.4; cursor: not-allowed; }
.wa-btn-row { display: grid; grid-template-columns: 110px 160px 1fr auto; gap: 6px; align-items: center; margin-bottom: 6px; }
.wa-btn-type, .wa-btn-text, .wa-btn-extra { padding: 7px 10px; font-size: 12.5px; }
.wa-btn-extra-spacer { display: block; }
.wa-btn-remove { width: 28px; height: 28px; border-radius: 5px; border: 1px solid var(--kc-color-border, #e5e1d6); background: white; color: var(--kc-fg-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; transition: all 0.12s ease; }
.wa-btn-remove:hover { background: rgba(220, 38, 38, 0.08); color: var(--kc-color-danger, #DC2626); border-color: rgba(220, 38, 38, 0.28); }
@media (max-width: 700px) { .wa-btn-row { grid-template-columns: 1fr; } }
/* Segunda fila para los flow buttons (NAVIGATE/DATA_EXCHANGE + navigate_screen) */
.wa-btn-row-extra { margin-top: -2px; opacity: 0.92; }
.wa-btn-row-extra .wa-input { font-size: 12px; padding: 6px 9px; }

/* SaaS-7 finish — Header type selector (radio cards visuales) */
.wa-header-types { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 8px; }
.wa-ht-card { background: white; border: 1px solid var(--kc-color-border, #e5e1d6); border-radius: 6px; padding: 10px 6px; font-family: var(--kc-font-mono, ui-monospace, monospace); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--kc-fg-muted); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 5px; transition: all 0.12s ease; }
.wa-ht-card i { font-size: 16px; color: var(--kc-fg-muted); }
.wa-ht-card:hover { border-color: var(--kc-color-emerald, #10B981); color: var(--kc-fg, #1A211F); }
.wa-ht-card.is-active { background: rgba(16, 185, 129, 0.08); border-color: var(--kc-color-emerald, #10B981); color: #047857; }
.wa-ht-card.is-active i { color: var(--kc-color-emerald, #10B981); }
@media (max-width: 700px) { .wa-header-types { grid-template-columns: repeat(2, 1fr); } }

/* Header media upload zone (sin handle) y chip (con handle) */
.wa-upload-zone { border: 1px dashed var(--kc-color-border, #e5e1d6); border-radius: 6px; padding: 14px 12px; background: var(--kc-color-bone-2, #f8f6f1); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wa-upload-zone.wa-upload-busy { border-style: solid; border-color: var(--kc-color-emerald, #10B981); color: var(--kc-color-emerald, #10B981); justify-content: center; }
.wa-upload-zone input[type=file] { font-size: 12px; }
.wa-upload-done { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 6px; background: rgba(16, 185, 129, 0.08); border: 1px solid rgba(16, 185, 129, 0.25); }
.wa-upload-done > i { color: var(--kc-color-emerald, #10B981); font-size: 14px; }
.wa-upload-filename { font-size: 12.5px; color: var(--kc-fg, #1A211F); font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-upload-handle { font-family: var(--kc-font-mono, ui-monospace, monospace); font-size: 10.5px; color: var(--kc-fg-muted); background: white; padding: 2px 6px; border-radius: 3px; border: 1px solid var(--kc-color-border, #e5e1d6); }
.wa-hint { display: block; font-size: 11px; color: var(--kc-fg-muted); margin-top: 4px; }

/* Header preview en la burbuja del mock — text grande + stub para media */
.wa-bubble-header { font-size: 14.5px; font-weight: 600; color: #1A211F; margin-bottom: 6px; }
.wa-bubble-header-media { background: #d8d3c8; border-radius: 6px; height: 110px; display: flex; align-items: center; justify-content: center; margin: -3px -4px 8px; color: rgba(11, 15, 14, 0.32); font-size: 28px; }
.wa-bubble-header-media-3 { background: linear-gradient(135deg, #c9c4b8 0%, #d8d3c8 100%); }
.wa-bubble-header-media-4 { background: #efece4; height: 70px; font-size: 22px; }


/* ───── Phase 9 — Omnichannel banner en /integrations (banner sticky con count
   de canales activos + chip de contactos duplicados detectados pendientes). ───── */
.omni-banner {
  display: flex; align-items: center; gap: 18px;
  padding: 16px 20px; margin-bottom: 18px;
  border: 1px solid var(--kc-color-border, #e5e1d6);
  background: linear-gradient(135deg, #ffffff 0%, var(--kc-color-bone-2, #f8f6f1) 100%);
  border-radius: var(--kc-radius, 10px);
  position: relative; overflow: hidden;
}
.omni-banner::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(400px 200px at -5% 50%, rgba(16,185,129,0.10), transparent 70%);
  pointer-events: none;
}
.omni-banner > * { position: relative; z-index: 1; }
.omni-icon {
  width: 42px; height: 42px; border-radius: 10px;
  background: rgba(16,185,129,0.12);
  display: flex; align-items: center; justify-content: center;
  color: var(--kc-color-emerald, #10B981); font-size: 18px; flex-shrink: 0;
}
.omni-text { flex: 1; min-width: 0; }
.omni-text h3 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.015em; }
.omni-text p { margin: 3px 0 0; font-size: 12.5px; color: var(--kc-fg-muted, #6A7672); }
.omni-dup-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(245,158,11,0.10);
  border: 1px solid rgba(245,158,11,0.32);
  border-radius: 999px; padding: 6px 12px 6px 9px;
  font-size: 12px; color: #92400E; font-weight: 500;
  text-decoration: none; cursor: pointer;
  transition: all 0.15s ease;
}
.omni-dup-chip:hover { background: rgba(245,158,11,0.15); transform: translateX(-1px); }
.omni-dup-chip i { font-size: 11px; }
.omni-dup-chip .cta {
  margin-left: 6px; padding-left: 8px;
  border-left: 1px solid rgba(245,158,11,0.35);
  font-weight: 500; color: #B45309;
  text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.06em;
  font-family: var(--kc-font-mono, ui-monospace, monospace);
}

/* Phase SaaS-3 follow-up — schema reference inline para /admin/saas/plans drawer.
   Pliega/despliega tabla con las llaves canónicas de Plan.CapsJson + descripciones.
   Evita que el operador tenga que abrir el código fuente para saber qué keys usar. */
.kc-caps-schema {
  margin: 8px 0 12px;
  border: 1px solid var(--kc-color-border, #e5e1d6);
  border-radius: 8px;
  background: var(--kc-color-bone-2, #f8f6f1);
}
.kc-caps-schema summary {
  cursor: pointer;
  padding: 9px 14px;
  font-family: var(--kc-font-mono, ui-monospace, monospace);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--kc-color-ink-2, #2A332F);
  font-weight: 600;
  list-style: none;
}
.kc-caps-schema summary::-webkit-details-marker { display: none; }
.kc-caps-schema summary i { margin-right: 8px; color: var(--kc-color-emerald, #10B981); }
.kc-caps-schema[open] summary { border-bottom: 1px solid var(--kc-color-border, #e5e1d6); }
.kc-caps-schema-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  margin: 0;
}
.kc-caps-schema-table td {
  padding: 7px 14px;
  border-bottom: 1px solid var(--kc-color-border, #e5e1d6);
  vertical-align: top;
}
.kc-caps-schema-table tr:last-child td { border-bottom: 0; }
.kc-caps-schema-table td:first-child { width: 200px; }
.kc-caps-schema-table code {
  font-family: var(--kc-font-mono, ui-monospace, monospace);
  font-size: 11.5px;
  color: #047857;
  background: #fff;
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid var(--kc-color-border, #e5e1d6);
}
.kc-caps-schema-table td:last-child {
  color: var(--kc-color-ink-2, #2A332F);
  line-height: 1.45;
}

/* SaaS-2 follow-up · impersonate banner sticky rojo. Aparece encima del shell autenticado
   cuando AuthState.IsImpersonating=true. Patron HubSpot/Salesforce — el danger color hace
   imposible que el super-admin olvide que está viendo otro workspace. */
.kc-impersonate-bar {
  position: sticky; top: 0; z-index: 1000;
  background: linear-gradient(90deg, #DC2626 0%, #B91C1C 100%);
  color: #fff;
  padding: 10px 24px;
  display: flex; align-items: center; gap: 14px;
  box-shadow: 0 4px 12px -2px rgba(220, 38, 38, 0.35);
  font-family: var(--kc-font-sans, system-ui);
  font-size: 13.5px;
}
.kc-impersonate-bar > i {
  font-size: 18px;
  flex-shrink: 0;
}
.kc-imp-text { flex: 1; min-width: 0; line-height: 1.4; }
.kc-imp-text strong { font-weight: 600; }
.kc-imp-exit {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.32);
  color: #fff;
  padding: 7px 14px;
  border-radius: 7px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--kc-font-mono, ui-monospace);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  transition: background 0.15s ease;
}
.kc-imp-exit:hover:not(:disabled) { background: rgba(255, 255, 255, 0.26); }
.kc-imp-exit:disabled { opacity: 0.6; cursor: not-allowed; }
/* Push del shell debajo del banner — sticky no necesita ajuste extra. */
.shell.shell-impersonating .sidebar { top: 0; }

/* SaaS-5 follow-up · financial metrics page. 8 KPI cards canónicos SaaS B2B con
   semáforo Green/Amber/Red según target ranges de CLAUDE.md. */
.sfm-kpis {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin: 18px 0 18px;
}
.sfm-kpi {
  background: #fff; border: 1px solid var(--kc-color-border, #e5e1d6);
  border-radius: 10px; padding: 16px 18px;
  position: relative; overflow: hidden;
}
.sfm-kpi.sfm-kpi-primary {
  background: linear-gradient(135deg, rgba(16,185,129,0.06), rgba(198,242,75,0.05));
  border-color: rgba(16,185,129,0.28);
}
.sfm-kpi.sfm-kpi-ok { border-left: 3px solid var(--kc-color-emerald, #10B981); }
.sfm-kpi.sfm-kpi-amber { border-left: 3px solid var(--kc-color-warning, #F59E0B); }
.sfm-kpi.sfm-kpi-warn { border-left: 3px solid var(--kc-color-danger, #DC2626); }
.sfm-kpi.sfm-kpi-unknown { opacity: 0.72; }
.sfm-kpi-label {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--kc-font-mono, ui-monospace, monospace);
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--kc-fg-muted, #6A7672); font-weight: 600; margin-bottom: 8px;
}
.sfm-kpi-label i { font-size: 11px; }
.sfm-kpi-value { font-size: 26px; font-weight: 600; letter-spacing: -0.025em; line-height: 1; }
.sfm-kpi-value small { font-size: 14px; color: var(--kc-fg-muted, #6A7672); font-weight: 500; margin-left: 2px; }
.sfm-kpi-trend, .sfm-kpi-delta {
  margin-top: 8px;
  font-family: var(--kc-font-mono, ui-monospace, monospace);
  font-size: 10.5px; color: var(--kc-fg-muted, #6A7672);
}
.sfm-kpi-delta.is-up { color: #047857; }
.sfm-kpi-delta.is-down { color: #B91C1C; }
.sfm-kpi-delta i { margin-right: 3px; }

.sfm-counters {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  margin-bottom: 22px;
}
.sfm-counter {
  background: var(--kc-color-bone-2, #f8f6f1); border: 1px solid var(--kc-color-border, #e5e1d6);
  border-radius: 8px; padding: 10px 14px;
  display: flex; flex-direction: column; gap: 2px;
}
.sfm-counter-num { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.sfm-counter-label {
  font-family: var(--kc-font-mono, ui-monospace, monospace);
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--kc-fg-muted, #6A7672);
}
.sfm-counter-trial .sfm-counter-num { color: var(--kc-color-warning, #F59E0B); }
.sfm-counter-new .sfm-counter-num { color: var(--kc-color-emerald, #10B981); }
.sfm-counter-churn .sfm-counter-num { color: var(--kc-color-danger, #DC2626); }

.sfm-section { margin-bottom: 22px; }
.sfm-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 10px; flex-wrap: wrap; gap: 12px;
}
.sfm-section-head h2 {
  margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.015em;
  display: flex; align-items: center; gap: 8px;
}
.sfm-section-head h2 i { color: var(--kc-color-emerald, #10B981); font-size: 14px; }

.sfm-targets {
  display: flex; flex-direction: column; gap: 6px;
  background: #fff; border: 1px solid var(--kc-color-border, #e5e1d6); border-radius: 10px;
  padding: 6px;
}
.sfm-target {
  display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center;
  padding: 10px 14px; border-radius: 6px;
}
.sfm-target:hover { background: var(--kc-color-bone-2, #f8f6f1); }
.sfm-target-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.sfm-target-green .sfm-target-dot { background: var(--kc-color-emerald, #10B981); box-shadow: 0 0 0 3px rgba(16,185,129,0.20); }
.sfm-target-amber .sfm-target-dot { background: var(--kc-color-warning, #F59E0B); box-shadow: 0 0 0 3px rgba(245,158,11,0.18); }
.sfm-target-red .sfm-target-dot { background: var(--kc-color-danger, #DC2626); box-shadow: 0 0 0 3px rgba(220,38,38,0.20); }
.sfm-target-unknown .sfm-target-dot { background: var(--kc-fg-muted, #6A7672); opacity: 0.5; }
.sfm-target-name { font-size: 13px; font-weight: 500; }
.sfm-target-value { font-size: 12.5px; margin-top: 2px; }
.sfm-target-value strong { color: var(--kc-fg, #1A211F); }
.sfm-target-range { color: var(--kc-fg-muted, #6A7672); margin-left: 6px; font-family: var(--kc-font-mono); font-size: 11px; }
.sfm-target-note { color: var(--kc-fg-muted, #6A7672); font-size: 11px; margin-top: 2px; font-family: var(--kc-font-mono); }
.sfm-target-status {
  font-family: var(--kc-font-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 4px;
}
.sfm-target-green .sfm-target-status { background: rgba(16,185,129,0.14); color: #047857; }
.sfm-target-amber .sfm-target-status { background: rgba(245,158,11,0.18); color: #92400E; }
.sfm-target-red .sfm-target-status { background: rgba(220,38,38,0.14); color: #991B1B; }
.sfm-target-unknown .sfm-target-status { background: var(--kc-color-bone-2); color: var(--kc-fg-muted); }

.sfm-timeline {
  width: 100%; border-collapse: collapse;
  background: #fff; border: 1px solid var(--kc-color-border, #e5e1d6); border-radius: 10px;
  overflow: hidden;
}
.sfm-timeline th, .sfm-timeline td {
  padding: 9px 14px; border-bottom: 1px solid var(--kc-color-border, #e5e1d6);
  font-size: 12.5px; text-align: left;
}
.sfm-timeline thead th {
  background: var(--kc-color-bone-2, #f8f6f1);
  font-family: var(--kc-font-mono, ui-monospace, monospace);
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--kc-fg-muted, #6A7672); font-weight: 600;
}
.sfm-timeline td.num, .sfm-timeline th.num { text-align: right; font-variant-numeric: tabular-nums; }
.sfm-timeline tr:last-child td { border-bottom: 0; }
.sfm-timeline tr:hover { background: var(--kc-color-bone-2, #f8f6f1); }

@media (max-width: 1180px) {
  .sfm-kpis { grid-template-columns: repeat(2, 1fr); }
  .sfm-counters { grid-template-columns: repeat(2, 1fr); }
}