/* ════════════════════════════════════════════════════════════════════════════
   Canales Pro — workspace single-page /conexiones
   Destino: Gestion_Integraciones.Server/wwwroot/css/canales-pro.css
   Depende de las clases ap-* de asistente-pro.css (chips, tabs, panel, cards).
   Referencia: "Canales Pro.dc.html". Solo tokens --gi-*; hex = colores de marca.
   ════════════════════════════════════════════════════════════════════════════ */

/* Colores de marca por provider */
.cn-whatsapp  { --cn: #25D366; } .cn-instagram { --cn: #E1306C; } .cn-facebook { --cn: #1877F2; }
.cn-haceloapp { --cn: var(--brand, #E0714E); } .cn-correo { --cn: #0284c7; } .cn-telegram { --cn: #94a3b8; }

/* Chip de canal (extiende .ap-chip) */
.cn-chip .bi { font-size: 14px; color: var(--cn); }
.cn-chip-count { font-size: 10.5px; font-weight: 700; background: var(--gi-muted); color: var(--gi-body);
                 border-radius: 999px; padding: 0 6px; }
.cn-chip-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; background: var(--gi-success, #10B981); }
.cn-chip-dot.warn { background: #F59E0B; } .cn-chip-dot.error { background: #DC2626; }
.cn-chip-connect { border-style: dashed !important; color: var(--gi-muted-fg); font-weight: 600; }
.cn-chip-connect.on { border-color: var(--brand); background: var(--brand-subtle); color: var(--brand-dark); }
.cn-live { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; padding: 3px 10px;
           border-radius: 999px; background: var(--gi-success-bg); color: var(--gi-success-text);
           border: 1px solid color-mix(in srgb, var(--gi-success, #10B981) 40%, transparent); }

/* Badge rojo en tab (pendientes) */
.cn-tab-badge { font-size: 10px; font-weight: 700; background: var(--gi-danger-bg); color: var(--gi-danger-text);
                border-radius: 999px; padding: 0 6px; }

/* Selector de cuenta (derecha de los tabs) */
.cn-account { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--gi-border); border-radius: 9px;
              padding: 5px 10px; font-size: 12px; font-weight: 600; color: var(--gi-fg-strong); background: var(--gi-card);
              cursor: pointer; font-family: inherit; margin-left: auto; margin-bottom: 4px; }
.cn-account .bi { color: var(--gi-faint); }

/* Resumen: hero con ícono de marca + KPIs */
.cn-hero-ico { width: 48px; height: 48px; border-radius: 14px; display: inline-flex; align-items: center;
               justify-content: center; font-size: 24px; color: #fff; background: var(--cn); flex: none; }
.cn-kpis { display: flex; margin-left: auto; }
.cn-kpi { text-align: center; padding: 0 10px; border-left: 1px solid color-mix(in srgb, var(--gi-border) 55%, transparent); }
.cn-kpi b { display: block; font-size: 18px; font-weight: 800; color: var(--gi-fg-strong); }
.cn-kpi span { font-size: 10.5px; font-weight: 600; color: var(--gi-faint); text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 720px) { .cn-kpis { display: none; } }

/* Bandejas */
.cn-list-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.cn-list-title { font-size: 14px; font-weight: 800; color: var(--gi-fg-strong); }
.cn-list-sub { font-size: 12px; color: var(--gi-muted-fg); }
.cn-search { margin-left: auto; height: 32px; width: 220px; max-width: 100%; border: 1px solid var(--gi-border);
             border-radius: 9px; display: flex; align-items: center; gap: 7px; padding: 0 10px; font-size: 12px;
             color: var(--gi-faint); background: var(--gi-card); }
.cn-search input { border: none; background: none; outline: none; flex: 1; font-size: 12px; color: var(--gi-fg); font-family: inherit; }
.cn-list { background: var(--gi-card); border: 1px solid var(--gi-border); border-radius: 12px; overflow: hidden; }
.cn-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; cursor: pointer;
          border-bottom: 1px solid color-mix(in srgb, var(--gi-border) 55%, transparent); }
.cn-row:last-child { border-bottom: none; }
.cn-row:hover { background: var(--gi-muted-2); }
.cn-row-ava { width: 34px; height: 34px; border-radius: 50%; background: var(--gi-muted); color: var(--gi-body);
              display: inline-flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700; flex: none; }
.cn-row-main { min-width: 0; flex: 1; }
.cn-row-name { font-size: 13px; font-weight: 600; color: var(--gi-fg-strong); }
.cn-row-text { font-size: 11.5px; color: var(--gi-muted-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn-row-when { font-size: 11px; color: var(--gi-faint); flex: none; }
/* estados de bandeja */
.cn-st { font-size: 10.5px; font-weight: 700; padding: 1px 8px; border-radius: 999px; flex: none; }
.cn-st-unanswered { color: var(--gi-danger-text); background: var(--gi-danger-bg); }
.cn-st-bot { color: var(--gi-info-text); background: var(--gi-info-bg); }
.cn-st-human { color: #5b21b6; background: #ede9fe; }
.cn-st-resolved, .cn-st-active, .cn-st-sent { color: var(--gi-success-text); background: var(--gi-success-bg); }
.cn-st-pending, .cn-st-scheduled { color: var(--gi-warning-text); background: var(--gi-warning-bg); }

/* Formularios: filas ícono + título + valor + toggle/Editar */
.cn-form { display: flex; flex-direction: column; gap: 12px; max-width: 680px; }
.cn-field { background: var(--gi-card); border: 1px solid var(--gi-border); border-radius: 12px; padding: 14px 16px;
            display: flex; align-items: center; gap: 12px; }
.cn-field > .bi { font-size: 16px; color: var(--gi-muted-fg); flex: none; }
.cn-field-main { min-width: 0; flex: 1; }
.cn-field-title { font-size: 13px; font-weight: 700; color: var(--gi-fg-strong); }
.cn-field-value { font-size: 12px; color: var(--gi-muted-fg); }
.cn-danger { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--gi-danger-bg);
             border-radius: 12px; background: color-mix(in srgb, var(--gi-danger-bg) 60%, var(--gi-card)); }
.cn-danger > .bi { color: #DC2626; }
.cn-danger-text { flex: 1; font-size: 12.5px; color: var(--gi-danger-text); }
.cn-danger-btn { padding: 6px 12px; border-radius: 8px; border: 1px solid var(--gi-danger-bg); background: var(--gi-card);
                 color: #DC2626; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; }

/* Catálogo "Conectar" */
.cn-connect-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.cn-connect-title { font-size: 15px; font-weight: 800; color: var(--gi-fg-strong); }
.cn-connect-sub { font-size: 12px; color: var(--gi-muted-fg); }
.cn-catalog { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.cn-prov { background: var(--gi-card); border: 1px solid var(--gi-border); border-radius: 14px; padding: 16px;
           display: flex; flex-direction: column; gap: 10px; }
.cn-prov.soon { opacity: .6; }
.cn-prov-head { display: flex; align-items: center; gap: 10px; }
.cn-prov-ico { width: 40px; height: 40px; border-radius: 11px; display: inline-flex; align-items: center;
               justify-content: center; font-size: 19px; color: #fff; background: var(--cn); flex: none; }
.cn-prov-name { font-size: 13.5px; font-weight: 700; color: var(--gi-fg-strong); }
.cn-prov-sub { font-size: 11.5px; color: var(--gi-muted-fg); }
.cn-prov-desc { font-size: 12px; color: var(--gi-body); line-height: 1.45; }
.cn-prov-connected { font-size: 11px; font-weight: 600; color: var(--gi-success-text); display: inline-flex; align-items: center; gap: 5px; }
.cn-prov-btn { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 0;
               border-radius: 9px; border: none; font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: inherit;
               color: #fff; background: var(--cn); }
.cn-prov-btn.ghost { color: var(--gi-body); background: var(--gi-muted); }
.cn-prov-btn:disabled { color: var(--gi-faint); background: var(--gi-muted); cursor: default; }
.cn-prov-help { font-size: 11.5px; text-align: center; color: var(--brand, #E0714E); }

/* ── Agregados al aplicar (10/9) ─────────────────────────────────────────── */
.cn-page { display: flex; flex-direction: column; gap: 12px; outline: none; }
.cn-tabs { margin-top: 0; align-items: center; }
.cn-content { position: relative; min-height: 240px; }
.cn-content.ap-panel-inline { animation: ap-slide .18s ease-out; }
.cn-hero { display: flex; align-items: center; gap: 14px; padding: 16px 18px; margin-bottom: 16px; flex-wrap: wrap; }
/* Las pantallas del clon de HaceloApp (SSR, chat.css global) entran por iframe, sin riel. */
.cn-embed { width: 100%; height: calc(100vh - 230px); min-height: 520px; border: 1px solid var(--gi-border);
            border-radius: 12px; background: var(--gi-card); display: block; }
.cn-empty { text-align: center; padding: 40px 20px; background: var(--gi-card); border: 1px dashed var(--gi-border-strong);
            border-radius: 12px; color: var(--gi-muted-fg); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cn-empty .bi { font-size: 28px; color: var(--gi-faint); }
.cn-empty h3 { margin: 0; font-size: 15px; color: var(--gi-fg-strong); }
.cn-empty p { margin: 0; font-size: 12.5px; max-width: 420px; }
.cn-limit { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 9px; font-size: 12px;
            background: var(--gi-warning-bg); color: var(--gi-warning-text); }
.cn-limit .bi { flex: none; }
.cn-limit a { margin-left: auto; font-weight: 600; white-space: nowrap; }
.cn-tenant { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; font-size: 12.5px;
             background: var(--brand-subtle, rgba(224,113,78,.1)); color: var(--gi-body); }
.cn-tenant a { margin-left: auto; font-weight: 600; }
.cn-correo-inline { margin-top: 16px; }
.cn-prov .cwb-btn, .cn-prov .cib-btn, .cn-prov .cfb-btn { width: 100%; }
.cn-page:focus { outline: none; }

/* ── EmailChannelsCard (.cx-card / .cx-conn-*): vivían en el <style> del Conexiones viejo;
   la card se embebe en el catálogo del workspace y en el tab Conexión de Correo. ── */
.cx-card {
  position: relative;
  background: var(--gi-card);
  border: 1px solid var(--gi-border);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  padding: 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  overflow: hidden;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
.cx-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--cx-accent, var(--brand));
  opacity: 0.9;
}
.cx-card:not(.is-disabled):hover {
  border-color: var(--cx-accent, var(--gi-border-strong));
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.09);
  transform: translateY(-2px);
}
.cx-card.is-disabled { opacity: 0.72; }
.cx-card.is-disabled::before { opacity: 0.4; }
.cx-card__head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.cx-card__logo {
  width: 52px;
  height: 52px;
  border-radius: 50%;            /* círculo con gradiente, como las cards de conectar */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 6px 16px -4px var(--cx-accent-soft, rgba(15, 23, 42, 0.15));
}
.cx-card__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gi-fg);
  flex: 1;
}
.cx-card__status {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  background: var(--gi-muted);
  color: var(--gi-muted-fg);
}
.cx-card__status.is-on { background: rgba(16, 185, 129, 0.12); color: #047857; }
.cx-card__status.is-off { background: var(--gi-muted);          color: var(--gi-muted-fg); }
.cx-card__status i { font-size: 0.78rem; }
.cx-card__plan {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0;
}
.cx-card__plan strong { font-size: 0.9rem; font-weight: 600; color: var(--gi-fg); }
.cx-card__plan span { font-size: 0.82rem; color: var(--gi-muted-fg); line-height: 1.4; }
.cx-card__actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.cx-card__cta {
  flex: 1;
  justify-content: center;
  min-width: 140px;
}
.cx-conn-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  border-top: 1px dashed var(--gi-border);
  padding-top: 0.85rem;
}
.cx-conn-item { margin: 0; }
.cx-conn-link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: none;
  border-radius: var(--gi-radius-sm);
  background: var(--gi-muted);
  text-decoration: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}
.cx-conn-link:hover { background: rgba(224, 113, 78, 0.07); }
.cx-conn-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.15rem;
  min-width: 0;
}
.cx-conn-name {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--gi-fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cx-conn-provider {
  font-size: 0.72rem;
  color: var(--gi-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cx-conn-agent {
  font-size: 0.74rem;
  color: var(--gi-muted-fg);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.cx-conn-orphan {
  font-size: 0.74rem;
  color: var(--gi-warning-text);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-weight: 500;
}
.cx-conn-status {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  flex-shrink: 0;
}
.cx-conn-status.is-on { background: rgba(16, 185, 129, 0.15); color: #047857; }
.cx-conn-status.is-off { background: rgba(156, 163, 175, 0.2); color: var(--gi-muted-fg); }
.cx-conn-arrow {
  color: var(--gi-muted-fg);
  font-size: 0.8rem;
  flex-shrink: 0;
}