/**
 * Panel comercial — tokens de aspecto.
 *
 * El panel venía de claude.ai y pintaba con los tokens de ahí (--color-fg,
 * --cds-radius, --font-anthropic-sans...). Este archivo redefine esos mismos
 * nombres con los valores del design system de MagORAI y MagEAM, así que el
 * HTML del panel no cambia una línea y se ve como el resto de los productos.
 *
 * Origen de los valores: Magorai/frontend/src/design-system/theme.css
 * (Mageam Design System v0.1.0, perfil light, "la estética del portal manda").
 * Si allí cambia un tono, cambia aquí.
 *
 * Solo perfil claro, como el portal. Si algún día hace falta el oscuro, se
 * copian los valores del bloque .dark de theme.css.
 */

:root {
  /* ── Marca (design system de producto) ── */
  --vsc-primary: #2e7bff;
  --vsc-primary-hover: #1746b8;
  --vsc-primary-tint: #eef4ff;
  --vsc-ink: #0b1b44;
  --vsc-accent: #c9a84c;        /* oro VSC */
  --vsc-accent-ink: #8a6d00;

  --vsc-canvas: #f5f8ff;
  --vsc-surface: #ffffff;
  --vsc-surface-2: #fafcff;
  --vsc-surface-3: #f2f6fe;
  --vsc-line: #e4ebf8;
  --vsc-line-strong: #cfe0ff;

  --vsc-fg-secondary: #34507f;
  --vsc-fg-muted: #5a6b92;
  --vsc-fg-faint: #7c8cb4;

  --vsc-navy: #0a1436;
  --vsc-navy-2: #2e5bc8;
  --vsc-on-navy: #d6e2ff;
  --vsc-on-navy-muted: #b4cbff;

  --vsc-shadow-tile: 0 1px 2px rgba(11, 27, 68, 0.04);
  --vsc-shadow-card: 0 18px 40px -32px rgba(11, 27, 68, 0.45);

  /* ── Los nombres que usa el HTML del panel ── */
  --color-fg: var(--vsc-ink);
  --color-fg-muted: var(--vsc-fg-muted);
  --color-bg: var(--vsc-surface);
  --color-panel: var(--vsc-surface-3);
  --color-border-line: var(--vsc-line);
  --color-ok: #1fa97a;
  --color-warn: #e0a020;
  --color-bad: #b8402c;

  --font-anthropic-sans: Manrope, Inter, "Segoe UI", system-ui, sans-serif;
  /* Las cifras grandes iban en serif. Acá van en la misma familia de los
     productos, con el peso alto: es lo que hace que se lean como MagEAM. */
  --font-anthropic-serif: Manrope, Inter, "Segoe UI", system-ui, sans-serif;

  --cds-radius: 12px;
  /* OJO: es un COLOR, no un borde entero. El panel la usa dentro de
     `border: 1px solid var(--cds-border)`, asi que si aca va el atajo completo
     la declaracion queda invalida y el elemento se muestra SIN borde. Pasó con
     el desplegable de empresas, que se fundia con las tarjetas de atras. */
  --cds-border: var(--vsc-line-strong);
  --cds-surface-popover: var(--vsc-surface);
  --cds-shadow-popover: 0 16px 40px -12px rgba(11, 27, 68, 0.34), 0 2px 8px rgba(11, 27, 68, 0.10);
  --cds-text-secondary: var(--vsc-fg-secondary);

  --cds-gap-xs: 4px;
  --cds-gap-sm: 8px;
  --cds-gap-md: 12px;
  --cds-gap-lg: 20px;
  --cds-pad-xs: 4px;
  --cds-pad-sm: 8px;
  --cds-pad-md: 12px;
  --cds-pad-lg: 16px;

  --cds-font-size-caption: 12px;
  --cds-font-size-body: 13.5px;
  --cds-font-size-heading: 15px;
  --cds-font-size-title: 26px;
  --cds-font-weight-medium: 600;

  --cds-chart-grid: var(--vsc-line);
  --cds-chart-axis: var(--vsc-fg-faint);
  --cds-chart-muted: var(--vsc-line-strong);
  --cds-dur-slow: 240ms;
}

