/* ============================================================
   SYMPHO — view + app component styles
   ============================================================ */

.lbl { display: block; font-size: 12px; color: var(--text-3); margin: 14px 0 6px; font-weight: 500; }

/* ---------------- login ---------------- */
.login { display: grid; grid-template-columns: 1.05fr 0.95fr; height: 100vh; }
.login-aside {
  background: var(--bg-2); border-right: 1px solid var(--line);
  padding: 40px 56px; display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}
.login-aside::after {
  content: ""; position: absolute; right: -160px; top: -120px; width: 460px; height: 460px;
  background: radial-gradient(circle, var(--sympho-dim), transparent 65%); pointer-events: none;
}
.login-brand { display: flex; align-items: center; gap: 13px; }
.login-form-wrap { display: grid; place-items: center; padding: 40px; }
.login-card { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 18px; padding: 30px; box-shadow: var(--shadow-lg); }
.ws-pick { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 6px; }
.login-sso { display: flex; gap: 8px; margin-top: 14px; }

/* ---------------- hub ---------------- */
.hub-hero { display: grid; grid-template-columns: 1fr 280px; gap: 28px; align-items: end; }
.hub-hero-card { background: var(--surface); border: 1px solid var(--line-2); border-radius: 16px; padding: 20px; }

.app-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
@media (max-width: 1000px) { .app-cards { grid-template-columns: repeat(2, 1fr); } }
.app-card {
  text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 20px; cursor: pointer; transition: border-color 0.18s, transform 0.18s, background 0.18s;
  position: relative; overflow: hidden; display: flex; flex-direction: column;
}
.app-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--c); opacity: 0; transition: opacity 0.18s;
}
.app-card:hover:not([data-soon="true"]) { border-color: color-mix(in oklch, var(--c) 45%, var(--line-2)); transform: translateY(-2px); }
.app-card:hover:not([data-soon="true"])::before { opacity: 1; }
.app-card:hover .app-card-go { color: var(--c); transform: translate(2px, -2px); }
.app-card-go { transition: color 0.18s, transform 0.18s; }
.app-card[data-soon="true"] { cursor: default; opacity: 0.72; }
.app-card-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 16px; }

.hub-cols { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--gap); margin-top: 36px; }
@media (max-width: 1000px) { .hub-cols, .hub-hero { grid-template-columns: 1fr; } }

.card-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--line); }

.feed-row, .grp-row {
  display: flex; align-items: center; gap: 12px; padding: 13px 18px; cursor: pointer;
  transition: background 0.12s; border-bottom: 1px solid var(--line);
}
.grp-row { border-radius: 10px; border-bottom: none; padding: 11px 12px; }
.feed-row:last-child { border-bottom: none; }
.feed-row:hover, .grp-row:hover { background: var(--surface-2); }
.feed-ic {
  width: 32px; height: 32px; border-radius: 9px; flex: none; display: grid; place-items: center;
  background: color-mix(in oklch, var(--c) 16%, transparent); color: var(--c);
  border: 1px solid color-mix(in oklch, var(--c) 28%, transparent);
}

/* ---------------- modules ---------------- */
.mod-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px;
  display: flex; flex-direction: column; gap: 14px; transition: border-color 0.16s;
}
.mod-card[data-on="true"] { border-color: color-mix(in oklch, var(--c) 40%, var(--line)); background: color-mix(in oklch, var(--c) 5%, var(--surface)); }
.mod-foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }

.sw {
  width: 40px; height: 23px; border-radius: 999px; flex: none; cursor: pointer; position: relative;
  background: var(--surface-3); border: 1px solid var(--line-2); transition: background 0.18s, border-color 0.18s;
}
.sw span { position: absolute; left: 2px; top: 1.5px; width: 18px; height: 18px; border-radius: 50%; background: var(--text-3); transition: transform 0.18s var(--ease), background 0.18s; }
.sw.on { background: var(--c); border-color: transparent; }
.sw.on span { transform: translateX(17px); background: oklch(0.16 0.02 264); }
.sw:disabled { opacity: 0.5; cursor: default; }

