/* Tokens portados do CRM UpBoost (globals.css). Dark premium: fundo quase
   preto, cards separados por BORDA, zero glow, zero gradiente decorativo. */
:root {
  --bg: #FAFAF8;
  --surface: #FFFFFF;
  --surface-soft: #F0EDE6;
  --line: rgba(0, 0, 0, 0.18);
  --line-strong: rgba(0, 0, 0, 0.28);
  --text: #111827;
  --muted: #4B5566;
  --faint: #7A8499;
  --accent: #E6A400;
  --accent-dark: #C48900;
  --accent-texto: #8A6100;   /* gold legivel sobre superficie clara (5,5:1) */
  --st-on: #FFFFFF;          /* texto sobre selo preenchido (fundos escuros aqui) */
  --st-remarcar-cor: #8F4505; /* ambar do tema claro dava 4,3:1 no selo */
  --accent-bright: #FFD300;
  --accent-soft: rgba(230, 164, 0, 0.12);
  --on-accent: #1A0D00;
  --green: #067647;
  --green-soft: rgba(6, 118, 71, 0.12);
  --amber: #B45309;
  --amber-soft: rgba(180, 83, 9, 0.12);
  --red: #B42318;
  --red-soft: rgba(180, 35, 24, 0.12);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.10);
  --radius-card: 12px;
  --radius-control: 6px;
}

body.dark {
  --bg: #030305;
  --surface: #08090C;
  --surface-soft: #131317;
  --line: #1F1F23;
  --line-strong: #2A2A31;
  --text: #F8FAFC;
  --muted: #A1A1AA;
  --faint: #71717A;
  --accent: #E6A400;
  --accent-dark: #C48900;
  --accent-texto: #E6A400;   /* no escuro o gold ja passa (9,2:1) */
  --st-on: #08170E;          /* branco sobre verde vivo da 2,3:1; escuro da 8,1:1 */
  --st-remarcar-cor: #FBBF24;
  --accent-bright: #FFD300;
  --accent-soft: rgba(230, 164, 0, 0.16);
  --on-accent: #1A0D00;
  --green: #34D399;
  --green-soft: rgba(52, 211, 153, 0.14);
  --amber: #F59E0B;
  --amber-soft: rgba(245, 158, 11, 0.14);
  --red: #F87171;
  --red-soft: rgba(248, 113, 113, 0.14);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.45), 0 8px 20px rgba(0, 0, 0, 0.30);
}


/* Paleta de dados do CRM: mesmos hex do funil e do kanban. */
body.dark {
  --c-rose: #FB7185;
  --c-red: #F87171;
  --c-orange: #FB923C;
  --c-amber: #FBBF24;
  --c-lime: #A3E635;
  --c-emerald: #34D399;
  --c-teal: #2DD4BF;
  --c-blue: #60A5FA;
  --c-indigo: #818CF8;
  --c-purple: #C084FC;
  --c-pink: #F472B6;
  --pill-neutral: #A1A1AA;
  --ok: #22C55E;
  --laranja: #F97316;
  --erro-cheio: #B91C1C;
  --on-erro: #FFFFFF;
  --texto-ruido: #8B8B94;
  --alerta: #F59E0B;
  --erro: #EF4444;
  --info: #3B82F6;
  --scroll-thumb: rgba(255, 255, 255, 0.14);
  --scroll-thumb-hover: rgba(255, 255, 255, 0.24);
  --tint: 16%;
}

:root {
  --c-rose: #E11D48;
  --c-red: #DC2626;
  --c-orange: #C2410C;
  --c-amber: #B45309;
  --c-lime: #4D7C0F;
  --c-emerald: #047857;
  --c-teal: #115E59;
  --c-blue: #1D4ED8;
  --c-indigo: #4338CA;
  --c-purple: #7E22CE;
  --c-pink: #BE185D;
  --pill-neutral: #4B5566;
  --ok: #15803D;
  --laranja: #9A3412;
  --erro-cheio: #B91C1C;
  --on-erro: #FFFFFF;
  --texto-ruido: #5F6673;
  --alerta: #92400E;
  --erro: #B91C1C;
  --info: #1D4ED8;
  --scroll-thumb: rgba(0, 0, 0, 0.18);
  --scroll-thumb-hover: rgba(0, 0, 0, 0.30);
  --tint: 12%;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body.dark {
  background: var(--bg);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  font-feature-settings: "cv11";
  font-variant-numeric: tabular-nums;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  min-height: 32px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-control);
  background-color: var(--accent);
  color: var(--on-accent);
  cursor: pointer;
  padding: 6px 13px;
  font-size: 12.5px;
  font-weight: 500;
  font-family: inherit;
  transition: background-color 140ms ease, border-color 140ms ease;
}

button:hover {
  background-color: var(--accent-dark);
  border-color: var(--accent-dark);
}

button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

button:disabled:hover {
  background-color: var(--accent);
  border-color: var(--accent);
}

button.secondary,
#cancelPreview,
#clearFilters {
  background-color: var(--surface);
  color: var(--text);
  border-color: var(--line);
}

#cancelPreview {
  border-color: var(--line-strong);
}

button.secondary:hover,
#cancelPreview:hover,
#clearFilters:hover {
  background-color: var(--surface-soft);
  border-color: var(--line-strong);
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--bg);
  color: var(--text);
  padding: 7px 10px;
  font-size: 12.5px;
  font-family: inherit;
  outline: none;
  min-height: 32px;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

textarea {
  min-height: 104px;
  resize: vertical;
  line-height: 1.5;
}

.shell {
  width: min(1440px, 100%);
  margin: 0 auto;
  padding: 24px;
}

.topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: end;
  margin-bottom: 18px;
}

.top-actions {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
}

h1,
h2 {
  margin: 0;
  letter-spacing: 0;
}

h1 {
  font-size: 18px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.03em;
}

h2 {
  font-size: 13px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.today {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  padding: 6px 12px;
  text-align: right;
  background: var(--surface);
}

.today span {
  display: block;
  color: var(--faint);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 1px;
}

.today strong {
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.entry-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(360px, 0.88fr);
  gap: 16px;
}

.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface);
  padding: 16px;
  min-width: 0;
}

.entry-panel,
.guided-panel,
.preview,
.filters,
.table-panel {
  padding: 18px;
}

.entry-panel {
  align-self: start;
}

.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.hint {
  color: var(--muted);
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.5;
}

.free-phone-alert {
  margin-top: 12px;
  border: 1px solid var(--red);
  border-radius: var(--radius-control);
  background: var(--red-soft);
  color: var(--red);
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.35;
}

.free-phone-alert strong {
  display: block;
  color: var(--red);
  font-size: 16px;
  margin-bottom: 3px;
}

.free-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.guided-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.free-actions button {
  min-width: 180px;
}

.fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

/* O conteúdo digitado não herda o rótulo. */
label input,
label select,
label textarea {
  text-transform: none;
  letter-spacing: normal;
  color: var(--text);
}

[hidden] {
  display: none !important;
}

.full {
  margin-top: 11px;
}

.preview,
.decision-panel {
  margin-top: 16px;
  border-color: var(--accent);
  background: color-mix(in srgb, var(--surface) 94%, var(--accent-soft));
}

.import-panel {
  margin-top: 16px;
  padding: 18px;
}

.import-source {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.import-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.import-stats span {
  min-height: 0;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: none;
  color: var(--faint);
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 0 12px 0 0;
  margin-right: 4px;
  font-size: 11.5px;
  font-weight: 600;
}

.import-stats strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.import-stats span:last-child {
  border-right: 0;
}

.import-report {
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--text);
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  max-height: 160px;
  overflow: auto;
}

.import-report p {
  margin: 0 0 8px;
}

.import-report p:last-child {
  margin-bottom: 0;
}

.import-report ul {
  margin: 0;
  padding-left: 18px;
}

#guidedPreviewSlot .decision-panel {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
}

#guidedPreviewSlot .decision-panel.blocked {
  border-color: var(--red);
  background: color-mix(in srgb, var(--surface) 90%, var(--red-soft));
}

#decisionSummary {
  margin: 0 0 12px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.45;
  font-weight: 700;
}

.duplicate-choice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
}

.existing {
  margin-top: 12px;
  border: 1px solid var(--amber);
  border-radius: var(--radius-control);
  background: var(--amber-soft);
  color: var(--amber);
  padding: 11px 13px;
  font-size: 13px;
  line-height: 1.45;
}

.existing:empty {
  display: none;
}

.existing-title {
  margin: 0 0 10px;
  font-weight: 600;
}

.existing-list {
  display: grid;
  gap: 8px;
}

.existing-link {
  width: 100%;
  min-height: 38px;
  border-color: color-mix(in srgb, var(--amber) 55%, var(--line));
  background: color-mix(in srgb, var(--surface) 88%, var(--amber-soft));
  color: var(--text);
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 11px;
}

.existing-link:hover {
  background: var(--surface);
  border-color: var(--amber);
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 14px 0 10px;
}

.tab {
  min-height: 30px;
  padding: 5px 11px;
  font-size: 12.5px;
  font-weight: 500;
  background: var(--surface);
  color: var(--muted);
  border-color: var(--line);
}

.tab:hover {
  background: var(--surface-soft);
  border-color: var(--line-strong);
}

.tab {
  --q: var(--c-blue);
}

.tab.active {
  background: color-mix(in srgb, var(--q) var(--tint), transparent);
  color: var(--q);
  border-color: color-mix(in srgb, var(--q) 45%, transparent);
  font-weight: 600;
}

.workarea {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr) 320px;
  gap: 16px;
  align-items: start;
}

.filters {
  align-self: start;
  display: grid;
  gap: 14px;
}

.table-wrap {
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  max-width: 100%;
  overflow: hidden;
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 720px;
  table-layout: fixed;
}

th,
td {
  border-bottom: 1px solid var(--line);
  padding: 6px 10px;
  text-align: left;
  vertical-align: middle;
}

th {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 1;
}

td {
  font-size: 13px;
  line-height: 1.3;
  background: var(--surface);
  overflow-wrap: anywhere;
}

tbody tr:hover td {
  background: var(--surface-soft);
}

th:nth-child(1),
td:nth-child(1) {
  width: 18%;
}

