/* ─────────────────────────────────────────────────────────────────────────
   aiwapp · Design system inspirado en WhatsApp
   Paleta: verde / blanco / negro · Mobile-first · Touch targets ≥ 44px
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Verde WhatsApp ── */
  --wa-green:        #25D366;  /* primario CTA */
  --wa-green-dark:   #128C7E;  /* hover, acento */
  --wa-green-deep:   #075E54;  /* sidebar/topbar oscura */
  --wa-green-soft:   #DCF8C6;  /* burbuja saliente */
  --wa-green-tint:   #E7F8E1;  /* fondos sutiles */

  /* ── Neutrales ── */
  --ink:             #111B21;  /* texto principal */
  --ink-2:           #3B4A54;  /* texto secundario */
  --ink-3:           #667781;  /* texto terciario, metadatos */
  --ink-4:           #8696A0;  /* placeholders */
  --line:            #E9EDEF;  /* bordes */
  --line-2:          #D1D7DB;
  --bg:              #F0F2F5;  /* fondo app */
  --bg-2:            #F7F8FA;  /* hover sutil */
  --surface:         #FFFFFF;  /* tarjetas */
  --surface-dim:     #F5F6F6;  /* surface alterno */

  /* ── Estados ── */
  --danger:          #E53935;
  --danger-soft:     #FDECEA;
  --warning:         #F4B400;
  --warning-soft:    #FEF6D8;
  --success:         var(--wa-green);
  --success-soft:    #DCF8C6;

  /* ── Sombras ── */
  --shadow-1:        0 1px 2px rgba(11, 20, 26, 0.06);
  --shadow-2:        0 1px 3px rgba(11, 20, 26, 0.08), 0 1px 2px rgba(11, 20, 26, 0.04);
  --shadow-3:        0 4px 12px rgba(11, 20, 26, 0.10);
  --shadow-modal:    0 24px 48px rgba(11, 20, 26, 0.20);

  /* ── Radios ── */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;

  /* ── Espaciado (escala 4px) ── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 48px;

  /* ── Tipografía ── */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-base: 14px;
  --fs-md: 15px;
  --fs-lg: 16px;
  --fs-xl: 18px;
  --fs-2xl: 22px;
  --fs-3xl: 28px;

  /* ── Layout ── */
  --sidebar-w: 260px;
  --topbar-h: 56px;
  --bottom-nav-h: 64px;
  --chatlist-w: 360px;

  /* ── Animación ── */
  --t-fast: 120ms;
  --t-base: 200ms;
  --ease: cubic-bezier(.2, .8, .2, 1);

  /* ── Z-index ── */
  --z-nav: 30;
  --z-overlay: 50;
  --z-modal: 60;
  --z-toast: 70;
}

/* ── Reset y base ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; width: 100%;
  /* Ancho controlado para evitar scroll horizontal accidental, pero
     dejamos que el documento crezca verticalmente (scroll natural).
     Las reglas específicas para escritorio fijan altura/overflow más
     abajo; en mobile el navegador scrollea el body con inercia nativa
     (clave en iOS Safari, donde `overflow:hidden` global produce un
     touch-scroll erratico que solo dispara en zonas concretas). */
  overflow-x: hidden;
}
body {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: 1.45;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { margin: 0; font-weight: 600; color: var(--ink); }
h1 { font-size: var(--fs-xl); }
h2 { font-size: var(--fs-lg); }
h3 { font-size: var(--fs-base); }
p { margin: 0; }
a { color: var(--wa-green-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
/* El atributo HTML `hidden` debe ganar SIEMPRE a cualquier `display:`
   posterior. Sin esta regla, un elemento con `display: flex` declarado
   en otra parte ignora `hidden` y se queda visible. */
[hidden] { display: none !important; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: var(--r-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-4); }

/* ── Iconos SVG ─────────────────────────────────────────────────────────── */
svg { width: 20px; height: 20px; flex-shrink: 0; }

/* ── Botones ────────────────────────────────────────────────────────────── */
.btn, button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: 500;
  line-height: 1;
  padding: 10px 16px;
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: var(--bg-2);
  color: var(--ink);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.btn:focus-visible, button:focus-visible {
  outline: 2px solid var(--wa-green-dark);
  outline-offset: 2px;
}
.btn:disabled, button:disabled { opacity: .55; cursor: not-allowed; }

.btn-primary { background: var(--wa-green); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--wa-green-dark); }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-secondary:hover:not(:disabled) { background: var(--bg-2); border-color: var(--line-2); }
.btn-ghost { background: transparent; color: var(--ink-2); }
.btn-ghost:hover:not(:disabled) { background: var(--bg-2); color: var(--ink); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover:not(:disabled) { background: #C62828; }
.btn-lg { min-height: 48px; padding: 12px 20px; font-size: var(--fs-md); }
.btn-block { width: 100%; }
.btn .icon { width: 18px; height: 18px; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  min-width: 40px;
  padding: 0;
  border: none;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.icon-btn:hover { background: var(--bg-2); color: var(--ink); }
.icon-btn.ghost { background: transparent; }
.icon-btn.on-dark { color: rgba(255,255,255,.85); }
.icon-btn.on-dark:hover { background: rgba(255,255,255,.12); color: #fff; }

/* ── Forms ──────────────────────────────────────────────────────────────── */
label {
  display: block;
  margin: var(--s-3) 0 var(--s-1);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-2);
}
/* Inputs de texto, número, fecha, hora, URL, email, password, search, tel
   y los selects/textarea. Excluye explícitamente los checkbox/radio que
   tienen su propio bloque de tamaño justo abajo. */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
textarea, select {
  width: 100%;
  font-family: inherit;
  font-size: var(--fs-md);
  line-height: 1.4;
  color: var(--ink);
  padding: 10px 14px;
  min-height: 44px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
input::placeholder, textarea::placeholder { color: var(--ink-4); }
input:not([type="checkbox"]):not([type="radio"]):focus,
textarea:focus, select:focus {
  outline: none;
  border-color: var(--wa-green-dark);
  box-shadow: 0 0 0 3px rgba(18, 140, 126, 0.18);
}
textarea { min-height: 88px; resize: vertical; }

/* Checkbox y radio con tamaño correcto y color de marca. */
input[type="checkbox"],
input[type="radio"] {
  width: 18px;
  height: 18px;
  min-height: 0;
  padding: 0;
  margin: 0;
  vertical-align: middle;
  cursor: pointer;
  accent-color: var(--wa-green);
  flex-shrink: 0;
}
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: 2px solid var(--wa-green);
  outline-offset: 2px;
}
.error { color: var(--danger); font-size: var(--fs-base); margin-top: var(--s-3); }
.hint { color: var(--ink-3); font-size: var(--fs-sm); }

/* ── Logo ──────────────────────────────────────────────────────────────── */
.logo-dot {
  display: inline-block;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--wa-green);
  position: relative;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 4px var(--wa-green-deep);
}
.logo-dot::after {
  content: "";
  position: absolute;
  width: 8px; height: 8px;
  background: #fff;
  border-radius: 50% 50% 50% 2px;
  bottom: 4px; right: 3px;
  transform: rotate(-12deg);
}
.logo-dot-lg { width: 44px; height: 44px; box-shadow: inset 0 0 0 6px var(--wa-green-deep); }
.logo-dot-lg::after { width: 12px; height: 12px; bottom: 6px; right: 5px; }
.brand { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.3px; color: var(--ink); }
.brand-lg { font-size: var(--fs-3xl); }

/* ─────────────────────────────────────────────────────────────────────────
   Login
   ───────────────────────────────────────────────────────────────────────── */
.login-page {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--s-4);
  position: relative;
  overflow: hidden;
}
.login-bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(circle at 20% 20%, rgba(37,211,102,.12), transparent 50%),
    radial-gradient(circle at 80% 100%, rgba(7,94,84,.18), transparent 55%),
    linear-gradient(135deg, #0B141A 0%, #1F2C33 100%);
}
.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-modal);
  padding: var(--s-7);
}
.login-brand {
  display: flex; align-items: center; gap: var(--s-3);
  margin-bottom: var(--s-2);
}
.brand-sub {
  color: var(--ink-3);
  font-size: var(--fs-base);
  margin-bottom: var(--s-6);
}
#login-form button[type="submit"] { width: 100%; margin-top: var(--s-5); }
.login-foot {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--ink-4);
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}

/* ─────────────────────────────────────────────────────────────────────────
   App shell
   ───────────────────────────────────────────────────────────────────────── */
.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: 1fr;
  width: 100%;
  background: var(--bg);
}
/* Desktop: shell de altura fija con scrolls internos en cada panel.
   Mobile: body scrollea con inercia nativa (mejor UX en iOS/Android). */
@media (min-width: 1025px) {
  .app-shell {
    height: 100dvh;
    overflow: hidden;
  }
}

/* ── Sidebar (escritorio) ── */
.sidebar {
  display: flex;
  flex-direction: column;
  background: var(--wa-green-deep);
  color: rgba(255,255,255,.92);
  border-right: 1px solid rgba(0,0,0,.15);
}
.sidebar-brand {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-5) var(--s-5) var(--s-4);
}
.sidebar-brand .brand { color: #fff; }
.sidebar-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s-2) var(--s-3);
  overflow-y: auto;
}
.sidebar .nav-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 10px var(--s-3);
  min-height: 44px;
  border-radius: var(--r-md);
  color: rgba(255,255,255,.85);
  font-weight: 500;
  font-size: var(--fs-base);
  text-decoration: none;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.sidebar .nav-item:hover { background: rgba(255,255,255,.08); color: #fff; text-decoration: none; }
.sidebar .nav-item.active { background: var(--wa-green); color: #fff; }
.sidebar .nav-icon { width: 20px; height: 20px; }
.sidebar-footer {
  padding: var(--s-3);
  border-top: 1px solid rgba(255,255,255,.10);
}
.me-card {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2);
  border-radius: var(--r-md);
}
.me-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.me-name {
  font-size: var(--fs-base);
  color: #fff;
  font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.me-role {
  font-size: var(--fs-xs);
  color: rgba(255,255,255,.65);
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* ── Topbar ── */
.content {
  display: flex; flex-direction: column;
  min-width: 0;
}
/* Desktop: content fijo a la altura del shell, scroll en view-root.
   Mobile: content sin altura forzada, body scrollea. */
@media (min-width: 1025px) {
  .content {
    height: 100%;
    overflow: hidden;
  }
}
.topbar {
  display: flex; align-items: center; gap: var(--s-3);
  height: var(--topbar-h);
  padding: 0 var(--s-5);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
/* Mobile: la topbar queda sticky para que la hamburguesa esté siempre
   accesible mientras el body scrollea verticalmente. */
@media (max-width: 1024px) {
  .topbar {
    position: sticky;
    top: 0;
    z-index: 20;
  }
}
.topbar h1 {
  flex: 1;
  font-size: var(--fs-lg);
  font-weight: 600;
}
.topbar-right { display: flex; align-items: center; gap: var(--s-3); }
.conn-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ink-4);
  flex-shrink: 0;
  transition: background var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.conn-dot.online {
  background: var(--wa-green);
  box-shadow: 0 0 0 4px rgba(37,211,102,.18);
}

.view-root {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
}
/* Desktop: view-root scrollea internamente para que la topbar quede
   sticky-ish (en realidad forma parte del .content fijo). En mobile NO
   pone overflow propio: el body es el scroller global y eso evita el
   bug de touch-scroll erratico de iOS Safari con cadenas anidadas. */
@media (min-width: 1025px) {
  .view-root {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Bottom nav eliminado: la navegación móvil vive en el sidebar drawer
   abierto con la hamburguesa de la topbar. Reglas residuales borradas. */

/* ─────────────────────────────────────────────────────────────────────────
   Avatar
   ───────────────────────────────────────────────────────────────────────── */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--wa-green-dark);
  color: #fff;
  font-weight: 600;
  font-size: var(--fs-base);
  flex-shrink: 0;
  text-transform: uppercase;
  user-select: none;
}
.avatar-sm { width: 32px; height: 32px; font-size: var(--fs-sm); }
.avatar-lg { width: 56px; height: 56px; font-size: var(--fs-xl); }
.me-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--wa-green);
  color: #fff;
  font-weight: 600;
  font-size: var(--fs-base);
  flex-shrink: 0;
  text-transform: uppercase;
}

/* Avatar con foto (img dentro) */
.avatar.avatar-img {
  background: var(--bg-2);
  padding: 0;
  overflow: hidden;
}
.avatar.avatar-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ─────────────────────────────────────────────────────────────────────────
   Panel (contenedor de vistas tipo Contactos / Usuarios)
   ───────────────────────────────────────────────────────────────────────── */
.view-root > * { width: 100%; }

.panel {
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  margin: var(--s-4);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - var(--topbar-h) - var(--s-4) * 2);
}
.panel-header {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.panel-header h2 { flex: 1; font-size: var(--fs-lg); }
.panel-body { padding: var(--s-4) var(--s-5); overflow-y: auto; flex: 1; }
.panel-body.is-flush { padding: 0; }

/* ── Search bar ── */
.search-wrap {
  position: relative;
  flex: 1;
  max-width: 420px;
}
.search-wrap svg {
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  color: var(--ink-4);
  pointer-events: none;
}
.search-wrap input {
  padding-left: 38px;
  background: var(--bg-2);
  border-color: transparent;
  min-height: 40px;
}
.search-wrap input:focus { background: var(--surface); border-color: var(--wa-green-dark); }

/* ── Tablas ── */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-base);
}
.table thead th {
  text-align: left;
  font-weight: 500;
  color: var(--ink-3);
  background: var(--surface);
  padding: 10px var(--s-4);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: .4px;
}
.table tbody td {
  padding: 12px var(--s-4);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  vertical-align: middle;
}
.table tbody tr:hover { background: var(--bg-2); }
.table tbody tr:last-child td { border-bottom: none; }
.row-actions { display: inline-flex; gap: var(--s-2); }
.row-actions .icon-btn { width: 36px; height: 36px; }

/* ── Tags / chips ── */
.tag {
  display: inline-flex;
  align-items: center;
  background: var(--wa-green-tint);
  color: var(--wa-green-deep);
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  margin-right: 4px;
  margin-bottom: 2px;
}

