:root {
  color-scheme: dark;
  --bg: #0d0f11;
  --surface: #14171a;
  --surface-2: #1a1e22;
  --surface-3: #22272c;
  --border: #2a3036;
  --text: #f4f6f7;
  --muted: #9099a3;
  --accent: #f26b38;
  --accent-2: #ff8a4c;
  --green: #43c584;
  --yellow: #e9ba55;
  --red: #ee6670;
  --blue: #62a8f5;
  --radius: 16px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }
body { min-width: 1100px; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 230px 1fr; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: 230px; background: #101214; border-right: 1px solid #22272b; padding: 24px 18px; display: flex; flex-direction: column; z-index: 5; }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 8px 28px; }
.brand strong { display: block; font-size: 18px; letter-spacing: -.3px; }
.brand small { display: block; color: var(--accent); font-weight: 700; margin-top: 2px; }
.brand-mark { width: 38px; height: 38px; display: grid; place-content: center; gap: 3px; transform: skew(-12deg); }
.brand-mark span { display: block; width: 28px; height: 7px; background: var(--accent); border-radius: 2px; }
.brand-mark span:nth-child(2) { width: 22px; opacity: .78; }
.brand-mark span:nth-child(3) { width: 15px; opacity: .5; }
.main-nav { display: grid; gap: 6px; }
.nav-item { border: 0; background: transparent; color: var(--muted); text-align: left; padding: 12px 14px; border-radius: 10px; cursor: pointer; display: flex; align-items: center; gap: 12px; font-weight: 600; transition: .18s ease; }
.nav-item span { width: 20px; text-align: center; font-size: 18px; }
.nav-item:hover { color: var(--text); background: #171a1d; }
.nav-item.active { color: var(--text); background: #202429; box-shadow: inset 3px 0 var(--accent); }
.sidebar-footer { margin-top: auto; border-top: 1px solid #252a2e; padding: 18px 6px 4px; }
.quick-access { margin: 8px 0 15px; padding: 10px; border: 1px solid #292f34; border-radius: 11px; background: #15191c; }
.quick-access > small { display: block; color: #6f7880; font-size: 8px; font-weight: 900; letter-spacing: .9px; margin-bottom: 8px; }
.quick-access > div { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.quick-access button { min-height: 31px; border: 1px solid #30373c; border-radius: 7px; background: #1b2024; color: #858f97; font-size: 9px; font-weight: 800; cursor: pointer; }
.quick-access button.active { color: #fff; border-color: var(--accent); background: rgba(242,107,56,.13); }
.quick-access select { width: 100%; margin-top: 7px; padding: 7px 8px; font-size: 9px; }
.engine-state { display: flex; align-items: center; gap: 10px; }
.engine-state small { display: block; color: var(--muted); font-size: 11px; }
.engine-state strong { display: block; font-size: 13px; margin-top: 2px; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); box-shadow: 0 0 0 4px #2a2e33; }
.status-dot.ok { background: var(--green); box-shadow: 0 0 0 4px rgba(67,197,132,.12); }
.status-dot.warn { background: var(--yellow); box-shadow: 0 0 0 4px rgba(233,186,85,.12); }
.mode-pill { margin-top: 15px; padding: 8px 10px; border-radius: 8px; font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; text-align: center; }
.mode-pill.simulation { background: rgba(98,168,245,.1); color: var(--blue); border: 1px solid rgba(98,168,245,.2); }
.mode-pill.live { background: rgba(238,102,112,.1); color: var(--red); border: 1px solid rgba(238,102,112,.25); }

.workspace { grid-column: 2; padding: 28px 32px 50px; min-height: 100vh; background: radial-gradient(circle at 90% 0%, rgba(242,107,56,.055), transparent 26%), var(--bg); }
.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; }
.eyebrow { margin: 0 0 5px; color: var(--accent); font-weight: 800; font-size: 10px; letter-spacing: 1.45px; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: 27px; letter-spacing: -.6px; }
h2 { margin-bottom: 0; font-size: 17px; letter-spacing: -.25px; }
.top-actions { display: flex; align-items: center; gap: 10px; }
.clock { color: var(--muted); font-size: 12px; margin-right: 8px; font-variant-numeric: tabular-nums; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid transparent; border-radius: 9px; padding: 10px 15px; cursor: pointer; font-weight: 700; font-size: 13px; line-height: 1.2; text-decoration: none; transition: .16s ease; }
.button:hover:not(:disabled) { transform: translateY(-1px); }
.button:disabled { opacity: .38; cursor: not-allowed; }
.button.primary { background: var(--accent); color: #fff; box-shadow: 0 7px 20px rgba(242,107,56,.16); }
.button.primary:hover:not(:disabled) { background: var(--accent-2); }
.button.secondary { background: #1b1f23; border-color: #30363c; color: #dce0e3; }
.button.ghost { background: transparent; border-color: #353c42; color: #bbc2c9; padding: 8px 11px; }
.button.danger { background: rgba(238,102,112,.12); border-color: rgba(238,102,112,.28); color: var(--red); }
.button.full { width: 100%; }
.hidden { display: none !important; }

.system-banner { display: flex; align-items: center; gap: 14px; background: rgba(98,168,245,.07); border: 1px solid rgba(98,168,245,.14); border-radius: 11px; padding: 10px 14px; margin-bottom: 18px; }
.system-banner span { color: var(--blue); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; padding-right: 14px; border-right: 1px solid rgba(98,168,245,.2); }
.system-banner p { margin: 0; font-size: 12px; color: #aab3bc; }
.system-banner.live { background: rgba(238,102,112,.07); border-color: rgba(238,102,112,.18); }
.system-banner.live span { color: var(--red); border-color: rgba(238,102,112,.22); }

.view { display: none; }
.view.active { display: block; animation: view-in .18s ease; }
@keyframes view-in { from { opacity: 0; transform: translateY(4px); } }
.metric-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 12px; margin-bottom: 14px; }
.metric { background: var(--surface); border: 1px solid var(--border); border-radius: 13px; padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; }
.metric small { display: block; color: var(--muted); font-size: 11px; margin-bottom: 6px; }
.metric strong { font-size: 23px; letter-spacing: -.6px; font-variant-numeric: tabular-nums; }
.metric-icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; background: #21262b; color: var(--accent); }
.metric:nth-child(2) .metric-icon { color: var(--blue); }
.metric:nth-child(3) .metric-icon { color: var(--green); }
.metric:nth-child(4) .metric-icon { color: var(--yellow); }
.metric:nth-child(5) .metric-icon { color: var(--accent-2); }

.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.operation-grid { display: grid; grid-template-columns: minmax(280px,.88fr) minmax(330px,1.05fr) minmax(310px,1fr); gap: 14px; min-height: 570px; }
.panel-header { min-height: 70px; padding: 18px 19px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.count-badge { min-width: 30px; height: 26px; padding: 0 8px; background: #22272b; border-radius: 7px; color: #c5cbd0; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.queue-progress { padding: 11px 14px 12px; border-bottom: 1px solid var(--border); background: #111416; }
.queue-progress > div:first-child { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.queue-progress strong { font-size: 10px; }
.queue-progress span { color: var(--muted); font-size: 9px; }
.queue-progress-track { height: 5px; overflow: hidden; margin-top: 8px; border-radius: 5px; background: #292e33; }
.queue-progress-track i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg,var(--accent),var(--green)); transition: width .25s ease; }
.queue-list { height: 500px; overflow: auto; padding: 8px; }
.queue-row { display: grid; grid-template-columns: minmax(0,1fr) 30px; align-items: center; gap: 3px; }
.queue-item { width: 100%; background: transparent; border: 1px solid transparent; color: inherit; border-radius: 10px; padding: 12px; display: grid; grid-template-columns: 33px 1fr auto; gap: 10px; align-items: center; text-align: left; cursor: pointer; }
.queue-item:hover { background: #191d20; }
.queue-item.selected { background: #1c2024; border-color: #373e44; }
.queue-item.called { background: rgba(52, 199, 128, .07); box-shadow: inset 3px 0 0 rgba(52, 199, 128, .65); }
.queue-item.called .queue-avatar { color: #89e3b5; background: rgba(52, 199, 128, .14); }
.queue-item.called .queue-rank { color: var(--green); font-weight: 900; }
.queue-row.blocked .queue-item { opacity: .62; box-shadow: inset 3px 0 0 rgba(255, 91, 105, .7); }
.queue-block { width: 27px; height: 27px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: #747d85; cursor: pointer; }
.queue-block:hover { color: var(--red); border-color: rgba(255,91,105,.35); background: rgba(255,91,105,.08); }
.queue-avatar { width: 33px; height: 33px; border-radius: 50%; background: linear-gradient(145deg,#30363c,#22272b); display: grid; place-items: center; color: var(--accent); font-weight: 800; }
.queue-copy strong, .queue-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue-copy strong { font-size: 13px; }
.queue-copy small { color: var(--muted); margin-top: 4px; font-size: 11px; }
.queue-rank { color: #666f78; font-size: 11px; }
.empty-state { color: var(--muted); text-align: center; height: 100%; display: grid; place-content: center; justify-items: center; padding: 25px; }
.empty-state span { font-size: 28px; color: #58616a; }
.empty-state p { max-width: 190px; margin: 10px 0 0; line-height: 1.5; font-size: 12px; }

.call-panel { padding: 20px; display: flex; flex-direction: column; background: linear-gradient(180deg,#171a1d,#121416); position: relative; }
.call-panel::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 42%, rgba(242,107,56,.075), transparent 28%); pointer-events: none; }
.call-topline { display: flex; justify-content: space-between; position: relative; }
.call-state { font-size: 11px; color: var(--muted); font-weight: 700; display: flex; align-items: center; gap: 7px; }
.call-state i { display: block; width: 7px; height: 7px; border-radius: 50%; background: #717981; }
.call-state.dialing { color: var(--yellow); }
.call-state.dialing i { background: var(--yellow); animation: blink 1s infinite; }
.call-state.connected { color: var(--green); }
.call-state.connected i { background: var(--green); box-shadow: 0 0 0 5px rgba(67,197,132,.1); }
@keyframes blink { 50% { opacity: .25; } }
.call-timer { font-size: 13px; color: #b9c0c6; font-variant-numeric: tabular-nums; }
.phone-stage { text-align: center; margin-top: 46px; position: relative; }
.phone-stage h2 { font-size: 22px; margin: 8px 0 7px; }
.phone-number { color: #f0f2f3; font-size: 20px; letter-spacing: 1.4px; margin-bottom: 7px; font-variant-numeric: tabular-nums; }
.lead-company { color: var(--muted); font-size: 12px; }
.call-visual { position: relative; height: 135px; display: grid; place-items: center; margin: 7px 0 12px; }
.call-visual div { width: 73px; height: 73px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(145deg,var(--accent-2),#dd4f23); font-size: 27px; position: relative; z-index: 2; box-shadow: 0 15px 40px rgba(242,107,56,.22); }
.call-visual span { position: absolute; border: 1px solid rgba(242,107,56,.15); border-radius: 50%; width: 94px; height: 94px; }
.call-visual span:nth-child(2) { width: 119px; height: 119px; opacity: .65; }
.call-visual span:nth-child(3) { width: 144px; height: 144px; opacity: .35; }
.call-panel.connected .call-visual div { background: linear-gradient(145deg,#55d697,#2cae70); box-shadow: 0 15px 40px rgba(67,197,132,.22); }
.call-panel.connected .call-visual span { border-color: rgba(67,197,132,.19); animation: ripple 1.8s infinite; }
@keyframes ripple { 50% { transform: scale(1.05); opacity: .2; } }

/* Chamando: onda saindo do aparelho + o fone tremendo na cadência do toque. */
.call-panel.dialing .call-visual span {
  border-color: rgba(242,107,56,.42);
  opacity: 0;
  animation: dial-wave 1.9s cubic-bezier(.25,.55,.35,1) infinite;
}
.call-panel.dialing .call-visual span:nth-child(2) { animation-delay: .42s; }
.call-panel.dialing .call-visual span:nth-child(3) { animation-delay: .84s; }
.call-panel.dialing .call-visual div { animation: dial-handset 1.9s ease-in-out infinite; }
.call-panel.dialing .call-visual::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 73px;
  height: 73px;
  margin: -36.5px 0 0 -36.5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .5;
  animation: dial-halo 1.9s ease-out infinite;
}
.call-panel.dialing::before { animation: dial-glow 1.9s ease-in-out infinite; }
.call-panel.dialing .call-timer { color: var(--accent-2); }

@keyframes dial-wave {
  0%   { transform: scale(.88); opacity: 0; }
  22%  { opacity: .95; }
  100% { transform: scale(1.16); opacity: 0; }
}
@keyframes dial-halo {
  0%   { transform: scale(1); opacity: .5; }
  70%  { transform: scale(1.85); opacity: 0; }
  100% { transform: scale(1.85); opacity: 0; }
}
@keyframes dial-glow {
  0%, 100% { opacity: 1; }
  50%      { opacity: .45; }
}
/* Dois toques curtos e uma pausa, como um telefone tocando de verdade. */
@keyframes dial-handset {
  0%, 40%, 100%          { transform: rotate(0deg); }
  4%, 12%, 20%           { transform: rotate(-12deg); }
  8%, 16%, 24%           { transform: rotate(12deg); }
  28%                    { transform: rotate(-6deg); }
  32%                    { transform: rotate(4deg); }
  36%                    { transform: rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .call-state.dialing i,
  .call-panel.connected .call-visual span,
  .call-panel.dialing .call-visual span,
  .call-panel.dialing .call-visual div,
  .call-panel.dialing .call-visual::after,
  .call-panel.dialing::before { animation: none; }
  .call-panel.dialing .call-visual span { opacity: .55; }
  .call-panel.dialing .call-visual::after { opacity: 0; }
}
.call-actions { display: flex; justify-content: center; gap: 8px; position: relative; }
.call-button { min-width: 175px; background: #f2f3f4; color: #151719; padding: 12px 18px; }
.simulator-controls { margin-top: auto; border-top: 1px solid #292e32; padding-top: 15px; text-align: center; position: relative; }
.simulator-controls small { color: #68717a; font-size: 9px; letter-spacing: 1.2px; font-weight: 800; }
.simulator-controls div { display: flex; justify-content: center; gap: 7px; margin-top: 9px; }

.lead-panel { display: flex; flex-direction: column; }
.reveal-status { color: var(--yellow); background: rgba(233,186,85,.1); border: 1px solid rgba(233,186,85,.18); font-size: 10px; font-weight: 800; text-transform: uppercase; padding: 6px 8px; border-radius: 7px; }
.reveal-status.open { color: var(--green); background: rgba(67,197,132,.1); border-color: rgba(67,197,132,.2); }
.lead-dossier { padding: 19px; height: 500px; overflow: auto; }
.lead-dossier.locked { display: grid; place-content: center; }
.locked-message { text-align: center; padding: 25px; }
.locked-message > span { width: 56px; height: 56px; border-radius: 16px; background: #20252a; color: var(--yellow); display: grid; place-items: center; margin: 0 auto 18px; font-size: 22px; }
.locked-message h3 { font-size: 15px; margin-bottom: 9px; }
.locked-message p { color: var(--muted); font-size: 12px; line-height: 1.6; margin: 0; }
.dossier-identity { display: flex; gap: 12px; align-items: center; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.dossier-avatar { width: 44px; height: 44px; border-radius: 12px; background: rgba(242,107,56,.12); color: var(--accent); display: grid; place-items: center; font-size: 18px; font-weight: 800; }
.dossier-identity strong, .dossier-identity small { display: block; }
.dossier-identity small { color: var(--muted); margin-top: 4px; }
.whatsapp-box { display: grid; gap: 12px; margin: 16px 0 4px; padding: 13px; border: 1px solid rgba(37,211,102,.24); border-radius: 11px; background: linear-gradient(145deg,rgba(37,211,102,.11),rgba(37,211,102,.035)); }
.whatsapp-box small, .whatsapp-box strong { display: block; }
.whatsapp-box small { color: #61dc8e; font-size: 9px; font-weight: 800; letter-spacing: .8px; }
.whatsapp-box strong { margin-top: 4px; font-size: 12px; }
.whatsapp-box p { margin: 8px 0 0; color: #aeb8b1; font-size: 10px; line-height: 1.45; }
.whatsapp-action { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 38px; border-radius: 9px; background: #25d366; color: #071b0e; font-size: 11px; font-weight: 900; text-decoration: none; transition: transform .16s, background .16s; }
.whatsapp-action:hover { background: #35e376; transform: translateY(-1px); }
.whatsapp-action:focus-visible { outline: 2px solid #9bf2bb; outline-offset: 2px; }
.whatsapp-action span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgba(7,27,14,.13); font-size: 12px; }
.detail-list { display: grid; gap: 14px; margin: 18px 0; }
.detail { display: grid; grid-template-columns: 25px 1fr; gap: 8px; }
.detail > span { color: #69727b; }
.detail small, .detail strong { display: block; }
.detail small { color: #6f7880; font-size: 10px; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 3px; }
.detail strong { font-size: 12px; line-height: 1.4; word-break: break-word; }
.notes-box { background: #1a1e21; border: 1px solid #282e33; border-radius: 10px; padding: 13px; }
.notes-box small { color: var(--accent); font-size: 9px; font-weight: 800; letter-spacing: 1px; }
.notes-box p { color: #c4c9cd; font-size: 12px; line-height: 1.55; margin: 8px 0 0; white-space: pre-wrap; }
.extra-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.extra-field { padding: 10px; background: #181c1f; border-radius: 8px; }
.extra-field small { display: block; color: #727b83; font-size: 9px; margin-bottom: 4px; }
.extra-field strong { font-size: 11px; word-break: break-word; }
.priority-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 16px 0; }
.priority-field { min-height: 72px; padding: 11px; background: linear-gradient(145deg, rgba(242,107,56,.11), rgba(242,107,56,.035)); border: 1px solid rgba(242,107,56,.22); border-radius: 10px; }
.priority-field small { display: block; color: var(--accent-2); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .65px; margin-bottom: 6px; }
.priority-field strong { display: block; color: #f1f3f4; font-size: 13px; line-height: 1.35; word-break: break-word; }
.priority-caption { color: #747d85; font-size: 9px; font-weight: 800; letter-spacing: 1px; margin-top: 17px; }

.data-panel { min-height: 650px; }
.data-toolbar { padding: 16px; display: flex; gap: 10px; border-bottom: 1px solid var(--border); }
.search-box { flex: 1; display: flex; align-items: center; gap: 9px; background: #101315; border: 1px solid #2c3237; border-radius: 9px; padding: 0 12px; }
.search-box span { color: #79828b; }
.search-box input { flex: 1; border: 0; outline: 0; color: var(--text); background: transparent; padding: 10px 0; }
select, .field input, .field textarea { background: #111416; color: var(--text); border: 1px solid #30363b; border-radius: 9px; padding: 10px 12px; outline: none; }
select:focus, input:focus, textarea:focus { border-color: #59636c; }
.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; }
th { color: #737d86; text-transform: uppercase; letter-spacing: .7px; font-size: 9px; text-align: left; padding: 12px 16px; background: #121518; }
td { padding: 13px 16px; border-top: 1px solid #24292e; color: #ccd1d5; font-size: 12px; }
td strong, td small { display: block; }
td small { color: var(--muted); margin-top: 3px; }
.row-action { border: 1px solid #353b41; background: #1b1f23; padding: 6px 9px; border-radius: 7px; cursor: pointer; font-size: 11px; }
.row-actions { display: flex; gap: 6px; }
.row-action.danger { color: #ff9ba4; background: rgba(255,91,105,.09); }
.row-action.safe { color: #8de0b5; background: rgba(52,199,128,.09); }
.status-label { display: inline-flex; padding: 5px 7px; border-radius: 6px; background: #22272b; color: #aeb5bb; font-size: 10px; font-weight: 700; }
.status-label.connected, .status-label.completed, .status-label.sale, .status-label.interested { color: var(--green); background: rgba(67,197,132,.09); }

.crm-toolbar { min-height: 66px; padding: 12px; display: flex; align-items: center; gap: 14px; margin-bottom: 13px; }
.crm-toolbar .search-box { min-height: 40px; }
.crm-summary { display: flex; gap: 8px; margin-left: auto; }
.crm-summary span { min-width: 90px; padding: 7px 10px; border-radius: 8px; background: #20252a; color: var(--muted); font-size: 9px; text-align: center; }
.crm-summary strong { display: block; color: var(--text); font-size: 14px; margin-bottom: 2px; }
.kanban-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 1fr); align-items: start; gap: 12px; overflow-x: auto; padding: 1px 1px 16px; }
.kanban-column { min-height: 610px; background: #121518; border: 1px solid var(--border); border-radius: 13px; overflow: hidden; }
.kanban-column.drag-over { border-color: rgba(242,107,56,.65); box-shadow: inset 0 0 0 1px rgba(242,107,56,.25); }
.kanban-column-header { min-height: 64px; padding: 14px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); }
.kanban-column-header small { display: block; color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: .8px; margin-bottom: 4px; }
.kanban-column-header strong { font-size: 13px; }
.kanban-column-header span { min-width: 28px; height: 25px; padding: 0 7px; display: grid; place-items: center; border-radius: 7px; background: #22272b; color: #cbd1d5; font-size: 10px; font-weight: 800; }
.kanban-cards { min-height: 544px; max-height: calc(100vh - 260px); overflow-y: auto; padding: 8px; }
.kanban-empty { color: #626c74; padding: 35px 12px; text-align: center; font-size: 10px; line-height: 1.5; }
.kanban-card { padding: 12px; margin-bottom: 8px; border: 1px solid #2b3237; border-radius: 10px; background: #1a1e21; cursor: grab; transition: .16s ease; }
.kanban-card:hover { border-color: #424b52; transform: translateY(-1px); }
.kanban-card.dragging { opacity: .45; }
.kanban-card-top { display: flex; align-items: flex-start; gap: 9px; }
.kanban-card-avatar { flex: 0 0 31px; width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; background: rgba(242,107,56,.12); color: var(--accent); font-size: 11px; font-weight: 900; }
.kanban-card-copy { min-width: 0; flex: 1; }
.kanban-card-copy strong, .kanban-card-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kanban-card-copy strong { font-size: 11px; }
.kanban-card-copy small { color: var(--muted); font-size: 9px; margin-top: 4px; }
.kanban-card-details { display: grid; gap: 5px; margin: 11px 0; color: #89939b; font-size: 9px; }
.kanban-card-footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-top: 9px; border-top: 1px solid #282e32; }
.kanban-card-footer span { color: #78828a; font-size: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kanban-card-footer button { border: 0; padding: 4px 7px; border-radius: 6px; background: #252b30; color: #cbd1d5; cursor: pointer; font-size: 8px; font-weight: 800; }
.status-label.dialing, .status-label.callback { color: var(--yellow); background: rgba(233,186,85,.09); }
.status-label.engine_error, .status-label.bad_number, .status-label.do_not_call { color: var(--red); background: rgba(238,102,112,.09); }
.table-footer { color: var(--muted); padding: 15px 16px; border-top: 1px solid var(--border); font-size: 11px; }
.history-heading { padding: 20px; }
.history-actions { display: flex; align-items: center; gap: 10px; }
.muted { color: var(--muted); font-size: 11px; }

.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.settings-card { padding: 21px; }
.settings-card.wide { grid-column: 1/-1; }
.settings-card > p:not(.eyebrow) { color: var(--muted); font-size: 12px; line-height: 1.6; margin: 12px 0 18px; }
.consultant-field { margin: 0 0 10px; }
.mode-selector { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.mode-selector button { background: #181c1f; border: 1px solid #2d3338; border-radius: 11px; padding: 14px; text-align: left; cursor: pointer; }
.mode-selector button.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: rgba(242,107,56,.055); }
.mode-selector strong, .mode-selector small { display: block; }
.mode-selector small { color: var(--muted); margin-top: 5px; font-size: 10px; }
.check-list { display: grid; gap: 9px; margin: 15px 0; }
.check-item { display: flex; align-items: center; justify-content: space-between; padding: 11px; background: #191d20; border-radius: 8px; font-size: 11px; }
.check-item span:last-child { color: var(--red); font-weight: 700; }
.check-item.ok span:last-child { color: var(--green); }
.settings-note { display: block; color: #737c84; margin-top: 10px; text-align: center; }
.download-center { display: grid; grid-template-columns: minmax(260px,.8fr) minmax(420px,1.2fr); gap: 28px; align-items: center; }
.download-center-copy > p:not(.eyebrow) { color: var(--muted); font-size: 12px; line-height: 1.6; margin: 12px 0 18px; }
.download-center-copy > small { display: block; margin-top: 10px; color: #77818a; font-size: 9px; }
.install-steps { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.install-steps li { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid #2d3439; border-radius: 10px; background: #171b1e; }
.install-steps li > b { flex: 0 0 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; color: var(--accent); background: rgba(242,107,56,.12); }
.install-steps strong, .install-steps small { display: block; }
.install-steps strong { font-size: 10px; }
.install-steps small { margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.background-toggle { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; padding: 12px; border: 1px solid #2d3439; border-radius: 9px; background: #171b1e; cursor: pointer; }
.background-toggle input { margin-top: 2px; accent-color: var(--accent); }
.background-toggle span, .background-toggle strong, .background-toggle small { display: block; }
.background-toggle strong { font-size: 11px; color: #e4e7e9; }
.background-toggle small { margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.background-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 9px; }
.path-list { display: grid; gap: 12px; margin: 17px 0 0; }
.path-list div { background: #181c1f; border-radius: 8px; padding: 11px 13px; }
.path-list dt { color: #727b83; font-size: 9px; text-transform: uppercase; letter-spacing: .7px; margin-bottom: 5px; }
.path-list dd { margin: 0; color: #cbd0d4; font: 11px ui-monospace, SFMono-Regular, Consolas, monospace; word-break: break-all; }

.modal { border: 0; padding: 0; border-radius: 16px; background: transparent; color: var(--text); width: min(600px, calc(100vw - 40px)); }
#importDialog { width: min(980px, calc(100vw - 40px)); }
.modal::backdrop { background: rgba(2,4,6,.76); backdrop-filter: blur(5px); }
.modal-card { background: #15181b; border: 1px solid #30363b; border-radius: 16px; padding: 22px; box-shadow: 0 24px 80px rgba(0,0,0,.45); }
.smart-import-card { max-height: 92vh; overflow: auto; }
.modal-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; }
.icon-button { border: 0; background: #24292e; color: #aeb5bb; width: 30px; height: 30px; border-radius: 8px; font-size: 20px; cursor: pointer; }
.drop-zone { min-height: 185px; border: 1px dashed #414950; border-radius: 12px; background: #111416; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: .18s; }
.drop-zone:hover, .drop-zone.dragover { border-color: var(--accent); background: rgba(242,107,56,.04); }
.drop-zone > span { font-size: 30px; color: var(--accent); }
.drop-zone strong { margin: 10px 0 5px; }
.drop-zone small { color: var(--muted); }
.file-selection { display: flex; align-items: center; gap: 11px; padding: 13px; background: #191d20; border-radius: 9px; }
.file-selection > span { color: var(--accent); font-size: 20px; }
.file-selection div { flex: 1; }
.file-selection strong, .file-selection small { display: block; }
.file-selection small { color: var(--muted); margin-top: 3px; }
.file-selection button { color: var(--red); background: transparent; border: 0; cursor: pointer; font-size: 11px; }
.import-guidance { color: #919aa2; background: rgba(98,168,245,.06); border: 1px solid rgba(98,168,245,.13); border-radius: 9px; padding: 11px; font-size: 11px; line-height: 1.5; margin-top: 13px; }
.import-steps { display: flex; align-items: center; gap: 10px; margin: -3px 0 19px; }
.import-steps span { display: flex; align-items: center; gap: 7px; color: #68727b; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .55px; }
.import-steps span b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #24292e; color: #8e979f; font-size: 10px; }
.import-steps span.active { color: #dce1e4; }
.import-steps span.active b { background: var(--accent); color: #fff; }
.import-steps span.done { color: var(--green); }
.import-steps span.done b { background: rgba(67,197,132,.14); color: var(--green); }
.import-steps i { flex: 1; max-width: 70px; height: 1px; background: #31373c; }
.analysis-summary { display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; margin-bottom: 16px; }
.analysis-stat { background: #191d20; border: 1px solid #292f34; border-radius: 9px; padding: 10px 12px; }
.analysis-stat small, .analysis-stat strong { display: block; }
.analysis-stat small { color: #727b83; font-size: 9px; text-transform: uppercase; letter-spacing: .55px; margin-bottom: 5px; }
.analysis-stat strong { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.analysis-stat.good strong { color: var(--green); }
.analysis-stat.warn strong { color: var(--yellow); }
.analysis-layout { display: grid; grid-template-columns: 1.13fr .87fr; gap: 13px; }
.analysis-layout > section { border: 1px solid #2b3136; border-radius: 11px; background: #121517; overflow: hidden; }
.analysis-heading { min-height: 62px; display: flex; justify-content: space-between; align-items: center; padding: 13px 14px; border-bottom: 1px solid #292f34; }
.analysis-heading h3 { margin: 0; font-size: 14px; }
.analysis-heading > span { color: #959da5; background: #22272b; border-radius: 6px; padding: 5px 7px; font-size: 9px; font-weight: 800; }
.analysis-heading .auto-badge { color: var(--green); background: rgba(67,197,132,.1); }
.detected-columns { max-height: 330px; overflow: auto; padding: 7px; }
.detected-column { display: grid; grid-template-columns: 1fr 110px 58px; gap: 8px; align-items: center; padding: 9px; border-radius: 8px; }
.detected-column:hover { background: #191d20; }
.detected-column strong, .detected-column small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detected-column strong { font-size: 11px; }
.detected-column small { color: #727b83; font-size: 9px; margin-top: 3px; }
.detected-as { color: var(--blue); font-size: 9px; font-weight: 800; text-align: right; }
.confidence { display: block; height: 5px; border-radius: 4px; background: #2a3035; overflow: hidden; }
.confidence i { display: block; height: 100%; background: var(--green); border-radius: inherit; }
.highlight-config > p { color: #858e96; font-size: 10px; line-height: 1.5; margin: 11px 13px; }
.highlight-options { max-height: 190px; overflow: auto; padding: 0 8px 8px; display: grid; gap: 5px; }
.highlight-option { display: flex; align-items: center; gap: 9px; background: #191d20; border: 1px solid #282e33; border-radius: 8px; padding: 8px 9px; cursor: pointer; }
.highlight-option:has(input:checked) { border-color: rgba(242,107,56,.42); background: rgba(242,107,56,.07); }
.highlight-option input { accent-color: var(--accent); }
.highlight-option span { flex: 1; min-width: 0; }
.highlight-option strong, .highlight-option small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.highlight-option strong { font-size: 10px; }
.highlight-option small { color: #747d84; font-size: 8px; margin-top: 3px; }
.highlight-option em { color: var(--accent); font-size: 8px; font-style: normal; font-weight: 800; }
.highlight-preview { border-top: 1px solid #292f34; padding: 11px 13px 13px; }
.highlight-preview > small { color: #6f7880; font-size: 8px; font-weight: 800; letter-spacing: .8px; }
.highlight-preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 8px; }
.highlight-preview-item { background: rgba(242,107,56,.075); border: 1px solid rgba(242,107,56,.14); border-radius: 7px; padding: 7px; }
.highlight-preview-item small, .highlight-preview-item strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.highlight-preview-item small { color: var(--accent); font-size: 7px; text-transform: uppercase; }
.highlight-preview-item strong { font-size: 9px; margin-top: 3px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.outcome-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.outcome-grid button { background: #191d20; border: 1px solid #2d3439; border-radius: 9px; padding: 11px; text-align: left; cursor: pointer; font-size: 12px; }
.outcome-grid button.selected { border-color: var(--accent); background: rgba(242,107,56,.08); color: #fff; }
.field { display: grid; gap: 7px; color: #8f98a0; font-size: 10px; text-transform: uppercase; letter-spacing: .6px; font-weight: 700; margin-top: 13px; }
.field textarea { resize: vertical; text-transform: none; letter-spacing: 0; font-weight: 400; }

.toast-stack { position: fixed; right: 20px; bottom: 20px; display: grid; gap: 9px; z-index: 50; }
.toast { width: 340px; background: #1c2024; border: 1px solid #353c42; border-left: 3px solid var(--green); border-radius: 10px; padding: 13px 15px; box-shadow: 0 12px 35px rgba(0,0,0,.35); animation: toast-in .2s ease; }
.toast.error { border-left-color: var(--red); }
.toast strong { display: block; font-size: 12px; }
.toast p { color: var(--muted); font-size: 11px; line-height: 1.45; margin: 5px 0 0; }
@keyframes toast-in { from { transform: translateX(20px); opacity: 0; } }

.supervisor-hero { min-height: 112px; padding: 22px; display: flex; align-items: center; justify-content: space-between; gap: 20px; background: radial-gradient(circle at 80% 0,rgba(242,107,56,.12),transparent 40%),#15191c; }
.supervisor-hero h2 { font-size: 21px; margin: 3px 0 7px; }
.supervisor-hero p:not(.eyebrow) { color: var(--muted); font-size: 11px; margin: 0; }
.supervisor-filters { display: flex; align-items: flex-end; gap: 8px; }
.supervisor-filters label { display: grid; gap: 5px; color: #7f8991; font-size: 8px; font-weight: 900; text-transform: uppercase; letter-spacing: .7px; }
.supervisor-filters select { min-width: 145px; }
.supervisor-metrics { display: grid; grid-template-columns: repeat(6,1fr); gap: 11px; margin: 13px 0; }
.supervisor-metric { min-height: 100px; padding: 15px; position: relative; overflow: hidden; }
.supervisor-metric::after { content: ''; position: absolute; width: 54px; height: 54px; border-radius: 50%; right: -18px; top: -18px; background: var(--metric-color,rgba(242,107,56,.14)); }
.supervisor-metric small,.supervisor-metric strong,.supervisor-metric span { display: block; }
.supervisor-metric small { color: #78828a; font-size: 9px; }
.supervisor-metric strong { font-size: 24px; margin: 9px 0 4px; }
.supervisor-metric span { color: #69737b; font-size: 8px; }
.supervisor-chart-grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.supervisor-chart { min-height: 280px; }
.supervisor-chart .panel-header { padding: 16px; }
.chart-bars { height: 185px; padding: 18px 14px 12px; display: flex; align-items: flex-end; gap: 8px; }
.chart-bar { min-width: 20px; flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; }
.chart-bar b { color: #aab2b8; font-size: 8px; }
.chart-bar i { width: 100%; min-height: 0; max-width: 34px; border-radius: 5px 5px 2px 2px; background: linear-gradient(#ff8b58,var(--accent)); box-shadow: 0 0 14px rgba(242,107,56,.12); }
.chart-bar small { color: #657079; font-size: 7px; white-space: nowrap; }
.chart-bars.compact { gap: 4px; }
.chart-bars.compact .chart-bar b { display: none; }
.funnel-chart > div:last-child { display: grid; gap: 9px; padding: 10px 16px 16px; }
.funnel-row { display: grid; grid-template-columns: 95px 1fr 28px; align-items: center; gap: 8px; font-size: 8px; color: #869098; }
.funnel-row i { display: block; min-width: 0; height: 7px; border-radius: 5px; background: linear-gradient(90deg,var(--accent),#f4a261); }
.funnel-row b { color: #d4d9dc; text-align: right; }
.supervisor-data-grid { display: grid; grid-template-columns: 1.65fr .85fr; gap: 12px; margin-bottom: 12px; }
.team-panel { min-height: 390px; }
.team-panel .panel-header,.supervisor-lists-panel .panel-header,.supervisor-recent-panel .panel-header { padding: 17px; }
.supervisor-lists-panel { min-height: 390px; }
.list-summary-card { margin: 0 10px 9px; padding: 12px; border: 1px solid #2c3338; border-radius: 10px; background: #191d20; }
.list-summary-card:first-child { margin-top: 10px; }
.list-summary-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.list-summary-head strong,.list-summary-head small { display: block; }
.list-summary-head strong { font-size: 10px; }
.list-summary-head small { color: #717b83; margin-top: 4px; font-size: 8px; }
.list-scope { padding: 4px 6px; border-radius: 5px; color: #6fb8ff; background: rgba(83,158,235,.1); font-size: 7px; font-weight: 900; text-transform: uppercase; }
.list-progress { height: 5px; border-radius: 5px; background: #2a3035; overflow: hidden; margin: 11px 0 7px; }
.list-progress i { display: block; height: 100%; background: var(--green); }
.list-summary-foot { display: flex; justify-content: space-between; color: #768089; font-size: 8px; }
.supervisor-recent-panel { min-height: 300px; }
.button.small { padding: 7px 10px; font-size: 9px; }
.user-role-pill { display: inline-flex; margin-top: 4px; padding: 3px 5px; border-radius: 4px; color: #62a8f5; background: rgba(98,168,245,.1); font-size: 7px; text-transform: uppercase; }
.team-actions { display: flex; gap: 4px; }
.team-actions button { border: 1px solid #30373d; border-radius: 5px; background: #20252a; color: #b8c0c6; padding: 5px 6px; font-size: 8px; cursor: pointer; }
.list-destination { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.list-destination > label:not(.field) { display: flex; align-items: flex-start; gap: 9px; padding: 11px; border: 1px solid #2f363b; border-radius: 9px; background: #171b1e; cursor: pointer; }
.list-destination > label:has(input:checked) { border-color: var(--accent); background: rgba(242,107,56,.06); }
.list-destination input[type=radio] { accent-color: var(--accent); margin-top: 2px; }
.list-destination span,.list-destination strong,.list-destination small { display: block; }
.list-destination strong { font-size: 10px; }
.list-destination small { color: var(--muted); margin-top: 4px; font-size: 8px; line-height: 1.4; }
.list-destination .field { margin-top: 0; }

.login-panel { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card { width: min(620px, 100%); padding: 32px; }
.login-card h1 { font-size: 27px; margin-bottom: 12px; }
.login-card .field { margin: 22px 0; display: grid; gap: 8px; }
.login-error { color: #fa737e; min-height: 22px; }
.login-download { margin-top: 14px; padding: 12px; display: flex; align-items: center; gap: 14px; border: 1px solid #2d3439; border-radius: 11px; background: #171b1e; }
.login-download > div { flex: 1; min-width: 0; }
.login-download strong, .login-download small { display: block; }
.login-download strong { font-size: 11px; }
.login-download small { margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.login-download .button { flex: 0 0 auto; font-size: 10px; white-space: nowrap; }
.login-quick-access { margin-top: 24px; }
.login-divider { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; color: #77818a; font-size: 9px; font-weight: 900; letter-spacing: 1px; }
.login-divider::before, .login-divider::after { content: ''; height: 1px; flex: 1; background: #2a3036; }
.login-profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.login-profile-button { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; min-height: 84px; padding: 13px; text-align: left; border: 1px solid #30373d; border-radius: 12px; background: #191d20; cursor: pointer; transition: .16s ease; }
.login-profile-button:hover:not(:disabled) { transform: translateY(-1px); border-color: var(--accent); background: rgba(242,107,56,.07); }
.login-profile-button:disabled { opacity: .45; cursor: wait; }
.login-profile-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; color: var(--accent); background: rgba(242,107,56,.12); font-size: 16px; }
.login-profile-button strong, .login-profile-button small { display: block; }
.login-profile-button strong { font-size: 12px; }
.login-profile-button small { margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.35; }
.login-profile-button b { grid-column: 2; color: var(--accent); font-size: 9px; }
.login-quick-access > p { margin: 11px 0 0; color: #747e86; text-align: center; font-size: 9px; }
.signed-in { margin: 10px 16px 20px; display: grid; gap: 8px; }
.signed-in small { color: var(--muted); font-size: 9px; }
.monitor-panel { margin: 18px 0 24px; }
.monitor-content { padding: 20px; }
.monitor-ack { display: flex; align-items: start; gap: 10px; line-height: 1.6; margin: 16px 0; color: #bac4cc; }
.monitor-ack input { width: auto; margin-top: 5px; accent-color: #ef7138; }
.monitor-call, .monitor-player { display: flex; align-items: center; gap: 14px; padding: 16px; background: #1b2125; border-radius: 12px; margin: 12px 0; }
.monitor-call > div, .monitor-player > div { flex: 1; }
.monitor-call small, .monitor-player small { display: block; color: var(--muted); margin-top: 6px; }
.monitor-player { flex-wrap: wrap; border: 1px solid #365348; }
.monitor-content summary { cursor: pointer; margin-top: 18px; color: var(--muted); }
.monitor-notice { border: 1px solid #43b481; border-radius: 10px; padding: 14px; margin: 16px 0; color: #8ce0b8; }
.hidden { display: none !important; }

#clientCardDialog { width: min(940px, calc(100vw - 40px)); }
.client-card { padding: 24px; }
.client-card .modal-header small { display: block; color: var(--muted); font-size: 12px; margin-top: 6px; }
.client-header-side { display: flex; align-items: center; gap: 10px; }
.client-status { font-size: 10px; font-weight: 800; letter-spacing: .7px; padding: 5px 10px; border-radius: 999px; text-transform: uppercase; }
.client-status.ok { background: rgba(67,197,132,.12); color: var(--green); border: 1px solid rgba(67,197,132,.25); }
.client-status.warn { background: rgba(233,186,85,.1); color: var(--yellow); border: 1px solid rgba(233,186,85,.25); }
.client-contact { display: flex; align-items: center; gap: 16px; padding: 14px 16px; background: linear-gradient(145deg, rgba(242,107,56,.12), rgba(242,107,56,.03)); border: 1px solid rgba(242,107,56,.22); border-radius: 12px; }
.client-contact > div { flex: 1; }
.client-contact small { display: block; color: var(--accent-2); font-size: 9px; font-weight: 800; letter-spacing: 1px; margin-bottom: 5px; }
.client-contact strong { font-size: 21px; font-variant-numeric: tabular-nums; }
.client-contact .whatsapp-action { width: auto; padding-inline: 16px; }
.client-body { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 16px; }
.client-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.client-field { padding: 11px 12px; background: #191d21; border: 1px solid #282e33; border-radius: 10px; min-width: 0; }
.client-field.wide { grid-column: 1 / -1; }
.client-field small { display: block; color: var(--accent-2); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .65px; margin-bottom: 6px; }
.client-field strong { display: block; font-size: 13px; line-height: 1.4; word-break: break-word; }
.client-field.identity { border-color: rgba(242,107,56,.35); background: rgba(242,107,56,.07); }
.client-data .notes-box { margin-top: 12px; }
.client-location { display: flex; flex-direction: column; gap: 12px; }
.client-address small { display: block; color: var(--accent); font-size: 9px; font-weight: 800; letter-spacing: 1px; }
.client-address p { margin: 7px 0 0; color: #c4c9cd; font-size: 12px; line-height: 1.55; }
.client-distance strong { display: block; font-size: 14px; }
.client-distance small { display: block; color: var(--muted); font-size: 11px; margin-top: 4px; }
.client-location .button.small { align-self: flex-start; padding: 8px 14px; font-size: 11px; text-decoration: none; }
.client-map-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.client-crm-box { display: grid; grid-template-columns: minmax(170px, 1fr) auto; align-items: end; gap: 8px; padding: 12px; border: 1px solid #2d343a; border-radius: 11px; background: #15191d; }
.client-crm-box label { display: grid; gap: 6px; }
.client-crm-box label > small { color: var(--accent); font-size: 9px; font-weight: 900; letter-spacing: .8px; }
.client-crm-box select { width: 100%; min-height: 37px; }
.client-crm-box > small { grid-column: 1 / -1; }

.mini-map { position: relative; overflow: hidden; height: 230px; border-radius: 12px; border: 1px solid #2d343a; background: #10161c; }
.mini-map.loading::after { content: 'carregando mapa…'; position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 11px; }
.mini-map.unavailable { display: grid; place-items: center; padding: 18px; }
.mini-map-fallback { display: grid; justify-items: center; gap: 10px; color: var(--muted); text-align: center; font-size: 11px; line-height: 1.45; }
.mini-map-fallback span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: var(--accent); background: rgba(242,107,56,.11); font-size: 22px; }
.mini-map-tile { position: absolute; z-index: 0; width: 256px; height: 256px; border: 0; }
.mini-map-overlay { position: absolute; z-index: 1; inset: 0; pointer-events: none; }
.mini-map-route { stroke: var(--accent); stroke-width: 3; stroke-dasharray: 7 5; opacity: .95; }
.mini-map-origin { fill: var(--blue); stroke: #fff; stroke-width: 2.5; }
.mini-map-pin { fill: var(--accent); stroke: #fff; stroke-width: 2; }
.mini-map-pin-dot { fill: #fff; }
.mini-map-zoom { position: absolute; z-index: 3; top: 10px; right: 10px; display: grid; gap: 4px; }
.mini-map-zoom button { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid #39434b; border-radius: 8px; color: #fff; background: rgba(16,22,28,.92); font-size: 21px; font-weight: 800; cursor: pointer; }
.mini-map-zoom button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.mini-map-zoom button:disabled { opacity: .38; cursor: default; }
.mini-map-credit { position: absolute; z-index: 3; right: 0; bottom: 0; padding: 2px 6px; font-size: 9px; color: #d4d9dd; background: rgba(10,14,18,.72); border-top-left-radius: 6px; }

.origin-actions { display: flex; gap: 8px; margin-top: 12px; }
.origin-actions .button { flex: 1; }

.robot-hero { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 22px; margin-bottom: 14px; background: linear-gradient(125deg, #171a1d 0%, #16191c 65%, rgba(242,107,56,.12) 100%); }
.robot-hero > div:first-child { max-width: 850px; }
.robot-hero p:not(.eyebrow) { margin: 9px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.robot-hero-actions { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.robot-readiness { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin-bottom: 14px; }
.robot-ready-card { display: flex; align-items: center; gap: 11px; min-height: 78px; padding: 13px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.robot-ready-card > span { display: grid; place-items: center; flex: 0 0 31px; height: 31px; border-radius: 9px; font-weight: 900; }
.robot-ready-card.ok > span { color: var(--green); background: rgba(67,197,132,.12); }
.robot-ready-card.blocked > span { color: var(--yellow); background: rgba(233,186,85,.12); }
.robot-ready-card small,.robot-ready-card strong { display: block; }
.robot-ready-card small { color: var(--muted); font-size: 8px; letter-spacing: .7px; text-transform: uppercase; }
.robot-ready-card strong { margin-top: 5px; font-size: 10px; line-height: 1.35; }
.robot-live-panel { margin-bottom: 14px; border-color: rgba(242,107,56,.28); }
.robot-auto-monitor { display: flex; align-items: center; gap: 7px; color: #b9c0c5; font-size: 10px; }
.robot-auto-monitor input { accent-color: var(--accent); }
.robot-live-body { padding: 18px; }
.robot-live-contact { display: flex; align-items: center; gap: 13px; padding: 14px; border-radius: 12px; background: #111518; }
.robot-live-contact > span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: var(--accent); background: rgba(242,107,56,.1); box-shadow: 0 0 0 7px rgba(242,107,56,.04); }
.robot-live-contact small,.robot-live-contact strong { display: block; }
.robot-live-contact small { color: var(--accent); font-size: 8px; font-weight: 900; letter-spacing: .8px; }
.robot-live-contact strong { margin-top: 4px; font-size: 15px; }
.robot-live-contact p { margin: 6px 0 0; color: var(--muted); font-size: 10px; }
.robot-stage-track { display: grid; grid-template-columns: auto 1fr auto 1fr auto 1fr auto 1fr auto 1fr auto; align-items: center; gap: 7px; margin: 17px 0; }
.robot-stage-track span { padding: 7px 8px; border: 1px solid #30363b; border-radius: 7px; color: #7e8991; background: #181c1f; font-size: 8px; font-weight: 800; text-align: center; white-space: nowrap; }
.robot-stage-track span.active { color: #fff; border-color: var(--accent); background: rgba(242,107,56,.16); box-shadow: 0 0 18px rgba(242,107,56,.15); }
.robot-stage-track i { height: 2px; background: #30363b; }
.robot-live-metrics { display: grid; grid-template-columns: repeat(6,1fr); gap: 8px; }
.robot-live-metrics article { padding: 10px; border-radius: 9px; background: #191d20; }
.robot-live-metrics small,.robot-live-metrics strong { display: block; }
.robot-live-metrics small { color: var(--muted); font-size: 8px; }
.robot-live-metrics strong { margin-top: 5px; font-size: 17px; }
.robot-builder-grid { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(390px,.75fr); gap: 14px; margin-bottom: 14px; }
.robot-flow-panel,.robot-config-panel { min-height: 650px; }
.robot-flow { padding: 18px; }
.robot-flow-card { display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 12px; padding: 15px; border: 1px solid #30363b; border-radius: 12px; background: #171b1e; }
.robot-flow-card > b { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; color: #fff; background: var(--accent); }
.robot-flow-card.decision > b { color: var(--yellow); background: rgba(233,186,85,.12); }
.robot-flow-card.transfer > b { color: var(--green); background: rgba(67,197,132,.13); }
.robot-flow-card small,.robot-flow-card strong { display: block; }
.robot-flow-card small { color: var(--accent); font-size: 8px; font-weight: 900; letter-spacing: .8px; }
.robot-flow-card strong { margin: 5px 0 9px; font-size: 13px; }
.robot-flow-card textarea { width: 100%; resize: vertical; min-height: 85px; padding: 10px; border: 1px solid #30363b; border-radius: 9px; color: #cbd1d5; background: #101315; font-size: 10px; line-height: 1.5; }
.robot-flow-card p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.robot-flow-arrow { height: 24px; color: #69737b; text-align: center; line-height: 24px; }
.robot-audio-picker { display: flex; gap: 7px; margin-top: 9px; }
.robot-audio-picker select { min-width: 0; flex: 1; }
.robot-audio-picker .button { display: grid; place-items: center; }
.robot-config-panel { padding-bottom: 18px; }
.robot-config-panel > .field,.robot-config-panel > .robot-field-row,.robot-config-panel > .robot-secondary-audios,.robot-config-panel > .robot-config-actions { margin-left: 18px; margin-right: 18px; }
.robot-field-row { display: grid; grid-template-columns: 1fr 1fr .7fr; gap: 8px; }
.robot-secondary-audios { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; padding: 13px; border: 1px solid #2d3439; border-radius: 10px; background: #131619; }
.robot-secondary-audios > small { grid-column: 1/-1; color: var(--accent); font-size: 8px; font-weight: 900; letter-spacing: .8px; }
.robot-secondary-audios label { display: grid; gap: 5px; color: var(--muted); font-size: 8px; }
.robot-config-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.robot-library-panel,.robot-history-panel { margin-bottom: 14px; }
.robot-generic-upload { display: flex; gap: 7px; align-items: center; }
.robot-generic-upload input { width: 160px; }
.robot-generic-upload input,.robot-generic-upload select { min-height: 34px; padding: 7px 9px; border: 1px solid #30363b; border-radius: 8px; color: var(--text); background: #111416; font-size: 9px; }
.robot-generic-upload label { display: grid; place-items: center; }
.robot-audio-library { display: grid; grid-template-columns: repeat(auto-fill,minmax(300px,1fr)); gap: 9px; padding: 15px; }
.robot-audio-library article { display: grid; grid-template-columns: minmax(0,1fr) 145px 30px; align-items: center; gap: 9px; padding: 11px; border: 1px solid #2d3439; border-radius: 10px; background: #171b1e; }
.robot-audio-library small,.robot-audio-library strong,.robot-audio-library span { display: block; }
.robot-audio-library small { color: var(--accent); font-size: 7px; text-transform: uppercase; }
.robot-audio-library strong { margin-top: 3px; font-size: 10px; }
.robot-audio-library span { margin-top: 3px; color: var(--muted); font-size: 8px; }
.robot-audio-library audio { width: 145px; height: 30px; }
.robot-activation-card { width: min(720px,calc(100vw - 40px)); }
.robot-activation-card > p { color: var(--muted); font-size: 11px; line-height: 1.6; }

@media (max-width: 1350px) {
  .robot-builder-grid { grid-template-columns: 1fr; }
  .robot-readiness { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
  .client-body { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}

@media (max-width: 1250px) {
  .workspace { padding-inline: 22px; }
  .operation-grid { grid-template-columns: 260px minmax(320px,1fr) 290px; }
  .supervisor-metrics { grid-template-columns: repeat(3,1fr); }
  .supervisor-chart-grid { grid-template-columns: 1fr 1fr; }
  .funnel-chart { grid-column: 1/-1; }
}