th:nth-child(2),
td:nth-child(2) {
  width: 12%;
}

th:nth-child(3),
td:nth-child(3) {
  width: 17%;
}

th:nth-child(4),
td:nth-child(4) {
  width: 13%;
}

th:nth-child(5),
td:nth-child(5) {
  width: 16%;
}

th:nth-child(6),
td:nth-child(6) {
  width: 10%;
}

th:nth-child(7),
td:nth-child(7) {
  width: 14%;
}

tbody tr:last-child td {
  border-bottom: 0;
}

tbody tr {
  cursor: pointer;
}

tr:hover td {
  background: var(--surface-soft);
}

tr.selected td {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

tr.selected td:first-child {
  box-shadow: inset 2px 0 0 var(--accent);
}

.pill {
  --pill: var(--c-blue);
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border: 0;
  border-radius: 5px;
  padding: 3px 8px;
  color: var(--pill);
  background: color-mix(in srgb, var(--pill) var(--tint), transparent);
  font-size: 11.5px;
  font-weight: 500;
  max-width: 100%;
  white-space: nowrap;
  overflow-wrap: normal;
}

/* "Lead importado" se repete ~500 vezes. Estado padrão não é notícia:
   recua para neutro e deixa o destaque para o que pede ação. */
.pill.neutral {
  color: var(--pill-neutral);
  background: color-mix(in srgb, var(--text) 7%, transparent);
}

.pill.contacted { --pill: var(--c-teal); }

.pill.review { --pill: var(--c-orange); }

.pill.client { --pill: var(--c-emerald); }

/* MUITO QUENTE fica acima do QUENTE na escala: rosa do funil do CRM. */
.pill.priority-very-hot {
  --pill: var(--c-pink);
  font-weight: 600;
}

.pill.priority-hot { --pill: var(--c-red); }

.pill.priority-warm { --pill: var(--c-amber); }

.pill.priority-cold { --pill: var(--c-blue); }

.pill.priority-reschedule { --pill: var(--c-orange); }
.pill.schedule-pre { --pill: var(--c-amber); }

.pill.schedule-done { --pill: var(--c-indigo); }

.phone-text {
  font-weight: 500;
}

/* Progressão do funil do CRM: trabalhando -> hoje -> à frente -> fechado. */
.queue-label {
  --q: var(--c-purple);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  color: var(--muted);
}

.queue-label::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--q);
  flex: none;
}

.q-follow        { --q: var(--c-purple); }
.q-agenda-today  { --q: var(--c-blue); }
.q-agenda-future { --q: var(--c-teal); }
.q-clients       { --q: var(--c-emerald); }
.q-duplicates    { --q: var(--c-pink); }
.q-review        { --q: var(--c-orange); }

.detail-panel {
  position: sticky;
  top: 14px;
  padding: 18px;
}

.detail-id,
.save-status {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  margin-top: 5px;
}

.save-status {
  color: var(--accent);
  margin-top: 0;
}

.detail-empty {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
  font-size: 14px;
}

.detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.detail-panel textarea {
  min-height: 116px;
}

#detailForm.saving {
  opacity: 0.74;
}

#detailForm.save-error input,
#detailForm.save-error select,
#detailForm.save-error textarea {
  border-color: var(--red);
}

.empty {
  color: var(--muted);
  padding: 32px 14px;
  font-size: 15px;
}

@media (max-width: 1180px) {
  .workarea {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .detail-panel {
    position: static;
    grid-column: 1 / -1;
  }

  .detail-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 920px) {
  .topbar,
  .top-actions,
  .entry-grid,
  .workarea {
    grid-template-columns: 1fr;
    display: grid;
  }

  .today {
    text-align: left;
  }

  .fields,
  .detail-grid,
  .duplicate-choice,
  .preview-grid {
    grid-template-columns: 1fr;
  }

  .shell {
    padding: 14px;
  }

  .panel-head {
    align-items: stretch;
    flex-direction: column;
  }

  .guided-actions,
  .panel-head button,
  .free-actions button,
  .actions,
  .actions button {
    width: 100%;
  }

  .guided-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  h1 {
    font-size: 18px;
  }

  .table-wrap {
    border: 0;
    overflow: visible;
  }

  table,
  thead,
  tbody,
  tr,
  th,
  td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  thead {
    display: none;
  }

  tbody {
    display: grid;
    gap: 10px;
  }

  tr {
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: var(--surface);
    overflow: hidden;
  }

  td {
    display: grid;
    grid-template-columns: minmax(126px, 42%) minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-height: 44px;
    padding: 10px 12px;
  }

  td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
  }
}


/* ── Portado do CRM ────────────────────────────────────────────── */

.panel {
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

/* Números sempre tabulares — regra do design system do CRM. */
.phone-text,
.today strong,
#tableCount,
.import-stats strong,
td[data-label="Hora BSB"],
td[data-label="Data/último contato"] {
  font-variant-numeric: tabular-nums;
}

/* Rótulo de seção do CRM: 10.5px, caixa alta, tracking largo. */
.eyebrow {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--faint);
  font-weight: 500;
}

/* Foco visível de verdade, com o mesmo anel do CRM. */
:where(input, select, textarea, button, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Peso explícito: bolder herdado estava resolvendo para 900. */
strong { font-weight: 600; }


/* Barra de rolagem discreta, como no CRM. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) transparent;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: 6px;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-thumb-hover);
  background-clip: padding-box;
}


/* Durante a troca de tema, nada anima: senão o valor antigo do token fica
   congelado na propriedade transicionada. */
body.theme-switching,
body.theme-switching *,
body.theme-switching *::before,
body.theme-switching *::after {
  transition: none !important;
}

/* ── Cadência do Follow ─────────────────────────────────────────────
   Sub-abas de IDADE. O select ao lado filtra ORIGEM. Dois eixos que não
   se sobrepõem: quanto tempo sem contato, e de onde o lead veio. */
.cadence {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: -4px 0 10px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface);
}

.cadence-title {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--faint);
}

.cadence-tabs {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
}

.cadence-tab {
  min-height: 26px;
  padding: 3px 10px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cadence-tab:hover {
  background-color: var(--surface-soft);
  border-color: var(--line);
  color: var(--text);
}

.cadence-tab span {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--faint);
}

.cadence-tab.active {
  background-color: color-mix(in srgb, var(--c-purple) var(--tint), transparent);
  border-color: color-mix(in srgb, var(--c-purple) 45%, transparent);
  color: var(--c-purple);
}

.cadence-tab.active span {
  color: var(--c-purple);
  font-weight: 600;
}

.cadence-config {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  grid-auto-flow: column;
}

.cadence-config input {
  width: 92px;
  min-height: 26px;
  padding: 3px 8px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* Idade ao lado da data: sem ela a faixa vira abstração. */
.idade {
  color: var(--faint);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.idade.fria {
  color: var(--c-orange);
}

/* ── Frescor e rótulos de seção (idioma da Visão Geral do CRM) ────── */
.freshness {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.freshness i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-emerald);
  flex: none;
}

.freshness[data-estado="erro"] {
  color: var(--c-orange);
  border-color: color-mix(in srgb, var(--c-orange) 40%, transparent);
}

.freshness[data-estado="erro"] i {
  background: var(--c-orange);
}

.section-label {
  margin: 18px 0 8px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--faint);
  font-weight: 500;
}

.section-label:first-of-type {
  margin-top: 4px;
}

/* ── Barra lateral ─────────────────────────────────────────────────
   As filas saem do topo e viram navegação, como no CRM. A faixa de abas
   comia altura numa tela cujo trabalho é caber linha. */
.app {
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr);
  align-items: start;
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 10px;
  border-right: 1px solid var(--line);
  background: var(--surface);
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 2px 6px 14px;
}

.brand-mark {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: var(--accent);
  flex: none;
}

.brand-name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.nav-label {
  margin: 0 0 4px;
  padding: 0 6px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--faint);
  font-weight: 500;
}

.queue-nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* O botão de fila continua sendo .tab — mesmo JS, outra forma. */
.queue-nav .tab {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  min-height: 30px;
  padding: 5px 8px;
  border-color: transparent;
  background: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.queue-nav .tab::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--q);
  flex: none;
}

.queue-nav .tab:hover {
  background-color: var(--surface-soft);
  border-color: transparent;
  color: var(--text);
}

.queue-nav .tab.active {
  background-color: color-mix(in srgb, var(--q) var(--tint), transparent);
  border-color: transparent;
  color: var(--text);
  font-weight: 600;
}