/* ── Status pills ── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--bg);
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: .4px;
}
.pill::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.pill.connected { background: var(--success-soft); color: #1F7A30; }
.pill.connecting { background: var(--warning-soft); color: #8A6D00; }
.pill.disconnected, .pill.empty { background: var(--bg); color: var(--ink-3); }
.pill.danger { background: var(--danger-soft); color: var(--danger); }

/* ── Empty / loading states ── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--s-8) var(--s-5);
  color: var(--ink-3);
  gap: var(--s-2);
}
.empty-state h3 { color: var(--ink-2); font-size: var(--fs-lg); }
.empty-state p { font-size: var(--fs-base); max-width: 320px; }

/* ─────────────────────────────────────────────────────────────────────────
   Chats (estilo WhatsApp Web)
   ───────────────────────────────────────────────────────────────────────── */
.chats-layout {
  display: grid;
  grid-template-columns: var(--chatlist-w) 1fr;
  grid-template-rows: 1fr;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--bg);
  /* Desktop: ocupa todo el view-root (que tiene altura del shell).
     Mobile: el body scrollea, pero chats necesita altura fija para que
     la lista y el pane scrollen internamente con el input pegado abajo.
     Calculamos restando la topbar sticky. */
  height: 100%;
}
@media (max-width: 1024px) {
  .chats-layout {
    height: calc(100dvh - var(--topbar-h));
  }
}

/* Lista de chats */
.chat-list {
  background: var(--surface);
  border-right: 1px solid var(--line);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.chat-list-header {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.chat-list-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.chat-list-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 10px var(--s-4);
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.chat-list-item:hover { background: var(--bg-2); }
.chat-list-item.active { background: var(--bg); }
.chat-list-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.chat-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}
.chat-list-name {
  font-weight: 600;
  font-size: var(--fs-base);
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.chat-list-time {
  font-size: var(--fs-xs);
  color: var(--ink-3);
  flex-shrink: 0;
}
.chat-list-meta {
  font-size: var(--fs-sm);
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: var(--wa-green);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
  border-radius: var(--r-pill);
  flex-shrink: 0;
}

/* Panel de conversación */
.chat-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  position: relative;
  background:
    linear-gradient(rgba(229, 221, 213, 0.4), rgba(229, 221, 213, 0.4)),
    repeating-linear-gradient(0deg, transparent 0 14px, rgba(0,0,0,0.015) 14px 15px),
    repeating-linear-gradient(90deg, transparent 0 14px, rgba(0,0,0,0.015) 14px 15px),
    #ECE5DD;
}
.chat-empty {
  flex: 1;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--s-7);
  color: var(--ink-3);
}
.chat-empty .logo-dot { margin-bottom: var(--s-3); }

.chat-header {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.chat-header-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.chat-header-name {
  font-weight: 600;
  font-size: var(--fs-base);
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-header-meta {
  font-size: var(--fs-sm);
  color: var(--ink-3);
}
.chat-back-btn { display: none; }

.chat-messages {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: var(--s-4) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Divider "X mensajes no leídos" — replica del estilo de WhatsApp:
   banda horizontal tenue que cruza todo el ancho del área de mensajes,
   con un chip blanco centrado y texto en verde WhatsApp. Sin líneas. */
.chat-unread-divider {
  /* Hace que la banda salga del padding del .chat-messages y ocupe el
     ancho completo, igual que en WhatsApp. */
  align-self: stretch;
  margin: 8px calc(var(--s-5) * -1) 4px;
  padding: 8px 0;
  background: rgba(11, 20, 26, 0.06);
  display: flex;
  justify-content: center;
}
.chat-unread-pill {
  background: #FFFFFF;
  color: var(--wa-green-dark);
  font-size: 13px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 999px;
  box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12);
}

.bubble {
  position: relative;
  max-width: min(70%, 600px);
  padding: 8px 12px 22px;
  border-radius: 8px;
  font-size: var(--fs-md);
  line-height: 1.45;
  white-space: pre-wrap;
  word-wrap: break-word;
  box-shadow: 0 1px 1px rgba(0,0,0,0.08);
}
.bubble.in {
  align-self: flex-start;
  background: #FFFFFF;
  color: var(--ink);
  border-top-left-radius: 0;
}
.bubble.out {
  align-self: flex-end;
  background: var(--wa-green-soft);
  color: var(--ink);
  border-top-right-radius: 0;
}
.bubble + .bubble { margin-top: 2px; }
.bubble-meta {
  position: absolute;
  bottom: 4px;
  right: 10px;
  font-size: 10.5px;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.bubble-meta svg { width: 14px; height: 14px; }
.bubble-meta .status-queued { color: var(--ink-3); }
.bubble-meta .status-sent { color: #4FC3F7; }
.bubble-meta .status-failed { color: var(--danger); }
.bubble.is-queued { opacity: .85; }
.bubble.is-failed { background: var(--danger-soft); }
.bubble.is-failed.out { background: #FDECEA; }

.chat-input-row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  padding-bottom: max(var(--s-2), env(safe-area-inset-bottom));
  background: var(--bg);
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}
.chat-input-row input {
  flex: 1;
  background: var(--surface);
  border-color: transparent;
  border-radius: var(--r-pill);
  padding: 10px 16px;
  font-size: var(--fs-md);
}
.chat-input-row .btn-send {
  width: 44px; height: 44px;
  min-width: 44px; min-height: 44px;
  padding: 0;
  border-radius: 50%;
  background: var(--wa-green);
  color: #fff;
  border: none;
}
.chat-input-row .btn-send:hover:not(:disabled) { background: var(--wa-green-dark); }
.chat-input-row .btn-send svg { color: #fff; }

/* ── Adjuntar (clip + menú) ─────────────────────────────────────────────── */
.attach-wrap { position: relative; flex-shrink: 0; }
.attach-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--ink-2);
  border: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.attach-btn:hover { background: var(--bg-2); color: var(--ink); }
.attach-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  background: var(--surface);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-3);
  padding: 6px;
  display: none;
  flex-direction: column;
  gap: 2px;
  min-width: 220px;
  z-index: 20;
}
.attach-menu.open { display: flex; }
.attach-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--ink);
  border: none;
  width: 100%;
  text-align: left;
  font-size: var(--fs-base);
  cursor: pointer;
  min-height: 44px;
}
.attach-item:hover { background: var(--bg-2); }
.attach-item svg { width: 20px; height: 20px; color: var(--wa-green-dark); }

/* ── Burbujas con tipos ─────────────────────────────────────────────────── */
.bubble-media { display: block; max-width: 100%; border-radius: var(--r-sm); margin-bottom: 4px; }
.bubble img.bubble-media { max-height: 320px; object-fit: cover; }
.bubble img.bubble-image { cursor: zoom-in; transition: opacity var(--t-fast) var(--ease); }
.bubble img.bubble-image:hover { opacity: .92; }
.bubble video.bubble-media, .bubble audio.bubble-media { width: 280px; max-width: 100%; }
.bubble-doc {
  display: flex; align-items: center; gap: 8px;
  background: rgba(0,0,0,0.04);
  padding: 8px 10px;
  border-radius: var(--r-sm);
  margin-bottom: 4px;
}
.bubble-doc svg { color: var(--wa-green-dark); width: 24px; height: 24px; }
.bubble-doc-name { font-weight: 500; font-size: var(--fs-sm); }
.bubble-doc-meta { font-size: var(--fs-xs); color: var(--ink-3); }
.bubble-location {
  display: flex; align-items: center; gap: 8px;
  background: rgba(0,0,0,0.04);
  padding: 10px;
  border-radius: var(--r-sm);
}
.bubble-location svg { color: var(--danger); width: 22px; height: 22px; }
.bubble-poll {
  background: rgba(0,0,0,0.04);
  padding: 10px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
}
.bubble-poll-question { font-weight: 600; margin-bottom: 6px; }
.bubble-poll-option {
  padding: 4px 8px;
  background: var(--surface);
  border-radius: var(--r-xs);
  margin-bottom: 2px;
}

/* ── Toolbar del chat-list (tabs + botón nuevo) ────────────────────────── */
.chat-list-toolbar {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.btn-newchat {
  width: 40px; height: 40px;
  min-width: 40px;
  border-radius: 50%;
  background: var(--wa-green);
  color: #fff;
  border: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.btn-newchat:hover { background: var(--wa-green-dark); }
.btn-newchat svg { width: 22px; height: 22px; }

/* ── Modal "Nuevo chat" ────────────────────────────────────────────────── */
.newchat-results {
  margin-top: var(--s-3);
  max-height: 420px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.newchat-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 10px var(--s-3);
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.newchat-row:hover { background: var(--bg-2); }
.newchat-row:last-child { border-bottom: none; }
.newchat-row.is-disabled { opacity: .55; cursor: not-allowed; }
.newchat-row-body { flex: 1; min-width: 0; }
.newchat-row-name { font-weight: 600; font-size: var(--fs-base); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.newchat-row-meta { font-size: var(--fs-sm); color: var(--ink-3); }

/* ── Lightbox (visor de imágenes) ──────────────────────────────────────── */
body.lightbox-open { overflow: hidden; }
.lightbox {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.92);
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-4);
  animation: fadeIn var(--t-base) var(--ease);
}
.lightbox-img {
  max-width: 96vw;
  max-height: 92vh;
  object-fit: contain;
  border-radius: var(--r-sm);
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
.lightbox-close, .lightbox-download {
  position: absolute;
  top: 20px;
  background: rgba(255,255,255,.15);
  color: #fff;
  border: none;
  border-radius: var(--r-pill);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
  transition: background var(--t-fast) var(--ease);
  padding: 10px 14px;
  min-height: 40px;
}
.lightbox-close { right: 20px; padding: 0; width: 40px; justify-content: center; }
.lightbox-close:hover, .lightbox-download:hover { background: rgba(255,255,255,.28); }
.lightbox-download { right: 80px; }
.lightbox-close svg, .lightbox-download svg { width: 18px; height: 18px; }

/* ── Tabs segmentadas (En curso / Cerrados) ────────────────────────────── */
.seg {
  display: flex;
  background: var(--bg-2);
  border-radius: var(--r-md);
  padding: 3px;
  gap: 2px;
}
.seg-btn {
  flex: 1;
  background: transparent;
  border: none;
  padding: 8px 10px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-2);
  border-radius: var(--r-sm);
  min-height: 36px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.seg-btn:hover { color: var(--ink); }
.seg-btn.active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-1);
}
.seg-count {
  background: rgba(0,0,0,.08);
  font-size: var(--fs-xs);
  padding: 1px 7px;
  border-radius: var(--r-pill);
  font-weight: 600;
}
.seg-btn.active .seg-count {
  background: var(--wa-green);
  color: #fff;
}

/* ── Lista de chats (rows nuevos) ──────────────────────────────────────── */
.chat-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 10px var(--s-4);
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.chat-row:hover { background: var(--bg-2); }
.chat-row.active { background: var(--bg); border-left: 3px solid var(--wa-green); padding-left: calc(var(--s-4) - 3px); }
.chat-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chat-row-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.chat-row-name {
  font-weight: 600; font-size: var(--fs-base);
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1;
}
.chat-row-time { font-size: var(--fs-xs); color: var(--ink-3); flex-shrink: 0; }
.chat-row-mid {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.chat-row-preview {
  font-size: var(--fs-sm);
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Chips de instancia (slot + número) ───────────────────────────────── */
/* Color BASE (sin slot conocido o fallback): verde del design system. */
.instance-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--wa-green);
  color: #fff;
  letter-spacing: .3px;
}
.instance-chip-sm {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--wa-green-tint);
  color: var(--wa-green-deep);
  letter-spacing: .3px;
  text-transform: uppercase;
}

/* Variantes por slot para distinguir visualmente las 3 instancias en la
   lista de chats y en el header (added 2026-05-12). Cada slot tiene su
   propia paleta: verde (1) · azul (2) · violeta (3). Si el operador añadiera
   más slots en el futuro, caen al estilo base verde por defecto. */
