/* Fomplus Chat CRM visual layer - DevExtreme 26.1.x - acumulado hasta v129.
   This file intentionally overrides site.css without changing functional selectors. */

:root {
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --crm-accent: #12b76a;
    --crm-accent-soft: #ecfdf3;
    --crm-warning: #f79009;
    --crm-bg: #f3f5f8;
    --crm-panel: #ffffff;
    --crm-panel-muted: #f8fafc;
    --crm-border: #e4e7ec;
    --crm-border-strong: #d0d5dd;
    --crm-text: #101828;
    --crm-muted: #667085;
    --crm-hover: #f2f4f7;
    --crm-active: #eef4ff;
    --crm-active-border: #84adff;
    --radius: 16px;
    --radius-sm: 10px;
    --topbar-height: 60px;
    --shadow: 0 18px 48px rgba(16, 24, 40, .10);
    --shadow-soft: 0 6px 20px rgba(16, 24, 40, .06);
}

html[data-theme="dark"] {
    --crm-bg: #0c111d;
    --crm-panel: #111827;
    --crm-panel-muted: #182230;
    --crm-border: #273244;
    --crm-border-strong: #344054;
    --crm-text: #f9fafb;
    --crm-muted: #98a2b3;
    --crm-hover: #1d2939;
    --crm-active: rgba(37, 99, 235, .18);
    --crm-active-border: #528bff;
    --bg: var(--crm-bg);
    --surface: var(--crm-panel);
    --surface-2: var(--crm-panel-muted);
    --text: var(--crm-text);
    --muted: var(--crm-muted);
    --border: var(--crm-border);
}

body.app-body {
    background: var(--crm-bg);
}

/* Top navigation: compact CRM shell instead of a large marketing header. */
.topbar {
    height: var(--topbar-height);
    padding: 0 14px 0 16px;
    background: color-mix(in srgb, var(--crm-panel) 96%, transparent);
    border-bottom: 1px solid var(--crm-border);
    box-shadow: 0 1px 0 rgba(16, 24, 40, .02);
    backdrop-filter: blur(10px);
}

.brand-mini {
    gap: 9px;
    font-size: .91rem;
    letter-spacing: -.01em;
}

.brand-mini img {
    width: 86px;
    max-height: 32px;
}

.topbar-user {
    gap: 7px;
}

.topbar-user-data {
    padding-right: 4px;
}

.topbar-user-data strong {
    font-size: .84rem;
    line-height: 1.1;
}

.topbar-user-data span {
    font-size: .72rem;
}

.topbar .icon-button,
.topbar .dx-button {
    min-width: 34px;
    width: 34px;
    height: 34px;
    border-radius: 9px;
}

/* Shared DX 26 visual tuning. */
.dx-widget,
.dx-texteditor-input {
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
}

.dx-texteditor.dx-editor-outlined {
    border-color: var(--crm-border-strong);
    border-radius: 10px;
    background: var(--crm-panel);
}

.dx-texteditor.dx-state-hover,
.dx-texteditor.dx-state-focused {
    border-color: var(--primary);
}

.dx-texteditor.dx-state-focused {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .10);
}

.dx-button {
    border-radius: 9px;
    font-weight: 650;
    box-shadow: none;
}

.dx-button-mode-contained.dx-button-default {
    background: var(--primary);
}

.dx-button-mode-contained.dx-button-default.dx-state-hover {
    background: var(--primary-dark);
}

.dx-button-mode-outlined {
    border-color: var(--crm-border-strong);
}

.dx-list {
    background: transparent;
}

.dx-list-item {
    border-top-color: var(--crm-border);
}

.dx-list-item.dx-state-hover,
.dx-list-item.dx-state-focused {
    background: var(--crm-hover);
}

.dx-loadpanel-content {
    min-width: min(440px, calc(100vw - 32px));
    padding: 18px 22px;
    border: 1px solid var(--crm-border);
    border-radius: 12px;
    background: var(--crm-panel);
    box-shadow: 0 18px 46px rgba(16, 24, 40, .18);
}

.dx-loadpanel-message {
    color: var(--crm-text);
    font-size: .88rem;
    font-weight: 650;
}

.dx-overlay-shader {
    backdrop-filter: blur(1.5px);
}

/* Login and company selection: modern enterprise access screen. */
.login-body {
    background:
        radial-gradient(circle at 12% 15%, rgba(37, 99, 235, .12), transparent 28rem),
        linear-gradient(145deg, #f8fafc 0%, #eef2f7 100%);
}

html[data-theme="dark"] .login-body {
    background:
        radial-gradient(circle at 12% 15%, rgba(37, 99, 235, .18), transparent 30rem),
        linear-gradient(145deg, #0c111d 0%, #101828 100%);
}

.login-card {
    width: min(100%, 440px);
    padding: 34px;
    border: 1px solid var(--crm-border);
    border-radius: 16px;
    background: color-mix(in srgb, var(--crm-panel) 96%, transparent);
    box-shadow: 0 24px 70px rgba(16, 24, 40, .12);
}

.login-brand {
    margin-bottom: 24px;
}

.login-brand h1 {
    font-size: clamp(1.55rem, 4vw, 1.9rem);
    letter-spacing: -.035em;
}

.login-product-kicker {
    color: var(--primary);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .11em;
}

.login-card .form-group {
    gap: 7px;
}

.login-card label {
    font-size: .84rem;
}

.login-card .dx-texteditor,
.login-card .dx-selectbox {
    width: 100%;
}

.login-card .dx-texteditor-input {
    min-height: 44px;
}

.login-settings-button,
.login-theme-button {
    border-radius: 9px;
}

/* Main conversation workspace: contiguous 3-column CRM inbox. */
.chat-app-main {
    padding: 10px;
    overflow: hidden;
}

.chat-app-main .chat-shell {
    height: calc(100vh - var(--topbar-height) - 20px);
    min-height: 560px;
    max-width: none;
    gap: 0;
    margin: 0;
    border: 1px solid var(--crm-border);
    border-radius: 14px;
    overflow: hidden;
    background: var(--crm-panel);
    box-shadow: 0 8px 28px rgba(16, 24, 40, .06);
}

.chat-app-main .chat-panel {
    border: 0;
    border-right: 1px solid var(--crm-border);
    border-radius: 0;
    background: var(--crm-panel);
    box-shadow: none;
}

.chat-app-main .panel-messages,
.chat-app-main .panel-event-editor {
    border-right: 0;
}

.chat-app-main .panel-header,
.chat-app-main .chat-header {
    min-height: 62px;
    height: 62px;
    padding: 10px 12px;
    background: var(--crm-panel);
    border-bottom: 1px solid var(--crm-border);
}

.chat-app-main .panel-header-identity,
.chat-app-main .chat-header-main {
    gap: 9px;
}

.chat-app-main .panel-header-avatar {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
    border: 0;
    background: #eef4ff;
    color: #175cd3;
    box-shadow: none;
}

html[data-theme="dark"] .chat-app-main .panel-header-avatar {
    background: rgba(37, 99, 235, .19);
    color: #84adff;
}

.chat-app-main .panel-header h1,
.chat-app-main .panel-header h2,
.chat-app-main .chat-header h2,
.chat-app-main .compact-layer-header h1,
.chat-app-main .compact-layer-header h2,
.chat-app-main .chat-header-main h2 {
    font-size: .96rem;
    font-weight: 720;
    letter-spacing: -.018em;
}

.chat-app-main .chat-subtitle,
.chat-app-main .panel-header p,
.chat-app-main .panel-header small {
    color: var(--crm-muted);
    font-size: .74rem;
}

.chat-app-main .eyebrow {
    color: var(--primary);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .08em;
}

.chat-app-main .panel-header-actions,
.chat-app-main .chat-header-actions {
    gap: 4px;
}

.chat-app-main .icon-button,
.chat-app-main .success-icon-button,
.chat-app-main .danger-icon-button,
.chat-app-main .transfer-icon-button {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 9px;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.chat-app-main .icon-button:hover,
.chat-app-main .success-icon-button:hover:not(:disabled),
.chat-app-main .danger-icon-button:hover:not(:disabled),
.chat-app-main .transfer-icon-button:hover:not(:disabled) {
    background: var(--crm-hover);
}

.chat-app-main .secondary-action-button {
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid var(--crm-border-strong);
    border-radius: 9px;
    background: var(--crm-panel);
    color: var(--crm-text);
    font-weight: 650;
    box-shadow: none;
}

.chat-app-main .secondary-action-button:hover {
    border-color: #b2ccff;
    background: #f5f8ff;
    color: #175cd3;
}

html[data-theme="dark"] .chat-app-main .secondary-action-button:hover {
    background: rgba(37, 99, 235, .14);
    color: #84adff;
}

/* Search and filtering rows are deliberately native: stable IME/mobile behavior with CRM styling. */
.chat-app-main .search-box {
    min-height: 52px;
    height: 52px;
    max-height: 52px;
    flex-basis: 52px;
    padding: 7px 10px;
    background: var(--crm-panel);
    border-bottom: 1px solid var(--crm-border);
}

.chat-app-main .panel-messages > .messages-search-box {
    min-height: 52px;
    height: 52px;
    max-height: 52px;
    flex-basis: 52px;
}

.chat-app-main .search-box input[type="search"] {
    height: 36px;
    min-height: 36px;
    max-height: 36px;
    padding: 7px 36px 7px 34px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: var(--crm-panel-muted);
    color: var(--crm-text);
    font-size: .84rem;
    box-shadow: none;
}

.chat-app-main .search-box input[type="search"]:focus {
    border-color: #84adff;
    background: var(--crm-panel);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .08);
}

.chat-app-main .search-box-icon {
    left: 22px;
    color: #98a2b3;
}

.chat-app-main .search-clear-button {
    right: 17px;
    width: 22px;
    height: 22px;
}

.chat-app-main .conversation-filter-button {
    right: 44px;
    width: 30px;
    height: 30px;
    border-radius: 8px;
}

.chat-app-main .search-box:has(.conversation-filter-button) input[type="search"],
.chat-app-main .search-box.has-conversation-filter input[type="search"] {
    padding-right: 72px;
}

.chat-app-main .filter-box,
.chat-app-main .user-context-card {
    padding: 10px 12px;
    border-bottom: 1px solid var(--crm-border);
    background: var(--crm-panel);
}

.chat-app-main .filter-box label {
    margin-bottom: 5px;
    color: var(--crm-muted);
    font-size: .72rem;
    font-weight: 700;
}

.chat-app-main .filter-box select {
    min-height: 36px;
    padding: 7px 10px;
    border: 1px solid var(--crm-border-strong);
    border-radius: 9px;
    background: var(--crm-panel);
    font-size: .82rem;
}

.chat-app-main .conversation-tabs {
    padding: 6px 8px;
    gap: 5px;
    border-bottom: 1px solid var(--crm-border);
    background: var(--crm-panel-muted);
}

.chat-app-main .conversation-tab {
    height: 29px;
    border-radius: 8px;
    border-color: transparent;
    background: transparent;
}

.chat-app-main .conversation-tab:hover,
.chat-app-main .conversation-tab.active {
    background: var(--crm-panel);
    border-color: var(--crm-border);
}

/* Entity rows mirror modern shared inboxes: dense, scannable, minimal cards. */
.chat-app-main .entity-list {
    padding: 4px 5px 8px;
    scrollbar-width: thin;
}

.chat-app-main .entity-list[data-users-list] .entity-item,
.chat-app-main .entity-list[data-conversations-list] .entity-item {
    position: relative;
    min-height: 62px;
    margin: 1px 0;
    padding: 8px 9px;
    gap: 9px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
}

.chat-app-main .entity-list .entity-item:hover {
    border-color: transparent;
    background: var(--crm-hover);
}

.chat-app-main .entity-list .entity-item.active {
    border-color: transparent;
    background: var(--crm-active);
    box-shadow: none;
}

.chat-app-main .entity-list .entity-item.active::before {
    content: "";
    position: absolute;
    top: 9px;
    bottom: 9px;
    left: 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--primary);
}

.chat-app-main .entity-list[data-users-list] .entity-avatar,
.chat-app-main .entity-list[data-conversations-list] .entity-avatar {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
    border: 0;
    background: #f2f4f7;
    color: #344054;
    box-shadow: none;
}

html[data-theme="dark"] .chat-app-main .entity-list[data-users-list] .entity-avatar,
html[data-theme="dark"] .chat-app-main .entity-list[data-conversations-list] .entity-avatar {
    background: #273244;
    color: #d0d5dd;
}

.chat-app-main .entity-list[data-users-list] .entity-title,
.chat-app-main .entity-list[data-conversations-list] .entity-title {
    color: var(--crm-text);
    font-size: .88rem;
    font-weight: 690;
}

.chat-app-main .entity-list[data-users-list] .entity-meta,
.chat-app-main .entity-list[data-users-list] .entity-preview,
.chat-app-main .entity-list[data-conversations-list] .entity-meta,
.chat-app-main .entity-list[data-conversations-list] .entity-preview {
    color: var(--crm-muted);
    font-size: .74rem;
}

.chat-app-main .entity-event-number,
.chat-app-main .entity-inline-action {
    border-radius: 6px;
    box-shadow: none;
}

.chat-app-main .entity-event-number {
    background: #f5f8ff;
    color: #175cd3;
}

html[data-theme="dark"] .chat-app-main .entity-event-number {
    background: rgba(37, 99, 235, .14);
    color: #84adff;
}

.chat-app-main .badge {
    min-width: 22px;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: .68rem;
}

.chat-app-main .list-status {
    padding: 10px 12px;
    color: var(--crm-muted);
    font-size: .78rem;
}

/* Conversation canvas. */
.chat-app-main .messages-list {
    padding: 16px clamp(12px, 2vw, 26px);
    background: var(--crm-panel-muted);
}

.chat-app-main .message-row {
    margin: 5px 0;
}

.chat-app-main .message-bubble {
    max-width: min(76%, 720px);
    border: 1px solid var(--crm-border);
    border-radius: 13px;
    background: var(--crm-panel);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .03);
}

.chat-app-main .message-row.inbound .message-bubble {
    border-bottom-left-radius: 4px;
}

.chat-app-main .message-row.outbound .message-bubble {
    border-color: #c7d7fe;
    border-bottom-right-radius: 4px;
    background: #eef4ff;
}

html[data-theme="dark"] .chat-app-main .message-row.outbound .message-bubble {
    border-color: rgba(82, 139, 255, .28);
    background: rgba(37, 99, 235, .16);
}

.chat-app-main .message-text {
    color: var(--crm-text);
    font-size: .91rem;
    line-height: 1.42;
}

.chat-app-main .message-meta {
    color: var(--crm-muted);
    font-size: .72rem;
}

.chat-app-main .messages-empty {
    background: var(--crm-panel-muted);
}

.chat-app-main .empty-illustration {
    width: 62px;
    height: 62px;
    border-radius: 14px;
    background: var(--crm-panel);
    border: 1px solid var(--crm-border);
    box-shadow: 0 4px 12px rgba(16, 24, 40, .04);
}

/* Composer inspired by shared-inbox CRMs: toolbar + rectangular editor. */
.chat-app-main .message-compose {
    padding: 10px 12px 8px;
    border-top: 1px solid var(--crm-border);
    background: var(--crm-panel);
}

.chat-app-main .message-compose-row {
    gap: 6px;
}

.chat-app-main .emoji-toggle-button,
.chat-app-main .attach-file-button {
    width: 38px;
    height: 38px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    box-shadow: none;
}

.chat-app-main .emoji-toggle-button:hover:not(:disabled),
.chat-app-main .attach-file-button:hover:not(:disabled) {
    border-color: var(--crm-border);
    background: var(--crm-hover);
    box-shadow: none;
}

.chat-app-main .message-compose input[data-message-input] {
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--crm-border-strong);
    border-radius: 10px;
    background: var(--crm-panel-muted);
    font-size: .88rem;
}

.chat-app-main .message-compose.active-compose input[data-message-input] {
    background: var(--crm-panel);
}

.chat-app-main .message-compose input[data-message-input]:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .08);
}

.chat-app-main .send-message-button {
    height: 40px;
    min-width: 82px;
    padding: 0 14px;
    border-radius: 9px;
    background: var(--primary);
    box-shadow: none;
    font-size: .84rem;
    font-weight: 700;
}

.chat-app-main .send-message-button:hover:not(:disabled) {
    background: var(--primary-dark);
}

.chat-app-main .message-compose-status {
    margin: 5px 2px 0;
    min-height: 15px;
    font-size: .70rem;
}

.chat-app-main .pending-attachment {
    border-radius: 9px;
}

.chat-app-main .emoji-picker {
    border-radius: 12px;
    border-color: var(--crm-border);
    box-shadow: 0 16px 40px rgba(16, 24, 40, .14);
}