.sidebar-foot {
  margin-top: auto;
  padding: 10px 8px 2px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
  .app {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .queue-nav {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .queue-nav .tab {
    width: auto;
  }
}

.tab-count {
  margin-left: auto;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--faint);
}

.queue-nav .tab.active .tab-count {
  color: var(--q);
  font-weight: 600;
}

/* ── Um fluxo, dois tempos ──────────────────────────────────────────
   Colar é o produto. Ele deixa de dividir a largura com o painel de
   correção, que só aparece quando existe algo para corrigir. */
.entry-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.entry-panel .panel-head {
  align-items: baseline;
  gap: 10px;
}

.hero-hint {
  font-size: 11.5px;
  color: var(--faint);
}

.entry-panel textarea {
  min-height: 88px;
  font-size: 13.5px;
  line-height: 1.55;
}

.free-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.guided-panel[data-origem="falha"] {
  border-color: color-mix(in srgb, var(--c-orange) 45%, transparent);
}

/* Campos de revisão em grade densa: são conferência, não digitação longa. */
.guided-panel .fields {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 9px;
}

/* ── Agenda ─────────────────────────────────────────────────────────
   Lê por tempo, não por fila. A hora é a âncora à esquerda e a linha do
   dia costura os agendamentos — é assim que se lê uma agenda no papel. */
.agenda-panel {
  padding: 16px 16px 6px;
}

.agenda-summary {
  font-size: 11.5px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.agenda-days {
  display: flex;
  flex-direction: column;
}

.agenda-dia + .agenda-dia {
  margin-top: 2px;
}

.agenda-dia-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 14px 0 6px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 2px;
}

.agenda-dia-nome {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: capitalize;
}

.agenda-dia-head.hoje .agenda-dia-nome {
  color: var(--accent);
}

.agenda-dia-n {
  margin-left: auto;
  font-size: 11px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.agenda-linhas {
  display: flex;
  flex-direction: column;
}

/* A barra colorida à esquerda é a classificação. Fica no fio do tempo:
   o olho desce a coluna de horas e a cor diz onde vale acelerar. */
.agenda-linha {
  --pill: var(--c-blue);
  display: grid;
  grid-template-columns: 58px minmax(0, 1.1fr) minmax(0, 0.9fr) auto auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 34px;
  padding: 5px 10px 5px 0;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.035);
  border-radius: 0;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  position: relative;
}

body:not(.dark) .agenda-linha {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

.agenda-linha::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 2px;
  border-radius: 2px;
  background: var(--pill);
}

.agenda-linha:hover {
  background-color: var(--surface-soft);
}

.agenda-linha.priority-very-hot { --pill: var(--c-pink); }
.agenda-linha.priority-hot { --pill: var(--c-red); }
.agenda-linha.priority-warm { --pill: var(--c-amber); }
.agenda-linha.priority-cold { --pill: var(--c-blue); }
.agenda-linha.priority-reschedule { --pill: var(--c-orange); }

.agenda-hora {
  padding-left: 12px;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.agenda-nome {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agenda-tel,
.agenda-sit {
  font-size: 12px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agenda-prio {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--pill);
  text-align: right;
}

.agenda-vazia {
  padding: 28px 0 24px;
  color: var(--faint);
  font-size: 12.5px;
}

.view-agenda {
  --q: var(--accent);
}

@media (max-width: 900px) {
  .agenda-linha {
    grid-template-columns: 52px minmax(0, 1fr) auto;
  }

  .agenda-tel,
  .agenda-sit {
    display: none;
  }
}

/* ── Espaço devolvido à tabela ──────────────────────────────────────
   Antes: sidebar 208 + filtros 230 + tabela 432 + detalhe 320. A tabela,
   que é o trabalho, ficava com 34% de uma tela de 1280. */
.workarea {
  grid-template-columns: minmax(0, 1fr) 300px;
}

.table-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.table-head #tableCount {
  font-size: 11.5px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.table-tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

.table-tools input {
  width: 210px;
  min-height: 28px;
  padding: 4px 9px;
}

.table-tools button {
  min-height: 28px;
  padding: 4px 10px;
}

.cadence-origem {
  display: flex;
  align-items: center;
  gap: 6px;
  grid-auto-flow: column;
}

.cadence-origem select {
  width: auto;
  min-height: 26px;
  padding: 3px 8px;
  font-size: 12px;
}

.view-dup {
  --q: var(--c-pink);
}

/* Importação é ação rara mostrando zeros: uma linha basta. */
.import-panel {
  padding: 10px 14px;
}

.import-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 0;
}

.import-head button {
  margin-left: auto;
}

.import-source {
  margin: 0;
  font-size: 11.5px;
  color: var(--faint);
}

.import-stats {
  margin: 8px 0 0;
}

@media (max-width: 1100px) {
  .workarea {
    grid-template-columns: minmax(0, 1fr);
  }

  .detail-panel {
    position: static;
  }
}


/* ── Painel de edição ───────────────────────────────────────────────
   Estado vazio convida a agir; não anuncia que está vazio. */
.detail-empty {
  margin: 0;
  display: grid;
  gap: 7px;
}

.detail-empty p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
}

.detail-empty-titulo {
  font-size: 13px !important;
  font-weight: 600;
  color: var(--text) !important;
}

.detail-empty-dica {
  padding-top: 7px;
  border-top: 1px solid var(--line);
  color: var(--faint) !important;
}

.detail-id:empty {
  display: none;
}

.detail-id {
  font-size: 11px;
  font-weight: 400;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

/* 15 campos em 300px precisam de rolagem própria, senão empurram a página. */
.detail-panel {
  max-height: calc(100vh - 28px);
  overflow-y: auto;
}

.detail-grid {
  gap: 9px;
}

/* ══ Equipe: acesso, jogo e setup ═══════════════════════════════════ */

/* Acento escolhido por pessoa. O padrão continua sendo o do tema. */
body[data-acento="gold"]    { --accent: #E6A400; --accent-dark: #C48900; --on-accent: #1A0D00; }
body[data-acento="emerald"] { --accent: #10B981; --accent-dark: #059669; --on-accent: #04231A; }
body[data-acento="purple"]  { --accent: #A855F7; --accent-dark: #9333EA; --on-accent: #1B0733; }
body[data-acento="pink"]    { --accent: #EC4899; --accent-dark: #DB2777; --on-accent: #330A1E; }
body[data-acento="orange"]  { --accent: #F97316; --accent-dark: #EA580C; --on-accent: #2B1103; }

body[data-densidade="confortavel"] td { padding: 10px; }
body[data-densidade="confortavel"] .agenda-linha { min-height: 42px; }

/* ── Acesso ───────────────────────────────────────────────────────── */

/* ── Quem está logado ─────────────────────────────────────────────── */
.eu {
  display: grid;
  gap: 6px;
  padding-bottom: 10px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.eu-topo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.eu-avatar {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
  font-size: 11.5px;
  font-weight: 600;
  flex: none;
}

.eu-nome {
  display: grid;
  min-width: 0;
  line-height: 1.25;
}

.eu-nome strong {
  font-size: 12.5px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.eu-nome em {
  font-style: normal;
  font-size: 10.5px;
  color: var(--faint);
}

.eu-config {
  margin-left: auto;
  min-height: 24px;
  padding: 0 6px;
  background: none;
  border-color: transparent;
  color: var(--faint);
  font-size: 13px;
}

.eu-config:hover { background-color: var(--surface-soft); color: var(--text); }

.xp-barra {
  height: 4px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--text) 10%, transparent);
  overflow: hidden;
}

.xp-barra span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.xp-texto {
  font-size: 10.5px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.sair {
  justify-self: start;
  min-height: 22px;
  padding: 2px 0;
  background: none;
  border: 0;
  color: var(--faint);
  font-size: 11px;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sair:hover { background: none; color: var(--text); }


/* ── Missões ──────────────────────────────────────────────────────── */
.missoes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 16px;
  align-items: start;
}

.missoes-lado { display: grid; gap: 16px; }

.missoes-lista { display: grid; gap: 2px; }

.missao {
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}

.missao:last-child { border-bottom: 0; }

.missao-topo {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 7px;
}

.missao-titulo { font-size: 13px; font-weight: 500; }

.missao-escopo {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--faint);
}

.missao-xp {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.missao-barra {
  height: 6px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--text) 8%, transparent);
  overflow: hidden;
}

.missao-barra span {
  display: block;
  height: 100%;
  background: var(--accent);
  transition: width 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.missao.feita .missao-barra span { background: var(--c-emerald); }
.missao.feita .missao-xp { color: var(--c-emerald); }
.missao.feita .missao-titulo { color: var(--muted); }

.missao-pe {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 6px;
}

.missao-desc { font-size: 11.5px; color: var(--faint); }

.missao-num {
  margin-left: auto;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

/* ── Ranking e autoria ────────────────────────────────────────────── */
.ranking { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }

.rank {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 7px 6px;
  border-radius: var(--radius-control);
  font-size: 12.5px;
}

.rank.sou-eu { background: color-mix(in srgb, var(--accent) 10%, transparent); }

.rank-pos {
  width: 15px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}

.rank-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-nivel { margin-left: auto; font-size: 10.5px; color: var(--faint); }

.rank-xp {
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.atividade { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }

.atividade li {
  display: flex;
  gap: 8px;
  padding: 6px;
  font-size: 12px;
  align-items: baseline;
}

.ev-hora { color: var(--faint); font-variant-numeric: tabular-nums; font-size: 11px; }
.ev-quem { font-weight: 500; }
.ev-acao { margin-left: auto; color: var(--faint); font-size: 11.5px; }

/* ── Conquista ────────────────────────────────────────────────────── */
.conquista {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  display: grid;
  gap: 2px;
  padding: 11px 14px;
  border: 1px solid color-mix(in srgb, var(--c-emerald) 45%, transparent);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  animation: sobe 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.conquista strong { font-size: 12px; color: var(--c-emerald); }
.conquista span { font-size: 12.5px; color: var(--text); }
.conquista.sai { opacity: 0; transition: opacity 500ms ease; }

@keyframes sobe {
  from { transform: translateY(10px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .conquista { animation: none; }
  .xp-barra span, .missao-barra span { transition: none; }
}

/* ── Setup ────────────────────────────────────────────────────────── */
.config {
  width: min(480px, 92vw);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--text);
  padding: 0;
}

.config::backdrop { background: rgba(0, 0, 0, 0.55); }

.config-corpo { padding: 16px; display: grid; gap: 4px; }
.config-fechar { margin-left: auto; }

.config-linha {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.acentos { display: flex; gap: 7px; flex-wrap: wrap; }

.acento {
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 50%;
  background: var(--amostra);
  border: 2px solid transparent;
  outline-offset: 3px;
}

.acento:hover { background: var(--amostra); }
.acento.ativo { border-color: var(--text); }

.config-dica { margin: 0 0 4px; font-size: 11.5px; color: var(--faint); }

.atalhos { display: grid; gap: 6px; }

.atalho {
  display: grid;
  grid-template-columns: 1fr 140px;
  align-items: center;
  gap: 10px;
  text-transform: none;
  letter-spacing: normal;
  font-size: 12.5px;
  color: var(--text);
  font-weight: 400;
}

.atalho input {
  text-align: center;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.config-acoes {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.config-status { font-size: 11.5px; color: var(--c-emerald); }
.config-status[data-estado="erro"] { color: var(--c-orange); }

@media (max-width: 1100px) {
  .missoes { grid-template-columns: minmax(0, 1fr); }
}

/* ── Seletor em pílula ──────────────────────────────────────────────
   Mesmo desenho do seletor de período do CRM: ícone à esquerda, rótulo
   que mostra o valor atual, chevron discreto à direita. O <select> real
   continua no DOM, escondido, guardando o estado. */

.oculto-visual {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.seletor {
  position: relative;
}

.seletor-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 4px 9px 4px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background-color: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
}

.seletor-btn:hover {
  background-color: var(--surface-soft);
  border-color: var(--line-strong);
}

.seletor-btn svg {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--faint);
}

.seletor-btn .chev {
  width: 13px;
  height: 13px;
  margin-left: 2px;
  opacity: 0.5;
  transition: transform 140ms ease;
}

.seletor-btn[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}

.seletor-btn[aria-expanded="true"] .chev {
  transform: rotate(180deg);
}

.seletor-pop {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  min-width: 232px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--popover, var(--surface));
  box-shadow: var(--shadow-card);
  animation: pop-entra 130ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes pop-entra {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .seletor-pop { animation: none; }
  .seletor-btn .chev { transition: none; }
}

.seletor-titulo {
  margin: 0 0 3px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--faint);
  font-weight: 500;
}

.seletor-ajuda {
  margin: 0 0 9px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--muted);
}

.seletor-opcoes {
  display: grid;
  gap: 1px;
  margin-top: 5px;
}

.seletor-opcoes button {
  display: block;
  width: 100%;
  text-align: left;
  min-height: 28px;
  padding: 5px 8px;
  border: 0;
  border-radius: var(--radius-control);
  background: none;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 400;
}

.seletor-opcoes button:hover {
  background-color: var(--surface-soft);
}

.seletor-opcoes button.ativo {
  background-color: color-mix(in srgb, var(--accent) var(--tint), transparent);
  color: var(--accent);
  font-weight: 500;
}

.presets {
  display: grid;
  gap: 4px;
  margin-bottom: 10px;
}

.presets button {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: none;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 400;
  text-align: left;
}

.presets button em {
  margin-left: auto;
  font-style: normal;
  font-size: 11.5px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.presets button:hover {
  background-color: var(--surface-soft);
  border-color: var(--line-strong);
}

.presets button.ativo {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background-color: color-mix(in srgb, var(--accent) var(--tint), transparent);
  color: var(--accent);
  font-weight: 500;
}

.presets button.ativo em { color: var(--accent); }

.seletor-campo {
  display: grid;
  gap: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.seletor-campo input {
  font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════════════════════════════
   BRIEFING VISUAL — repaginação. Nenhuma mudança de comportamento.
   ══════════════════════════════════════════════════════════════════ */

/* ── Marca: Sora só aqui, gold ─────────────────────────────────────── */
.brand-name {
  font-family: Sora, Inter, ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  color: var(--accent);
}

.brand-mark { background: var(--accent); }

/* ── Menu ativo: barra gold à esquerda, não roxo ───────────────────── */
.queue-nav .tab::before { display: none; }

.queue-nav .tab {
  position: relative;
  padding-left: 12px;
  border-radius: var(--radius-control);
}

.queue-nav .tab.active {
  background-color: var(--card-hover, var(--surface-soft));
  color: var(--text);
  box-shadow: inset 2px 0 0 var(--accent);
}

.queue-nav .tab.active .tab-count { color: var(--accent); }

/* Ponto colorido some do menu; a cor da fila continua na tabela. */
.queue-nav .tab .ponto { display: none; }

/* ── Rampa de temperatura ──────────────────────────────────────────── */
/* MUITO QUENTE preenchida; as demais com fundo 12% e borda 25%.
   REAGENDAR em azul: é estado de processo, fora da rampa de calor. */
.pill.temp-4 {
  background: var(--erro-cheio);
  color: var(--on-erro);
  border: 1px solid var(--erro-cheio);
}

.pill.temp-3 { --pill: var(--laranja); }
.pill.temp-2 { --pill: var(--alerta); }
.pill.temp-1 { --pill: var(--text-tertiary, var(--faint)); }
.pill.temp-proc { --pill: var(--info); }
.pill.temp-0 { --pill: var(--faint); }

.pill.temp-3,
.pill.temp-2,
.pill.temp-1,
.pill.temp-proc,
.pill.temp-0 {
  background: color-mix(in srgb, var(--pill) 12%, transparent);
  color: var(--pill);
  border: 1px solid color-mix(in srgb, var(--pill) 25%, transparent);
}

.pill {
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
}

/* ── Tabela: ritmo e prioridade ────────────────────────────────────── */
tbody tr {
  position: relative;
}

/* Faixa de 3px por temperatura — o que permite varrer 300 linhas. */
tbody tr > td:first-child {
  box-shadow: inset 3px 0 0 var(--faixa, transparent);
}

tbody tr.temp-4 { --faixa: var(--erro); }
tbody tr.temp-3 { --faixa: var(--laranja); }
tbody tr.temp-2 { --faixa: var(--alerta); }
tbody tr.temp-1 { --faixa: color-mix(in srgb, var(--text) 22%, transparent); }
tbody tr.temp-proc { --faixa: var(--info); }
tbody tr.temp-0 { --faixa: transparent; }

td {
  padding-top: 9px;
  padding-bottom: 9px;
}

tbody tr {
  cursor: pointer;
  transition: background-color 100ms ease;
}

tbody tr:hover td {
  background-color: var(--card-hover, var(--surface-soft));
}

/* Situação é contexto, não informação: recua. */
td[data-label="Situação"] .pill.neutral {
  background: none;
  border-color: transparent;
  color: var(--texto-ruido);
  font-weight: 400;
  font-size: 10.5px;
  padding-left: 0;
}

.vazio { color: var(--text-muted, var(--faint)); }

td[data-label="Data/último contato"] {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Coluna sem nenhum nome não merece largura. */
table.sem-nome th:nth-child(4),
table.sem-nome td:nth-child(4) { display: none; }

/* ── Cadência: zero recua, ativa em gold ───────────────────────────── */
.cadence-tab.zerada,
.cadence-tab.zerada span { color: var(--text-muted, var(--faint)); }

.cadence-tab.active {
  background-color: color-mix(in srgb, var(--accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent);
}

.cadence-tab.active span { color: var(--accent); }

/* ── Colar e uma linha, e fica uma linha ────────────────────────────
   Crescer no foco fazia o resto da tela pular a cada clique. O gesto e
   colar e dar Enter: uma linha basta, e texto longo rola de lado. */
.entry-panel textarea {
  min-height: 40px;
  height: 40px;
  resize: none;
  white-space: pre;
  overflow-x: auto;
  overflow-y: hidden;
  transition: border-color 110ms ease;
}

.import-panel { padding: 8px 14px; }
.import-panel .import-source { display: none; }

.import-head h2 {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--faint);
}

/* ── Cabeçalho ─────────────────────────────────────────────────────── */
.today {
  border: 0;
  background: none;
  padding: 0;
}

.today span {
  font-size: 10px;
  color: var(--text-muted, var(--faint));
}

.today strong {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
}

.sidebar-total {
  font-size: 12px;
  color: var(--muted);
}

.sidebar-total strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ── Nível e XP: sai do rodapé, ganha bloco ────────────────────────── */
.eu {
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

.eu-avatar {
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
}

.eu-nome strong { font-size: 13px; font-weight: 600; }

.eu-nome em {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
}

.xp-barra {
  height: 6px;
  border-radius: 4px;
}

.xp-barra span { background: var(--accent); }

.xp-texto {
  font-size: 11px;
  color: var(--muted);
}

/* ── Cascata da tabela, só na primeira pintura ─────────────────────── */
tbody.cascata tr {
  animation: sobe-linha 260ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

@keyframes sobe-linha {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Ponto de frescor pulsando ─────────────────────────────────────── */
.freshness[data-estado="ok"] i {
  background: var(--ok);
  animation: pulso-frescor 2.4s ease-in-out infinite;
}

@keyframes pulso-frescor {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* ── Painel direito: resumo do dia quando não há lead ──────────────── */
.resumo-dia {
  display: grid;
  gap: 2px;
  margin-top: 10px;
}

.resumo-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
}

.resumo-item:last-child { border-bottom: 0; }

.resumo-item span { color: var(--muted); }

.resumo-item strong {
  margin-left: auto;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.resumo-item.destaque strong { color: var(--accent); }
.resumo-item.alerta strong { color: var(--alerta); }

.detail-empty-titulo::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 7px;
  border-radius: 2px;
  background: var(--accent);
  vertical-align: middle;
}

@media (prefers-reduced-motion: reduce) {
  tbody.cascata tr { animation: none; }
  .freshness[data-estado="ok"] i { animation: none; }
  .entry-panel textarea { transition: none; }
}

/* ══ Agenda: a forma do dia ═════════════════════════════════════════
   Uma lista ordenada por hora não mostra onde o dia aperta nem onde
   tem buraco. A régua mostra — e é a única coisa nova na tela. */

.agenda-dia { padding-bottom: 6px; }

.agenda-dia.e-hoje .agenda-dia-nome { color: var(--accent); }

/* ── Régua ─────────────────────────────────────────────────────────── */
.regua {
  position: relative;
  height: 22px;
  margin: 2px 0 6px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--text) 4%, transparent);
}

.regua-marca {
  position: absolute;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: color-mix(in srgb, var(--text) 9%, transparent);
}

.regua-bloco {
  position: absolute;
  top: 5px;
  width: 6px;
  height: 12px;
  margin-left: -3px;
  border-radius: 2px;
  background: var(--faixa, var(--muted));
}

.regua-bloco.temp-4 { --faixa: var(--erro); }
.regua-bloco.temp-3 { --faixa: var(--laranja); }
.regua-bloco.temp-2 { --faixa: var(--alerta); }
.regua-bloco.temp-1 { --faixa: color-mix(in srgb, var(--text) 30%, transparent); }
.regua-bloco.temp-proc { --faixa: var(--info); }
.regua-bloco.temp-0 { --faixa: var(--faint); }

/* O que já passou não compete por atenção. */
.regua-bloco.passou { opacity: 0.32; }

.regua-agora {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 2px;
  margin-left: -1px;
  border-radius: 2px;
  background: var(--accent);
}

.regua-agora::before {
  content: "";
  position: absolute;
  top: -3px;
  left: -2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* ── Vão entre atendimentos ────────────────────────────────────────── */
.agenda-vao {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 3px 0 3px 12px;
}

.agenda-vao span {
  font-size: 10.5px;
  color: var(--text-muted, var(--faint));
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.agenda-vao::after {
  content: "";
  flex: 1;
  height: 1px;
  background: repeating-linear-gradient(
    to right,
    color-mix(in srgb, var(--text) 14%, transparent) 0 3px,
    transparent 3px 7px
  );
}

/* ── Linha ─────────────────────────────────────────────────────────── */
.agenda-linha {
  grid-template-columns: 58px minmax(0, 1.1fr) minmax(0, 0.8fr) minmax(0, 0.7fr) auto auto;
  transition: background-color 100ms ease;
}

.agenda-linha.passou { opacity: 0.45; }
.agenda-linha.passou:hover { opacity: 1; }

/* O próximo é a única linha que precisa gritar. */
/* O destaque forte e de quem esta acontecendo. "Proximo" so ganha um
   realce no horario: as 12h, o atendimento das 15h nao pode parecer que
   esta em curso. */
.agenda-linha.acontecendo {
  background-color: color-mix(in srgb, var(--accent) 9%, transparent);
}

.agenda-linha.acontecendo::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 3px;
  width: 3px;
  border-radius: 2px;
  background: var(--accent);
}

.agenda-linha.acontecendo .agenda-hora {
  color: var(--accent);
  font-weight: 700;
}

.agenda-linha.proximo .agenda-hora { font-weight: 700; }

.agenda-tag {
  padding: 1px 7px;
  border-radius: 4px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.agenda-summary { font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .agenda-linha { grid-template-columns: 52px minmax(0, 1fr) auto; }
  .agenda-tel, .agenda-sit { display: none; }
  .regua { height: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .agenda-linha { transition: none; }
}

/* Logo real da marca no lugar do quadradinho. */
.brand-logo {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex: none;
}

.brand {
  gap: 10px;
  padding: 2px 4px 14px;
}

.brand-name {
  font-size: 13px;
  letter-spacing: 0.09em;
}



/* ── Ritmo na tabela ────────────────────────────────────────────────
   Mesmo princípio dos vãos da agenda: quebrar a lista por tempo, para
   ela deixar de ser um paredão de 338 linhas iguais. */
tr.divisor-tempo td {
  padding: 14px 10px 5px;
  border-bottom: 1px solid var(--line);
  background: none;
}

tr.divisor-tempo:first-child td { padding-top: 4px; }

tr.divisor-tempo span {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted, var(--faint));
}

tr.divisor-tempo em {
  margin-left: 8px;
  font-style: normal;
  font-size: 10.5px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

tr.divisor-tempo:hover td { background: none; }
tr.divisor-tempo { cursor: default; }

/* Divisor não é linha de dado: sem faixa de temperatura. */
tr.divisor-tempo td:first-child { box-shadow: none; }

/* Nenhum rotulo de fila quebra nem corta: a coluna se ajusta ao texto. */
.queue-label {
  white-space: nowrap;
}

th:nth-child(2),
td:nth-child(2) {
  width: 132px;
  white-space: nowrap;
}

.queue-nav .tab {
  white-space: nowrap;
}

/* ══ Status em um clique ════════════════════════════════════════════
   Quando dá a hora, dizer "estou atendendo" não pode custar um
   formulário. O botão mostra o estado; um clique troca. */

.agenda-sit { display: flex; }

.st {
  --st: var(--faint);
  min-height: 24px;
  padding: 2px 9px;
  border: 1px solid color-mix(in srgb, var(--st) 28%, transparent);
  border-radius: 6px;
  background-color: color-mix(in srgb, var(--st) 12%, transparent);
  color: var(--st);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color 100ms ease, border-color 100ms ease;
}

.st:hover {
  background-color: color-mix(in srgb, var(--st) 22%, transparent);
  border-color: color-mix(in srgb, var(--st) 50%, transparent);
}

/* Uma cor por estado. Antes Confirmado e Concluido dividiam o verde, e
   quem batia o olho nao distinguia o que ainda vai acontecer do que ja
   acabou. */
.st-neutro     { --st: var(--muted); }      /* Agendado: --faint dava 3,3:1 */
.st-previsto   { --st: var(--c-indigo); }   /* Pre-agendado: ainda balanca */
.st-ok         { --st: var(--c-teal); }     /* Confirmado: combinado de pe */
.st-vivo       { --st: var(--ok); }         /* Em atendimento: acontecendo */
.st-processando{ --st: var(--info); }       /* Em formatacao: maquina rodando */
.st-acao       { --st: var(--laranja); }    /* Ligar agora */
.st-falhou     { --st: var(--erro); }       /* Nao compareceu */
.st-remarcar   { --st: var(--st-remarcar-cor); } /* Reagendar */
.st-feito      { --st: var(--texto-ruido); }/* Concluido: sai de cena */

/* Preenchidos: os tres estados que pedem acao ou dizem "agora". O resto
   fica em contorno, senao tudo grita junto e nada se destaca. */
.st.st-vivo,
.st.st-processando,
.st.st-acao {
  background-color: var(--st);
  color: var(--st-on);
  border-color: var(--st);
  font-weight: 600;
}

.st.st-vivo:hover,
.st.st-processando:hover,
.st.st-acao:hover {
  background-color: color-mix(in srgb, var(--st) 85%, black);
  border-color: color-mix(in srgb, var(--st) 85%, black);
}

.st-pop {
  position: fixed;
  z-index: 70;
  min-width: 176px;
  padding: 5px;
  display: grid;
  gap: 1px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--popover, var(--surface));
  box-shadow: var(--shadow-card);
  animation: pop-entra 120ms cubic-bezier(0.22, 1, 0.36, 1);
}

.st-opcao {
  --st: var(--faint);
  display: block;
  width: 100%;
  text-align: left;
  min-height: 28px;
  padding: 5px 9px;
  border: 0;
  border-radius: var(--radius-control);
  background: none;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 400;
}

.st-opcao::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--st);
  vertical-align: middle;
}

.st-opcao:hover { background-color: var(--surface-soft); }

.st-opcao.ativo {
  background-color: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  font-weight: 500;
}

/* ══ Notificações ═══════════════════════════════════════════════════ */

@keyframes chama {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.notif-acoes { margin-left: auto; display: flex; gap: 6px; }

.notif-lista { display: grid; gap: 1px; margin-top: 8px; }

.notif {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: var(--radius-control);
  border-left: 3px solid transparent;
  background: var(--surface-soft);
}

.notif.novo {
  border-left-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}

.notif.atrasado {
  border-left-color: var(--erro);
  background: color-mix(in srgb, var(--erro) 9%, transparent);
}

.notif-hora {
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.notif-nome {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.notif-quando {
  font-size: 11.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.notif.atrasado .notif-quando { color: var(--erro); font-weight: 500; }

/* O aviso flutuante reusa a caixa da conquista, com cor de atenção. */
.conquista.aviso {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  cursor: pointer;
}

.conquista.aviso strong { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .st-pop { animation: none; }
  .st { transition: none; }
}

@media (max-width: 900px) {
  .notif { grid-template-columns: 54px minmax(0, 1fr) auto; }
  .notif-quando { display: none; }
}

/* ── Agenda com painel ao lado: editar sem sair da tela ─────────── */
.agenda {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 16px;
  align-items: start;
}

.agenda-lado:empty { display: none; }

.agenda-linha.selecionada {
  background-color: var(--card-hover, var(--surface-soft));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}

/* Telefone copiavel: alvo de clique proprio, sem parecer botao pesado. */
.copiar {
  min-height: 0;
  padding: 1px 5px;
  margin-left: -5px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: inherit;
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: left;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.copiar:hover {
  background-color: color-mix(in srgb, var(--text) 8%, transparent);
  color: var(--text);
}

.copiar.copiado {
  background-color: color-mix(in srgb, var(--ok) 18%, transparent);
  color: var(--ok);
}

.copiar.copiado::after { content: " copiado"; font-size: 10.5px; }

@media (max-width: 1100px) {
  .agenda { grid-template-columns: minmax(0, 1fr); }
}

.copiar.falhou {
  background-color: color-mix(in srgb, var(--alerta) 18%, transparent);
  color: var(--alerta);
}

.copiar.falhou::after { content: " selecione e copie"; font-size: 10.5px; }

/* ══ Calendário semanal ═════════════════════════════════════════════
   Dias em colunas, horas em linhas, compromisso posicionado pelo
   horário real. É a forma que responde "como está a semana". */

.cal-topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cal-nav { margin-left: auto; display: flex; gap: 4px; }

.cal-nav button {
  min-height: 26px;
  padding: 3px 10px;
  font-size: 12px;
}

.cal {
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  overflow: auto;
  max-height: 620px;
}

.cal-grade {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  min-width: 720px;
}

/* ── Gutter das horas ─────────────────────────────────────────────── */
.cal-horas {
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--surface);
  border-right: 1px solid var(--line);
}

.cal-canto {
  height: 46px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 4;
}

.cal-hora {
  height: var(--h);
  position: relative;
}

.cal-hora span {
  position: absolute;
  top: -7px;
  right: 8px;
  font-size: 10.5px;
  color: var(--text-muted, var(--faint));
  font-variant-numeric: tabular-nums;
  background: var(--surface);
  padding: 0 2px;
}

.cal-hora:first-child span { top: 2px; }

/* ── Colunas dos dias ─────────────────────────────────────────────── */
.cal-dias {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.cal-dia { border-right: 1px solid var(--line); min-width: 0; }
.cal-dia:last-child { border-right: 0; }

.cal-dia-head {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.cal-dia-semana {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--faint);
}

.cal-dia-num {
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.cal-dia-n {
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: var(--faint);
  padding: 0 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 8%, transparent);
}

/* Hoje se marca na cabeça da coluna, não pintando a coluna inteira. */
.cal-dia.e-hoje .cal-dia-num {
  background: var(--accent);
  color: var(--on-accent);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
}

.cal-dia.e-hoje .cal-dia-semana { color: var(--accent); }

.cal-col { position: relative; }

.cal-celula {
  height: var(--h);
  border-bottom: 1px solid color-mix(in srgb, var(--text) 5%, transparent);
}

/* ── Compromisso ──────────────────────────────────────────────────── */
.cal-bloco {
  --pill: var(--faint);
  position: absolute;
  left: 3px;
  right: 3px;
  height: calc(var(--h) - 4px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  padding: 3px 6px;
  border: 0;
  border-left: 3px solid var(--pill);
  border-radius: 5px;
  background-color: color-mix(in srgb, var(--pill) 16%, var(--surface));
  color: var(--text);
  text-align: left;
  font-family: inherit;
  overflow: hidden;
  transition: background-color 100ms ease;
}

.cal-bloco:hover {
  background-color: color-mix(in srgb, var(--pill) 28%, var(--surface));
}

.cal-bloco.temp-4 { --pill: var(--erro); }
.cal-bloco.temp-3 { --pill: var(--laranja); }
.cal-bloco.temp-2 { --pill: var(--alerta); }
.cal-bloco.temp-1 { --pill: color-mix(in srgb, var(--text) 30%, transparent); }
.cal-bloco.temp-proc { --pill: var(--info); }
.cal-bloco.temp-0 { --pill: var(--faint); }

.cal-bloco.passou { opacity: 0.42; }
.cal-bloco.passou:hover { opacity: 1; }

.cal-bloco.selecionado {
  box-shadow: inset 0 0 0 1px var(--accent);
}

.cal-bloco-hora {
  font-size: 10.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--pill);
}

.cal-bloco-nome {
  font-size: 11.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal-agora {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
  z-index: 2;
  pointer-events: none;
}

.cal-agora::before {
  content: "";
  position: absolute;
  left: -3px;
  top: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

/* ── Bloco de hoje, no topo ───────────────────────────────────────── */
.hoje-bloco { margin-bottom: 12px; }
.hoje-bloco .agenda-linhas { margin-top: 2px; }
.hoje-bloco .regua { margin-top: 6px; }

@media (prefers-reduced-motion: reduce) {
  .cal-bloco { transition: none; }
}

.view-quentes { --q: var(--erro); }

/* Amanha e um preparo, nao um alarme: mesmo desenho de Hoje, um tom abaixo. */
#amanhaBloco .agenda-linha { opacity: 0.9; }
#amanhaBloco .panel-head h2 { color: var(--muted); }

/* ══ Lateral reorganizada ═══════════════════════════════════════════
   Agenda em cima (Hoje / Amanhã / Futuros), listas de lead embaixo.
   Cada item tem cor própria para virar memória de posição. */

.view-hoje       { --q: var(--accent); }
.view-amanha     { --q: var(--c-amber); }
.view-agenda     { --q: var(--c-indigo); }
.view-quentes    { --q: var(--erro); }
.view-quentes-tot{ --q: var(--c-orange); }

/* Espaço entre os grupos sem precisar de rótulo em cada um. */
.sidebar .queue-nav + .queue-nav { margin-top: 1px; }
.sidebar .nav-label:not(:first-of-type) { margin-top: 14px; }

/* ── Sino no cabeçalho ────────────────────────────────────────────── */
.sino {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  min-height: 30px;
  padding: 0;
  background: var(--surface);
  border-color: var(--line);
  color: var(--muted);
}

.sino svg { width: 15px; height: 15px; }
.sino:hover { color: var(--text); border-color: var(--line-strong); }
.sino.active { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }

.sino-n {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--erro);
  color: var(--on-erro);
  font-size: 9.5px;
  font-weight: 700;
  line-height: 15px;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity 120ms ease;
}

.sino.tem-novo .sino-n { opacity: 1; animation: chama 1.8s ease-in-out infinite; }

/* ── Missões junto do XP, que é o que elas movem ──────────────────── */
.eu-missoes { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }
.eu-config + .eu-config, .eu-missoes + .eu-config { margin-left: 0; }
.eu-missoes svg { width: 13px; height: 13px; }
.eu-missoes-n { font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.eu-missoes.active { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .sino.tem-novo .sino-n { animation: none; }
}

/* ══ Quentes de hoje ════════════════════════════════════════════════
   A lista que enche durante o dia e esvazia conforme cada um ganha
   horário. Mesma linha da agenda, com a hora trocada por um traço de
   temperatura — sem hora ainda é justamente o ponto. */

.quentes-bloco { margin-top: 12px; }

.quentes-todos {
  margin-left: 12px;
  min-height: 24px;
  padding: 2px 9px;
  font-size: 11.5px;
}

.quente-linha {
  grid-template-columns: 3px minmax(0, 1.1fr) minmax(0, 0.9fr) auto auto auto;
  padding-left: 0;
}

.quente-marca {
  width: 3px;
  height: 16px;
  border-radius: 2px;
  background: var(--pill);
}

/* Tratado sai do foco sem sumir: dá para conferir o que já andou. */
.quente-linha.tratado { opacity: 0.5; }
.quente-linha.tratado:hover { opacity: 1; }

.quente-idade {
  font-size: 11px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}

@media (max-width: 900px) {
  .quente-linha { grid-template-columns: 3px minmax(0, 1fr) auto auto; }
  .quente-idade { display: none; }
}

/* ── Aviso de quente no sino ──────────────────────────────────────── */
.notif-quente .notif-hora {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--erro);
  font-variant-numeric: normal;
}

/* `hidden` tem que ganhar de qualquer display do componente. */
.seletor[hidden],
.queue-nav[hidden],
[hidden] { display: none !important; }

/* ══ Login ══════════════════════════════════════════════════════════
   Reprodução do login do CRM que está no ar (src/app/login). As medidas
   vêm das classes de lá: max-w-sm = 384, p-6 = 24, space-y-4 = 16,
   space-y-1.5 = 6, h-10 = 40, rounded-xl = 12, rounded-md = 6.

   Uma diferença deliberada: no CRM o --brand-accent do tema escuro é
   azul, e o botão sai azul. Aqui o acento é gold nos dois temas, que é
   a identidade da marca — e é o gold que o painel inteiro usa. */

.login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--bg);
}

.login-wrap {
  width: 100%;
  max-width: 384px;
}

/* ── Marca acima do cartão ────────────────────────────────────────── */
.login-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 28px;
}

.login-brand img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  margin-bottom: 12px;
}

.login-marca {
  font-family: Sora, Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text);
}

.login-sub {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--muted);
}

/* ── Cartão ───────────────────────────────────────────────────────── */
.login-card {
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 24px;
  box-shadow: var(--shadow-card);
}

.login-card form {
  display: grid;
  gap: 16px;
}

.login-campo {
  display: grid;
  gap: 6px;
}

.login-campo-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.login-campo label {
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: var(--muted);
}

.login-campo input {
  width: 100%;
  height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
}

.login-campo input::placeholder { color: var(--faint); }

/* ring-2 ring-brand-accent ring-offset-2: o anel do CRM. */
.login-campo input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
}

.login-esqueci {
  font-size: 12px;
  /* No claro o gold puro da 2,2:1 sobre o cartao. Link de 12px precisa
     de 4,5:1, entao existe um gold proprio para texto. */
  color: var(--accent-texto, var(--accent));
  cursor: pointer;
  transition: color 120ms ease;
}

.login-esqueci:hover { color: var(--accent-dim, var(--accent)); }
.login-esqueci:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.login-erro {
  margin: 0;
  padding: 8px 10px;
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--erro) var(--tint), transparent);
  color: var(--erro);
  font-size: 12.5px;
}

/* ── Botão ────────────────────────────────────────────────────────── */
.login-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 40px;
  border: 0;
  border-radius: var(--radius-control);
  background: var(--accent);
  color: var(--on-accent);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 120ms ease;
}

.login-btn:hover { background: color-mix(in srgb, var(--accent) 90%, transparent); }

.login-btn:disabled {
  pointer-events: none;
  opacity: 0.5;
}

/* O spinner só existe enquanto entra — mesmo Loader2 do CRM. */
.login-spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: login-gira 700ms linear infinite;
}

.login-btn.entrando .login-spinner { display: block; }

@keyframes login-gira { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .login-spinner { animation-duration: 2s; }
}

/* ══ Aquecimento ════════════════════════════════════════════════════
   Uma hora antes do horário, a linha começa a pedir atenção. Pulso lento
   na barra de temperatura e etiqueta com o tempo que resta — o objetivo é
   ser notado de canto de olho, não roubar a tela. */

.agenda-linha.aquecer {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--accent) 10%, transparent),
    transparent 55%
  );
}

.agenda-linha.aquecer .agenda-hora {
  color: var(--accent);
  font-weight: 700;
}

/* A barra da esquerda é o que pulsa: o texto fica parado e legível. */
.agenda-linha.aquecer::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 2px;
  background: var(--accent);
  animation: pulso-aquecer 2.4s ease-in-out infinite;
}

.agenda-linha { position: relative; }

@keyframes pulso-aquecer {
  0%, 100% { opacity: 1; transform: scaleY(1); }
  50%      { opacity: 0.35; transform: scaleY(0.8); }
}

.tag-aquecer {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent-texto, var(--accent));
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  animation: brilho-aquecer 2.4s ease-in-out infinite;
}

@keyframes brilho-aquecer {
  0%, 100% { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
  50%      { border-color: color-mix(in srgb, var(--accent) 90%, transparent); }
}

/* ── No sino ──────────────────────────────────────────────────────── */
.notif-aquecer .notif-hora { color: var(--accent); font-weight: 700; }
.notif-aquecer .notif-quando { color: var(--accent-texto, var(--accent)); font-weight: 600; }

/* ── A caixa que sobe na tela ─────────────────────────────────────── */
.aviso-aquecer {
  border-left: 3px solid var(--accent);
}

.aviso-aquecer strong { color: var(--accent); }

/* Movimento é convite, não exigência: quem pediu menos animação recebe a
   mesma informação parada. */
@media (prefers-reduced-motion: reduce) {
  .agenda-linha.aquecer::before,
  .tag-aquecer { animation: none; }
}

/* ══ Confirmação de registro ════════════════════════════════════════
   Enter grava direto, então a única prova de que entrou é esta caixa.
   Verde e curta quando deu certo; âmbar e mais demorada quando o parser
   marcou alguma ressalva, porque aí vale ler. */

.aviso-registro {
  border-left: 3px solid var(--green, #10B981);
}

.aviso-registro strong { color: var(--green, #10B981); }

.aviso-registro.com-alerta {
  border-left-color: var(--accent);
}

.aviso-registro.com-alerta strong { color: var(--accent); }

/* ══ Fuso horário ═══════════════════════════════════════════════════
   Quando alguém lê em outro fuso, a tela tem que dizer. Sem isso, duas
   pessoas veem horas diferentes do mesmo atendimento sem saber por quê. */

.fuso-ativo {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent-texto, var(--accent));
}

.fuso-campo { min-width: 240px; }

#fusoPreview { margin-top: -4px; }

/* ══ Movimento ══════════════════════════════════════════════════════
   Regra da casa: dark premium, sem neon e sem glow. Então o movimento
   aqui é de opacidade, escala pequena e deslocamento curto — nunca
   sombra colorida. Cada animação responde a uma pergunta:
   o que está vivo, o que mudou agora, o que acabou de chegar. */

/* ── Em atendimento: um ponto que respira ─────────────────────────── */
.st.st-vivo { position: relative; padding-left: 20px; }

.st.st-vivo::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: currentColor;
  animation: batida 1.6s ease-in-out infinite;
}

@keyframes batida {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.72); }
}

/* ── Em formatação: uma varredura, que é o que máquina fazendo parece ─ */
.st.st-processando { position: relative; overflow: hidden; }

.st.st-processando::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 30%,
    color-mix(in srgb, white 26%, transparent) 50%,
    transparent 70%
  );
  transform: translateX(-100%);
  animation: varre 2.2s ease-in-out infinite;
}

@keyframes varre { to { transform: translateX(100%); } }

/* ── Ligar agora: urgência, num ritmo mais curto ──────────────────── */
.st.st-acao { animation: urgente 1.1s ease-in-out infinite; }

@keyframes urgente {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.62; }
}

/* ── Concluído recua: trabalho terminado não compete por atenção ──── */
.st.st-feito { opacity: 0.7; }
.st.st-feito:hover { opacity: 1; }

/* ── O selo pisca quando muda ─────────────────────────────────────── */
.st.trocou { animation: trocou 620ms cubic-bezier(0.22, 1, 0.36, 1); }

@keyframes trocou {
  0%   { transform: scale(1);    }
  28%  { transform: scale(1.14); }
  100% { transform: scale(1);    }
}

/* ── Linha que entra na lista ─────────────────────────────────────── */
.agenda-linha.entra {
  animation: sobe 260ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: calc(var(--i, 0) * 26ms);
}

@keyframes sobe {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}

/* ── Troca de visão ───────────────────────────────────────────────── */
.shell.troca > section:not([hidden]),
.shell.troca > div:not([hidden]) {
  animation: aparece 200ms ease-out backwards;
}

@keyframes aparece {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

/* ── Linha da agenda: resposta ao passar o mouse ──────────────────── */
.agenda-linha {
  transition: background-color 110ms ease, transform 110ms ease;
}

.agenda-linha:hover {
  background-color: color-mix(in srgb, var(--text) 4%, transparent);
}

.agenda-linha:active { transform: scale(0.997); }

/* ── Item da lateral ──────────────────────────────────────────────── */
.tab { transition: background-color 110ms ease, border-color 110ms ease, color 110ms ease; }
.tab-count { transition: color 140ms ease; }

/* ── Bloco do calendário ──────────────────────────────────────────── */
.cal-bloco { transition: background-color 110ms ease, transform 110ms ease; }
.cal-bloco:hover { transform: translateY(-1px); }

/* ── Nada disso é obrigatório ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .st.st-vivo::before,
  .st.st-processando::after,
  .st.st-acao,
  .st.trocou,
  .agenda-linha.entra,
  .shell.troca > section:not([hidden]),
  .shell.troca > div:not([hidden]) {
    animation: none;
  }
  .agenda-linha:active,
  .cal-bloco:hover { transform: none; }
  /* O ponto do "em atendimento" continua lá, só parado. */
  .st.st-vivo::before { opacity: 1; }
}

/* ══ Concluído ══════════════════════════════════════════════════════
   Atendimento encerrado não é erro nem urgência: é trabalho feito. A
   linha inteira recua — barra verde-acinzentada, texto apagado, fundo
   levemente esverdeado — para que o olho encontre primeiro o que ainda
   falta fazer. Continua legível: recuar não é esconder. */

.agenda-linha.concluido {
  --pill: var(--ok);
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--ok) 7%, transparent),
    transparent 42%
  );
}

