/* Paleta oficial del manual de marca Alta (ALTA_MANUAL_15052025.pdf, pag. 17):
   Electric Blue #0E4BF5, Bright White #FFFFFF, Lime Pop #BEF86F,
   Ink Black #000000, Cloud Grey #D8D8D8. Electric Blue + Bright White son los
   colores principales; Ink Black/Cloud Grey son complementos neutros; Lime Pop es
   acento energico (usar con moderacion). Tipografia: DM Sans (pag. 15). */

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/dmsans-variable-latin.woff2") format("woff2");
}

:root,
:root[data-theme="dark"] {
  --bg-root: #06070c;
  --bg-surface: #0e0f16;
  --bg-surface-alt: #14161f;
  --bg-raised: #1b1e2a;
  --border: #2a2e3d;
  --border-light: #3f455a;
  --text-primary: #f2f3f7;
  --text-muted: #9aa0b4;
  --text-dim: #5f6478;
}

:root[data-theme="light"] {
  --bg-root: #f2f3f6;
  --bg-surface: #ffffff;
  --bg-surface-alt: #f3f4f7;
  --bg-raised: #ffffff;
  --border: #d8d8d8;
  --border-light: #bcbcbc;
  --text-primary: #000000;
  --text-muted: #55596a;
  --text-dim: #8a8ea0;
}

:root {
  /* --- Marca --- */
  --brand-blue: #0e4bf5;
  --brand-lime: #bef86f;
  --brand-ink: #000000;
  --brand-cloud: #d8d8d8;
  --brand-white: #ffffff;

  --accent: var(--brand-blue);
  --accent-bright: #5c85ff;
  --accent-dim: #0a3ac2;
  --accent-text-on: #ffffff;

  --lime: var(--brand-lime);
  --lime-text-on: #06140f;

  --danger: #ff6b6b;
  --success: #4ade80;
  --warning: #ffb84d;

  --source-kommo: var(--brand-blue);
  --source-pauta: #7c9eff;
  --source-plantilla: #ffb84d;
  --source-yango: #ff6bcb;
  --source-base: #b18cff;
  --source-pending: #ff8a5b;
  --source-credito: #f0c419;
  --source-activo: var(--brand-lime);

  --funnel-total: #9aa3bd;
  --funnel-gestionados: #7c9eff;
  --funnel-contactados: var(--brand-blue);
  --funnel-interesados: #ffb84d;
  --funnel-radicados: var(--brand-lime);

  --font-family: "DM Sans", "Segoe UI", system-ui, sans-serif;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg-root: #f2f3f6;
    --bg-surface: #ffffff;
    --bg-surface-alt: #f3f4f7;
    --bg-raised: #ffffff;
    --border: #d8d8d8;
    --border-light: #bcbcbc;
    --text-primary: #000000;
    --text-muted: #55596a;
    --text-dim: #8a8ea0;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg-root);
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: 14px;
}

button, input, select {
  font-family: inherit;
  font-size: inherit;
}

/* --- Logo ----------------------------------------------------------------------
   Dos versiones (pag. 12 del manual: "uso sobre fondos"): blanca para el header
   oscuro, azul para el header claro. Por defecto (antes de que theme.js aplique
   data-theme) se muestra la blanca, ya que el tema oscuro es el default. --- */
.brand-logo { height: 22px; width: auto; display: block; }
.logo-for-light { display: none; }
.logo-for-dark { display: block; }
:root[data-theme="light"] .logo-for-light { display: block; }
:root[data-theme="light"] .logo-for-dark { display: none; }

/* --- Botones "Glow" (relieve + brillo al pasar el cursor) ---------------------- */
.btn {
  background: var(--bg-raised);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 14px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.3);
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.btn:hover:not(:disabled) {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.btn:active:not(:disabled) {
  background: var(--accent-dim);
  color: #fff;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.4);
}
.btn:disabled { color: var(--text-dim); cursor: not-allowed; }

.btn-active {
  background: var(--accent);
  color: var(--accent-text-on);
  border-color: var(--accent);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3);
}

.btn-primary {
  background: var(--accent);
  color: var(--accent-text-on);
  border-color: var(--accent);
}
.btn-primary:hover:not(:disabled) {
  background: var(--accent-bright);
  border-color: var(--accent-bright);
}

input[type="text"], input[type="search"], input[type="email"], input[type="password"] {
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 9px;
}
input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(14, 75, 245, 0.25); }

.muted { color: var(--text-muted); font-size: 12px; }
.sub { color: var(--text-dim); font-size: 12px; }

a { color: var(--accent); }
:root[data-theme="dark"] a,
:root:not([data-theme="light"]) a { color: var(--accent-bright); }

/* --- Punto de estado "PulseDot" ------------------------------------------------ */
.pulse-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  transition: background 0.2s;
}
.pulse-dot.flash { animation: pulse-flash 1.1s ease-out; }
.pulse-dot.error { background: var(--danger) !important; }
@keyframes pulse-flash {
  0% { filter: brightness(1.8); }
  100% { filter: brightness(1); }
}

/* --- Tarjeta con relieve tipo "glow card" --------------------------------------- */
.glow-card {
  background: var(--bg-raised);
  border: 2px solid var(--border);
  border-radius: 8px;
  transition: border-color 0.15s;
}
.glow-card:hover { border-color: var(--accent); }