/* ---------------- segmented control ---------------- */
.seg { display: inline-flex; gap: 3px; padding: 4px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 11px; }
.seg-btn {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px;
  background: transparent; border: none; border-radius: 8px; cursor: pointer;
  color: var(--text-3); font-family: var(--ui); font-size: 13px; font-weight: 500; transition: all 0.14s;
}
.seg-btn:hover { color: var(--text); }
.seg-btn[data-on="true"] { background: var(--surface-2); color: var(--text); box-shadow: var(--shadow); }
.seg-btn[data-on="true"] svg { color: var(--accent); }

/* ---------------- permission matrix ---------------- */
.perm-tbl td, .perm-tbl th { border-color: var(--line); }
.chk {
  width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line-2); color: oklch(0.16 0.02 264); transition: all 0.13s;
}
.chk.on { background: var(--accent); border-color: transparent; }
.chk:disabled { opacity: 0.7; cursor: default; }
.chk:not(.on):hover:not(:disabled) { border-color: var(--accent); }

.app-pip { display: inline-flex; }

/* ---------------- kanban ---------------- */
.kanban { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: start; }
.kan-col { background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 14px 12px; }
.kan-head { display: flex; align-items: center; justify-content: space-between; }
.kan-card { background: var(--surface); border: 1px solid var(--line-2); border-radius: 11px; padding: 13px; cursor: grab; transition: border-color 0.14s, transform 0.14s; }
.kan-card:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.kan-add { width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px; background: transparent; border: 1px dashed var(--line-2); border-radius: 10px; color: var(--text-4); cursor: pointer; font-family: var(--ui); font-size: 12.5px; transition: all 0.14s; }
.kan-add:hover { border-color: var(--accent); color: var(--text-2); }

/* ---------------- route / paradas ---------------- */
.route { display: flex; flex-direction: column; }
.route-stop { display: grid; grid-template-columns: 34px 1fr; column-gap: 14px; position: relative; padding-bottom: 4px; }
.route-node { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-weight: 600; font-size: 13px; z-index: 2; }
.route-line { position: absolute; left: 14px; top: 30px; bottom: -4px; width: 2px; background: var(--line-2); }
.route-body { padding: 3px 0 22px; }
.route-link { background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 11px; font-size: 12px; color: var(--text-2); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.scan-btn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 12px;
  padding: 14px; background: var(--bg-2); border: 1px dashed var(--line-2); border-radius: 11px;
  color: var(--text-2); cursor: pointer; font-family: var(--ui); font-size: 13.5px; transition: all 0.15s;
}
.scan-btn:hover { border-color: var(--manik); color: var(--text); }

.chip[data-on="true"] { font-weight: 600; }

/* ============================================================
   EB · Master Dealer styles
   ============================================================ */
/* role switcher */
.eb-roleswitch { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 3px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; }
.eb-role-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px;
  background: transparent; border: none; border-radius: 7px; cursor: pointer;
  color: var(--text-3); font-family: var(--ui); font-size: 11px; font-weight: 500; transition: all 0.14s;
}
.eb-role-btn:hover { color: var(--text); background: var(--surface-2); }
.eb-role-btn[data-on="true"] { background: var(--eb); color: oklch(0.16 0.02 264); font-weight: 600; }

/* model card */
.eb-model { transition: border-color 0.16s, transform 0.16s; }
.eb-model:hover { border-color: color-mix(in oklch, var(--c) 42%, var(--line-2)); transform: translateY(-2px); }

/* qty stepper */
.qty { display: inline-flex; align-items: center; gap: 2px; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 8px; padding: 2px; }
.qty button { width: 24px; height: 24px; border-radius: 6px; border: none; background: transparent; color: var(--text-2); cursor: pointer; font-size: 15px; line-height: 1; }
.qty button:hover { background: var(--surface-3); color: var(--text); }
.qty span { min-width: 26px; text-align: center; font-size: 13px; color: var(--text); }

/* credit check box */
.eb-credit-check { border: 1px solid var(--line-2); border-radius: 12px; padding: 14px; background: var(--bg-2); }
.eb-credit-check[data-ok="true"] { border-color: color-mix(in oklch, var(--ok) 34%, transparent); background: color-mix(in oklch, var(--ok) 7%, var(--bg-2)); }
.eb-credit-check[data-ok="false"] { border-color: color-mix(in oklch, var(--bad) 36%, transparent); background: color-mix(in oklch, var(--bad) 7%, var(--bg-2)); }