.instance-chip.slot-1            { background: #25D366; color: #fff; }
.instance-chip-sm.slot-1         { background: #DCF8C6; color: #075E54; }
.instance-chip.slot-2            { background: #2196F3; color: #fff; }
.instance-chip-sm.slot-2         { background: #DBEAFE; color: #0D47A1; }
.instance-chip.slot-3            { background: #8B5CF6; color: #fff; }
.instance-chip-sm.slot-3         { background: #EDE9FE; color: #5B21B6; }

/* ── Pill reabierto ────────────────────────────────────────────────────── */
.pill.reopened {
  background: #FEF3C7;
  color: #8A6D00;
}

/* ── Header del chat (con acciones) ────────────────────────────────────── */
.chat-header-actions {
  display: flex;
  gap: var(--s-2);
  flex-shrink: 0;
}
.chat-header-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--line-2);
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 7px 12px;
  min-height: 36px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(11,20,26,.04);
}
.chat-header-btn:hover {
  background: var(--wa-green-tint);
  border-color: var(--wa-green-soft);
  color: var(--wa-green-deep);
}
.chat-header-btn:focus-visible {
  outline: 2px solid var(--wa-green);
  outline-offset: 2px;
}
.chat-header-btn svg { width: 16px; height: 16px; color: var(--ink-2); }
.chat-header-btn:hover svg { color: var(--wa-green-deep); }
.chat-header-btn.danger {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fecaca;
}
.chat-header-btn.danger svg { color: #b91c1c; }
.chat-header-btn.danger:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #991b1b;
}
.chat-header-btn.danger:hover svg { color: #991b1b; }
.chat-header-btn.primary {
  background: var(--wa-green);
  color: #fff;
  border-color: var(--wa-green-dark);
}
.chat-header-btn.primary svg { color: #fff; }
.chat-header-btn.primary:hover { background: var(--wa-green-dark); border-color: var(--wa-green-deep); color: #fff; }
.chat-header-btn.primary:hover svg { color: #fff; }
.chat-header-btn.on-dark { background: rgba(255,255,255,.18); color: #fff; border-color: rgba(255,255,255,.25); }
.chat-header-btn.on-dark:hover { background: rgba(255,255,255,.28); }
.chat-header-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.chat-header-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.chat-header-phone {
  font-size: var(--fs-sm);
  color: var(--ink-3);
}
.chat-header .avatar.avatar-lg {
  width: 44px;
  height: 44px;
  font-size: var(--fs-base);
}

/* Botón kebab del header del chat (oculto en escritorio, visible en móvil). */
.chat-header-kebab {
  display: none;
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-2);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.chat-header-kebab:hover, .chat-header-kebab[aria-expanded="true"] {
  background: var(--surface-2);
  border-color: var(--line);
}
.chat-header-kebab:focus-visible {
  outline: 2px solid var(--wa-green);
  outline-offset: 2px;
}

/* Popover de acciones del header del chat (móvil). */
.chat-header-menu {
  position: absolute;
  z-index: 1000;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(11,20,26,.18);
  padding: 6px;
  min-width: 220px;
  max-width: calc(100vw - 16px);
}
.chat-header-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.chat-header-menu li { margin: 0; }
.chat-header-menu button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  min-height: 48px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--ink);
  font-size: var(--fs-base);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.chat-header-menu button:hover, .chat-header-menu button:focus-visible {
  background: var(--wa-green-tint);
  color: var(--wa-green-deep);
  outline: none;
}
.chat-header-menu button svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--ink-2); }
.chat-header-menu button:hover svg { color: var(--wa-green-deep); }
.chat-header-menu button.danger { color: #b91c1c; }
.chat-header-menu button.danger svg { color: #b91c1c; }
.chat-header-menu button.danger:hover { background: #fef2f2; color: #991b1b; }
.chat-header-menu button.danger:hover svg { color: #991b1b; }
.chat-header-menu button.primary { color: var(--wa-green-deep); }
.chat-header-menu button.primary svg { color: var(--wa-green-deep); }

/* ── Botón micrófono e input row ───────────────────────────────────────── */
.mic-btn {
  width: 44px; height: 44px;
  min-width: 44px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--ink-2);
  border: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.mic-btn:hover:not(:disabled) { background: var(--bg-2); color: var(--wa-green-dark); }
.mic-btn:disabled { opacity: .5; cursor: not-allowed; }
.mic-btn.recording {
  background: var(--danger);
  color: #fff;
  animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(229, 57, 53, .55); }
  50% { box-shadow: 0 0 0 8px rgba(229, 57, 53, 0); }
}

/* ── Recorder bar ──────────────────────────────────────────────────────── */
.recorder-bar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.recorder-bar .rec-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--danger);
  animation: blink 1s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes blink { 0%,100% { opacity: 1 } 50% { opacity: .4 } }
.recorder-bar .rec-time {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--ink);
  flex: 1;
}
.recorder-bar .btn { padding: 8px 12px; min-height: 38px; }

/* ── Logs ──────────────────────────────────────────────────────────────── */
.logs-header { flex-direction: column; align-items: stretch; gap: var(--s-3); }
.logs-toolbar {
  display: flex;
  gap: var(--s-2);
  align-items: center;
  flex-wrap: wrap;
}
.logs-toolbar .search-wrap { flex: 1; min-width: 200px; }
.logs-toolbar select {
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: var(--surface);
  font-size: var(--fs-sm);
}
.logs-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.table-logs td { vertical-align: top; font-size: var(--fs-sm); }
.log-row { cursor: pointer; }
.log-row code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-xs);
  background: var(--bg);
  padding: 1px 6px;
  border-radius: var(--r-xs);
}
.log-ts {
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  color: var(--ink-3);
}
.log-detail-row td { background: var(--bg-2); padding: 0; }
.log-detail {
  margin: 0;
  padding: var(--s-3) var(--s-4);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-xs);
  color: var(--ink);
  white-space: pre-wrap;
  overflow-x: auto;
}

.pill.lvl-info { background: #E5E7EB; color: #4B5563; }
.pill.lvl-warn { background: #FEF3C7; color: #92400E; }
.pill.lvl-error { background: #FEE2E2; color: #991B1B; }

/* ── Vista Contactos (rediseñada distinta a Chats) ─────────────────────── */
.contacts-view {
  /* Crece según contenido y deja que el padre `.view-root` haga scroll
     global (más predecible que doble overflow nested). */
  display: flex;
  flex-direction: column;
  padding: var(--s-4);
  gap: var(--s-4);
  background: var(--bg);
  min-height: 100%;
  width: 100%;
  box-sizing: border-box;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--s-3);
}
.stat-card {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  text-align: left;
  font-family: inherit;
}
.stat-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
.stat-card.is-active {
  border-color: var(--wa-green);
  box-shadow: 0 0 0 3px rgba(37, 211, 102, .18);
}
.stat-icon {
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.stat-icon svg { width: 22px; height: 22px; }
.stat-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stat-value { font-size: var(--fs-2xl); font-weight: 700; color: var(--ink); line-height: 1; }
.stat-label { font-size: var(--fs-xs); color: var(--ink-3); text-transform: uppercase; letter-spacing: .5px; font-weight: 600; }

.stat-primary  .stat-icon { background: var(--wa-green-tint); color: var(--wa-green-deep); }
.stat-lead     .stat-icon { background: #FFF6E0; color: #8A6D00; }
.stat-prospecto .stat-icon { background: #DEF1FF; color: #0B4A75; }
.stat-cliente  .stat-icon { background: var(--success-soft); color: var(--wa-green-deep); }
.stat-inactivo .stat-icon { background: #F0F2F5; color: var(--ink-3); }
.stat-archive  .stat-icon { background: #FDECEA; color: var(--danger); }

.contacts-board {
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.contacts-board-header {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.contacts-board-title { flex: 1; min-width: 200px; }
.contacts-board-title h2 { font-size: var(--fs-xl); margin-bottom: 2px; }
.contacts-board-title p { margin: 0; font-size: var(--fs-sm); }
.contacts-board-actions { display: flex; gap: var(--s-2); align-items: center; flex: 2; min-width: 280px; }
.contacts-board-toolbar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: var(--s-3) var(--s-5);
  border-bottom: 1px solid var(--line);
  min-height: 50px;
  align-items: center;
}
.contacts-board-body { overflow-x: auto; }

.table-contacts thead th { position: sticky; top: 0; z-index: 1; }
.contact-tr { cursor: pointer; }
.contact-tr.is-archived { opacity: .55; }
.contact-tr.is-archived:hover { opacity: 1; }

.contact-cards {
  display: none;
  flex-direction: column;
}

/* ── Cards de usuarios (vista #usuarios en mobile) ─────────────────────── */
.user-card {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  cursor: pointer;
  min-height: 64px;
}
.user-card:hover, .user-card:active { background: var(--bg-2); }
.user-card .avatar { flex-shrink: 0; }
.user-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.user-card-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.user-card-name { font-size: var(--fs-base); color: var(--ink); font-weight: 600; }
.user-card-email { font-size: var(--fs-sm); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-card-role { display: flex; gap: 6px; align-items: center; }
.user-card-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}
.user-card-actions .icon-btn {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
}
.contact-card-board {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.contact-card-board:hover, .contact-card-board:active { background: var(--bg-2); }
.contact-card-board.is-archived { opacity: .55; }
.contact-card-board-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.contact-card-board-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.contact-card-board-tags { margin-top: 4px; }

/* ── Modal grande (ficha de contacto, agente, difusión) ────────────────── */
.modal-backdrop .modal.modal-lg {
  /* Sobrescribe el max-width:480px del .modal base */
  max-width: min(1100px, 95vw);
  width: 95vw;
  padding: 0;
  overflow: hidden;            /* el scroll vive en .modal-body */
  display: flex;
  flex-direction: column;
  max-height: 92vh;
}
/* Header SIEMPRE visible: sticky en top del modal y por encima del scroll
   del cuerpo. Botón cerrar prominente (>= 44px) y accesible por teclado. */
.modal-lg .modal-header {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  background: linear-gradient(135deg, var(--wa-green-deep) 0%, var(--wa-green-dark) 100%);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 5;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.modal-lg .modal-header .avatar,
.modal-lg .modal-header .agent-card-icon {
  background: rgba(255,255,255,.18);
  border: 2px solid rgba(255,255,255,.22);
  color: #fff;
  flex-shrink: 0;
}
.modal-lg .modal-header-info { flex: 1; min-width: 0; }
.modal-lg .modal-header-info h3 {
  color: #fff;
  font-size: var(--fs-xl);
  margin: 0 0 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-weight: 600;
}
.modal-lg .modal-header-info .modal-sub { color: rgba(255,255,255,.85); margin: 0; font-size: var(--fs-sm); }
.modal-lg .modal-header .icon-btn,
.modal-lg .modal-header .modal-close-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.12);
  color: #fff;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.modal-lg .modal-header .icon-btn:hover,
.modal-lg .modal-header .modal-close-btn:hover {
  background: rgba(255,255,255,.22);
}
.modal-lg .modal-header .icon-btn:focus-visible,
.modal-lg .modal-header .modal-close-btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}
.modal-lg .modal-header .icon-btn svg,
.modal-lg .modal-header .modal-close-btn svg {
  width: 22px; height: 22px;
}

/* Pestañas dentro del modal: sticky bajo el header. Scroll horizontal en
   móvil con padding lateral y sombra de gradiente para indicar contenido
   oculto. Botones con touch-target >=44px. */
.agent-tabs {
  position: sticky;
  top: 64px;                      /* alto aprox del header */
  z-index: 4;
  background: var(--surface);
  box-shadow: 0 1px 0 var(--line);
}
.agent-tabs .seg-btn {
  min-height: 44px;
  font-weight: 500;
  font-size: var(--fs-sm);
}
.agent-tabs .seg-btn .seg-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px;
  border-radius: 10px;
  background: var(--wa-green);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 0 6px;
  margin-left: 6px;
}

/* Cuerpo scrolleable del modal-lg. */
.modal-lg .agent-modal-body,
.modal-lg .modal-grid {
  overflow-y: auto;
  flex: 1 1 auto;
  -webkit-overflow-scrolling: touch;
}

.modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-6);
  padding: var(--s-6) var(--s-7);
  overflow-y: auto;
  max-height: 70vh;
}
.modal-col input,
.modal-col select,
.modal-col textarea {
  width: 100%;
  box-sizing: border-box;
}
.modal-col h4 {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--ink-3);
  font-weight: 600;
  margin: 0 0 var(--s-3);
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--s-2);
}
.modal-col label { margin-top: var(--s-2); }
.modal-col label:first-of-type { margin-top: 0; }

.modal-chats { display: flex; flex-direction: column; gap: 6px; }
.modal-chat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  background: var(--bg-2);
  border-radius: var(--r-sm);
}
.modal-chat.is-closed { opacity: .65; }
.btn-sm { padding: 6px 10px; min-height: 32px; font-size: var(--fs-sm); }

.modal-actions-spread {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  border-top: 1px solid var(--line);
  background: var(--surface);
  margin: 0;
  flex-wrap: wrap;
  position: sticky;
  bottom: 0;
  z-index: 3;
  box-shadow: 0 -2px 8px rgba(0,0,0,.04);
}
.modal-actions-spread .btn { min-height: 44px; }
.modal-actions-left, .modal-actions-right { display: flex; gap: var(--s-2); flex-wrap: wrap; }

@media (max-width: 720px) {
  .modal-grid { grid-template-columns: 1fr; padding: var(--s-4); }
  .modal-backdrop { padding: 0; }
  .modal-backdrop .modal.modal-lg {
    max-height: 100vh; height: 100vh;
    max-width: 100%; width: 100%;
    border-radius: 0;
  }
  .modal-lg .modal-header { padding: var(--s-3) var(--s-4); }
  .modal-lg .modal-header-info h3 { font-size: var(--fs-lg); }
  .agent-tabs { top: 60px; }
  .agent-tabs .seg-btn { padding: 12px 12px; font-size: var(--fs-xs); }
  .modal-actions-spread { padding: var(--s-3) var(--s-4); }
  .modal-actions-spread .btn { flex: 1 1 auto; }
  .table-contacts { display: none; }
  .contact-cards { display: flex; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-value { font-size: var(--fs-xl); }
  /* Header del chat en móvil: las acciones se mueven al kebab. */
  .chat-header { padding: 8px 10px; gap: 8px; }
  .chat-header-actions { display: none; }
  .chat-header-kebab { display: inline-flex; }
  .chat-header .avatar.avatar-lg { width: 40px; height: 40px; font-size: var(--fs-sm); }
  .chat-header-name { font-size: var(--fs-base); }
  .chat-header-meta {
    flex-wrap: nowrap;
    overflow: hidden;
    gap: 6px;
  }
  .chat-header-meta .instance-chip {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 50%;
    font-size: 10.5px;
  }
  .chat-header-meta .agent-pick {
    overflow: hidden;
    flex-shrink: 1;
    min-width: 0;
  }
  .chat-header-meta .agent-pick span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* El teléfono ya está en el chip SLOT y en la lista; en móvil se oculta para
     dejar sitio al chip de agente, que es interactivo. */
  .chat-header-phone { display: none; }
  /* Lightbox: menos padding y botones más cómodos */
  .lightbox { padding: 0; }
  .lightbox-img { max-width: 100vw; max-height: 88vh; border-radius: 0; }
  .lightbox-close, .lightbox-download { top: 12px; }
  .lightbox-close { right: 12px; }
  .lightbox-download { right: 64px; padding: 8px 10px; min-height: 36px; }
  .lightbox-download span { display: none; }
  /* Newchat results: más altura */
  .newchat-results { max-height: 60vh; }
}

/* ── Chip "Agente IA" en chat-row y chat-header ────────────────────────── */
.agent-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
  color: #5b21b6;
  letter-spacing: .3px;
}
.agent-chip svg { width: 12px; height: 12px; }
/* El chat-header tiene fondo claro (no oscuro como en otros modales),
   asi que el chip del agente conserva sus colores propios (lila para
   "on", gris para manual). Lo dejamos como el .agent-chip base. */

/* ── Vista AGENTES ─────────────────────────────────────────────────────── */
/* Tarjetas de agentes IA: grid responsive, click en toda la card. */
.agents-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
}
.agent-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-4) var(--s-3);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  cursor: pointer;
  transition: box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  position: relative;
  overflow: hidden;
}
.agent-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--wa-green);
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
}
.agent-card.is-active::before { opacity: 1; }
.agent-card.is-inactive { opacity: .75; }
.agent-card:hover {
  box-shadow: 0 8px 24px rgba(11,20,26,.10), 0 2px 6px rgba(11,20,26,.04);
  transform: translateY(-2px);
  border-color: var(--wa-green-soft);
}
.agent-card:focus-visible { outline: 3px solid var(--wa-green-tint); outline-offset: 2px; }
.agent-card-head { display: flex; align-items: flex-start; gap: var(--s-3); }
.agent-card-headinfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.agent-card-icon {
  width: 48px; height: 48px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--wa-green-tint) 0%, var(--wa-green-soft) 100%);
  color: var(--wa-green-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.agent-card-icon svg { width: 26px; height: 26px; }
.agent-card-name { font-weight: 700; font-size: var(--fs-base); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent-card-objective { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .6px; font-weight: 600; }
.agent-card-desc { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.45; min-height: 2.9em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.agent-card-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .5px;
  white-space: nowrap;
}
.agent-card-status .status-dot { width: 8px; height: 8px; border-radius: 50%; }
.agent-card-status.on { background: rgba(37,211,102,.12); color: #0f766e; }
.agent-card-status.on .status-dot { background: var(--wa-green); box-shadow: 0 0 0 3px rgba(37,211,102,.2); }
.agent-card-status.off { background: rgba(148,163,184,.18); color: var(--ink-3); }
.agent-card-status.off .status-dot { background: var(--ink-3); }

.agent-card-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}
.agent-card-stat { display: flex; flex-direction: column; gap: 2px; }
.agent-card-stat-num { font-size: var(--fs-lg); font-weight: 700; color: var(--ink); line-height: 1.1; }
.agent-card-stat-cap { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .4px; font-weight: 500; }

/* Tabs internas del modal de agente */
.agent-tabs {
  display: flex;
  gap: 4px;
  padding: 0 var(--s-6);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.agent-tabs::-webkit-scrollbar { display: none; }
.agent-tabs .seg-btn {
  background: transparent;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  padding: 12px 14px;
  white-space: nowrap;
  box-shadow: none;
}
.agent-tabs .seg-btn.active { background: transparent; border-bottom-color: var(--wa-green); color: var(--wa-green-deep); }
.agent-tab-pane.is-active { display: block; }
.agent-tab-pane[hidden] { display: none; }

.agent-modal-body { padding: var(--s-5) var(--s-6); }

.ag-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  margin: 8px 0 12px;
}
.ag-day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 8px;
  min-height: 44px;
  border: 2px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--t-base) var(--ease);
  user-select: none;
}
.ag-day:hover { border-color: var(--wa-green-soft); background: var(--wa-green-tint); }
.ag-day:has(input:checked) {
  border-color: var(--wa-green);
  background: var(--wa-green);
  color: #fff;
  font-weight: 600;
}
.ag-day:has(input:focus-visible) { outline: 3px solid var(--wa-green-tint); outline-offset: 2px; }
.ag-day input { position: absolute; opacity: 0; pointer-events: none; }

