/* ===================================================================
   CIngeniería · Override visual de Chatwoot v3.14.1
   Paleta: azul oscuro #000060 + verde agua #00f0c0
   v3: + burbujas WhatsApp + day dividers + private notes verde agua
   =================================================================== */

:root {
  --ci-blue: #000060;
  --ci-blue-hover: #000040;
  --ci-aqua: #00f0c0;
  --ci-aqua-hover: #00b894;
  --wa-out-bubble: #d9fdd3;
  --wa-cream-bg: #efeae2;
}

/* === BOTONES PRIMARIOS === */
button.button.success:not(.smooth):not(.transparent):not(.clear),
.woot-button--primary,
button.woot-button.button-default {
  background-color: var(--ci-blue) !important;
  border-color: var(--ci-blue) !important;
  color: #ffffff !important;
}
button.button.success:not(.smooth):not(.transparent):not(.clear):hover,
.woot-button--primary:hover,
button.woot-button.button-default:hover {
  background-color: var(--ci-blue-hover) !important;
  border-color: var(--ci-blue-hover) !important;
}

/* === LINKS === */
a:not(.button):not([role=button]):not(.woot-button):not(.dropdown-item) { color: var(--ci-blue); }
a:not(.button):not([role=button]):not(.woot-button):not(.dropdown-item):hover { color: var(--ci-aqua-hover); }

/* === BURBUJAS WHATSAPP === */
ul.conversation-panel {
  background:
    radial-gradient(rgba(0,96,96,.04) 1px, transparent 1px) 0 0/22px 22px,
    var(--wa-cream-bg) !important;
}

li.right .bubble:not(.is-private):not(.is-image):not(.is-video):not(.is-file) {
  background: var(--wa-out-bubble) !important;
  color: #1f2937 !important;
  border-top-right-radius: 4px !important;
  border-top-left-radius: 14px !important;
  border-bottom-left-radius: 14px !important;
  border-bottom-right-radius: 14px !important;
  box-shadow: 0 1px 1px rgba(15,26,46,.08) !important;
  max-width: 65% !important;
}
li.right .bubble:not(.is-private):not(.is-image):not(.is-video):not(.is-file) .text-content,
li.right .bubble:not(.is-private):not(.is-image):not(.is-video):not(.is-file) p { color: #1f2937 !important; }

li.left .bubble:not(.is-private):not(.is-image):not(.is-video):not(.is-file) {
  background: #ffffff !important;
  color: #1f2937 !important;
  border-top-left-radius: 4px !important;
  border-top-right-radius: 14px !important;
  border-bottom-left-radius: 14px !important;
  border-bottom-right-radius: 14px !important;
  box-shadow: 0 1px 1px rgba(15,26,46,.08) !important;
  max-width: 65% !important;
}

/* === NOTAS PRIVADAS === */
.bubble.is-private,
li .bubble.is-private {
  background: #fffef5 !important;
  border: 2px dashed var(--ci-aqua) !important;
  color: #1b3a35 !important;
  border-radius: 14px !important;
  max-width: 70% !important;
}
li.right .bubble.is-private { border-top-right-radius: 4px !important; }
li.left .bubble.is-private { border-top-left-radius: 4px !important; }

/* === TICKS y METADATA === */
.message-text--metadata svg.right-tick,
.message-text--metadata .icon-tick { color: var(--ci-aqua-hover) !important; }
.message-text--metadata .time {
  color: rgba(100,116,139,.7) !important;
  font-size: 10.5px !important;
}

/* === LEAD-ID badge en header conversación === */
.ci-conv-id-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--ci-blue);
  background: var(--ci-aqua);
  padding: 2px 8px;
  border-radius: 6px;
  margin-left: 8px;
  vertical-align: middle;
}

/* ===========================================
   5. PANEL DERECHO ENRIQUECIDO (Sesión 7)
   =========================================== */

