/* ============================================================================
   Sistema de diseño del Panel IA — inspirado en Vambe (auditoría competitiva)
   ----------------------------------------------------------------------------
   Pedido de Nicolás (11-ago): "replica todo, sin excepción, sin romper nada de
   lo nuestro que funciona".

   POR QUÉ ESTE ARCHIVO EXISTE
   Las páginas del Panel IA (src/ia, src/reconectar, src/agente-ia) definían cada
   una su propia paleta oscura en un `:root` local. Eso hacía imposible cambiar el
   look sin editar las tres — y con ellas, las ~46 vistas que cuelgan de esas
   páginas. Acá vive UNA sola definición de tokens; las páginas la importan y
   sobreescriben lo mínimo.

   POR QUÉ NO ROMPE NADA
   Los nombres de las variables son EXACTAMENTE los que las páginas ya usaban
   (--bg, --sf, --sf2, --bd, --tx, --tx2, --tx3, --g…). Cambia el VALOR, no el
   contrato: todo lo que ya leía `var(--sf)` sigue funcionando, solo que ahora
   pinta claro. Cero cambios de marcado, cero cambios de JavaScript.

   Vambe es claro, con riel de íconos a la izquierda, tarjetas blancas de esquinas
   redondeadas, badges de estado y mucho aire. Eso es lo que estos tokens producen.
   ========================================================================== */

:root {
  /* ── Superficies ───────────────────────────────────────────────────────── */
  --bg:   #f6f7f9;   /* fondo de página (antes #0a0d13) */
  --sf:   #ffffff;   /* tarjetas y paneles */
  --sf2:  #f0f2f5;   /* hover / superficie hundida */
  --sf3:  #e9ecf1;   /* superficie activa */
  --bd:   #e4e7ec;   /* borde estándar */
  --bd2:  #d4d9e0;   /* borde marcado */

  /* ── Texto ─────────────────────────────────────────────────────────────── */
  --tx:   #16202c;   /* principal */
  --tx2:  #55606e;   /* secundario */
  --tx3:  #8b95a3;   /* terciario / etiquetas */

  /* ── Acentos ───────────────────────────────────────────────────────────── */
  --blue: #2f6df4;   /* primario: acciones, activo */
  --blue-sf: #eaf0fe;
  --g:    #4a9e26;   /* verde BigCapital, oscurecido para leer sobre blanco */
  --g-sf: #e7f5df;
  --rd:   #d64545;
  --rd-sf:#fdeaea;
  --yw:   #b5820a;
  --yw-sf:#fdf3dc;
  --pp:   #6c5ce7;   /* Confirmación */
  --pp-sf:#eeebfd;
  --vi:   #8b5cf6;   /* Re-contacto */
  --vi-sf:#f2ecfe;
  --cy:   #0e8ca8;
  --cy-sf:#e3f4f8;

  /* ── Forma y profundidad ───────────────────────────────────────────────── */
  --r:    10px;      /* radio de tarjeta */
  --r-sm: 7px;       /* radio de control */
  --sh:   0 1px 2px rgba(16,24,40,.05);
  --sh-md:0 4px 12px rgba(16,24,40,.08);
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
body.bc-vambe {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--tx);
  -webkit-font-smoothing: antialiased;
}

/* ── Riel lateral de navegación (el patrón más reconocible de Vambe) ───────
   Ancho fijo, ícono arriba y etiqueta abajo, activo con pastilla azul clara.
   Se lee como aplicación, no como página web con pestañas. */
/* Va dentro del flujo (hijo de un contenedor flex), NO `position:fixed`: fijarlo lo sacaba
   del flujo y terminaba tapando la barra de migas de pan, que arrancaba en x=0 debajo. */
.bc-rail {
  flex-shrink: 0; width: 92px; height: 100vh; z-index: 900;
  background: var(--sf); border-right: 1px solid var(--bd);
  display: flex; flex-direction: column; align-items: center;
  padding: 12px 0; gap: 2px;
}
.bc-rail__logo {
  width: 40px; height: 40px; border-radius: 11px; margin-bottom: 14px;
  background: var(--blue); color: #fff; display: flex; align-items: center;
  justify-content: center; font-weight: 800; font-size: 15px; flex-shrink: 0;
}
.bc-rail__item {
  width: 78px; padding: 9px 3px 7px; border-radius: var(--r-sm);
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  color: var(--tx3); text-decoration: none; border: none; background: transparent;
  cursor: pointer; transition: background .14s, color .14s; font: inherit;
}
.bc-rail__item svg { width: 19px; height: 19px; stroke-width: 1.9 }
.bc-rail__item span { font-size: 10.5px; font-weight: 600; letter-spacing: -.01em; line-height: 1.1 }
.bc-rail__item:hover { background: var(--sf2); color: var(--tx2) }
.bc-rail__item.is-active { background: var(--blue-sf); color: var(--blue) }
.bc-rail__spacer { margin-top: auto }

/* ── Barra superior con migas de pan ──────────────────────────────────────── */
.bc-top {
  height: 56px; display: flex; align-items: center; gap: 12px;
  padding: 0 20px; background: var(--sf); border-bottom: 1px solid var(--bd);
}
.bc-crumbs { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--tx3) }
.bc-crumbs a { color: var(--tx3); text-decoration: none }
.bc-crumbs a:hover { color: var(--tx2) }
.bc-crumbs .sep { opacity: .5 }
.bc-crumbs .cur { color: var(--tx); font-weight: 600 }

/* ── Tarjeta ──────────────────────────────────────────────────────────────── */
.bc-card {
  background: var(--sf); border: 1px solid var(--bd); border-radius: var(--r);
  box-shadow: var(--sh);
}

/* ── Badge de estado (verde "atendido", rojo "sin atender") ───────────────── */
.bc-badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px;
  border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: -.01em;
  white-space: nowrap;
}
.bc-badge--ok   { background: var(--g-sf);  color: var(--g) }
.bc-badge--warn { background: var(--yw-sf); color: var(--yw) }
.bc-badge--bad  { background: var(--rd-sf); color: var(--rd) }
.bc-badge--info { background: var(--blue-sf); color: var(--blue) }
.bc-badge--mute { background: var(--sf2); color: var(--tx3) }

/* ── Control segmentado (Abiertos / Todos / Cerrados) ─────────────────────── */
.bc-seg {
  display: inline-flex; background: var(--sf2); border-radius: 9px; padding: 3px; gap: 2px;
}
.bc-seg button {
  border: none; background: transparent; padding: 6px 14px; border-radius: 7px;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--tx3); cursor: pointer;
  transition: background .14s, color .14s;
}
.bc-seg button:hover { color: var(--tx2) }
.bc-seg button.is-active { background: var(--sf); color: var(--tx); box-shadow: var(--sh) }

/* ── Barra de desplazamiento discreta ─────────────────────────────────────── */
.bc-vambe ::-webkit-scrollbar { width: 9px; height: 9px }
.bc-vambe ::-webkit-scrollbar-track { background: transparent }
.bc-vambe ::-webkit-scrollbar-thumb { background: #d3d8e0; border-radius: 5px; border: 2px solid var(--bg) }
.bc-vambe ::-webkit-scrollbar-thumb:hover { background: #bcc3cd }

/* ── Estado vacío ─────────────────────────────────────────────────────────── */
.bc-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 48px 24px; color: var(--tx3); font-size: 13px; text-align: center;
}
.bc-empty svg { width: 34px; height: 34px; opacity: .38; stroke-width: 1.5 }