/* Tablas con columna de avatar dedicada (en vez de mezclar avatar+nombre). */
.col-avatar {
  width: 56px;
  padding-right: 0 !important;
  text-align: center;
}
.col-avatar .avatar {
  width: 36px; height: 36px;
  font-size: var(--fs-sm);
  flex-shrink: 0;
}
.col-actions {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}
.table-people th.col-avatar,
.table-people th.col-actions { padding-top: var(--s-3); padding-bottom: var(--s-3); }
.table-people .contact-name { font-weight: 600; color: var(--ink); }

/* Lista de usuarios con checkbox accesibles (touch >=44px). */
.user-pick-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px;
  margin: 8px 0;
}
.user-pick {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  min-height: 56px;
  border: 2px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  cursor: pointer;
  transition: all var(--t-base) var(--ease);
}
.user-pick:hover { border-color: var(--wa-green-soft); background: var(--wa-green-tint); }
.user-pick:has(input:checked) { border-color: var(--wa-green); background: var(--wa-green-tint); }
.user-pick:has(input:focus-visible) { outline: 3px solid var(--wa-green-tint); outline-offset: 2px; }
.user-pick input { width: 18px; height: 18px; min-height: auto; margin: 0; flex-shrink: 0; }
.user-pick-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.user-pick-name { font-weight: 600; font-size: var(--fs-sm); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-pick-email { font-size: var(--fs-xs); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Form rows: campos en columnas proporcionadas según el espacio. */
.form-row { display: grid; gap: var(--s-3); margin-bottom: var(--s-3); }
.form-row-2 { grid-template-columns: repeat(2, 1fr); }
.form-row-3 { grid-template-columns: repeat(3, 1fr); }
.form-field { display: flex; flex-direction: column; gap: 4px; }
.form-field label { margin: 0; font-weight: 500; color: var(--ink-2); font-size: var(--fs-sm); }
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%; box-sizing: border-box;
  margin: 0;
}
@media (max-width: 720px) {
  .form-row-2, .form-row-3 { grid-template-columns: 1fr; }
  .ag-days { grid-template-columns: repeat(4, 1fr); }
}

/* Documentos del agente */
.agent-docs-list { display: flex; flex-direction: column; gap: 6px; }
.agent-doc-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 10px var(--s-3);
  background: var(--bg);
  border-radius: var(--r-sm);
}
.agent-doc-row {
  align-items: flex-start;
  padding: var(--s-3);
}
.agent-doc-icon { color: var(--wa-green-dark); width: 28px; height: 28px; flex-shrink: 0; margin-top: 2px; }
.agent-doc-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.agent-doc-name { font-weight: 600; font-size: var(--fs-base); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent-doc-meta { font-size: var(--fs-xs); color: var(--ink-3); }

/* ── Badges de método de extracción ── */
.agent-doc-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-md);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  border: 1px solid transparent;
  width: fit-content;
}
.agent-doc-badge svg { width: 14px; height: 14px; }
.agent-doc-badge .badge-label { font-weight: 700; }
.agent-doc-badge .badge-detail {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  font-size: 11px;
  opacity: .85;
}

.agent-doc-badge.badge-text {
  background: #f1f5f9;
  color: #475569;
  border-color: #cbd5e1;
}
.agent-doc-badge.badge-ocr {
  background: #ede9fe;
  color: #5b21b6;
  border-color: #c4b5fd;
  box-shadow: 0 1px 2px rgba(91, 33, 182, .12);
}
.agent-doc-badge.badge-mixed {
  background: #fef9c3;
  color: #854d0e;
  border-color: #fde047;
  box-shadow: 0 1px 2px rgba(133, 77, 14, .15);
}

.agent-doc-error {
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--danger);
  background: #fef2f2;
  border-left: 2px solid var(--danger);
  padding: 4px 8px;
  border-radius: 3px;
}

/* Desglose chat / OCR en el dashboard del agente */
.agent-cost-breakdown {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  margin: 10px 0;
}
.agent-cost-breakdown > div {
  background: var(--bg);
  border-radius: var(--r-md);
  padding: var(--s-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.agent-cost-breakdown .cb-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .4px; color: var(--ink-3); font-weight: 600; }
.agent-cost-breakdown strong { font-size: var(--fs-lg); color: var(--ink); }
.agent-cost-breakdown .cb-meta { font-size: var(--fs-xs); color: var(--ink-3); }

.media-card.is-agent-doc { border-color: #c4b5fd; }
.media-card.is-agent-doc .media-card-thumb { background: #ede9fe; }

/* Label del prompt con botón "Generar prompt automáticamente" alineado a la derecha */
.ag-prompt-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.ag-prompt-label > span { font-weight: 600; }

/* Panel de notas tras generar el prompt automáticamente */
.agent-prompt-notes {
  margin-top: 12px;
  background: #FFF8E1;
  border: 1px solid #F4C430;
  border-radius: var(--r-md);
  padding: var(--s-4);
}
.agent-prompt-notes-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: #8B6B00;
}
.agent-prompt-notes-head svg { width: 20px; height: 20px; flex-shrink: 0; }
.agent-prompt-notes-body { color: var(--ink); font-size: var(--fs-sm); line-height: 1.5; }
.agent-prompt-notes-body h3,
.agent-prompt-notes-body h4,
.agent-prompt-notes-body h5 { margin: 10px 0 4px; color: var(--ink); font-weight: 600; }
.agent-prompt-notes-body h3 { font-size: var(--fs-base); }
.agent-prompt-notes-body h4 { font-size: var(--fs-sm); }
.agent-prompt-notes-body h5 { font-size: var(--fs-sm); color: var(--ink-2); }
.agent-prompt-notes-body p { margin: 4px 0; }
.agent-prompt-notes-body ul { margin: 4px 0 8px; padding-left: 20px; }
.agent-prompt-notes-body li { margin: 2px 0; }
.agent-prompt-notes-body code {
  background: rgba(255,255,255,.7);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12px;
  border: 1px solid rgba(0,0,0,.06);
}

/* ── Vista MEDIA ───────────────────────────────────────────────────────── */
.media-usage-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-4);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-3);
  align-items: center;
}
.media-usage-info { grid-column: 1; }
.media-usage-title { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .5px; color: var(--ink-3); font-weight: 600; }
.media-usage-numbers { font-size: var(--fs-base); color: var(--ink); margin-top: 2px; }
.media-usage-numbers strong { font-size: var(--fs-xl); font-weight: 700; }
.media-usage-pct { grid-column: 2; font-size: var(--fs-2xl); font-weight: 700; color: var(--ink-2); }
.media-usage-bar {
  grid-column: 1 / -1;
  height: 10px;
  background: var(--bg);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.media-usage-fill { height: 100%; background: var(--wa-green); border-radius: var(--r-pill); transition: width var(--t-base) var(--ease); }
.media-usage-card.tone-warn .media-usage-fill { background: var(--warning); }
.media-usage-card.tone-warn .media-usage-pct { color: var(--warning); }
.media-usage-card.tone-danger .media-usage-fill { background: var(--danger); }
.media-usage-card.tone-danger .media-usage-pct { color: var(--danger); }

.media-grid-wrap { padding: var(--s-4) var(--s-5); }
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--s-4);
}
.media-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.media-card:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); }
.media-card-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--bg-2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
}
.media-card-thumb img,
.media-card-thumb video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.media-card-noimg { color: var(--ink-3); }
.media-card-noimg svg { width: 48px; height: 48px; }
.media-card-body { padding: var(--s-3); flex: 1; min-width: 0; }
.media-card-name {
  font-weight: 600; font-size: var(--fs-sm); color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px;
}
.media-card-meta { font-size: var(--fs-xs); color: var(--ink-3); margin-bottom: 1px; }
.media-card-actions {
  display: flex; gap: 4px; padding: 6px var(--s-3) var(--s-3);
  justify-content: flex-end;
  border-top: 1px solid var(--line);
}
.media-card-actions .icon-btn { width: 32px; height: 32px; }

/* ── Coming soon (Agentes IA) ──────────────────────────────────────────── */
.coming-soon {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--s-7);
  max-width: 600px;
  margin: 0 auto;
}
.coming-soon-icon {
  width: 96px; height: 96px;
  color: var(--wa-green);
  margin-bottom: var(--s-4);
  background: var(--wa-green-tint);
  border-radius: 50%;
  padding: 22px;
}
.coming-soon h2 {
  font-size: var(--fs-3xl);
  margin-bottom: var(--s-3);
}
.coming-soon p {
  color: var(--ink-2);
  margin-bottom: var(--s-4);
  line-height: 1.6;
}
.coming-soon-list {
  text-align: left;
  background: var(--surface);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
  list-style: none;
  margin: var(--s-4) 0;
  box-shadow: var(--shadow-1);
  width: 100%;
}
.coming-soon-list li {
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: var(--fs-base);
}
.coming-soon-list li:last-child { border-bottom: none; }
.coming-soon-list li::before {
  content: "✓";
  color: var(--wa-green);
  font-weight: 700;
  margin-right: 8px;
}
.coming-soon-hint {
  color: var(--ink-3) !important;
  font-size: var(--fs-sm);
  font-style: italic;
}

/* ─────────────────────────────────────────────────────────────────────────
   Logout en topbar
   ───────────────────────────────────────────────────────────────────────── */
.logout-top {
  padding: 8px 12px;
  min-height: 36px;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  border: 1px solid var(--line);
  background: var(--surface);
}
.logout-top:hover { background: var(--danger-soft); color: var(--danger); border-color: transparent; }

/* ─────────────────────────────────────────────────────────────────────────
   Contactos (CRM completo)
   ───────────────────────────────────────────────────────────────────────── */