/* Avatar grande del contacto en panel derecho */
.contact--profile .user-thumbnail-box,
.contact--profile .user-thumbnail-box > img,
.contact--profile .user-thumbnail-box > div {
  width: 74px !important;
  height: 74px !important;
  font-size: 26px !important;
}

.contact--profile .user-thumbnail-box {
  box-shadow: 0 8px 18px rgba(0, 0, 96, 0.20) !important;
  border-radius: 50% !important;
  margin: 0 auto 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Nombre del contacto con mejor jerarquía */
.contact--profile h3 {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--ci-blue) !important;
  text-align: center !important;
  margin-top: 6px !important;
}

/* Quick actions buttons (telefono, mail, etc) — estilo redondeado verde agua hover */
.contact--profile .button.smooth.tiny {
  border-radius: 50% !important;
  width: 34px !important;
  height: 34px !important;
  border: 1px solid rgba(0, 240, 192, 0.25) !important;
  transition: all 0.15s ease !important;
}
.contact--profile .button.smooth.tiny:hover {
  background: rgba(0, 240, 192, 0.12) !important;
  border-color: var(--ci-aqua) !important;
  transform: translateY(-1px) !important;
}

/* Headers de secciones (Acciones de conversación, Macros, etc) */
.contact--profile .multiselect-wrap--small,
.contact--info-wrap .multiselect-wrap--small {
  background: rgba(241, 245, 249, 0.4) !important;
  border-radius: 8px !important;
  padding: 8px 10px !important;
}

/* AccordionItem buttons (las secciones colapsables) — borde sutil verde agua a la izq */
.contact--profile button.cursor-grab,
.conv-actions button.cursor-grab,
.contact--info-wrap button.cursor-grab {
  border-left: 3px solid transparent !important;
  transition: border-left-color 0.15s !important;
  background: linear-gradient(90deg, rgba(0,240,192,0.04), transparent) !important;
}

/* Custom attribute container — separadores sutiles */
.custom-attributes--row {
  padding: 10px 12px !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.05) !important;
}
.custom-attributes--row:last-child {
  border-bottom: none !important;
}

/* Custom attribute label/key */
.custom-attributes--row label,
.custom-attributes--row .name {
  font-size: 11px !important;
  color: var(--ci-blue) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  margin-bottom: 2px !important;
}

/* Etapa Pipeline destacada cuando tiene valor — chip verde agua */
.custom-attributes--row[data-attribute-key="etapa_pipeline"] .form-input,
.custom-attributes--row[data-attribute-key="etapa_pipeline"] select,
.custom-attributes--row[data-attribute-key="etapa_pipeline"] .multiselect__single {
  background: linear-gradient(135deg, var(--ci-aqua), var(--ci-aqua-hover)) !important;
  color: var(--ci-blue) !important;
  font-weight: 800 !important;
  border-color: var(--ci-aqua-hover) !important;
}

/* Etiquetas de conversación (las pills info_enviada, etc) — más visibles */
.contact--profile .label,
.contact--info-wrap .label {
  border-radius: 12px !important;
  font-weight: 600 !important;
  padding: 3px 10px !important;
  font-size: 11px !important;
}

/* Resumen contacto: phone/email rows con ícono verde agua */
.contact--profile a[href^="tel:"] svg,
.contact--profile a[href^="mailto:"] svg,
.contact--info-wrap a[href^="tel:"] svg,
.contact--info-wrap a[href^="mailto:"] svg {
  color: var(--ci-aqua-hover) !important;
}

/* Info del contacto (telefono, email) — mejor padding */
.contact--info-wrap .row,
.contact--info-wrap .conversation--actions {
  padding: 8px 14px !important;
}

/* ===========================================
   6. SIDEBAR PRIMARIO — iconos visibles (Fix)
   =========================================== */

