/* ==========================================================================
   Tablero de control · paleta azules y blancos
   ========================================================================== */

:root {
  --azul-950: #061729;
  --azul-900: #0b2545;
  --azul-800: #103459;
  --azul-700: #14477d;
  --azul-600: #1c5c9c;
  --azul-500: #2a6fb0;
  --azul-400: #4a8dc9;
  --azul-300: #7fb2dd;
  --azul-200: #b3d2ee;
  --azul-100: #dce9f7;
  --azul-50:  #eef5fc;

  --blanco: #ffffff;
  --tinta: #0b2545;
  --tinta-suave: #4a6b8c;
  --linea: #d9e6f4;

  --ok: #dce9f7;
  --sombra: 0 1px 2px rgba(11, 37, 69, .06), 0 8px 24px rgba(11, 37, 69, .07);
  --radio: 14px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: linear-gradient(180deg, var(--azul-50) 0%, #f7fbff 100%);
  color: var(--tinta);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2 { margin: 0; font-weight: 650; letter-spacing: -.01em; }
a { color: var(--azul-600); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------------------------------- topbar ------------------------------- */
.topbar {
  background: linear-gradient(120deg, var(--azul-900) 0%, var(--azul-700) 55%, var(--azul-600) 100%);
  color: var(--blanco);
  padding: 20px 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--sombra);
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand-mark { width: 40px; height: 40px; flex: none; border-radius: 10px; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.topbar h1 { font-size: 19px; }
.sub { margin: 3px 0 0; font-size: 12.5px; color: var(--azul-200); }
.sub span { color: var(--blanco); font-weight: 600; }

.status-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.22);
  color: var(--blanco);
  padding: 6px 12px; border-radius: 999px;
  font-size: 12.5px; font-weight: 500; white-space: nowrap;
}
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--azul-300); flex: none; }
.chip.ok   .dot { background: #6ee7a8; box-shadow: 0 0 0 3px rgba(110,231,168,.25); }
.chip.bad  .dot { background: #ff8b8b; box-shadow: 0 0 0 3px rgba(255,139,139,.25); }
.chip.warn .dot { background: #ffd166; box-shadow: 0 0 0 3px rgba(255,209,102,.25); }

/* ---------------------------------- layout ------------------------------- */
main { max-width: 1500px; margin: 0 auto; padding: 22px 24px 60px; }
.cols { display: grid; grid-template-columns: 1.35fr 1fr; gap: 18px; margin-bottom: 18px; }
@media (max-width: 1080px) { .cols { grid-template-columns: 1fr; } }

.panel {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 18px 20px 20px;
  margin-bottom: 18px;
}
.panel-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 14px;
}
.panel-head h2 { display: flex; align-items: center; gap: 9px; font-size: 15.5px; color: var(--azul-900); }
.ico { width: 19px; height: 19px; color: var(--azul-500); flex: none; }
.hint { font-size: 12px; color: var(--tinta-suave); }

/* ---------------------------------- KPIs --------------------------------- */
.kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px; margin-bottom: 18px;
}
.kpi {
  background: var(--blanco); border: 1px solid var(--linea);
  border-left: 4px solid var(--azul-500);
  border-radius: var(--radio); padding: 14px 16px; box-shadow: var(--sombra);
  position: relative; overflow: hidden;
}
.kpi::after {
  content: ''; position: absolute; right: -26px; top: -26px; width: 74px; height: 74px;
  background: radial-gradient(circle, var(--azul-50) 0%, transparent 70%); border-radius: 50%;
}
.kpi .k-top { display: flex; align-items: center; gap: 8px; color: var(--tinta-suave); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.kpi .k-top svg { width: 16px; height: 16px; color: var(--azul-500); }
.kpi .k-val { font-size: 27px; font-weight: 700; color: var(--azul-900); margin-top: 8px; letter-spacing: -.02em; }
.kpi .k-sub { font-size: 12px; color: var(--tinta-suave); margin-top: 2px; }
.kpi.alerta { border-left-color: var(--azul-900); }
.kpi.alerta .k-val { color: var(--azul-800); }

/* ------------------------------- flow map -------------------------------- */
.flowmap {
  display: flex; align-items: stretch; gap: 0; flex-wrap: wrap;
  background: linear-gradient(180deg, var(--azul-50), var(--blanco));
  border: 1px dashed var(--azul-200); border-radius: 12px; padding: 16px 10px;
}
.flow-node {
  flex: 1 1 150px; min-width: 138px;
  background: var(--blanco); border: 1.5px solid var(--azul-200);
  border-radius: 12px; padding: 13px 12px; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
}
.flow-node:hover { transform: translateY(-3px); box-shadow: var(--sombra); border-color: var(--azul-400); }
.flow-node.active { border-color: var(--azul-700); box-shadow: 0 0 0 3px var(--azul-100); }
.flow-node.empty { opacity: .55; }
.flow-node .fn-ico {
  width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  background: var(--azul-100); color: var(--azul-700);
}
.flow-node .fn-ico svg { width: 19px; height: 19px; }
.flow-node .fn-name { font-size: 12.5px; font-weight: 650; color: var(--azul-900); }
.flow-node .fn-count { font-size: 24px; font-weight: 700; color: var(--azul-800); line-height: 1; }
.flow-node .fn-money { font-size: 11.5px; color: var(--tinta-suave); }
.flow-arrow {
  flex: 0 0 62px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3px; color: var(--azul-500); padding: 0 4px;
}
.flow-arrow .conv { font-size: 11.5px; font-weight: 700; color: var(--azul-600); }
.flow-arrow .bar { width: 100%; height: 5px; border-radius: 3px; background: var(--azul-100); overflow: hidden; }
.flow-arrow .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--azul-400), var(--azul-700)); }
.flow-arrow svg { width: 20px; height: 20px; }