.agenda-linha.concluido .agenda-hora,
.agenda-linha.concluido .agenda-nome,
.agenda-linha.concluido .agenda-tel,
.agenda-linha.concluido .quente-idade {
  color: var(--texto-ruido);
}

/* Um risco fino no nome: encerrado se lê de longe, sem precisar do selo. */
.agenda-linha.concluido .agenda-nome,
.agenda-linha.concluido .agenda-nome .copiar {
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--texto-ruido) 55%, transparent);
  text-decoration-thickness: 1px;
}

/* O tique fica no lugar da barra de temperatura: ali o olho já procura
   o estado da linha. */
.agenda-linha.concluido .quente-marca {
  background: var(--ok);
}

.agenda-linha.concluido::after {
  content: "✓";
  position: absolute;
  left: -1px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  line-height: 1;
  color: var(--ok);
}

/* Passar o mouse devolve a linha inteira, para conferir o que foi feito. */
.agenda-linha.concluido:hover .agenda-hora,
.agenda-linha.concluido:hover .agenda-nome,
.agenda-linha.concluido:hover .agenda-tel,
.agenda-linha.concluido:hover .quente-idade {
  color: var(--text);
}

.agenda-linha.concluido:hover .agenda-nome,
.agenda-linha.concluido:hover .agenda-nome .copiar {
  text-decoration: none;
}