/* Forzar color blanco visible en TODOS los iconos del sidebar primario */
.ci-primary-nav svg,
.ci-primary-nav .fluent-icon,
.ci-primary-nav .ci-nav-item svg,
.ci-primary-nav .ci-nav-item .fluent-icon {
  color: rgba(255, 255, 255, 0.9) !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  width: 22px !important;
  height: 22px !important;
  opacity: 1 !important;
}

/* Item active: ícono verde agua */
.ci-primary-nav .ci-nav-active svg,
.ci-primary-nav .ci-nav-active .fluent-icon {
  color: #00f0c0 !important;
}

/* Hover: ícono blanco brillante */
.ci-primary-nav .ci-nav-item:hover svg,
.ci-primary-nav .ci-nav-item:hover .fluent-icon {
  color: #ffffff !important;
}

/* Asegurar que la label corta también sea visible */
.ci-primary-nav .ci-nav-item span,
.ci-primary-nav .ci-nav-item .text-\[9px\] {
  color: rgba(255, 255, 255, 0.85) !important;
  display: block !important;
  visibility: visible !important;
}

.ci-primary-nav .ci-nav-active span {
  color: #00f0c0 !important;
}

/* Asegurar que el sidebar tenga el ancho correcto */
.ci-primary-nav {
  min-width: 78px !important;
  width: 78px !important;
}

/* Logo mark visible */
.ci-primary-nav .ci-logo-mark img {
  filter: none !important;
  opacity: 1 !important;
}

/* ===========================================
   7. BANDEJA DE CONVERSACIONES — más viewer-like
   =========================================== */

/* Header de la bandeja — más espacioso */
.conversations--header,
.chat-list--header {
  padding: 16px 18px 8px !important;
}

/* Título Conversaciones más grande */
.conversations--header h1,
.chat-list--header h1,
.conversations__header h1 {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #000060 !important;
  margin-bottom: 14px !important;
}

/* Tabs Mías/Sin asignar/Todos — más prominentes con conteos */
.conv-actions--tabs,
.tabs-title,
ul.tabs.is-medium li,
ul.tabs li {
  font-size: 13px !important;
  font-weight: 600 !important;
}

ul.tabs li a,
.tabs-title a {
  padding: 10px 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  border-bottom: 2px solid transparent !important;
}

/* Tab activo — verde agua */
ul.tabs li.is-active a,
.tabs-title.is-active a,
.tabs-title.active a {
  color: #00b894 !important;
  border-bottom-color: #00f0c0 !important;
}

/* Badges de conteo en tabs (mías 3207, sin asignar 7048, etc) */
ul.tabs li .badge,
.tabs-title .badge {
  background: #f1f5f9 !important;
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  border-radius: 10px !important;
  margin-left: 4px !important;
}

ul.tabs li.is-active .badge,
.tabs-title.is-active .badge {
  background: rgba(0, 240, 192, 0.15) !important;
  color: #00b894 !important;
}

/* Cards de conversación — más espaciosas */
.conversation {
  padding: 8px 16px !important;
}

/* Avatar de conversación — un toque más grande */
.conversation .user-thumbnail-box {
  width: 44px !important;
  height: 44px !important;
}

/* Nombre del contacto — más prominente */
.conversation--user {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #000060 !important;
}

/* Conv item activo — borde izq verde agua + fondo sutil */
.conversation.active {
  background: linear-gradient(90deg, rgba(0, 240, 192, 0.08), transparent) !important;
  border-left: 3px solid #00f0c0 !important;
}

/* Search bar de bandeja */
.search-wrap input,
.conversation-list--search input {
  padding: 8px 12px 8px 34px !important;
  border-radius: 9px !important;
  border: 1.5px solid #e2e8f0 !important;
  background: #f8fafc !important;
  font-size: 13px !important;
}
.search-wrap input:focus,
.conversation-list--search input:focus {
  background: #fff !important;
  border-color: #00f0c0 !important;
  box-shadow: 0 0 0 2px rgba(0, 240, 192, 0.15) !important;
}