/* import supply flow */
.eb-impflow { display: flex; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.eb-impstep { display: flex; align-items: center; flex: 1; min-width: 0; }
.eb-impdot { width: 20px; height: 20px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--surface-3); color: oklch(0.16 0.02 264); border: 1px solid var(--line-2); }
.eb-impstep[data-on="true"] .eb-impdot { background: var(--eb); border-color: transparent; }
.eb-impdot-live { width: 7px; height: 7px; border-radius: 50%; background: oklch(0.16 0.02 264); }
.eb-implabel { font-size: 11.5px; color: var(--text-3); margin-left: 8px; white-space: nowrap; }
.eb-impstep[data-on="true"] .eb-implabel { color: var(--text); }
.eb-impline { flex: 1; height: 2px; background: var(--line-2); margin: 0 10px; min-width: 18px; }
.eb-impline[data-on="true"] { background: var(--eb); }

/* order stepper (dealer) */
.eb-steps { display: flex; align-items: center; }
.eb-step { display: flex; align-items: center; flex: 1; min-width: 0; }
.eb-step-dot { width: 20px; height: 20px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--surface-3); border: 2px solid var(--line-2); color: oklch(0.16 0.02 264); }
.eb-step[data-on="true"] .eb-step-dot { background: var(--eb); border-color: transparent; }
.eb-step[data-cur="true"] .eb-step-dot { box-shadow: 0 0 0 4px var(--eb-dim); }
.eb-step-label { font-size: 11.5px; color: var(--text-4); margin-left: 8px; white-space: nowrap; }
.eb-step[data-on="true"] .eb-step-label { color: var(--text-2); }
.eb-step-line { flex: 1; height: 2px; background: var(--line-2); margin: 0 9px; min-width: 14px; }
.eb-step-line[data-on="true"] { background: var(--eb); }

/* VIN traceability (hero) */
.eb-vin-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1000px) { .eb-vin-grid { grid-template-columns: 1fr; } }
.eb-vin-step { display: grid; grid-template-columns: 34px 1fr; column-gap: 14px; position: relative; }
.eb-vin-line { position: absolute; left: 38px; top: 34px; bottom: 30px; width: 2px; background: var(--line-2); }
.eb-vin-node {
  width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center; z-index: 2;
  background: var(--surface-3); color: var(--text-4); border: 1px solid var(--line-2);
}
.eb-vin-step[data-done="true"] .eb-vin-node { background: var(--eb); color: oklch(0.16 0.02 264); border-color: transparent; }
.eb-vin-body { padding: 4px 0 22px; }
.eb-vin-step:last-child .eb-vin-body { padding-bottom: 0; }

/* bolet\u00edn (price/stock notices) */
.eb-boletin-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.eb-boletin-row + .eb-boletin-row { border-top: 1px solid var(--line); }

/* price triplet (master / distribuidor / promo) */
.eb-price-row { display: flex; justify-content: space-between; align-items: baseline; padding: 3px 0; font-size: 12px; }
.eb-price-row .k { color: var(--text-3); }
.eb-price-row .v { font-family: var(--mono); }
.eb-price-row[data-tone="master"] .v { color: var(--text); }
.eb-price-row[data-tone="dist"] .v { color: var(--warn); }
.eb-price-row[data-tone="promo"] .v { color: var(--ok); }

/* copilot widget */
.eb-copilot-log { display: flex; flex-direction: column; gap: 8px; max-height: 168px; overflow-y: auto; padding-right: 2px; }
.eb-copilot-msg { font-size: 12.5px; line-height: 1.45; padding: 8px 11px; border-radius: 10px; max-width: 92%; }
.eb-copilot-msg[data-role="bot"] { background: var(--bg-2); border: 1px solid var(--line-2); color: var(--text-2); align-self: flex-start; }
.eb-copilot-msg[data-role="user"] { background: color-mix(in oklch, var(--eb) 16%, var(--bg-2)); color: var(--text); align-self: flex-end; }

/* QR scan simulator */
.eb-scanframe {
  width: 100%; aspect-ratio: 4/3; max-width: 260px; margin: 0 auto; border-radius: 14px;
  border: 2px dashed var(--line-2); display: grid; place-items: center; background: var(--bg-2);
  color: var(--text-4); transition: border-color 0.2s, color 0.2s;
}
.eb-scanframe[data-active="true"] { border-color: var(--eb); border-style: solid; color: var(--eb); box-shadow: 0 0 0 4px var(--eb-dim); }

