/* =====================================================================
   MConnect - Tema (inspirado en dashboards tipo Metronic, 100% gratuito)
   Bootstrap 5.3 + Bootstrap Icons + DataTables 2
   ===================================================================== */
:root {
    --app-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --app-primary: #3e97ff;
    --app-primary-hover: #2884ef;
    --app-primary-light: #eef6ff;
    --app-success: #50cd89;
    --app-success-light: #e8fff3;
    --app-warning: #f1bc00;
    --app-warning-light: #fff8dd;
    --app-danger: #f1416c;
    --app-danger-light: #fff5f8;
    --app-info: #7239ea;
    --app-info-light: #f8f5ff;
    --app-secondary: #7e8299;
    --app-secondary-light: #f1f1f4;
    --app-dark: #181c32;
    --app-body-bg: #f5f8fa;
    --app-text: #3f4254;
    --app-muted: #a1a5b7;
    --app-border: #eff2f5;
    --app-sidebar-bg: #1e1e2d;
    --app-sidebar-bg-2: #1b1b28;
    --app-sidebar-text: #9899ac;
    --app-sidebar-hover: #2a2a3c;
    --app-sidebar-w: 265px;
    --app-sidebar-w-min: 75px;
    --app-header-h: 65px;
    --app-radius: .75rem;
    --app-shadow: 0 0 20px 0 rgba(76, 87, 125, .05);
    --mcw-green: #00a884;
    --mcw-chat-bg: #efeae2;
    --mcw-in: #ffffff;
    --mcw-out: #d9fdd3;
}

html, body { height: 100%; }
body { font-family: var(--app-font); background: var(--app-body-bg); color: var(--app-text); font-size: .925rem; }
body:not(.app-ready):not(.login-page) main { visibility: hidden; }
a { color: var(--app-primary); text-decoration: none; }
.text-muted { color: var(--app-muted) !important; }
.code { font-family: Consolas, "Courier New", monospace; font-size: .85rem; }
.cursor-pointer { cursor: pointer; }
.fw-semibold { font-weight: 600 !important; }
.toast-container { z-index: 2000; }

/* ---------- Botones y badges ---------- */
.btn { border-radius: .475rem; font-weight: 500; }
.btn-sm { border-radius: .425rem; }
.btn-primary { --bs-btn-bg: var(--app-primary); --bs-btn-border-color: var(--app-primary); --bs-btn-hover-bg: var(--app-primary-hover);
    --bs-btn-hover-border-color: var(--app-primary-hover); --bs-btn-active-bg: var(--app-primary-hover); --bs-btn-disabled-bg: var(--app-primary); --bs-btn-disabled-border-color: var(--app-primary); }