/* Resizer becomes a subtle separator, like desktop CRM panes. */
.chat-app-main .chat-shell {
    --conversation-panel-width: clamp(330px, 29vw, 520px);
}

.chat-resizer {
    width: 6px;
    min-width: 6px;
    border-right: 1px solid var(--crm-border);
    background: var(--crm-panel);
}

.chat-resizer::before {
    width: 1px;
}

.chat-resizer:hover::before,
.chat-resizer:focus-visible::before,
.chat-resizer.is-dragging::before {
    width: 2px;
    box-shadow: none;
}

/* Modals and dialogs. */
.settings-backdrop,
.conversation-filter-modal-backdrop,
.new-conversation-modal-backdrop,
.transfer-conversation-modal-backdrop,
.event-open-options-backdrop,
.event-modal-backdrop {
    background: rgba(16, 24, 40, .38);
    backdrop-filter: blur(2px);
}

.settings-modal,
.conversation-filter-modal,
.new-conversation-modal,
.transfer-conversation-modal,
.event-open-options-modal,
.event-modal {
    border: 1px solid var(--crm-border);
    border-radius: 14px;
    background: var(--crm-panel);
    box-shadow: 0 24px 70px rgba(16, 24, 40, .20);
}

.conversation-filter-modal-header,
.new-conversation-modal-header,
.transfer-conversation-modal-header,
.event-open-options-header,
.event-modal-header,
.settings-header {
    border-bottom-color: var(--crm-border);
}

.new-conversation-form .dx-editor-host {
    width: 100%;
}

.new-conversation-form .dx-texteditor-input {
    min-height: 42px;
}

.dx-native-control-proxy {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.transfer-dx-list-host .dx-list-search {
    margin: 0 0 8px;
}

.transfer-dx-item {
    min-height: 58px;
}

/* Desktop home follows the same CRM card vocabulary. */
.welcome-card,
.profile-card {
    border-radius: 14px;
    border-color: var(--crm-border);
    box-shadow: var(--shadow-soft);
}

/* Responsive: one pane at a time, edge-to-edge like a mobile messaging app. */
@media (max-width: 1100px) {
    .chat-app-main {
        padding: 6px;
    }

    .chat-app-main .chat-shell,
    .chat-app-main .chat-shell[data-is-admin="true"],
    .chat-app-main .chat-shell[data-is-admin="false"] {
        height: calc(100vh - var(--topbar-height) - 12px);
        min-height: 0;
        border-radius: 11px;
        grid-template-columns: 1fr;
    }

    .chat-app-main .chat-panel {
        border-right: 0;
    }
}

@media (max-width: 760px) {
    :root {
        --topbar-height: 54px;
    }

    .topbar {
        padding: 0 8px 0 10px;
    }

    .brand-mini span,
    .topbar-user-data span:not(.push-connection-label) {
        display: none;
    }

    .brand-mini img {
        width: 76px;
    }

    .topbar-user-data strong {
        max-width: 110px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .chat-app-main {
        padding: 0;
    }

    .chat-app-main .chat-shell,
    .chat-app-main .chat-shell[data-is-admin="true"],
    .chat-app-main .chat-shell[data-is-admin="false"] {
        height: calc(100dvh - var(--topbar-height));
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .chat-app-main .panel-header,
    .chat-app-main .chat-header {
        min-height: 56px;
        height: 56px;
        padding: 8px 9px;
    }

    .chat-app-main .search-box,
    .chat-app-main .panel-messages > .messages-search-box {
        height: 48px;
        min-height: 48px;
        max-height: 48px;
        flex-basis: 48px;
        padding: 6px 8px;
    }

    .chat-app-main .search-box input[type="search"] {
        height: 34px;
        min-height: 34px;
        max-height: 34px;
    }

    .chat-app-main .entity-list[data-users-list] .entity-item,
    .chat-app-main .entity-list[data-conversations-list] .entity-item {
        min-height: 58px;
        padding: 7px 8px;
    }

    .chat-app-main .messages-list {
        padding: 12px 9px;
    }

    .chat-app-main .message-bubble {
        max-width: 88%;
    }

    .chat-app-main .message-compose {
        padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
    }

    .chat-app-main .send-message-button {
        min-width: 68px;
        padding: 0 10px;
    }

    .new-conversation-modal,
    .conversation-filter-modal,
    .transfer-conversation-modal,
    .event-open-options-modal {
        width: calc(100vw - 16px);
        max-height: calc(100dvh - 18px);
        border-radius: 12px;
    }
}

/* ========================================================================== */
/* v126 - Responsive polish + friendlier chat language                        */
/* ========================================================================== */

/* The generic topbar DX rule is intentionally 34px for icon buttons only.
   Logout is a text action and must keep enough width for its label. */
.topbar .inline-form {
    flex: 0 0 auto;
}

.topbar .inline-form .dx-button,
.topbar .inline-form .button {
    width: auto !important;
    min-width: 104px !important;
    height: 36px !important;
    padding-inline: 12px !important;
    border-radius: 10px;
    white-space: nowrap;
}

.topbar .inline-form .dx-button .dx-button-content {
    padding-inline: 8px;
}

/* Availability belongs to the action row, never to a second full-width row. */
.chat-app-main .panel-header-actions .selected-user-status-badge,
.chat-app-main .panel-header.with-back > .layer-2-header-actions .selected-user-status-badge {
    order: initial;
    width: auto;
    max-width: 150px;
    min-width: 0;
    min-height: 26px;
    margin: 0 0 0 3px;
    padding: 0 9px;
    border-radius: 999px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-app-main .panel-header-actions .selected-user-status-badge::before,
.chat-app-main .panel-header.with-back > .layer-2-header-actions .selected-user-status-badge::before {
    content: "";
    width: 7px;
    height: 7px;
    margin-right: 6px;
    border-radius: 50%;
    flex: 0 0 7px;
    background: currentColor;
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 13%, transparent);
}

/* A warmer, messaging-oriented visual language while preserving CRM density. */
.chat-app-main .entity-list[data-users-list] .entity-item,
.chat-app-main .entity-list[data-conversations-list] .entity-item {
    border-radius: 12px;
}

.chat-app-main .message-bubble {
    border-radius: 18px;
    box-shadow: 0 2px 7px rgba(16, 24, 40, .045);
}

.chat-app-main .message-row.inbound .message-bubble {
    border-bottom-left-radius: 6px;
}

.chat-app-main .message-row.outbound .message-bubble {
    border-bottom-right-radius: 6px;
}

.chat-app-main .message-compose input[data-message-input] {
    border-radius: 14px;
}

.chat-app-main .emoji-toggle-button,
.chat-app-main .attach-file-button,
.chat-app-main .send-message-button {
    border-radius: 12px;
}

.chat-app-main .conversation-tab {
    border-radius: 10px;
}

@media (max-width: 760px) {
    .topbar {
        gap: 6px;
    }

    .topbar-user {
        min-width: 0;
        gap: 5px;
    }

    .topbar-user-data {
        min-width: 0;
    }

    .topbar .icon-button,
    .topbar > .topbar-user > .dx-button {
        min-width: 32px;
        width: 32px;
        height: 32px;
    }

    .topbar .inline-form .dx-button,
    .topbar .inline-form .button {
        min-width: 94px !important;
        height: 34px !important;
        padding-inline: 8px !important;
        font-size: .75rem;
    }

    /* Prevent layer headers from wrapping vertically and overlapping content. */
    .chat-app-main .panel-header,
    .chat-app-main .chat-header {
        position: relative;
        gap: 6px;
        overflow: hidden;
    }

    .chat-app-main .compact-layer-header,
    .chat-app-main .panel-header-identity,
    .chat-app-main .chat-header-main {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
    }

    .chat-app-main .panel-header-title-stack,
    .chat-app-main .chat-header-main {
        min-width: 0;
    }

    .chat-app-main .compact-layer-header h1,
    .chat-app-main .compact-layer-header h2,
    .chat-app-main .chat-header-main h2,
    .chat-app-main .panel-header-subtitle,
    .chat-app-main .chat-header-main .chat-subtitle {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .chat-app-main .panel-header-actions,
    .chat-app-main .panel-header-actions.layer-2-header-actions,
    .chat-app-main .chat-header-actions {
        flex: 0 0 auto;
        max-width: none;
        min-width: 0;
        flex-wrap: nowrap;
        gap: 3px;
    }

    /* Compact availability indicator: visible but it no longer consumes a row. */
    .chat-app-main .panel-header-actions .selected-user-status-badge,
    .chat-app-main .panel-header.with-back > .layer-2-header-actions .selected-user-status-badge {
        order: initial;
        width: 18px;
        min-width: 18px;
        max-width: 18px;
        height: 18px;
        min-height: 18px;
        padding: 0;
        margin-left: 2px;
        border-width: 1px;
        border-radius: 50%;
        font-size: 0;
        line-height: 0;
        overflow: visible;
    }

    .chat-app-main .panel-header-actions .selected-user-status-badge::before,
    .chat-app-main .panel-header.with-back > .layer-2-header-actions .selected-user-status-badge::before {
        width: 8px;
        height: 8px;
        flex-basis: 8px;
        margin: 0;
        box-shadow: none;
    }

    /* Keep action icons touchable without letting them consume the whole header. */
    .chat-app-main .panel-header-actions .icon-button,
    .chat-app-main .panel-header-actions .success-icon-button,
    .chat-app-main .panel-header-actions .danger-icon-button,
    .chat-app-main .panel-header-actions .transfer-icon-button,
    .chat-app-main .chat-header-actions .icon-button,
    .chat-app-main .chat-header-actions .success-icon-button,
    .chat-app-main .chat-header-actions .danger-icon-button,
    .chat-app-main .chat-header-actions .transfer-icon-button {
        width: 32px;
        min-width: 32px;
        height: 32px;
    }

    .chat-app-main .panel-header-avatar {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .chat-app-main .message-bubble {
        max-width: 91%;
        border-radius: 17px;
    }

    .chat-app-main .message-row.inbound .message-bubble {
        border-bottom-left-radius: 5px;
    }

    .chat-app-main .message-row.outbound .message-bubble {
        border-bottom-right-radius: 5px;
    }
}

@media (max-width: 480px) {
    /* Very narrow phones: preserve the conversation identity before secondary UI. */
    .brand-mini img {
        width: 66px;
    }

    .topbar-user-data strong {
        max-width: 86px;
    }

    .topbar .inline-form .dx-button,
    .topbar .inline-form .button {
        min-width: 88px !important;
        padding-inline: 6px !important;
    }

    .chat-app-main .panel-header,
    .chat-app-main .chat-header {
        padding-inline: 7px;
    }

    .chat-app-main .panel-header-actions,
    .chat-app-main .chat-header-actions {
        gap: 2px;
    }
}

/* v127 - Nueva conversación: dxButton aislado del submit nativo. */
.new-conversation-submit-dx-host { min-width: 148px; }
.new-conversation-submit-dx-host .dx-button { width: 100%; min-height: 40px; }
@media (max-width: 640px) {
    .new-conversation-submit-dx-host { width: 100%; }
}


/* ========================================================================== */
/* v128 - Button audit + modern messaging workspace                           */
/* ========================================================================== */

:root {
    --chat-canvas: #f5f7fb;
    --chat-inbound: #ffffff;
    --chat-outbound: #eaf2ff;
    --chat-green: #079455;
    --chat-green-soft: #ecfdf3;
    --chat-blue-soft: #eff6ff;
    --chat-red: #d92d20;
    --chat-red-soft: #fff1f0;
    --chat-action-border: #e3e8ef;
}

html[data-theme="dark"] {
    --chat-canvas: #101828;
    --chat-inbound: #182230;
    --chat-outbound: #172a46;
    --chat-green-soft: rgba(7, 148, 85, .14);
    --chat-blue-soft: rgba(37, 99, 235, .14);
    --chat-red-soft: rgba(217, 45, 32, .13);
    --chat-action-border: #344054;
}

/* Workspace: still CRM-dense, but the message surface feels like a dedicated chat. */
.chat-app-main .chat-shell {
    border-radius: 18px;
    box-shadow: 0 14px 38px rgba(16, 24, 40, .075);
}

.chat-app-main .panel-header,
.chat-app-main .chat-header {
    min-height: 66px;
    height: 66px;
    padding: 11px 13px;
}

.chat-app-main .panel-header-avatar {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    border-radius: 12px;
}

.chat-app-main .panel-header h1,
.chat-app-main .panel-header h2,
.chat-app-main .chat-header h2,
.chat-app-main .compact-layer-header h1,
.chat-app-main .compact-layer-header h2,
.chat-app-main .chat-header-main h2 {
    font-size: 1rem;
}

/* Button ownership is explicit: native dynamic controls get the same polish as DX controls. */
.chat-app-main button,
.topbar button,
.settings-modal button {
    -webkit-tap-highlight-color: transparent;
}

.chat-app-main .icon-button,
.chat-app-main .success-icon-button,
.chat-app-main .danger-icon-button,
.chat-app-main .transfer-icon-button,
.chat-app-main .conversation-filter-button {
    width: 36px;
    min-width: 36px;
    height: 36px;
    border: 1px solid transparent;
    border-radius: 11px;
    transition: background-color .14s ease, border-color .14s ease, color .14s ease, transform .14s ease, box-shadow .14s ease;
}

.chat-app-main .icon-button:focus-visible,
.chat-app-main .success-icon-button:focus-visible,
.chat-app-main .danger-icon-button:focus-visible,
.chat-app-main .transfer-icon-button:focus-visible,
.chat-app-main .conversation-filter-button:focus-visible,
.chat-app-main .secondary-action-button:focus-visible,
.chat-app-main .send-message-button:focus-visible,
.chat-app-main .emoji-toggle-button:focus-visible,
.chat-app-main .attach-file-button:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .16);
}

.chat-app-main .success-icon-button:not(:disabled) {
    color: var(--chat-green);
    background: var(--chat-green-soft);
    border-color: color-mix(in srgb, var(--chat-green) 18%, transparent);
}

.chat-app-main .transfer-icon-button:not(:disabled) {
    color: #2563eb;
    background: var(--chat-blue-soft);
    border-color: rgba(37, 99, 235, .16);
}

.chat-app-main .danger-icon-button:not(:disabled) {
    color: var(--chat-red);
    background: var(--chat-red-soft);
    border-color: rgba(217, 45, 32, .15);
}

.chat-app-main .success-icon-button:hover:not(:disabled),
.chat-app-main .transfer-icon-button:hover:not(:disabled),
.chat-app-main .danger-icon-button:hover:not(:disabled),
.chat-app-main .icon-button:hover:not(:disabled),
.chat-app-main .conversation-filter-button:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: var(--chat-action-border);
}

.chat-app-main .success-icon-button:disabled,
.chat-app-main .transfer-icon-button:disabled,
.chat-app-main .danger-icon-button:disabled,
.chat-app-main .icon-button:disabled,
.chat-app-main .conversation-filter-button:disabled,
.chat-app-main .send-message-button:disabled,
.chat-app-main .emoji-toggle-button:disabled,
.chat-app-main .attach-file-button:disabled {
    opacity: .42;
    cursor: default;
    transform: none;
}

.chat-app-main .secondary-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    padding-inline: 11px;
    border-radius: 11px;
    border-color: rgba(37, 99, 235, .18);
    background: var(--chat-blue-soft);
    color: #175cd3;
}

.chat-app-main .secondary-action-button::before {
    content: "✎";
    font-size: .88rem;
    line-height: 1;
}

html[data-theme="dark"] .chat-app-main .secondary-action-button {
    color: #84adff;
}

.chat-app-main [aria-busy="true"] {
    cursor: progress;
}

/* Native filter button remains native because its badge is rebuilt dynamically. */
.chat-app-main .conversation-filter-button[data-ui-control-owner="native-dynamic"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--crm-muted);
    background: transparent;
}

.chat-app-main .conversation-filter-button[data-ui-control-owner="native-dynamic"].active {
    color: #175cd3;
    background: var(--chat-blue-soft);
    border-color: rgba(37, 99, 235, .18);
}

.chat-app-main .conversation-filter-count {
    top: -4px;
    right: -4px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border: 2px solid var(--crm-panel);
    border-radius: 999px;
    font-size: .61rem;
    line-height: 13px;
}

/* Inbox lists: slightly roomier and more tactile without becoming card-heavy. */
.chat-app-main .entity-list {
    padding: 6px 7px 10px;
}

.chat-app-main .entity-list[data-users-list] .entity-item,
.chat-app-main .entity-list[data-conversations-list] .entity-item {
    min-height: 66px;
    margin: 2px 0;
    padding: 9px 10px;
    border-radius: 14px;
}

.chat-app-main .entity-list .entity-item.active {
    border-color: rgba(37, 99, 235, .12);
    background: color-mix(in srgb, var(--crm-active) 86%, var(--crm-panel));
}