/* Concluído nunca pede aquecimento: já acabou. */
.agenda-linha.concluido.aquecer::before { animation: none; opacity: 0.4; }
.agenda-linha.concluido .tag-aquecer { display: none; }

/* ── No calendário ────────────────────────────────────────────────── */
.cal-bloco.concluido {
  --pill: var(--ok);
  opacity: 0.55;
}

.cal-bloco.concluido:hover { opacity: 1; }
.cal-bloco.concluido .cal-bloco-nome { text-decoration: line-through; }

/* ══ Edição no lugar ════════════════════════════════════════════════
   Situação e classificação mudam direto na tabela. Abrir o painel lateral
   para trocar uma palavra quebrava o ritmo de varrer a lista — e varrer a
   lista é o que se faz o dia inteiro aqui. */

.st-tabela {
  max-width: 100%;
  font-size: 11px;
  padding: 1px 7px;
  min-height: 21px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sem o convite, ninguém descobre que dá para clicar. */
.st-tabela::after {
  content: "";
  display: inline-block;
  width: 0;
  overflow: hidden;
  transition: width 110ms ease;
}

tr:hover .st-tabela {
  border-color: color-mix(in srgb, var(--st) 60%, transparent);
}

/* A classificação usa a mesma escala de temperatura das barras da lista. */
.st-tabela.temp-4 { --st: var(--erro); }
.st-tabela.temp-3 { --st: var(--laranja); }
.st-tabela.temp-2 { --st: var(--alerta, var(--c-amber)); }
.st-tabela.temp-1 { --st: var(--info); }
.st-tabela.temp-proc { --st: var(--c-indigo); }
.st-tabela.temp-0 { --st: var(--texto-ruido); }

/* Situação na tabela reaproveita as cores de badge que já existiam. */
.st-tabela.neutral   { --st: var(--texto-ruido); }
.st-tabela.contacted { --st: var(--c-teal); }
.st-tabela.review    { --st: var(--c-amber); }
.st-tabela.client    { --st: var(--ok); }
.st-tabela.schedule-done { --st: var(--info); }
.st-tabela.schedule-pre  { --st: var(--c-indigo); }

.pop-classificacao { min-width: 190px; }

/* ══ Hora nos dois fusos ════════════════════════════════════════════
   Fora de Brasília a hora local manda na leitura, mas a de Brasília fica
   logo abaixo: é ela que o time combina e a que aparece na planilha. */

.hora-local {
  display: block;
  font-variant-numeric: tabular-nums;
}

.hora-bsb {
  display: block;
  font-size: 9.5px;
  color: var(--texto-ruido);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.hora-dica {
  display: block;
  margin-top: 3px;
  font-style: normal;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--accent-texto, var(--accent));
  font-variant-numeric: tabular-nums;
}

/* ══ Navegação em dois níveis ═══════════════════════════════════════
   A lateral navega entre páginas; os recortes da operação viram abas
   coladas no conteúdo. Um item de lateral que não sai da página é o que
   fazia a barra crescer sem fim. */

.pagina-nav { gap: 2px; }

.pagina {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 34px;
  font-size: 13px;
}

.pagina svg { width: 15px; height: 15px; flex: none; opacity: 0.8; }
.pagina.active svg { opacity: 1; }
.pagina .tab-count { margin-left: auto; }

.pagina[data-pagina="operacao"]     { --q: var(--accent); }
.pagina[data-pagina="visao"]        { --q: var(--c-teal); }
.pagina[data-pagina="inteligencia"] { --q: var(--c-purple); }

/* ── Abas da operação ─────────────────────────────────────────────── */
.sub-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.sub-tabs { display: contents; }

.sub-grupo {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--faint);
  margin-right: 2px;
}