.flowlegend {
  display: flex; gap: 18px; flex-wrap: wrap; align-items: center;
  margin-top: 12px; font-size: 12px; color: var(--tinta-suave);
}
.flowlegend .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.dot-ok { background: var(--azul-500); }
.dot-empty { background: var(--azul-100); border: 1px solid var(--azul-200); }
#tiempos { margin-left: auto; font-weight: 600; color: var(--azul-700); }

/* --------------------------------- charts -------------------------------- */
.chart-box { width: 100%; }
.legend-series { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; color: var(--tinta-suave); }
.legend-series i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

/* -------------------------------- agent ---------------------------------- */
.agent-panel { display: grid; gap: 10px; }
.agent-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 8px 0; border-bottom: 1px dashed var(--linea); }
.agent-row:last-child { border-bottom: 0; }
.agent-row b { color: var(--azul-900); font-weight: 650; }
.agent-row span { color: var(--tinta-suave); text-align: right; }
.wa-qr { margin-top: 14px; text-align: center; }
.wa-qr img { width: 210px; height: 210px; border: 1px solid var(--linea); border-radius: 12px; padding: 8px; background: var(--blanco); }
.wa-qr p { font-size: 12px; color: var(--tinta-suave); margin: 8px 0 0; }

/* ------------------------------ inventory map ---------------------------- */
.inv-toolbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.inv-toolbar button {
  border: 1px solid var(--azul-200); background: var(--blanco); color: var(--azul-800);
  border-radius: 999px; padding: 5px 13px; font-size: 12.5px; cursor: pointer; font-weight: 550;
}
.inv-toolbar button:hover { background: var(--azul-50); }
.inv-toolbar button.on { background: var(--azul-700); border-color: var(--azul-700); color: var(--blanco); }

.inv-map-wrap { overflow-x: auto; }
.inv-map { min-width: 560px; }
.inv-cell {
  display: inline-grid; place-items: center; gap: 2px;
  width: 96px; height: 74px; margin: 3px; border-radius: 10px;
  border: 1px solid var(--azul-100); cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
  position: relative;
}
.inv-cell:hover { transform: scale(1.05); box-shadow: var(--sombra); z-index: 2; }
.inv-cell svg { width: 20px; height: 20px; }
.inv-cell .code { font-size: 10.5px; font-weight: 700; letter-spacing: .02em; }
.inv-cell .qty { font-size: 11px; font-weight: 650; }
.inv-row { display: flex; align-items: center; gap: 10px; border-bottom: 1px dashed var(--linea); padding: 8px 0; }
.inv-row:last-child { border-bottom: 0; }
.inv-wh { flex: 0 0 172px; font-size: 12.5px; font-weight: 650; color: var(--azul-900); }
.inv-wh small { display: block; font-weight: 450; color: var(--tinta-suave); font-size: 11px; }
.inv-cells { display: flex; flex-wrap: wrap; }
.inv-detail { margin-top: 14px; font-size: 12.5px; color: var(--tinta-suave); }

