/* --- Paleta de colores e inicialización --- */
:root {
    --bg-gradient: linear-gradient(135deg, #0b0c10 0%, #1a1c23 100%);
    --panel-bg: rgba(26, 29, 38, 0.6);
    --panel-border: rgba(255, 255, 255, 0.06);
    --text-primary: #f5f6f8;
    --text-secondary: #8e9cae;
    --accent-color: #07d39f;
    --accent-hover: #05b88a;
    --danger-color: #ff5e62;
    --bubble-me: linear-gradient(135deg, #05b38a 0%, #008f6c 100%);
    --bubble-them: #222733;
    --sidebar-width: 320px;
    --font-main: 'Outfit', sans-serif;
}

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

html,
body {
    width: 100%;
    height: 100%;
}

body {
    font-family: var(--font-main);
    background: var(--bg-gradient);
    color: var(--text-primary);
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* --- Contenedor Principal (App) --- */
.app-container {
    position: fixed;
    inset: 0;
    width: auto;
    height: auto;
    display: flex;
    overflow: hidden;
}

/* Glassmorphism utility */
.glass {
    background: var(--panel-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--panel-border);
}

/* --- Sistema de Vistas --- */
.view-panel {
    display: none;
    width: 100%;
    height: 100%;
    animation: fadeIn 0.4s ease-out forwards;
}

.view-panel.active {
    display: flex;
}

#loading-view {
    position:relative;
    z-index:10000;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:17px;
    color:#0a579f;
    background:#edf4fb;
}
.app-loading-mark { position:relative; width:104px; height:104px; display:grid; place-items:center; }
.app-loading-mark::before { content:''; position:absolute; inset:13px; border-radius:22px; background:#dceafa; box-shadow:0 12px 30px rgba(7,59,114,.10); }
.brand-logo { display:block; object-fit:contain; }
.brand-logo-loading { position:relative; z-index:2; width:64px; height:64px; }
.brand-logo-login { width:36px; height:36px; }
.brand-logo-rail { width:48px; height:48px; }
.brand-logo-inline { width:15px; height:15px; flex:0 0 15px; }
.brand-logo-note { width:27px; height:27px; flex:0 0 27px; padding:5px; border-radius:7px; background:#e1eef9; }
.brand-logo-card { width:24px; height:24px; }
.brand-logo-search { width:18px; height:18px; justify-self:center; }
.app-loading-ring { position:absolute; inset:0; border:3px solid rgba(10,87,159,.13); border-top-color:#0a579f; border-right-color:#4f91cb; border-radius:50%; animation:app-loading-spin .85s linear infinite; }
#loading-view > strong { color:#31546f; font-size:.72rem; font-weight:750; letter-spacing:.01em; }
@keyframes app-loading-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .app-loading-ring { animation-duration:1.8s; } }

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}

/* --- Acceso al CRM --- */
#login-view {
    justify-content: center;
    align-items: center;
    padding: 32px;
    background: #eef3f8;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.hidden { display: none !important; }

.login-shell {
    width: min(920px, 100%);
    min-height: 540px;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    overflow: hidden;
    border: 1px solid #d5e0eb;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 22px 60px rgba(7, 59, 114, 0.16);
}

.login-brand-panel {
    padding: 54px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #ffffff;
    background: #073b72;
}

.login-brand-mark {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #0a4f91;
    background: #ffffff;
    font-size: 1.8rem;
}

.login-brand-panel > div:nth-child(2) > span {
    color: #a9c9e8;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
}

.login-brand-panel h1 {
    margin: 10px 0 14px;
    font-size: 2.35rem;
    line-height: 1.08;
}

.login-brand-panel p {
    max-width: 360px;
    color: #d7e7f5;
    line-height: 1.6;
}

.login-security-note {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #c4d9ed;
    font-size: 0.84rem;
}

.login-form-panel {
    padding: 54px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #17222b;
}

.login-form-heading > span { color: #0a4f91; font-size: 0.82rem; font-weight: 700; }
.login-form-heading h2 { margin-top: 7px; font-size: 1.65rem; }

.login-role-switch {
    margin: 30px 0 26px;
    padding: 4px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    background: #edf2f7;
    border-radius: 7px;
}

.login-role {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 5px;
    color: #66757e;
    background: transparent;
    font-family: inherit;
    font-weight: 700;
    cursor: pointer;
}

.login-role.active { color: #0a4f91; background: #ffffff; box-shadow: 0 1px 4px rgba(7, 59, 114, 0.12); }
.login-form { display: grid; gap: 18px; }
.login-form label { display: grid; gap: 7px; color: #33434c; font-size: 0.82rem; font-weight: 700; }

.login-input-wrap {
    height: 48px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 14px;
    border: 1px solid #cbd8e5;
    border-radius: 6px;
    color: #7890a8;
    background: #ffffff;
}

.login-input-wrap:focus-within { border-color: #0a4f91; box-shadow: 0 0 0 3px rgba(10, 79, 145, 0.12); }
.login-input-wrap input { width: 100%; border: 0; outline: 0; color: #17222b; background: transparent; font: inherit; letter-spacing: 0; }
.login-error { padding: 10px 12px; border-radius: 5px; color: #9a2929; background: #fff0f0; font-size: 0.82rem; }

.login-submit {
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    border: 0;
    border-radius: 6px;
    color: #ffffff;
    background: #0a4f91;
    font-family: inherit;
    font-weight: 700;
    cursor: pointer;
}

.login-submit:hover { background: #073b72; }
.login-submit:disabled { opacity: 0.6; cursor: wait; }

@media (max-width: 720px) {
    #login-view { padding: 16px; }
    .login-shell { grid-template-columns: 1fr; min-height: 0; }
    .login-brand-panel { padding: 24px; min-height: 190px; }
    .login-brand-panel h1 { font-size: 1.7rem; }
    .login-security-note { display: none; }
    .login-form-panel { padding: 30px 24px; }
}

/* --- Vista de Dashboard (CRM) --- */
#crm-view {
    display: none;
    width: 100%;
    height: 100%;
}

#crm-view.active {
    display: flex;
}

/* Barra Lateral (Chats) */
.sidebar {
    width: var(--sidebar-width);
    border-right: 1px solid var(--panel-border);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.sidebar-header {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--panel-border);
}

.sidebar-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.crm-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -0.5px;
    color: var(--text-primary);
}

.crm-brand i {
    color: var(--accent-color);
    font-size: 1.4rem;
}

.icon-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.icon-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
}

.icon-btn.logout:hover {
    background: rgba(255, 94, 98, 0.15);
    border-color: rgba(255, 94, 98, 0.3);
    color: var(--danger-color);
}

/* Barra de Búsqueda */
.search-bar {
    padding: 15px 20px;
    border-bottom: 1px solid var(--panel-border);
}

.search-input-wrapper {
    position: relative;
    width: 100%;
}

.search-input-wrapper i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.search-input-wrapper input {
    width: 100%;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    padding: 10px 12px 10px 38px;
    color: var(--text-primary);
    font-family: var(--font-main);
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s ease;
}

.search-input-wrapper input:focus {
    border-color: rgba(7, 211, 159, 0.4);
}

/* Lista de Chats */
.chats-list {
    flex: 1;
    overflow-y: auto;
}

/* Estilo para cada item de chat */
.chat-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 20px;
    cursor: pointer;
    transition: background 0.2s ease, border-left 0.2s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
    border-left: 3px solid transparent;
}

.chat-item:hover {
    background: rgba(255, 255, 255, 0.03);
}

.chat-item.active {
    background: rgba(255, 255, 255, 0.05);
    border-left-color: var(--accent-color);
}

.chat-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.1rem;
    color: var(--text-secondary);
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.chat-item.active .chat-avatar {
    background: rgba(7, 211, 159, 0.1);
    color: var(--accent-color);
    border-color: rgba(7, 211, 159, 0.2);
}

.chat-info {
    flex: 1;
    min-width: 0;
}

.chat-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 4px;
}

.chat-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-time {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.chat-preview {
    font-size: 0.82rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-badge-wrapper {
    display: flex;
    align-items: center;
    gap: 5px;
}

.unread-badge {
    background: var(--accent-color);
    color: #0b0c10;
    font-size: 0.75rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 5px;
    margin-left: 5px;
}

.loading-chats, .empty-chats {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: var(--text-secondary);
    gap: 12px;
    font-size: 0.9rem;
    text-align: center;
}

.small-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid rgba(7, 211, 159, 0.1);
    border-top: 3px solid var(--accent-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* --- Panel de Chat Principal --- */
.chat-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Estado de bandeja vacía */
.empty-state {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 40px;
    text-align: center;
    animation: fadeIn 0.4s ease-out;
}

.empty-state.active {
    display: flex;
}

.empty-icon {
    font-size: 4.5rem;
    color: rgba(255, 255, 255, 0.05);
    margin-bottom: 20px;
}

.empty-state h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.empty-state p {
    max-width: 400px;
    color: var(--text-secondary);
    font-size: 0.92rem;
    line-height: 1.5;
}

/* Panel de chat cuando hay una conversación abierta */
.active-chat-panel {
    display: none;
    flex-direction: column;
    height: 100%;
}

.active-chat-panel.active {
    display: flex;
}

/* Header del chat activo */
.chat-header {
    padding: 15px 25px;
    border-bottom: 1px solid var(--panel-border);
    background: rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.contact-info {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(7, 211, 159, 0.1);
    color: var(--accent-color);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.1rem;
    border: 1px solid rgba(7, 211, 159, 0.2);
}

.contact-details {
    min-width: 0;
}

.contact-details h2 {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contact-details span {
    font-size: 0.8rem;
    color: var(--text-secondary);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.assistant-toggle {
    border: 1px solid rgba(7, 211, 159, 0.25);
    background: rgba(7, 211, 159, 0.08);
    color: var(--accent-color);
    height: 38px;
    padding: 0 13px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-main);
    font-weight: 700;
    cursor: pointer;
}

.assistant-toggle.active {
    color: #ffffff;
    background: #0c8f70;
    border-color: #0c8f70;
}

.status-dot.ai-delegated {
    background: #0c8f70;
    box-shadow: 0 0 0 4px rgba(12, 143, 112, .13);
}

.chat-stage-badge.ai-delegated {
    color: #08765e;
    background: #d8f2eb;
}

.admin-workspace {
    display: none;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    height: 100%;
}

.admin-workspace.active {
    display: flex;
}

.admin-topbar {
    min-height: 72px;
    padding: 16px 22px;
    border-bottom: 1px solid var(--panel-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.admin-topbar strong {
    display: block;
    font-size: 1.05rem;
}

.admin-topbar span {
    display: block;
    margin-top: 2px;
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.admin-shell {
    flex: 1;
    min-height: 0;
    display: flex;
}

.admin-nav {
    width: 220px;
    padding: 16px;
    border-right: 1px solid var(--panel-border);
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}

.admin-nav-btn {
    width: 100%;
    min-height: 42px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    font-family: var(--font-main);
    font-weight: 700;
    cursor: pointer;
    text-align: left;
}

.admin-nav-btn.active,
.admin-nav-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--panel-border);
    color: var(--text-primary);
}

.admin-nav-btn.active i {
    color: var(--accent-color);
}

.admin-content {
    flex: 1;
    min-width: 0;
    padding: 22px;
    overflow-y: auto;
}

.admin-section {
    display: none;
}

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

.admin-section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
}

.admin-section-header h2 {
    font-size: 1.2rem;
    margin-bottom: 4px;
}

.admin-section-header p {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.admin-primary-action,
.admin-row-action,
.admin-select {
    border-radius: 10px;
    border: 1px solid var(--panel-border);
    font-family: var(--font-main);
}

.admin-primary-action {
    min-height: 38px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(7, 211, 159, 0.1);
    color: var(--accent-color);
    font-weight: 700;
    cursor: pointer;
}

.admin-primary-action:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.admin-select {
    min-width: 230px;
    height: 38px;
    background: rgba(0, 0, 0, 0.22);
    color: var(--text-primary);
    padding: 0 10px;
}

.admin-card-grid,
.admin-placeholder-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.admin-card {
    min-height: 130px;
    border: 1px solid var(--panel-border);
    background: rgba(255, 255, 255, 0.035);
    border-radius: 8px;
    padding: 16px;
}

.admin-card-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(7, 211, 159, 0.1);
    color: var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.admin-card.connected .admin-card-icon {
    background: rgba(7, 211, 159, 0.16);
}

.admin-card strong,
.admin-card span,
.admin-card small {
    display: block;
}

.admin-card span,
.admin-card small {
    color: var(--text-secondary);
    margin-top: 4px;
    font-size: 0.84rem;
}

.admin-table {
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    overflow: hidden;
}

.admin-table-row {
    display: grid;
    grid-template-columns: minmax(180px, 1.3fr) minmax(170px, 1fr) 110px minmax(220px, 1.4fr) 70px;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid var(--panel-border);
    font-size: 0.86rem;
}

.admin-table-row > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-table-row:last-child {
    border-bottom: 0;
}

.admin-table-head {
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.035);
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
}

.admin-table-row strong,
.admin-table-row small {
    display: block;
}

.admin-table-row small {
    color: var(--text-secondary);
    margin-top: 3px;
}

.admin-row-action {
    height: 32px;
    background: rgba(255, 255, 255, 0.07);
    color: var(--text-primary);
    cursor: pointer;
}

.admin-empty {
    color: var(--text-secondary);
    padding: 22px;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    text-align: center;
}

.rules-list {
    display: grid;
    gap: 10px;
}

.rules-list div {
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.035);
    color: var(--text-primary);
}

.rules-list i {
    color: var(--accent-color);
    margin-right: 8px;
}

.chat-workspace {
    flex: 1;
    min-height: 0;
    display: flex;
}

.conversation-pane {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.assistant-panel {
    width: 340px;
    max-width: 42vw;
    border-left: 1px solid var(--panel-border);
    background: rgba(13, 15, 20, 0.78);
    display: none;
    flex-direction: column;
    min-height: 0;
}

.assistant-panel.open {
    display: flex;
}

.assistant-header {
    padding: 16px;
    border-bottom: 1px solid var(--panel-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.assistant-header strong {
    display: block;
    font-size: 0.95rem;
}

.assistant-header span {
    display: block;
    margin-top: 2px;
    color: var(--text-secondary);
    font-size: 0.76rem;
}

.assistant-output {
    flex: 1;
    min-height: 0;
    padding: 16px;
    overflow-y: auto;
}

.assistant-empty,
.assistant-reply {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.55;
    white-space: pre-wrap;
}

.assistant-reply {
    color: var(--text-primary);
}

.assistant-reply.error {
    color: var(--danger-color);
}

.assistant-form {
    padding: 16px;
    border-top: 1px solid var(--panel-border);
}

.assistant-form textarea {
    width: 100%;
    min-height: 104px;
    resize: vertical;
    background: rgba(22, 25, 32, 0.86);
    color: var(--text-primary);
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    padding: 12px;
    font-family: var(--font-main);
    font-size: 0.9rem;
    outline: none;
}

.assistant-form textarea:focus {
    border-color: rgba(7, 211, 159, 0.45);
}

.assistant-actions {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.assistant-primary,
.assistant-secondary {
    border: none;
    border-radius: 12px;
    min-height: 40px;
    font-family: var(--font-main);
    font-weight: 700;
    cursor: pointer;
}

.assistant-primary {
    width: 48px;
    background: var(--accent-color);
    color: #0b0c10;
}

.assistant-secondary {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.07);
    color: var(--text-primary);
}

.assistant-primary:disabled,
.assistant-secondary:disabled,
.assistant-form textarea:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.contact-modal {
    position: fixed;
    inset: 0;
    z-index: 20;
    background: rgba(5, 7, 10, 0.62);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.contact-dialog {
    width: min(420px, 100%);
    background: #151922;
    border: 1px solid var(--panel-border);
    border-radius: 16px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
    padding: 18px;
}

.contact-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.contact-dialog-header strong {
    font-size: 1rem;
}

.contact-dialog label {
    display: block;
    margin-bottom: 12px;
}

.contact-dialog label span {
    display: block;
    color: var(--text-secondary);
    font-size: 0.78rem;
    margin-bottom: 6px;
}

.contact-dialog input {
    width: 100%;
    height: 42px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    color: var(--text-primary);
    font-family: var(--font-main);
    font-size: 0.95rem;
    outline: none;
    padding: 0 12px;
}

.contact-dialog input:focus {
    border-color: rgba(7, 211, 159, 0.45);
}

.contact-dialog-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.contact-dialog-actions .assistant-primary {
    flex: 0 0 48px;
}

/* Historial de Mensajes */
.message-history {
    flex: 1;
    padding: 25px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: radial-gradient(circle at top right, rgba(7, 211, 159, 0.02) 0%, transparent 60%);
}

/* Burbujas de Mensaje */
.message-row {
    display: flex;
    width: 100%;
}

.message-row.me {
    justify-content: flex-end;
}

.message-row.them {
    justify-content: flex-start;
}

.message-bubble {
    max-width: 65%;
    padding: 12px 16px;
    border-radius: 16px;
    position: relative;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    line-height: 1.45;
    font-size: 0.92rem;
    word-break: break-word;
    animation: popBubble 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popBubble {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.message-row.me .message-bubble {
    background: var(--bubble-me);
    color: #ffffff;
    border-bottom-right-radius: 4px;
}

.message-row.them .message-bubble {
    background: var(--bubble-them);
    color: var(--text-primary);
    border-bottom-left-radius: 4px;
}

.message-text {
    margin-bottom: 4px;
    white-space: pre-wrap;
}

.message-text.muted {
    color: var(--text-secondary);
    font-style: italic;
}

.message-media {
    display: block;
    max-width: min(360px, 100%);
    border-radius: 12px;
    margin-bottom: 8px;
    background: rgba(0, 0, 0, 0.18);
}

.message-media.image {
    max-height: 420px;
    object-fit: contain;
    cursor: zoom-in;
}

.message-media.image:focus-visible {
    outline: 3px solid rgba(0, 137, 105, 0.35);
    outline-offset: 3px;
}

.message-media.video {
    max-height: 420px;
}

.message-bubble.has-audio {
    width: 360px;
    max-width: min(88%, 360px);
    padding: 10px 12px 8px;
}

.voice-message {
    width: 100%;
    min-height: 58px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.voice-message-audio {
    display: none;
}

.voice-play-button {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 48px;
    border: 0;
    border-radius: 50%;
    color: #ffffff;
    background: #07866f;
    box-shadow: 0 5px 14px rgba(7, 134, 111, 0.24);
    cursor: pointer;
    transition: transform 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.voice-play-button:hover,
.voice-play-button:focus-visible {
    background: #056e5c;
    box-shadow: 0 7px 18px rgba(7, 134, 111, 0.32);
    outline: none;
    transform: translateY(-1px);
}

.voice-play-button:active {
    transform: scale(0.96);
}

.voice-play-button i {
    font-size: 1rem;
    transform: translateX(1px);
}

.voice-message.playing .voice-play-button i {
    transform: none;
}

.voice-track {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.voice-waveform {
    width: 100%;
    height: 34px;
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    cursor: pointer;
}

.voice-wave-bar {
    min-width: 2px;
    height: 8px;
    flex: 1 1 2px;
    border-radius: 2px;
    background: #aebbb8;
    transition: background-color 120ms ease, transform 120ms ease;
}

.voice-wave-bar.active {
    background: #07866f;
    transform: scaleY(1.08);
}

.voice-timing {
    display: flex;
    justify-content: space-between;
    color: #65746f;
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.message-row.me .voice-play-button {
    color: #08715f;
    background: #ffffff;
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.14);
}

.message-row.me .voice-play-button:hover,
.message-row.me .voice-play-button:focus-visible {
    background: #e9fff9;
}

.message-row.me .voice-wave-bar {
    background: rgba(255, 255, 255, 0.45);
}

.message-row.me .voice-wave-bar.active {
    background: #ffffff;
}

.message-row.me .voice-timing {
    color: rgba(255, 255, 255, 0.76);
}

body.media-viewer-open {
    overflow: hidden;
}

.image-viewer {
    position: fixed;
    inset: 0;
    z-index: 1000;
    color: #ffffff;
    background: rgba(10, 18, 21, 0.96);
}

.image-viewer-toolbar {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    display: flex;
    gap: 8px;
}

.image-viewer-btn {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: rgba(30, 45, 50, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 7px;
    cursor: pointer;
}

.image-viewer-btn:hover,
.image-viewer-btn:focus-visible {
    background: #087b65;
    outline: none;
}

.image-viewer-stage {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: zoom-in;
    touch-action: none;
}

.image-viewer-stage.dragging {
    cursor: grabbing;
}

.image-viewer-content {
    max-width: 90vw;
    max-height: 88vh;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
    transform-origin: center;
    transition: transform 160ms ease;
}

.image-viewer-stage.dragging .image-viewer-content {
    transition: none;
}

.message-file {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 10px 12px;
    margin-bottom: 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    color: inherit;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.message-file::before {
    content: "\\f15b";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 8px;
}

.message-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
}

.message-time {
    font-size: 0.7rem;
    opacity: 0.65;
}

.message-delivery {
    font-size: 0.72rem;
    line-height: 1;
    letter-spacing: -2px;
    opacity: 0.72;
}

.message-delivery.read {
    color: #8fffe2;
    opacity: 1;
}

.message-delivery.failed {
    color: #ffb2b2;
    letter-spacing: 0;
    font-weight: 800;
}

/* Barra de Entrada de Mensaje */
.message-input-area {
    padding: 20px 25px;
    background: rgba(0, 0, 0, 0.15);
    border-top: 1px solid var(--panel-border);
    display: flex;
    gap: 12px;
    align-items: center;
}

.message-input-area input {
    flex: 1;
    background: rgba(22, 25, 32, 0.7);
    border: 1px solid var(--panel-border);
    border-radius: 14px;
    padding: 14px 20px;
    color: var(--text-primary);
    font-family: var(--font-main);
    font-size: 0.92rem;
    outline: none;
    transition: all 0.2s ease;
}

.message-input-area input:focus {
    border-color: rgba(7, 211, 159, 0.5);
    background: rgba(22, 25, 32, 0.9);
    box-shadow: 0 0 10px rgba(7, 211, 159, 0.05);
}

.send-btn {
    background: var(--accent-color);
    color: #0b0c10;
    border: none;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(7, 211, 159, 0.2);
}

.send-btn:hover {
    background: var(--accent-hover);
    transform: scale(1.03) translateY(-1px);
}

.send-btn:active {
    transform: scale(0.97) translateY(0);
}

/* --- Scrollbar Personalizada --- */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

@media (max-width: 900px) {
    #crm-view.active {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        max-height: 42vh;
        border-right: 0;
        border-bottom: 1px solid var(--panel-border);
    }

    .chat-area {
        flex: 1;
        min-height: 0;
    }

    .admin-shell {
        flex-direction: column;
    }

    .admin-nav {
        width: 100%;
        flex-direction: row;
        overflow-x: auto;
        border-right: 0;
        border-bottom: 1px solid var(--panel-border);
    }

    .admin-nav-btn {
        min-width: 150px;
        justify-content: center;
    }

    .admin-section-header {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-select {
        width: 100%;
        min-width: 0;
    }

    .admin-table {
        display: grid;
        gap: 10px;
        border: 0;
        overflow: visible;
    }

    .admin-table-head {
        display: none;
    }

    .admin-table-row {
        grid-template-columns: 1fr;
        gap: 6px;
        border: 1px solid var(--panel-border);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.025);
    }

    .admin-row-action {
        width: 100%;
    }

    .chat-workspace {
        position: relative;
    }

    .assistant-panel {
        position: absolute;
        inset: 0 0 0 auto;
        width: min(360px, 100%);
        max-width: 100%;
        z-index: 5;
        box-shadow: -18px 0 36px rgba(0, 0, 0, 0.35);
    }
}

/* --- Navegación esencial y filtros por iconos --- */
.rail-btn.active {
    color: #0a4f91;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(1, 27, 55, .24);
}
.rail-btn.active::before { display: none; }
.icon-filter-row {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px;
    padding: 0 13px;
    border-bottom: 1px solid #e3eaf0;
    overflow: visible;
}
.icon-filter-row .inbox-filter {
    position: relative;
    height: 50px;
    gap: 5px;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    color: #718190;
    background: transparent;
    font-size: .92rem;
}
.icon-filter-row .inbox-filter:hover:not(.active) { color: #0a4f91; background: #f7fafc; }
.icon-filter-row .inbox-filter.active { color: #0a4f91; border-bottom-color: #0a4f91; background: transparent; }
.icon-filter-row .inbox-filter span,
.icon-filter-row .inbox-filter.active span {
    min-width: 20px;
    height: 20px;
    margin: 0;
    padding: 0 5px;
    border-radius: 999px;
    color: #526575;
    background: #e9eef3;
    font-size: .66rem;
}
.icon-filter-row .inbox-filter.active span { color: #fff; background: #0a4f91; }
.conversation-filter-heading {
    position: relative;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid #e4eaf0;
    color: #1f303e;
    background: #fff;
}
.conversation-filter-heading > div:first-child { min-width: 0; display: grid; gap: 2px; }
.conversation-filter-heading strong { font-size: .85rem; }
.conversation-filter-heading small { max-width: 220px; color: #83919d; font-size: .66rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#advanced-filter-btn {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 9px;
    color: #536879;
    background: transparent;
    font-size: .9rem;
    cursor: pointer;
}
#advanced-filter-btn:hover,
#advanced-filter-btn.has-filters { color: #0a4f91; background: #e9f2fb; }
#advanced-filter-btn.has-filters::after {
    content: '';
    position: absolute;
    width: 7px;
    height: 7px;
    margin: -2px 0 0 -2px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #0a4f91;
}
.advanced-filter-popover {
    position: absolute;
    z-index: 80;
    top: 49px;
    right: 10px;
    width: min(286px, calc(100vw - 92px));
    display: grid;
    gap: 11px;
    padding: 14px;
    border: 1px solid #d8e3ec;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(7, 59, 114, .19);
}
.advanced-filter-title { display: flex !important; align-items: center; justify-content: space-between; }
.advanced-filter-title button { width: 28px; height: 28px; border: 0; border-radius: 7px; color: #758594; background: #f1f5f8; cursor: pointer; }
.advanced-filter-popover label { display: grid; gap: 5px; color: #617383; font-size: .68rem; font-weight: 700; }
.advanced-filter-popover select { width: 100%; height: 38px; padding: 0 10px; border: 1px solid #d5e0e9; border-radius: 8px; color: #243746; background: #f9fbfd; font: 600 .74rem var(--font-main); }
.clear-filter-btn { height: 36px; border: 1px solid #bfd2e4; border-radius: 8px; color: #0a4f91; background: #edf5fc; font: 700 .72rem var(--font-main); cursor: pointer; }
.chat-actions { position: relative; }
.operator-chip {
    min-width: 116px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px 0 5px;
    border: 1px solid #d7e1e9;
    border-radius: 999px;
    color: #253746;
    background: #fff;
    font: 700 .73rem var(--font-main);
    cursor: pointer;
}
.operator-chip > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(145deg,#0a4f91,#1675c8); }
.operator-chip > i { margin-left: auto; color: #6e7e8b; font-size: .62rem; }
.operator-menu { position: absolute; z-index: 85; top: 44px; right: 44px; width: 210px; display: grid; gap: 3px; padding: 12px 14px; border: 1px solid #d7e2eb; border-radius: 11px; color: #263746; background: #fff; box-shadow: 0 16px 38px rgba(7,59,114,.17); }
.operator-menu small { color: #7e8d99; font-size: .67rem; }

@media (max-width: 760px) {
    .operator-chip { min-width: 38px; width: 38px; padding: 0 5px; }
    .operator-chip strong,.operator-chip > i { display: none; }
    .icon-filter-row { padding-inline: 8px; }
    .conversation-filter-heading { padding-inline: 12px; }
}

.whatsapp-public-photo #whatsapp-public-line {
    width: 148px;
    min-width: 148px;
    height: 34px;
    padding: 0 30px 0 10px;
    border: 1px solid #c8dbea;
    border-radius: 9px;
    outline: 0;
    color: #29485f;
    background-color: #f5f9fc;
    box-shadow: none;
    font: 750 .6rem var(--font-main);
}
.whatsapp-public-photo #whatsapp-public-line:hover { border-color:#94b8d6; background-color:#fff; }
.whatsapp-public-photo #whatsapp-public-line:focus,
.whatsapp-public-photo #whatsapp-public-line:focus-visible { border-color:#6fa2cc; outline:2px solid rgba(10,79,145,.1); outline-offset:1px; box-shadow:none; }
@media (max-width:620px) { .whatsapp-public-photo #whatsapp-public-line { width:100%; min-width:0; } }

/* Historial de conversación y colaboración interna */
.conversation-intro { display:grid; justify-items:center; gap:4px; padding:18px 18px 13px; color:#253746; text-align:center; }
.conversation-intro-avatar { width:54px; height:54px; display:grid; place-items:center; margin-bottom:3px; color:#0a4f91; border-radius:50%; background:#dceafa; font-size:1.25rem; font-weight:850; }
.conversation-intro h3 { margin:0; font-size:1.02rem; }.conversation-intro p { margin:0; color:#748594; font-size:.65rem; }.conversation-intro p strong { color:#0a5a9c; }.conversation-intro small { margin-top:8px; color:#778793; font-size:.61rem; }
.empty-conversation { padding:16px; color:var(--text-secondary); font-size:.7rem; text-align:center; }
.chat-day-divider,.chat-timeline-event { width:100%; display:grid; grid-template-columns:minmax(22px,1fr) auto minmax(22px,1fr); gap:9px; align-items:center; margin:7px 0; }
.chat-day-divider > span,.chat-timeline-event > span { height:1px; background:#e3e9ee; }
.chat-day-divider b { padding:4px 10px; color:#667987; border-radius:99px; background:#f1f5f7; font-size:.58rem; font-weight:800; }
.chat-timeline-event button { padding:3px 7px; color:#81651d; border:0; border-radius:99px; background:#fff7db; font:700 .56rem var(--font-main); cursor:pointer; }
.chat-timeline-event button:hover { background:#ffefb7; }.chat-timeline-event button strong { color:#0a4f91; }.chat-timeline-event button i { margin-right:3px; }

.internal-notes-dialog { width:min(610px,calc(100vw - 28px)); max-height:min(82vh,760px); display:grid; grid-template-rows:auto minmax(120px,1fr) auto; overflow:hidden; border:1px solid #d8e3ec; border-radius:18px; background:#fff; box-shadow:0 28px 72px rgba(9,49,83,.2); }
.internal-notes-dialog > header { display:flex; align-items:center; justify-content:space-between; padding:15px 17px; border-bottom:1px solid #e8edf1; }
.internal-notes-dialog > header > div { display:flex; align-items:center; gap:10px; }.internal-notes-dialog > header > div > span { width:34px; height:34px; display:grid; place-items:center; color:#765b14; border-radius:10px; background:#fff3ca; }
.internal-notes-dialog > header strong,.internal-notes-dialog > header small { display:block; }.internal-notes-dialog > header strong { color:#253746; font-size:.84rem; }.internal-notes-dialog > header small { margin-top:2px; color:#81909b; font-size:.59rem; }
.internal-notes-dialog > header button { width:32px; height:32px; color:#607482; border:0; border-radius:9px; background:#f1f5f7; cursor:pointer; }
.internal-notes-archive { overflow:auto; display:grid; align-content:start; gap:8px; padding:13px 16px; background:#f8fafb; }
.notes-day-heading { display:grid; grid-template-columns:1fr auto 1fr; gap:8px; align-items:center; margin:2px 0; }.notes-day-heading span { height:1px; background:#dfe6eb; }.notes-day-heading b { color:#718391; font-size:.56rem; }
.internal-note-thread { padding:11px 12px; border:1px solid #efd078; border-radius:11px; color:#594719; background:#fff8df; }
.internal-note-thread > header { display:flex; justify-content:space-between; gap:12px; align-items:center; }.internal-note-thread > header span { font-size:.66rem; font-weight:850; }.internal-note-thread > header time { color:#907a45; font-size:.55rem; white-space:nowrap; }
.internal-note-thread > p { margin:7px 0 9px; font-size:.7rem; line-height:1.42; }
.internal-comments { display:grid; gap:5px; padding-top:7px; border-top:1px solid rgba(142,111,31,.18); }.no-comments { color:#9b895e; font-size:.56rem; }
.internal-comment { display:grid; grid-template-columns:27px 1fr; gap:7px; align-items:start; padding:6px 7px; border-radius:8px; background:rgba(255,255,255,.72); }.internal-comment-avatar { width:27px; height:27px; display:grid; place-items:center; color:#fff; border-radius:8px; background:#0a4f91; font-size:.58rem; font-weight:850; }
.internal-comment header { display:flex; justify-content:space-between; gap:8px; }.internal-comment header strong { font-size:.59rem; }.internal-comment header time { color:#8d7a50; font-size:.52rem; }.internal-comment p { margin:2px 0 0; color:#4c493f; font-size:.62rem; line-height:1.35; }
.internal-comment-form { display:grid; grid-template-columns:1fr 31px; gap:6px; margin-top:7px; }.internal-comment-form input { min-width:0; height:31px; padding:0 9px; color:#344957; border:1px solid #e3cd91; border-radius:8px; background:#fff; font:600 .59rem var(--font-main); outline:none; }.internal-comment-form input:focus { border-color:#0a5a9c; }.internal-comment-form button { color:#fff; border:0; border-radius:8px; background:#0a5a9c; cursor:pointer; }
.admin-internal-note-form { padding:12px 16px 14px; border-top:1px solid #e3e9ee; background:#fff; }.admin-internal-note-form > label { display:block; margin-bottom:5px; color:#334958; font-size:.65rem; font-weight:850; }.admin-internal-note-form > div { display:grid; grid-template-columns:1fr 38px; gap:7px; }.admin-internal-note-form textarea { min-height:48px; resize:vertical; padding:9px 10px; border:1px solid #d5e0e8; border-radius:9px; color:#344957; font:600 .64rem var(--font-main); outline:none; }.admin-internal-note-form textarea:focus { border-color:#0a5a9c; }.admin-internal-note-form button { color:#fff; border:0; border-radius:9px; background:#0a5a9c; cursor:pointer; }.admin-internal-note-form > small { display:block; margin-top:5px; color:#82919d; font-size:.53rem; }
.internal-notes-empty { min-height:170px; display:grid; place-items:center; align-content:center; gap:5px; color:#81919d; text-align:center; }.internal-notes-empty i { font-size:1.4rem; }.internal-notes-empty strong { color:#526978; font-size:.72rem; }.internal-notes-empty span { font-size:.58rem; }
@media (max-width:620px) { .conversation-intro { padding-top:12px; }.internal-notes-dialog { max-height:90vh; border-radius:14px; }.internal-note-thread > header { align-items:flex-start; flex-direction:column; gap:2px; } }

/* --- Workspace operativo 2026 --- */
:root {
    --bg-gradient: #eef2f5;
    --panel-bg: #ffffff;
    --panel-border: #dfe5e9;
    --text-primary: #17212b;
    --text-secondary: #687782;
    --accent-color: #0a4f91;
    --accent-hover: #073b72;
    --danger-color: #dc4c5a;
    --bubble-me: #dcecff;
    --bubble-them: #ffffff;
    --sidebar-width: 340px;
    --rail-width: 68px;
    --detail-width: 310px;
}

body {
    background: #eef2f5;
    color: var(--text-primary);
    align-items: stretch;
    letter-spacing: 0;
}

.glass {
    background: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
}

.view-panel {
    animation: none;
}

#crm-view.active {
    background: #eef2f5;
    position: relative;
    overflow: hidden;
}

.app-rail {
    width: var(--rail-width);
    min-width: var(--rail-width);
    max-width: var(--rail-width);
    flex: 0 0 var(--rail-width);
    box-sizing: border-box;
    height: 100%;
    background: #073b72;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 0 14px;
    position: relative;
    z-index: 60;
}

.rail-brand {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    height: 64px;
    flex: 0 0 64px;
    display: grid;
    place-items: center;
    border-radius: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    background: #063561;
    color: #d8eaf7;
    font-size: 1.55rem;
    margin-bottom: 14px;
}

.rail-menu,
.rail-footer {
    width: 100%;
    display: grid;
    justify-items: center;
    gap: 8px;
}

.rail-footer {
    margin-top: auto;
}

.rail-btn {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #b8d0cc;
    font-size: 1rem;
    cursor: pointer;
    position: relative;
}

.rail-btn:hover,
.rail-btn.active {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
}

.rail-btn.active::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 9px;
    width: 3px;
    height: 26px;
    border-radius: 2px;
    background: #35d0ad;
}

.sidebar {
    width: var(--sidebar-width);
    border-right: 1px solid var(--panel-border);
    background: #ffffff;
}

.sidebar-header {
    min-height: 72px;
    padding: 14px 18px;
    border-bottom: 0;
}

.crm-brand {
    display: grid;
    gap: 2px;
    color: var(--text-primary);
    font-size: 1.1rem;
    letter-spacing: 0;
}

.crm-brand small {
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 500;
}

.icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    color: #53636e;
    background: #f3f6f7;
    border: 1px solid #e2e8eb;
}

.icon-btn:hover {
    color: #0b896b;
    background: #eaf7f3;
    transform: none;
}

.search-bar {
    padding: 4px 16px 12px;
    border-bottom: 0;
}

.search-input-wrapper input {
    height: 40px;
    color: var(--text-primary);
    background: #f4f6f7;
    border: 1px solid #e2e7ea;
    border-radius: 8px;
}

.search-input-wrapper input:focus {
    border-color: #7bcab6;
    background: #ffffff;
}

.inbox-filters {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    padding: 0 12px 10px;
    border-bottom: 1px solid var(--panel-border);
    overflow: hidden;
}

.inbox-filters::-webkit-scrollbar {
    display: none;
}

.inbox-filter {
    width: 100%;
    min-width: 0;
    height: 34px;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 0 4px;
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-main);
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.inbox-filter span {
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    margin-left: 5px;
    border-radius: 9px;
    background: #e9eef0;
    font-size: 0.68rem;
}

.inbox-filter.active {
    color: #08765e;
    background: #e8f6f2;
    border-color: #d7eee8;
}

.inbox-filter:hover:not(.active) {
    color: #40515b;
    background: #f4f7f7;
}

.inbox-filter.active span {
    color: #ffffff;
    background: #10a37f;
}

.chats-list {
    background: #ffffff;
}

.chat-item {
    gap: 11px;
    padding: 13px 15px;
    border-left: 0;
    border-bottom: 1px solid #edf0f2;
    transition: background 0.15s ease;
}

.chat-item:hover {
    background: #f5f8f8;
}

.chat-item.active {
    background: #e9f6f3;
    box-shadow: inset 3px 0 #10a37f;
}

.chat-avatar {
    width: 42px;
    height: 42px;
    color: #27665a;
    background: #dcece8;
    border: 0;
    font-weight: 700;
}

.chat-item.active .chat-avatar {
    color: #ffffff;
    background: #10a37f;
    border: 0;
}

.chat-name {
    color: var(--text-primary);
    font-size: 0.9rem;
}

.chat-time,
.chat-preview {
    color: var(--text-secondary);
}

.chat-stage-badge {
    display: inline-flex;
    margin-top: 5px;
    padding: 2px 6px;
    border-radius: 4px;
    color: #397063;
    background: #e4f2ee;
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
}

.chat-stage-badge.pending { color: #8a5d12; background: #fff1cf; }
.chat-stage-badge.ready { color: #165b8c; background: #dceefa; }
.chat-stage-badge.closed { color: #687782; background: #edf0f2; }
.chat-stage-badge.no-response { color:#725014; background:#fff0c7; }

.unread-badge {
    background: #10a37f;
    color: #ffffff;
}

.chat-area {
    background: #f7f9fa;
    border-right: 1px solid var(--panel-border);
}

.empty-icon {
    color: #cfd9dc;
}

.empty-state p {
    color: var(--text-secondary);
}

.chat-header {
    min-height: 72px;
    padding: 10px 18px;
    background: #ffffff;
    border-bottom: 1px solid var(--panel-border);
}

.avatar {
    width: 40px;
    height: 40px;
    color: #08765e;
    background: #e2f1ed;
    border: 0;
}

.contact-details h2 {
    color: var(--text-primary);
    font-size: 0.96rem;
}

.contact-details span {
    color: var(--text-secondary);
}

.chat-context {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-left: auto;
}

.context-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 0 9px;
    border-radius: 6px;
    color: #5f6e78;
    background: #f2f5f6;
    font-size: 0.72rem;
    white-space: nowrap;
}

.context-chip.success {
    color: #18705b;
    background: #e9f7f3;
}

.context-chip.warning {
    color: #8b5b0b;
    background: #fff1cf;
}

.take-chat-btn,
.assistant-toggle {
    min-height: 36px;
    border-radius: 7px;
    padding: 0 11px;
    font-family: var(--font-main);
    font-weight: 700;
    cursor: pointer;
}

.profile-panel-open {
    display: flex;
}

.mobile-chat-back {
    display: none;
}

.take-chat-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #ffffff;
    background: #123f3a;
    border: 1px solid #123f3a;
}

.take-chat-btn.return-ai {
    color: #08765e;
    background: #e8f6f2;
    border-color: #a8dacc;
}

.assistant-toggle {
    height: 36px;
    color: #08765e;
    background: #e8f6f2;
    border: 1px solid #b9ded4;
}

.conversation-statusbar {
    min-height: 38px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--text-secondary);
    background: #fbfcfc;
    border-bottom: 1px solid #e6ebed;
    font-size: 0.75rem;
}

.conversation-statusbar > div {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.conversation-statusbar strong {
    color: #33434d;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10a37f;
}

.status-dot.counter { background: #e6a23c; }

.message-history {
    padding: 22px clamp(18px, 4vw, 54px);
    gap: 10px;
    background-color: #f3f6f6;
    background-image: linear-gradient(rgba(255,255,255,.62), rgba(255,255,255,.62)), radial-gradient(#b9d7cf 0.7px, transparent 0.7px);
    background-size: auto, 18px 18px;
}

.message-bubble {
    max-width: min(74%, 620px);
    padding: 10px 12px;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(20, 41, 36, 0.08);
    color: var(--text-primary);
    animation: none;
}

.message-row.me .message-bubble {
    color: #17342d;
    border-bottom-right-radius: 2px;
}

.message-row.them .message-bubble {
    color: var(--text-primary);
    border: 1px solid #e4e9eb;
    border-bottom-left-radius: 2px;
}

.message-input-area {
    padding: 12px 18px;
    background: #ffffff;
    border-top: 1px solid var(--panel-border);
}

.message-input-area input {
    min-height: 44px;
    padding: 10px 15px;
    color: var(--text-primary);
    background: #f5f7f8;
    border: 1px solid #dfe5e8;
    border-radius: 8px;
}

.message-input-area input:focus {
    background: #ffffff;
    border-color: #7bcab6;
    box-shadow: none;
}

.send-btn {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    color: #ffffff;
    background: #10a37f;
    box-shadow: none;
}

.customer-panel {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 8;
    width: var(--detail-width);
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    box-shadow: -12px 0 30px rgba(32, 55, 50, 0.13);
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.22s ease, visibility 0s;
}

.customer-panel.collapsed {
    display: flex;
    transform: translateX(100%);
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.22s ease, visibility 0s 0.22s;
}

.customer-panel.pinned {
    position: relative;
    top: auto;
    right: auto;
    z-index: 7;
    flex: 0 0 var(--detail-width);
    align-self: flex-start;
    border-left: 1px solid var(--panel-border);
    box-shadow: none;
    transform: none;
}
.customer-panel.pinned.collapsed { position: absolute; flex-basis: auto; }
.customer-panel-actions { display:flex; align-items:center; gap:6px; }
#customer-panel-pin.active { color:#fff; border-color:#0a4f91; background:#0a4f91; }
.profile-panel-open.pin-hidden { display:none; }

.counter-form {
    display: grid;
    grid-template-columns: minmax(180px, 1.4fr) minmax(170px, 1fr) minmax(130px, .7fr) auto;
    gap: 12px;
    align-items: end;
    padding: 18px 20px;
    border-bottom: 1px solid var(--panel-border);
    background: #f7f9fa;
}

.counter-form label {
    display: grid;
    gap: 6px;
    color: var(--text-secondary);
    font-size: .75rem;
    font-weight: 700;
}

.counter-form input {
    min-width: 0;
    height: 42px;
    padding: 0 12px;
    color: var(--text-primary);
    background: #fff;
    border: 1px solid #d9e1e4;
    border-radius: 7px;
    font: inherit;
}

.counter-form input:focus {
    outline: 0;
    border-color: #67bba7;
    box-shadow: 0 0 0 3px rgba(16, 163, 127, .1);
}

.counter-list {
    margin-top: 18px;
}

.counter-list .admin-table-row {
    grid-template-columns: minmax(180px, 1.5fr) minmax(150px, 1fr) 100px 56px;
}
.counter-identity { display:flex !important; align-items:center; gap:9px; overflow:visible !important; }
.counter-avatar-admin { position:relative; width:34px; height:34px; display:grid; place-items:center; flex:0 0 34px; overflow:hidden; color:#fff; border-radius:10px; background:linear-gradient(145deg,#0a579f,#1476c7); font-size:.66rem; font-weight:850; }
.counter-avatar-action { position:relative; width:32px; height:32px; display:grid; place-items:center; border:1px solid #c9dbea; border-radius:8px; color:#0a579f; background:#f1f7fc; cursor:pointer; }
.counter-avatar-action:hover { color:#fff; background:#0a579f; }.counter-avatar-action:disabled { cursor:wait; opacity:.6; }
.counter-avatar-action::after { content:attr(data-tooltip); position:absolute; right:0; bottom:calc(100% + 6px); z-index:8; padding:4px 7px; border-radius:5px; color:#fff; background:#102b44; font:700 .52rem var(--font-main); white-space:nowrap; opacity:0; pointer-events:none; }.counter-avatar-action:hover::after { opacity:1; }

.chat-avatar,.avatar,.conversation-intro-avatar,.message-sender-avatar,.customer-avatar,.contact-card-avatar,.counter-avatar-admin,.internal-comment-avatar,#active-operator-avatar,#operator-summary-avatar,#rail-user-avatar,#user-profile-avatar { position:relative; overflow:hidden; }
.chat-avatar > img,.avatar > img,.conversation-intro-avatar > img,.message-sender-avatar > img,.customer-avatar > img,.contact-card-avatar > img,.counter-avatar-admin > img,.internal-comment-avatar > img,#active-operator-avatar > img,#operator-summary-avatar > img,#rail-user-avatar > img,#user-profile-avatar > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .18s ease; }
.chat-avatar.has-photo > img,.avatar.has-photo > img,.conversation-intro-avatar.has-photo > img,.message-sender-avatar.has-photo > img,.customer-avatar.has-photo > img,.contact-card-avatar.has-photo > img,.counter-avatar-admin.has-photo > img,.internal-comment-avatar.has-photo > img,#active-operator-avatar.has-photo > img,#operator-summary-avatar.has-photo > img,#rail-user-avatar.has-photo > img,#user-profile-avatar.has-photo > img { opacity:1; }
.chat-avatar.has-photo > span,.avatar.has-photo > span,.conversation-intro-avatar.has-photo > span,.message-sender-avatar.has-photo > span,.customer-avatar.has-photo > span,.contact-card-avatar.has-photo > span,.counter-avatar-admin.has-photo > span,.internal-comment-avatar.has-photo > span,#active-operator-avatar.has-photo > span,#operator-summary-avatar.has-photo > span,#rail-user-avatar.has-photo > span,#user-profile-avatar.has-photo > span { visibility:hidden; }

.customer-panel-header {
    min-height: 72px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--panel-border);
}

.customer-panel-header strong {
    font-size: 0.92rem;
}

.customer-scroll {
    flex: 1;
    overflow-y: auto;
}

.customer-summary {
    padding: 18px 16px;
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 10px 12px;
    border-bottom: 1px solid var(--panel-border);
}

.customer-avatar {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    grid-row: span 2;
    border-radius: 50%;
    color: #ffffff;
    background: #1c6d62;
    font-weight: 700;
}
.customer-avatar > span { color:#ffffff !important; }

.customer-summary h3 {
    margin: 3px 0 2px;
    font-size: 0.96rem;
}

.customer-summary > div span {
    color: var(--text-secondary);
    font-size: 0.76rem;
}

.lead-tag {
    width: max-content;
    padding: 3px 7px;
    border-radius: 4px;
    color: #08765e;
    background: #e4f4ef;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
}

.detail-section {
    padding: 16px;
    border-bottom: 1px solid var(--panel-border);
}

.detail-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.detail-heading strong {
    font-size: 0.82rem;
}

.text-action {
    border: 0;
    color: #08765e;
    background: transparent;
    font-family: var(--font-main);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

.customer-fields {
    display: grid;
    gap: 11px;
}

.customer-fields > div {
    display: grid;
    grid-template-columns: 95px minmax(0, 1fr);
    gap: 8px;
}

.customer-fields dt,
.customer-fields dd {
    min-width: 0;
    font-size: 0.74rem;
}

.customer-fields dt {
    color: var(--text-secondary);
}

.customer-fields dt i {
    width: 17px;
    color: #7a918b;
}

.customer-fields dd {
    overflow-wrap: anywhere;
    text-align: right;
    color: #33434d;
}

.order-status {
    padding: 3px 7px;
    border-radius: 4px;
    color: #687782;
    background: #edf0f2;
    font-size: 0.66rem;
}

.order-empty {
    min-height: 120px;
    padding: 18px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--text-secondary);
    background: #f6f8f8;
    border: 1px dashed #d8e0e2;
    border-radius: 6px;
}

.order-empty i {
    margin-bottom: 8px;
    color: #9aada8;
    font-size: 1.3rem;
}

.order-empty strong {
    color: #485861;
    font-size: 0.78rem;
}

.order-empty span {
    max-width: 230px;
    margin-top: 4px;
    font-size: 0.68rem;
    line-height: 1.45;
}

.order-total {
    display: flex;
    justify-content: space-between;
    padding-top: 12px;
    font-size: 0.84rem;
}

.journey-list {
    display: grid;
    gap: 14px;
}

.journey-list > div {
    display: grid;
    grid-template-columns: 12px 1fr;
    gap: 8px;
}

.journey-dot {
    width: 9px;
    height: 9px;
    margin-top: 4px;
    border-radius: 50%;
    background: #10a37f;
    box-shadow: 0 0 0 3px #e7f5f1;
}

.journey-dot.blue {
    background: #388fc6;
    box-shadow: 0 0 0 3px #e6f1f8;
}

.journey-list p,
.journey-list strong,
.journey-list small {
    display: block;
}

.journey-list strong {
    color: #3b4c55;
    font-size: 0.74rem;
}

.journey-list small {
    margin-top: 2px;
    color: var(--text-secondary);
    font-size: 0.67rem;
}

.assistant-panel {
    width: 330px;
    color: var(--text-primary);
    background: #ffffff;
    border-left: 1px solid var(--panel-border);
}

.assistant-header,
.assistant-form {
    border-color: var(--panel-border);
}

.assistant-reply {
    color: var(--text-primary);
}

.assistant-form textarea {
    color: var(--text-primary);
    background: #f5f7f8;
    border-color: #dfe5e8;
    border-radius: 8px;
}

.assistant-primary,
.assistant-secondary,
.admin-primary-action,
.admin-row-action,
.admin-select {
    border-radius: 7px;
}

.assistant-form .assistant-primary {
    width: auto;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.assistant-secondary {
    color: #40515b;
    background: #eef2f3;
}

.admin-workspace {
    background: #ffffff;
}

.admin-topbar,
.admin-nav,
.admin-table-row {
    border-color: var(--panel-border);
}

.admin-nav-btn.active,
.admin-nav-btn:hover,
.admin-card,
.rules-list div {
    color: var(--text-primary);
    background: #f5f7f8;
}

.admin-select,
.admin-row-action {
    color: var(--text-primary);
    background: #ffffff;
}

.contact-modal {
    background: rgba(20, 34, 40, 0.5);
}

.contact-dialog {
    color: var(--text-primary);
    background: #ffffff;
    border-radius: 8px;
}

.contact-dialog input {
    color: var(--text-primary);
    background: #f5f7f8;
    border-color: #dfe5e8;
    border-radius: 7px;
}

::-webkit-scrollbar-thumb {
    background: #c8d1d5;
}

@media (max-width: 1280px) {
    :root { --sidebar-width: 310px; --detail-width: 280px; }
    .chat-context .context-chip:first-child { display: none; }
    .take-chat-btn span,
    .assistant-toggle span { display: none; }
}

@media (max-width: 1040px) {
    .customer-panel {
        width: min(340px, 88vw);
    }

    .chat-context { display: none; }

    .counter-form {
        grid-template-columns: 1fr 1fr;
    }
}

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

    #crm-view.active {
        flex-direction: row;
    }

    .app-rail {
        width: var(--rail-width);
        min-width: var(--rail-width);
        max-width: var(--rail-width);
        flex-basis: var(--rail-width);
    }

    .rail-brand,
    .rail-btn {
        width: 38px;
        height: 38px;
    }

    .sidebar {
        width: calc(100vw - var(--rail-width));
        max-height: none;
        border-bottom: 0;
    }

    .chat-area {
        position: fixed;
        inset: 0 0 0 var(--rail-width);
        z-index: 10;
        display: none;
    }

    .chat-area.mobile-open {
        display: flex;
    }

    .chat-header {
        padding: 9px 10px;
    }

    .mobile-chat-back {
        display: flex;
    }

    .chat-actions {
        gap: 5px;
    }

    .take-chat-btn,
    .assistant-toggle,
    .chat-actions .icon-btn {
        width: 34px;
        padding: 0;
        justify-content: center;
    }

    .message-bubble { max-width: 88%; }
    .message-history { padding: 16px 12px; }
    .message-input-area { padding: 9px 10px; }
    .admin-workspace { position: fixed; inset: 0 0 0 var(--rail-width); z-index: 12; }
    .customer-panel { z-index: 13; }
    .admin-topbar span { display: none; }
    .admin-close-btn span { display: inline; }
    .counter-form { grid-template-columns: 1fr; }
}

/* --- Identidad corporativa Shoes Tatiana y utilidades de conversación --- */
.send-btn,
.customer-avatar,
.voice-play-button { background: #0a4f91; }

.send-btn:hover,
.voice-play-button:hover,
.voice-play-button:focus-visible { background: #073b72; }

.message-row.me .message-bubble { background: #dcecff; }

.message-bubble.has-audio {
    width: 410px;
    max-width: min(92%, 410px);
    padding: 9px 12px;
    overflow: hidden;
    border: 1px solid rgba(10, 79, 145, 0.12);
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(7, 59, 114, 0.09);
}

.voice-message {
    min-height: 52px;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 11px;
}

.voice-play-button,
.message-row.me .voice-play-button {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    color: #ffffff;
    background: #0a4f91;
    box-shadow: 0 7px 18px rgba(10, 79, 145, 0.24);
}

.message-row.me .voice-play-button:hover,
.message-row.me .voice-play-button:focus-visible {
    color: #ffffff;
    background: #073b72;
}

.voice-waveform { height: 28px; gap: 2px; }

.voice-wave-bar,
.message-row.me .voice-wave-bar {
    min-width: 2px;
    border-radius: 999px;
    background: #bfd0e2;
}

.voice-wave-bar.active,
.message-row.me .voice-wave-bar.active { background: #0a4f91; }

.voice-timing,
.message-row.me .voice-timing {
    justify-content: flex-start;
    gap: 6px;
    color: #0a4f91;
    font-weight: 700;
}

.voice-timing span:first-child::before { content: '•'; margin-right: 5px; }
.voice-timing span:last-child::before { content: '/'; margin-right: 6px; color: #8da5bd; }

.chat-pref-icon { color: #0a4f91; font-size: 0.67rem; }
.chat-pref-icon.blocked { color: #c53e4c; }

.chat-context-menu {
    position: fixed;
    z-index: 1400;
    width: min(320px, calc(100vw - 20px));
    padding: 8px;
    color: #f7fbff;
    background: rgba(7, 27, 50, 0.97);
    border: 1px solid rgba(151, 193, 231, 0.18);
    border-radius: 14px;
    box-shadow: 0 22px 55px rgba(5, 25, 48, 0.35);
    backdrop-filter: blur(18px);
}

.chat-context-menu button {
    width: 100%;
    min-height: 42px;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    padding: 0 12px;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: 9px;
    font: inherit;
    font-size: 0.88rem;
    text-align: left;
    cursor: pointer;
}

.chat-context-menu button:hover,
.chat-context-menu button:focus-visible { outline: none; background: #0a4f91; }

.chat-context-menu button i {
    width: 18px;
    color: #a9c9e8;
    text-align: center;
}

.chat-context-menu .context-danger { color: #ffb3ba; }
.chat-context-menu .context-danger i { color: #ff8e99; }
.chat-context-separator { height: 1px; margin: 6px 8px; background: rgba(255, 255, 255, 0.13); }

.profile-status {
    padding: 4px 8px;
    border-radius: 999px;
    color: #687782;
    background: #edf0f2;
    font-size: 0.66rem;
    font-weight: 700;
}

.profile-status.complete { color: #073b72; background: #dcecff; }
.profile-status.loading { color: #766312; background: #fff4cb; }
.profile-status.error { color: #a62d39; background: #ffe6e8; }
.registration-fields > div { grid-template-columns: 104px minmax(0, 1fr); }
.registration-fields dt i,
.text-action,
.lead-tag { color: #0a4f91; }
.lead-tag { background: #dcecff; }
.registration-fields .empty-value { color: #9aa7b0; }

.display-name-choice { display: grid; gap: 7px; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); }
.display-name-choice.hidden { display: none; }
.display-name-label { color: var(--text); font-size: 12px; font-weight: 800; }
.display-name-choice button { display: grid; grid-template-columns: 18px 1fr; align-items: center; gap: 9px; width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--text); text-align: left; cursor: pointer; }
.display-name-choice button > i { color: var(--primary); font-size: 15px; opacity: 0.68; }
.display-name-choice button span { display: grid; gap: 1px; min-width: 0; }
.display-name-choice button strong { color: var(--primary); font-size: 13px; }
.display-name-choice button small { overflow: hidden; color: #2368a9; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.display-name-choice button.active { border-color: #a8caee; background: #edf6ff; }
.display-name-choice button.active > i { color: var(--primary); opacity: 1; }
.display-name-choice button > i,
.display-name-choice button.active > i { color:#0a579f !important; }
.display-name-choice button:not(.active) > i { color:#7fb1df !important; opacity:1; }
.display-name-choice button strong,
.display-name-choice button small { color:#155da5 !important; }
.display-name-choice > .display-name-label { color:#172536 !important; }

.detail-heading-actions { display: flex; align-items: center; gap: 8px; }
.customer-edit-dialog { width: min(620px, 100%); max-height: min(760px, calc(100vh - 32px)); overflow: auto; }
.contact-dialog-header > div { display: grid; gap: 2px; }
.contact-dialog-header > div small { color: var(--muted); font-size: 0.7rem; }
.customer-edit-section { display: grid; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); }
.customer-edit-section > strong { color: var(--text); font-size: 0.82rem; }
.customer-edit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.customer-edit-grid label { margin: 0; }
.customer-edit-grid label > small { display: block; margin-top: 4px; color: var(--muted); font-size: 0.65rem; line-height: 1.3; }
.customer-edit-grid input[readonly] { color: var(--muted); background: #eef3f7; cursor: not-allowed; }
.customer-edit-wide { grid-column: 1 / -1; }
.customer-edit-dialog .contact-dialog-actions { margin-top: 4px; }
.customer-edit-dialog .assistant-primary { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 7px; min-width: 150px; }

@media (max-width: 620px) {
    .customer-edit-grid { grid-template-columns: 1fr; }
    .customer-edit-wide { grid-column: auto; }
}

.rail-brand,
.icon-btn:hover { color: #0a4f91; }
.rail-btn.active::before,
.inbox-filter.active span,
.chat-item.active .chat-avatar,
.unread-badge,
.status-dot,
.journey-dot { background: #0a4f91; }
.inbox-filter.active {
    color: #073b72;
    background: #e7f1fb;
    border-color: #cbdff2;
}
.chat-item.active {
    background: #eaf3fc;
    box-shadow: inset 3px 0 #0a4f91;
}
.chat-avatar {
    color: #0a4f91;
    background: #e2edf8;
}
.chat-stage-badge {
    color: #0a4f91;
    background: #e2edf8;
}
.take-chat-btn {
    background: #073b72;
    border-color: #073b72;
}
.take-chat-btn.return-ai {
    color: #0a4f91;
    background: #e7f1fb;
    border-color: #aac8e5;
}
.status-dot,
.journey-dot { box-shadow: 0 0 0 3px #e2edf8; }

/* --- Operación comercial: clasificación, contactos, notas y composer --- */
.type-filters {
    display: flex;
    gap: 6px;
    padding: 0 14px 12px;
    overflow-x: auto;
    border-bottom: 1px solid #e4ebf2;
    background: #fff;
}
.type-filter {
    flex: 0 0 auto;
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid #dbe5ef;
    border-radius: 999px;
    color: #657787;
    background: #f8fafc;
    font: 600 .7rem var(--font-main);
    cursor: pointer;
}
.type-filter.active { color: #fff; border-color: #0a4f91; background: #0a4f91; box-shadow: 0 5px 15px rgba(10,79,145,.18); }
.type-filter i { margin-right: 4px; }
.chat-badges { display: flex; align-items: center; gap: 5px; margin-top: 5px; }
.chat-type-badge { padding: 3px 6px; border-radius: 5px; color: #5f6e7a; background: #eef2f5; font-size: .56rem; font-weight: 800; text-transform: uppercase; }
.chat-type-badge.order { color: #064985; background: #dcecff; }
.chat-type-badge.inquiry { color: #08766f; background: #dff6f2; }
.conversation-type-control {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 9px;
    border: 1px solid #d9e4ee;
    border-radius: 9px;
    color: #0a4f91;
    background: #fff;
}
.conversation-type-control select { border: 0; outline: 0; color: #263746; background: transparent; font: 700 .72rem var(--font-main); }
.composer-shell { position: relative; border-top: 1px solid #dfe7ee; background: #fff; }
.composer-tabs { height: 36px; display: flex; align-items: end; gap: 0; padding: 0 18px; border-bottom: 1px solid #edf1f5; }
.composer-tab { height: 36px; border: 0; border-bottom: 2px solid transparent; color: #8492a0; background: transparent; font: 700 .72rem var(--font-main); cursor: pointer; }
.composer-tab + .composer-tab { position: relative; margin-left: 14px; padding-left: 15px; }
.composer-tab + .composer-tab::before { content: ''; position: absolute; top: 9px; bottom: 9px; left: 0; width: 1px; background: #dce4ea; }
.composer-tab.active { color: #0a4f91; border-color: #0a4f91; }
.composer-tabs > span { margin: 0 0 9px auto; color: #92a0ac; font-size: .65rem; }
.composer-note-count { min-width: 17px; height: 17px; display: inline-grid; place-items: center; margin-left: 4px; padding: 0 4px; color: #6e7f8d; font-size: .55rem; border-radius: 999px; background: #e8edf1; }
.composer-note-count.has-notes { color: #58738c; background: #dce7f0; }
.composer-note-count.has-unread { color: #fff; background: #0a4f91; box-shadow: 0 0 0 2px rgba(10,79,145,.08); }
.send-shortcut-hint { display: inline-flex; align-items: center; gap: 4px; color: #85939e; font-size: .56rem; white-space: nowrap; }
.send-shortcut-hint kbd { padding: 2px 4px; color: #607482; font: 700 .55rem var(--font-main); border: 1px solid #d8e1e7; border-radius: 4px; background: #fff; }
@media (max-width: 900px) { .send-shortcut-hint { display: none; } }
.message-input-area { gap: 8px; padding: 10px 14px 13px; border: 0; }
.message-input-area textarea { flex: 1; min-width: 0; max-height: 100px; resize: none; padding: 10px 12px; border: 0; outline: 0; color: #20303d; background: #f5f8fb; border-radius: 10px; font: 500 .82rem var(--font-main); }
.message-input-area.note-mode { background: #fffaf0; }
.message-input-area.note-mode textarea { background: #fff4d9; }
.composer-tools { display: flex; align-items: center; gap: 2px; }
.composer-tool { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 8px; color: #526779; background: transparent; cursor: pointer; }
.composer-tool:hover { color: #0a4f91; background: #e9f2fb; }
.composer-tool.danger { color: #be4050; }
.composer-popover { position: absolute; z-index: 30; left: 14px; bottom: 96px; width: min(360px, calc(100% - 28px)); padding: 10px; border: 1px solid #dbe5ef; border-radius: 14px; background: #fff; box-shadow: 0 18px 45px rgba(7,59,114,.18); }
.emoji-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.emoji-grid button { height: 38px; border: 0; border-radius: 8px; background: transparent; font-size: 1.25rem; cursor: pointer; }
.emoji-grid button:hover { background: #edf4fb; }
.quick-replies { display: grid; gap: 7px; }
.quick-replies > strong { padding: 5px 7px; color: #20303d; }
.quick-replies button { display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: center; padding: 9px; border: 1px solid #e2eaf1; border-radius: 10px; color: #253746; background: #fff; text-align: left; cursor: pointer; }
.quick-replies button:hover { border-color: #9fc1e1; background: #f3f8fd; }
.quick-replies button > b { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 7px; color: #fff; background: #0a4f91; }
.quick-replies span { display: grid; gap: 2px; }
.quick-replies small { color: #82919e; }
.attachment-preview,.recording-preview { margin: 9px 14px 0; min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 8px 11px; border: 1px solid #d8e5f1; border-radius: 14px; color: #0a4f91; background: #f5faff; }
.recording-preview { border-radius: 999px; }
.recording-time { min-width: 38px; font-weight: 800; }
.recording-wave { flex: 1; height: 28px; display: flex; align-items: center; gap: 3px; overflow: hidden; }
.recording-wave i { width: 3px; height: 7px; border-radius: 99px; background: #0a4f91; animation: wave 1s ease-in-out infinite alternate; }
.recording-wave i:nth-child(3n) { height: 22px; animation-delay: .25s; }
.recording-wave i:nth-child(2n) { height: 14px; animation-delay: .5s; }
@keyframes wave { to { transform: scaleY(.45); opacity: .55; } }
.recording-save { width: 38px; height: 38px; border: 0; border-radius: 50%; color: #fff; background: #0a4f91; cursor: pointer; }
.internal-note { justify-content: center !important; margin: 14px 0; }
.internal-note-card { width: min(560px, 88%); padding: 12px 14px; border: 1px solid #eed08c; border-radius: 12px; color: #5f4a19; background: #fff8df; box-shadow: 0 7px 18px rgba(129,96,25,.08); }
.internal-note-card > div { display: flex; align-items: center; gap: 7px; }
.internal-note-card > div span { margin-left: auto; color: #957c45; font-size: .67rem; }
.internal-note-card p { margin: 8px 0; line-height: 1.45; }
.internal-note-card small { color: #927b47; }

/* Historial compacto con identidad visual por participante. */
.message-history { gap: 5px; }
.message-row { align-items: flex-end; gap: 8px; }
.message-sender-avatar { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; margin-bottom: 2px; color: #0a4f91; border-radius: 50%; background: #e4eef8; font-size: .7rem; font-weight: 800; }
.message-row.me .message-sender-avatar { color: #fff; background: #0a4f91; }
.message-sender-avatar.placeholder { visibility: hidden; }
.message-content-stack { max-width: min(74%, 620px); display: flex; flex-direction: column; align-items: flex-start; }
.message-row.me .message-content-stack { align-items: flex-end; }
.message-content-stack .message-bubble { max-width: 100%; }
.message-sender-name { margin: 0 3px 4px; color: #344b5b; font-size: .66rem; font-weight: 800; }
.message-row.me .message-sender-name { text-align: right; }
.internal-note { margin: 6px 0; }
.internal-note-card { width: min(440px, 70%); padding: 8px 10px; border-radius: 9px; box-shadow: 0 2px 7px rgba(129,96,25,.05); }
.internal-note-card > div { gap: 5px; }.internal-note-card > div strong { font-size: .7rem; }.internal-note-card > div span { font-size: .56rem; }
.internal-note-card p { margin: 5px 0; font-size: .72rem; line-height: 1.35; }.internal-note-card small { font-size: .56rem; }
@media (max-width: 700px) { .message-content-stack { max-width: calc(88% - 38px); }.internal-note-card { width: 86%; } }

.contacts-workspace { position: absolute; inset: 0 0 0 var(--rail-width); z-index: 20; display: none; flex-direction: column; color: #1e2c37; background: #f7fafc; }
.contacts-workspace.active { display: flex; }
.contacts-toolbar { display: flex; gap: 8px; padding: 10px 20px; border-bottom: 1px solid #e2e9ef; background: #fff; }
.contacts-toolbar .admin-select { width:min(210px,32vw); height:36px; padding:0 10px; border-radius:8px; font-size:.66rem; }
.contacts-toolbar input { flex: 1; max-width: 390px; height:36px; padding: 0 11px; border: 1px solid #d6e1ea; border-radius: 8px; font:600 .66rem var(--font-main); }
.contacts-grid { padding: 16px 20px; display: grid; grid-template-columns: repeat(auto-fill,minmax(245px,1fr)); gap: 9px; overflow: auto; }
.contact-card { min-height: 78px; display: grid; grid-template-columns: 38px minmax(0,1fr) auto; gap: 9px; align-items: center; padding: 11px 12px; border: 1px solid #dbe5ee; border-radius: 11px; background: #fff; box-shadow: 0 4px 13px rgba(7,59,114,.045); }
.contact-card-avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: linear-gradient(145deg,#0a4f91,#0d6abb); font-size:.72rem; font-weight: 800; }
.contact-card > div:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.contact-card strong { overflow:hidden; font-size:.7rem; white-space:nowrap; text-overflow:ellipsis; }
.contact-card span,.contact-card small { color: #6f8090; overflow: hidden; font-size:.61rem; line-height:1.25; text-overflow: ellipsis; }
.contact-card .contact-card-avatar > span { color:#fff; }
.contact-card button { padding: 6px 8px; border: 1px solid #b8d0e6; border-radius: 7px; color: #0a4f91; background: #edf5fc; font:700 .61rem var(--font-main); white-space:nowrap; cursor: pointer; }
.summary-grid { display: grid; grid-template-columns: repeat(3,minmax(180px,1fr)); gap: 16px; }
.summary-card { min-height: 128px; display: flex; align-items: center; gap: 16px; padding: 22px; border: 1px solid #dce6ef; border-radius: 15px; background: #fff; box-shadow: 0 9px 25px rgba(7,59,114,.07); }
.summary-card > i { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; color: #0a4f91; background: #e5f1fc; font-size: 1.2rem; }
.summary-card div { display: grid; }.summary-card strong { color: #172a3b; font-size: 1.8rem; }.summary-card span { color: #708291; }
.bot-content-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); align-items:start; gap: 12px; }
.bot-content-card { display: grid; gap: 12px; padding: 18px; border: 1px solid #dce5ed; border-radius: 14px; background: #fff; }
.bot-content-card label { display: grid; gap: 6px; color: #526574; font-size: .76rem; font-weight: 700; }
.bot-content-card input,.bot-content-card textarea,.bot-content-card select { width: 100%; padding: 10px 11px; border: 1px solid #d6e1e9; border-radius: 8px; color: #20313e; background: #fbfdff; font: 500 .78rem var(--font-main); }
.bot-content-create { border-color: #a9c9e7; background: #f5faff; }
.bot-content-create > strong { display:flex; align-items:center; gap:7px; color:#0a4f91; font-size:.82rem; }
.bot-create-launch { grid-column:1/-1; display:flex; }
.bot-create-launch button { display:flex; align-items:center; gap:8px; padding:9px 13px; border:1px solid #a9c9e7; border-radius:9px; color:#0a579f; background:#eef7fd; font:800 .68rem var(--font-main); cursor:pointer; transition:background .16s ease,color .16s ease,transform .16s ease; }
.bot-create-launch button:hover { color:#fff; background:#0a579f; transform:translateY(-1px); }
.bot-file-field small { display:block; margin-top:3px; color:#7c8d9a; font-size:.58rem; font-weight:600; }
.bot-file-field input[type="file"] { padding:5px; color:#647888; background:#fff; font-size:.66rem; cursor:pointer; }
.bot-file-field input[type="file"]::file-selector-button { margin-right:9px; padding:7px 10px; border:0; border-radius:7px; color:#fff; background:#0a4f91; font:800 .62rem var(--font-main); cursor:pointer; transition:background .18s ease,transform .18s ease; }
.bot-file-field input[type="file"]::file-selector-button:hover { background:#083f74; }
.bot-file-field input[type="file"]:focus { outline:2px solid rgba(10,79,145,.16); outline-offset:1px; }
.bot-current-media { display:flex; align-items:center; gap:9px; padding:9px 10px; color:#536a7a; border:1px solid #d7e5ef; border-radius:9px; background:#f4f9fd; }
.bot-current-media > i { width:28px; height:28px; display:grid; place-items:center; flex:0 0 28px; color:#0a4f91; border-radius:7px; background:#e0eefb; }
.bot-current-media > span { min-width:0; display:grid; gap:1px; }.bot-current-media strong { color:#263b4b; font-size:.68rem; }.bot-current-media small { color:#748796; font-size:.58rem; }
.bot-read-card { display:grid; align-content:start; gap:10px; padding:14px; border:1px solid #dce6ef; border-radius:13px; background:#fff; box-shadow:0 5px 16px rgba(7,59,114,.045); }
.bot-read-card header { display:grid; grid-template-columns:36px minmax(0,1fr) auto; align-items:center; gap:9px; }
.bot-read-icon { width:36px; height:36px; display:grid; place-items:center; color:#0a579f; border-radius:10px; background:#e8f2fc; }
.bot-read-card header > div { min-width:0; display:grid; gap:2px; }.bot-read-card header strong { overflow:hidden; color:#1b2e3e; font-size:.73rem; white-space:nowrap; text-overflow:ellipsis; }.bot-read-card header small { color:#708493; font-size:.59rem; }
.bot-read-card > p { margin:0; color:#435969; font-size:.65rem; line-height:1.45; }
.bot-read-media { display:flex; align-items:center; gap:6px; width:max-content; max-width:100%; padding:5px 8px; color:#0a579f; border-radius:7px; background:#edf6fd; font-size:.58rem; font-weight:700; }
.bot-read-card footer { display:grid; gap:3px; margin-top:auto; padding-top:9px; color:#758694; border-top:1px solid #e7edf2; font-size:.54rem; }.bot-read-card footer span { display:flex; align-items:center; gap:5px; }
.bot-read-actions { display:flex; align-items:center; gap:6px; }

.menu-builder-help { display:flex; align-items:center; gap:9px; margin:0 0 14px; padding:10px 12px; border:1px solid #cfe0ef; border-radius:10px; color:#36566f; background:#f2f8fd; font-size:.64rem; }
.menu-builder-help i { color:#0a579f; }
.menu-builder-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; }
.menu-builder-card { display:grid; gap:11px; padding:14px; border:1px solid #dce6ef; border-radius:14px; background:#fff; box-shadow:0 5px 16px rgba(7,59,114,.04); }
.menu-builder-card header { display:grid; grid-template-columns:38px minmax(0,1fr) auto; align-items:center; gap:9px; }
.menu-builder-card header > span { width:38px; height:38px; display:grid; place-items:center; border-radius:10px; color:#0a579f; background:#e8f2fc; }
.menu-builder-card header > div { min-width:0; display:grid; gap:2px; }.menu-builder-card header strong { color:#1b2e3e; font-size:.72rem; }.menu-builder-card header small { color:#758694; font-size:.56rem; }
.menu-builder-card header > b { padding:5px 7px; border-radius:99px; font-size:.5rem; }.menu-builder-card header > b.published { color:#08775e; background:#e5f7f1; }.menu-builder-card header > b.draft { color:#8a5b00; background:#fff4d6; }
.menu-builder-card > p { min-height:38px; margin:0; color:#435969; font-size:.63rem; line-height:1.45; }
.menu-card-meta { display:flex; align-items:center; justify-content:space-between; color:#718493; font-size:.55rem; }.menu-card-meta span { display:flex; align-items:center; gap:5px; }
.menu-builder-card footer { display:flex; flex-wrap:wrap; gap:6px; padding-top:10px; border-top:1px solid #e6edf3; }.menu-builder-card footer button { min-height:31px; display:flex; align-items:center; justify-content:center; gap:5px; flex:1 1 auto; border:1px solid #c9dbea; border-radius:8px; color:#0a579f; background:#f7fbfe; font:800 .55rem var(--font-main); cursor:pointer; }.menu-builder-card footer button[data-menu-publish] { color:#fff; border-color:#0a579f; background:#0a579f; }.menu-builder-card footer button.danger { flex:0 0 34px; color:#bf2d3d; border-color:#ffd2d7; background:#fff7f8; }.menu-builder-card footer button:disabled { color:#8a9aa6; border-color:#dde5eb; background:#f3f6f8; cursor:default; }
.menu-editor-dialog { width:min(820px,94vw); max-height:92vh; }
.menu-editor-fields { display:grid; grid-template-columns:minmax(0,1fr) 190px; gap:10px; }
.menu-options-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:4px; }.menu-options-heading > div { display:grid; gap:2px; }.menu-options-heading strong { color:#213647; }.menu-options-heading small { color:#7a8c99; font-size:.56rem; }.menu-options-heading button { width:auto; min-width:0; height:30px; padding:0 9px; display:inline-flex; align-items:center; justify-content:center; gap:5px; border:1px solid #bfd5e7; border-radius:7px; color:#0a579f; background:#eef6fc; font:800 .57rem var(--font-main); line-height:1; cursor:pointer; white-space:nowrap; }
.menu-options-list { display:grid; gap:8px; }
.menu-option-row { display:grid; grid-template-columns:38px minmax(0,1fr) 30px; gap:8px; align-items:start; padding:10px; border:1px solid #dce6ee; border-radius:11px; background:#f9fbfd; }
.menu-option-number input { width:34px; height:34px; padding:0; border:0; border-radius:9px; color:#fff; background:#0a579f; text-align:center; font-weight:900; }
.menu-option-order { display:flex; justify-content:center; gap:2px; margin-top:5px; }.menu-option-order button { width:16px; height:20px; padding:0; border:0; border-radius:5px; color:#597081; background:#e8f0f6; cursor:pointer; font-size:.48rem; }
.menu-option-main { display:grid; gap:7px; }.menu-option-main label { display:grid; gap:4px; }.menu-option-main label > span { color:#566d7d; font-size:.55rem; font-weight:800; }.menu-option-main input,.menu-option-main select { min-width:0; height:34px; padding:0 9px; border:1px solid #d0dfea; border-radius:8px; color:#243848; background:#fff; font:700 .59rem var(--font-main); }
.menu-option-action { display:grid; grid-template-columns:190px minmax(0,1fr); gap:7px; }.menu-commercial-check { display:flex!important; grid-template-columns:auto 1fr; align-items:center; gap:7px!important; }.menu-commercial-check input { width:15px;height:15px; }.menu-commercial-check span { font-size:.55rem!important; }
.menu-option-remove { width:30px;height:30px;display:grid;place-items:center;border:0;border-radius:8px;color:#cf4960;background:#fff0f2;cursor:pointer; }
.menu-draft-save { min-height:38px; display:flex;align-items:center;justify-content:center;gap:8px;width:100%;border:0;border-radius:9px;color:#fff;background:#0a579f;font-weight:900;cursor:pointer; }
.consent-admin-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(310px,1fr)); gap:12px; }
.consent-admin-card { display:grid; gap:10px; padding:14px; border:1px solid #dce6ef; border-radius:14px; background:#fff; }
.consent-admin-card header { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }.consent-admin-card header > div { display:grid;gap:2px; }.consent-admin-card header strong { color:#1b2e3e;font-size:.7rem; }.consent-admin-card header small { color:#718493;font-size:.55rem; }.consent-admin-card header > span { padding:5px 7px;border-radius:99px;font-size:.5rem;font-weight:900; }.consent-admin-card header > span.accepted {color:#08775e;background:#e5f7f1}.consent-admin-card header > span.declined {color:#a03d4d;background:#fff0f2}
.consent-status-row { display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 9px;border-radius:8px;color:#506777;background:#f6f9fb;font-size:.58rem; }.consent-status-row span {display:flex;align-items:center;gap:6px}.consent-status-row i{color:#0a579f}.consent-status-row b{color:#263a49}
.consent-admin-card footer { display:flex;gap:7px;padding-top:3px; }.consent-admin-card footer button {min-height:33px;display:flex;align-items:center;justify-content:center;gap:6px;flex:1;border:1px solid #cbdce9;border-radius:8px;color:#0a579f;background:#f8fbfd;font:800 .54rem var(--font-main);cursor:pointer}.consent-admin-card footer button:first-child{color:#fff;border-color:#0a579f;background:#0a579f}
@media (max-width:760px) { .menu-editor-fields,.menu-option-action { grid-template-columns:1fr; }.menu-builder-grid { grid-template-columns:1fr; } }
.bot-edit-icon,.bot-delete-icon,.bot-editor-save { position:relative; width:34px; height:34px; display:grid; place-items:center; border:1px solid #c9dbea; border-radius:9px; color:#0a579f; background:#f3f8fd; cursor:pointer; transition:background .16s ease,color .16s ease,transform .16s ease; }
.bot-edit-icon:hover,.bot-editor-save:hover { color:#fff; background:#0a579f; transform:translateY(-1px); }
.bot-delete-icon { color:#b13e49; border-color:#f0c9ce; background:#fff6f7; }.bot-delete-icon:hover { color:#fff; background:#b13e49; transform:translateY(-1px); }
.bot-edit-icon::after,.bot-delete-icon::after,.bot-editor-save::after { content:attr(data-tooltip); position:absolute; right:0; bottom:calc(100% + 7px); z-index:4; padding:4px 7px; border-radius:5px; color:#fff; background:#102b44; font:700 .52rem var(--font-main); white-space:nowrap; opacity:0; pointer-events:none; transform:translateY(3px); transition:opacity .15s ease,transform .15s ease; }
.bot-edit-icon:hover::after,.bot-delete-icon:hover::after,.bot-editor-save:hover::after { opacity:1; transform:translateY(0); }
.bot-editor-modal { position:fixed; inset:0; z-index:5000; display:grid; place-items:center; padding:22px; background:rgba(7,24,40,.44); opacity:0; transition:opacity .18s ease; }
.bot-editor-modal.open { opacity:1; }.bot-editor-modal.hidden { display:none; }
.bot-editor-dialog { width:min(620px,96vw); max-height:90vh; overflow:auto; border:1px solid #d4e1ec; border-radius:17px; background:#fff; box-shadow:0 24px 70px rgba(4,28,51,.25); transform:translateY(10px) scale(.985); transition:transform .18s ease; }
.bot-editor-modal.open .bot-editor-dialog { transform:translateY(0) scale(1); }
.bot-editor-dialog > header { position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid #e2eaf0; background:#fff; }
.bot-editor-dialog > header > div { display:flex; align-items:center; gap:10px; }.bot-editor-dialog > header > div > span { width:34px; height:34px; display:grid; place-items:center; color:#0a579f; border-radius:9px; background:#e8f2fc; }.bot-editor-dialog > header div div { display:grid; gap:1px; }.bot-editor-dialog > header strong { color:#1c3040; font-size:.78rem; }.bot-editor-dialog > header small { color:#718391; font-size:.56rem; }
.bot-editor-dialog > header button { width:32px; height:32px; border:0; border-radius:8px; color:#607788; background:#edf3f7; cursor:pointer; }
.bot-editor-form { display:grid; gap:11px; padding:16px; }.bot-editor-form label { display:grid; gap:5px; color:#526574; font-size:.68rem; font-weight:750; }.bot-editor-form label > span small { display:block; margin-top:2px; color:#82909b; font-size:.54rem; }
.bot-editor-form input,.bot-editor-form textarea,.bot-editor-form select { width:100%; padding:9px 10px; border:1px solid #d6e1e9; border-radius:8px; color:#20313e; background:#fbfdff; font:600 .68rem var(--font-main); }
.bot-editor-form select:disabled { color:#0a579f; background:#eef6fd; opacity:1; cursor:not-allowed; }
.bot-fixed-type-note,.bot-flow-note { display:flex; align-items:center; gap:9px; padding:9px 10px; border:1px solid #cfe0ee; border-radius:9px; color:#476173; background:#f3f8fc; font-size:.61rem; }
.bot-fixed-type-note > i { width:27px; height:27px; display:grid; place-items:center; flex:0 0 27px; border-radius:7px; color:#0a579f; background:#e1eef9; }
.bot-flow-note span { display:grid; gap:2px; }.bot-flow-note strong { color:#203847; font-size:.66rem; }.bot-flow-note small { color:#6e8291; font-size:.56rem; line-height:1.35; }
.bot-gallery-editor { display:grid; gap:8px; padding:10px; border:1px solid #d5e3ee; border-radius:10px; background:#f7fbfe; }
.bot-gallery-editor > header { display:flex; align-items:center; justify-content:space-between; gap:10px; }.bot-gallery-editor > header > div { display:grid; gap:2px; }.bot-gallery-editor > header strong { color:#233a4a; font-size:.68rem; }.bot-gallery-editor > header small { color:#718695; font-size:.54rem; }
.bot-gallery-editor > header button { display:flex; align-items:center; gap:5px; height:29px; padding:0 9px; border:1px solid #b9d3e8; border-radius:7px; color:#0a579f; background:#fff; font:800 .57rem var(--font-main); cursor:pointer; }
.bot-gallery-editor [data-promotion-list] { display:grid; gap:8px; }
.bot-promotion-row { display:grid; gap:7px; padding:9px; border:1px solid #dce7ef; border-radius:9px; background:#fff; }
.bot-promotion-row-head { display:flex; align-items:center; justify-content:space-between; }.bot-promotion-row-head strong { color:#314858; font-size:.63rem; }.bot-promotion-row-head button { width:25px; height:25px; border:0; border-radius:6px; color:#b34250; background:#fff0f1; cursor:pointer; }
.bot-promotion-row textarea { min-height:52px; resize:vertical; }.bot-promotion-file input[type="file"] { padding:4px; font-size:.58rem; background:#fff; }.bot-promotion-file input[type="file"]::file-selector-button { margin-right:7px; padding:6px 8px; border:0; border-radius:6px; color:#fff; background:#0a579f; font:800 .56rem var(--font-main); cursor:pointer; }
.bot-promotion-ready { display:flex; align-items:center; gap:5px; color:#168169; font-size:.56rem; font-weight:750; }
.bot-editor-actions { display:flex; justify-content:flex-end; padding-top:2px; }.bot-editor-save { color:#fff; border-color:#0a579f; background:#0a579f; }.bot-editor-save:disabled { cursor:wait; opacity:.7; }
.bot-editor-save.has-label { width:auto; min-width:132px; padding:0 13px; grid-auto-flow:column; gap:7px; font:800 .63rem var(--font-main); }

@media (max-width: 680px) { .bot-editor-modal { padding:10px; }.bot-editor-dialog { width:100%; max-height:94vh; }.bot-content-grid { grid-template-columns:1fr; } }

@media (max-width: 900px) {
    .composer-tabs > span { display: none; }
    .composer-tools { gap: 0; }
    .composer-tool { width: 30px; }
    .summary-grid { grid-template-columns: 1fr 1fr; }
    .contacts-workspace { left: var(--rail-width); }
}
@media (max-width: 1040px) {
    .customer-panel.pinned { position:absolute; top:0; right:0; flex-basis:auto; box-shadow:-12px 0 30px rgba(32,55,50,.13); }
}

/* Orden final de navegación: estas reglas prevalecen sobre el tema heredado. */
.app-rail .rail-btn.active {
    color: #0a4f91;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(1, 27, 55, .24);
}
.app-rail .rail-btn.active::before { display: none; }
.sidebar .icon-filter-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px;
    padding: 0 10px;
    overflow: visible;
}
.sidebar .icon-filter-row .inbox-filter {
    width: 100%;
    min-width: 0;
    margin: 0;
}

/* Estados de conversación dentro de la barra principal. */
.app-rail .rail-status-btn .rail-count {
    position: absolute;
    top: 3px;
    right: 3px;
    min-width: 14px;
    height: 14px;
    display: grid;
    place-items: center;
    padding: 0 3px;
    border: 0;
    border-radius: 999px;
    color: #073b72;
    background: #dceafb;
    font-size: .48rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: none;
}
.app-rail .rail-status-btn:not(.active) { background: rgba(255, 255, 255, .07); }
.app-rail .rail-status-btn:not(.active):hover { background: rgba(255, 255, 255, .14); }
.app-rail .rail-status-btn.active .rail-count {
    color: #ffffff;
    background: #0a4f91;
}
.app-rail .rail-status-btn {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    padding: 0;
    border-radius: 10px;
    font-size: .9rem;
}
.app-rail .rail-status-btn > i {
    grid-area: 1 / 1;
    margin: 0;
    line-height: 1;
}

/* Nombres visibles al recorrer la navegación lateral. */
.app-rail [data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    z-index: 500;
    top: 50%;
    left: calc(100% + 10px);
    width: max-content;
    max-width: 180px;
    padding: 6px 9px;
    border: 1px solid rgba(189, 211, 231, .9);
    border-radius: 8px;
    color: #ffffff;
    background: #092f55;
    box-shadow: 0 9px 24px rgba(2, 28, 55, .25);
    font: 700 .64rem var(--font-main);
    line-height: 1.2;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translate(-4px, -50%);
    transition: opacity .14s ease, transform .14s ease;
}
.app-rail [data-tooltip]:hover::after,
.app-rail [data-tooltip]:focus-visible::after {
    opacity: 1;
    transform: translate(0, -50%);
}
.app-rail .rail-brand { position: relative; }
.rail-section-divider {
    width: 30px;
    height: 1px;
    margin: 4px 0 3px;
    background: rgba(208, 228, 246, .26);
}
.app-rail #rail-contacts-btn { margin-top: 0; }
.rail-user-entry { position: relative; display: grid; place-items: center; }
.rail-user-entry .rail-btn.profile-open { color: #0a4f91; background: #ffffff; box-shadow: 0 8px 22px rgba(1,27,55,.24); }
.rail-user-card {
    position: absolute;
    z-index: 230;
    top: 50%;
    left: calc(100% + 12px);
    width: 258px;
    padding: 12px;
    border: 1px solid #d4e1ec;
    border-radius: 13px;
    color: #243746;
    background: #ffffff;
    box-shadow: 0 18px 48px rgba(3,37,71,.24);
    transform: translateY(-50%);
}
.rail-user-card-header { display: grid; grid-template-columns: 38px minmax(0,1fr) 26px; gap: 9px; align-items: center; padding-bottom: 10px; border-bottom: 1px solid #e8eef3; }
.rail-user-card-header > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; color: #fff; background: linear-gradient(145deg,#0a4f91,#1675c8); font-size: .82rem; font-weight: 800; }
.rail-user-card-header > div { min-width: 0; display: grid; gap: 2px; }
.rail-user-card-header strong { overflow: hidden; color: #172d3e; font-size: .76rem; white-space: nowrap; text-overflow: ellipsis; }
.rail-user-card-header small { color: #718493; font-size: .58rem; }
.rail-user-card-header button { width: 26px; height: 26px; border: 0; border-radius: 7px; color: #738594; background: #f0f4f7; cursor: pointer; }
.rail-user-card dl { display: grid; gap: 7px; margin: 10px 0; }
.rail-user-card dl > div { display: grid; grid-template-columns: 82px minmax(0,1fr); gap: 8px; align-items: center; }
.rail-user-card dt { color: #7b8c99; font-size: .58rem; }
.rail-user-card dd { margin: 0; overflow: hidden; color: #2b3d4a; font-size: .63rem; font-weight: 700; text-align: right; white-space: nowrap; text-overflow: ellipsis; }
.rail-user-card footer { display: flex; align-items: center; gap: 6px; padding: 8px 9px; border-radius: 8px; color: #16745e; background: #eaf7f3; font-size: .61rem; }
.rail-user-card footer span { width: 7px; height: 7px; border-radius: 50%; background: #18a87f; box-shadow: 0 0 0 3px rgba(24,168,127,.12); }

/* Un mismo contenedor visual para Contactos, Perfil y Configuración. */
.app-rail #rail-contacts-btn,
.app-rail #rail-user-btn,
.app-rail #rail-admin-btn,
.app-rail #logout-btn {
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, .07);
}
.app-rail #rail-contacts-btn:hover,
.app-rail #rail-user-btn:hover,
.app-rail #rail-admin-btn:hover,
.app-rail #logout-btn:hover { background: rgba(255, 255, 255, .14); }
.app-rail #rail-contacts-btn.active,
.app-rail #rail-admin-btn.active,
.app-rail #rail-user-btn.profile-open { color: #0a4f91; background: #ffffff; }
.app-rail #logout-btn:hover { color: #ffb8bf; }

.logout-confirm {
    position: fixed;
    z-index: 420;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(7,24,40,.46);
    backdrop-filter: blur(4px);
}
.logout-confirm-card {
    width: min(390px, 100%);
    display: grid;
    grid-template-columns: 44px minmax(0,1fr);
    gap: 12px;
    padding: 19px;
    border: 1px solid #dce5ec;
    border-radius: 15px;
    color: #203443;
    background: #fff;
    box-shadow: 0 24px 65px rgba(0,24,52,.28);
}
.logout-confirm-card > span { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; color: #b33d49; background: #ffecee; }
.logout-confirm-card > div:nth-child(2) { display: grid; gap: 6px; }
.logout-confirm-card strong { color: #172d3e; font-size: .88rem; }
.logout-confirm-card p { margin: 0; color: #6f8290; font-size: .7rem; line-height: 1.45; }
.logout-confirm-card > div:last-child { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.logout-confirm-card button { height: 35px; padding: 0 13px; border-radius: 8px; font: 700 .68rem var(--font-main); cursor: pointer; }
#logout-cancel { border: 1px solid #d4e0e9; color: #536877; background: #fff; }
#logout-confirm-btn { border: 0; color: #fff; background: #b33d49; }
#bot-delete-cancel { border: 1px solid #d4e0e9; color: #536877; background: #fff; }
#bot-delete-accept { border: 0; color: #fff; background: #b33d49; }
.app-rail #rail-contacts-btn { margin-top: 8px; }

/* Ayuda contextual y validación visible para archivos. */
.upload-tool-wrap { position: relative; display: inline-flex; }
.upload-limit-tooltip {
    position: absolute;
    z-index: 120;
    left: 50%;
    bottom: calc(100% + 11px);
    width: 218px;
    display: grid;
    gap: 3px;
    padding: 10px 12px;
    border: 1px solid #cbd9e5;
    border-radius: 10px;
    color: #526575;
    background: #ffffff;
    font-size: .67rem;
    line-height: 1.35;
    box-shadow: 0 12px 28px rgba(7, 59, 114, .18);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 5px);
    transition: opacity .15s ease, transform .15s ease;
}
.upload-limit-tooltip strong { color: #15334b; font-size: .71rem; }
.upload-limit-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-right: 1px solid #cbd9e5;
    border-bottom: 1px solid #cbd9e5;
    background: #ffffff;
    transform: translate(-50%, -5px) rotate(45deg);
}
.upload-tool-wrap:hover .upload-limit-tooltip,
.upload-tool-wrap:focus-within .upload-limit-tooltip { opacity: 1; transform: translate(-50%, 0); }

.app-notice {
    position: fixed;
    z-index: 400;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(7, 24, 40, .46);
    backdrop-filter: blur(4px);
}
.app-notice-card {
    width: min(430px, 100%);
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 32px;
    gap: 12px;
    align-items: start;
    padding: 20px;
    border: 1px solid #dce5ec;
    border-radius: 16px;
    color: #203443;
    background: #ffffff;
    box-shadow: 0 24px 65px rgba(0, 24, 52, .28);
}
.app-notice-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px; color: #b54736; background: #fff0ec; font-size: 1.15rem; }
.app-notice-card strong { display: block; margin: 2px 0 6px; color: #152b3c; font-size: .95rem; }
.app-notice-card p { margin: 0; color: #647887; font-size: .76rem; line-height: 1.5; }
.app-notice-card > button:first-of-type { width: 32px; height: 32px; border: 0; border-radius: 8px; color: #758795; background: #f1f5f8; cursor: pointer; }
.app-notice-card > button:last-of-type { grid-column: 2 / 4; justify-self: end; min-width: 104px; height: 36px; border: 0; border-radius: 9px; color: #fff; background: #0a4f91; font: 700 .72rem var(--font-main); cursor: pointer; }

/* Menús compactos: misma jerarquía con menos espacio ocupado. */
.chat-context-menu {
    width: min(258px, calc(100vw - 18px));
    padding: 6px;
    border-radius: 11px;
}
.chat-context-menu button {
    min-height: 34px;
    grid-template-columns: 24px minmax(0, 1fr);
    padding: 0 9px;
    border-radius: 7px;
    font-size: .73rem;
}
.chat-context-menu button i { width: 15px; font-size: .76rem; }
.chat-context-separator { margin: 4px 7px; }

.advanced-filter-popover {
    top: 45px;
    width: min(242px, calc(100vw - 82px));
    gap: 8px;
    padding: 11px;
    border-radius: 11px;
}
.advanced-filter-title > strong { font-size: .77rem; }
.advanced-filter-title button { width: 25px; height: 25px; }
.advanced-filter-popover label { gap: 3px; font-size: .62rem; }
.advanced-filter-popover select { height: 32px; padding: 0 8px; border-radius: 7px; font-size: .68rem; }
.clear-filter-btn { height: 31px; border-radius: 7px; font-size: .66rem; }

.operator-menu { top: 41px; right: 42px; width: 180px; padding: 9px 11px; border-radius: 9px; }
.operator-menu strong { font-size: .75rem; }
.operator-menu small { font-size: .61rem; }

.internal-note-bell { position: relative; }
.internal-note-bell.has-notifications { color: #0a4f91; background: #e9f3fc; }

/* Barra superior unificada y búsqueda global */
#crm-view { position: relative; }
.global-app-topbar {
    position: absolute;
    z-index: 30;
    top: 0;
    right: 0;
    left: var(--rail-width);
    height: 64px;
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(280px, 1fr) auto;
    align-items: center;
    border-bottom: 1px solid var(--panel-border);
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 5px 18px rgba(19, 46, 72, .04);
}
.global-app-title { min-width: 0; padding: 0 20px; }
.global-app-title strong { display: block; color: #172c3e; font-size: 1.02rem; }
.global-app-title small { display: block; margin-top: 1px; color: #718292; font-size: .72rem; }
.global-search-shell {
    position: relative;
    width: min(600px, calc(100% - 30px));
    justify-self: center;
}
.global-search-shell > i { position: absolute; z-index: 1; top: 50%; left: 15px; transform: translateY(-50%); color: #607789; }
.global-search-shell input {
    width: 100%; height: 40px; padding: 0 64px 0 41px;
    color: #20384a; font: 600 .85rem var(--font-main);
    border: 1px solid #dce6ed; border-radius: 13px; outline: none; background: #f3f7f9;
    transition: border-color .18s, box-shadow .18s, background .18s;
}
.global-search-shell input:focus { border-color: #78a8d3; background: #fff; box-shadow: 0 0 0 3px rgba(10,79,145,.09); }
.global-search-shell kbd { position: absolute; top: 9px; right: 11px; padding: 3px 7px; color: #6d8090; font: 700 .68rem var(--font-main); border: 1px solid #dbe5eb; border-radius: 6px; background: #fff; }
.global-search-results {
    position: absolute; z-index: 90; top: 47px; right: 0; left: 0;
    max-height: 370px; overflow: auto; padding: 7px;
    border: 1px solid #d9e5ec; border-radius: 14px; background: #fff;
    box-shadow: 0 18px 44px rgba(17,46,73,.18);
}
.global-search-results button { width: 100%; display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 10px; padding: 9px; text-align: left; color: #20384a; border: 0; border-radius: 9px; background: transparent; cursor: pointer; }
.global-search-results button:hover,.global-search-results button.active { background: #edf5fb; }
.global-search-results button > i { width: 34px; height: 34px; display: grid; place-items: center; color: #0a4f91; border-radius: 9px; background: #e5f0fa; }
.global-search-results button strong,.global-search-results button small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.global-search-results button strong { font-size: .82rem; }.global-search-results button small { margin-top: 2px; color: #748695; font-size: .7rem; }
.global-search-empty { padding: 16px; color: #718292; font-size: .8rem; text-align: center; }
.global-top-actions { position: relative; height: 100%; display: flex; align-items: center; gap: 9px; padding: 0 18px; border-left: 1px solid #edf1f4; }
.global-top-actions .icon-btn { color: #526b7e; border-color: #dce6ed; background: #f7fafb; }
.global-top-actions .operator-chip { height: 40px; border-color: #dce6ed; background: #fff; }
.global-top-actions .operator-menu,.global-top-actions .internal-note-panel { top: 56px; right: 16px; }
.global-top-actions .internal-note-panel { right: 74px; }
.operator-summary { width: 300px; padding: 14px; color: #23394a; border: 1px solid #d8e4ec; border-radius: 14px; background: #fff; box-shadow: 0 16px 42px rgba(15,47,74,.18); }
.operator-summary-head { display: flex; align-items: center; gap: 10px; padding-bottom: 11px; border-bottom: 1px solid #edf1f4; }
.operator-summary-head > span { width: 38px; height: 38px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: #0a4f91; font-weight: 800; }
.operator-summary-head div { min-width: 0; }.operator-summary-head strong,.operator-summary-head small { display: block; }.operator-summary-head small { margin-top: 2px; color: #7a8c99; font-size: .68rem; }
.operator-summary dl { display: grid; gap: 8px; margin: 12px 0; }.operator-summary dl div { display: flex; justify-content: space-between; gap: 16px; }.operator-summary dt { color: #7a8c99; font-size: .7rem; }.operator-summary dd { margin: 0; color: #2d4151; font-size: .72rem; font-weight: 800; text-align: right; }
.operator-summary footer { display: flex; align-items: center; gap: 7px; padding: 9px 10px; color: #08775e; border-radius: 9px; background: #e8f6f1; font-size: .7rem; }.operator-summary footer span,.user-profile-status > span { width: 9px; height: 9px; border-radius: 50%; background: #14a982; box-shadow: 0 0 0 4px rgba(20,169,130,.12); }

.sidebar,.chat-area,.customer-panel { margin-top: 64px; height: calc(100% - 64px); }
.sidebar-compose-row { min-height: 63px; padding: 11px 14px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--panel-border); overflow: hidden; }
.sidebar-compose-row button { height: 40px; display: flex; align-items: center; justify-content: center; gap: 8px; color: #fff; font: 700 .82rem var(--font-main); border: 0; border-radius: 11px; background: #0a4f91; cursor: pointer; }
.sidebar-compose-row button:hover { background: #073b72; }
.sidebar-compose-row #new-message-btn { flex: 1 1 auto; min-width: 0; opacity: 1; transform: translateX(0); transition: flex .32s ease, width .32s ease, opacity .2s ease, transform .32s ease, padding .32s ease; }
.sidebar-client-search { flex: 0 0 40px; width: 40px; height: 40px; display: flex; align-items: center; overflow: hidden; border: 1px solid #d5e2eb; border-radius: 11px; background: #fff; transition: flex .34s cubic-bezier(.2,.8,.2,1), width .34s cubic-bezier(.2,.8,.2,1), box-shadow .2s; }
.sidebar-client-search input { min-width: 0; width: 0; flex: 0 0 0; padding: 0; opacity: 0; color: #263e50; font: 600 .78rem var(--font-main); border: 0; outline: 0; background: transparent; transition: flex .3s ease, width .3s ease, opacity .18s ease .08s; }
.sidebar-client-search #sidebar-search-shortcut,.sidebar-client-search #sidebar-client-search-close { flex: 0 0 38px; width: 38px; height: 38px; border: 0; border-radius: 10px; }
.sidebar-client-search #sidebar-search-shortcut { color: #0a4f91; background: transparent; }
.sidebar-client-search #sidebar-client-search-close { display: none; color: #657b8c; background: transparent; }
.sidebar-compose-row.searching #new-message-btn { flex: 0 0 0; width: 0; padding-inline: 0; opacity: 0; transform: translateX(-16px); pointer-events: none; }
.sidebar-compose-row.searching .sidebar-client-search { flex: 1 1 100%; width: 100%; box-shadow: none; }
.sidebar-compose-row.searching .sidebar-client-search input { flex: 1 1 auto; width: auto; padding: 0 3px; opacity: 1; }
.sidebar-compose-row.searching .sidebar-client-search #sidebar-client-search-close { display: flex; }
.sidebar-compose-row #sidebar-search-shortcut:hover,
.sidebar-compose-row #sidebar-search-shortcut:active,
.sidebar-compose-row #sidebar-search-shortcut:focus,
.sidebar-compose-row #sidebar-client-search-close:hover,
.sidebar-compose-row #sidebar-client-search-close:active,
.sidebar-compose-row #sidebar-client-search-close:focus { color: #0a4f91; outline: none; box-shadow: none; background: transparent; }
#chat-more-btn:focus,#chat-more-btn:focus-visible,#chat-more-btn:active { outline: none; box-shadow: none; }
.admin-workspace,.contacts-workspace { margin-top: 64px; height: calc(100% - 64px); }
.contacts-workspace { top: 0; }
.new-message-dialog { width: min(430px, calc(100vw - 28px)); }
.new-message-dialog .contact-dialog-header > div small { display: block; margin-top: 3px; color: #738493; font-size: .7rem; }
.new-message-dialog select { width: 100%; height: 40px; padding: 0 11px; color: #263e50; font: 600 .8rem var(--font-main); border: 1px solid #d5e1e9; border-radius: 9px; background: #fff; }
.new-message-help { display: flex; gap: 8px; margin: 0; padding: 10px; color: #4f6577; font-size: .72rem; line-height: 1.45; border-radius: 9px; background: #edf5fb; }
.new-message-help i { margin-top: 2px; color: #0a4f91; }
.user-profile-modal { position: fixed; z-index: 500; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(10,31,50,.42); backdrop-filter: blur(5px); }
.user-profile-dialog { width: min(590px, calc(100vw - 28px)); max-height: calc(100vh - 36px); overflow: auto; color: #23394a; border: 1px solid rgba(214,227,236,.95); border-radius: 20px; background: #fff; box-shadow: 0 28px 80px rgba(9,38,64,.27); }
.user-profile-dialog > header { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid #e5edf2; }
.user-profile-identity { display: flex; align-items: center; gap: 12px; }.user-profile-identity > span { width: 48px; height: 48px; display: grid; place-items: center; color: #fff; border-radius: 14px; background: #0a4f91; font-size: 1.15rem; font-weight: 800; }.user-profile-identity strong,.user-profile-identity small { display: block; }.user-profile-identity strong { font-size: 1rem; }.user-profile-identity small { margin-top: 3px; color: #748694; font-size: .72rem; }
.user-profile-dialog > header button { width: 34px; height: 34px; color: #667c8d; border: 0; border-radius: 9px; background: #f0f4f6; cursor: pointer; }
.user-profile-status { display: grid; grid-template-columns: 10px 1fr; column-gap: 9px; align-items: center; margin: 17px 22px 0; padding: 12px 14px; color: #08775e; border-radius: 12px; background: #e8f6f1; }.user-profile-status small { grid-column: 2; color: #66857b; font-size: .65rem; }.user-profile-status strong { font-size: .78rem; }
.user-profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 17px 22px; }.user-profile-grid > div { min-width: 0; padding: 12px; border: 1px solid #e1e9ef; border-radius: 11px; background: #f8fafb; }.user-profile-grid span,.user-profile-grid strong { display: block; }.user-profile-grid span { color: #788a97; font-size: .65rem; }.user-profile-grid strong { margin-top: 4px; overflow-wrap: anywhere; font-size: .78rem; }
.admin-avatar-section { display: grid; gap: 10px; margin: 0 22px 17px; padding: 14px; border: 1px solid #dbe6ed; border-radius: 14px; background: #f8fbfd; }
.admin-avatar-section.hidden { display: none; }
.admin-avatar-heading { display: grid; grid-template-columns: 36px minmax(0,1fr) auto; gap: 10px; align-items: center; }
.admin-avatar-heading > span { width: 36px; height: 36px; display: grid; place-items: center; color: #0a4f91; border-radius: 10px; background: #e4f0fb; }
.admin-avatar-heading strong,.admin-avatar-heading small,.team-avatar-toggle strong,.team-avatar-toggle small { display: block; }
.admin-avatar-heading strong { font-size: .78rem; }.admin-avatar-heading small { margin-top: 2px; color: #7b8c99; font-size: .63rem; }
.admin-avatar-heading button { min-width: 116px; height: 35px; padding: 0 11px; color: #0a4f91; font: 700 .67rem var(--font-main); border: 1px solid #c9dbea; border-radius: 9px; background: #fff; cursor: pointer; }
.admin-avatar-heading button i { margin-right: 5px; }.admin-avatar-heading button:hover { background: #eef6fc; }
.team-avatar-toggle { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 44px; gap: 12px; align-items: center; padding: 11px 12px; border: 1px solid #dde8ef; border-radius: 11px; background: #fff; cursor: pointer; }
.team-avatar-toggle strong { color: #294254; font-size: .72rem; }.team-avatar-toggle small { margin-top: 3px; color: #758794; font-size: .61rem; line-height: 1.4; }
.team-avatar-toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.team-avatar-toggle > i { position: relative; width: 44px; height: 22px; border: 1px solid transparent; border-radius: 999px; background: #c5d2dc; transition: background .18s ease,border-color .18s ease; }
.team-avatar-toggle > i::before { content: "\2713"; position: absolute; top: 50%; left: 7px; color: #14845f; font: 800 12px/1 var(--font-main); opacity: 0; transform: translateY(-50%) scale(.7); transition: opacity .16s ease,transform .16s ease; }
.team-avatar-toggle > i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15,47,72,.24); transition: transform .18s ease,background .18s ease; }
.team-avatar-toggle input:checked + i { border-color: #b9e1d3; background: #e2f4ed; }.team-avatar-toggle input:checked + i::before { opacity: 1; transform: translateY(-50%) scale(1); }.team-avatar-toggle input:checked + i::after { background: #16845f; transform: translateX(22px); }
.team-avatar-toggle:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.counter-access-help { display:flex; align-items:center; gap:7px; margin:0 0 14px; color:#647b8b; font-size:.62rem; line-height:1.4; }.counter-access-help i { color:#16845f; }
.whatsapp-public-photo { display:grid; grid-template-columns:36px minmax(0,1fr) 150px auto; gap:10px; align-items:center; padding:11px 12px; border:1px solid #dde8ef; border-radius:11px; background:#fff; }
.whatsapp-public-photo > span { width:36px; height:36px; display:grid; place-items:center; border-radius:10px; color:#0a579f; background:#e4f0fb; font-size:.95rem; }
.whatsapp-public-photo strong,.whatsapp-public-photo small { display:block; }.whatsapp-public-photo strong { color:#294254; font-size:.72rem; }.whatsapp-public-photo small { margin-top:3px; color:#758794; font-size:.59rem; line-height:1.35; }
.whatsapp-public-photo select { min-width:0; height:35px; font-size:.61rem; }.whatsapp-public-photo button { height:35px; padding:0 11px; border:1px solid #c9dbea; border-radius:9px; color:#0a579f; background:#f4f9fd; font:750 .62rem var(--font-main); cursor:pointer; }.whatsapp-public-photo button:hover { color:#fff; background:#0a579f; }
.whatsapp-public-photo-preview { grid-column:1/-1; display:flex; align-items:center; gap:13px; padding:10px 12px; border-top:1px solid #e4ecf2; background:#f9fcfe; border-radius:10px; }.whatsapp-public-photo-preview.hidden { display:none; }.whatsapp-public-photo-preview figure { display:grid; justify-items:center; gap:4px; margin:0; }.whatsapp-public-photo-preview figure > span { width:58px; height:58px; display:block; overflow:hidden; border:1px solid #d2dfE9; background:#fff; }.whatsapp-preview-circle { border-radius:50%; }.whatsapp-preview-square { border-radius:10px; }.whatsapp-public-photo-preview img { width:100%; height:100%; display:block; object-fit:cover; }.whatsapp-public-photo-preview figcaption { color:#5f7484; font-size:.5rem; font-weight:750; }.whatsapp-public-photo-preview p { margin:0 0 0 4px; color:#758794; font-size:.55rem; line-height:1.4; }
.profile-image-editor { position:fixed; inset:0; z-index:1700; display:grid; place-items:center; padding:18px; background:rgba(10,32,50,.58); backdrop-filter:blur(5px); }.profile-image-editor.hidden { display:none; }
.profile-image-editor-card { width:min(560px,calc(100vw - 26px)); max-height:calc(100dvh - 28px); overflow:auto; border:1px solid #d3e0ea; border-radius:19px; background:#fff; box-shadow:0 24px 70px rgba(9,31,49,.25); }
.profile-image-editor-card > header { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:15px 17px; border-bottom:1px solid #e1e9ef; }.profile-image-editor-card > header > div { display:flex; align-items:center; gap:10px; }.profile-image-editor-card > header span { width:35px; height:35px; display:grid; place-items:center; border-radius:10px; color:#0a579f; background:#e5f0fa; }.profile-image-editor-card header strong,.profile-image-editor-card header small { display:block; }.profile-image-editor-card header strong { color:#213445; font-size:.78rem; }.profile-image-editor-card header small { margin-top:2px; color:#7a8b98; font-size:.58rem; }.profile-image-editor-card header button { width:34px; height:34px; border:0; border-radius:9px; color:#5b7080; background:#edf3f7; cursor:pointer; }
.profile-image-stage { position:relative; width:min(360px,calc(100vw - 78px)); aspect-ratio:1; margin:18px auto 12px; overflow:hidden; border-radius:15px; background:repeating-conic-gradient(#edf2f6 0 25%,#fff 0 50%) 50%/22px 22px; touch-action:none; cursor:grab; }.profile-image-stage.dragging { cursor:grabbing; }.profile-image-stage canvas { width:100%; height:100%; display:block; }.profile-image-circle { position:absolute; inset:7%; border:2px solid rgba(255,255,255,.95); border-radius:50%; box-shadow:0 0 0 999px rgba(13,43,65,.24),0 0 0 1px rgba(13,43,65,.22); pointer-events:none; }
.profile-image-controls { display:grid; gap:10px; padding:0 18px; }.profile-image-controls label { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:10px; color:#506676; font-size:.62rem; font-weight:800; }.profile-image-controls input { width:100%; accent-color:#0a579f; }.profile-image-controls > div { display:flex; justify-content:center; gap:8px; }.profile-image-controls button { min-height:33px; padding:0 10px; border:1px solid #cbdbe7; border-radius:9px; color:#0a579f; background:#f5f9fc; font:750 .59rem var(--font-main); cursor:pointer; }.profile-image-editor-card > p { margin:11px 18px 0; color:#778997; font-size:.57rem; text-align:center; }.profile-image-editor-card > footer { display:flex; justify-content:flex-end; gap:8px; padding:15px 18px 18px; }.profile-image-editor-card > footer button { min-height:36px; padding:0 13px; border:1px solid #cbdbe7; border-radius:9px; font:750 .63rem var(--font-main); cursor:pointer; }.profile-image-editor-card > footer button:last-child { color:#fff; border-color:#0a579f; background:#0a579f; }
.profile-image-editor-card > footer #profile-image-apply { min-width:126px; transition:color .2s ease,border-color .2s ease,background-color .2s ease,transform .2s ease; }
.profile-image-editor-card > footer #profile-image-apply.is-saved { color:#fff; border-color:#159a72; background:#159a72; transform:scale(1.02); }
.profile-image-editor-card > footer #profile-image-apply:disabled { cursor:default; opacity:1; }

/* Carga honesta de conversaciones: nunca muestra un vacío antes de terminar. */
.chat-loading-state { position:relative; min-height:390px; overflow:hidden; background:#fff; }
.chat-loading-progress { position:absolute; inset:0 0 auto; height:3px; overflow:hidden; background:#e5eef6; }.chat-loading-progress span { display:block; width:38%; height:100%; border-radius:999px; background:linear-gradient(90deg,#0a579f,#2f8bd1); animation:chatLoadingBar 1.15s ease-in-out infinite; }
.chat-loading-label { display:flex; align-items:center; justify-content:center; gap:7px; padding:18px 12px 12px; color:#617687; font-size:.62rem; font-weight:750; }
.chat-loading-label i { color:#0a579f; font-size:.66rem; }
.chat-skeleton-list { display:grid; }.chat-skeleton-row { display:grid; grid-template-columns:42px minmax(0,1fr); gap:11px; align-items:center; min-height:76px; padding:13px 15px; border-bottom:1px solid #edf2f5; }.chat-skeleton-row > span { width:42px; height:42px; border-radius:14px; background:#e7eef4; }.chat-skeleton-row > div { display:grid; gap:7px; }.chat-skeleton-row b,.chat-skeleton-row i { display:block; height:8px; border-radius:999px; background:linear-gradient(90deg,#e8eef3 20%,#f5f8fa 48%,#e8eef3 76%); background-size:220% 100%; animation:chatSkeletonShimmer 1.35s linear infinite; }.chat-skeleton-row b { width:58%; height:10px; }.chat-skeleton-row i:first-of-type { width:88%; }.chat-skeleton-row i:last-of-type { width:38%; }
.chat-load-error { min-height:290px; display:grid; place-items:center; align-content:center; gap:7px; padding:22px; color:#738695; text-align:center; }.chat-load-error > i { margin-bottom:3px; color:#7f9bb2; font-size:1.35rem; }.chat-load-error strong { color:#334b5c; font-size:.72rem; }.chat-load-error span { max-width:250px; font-size:.58rem; line-height:1.45; }.chat-load-error button { min-height:32px; margin-top:5px; padding:0 11px; border:1px solid #bed3e4; border-radius:9px; color:#0a579f; background:#edf6fd; font:750 .58rem var(--font-main); cursor:pointer; }.chat-load-error button:hover { color:#fff; background:#0a579f; }
@keyframes chatLoadingBar { 0% { transform:translateX(-110%); } 100% { transform:translateX(365%); } }
@keyframes chatSkeletonShimmer { to { background-position:-220% 0; } }
@media (prefers-reduced-motion:reduce) { .chat-loading-progress span,.chat-skeleton-row b,.chat-skeleton-row i { animation:none; } }
.user-security-section { margin: 0 22px 22px; padding: 16px; border: 1px solid #dbe6ed; border-radius: 14px; background: #fbfcfd; }.user-security-title { display: flex; align-items: center; gap: 10px; }.user-security-title > span { width: 36px; height: 36px; display: grid; place-items: center; color: #0a4f91; border-radius: 10px; background: #e5f0fa; }.user-security-title strong,.user-security-title small { display: block; }.user-security-title small { margin-top: 2px; color: #7b8c99; font-size: .66rem; }
.user-pin-form { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin-top: 14px; }.user-pin-form label span { display: block; margin-bottom: 5px; color: #657a8a; font-size: .63rem; font-weight: 700; }.user-pin-form input { width: 100%; height: 37px; padding: 0 9px; border: 1px solid #d3e0e8; border-radius: 8px; outline: 0; }.user-pin-form input:focus { border-color: #77a8d4; box-shadow: 0 0 0 3px rgba(10,79,145,.08); }.user-pin-form button { grid-column: 1/-1; height: 38px; color: #fff; font: 700 .72rem var(--font-main); border: 0; border-radius: 9px; background: #0a4f91; cursor: pointer; }.user-pin-feedback { grid-column: 1/-1; margin: 0; padding: 8px; font-size: .68rem; border-radius: 7px; }.user-pin-feedback.error { color: #a12e3b; background: #ffe8eb; }.user-pin-feedback.success { color: #08775e; background: #e5f6f0; }
.admin-security-guidance { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 12px; color: #455d6e; border-radius: 10px; background: #eef4f8; }.admin-security-guidance > i { margin-top: 2px; color: #0a4f91; }.admin-security-guidance p { margin: 0; }.admin-security-guidance strong,.admin-security-guidance span { display: block; }.admin-security-guidance span { margin-top: 3px; font-size: .67rem; line-height: 1.45; }.admin-security-guidance code { color: #0a4f91; font-weight: 800; }
.user-recovery-help { display: flex; align-items: center; gap: 7px; margin-top: 12px; padding: 0; color: #0a4f91; font: 700 .68rem var(--font-main); border: 0; background: transparent; cursor: pointer; }.user-recovery-message { margin: 9px 0 0; padding: 9px 10px; color: #566c7c; font-size: .67rem; line-height: 1.45; border-radius: 8px; background: #f0f4f7; }
@media (max-width: 620px) { .user-profile-grid,.user-pin-form { grid-template-columns: 1fr; }.user-pin-form button { grid-column: auto; }.admin-avatar-heading { grid-template-columns: 36px minmax(0,1fr); }.admin-avatar-heading button { grid-column: 1/-1; width: 100%; }.admin-avatar-section { margin-inline: 16px; }.whatsapp-public-photo { grid-template-columns:36px minmax(0,1fr); }.whatsapp-public-photo select,.whatsapp-public-photo button { grid-column:1/-1; width:100%; } }

@media (max-width: 760px) {
    .global-app-topbar { left: var(--rail-width); grid-template-columns: 1fr auto; height: 58px; }
    .global-app-title { display: none; }
    .global-search-shell { width: calc(100% - 16px); margin-left: 8px; }
    .global-search-shell input { height: 38px; padding-right: 40px; }
    .global-search-shell kbd,.global-top-actions .operator-chip strong,.global-top-actions .operator-chip > i { display: none; }
    .global-top-actions { padding: 0 8px; gap: 5px; }
    .global-top-actions .operator-chip { width: 36px; padding: 0; justify-content: center; border: 0; }
    .sidebar,.chat-area,.customer-panel { margin-top: 58px; height: calc(100% - 58px); }
    .admin-workspace,.contacts-workspace { margin-top: 58px; height: calc(100% - 58px); }
}
.internal-note-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    padding: 0 4px;
    border: 2px solid #fff;
    border-radius: 999px;
    color: #fff;
    background: #16abc2;
    font-size: .56rem;
    font-weight: 800;
}
.internal-note-panel {
    position: absolute;
    z-index: 90;
    top: 44px;
    right: 38px;
    width: min(286px, calc(100vw - 28px));
    padding: 9px;
    border: 1px solid #d8e3ec;
    border-radius: 11px;
    color: #263746;
    background: #fff;
    box-shadow: 0 18px 42px rgba(7,59,114,.19);
}
.internal-note-panel > div:first-child { display: grid; gap: 1px; padding: 3px 5px 8px; border-bottom: 1px solid #edf1f4; }
.internal-note-panel > div:first-child strong { font-size: .76rem; }
.internal-note-panel > div:first-child small { color: #82919d; font-size: .59rem; }
#internal-note-list { display: grid; gap: 3px; padding-top: 5px; }
#internal-note-list > button { width: 100%; display: grid; grid-template-columns: 30px 1fr auto; gap: 7px; align-items: center; padding: 7px; border: 0; border-radius: 8px; color: #263746; background: transparent; text-align: left; cursor: pointer; }
#internal-note-list > button:hover { background: #edf5fc; }
.note-notification-avatar { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: #0a4f91; font-size: .68rem; font-weight: 800; }
.note-notification-avatar.order { color: #0a579f; background: #e4f1fd; }
#internal-note-list > button > span:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
#internal-note-list > button strong { font-size: .68rem; }
#internal-note-list > button small { overflow: hidden; color: #718392; font-size: .58rem; white-space: nowrap; text-overflow: ellipsis; }
#internal-note-list > button b { min-width: 18px; height: 18px; display: grid; place-items: center; padding: 0 4px; border-radius: 99px; color: #fff; background: #16abc2; font-size: .56rem; }
.note-notification-empty { min-height: 72px; display: grid; place-items: center; gap: 5px; color: #8494a0; font-size: .65rem; }

.composer-popover {
    width: min(274px, calc(100% - 28px));
    padding: 7px;
    border-radius: 11px;
}
.emoji-grid { grid-template-columns: repeat(6, 1fr); gap: 2px; }
.emoji-grid button { height: 32px; border-radius: 7px; font-size: 1.08rem; }
.quick-replies { gap: 4px; }
.quick-replies-head { min-height:24px; display:flex; align-items:center; justify-content:space-between; padding:1px 4px 4px; }
.quick-replies-head > strong { color:#20303d; font-size:.68rem; }
.quick-replies-head > span { min-width:18px; height:18px; display:grid; place-items:center; padding:0 5px; border-radius:99px; color:#0a4f91; background:#e5f0fa; font-size:.53rem; font-weight:800; }
.quick-reply-search { height:32px; display:flex; align-items:center; gap:7px; margin:0 1px 4px; padding:0 9px; border:1px solid #d7e3ed; border-radius:8px; color:#718391; background:#f8fbfd; }
.quick-reply-search:focus-within { border-color:#8fb7d9; background:#fff; }
.quick-reply-search > i { color:#0a579f; font-size:.62rem; }
.quick-reply-search > input { min-width:0; flex:1; border:0; outline:0; color:#273a49; background:transparent; font:600 .6rem var(--font-main); }
.quick-reply-search > input::placeholder { color:#8b9aa6; }
.quick-replies-scroll { max-height:248px; display:grid; gap:4px; overflow-y:auto; overscroll-behavior:contain; padding:1px 2px 2px 1px; scrollbar-width:thin; scrollbar-color:#b7cadb transparent; }
.quick-replies button { min-height: 39px; grid-template-columns: 22px 1fr; gap: 6px; padding: 5px 6px; border-radius: 7px; }
.quick-replies button > b { width: 20px; height: 20px; border-radius: 6px; font-size: .6rem; }
.quick-replies span > strong { font-size: .63rem; line-height: 1.2; }
.quick-replies small { overflow: hidden; font-size: .53rem; white-space: nowrap; text-overflow: ellipsis; }
.quick-replies small i { width: 13px; color:#0a4f91; text-align:center; }
.quick-replies button.is-blocked { cursor:not-allowed; border-color:#e1e6eb; background:#f4f6f8; opacity:.82; }
.quick-replies button.is-blocked > b { color:#6f8090; background:#dfe6ec; }
.quick-replies button.is-blocked small { color:#7b8791; }
.quick-replies button.is-blocked small i { color:#7b8791; }
.quick-replies button.needs-commercial-confirmation { border-color:#e8cf91; background:#fffbef; }
.quick-replies button.needs-commercial-confirmation small,.quick-replies button.needs-commercial-confirmation small i { color:#8a6414; }
.quick-replies-empty { min-height:76px; display:grid; place-items:center; align-content:center; gap:5px; color:#83929e; font-size:.58rem; text-align:center; }
.quick-replies-empty > i { color:#a7b5bf; font-size:.85rem; }
.attachment-preview.quick-reply-selection { min-height:42px; margin-top:7px; padding:6px 9px; border-radius:10px; }
.quick-reply-selection > span { min-width:0; flex:1; display:grid; gap:1px; }
.quick-reply-selection > span strong { overflow:hidden; color:#253746; font-size:.68rem; white-space:nowrap; text-overflow:ellipsis; }
.quick-reply-selection > span small { color:#738594; font-size:.57rem; }
.quick-reply-selection > button { width:28px; height:28px; display:grid; place-items:center; border:0; border-radius:7px; color:#526779; background:transparent; cursor:pointer; }
.quick-reply-selection > button:hover { color:#0a4f91; background:#e3effa; }
.quick-reply-viewer { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:24px; background:rgba(8,30,52,.56); backdrop-filter:blur(4px); }
.quick-reply-viewer-card { width:min(920px,92vw); height:min(720px,86vh); display:flex; flex-direction:column; overflow:hidden; border:1px solid #bfd2e4; border-radius:16px; background:#fff; box-shadow:0 28px 80px rgba(4,34,63,.3); }
.quick-reply-viewer-card > header { min-height:50px; display:flex; align-items:center; justify-content:space-between; padding:0 14px 0 18px; border-bottom:1px solid #e1e8ee; }
.quick-reply-viewer-card > header div { display:flex; align-items:center; gap:9px; color:#17334c; }
.quick-reply-viewer-card > header div i { color:#0a4f91; }
.quick-reply-viewer-card > header button { width:32px; height:32px; border:0; border-radius:8px; color:#607483; background:#edf3f7; cursor:pointer; }
.quick-reply-viewer-content { flex:1; min-height:0; display:grid; place-items:center; padding:12px; background:#f4f7fa; }
.quick-reply-viewer-content iframe,.quick-reply-viewer-content video,.quick-reply-viewer-content img { width:100%; height:100%; border:0; border-radius:10px; object-fit:contain; background:#fff; }
.quick-reply-viewer.calameo-reader-mode { padding:14px; }
.quick-reply-viewer.calameo-reader-mode .quick-reply-viewer-card { width:min(1280px,96vw); height:min(900px,94vh); }
.quick-reply-viewer.calameo-reader-mode .quick-reply-viewer-content { padding:0; background:#2f3437; }
.calameo-reader-frame { width:100%; height:100%; min-height:0; overflow:hidden; background:#2f3437; }
.calameo-reader-frame iframe { width:100%; height:100%; display:block; margin:0; border-radius:0; background:#2f3437; }
.quick-reply-viewer-content audio { width:min(620px,90%); }
.quick-reply-link-preview { width:min(420px,90%); display:grid; justify-items:center; gap:10px; padding:28px; border:1px solid #d7e3ed; border-radius:14px; color:#506574; background:#fff; text-align:center; }
.quick-reply-link-preview > i { font-size:2rem; color:#0a4f91; }.quick-reply-link-preview strong { color:#20313e; }
.quick-reply-link-preview a { padding:9px 13px; border-radius:8px; color:#fff; background:#0a4f91; text-decoration:none; font-size:.7rem; font-weight:800; }

/* Flechas y selectores: un solo lenguaje visual en toda la aplicación. */
select:not([multiple]) {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 30px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.5 6 6l4.5-4.5' fill='none' stroke='%23566d7d' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px 8px;
    cursor: pointer;
}
select:not([multiple]):hover { border-color: #b9ccdc; }
select:not([multiple]):focus-visible { outline: 2px solid rgba(10,79,145,.14); outline-offset: 1px; border-color: #8eb6d9; }
.conversation-type-control select { min-width: 102px; padding-left: 2px; background-position: right 2px center; }
.sale-status-control select { min-width:124px; }

.follow-up-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.follow-up-card { display:grid; gap:12px; padding:16px; border:1px solid #d4e1ec; border-radius:14px; background:#fff; }
.follow-up-card > header { display:grid; grid-template-columns:38px 1fr auto; align-items:center; gap:10px; }
.follow-up-icon { width:38px; height:38px; display:grid; place-items:center; border-radius:10px; color:#0a579f; background:#e7f1fb; }
.follow-up-card header div { display:grid; gap:2px; }.follow-up-card header strong { color:#1e3040; font-size:.8rem; }.follow-up-card header small { color:#748594; font-size:.58rem; }
.follow-up-card label { display:grid; gap:5px; color:#536879; font-size:.62rem; font-weight:800; }
.follow-up-card input,.follow-up-card textarea,.follow-up-card select { width:100%; border:1px solid #cfdeea; border-radius:9px; outline:0; color:#253746; background-color:#f9fbfd; font:600 .66rem var(--font-main); }
.follow-up-card input { min-height:36px; padding:0 10px; }.follow-up-card textarea { min-height:74px; resize:vertical; padding:9px 10px; line-height:1.4; }
.follow-up-card select { min-height:36px; padding-left:10px; }.follow-up-card input:focus,.follow-up-card textarea:focus,.follow-up-card select:focus { border-color:#80add4; background-color:#fff; }
.follow-up-fields { display:grid; grid-template-columns:1.1fr .8fr 1fr 1fr; gap:8px; }.follow-up-fields label > div { display:flex; align-items:center; gap:4px; }.follow-up-fields small { color:#81909b; }
.follow-up-card footer { display:flex; align-items:center; justify-content:space-between; gap:10px; }.follow-up-card footer .admin-primary-action { min-height:34px; padding:0 11px; }.follow-up-feedback { color:#168064; font-size:.59rem; font-weight:800; }
.follow-up-card footer .assistant-secondary { min-height:32px; padding:0 9px; font-size:.58rem; }.follow-up-versions { display:grid; gap:3px; padding:8px 10px; border-radius:8px; color:#677b8b; background:#f0f5f9; font-size:.58rem; }.follow-up-versions.hidden { display:none; }
.follow-up-switch { display:block !important; }.follow-up-switch input { position:absolute; opacity:0; pointer-events:none; }.follow-up-switch span { width:34px; height:20px; display:block; position:relative; border-radius:99px; background:#cbd7df; cursor:pointer; transition:.18s; }.follow-up-switch span::after { content:""; width:14px; height:14px; position:absolute; top:3px; left:3px; border-radius:50%; background:#fff; transition:.18s; box-shadow:0 1px 3px rgba(0,0,0,.18); }.follow-up-switch input:checked + span { background:#0a579f; }.follow-up-switch input:checked + span::after { transform:translateX(14px); }
.follow-up-history-head { margin-top:24px; }.follow-up-result { font-weight:800; }.follow-up-result.sent { color:#168064; }.follow-up-result.skipped { color:#87631b; }.follow-up-result.failed { color:#ba3b4c; }.follow-up-result small { display:block; max-width:260px; }
@media (max-width:1000px) { .follow-up-grid { grid-template-columns:1fr; } }
.operator-chip > .fa-chevron-down,
#mobile-chat-back > i,
#customer-panel-toggle > i { display:grid; place-items:center; line-height:1; }
.operator-chip > .fa-chevron-down { font-size:.56rem; }
#mobile-chat-back > i,
#customer-panel-toggle > i { font-size:.72rem; }

.app-rail .rail-brand { height: 64px; flex-basis: 64px; margin-bottom: 14px; color: #0a4f91 !important; border-bottom: 1px solid var(--panel-border); background: rgba(229, 240, 250, .96); }
.app-rail .rail-brand .brand-logo-rail { width:48px; height:48px; }

@media (max-width: 760px) {
    .quick-reply-viewer.calameo-reader-mode { padding:5px; }
    .quick-reply-viewer.calameo-reader-mode .quick-reply-viewer-card { width:calc(100vw - 10px); height:calc(100dvh - 10px); border-radius:12px; }
    .quick-reply-viewer.calameo-reader-mode .quick-reply-viewer-card > header { min-height:46px; }
    .app-rail { padding: 0 0 10px; }
    .rail-menu, .rail-footer { gap: 5px; }
    .app-rail .rail-brand { width: var(--rail-width); min-width: var(--rail-width); max-width: var(--rail-width); height: 58px; flex-basis: 58px; margin-bottom: 10px; }
    .app-rail .rail-status-btn .rail-count { top: 2px; right: 2px; min-width: 13px; height: 13px; font-size: .45rem; }
}