/* ============================================
   WHATSAPP INTERFACE REDESIGN 2026
   ============================================ */

/* ── Navbar / Session Tabs ── */
#navbarwhatsap {
  background: var(--bg-secondary-color) !important;
  border: none !important;
  border-bottom: 1px solid var(--border-color) !important;
  padding: 6px 16px !important;
  min-height: auto !important;
}
#navbarwhatsap .container-fluid {
  padding: 0 !important;
}
#myTabWhats {
  gap: 6px !important;
  flex-wrap: wrap !important;
  overflow: visible !important;
}
#myTabWhats li {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.tabdeWhats {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 7px 14px !important;
  border: 0 !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text-secondary-color) !important;
  background: var(--bg-color) !important;
  transition: all 0.2s ease !important;
  white-space: nowrap;
  text-decoration: none !important;
}
.tabdeWhats:hover {
  border-color: #3b82f6 !important;
  color: #3b82f6 !important;
  background: rgba(59,130,246,0.04) !important;
}
.tabdeWhats.active {
  border-color: #3b82f6 !important;
  color: #3b82f6 !important;
  background: rgba(59,130,246,0.06) !important;
  font-weight: 600 !important;
}
#navbarwhatsap #dropdownMenuButton {
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 7px 16px !important;
  background: #3b82f6 !important;
  border: none !important;
  color: var(--dt-cta-fg) !important;
}
#navbarwhatsap #dropdownMenuButton:hover {
  background: #2563eb !important;
}
#myTabWhats .badge {
  font-size: 10px !important;
  padding: 5px !important;
  border-radius: 9999px !important;
  min-width: 20px;
  text-align: center;
  height: auto !important;
  margin-top: 0 !important;
  position: static !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
#myTabWhats .badge:empty,
#myTabWhats .badge.u-hidden {
  display: none !important;
}

/* ── Chat Card Container ── */
#todolivewhatshap.card-chat {
  border-radius: 16px !important;
  border: 0 !important;
  overflow: hidden !important;
  box-shadow: none !important;
  height: calc(100vh - 160px) !important;
}

/* ── Sidebar ── */
#verchatsWHATDIV > .app-chat,
#verchatsWHATDIV > .chat-sidebar {
  width: 320px !important;
  min-width: 320px !important;
  background: var(--bg-color) !important;
  border-right: 1px solid var(--border-color) !important;
  display: flex !important;
  flex-direction: column !important;
}
.whats-search-wrap {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
  background: var(--bg-color);
}
.whats-search-wrap input,
.whats-search-wrap input[type="text"],
.whats-search-wrap input[type="search"] {
  width: 100%;
  padding: 9px 14px 9px 38px !important;
  border: 0;
  border-radius: 10px;
  background: var(--bg-secondary-color);
  color: var(--text-color);
  font-size: 13px;
  outline: none;
  transition: all 0.25s ease;
}
.whats-search-wrap input::placeholder {
  color: var(--text-muted-color);
}
.whats-search-wrap input:focus {
  border-color: #3b82f6;
  background: var(--bg-color);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.10);
}
.whats-search-wrap .whats-search-icon {
  position: absolute;
  left: 26px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted-color);
  font-size: 16px;
  pointer-events: none;
  transition: color 0.2s;
}
.whats-search-wrap input:focus ~ .whats-search-icon,
.whats-search-wrap:focus-within .whats-search-icon {
  color: #3b82f6;
}
#whatschatsidebar {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 0 !important;
}
#whatschatsidebar .conversdewhatsapp {
  padding: 0 !important;
}
.whatsconver {
  border-bottom: 1px solid var(--border-color) !important;
  margin: 0 !important;
  border-radius: 0 !important;
}
.whatsconver .chat-user {
  padding: 14px 16px !important;
  border-radius: 0 !important;
  transition: background 0.15s !important;
  background: transparent !important;
}
.whatsconver .chat-user:hover,
.whatsconver .chat-user.bg-hover-light-black:hover {
  background: var(--hover-color) !important;
}
.whatsconver.unread-message .chat-user {
  background: rgba(59,130,246,0.04) !important;
}
.whatsconver .chat-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--text-color) !important;
  line-height: 1.3 !important;
}
.whatsconver .fs-3.text-truncate,
.whatsconver [data-akilastmsgwhats] {
  font-size: 13px !important;
  color: var(--text-secondary-color) !important;
  line-height: 1.4 !important;
}
.whatsconver .fs-2.text-muted {
  font-size: 11px !important;
  color: var(--text-muted-color) !important;
}
.whatsconver [data-totalunreadwhats] {
  font-size: 10px !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 9999px !important;
  top: -4px !important;
  right: -4px !important;
  left: auto !important;
}
.whatsconver [data-totalunreadwhats].u-hidden {
  display: none !important;
}

/* ── Chat Content Area ── */
.card-chat-content {
  display: flex !important;
  flex-direction: column !important;
  background: var(--bg-color) !important;
  position: relative;
  overflow: hidden;
}
.card-chat-content > .tab-pane {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
#whatsEmptyState {
  background: var(--bg-secondary-color) !important;
}
.chat-content-header {
  padding: 14px 20px !important;
  border-bottom: 1px solid var(--border-color) !important;
  background: var(--bg-color) !important;
  flex-shrink: 0;
}
.chat-content-header .row {
  align-items: center !important;
}
.chat-content-header h5 {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--text-color) !important;
  margin: 0 !important;
}
.chat-content-header .titdatachaadmintfloatheader2 {
  font-size: 12px !important;
  color: var(--text-secondary-color) !important;
}
.chat-content-header #akiWhatsbotones {
  margin-top: 4px;
}
.chat-content-header #akiWhatsbotones .btn {
  font-size: 12px !important;
  padding: 3px 10px !important;
  border-radius: 6px !important;
}
.chat-content-header .list-unstyled a {
  color: var(--text-secondary-color) !important;
  font-size: 18px !important;
  padding: 6px 8px !important;
  border-radius: 8px;
  transition: all 0.15s;
}
.chat-content-header .list-unstyled a:hover {
  background: var(--hover-color);
  color: var(--text-color) !important;
}

/* ── Message Area ── */
.chat-content-body {
  display: block !important;
  flex: 1 1 0% !important;
  min-height: 0 !important;
  margin-bottom: 0 !important;
  overflow: hidden !important;
  background: var(--bg-secondary-color) !important;
}
.chat-content-scroll-area {
  height: 100% !important;
  overflow-y: auto !important;
  padding: 20px !important;
}

/* ── Message Bubbles ── */

/* Messages container - block layout, scroll handled by parent #divScrollWhat */
#akichatWHATBOTscrollmensajes {
  display: block !important;
  width: 100% !important;
}
.chat-content-scroll-area {
  overflow-x: hidden !important;
}

/* Each message row takes full width */
#akichatWHATBOTscrollmensajes > [data-whatsestemsg] {
  width: 100% !important;
  max-width: 100% !important;
}

/* Outgoing messages (fila `d-flex px-4` de meta_whatsapp2040.js): a la derecha.
   09-11 (dporcel: «mis mensajes se deben ver a la derecha»): las utilidades flex-end-center y w-xxl-75 vivían en
   165_app.css, que ya no se carga; sin ellas el envoltorio ocupaba el 100 % y la burbuja caía a la izquierda.
   Las reglas anteriores apuntaban a .d-flex.flex-end-center.p-0, una combinación que el marcado nunca tuvo. */
