/* ==========================================================================
   Smartchat · Tema "Atardecer"
   Archivo único para el CSS personalizado de app.smartchat.io.
   Reemplaza al CSS anterior: incluye sus ajustes de diseño (con los colores
   pasados a variables) más el tema de marca de smartchat.io y el modo oscuro.

   Índice
   1. Tokens (claro / oscuro)
   2. Base y tipografía
   3. Barra superior y menú lateral
   4. Contenedores, tarjetas y dashboard
   5. Formularios y botones
   6. Inbox: lista de chats
   7. Inbox: conversación
   8. Inbox: panel del contacto
   9. Componentes Element UI / Bootstrap
   10. Modo oscuro (ajustes puntuales)
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600&family=Quicksand:wght@400;500;600;700&display=swap");

/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root {
  /* Marca */
  --sc-violet: #5c0a92;
  --sc-violet-dark: #330065;
  --sc-violet-light: #9340d9;
  --sc-orange: #ff8b00;
  --sc-orange-hot: #ff6a2c;
  --sc-orange-dark: #da680f;
  --sc-gradient: linear-gradient(100deg, #330065 0%, #5c0a92 45%, #ff8b00 100%);
  --sc-gradient-v: linear-gradient(180deg, #330065 0%, #5c0a92 70%, #9340d9 100%);
  --sc-gradient-warm: linear-gradient(135deg, #ffa04a 0%, #ff8f5e 100%); /* naranja suavizado */

  /* Superficies y texto (cambian en modo oscuro) */
  --sc-bg: #fffbf4;
  --sc-surface: #ffffff;
  --sc-surface-2: #fff4e1;
  --sc-surface-3: #fde8bf;
  --sc-bubble-in: #f3eafc;
  --sc-bubble-in-text: #330065;
  --sc-bubble-out: linear-gradient(135deg, #ffe6cc 0%, #ffd9bd 100%);
  --sc-bubble-out-text: #4a2300;
  --sc-text: #250148;
  --sc-text-2: #4c3a63;
  --sc-text-muted: #7a688f;
  --sc-border: #f0e4d4;
  --sc-input-bg: #ffffff;
  --sc-input-border: #e3d3c0;
  --sc-accent-text: #5c0a92;   /* texto/iconos destacados */
  --sc-hover: #fff4e1;

  /* Sombras */
  --sc-shadow: 0 2px 8px -2px rgb(51 0 101 / .08), 0 12px 32px -8px rgb(51 0 101 / .14);
  --sc-shadow-hover: 0 4px 12px -2px rgb(51 0 101 / .12), 0 24px 48px -12px rgb(51 0 101 / .22);
  --sc-glow: 0 6px 16px -8px rgb(255 139 0 / .35);
  --sc-focus: 0 0 0 3px rgb(255 139 0 / .22);

  /* Variables propias de la app (con !important porque la app las escribe
     en línea sobre <html>) */
  --primary-color: #ff8b00 !important;
  --accent-color: #ff8b00 !important;
  --link-color: #5c0a92 !important;
  --main-clr: #5c0a92 !important;
  --primary: #ff8b00 !important;
}

/* Modo oscuro: la app pone .dark en <html> o <body>.
   Se reutilizan sus propias variables --dark-* teñidas de violeta. */
html.dark, body.dark, .dark {
  --dark-bg: #130228;
  --dark-bg-2: #0d011c;
  --dark-bg-3: #22093f;
  --dark-bg-4: #2c0f50;
  --dark-card: #1e0a3a;
  --dark-surface: #160330;
  --dark-surface-2: #1b0736;
  --dark-surface-3: #250c46;
  --dark-card-2: #2a1150;
  --dark-text: #f3e9ff;
  --dark-text-2: #d9c6f0;
  --dark-text-3: #a993c4;
  --dark-border: #3d1f63;
  --dark-border-soft: rgb(205 164 244 / .12);
  --dark-hover: #33175a;
  --dark-input: #0f0122;
  --dark-scroll-track: #130228;
  --dark-scroll-thumb: #5c3a85;
  --dark-shadow: 0 8px 24px rgb(0 0 0 / .45);

  --sc-bg: var(--dark-bg);
  --sc-surface: var(--dark-card);
  --sc-surface-2: var(--dark-surface-3);
  --sc-surface-3: var(--dark-card-2);
  --sc-bubble-in: var(--dark-card-2);
  --sc-bubble-in-text: var(--dark-text);
  --sc-bubble-out: linear-gradient(135deg, #5e2f12 0%, #532819 100%);
  --sc-bubble-out-text: #ffe6cc;
  --sc-text: var(--dark-text);
  --sc-text-2: var(--dark-text-2);
  --sc-text-muted: var(--dark-text-3);
  --sc-border: var(--dark-border-soft);
  --sc-input-bg: var(--dark-input);
  --sc-input-border: var(--dark-border);
  --sc-accent-text: #ffc266;
  --sc-hover: var(--dark-hover);
  --sc-shadow: var(--dark-shadow);
  --sc-shadow-hover: 0 16px 40px rgb(0 0 0 / .55);

  --link-color: #ffc266 !important;
  --main-clr: #ffa424 !important;
}

/* ==========================================================================
   2. Base y tipografía
   ========================================================================== */
*, pre { font-family: "Quicksand", ui-sans-serif, system-ui, sans-serif; }

.bootstrap-select .filter-option-inner-inner, .breadcrumb-item, .dataTables_wrapper *,
.p_cbx label, .p_radio label, ::placeholder, button, input, optgroup, p, rp span, textarea {
  font-size: 1rem;
}

h1, h2, h3, h4, h5, .font-bold, .chat-container h5, .chat-container h6 {
  font-family: "Fredoka", "Quicksand", sans-serif !important;
  font-weight: 600 !important;
}

body { background-color: var(--sc-bg) !important; }
::selection { background: rgb(255 139 0 / .85); color: #fff; }

.container, .maincontainer1 { max-width: none !important; padding: 0 !important; }
.maincontainer1 { margin: 0 !important; }
.wide.bwt .maincontainer { width: calc(100% - 1px) !important; padding: 16px !important; }
.el-tabs .el-tabs__header, .maincontainer.large { padding: 0 16px !important; }
@media (min-width: 1000px) {
  .bwt:not(.wide) .maincontainer:not(.single) { width: calc(100% - 310px) !important; padding: 16px !important; }
}

a { color: var(--sc-accent-text); }

/* ==========================================================================
   3. Barra superior y menú lateral
   ========================================================================== */
/* El lado izquierdo queda claro para que el logo de cada cuenta (que suele
   tener fondo blanco) no se vea como una caja sobre el violeta. */
#nav { background: linear-gradient(90deg, #ffffff 0%, #ffffff max(28%, 240px), #5c0a92 max(62%, 330px), #ff8b00 100%) !important; }
#nav, #nav i.fal, #nav i.fas, #nav .fa-angle-down, #nav .info i { color: #fff !important; }
#nav i.fal.fa-bars, #nav i.fa-bars, #nav .div_menu_bots i, #nav .div_menu_bots .fa-angle-down { color: var(--sc-violet) !important; }
#nav .div_menu_bots { background: transparent !important; }
#nav .div_menu_bots img { border-radius: 8px; }
.fal.fa-bars { font-weight: 700; }

/* Selector de estado (Disponible / Ausente) */
.d-flex.align-items-center.pointer.p-2.mr-1 {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .35rem .75rem !important; border-radius: 999px;
  font-size: .875rem; font-weight: 600; cursor: pointer;
  transition: .2s; border: 1px solid transparent;
}
.d-flex.align-items-center.pointer.p-2.mr-1 i { font-size: .6rem; }
.d-flex.align-items-center.pointer.p-2.mr-1 i.text-success { color: #10b981; }
.d-flex.align-items-center.pointer.p-2.mr-1 i.text-success ~ span { color: #065f46; }
.d-flex.align-items-center.pointer.p-2.mr-1:has(i.text-success) { background: #ecfdf5; border-color: #a7f3d0; }
.d-flex.align-items-center.pointer.p-2.mr-1:has(i.text-success):hover { background: #d1fae5; }
.d-flex.align-items-center.pointer.p-2.mr-1 i.text-secondary { color: #9ca3af; }
.d-flex.align-items-center.pointer.p-2.mr-1 i.text-secondary ~ span { color: #4b5563; }
.d-flex.align-items-center.pointer.p-2.mr-1:has(i.text-secondary) { background: #f3f4f6; border-color: #d1d5db; }
.d-flex.align-items-center.pointer.p-2.mr-1:has(i.text-secondary):hover { background: #e5e7eb; }

/* Menú lateral */
#my_menu, .wide #mysidebar, #mysidebar { background: var(--sc-gradient-v) !important; }
#mysidebar { border: none !important; max-width: 300px !important; width: 300px !important; transition: .3s; }
.wide #mysidebar { left: -300px; }
@media only screen and (max-width: 1000px) { #mysidebar { left: -300px !important; } }
#mysidebar ul { padding: 0; margin: 0; }
#mysidebar li { transition: background .25s, transform .2s; border-radius: 999px; }
#mysidebar ul li a {
  color: #fff !important; font-size: 1rem; font-weight: 500;
  text-decoration: none; transition: .25s;
  margin: 0 !important; padding: 10px 14px !important; border-radius: 999px;
}
#mysidebar i { font-size: 18px; color: #ffc266 !important; transition: color .25s; }
#mysidebar li:hover { background: rgb(255 255 255 / .1) !important; }
#mysidebar a.text-primary { background: var(--sc-gradient-warm) !important; font-weight: 700; box-shadow: var(--sc-glow); }
#mysidebar a.text-primary i { color: #fff !important; }
#mysidebar .badge { font-size: 12px; font-weight: 700; background: #ef4444 !important; color: #fff; padding: 3px 7px; border-radius: 12px; }

/* Submenú horizontal de secciones (Tags, Custom Fields…) */
.vueapp .mycontainer .el-menu .el-menu-item { border-bottom: 2px solid transparent; transition: .25s ease-in-out; }
.vueapp .mycontainer .el-menu .el-menu-item:hover { border-bottom-color: var(--sc-orange) !important; }
.vueapp .mycontainer .el-menu .el-menu-item a { transition: .25s ease-in-out; }
.vueapp .mycontainer .el-menu .el-menu-item a:hover { text-decoration: none !important; color: var(--sc-accent-text); }
.el-popover__reference-wrapper .info u { text-decoration: none; }

/* ==========================================================================
   4. Contenedores, tarjetas y dashboard
   ========================================================================== */
#mainapp .mt-nav > .vueapp:not(.maincontainer),
.maincontainer1 > .vueapp:not(:has(.div_breadcrumb)) { background-color: var(--sc-surface) !important; }

.maincontainer1 .mycontainer:not(.bg-transparent) {
  background-color: var(--sc-surface) !important;
  border-radius: 20px !important;
  box-shadow: var(--sc-shadow) !important;
}

.div_daterange { background-color: var(--sc-surface); border-radius: 999px; box-shadow: var(--sc-shadow) !important; }

/* Tarjetas */
.row.vueapp .z-depth-1, .row > .mt-4.col-12 > .bg-white.z-depth-1, .row > a.a_page_id > .div_tool {
  box-shadow: var(--sc-shadow) !important; transition: box-shadow .25s, transform .25s;
}
.row.vueapp .z-depth-1 { border-radius: 20px !important; background: var(--sc-surface) !important; }
.row.vueapp div .z-depth-1 { height: 100% !important; }
.row.vueapp a.a_no_style .z-depth-1 { min-height: 160px !important; height: 100% !important; }
.row.vueapp .z-depth-1:hover, .row > .mt-4.col-12 > .bg-white.z-depth-1:hover, .row > a.a_page_id > .div_tool:hover {
  box-shadow: var(--sc-shadow-hover) !important; transform: translateY(-2px);
}

/* Dashboard: tarjetas de canales */
.row.vueapp .col.min-w-200px.mt-2 .bg-white.text-center.z-depth-1.py-2,
.row.vueapp .p-3.col-12.col-md-6.col-lg-4.col-xl-3 .z-depth-1.bg-white.p-3.h70 { padding: 24px !important; }
.row.vueapp .p-3.col-12.col-md-6.col-lg-4.col-xl-3 .z-depth-1.bg-white.p-3.h70 b { font-size: 24px !important; margin-top: 8px; font-family: "Fredoka", sans-serif; }
.row.vueapp .p-3.col-12.col-md-6.col-lg-4.col-xl-3 .z-depth-1.bg-white.p-3.h70 .d-flex.align-items-center.justify-content-center .ml-2 { margin-left: 0 !important; margin-top: 8px; }
.row.vueapp .p-3.col-12.col-md-6.col-lg-4.col-xl-3 .z-depth-1.bg-white.p-3.h70 img[width="20"] {
  width: 48px !important; height: 48px !important; padding: 10px !important;
  border-radius: 14px !important; background: var(--sc-surface-2);
}
.row.vueapp .p-3.col-12.col-md-6.col-lg-4.col-xl-3 .z-depth-1.bg-white.p-3.h70 img[src*=whatsapp] { background-color: #dbfce8 !important; }
.row.vueapp .p-3.col-12.col-md-6.col-lg-4.col-xl-3 .z-depth-1.bg-white.p-3.h70 img[src*=telegram] { background-color: #e6f3fd !important; }
.row.vueapp .p-3.col-12.col-md-6.col-lg-4.col-xl-3 .z-depth-1.bg-white.p-3.h70 img[src*=messenger] { background-color: #e9f0ff !important; }
/* Corrección: antes el filtro dejaba el icono de Instagram blanco sobre blanco */
.row.vueapp .p-3.col-12.col-md-6.col-lg-4.col-xl-3 .z-depth-1.bg-white.p-3.h70 img[src*=instagram] { background: #fde7f1 !important; filter: none !important; }
.row.vueapp .p-3.col-12.col-md-6.col-lg-4.col-xl-3 .z-depth-1.bg-white.p-3.h70 img[src*=browser] { background-color: var(--sc-surface-2) !important; }
.row.vueapp .p-3.col-12.col-md-6.col-lg-4.col-xl-3 .z-depth-1.bg-white.p-3.h70 .text-center.text-truncate { text-align: left !important; }
.row.vueapp .p-3.col-12.col-md-6.col-lg-4.col-xl-3 .z-depth-1.bg-white.p-3.h70 .d-flex.align-items-center.justify-content-center {
  justify-content: flex-start !important; flex-direction: column; align-items: flex-start !important;
}

/* Dashboard: métricas */
.row.vueapp:has(.col.min-w-200px.mt-2) { row-gap: 16px; }
.row.vueapp .col.min-w-200px.mt-2 .bg-white.text-center.z-depth-1.py-2 > div { display: flex; gap: 6px; flex-wrap: wrap; justify-content: space-between; }
.row.vueapp .col.min-w-200px.mt-2 .bg-white.text-center.z-depth-1.py-2 > div > p { font-size: 12px !important; text-transform: uppercase; text-align: left !important; width: 100%; letter-spacing: .04em; color: var(--sc-text-muted); }
.row.vueapp .col.min-w-200px.mt-2 .bg-white.text-center.z-depth-1.py-2 p.text-body { font-size: 24px !important; text-align: left !important; width: auto; font-family: "Fredoka", sans-serif; color: var(--sc-text) !important; }
.row.vueapp .col.min-w-200px.mt-2 .bg-white.text-center.z-depth-1.py-2 .d-flex.text-danger,
.row.vueapp .col.min-w-200px.mt-2 .bg-white.text-center.z-depth-1.py-2 .d-flex.text-success { align-items: center; font-weight: 600; border-radius: 9999px; padding: .25rem .5rem; }
.row.vueapp .col.min-w-200px.mt-2 .bg-white.text-center.z-depth-1.py-2 .d-flex.text-success { background-color: #d1fae5; color: #059669 !important; }
.row.vueapp .col.min-w-200px.mt-2 .bg-white.text-center.z-depth-1.py-2 .d-flex.text-success * { color: #059669 !important; font-size: .75rem; }
.row.vueapp .col.min-w-200px.mt-2 .bg-white.text-center.z-depth-1.py-2 .d-flex.text-danger { background-color: #fee2e2; color: #dc2626 !important; }
.row.vueapp .col.min-w-200px.mt-2 .bg-white.text-center.z-depth-1.py-2 .d-flex.text-danger * { color: #dc2626 !important; font-size: .75rem; }

/* Dashboard: gráficos */
.row > .mt-4.col-12 > .bg-white.z-depth-1 { padding: 10px; height: 100% !important; border-radius: 20px !important; background: var(--sc-surface) !important; }
.row > .mt-4.col-12 > .bg-white.z-depth-1 > .border-bottom { border-bottom: none !important; }
.row > .mt-4.col-12 > .bg-white.z-depth-1 > .border-bottom p.m-0.p-0.font-weight-bold { font-size: 20px !important; font-family: "Fredoka", sans-serif; }

/* Herramientas (Tools) */
.row > a.a_page_id { padding: 1rem !important; }
.row > a.a_page_id > .div_tool { padding: 24px !important; height: 100% !important; border-radius: 20px !important; background: var(--sc-surface) !important; }
.row > a.a_page_id > .div_tool > .rounded-circle.mx-auto.d-flex.align-items-center.justify-content-center {
  margin: 0 !important; border-radius: 16px !important;
  background: var(--sc-gradient-warm) !important; box-shadow: var(--sc-glow);
}
.row > a.a_page_id > .div_tool > .a_page_id { text-align: left !important; justify-content: flex-start !important; }
.row a.a_page_id > .div_tool > .a_page_id, .row > a.a_page_id > .div_tool > .a_page_id > div {
  font-size: 24px !important; line-height: 1.2; margin: 12px 0 6px !important;
  font-family: "Fredoka", sans-serif; color: var(--sc-text);
}
.row > a.a_page_id > .div_tool .text-center.text-muted.h7 { text-align: left !important; font-size: 1rem !important; }

/* Pestañas de configuración */
.el-tabs .el-tabs__nav .el-tabs__item { text-transform: uppercase; font-weight: 600; letter-spacing: .03em; }
.el-tab-pane .card-header .btn { transition: .25s; }
.el-tab-pane .card-header .btn:hover { background: var(--sc-hover); color: var(--sc-text); }
.el-tab-pane .card-body .row { border: 1px solid var(--sc-border); border-radius: 14px; margin: 8px 0; padding: 12px; transition: box-shadow .3s; }
.el-tab-pane .card-body .row:hover { box-shadow: var(--sc-shadow); }
.el-tab-pane .card-body p.font-weight-bold { color: var(--sc-text); }
.el-tab-pane .card-body p.text-muted { line-height: 1.4; }
.el-tabs__content .el-tab-pane .btn { border-radius: 999px; font-weight: 600; transition: .25s; }
.el-tabs__content .el-tab-pane .btn-light { background: var(--sc-surface-2); border: 1px solid var(--sc-border); color: var(--sc-text); }
.el-tabs__content .el-tab-pane .btn-light:hover { background: var(--sc-violet); border-color: var(--sc-violet); color: #fff !important; }
.el-tabs__content .el-tab-pane .btn.text-danger { border: 1px solid #f87171; background: transparent; color: #dc2626 !important; }
.el-tabs__content .el-tab-pane a { color: var(--sc-accent-text); font-weight: 600; text-decoration: none; }
.el-tabs__content .el-tab-pane a:hover { text-decoration: none !important; }

/* Listados (Contacts, Pipelines, Flows…) */
#app .mycontainer > div.d-flex.px-4.pb-3,
#app .mycontainer > div.px-5.mb-3.w-100 { padding-left: 0 !important; padding-right: 0 !important; }
#app .mycontainer > .px-5.w-100 > .bg-white.rounded.px-4.pt-2 { display: flex; flex-direction: column; padding: 16px 24px !important; }
#app .mycontainer > .px-5.w-100 > .bg-white.rounded.px-4.pt-2 > .d-flex.justify-content-between.align-items-center.pt-2 { flex-wrap: wrap; margin: 0 !important; padding: 0 !important; gap: 10px; }
.s_card .body .divContact .w-100.d-flex.align-items-center.justify-content-between.pb-1 .d-flex.align-items-center.py-1 { gap: 8px; }
.s_card .body .divContact .w-100.d-flex.align-items-center.justify-content-between.pb-1 .d-flex.align-items-center.py-1 .media-body .text-secondary { font-size: 14px; }
@media (max-width: 640px) {
  #app .mycontainer > .px-5.w-100 > .bg-white.rounded.px-4.pt-2 > .d-flex.justify-content-between.align-items-center.pt-2 .my_btt_add { width: 100%; }
}
@media (min-width: 768px) {
  #app .mycontainer > div.px-5.mb-3.w-100 { padding-left: 1rem !important; padding-right: 1rem !important; }
  #app .mycontainer > .px-5.w-100 > .bg-white.rounded.px-4.pt-2 .item-action-c {
    width: auto !important; align-items: flex-start !important; justify-content: flex-start !important;
  }
}

/* Separadores con texto */
.h7.bold.text-center.my-3 { position: relative; display: flex; align-items: center; justify-content: center; text-align: center; font-weight: 700; font-size: 1rem; color: var(--sc-text-muted); }
.h7.bold.text-center.my-3::before, .h7.bold.text-center.my-3::after { content: ""; flex: 1; height: 1px; background-color: var(--sc-border); margin: 0 .75rem; }

/* ==========================================================================
   5. Formularios y botones
   ========================================================================== */
.myimput, input, input[type=email], input[type=number], input[type=password], input[type=search], input[type=text], select, textarea {
  width: 100%; padding: 6px 16px !important; font-size: 14px;
  color: var(--sc-text) !important; background: var(--sc-input-bg);
  border: 1px solid var(--sc-input-border) !important; border-radius: 12px;
  transition: .25s; outline: 0; box-sizing: border-box;
}
input::placeholder, textarea::placeholder { color: var(--sc-text-muted) !important; font-weight: 500; }
input:focus, select:focus, textarea:focus { border-color: var(--sc-orange) !important; box-shadow: var(--sc-focus); }
input:disabled, select:disabled, textarea:disabled { background: var(--sc-surface-2) !important; color: var(--sc-text-muted) !important; cursor: not-allowed; }

/* Botón principal de cada pantalla (Add, Create new, Send…) */
.my_btt_add {
  background: var(--sc-gradient-warm) !important; color: #fff !important;
  border: none !important; border-radius: 999px !important;
  min-width: 80px; cursor: pointer; font-size: 14px !important;
  padding: 8px 24px !important; text-transform: uppercase; font-weight: 700 !important;
  letter-spacing: .03em; box-shadow: var(--sc-glow); transition: box-shadow .3s, transform .2s;
}
.my_btt_add:hover { transform: translateY(-1px); box-shadow: 0 12px 28px -8px rgb(255 139 0 / .7); }

.btn-primary, .el-button--primary, .bg-primary, .bg_primary_color {
  background: var(--sc-gradient-warm) !important; border-color: transparent !important; color: #fff !important;
}
.btn-primary, .el-button--primary { border-radius: 999px !important; box-shadow: var(--sc-glow); font-weight: 700; }
.btn-primary:hover, .el-button--primary:hover { filter: brightness(1.05); }

.el-button.el-button--default { border-color: var(--sc-input-border) !important; box-shadow: none; }
.el-button.el-button--default:hover, .el-button.el-button--default:focus { color: var(--sc-accent-text); border-color: var(--sc-violet-light) !important; background: var(--sc-hover); }
.el-button--text, .chat-list-c .el-button.el-button--text, .h-device .el-button.el-button--text { color: var(--sc-accent-text) !important; font-weight: 700; }
.chat-list-c .el-button.el-button--text, .el-popover .el-button.el-button--text, .h-device .el-button.el-button--text,
.my-message .message-attach.message-attach-big .div_btts { text-transform: uppercase; }

.btn.btn-outline-secondary.nagative { border: 1px solid #f87171; border-radius: 999px; }
.btn.btn-outline-secondary.nagative:hover, .el-tabs__content .el-tab-pane .btn.text-danger:hover { background: #dc2626; color: #fff !important; }
.btn.btn-primary.positive { border-radius: 999px !important; }

/* ==========================================================================
   6. Inbox: lista de chats
   ========================================================================== */
.chat-list-c { background-color: var(--sc-bg) !important; }
.chat-list-c, .h-device .el-collapse, .h-device .el-collapse .el-collapse-item__wrap, .h-device.border { border: none !important; }

/* Pestañas Humano / Bot como píldoras */
.chat-list-c .el-button-group .el-button--mini {
  border-radius: 999px !important; margin-right: 4px; font-weight: 700;
  background: var(--sc-surface) !important; color: var(--sc-text) !important;
  border-color: var(--sc-input-border) !important;
}
.chat-list-c .el-button-group .el-button--mini:hover,
.chat-list-c .el-button-group .el-button--mini:focus {
  background: var(--sc-violet) !important; color: #fff !important; border-color: var(--sc-violet) !important;
}

/* Buscador */
.chat-list-c #divSearch { display: block; position: relative; }
.chat-list-c #divSearch::before {
  content: "\f002"; font-family: "Font Awesome 6 Pro"; font-weight: 900;
  position: absolute; left: 22px; top: 50%; transform: translateY(-50%);
  color: var(--sc-text-muted); pointer-events: none; font-size: 14px;
}
#app2 .chat-list-c #divSearch .search-box {
  background-color: var(--sc-surface) !important; border-radius: 999px !important;
  border-color: var(--sc-input-border) !important; padding-left: 32px !important;
}

/* Iconos de la cabecera de la lista y del chat */
.chat-area .channelIcon, .chat-list-c button.el-tooltip:first-child { display: none; }
.chat-container .el-tooltip i, .chat-list-c button.el-tooltip i, .chat-list-c span.el-tooltip i,
.chat-container .btn-white i, .chat-list-c .btn-white i { font-weight: 700; color: var(--sc-accent-text) !important; }
.chat-list-c .chat-selector { width: auto !important; }

/* Conversaciones */
#chat-user-list { padding-right: 6px; }
#app2 #chat-user-list a.media {
  position: relative; align-items: center;
  border-radius: 20px; margin-bottom: 6px;
  background-color: var(--sc-surface) !important; color: var(--sc-text);
  transition: transform .15s, box-shadow .15s, background-color .15s;
}
#app2 #chat-user-list a.media:hover { transform: translateX(2px); background-color: var(--sc-hover) !important; }
#app2 #chat-user-list a.media.btn-light.btn-light {
  background: var(--sc-surface) !important;
  box-shadow: 0 0 0 2px var(--sc-orange), var(--sc-glow);
}
#chat-user-list a .media-body { margin-top: 0 !important; }
#chat-user-list a .media-body > div { display: flex; flex-direction: column; }
#chat-user-list a .media-body > div .w-100.d-flex { gap: 8px; }
#chat-user-list a .media-body .d-inline-block.text-truncate.w-100 { width: calc(100% - 56px) !important; }
#chat-user-list a .media-body > div small { position: absolute; right: .8rem; width: auto; align-self: flex-end; margin-top: 0 !important; color: var(--sc-text-muted); }
#chat-user-list .img-profile-wrapper i.channel { right: 0 !important; }

/* ==========================================================================
   7. Inbox: conversación
   ========================================================================== */
.h-device.p-0.col-12.col-md-6 { padding: 0 8px !important; }
.h-device.p-0.col-12.col-md-6 > .h-device { background-color: var(--sc-bg); }

/* Cabecera del chat */
.chat-container > div.border.border-top-0.border-left-0.border-right-0 {
  position: relative;
  background: linear-gradient(to right, var(--sc-surface), var(--sc-surface-2));
  box-shadow: 0 8px 24px -12px rgb(51 0 101 / .25);
  border-color: var(--sc-border) !important;
}
.h-device.chat-container > .el-tooltip { position: relative; z-index: 99; }

/* Aviso "El bot está activo" y similares */
.h-device .chat-container .w-100.text-center.text-small {
  position: relative; z-index: 99; padding: .5rem 1rem;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  cursor: pointer; transition: .3s; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
}
.h-device .chat-container .w-100.text-center.text-small:hover { transform: translateY(-1px); }
.h-device .chat-container .w-100.text-center.text-small i { font-size: 1.2rem; color: #fff !important; }
.chat-container .bg-warning, .h-device .chat-container .el-tooltip.bg-warning.item {
  background: var(--sc-gradient) !important; color: #fff !important;
}

/* Burbujas */
.chat-area .message-text { padding: 8px 14px !important; }
body .chat-area .my-message .message-text {
  background: var(--sc-bubble-out) !important; color: var(--sc-bubble-out-text) !important;
  border-radius: 22px 22px 6px 22px !important; box-shadow: 0 2px 10px -4px rgb(120 60 0 / .25) !important;
}
body .chat-area .my-message .message-text * { color: inherit; }
body .chat-area .other-message .message-text {
  background: var(--sc-bubble-in) !important; color: var(--sc-bubble-in-text) !important;
  border-radius: 22px 22px 22px 6px !important; border-color: transparent !important;
}
.chat-area .repliedMsg { margin-bottom: -.5rem !important; padding-left: 0 !important; }
.chat-area .repliedMsg .message-text { border-radius: 0 18px 18px 0 !important; }
.my-message .message-attach.message-attach-big { box-shadow: var(--sc-shadow); border-radius: 16px; }

/* Mensajes del bot con botones (flujos) */
.chat-area .div_flow_content .div_text_c.textarea_c { background: var(--sc-bubble-in) !important; color: var(--sc-bubble-in-text) !important; border-radius: 16px 16px 0 0; }
.chat-area .div_text_c pre { color: inherit !important; }
.chat-area .div_btts { background: var(--sc-bubble-in) !important; border-top: 1px solid var(--sc-border); border-radius: 0 0 16px 16px !important; }
.chat-area .p_add_btt {
  background: var(--sc-surface) !important; color: var(--sc-accent-text) !important;
  border: 1px solid var(--sc-input-border); border-radius: 999px !important; font-weight: 700;
}

/* Caja de escritura */
.el-textarea__inner { border-radius: 20px !important; background: var(--sc-input-bg) !important; color: var(--sc-text) !important; }
.el-textarea__inner:focus { border-color: var(--sc-orange) !important; box-shadow: var(--sc-focus); }

/* ==========================================================================
   8. Inbox: panel del contacto
   ========================================================================== */
.h-device.border.border-top-0.border-right-0.border-bottom-0.py-2.col-12.col-md-3 { background-color: var(--sc-surface); }
.h-device .img-profile-wrapper-big { width: 80px !important; }
.h-device .img-profile-wrapper-big .img-profile-big { width: 80px !important; height: 80px !important; }
.h-device .img-profile-wrapper-big i.channel { right: 8px !important; font-size: 18px !important; }

/* Lista de datos con iconos */
.h-device.border.border-top-0.border-right-0.border-bottom-0.py-2.col-12.col-md-3 > div div .pt-3 { display: flex; flex-direction: column; gap: 6px; }
.h-device.border.border-top-0.border-right-0.border-bottom-0.py-2.col-12.col-md-3 .d-flex.p-1 {
  background-color: var(--sc-surface-2); border-radius: 12px;
  padding: 6px 12px !important; justify-content: space-between;
}
.h-device.border.border-top-0.border-right-0.border-bottom-0.py-2.col-12.col-md-3 .d-flex.p-1 > .d-flex.col-5.p-0 span { color: var(--sc-text-muted) !important; }
.h-device.border.border-top-0.border-right-0.border-bottom-0.py-2.col-12.col-md-3 .d-flex.p-1 > .col-7.py-0.pr-0.pl-2 span,
.h-device.border.border-top-0.border-right-0.border-bottom-0.py-2.col-12.col-md-3 .d-flex.p-1 > .col-7.py-0.pr-0.pl-2 > div {
  display: flex; justify-self: flex-end; color: var(--sc-text) !important; font-weight: 600;
}
.h-device.border.border-top-0.border-right-0.border-bottom-0.py-2.col-12.col-md-3 .d-flex.p-1 > .d-flex.col-5.p-0::before {
  font-family: "Font Awesome 6 Pro"; font-weight: 900; color: var(--sc-orange) !important;
  margin-right: .5rem; display: inline-block; content: "\f129";
}
.h-device.border.border-top-0.border-right-0.border-bottom-0.py-2.col-12.col-md-3 .d-flex.p-1:first-of-type > .d-flex.col-5.p-0::before { content: "\f0e0"; }
.h-device.border.border-top-0.border-right-0.border-bottom-0.py-2.col-12.col-md-3 .d-flex.p-1:nth-of-type(2) > .d-flex.col-5.p-0::before { content: "\f095"; }
.h-device.border.border-top-0.border-right-0.border-bottom-0.py-2.col-12.col-md-3 .d-flex.p-1:nth-of-type(3) > .d-flex.col-5.p-0::before { content: "\f017"; }
.h-device.border.border-top-0.border-right-0.border-bottom-0.py-2.col-12.col-md-3 .d-flex.p-1:nth-of-type(4) > .d-flex.col-5.p-0::before { content: "\f133"; }
.h-device.border.border-top-0.border-right-0.border-bottom-0.py-2.col-12.col-md-3 .d-flex.p-1:nth-of-type(5) > .d-flex.col-5.p-0::before { content: "\f57d"; }

/* Botón "Agregar campo" */
.h-device.border.border-top-0.border-right-0.border-bottom-0.py-2.col-12.col-md-3 .mt-2.d-flex.align-items-center.p-1.btn-my.el-popover__reference {
  justify-content: center !important; gap: 8px; transition: .25s ease-out;
  font-weight: 700; text-transform: uppercase;
  background: var(--sc-gradient) !important; color: #fff !important; border-radius: 999px;
}
.h-device.border.border-top-0.border-right-0.border-bottom-0.py-2.col-12.col-md-3 .mt-2.d-flex.align-items-center.p-1.btn-my.el-popover__reference * { color: #fff !important; }
.h-device.border.border-top-0.border-right-0.border-bottom-0.py-2.col-12.col-md-3 .mt-2.d-flex.align-items-center.p-1.btn-my.el-popover__reference i::before { color: #fff; content: "\f055" !important; font-weight: 900 !important; }

/* Secciones Tags / Pipelines / Notas */
.h-device.border.border-top-0.border-right-0.border-bottom-0.py-2.col-12.col-md-3 .mt-5 { position: relative; }
.h-device.border.border-top-0.border-right-0.border-bottom-0.py-2.col-12.col-md-3 .mt-5::before {
  content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 1px; background: var(--sc-border);
}
.h-device.border.border-top-0.border-right-0.border-bottom-0.py-2.col-12.col-md-3 .mt-5 > .mb-3 > div:first-child::before {
  font-family: "Font Awesome 6 Pro"; font-weight: 900; content: "\f542"; margin-right: .5rem; display: inline-block; color: var(--sc-orange);
}
.h-device.border.border-top-0.border-right-0.border-bottom-0.py-2.col-12.col-md-3 .mt-5 > div:not(.mb-3):first-child::before {
  font-family: "Font Awesome 6 Pro"; font-weight: 900; content: "\f249"; margin-right: .5rem; display: inline-block; color: var(--sc-orange);
}
.h-device.border.border-top-0.border-right-0.border-bottom-0.py-2.col-12.col-md-3 .mt-5 .px-2 button.btn.btn-outline-secondary.btn-sm.rounded {
  position: relative; text-transform: uppercase; transition: .25s ease-in-out;
  background: var(--sc-gradient-warm) !important; color: #fff !important; border-color: transparent !important;
  font-size: 14px !important; border-radius: 999px !important; font-weight: 700; box-shadow: var(--sc-glow);
}
.h-device.border.border-top-0.border-right-0.border-bottom-0.py-2.col-12.col-md-3 .mt-5 .px-2 button.btn.btn-outline-secondary.btn-sm.rounded:hover { filter: brightness(1.05); }
.h-device.border.border-top-0.border-right-0.border-bottom-0.py-2.col-12.col-md-3 .mt-5 .px-2 button.btn.btn-outline-secondary.btn-sm.rounded::before {
  content: "\f055"; font-family: "Font Awesome 6 Pro"; font-weight: 900;
  position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); font-size: .85rem;
}

/* Desplegables (Collapse) */
.h-device .el-collapse .el-collapse-item { margin: 4px 0 !important; }
.h-device .el-collapse .el-collapse-item__header {
  border: 2px solid var(--sc-violet-light); border-radius: 999px; padding: 12px;
  color: var(--sc-accent-text) !important; background: transparent;
}
.h-device .el-collapse .el-collapse-item__header.is-active { border-bottom-color: inherit !important; }
.h-device .el-collapse .el-collapse-item__wrap { background: transparent; }

/* ---------- Editor de flujos ---------- */
#rete.node-editor { background-color: var(--sc-bg) !important; }
#rete .minimap { background: rgb(92 10 146 / .06) !important; border-radius: 14px; }
html.dark #rete.node-editor, body.dark #rete.node-editor { background-color: var(--dark-bg-2) !important; }
html.dark #rete .node, body.dark #rete .node { background: var(--dark-card) !important; }
html.dark #rete .minimap, body.dark #rete .minimap { background: rgb(205 164 244 / .06) !important; }
html.dark .start_step > .d-flex, body.dark .start_step > .d-flex { background: var(--dark-card) !important; }

/* ==========================================================================
   9. Componentes Element UI / Bootstrap
   ========================================================================== */
/* Pestañas */
.el-tabs__item:hover, .el-tabs__item.is-active { color: var(--sc-accent-text) !important; }
.el-tabs__active-bar { background: var(--sc-gradient-warm) !important; height: 3px !important; border-radius: 3px; }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background: var(--sc-gradient-warm) !important; border-radius: 999px; }
.nav-tabs .nav-link.active, .nav-link { color: var(--sc-accent-text); }

/* Casillas, radios e interruptores */
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner,
.el-radio__input.is-checked .el-radio__inner { background-color: var(--sc-orange) !important; border-color: var(--sc-orange) !important; }
.el-checkbox__input.is-checked + .el-checkbox__label, .el-radio__input.is-checked + .el-radio__label { color: var(--sc-accent-text) !important; }
.el-checkbox__inner:hover, .el-radio__inner:hover { border-color: var(--sc-orange) !important; }
.el-switch.is-checked .el-switch__core { background-color: var(--sc-orange) !important; border-color: var(--sc-orange) !important; }
.my_checkbox input:checked ~ span, .switch input:checked + label::before { background-color: var(--sc-orange) !important; border-color: var(--sc-orange) !important; }

/* Campos y selects de Element */
.el-input__inner, .el-select .el-input__inner { border-radius: 12px !important; }
.el-input__inner:focus, .el-select .el-input.is-focus .el-input__inner, .el-select .el-input__inner:focus { border-color: var(--sc-orange) !important; }
.el-select-dropdown__item.selected, .el-dropdown-menu__item:hover, .el-select-dropdown__item.hover { color: var(--sc-accent-text) !important; }
.el-select-dropdown, .el-dropdown-menu, .el-popover, .dropdown-menu { border-radius: 14px !important; box-shadow: var(--sc-shadow-hover) !important; }

/* Paginación */
.el-pagination.is-background .el-pager li:not(.disabled).active,
.pagination > li.active > a, .pagination > li.active > span, .page-item.active .page-link {
  background: var(--sc-gradient-warm) !important; border-color: transparent !important; color: #fff !important;
}
.el-pagination.is-background .el-pager li:not(.disabled):hover, .el-pager li:hover { color: var(--sc-orange) !important; }

/* Etiquetas */
.el-tag { border-radius: 999px !important; }
.el-tag--info.el-tag--plain { background: var(--sc-surface-2) !important; border-color: var(--sc-border) !important; color: var(--sc-text) !important; }
.tag-editor .tag-editor-tag, .tag-editor .tag-editor-delete { background: var(--sc-surface-3) !important; color: var(--sc-text) !important; }

/* Tablas */
.el-table th, .el-table thead { color: var(--sc-text) !important; font-weight: 700; }
.el-table--enable-row-hover .el-table__body tr:hover > td { background-color: var(--sc-hover) !important; }
.el-table, .el-table tr, .el-table th.el-table__cell, .el-table__expanded-cell { background-color: var(--sc-surface); }
.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell { background: var(--sc-bg) !important; }
.el-table__body tr.current-row > td.el-table__cell { background-color: var(--sc-hover) !important; }

/* Selector de fechas */
.daterangepicker td.active, .daterangepicker td.active:hover, .ranges li.active, .btn_apply_data { background: var(--sc-orange) !important; color: #fff !important; }

/* Ventanas modales */
.modal-content { border-radius: 20px !important; border: none !important; box-shadow: var(--sc-shadow-hover); }

/* Barra de desplazamiento */
::-webkit-scrollbar-thumb { background-color: rgb(92 10 146 / .25); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background-color: rgb(92 10 146 / .45); }

/* ==========================================================================
   10. Modo oscuro (ajustes puntuales)
   La mayoría lo resuelven los tokens; aquí van los colores que la app
   escribe fijos en main1-dark.css.
   ========================================================================== */
.dark .z-depth-1, .dark .box_shadow, .dark .dropdown-menu,
.dark .dropdown.suggest .dropdown-item, .dark .el-picker-panel__footer { background-color: var(--dark-card) !important; }
.dark .form-control.search-box, .dark .form-control.ms-ctn { background-color: var(--dark-input) !important; }
.dark .el-button--text { background: transparent !important; border-color: transparent !important; }
html.dark input, html.dark select, html.dark textarea, html.dark .el-input__inner,
body.dark input, body.dark select, body.dark textarea, body.dark .el-input__inner {
  background-color: var(--dark-input) !important; color: #ffffff !important; border-color: rgb(255 255 255 / .35) !important;
}
html.dark .el-select .el-input__inner, body.dark .el-select .el-input__inner,
html.dark .el-cascader .el-input__inner, body.dark .el-cascader .el-input__inner,
html.dark .el-date-editor .el-input__inner, body.dark .el-date-editor .el-input__inner {
  color: #ffffff !important; border-color: rgb(255 255 255 / .35) !important;
}
html.dark .el-select .el-input__inner::placeholder, body.dark .el-select .el-input__inner::placeholder,
html.dark .el-input .el-input__inner::placeholder, body.dark .el-input .el-input__inner::placeholder,
html.dark input::placeholder, html.dark textarea::placeholder,
body.dark input::placeholder, body.dark textarea::placeholder { color: rgb(255 255 255 / .8) !important; }
html.dark .el-input__icon, html.dark .el-input__suffix i, html.dark .el-input__prefix i,
body.dark .el-input__icon, body.dark .el-input__suffix i, body.dark .el-input__prefix i,
.dark .chat-list-c #divSearch::before { color: #ffffff !important; }
/* Casillas y radios: borde blanco para que se vean sobre el fondo oscuro */
html.dark .el-checkbox__inner, body.dark .el-checkbox__inner,
html.dark .el-radio__inner, body.dark .el-radio__inner {
  background-color: transparent !important; border-color: rgb(255 255 255 / .8) !important;
}
html.dark .el-checkbox__inner::after, body.dark .el-checkbox__inner::after { border-color: #ffffff !important; }
html.dark .el-checkbox__label, body.dark .el-checkbox__label,
html.dark .el-radio__label, body.dark .el-radio__label { color: #ffffff; }
html.dark .el-table, body.dark .el-table, html.dark .el-table .cell, body.dark .el-table .cell { color: #ffffff; }
html.dark .el-button.el-button--default, body.dark .el-button.el-button--default {
  background-color: var(--dark-card-2) !important; color: var(--dark-text) !important; border-color: var(--dark-border) !important;
}
.dark .el-divider__text { background-color: var(--dark-card) !important; }
.dark .el-switch__core { background-color: var(--dark-border); }
.dark .chat-container > div.border.border-top-0.border-left-0.border-right-0 { box-shadow: 0 8px 24px -12px rgb(0 0 0 / .6); }
html.dark #nav, body.dark #nav { background: linear-gradient(90deg, #efe4fb 0%, #efe4fb max(28%, 240px), #330065 max(62%, 330px), #b04e06 100%) !important; }
.dark #my_menu, .dark #mysidebar { background: linear-gradient(180deg, #0d011c 0%, #22093f 100%) !important; }
.dark .d-flex.align-items-center.pointer.p-2.mr-1:has(i.text-success) { background: rgb(16 185 129 / .15); border-color: rgb(16 185 129 / .35); }
.dark .d-flex.align-items-center.pointer.p-2.mr-1 i.text-success ~ span { color: #6ee7b7; }
.dark .d-flex.align-items-center.pointer.p-2.mr-1:has(i.text-secondary) { background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .16); }
.dark .d-flex.align-items-center.pointer.p-2.mr-1 i.text-secondary ~ span { color: var(--dark-text-2); }
.dark .row.vueapp .p-3.col-12.col-md-6.col-lg-4.col-xl-3 .z-depth-1.bg-white.p-3.h70 img[width="20"] { filter: none; }
.dark ::-webkit-scrollbar-thumb { background-color: var(--dark-scroll-thumb); }