.contacts-layout {
  display: grid;
  grid-template-columns: 380px 1fr;
  flex: 1;
  height: 100%;
  background: var(--bg);
  min-height: 0;
}
.contacts-list {
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.contacts-toolbar {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.contacts-toolbar .btn-new {
  width: 40px; min-width: 40px; height: 40px;
  padding: 0;
  border-radius: var(--r-pill);
}
.contacts-filters {
  display: flex;
  gap: 6px;
  padding: 8px var(--s-4);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.contacts-filters::-webkit-scrollbar { display: none; }
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all var(--t-fast) var(--ease);
}
.filter-chip:hover { background: var(--bg-2); }
.filter-chip.active {
  background: var(--wa-green);
  color: #fff;
  border-color: var(--wa-green);
}
.filter-chip .count {
  background: rgba(0,0,0,.08);
  padding: 1px 6px;
  border-radius: var(--r-pill);
  font-size: 10px;
}
.filter-chip.active .count { background: rgba(255,255,255,.25); }

.contacts-scroll {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
.contact-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 10px var(--s-4);
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--t-fast) var(--ease);
}
.contact-row:hover { background: var(--bg-2); }
.contact-row.active { background: var(--bg); border-left: 3px solid var(--wa-green); padding-left: calc(var(--s-4) - 3px); }
.contact-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.contact-row-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.contact-row-name {
  font-weight: 600; font-size: var(--fs-base);
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.contact-row-meta {
  font-size: var(--fs-sm);
  color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Status pills extendidas */
.pill.status-lead { background: #FFF6E0; color: #8A6D00; }
.pill.status-prospecto { background: #DEF1FF; color: #0B4A75; }
.pill.status-cliente { background: var(--wa-green-tint); color: var(--wa-green-deep); }
.pill.status-inactivo { background: #F0F2F5; color: var(--ink-3); }

/* Ficha del contacto */
.contact-pane {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  min-width: 0;
  min-height: 0;
}
.contact-pane-empty {
  flex: 1;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--s-7);
  color: var(--ink-3);
}
.contact-pane-back-btn { display: none; }

.contact-card-header {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-6);
  background: var(--wa-green-deep);
  color: #fff;
}
.contact-card-header .avatar {
  background: rgba(255,255,255,.18);
  border: 2px solid rgba(255,255,255,.25);
}
.contact-card-header-body { flex: 1; min-width: 0; }
.contact-card-header-name {
  font-size: var(--fs-2xl);
  font-weight: 600;
  color: #fff;
  margin-bottom: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.contact-card-header-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  font-size: var(--fs-base);
  color: rgba(255,255,255,.85);
}
.contact-card-header-meta a { color: #fff; text-decoration: underline; }
.contact-card-actions { display: flex; gap: var(--s-2); flex-shrink: 0; }
.contact-card-actions .icon-btn { color: rgba(255,255,255,.85); }
.contact-card-actions .icon-btn:hover { background: rgba(255,255,255,.15); color: #fff; }

.contact-pane-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--s-5) var(--s-6);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-4);
  align-content: start;
}
.contact-section {
  background: var(--surface);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.contact-section.full { grid-column: 1 / -1; }
.contact-section h4 {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--ink-3);
  font-weight: 600;
  margin-bottom: var(--s-2);
}
.contact-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.contact-field label {
  font-size: var(--fs-xs);
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .3px;
  margin: 0;
}
.contact-field input,
.contact-field select,
.contact-field textarea {
  border: 1px solid transparent;
  background: transparent;
  padding: 6px 8px;
  margin: 0;
  font-size: var(--fs-md);
  border-radius: var(--r-sm);
  min-height: 34px;
  color: var(--ink);
}
.contact-field input:hover,
.contact-field select:hover,
.contact-field textarea:hover {
  border-color: var(--line);
  background: var(--surface);
}
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
  background: var(--surface);
  border-color: var(--wa-green-dark);
}
.contact-field-empty { color: var(--ink-4); font-style: italic; }

/* Editor de etiquetas */
.tags-editor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 4px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
}
.tags-editor:hover { border-color: var(--line); background: var(--surface); }
.tag-removable {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--wa-green-tint);
  color: var(--wa-green-deep);
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 4px 4px 4px 10px;
  border-radius: var(--r-pill);
}
.tag-removable button {
  background: rgba(7,94,84,.15);
  color: var(--wa-green-deep);
  border: none;
  border-radius: 50%;
  width: 18px; height: 18px;
  min-height: 18px;
  padding: 0;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.tag-removable button:hover { background: var(--wa-green-deep); color: #fff; }
.tag-input {
  border: none;
  outline: none;
  flex: 1;
  min-width: 100px;
  font-size: var(--fs-sm);
  padding: 4px;
  background: transparent;
  min-height: 28px;
}

.contact-changes-bar {
  position: sticky;
  bottom: 0;
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: var(--s-3) var(--s-6);
  display: flex;
  justify-content: flex-end;
  gap: var(--s-2);
  box-shadow: 0 -4px 16px rgba(0,0,0,.06);
}

.linked-chats { display: flex; flex-direction: column; gap: 6px; }
.linked-chat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  background: var(--surface-dim);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.linked-chat:hover { background: var(--bg-2); }
.linked-chat-info { flex: 1; min-width: 0; font-size: var(--fs-sm); }
.linked-chat-meta { color: var(--ink-3); font-size: var(--fs-xs); }

/* ─────────────────────────────────────────────────────────────────────────
   Perfil (instancias WhatsApp)
   ───────────────────────────────────────────────────────────────────────── */
.slots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--s-4);
  padding: var(--s-4);
  width: 100%;
  box-sizing: border-box;
  align-content: start;
  /* No fijamos overflow: el padre .view-root scrollea. */
}
.slot-card {
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  text-align: center;
  border-top: 4px solid var(--wa-green);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.slot-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-3); }
.slot-card.is-empty { border-top-color: var(--line-2); }
.slot-card.is-connected { border-top-color: var(--wa-green); }
.slot-card.is-connecting { border-top-color: var(--warning); }
.slot-card.is-disconnected { border-top-color: var(--ink-4); }

.slot-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}
.slot-title { font-weight: 600; font-size: var(--fs-lg); }
.slot-phone { font-size: var(--fs-base); color: var(--ink-2); }
.slot-empty-msg { color: var(--ink-3); font-size: var(--fs-sm); }
.qr-wrap {
  background: var(--surface-dim);
  border-radius: var(--r-md);
  padding: var(--s-3);
  display: grid; place-items: center;
}
.qr-img {
  display: block;
  max-width: 240px;
  width: 100%;
  height: auto;
  border-radius: var(--r-sm);
}
.slot-actions {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: auto;
}
.slot-actions .btn { flex: 1 1 auto; min-width: 100px; }

/* ─────────────────────────────────────────────────────────────────────────
   Modal
   ───────────────────────────────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(11, 20, 26, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: grid;
  place-items: center;
  padding: var(--s-4);
  z-index: var(--z-modal);
  animation: fadeIn var(--t-base) var(--ease);
}
.modal {
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-modal);
  padding: var(--s-6);
  width: 100%;
  max-width: 480px;
  max-height: 92vh;
  overflow-y: auto;
  animation: zoomIn var(--t-base) var(--ease);
}
.modal h3 { font-size: var(--fs-lg); margin-bottom: var(--s-2); }
.modal .modal-sub { color: var(--ink-3); font-size: var(--fs-base); margin-bottom: var(--s-4); }
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-2);
  margin-top: var(--s-5);
  flex-wrap: wrap;
}
.modal-actions .btn-danger { margin-right: auto; }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes zoomIn { from { opacity: 0; transform: translateY(8px) scale(.98) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Utilidades de visibilidad
   ───────────────────────────────────────────────────────────────────────── */
.only-mobile { display: none !important; }
.only-desktop { display: initial; }

/* ─────────────────────────────────────────────────────────────────────────
   Tablet (≤ 1024px)
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  :root { --chatlist-w: 320px; }
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }

  .sidebar {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    width: 280px;
    z-index: var(--z-overlay);
    transform: translateX(-100%);
    transition: transform var(--t-base) var(--ease);
    box-shadow: var(--shadow-3);
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.4);
    z-index: calc(var(--z-overlay) - 1);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-base) var(--ease);
  }
  .sidebar-backdrop.open { opacity: 1; pointer-events: auto; }

  .only-mobile { display: inline-flex !important; }
  /* Bottom-nav eliminado: el sidebar drawer es la única navegación móvil. */
  .panel { max-height: calc(100vh - var(--topbar-h) - var(--s-4) * 2); }
  /* Safe area inferior para todas las vistas (sin bottom-nav, dejamos
     hueco para el home indicator de iPhone moderno). */
  .view-root { padding-bottom: env(safe-area-inset-bottom); }
}

/* ─────────────────────────────────────────────────────────────────────────
   Móvil (≤ 720px)
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .topbar { padding: 0 var(--s-3); }
  .topbar h1 { font-size: var(--fs-md); }

  .panel { margin: var(--s-3); border-radius: var(--r-md); }
  .panel-header, .panel-body { padding: var(--s-3); }

  .chats-layout { grid-template-columns: 1fr; }
  .chats-layout.show-pane .chat-list { display: none; }
  .chats-layout:not(.show-pane) .chat-pane { display: none; }
  .chat-back-btn { display: inline-flex; }
  .bubble { max-width: 80%; }

  /* Contactos: split → single en móvil */
  .contacts-layout { grid-template-columns: 1fr; }
  .contacts-layout.show-pane .contacts-list { display: none; }
  .contacts-layout:not(.show-pane) .contact-pane { display: none; }
  .contact-pane-back-btn { display: inline-flex; }
  .contact-card-header { padding: var(--s-4); }
  .contact-card-header-name { font-size: var(--fs-xl); }
  .contact-pane-body { padding: var(--s-3); grid-template-columns: 1fr; }

  /* Tabla → cards en móvil */
  .table-responsive { display: none; }
  .contact-cards { display: flex; }

  /* Logout label oculto en móvil, solo el icono */
  .logout-label { display: none; }
  .logout-top { width: 36px; min-width: 36px; padding: 0; }

  .slots-grid { grid-template-columns: 1fr; padding: var(--s-3); gap: var(--s-3); }
  .slot-card { padding: var(--s-4); }

  .modal { padding: var(--s-5); border-radius: var(--r-md); }

  .login-card { padding: var(--s-5); }
}

/* ─────────────────────────────────────────────────────────────────────────
   Móvil pequeño (≤ 380px)
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 380px) {
  :root { --fs-base: 13px; --fs-md: 14px; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Vista Difusiones (envíos masivos)
   ────────────────────────────────────────────────────────────────────────── */
.bc-view {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-5);
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  box-sizing: border-box;
}
.bc-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.bc-page-head h2 { margin: 0 0 4px; font-size: var(--fs-2xl); font-weight: 700; }
.bc-page-head .hint { margin: 0; }

.bc-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s-3);
}
.bc-stats .stat-card { padding: var(--s-4); }
.bc-stats .stat-card.stat-msgs { background: linear-gradient(135deg, #ddd6fe 0%, #c4b5fd 100%); color: #312e81; border-color: #c4b5fd; }
.bc-stats .stat-card.stat-msgs .stat-icon { background: rgba(255,255,255,.7); color: #4338ca; }
.bc-stats .stat-card.stat-msgs .stat-value,
.bc-stats .stat-card.stat-msgs .stat-label { color: #312e81; }

.bc-list-wrap { background: transparent; }

.bc-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--s-3);
}

.bc-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  cursor: pointer;
  position: relative;
  transition: box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.bc-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 4px;
  border-top-left-radius: var(--r-lg);
  border-bottom-left-radius: var(--r-lg);
  background: var(--ink-3);
}
.bc-card.status-scheduled::before { background: #3b82f6; }
.bc-card.status-running::before { background: var(--wa-green); animation: pulse 2s infinite; }
.bc-card.status-paused_window::before,
.bc-card.status-paused_quota::before { background: #f59e0b; }
.bc-card.status-completed::before { background: var(--wa-green-deep); }
.bc-card.status-cancelled::before,
.bc-card.status-stopped::before { background: var(--danger); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.bc-card:hover {
  box-shadow: 0 8px 24px rgba(11,20,26,.10), 0 2px 6px rgba(11,20,26,.04);
  transform: translateY(-2px);
  border-color: var(--wa-green-soft);
}
.bc-card:focus-visible { outline: 3px solid var(--wa-green-tint); outline-offset: 2px; }

.bc-card-row1 { display: flex; align-items: flex-start; gap: var(--s-3); }
.bc-card-icon {
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--wa-green-tint) 0%, var(--wa-green-soft) 100%);
  color: var(--wa-green-deep);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.bc-card-icon svg { width: 22px; height: 22px; }
.bc-card-headinfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bc-card-title { font-size: var(--fs-base); font-weight: 700; margin: 0; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bc-card-meta { font-size: var(--fs-xs); color: var(--ink-3); margin: 0; }

.bc-status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  white-space: nowrap;
  flex-shrink: 0;
}
.bc-status-scheduled { background: #dbeafe; color: #1e40af; }
.bc-status-running { background: rgba(37,211,102,.15); color: #047857; }
.bc-status-running::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--wa-green); box-shadow: 0 0 0 3px rgba(37,211,102,.25);
  animation: pulse 1.5s infinite;
}
.bc-status-paused_window,
.bc-status-paused_quota { background: #fef3c7; color: #92400e; }
.bc-status-completed { background: rgba(7,94,84,.12); color: var(--wa-green-deep); }
.bc-status-cancelled,
.bc-status-stopped { background: #fee2e2; color: #991b1b; }

.bc-card-row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.bc-card-meta-block { display: flex; flex-direction: column; gap: 2px; }
.bc-card-cap { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .4px; font-weight: 500; }
.bc-card-val { font-size: var(--fs-sm); color: var(--ink); font-weight: 600; }

.bc-progress {
  position: relative;
  background: var(--bg);
  border-radius: var(--r-pill);
  height: 22px;
  overflow: hidden;
  min-width: 160px;
}
.bc-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--wa-green) 0%, var(--wa-green-dark) 100%);
  transition: width 300ms ease;
}
.bc-progress-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink);
  mix-blend-mode: difference;
  filter: invert(1);
  pointer-events: none;
}

@media (max-width: 720px) {
  .bc-view { padding: var(--s-4); gap: var(--s-3); }
  .bc-stats { grid-template-columns: repeat(2, 1fr); }
  .bc-cards-grid { grid-template-columns: 1fr; }
  .bc-page-head { flex-direction: column; align-items: stretch; }
  .bc-page-head .btn { width: 100%; justify-content: center; }
  .bc-mode-cards { grid-template-columns: 1fr; }
  .bc-vars-list { grid-template-columns: 1fr; }
  .agent-cost-breakdown { grid-template-columns: 1fr; }
  .agents-grid { padding: var(--s-3); grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .bc-stats { grid-template-columns: 1fr 1fr; }
  .bc-stats .stat-card { padding: var(--s-3); }
  .bc-stats .stat-value { font-size: var(--fs-lg); }
  .bc-stats .stat-label { font-size: 11px; }
  .ag-days { grid-template-columns: repeat(7, 1fr); gap: 4px; }
  .ag-day { padding: 8px 2px; font-size: 12px; }
}

.bc-vars { margin-top: 8px; }
.bc-vars summary { cursor: pointer; font-size: var(--fs-sm); color: var(--ink-2); padding: 4px 0; }
.bc-vars-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 6px;
  margin-top: 6px;
}
.bc-var-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 6px 10px;
  cursor: pointer;
  font-family: ui-monospace, monospace;
  font-size: var(--fs-xs);
  color: var(--wa-green-deep);
  text-align: left;
}
.bc-var-btn:hover { background: var(--wa-green-tint); }
.bc-var-btn .hint { font-family: var(--font-sans, system-ui); font-size: 11px; color: var(--ink-3); font-weight: normal; }