#akichatWHATBOTscrollmensajes .flex-end-center {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
}
#akichatWHATBOTscrollmensajes > .d-flex.px-4 {
  justify-content: flex-end !important;
  width: 100% !important;
}
#akichatWHATBOTscrollmensajes > .d-flex.px-4 > .flex-1 {
  width: 100% !important;
  display: flex !important;
  justify-content: flex-end !important;
}
#akichatWHATBOTscrollmensajes > .d-flex.px-4 .w-100.w-xxl-75 {
  width: auto !important;
  max-width: 75% !important;
  margin-left: auto !important;
}
#akichatWHATBOTscrollmensajes > .d-flex.px-4 .showlastseenwhats { text-align: right !important; }

/* Incoming messages - force left alignment */
#akichatWHATBOTscrollmensajes .d-flex.p-0:not(.flex-end-center) {
  justify-content: flex-start !important;
  width: 100% !important;
}
#akichatWHATBOTscrollmensajes .d-flex.p-0:not(.flex-end-center) .w-xxl-75,
#akichatWHATBOTscrollmensajes .d-flex.p-0:not(.flex-end-center) .w-100.w-xxl-75 {
  width: auto !important;
  max-width: 75% !important;
}
/* El mensaje entrante lleva DOS wrappers .w-100.w-xxl-75 anidados (meta_whatsapp2040.js): el cap del 75%
   solo debe aplicar al exterior. Si aplica también al interior, recorta el ancho natural del texto un 25%
   (75% sobre un flex item ya encogido a fit-content) y parte en dos líneas mensajes de una sola línea. */
#akichatWHATBOTscrollmensajes .d-flex.p-0:not(.flex-end-center) .w-xxl-75 .w-100.w-xxl-75 {
  max-width: 100% !important;
}

/* Outgoing text (agent/company sent) - blue gradient */
#akichatWHATBOTscrollmensajes .bg-info-subtle {
  background: linear-gradient(135deg, #4f6ef7 0%, #3b5de7 100%) !important;
  color: var(--dt-on-color) !important;
  border-radius: 18px 18px 4px 18px !important;
  padding: 10px 16px !important;
  border: none !important;
  box-shadow: none;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  max-width: 480px;
}
#akichatWHATBOTscrollmensajes .bg-info-subtle.text-dark {
  color: var(--dt-on-color) !important;
}

/* Outgoing media (images, video, audio) - neutral container */
#akichatWHATBOTscrollmensajes .bg-200 {
  background: var(--bg-color) !important;
  color: var(--text-color) !important;
  border-radius: 18px 18px 4px 18px !important;
  padding: 6px !important;
  border: 0;
  box-shadow: none;
  overflow: hidden;
}

/* Incoming messages (client) - white/light, left aligned */
#akichatWHATBOTscrollmensajes .text-bg-light {
  background: var(--bg-color) !important;
  color: var(--text-color) !important;
  border-radius: 18px 18px 18px 4px !important;
  padding: 10px 16px !important;
  border: 0 !important;
  box-shadow: none;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  max-width: 480px;
}
#akichatWHATBOTscrollmensajes .text-bg-light.text-dark {
  color: var(--text-color) !important;
}

/* Ensure outgoing messages stay on the right */
#akichatWHATBOTscrollmensajes .d-flex.p-0 {
  width: 100%;
}
#akichatWHATBOTscrollmensajes .d-flex.p-0 > .flex-1 {
  width: 100%;
}

/* Timestamps */
#akichatWHATBOTscrollmensajes .showlastseenwhats,
#akichatWHATBOTscrollmensajes .fs-2.text-muted {
  font-size: 11px !important;
  color: var(--text-muted-color) !important;
  margin-bottom: 4px;
}

/* System/Datalyse messages (italic) */
#akichatWHATBOTscrollmensajes .fst-italic {
  background: transparent !important;
  color: var(--text-muted-color) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

/* Message hover actions */
#akichatWHATBOTscrollmensajes .hover-actions {
  opacity: 0;
  transition: opacity 0.15s;
}
#akichatWHATBOTscrollmensajes [data-whatsestemsg]:hover .hover-actions {
  opacity: 1;
}

/* ── Footer / Message Input ── */
#divformmandawhats {
  background: var(--bg-color) !important;
  border-top: 1px solid var(--border-color) !important;
  padding: 10px 16px !important;
  flex-shrink: 0;
}
#divformmandawhats .d-flex {
  gap: 8px;
}
/* 09-11 (dporcel: «el campo al 100%»): form.chat-editor-area dependía de 165_behaviours.css (ya no se carga) y encogía a 205 px */
#divformmandawhats .w-85 { flex: 1 1 auto !important; width: auto !important; min-width: 0; }
#divformmandawhats .chat-editor-area { flex: 1 1 auto; width: 100%; min-width: 0; margin: 0; }
#divformmandawhats .message-type-box { display: block; width: 100% !important; }
#sentTemplateButton {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 6px !important;
  margin-left: 10px !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  color: var(--text-secondary-color) !important;
  background: transparent !important;
  transition: all 0.15s;
}
#sentTemplateButton:hover {
  color: #3b82f6 !important;
  background: var(--hover-color) !important;
}
#btnwhabotonpaemoji i {
  font-size: 18px !important;
  color: var(--text-secondary-color) !important;
}
#whathsaptext,
#divformmandawhats .message-type-box {
  background: var(--bg-secondary-color) !important;
  border: 0 !important;
  border-radius: 12px !important;
  padding: 10px 16px !important;
  resize: none !important;
  font-size: 13.5px !important;
  color: var(--text-color) !important;
  min-height: 40px !important;
  max-height: 120px !important;
  line-height: 1.4 !important;
  transition: border-color 0.2s;
}
#whathsaptext:focus {
  border-color: #3b82f6 !important;
  outline: none !important;
}
#whathsaptext::placeholder {
  color: var(--text-muted-color) !important;
}
#divformmandawhats .list-unstyledn a,
#divformmandawhats .list-unstyled a {
  color: var(--text-secondary-color) !important;
  font-size: 18px !important;
  padding: 6px !important;
  border-radius: 8px;
  transition: all 0.15s;
}
#divformmandawhats .list-unstyledn a:hover,
#divformmandawhats .list-unstyled a:hover {
  background: var(--hover-color);
  color: var(--text-color) !important;
}
.whats-send-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #3b82f6;
  border: none;
  color: var(--dt-cta-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
  font-size: 18px;
}
.whats-send-btn:hover {
  background: #2563eb;
  transform: scale(1.05);
}
.whats-send-btn:active {
  transform: scale(0.95);
}
.whats-templates-label {
  font-size: 13px;
}
@media (max-width: 767px) {
  .whats-templates-label { display: none; }
}
.noWhatsBox {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-evenly;
  min-height: 200px;
  color: var(--text-muted-color);
  align-content: space-around;
  flex-wrap: wrap;
}
@media (max-width: 987px) {
  #verchatsWHATDIV > .app-chat,
  #verchatsWHATDIV > .chat-sidebar {
    width: 100% !important;
    min-width: 100% !important;
  }
  #todolivewhatshap.card-chat {
    border-radius: 0 !important;
    height: calc(100vh - 120px) !important;
  }

  /* ── Responsive: Sidebar visible by default, chat hidden ── */
  #verchatsWHATDIV > .chat-sidebar {
    display: block !important;
  }
  #verchatsWHATDIV > .card-chat-content {
    display: none !important;
  }

  /* When a conversation is clicked: hide sidebar, show chat */
  #verchatsWHATDIV > .chat-sidebar.heclickadounaconverchatbotadm {
    display: none !important;
  }
  #verchatsWHATDIV > .card-chat-content.heclickadounaconverchatbotadm {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }

  /* Back button to return to the message list */
  .btnreducechatmin {
    display: none !important;
  }
  .heclickadounaconverchatbotadm .btnreducechatmin {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(59,130,246,0.08);
    color: #3b82f6 !important;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
    font-size: 16px;
  }
  .heclickadounaconverchatbotadm .btnreducechatmin:hover {
    background: rgba(59,130,246,0.15);
  }

  /* Search box adjustments on mobile */
  .whats-search-wrap {
    padding: 10px 12px;
  }
  .whats-search-wrap input {
    font-size: 14px;
    padding: 10px 14px 10px 38px;
  }
}