.btn-success { --bs-btn-bg: var(--app-success); --bs-btn-border-color: var(--app-success); --bs-btn-hover-bg: #47be7d; --bs-btn-hover-border-color: #47be7d; --bs-btn-active-bg: #47be7d; }
.btn-danger { --bs-btn-bg: var(--app-danger); --bs-btn-border-color: var(--app-danger); --bs-btn-hover-bg: #d9214e; --bs-btn-hover-border-color: #d9214e; }
.btn-light { --bs-btn-bg: var(--app-secondary-light); --bs-btn-border-color: var(--app-secondary-light); --bs-btn-color: var(--app-secondary); --bs-btn-hover-bg: #e4e6ef; --bs-btn-hover-border-color: #e4e6ef; }
.btn-icon { width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.btn-light-primary { background: var(--app-primary-light); color: var(--app-primary); border: 0; }
.btn-light-primary:hover { background: var(--app-primary); color: #fff; }
.btn-light-success { background: var(--app-success-light); color: var(--app-success); border: 0; }
.btn-light-success:hover { background: var(--app-success); color: #fff; }
.btn-light-danger { background: var(--app-danger-light); color: var(--app-danger); border: 0; }
.btn-light-danger:hover { background: var(--app-danger); color: #fff; }
.btn-light-warning { background: var(--app-warning-light); color: var(--app-warning); border: 0; }
.btn-light-warning:hover { background: var(--app-warning); color: #fff; }
.btn-light-info { background: var(--app-info-light); color: var(--app-info); border: 0; }
.btn-light-info:hover { background: var(--app-info); color: #fff; }
.btn-light-secondary { background: var(--app-secondary-light); color: var(--app-secondary); border: 0; }
.btn-light-secondary:hover { background: #e4e6ef; color: var(--app-dark); }

.badge { font-weight: 600; padding: .4em .65em; border-radius: .425rem; }
.badge-light-success { background: var(--app-success-light); color: var(--app-success); }
.badge-light-primary { background: var(--app-primary-light); color: var(--app-primary); }
.badge-light-warning { background: var(--app-warning-light); color: #c79c00; }
.badge-light-danger { background: var(--app-danger-light); color: var(--app-danger); }
.badge-light-info { background: var(--app-info-light); color: var(--app-info); }
.badge-light-secondary { background: var(--app-secondary-light); color: var(--app-secondary); }
.badge-light-dark { background: #e4e6ef; color: var(--app-dark); }

/* ---------- Formularios ---------- */
.form-control, .form-select { border-color: #e4e6ef; border-radius: .475rem; color: var(--app-text); }
.form-control:focus, .form-select:focus { border-color: #b5d6ff; box-shadow: 0 0 0 .2rem rgba(62, 151, 255, .12); }
.form-control-solid, .form-select-solid { background-color: #f5f8fa; border-color: #f5f8fa; }
.form-label { font-weight: 500; color: var(--app-dark); font-size: .875rem; }
.form-check-input:checked { background-color: var(--app-primary); border-color: var(--app-primary); }

/* ---------- Tarjetas ---------- */
.card { border: 0; border-radius: var(--app-radius); box-shadow: var(--app-shadow); }
.card-header { background: transparent; border-bottom: 1px solid var(--app-border); padding: 1rem 1.5rem; min-height: 60px;
    display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.card-header:first-child { border-radius: var(--app-radius) var(--app-radius) 0 0; }
.card-title { font-size: 1.1rem; font-weight: 600; color: var(--app-dark); margin: 0; }
.card-body { padding: 1.25rem 1.5rem; }
.modal-content { border: 0; border-radius: var(--app-radius); box-shadow: 0 .5rem 1.5rem .5rem rgba(0, 0, 0, .075); }
.modal-header { border-bottom: 1px solid var(--app-border); padding: 1.25rem 1.5rem; }
.modal-title { font-weight: 600; color: var(--app-dark); }
.modal-footer { border-top: 1px solid var(--app-border); }

/* ---------- Tablas ---------- */
.table { --bs-table-color: var(--app-text); margin-bottom: 0; }
.table > :not(caption) > * > * { padding: .75rem .75rem; border-bottom-color: var(--app-border); }
.table thead th { font-size: .75rem; text-transform: uppercase; color: var(--app-muted); font-weight: 600; letter-spacing: .03em;
    white-space: nowrap; border-bottom: 1px dashed #e4e6ef; }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: #fafbfc; }
.table-sm > :not(caption) > * > * { padding: .55rem .6rem; }

/* DataTables */
div.dt-container { padding: 0; }
div.dt-container .dt-layout-row { margin: 0; padding: .75rem 1.5rem; }
div.dt-container .dt-layout-row.dt-layout-table { padding: 0; }
div.dt-container .dt-search input { background: #f5f8fa; border-color: #f5f8fa; border-radius: .475rem; min-width: 220px; margin-left: .5rem; }
div.dt-container .dt-length select { background-color: #f5f8fa; border-color: #f5f8fa; }
div.dt-container .dt-info { color: var(--app-muted); font-size: .85rem; }
div.dt-container .pagination { --bs-pagination-border-width: 0; --bs-pagination-border-radius: .475rem; --bs-pagination-color: var(--app-secondary);
    --bs-pagination-active-bg: var(--app-primary); --bs-pagination-hover-bg: var(--app-primary-light); gap: 2px; margin: 0; }
div.dt-container .page-link { border-radius: .475rem !important; min-width: 2.2rem; text-align: center; font-weight: 500; }
table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order,
table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order { opacity: .5; }
table.dataTable > tbody > tr.child ul.dtr-details { width: 100%; }
table.dataTable > tbody > tr.child span.dtr-title { color: var(--app-muted); font-weight: 600; font-size: .8rem; min-width: 110px; }
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before { border-color: var(--app-primary); }
table.dataTable td.dt-empty { color: var(--app-muted); padding: 2rem !important; }
@media (max-width: 575.98px) {
    div.dt-container .dt-layout-row { padding: .75rem 1rem; }
    div.dt-container .dt-search input { min-width: 0; width: 100%; margin-left: 0; }
}

/* ---------- Layout: sidebar + header ---------- */
.app-sidebar { position: fixed; top: 0; bottom: 0; left: 0; width: var(--app-sidebar-w); background: var(--app-sidebar-bg); z-index: 1040;
    display: flex; flex-direction: column; transition: width .25s ease, transform .25s ease; }
.app-sidebar .sidebar-logo { height: var(--app-header-h); display: flex; align-items: center; padding: 0 1.4rem; background: var(--app-sidebar-bg-2);
    border-bottom: 1px dashed #393945; flex-shrink: 0; }
.app-sidebar .logo-icon { width: 36px; height: 36px; border-radius: .6rem; background: linear-gradient(135deg, #25d366, #00a884); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; }
.app-sidebar .logo-text { color: #fff; font-weight: 700; font-size: 1.2rem; margin-left: .75rem; white-space: nowrap; }
.app-sidebar .logo-text small { display: block; color: var(--app-sidebar-text); font-weight: 500; font-size: .7rem; letter-spacing: .04em; }
.sidebar-menu { flex: 1; overflow-y: auto; padding: 1rem .9rem; }
.sidebar-menu::-webkit-scrollbar { width: 5px; }
.sidebar-menu::-webkit-scrollbar-thumb { background: #393945; border-radius: 5px; }
.menu-section { color: #5e6278; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; padding: 1rem .75rem .5rem; white-space: nowrap; }
.menu-link { display: flex; align-items: center; padding: .65rem .75rem; border-radius: .475rem; color: var(--app-sidebar-text); font-weight: 500;
    margin-bottom: 2px; white-space: nowrap; transition: background .15s, color .15s; }
.menu-link i { font-size: 1.15rem; width: 1.75rem; flex-shrink: 0; color: #6d6d80; transition: color .15s; }
.menu-link:hover { background: var(--app-sidebar-hover); color: #fff; }
.menu-link:hover i { color: var(--app-primary); }
.menu-link.active { background: var(--app-sidebar-hover); color: #fff; }
.menu-link.active i { color: var(--app-primary); }
.menu-link .menu-badge { margin-left: auto; }
.sidebar-footer { padding: 1rem 1.4rem; border-top: 1px dashed #393945; color: var(--app-sidebar-text); font-size: .75rem; white-space: nowrap; flex-shrink: 0; }

.app-body { margin-left: var(--app-sidebar-w); min-height: 100vh; display: flex; flex-direction: column; transition: margin-left .25s ease; }
.app-header { height: var(--app-header-h); background: #fff; box-shadow: 0 10px 30px 0 rgba(82, 63, 105, .05); position: sticky; top: 0; z-index: 1030;
    display: flex; align-items: center; padding: 0 1.5rem; gap: 1rem; }
.app-header .page-title { font-size: 1.15rem; font-weight: 600; color: var(--app-dark); margin: 0; line-height: 1.2; }
.app-header .breadcrumb { font-size: .78rem; margin: 0; --bs-breadcrumb-divider-color: var(--app-muted); }
.app-header .breadcrumb-item, .app-header .breadcrumb-item a { color: var(--app-muted); }
.app-content { flex: 1; padding: 1.5rem; }
.app-footer { padding: 1rem 1.5rem; color: var(--app-muted); font-size: .8rem; }
.user-avatar { width: 38px; height: 38px; border-radius: .6rem; background: var(--app-primary-light); color: var(--app-primary); font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center; }
.header-user { display: flex; align-items: center; gap: .6rem; cursor: pointer; padding: .3rem .5rem; border-radius: .6rem; }
.header-user:hover { background: #f5f8fa; }
.header-user .u-name { font-weight: 600; color: var(--app-dark); font-size: .875rem; line-height: 1.1; }
.header-user .u-role { color: var(--app-muted); font-size: .75rem; }
.dropdown-menu { border: 0; border-radius: .6rem; box-shadow: 0 0 50px 0 rgba(82, 63, 105, .15); padding: .5rem; }
.dropdown-item { border-radius: .425rem; padding: .55rem .9rem; color: var(--app-text); }
.dropdown-item:hover { background: var(--app-primary-light); color: var(--app-primary); }

/* Sidebar minimizado (escritorio) */
@media (min-width: 992px) {
    body.sidebar-min .app-sidebar { width: var(--app-sidebar-w-min); }
    body.sidebar-min .app-body { margin-left: var(--app-sidebar-w-min); }
    body.sidebar-min .app-sidebar .logo-text, body.sidebar-min .menu-section, body.sidebar-min .menu-link span,
    body.sidebar-min .menu-link .menu-badge, body.sidebar-min .sidebar-footer { display: none; }
    body.sidebar-min .menu-link { justify-content: center; }
    body.sidebar-min .menu-link i { width: auto; }
    body.sidebar-min .app-sidebar .sidebar-logo { justify-content: center; padding: 0; }
    body.sidebar-min .app-sidebar:hover { width: var(--app-sidebar-w); }
    body.sidebar-min .app-sidebar:hover .logo-text, body.sidebar-min .app-sidebar:hover .menu-section,
    body.sidebar-min .app-sidebar:hover .menu-link span, body.sidebar-min .app-sidebar:hover .sidebar-footer { display: block; }
    body.sidebar-min .app-sidebar:hover .menu-link { justify-content: flex-start; }
    body.sidebar-min .app-sidebar:hover .menu-link i { width: 1.75rem; }
    body.sidebar-min .app-sidebar:hover .sidebar-logo { justify-content: flex-start; padding: 0 1.4rem; }
}
/* Móvil: sidebar fuera de pantalla */
.app-backdrop { display: none; }
@media (max-width: 991.98px) {
    .app-sidebar { transform: translateX(-100%); }
    .app-body { margin-left: 0; }
    body.sidebar-open .app-sidebar { transform: none; }
    body.sidebar-open .app-backdrop { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 1035; }
    .app-content { padding: 1rem; }
    .app-header { padding: 0 1rem; }
}

/* ---------- KPIs ---------- */
.kpi { height: 100%; }
.kpi .card-body { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; }
.kpi .kpi-icon { width: 48px; height: 48px; border-radius: .75rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem; flex-shrink: 0; }
.kpi .value { font-size: 1.5rem; font-weight: 700; color: var(--app-dark); line-height: 1.1; }
.kpi .label { font-size: .78rem; color: var(--app-muted); font-weight: 500; }
.bg-light-success { background: var(--app-success-light) !important; color: var(--app-success); }
.bg-light-primary { background: var(--app-primary-light) !important; color: var(--app-primary); }
.bg-light-warning { background: var(--app-warning-light) !important; color: #c79c00; }
.bg-light-danger { background: var(--app-danger-light) !important; color: var(--app-danger); }
.bg-light-info { background: var(--app-info-light) !important; color: var(--app-info); }
.bg-light-secondary { background: var(--app-secondary-light) !important; color: var(--app-secondary); }
.progress { background: #f1f1f4; border-radius: 1rem; }

/* ---------- Login ---------- */
.login-page { background: #fff; }
.login-split { min-height: 100vh; display: flex; }
.login-form-side { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2rem; }
.login-form-side .login-box { width: 100%; max-width: 400px; }
.login-brand-side { flex: 1; background: linear-gradient(135deg, #1e1e2d 0%, #0b3d33 55%, #00a884 100%); color: #fff;
    display: flex; flex-direction: column; justify-content: center; padding: 4rem; position: relative; overflow: hidden; }
.login-brand-side::after { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; right: -160px; bottom: -200px;
    background: rgba(255, 255, 255, .06); }
.login-brand-side h1 { font-weight: 700; font-size: 2.2rem; }
.login-brand-side .feature { display: flex; gap: .75rem; align-items: center; margin-top: 1rem; color: rgba(255, 255, 255, .85); }
.login-brand-side .feature i { width: 38px; height: 38px; border-radius: .6rem; background: rgba(255, 255, 255, .12); display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 991.98px) { .login-brand-side { display: none; } }

/* ---------- Chat ---------- */
.chat-body { background: var(--mcw-chat-bg); overflow-y: auto; padding: 1rem; }
.msg { max-width: 75%; padding: .45rem .65rem .3rem; border-radius: .6rem; margin-bottom: .45rem; position: relative;
    box-shadow: 0 1px .5px rgba(0,0,0,.13); word-wrap: break-word; clear: both; }
.msg-in { background: var(--mcw-in); float: left; border-top-left-radius: 0; }
.msg-out { background: var(--mcw-out); float: right; border-top-right-radius: 0; }
.msg-who { font-size: .72rem; font-weight: 600; color: var(--mcw-green); margin-bottom: .1rem; }
.msg-meta { font-size: .68rem; color: #667781; text-align: right; margin-top: .15rem; }
.msg-img { max-width: 260px; max-height: 260px; border-radius: .35rem; display: block; margin-bottom: .25rem; }
.msg-note { clear: both; text-align: center; font-size: .75rem; color: #54656f; margin: .5rem auto; background: #fff8c5;
    border-radius: .5rem; padding: .2rem .6rem; width: fit-content; max-width: 90%; }
.msg-failed { border: 1px solid var(--app-danger); }
.chat-body::after { content: ""; display: block; clear: both; }
@media (max-width: 575.98px) { .msg { max-width: 90%; } .msg-img { max-width: 100%; } }

/* ---------- Consola del agente ---------- */
.agent-shell { height: calc(100vh - var(--app-header-h) - 3rem); overflow: hidden; }
.agent-shell > .row { height: 100%; }
.agent-shell .row > div { height: 100%; }
.conv-list { overflow-y: auto; background: #fff; border-right: 1px solid var(--app-border); }
.conv-item { padding: .75rem 1rem; border-bottom: 1px solid var(--app-border); cursor: pointer; display: flex; gap: .7rem; }
.conv-item:hover { background: #f9f9f9; }
.conv-item.active { background: var(--app-primary-light); }
.conv-item .avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--app-success-light); color: var(--app-success);
    display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.conv-item .name { font-weight: 600; color: var(--app-dark); }
.conv-item .preview { font-size: .8rem; color: var(--app-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-pane { display: flex; flex-direction: column; background: var(--mcw-chat-bg); }
.chat-pane .chat-header { background: #fff; padding: .65rem 1rem; border-bottom: 1px solid var(--app-border); }
.chat-pane .chat-body { flex: 1; }
.chat-pane .composer { background: #fff; padding: .65rem; border-top: 1px solid var(--app-border); }
.contact-pane { background: #fff; overflow-y: auto; border-left: 1px solid var(--app-border); }
.quick-replies { position: absolute; bottom: 100%; left: 0; right: 0; max-height: 220px; overflow-y: auto; z-index: 10; }
.status-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; flex-shrink: 0; }
.empty-state { color: var(--app-muted); text-align: center; margin-top: 18vh; }
.mobile-back { display: none; }
@media (max-width: 991.98px) {
    .agent-shell { height: calc(100vh - var(--app-header-h) - 2rem); }
    /* En móvil se muestra un panel a la vez: lista o chat */
    .agent-shell .contact-pane { display: none; }
    .agent-shell.chat-open .conv-list { display: none !important; }
    .agent-shell:not(.chat-open) .chat-pane { display: none; }
    .mobile-back { display: inline-flex; }
}

/* ---------- Editor de flujos ---------- */
.flow-tree ul { list-style: none; padding-left: 1.1rem; border-left: 1px dashed #d8dbe5; margin-left: .35rem; }
.flow-tree > ul { border-left: 0; padding-left: 0; margin-left: 0; }
.flow-tree li { margin: .25rem 0; }
.flow-node { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .55rem; border-radius: .425rem; cursor: pointer;
    border: 1px solid #e4e6ef; background: #fff; font-size: .85rem; }
.flow-node:hover { border-color: var(--app-primary); }
.flow-node.selected { background: var(--app-primary); color: #fff; border-color: var(--app-primary); }
.flow-edge { font-size: .75rem; color: var(--app-muted); margin-right: .25rem; }
.flow-ref { font-size: .8rem; color: var(--app-muted); font-style: italic; }
.node-Menu { border-left: 4px solid var(--app-primary); }
.node-Message { border-left: 4px solid var(--app-secondary); }
.node-Input { border-left: 4px solid var(--app-info); }
.node-Api, .node-Sql { border-left: 4px solid #fd7e14; }
.node-Condition { border-left: 4px solid #d63384; }
.node-Transfer { border-left: 4px solid var(--app-success); }
.node-End { border-left: 4px solid var(--app-danger); }
.sim-body { height: 420px; }
.flows-list .list-group-item { border: 0; border-radius: .475rem !important; margin-bottom: 2px; }
.flows-list .list-group-item.active { background: var(--app-primary-light); color: var(--app-primary); }

/* ---------- Vista previa de plantilla ---------- */
.wa-preview { background: var(--mcw-chat-bg); border-radius: .6rem; padding: 1rem; min-height: 200px; }
.wa-preview .bubble { background: #fff; border-radius: .5rem; padding: .5rem .65rem; box-shadow: 0 1px .5px rgba(0,0,0,.13); }
.wa-preview .btns .btn { background: #fff; color: #027eb5; width: 100%; margin-top: .25rem; font-size: .85rem; }

.agent-shell { position: relative; }
@media (max-width: 991.98px) {
    .agent-shell.info-open .contact-pane { display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 6; }
}
.badge-light-light { background: #f5f8fa; color: var(--app-muted); }
.min-w-0 { min-width: 0; }