.sub-sep {
  width: 1px;
  height: 16px;
  margin: 0 6px;
  background: var(--line);
}

.sub-tab {
  --q: var(--c-blue);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 3px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 110ms ease, color 110ms ease, border-color 110ms ease;
}

.sub-tab:hover { background: var(--surface-soft); color: var(--text); }

.sub-tab.active {
  background: color-mix(in srgb, var(--q) var(--tint), transparent);
  border-color: color-mix(in srgb, var(--q) 45%, transparent);
  color: var(--q);
  font-weight: 600;
}

.sub-tab .tab-count {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}

/* ══ Visão geral ════════════════════════════════════════════════════ */

.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.kpi {
  --tom: var(--line);
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--tom);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.kpi-alerta { --tom: var(--accent); }
.kpi-erro   { --tom: var(--erro); }

.kpi-rot {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  /* --faint dava 3,8:1 no claro. Rotulo de 10px precisa de 4,5:1. */
  color: var(--muted);
}

.kpi-val {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.kpi-apoio { font-size: 11.5px; color: var(--muted); }

.visao-grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.visao-grade .col-2 { grid-column: span 2; }

@media (max-width: 900px) {
  .visao-grade { grid-template-columns: minmax(0, 1fr); }
  .visao-grade .col-2 { grid-column: span 1; }
}

/* ── Barras horizontais ───────────────────────────────────────────── */
.barras { display: grid; gap: 7px; margin-top: 4px; }

.barra-linha {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 10px;
}

.barra-rot { font-size: 12px; color: var(--muted); }

.barra-trilho {
  height: 7px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--text) 7%, transparent);
  overflow: hidden;
}