/* ── Desktop: always show both panels ── */
@media (min-width: 988px) {
  .btnreducechatmin {
    display: none !important;
  }
}

/* ── Media bubbles (image, video, document) ── */
/* Force the bubble container to allow the media to expand to its target size */
#akichatWHATBOTscrollmensajes .chat-message.chat-gallery {
  display: block;
  width: 320px;
  max-width: 100%;
}
#akichatWHATBOTscrollmensajes .whats-media-link {
  display: block;
  width: 100%;
  cursor: pointer;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  line-height: 0;
  transition: transform .15s ease, box-shadow .15s ease;
}
#akichatWHATBOTscrollmensajes .whats-media-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
#akichatWHATBOTscrollmensajes .whats-media-img,
#akichatWHATBOTscrollmensajes .whats-media-video {
  width: 320px !important;
  max-width: 100% !important;
  height: auto;
  max-height: 420px;
  min-height: 180px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}
#akichatWHATBOTscrollmensajes .whats-media-video {
  background: #000;
}
#akichatWHATBOTscrollmensajes .whats-video-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
#akichatWHATBOTscrollmensajes .whats-video-play i {
  font-size: 24px;
  color: #fff;
  background: rgba(0,0,0,0.6);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
  padding-left: 4px;
}
#akichatWHATBOTscrollmensajes .whats-media-doc {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 13px;
}
#akichatWHATBOTscrollmensajes .whats-media-caption {
  font-size: 13px;
  color: var(--text-secondary-color);
  margin-top: 6px;
  padding: 0 4px;
  line-height: 1.4;
}
/* Override the existing bubble caps so media can use full 320px */
#akichatWHATBOTscrollmensajes .bg-200:has(.chat-gallery),
#akichatWHATBOTscrollmensajes .text-bg-light:has(.chat-gallery) {
  max-width: none !important;
  width: auto;
}
@media (max-width: 600px) {
  #akichatWHATBOTscrollmensajes .chat-message.chat-gallery {
    width: 260px;
  }
  #akichatWHATBOTscrollmensajes .whats-media-img,
  #akichatWHATBOTscrollmensajes .whats-media-video {
    width: 260px !important;
    max-height: 320px;
    min-height: 140px;
  }
}

/* ── File Preview modal: theme-aware background (no more white) ── */
#viewdocumenthr-modal .modal-content,
#viewdocumenthr-modal .modal-body {
  background: var(--bg-color) !important;
  color: var(--text-color);
}
#viewdocumenthr-modal .modal-header {
  background: var(--bg-color) !important;
  border-bottom: 1px solid var(--border-color) !important;
  color: var(--text-color);
}
#viewdocumenthr-modal #modaliframefirmaropreviews {
  background: var(--bg-color) !important;
}

/* ── Clickable media (sales feed, chats, anywhere using activity-media-*) ── */
.activity-media-link {
  display: inline-block;
  position: relative;
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  line-height: 0;
  transition: transform .15s ease, box-shadow .15s ease;
}
.activity-media-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}
.activity-media-img {
  cursor: pointer;
  max-width: 100%;
  height: auto;
}
.activity-media-video {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  max-height: 380px;
  background: #000;
  border-radius: 8px;
  object-fit: cover;
}
.activity-video-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.activity-video-play i {
  font-size: 24px;
  color: #fff;
  background: rgba(0,0,0,0.6);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
  padding-left: 4px;
}

/* ── Chats: uniform tile grid for media (image+video) ── */
.chats-post__body .chats-tile {
  display: block;
  width: 100%;
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: var(--bg-secondary-color);
  transition: transform .15s ease, box-shadow .15s ease;
}
.chats-post__body .chats-tile:hover {
  transform: translateY(-1px);
  box-shadow: none;
}
.chats-post__body .chats-tile img,
.chats-post__body .chats-tile video {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  display: block;
  border-radius: 0 !important;
}
.chats-post__body .chats-tile video {
  background: #000;
}
/* Single tile (col-12 alone): widescreen, capped height so it doesn't dominate the post */
.chats-post__body .col-12 > .chats-tile {
  aspect-ratio: 16 / 9;
  max-height: 420px;
}
/* Backwards-compat: any video.player still rendered by un-deployed code */
.chats-post__body video.player {
  max-width: 100% !important;
  max-height: 380px !important;
  width: auto !important;
  height: auto !important;
  display: block;
  border-radius: 8px;
  background: #000;
}

/* ── Dark Mode ── */
[data-bs-theme="dark"] #navbarwhatsap {
  background: var(--bg-color) !important;
}
[data-bs-theme="dark"] .chat-sidebar {
  background: var(--bg-secondary-color) !important;
}
[data-bs-theme="dark"] .tabdeWhats {
  background: var(--bg-color) !important;
  border-color: var(--border-color) !important;
  color: var(--text-secondary-color) !important;
}
[data-bs-theme="dark"] .tabdeWhats.active {
  border-color: #60a5fa !important;
  color: #60a5fa !important;
  background: rgba(96,165,250,0.08) !important;
}
[data-bs-theme="dark"] #akichatWHATBOTscrollmensajes .bg-info-subtle {
  background: linear-gradient(135deg, #4f6ef7 0%, #3b5de7 100%) !important;
  color: var(--dt-on-color) !important;
}
[data-bs-theme="dark"] #akichatWHATBOTscrollmensajes .text-bg-light {
  background: var(--bg-tertiary-color) !important;
  border-color: var(--border-color) !important;
  color: var(--text-color) !important;
}
[data-bs-theme="dark"] .chat-content-body {
  background: var(--bg-secondary-color) !important;
}
[data-bs-theme="dark"] #divformmandawhats {
  background: var(--bg-color) !important;
}
[data-bs-theme="dark"] #whathsaptext {
  background: var(--bg-tertiary-color) !important;
  border-color: var(--border-color) !important;
}
[data-bs-theme="dark"] .whats-search-wrap input {
  background: var(--bg-tertiary-color);
  border-color: var(--border-color);
  color: var(--text-color);
}
[data-bs-theme="dark"] .whats-search-wrap input:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96,165,250,0.12);
  background: var(--bg-color);
}
[data-bs-theme="dark"] .whats-search-wrap:focus-within .whats-search-icon {
  color: #60a5fa;
}
[data-bs-theme="dark"] .heclickadounaconverchatbotadm .btnreducechatmin {
  background: rgba(96,165,250,0.10);
  color: #60a5fa !important;
}
[data-bs-theme="dark"] #navbarwhatsap #dropdownMenuButton {
  background: #3b82f6 !important;
}
[data-bs-theme="dark"] .whats-send-btn {
  background: #3b82f6;
}
[data-bs-theme="dark"] #whatsClosedBanner > div {
  background: #422006 !important;
  border-color: #854d0e !important;
}
[data-bs-theme="dark"] #whatsClosedBanner > div div[style*="font-weight:600"] {
  color: #fbbf24 !important;
}
[data-bs-theme="dark"] #whatsClosedBanner > div div[style*="font-size:12px"] {
  color: #f59e0b !important;
}
[data-bs-theme="dark"] #whatsNotYoursBanner > div {
  background: #172554 !important;
  border-color: #1e40af !important;
}
[data-bs-theme="dark"] #whatsNotYoursBanner > div div[style*="font-weight:600"] {
  color: #93c5fd !important;
}
[data-bs-theme="dark"] #whatsNotYoursBanner > div div[style*="font-size:12px"] {
  color: #60a5fa !important;
}
[data-bs-theme="dark"] #whatsTransferredBanner {
  background: rgba(15,23,42,0.9) !important;
}
[data-bs-theme="dark"] #whatsTransferredBanner div[style*="font-weight:600"] {
  color: var(--dt-text) !important;
}
[data-bs-theme="dark"] #whatsTransferredBanner div[style*="font-size:13px"] {
  color: #94a3b8 !important;
}
[data-bs-theme="dark"] #whatsEmptyState {
  background: var(--bg-secondary-color);
}