/* language switcher (Eb only, top bar) */
.eb-lang-switch { display: flex; gap: 2px; background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 2px; }
.eb-lang-switch button { height: 30px; padding: 0 10px; border: none; background: transparent; color: var(--text-3); border-radius: 7px; font-family: var(--mono); font-size: 11.5px; font-weight: 600; cursor: pointer; transition: all 0.14s; }
.eb-lang-switch button:hover { color: var(--text); }
.eb-lang-switch button[data-on="true"] { background: var(--eb); color: oklch(0.16 0.02 264); }

/* mensajer\u00eda interna (IM) */
.eb-chat-shell { display: grid; grid-template-columns: 280px 1fr; height: calc(100vh - 220px); min-height: 460px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.eb-chat-list { border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.eb-chat-search { padding: 12px; border-bottom: 1px solid var(--line); }
.eb-chat-contacts { flex: 1; overflow-y: auto; }
.eb-chat-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--line); transition: background 0.12s; }
.eb-chat-row:hover { background: var(--surface-2); }
.eb-chat-row[data-on="true"] { background: var(--eb-dim); }
.eb-chat-main { display: flex; flex-direction: column; min-height: 0; }
.eb-chat-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.eb-chat-thread { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.eb-chat-bubble { max-width: 62%; padding: 10px 13px; border-radius: 14px; font-size: 13px; line-height: 1.45; }
.eb-chat-bubble[data-me="true"] { align-self: flex-end; background: var(--eb); color: oklch(0.16 0.02 264); border-bottom-right-radius: 4px; }
.eb-chat-bubble[data-me="false"] { align-self: flex-start; background: var(--bg-2); border: 1px solid var(--line-2); color: var(--text-2); border-bottom-left-radius: 4px; }
.eb-chat-time { font-family: var(--mono); font-size: 10px; opacity: 0.7; margin-top: 4px; }
.eb-chat-input { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); }

/* gr\u00e1fica de barras (finanzas) */
.eb-bars { display: flex; align-items: flex-end; gap: 14px; }
.eb-bar-col { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; min-width: 0; height: 100%; justify-content: flex-end; }
.eb-bar-col i { display: block; width: 100%; max-width: 40px; border-radius: 6px 6px 2px 2px; background: var(--eb); transition: height 0.3s var(--ease); }
.eb-bar-col span { font-size: 10.5px; color: var(--text-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* etiqueta QR (visual falso, tipo c\u00f3digo) */
.eb-qr-visual { flex: none; border-radius: 8px; background: white; padding: 6px; display: grid; grid-template-columns: repeat(7,1fr); grid-template-rows: repeat(7,1fr); gap: 2px; }
.eb-qr-visual i { background: oklch(0.16 0.02 264); border-radius: 1px; }
.eb-qr-visual i.off { background: transparent; }

/* bolet\u00edn: bandera de prioridad */
.eb-boletin-flag { display: inline-flex; align-items: center; }

/* mensajer\u00eda como sidebar derecho colapsable (estilo Teams) */
.eb-chat-side {
  position: fixed; right: 0; top: var(--top-h); bottom: 0; width: 320px; z-index: 40;
  background: var(--surface); border-left: 1px solid var(--line); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.22s var(--ease);
}
.eb-chat-side[data-open="true"] { transform: translateX(0); }
.eb-chat-side-head { display: flex; align-items: center; gap: 9px; padding: 12px 12px; border-bottom: 1px solid var(--line); flex: none; }
.eb-chat-side .eb-chat-contacts { flex: 1; }
.eb-chat-side .eb-chat-thread { flex: 1; }
.eb-chat-side .eb-chat-row { padding: 9px 14px; border-bottom: none; cursor: pointer; }
.eb-chat-side .eb-chat-row:hover { background: var(--surface-2); }

/* copiloto: pop-up flotante desde el \u00edcono del top bar */
.eb-copilot-pop { position: absolute; width: 360px; padding: 14px; }
.ic-btn[data-on="true"] { background: var(--surface-3); color: var(--text); }

/* unidades: modal de VIN/NS y trazabilidad de tr\u00e1nsito */
.eb-units-modal-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.eb-units-modal-row:last-child { border-bottom: none; }