.chat-app-main .entity-list .entity-item.active::before {
    top: 11px;
    bottom: 11px;
    width: 3px;
    border-radius: 0 999px 999px 0;
}

.chat-app-main .entity-list[data-users-list] .entity-avatar,
.chat-app-main .entity-list[data-conversations-list] .entity-avatar {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
    border-radius: 13px;
}

.chat-app-main .entity-inline-action {
    min-height: 24px;
    padding: 3px 8px;
    border-radius: 8px;
}

/* Conversation area: quiet canvas + natural chat bubbles. */
.chat-app-main .messages-list,
.chat-app-main .messages-empty {
    background-color: var(--chat-canvas);
    background-image:
        radial-gradient(circle at 18% 12%, rgba(37, 99, 235, .025), transparent 28%),
        radial-gradient(circle at 82% 72%, rgba(7, 148, 85, .022), transparent 30%);
}

.chat-app-main .messages-list {
    padding: 20px clamp(14px, 2.4vw, 34px);
}

.chat-app-main .message-row {
    margin: 7px 0;
}

.chat-app-main .message-bubble {
    max-width: min(75%, 730px);
    border: 1px solid color-mix(in srgb, var(--crm-border) 84%, transparent);
    border-radius: 19px;
    background: var(--chat-inbound);
    box-shadow: 0 2px 8px rgba(16, 24, 40, .045);
}

.chat-app-main .message-row.inbound .message-bubble {
    border-bottom-left-radius: 6px;
}

.chat-app-main .message-row.outbound .message-bubble {
    border-color: rgba(37, 99, 235, .12);
    border-bottom-right-radius: 6px;
    background: var(--chat-outbound);
}

.chat-app-main .message-text {
    font-size: .92rem;
    line-height: 1.48;
}

.chat-app-main .message-meta {
    margin-top: 4px;
    font-size: .69rem;
}

/* Composer: one integrated surface, closer to modern messaging clients. */
.chat-app-main .message-compose {
    padding: 10px 12px 8px;
    background: var(--crm-panel);
}

.chat-app-main .message-compose-row {
    gap: 4px;
    padding: 5px;
    border: 1px solid var(--crm-border);
    border-radius: 18px;
    background: var(--crm-panel-muted);
    box-shadow: 0 2px 10px rgba(16, 24, 40, .035);
    transition: border-color .14s ease, box-shadow .14s ease, background-color .14s ease;
}

.chat-app-main .message-compose.active-compose .message-compose-row:focus-within {
    border-color: #84adff;
    background: var(--crm-panel);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .075), 0 3px 12px rgba(16, 24, 40, .04);
}

.chat-app-main .message-compose input[data-message-input] {
    height: 42px;
    min-width: 0;
    padding: 0 9px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    box-shadow: none;
    font-size: .9rem;
}

.chat-app-main .message-compose.active-compose input[data-message-input],
.chat-app-main .message-compose input[data-message-input]:focus {
    border: 0;
    background: transparent;
    box-shadow: none;
    outline: 0;
}

.chat-app-main .emoji-toggle-button,
.chat-app-main .attach-file-button {
    width: 40px;
    min-width: 40px;
    height: 40px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--crm-muted);
}

.chat-app-main .emoji-toggle-button:hover:not(:disabled),
.chat-app-main .attach-file-button:hover:not(:disabled) {
    border: 0;
    background: var(--crm-hover);
    color: var(--crm-text);
}

.chat-app-main .send-message-button {
    height: 42px;
    min-width: 84px;
    padding: 0 15px;
    border: 0;
    border-radius: 13px;
    box-shadow: 0 3px 8px rgba(37, 99, 235, .18);
}

.chat-app-main .send-message-button::after {
    content: "➤";
    margin-left: 7px;
    font-size: .78em;
}

.chat-app-main .send-message-button[aria-busy="true"]::after {
    content: "…";
}

.chat-app-main .message-compose-status {
    margin: 6px 5px 0;
}

.chat-app-main .pending-attachment {
    margin-top: 7px;
    border-radius: 13px;
}

.chat-app-main .pending-attachment-remove {
    border-radius: 9px;
}

/* Tabs and pagination behave like compact inbox tools rather than legacy buttons. */
.chat-app-main .conversation-tab {
    min-height: 31px;
    border-radius: 10px;
}

.chat-app-main .conversation-tab-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 7px;
}

.chat-app-main .conversation-tab-close:hover,
.chat-app-main .conversation-tab-close:focus-visible {
    background: var(--crm-hover);
    outline: 0;
}

.chat-app-main .conversation-pagination-actions {
    margin: 8px 6px 4px;
    padding: 10px;
    border: 1px solid var(--crm-border);
    border-radius: 13px;
    background: var(--crm-panel-muted);
}

.chat-app-main .conversation-pagination-button {
    min-height: 34px;
    border-radius: 9px;
}

/* Dialogs: same visual family as the chat shell. */
.conversation-filter-modal,
.new-conversation-modal,
.transfer-conversation-modal,
.event-open-options-modal {
    border-radius: 20px;
    box-shadow: 0 26px 72px rgba(16, 24, 40, .20);
}

.conversation-filter-modal-backdrop,
.new-conversation-modal-backdrop,
.transfer-conversation-modal-backdrop,
.event-open-options-backdrop,
.event-modal-backdrop,
.settings-backdrop {
    backdrop-filter: blur(3px);
}

.event-open-options-list {
    gap: 8px;
    padding: 12px;
}

.event-open-option {
    border: 1px solid var(--crm-border);
    border-radius: 13px;
    background: var(--crm-panel);
}

.event-open-option:last-child {
    border-bottom: 1px solid var(--crm-border);
}

.event-open-option:hover,
.event-open-option:focus-visible {
    border-color: #84adff;
    background: var(--chat-blue-soft);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .07);
}

.new-conversation-actions,
.transfer-conversation-actions,
.conversation-filter-modal-actions {
    gap: 8px;
}

.new-conversation-actions .dx-button,
.transfer-conversation-actions .dx-button,
.conversation-filter-modal-actions .dx-button,
.new-conversation-actions button,
.transfer-conversation-actions button,
.conversation-filter-modal-actions button {
    min-height: 40px;
    border-radius: 11px;
}

/* Topbar button audit: text actions remain text actions; icon actions stay compact. */
.topbar .icon-button,
.topbar > .topbar-user > .dx-button {
    border-radius: 11px;
}

.topbar .inline-form .dx-button,
.topbar .inline-form .button {
    min-width: 108px !important;
    border-radius: 11px;
}

@media (max-width: 760px) {
    .chat-app-main .chat-shell,
    .chat-app-main .chat-shell[data-is-admin="true"],
    .chat-app-main .chat-shell[data-is-admin="false"] {
        border-radius: 0;
        box-shadow: none;
    }

    .chat-app-main .panel-header,
    .chat-app-main .chat-header {
        min-height: 60px;
        height: 60px;
        padding: 8px 9px;
    }

    .chat-app-main .panel-header-avatar {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
        border-radius: 11px;
    }

    .chat-app-main .panel-header-actions,
    .chat-app-main .chat-header-actions {
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        overscroll-behavior-inline: contain;
    }

    .chat-app-main .panel-header-actions::-webkit-scrollbar,
    .chat-app-main .chat-header-actions::-webkit-scrollbar {
        display: none;
    }

    .chat-app-main .panel-header-actions .icon-button,
    .chat-app-main .panel-header-actions .success-icon-button,
    .chat-app-main .panel-header-actions .danger-icon-button,
    .chat-app-main .panel-header-actions .transfer-icon-button,
    .chat-app-main .chat-header-actions .icon-button,
    .chat-app-main .chat-header-actions .success-icon-button,
    .chat-app-main .chat-header-actions .danger-icon-button,
    .chat-app-main .chat-header-actions .transfer-icon-button {
        width: 34px;
        min-width: 34px;
        height: 34px;
        border-radius: 10px;
    }

    .chat-app-main .chat-header-actions .secondary-action-button {
        width: 34px;
        min-width: 34px;
        height: 34px;
        min-height: 34px;
        padding: 0;
        border-radius: 10px;
        font-size: 0;
        flex: 0 0 34px;
    }

    .chat-app-main .chat-header-actions .secondary-action-button::before {
        font-size: .95rem;
    }

    .chat-app-main .messages-list {
        padding: 14px 9px 16px;
    }

    .chat-app-main .message-bubble {
        max-width: 90%;
        border-radius: 18px;
    }

    .chat-app-main .message-row.inbound .message-bubble {
        border-bottom-left-radius: 5px;
    }

    .chat-app-main .message-row.outbound .message-bubble {
        border-bottom-right-radius: 5px;
    }

    .chat-app-main .message-compose {
        padding: 8px 7px max(7px, env(safe-area-inset-bottom));
    }

    .chat-app-main .message-compose-row {
        padding: 4px;
        border-radius: 17px;
    }

    .chat-app-main .emoji-toggle-button,
    .chat-app-main .attach-file-button {
        width: 38px;
        min-width: 38px;
        height: 38px;
    }

    .chat-app-main .message-compose input[data-message-input] {
        height: 40px;
        padding-inline: 7px;
    }

    .chat-app-main .send-message-button {
        height: 40px;
        min-width: 72px;
        padding-inline: 11px;
    }

    .chat-app-main .entity-list[data-users-list] .entity-item,
    .chat-app-main .entity-list[data-conversations-list] .entity-item {
        min-height: 64px;
        border-radius: 13px;
    }
}

@media (max-width: 520px) {
    .brand-mini span {
        display: none;
    }

    .topbar-user-data > span {
        display: none;
    }

    .topbar-user-data strong {
        max-width: 92px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .topbar .inline-form .dx-button,
    .topbar .inline-form .button {
        min-width: 84px !important;
        padding-inline: 6px !important;
    }

    .chat-app-main .send-message-button {
        width: 42px;
        min-width: 42px;
        padding: 0;
        font-size: 0;
        border-radius: 12px;
    }

    .chat-app-main .send-message-button::after {
        margin-left: 0;
        font-size: 16px;
    }

    .chat-app-main .message-compose-status {
        font-size: .66rem;
    }
}

/* ========================================================================== */
/* v129 - DevExtreme 26 light/dark button contrast + navigation ownership     */
/* ========================================================================== */

:root {
    --action-primary-bg: #2563eb;
    --action-primary-bg-hover: #1d4ed8;
    --action-primary-fg: #ffffff;
    --action-neutral-bg: #ffffff;
    --action-neutral-bg-hover: #f2f4f7;
    --action-neutral-fg: #344054;
    --action-text-fg: #175cd3;
    --action-outline-border: #b8c2d0;
}

html[data-theme="dark"] {
    --action-primary-bg: #356ae6;
    --action-primary-bg-hover: #2f63d3;
    --action-primary-fg: #ffffff;
    --action-neutral-bg: #182230;
    --action-neutral-bg-hover: #1d2939;
    --action-neutral-fg: #f2f4f7;
    --action-text-fg: #84adff;
    --action-outline-border: #475467;
}

/* Native fallback actions must remain readable regardless of the DX theme CSS. */
a.button.button-primary,
a.button.button-primary:link,
a.button.button-primary:visited,
a.button.button-primary:hover,
a.button.button-primary:focus,
a.button.button-primary:active,
button.button-primary,
.button.button-primary {
    background: var(--action-primary-bg) !important;
    border-color: var(--action-primary-bg) !important;
    color: var(--action-primary-fg) !important;
}

a.button.button-primary:hover,
a.button.button-primary:focus-visible,
button.button-primary:hover,
button.button-primary:focus-visible,
.button.button-primary:hover,
.button.button-primary:focus-visible {
    background: var(--action-primary-bg-hover) !important;
    border-color: var(--action-primary-bg-hover) !important;
    color: var(--action-primary-fg) !important;
}

.button-outline,
a.button-outline,
button.button-outline {
    color: var(--action-text-fg) !important;
}

.button-link,
a.button-link,
button.button-link {
    color: var(--action-text-fg) !important;
}

/* DX primary action: never inherit low-contrast typography from surrounding cards. */
.dx-button.dx-button-mode-contained.dx-button-default {
    background: var(--action-primary-bg) !important;
    border-color: var(--action-primary-bg) !important;
}

.dx-button.dx-button-mode-contained.dx-button-default .dx-button-content,
.dx-button.dx-button-mode-contained.dx-button-default .dx-button-text,
.dx-button.dx-button-mode-contained.dx-button-default .dx-icon {
    color: var(--action-primary-fg) !important;
}

.dx-button.dx-button-mode-contained.dx-button-default.dx-state-hover,
.dx-button.dx-button-mode-contained.dx-button-default.dx-state-focused {
    background: var(--action-primary-bg-hover) !important;
    border-color: var(--action-primary-bg-hover) !important;
}

/* DX neutral contained/outlined actions: Cancelar, secundarios, etc. */
.dx-button.dx-button-mode-contained.dx-button-normal {
    background: var(--action-neutral-bg) !important;
    border-color: var(--action-outline-border) !important;
}

.dx-button.dx-button-mode-contained.dx-button-normal .dx-button-text,
.dx-button.dx-button-mode-contained.dx-button-normal .dx-icon,
.dx-button.dx-button-mode-outlined.dx-button-normal .dx-button-text,
.dx-button.dx-button-mode-outlined.dx-button-normal .dx-icon {
    color: var(--action-neutral-fg) !important;
}

.dx-button.dx-button-mode-outlined.dx-button-normal {
    background: transparent !important;
    border-color: var(--action-outline-border) !important;
}

.dx-button.dx-button-mode-contained.dx-button-normal.dx-state-hover,
.dx-button.dx-button-mode-outlined.dx-button-normal.dx-state-hover {
    background: var(--action-neutral-bg-hover) !important;
}

/* Text/icon actions keep enough contrast in both themes. */
.dx-button.dx-button-mode-text.dx-button-normal .dx-button-text,
.dx-button.dx-button-mode-text.dx-button-normal .dx-icon {
    color: var(--action-neutral-fg) !important;
}

.dx-button.dx-button-mode-text.dx-button-default .dx-button-text,
.dx-button.dx-button-mode-text.dx-button-default .dx-icon,
.button-link.dx-button .dx-button-text,
.button-link.dx-button .dx-icon {
    color: var(--action-text-fg) !important;
}

.topbar .inline-form .dx-button.dx-button-mode-outlined .dx-button-text,
.topbar .inline-form .dx-button.dx-button-mode-outlined .dx-icon {
    color: var(--action-text-fg) !important;
}

.dx-button.dx-state-disabled .dx-button-content,
.dx-button.dx-state-disabled .dx-button-text,
.dx-button.dx-state-disabled .dx-icon {
    opacity: .72;
}

/* Home navigation uses a real dxButton with an HTML anchor only as fallback. */
.welcome-primary-action {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 44px;
}

.dx-navigation-button-host {
    display: none;
    min-width: 190px;
}

.dx-navigation-button-host.dx-navigation-ready {
    display: inline-block;
}

.dx-navigation-button-host.dx-navigation-ready.dx-button,
.dx-navigation-button-host.dx-navigation-ready .dx-button {
    min-width: 190px;
    min-height: 42px;
    border-radius: 11px;
}

.dx-navigation-fallback {
    min-width: 190px;
}

.dx-navigation-fallback[hidden] {
    display: none !important;
}

/* Explicit focus rings help verify state in the light theme without relying on color alone. */
.dx-button.dx-state-focused:not(.dx-state-disabled),
.button:focus-visible,
.icon-button:focus-visible,
.success-icon-button:focus-visible,
.danger-icon-button:focus-visible,
.transfer-icon-button:focus-visible,
.secondary-action-button:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--primary) 24%, transparent) !important;
    outline-offset: 2px;
}

@media (max-width: 760px) {
    .welcome-primary-action,
    .dx-navigation-button-host,
    .dx-navigation-fallback {
        width: 100%;
    }

    .dx-navigation-button-host.dx-navigation-ready.dx-button,
    .dx-navigation-button-host.dx-navigation-ready .dx-button {
        width: 100% !important;
    }
}


/* ==========================================================================
   v130 - Geometría tipográfica estable para dxButton
   DevExtreme es el único owner del padding interno cuando el widget inicia.
   Evita recortes de descendentes (g/p/q/y) causados por mezclar .button nativo
   con el layout interno del tema Material Compact.
   ========================================================================== */
.fomplus-dx-owned-button.dx-button {
    box-sizing: border-box;
    overflow: visible;
}

/* v103 dejó un min-height global de 32px para .dx-button. En widgets de texto
   v130 lo sustituye por una caja táctil/typográfica real; icon-only y compactos
   conservan las dimensiones específicas de su contexto. */
.fomplus-dx-owned-button.dx-button:not(.icon-button):not(.login-settings-button):not(.login-theme-button):not(.compact) {
    min-height: 40px !important;
    height: auto !important;
}