/* ── El marco de la aplicación ──────────────────────────────────────────── */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--vsc-canvas);
  color: var(--color-fg);
  font-family: var(--font-anthropic-sans);
  font-size: var(--cds-font-size-body);
  -webkit-font-smoothing: antialiased;
}

/* Barra superior: el degradado navy de los productos, con el logo en blanco. */
.app-barra {
  background: linear-gradient(100deg, var(--vsc-navy) 0%, var(--vsc-navy-2) 100%);
  color: var(--vsc-on-navy);
  padding: 0 clamp(16px, 4vw, 32px);
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 60px;
  flex-wrap: wrap;
}

.app-logo { height: 26px; width: auto; display: block; flex: none; }

.app-barra-sep {
  width: 1px;
  align-self: stretch;
  margin: 14px 0;
  background: rgba(214, 226, 255, 0.28);
  flex: none;
}

.app-nombre {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0;
}

.app-nombre span {
  display: block;
  font-weight: 500;
  font-size: 11.5px;
  color: var(--vsc-on-navy-muted);
  letter-spacing: 0;
}

/* El oro, en la raya fina bajo la barra: es el único sitio donde manda. */
.app-acento { height: 3px; background: var(--vsc-accent); }

.app-estado {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--vsc-on-navy-muted);
}

.app-punto {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-ok);
  box-shadow: 0 0 0 3px rgba(31, 169, 122, 0.22);
  flex: none;
}

.app-estado.es-viejo .app-punto {
  background: var(--color-warn);
  box-shadow: 0 0 0 3px rgba(224, 160, 32, 0.22);
}

.app-estado.es-malo .app-punto {
  background: var(--color-bad);
  box-shadow: 0 0 0 3px rgba(184, 64, 44, 0.22);
}

.app-cuerpo {
  max-width: 1360px;
  margin: 0 auto;
  padding: clamp(16px, 3vw, 28px) clamp(16px, 4vw, 32px) 48px;
}

/* El panel traía sus propias tarjetas blancas; el lienzo de la app es el azul
   pálido del portal, así que las tarjetas se recortan solas. */
#dash-root { background: transparent; }

.app-pie {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 32px) 32px;
  color: var(--vsc-fg-faint);
  font-size: 11.5px;
  line-height: 1.6;
}

.app-pie b { color: var(--vsc-fg-muted); font-weight: 600; }

/* ── Los botones y pestañas del panel, con el azul del portal ───────────── */
#dash-root .pc-btn,
#dash-root .vx-btn[aria-selected="true"] {
  border-radius: 10px;
}

#dash-root .vx-btn[aria-selected="true"] {
  background: var(--vsc-primary);
  color: #fff;
  border-color: var(--vsc-primary);
}

#dash-root .pc-tab[aria-selected="true"] {
  color: var(--vsc-primary);
  border-bottom-color: var(--vsc-primary);
}

/* El panel pinta el segmento activo con fondo oscuro y texto claro. Aca se
   cambia el PAR completo, no solo el texto: tocar uno solo dejaba texto azul
   sobre fondo navy, ilegible (se vio en "Mas contactos" y en "Dia"). */
#dash-root .pc-seg-b[aria-pressed="true"] {
  background: var(--vsc-primary);
  color: #fff;
}

#dash-root a { color: var(--vsc-primary); }

/* El desplegable flota sobre las tarjetas: con z-index bajo se le encimaba el
   encabezado pegajoso de las tablas, que ya trae el suyo. */
/* El desplegable ya no flota (se abre dentro de la barra de filtro), asi que
   no necesita apilarse por encima de nada. */

@media (max-width: 40rem) {
  .app-barra { min-height: 54px; padding: 8px 16px; }
  .app-estado { margin-left: 0; width: 100%; }
}