.barra-trilho i {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--c-blue);
  transition: width 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.barra-n {
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ── Colunas da semana ────────────────────────────────────────────── */
.colunas {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
  align-items: end;
  height: 130px;
}

.coluna {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 5px;
  height: 100%;
  text-align: center;
}

.coluna-n {
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.coluna-trilho {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 100%;
}

.coluna-trilho i {
  display: block;
  width: 60%;
  min-height: 2px;
  border-radius: 3px 3px 0 0;
  background: color-mix(in srgb, var(--c-indigo) 70%, transparent);
  transition: height 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.coluna.e-hoje .coluna-trilho i { background: var(--accent); }
/* Gold puro sobre cartao claro da 2,2:1; existe um gold proprio para texto. */
.coluna.e-hoje .coluna-rot { color: var(--accent-texto, var(--accent)); font-weight: 700; }

.coluna-rot {
  font-size: 10.5px;
  color: var(--faint);
  white-space: nowrap;
}

/* ══ Inteligência ═══════════════════════════════════════════════════
   Cada achado é uma frase com um número atrás e um caminho para agir.
   Achado sem ação vira relatório, e relatório ninguém lê. */

.achados { display: grid; gap: 8px; margin-top: 4px; }

.achado {
  --tom: var(--line);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 12px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--tom);
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--tom) 5%, transparent);
}