/* Filtros — separados visualmente */
.conv-actions {
  padding: 8px 14px !important;
  background: #f8fafc !important;
  border-bottom: 1px solid #f1f5f9 !important;
}

/* ===========================================
   8. LINKS EN BURBUJAS DE MENSAJE (Sesión 13.1)
   Fix: links eran heredados con color claro, invisibles sobre verde WA
   =========================================== */

/* Links dentro de cualquier burbuja (saliente, entrante, privada) */
li.right .bubble a,
li.right .bubble a:link,
li.right .bubble a:visited,
li.left .bubble a,
li.left .bubble a:link,
li.left .bubble a:visited,
.bubble.is-private a,
.bubble.is-private a:link,
.bubble.is-private a:visited {
  color: #000060 !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(0, 0, 96, 0.4) !important;
  text-underline-offset: 2px !important;
  font-weight: 600 !important;
  word-break: break-all !important;
}

li.right .bubble a:hover,
li.left .bubble a:hover,
.bubble.is-private a:hover {
  color: #00b894 !important;
  text-decoration-color: #00b894 !important;
}

/* Texto del cuerpo de las burbujas — asegurar legibilidad */
li.right .bubble .text-content,
li.right .bubble .text-content p,
li.right .bubble .message-text__wrap,
li.right .bubble .message-text__wrap *,
li.left .bubble .text-content,
li.left .bubble .text-content p,
li.left .bubble .message-text__wrap,
li.left .bubble .message-text__wrap * {
  color: #1f2937 !important;
}

/* Excepción: los links dentro del wrap deben mantener el azul */
li.right .bubble .message-text__wrap a,
li.right .bubble .text-content a,
li.left .bubble .message-text__wrap a,
li.left .bubble .text-content a {
  color: #000060 !important;
}

/* Archivos adjuntos — nombre del archivo visible */
.bubble.is-file,
.bubble.is-file a,
.bubble.is-file .file--icon,
.bubble.is-file .file--meta,
.bubble.is-file .file--name,
.bubble.is-file .text-block-title {
  color: #000060 !important;
}
.bubble.is-file {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 96, 0.12) !important;
  border-radius: 12px !important;
}
li.right .bubble.is-file {
  background: #d9fdd3 !important;
}
.bubble.is-file a:hover {
  color: #00b894 !important;
}

/* Iconos de descarga / preview file */
.bubble.is-file svg,
.bubble.is-file .icon {
  color: #000060 !important;
  fill: #000060 !important;
}

/* Audio bubble — controles visibles */
.bubble.is-audio audio {
  filter: invert(0) !important;
}


/* ===========================================
   9. WIDGET ZADARMA WebRTC - z-index encima de todo
   =========================================== */
.zdrm-phone,
.zdrm-webphone,
.zdrm-webphone-container,
.zdrm-webphone-fixed,
[class*="zdrm-phone-"],
[class^="zdrm-"],
[id^="zdrm-"] {
  z-index: 999999 !important;
}

/* Asegurar que el contenedor principal del widget está visible y arriba */
div.zdrm-phone {
  position: fixed !important;
  z-index: 999999 !important;
}

/* Si Zadarma usa un overlay modal interno también */
.zdrm-modal,
.zdrm-overlay {
  z-index: 999998 !important;
}


/* Tamaño y posición del widget Zadarma WebRTC */
.zdrm-phone {
  min-width: 280px !important;
  min-height: 380px !important;
  max-width: 300px !important;
  max-height: 440px !important;
  background: #fff !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 28px rgba(15, 26, 46, 0.25) !important;
  border: 2px solid rgba(0, 240, 192, 0.5) !important;
}

/* Si está minimizado, expandir */
.zdrm-phone.minimized,
.zdrm-phone[style*="display: none"] {
  display: block !important;
  visibility: visible !important;
}