.bc-variation-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 8px 10px;
  margin: 8px 0;
}
.bc-variation-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.bc-variation-card textarea { width: 100%; min-height: 70px; resize: vertical; font-size: var(--fs-sm); }

.bc-radio-group { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.bc-radio { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--bg); border-radius: var(--r-md); cursor: pointer; font-size: var(--fs-sm); }
.bc-radio:hover { background: var(--wa-green-tint); }
.bc-radio input { width: auto; min-height: auto; margin: 0; }

/* Tarjetas de modo (radio) — alternativa visual al radio simple. */
.bc-mode-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-3);
  margin: 8px 0 16px;
}
.bc-mode-card {
  position: relative;
  border: 2px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: var(--s-3);
  cursor: pointer;
  transition: all var(--t-base) var(--ease);
  min-height: 120px;
}
.bc-mode-card input { position: absolute; opacity: 0; pointer-events: none; }
.bc-mode-card-body { display: flex; flex-direction: column; gap: 6px; }
.bc-mode-card-icon {
  width: 36px; height: 36px;
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--ink-2);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
  transition: all var(--t-base) var(--ease);
}
.bc-mode-card-icon svg { width: 20px; height: 20px; }
.bc-mode-card-title { font-weight: 700; color: var(--ink); }
.bc-mode-card-desc { font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.4; }
.bc-mode-card:hover { border-color: var(--wa-green-soft); background: var(--wa-green-tint); }
.bc-mode-card:has(input:checked) {
  border-color: var(--wa-green);
  background: var(--wa-green-tint);
  box-shadow: 0 0 0 4px rgba(37,211,102,.12);
}
.bc-mode-card:has(input:checked) .bc-mode-card-icon { background: var(--wa-green); color: #fff; }
.bc-mode-card:has(input:focus-visible) { outline: 3px solid var(--wa-green); outline-offset: 2px; }

/* Panel de reglas obligatorias (programación). */
.bc-rules-panel {
  background: #f0fdf4;
  border: 1px solid var(--wa-green-soft);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  margin-top: 8px;
  font-size: var(--fs-sm);
}
.bc-rules-panel strong { color: var(--wa-green-deep); display: block; margin-bottom: 6px; font-size: var(--fs-sm); }
.bc-rules-panel ul { margin: 0; padding-left: 20px; }
.bc-rules-panel li { margin: 2px 0; color: var(--ink); }
.bc-rules-panel p { margin: 6px 0 0; color: var(--ink-2); font-size: var(--fs-xs); }

/* Checkbox prominente con texto secundario (variaciones). */
.bc-variations-toggle { margin: var(--s-4) 0 var(--s-3); }
.bc-variations-toggle .check-label {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 1px solid #fcd34d;
  border-radius: var(--r-md);
  cursor: pointer;
}
.bc-variations-toggle input { width: 22px; height: 22px; min-height: auto; margin: 0; flex-shrink: 0; }
.bc-variations-toggle .check-label-text { display: flex; flex-direction: column; gap: 2px; }
.bc-variations-toggle .check-label-text strong { color: #78350f; }
.bc-variations-toggle .check-label-sub { font-size: var(--fs-xs); color: #78350f; line-height: 1.4; opacity: .85; }

/* Checkbox prominente con descripción (ej. "Agente activo"). El texto va
   pegado al checkbox y el bloque entero ocupa el ancho disponible para
   no salirse de su contenedor (modal, form, etc). */
.check-label.check-label-active {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  margin-top: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  cursor: pointer;
  transition: all var(--t-base) var(--ease);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.check-label.check-label-active:hover { border-color: var(--wa-green-soft); background: var(--wa-green-tint); }
.check-label.check-label-active:has(input:checked) {
  border-color: var(--wa-green);
  background: var(--wa-green-tint);
}
.check-label.check-label-active input { margin-top: 2px; }
.check-label.check-label-active .check-label-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.check-label.check-label-active .check-label-text strong { color: var(--ink); font-size: var(--fs-sm); }
.check-label.check-label-active .check-label-sub { font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.4; }

.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.bc-search-results {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  max-height: 220px;
  overflow-y: auto;
  margin-top: 4px;
  box-shadow: var(--shadow-1);
}
.bc-search-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
}
.bc-search-row:last-child { border-bottom: none; }
.bc-search-row:hover { background: var(--wa-green-tint); }

.bc-recipient-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.bc-recipient-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: var(--r-pill);
  background: var(--wa-green-tint);
  border: 1px solid var(--wa-green-soft);
  font-size: var(--fs-xs);
}
.bc-recipient-chip.excluded { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.bc-recipient-chip button {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0 2px;
  font-size: 14px;
  line-height: 1;
  color: inherit;
  min-width: auto;
  min-height: auto;
}

.bc-test-output {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 10px;
  margin-top: 8px;
  font-family: ui-monospace, monospace;
  font-size: var(--fs-sm);
  white-space: pre-wrap;
  max-height: 200px;
  overflow-y: auto;
}

/* ──────────────────────────────────────────────────────────────────────────
   Chip selector de agente en el header del chat (clickable)
   ────────────────────────────────────────────────────────────────────────── */
.agent-pick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  cursor: pointer;
  transition: all var(--t-base) var(--ease);
  min-height: 30px;
}
.agent-pick svg { width: 12px; height: 12px; }
.agent-pick svg.caret { width: 10px; height: 7px; opacity: .8; }
.agent-pick.is-on {
  background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
  color: #4c1d95;
  border-color: #a78bfa;
}
.agent-pick.is-on:hover { background: linear-gradient(135deg, #ddd6fe 0%, #c4b5fd 100%); border-color: #8b5cf6; }
.agent-pick.is-off {
  background: #f1f5f9;
  color: #334155;
  border-color: #cbd5e1;
}
.agent-pick.is-off:hover { background: #e2e8f0; border-color: #94a3b8; color: #1e293b; }
.agent-pick:focus-visible { outline: 2px solid var(--wa-green); outline-offset: 2px; }
/* El chat-header es claro: el chip selector usa sus colores propios
   .is-on (lila) o .is-off (gris) que ya tienen suficiente contraste. */

/* Popover del selector de agente (anclado al chip) */
.agent-picker-popover {
  position: absolute;
  z-index: var(--z-modal);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: 0 12px 32px rgba(11,20,26,.18), 0 4px 12px rgba(11,20,26,.06);
  width: min(360px, calc(100vw - 16px));
  max-height: min(420px, 70vh);
  overflow-y: auto;
  animation: popoverIn 160ms var(--ease);
}
@keyframes popoverIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.agent-picker-head {
  padding: 12px 14px 8px;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--ink-3);
  border-bottom: 1px solid var(--line);
}
.agent-picker-list { list-style: none; margin: 0; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.agent-picker-list .agent-picker-empty { padding: 12px 14px; color: var(--ink-3); font-size: var(--fs-sm); }
.agent-picker-list button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  text-align: left;
  min-height: 56px;
  font-family: inherit;
  color: var(--ink);
}
.agent-picker-list button:hover { background: var(--wa-green-tint); }
.agent-picker-list button.is-current { background: var(--wa-green-tint); border-color: var(--wa-green-soft); }
.agent-picker-list button:focus-visible { outline: 2px solid var(--wa-green); outline-offset: 1px; }
.agent-picker-icon {
  width: 36px; height: 36px;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--wa-green-tint) 0%, var(--wa-green-soft) 100%);
  color: var(--wa-green-deep);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.agent-picker-icon svg { width: 18px; height: 18px; }
.agent-picker-icon.manual { background: rgba(148,163,184,.18); color: var(--ink-2); }
.agent-picker-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.agent-picker-info strong { font-size: var(--fs-sm); color: var(--ink); }
.agent-picker-info span { font-size: var(--fs-xs); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent-picker-list button .check {
  width: 18px; height: 18px;
  color: var(--wa-green);
  flex-shrink: 0;
  margin-left: auto;
}

/* ──────────────────────────────────────────────────────────────────────────
   Botón "Generar respuesta IA" sobre el input del chat
   ────────────────────────────────────────────────────────────────────────── */
.chat-tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  padding: 6px var(--s-3) 0;
  background: var(--surface);
  border-top: 1px solid var(--line);
}
.chat-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  min-height: 36px;
  transition: all var(--t-base) var(--ease);
}
.chat-tool-btn svg { width: 16px; height: 16px; }
.chat-tool-btn:hover { border-color: var(--wa-green-soft); background: var(--wa-green-tint); color: var(--wa-green-deep); }
.chat-tool-btn:focus-visible { outline: 2px solid var(--wa-green); outline-offset: 2px; }
.chat-tool-btn.chat-tool-ia {
  background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
  border-color: rgba(91,33,182,.18);
  color: #5b21b6;
}
.chat-tool-btn.chat-tool-ia:hover {
  background: linear-gradient(135deg, #ddd6fe 0%, #c4b5fd 100%);
}

/* Modal específico de "Generar respuesta IA". Más compacto: max-width 720
   para que no abarque toda la pantalla y los campos queden cómodos. */
.modal-backdrop .modal.modal-suggest {
  max-width: min(720px, 95vw);
}
.modal-suggest .modal-suggest-body {
  padding: var(--s-5) var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.modal-suggest .form-field { margin: 0; }
.modal-suggest .sg-keep-row { margin-top: 0; }
.modal-suggest .sg-output-field textarea {
  min-height: 200px;
  font-size: var(--fs-md);
  line-height: 1.5;
  resize: vertical;
}
.modal-suggest .sg-output-field label { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.modal-suggest .sg-output-field .hint { margin: 0; font-weight: normal; }
.modal-suggest #sg-cost { margin: 4px 0 0; min-height: 1.2em; }
@media (max-width: 720px) {
  .modal-suggest .modal-suggest-body { padding: var(--s-4); }
  .modal-suggest .sg-output-field textarea { min-height: 180px; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Selector de "Agente predeterminado" bajo cada slot en Perfil
   ────────────────────────────────────────────────────────────────────────── */
.slot-config {
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px dashed var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.slot-config-row { display: flex; flex-direction: column; gap: 6px; }
.slot-config-label,
.slot-default-agent-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--ink-3);
}
.slot-config-label svg,
.slot-default-agent-label svg { width: 14px; height: 14px; color: var(--wa-green-dark); }
.slot-default-agent-select,
.slot-display-name-input { width: 100%; }
.slot-display-name-input.is-saved {
  border-color: var(--wa-green) !important;
  box-shadow: 0 0 0 3px rgba(37,211,102,.18) !important;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.slot-config-hint,
.slot-default-agent-hint {
  font-size: var(--fs-xs);
  color: var(--ink-3);
  margin: 0;
  line-height: 1.4;
}

/* Responsive: en móvil <720, popover ocupa más ancho y modal-suggest cabe full-screen via reglas existentes. */
@media (max-width: 480px) {
  .agent-picker-popover { width: calc(100vw - 16px); left: 8px !important; }
  .chat-tools { padding: 6px var(--s-3); }
  .chat-tool-btn { font-size: var(--fs-xs); padding: 8px 12px; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Botón "Ver mensajes más antiguos" sobre el primer mensaje del chat
   ────────────────────────────────────────────────────────────────────────── */
.chat-load-older-wrap {
  display: flex;
  justify-content: center;
  padding: var(--s-3) 0;
}
.chat-load-older-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  min-height: 36px;
  transition: all var(--t-base) var(--ease);
  box-shadow: var(--shadow-1);
}
.chat-load-older-btn svg { width: 16px; height: 16px; }
.chat-load-older-btn:hover:not(:disabled) {
  border-color: var(--wa-green-soft);
  background: var(--wa-green-tint);
  color: var(--wa-green-deep);
}
.chat-load-older-btn:disabled { opacity: .6; cursor: wait; }

/* Highlight breve al hacer scroll a un mensaje desde una búsqueda. */
.bubble.is-highlighted {
  animation: bubbleHighlight 2.4s ease-out;
}
@keyframes bubbleHighlight {
  0%   { box-shadow: 0 0 0 4px rgba(37,211,102,.55); }
  60%  { box-shadow: 0 0 0 4px rgba(37,211,102,.35); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}

/* ──────────────────────────────────────────────────────────────────────────
   Resultados de búsqueda global (en la lista de chats)
   ────────────────────────────────────────────────────────────────────────── */
.chat-search-results {
  border-top: 1px solid var(--line);
  background: var(--surface);
  max-height: 50%;
  overflow-y: auto;
  flex-shrink: 0;
}
.chat-search-results-head {
  padding: 10px 14px 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--ink-3);
  background: var(--bg);
}
.chat-search-results-loading,
.chat-search-results-empty {
  padding: 14px;
  font-size: var(--fs-sm);
  color: var(--ink-3);
  text-align: center;
}
.chat-search-results-list {
  display: flex;
  flex-direction: column;
}
.chat-search-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: none;
  background: transparent;
  border-bottom: 1px solid var(--line);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: var(--ink);
  width: 100%;
  min-height: 56px;
}
.chat-search-row:hover { background: var(--wa-green-tint); }
.chat-search-row:focus-visible { outline: 2px solid var(--wa-green); outline-offset: -2px; }
.chat-search-row .avatar { width: 36px; height: 36px; flex-shrink: 0; font-size: var(--fs-sm); }
.chat-search-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chat-search-row-top { display: flex; align-items: baseline; gap: 8px; justify-content: space-between; }
.chat-search-row-name { font-size: var(--fs-sm); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-search-row-time { font-size: 11px; color: var(--ink-3); flex-shrink: 0; }
.chat-search-row-snippet {
  font-size: var(--fs-xs);
  color: var(--ink-2);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.chat-search-row-snippet mark {
  background: #fde68a;
  color: #78350f;
  padding: 0 2px;
  border-radius: 2px;
  font-weight: 600;
}

/* Versión mini para resultados dentro del chat (sin avatar). */
.chat-search-row-mini { padding: 8px 14px; min-height: 48px; }
.chat-search-row-mini .chat-search-row-snippet { -webkit-line-clamp: 1; }

/* ──────────────────────────────────────────────────────────────────────────
   Barra de búsqueda dentro del chat (lupa en header)
   ────────────────────────────────────────────────────────────────────────── */
.chat-search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.chat-search-bar[hidden],
.chat-search-bar-results[hidden] { display: none !important; }
.chat-search-bar .search-wrap { flex: 1; margin: 0; }
.chat-search-bar input { min-height: 40px; }
.chat-search-bar-results {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  max-height: 40vh;
  overflow-y: auto;
  flex-shrink: 0;
}

@media (max-width: 720px) {
  .chat-search-results { max-height: 60%; }
  .chat-search-bar-results { max-height: 35vh; }
}

/* Resultados de búsqueda con dirección visible (entrante / saliente) */
.chat-search-row { border-left: 3px solid transparent; }
.chat-search-row.is-out { border-left-color: var(--wa-green); }
.chat-search-row.is-in  { border-left-color: var(--ink-3); }
.chat-search-who {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  margin-right: 4px;
}
.chat-search-row.is-out .chat-search-who { background: var(--wa-green); color: #fff; }
.chat-search-row.is-in  .chat-search-who { background: var(--ink-2); color: #fff; }

.chat-search-sender {
  font-weight: 700;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 4px;
  margin-right: 4px;
}
.chat-search-sender.is-out { background: rgba(37,211,102,.18); color: var(--wa-green-deep); }
.chat-search-sender.is-in  { background: rgba(15,23,33,.08); color: var(--ink); }
.chat-search-snippet-sep { color: var(--ink-3); margin: 0 4px; }

/* ──────────────────────────────────────────────────────────────────────────
   Botón "IA" integrado DENTRO del input del chat (no flotante, no fila
   aparte). Vive a la derecha del input, antes del mic y send.
   ────────────────────────────────────────────────────────────────────────── */
.chat-input-wrap {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0;
}
/* Espacio reservado para el botón "Generar respuesta IA" superpuesto.
   Se ajusta por breakpoints según el ancho del label visible. */
.chat-input-wrap input {
  padding-right: 200px;          /* desktop: "Generar respuesta IA" completo */
}
.ia-inline-btn {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(91,33,182,.28);
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
  color: #5b21b6;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .2px;
  transition: all var(--t-base) var(--ease);
  box-shadow: 0 1px 3px rgba(91,33,182,.10);
}
.ia-inline-btn:hover {
  background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
  border-color: #8b5cf6;
  box-shadow: 0 3px 10px rgba(91,33,182,.22);
}
.ia-inline-btn:active { transform: translateY(-50%) scale(.98); }
.ia-inline-btn:focus-visible { outline: 2px solid #7c3aed; outline-offset: 2px; }
.ia-inline-btn svg {
  width: 16px; height: 16px;
  flex-shrink: 0;
  color: #6d28d9;
}
.ia-inline-btn-label { white-space: nowrap; }
.ia-inline-btn-label-short { display: none; }       /* solo se muestra en tablet */

/* Tablet: el label completo ya no cabe cómodo, usamos "Generar IA". */
@media (max-width: 760px) {
  .chat-input-wrap input { padding-right: 140px; }
  .ia-inline-btn-label-full { display: none; }
  .ia-inline-btn-label-short { display: inline; }
}

/* Móvil: solo icono. Touch target cuadrado >=40px (mobile-design pattern).
   Importante: el input no es 100% de la fila, así que dejamos sitio
   suficiente para que el botón no tape el texto al teclear. */
@media (max-width: 480px) {
  .chat-input-wrap input { padding-right: 52px; }
  .ia-inline-btn {
    padding: 0;
    width: 40px;
    height: 40px;
    justify-content: center;
    gap: 0;
  }
  .ia-inline-btn-label,
  .ia-inline-btn-label-full,
  .ia-inline-btn-label-short { display: none; }
  .ia-inline-btn svg { width: 20px; height: 20px; }
}

/* Botón "Generar propuesta con IA" prominente arriba del textarea en el modal */
.modal-suggest .sg-generate-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-3);
  flex-wrap: wrap;
}
.modal-suggest .sg-generate-row .btn {
  flex: 0 0 auto;
}
.modal-suggest #sg-cost { margin: 0; flex: 1; min-width: 0; }
.btn.btn-lg {
  padding: 12px 20px;
  font-size: var(--fs-md);
  min-height: 48px;
}
.btn.btn-lg svg { width: 20px; height: 20px; }

/* ──────────────────────────────────────────────────────────────────────────
   Tabla Contactos: columna Agente con chip
   ────────────────────────────────────────────────────────────────────────── */
.contact-agent-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.contact-agent-pill svg { width: 11px; height: 11px; flex-shrink: 0; }
.contact-agent-pill.is-on {
  background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
  color: #5b21b6;
}
.contact-agent-pill.is-manual {
  background: var(--bg);
  color: var(--ink-3);
  border: 1px solid var(--line);
}

/* ──────────────────────────────────────────────────────────────────────────
   Toggle Agente Activo prominente (al inicio del modal de agentes)
   ────────────────────────────────────────────────────────────────────────── */
.agent-active-toggle {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  cursor: pointer;
  transition: all var(--t-base) var(--ease);
}
.agent-active-toggle.is-on {
  border-color: var(--wa-green);
  background: linear-gradient(135deg, var(--wa-green-tint) 0%, #fff 100%);
}
.agent-active-toggle.is-off {
  background: linear-gradient(135deg, #fef2f2 0%, var(--surface) 100%);
}
.agent-active-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0; height: 0;
}
.agent-active-toggle-track {
  position: relative;
  display: inline-block;
  width: 48px; height: 28px;
  border-radius: 14px;
  background: var(--ink-4);
  flex-shrink: 0;
  transition: background var(--t-base) var(--ease);
}
.agent-active-toggle.is-on .agent-active-toggle-track { background: var(--wa-green); }
.agent-active-toggle-thumb {
  position: absolute;
  top: 3px; left: 3px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,.12);
  transition: left var(--t-base) var(--ease);
}
.agent-active-toggle.is-on .agent-active-toggle-thumb { left: 23px; }
.agent-active-toggle-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.agent-active-toggle-info strong {
  font-size: var(--fs-base);
  color: var(--ink);
}
.agent-active-toggle-info strong span { color: var(--wa-green-deep); }
.agent-active-toggle.is-off .agent-active-toggle-info strong span { color: var(--danger); }
.agent-active-toggle-sub { font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.4; }

/* ──────────────────────────────────────────────────────────────────────────
   Difusión: aside con normas anti-baneo + contador 50/día
   ────────────────────────────────────────────────────────────────────────── */
.bc-rules-aside {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 64px;             /* bajo el header */
  z-index: 3;
}
.bc-rules-aside-block {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-3);
}
.bc-rules-aside-head,
.bc-quota-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--ink-2);
}
.bc-rules-aside-head svg,
.bc-quota-head svg { width: 14px; height: 14px; color: var(--wa-green-dark); }
.bc-rules-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--fs-xs);
  color: var(--ink);
  line-height: 1.4;
}
.bc-rules-list li { padding: 2px 0; }
.bc-rules-aside-block .hint { margin: 6px 0 0; font-size: 11px; }

.bc-quota-block .bc-quota-count {
  margin-left: auto;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink);
}

/* Tres números grandes: enviados / restantes / límite */
.bc-quota-numbers {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--s-2);
  margin: 6px 0 8px;
}
.bc-quota-num {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
  padding: 6px 4px;
  border-radius: var(--r-sm);
  background: var(--bg);
}
.bc-quota-num-value {
  font-size: var(--fs-xl);
  font-weight: 800;
  line-height: 1.1;
  color: var(--ink);
}
.bc-quota-num-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--ink-3);
}
.bc-quota-num.is-remaining .bc-quota-num-value { color: var(--wa-green-deep); }
.bc-quota-num.is-limit { background: rgba(148,163,184,.18); }
.bc-quota-num.is-limit .bc-quota-num-value { color: var(--ink-2); }

.bc-quota-block.is-warn .bc-quota-num.is-remaining .bc-quota-num-value { color: #b45309; }
.bc-quota-block.is-danger .bc-quota-num-value { color: var(--danger); }
.bc-quota-block.is-danger .bc-quota-num.is-remaining .bc-quota-num-value { color: var(--danger); }

.bc-quota-bar {
  height: 8px;
  background: var(--bg);
  border-radius: var(--r-pill);
  overflow: hidden;
  margin: 4px 0 6px;
}
.bc-quota-fill {
  height: 100%;
  background: var(--wa-green);
  transition: width 300ms ease, background-color 300ms ease;
}
.bc-quota-block.is-warn .bc-quota-fill { background: var(--warning); }
.bc-quota-block.is-warn .bc-quota-count { color: #92400e; }
.bc-quota-block.is-danger .bc-quota-fill { background: var(--danger); }
.bc-quota-block.is-danger .bc-quota-count { color: var(--danger); }
.bc-quota-block.is-danger .bc-quota-head svg { color: var(--danger); }

@media (max-width: 720px) {
  .bc-rules-aside { grid-template-columns: 1fr; padding: var(--s-3); top: 60px; }
  .bc-rules-list { font-size: 11px; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Bloque GLOBAL de normas + cuotas en la PÁGINA PRINCIPAL de Difusiones
   (no en cada modal individual)
   ────────────────────────────────────────────────────────────────────────── */
.bc-page-rules {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--s-3);
}
.bc-page-rules-block {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.bc-page-rules-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: var(--fs-base);
  color: var(--ink);
}
.bc-page-rules-head strong { font-weight: 700; }
.bc-page-rules-head .hint { margin-left: auto; font-size: var(--fs-xs); }
.bc-page-rules-head svg { width: 16px; height: 16px; color: var(--wa-green-dark); }

/* Mini-card por slot dentro del bloque de cuotas. */
.bc-quotas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--s-3);
}
.bc-quota-card {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-3);
  background: var(--bg);
  position: relative;
}
.bc-quota-card.is-warn { border-color: #fcd34d; background: #fffbeb; }
.bc-quota-card.is-danger { border-color: #fca5a5; background: #fef2f2; }
.bc-quota-card-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}
.bc-quota-card-head strong { font-size: var(--fs-base); color: var(--ink); }
.bc-quota-card-phone { font-size: var(--fs-xs); color: var(--ink-3); }
.bc-quota-card-offline {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink-3);
  background: rgba(148,163,184,.18);
  padding: 2px 8px;
  border-radius: var(--r-pill);
}
.bc-quota-numbers-compact { margin: 4px 0 6px; }
.bc-quota-numbers-compact .bc-quota-num { padding: 4px 4px; }
.bc-quota-numbers-compact .bc-quota-num-value { font-size: var(--fs-md); }
.bc-quota-numbers-compact .bc-quota-num-label { font-size: 9px; }

@media (max-width: 720px) {
  .bc-page-rules { grid-template-columns: 1fr; }
  .bc-quotas-grid { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Botón Clonar (quick action) en cada card de difusión
   ────────────────────────────────────────────────────────────────────────── */
.bc-card-quick-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 4px;
}
.bc-card-quick-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t-base) var(--ease);
}
.bc-card-quick-btn svg { width: 12px; height: 12px; }
.bc-card-quick-btn:hover {
  background: var(--wa-green-tint);
  border-color: var(--wa-green-soft);
  color: var(--wa-green-deep);
}
.bc-card-quick-btn:focus-visible { outline: 2px solid var(--wa-green); outline-offset: 2px; }
.bc-card-quick-btn:disabled { opacity: .55; cursor: wait; }