/* Full-page conversations: match the email inbox's quiet, compact list.
   The floating conversation widget is deliberately outside #akiwhatshap. */
#akiwhatshap {
  --wa-inbox-surface: var(--dt-surface, var(--bg-color, #fff));
  --wa-inbox-soft: var(--dt-hover, var(--bg-secondary-color, #f7f7f7));
  --wa-inbox-selected: var(--dt-active, var(--bg-tertiary-color, #efefef));
  --wa-inbox-text: var(--dt-text, var(--text-color, #171717));
  --wa-inbox-muted: var(--dt-muted, var(--text-secondary-color, #686868));
  --wa-inbox-border: var(--dt-border, var(--border-color, #e6e6e6));
}
#akiwhatshap #todolivewhatshap.card-chat {
  border-color: var(--wa-inbox-border) !important;
  border-radius: 10px !important;
  background: var(--wa-inbox-surface) !important;
  box-shadow: none !important;
}
#akiwhatshap #verchatsWHATDIV { min-width: 0; min-height: 0; }
#akiwhatshap #verchatsWHATDIV > .chat-sidebar {
  width: 340px !important;
  min-width: 340px !important;
  background: var(--wa-inbox-surface) !important;
  border-right-color: var(--wa-inbox-border) !important;
}
#akiwhatshap #verchatsWHATDIV > .card-chat-content { min-width: 0; }
#akiwhatshap #whatsListControlsWrap { margin: 0 !important; padding: 14px 14px 10px; }
#akiwhatshap #whatsSearchInput {
  height: 36px;
  margin: 0 !important;
  padding: 8px 11px;
  border: 0;
  border-radius: 7px;
  background: var(--wa-inbox-surface);
  color: var(--wa-inbox-text);
  font-family: inherit;
  font-size: 12px;
  line-height: 1.4;
  box-shadow: none;
}
#akiwhatshap #whatsSearchInput::placeholder { color: var(--wa-inbox-muted); }
#akiwhatshap #whatsSearchInput:focus { outline: 2px solid var(--dt-border-strong, #aaa); outline-offset: 2px; border-color: var(--wa-inbox-border); box-shadow: none; }
#akiwhatshap #whatschatsidebar { min-height: 0; padding: 0 6px 8px !important; overscroll-behavior: contain; scrollbar-width: thin; }
#akiwhatshap #monitor_conversations_assign_whatsapp { flex-wrap: nowrap; gap: 2px; }
#akiwhatshap .whatsconver {
  position: relative;
  flex: 0 0 auto;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
}
#akiwhatshap .whatsconver .chat-user {
  position: relative;
  display: block !important;
  min-height: 76px;
  padding: 12px 10px !important;
  border-radius: 8px !important;
  background: transparent !important;
  text-decoration: none;
}
#akiwhatshap .whatsconver .chat-user:hover,
#akiwhatshap .whatsconver.unread-message .chat-user:hover { background: var(--wa-inbox-soft) !important; }
#akiwhatshap .whatsconver.bg-light-subtle .chat-user,
#akiwhatshap .whatsconver.bg-light-subtle .chat-user:hover { background: var(--wa-inbox-selected) !important; }
#akiwhatshap .whatsconver .chat-user > .d-flex { min-width: 0; padding: 0 !important; }
#akiwhatshap .whatsconver .chat-user > .d-flex > .position-relative { flex: 0 0 34px; }
#akiwhatshap .whatsconver .chat-user > .d-flex > .position-relative > div {
  width: 34px !important;
  height: 34px !important;
  background: var(--wa-inbox-selected) !important;
  color: var(--wa-inbox-muted) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}
#akiwhatshap .whatsconver .chat-user > .d-flex > .position-relative > div > span {
  width: 14px !important;
  height: 14px !important;
  background: var(--wa-inbox-surface) !important;
  font-size: 10px !important;
}
#akiwhatshap .whatsconver .chat-user > .d-flex > .ms-3 { flex: 1; min-width: 0; width: auto !important; margin-left: 10px !important; }
#akiwhatshap .whatsconver .chat-title {
  margin-bottom: 4px !important;
  padding-right: 42px;
  color: var(--wa-inbox-text) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#akiwhatshap .whatsconver.unread-message .chat-title { font-weight: 600 !important; }
#akiwhatshap .whatsconver [data-akilastmsgwhats] {
  position: static !important;
  padding-right: 19px;
  color: var(--wa-inbox-muted) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}
#akiwhatshap .whatsconver [data-akitimewhats] {
  position: absolute;
  top: 13px;
  right: 10px;
  width: auto !important;
  margin: 0 !important;
  color: var(--wa-inbox-muted) !important;
  font-size: 10px !important;
  line-height: 1.4;
}
#akiwhatshap .whatsconver [data-totalunreadwhats] { min-width: 16px !important; height: 16px !important; padding: 0 4px !important; font-size: 9px !important; }
/* The positioned .chat-user link comes later in the row: without a z-index (z-index-1 has no CSS here) it covers this button and the click opens the chat instead of the menu. */
#akiwhatshap .whatsconver .dropdown-chat > .dropdown-toggle { z-index: 2; margin-top: 35px !important; margin-right: 6px !important; }
#akiwhatshap .whatsconver:focus-within .hover-actions { opacity: 1; }
#akiwhatshap .whatsconver .chat-user:focus-visible,
#akiwhatshap .whatsconver .dropdown-chat > .dropdown-toggle:focus-visible { outline: 2px solid var(--wa-inbox-text) !important; outline-offset: -2px; }
#akiwhatshap #navbarwhatsap { background: var(--wa-inbox-surface) !important; border-bottom-color: var(--wa-inbox-border) !important; }
#akiwhatshap #navbarwhatsap .tabdeWhats { padding: 7px 10px !important; border-radius: 6px !important; font-size: 12px !important; }
#akiwhatshap .chat-content-header { padding: 14px 20px !important; background: var(--wa-inbox-surface) !important; border-bottom-color: var(--wa-inbox-border) !important; }
#akiwhatshap .chat-content-header h5 { color: var(--wa-inbox-text) !important; font-size: 14px !important; font-weight: 600 !important; }
#akiwhatshap .chat-content-body { background: var(--wa-inbox-soft) !important; }
#akiwhatshap #whatsEmptyState { background: var(--wa-inbox-surface) !important; }
#akiwhatshap #whatsEmptyState > .ti { color: var(--wa-inbox-muted) !important; font-size: 36px !important; }
#akiwhatshap #whatsEmptyState h5 { font-size: 14px; font-weight: 500; }
#akiwhatshap #whatsEmptyState p { font-size: 12px; }
#akiwhatshap #akichatWHATBOTscrollmensajes :is(.bg-info-subtle, .text-bg-light, .bg-200) { border-radius: 10px !important; box-shadow: none; }
#akiwhatshap #akichatWHATBOTscrollmensajes .bg-info-subtle { background: color-mix(in srgb, var(--wa-inbox-text) 10%, var(--wa-inbox-surface)) !important; color: var(--wa-inbox-text) !important; } /* 09-11: la propia se distinguía apenas del fondo (.06 vs .035) */
#akiwhatshap #akichatWHATBOTscrollmensajes .bg-info-subtle.fst-italic { background: transparent !important; }
#akiwhatshap #akichatWHATBOTscrollmensajes .text-bg-light { background: var(--wa-inbox-surface) !important; border: 1px solid var(--wa-inbox-border) !important; color: var(--wa-inbox-text) !important; }
#akiwhatshap #divformmandawhats { background: var(--wa-inbox-surface) !important; border-top-color: var(--wa-inbox-border) !important; }
#akiwhatshap #whathsaptext { border: 0 !important; border-radius: 8px !important; background: var(--wa-inbox-surface) !important; color: var(--wa-inbox-text) !important; }
#akiwhatshap #whathsaptext:focus { outline: 2px solid var(--dt-border-strong, #aaa) !important; outline-offset: 2px; }
@media (max-width: 987px) {
  #akiwhatshap #verchatsWHATDIV > .chat-sidebar { width: 100% !important; min-width: 0 !important; }
  #akiwhatshap #todolivewhatshap.card-chat { margin-right: 0 !important; margin-left: 0 !important; border-right: 0 !important; border-left: 0 !important; border-radius: 0 !important; }
  #akiwhatshap .chat-content-header { padding: 12px 14px !important; }
  #akiwhatshap .heclickadounaconverchatbotadm .btnreducechatmin { background: var(--wa-inbox-selected); color: var(--wa-inbox-text) !important; }
}
@media (prefers-reduced-motion: reduce) {
  #akiwhatshap .whatsconver .chat-user,
  #akiwhatshap #navbarwhatsap .tabdeWhats { transition: none !important; }
}

/* Account and section navigation, confined to the full inbox. */
#akiwhatshap.wa-workspace-ready #navbarWHATS,
#akiwhatshap.wa-workspace-ready #navbarwhatsap .navbar-toggler { display:none !important; }
#akiwhatshap.wa-workspace-ready #todolivewhatshap { display:grid; grid-template-columns:180px minmax(0,1fr); }
#akiwhatshap #waWorkspaceNav { padding:18px 10px; border-right:1px solid var(--wa-inbox-border); background:var(--wa-inbox-surface); min-width:0; overflow:auto; }
#akiwhatshap #waWorkspaceNav[hidden] { display:none; }
#akiwhatshap #waWorkspaceNav label { display:block; font-size:11px; color:var(--wa-inbox-muted); margin:0 8px 7px; }
#akiwhatshap #waWorkspaceAccount { width:100%; min-height:36px; padding:7px; border:0; border-radius:7px; background:var(--wa-inbox-surface); color:var(--wa-inbox-text); font:inherit; font-size:12px; }
#akiwhatshap #waWorkspaceNav nav { margin-top:22px; display:flex; flex-direction:column; gap:5px; }
#akiwhatshap #waWorkspaceNav button,#akiwhatshap #waWorkspaceNav summary { width:100%; display:flex; align-items:center; gap:9px; border:0; padding:10px 9px; border-radius:6px; background:transparent; color:var(--wa-inbox-muted); font:inherit; font-size:12px; text-align:left; cursor:pointer; list-style:none; }
#akiwhatshap #waWorkspaceNav summary::-webkit-details-marker { display:none; }
#akiwhatshap #waWorkspaceNav summary::after { content:'⌄'; margin-left:auto; }
#akiwhatshap #waWorkspaceNav button:hover,#akiwhatshap #waWorkspaceNav summary:hover { background:var(--wa-inbox-soft); color:var(--wa-inbox-text); }
#akiwhatshap #waWorkspaceNav button[aria-current] { background:var(--wa-inbox-selected); color:var(--wa-inbox-text); }
#akiwhatshap #waWorkspaceNav details button { padding-left:20px; font-size:11px; }
#akiwhatshap #waWorkspaceNav :is(button,summary,select):focus-visible { outline:2px solid var(--wa-inbox-text); outline-offset:-2px; }
#akiwhatshap.wa-workspace-ready #verchatsWHATDIV { overflow:hidden; }
@media(max-width:1100px) {
 #akiwhatshap.wa-workspace-ready #todolivewhatshap { display:flex; flex-direction:column; }
 #akiwhatshap #waWorkspaceNav { flex:0 0 auto; overflow:visible; padding:8px; border-right:0; border-bottom:1px solid var(--wa-inbox-border); }
 #akiwhatshap #waWorkspaceNav label { display:none; }
 #akiwhatshap #waWorkspaceAccount { max-width:280px; }
 #akiwhatshap #waWorkspaceNav nav { margin-top:6px; flex-direction:row; flex-wrap:wrap; gap:2px; }
 #akiwhatshap #waWorkspaceNav nav > button,#akiwhatshap #waWorkspaceNav nav > details { width:auto; flex:0 0 auto; }
 #akiwhatshap #waWorkspaceNav details { position:relative; }
 #akiwhatshap #waWorkspaceNav details[open] { background:var(--wa-inbox-surface); z-index:8; }
 #akiwhatshap #waWorkspaceNav details[open] button { background:var(--wa-inbox-surface); }
 #akiwhatshap.wa-workspace-ready #verchatsWHATDIV { height:auto !important; flex:1; min-height:0; }
}
#akiwhatshap #whathsaptext:focus { outline:none!important; box-shadow:none!important; border-color:var(--wa-inbox-border)!important; }

/* A quiet pointer cue, without a persistent focus fill or glow. */
#akiwhatshap #whathsaptext,
#akiwhatshap #whathsaptext:focus {
  background: var(--wa-inbox-surface) !important;
  box-shadow: none !important;
}
@media (hover: hover) {
  #akiwhatshap #whathsaptext:hover {
    background: color-mix(in srgb, var(--wa-inbox-surface) 98%, var(--wa-inbox-text)) !important;
  }
}