/* -------------------------------- tables --------------------------------- */
.table-wrap { overflow-x: auto; }
table.grid { width: 100%; border-collapse: collapse; font-size: 12.8px; }
table.grid th {
  text-align: left; color: var(--tinta-suave); font-weight: 650; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .04em;
  padding: 9px 10px; border-bottom: 1.5px solid var(--azul-100); white-space: nowrap;
}
table.grid td { padding: 11px 10px; border-bottom: 1px solid var(--azul-50); vertical-align: middle; }
table.grid tr:hover td { background: var(--azul-50); }
table.grid .num { text-align: right; font-variant-numeric: tabular-nums; }
table.grid .muted { color: var(--tinta-suave); }

.ref-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 26px; border-radius: 7px;
  background: var(--azul-50); border: 1px solid var(--azul-100); color: var(--azul-300);
}
.ref-chip.done { background: var(--azul-700); border-color: var(--azul-700); color: var(--blanco); }
.ref-chip svg { width: 15px; height: 15px; }
.ref-chip span { display: none; }

.badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 650; background: var(--azul-100); color: var(--azul-800);
}
.badge.lead { background: #eaf2fb; color: var(--azul-700); }
.badge.quotation { background: #d5e6f8; color: var(--azul-800); }
.badge.invoice { background: #a9cbec; color: var(--azul-900); }
.badge.dispatch { background: #6ba0d4; color: #fff; }
.badge.closed { background: var(--azul-900); color: #fff; }
.badge.lost { background: #f1f3f6; color: #7b8794; }

/* --------------------------------- feed ---------------------------------- */
.feed { list-style: none; margin: 0; padding: 0; max-height: 340px; overflow-y: auto; }
.feed li { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--linea); font-size: 12.8px; }
.feed li:last-child { border-bottom: 0; }
.feed .f-ico { flex: none; width: 24px; height: 24px; border-radius: 7px; background: var(--azul-100); color: var(--azul-700); display: grid; place-items: center; }
.feed .f-ico svg { width: 14px; height: 14px; }
.feed .f-body { flex: 1; }
.feed .f-msg { color: var(--tinta); }
.feed .f-meta { font-size: 11px; color: var(--tinta-suave); margin-top: 2px; }

/* --------------------------------- chat ---------------------------------- */
.chat { height: 230px; overflow-y: auto; border: 1px solid var(--linea); border-radius: 11px; padding: 12px; background: var(--azul-50); margin-bottom: 10px; }
.chat .msg { max-width: 85%; padding: 8px 12px; border-radius: 11px; margin-bottom: 8px; font-size: 13px; white-space: pre-wrap; }
.chat .msg.user { background: var(--azul-700); color: #fff; margin-left: auto; border-bottom-right-radius: 3px; }
.chat .msg.bot { background: var(--blanco); border: 1px solid var(--linea); border-bottom-left-radius: 3px; }
.chat .msg.sys { background: transparent; color: var(--tinta-suave); font-size: 12px; font-style: italic; }
.chat .tools { font-size: 11px; color: var(--azul-600); margin-top: 5px; }
.chat-form { display: flex; gap: 8px; }
.chat-form input {
  flex: 1; border: 1px solid var(--azul-200); border-radius: 10px; padding: 10px 13px;
  font-size: 13.5px; color: var(--tinta); background: var(--blanco); outline: none;
}
.chat-form input:focus { border-color: var(--azul-500); box-shadow: 0 0 0 3px var(--azul-100); }
.chat-form button {
  background: var(--azul-700); color: #fff; border: 0; border-radius: 10px;
  padding: 10px 20px; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.chat-form button:hover { background: var(--azul-800); }
.chat-form button:disabled { opacity: .6; cursor: wait; }

/* --------------------------------- footer -------------------------------- */
.foot { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: center; font-size: 12px; color: var(--tinta-suave); padding: 26px 0 8px; }
.foot .sep { color: var(--azul-200); }