/* ──────────────────────────────────────────────────────────────────────────
   Vista Gestión IA (#gestion-ia) — dashboard de costes/tokens
   ────────────────────────────────────────────────────────────────────────── */
.ai-view {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-5);
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  box-sizing: border-box;
}
.ai-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.ai-page-head h2 { margin: 0 0 4px; font-size: var(--fs-2xl); font-weight: 700; }
.ai-page-head .hint { margin: 0; }
.ai-page-filters {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  flex-wrap: wrap;
}
.ai-agent-filter { min-width: 200px; }

.ai-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s-3);
}
.ai-stat-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ai-stat-card.ai-stat-cost {
  background: linear-gradient(135deg, var(--wa-green-tint) 0%, #fff 80%);
  border-color: var(--wa-green-soft);
}
.ai-stat-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--ink-3);
}
.ai-stat-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.1;
}
.ai-stat-card.ai-stat-cost .ai-stat-value { color: var(--wa-green-deep); }
.ai-stat-sub { font-size: var(--fs-xs); color: var(--ink-3); }

.ai-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}
.ai-chart-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-4);
}
.ai-chart-card h3 {
  margin: 0 0 var(--s-3);
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--ink);
}
.ai-chart-card-wide { grid-column: span 2; }

/* Donut */
.ai-donut-wrap {
  position: relative;
  width: 220px;
  height: 220px;
  margin: 0 auto;
}
.ai-donut-wrap svg { width: 100%; height: 100%; transform: rotate(0deg); }
.ai-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.ai-donut-center-value { font-size: var(--fs-lg); font-weight: 800; color: var(--ink); }
.ai-donut-center-label { font-size: var(--fs-xs); color: var(--ink-3); text-transform: uppercase; letter-spacing: .5px; }

/* Leyenda compartida (donut + timeseries) */
.ai-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: var(--s-3);
}
.ai-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
}
.ai-legend-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ai-legend-dot-dashed {
  background: transparent;
  border: 2px dashed var(--ink-2);
}
.ai-legend-label { color: var(--ink-2); flex: 1; }
.ai-legend-value { color: var(--ink); font-weight: 600; }
.ai-legend-value small { color: var(--ink-3); font-weight: 500; }

/* Barras top agentes */
.ai-bars { display: flex; flex-direction: column; gap: 8px; }
.ai-bar-row {
  display: grid;
  grid-template-columns: minmax(100px, 1fr) 2fr auto;
  gap: 10px;
  align-items: center;
  font-size: var(--fs-sm);
}
.ai-bar-name {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--ink);
  font-weight: 500;
}
.ai-bar-track {
  height: 12px;
  background: var(--bg);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.ai-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--wa-green) 0%, var(--wa-green-dark) 100%);
  transition: width 300ms ease;
}
.ai-bar-value { font-weight: 700; color: var(--ink); white-space: nowrap; font-size: var(--fs-xs); }