/* Video previews use the same contained, quiet surface as Home. */
#akiwhatshap .whats-media-link:has(.whats-media-video) {
  width: min(380px, 100%);
  background: #080a0f;
  border: 1px solid var(--wa-inbox-border);
  border-radius: 12px;
  box-shadow: none;
  transform: none;
}
#akiwhatshap #akichatWHATBOTscrollmensajes .whats-media-video {
  width: 100% !important;
  min-height: 0;
  aspect-ratio: 16 / 9;
  max-height: 360px;
  object-fit: contain;
  background: #080a0f;
}
#akiwhatshap .whats-video-play i {
  width: 44px; height: 44px;
  font-size: 20px;
  background: rgba(255,255,255,.92);
  color: #171717;
  border: 1px solid rgba(0,0,0,.08);
}

#akiwhatshap #whathsaptext,
#akiwhatshap #whathsaptext:hover,
#akiwhatshap #whathsaptext:focus {
  border: 1px solid var(--wa-inbox-border) !important;
  outline: none !important;
  box-shadow: none !important;
}
#akiwhatshap #whathsaptext:focus-visible {
  border-color: color-mix(in srgb, var(--wa-inbox-border) 80%, var(--wa-inbox-text)) !important;
}

#akiwhatshap #sendWhatsappBtnWrap { display:none !important; }
#akiwhatshap #waWorkspaceAccount { display:none !important; }
#akiwhatshap .wa-account-picker { position:relative; }
#akiwhatshap #waWorkspaceNav .wa-account-picker > summary { padding:9px 10px; border:0; border-radius:7px; background:var(--wa-inbox-surface); }
#akiwhatshap .wa-account-popup { position:absolute; top:calc(100% + 6px); left:0; width:290px; max-width:calc(100vw - 40px); padding:8px; z-index:100; background:var(--wa-inbox-surface); border:0; border-radius:10px; box-shadow:none; }
#akiwhatshap .wa-account-popup input { width:100%; min-width:0; padding:9px!important; border:0!important; background:var(--wa-inbox-surface)!important; color:var(--wa-inbox-text); box-shadow:none!important; }
#akiwhatshap .wa-account-results { max-height:250px; overflow:auto; margin:6px 0; }
#akiwhatshap #waWorkspaceNav .wa-account-popup button { width:100%; padding:9px; font-size:12px; text-align:left; }
#akiwhatshap .wa-account-popup button[aria-pressed="true"] { background:var(--wa-inbox-selected); }
#akiwhatshap .wa-account-popup > button { border-top:1px solid var(--wa-inbox-border)!important; border-radius:0!important; }
#akiwhatshap .wa-account-popup [hidden] { display:none!important; }