/* Las clases HTML de fallback conservan su apariencia solo hasta que DX inicia. */
button.button.fomplus-dx-owned-button.dx-button {
    padding: 0 !important;
    line-height: normal !important;
}

.fomplus-dx-owned-button.dx-button .dx-button-content {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    overflow: visible !important;
    line-height: normal !important;
}

.fomplus-dx-owned-button.dx-button .dx-button-text {
    display: inline-block;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.35 !important;
    padding-block: 1px 2px;
}

.fomplus-dx-owned-button.dx-button .dx-icon {
    line-height: 1 !important;
    flex: 0 0 auto;
}

/* Acciones de formulario: una altura cómoda y controlada por el contenido DX. */
button.button.fomplus-dx-owned-button.dx-button:not(.compact):not(.button-link) .dx-button-content {
    min-height: 42px;
    padding: 8px 16px !important;
}

/* Login: reserva espacio real para descendentes y mantiene el ancho completo. */
.login-submit.fomplus-dx-owned-button.dx-button {
    width: 100% !important;
    min-height: 46px !important;
    height: auto !important;
}

.login-submit.fomplus-dx-owned-button.dx-button .dx-button-content {
    min-height: 44px;
    padding: 9px 18px !important;
}

.login-submit.fomplus-dx-owned-button.dx-button .dx-button-text {
    font-weight: 700;
    line-height: 1.4 !important;
    padding-block: 1px 2px;
}

/* Botones compactos del topbar no heredan la altura de las acciones de formulario. */
.topbar button.button.compact.fomplus-dx-owned-button.dx-button {
    min-height: 36px !important;
    height: 36px !important;
}

.topbar button.button.compact.fomplus-dx-owned-button.dx-button .dx-button-content {
    min-height: 34px;
    padding: 5px 12px !important;
}

/* Botones de texto no deben ganar altura/padding de los contained. */
button.button-link.fomplus-dx-owned-button.dx-button .dx-button-content,
.fomplus-dx-owned-button.dx-button.dx-button-mode-text .dx-button-content {
    padding-block: 6px !important;
}

/* Icon-only: conservar exactamente el cuadro definido por cada contexto. */
.icon-button.fomplus-dx-owned-button.dx-button .dx-button-content,
.login-settings-button.fomplus-dx-owned-button.dx-button .dx-button-content,
.login-theme-button.fomplus-dx-owned-button.dx-button .dx-button-content {
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0 !important;
}

/* Disabled conserva legibilidad sin crear un clipping por opacity en el texto. */
.fomplus-dx-owned-button.dx-button.dx-state-disabled .dx-button-text {
    overflow: visible !important;
}