/* Línea temporal */
.ai-timeseries-svg {
  width: 100%;
  height: 240px;
  background: var(--bg);
  border-radius: var(--r-md);
}

/* Tabla recientes */
.ai-recent-wrap { overflow-x: auto; }
.ai-recent-table { font-size: var(--fs-sm); }
.ai-recent-table th { text-align: left; }
.ai-recent-table .ta-right { text-align: right; }
.ai-recent-table .ta-center { text-align: center; }
.ai-cat-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 700;
  border: 1px solid;
  white-space: nowrap;
}

/* ── Configuración del token OpenAI ────────────────────────────────────── */
.ai-token-section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-5);
}
.ai-token-section h3 { margin: 0 0 var(--s-2); }
.ai-token-status {
  margin: var(--s-3) 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: var(--fs-sm);
}
.ai-token-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.ai-token-pill.is-on { background: var(--wa-green); color: #fff; }
.ai-token-pill.is-env { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.ai-token-pill.is-off { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.ai-token-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.ai-token-form input { flex: 1 1 280px; min-width: 240px; font-family: ui-monospace, monospace; }
.ai-token-feedback { padding: 8px 12px; border-radius: var(--r-md); }
.ai-token-feedback.is-ok { background: rgba(37,211,102,.12); color: var(--wa-green-deep); }
.ai-token-feedback.is-warn { background: #fef3c7; color: #92400e; }
.ai-token-feedback.is-danger { background: #fee2e2; color: #991b1b; }
.ai-token-feedback.is-info { background: var(--bg); color: var(--ink-2); }

@media (max-width: 900px) {
  .ai-charts { grid-template-columns: 1fr; }
  .ai-chart-card-wide { grid-column: span 1; }
}
@media (max-width: 480px) {
  .ai-view { padding: var(--s-3); }
  .ai-page-head { flex-direction: column; align-items: stretch; }
  .ai-page-filters { width: 100%; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Vista Guía y reglas de uso (#guia)
   ────────────────────────────────────────────────────────────────────────── */
.guia-view {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-5);
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  box-sizing: border-box;
}
.guia-header h2 { margin: 0 0 4px; font-size: var(--fs-2xl); font-weight: 700; }
.guia-header .hint { margin: 0; max-width: 760px; }
.guia-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--s-5);
  align-items: start;
}
.guia-toc {
  position: sticky;
  top: var(--s-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-3) var(--s-3);
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}
.guia-toc strong {
  display: block;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--ink-3);
  padding: 6px 8px 8px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}
.guia-toc ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.guia-toc a {
  display: block;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  color: var(--ink-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
  line-height: 1.35;
  transition: all var(--t-fast) var(--ease);
}
.guia-toc a:hover {
  background: var(--wa-green-tint);
  color: var(--wa-green-deep);
  text-decoration: none;
}
.guia-toc a:focus-visible { outline: 2px solid var(--wa-green); outline-offset: 1px; }

.guia-content {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5) var(--s-6);
}
.guia-section {
  scroll-margin-top: var(--s-4);
  padding: var(--s-3) 0 var(--s-5);
  border-bottom: 1px solid var(--line);
}
.guia-section:last-of-type { border-bottom: none; }
.guia-section h3 {
  font-size: var(--fs-xl);
  margin: 0 0 var(--s-3);
  color: var(--ink);
  font-weight: 700;
}
.guia-section h4 {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--ink);
  margin: var(--s-3) 0 6px;
}
.guia-section p { line-height: 1.55; color: var(--ink); margin: 0 0 var(--s-2); }
.guia-section ul, .guia-section ol {
  margin: var(--s-2) 0 var(--s-3);
  padding-left: 22px;
  line-height: 1.55;
  color: var(--ink);
}
.guia-section li { margin: 4px 0; }
.guia-section code {
  background: var(--bg);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 13px;
  border: 1px solid var(--line);
  color: var(--wa-green-deep);
}
.guia-section.is-flash { animation: guiaFlash 1.2s ease-out; }
@keyframes guiaFlash {
  0% { box-shadow: 0 0 0 4px rgba(37,211,102,.35); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}

/* Sección "Reglas inviolables" destacada */
.guia-section-pinned {
  background: linear-gradient(135deg, var(--wa-green-tint) 0%, #fff 80%);
  border: 1px solid var(--wa-green-soft);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
  margin-bottom: var(--s-4);
}
.guia-rules {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.guia-rules li {
  background: var(--surface);
  border: 1px solid var(--wa-green-soft);
  border-left: 4px solid var(--wa-green);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  line-height: 1.5;
  color: var(--ink);
}
.guia-rules li strong { color: var(--wa-green-deep); }

.guia-glossary {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 8px var(--s-4);
  margin: 0;
  align-items: baseline;
}
.guia-glossary dt {
  font-weight: 700;
  color: var(--ink);
  text-align: right;
}
.guia-glossary dd {
  margin: 0;
  color: var(--ink-2);
  line-height: 1.5;
}

@media (max-width: 900px) {
  .guia-layout { grid-template-columns: 1fr; }
  .guia-toc {
    position: static;
    max-height: none;
  }
  .guia-toc ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; }
  .guia-glossary { grid-template-columns: 1fr; gap: 0 0; }
  .guia-glossary dt { text-align: left; margin-top: var(--s-3); }
}
@media (max-width: 480px) {
  .guia-view { padding: var(--s-3); }
  .guia-content { padding: var(--s-4); }
  .guia-toc ul { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────────────────────────────────────────
   ADR-036 · Persistencia de datos al desconectar/reconectar slot
   Estados nuevos: chat huérfano, banner de sólo lectura, media eliminado,
   pill "Slot eliminado", toast de reattach, difusión paused_no_instance.
   ────────────────────────────────────────────────────────────────────────── */

/* Pill roja para "Slot eliminado" en chat-list, chat-header y difusiones. */
.pill.slot-removed {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
  font-weight: 600;
}
.bc-status-paused_no_instance,
.pill.bc-status-paused_no_instance {
  background: #fef2f2;
  color: #991b1b;
}

/* Chats huérfanos en la lista lateral: marca visual sutil */
.chat-row.is-orphan {
  opacity: .85;
}
.chat-row.is-orphan .chat-row-name {
  color: var(--ink-2);
}

/* Banner readonly cuando se abre un chat huérfano */
.chat-readonly-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: #fef2f2;
  border-top: 1px solid #fecaca;
  color: #7f1d1d;
  font-size: var(--fs-sm);
  flex-shrink: 0;
}
.chat-readonly-banner svg { width: 20px; height: 20px; flex-shrink: 0; color: #b91c1c; margin-top: 2px; }
.chat-readonly-banner strong { display: block; color: #991b1b; margin-bottom: 2px; }

/* Burbuja "media eliminado" — gris con icono trash */
.bubble-media-deleted {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f3f4f6;
  color: #6b7280;
  padding: 10px 14px;
  border-radius: 8px;
  font-style: italic;
  font-size: var(--fs-sm);
  border: 1px dashed #d1d5db;
}
.bubble-media-deleted svg { width: 16px; height: 16px; color: #9ca3af; }

/* Toast de reattach tras conectar el slot (pregunta "Recuperar conversaciones antiguas") */
.toast.toast-reattach {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 5000;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--wa-green);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(11,20,26,.18);
  padding: 16px 18px;
  max-width: min(420px, calc(100vw - 40px));
  animation: toastSlideIn .3s ease;
}
@keyframes toastSlideIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.toast-reattach .toast-body strong { display: block; color: var(--ink); margin-bottom: 4px; }
.toast-reattach .toast-body p { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.5; }
.toast-reattach .toast-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  justify-content: flex-end;
}
.toast-reattach.is-success {
  border-left-color: var(--wa-green);
  color: var(--wa-green-deep);
  font-weight: 600;
  font-size: var(--fs-sm);
}
@media (max-width: 720px) {
  .toast.toast-reattach {
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-width: none;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   ADR-038 · Importador de contactos + AVISOS (SMTP + notificaciones)
   ────────────────────────────────────────────────────────────────────────── */

/* ── Importador de contactos: modal con 2 secciones ── */
.import-modal { width: min(720px, 95vw); }
.import-modal-body { padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-4); }
.import-section {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: var(--s-4);
  background: #fff;
}
.import-section-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: var(--s-3);
}
.import-section-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--wa-green);
  color: #fff;
  font-weight: 700;
  flex-shrink: 0;
}
.import-section-head h4 { margin: 0 0 2px 0; font-size: var(--fs-base); }
.import-section-head .hint { margin: 0; }
.import-download-btn { display: inline-flex; align-items: center; gap: 8px; }
.import-ai-tip {
  margin-top: var(--s-3);
  padding: 12px 14px;
  background: #ede9fe;
  border-left: 3px solid #8b5cf6;
  border-radius: 8px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: #5b21b6;
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.import-ai-tip svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: #6d28d9; }
.import-ai-tip strong { color: #4c1d95; }

.import-file-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.import-file-label {
  flex: 1;
  min-width: 240px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--bg);
  border: 1px dashed var(--line-2);
  border-radius: 8px;
  cursor: pointer;
  color: var(--ink-2);
  font-size: var(--fs-sm);
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.import-file-label:hover { background: var(--surface-2); border-color: var(--wa-green); }
.import-file-label svg { width: 16px; height: 16px; }

.import-summary {
  margin-top: var(--s-3);
  padding: 14px;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid var(--line);
}
.import-stats { display: flex; flex-wrap: wrap; gap: 12px; }
.import-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: #fff;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: var(--fs-sm);
}
.import-stat strong { color: var(--ink); }
.import-stat.is-ok { background: #d1fae5; color: #065f46; border-color: #a7f3d0; }
.import-stat.is-info { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
.import-stat.is-error { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.import-stat.is-warn { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.import-errors, .import-warnings { margin-top: 12px; font-size: var(--fs-sm); }
.import-errors summary, .import-warnings summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.import-errors ul, .import-warnings ul { margin: 8px 0 0 16px; padding: 0; max-height: 200px; overflow-y: auto; }
.import-error-msg { color: #b91c1c; font-weight: 600; padding: 8px; background: #fef2f2; border-radius: 6px; }

/* ── Vista AVISOS ── */
.avisos-view { padding: var(--s-4) var(--s-5); display: flex; flex-direction: column; gap: var(--s-4); max-width: 800px; }
.avisos-head h2 { margin: 0 0 4px 0; }
.avisos-block {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: var(--s-4);
}
.avisos-block h3 { margin: 0 0 4px 0; font-size: var(--fs-base); }
.avisos-block > .hint { margin: 0 0 var(--s-3) 0; }
.avisos-form { display: flex; flex-direction: column; gap: var(--s-3); }
.avisos-form .form-row label { display: block; font-weight: 600; font-size: var(--fs-sm); margin-bottom: 4px; color: var(--ink-2); }
.avisos-form .form-row input[type="text"], .avisos-form .form-row input[type="email"], .avisos-form .form-row input[type="number"], .avisos-form .form-row input[type="password"] {
  width: 100%; padding: 8px 12px; min-height: 38px; border: 1px solid var(--line-2); border-radius: 8px;
}
.avisos-form .form-row input:focus { outline: 2px solid var(--wa-green); outline-offset: -1px; }
.avisos-form .form-row-2col { display: grid; grid-template-columns: 1fr 2fr; gap: var(--s-3); }
.avisos-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: var(--s-3); }
.avisos-actions .hint.is-ok { color: #065f46; font-weight: 600; }
.avisos-actions .hint.is-error { color: #b91c1c; font-weight: 600; }

.avisos-recipients {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.avisos-recipients input {
  flex: 1;
  padding: 8px 12px;
  min-height: 38px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
}
.avisos-recipients-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.recipient-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--fs-sm);
}
.recipient-chip svg { width: 14px; height: 14px; color: var(--ink-3); }
.recipient-chip button {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 0 0 4px;
  color: var(--ink-3);
}
.recipient-chip button:hover { color: #b91c1c; }

.avisos-toggle-row { padding: 12px 0; }

/* ── Badge de notificación en slot-card de Perfil ── */
.slot-notif-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fef3c7;
  color: #b45309;
  border: 1.5px solid #f59e0b;
  margin-left: auto;
  cursor: help;
  animation: notifPulse 1.6s ease-in-out infinite;
}
.slot-notif-badge svg { width: 14px; height: 14px; }
@keyframes notifPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.55); }
  70%      { box-shadow: 0 0 0 8px rgba(245, 158, 11, 0); }
}

/* ── Modal post-login con slots desconectados ── */
.login-disconnected-modal {
  position: fixed;
  inset: 0;
  background: rgba(11, 20, 26, 0.55);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}
.login-disconnected-card {
  background: #fff;
  border-radius: 16px;
  width: min(720px, 100%);
  padding: var(--s-4);
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.login-disconnected-head h3 { margin: 0 0 4px 0; color: #b91c1c; font-size: var(--fs-lg); }
.login-disconnected-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-3);
  margin: var(--s-4) 0;
}
.login-disconnected-slot {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: var(--s-3);
}
.login-disconnected-slot header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.login-disconnected-slot .pill.is-disconnected { background: #fee2e2; color: #991b1b; }
.login-disconnected-slot .pill.is-connecting { background: #fef3c7; color: #92400e; }
.login-disconnected-phone { margin: 0 0 var(--s-3) 0; color: var(--ink-2); font-size: var(--fs-sm); }
.login-disconnected-qr-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  background: #fff;
  border-radius: 8px;
  border: 1px dashed var(--line-2);
  padding: 12px;
  margin-bottom: var(--s-3);
}
.login-disconnected-qr { max-width: 160px; max-height: 160px; }
.login-disconnected-connect { width: 100%; }
.login-disconnected-status { margin-top: 6px; font-size: var(--fs-sm); }
.login-disconnected-status.is-ok { color: #065f46; font-weight: 600; }
.login-disconnected-status.is-error { color: #b91c1c; }
.login-disconnected-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  border-top: 1px solid var(--line);
  padding-top: var(--s-3);
}
@media (max-width: 720px) {
  .login-disconnected-list { grid-template-columns: 1fr; }
  .avisos-form .form-row-2col { grid-template-columns: 1fr; }
}