/* Top-layer popover escapes the scrolling account column. */
#akiwhatshap .wa-account-popup {
  position:fixed; inset:auto; margin:0; box-sizing:border-box;
  padding:10px; color:var(--wa-inbox-text); overflow:auto;
  box-shadow:none;
}
#akiwhatshap #waWorkspaceNav .wa-account-popup button { min-height:38px; padding:10px; font-size:13px; gap:10px; }
#akiwhatshap .wa-account-results { margin:8px 0; }
#akiwhatshap .wa-account-popup input { font-size:13px; border-radius:6px; }

#akiwhatshap .wa-account-header { flex:0 1 240px; min-width:120px; max-width:240px; margin-right:auto; }
#akiwhatshap .wa-account-header > summary { display:flex; align-items:center; gap:12px; padding:8px 12px; border:0; border-radius:7px; background:var(--wa-inbox-surface); color:var(--wa-inbox-text); font-size:12px; cursor:pointer; list-style:none; }
#akiwhatshap .wa-account-header > summary::after { content:'⌄'; margin-left:auto; }
#akiwhatshap .wa-account-header > summary::-webkit-details-marker { display:none; }
#akiwhatshap .wa-account-popup button { display:flex; align-items:center; width:100%; min-height:38px; gap:10px; padding:10px; border:0; border-radius:6px; background:transparent; color:var(--wa-inbox-text); font:inherit; font-size:13px; text-align:left; cursor:pointer; }
#akiwhatshap .wa-account-popup button:hover { background:var(--wa-inbox-soft); }
#akiwhatshap #waWorkspaceNav nav { margin-top:0; }
#akiwhatshap .wa-account-header :focus-visible { outline:1px solid var(--wa-inbox-muted); outline-offset:2px; }

/* Sections occupy a single horizontal row, leaving the inbox its full width. */
#akiwhatshap.wa-workspace-ready #todolivewhatshap { display:flex; flex-direction:column; }
#akiwhatshap #waWorkspaceNav { flex:0 0 auto; width:100%; padding:6px 10px; border-right:0; border-bottom:1px solid var(--wa-inbox-border); overflow:hidden; }
#akiwhatshap #waWorkspaceNav nav { display:flex; flex-direction:row; flex-wrap:nowrap; gap:6px; margin:0; overflow-x:auto; scrollbar-width:thin; }
#akiwhatshap #waWorkspaceNav nav > button,
#akiwhatshap #waWorkspaceNav nav > details { flex:0 0 auto; width:auto; }
#akiwhatshap #waWorkspaceNav nav > button,
#akiwhatshap #waWorkspaceNav summary { min-height:38px; white-space:nowrap; padding:9px 12px; }
#akiwhatshap.wa-workspace-ready #verchatsWHATDIV { height:auto!important; min-height:0; flex:1; }
#akiwhatshap .wa-section-popup { position:fixed; inset:auto; margin:0; padding:6px; overflow:auto; border:0; border-radius:9px; background:var(--wa-inbox-surface); color:var(--wa-inbox-text); box-shadow:none; }
#akiwhatshap #waWorkspaceNav .wa-section-popup button { font-size:12px; padding:10px; min-height:38px; }
@media(max-width:600px) {
 #akiwhatshap #waWorkspaceNav { padding:4px 6px; }
 #akiwhatshap #waWorkspaceNav nav { gap:2px; }
 #akiwhatshap .wa-account-header { flex:1 1 120px; max-width:200px; }
}

#akiwhatshap #waWorkspaceNav { box-sizing:border-box; }

/* A contained workspace on large displays; full available width on phones. */
#akiwhatshap {
  width:100%; max-width:1400px; min-width:0;
  margin-inline:auto; box-sizing:border-box;
}
#akiwhatshap #navbarwhatsap { margin-inline:16px; }
#akiwhatshap #navbarwhatsap > .container-fluid { padding-inline:0; }
@media(max-width:767px) {
  #akiwhatshap { max-width:none; }
  #akiwhatshap #navbarwhatsap { margin-inline:8px; }
  #akiwhatshap #todolivewhatshap { margin-inline:8px!important; }
}

/* Match the breathing room above other workspaces without adding page scroll. */
#akiwhatshap { padding-top:32px; }
#akiwhatshap #todolivewhatshap.card-chat { height:calc(100dvh - 192px)!important; }
@media(max-width:987px) {
  #akiwhatshap { padding-top:10px; }
  #akiwhatshap #todolivewhatshap.card-chat { height:calc(100dvh - 130px)!important; }
}

/* ═══ Dirección 26-10 (Marc: "minimalista, moderno y futurista como ElevenLabs, y mejor") ═══
   Conversaciones a página completa: todo bajo #akiwhatshap. El widget flotante, chats.html y el feed de ventas
   (.activity-media, .chats-tile) siguen con las reglas base de arriba. Solo color, borde, sombra, radio, espaciado,
   peso y fuente: ningún id, clase ni atributo que lean meta_whatsapp2040.js o whatsapp-workspace.js cambia.
   Los !important solo van contra declaraciones que ya lo llevan (datalyse-modern.css se carga DESPUÉS de este
   fichero, utilidades de Bootstrap, datalyse-theme.css) o contra colores en línea del JS. */