.achado strong { font-size: 13.5px; font-weight: 600; }
.achado p { grid-column: 1; margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.achado button { grid-row: 1 / span 2; align-self: center; white-space: nowrap; }

.achado-erro   { --tom: var(--erro); }
.achado-alerta { --tom: var(--accent); }
.achado-info   { --tom: var(--info); }
.achado-ok     { --tom: var(--ok); }

.achado-erro strong   { color: var(--erro); }
.achado-alerta strong { color: var(--accent-texto, var(--accent)); }
.achado-ok strong     { color: var(--ok); }

/* ── Tabela simples ───────────────────────────────────────────────── */
.tabela-simples { margin-top: 4px; }

.ts-cab, .ts-linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 70px 70px 70px;
  gap: 8px;
  padding: 7px 0;
  align-items: center;
}

.ts-cab {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}

.ts-cab span:not(:first-child),
.ts-linha span:not(:first-child) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ts-linha {
  font-size: 12.5px;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 5%, transparent);
}

.ts-linha:last-child { border-bottom: 0; }
.ts-alerta { color: var(--erro); font-weight: 600; }

.pagina-corpo { display: grid; gap: 12px; }

@media (prefers-reduced-motion: reduce) {
  .barra-trilho i, .coluna-trilho i { transition: none; }
}

/* ══ Loader da marca ════════════════════════════════════════════════
   Portado de src/components/ui/brand-loader.tsx do CRM. Mesmas medidas:
   logo 30px, wordmark Sora 17/700/0.08em, trilho 150×3, barra 38% em
   #FFD300, ciclo de 1,15s. */

.ub-load {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background: #06070A;
}

.ub-load.sai {
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease;
}

.ub-marca {
  display: flex;
  align-items: center;
  gap: 10px;
  animation: ub-in 350ms ease-out both;
}

.ub-marca img { width: 30px; height: 30px; object-fit: contain; }

.ub-marca span {
  font-family: Sora, Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 17px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #F8FAFC;
}

.ub-trilho {
  width: 150px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
  animation: ub-in 350ms ease-out both;
}

.ub-bar {
  display: block;
  width: 38%;
  height: 100%;
  border-radius: 999px;
  background: #FFD300;
  animation: ub-load 1.15s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes ub-load {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(360%); }
}

@keyframes ub-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ub-marca, .ub-trilho { animation: none; }
  .ub-bar { animation: none; transform: translateX(70%); }
}

/* Telefone e nome copiáveis dentro da tabela: mantêm o alinhamento da
   célula e só revelam que são clicáveis no hover. */
td .copiar { display: block; width: 100%; margin-left: -5px; }
td .copiar.phone-text { font-weight: 500; }

.cal-bloco-nome .copiar,
.notif-nome .copiar { display: block; width: 100%; }

.detail-id .copiar { font-size: inherit; }

/* ══ Calendário do filtro ═══════════════════════════════════════════
   Um mês por vez, com quantos leads caem em cada dia. O número é o que
   torna o calendário útil aqui: dá para ver onde o trabalho se acumulou
   antes de clicar. Dia sem lead não é clicável — não teria o que abrir. */

.pop-data { min-width: 268px; padding: 10px; }

.mes-topo {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 26px;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.mes-topo strong {
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  text-transform: capitalize;
}

.mes-topo button {
  min-height: 24px;
  width: 26px;
  padding: 0;
  font-size: 13px;
}

.mes-semana,
.mes-grade {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}

.mes-semana {
  margin-bottom: 4px;
}

.mes-semana span {
  text-align: center;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--faint);
}

.mes-dia {
  position: relative;
  display: grid;
  place-items: center;
  gap: 0;
  min-height: 32px;
  padding: 2px 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color 100ms ease, border-color 100ms ease;
}

.mes-dia:disabled { cursor: default; opacity: 0.34; }
.mes-dia.fora { opacity: 0.28; }
.mes-dia.fora:disabled { opacity: 0.16; }

/* Dia com lead ganha peso e um contador. Sem isso o mês é só um teclado. */
.mes-dia.tem {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--text);
  font-weight: 600;
}

.mes-dia.tem:hover {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}

.mes-n {
  font-size: 8.5px;
  font-weight: 500;
  line-height: 1;
  color: var(--accent-texto, var(--accent));
}

.mes-dia.e-hoje { border-color: color-mix(in srgb, var(--text) 30%, transparent); }

.mes-dia.escolhido {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.mes-dia.escolhido .mes-n { color: var(--on-accent); opacity: 0.75; }

.limpar-data { width: 100%; margin-top: 8px; min-height: 26px; font-size: 12px; }

.seletor-btn.ativo {
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  color: var(--accent-texto, var(--accent));
}

/* Próximo é informação, não alarme: contorno em vez de preenchimento. */
.tag-proximo {
  background: none;
  border: 1px solid color-mix(in srgb, var(--text) 22%, transparent);
  color: var(--muted);
  font-weight: 600;
}

/* ══ Celular ════════════════════════════════════════════════════════
   Cadastrar um lead do telefone precisa funcionar: a caixa de colar já
   fica no topo. O que estava quebrado era editar — o painel de edição
   caía depois da tabela inteira, a 21 mil pixels de distância. */

@media (max-width: 1100px) {
  /* Empilhado, o painel do lead selecionado vem antes da lista. Depois
     de 500 linhas ele existe no papel e não na prática. */
  .workarea .detail-panel { order: -1; }
  .workarea .filters { order: -2; }
}

@media (max-width: 700px) {
  /* Polegar não acerta 22px. Nas telas de toque os controles crescem;
     no desktop a densidade continua sendo a virtude.
     A especificidade acompanha a das regras de desktop (.queue-nav .tab
     tem dois seletores) — senão a regra existe e não vale. */
  .sidebar .tab,
  .queue-nav .tab,
  .sub-nav .sub-tab,
  .cadence .cadence-tab,
  .cadence .seletor-btn,
  .top-actions .secondary,
  .top-actions .sino,
  button.secondary,
  button[type="submit"],
  .eu .sair,
  .eu .eu-config,
  button.st,
  .st-pop .st-opcao {
    min-height: 36px;
  }

  /* Copiar telefone é o toque mais repetido do dia: precisa de área. */
  td .copiar,
  .agenda-nome .copiar,
  .agenda-tel .copiar,
  .cal-bloco-nome .copiar,
  .notif-nome .copiar {
    min-height: 34px;
    display: flex;
    align-items: center;
  }

  button.st, .st-tabela { padding: 6px 10px; }
  .eu .sair { width: 100%; }

  .mes-dia { min-height: 40px; }

  /* A lateral vira uma faixa que rola de lado, em vez de empurrar o
     conteúdo para baixo da dobra. */
  .sidebar { padding-bottom: 8px; }

  .pagina-nav {
    flex-direction: row;
    overflow-x: auto;
    gap: 6px;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }

  .pagina { flex: none; }
  .pagina .tab-count { margin-left: 4px; }

  .sub-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 12px;
    -webkit-overflow-scrolling: touch;
  }

  .sub-tab, .sub-grupo { flex: none; }

  /* Uma coluna: dois KPIs lado a lado em 375px viram números apertados. */
  .kpis { grid-template-columns: minmax(0, 1fr); }
  .barra-linha { grid-template-columns: 96px minmax(0, 1fr) 36px; }

  .achado { grid-template-columns: minmax(0, 1fr); }
  .achado button { grid-row: auto; justify-self: start; }

  .ts-cab, .ts-linha { grid-template-columns: minmax(0, 1fr) 46px 46px 46px; font-size: 12px; }

  .login-card { padding: 20px; }
}

/* ══ Pilha de avisos ════════════════════════════════════════════════
   Quatro tipos de aviso (horário, aquecimento, registro, conquista)
   dividiam o mesmo canto fixo. Dois ao mesmo tempo e um cobria o outro.
   A pilha resolve por layout, não por temporizador. */

#avisos {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  display: flex;
  flex-direction: column-reverse;   /* o mais novo fica embaixo, perto do olho */
  align-items: flex-end;
  gap: 8px;
  max-height: calc(100vh - 36px);
  pointer-events: none;
}

#avisos .conquista {
  position: static;
  right: auto;
  bottom: auto;
  pointer-events: auto;
  max-width: min(340px, calc(100vw - 36px));
}

@media (max-width: 700px) {
  #avisos { right: 12px; left: 12px; bottom: 12px; align-items: stretch; }
  #avisos .conquista { max-width: none; }
}