/* ========================================================================== */
/* Fomplus Chat v131 · Panel de campañas                                      */
/* ========================================================================== */
.campaign-app-main{max-width:none;padding:0;background:var(--crm-bg,#f4f7fb)}
.campaign-page{min-height:calc(100dvh - 64px);padding:28px clamp(18px,3vw,42px) 42px;color:var(--crm-text,#172033)}
.campaign-page-header{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:24px}
.campaign-page-header h1{margin:4px 0 5px;font-size:clamp(26px,3vw,38px);letter-spacing:-.035em}
.campaign-page-header p{margin:0;color:var(--crm-muted,#667085);font-size:14px}
.campaign-eyebrow{display:inline-flex;align-items:center;gap:6px;color:var(--crm-accent,#245eea);font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.campaign-header-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto}.campaign-header-actions #new-campaign-button .dx-button{min-height:42px!important;border-radius:10px!important}
.campaign-chat-link{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 15px;border:1px solid var(--crm-line,#d9e2ef);border-radius:10px;color:var(--crm-text,#172033);background:var(--crm-surface,#fff);text-decoration:none;font-weight:700;font-size:13px}.campaign-chat-link:hover{border-color:var(--crm-accent,#245eea);color:var(--crm-accent,#245eea)}
.campaign-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:18px}.campaign-kpis article{min-width:0;padding:17px 18px;border:1px solid var(--crm-line,#dce4ef);border-radius:14px;background:var(--crm-surface,#fff);box-shadow:0 8px 24px rgba(16,24,40,.045)}.campaign-kpis span{display:block;color:var(--crm-muted,#667085);font-size:12px;font-weight:700}.campaign-kpis strong{display:block;margin:5px 0 2px;font-size:26px;line-height:1.05;letter-spacing:-.03em}.campaign-kpis small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#98a2b3;font-size:10px}
.campaign-list-card{border:1px solid var(--crm-line,#dce4ef);border-radius:16px;background:var(--crm-surface,#fff);box-shadow:0 12px 30px rgba(16,24,40,.05);overflow:hidden}.campaign-section-heading{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:18px 20px;border-bottom:1px solid var(--crm-line,#e4eaf2)}.campaign-section-heading h2{margin:0;font-size:17px}.campaign-section-heading p{margin:4px 0 0;color:var(--crm-muted,#667085);font-size:12px}.campaign-source-pill{max-width:42vw;padding:7px 10px;border-radius:999px;background:var(--crm-soft,#eef4ff);color:var(--crm-accent,#245eea);font-size:11px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.campaign-list-card .dx-datagrid{border:0!important;background:transparent}.campaign-list-card .dx-datagrid-headers{background:var(--crm-soft-surface,#f8fafc)}
.campaign-alert{display:flex;gap:10px;align-items:flex-start;margin-bottom:16px;padding:12px 14px;border-radius:10px;font-size:12px}.campaign-alert-error{border:1px solid #fecaca;background:#fff1f2;color:#9f1239}.campaign-alert span{opacity:.85}
.campaign-wizard-backdrop{position:fixed;inset:0;z-index:2400;display:grid;place-items:center;padding:18px;background:rgba(15,23,42,.52);backdrop-filter:blur(6px)}.campaign-wizard-backdrop[hidden]{display:none!important}.campaign-modal-open{overflow:hidden}.campaign-wizard{width:min(1220px,98vw);height:min(900px,96dvh);display:grid;grid-template-rows:auto auto 1fr auto;overflow:hidden;border:1px solid rgba(255,255,255,.22);border-radius:18px;background:var(--crm-surface,#fff);box-shadow:0 28px 80px rgba(15,23,42,.25)}
.campaign-wizard-header{display:flex;justify-content:space-between;gap:20px;padding:18px 22px 14px;border-bottom:1px solid var(--crm-line,#e4eaf2)}.campaign-wizard-header h2{margin:2px 0 3px;font-size:21px}.campaign-wizard-header p{margin:0;color:var(--crm-muted,#667085);font-size:12px}.campaign-icon-button{width:38px;height:38px;display:grid;place-items:center;border:0;border-radius:10px;background:transparent;color:var(--crm-muted,#667085);font-size:25px;cursor:pointer}.campaign-icon-button:hover{background:var(--crm-soft,#f2f5f9);color:var(--crm-text,#172033)}
.campaign-stepper{display:grid;grid-template-columns:repeat(4,1fr);padding:0 20px;border-bottom:1px solid var(--crm-line,#e4eaf2);background:var(--crm-soft-surface,#fafbfd)}.campaign-stepper button{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;min-height:54px;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--crm-muted,#667085);cursor:default}.campaign-stepper button span{width:24px;height:24px;display:grid;place-items:center;border:1px solid var(--crm-line,#cfd8e5);border-radius:50%;background:var(--crm-surface,#fff);font-size:11px;font-weight:800}.campaign-stepper button em{font-style:normal;font-size:12px;font-weight:700}.campaign-stepper button.is-active{border-bottom-color:var(--crm-accent,#245eea);color:var(--crm-accent,#245eea)}.campaign-stepper button.is-active span,.campaign-stepper button.is-complete span{border-color:var(--crm-accent,#245eea);background:var(--crm-accent,#245eea);color:#fff}.campaign-stepper button.is-complete{cursor:pointer;color:var(--crm-text,#172033)}
.campaign-wizard-body{overflow:auto;padding:22px}.campaign-step{display:none;animation:campaignFade .18s ease}.campaign-step.is-active{display:block}@keyframes campaignFade{from{opacity:.25;transform:translateY(4px)}to{opacity:1;transform:none}}
.campaign-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.campaign-span-2{grid-column:span 2}.campaign-field{min-width:0}.campaign-field label{display:block;margin:0 0 7px;color:var(--crm-text,#172033);font-size:12px;font-weight:750}.campaign-field .dx-texteditor{border-radius:9px!important}.campaign-content-block,.campaign-mapping-card,.campaign-channel-editor,.campaign-execution-note{margin-top:18px;padding:17px;border:1px solid var(--crm-line,#dce4ef);border-radius:14px;background:var(--crm-soft-surface,#fbfcfe)}.campaign-content-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:12px}.campaign-content-heading h3{margin:0;font-size:15px}.campaign-content-heading p{margin:3px 0 0;color:var(--crm-muted,#667085);font-size:11px}.campaign-content-heading>span{padding:5px 8px;border-radius:999px;background:var(--crm-soft,#eef4ff);color:var(--crm-accent,#245eea);font-size:10px;font-weight:800}.campaign-html-editor{overflow:hidden;border-radius:10px}.campaign-html-fallback{width:100%;min-height:280px;padding:12px;border:1px solid var(--crm-line,#cfd8e5);border-radius:9px;background:var(--crm-surface,#fff);color:var(--crm-text,#172033);font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.campaign-html-fallback.is-visible{display:block!important}.campaign-channel-fields{margin-top:18px}
.campaign-audience-intro,.campaign-grid-toolbar,.campaign-channel-title{display:flex;justify-content:space-between;align-items:center;gap:18px}.campaign-audience-intro h3,.campaign-channel-title h3{margin:0;font-size:18px}.campaign-audience-intro p,.campaign-channel-title p{margin:4px 0 0;color:var(--crm-muted,#667085);font-size:12px}.campaign-audience-count{min-width:130px;padding:10px 14px;border-radius:12px;background:var(--crm-soft,#eef4ff);text-align:right}.campaign-audience-count span{display:block;color:var(--crm-muted,#667085);font-size:10px}.campaign-audience-count strong{display:block;color:var(--crm-accent,#245eea);font-size:20px}.campaign-mapping-card h4{margin:0 0 3px;font-size:14px}.campaign-mapping-card>p{margin:0 0 14px;color:var(--crm-muted,#667085);font-size:11px}.campaign-mapping-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.campaign-grid-toolbar{margin:18px 0 9px}.campaign-grid-toolbar strong,.campaign-grid-toolbar span{display:block}.campaign-grid-toolbar strong{font-size:13px}.campaign-grid-toolbar span{margin-top:2px;color:var(--crm-muted,#667085);font-size:10px}.campaign-native-button{min-height:34px;padding:0 12px;border-radius:8px;border:1px solid var(--crm-line,#ccd6e4);background:var(--crm-surface,#fff);color:var(--crm-text,#172033);font-size:11px;font-weight:700;cursor:pointer}.campaign-native-button:hover{border-color:var(--crm-accent,#245eea);color:var(--crm-accent,#245eea)}#campaign-source-grid{border:1px solid var(--crm-line,#dce4ef);border-radius:12px;overflow:hidden}.campaign-audit-summary{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin-top:13px}.campaign-audit-summary article{padding:11px 12px;border:1px solid var(--crm-line,#dce4ef);border-radius:10px;background:var(--crm-surface,#fff)}.campaign-audit-summary span{display:block;color:var(--crm-muted,#667085);font-size:10px}.campaign-audit-summary strong{display:block;margin-top:3px;font-size:17px}.campaign-audit-summary .ok strong{color:#15803d}.campaign-audit-summary .warn strong{color:#b45309}
.campaign-channel-selector{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}.campaign-channel-selector>div{padding:14px 16px;border:1px solid var(--crm-line,#dce4ef);border-radius:12px;background:var(--crm-surface,#fff)}.campaign-channel-selector .dx-checkbox-text{font-weight:750}.campaign-warning-list{margin-top:14px;padding:10px 14px;border:1px solid #fde68a;border-radius:10px;background:#fffbeb;color:#92400e}.campaign-warning-list p{margin:3px 0;font-size:11px}
.campaign-review-hero{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px;border-radius:14px;background:linear-gradient(135deg,#173f9f,#2d6df6);color:#fff}.campaign-review-hero span{font-size:10px;text-transform:uppercase;letter-spacing:.08em;opacity:.75}.campaign-review-hero h3{margin:3px 0;font-size:22px}.campaign-review-hero p{margin:0;font-size:11px;opacity:.8}.campaign-review-status{padding:8px 11px;border-radius:999px;background:rgba(255,255,255,.16);font-size:11px;font-weight:800}.campaign-review-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0}.campaign-review-grid article{padding:14px;border:1px solid var(--crm-line,#dce4ef);border-radius:12px;background:var(--crm-surface,#fff)}.campaign-review-grid span,.campaign-review-grid small{display:block;color:var(--crm-muted,#667085);font-size:10px}.campaign-review-grid strong{display:block;margin:4px 0 2px;font-size:21px}.campaign-execution-note strong{display:block;font-size:12px}.campaign-execution-note p{margin:4px 0 0;color:var(--crm-muted,#667085);font-size:11px;line-height:1.55}.campaign-prepared-summary{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:12px 0;padding:12px 14px;border:1px solid #a7f3d0;border-radius:10px;background:#ecfdf5;color:#065f46}.campaign-prepared-summary strong{font-size:13px}.campaign-prepared-summary span{font-size:11px}
.campaign-wizard-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 20px;border-top:1px solid var(--crm-line,#e4eaf2);background:var(--crm-soft-surface,#fbfcfe)}#campaign-wizard-message{min-height:18px;color:var(--crm-muted,#667085);font-size:11px}.campaign-footer-actions{display:flex;gap:9px}.campaign-footer-actions .dx-button{min-width:116px!important;min-height:40px!important;border-radius:9px!important}
.campaign-status{display:inline-flex;align-items:center;justify-content:center;min-height:23px;padding:0 8px;border-radius:999px;background:#eef2f7;color:#475467;font-size:10px;font-weight:800;white-space:nowrap}.campaign-status.status-programada{background:#eef4ff;color:#1d4ed8}.campaign-status.status-preparada,.campaign-status.status-en-proceso{background:#ecfdf3;color:#027a48}.campaign-status.status-enviado{background:#ecfdf3;color:#027a48}.campaign-status.status-error{background:#fff1f2;color:#be123c}.campaign-status.status-cancelada,.campaign-status.status-cancelado{background:#f2f4f7;color:#667085}.campaign-status.status-pendiente{background:#fffaeb;color:#b54708}.campaign-row-actions{display:flex;align-items:center;gap:2px}.campaign-row-actions .dx-button{min-height:30px!important}
.campaign-detail{height:100%;padding:0 2px}.campaign-detail-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}.campaign-detail-summary article{min-width:0;padding:11px 12px;border:1px solid var(--crm-line,#dce4ef);border-radius:10px;background:var(--crm-soft-surface,#fafbfd)}.campaign-detail-summary span,.campaign-detail-summary strong{display:block}.campaign-detail-summary span{color:var(--crm-muted,#667085);font-size:10px}.campaign-detail-summary strong{margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.campaign-detail-tabs{height:calc(100% - 82px)}.campaign-detail-tabs>.dx-tabpanel{height:100%}
.home-action-stack{display:flex!important;align-items:stretch!important;gap:10px!important;flex-wrap:wrap}.campaign-home-entry{min-width:260px;display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--crm-line,#d5dfec);border-radius:11px;background:var(--crm-surface,#fff);color:var(--crm-text,#172033);text-decoration:none}.campaign-home-entry:hover{border-color:var(--crm-accent,#245eea);box-shadow:0 8px 22px rgba(36,94,234,.08)}.campaign-home-entry-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:var(--crm-soft,#eef4ff);color:var(--crm-accent,#245eea);font-size:18px}.campaign-home-entry strong,.campaign-home-entry small{display:block}.campaign-home-entry strong{font-size:12px}.campaign-home-entry small{margin-top:2px;color:var(--crm-muted,#667085);font-size:9px}
html[data-theme="dark"] .campaign-app-main{background:#0e1420}html[data-theme="dark"] .campaign-page{color:#edf2f8}html[data-theme="dark"] .campaign-kpis article,html[data-theme="dark"] .campaign-list-card,html[data-theme="dark"] .campaign-wizard,html[data-theme="dark"] .campaign-audit-summary article,html[data-theme="dark"] .campaign-review-grid article,html[data-theme="dark"] .campaign-channel-selector>div{background:#141c29;border-color:#273244}html[data-theme="dark"] .campaign-stepper,html[data-theme="dark"] .campaign-wizard-footer,html[data-theme="dark"] .campaign-content-block,html[data-theme="dark"] .campaign-mapping-card,html[data-theme="dark"] .campaign-channel-editor,html[data-theme="dark"] .campaign-execution-note,html[data-theme="dark"] .campaign-detail-summary article{background:#101824;border-color:#273244}html[data-theme="dark"] .campaign-chat-link,html[data-theme="dark"] .campaign-native-button,html[data-theme="dark"] .campaign-home-entry{background:#141c29;border-color:#334155;color:#e5edf6}html[data-theme="dark"] .campaign-prepared-summary{background:#052e24;border-color:#0f6c52;color:#a7f3d0}html[data-theme="dark"] .campaign-warning-list{background:#3b2f0b;border-color:#7c5f18;color:#fde68a}
@media(max-width:1180px){.campaign-kpis{grid-template-columns:repeat(3,1fr)}.campaign-mapping-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.campaign-app-main{padding:0!important}.campaign-page{padding:18px 12px 26px}.campaign-page-header{align-items:stretch;flex-direction:column}.campaign-header-actions{justify-content:stretch}.campaign-chat-link,#new-campaign-button{flex:1}.campaign-header-actions #new-campaign-button .dx-button{width:100%}.campaign-kpis{grid-template-columns:repeat(2,1fr);gap:8px}.campaign-kpis article{padding:13px}.campaign-kpis strong{font-size:22px}.campaign-section-heading{align-items:flex-start;flex-direction:column}.campaign-source-pill{max-width:100%}.campaign-wizard-backdrop{padding:0}.campaign-wizard{width:100vw;height:100dvh;border:0;border-radius:0}.campaign-wizard-header{padding:12px 14px}.campaign-stepper{padding:0 6px}.campaign-stepper button{min-height:52px;gap:4px}.campaign-stepper button em{font-size:9px}.campaign-stepper button span{width:22px;height:22px}.campaign-wizard-body{padding:14px}.campaign-form-grid,.campaign-mapping-grid,.campaign-channel-selector,.campaign-review-grid{grid-template-columns:1fr}.campaign-span-2{grid-column:auto}.campaign-audience-intro,.campaign-grid-toolbar,.campaign-channel-title{align-items:flex-start;flex-direction:column}.campaign-audience-count{width:100%;text-align:left}.campaign-audit-summary{grid-template-columns:repeat(2,1fr)}.campaign-review-hero{align-items:flex-start;flex-direction:column}.campaign-wizard-footer{padding:10px 12px}.campaign-wizard-footer #campaign-wizard-message{display:none}.campaign-footer-actions{width:100%}.campaign-footer-actions>div{flex:1}.campaign-footer-actions .dx-button{width:100%;min-width:0!important}.campaign-detail-summary{grid-template-columns:repeat(2,1fr)}.home-action-stack{width:100%}.campaign-home-entry{min-width:0;width:100%}}
.campaign-detail-actions{display:flex;justify-content:flex-end;margin:-4px 0 8px}.campaign-detail-actions .dx-button{min-height:34px!important;border-radius:8px!important}

/* ===== Fomplus Chat v132 · Campañas ===== */
.home-action-stack{display:grid!important;grid-template-columns:repeat(2,minmax(190px,1fr))!important;gap:10px!important;width:min(460px,100%)}.home-action-item{min-width:0}.home-action-item .dx-navigation-button-host,.home-action-item .dx-navigation-button-host .dx-button,.home-action-item .dx-navigation-fallback{width:100%!important}.home-action-item .dx-button,.home-action-item .dx-navigation-fallback{min-height:44px!important;border-radius:9px!important}.home-action-item .dx-button-content{min-height:42px!important;display:flex!important;align-items:center!important;justify-content:center!important}.campaign-home-entry{display:none!important}
.campaign-content-heading{align-items:center}.campaign-content-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap}.campaign-content-actions>span{padding:5px 8px;border-radius:999px;background:var(--crm-soft,#eef4ff);color:var(--crm-accent,#245eea);font-size:10px;font-weight:800}.campaign-content-actions .dx-button{min-height:34px!important;border-radius:8px!important}.campaign-content-actions .dx-button-content{padding:5px 10px!important}.campaign-mapping-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.campaign-footer-actions{display:grid!important;grid-template-columns:repeat(2,minmax(145px,1fr));gap:9px;width:min(320px,100%)}.campaign-footer-actions>div{min-width:0}.campaign-footer-actions .dx-button{width:100%!important;min-width:0!important;min-height:42px!important;border-radius:9px!important}.campaign-footer-actions .dx-button-content{min-height:40px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;padding:7px 13px!important}
.campaign-progress-panel{margin:12px 0 16px;padding:14px;border:1px solid var(--crm-line,#dce4ef);border-radius:12px;background:var(--crm-surface,#fff)}.campaign-progress-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:10px}.campaign-progress-heading strong{font-size:13px}.campaign-progress-heading span{display:block;margin-top:2px;color:var(--crm-muted,#667085);font-size:10px}.campaign-progress-heading>strong{color:var(--crm-accent,#245eea);font-size:18px}.campaign-progress-panel .dx-progressbar{height:9px}.campaign-progress-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin-top:11px}.campaign-progress-stats span{padding:7px 8px;border-radius:8px;background:var(--crm-soft-surface,#f7f9fc);color:var(--crm-muted,#667085);font-size:10px;text-align:center}.campaign-progress-stats b{display:block;margin-top:2px;color:var(--crm-text,#172033);font-size:14px}.campaign-detail-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0 12px;padding:9px 12px;border:1px solid var(--crm-line,#dce4ef);border-radius:9px;background:var(--crm-soft-surface,#f7f9fc)}.campaign-detail-meta span{color:var(--crm-muted,#667085);font-size:10px}.campaign-detail-meta strong{font-size:11px}
.campaign-ai-assistant{padding:3px 2px 5px}.campaign-ai-intro{margin-bottom:14px}.campaign-ai-badge{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;background:var(--crm-soft,#eef4ff);color:var(--crm-accent,#245eea);font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.campaign-ai-intro h3{margin:8px 0 4px;font-size:18px}.campaign-ai-intro p{margin:0;color:var(--crm-muted,#667085);font-size:11px;line-height:1.5}.campaign-ai-hint{margin-top:9px;padding:9px 10px;border-radius:8px;background:var(--crm-soft-surface,#f7f9fc);color:var(--crm-muted,#667085);font-size:10px;line-height:1.45}.campaign-ai-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:15px}.campaign-ai-actions .dx-button{min-width:120px!important;min-height:40px!important}
html[data-theme="dark"] .campaign-progress-panel{background:#141c29;border-color:#273244}html[data-theme="dark"] .campaign-progress-stats span,html[data-theme="dark"] .campaign-detail-meta,html[data-theme="dark"] .campaign-ai-hint{background:#101824;border-color:#273244}html[data-theme="dark"] .campaign-progress-stats b,html[data-theme="dark"] .campaign-detail-meta strong{color:#edf2f8}
@media(max-width:760px){.home-action-stack{grid-template-columns:1fr!important;width:100%}.campaign-content-heading{align-items:flex-start;flex-direction:column}.campaign-content-actions{width:100%;justify-content:space-between}.campaign-content-actions>div{flex:1}.campaign-content-actions .dx-button{width:100%}.campaign-mapping-grid{grid-template-columns:1fr!important}.campaign-footer-actions{width:100%;grid-template-columns:repeat(2,minmax(0,1fr))}.campaign-progress-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.campaign-progress-stats span:last-child{grid-column:span 2}.campaign-ai-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.campaign-ai-actions>div,.campaign-ai-actions .dx-button{width:100%!important;min-width:0!important}}

/* v132 - plantilla WhatsApp única: revisión no editable en paso 3 */
.campaign-template-review{min-height:42px;display:flex;align-items:center;padding:9px 12px;border:1px solid var(--border-color,#d7dee8);border-radius:8px;background:color-mix(in srgb,var(--surface,#fff) 92%,var(--primary,#2f6fed) 8%);color:var(--text-primary,#1f2937);font-weight:600;word-break:break-word}
[data-theme="dark"] .campaign-template-review{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.14);color:#eef4ff}

/* ========================================================================== */
/* Fomplus Chat v134 · Campañas en landing dedicado                          */
/* Evita overlays DevExtreme anidados dentro de un modal padre.               */
/* ========================================================================== */
.campaign-builder-page{max-width:1500px;margin:0 auto;padding-bottom:56px}
.campaign-builder-page-header{align-items:center;margin-bottom:16px}
.campaign-builder-shell{width:100%;height:auto;min-height:720px;display:grid;grid-template-rows:auto auto auto auto;overflow:visible;border:1px solid var(--crm-line,#dce4ef);border-radius:16px;background:var(--crm-surface,#fff);box-shadow:0 12px 34px rgba(16,24,40,.06)}
.campaign-builder-page .campaign-wizard-header{border-radius:16px 16px 0 0;background:var(--crm-surface,#fff)}
.campaign-builder-page .campaign-wizard-body{min-height:530px;overflow:visible;padding:24px}
.campaign-builder-page .campaign-wizard-footer{position:sticky;bottom:0;z-index:30;border-radius:0 0 16px 16px;background:color-mix(in srgb,var(--crm-surface,#fff) 94%,transparent);backdrop-filter:blur(10px)}
.campaign-builder-page .campaign-builder-close{min-width:120px;align-self:flex-start}
.campaign-builder-page #campaign-source-grid{overflow:hidden}
.campaign-builder-page .campaign-html-editor{overflow:visible}

/* Los overlays críticos se adjuntan a document.body desde campanas.js. */
.dx-overlay-wrapper.campaign-select-overlay,.dx-overlay-wrapper.campaign-date-overlay{z-index:5100!important}
.dx-overlay-wrapper.campaign-filter-builder-overlay{z-index:5200!important}
.dx-overlay-wrapper.campaign-ai-overlay{z-index:5300!important}
.dx-overlay-wrapper.campaign-detail-overlay{z-index:5000!important}
.dx-overlay-wrapper.campaign-select-overlay .dx-overlay-content,.dx-overlay-wrapper.campaign-date-overlay .dx-overlay-content,.dx-overlay-wrapper.campaign-filter-builder-overlay .dx-overlay-content,.dx-overlay-wrapper.campaign-ai-overlay .dx-overlay-content{box-shadow:0 18px 48px rgba(15,23,42,.22)}

html[data-theme="dark"] .campaign-builder-shell,html[data-theme="dark"] .campaign-builder-page .campaign-wizard-header{background:#141c29;border-color:#273244}
html[data-theme="dark"] .campaign-builder-page .campaign-wizard-footer{background:rgba(16,24,36,.94);border-color:#273244}

@media(max-width:760px){
    .campaign-builder-page{padding:14px 10px 26px}
    .campaign-builder-page-header{margin-bottom:10px}
    .campaign-builder-page .campaign-wizard{width:100%;height:auto;min-height:0;border:1px solid var(--crm-line,#dce4ef);border-radius:14px}
    .campaign-builder-page .campaign-wizard-header{padding:13px 14px;border-radius:14px 14px 0 0;align-items:flex-start}
    .campaign-builder-page .campaign-builder-close{min-width:0;padding:0 10px;white-space:nowrap}
    .campaign-builder-page .campaign-stepper{position:sticky;top:0;z-index:25;padding:0 4px}
    .campaign-builder-page .campaign-wizard-body{min-height:0;overflow:visible;padding:14px 12px 18px}
    .campaign-builder-page .campaign-wizard-footer{border-radius:0 0 14px 14px;padding-bottom:max(10px,env(safe-area-inset-bottom))}
    .campaign-builder-page #campaign-source-grid{min-height:430px}
}
@media(max-width:480px){
    .campaign-builder-page .campaign-wizard-header{gap:8px}
    .campaign-builder-page .campaign-builder-close{font-size:10px}
    .campaign-builder-page .campaign-stepper button em{font-size:8px}
}

/* ========================================================================== */
/* Fomplus Chat v135 · Correo real + overlays IA + audiencia responsive       */
/* ========================================================================== */
.campaign-builder-page,.campaign-builder-shell,.campaign-builder-page .campaign-wizard-body,.campaign-builder-page .campaign-step,.campaign-builder-page .campaign-content-block,.campaign-builder-page .campaign-channel-editor,.campaign-builder-page .campaign-mapping-card,.campaign-builder-page .campaign-grid-toolbar{min-width:0;max-width:100%;box-sizing:border-box}
.campaign-builder-page{overflow-x:clip}
.campaign-builder-page .campaign-step.is-active{width:100%;min-width:0}

/* El HTML del correo se conserva íntegro: preview aislado + código editable. */
.campaign-email-workspace{width:100%;min-width:0;border:1px solid var(--crm-line,#dce4ef);border-radius:12px;background:var(--crm-surface,#fff);overflow:hidden}
.campaign-email-tabs{min-height:44px;display:flex;align-items:center;gap:4px;padding:5px 7px;border-bottom:1px solid var(--crm-line,#dce4ef);background:var(--crm-soft-surface,#f7f9fc)}
.campaign-email-tab{min-height:32px;padding:0 11px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--crm-muted,#667085);font:inherit;font-size:11px;font-weight:750;cursor:pointer}
.campaign-email-tab:hover{color:var(--crm-text,#172033);background:var(--crm-surface,#fff)}
.campaign-email-tab.is-active{border-color:var(--crm-line,#d5dfec);background:var(--crm-surface,#fff);color:var(--crm-accent,#245eea);box-shadow:0 1px 3px rgba(16,24,40,.06)}
.campaign-email-source-note{margin-left:auto;padding-right:6px;color:var(--crm-muted,#667085);font-size:10px;white-space:nowrap}
.campaign-email-pane{width:100%;min-width:0;background:#fff}
.campaign-email-pane[hidden]{display:none!important}
.campaign-email-preview{display:block;width:100%;height:390px;border:0;background:#fff}
.campaign-email-preview.compact{height:340px}
.campaign-email-source{width:100%;min-width:0}
.campaign-email-source.dx-textarea{border:0!important;border-radius:0!important;background:var(--crm-surface,#fff)!important}
.campaign-email-source .dx-texteditor-input{padding:13px!important;font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace!important;font-size:12px!important;line-height:1.48!important;white-space:pre!important;overflow:auto!important;overflow-wrap:normal!important;tab-size:2}
.campaign-email-source .dx-texteditor-container{overflow:hidden}

/* Los avisos de campaña deben quedar por encima de IA, selectores y filtros. */
.dx-overlay-wrapper.campaign-toast-overlay{z-index:6500!important}
.dx-overlay-wrapper.campaign-toast-overlay .dx-toast-content{box-shadow:0 18px 52px rgba(15,23,42,.28);border-radius:10px}
.campaign-ai-status{margin-top:10px;padding:10px 12px;border:1px solid var(--crm-line,#dce4ef);border-radius:9px;background:var(--crm-soft-surface,#f7f9fc);color:var(--crm-text,#172033);font-size:11px;line-height:1.45;word-break:break-word}
.campaign-ai-status[hidden]{display:none!important}
.campaign-ai-status[data-type="info"]{border-color:#bfdbfe;background:#eff6ff;color:#1e40af}
.campaign-ai-status[data-type="success"]{border-color:#bbf7d0;background:#f0fdf4;color:#166534}
.campaign-ai-status[data-type="warning"]{border-color:#fde68a;background:#fffbeb;color:#92400e}
.campaign-ai-status[data-type="error"]{border-color:#fecaca;background:#fff1f2;color:#9f1239}

/* El grid puede tener decenas de columnas, pero nunca agranda la página. */
.campaign-builder-page #campaign-source-grid{width:100%!important;max-width:100%!important;min-width:0!important;overflow:hidden!important;contain:inline-size}
.campaign-builder-page #campaign-source-grid>.dx-widget,.campaign-builder-page #campaign-source-grid .dx-datagrid,.campaign-builder-page #campaign-source-grid .dx-datagrid-container,.campaign-builder-page #campaign-source-grid .dx-scrollable-wrapper,.campaign-builder-page #campaign-source-grid .dx-scrollable-container{width:100%!important;max-width:100%!important;min-width:0!important}
.campaign-builder-page #campaign-source-grid .dx-datagrid-headers,.campaign-builder-page #campaign-source-grid .dx-datagrid-rowsview,.campaign-builder-page #campaign-source-grid .dx-datagrid-total-footer{max-width:100%!important}
.campaign-builder-page .campaign-grid-toolbar{flex-wrap:wrap}
.campaign-builder-page .campaign-grid-toolbar>div:first-child{min-width:0;flex:1 1 280px}
.campaign-builder-page .campaign-grid-toolbar .campaign-native-button{flex:0 0 auto}

html[data-theme="dark"] .campaign-email-workspace,html[data-theme="dark"] .campaign-email-tabs,html[data-theme="dark"] .campaign-email-source.dx-textarea{background:#101824!important;border-color:#273244!important}
html[data-theme="dark"] .campaign-email-tab.is-active{background:#182235;border-color:#334155;color:#8db3ff}
html[data-theme="dark"] .campaign-email-tab:hover{background:#182235;color:#edf2f8}
html[data-theme="dark"] .campaign-ai-status{border-color:#334155;background:#101824;color:#e2e8f0}
html[data-theme="dark"] .campaign-ai-status[data-type="info"]{border-color:#1d4ed8;background:#172554;color:#bfdbfe}
html[data-theme="dark"] .campaign-ai-status[data-type="success"]{border-color:#166534;background:#052e16;color:#bbf7d0}
html[data-theme="dark"] .campaign-ai-status[data-type="warning"]{border-color:#92400e;background:#451a03;color:#fde68a}
html[data-theme="dark"] .campaign-ai-status[data-type="error"]{border-color:#991b1b;background:#450a0a;color:#fecaca}

@media(max-width:1100px){
    .campaign-builder-page{padding-left:14px;padding-right:14px}
    .campaign-builder-page .campaign-mapping-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
    .campaign-builder-page .campaign-mapping-grid .campaign-field:last-child{grid-column:1/-1}
    .campaign-builder-page .campaign-audit-summary{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:760px){
    .campaign-builder-page{overflow-x:hidden!important;padding-left:8px;padding-right:8px}
    .campaign-builder-shell{overflow-x:hidden!important}
    .campaign-builder-page .campaign-wizard-header{flex-direction:column}
    .campaign-builder-page .campaign-builder-close{width:100%;min-height:38px}
    .campaign-builder-page .campaign-stepper{display:flex!important;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;overscroll-behavior-x:contain;justify-content:flex-start}
    .campaign-builder-page .campaign-stepper button{flex:0 0 128px;min-width:128px;padding:0 7px}
    .campaign-builder-page .campaign-wizard-body{width:100%;min-width:0;padding:12px 9px 16px}
    .campaign-builder-page .campaign-content-block,.campaign-builder-page .campaign-channel-editor,.campaign-builder-page .campaign-mapping-card{padding:12px;margin-top:12px}
    .campaign-builder-page .campaign-mapping-grid{grid-template-columns:1fr!important}
    .campaign-builder-page .campaign-mapping-grid .campaign-field:last-child{grid-column:auto}
    .campaign-builder-page .campaign-audit-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
    .campaign-email-tabs{align-items:stretch;flex-wrap:wrap}
    .campaign-email-tab{flex:1 1 120px}
    .campaign-email-source-note{width:100%;margin:1px 3px 3px;padding:0;text-align:center;white-space:normal}
    .campaign-email-preview,.campaign-email-preview.compact{height:320px}
    .campaign-builder-page #campaign-source-grid{border-radius:9px}
    .campaign-builder-page #campaign-source-grid .dx-toolbar{max-width:100%;overflow:hidden}
    .campaign-builder-page #campaign-source-grid .dx-toolbar-items-container{min-width:0}
    .campaign-builder-page #campaign-source-grid .dx-datagrid-search-panel{max-width:180px!important;margin-left:0!important}
    .campaign-builder-page .campaign-grid-toolbar{align-items:stretch}
    .campaign-builder-page .campaign-grid-toolbar .campaign-native-button{width:100%;min-height:38px}
}
@media(max-width:480px){
    .campaign-builder-page .campaign-audit-summary{grid-template-columns:1fr 1fr}
    .campaign-email-preview,.campaign-email-preview.compact{height:290px}
    .campaign-ai-overlay .dx-popup-content{padding:12px!important}
}

/* ========================================================================== */
/* Fomplus Chat v136 · overlays seguros + edición de audiencia                */
/* ========================================================================== */
/* Cualquier overlay DevExtreme abierto desde Campañas se eleva sobre grids y
   popups. Las clases específicas conservan una jerarquía determinista. */
body:has([data-campaign-page]) > .dx-overlay-wrapper{z-index:15800!important}
body:has([data-campaign-page]) > .dx-overlay-wrapper.campaign-detail-overlay{z-index:12000!important}
body:has([data-campaign-page]) > .dx-overlay-wrapper.campaign-select-overlay,body:has([data-campaign-page]) > .dx-overlay-wrapper.campaign-date-overlay{z-index:15200!important}
body:has([data-campaign-page]) > .dx-overlay-wrapper.campaign-filter-builder-overlay{z-index:15400!important}
body:has([data-campaign-page]) > .dx-overlay-wrapper:has(.dx-datagrid-column-chooser),
body:has([data-campaign-page]) > .dx-overlay-wrapper:has([class*="column-chooser"]){z-index:15600!important}
body:has([data-campaign-page]) > .dx-overlay-wrapper.campaign-ai-overlay{z-index:16000!important}
body:has([data-campaign-page]) > .dx-overlay-wrapper.campaign-confirm-overlay{z-index:17000!important}
body:has([data-campaign-page]) > .dx-overlay-wrapper.campaign-toast-overlay{z-index:18000!important}

html.campaign-ai-locked{overflow:hidden}
.dx-overlay-wrapper.campaign-ai-overlay .dx-overlay-shader,.dx-overlay-wrapper.campaign-confirm-overlay .dx-overlay-shader{pointer-events:auto!important}
.campaign-ai-overlay .dx-popup-content{max-height:calc(88vh - 54px);overflow:auto}
.campaign-ai-overlay .campaign-ai-actions{position:sticky;bottom:-1px;z-index:2;margin:14px -2px -2px;padding:12px 2px 2px;background:var(--crm-surface,#fff)}
html[data-theme="dark"] .campaign-ai-overlay .campaign-ai-actions{background:#141c29}

.campaign-confirm-content{padding:2px 2px 0}.campaign-confirm-content p{margin:0;color:var(--crm-text,#172033);font-size:13px;line-height:1.55}.campaign-confirm-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}.campaign-confirm-actions>.dx-widget{min-width:128px}
html[data-theme="dark"] .campaign-confirm-content p{color:#edf2f8}

.campaign-review-audience-block{min-width:0;margin-top:18px;padding:14px;border:1px solid var(--crm-line,#dce4ef);border-radius:12px;background:var(--crm-surface,#fff)}
#campaign-review-audience-grid{width:100%!important;max-width:100%!important;min-width:0!important;overflow:hidden}
#campaign-review-audience-grid .dx-datagrid,#campaign-review-audience-grid .dx-datagrid-container,#campaign-review-audience-grid .dx-scrollable-wrapper,#campaign-review-audience-grid .dx-scrollable-container{max-width:100%!important;min-width:0!important}
html[data-theme="dark"] .campaign-review-audience-block{background:#141c29;border-color:#273244}

/* La selección de columnas usa modo select y puede llegar a 500px; en móvil
   se limita al viewport y no puede ensanchar la página. */
body:has([data-campaign-page]) .dx-datagrid-column-chooser,
body:has([data-campaign-page]) [class*="column-chooser"]{max-width:calc(100vw - 20px)!important}

@media(max-width:760px){
    .campaign-review-audience-block{margin-top:12px;padding:10px;border-radius:10px}
    #campaign-review-audience-grid{min-height:330px}
    .campaign-confirm-actions{display:grid;grid-template-columns:1fr 1fr}.campaign-confirm-actions>.dx-widget{min-width:0;width:100%}
    body:has([data-campaign-page]) > .dx-overlay-wrapper:has(.dx-datagrid-column-chooser) .dx-overlay-content,
    body:has([data-campaign-page]) > .dx-overlay-wrapper:has([class*="column-chooser"]) .dx-overlay-content{max-width:calc(100vw - 16px)!important;max-height:calc(100dvh - 24px)!important}
}
@media(max-width:480px){.campaign-confirm-actions{grid-template-columns:1fr}.campaign-confirm-actions>.dx-widget{width:100%}}

/* Fomplus_Chat v137 - footer del wizard: texto completo y acciones simétricas */
.campaign-builder-page .campaign-footer-actions{width:min(430px,100%)!important;grid-template-columns:repeat(2,minmax(190px,1fr))!important}
.campaign-builder-page #campaign-next-button .dx-button-text,.campaign-builder-page #campaign-prev-button .dx-button-text{white-space:nowrap!important;overflow:visible!important;text-overflow:clip!important;line-height:1.25!important}
.campaign-builder-page .campaign-footer-actions .dx-button-content{padding-left:14px!important;padding-right:14px!important}
@media(max-width:520px){.campaign-builder-page .campaign-footer-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important}.campaign-builder-page #campaign-next-button .dx-icon{display:none!important}}
@media(max-width:390px){.campaign-builder-page .campaign-footer-actions{grid-template-columns:1fr!important}.campaign-builder-page #campaign-next-button .dx-icon{display:inline-flex!important}}

/* Fomplus_Chat v138 · Zona horaria + ayuda contextual de campañas */
.campaign-wizard-header-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:flex-end}
.campaign-schedule-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.campaign-span-3{grid-column:1/-1}
.campaign-field-label,.campaign-heading-with-help{display:flex;align-items:center;gap:7px;min-width:0}.campaign-field-label{margin:0 0 7px}.campaign-field-label label{margin:0}.campaign-heading-with-help h3,.campaign-heading-with-help h4,.campaign-heading-with-help strong,.campaign-heading-with-help span{min-width:0}
.campaign-context-help{display:inline-grid;place-items:center;flex:0 0 auto;width:20px;height:20px;padding:0;border:1px solid var(--crm-line,#ccd7e5);border-radius:50%;background:var(--crm-surface,#fff);color:var(--crm-accent,#245eea);font:800 11px/1 Arial,Helvetica,sans-serif;cursor:pointer;transition:border-color .15s ease,background .15s ease,transform .15s ease}.campaign-context-help:hover{border-color:var(--crm-accent,#245eea);background:var(--crm-soft,#eef4ff);transform:translateY(-1px)}.campaign-context-help:focus-visible{outline:2px solid var(--crm-accent,#245eea);outline-offset:2px}
.campaign-help-content{padding:2px 4px 8px;color:var(--crm-text,#172033);font-size:13px;line-height:1.55}.campaign-help-content p{margin:0 0 12px}.campaign-help-content ol,.campaign-help-content ul{margin:0 0 12px;padding-left:22px}.campaign-help-content li+li{margin-top:6px}.campaign-help-content strong{font-weight:800}
.campaign-help-overlay{z-index:19050!important}
html[data-theme="dark"] .campaign-context-help{background:#141c29;border-color:#334155;color:#8db4ff}html[data-theme="dark"] .campaign-context-help:hover{background:#1c2b43;border-color:#5b8def}html[data-theme="dark"] .campaign-help-content{color:#e5edf6}
@media(max-width:980px){.campaign-schedule-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.campaign-schedule-grid .campaign-span-3{grid-column:1/-1}.campaign-schedule-grid .campaign-field:last-child{grid-column:1/-1}}
@media(max-width:760px){.campaign-wizard-header-actions{width:100%;justify-content:stretch}.campaign-wizard-header-actions>div,.campaign-wizard-header-actions .campaign-builder-close{flex:1}.campaign-schedule-grid{grid-template-columns:1fr}.campaign-schedule-grid .campaign-span-3,.campaign-schedule-grid .campaign-field:last-child{grid-column:auto}.campaign-context-help{width:24px;height:24px;font-size:12px}.campaign-help-content{font-size:13px}}
body:has([data-campaign-page]) > .campaign-help-overlay{z-index:19050!important}
@media(max-width:760px){.campaign-header-actions{flex-wrap:wrap}.campaign-header-actions #campaign-help-panel-button{flex:0 0 auto}.campaign-header-actions #campaign-help-panel-button+ #new-campaign-button{min-width:150px}}

/* v140 · Configuración WhatsApp de campañas */
.campaign-whatsapp-config-grid{align-items:start}
.campaign-field-hint{display:block;margin-top:6px;color:var(--crm-muted,#667085);font-size:11px;line-height:1.45}
.campaign-wa-advisor-option{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;align-items:center;padding:4px 1px;min-width:0}
.campaign-wa-advisor-option strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--crm-text,#172033);font-size:12px}
.campaign-wa-advisor-option span{grid-column:1;color:var(--crm-muted,#667085);font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.campaign-wa-advisor-option em{grid-column:2;grid-row:1 / span 2;align-self:center;padding:3px 7px;border-radius:999px;font-size:9px;font-style:normal;font-weight:800;white-space:nowrap}
.campaign-wa-advisor-option em.ok{background:#e8f8ef;color:#127a43}.campaign-wa-advisor-option em.blocked{background:#fff1f2;color:#b42318}
.campaign-review-wa-advisor{margin:8px 0 0;padding-top:8px;border-top:1px solid var(--crm-line,#dce4ef);font-size:11px;color:var(--crm-muted,#667085)}
html[data-theme="dark"] .campaign-wa-advisor-option strong{color:#edf2f8}html[data-theme="dark"] .campaign-wa-advisor-option em.ok{background:#073b2a;color:#9ee7c2}html[data-theme="dark"] .campaign-wa-advisor-option em.blocked{background:#4a161b;color:#fecaca}
@media(max-width:760px){.campaign-whatsapp-config-grid{grid-template-columns:1fr!important}}
/* v140 · El selector 20/40/60/80 se oculta en todas las grillas de Campañas. */
.campaign-page .dx-datagrid .dx-pager .dx-page-sizes,.campaign-page .dx-datagrid .dx-pager .dx-page-size{display:none!important}

/* v143 - acciones individuales de envíos en detalle de campaña */
body:has([data-campaign-page]) > .dx-overlay-wrapper.campaign-row-options-overlay{z-index:16500!important}
body:has([data-campaign-page]) > .dx-overlay-wrapper.campaign-sending-detail-overlay{z-index:16600!important}
.campaign-sending-detail{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;padding:4px 2px 8px}
.campaign-sending-detail-row{min-width:0;padding:10px 12px;border:1px solid var(--crm-line,#dce4ef);border-radius:10px;background:var(--crm-soft-surface,#fafbfd)}
.campaign-sending-detail-row span,.campaign-sending-detail-row strong{display:block}.campaign-sending-detail-row span{margin-bottom:4px;color:var(--crm-muted,#667085);font-size:11px;font-weight:700}.campaign-sending-detail-row strong{overflow-wrap:anywhere;color:var(--crm-text,#101828);font-size:13px;line-height:1.4}
.campaign-row-actions .dx-dropdownbutton{min-width:104px}.campaign-row-actions .dx-button{min-height:32px!important}
@media(max-width:600px){.campaign-sending-detail{grid-template-columns:1fr}.campaign-row-actions .dx-dropdownbutton{min-width:96px}}

/* v144 - Columna Opciones de envíos: texto y control completos */
.campaign-options-column .dx-datagrid-text-content{white-space:nowrap!important;overflow:visible!important;text-overflow:clip!important}
.campaign-options-column{min-width:180px!important}
.campaign-options-column .campaign-row-actions{display:flex;justify-content:center;min-width:138px}
.campaign-options-column .campaign-row-actions .dx-dropdownbutton{width:138px!important;min-width:138px!important}

/* v146 - textos largos de errores/respuestas en detalle e histórico de campañas */
.campaign-sending-detail-row strong{white-space:pre-wrap!important;overflow-wrap:anywhere!important;word-break:break-word!important;max-width:100%;}
.campaign-history-longtext{white-space:normal!important;overflow-wrap:anywhere!important;word-break:break-word!important;line-height:1.45!important;}
.campaign-history-adaptive-form .dx-field-item,.campaign-detail .dx-adaptive-detail-row .dx-field-item{min-width:0!important;width:100%!important;}
.campaign-history-adaptive-form .dx-field-item-content,.campaign-detail .dx-adaptive-detail-row .dx-field-item-content{white-space:pre-wrap!important;overflow-wrap:anywhere!important;word-break:break-word!important;max-width:100%!important;line-height:1.5!important;}
.campaign-history-adaptive-form .dx-field-item-label,.campaign-detail .dx-adaptive-detail-row .dx-field-item-label{font-weight:700!important;margin-bottom:4px!important;}
.campaign-detail .dx-adaptive-detail-row td{white-space:normal!important;max-width:100%;}
.campaign-detail .dx-adaptive-detail-row .dx-form{width:100%!important;max-width:100%!important;}
@media(max-width:760px){.campaign-history-adaptive-form .dx-field-item-content,.campaign-detail .dx-adaptive-detail-row .dx-field-item-content{font-size:12px!important;}.campaign-sending-detail-row strong{font-size:12px!important;}}

/* v147 · origen PBI seleccionable + mapeo de placeholders */
.campaign-source-selector-card{display:grid;grid-template-columns:minmax(0,1fr);gap:0}.campaign-source-selector-card .campaign-field{max-width:680px}.campaign-placeholder-standard{margin:0 0 10px}.campaign-placeholder-standard-list{display:flex;flex-wrap:wrap;gap:7px}.campaign-placeholder-standard-list span{display:inline-flex;align-items:center;min-height:30px;padding:5px 9px;border:1px solid var(--crm-line,#dce4ef);border-radius:999px;background:var(--crm-surface,#fff);color:var(--crm-text,#172033);font-size:11px;font-weight:700}.campaign-placeholder-mappings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px}.campaign-placeholder-row{display:grid;grid-template-columns:minmax(105px,.55fr) minmax(180px,1.45fr);align-items:center;gap:10px;min-width:0}.campaign-placeholder-row>label{overflow-wrap:anywhere;color:var(--crm-text,#172033);font-size:12px;font-weight:750}.campaign-placeholder-ok{margin:0!important;padding:9px 11px;border-radius:8px;background:rgba(22,163,74,.08);color:#15803d!important;font-size:11px!important}html[data-theme="dark"] .campaign-placeholder-standard-list span{background:#141c29;border-color:#334155;color:#e5edf6}html[data-theme="dark"] .campaign-placeholder-row>label{color:#e5edf6}html[data-theme="dark"] .campaign-placeholder-ok{background:rgba(34,197,94,.12);color:#86efac!important}
@media(max-width:760px){.campaign-placeholder-mappings{grid-template-columns:1fr}.campaign-placeholder-row{grid-template-columns:1fr;gap:5px}.campaign-source-selector-card .campaign-field{max-width:none}}

/* Fomplus_Chat v148 · consistencia DevExtreme + contraste oscuro + lenguaje de usuario */
:root{--crm-surface:var(--crm-panel);--crm-soft-surface:var(--crm-panel-muted);--crm-line:var(--crm-border);--crm-soft:var(--crm-active)}
.campaign-header-actions>div,.campaign-wizard-header-actions>div{display:flex;align-items:stretch}
.campaign-header-actions>div>.dx-button,.campaign-wizard-header-actions>div>.dx-button{min-height:42px!important;height:42px!important}
.campaign-wizard-header-actions #campaign-help-general-button,.campaign-wizard-header-actions #campaign-wizard-close{flex:0 0 144px;min-width:144px}
.campaign-wizard-header-actions #campaign-help-general-button>.dx-button,.campaign-wizard-header-actions #campaign-wizard-close>.dx-button{width:100%!important;height:42px!important;min-height:42px!important}
.campaign-wizard-header-actions .dx-button-content,.campaign-header-actions .dx-button-content{height:100%!important;display:flex!important;align-items:center!important;justify-content:center!important;padding-top:0!important;padding-bottom:0!important}
.campaign-wizard-header-actions .dx-button-text,.campaign-header-actions .dx-button-text{line-height:1.25!important}
html[data-theme="dark"] body>.dx-overlay-wrapper.campaign-sending-detail-overlay .dx-popup-normal{background:#0f1724!important;border-color:#334155!important;color:#f8fafc!important}
html[data-theme="dark"] body>.dx-overlay-wrapper.campaign-sending-detail-overlay .dx-popup-title{background:#111827!important;border-bottom-color:#334155!important;color:#f8fafc!important}
html[data-theme="dark"] body>.dx-overlay-wrapper.campaign-sending-detail-overlay .dx-popup-title .dx-toolbar-label,html[data-theme="dark"] body>.dx-overlay-wrapper.campaign-sending-detail-overlay .dx-popup-title .dx-toolbar-label>div{color:#f8fafc!important}
html[data-theme="dark"] body>.dx-overlay-wrapper.campaign-sending-detail-overlay .dx-popup-content{background:#0f1724!important;color:#f8fafc!important}
html[data-theme="dark"] body>.dx-overlay-wrapper.campaign-sending-detail-overlay .campaign-sending-detail-row{background:#141c29!important;border-color:#334155!important;color:#f8fafc!important}
html[data-theme="dark"] body>.dx-overlay-wrapper.campaign-sending-detail-overlay .campaign-sending-detail-row span{color:#aebbd0!important}
html[data-theme="dark"] body>.dx-overlay-wrapper.campaign-sending-detail-overlay .campaign-sending-detail-row strong{color:#f8fafc!important}
html[data-theme="dark"] .campaign-detail .dx-adaptive-detail-row,html[data-theme="dark"] .campaign-detail .dx-adaptive-detail-row td,html[data-theme="dark"] .campaign-detail .dx-adaptive-detail-row .dx-form,html[data-theme="dark"] .campaign-detail .dx-adaptive-detail-row .dx-field-item-content{background:#111827!important;color:#f8fafc!important}
html[data-theme="dark"] .campaign-detail .dx-adaptive-detail-row .dx-field-item-label,html[data-theme="dark"] .campaign-detail .dx-adaptive-detail-row .dx-field-item-label-text{color:#aebbd0!important}
html[data-theme="dark"] .campaign-detail .dx-adaptive-detail-row .dx-field-item-content{border-color:#334155!important}
html[data-theme="dark"] .campaign-history-longtext{color:#f8fafc!important}
@media(max-width:760px){.campaign-wizard-header-actions #campaign-help-general-button,.campaign-wizard-header-actions #campaign-wizard-close{flex:1 1 0;min-width:0}.campaign-header-actions>div{flex:1 1 150px}.campaign-header-actions>div>.dx-button{width:100%!important}}
@media(max-width:390px){.campaign-wizard-header-actions{display:grid!important;grid-template-columns:1fr!important}.campaign-wizard-header-actions #campaign-help-general-button,.campaign-wizard-header-actions #campaign-wizard-close{width:100%!important}}

/* v149 - Notas de voz: grabación, previsualización y reproducción inline. */
.chat-app-main .voice-record-button {
    flex: 0 0 auto;
    width: 40px;
    min-width: 40px;
    height: 40px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--crm-muted);
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color .14s ease, color .14s ease, transform .14s ease;
}

.chat-app-main .voice-record-button:hover:not(:disabled),
.chat-app-main .voice-record-button:focus-visible:not(:disabled) {
    background: var(--crm-hover);
    color: var(--crm-text);
    outline: 0;
}

.chat-app-main .voice-record-button:active:not(:disabled) {
    transform: scale(.96);
}

.chat-app-main .voice-record-button:disabled {
    cursor: not-allowed;
    opacity: .45;
}

.chat-app-main .voice-recorder-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 8px;
    padding: 10px 12px;
    border: 1px solid rgba(239, 68, 68, .24);
    border-radius: 14px;
    background: var(--crm-panel);
    background: color-mix(in srgb, var(--crm-panel) 92%, #ef4444 8%);
    color: var(--crm-text);
}

.chat-app-main .voice-recorder-panel[hidden] {
    display: none !important;
}

.chat-app-main .voice-recorder-main {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.chat-app-main .voice-recorder-dot {
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #dc2626;
    box-shadow: 0 0 0 0 rgba(220, 38, 38, .45);
    animation: fomplusVoicePulse 1.35s infinite;
}

@keyframes fomplusVoicePulse {
    0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .42); }
    70% { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }
    100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}

.chat-app-main .voice-recorder-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.chat-app-main .voice-recorder-copy strong {
    font-size: .86rem;
    line-height: 1.2;
}

.chat-app-main .voice-recorder-copy span {
    color: var(--crm-muted);
    font-size: .74rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-app-main .voice-recorder-time {
    min-width: 46px;
    font-variant-numeric: tabular-nums;
    font-size: .9rem;
    font-weight: 800;
    color: #dc2626;
}

.chat-app-main .voice-recorder-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.chat-app-main .voice-recorder-cancel,
.chat-app-main .voice-recorder-stop {
    min-height: 36px;
    padding: 0 12px;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
}

.chat-app-main .voice-recorder-cancel {
    border: 1px solid var(--crm-border);
    background: transparent;
    color: var(--crm-text);
}

.chat-app-main .voice-recorder-stop {
    border: 1px solid #dc2626;
    background: #dc2626;
    color: #fff;
}

.chat-app-main .pending-attachment-item:has(.pending-voice-preview) {
    flex-wrap: wrap;
}

.chat-app-main .pending-voice-preview {
    width: min(100%, 360px);
    height: 36px;
    margin-left: 42px;
    accent-color: var(--primary);
}

.chat-app-main .voice-message-card {
    grid-template-columns: 42px minmax(0, 1fr);
    width: min(100%, 360px);
    cursor: default;
    padding: 9px 10px;
}

.chat-app-main .voice-message-card:hover:not(:disabled) {
    transform: none;
}

.chat-app-main .voice-message-play {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: .9rem;
    box-shadow: 0 3px 8px rgba(37, 99, 235, .2);
}

.chat-app-main .voice-message-play:disabled {
    cursor: wait;
    opacity: .6;
}

.chat-app-main .voice-message-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.chat-app-main .voice-message-body strong {
    font-size: .84rem;
    line-height: 1.2;
    color: var(--crm-text);
}

.chat-app-main .voice-message-status {
    font-size: .73rem;
    line-height: 1.2;
    color: var(--crm-muted);
}

.chat-app-main .voice-message-audio {
    width: 100%;
    min-width: 0;
    height: 34px;
    margin-top: 3px;
    accent-color: var(--primary);
}

.chat-app-main .voice-message-audio[hidden] {
    display: none !important;
}

html[data-theme="dark"] .chat-app-main .voice-recorder-panel {
    background: rgba(127, 29, 29, .15);
    border-color: rgba(248, 113, 113, .3);
}

html[data-theme="dark"] .chat-app-main .voice-recorder-time {
    color: #fca5a5;
}

@media (max-width: 760px) {
    .chat-app-main .voice-record-button {
        width: 38px;
        min-width: 38px;
        height: 38px;
    }

    .chat-app-main .voice-recorder-panel {
        align-items: stretch;
        flex-direction: column;
        gap: 9px;
        padding: 9px 10px;
    }

    .chat-app-main .voice-recorder-main {
        width: 100%;
    }

    .chat-app-main .voice-recorder-time {
        margin-left: auto;
        text-align: right;
    }

    .chat-app-main .voice-recorder-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .chat-app-main .voice-recorder-cancel,
    .chat-app-main .voice-recorder-stop {
        width: 100%;
    }

    .chat-app-main .pending-voice-preview {
        width: 100%;
        margin-left: 0;
    }

    .chat-app-main .voice-message-card {
        width: min(100%, 330px);
    }
}

@media (max-width: 420px) {
    .chat-app-main .message-compose-row {
        gap: 2px;
    }

    .chat-app-main .emoji-toggle-button,
    .chat-app-main .attach-file-button,
    .chat-app-main .voice-record-button {
        width: 34px;
        min-width: 34px;
        height: 36px;
    }

    .chat-app-main .send-message-button {
        min-width: 64px;
        padding-inline: 9px;
    }
}

/* ========================================================================== */
/* v151 - Densidad responsive del chat.                                       */
/* Inspirado en clientes de mensajería desktop: más contenido útil por alto,  */
/* sin modificar handlers, contratos ni estado funcional de las tres capas.   */
/* ========================================================================== */

/* La vista de chat usa una barra superior más contenida que el resto del CRM. */
.chat-page-body {
    --topbar-height: 60px;
}

.chat-page-body > .topbar {
    height: var(--topbar-height);
    min-height: var(--topbar-height);
    padding-inline: 14px;
    gap: 12px;
}

.chat-page-body > .topbar .brand-mini {
    gap: 8px;
}

.chat-page-body > .topbar .brand-mini img {
    width: 76px;
    max-height: 32px;
}

.chat-page-body > .topbar .brand-mini span {
    font-size: .92rem;
}

.chat-page-body > .topbar .topbar-user {
    gap: 7px;
}

.chat-page-body > .topbar .topbar-user-data {
    line-height: 1.08;
}

.chat-page-body > .topbar .topbar-user-data strong {
    font-size: .82rem;
}

.chat-page-body > .topbar .topbar-user-data span {
    font-size: .70rem;
}

.chat-page-body > .topbar .icon-button {
    width: 34px;
    min-width: 34px;
    height: 34px;
}

.chat-page-body > .topbar .inline-form .dx-button,
.chat-page-body > .topbar .inline-form .button {
    min-height: 36px !important;
}

/* Capa 2 ya muestra usuario/empresa en su encabezado: evitar repetir la misma
   información en una tarjeta que consume una fila completa. */
.chat-app-main .chat-shell[data-is-admin="false"] > .panel-users > .user-context-card {
    display: none !important;
}

/* Cabeceras tipo WhatsApp Web: identidad a la izquierda, acciones compactas a la derecha. */
.chat-app-main .panel-header,
.chat-app-main .chat-header {
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    flex-basis: 56px !important;
    padding: 7px 10px !important;
    gap: 8px;
}

.chat-app-main .panel-header-avatar {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    flex-basis: 32px !important;
    border-radius: 10px !important;
    font-size: .78rem !important;
}

.chat-app-main .panel-header h1,
.chat-app-main .panel-header h2,
.chat-app-main .chat-header h2,
.chat-app-main .compact-layer-header h1,
.chat-app-main .compact-layer-header h2,
.chat-app-main .chat-header-main h2 {
    font-size: .92rem !important;
    line-height: 1.08 !important;
}

.chat-app-main .chat-subtitle,
.chat-app-main .panel-header p,
.chat-app-main .panel-header small {
    margin-top: 2px;
    font-size: .70rem !important;
    line-height: 1.08 !important;
}

.chat-app-main .panel-header-actions,
.chat-app-main .chat-header-actions {
    gap: 3px !important;
}

.chat-app-main .panel-header-actions .icon-button,
.chat-app-main .panel-header-actions .success-icon-button,
.chat-app-main .panel-header-actions .danger-icon-button,
.chat-app-main .panel-header-actions .transfer-icon-button,
.chat-app-main .chat-header-actions .icon-button,
.chat-app-main .chat-header-actions .success-icon-button,
.chat-app-main .chat-header-actions .danger-icon-button,
.chat-app-main .chat-header-actions .transfer-icon-button {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    border-radius: 9px !important;
}

.chat-app-main .secondary-action-button {
    min-height: 32px !important;
    padding: 5px 9px !important;
    font-size: .74rem !important;
    border-radius: 9px !important;
}

/* Búsquedas de las tres capas: una sola línea compacta. */
.chat-app-main .search-box,
.chat-app-main .panel-messages > .messages-search-box {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    flex-basis: 48px !important;
    padding: 6px 8px !important;
}

.chat-app-main .search-box input[type="search"] {
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    padding-block: 5px !important;
    font-size: .82rem !important;
    border-radius: 9px !important;
}

.chat-app-main .search-box-icon {
    font-size: .88rem !important;
}

.chat-app-main .list-status {
    padding: 6px 9px !important;
    font-size: .72rem !important;
    line-height: 1.12 !important;
}

/* Capa 1/2: tres líneas de información dentro de una fila realmente compacta. */
.chat-app-main .entity-list {
    padding: 2px 4px 5px !important;
}

.chat-app-main .entity-list[data-users-list] .entity-item,
.chat-app-main .entity-list[data-conversations-list] .entity-item {
    min-height: 56px !important;
    padding: 6px 7px !important;
    gap: 7px !important;
    margin-block: 0 !important;
    border-radius: 8px !important;
}

.chat-app-main .entity-list[data-users-list] .entity-avatar,
.chat-app-main .entity-list[data-conversations-list] .entity-avatar {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    flex-basis: 32px !important;
    border-radius: 9px !important;
}

.chat-app-main .entity-list[data-conversations-list] .entity-user-svg {
    width: 17px !important;
    height: 17px !important;
}

.chat-app-main .entity-list[data-users-list] .entity-content,
.chat-app-main .entity-list[data-conversations-list] .entity-content {
    gap: 1px !important;
}

.chat-app-main .entity-list[data-users-list] .entity-title,
.chat-app-main .entity-list[data-conversations-list] .entity-title {
    font-size: .84rem !important;
    line-height: 1.06 !important;
}

.chat-app-main .entity-list[data-users-list] .entity-meta,
.chat-app-main .entity-list[data-users-list] .entity-preview,
.chat-app-main .entity-list[data-conversations-list] .entity-meta,
.chat-app-main .entity-list[data-conversations-list] .entity-preview {
    font-size: .68rem !important;
    line-height: 1.08 !important;
}

.chat-app-main .entity-list[data-users-list] .entity-title-row,
.chat-app-main .entity-list[data-users-list] .entity-meta-row,
.chat-app-main .entity-list[data-users-list] .entity-footer-row,
.chat-app-main .entity-list[data-conversations-list] .entity-title-row,
.chat-app-main .entity-list[data-conversations-list] .entity-meta-row,
.chat-app-main .entity-list[data-conversations-list] .entity-footer-row {
    gap: 4px !important;
    min-width: 0;
}

.chat-app-main .entity-list[data-conversations-list] .entity-inline-action--event-edit,
.chat-app-main .entity-inline-action {
    min-height: 22px !important;
    padding: 2px 6px !important;
    font-size: .64rem !important;
    border-radius: 7px !important;
}

.chat-app-main .entity-event-number {
    padding: 1px 5px !important;
    font-size: .64rem !important;
}

/* Capa 3: más historial visible y menos espacio muerto. */
.chat-app-main .messages-list {
    padding: 10px clamp(10px, 1.5vw, 22px) 12px !important;
}

.chat-app-main .message-row {
    margin: 3px 0 !important;
}

.chat-app-main .message-bubble {
    max-width: min(82%, 780px) !important;
    border-radius: 13px !important;
}

.chat-app-main .message-row.inbound .message-bubble {
    border-bottom-left-radius: 4px !important;
}

.chat-app-main .message-row.outbound .message-bubble {
    border-bottom-right-radius: 4px !important;
}

.chat-app-main .message-text {
    font-size: .88rem !important;
    line-height: 1.30 !important;
}

.chat-app-main .message-meta {
    margin-top: 2px !important;
    font-size: .68rem !important;
    line-height: 1.08 !important;
}

/* Composer de una sola superficie, compacto sin sacrificar área táctil. */
.chat-app-main .message-compose {
    padding: 6px 8px 6px !important;
}

.chat-app-main .message-compose-row {
    gap: 3px !important;
    padding: 3px !important;
    border-radius: 14px !important;
}

.chat-app-main .message-compose input[data-message-input] {
    height: 36px !important;
    min-height: 36px !important;
    padding-inline: 6px !important;
    font-size: .84rem !important;
}

.chat-app-main .emoji-toggle-button,
.chat-app-main .attach-file-button,
.chat-app-main .voice-record-button {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
}

.chat-app-main .send-message-button {
    height: 36px !important;
    min-height: 36px !important;
    min-width: 72px !important;
    padding-inline: 10px !important;
    border-radius: 10px !important;
    font-size: .78rem !important;
}

.chat-app-main .message-compose-status {
    margin-top: 3px !important;
    min-height: 13px !important;
    font-size: .66rem !important;
}

/* El mensaje vacío/búsqueda debe seguir la nueva altura real de cabeceras. */
.chat-app-main .panel-messages > .chat-header {
    flex-basis: 56px !important;
}

.chat-app-main .panel-messages > .messages-search-empty {
    top: calc(56px + 48px + 8px) !important;
}

/* Resoluciones desktop estrechas: no permitir que Capa 2 se coma Capa 3. */
@media (min-width: 1101px) and (max-width: 1450px) {
    .chat-app-main .chat-shell {
        --conversation-panel-width: clamp(300px, 27vw, 390px) !important;
    }

    .chat-app-main .chat-shell,
    .chat-app-main .chat-shell[data-is-admin="true"] {
        grid-template-columns: 285px var(--conversation-panel-width) 6px minmax(360px, 1fr) !important;
    }

    .chat-app-main .chat-shell[data-is-admin="false"] {
        grid-template-columns: var(--conversation-panel-width) 6px minmax(360px, 1fr) !important;
    }

    .chat-resizer {
        width: 6px !important;
        min-width: 6px !important;
    }

    .chat-app-main .chat-header-actions .secondary-action-button {
        width: 32px !important;
        min-width: 32px !important;
        height: 32px !important;
        padding: 0 !important;
        overflow: hidden;
        font-size: 0 !important;
        flex: 0 0 32px;
    }

    .chat-app-main .chat-header-actions .secondary-action-button::before {
        font-size: .88rem !important;
    }
}

/* Bajo alto disponible: densidad adicional automática. Es el caso típico de
   portátiles 1366x768 / 1600x900 con barra de navegador visible. */
@media (min-width: 1101px) and (max-height: 850px) {
    .chat-page-body {
        --topbar-height: 52px;
    }

    .chat-page-body > .topbar {
        padding-inline: 10px;
    }

    .chat-page-body > .topbar .brand-mini img {
        width: 64px;
        max-height: 28px;
    }

    .chat-page-body > .topbar .brand-mini span {
        font-size: .84rem;
    }

    .chat-page-body > .topbar .topbar-user-data strong {
        font-size: .76rem;
    }

    .chat-page-body > .topbar .topbar-user-data span {
        font-size: .64rem;
    }

    .chat-page-body > .topbar .icon-button {
        width: 30px;
        min-width: 30px;
        height: 30px;
    }

    .chat-page-body > .topbar .inline-form .dx-button,
    .chat-page-body > .topbar .inline-form .button {
        min-height: 32px !important;
    }

    .chat-app-main .panel-header,
    .chat-app-main .chat-header {
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
        flex-basis: 48px !important;
        padding-block: 5px !important;
    }

    .chat-app-main .panel-header-avatar {
        width: 30px !important;
        min-width: 30px !important;
        height: 30px !important;
        flex-basis: 30px !important;
    }

    .chat-app-main .search-box,
    .chat-app-main .panel-messages > .messages-search-box {
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        flex-basis: 42px !important;
        padding-block: 4px !important;
    }

    .chat-app-main .search-box input[type="search"] {
        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
    }

    .chat-app-main .entity-list[data-users-list] .entity-item,
    .chat-app-main .entity-list[data-conversations-list] .entity-item {
        min-height: 51px !important;
        padding-block: 4px !important;
    }

    .chat-app-main .entity-list[data-users-list] .entity-avatar,
    .chat-app-main .entity-list[data-conversations-list] .entity-avatar {
        width: 30px !important;
        min-width: 30px !important;
        height: 30px !important;
        flex-basis: 30px !important;
    }

    .chat-app-main .messages-list {
        padding-top: 7px !important;
        padding-bottom: 8px !important;
    }

    .chat-app-main .message-row {
        margin-block: 2px !important;
    }

    .chat-app-main .message-text {
        font-size: .86rem !important;
        line-height: 1.26 !important;
    }

    .chat-app-main .message-compose {
        padding-block: 4px !important;
    }

    .chat-app-main .message-compose-status:not(.is-error) {
        min-height: 0 !important;
        margin-top: 2px !important;
    }

    .chat-app-main .panel-messages > .chat-header {
        flex-basis: 48px !important;
    }

    .chat-app-main .panel-messages > .messages-search-empty {
        top: calc(48px + 42px + 6px) !important;
    }
}

/* Tablet/móvil: una capa por pantalla, pero con densidad de mensajería real. */
@media (max-width: 1100px) {
    .chat-page-body {
        --topbar-height: 54px;
    }

    .chat-app-main .chat-shell,
    .chat-app-main .chat-shell[data-is-admin="true"],
    .chat-app-main .chat-shell[data-is-admin="false"] {
        height: calc(100dvh - var(--topbar-height)) !important;
    }

    .chat-app-main .panel-header,
    .chat-app-main .chat-header {
        height: 54px !important;
        min-height: 54px !important;
        max-height: 54px !important;
        flex-basis: 54px !important;
    }

    .chat-app-main .search-box,
    .chat-app-main .panel-messages > .messages-search-box {
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
        flex-basis: 46px !important;
    }

    .chat-app-main .search-box input[type="search"] {
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
    }

    .chat-app-main .panel-messages > .chat-header {
        flex-basis: 54px !important;
    }

    .chat-app-main .panel-messages > .messages-search-empty {
        top: calc(54px + 46px + 7px) !important;
    }
}

@media (max-width: 760px) {
    .chat-page-body > .topbar .brand-mini img {
        width: 54px;
        max-height: 27px;
    }

    .chat-page-body > .topbar .brand-mini span {
        display: none;
    }

    .chat-app-main .entity-list[data-users-list] .entity-item,
    .chat-app-main .entity-list[data-conversations-list] .entity-item {
        min-height: 54px !important;
        padding: 5px 7px !important;
    }

    .chat-app-main .message-bubble {
        max-width: 92% !important;
    }

    .chat-app-main .messages-list {
        padding: 8px 7px 10px !important;
    }

    .chat-app-main .message-compose {
        padding: 5px 6px max(5px, env(safe-area-inset-bottom)) !important;
    }
}

@media (max-width: 480px) {
    .chat-app-main .panel-header,
    .chat-app-main .chat-header {
        padding-inline: 6px !important;
    }

    .chat-app-main .panel-header-actions,
    .chat-app-main .chat-header-actions {
        gap: 1px !important;
    }

    .chat-app-main .message-bubble {
        max-width: 95% !important;
    }
}

/* v152 - Miniaturas de imágenes en adjuntos pendientes y mensajes locales. */
.chat-app-main .pending-attachment-thumbnail {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 1px solid var(--crm-border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--crm-surface);
    cursor: zoom-in;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.chat-app-main .pending-attachment-thumbnail img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.chat-app-main .pending-attachment-thumbnail:hover,
.chat-app-main .pending-attachment-thumbnail:focus-visible {
    border-color: var(--primary);
    outline: 2px solid color-mix(in srgb, var(--primary) 22%, transparent);
    outline-offset: 1px;
}

.chat-app-main .message-attachment-card.message-attachment--image.has-thumbnail {
    grid-template-columns: 68px minmax(0, 1fr) auto;
    width: min(100%, 360px);
}

.chat-app-main .message-attachment-thumbnail {
    width: 68px;
    height: 56px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--crm-border) 82%, transparent);
    background: var(--crm-surface-muted, var(--surface-2));
    display: block;
}

.chat-app-main .message-attachment-thumbnail img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

@media (max-width: 760px) {
    .chat-app-main .pending-attachment-thumbnail {
        width: 48px;
        height: 48px;
    }

    .chat-app-main .message-attachment-card.message-attachment--image.has-thumbnail {
        grid-template-columns: 60px minmax(0, 1fr) auto;
        gap: 8px;
    }

    .chat-app-main .message-attachment-thumbnail {
        width: 60px;
        height: 50px;
    }
}

/* Fomplus Chat v159 · DevExtreme LoadPanel con animación institucional */
.dx-loadpanel-content .dx-loadindicator {
    width: 78px !important;
    height: 92px !important;
}

.dx-loadpanel-content .dx-loadindicator-icon {
    width: 100% !important;
    height: 100% !important;
    background: #ffffff url('../img/fomplus_loading.gif') center center / contain no-repeat !important;
    border-radius: 10px;
    animation: none !important;
    transform: none !important;
}

.dx-loadpanel-content .dx-loadindicator-segment,
.dx-loadpanel-content .dx-loadindicator-segment-inner,
.dx-loadpanel-content [class*='dx-loadindicator-segment'] {
    display: none !important;
    animation: none !important;
}

.dx-loadpanel-content .dx-loadpanel-message {
    margin-top: 8px;
    text-align: center;
}

/* ========================================================================== */
/* Fomplus Chat v161 · microajustes visuales cabecera / edición / limpiar      */
/* ========================================================================== */

/* Badge de disponibilidad: más aire interno y punto completamente visible. */
@media (min-width: 761px) {
    .chat-app-main .panel-header-actions .selected-user-status-badge,
    .chat-app-main .panel-header.with-back > .layer-2-header-actions .selected-user-status-badge {
        box-sizing: border-box !important;
        max-width: 176px !important;
        min-height: 30px !important;
        padding: 0 11px !important;
        margin-left: 3px !important;
        gap: 7px !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .chat-app-main .panel-header-actions .selected-user-status-badge::before,
    .chat-app-main .panel-header.with-back > .layer-2-header-actions .selected-user-status-badge::before {
        display: block !important;
        width: 8px !important;
        height: 8px !important;
        min-width: 8px !important;
        flex: 0 0 8px !important;
        margin: 0 !important;
        border-radius: 50% !important;
        background: currentColor !important;
        box-shadow: none !important;
    }
}

/* En una Capa 2 realmente estrecha se conserva el indicador compacto de v157. */
@container conversation-layer (max-width: 470px) {
    .chat-app-main .panel-header-actions .selected-user-status-badge,
    .chat-app-main .panel-header.with-back > .layer-2-header-actions .selected-user-status-badge {
        width: 18px !important;
        min-width: 18px !important;
        max-width: 18px !important;
        height: 18px !important;
        min-height: 18px !important;
        padding: 0 !important;
        margin: 0 1px !important;
        gap: 0 !important;
        border-radius: 50% !important;
        font-size: 0 !important;
        line-height: 0 !important;
        overflow: visible !important;
        flex: 0 0 18px !important;
    }

    .chat-app-main .panel-header-actions .selected-user-status-badge::before,
    .chat-app-main .panel-header.with-back > .layer-2-header-actions .selected-user-status-badge::before {
        width: 8px !important;
        height: 8px !important;
        min-width: 8px !important;
        flex: 0 0 8px !important;
        margin: 0 !important;
        box-shadow: none !important;
    }
}

/* Icono de editar evento: SVG estable orientado de abajo-izquierda a arriba-derecha. */
.chat-app-main .secondary-action-button::before,
.chat-app-main .entity-inline-action--event-edit::before {
    content: "" !important;
    display: inline-block !important;
    width: 14px !important;
    height: 14px !important;
    flex: 0 0 14px !important;
    background: currentColor !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zm17.71-10.04a.996.996 0 0 0 0-1.41l-2.5-2.5a.996.996 0 0 0-1.41 0l-1.96 1.96 3.75 3.75 2.12-1.8z'/%3E%3C/svg%3E") center / contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zm17.71-10.04a.996.996 0 0 0 0-1.41l-2.5-2.5a.996.996 0 0 0-1.41 0l-1.96 1.96 3.75 3.75 2.12-1.8z'/%3E%3C/svg%3E") center / contain no-repeat !important;
    transform: none !important;
}

/* El action de la lista traía el carácter Unicode ✎. Se oculta y se usa el SVG anterior. */
.chat-app-main .entity-inline-action--event-edit {
    font-size: 0 !important;
}

.chat-app-main .entity-inline-action--event-edit::before {
    width: 13px !important;
    height: 13px !important;
    flex-basis: 13px !important;
}

/* X del dxTextBox de Nueva conversación: área suficiente, centrada y sin clipping. */
.new-conversation-phone-field .dx-texteditor-buttons-container,
.new-conversation-phone-field .dx-texteditor-buttons-container:last-child {
    overflow: visible !important;
}

.new-conversation-phone-field .dx-clear-button-area {
    width: 36px !important;
    min-width: 36px !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

.new-conversation-phone-field .dx-clear-button-area .dx-icon-clear {
    position: relative !important;
    inset: auto !important;
    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    color: #667085 !important;
    font-size: 0 !important;
    line-height: 1 !important;
    background: transparent !important;
}

.new-conversation-phone-field .dx-clear-button-area .dx-icon-clear::before {
    content: "" !important;
    position: absolute !important;
    inset: 1px !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    background: currentColor !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M18.3 5.71 12 12l6.3 6.29-1.41 1.42L10.59 13.41 4.29 19.71 2.88 18.3 9.17 12 2.88 5.7 4.29 4.29 10.59 10.59 16.89 4.29z'/%3E%3C/svg%3E") center / 14px 14px no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M18.3 5.71 12 12l6.3 6.29-1.41 1.42L10.59 13.41 4.29 19.71 2.88 18.3 9.17 12 2.88 5.7 4.29 4.29 10.59 10.59 16.89 4.29z'/%3E%3C/svg%3E") center / 14px 14px no-repeat !important;
}

html[data-theme="dark"] .new-conversation-phone-field .dx-clear-button-area .dx-icon-clear {
    color: #d0d5dd !important;
}

/* v162: corrección del icono pequeño de editar evento en la lista de conversaciones.
   En algunos navegadores el glifo quedaba recortado/desalineado. Se oculta completamente
   el texto original y se centra un SVG más simple, independiente de la fuente. */
.chat-app-main .entity-list[data-conversations-list] .entity-item--conversation .entity-inline-action--event-edit {
    position: relative !important;
    overflow: visible !important;
    font-size: 0 !important;
    line-height: 0 !important;
    letter-spacing: 0 !important;
    text-indent: -9999px !important;
    white-space: nowrap !important;
}

.chat-app-main .entity-list[data-conversations-list] .entity-item--conversation .entity-inline-action--event-edit::before {
    content: "" !important;
    display: block !important;
    width: 12px !important;
    height: 12px !important;
    min-width: 12px !important;
    flex: 0 0 12px !important;
    margin: 0 auto !important;
    background: currentColor !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 17.25V21h3.75l11-11-3.75-3.75-11 11ZM20.71 7.04a1.002 1.002 0 0 0 0-1.42L18.37 3.29a1.002 1.002 0 0 0-1.42 0l-1.13 1.13 3.75 3.75 1.14-1.13Z'/%3E%3C/svg%3E") center / 12px 12px no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 17.25V21h3.75l11-11-3.75-3.75-11 11ZM20.71 7.04a1.002 1.002 0 0 0 0-1.42L18.37 3.29a1.002 1.002 0 0 0-1.42 0l-1.13 1.13 3.75 3.75 1.14-1.13Z'/%3E%3C/svg%3E") center / 12px 12px no-repeat !important;
    transform: none !important;
}