/* Secciones (Conversations, Campaigns, Templates, Settings): pestañas con subrayado de tinta */
#akiwhatshap #waWorkspaceNav { padding: 0 16px; }
#akiwhatshap #waWorkspaceNav > nav { gap: 18px; align-items: stretch; }
#akiwhatshap #waWorkspaceNav > nav > button,
#akiwhatshap #waWorkspaceNav > nav > details > summary {
  height: 40px; min-height: 40px; padding: 0 2px; gap: 7px;
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
  color: var(--dt-muted); font-size: 13px; font-weight: 500; line-height: 1;
}
#akiwhatshap #waWorkspaceNav > nav > button .ti,
#akiwhatshap #waWorkspaceNav > nav > details > summary .ti { font-size: 15px; }
#akiwhatshap #waWorkspaceNav > nav > details > summary::after { margin-left: 2px; color: var(--dt-faint); }
#akiwhatshap #waWorkspaceNav > nav > button:hover,
#akiwhatshap #waWorkspaceNav > nav > details > summary:hover,
#akiwhatshap #waWorkspaceNav > nav > details[open] > summary { color: var(--dt-text); background: transparent; }
#akiwhatshap #waWorkspaceNav > nav > button[aria-current] { color: var(--dt-text); background: transparent; box-shadow: none; }
@media (max-width: 600px) {
  #akiwhatshap #waWorkspaceNav { padding: 0 12px; }
  #akiwhatshap #waWorkspaceNav > nav { gap: 14px; }
}

/* Menús de cuenta y de sección: capa con línea fina, sin sombra (posición y tamaño los pone el JS) */
#akiwhatshap #waWorkspaceNav .wa-section-popup,
#akiwhatshap .wa-account-picker > .wa-account-popup { background: var(--dt-overlay); border-color: var(--dt-border-strong); box-shadow: none; }
#akiwhatshap .wa-account-header > summary:hover { background: var(--dt-hover); }

/* Pestañas de sesión (vista de respaldo si el selector de cuenta no se monta): subrayado, no píldora */
#akiwhatshap #navbarwhatsap #myTabWhats { gap: 18px !important; }
#akiwhatshap #navbarwhatsap .tabdeWhats,
#akiwhatshap #navbarwhatsap .tabdeWhats:hover,
#akiwhatshap #navbarwhatsap .tabdeWhats.active {
  height: 40px; padding: 0 2px !important;
  border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
  font-size: 13px !important; font-weight: 500 !important;
}
#akiwhatshap #navbarwhatsap .tabdeWhats { color: var(--dt-muted) !important; }
#akiwhatshap #navbarwhatsap .tabdeWhats:hover { color: var(--dt-text) !important; }
#akiwhatshap #navbarwhatsap .tabdeWhats.active { color: var(--dt-text) !important; box-shadow: inset 0 -2px var(--dt-text) !important; }
#akiwhatshap #navbarwhatsap .tabdeWhats > .ti { color: inherit !important; }
#akiwhatshap #navbarwhatsap .tabdeWhats.disconnected .tabdeWhats-warn { color: var(--dt-danger); animation: none; }
#akiwhatshap #navbarwhatsap .tabdeWhats-badge {
  position: static !important; width: auto !important; min-width: 18px !important; max-width: none !important;
  height: 18px !important; min-height: 18px !important; max-height: 18px !important; aspect-ratio: auto;
  padding: 0 5px !important; border: 0 !important; font-weight: 600 !important; font-variant-numeric: tabular-nums;
}

/* Lista: contadores de no leídos en tinta (los míos) o neutros (de otro agente), icono de canal gris */
#akiwhatshap .whatsconver [data-totalunreadwhats] {
  color: var(--dt-cta-fg) !important; background: var(--dt-cta) !important; background-color: var(--dt-cta) !important;
  font-weight: 600 !important; font-variant-numeric: tabular-nums;
}
#akiwhatshap .whatsconver [data-totalunreadwhats].bg-secondary {
  color: var(--dt-text) !important; background: var(--dt-surface-2) !important; background-color: var(--dt-surface-2) !important;
  border: 0 !important;
}
#akiwhatshap .whatsconver [data-akitimewhats] { font-variant-numeric: tabular-nums; }
#akiwhatshap .whatsconver .chat-user > .d-flex > .position-relative > div > span { border: 0; }
#akiwhatshap .whatsconver .chat-user > .d-flex > .position-relative > div > span > .ti { color: var(--dt-muted) !important; }
#akiwhatshap .chat-content-header .titdatachaadmintfloatheader > .ti { color: var(--dt-muted) !important; margin-right: 2px; }

/* Cabecera y compositor: iconos fantasma de 32 px, gris que pasa a tinta (fuera el hover de color de la plantilla) */
#akiwhatshap .chat-content-header .list-unstyled a,
#akiwhatshap #divformmandawhats .list-unstyledn a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0 !important; border-radius: 7px;
  color: var(--dt-muted) !important; background: transparent !important;
  font-size: 17px !important; line-height: 1; transition: background-color .12s ease, color .12s ease;
}
#akiwhatshap .chat-content-header .list-unstyled a:hover,
#akiwhatshap #divformmandawhats .list-unstyledn a:hover {
  color: var(--dt-text) !important; background: var(--dt-hover) !important;
}
#akiwhatshap #divformmandawhats .list-unstyledn a .ti { color: inherit !important; font-size: inherit !important; }
#akiwhatshap .chat-content-header #akiWhatsbotones .btn.whats-chat-header-action:active { transform: none; }

/* Sesión desconectada: franja neutra con línea fina; el rojo solo en el icono */
#akiwhatshap #tokenInvalidBanner.alert {
  gap: 10px; padding: 10px 16px;
  color: var(--dt-text); background: var(--dt-surface);
  border: 0; border-bottom: 1px solid var(--dt-border); box-shadow: none;
  font-size: 12px; line-height: 1.45;
}
#akiwhatshap #tokenInvalidBanner > .ti-alert-triangle { margin-right: 0 !important; color: var(--dt-danger); font-size: 16px !important; }
#akiwhatshap #tokenInvalidBanner strong { font-weight: 600; }
#akiwhatshap #tokenInvalidBanner .btn-danger {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px;
  color: var(--dt-text) !important; background: transparent !important; border: 1px solid var(--dt-border-strong) !important;
  border-radius: 7px; box-shadow: none; font-size: 12px; font-weight: 500; white-space: nowrap;
}
#akiwhatshap #tokenInvalidBanner .btn-danger:hover { background: var(--dt-hover) !important; }
#akiwhatshap #tokenInvalidBanner .btn-danger .ti { margin-right: 0 !important; color: var(--dt-muted); }

/* Dentro de los mensajes: respuestas rápidas, etiqueta de tipo y bloques citados neutros */
#akiwhatshap #akichatWHATBOTscrollmensajes .btn-outline-primary {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px;
  border-radius: 7px; box-shadow: none; font-size: 12px; font-weight: 500;
}
#akiwhatshap #akichatWHATBOTscrollmensajes .badge.bg-200 {
  padding: 2px 7px !important; border: 0; border-radius: 999px !important;
  color: var(--dt-muted) !important; background: var(--dt-surface-2) !important;
  font-size: 10px; font-weight: 500; line-height: 1.4; vertical-align: middle;
}
#akiwhatshap #akichatWHATBOTscrollmensajes .border.rounded.bg-light {
  color: var(--dt-text); background: var(--dt-surface) !important;
  border-color: var(--dt-border) !important; border-radius: 8px !important;
}
#akiwhatshap #akichatWHATBOTscrollmensajes h6 { font-variant-numeric: tabular-nums; }
#akiwhatshap #akichatWHATBOTscrollmensajes .whats-media-link,
#akiwhatshap #akichatWHATBOTscrollmensajes .whats-media-link:hover { transform: none; box-shadow: none; }
#akiwhatshap #akichatWHATBOTscrollmensajes .whats-video-play i { text-shadow: none; }

/* Responder o enviar plantilla: icono en cuadrado neutro (ya en §12) y un único CTA en tinta, sin halo */
#akiwhatshap .whats-conversation-action__icon { width: 34px; min-width: 34px; height: 34px; border-radius: 8px; }
#akiwhatshap .whats-conversation-action__icon .ti { font-size: 17px; }
#akiwhatshap .whats-conversation-action__button { min-height: 34px; padding: 0 12px; border-radius: 7px; font-weight: 600; transition: background-color .12s ease, border-color .12s ease; }
#akiwhatshap .whats-conversation-action__button:hover { box-shadow: none; }
#akiwhatshap .whats-conversation-action__button:focus-visible { box-shadow: none; outline: 2px solid var(--dt-text); outline-offset: 2px; }
#akiwhatshap .whats-conversation-action__button:active { transform: none; }

/* ── Picker de plantillas (modals/template.html y el bloque de WhatsApp de Workflows) ──
   09-11 (dporcel: «el modal de ver whatsapp se ve fatal»): las clases tpl-* que pinta WhatscreateModalTemplates
   (meta_whatsapp2040.js) tenían su CSS en 165_behaviours.css, que ya no se carga: salían como texto suelto y los
   vídeos/imágenes de cabecera a tamaño completo. Portado aquí con la dirección de diseño (líneas de 1 px, sin sombras,
   selección en tinta). Acotado al contenedor, que es el mismo en el modal y en Workflows. */
#akipongowhatstemplates .tpl-grid-wrap { display: flex; flex-direction: column; gap: 10px; }
#akipongowhatstemplates .tpl-grid-search { position: relative; }
#akipongowhatstemplates .tpl-grid-search input {
  width: 100%; height: 36px; padding: 0 12px 0 34px !important; border-radius: 8px;
  border: 1px solid var(--dt-border, #e6e6e6); background: var(--dt-surface, #fff);
  color: var(--dt-text, #171717); font-size: 13px; outline: none; box-shadow: none;
}
#akipongowhatstemplates .tpl-grid-search input:focus { border-color: var(--dt-border-strong, #aaa); outline: 2px solid var(--dt-border-strong, #aaa); outline-offset: 2px; }
#akipongowhatstemplates .tpl-grid-search i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--dt-muted, #6c757d); font-size: 14px; pointer-events: none; }
#akipongowhatstemplates .tpl-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px;
  max-height: 420px; overflow-y: auto; padding: 2px; scrollbar-width: thin;
}
#akipongowhatstemplates .tpl-card {
  display: flex; flex-direction: column; overflow: hidden; cursor: pointer;
  border: 1px solid var(--dt-border, #e6e6e6); border-radius: 10px; background: var(--dt-surface, #fff);
  transition: border-color .12s ease, background-color .12s ease;
}
#akipongowhatstemplates .tpl-card:hover { border-color: var(--dt-border-strong, #aaa); background: var(--dt-hover, #f7f7f7); }
#akipongowhatstemplates .tpl-card.tpl-card-selected { border-color: var(--dt-text, #171717); box-shadow: inset 0 0 0 1px var(--dt-text, #171717); }
#akipongowhatstemplates .tpl-card.tpl-card-disabled { opacity: .45; pointer-events: none; }
#akipongowhatstemplates .tpl-card-header-media {
  position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden;
  min-height: 42px; border-bottom: 1px solid var(--dt-border, #e6e6e6); background: var(--dt-surface-2, #f4f4f5);
  color: var(--dt-muted, #6c757d); font-size: 22px;
}
#akipongowhatstemplates .tpl-card-img,
#akipongowhatstemplates .tpl-card-video { display: block; width: 100%; height: 120px; object-fit: cover; }
#akipongowhatstemplates .tpl-card-video-wrap { position: relative; width: 100%; }
#akipongowhatstemplates .tpl-card-video-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .55); color: #fff; font-size: 12px; pointer-events: none;
}
#akipongowhatstemplates .tpl-card-media-fallback { width: 100%; padding: 10px; align-items: center; justify-content: center; }
#akipongowhatstemplates .tpl-card-body { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; }
#akipongowhatstemplates .tpl-card-name { color: var(--dt-text, #171717); font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#akipongowhatstemplates .tpl-card-status { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
#akipongowhatstemplates .tpl-card-status.approved { color: var(--dt-success, #198754); }
#akipongowhatstemplates .tpl-card-status.pending { color: var(--dt-warning, #b45309); }
#akipongowhatstemplates .tpl-card-status.rejected { color: var(--dt-danger, #dc3545); }
#akipongowhatstemplates .tpl-card-text { color: var(--dt-text, #171717); font-size: 12px; line-height: 1.35; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
#akipongowhatstemplates .tpl-card-footer { color: var(--dt-muted, #6c757d); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#akipongowhatstemplates .tpl-card-buttons { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
#akipongowhatstemplates .tpl-card-buttons .tpl-btn { padding: 2px 8px; border: 1px solid var(--dt-border, #e6e6e6); border-radius: 999px; background: transparent; color: var(--dt-muted, #6c757d); font-size: 10px; white-space: nowrap; pointer-events: none; }
#akipongowhatstemplates .tpl-grid-empty { grid-column: 1 / -1; padding: 24px; text-align: center; color: var(--dt-muted, #6c757d); font-size: 13px; }
@media (max-width: 575.98px) { #akipongowhatstemplates .tpl-grid { grid-template-columns: 1fr; max-height: 260px; } }

/* Detalle de la plantilla elegida (viewTemplate): tarjeta plana, variables a todo el ancho, media acotada */
#akipongowhatstemplatesmas h6 { margin: 14px 0 6px; color: var(--dt-muted, #6c757d); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
#akipongowhatstemplatesmas .textodeltemplatequevoyaenviar {
  margin: 0 0 8px; padding: 10px 12px !important; border: 1px solid var(--dt-border, #e6e6e6) !important; border-radius: 10px;
  background: var(--dt-surface, #fff); color: var(--dt-text, #171717); font-size: 13px; line-height: 1.5; box-shadow: none;
}
#akipongowhatstemplatesmas .akicaracteresmaxcomwhats { display: block; margin-bottom: 4px; color: var(--dt-muted, #6c757d); font-size: 11px; }
#akipongowhatstemplatesmas label { display: block; margin: 8px 0 4px; color: var(--dt-muted, #6c757d); font-size: 12px; }
#akipongowhatstemplatesmas input.form-control { width: 100%; }
#akipongowhatstemplatesmas [data-documentypeplayer],
#akipongowhatstemplatesmas [data-documentbackoffice] { max-width: 100%; border-radius: 8px; }
#akipongowhatstemplatesmas .akibotonescomswhats .btn { pointer-events: none; }
#akipongowhatstemplatesmas .dz-message { padding: 16px; border: 1px dashed var(--dt-border-strong, #aaa); border-radius: 10px; text-align: center; cursor: pointer; }
#akipongowhatstemplatesmas .dz-message h3 { margin: 6px 0 0; font-size: 13px !important; line-height: 1.4 !important; }
#template-modal .radio-container { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
#template-modal .radio-container label { margin: 0; }
#template-modal #template-library-shortcuts { border-color: var(--dt-border, #e6e6e6) !important; border-radius: 10px !important; }

/* Plantillas pintadas dentro del chat: la media no se sale de la burbuja */
#akichatWHATBOTscrollmensajes .template-message img,
#akichatWHATBOTscrollmensajes .template-message video,
#akichatWHATBOTscrollmensajes .template-message iframe { display: block; max-width: 100%; height: auto; max-height: 300px; border-radius: 8px; }
#akichatWHATBOTscrollmensajes .template-message iframe { height: 300px; }