:root {
  --bg: #ffffff;
  --sidebar-bg: #f7f6f3;
  --border: #e7e5df;
  --text: #1f1e1c;
  --text-muted: #77746c;
  --hover: #eeece6;
  --active: #e6e3db;
  --sidebar-width: 264px;
  --topbar-height: 52px;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  font-family: "Open Sans", system-ui, sans-serif;
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app {
  display: flex;
  height: 100%;
}

/* ---------- Sidebar ---------- */

.sidebar {
  width: var(--sidebar-width);
  flex: none;
  display: flex;
  flex-direction: column;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  overflow-y: auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 20px 16px 18px;
}

.brand-mark {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--on-ink);
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  font-weight: 800;
}

.brand-text { min-width: 0; }

.brand-name {
  font-family: "Montserrat", sans-serif;
  font-size: 15.5px;
  font-weight: 300;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.brand-name strong { font-weight: 800; }

.brand-client {
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav {
  padding: 4px 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 7px;
  color: var(--text);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s;
}

.nav-item svg { color: var(--text-muted); }
.nav-item:hover { background: var(--hover); }
.nav-item.active { background: var(--active); font-weight: 600; }
.nav-item.active svg { color: var(--text); }

.nav-item .chevron {
  width: 14px;
  height: 14px;
  margin-left: auto;
  transition: transform 0.15s;
}

.nav-group.open > .nav-item .chevron { transform: rotate(90deg); }

.nav-sub {
  display: none;
  flex-direction: column;
  gap: 2px;
  margin: 2px 0 4px 18px;
  padding-left: 10px;
  border-left: 1px solid var(--border);
}

.nav-group.open > .nav-sub { display: flex; }

.nav-sub .nav-item {
  font-size: 13.5px;
  padding: 7px 10px;
}

/* ---------- Main ---------- */

.main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.topbar {
  height: var(--topbar-height);
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 24px;
  border-bottom: 1px solid var(--border);
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
}

.breadcrumb a {
  color: var(--text-muted);
  padding: 3px 6px;
  margin: 0 -6px;
  border-radius: 5px;
  transition: background 0.12s, color 0.12s;
}

.breadcrumb a:hover {
  background: var(--hover);
  color: var(--text);
}

.breadcrumb .sep { color: var(--text-faint); }

.breadcrumb .current {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
}

.content {
  flex: 1;
  overflow-y: auto;
  padding: 32px 24px 48px;
}

.content-inner {
  max-width: 960px;
  margin: 0 auto;
}

.page-title {
  margin: 0 0 6px;
  font-size: 24px;
  font-weight: 600;
}

.page-desc {
  margin: 0 0 28px;
  color: var(--text-muted);
}

.placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 320px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  color: var(--text-muted);
  text-align: center;
  padding: 24px;
}

.placeholder svg {
  width: 28px;
  height: 28px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

.card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  font-weight: 600;
  transition: background 0.12s, border-color 0.12s;
}

.card svg { color: var(--text-muted); }
.card:hover { background: var(--sidebar-bg); border-color: var(--border-strong); }

/* ---------- Botões ---------- */

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}

.btn:hover { background: var(--hover); }
.btn svg { width: 16px; height: 16px; }

.btn-primary {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--on-ink);
}

.btn-primary:hover { background: var(--accent-hover); }

.btn-danger { color: var(--danger); }
.btn-danger:hover { background: color-mix(in srgb, var(--danger) 14%, transparent); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }

.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.icon-btn:hover { background: var(--hover); color: var(--text); }
.icon-btn svg { width: 16px; height: 16px; }

/* ---------- Painel de links ---------- */

/* ---------- Gerador de links orgânicos ---------- */

.organic {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}

.organic-title {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 600;
}

.organic-desc {
  margin: 0 0 18px;
  color: var(--text-muted);
}

.organic-base { max-width: 560px; }

.organic-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
}

.organic-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.organic-table th {
  padding: 9px 8px;
  border-bottom: 1px solid var(--border);
  background: var(--sidebar-bg);
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}

.organic-table td {
  padding: 3px 4px;
  border-bottom: 1px solid var(--border);
}

.organic-table tbody tr:last-child td { border-bottom: 0; }
.organic-table th:first-child,
.organic-table td:first-child { padding-left: 8px; }

/* Células editáveis: parecem texto até receberem foco. */
.cell-input {
  width: 100%;
  min-width: 104px;
  padding: 6px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font: inherit;
}

.organic-table td:first-child .cell-input { min-width: 170px; font-weight: 600; }
.organic-table td:nth-child(2) .cell-input { min-width: 90px; }

.cell-input:hover { border-color: var(--border); }

.cell-input:focus {
  border-color: var(--text);
  background: var(--bg);
  outline: none;
}

/* As ações ficam presas à direita quando a tabela rola na horizontal. */
.organic-table td.organic-actions,
.organic-table th:last-child {
  position: sticky;
  right: 0;
  width: 1%;
  padding: 3px 6px;
  white-space: nowrap;
  box-shadow: -1px 0 0 var(--border);
}

.organic-table td.organic-actions { background: var(--bg); }

.organic-actions .icon-btn { display: inline-flex; }

.organic-add { margin-top: 12px; }

.link-group + .link-group { margin-top: 28px; }

.link-group-title {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.link-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: 12px;
}

.link-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 10px 10px 16px;
}

.link-row + .link-row { border-top: 1px solid var(--border); }

.link-info { flex: 1; min-width: 0; }

.link-desc { font-weight: 600; }

.link-url {
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.link-actions {
  display: flex;
  flex: none;
  gap: 2px;
}

/* ---------- Painel de criativos ---------- */

.cr-head {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-right: 16px;
  border-radius: 11px;
}

.cr-head:hover { background: var(--soft); }

.cr-head .mt-head {
  flex: 1;
  min-width: 0;
  padding-right: 8px;
}

.cr-head .mt-head:hover,
.cr-group.open .cr-head .mt-head {
  border: 0;
  background: none;
}

.cr-group.open .cr-head {
  border-bottom: 1px solid var(--border);
  border-radius: 11px 11px 0 0;
  background: var(--sidebar-bg);
}

.cr-add { width: 26px; height: 26px; }

.creative-row { padding-left: 6px; }

.creative-row.dragging { opacity: 0.4; }

.cr-grip {
  display: flex;
  flex: none;
  margin-right: -10px;
  color: var(--text-faint);
  cursor: grab;
}

.cr-grip svg { width: 16px; height: 16px; fill: currentColor; }

.creative-row:hover .cr-grip { color: var(--text-muted); }

.cr-body { display: none; }
.cr-group.open .cr-body { display: block; }

.cr-body .link-list { border: 0; }

.cr-group .mt-count.zero { opacity: 0.55; }

.cr-empty {
  margin: 0;
  padding: 14px 16px;
  color: var(--text-muted);
  font-size: 13px;
}

.type-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 2px 8px 2px 0;
  border-radius: 7px;
}

.type-badge svg { width: 16px; height: 16px; }

.type-video { background: color-mix(in srgb, #6b46d6 22%, var(--bg-solid)); color: color-mix(in srgb, #6b46d6 66%, var(--text)); }
.type-imagem { background: color-mix(in srgb, #1f8a5b 22%, var(--bg-solid)); color: color-mix(in srgb, #1f8a5b 66%, var(--text)); }
.type-carrossel { background: color-mix(in srgb, #c2620a 22%, var(--bg-solid)); color: color-mix(in srgb, #c2620a 66%, var(--text)); }

/* ---------- Calendário ---------- */

.content-inner.wide { max-width: 1240px; }

.ev-fase { --ev-bg: color-mix(in srgb, #5a37c4 22%, var(--bg-solid)); --ev-fg: color-mix(in srgb, #5a37c4 62%, var(--text)); }
.ev-reuniao { --ev-bg: color-mix(in srgb, #1a5fc0 22%, var(--bg-solid)); --ev-fg: color-mix(in srgb, #1a5fc0 62%, var(--text)); }
.ev-entrega { --ev-bg: color-mix(in srgb, #b05708 22%, var(--bg-solid)); --ev-fg: color-mix(in srgb, #b05708 62%, var(--text)); }
.ev-marco { --ev-bg: color-mix(in srgb, #1a7a50 22%, var(--bg-solid)); --ev-fg: color-mix(in srgb, #1a7a50 62%, var(--text)); }
.ev-outro { --ev-bg: color-mix(in srgb, #5f5c55 22%, var(--bg-solid)); --ev-fg: color-mix(in srgb, #5f5c55 62%, var(--text)); }

.cal-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.cal-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.cal-nav .btn { margin-right: 6px; }

.cal-title {
  margin: 0 0 0 8px;
  font-size: 17px;
  font-weight: 600;
}

.segmented {
  display: flex;
  padding: 3px;
  border-radius: 9px;
  background: var(--hover);
}

.segmented button {
  padding: 5px 13px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.segmented button:hover { color: var(--text); }

.segmented button[aria-pressed="true"] {
  background: var(--bg);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.cal-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
}

.cal-filter {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px 4px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
}

.cal-filter::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ev-fg);
}

.cal-filter:hover { background: var(--sidebar-bg); }

.cal-filter[aria-pressed="false"] {
  color: var(--text-muted);
  text-decoration: line-through;
}

.cal-filter[aria-pressed="false"]::before { background: var(--border-strong); }

.cal-project {
  margin-left: auto;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
}

.cal {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

/* Visão mensal */

.cal-weekdays,
.cal-days,
.cal-events {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.cal-weekdays {
  border-bottom: 1px solid var(--border);
  background: var(--sidebar-bg);
}

.cal-weekdays span {
  padding: 8px 10px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.cal-week {
  position: relative;
  min-height: 132px;
}

.cal-week + .cal-week { border-top: 1px solid var(--border); }

.cal-days {
  position: absolute;
  inset: 0;
}

.cal-day {
  display: flex;
  align-items: flex-start;
  padding: 5px 6px;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.cal-day + .cal-day { border-left: 1px solid var(--border); }
.cal-day:hover { background: var(--soft); }

.cal-daynum {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 12.5px;
  font-weight: 600;
}

.cal-day.other .cal-daynum { color: var(--text-faint); }
.cal-day.today .cal-daynum { background: var(--ink); color: var(--on-ink); }

.cal-events {
  position: relative;
  grid-auto-rows: 22px;
  row-gap: 2px;
  padding: 33px 0 6px;
  pointer-events: none;
}

.cal-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  margin: 0 4px;
  padding: 0 7px;
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
}

.cal-chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-chip.bar {
  background: var(--ev-bg);
  color: var(--ev-fg);
  font-weight: 600;
}

.cal-chip.bar:hover { filter: brightness(0.96); }

.cal-chip.cont-l {
  margin-left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.cal-chip.cont-r {
  margin-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.cal-chip.timed::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ev-fg);
}

.cal-chip.timed:hover { background: var(--hover); }

.cal-chip-time {
  flex: none;
  color: var(--text-muted);
}

.cal-more {
  margin: 0 4px;
  padding: 0 7px;
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  pointer-events: auto;
}

.cal-more:hover { background: var(--hover); color: var(--text); }

/* Visões de semana e dia */

.tg-scroll {
  max-height: max(440px, calc(100vh - 290px));
  overflow: auto;
}

.tg-row {
  display: grid;
  grid-template-columns: 56px repeat(var(--cols), minmax(0, 1fr));
}

.tg-head {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.tg-dayhead {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 4px;
  border: 0;
  border-left: 1px solid var(--border);
  background: var(--sidebar-bg);
  color: var(--text-muted);
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.tg-head .tg-row:first-child > div:first-child { background: var(--sidebar-bg); }

.tg-dayhead strong {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: var(--text);
  font-size: 13.5px;
  letter-spacing: 0;
}

.tg-dayhead:hover strong { background: var(--hover); }
.tg-dayhead.today strong { background: var(--ink); color: var(--on-ink); }

.tg-week .tg-allday { border-top: 1px solid var(--border); }

.tg-gutter-label {
  padding: 8px 8px 0 0;
  font-size: 11px;
  color: var(--text-muted);
  text-align: right;
}

.tg-lanes {
  grid-column: 2 / -1;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  grid-auto-rows: 22px;
  row-gap: 2px;
  min-height: 32px;
  padding: 5px 0;
  border-left: 1px solid var(--border);
}

.tg-hours { position: relative; }

.tg-hours span {
  position: absolute;
  right: 8px;
  margin-top: -8px;
  font-size: 11px;
  color: var(--text-muted);
}

.tg-col {
  position: relative;
  border-left: 1px solid var(--border);
  background: linear-gradient(var(--border) 1px, transparent 1px) 0 -1px / 100% 48px;
}

.tg-col.today { background-color: var(--soft); }

.tg-event {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 3px 7px;
  border: 0;
  border-left: 3px solid var(--ev-fg);
  border-radius: 5px;
  background: var(--ev-bg);
  box-shadow: 0 0 0 1px var(--bg);
  color: var(--ev-fg);
  font: inherit;
  font-size: 12px;
  line-height: 1.3;
  text-align: left;
  overflow: hidden;
  cursor: pointer;
}

.tg-event:hover { filter: brightness(0.96); z-index: 2; }

.tg-event strong,
.tg-event span {
  flex: none;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tg-event strong { font-weight: 600; }
.tg-event span { opacity: 0.85; }

.tg-now {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  height: 2px;
  margin-top: -1px;
  background: var(--danger);
  pointer-events: none;
}

.tg-now::before {
  content: "";
  position: absolute;
  left: -5px;
  top: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--danger);
}

/* Visão em lista */

.cal-list-wrap { overflow-x: auto; }

.cal-list {
  width: 100%;
  border-collapse: collapse;
}

.cal-list th {
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--sidebar-bg);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: left;
  white-space: nowrap;
}

.cal-list th button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.cal-list th button:hover,
.cal-list th[aria-sort]:not([aria-sort="none"]) button { color: var(--text); }

.cal-list th i {
  display: inline-block;
  width: 14px;
  font-style: normal;
  text-align: center;
}

.cal-list td { padding: 9px 16px; }
.cal-list td:last-child { width: 1%; padding: 4px 10px 4px 0; }
.cal-list tbody tr { cursor: pointer; }
.cal-list tbody tr + tr td { border-top: 1px solid var(--border); }
.cal-list tbody tr:hover { background: var(--soft); }
.cal-list .nowrap { white-space: nowrap; }
.cal-list .muted { color: var(--text-muted); }
.cal-list-title { font-weight: 600; }

.cal-list-repeat {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
}

.cal-list-repeat svg { width: 12px; height: 12px; }

/* Nos eventos com horário o espaço vai para o título; o ícone fica só nas barras. */
.cal-chip.timed .cal-repeat { display: none; }

.cal-chip .cal-repeat {
  flex: none;
  width: 11px;
  height: 11px;
  margin-left: auto;
  opacity: 0.7;
}

/* Recorrência no formulário de evento */

.scope-choice {
  margin: -6px 0 18px;
  padding: 10px 12px 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--sidebar-bg);
}

.scope-choice legend {
  float: left;
  width: 100%;
  margin-bottom: 8px;
  padding: 0;
  font-size: 12.5px;
  font-weight: 600;
}

.scope-choice label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 14px;
  font-size: 13px;
  cursor: pointer;
}

.scope-choice b { font-weight: 500; }
.scope-choice input { margin: 0; accent-color: var(--ink); }

.input-unit {
  display: flex;
  align-items: center;
  gap: 8px;
}

.field .input-unit input { width: 72px; flex: none; }
.input-unit em { font-style: normal; color: var(--text-muted); }

.weekday-picker {
  display: flex;
  gap: 6px;
}

.weekday-picker label { cursor: pointer; }

.field .weekday-picker input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.weekday-picker b {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 50%;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  transition: background 0.12s, color 0.12s;
}

.weekday-picker label:hover b { background: var(--hover); color: var(--text); }
.weekday-picker input:checked + b { border-color: var(--ink); background: var(--ink); color: var(--on-ink); }
.weekday-picker input:focus-visible + b { outline: 2px solid var(--focus); outline-offset: 2px; }

.field span small { font-weight: 400; color: var(--text-muted); }

.repeat-summary {
  margin: -4px 0 14px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.repeat-summary:empty { display: none; }

.ev-tag {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--ev-bg);
  color: var(--ev-fg);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* Próximos eventos (barra lateral) */

.upcoming {
  margin: 4px 10px 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.upcoming-title {
  margin: 0 10px 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.upcoming-day {
  margin: 12px 10px 4px;
  font-size: 12.5px;
  font-weight: 700;
}

.upcoming-item {
  display: block;
  width: 100%;
  padding: 6px 10px 6px 12px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  position: relative;
}

.upcoming-item::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 2px;
  background: var(--ev-fg);
}

.upcoming-item:hover { background: var(--hover); }

.upcoming-name,
.upcoming-detail {
  display: block;
  padding-left: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.upcoming-name { font-size: 13.5px; font-weight: 500; }
.upcoming-detail { font-size: 12px; color: var(--text-muted); }

.upcoming-empty {
  margin: 8px 10px 0;
  font-size: 12.5px;
  color: var(--text-muted);
}

.check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.check input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--ink);
}

/* ---------- Desenho de funis ---------- */

.fn-c-gray { --fn-bg: color-mix(in srgb, #5f5c55 22%, var(--bg-solid)); --fn-fg: color-mix(in srgb, #5f5c55 62%, var(--text)); }
.fn-c-blue { --fn-bg: color-mix(in srgb, #1a5fc0 22%, var(--bg-solid)); --fn-fg: color-mix(in srgb, #1a5fc0 62%, var(--text)); }
.fn-c-purple { --fn-bg: color-mix(in srgb, #5a37c4 22%, var(--bg-solid)); --fn-fg: color-mix(in srgb, #5a37c4 62%, var(--text)); }
.fn-c-green { --fn-bg: color-mix(in srgb, #1a7a50 22%, var(--bg-solid)); --fn-fg: color-mix(in srgb, #1a7a50 62%, var(--text)); }
.fn-c-orange { --fn-bg: color-mix(in srgb, #b05708 22%, var(--bg-solid)); --fn-fg: color-mix(in srgb, #b05708 62%, var(--text)); }
.fn-c-pink { --fn-bg: color-mix(in srgb, #b0256b 22%, var(--bg-solid)); --fn-fg: color-mix(in srgb, #b0256b 62%, var(--text)); }
.fn-c-red { --fn-bg: color-mix(in srgb, #b3261e 22%, var(--bg-solid)); --fn-fg: color-mix(in srgb, #b3261e 62%, var(--text)); }
.fn-c-yellow { --fn-bg: color-mix(in srgb, #8a6700 22%, var(--bg-solid)); --fn-fg: color-mix(in srgb, #8a6700 62%, var(--text)); }

/* Lista de funis */

.fn-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.fn-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.12s;
}

.fn-card:hover { border-color: var(--border-strong); }

.fn-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 150px;
  padding: 14px;
  border-bottom: 1px solid var(--border);
  background: var(--sidebar-bg);
}

.fn-thumb svg {
  width: 100%;
  height: 100%;
}

.fn-thumb path {
  stroke: var(--text-faint);
  vector-effect: non-scaling-stroke;
}

.fn-thumb rect {
  fill: var(--fn-bg);
  stroke: var(--fn-fg);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.fn-thumb rect.frame {
  fill: none;
  stroke-dasharray: 3 3;
  opacity: 0.6;
}

.fn-thumb-empty { color: var(--text-faint); }
.fn-thumb-empty svg { width: 28px; height: 28px; }

.fn-card-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 8px 10px 14px;
}

/* Editor */

.content.bare {
  display: flex;
  padding: 0;
  overflow: hidden;
}

.fn-editor {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.fn-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
}

.fn-spacer { flex: 1; }

.fn-name {
  min-width: 0;
  width: 280px;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-overflow: ellipsis;
}

.fn-name:hover { background: var(--hover); }

.fn-name:focus {
  outline: 2px solid var(--focus);
  outline-offset: -1px;
  background: var(--bg);
}

.fn-saved {
  margin-left: 6px;
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

.fn-bar .icon-btn:disabled {
  opacity: 0.35;
  pointer-events: none;
}

.fn-palette-btn { display: none; }

.fn-body {
  flex: 1;
  min-height: 0;
  display: flex;
  position: relative;
}

.fn-palette {
  width: 220px;
  flex: none;
  padding: 2px 10px 20px;
  border-right: 1px solid var(--border);
  background: var(--bg);
  overflow-y: auto;
  user-select: none;
}

.fn-group-title {
  margin: 16px 6px 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.fn-block {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 5px 6px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: grab;
  touch-action: pan-y;
}

.fn-block:hover { background: var(--hover); }

.fn-ico {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--fn-bg, var(--hover));
  color: var(--fn-fg, var(--text-muted));
}

.fn-ico svg { width: 14px; height: 14px; }

.fn-ghost {
  position: fixed;
  z-index: 40;
  width: 190px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.fn-canvas {
  flex: 1;
  min-width: 0;
  position: relative;
  overflow: hidden;
  background-color: var(--soft);
  background-image: radial-gradient(circle, var(--border-strong) 1px, transparent 1.3px);
  cursor: default;
  touch-action: none;
  user-select: none;
}

.fn-canvas.grab,
.fn-canvas.dragging { cursor: grabbing; }
.fn-canvas.connecting { cursor: crosshair; }

.fn-world {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
}

.fn-svg {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 1px;
  height: 1px;
  overflow: visible;
  pointer-events: none;
}

.fn-temp { z-index: 4; }

.fn-temp path {
  stroke: var(--ink);
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
}

.fn-edge { color: var(--fn-fg, var(--text-muted)); }

.fn-edge-hit {
  stroke: transparent;
  stroke-width: 16;
  pointer-events: stroke;
  cursor: pointer;
}

.fn-edge-line,
.fn-edge-head { stroke-width: 1.6; }

.fn-edge-line.dashed { stroke-dasharray: 7 6; }
.fn-edge-line.dotted { stroke-dasharray: 0.1 6; stroke-width: 2.2; }

.fn-edge:hover .fn-edge-line,
.fn-edge:hover .fn-edge-head { stroke-width: 2.4; }

.fn-edge.selected { color: var(--ink); }

.fn-edge.selected .fn-edge-line,
.fn-edge.selected .fn-edge-head { stroke-width: 2.4; }

.fn-label {
  position: absolute;
  z-index: 3;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--bg-solid);
  color: var(--fn-fg, var(--text-muted));
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.fn-label.selected { color: var(--ink); }

/* Blocos */

.fn-node {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  cursor: grab;
}

.fn-canvas.dragging .fn-node { cursor: grabbing; }

.fn-node.selected {
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink);
}

.fn-main {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 12px 0 10px;
}

.fn-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.fn-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.fn-title[contenteditable="true"] {
  display: block;
  overflow: visible;
  outline: none;
  cursor: text;
  user-select: text;
  -webkit-user-select: text;
}

.fn-kind {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fn-node.source,
.fn-node.event { border-radius: 999px; }

.fn-node.source .fn-main,
.fn-node.event .fn-main { padding-left: 9px; }

/* Conversões são preenchidas, para se destacarem como os marcos do funil. */
.fn-node.event {
  border-color: transparent;
  background: var(--fn-bg);
  color: var(--fn-fg);
}

.fn-node.event .fn-ico { background: var(--bg); }

.fn-node.page .fn-ico,
.fn-node.card .fn-ico { border-radius: 7px; }

.fn-strip {
  flex: none;
  display: flex;
  align-items: center;
  gap: 3px;
  height: 15px;
  padding: 0 9px;
  border-radius: 9px 9px 0 0;
  background: var(--fn-bg);
}

.fn-strip i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--fn-fg);
  opacity: 0.5;
}

.fn-node.diamond {
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--fn-fg);
  font-size: 12px;
  text-align: center;
}

.fn-shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.fn-shape path {
  fill: var(--fn-fill, var(--fn-bg));
  stroke: var(--fn-stroke, var(--fn-fg));
  stroke-width: 1;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.fn-node.diamond.selected .fn-shape path {
  stroke: var(--c-sel, var(--ink));
  stroke-width: 2;
}

.fn-node.diamond .fn-title { position: relative; }

/* A etapa só reage ao título e à alça, para não atrapalhar os blocos dentro dela. */
.fn-node.frame {
  z-index: 0;
  display: block;
  border: 1.5px dashed color-mix(in srgb, var(--fn-fg) 45%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--fn-bg) 40%, transparent);
  pointer-events: none;
}

.fn-node.frame.selected {
  border-style: solid;
  border-color: var(--ink);
  box-shadow: none;
}

.fn-node.frame .fn-title {
  display: inline-block;
  max-width: calc(100% - 20px);
  margin: 10px;
  padding: 2px 4px;
  color: var(--fn-fg);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: auto;
}

.fn-node.note {
  display: block;
  padding: 12px;
  border: 0;
  border-radius: 3px;
  background: var(--fn-bg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
  font-weight: 500;
  line-height: 1.4;
}

.fn-node.note.selected { box-shadow: 0 0 0 2px var(--ink); }

.fn-node.note .fn-title {
  display: block;
  height: 100%;
  white-space: pre-wrap;
}

.fn-node.text {
  display: block;
  padding: 5px 6px;
  border-color: transparent;
  background: none;
  color: var(--fn-fg, var(--text));
  font-size: 15px;
}

.fn-node.text.selected { border-color: var(--ink); }

.fn-node.text .fn-title {
  display: block;
  overflow: visible;
  white-space: pre-wrap;
}

.fn-handle {
  position: absolute;
  z-index: 1;
  width: 10px;
  height: 10px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: var(--bg-solid);
  opacity: 0;
  cursor: crosshair;
  transition: opacity 0.1s;
}

/* Área de clique maior do que a bolinha. */
.fn-handle::after {
  content: "";
  position: absolute;
  inset: -7px;
}

.fn-handle.t { left: 50%; top: -6px; margin-left: -5px; }
.fn-handle.b { left: 50%; bottom: -6px; margin-left: -5px; }
.fn-handle.l { top: 50%; left: -6px; margin-top: -5px; }
.fn-handle.r { top: 50%; right: -6px; margin-top: -5px; }

.fn-node:hover .fn-handle,
.fn-node.selected .fn-handle,
.fn-canvas.connecting .fn-handle { opacity: 1; }

.fn-canvas.dragging:not(.connecting) .fn-handle { opacity: 0; }

.fn-resize {
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--ink);
  border-radius: 3px;
  background: var(--bg-solid);
  opacity: 0;
  cursor: nwse-resize;
  pointer-events: auto;
}

.fn-node.selected .fn-resize { opacity: 1; }

/* Cores próprias e blocos redimensionados (usados nos processos) */

.fn-node.has-fill:not(.diamond) { background: var(--fn-fill); }
.fn-node.has-stroke:not(.diamond) { border: 1.5px solid var(--fn-stroke); }
.fn-node.has-ink { color: var(--fn-ink); }
.fn-node.has-ink .fn-kind { color: inherit; opacity: 0.75; }
.fn-node.has-ink .fn-ico { color: var(--fn-ink); }

/* Esticado, o bloco mostra o texto inteiro que couber, sem cortar em duas linhas. */
/* "safe": se o texto não couber, ele começa do topo em vez de perder o início. */
.fn-node.sized .fn-main { align-items: safe center; overflow: hidden; padding-top: 8px; padding-bottom: 8px; }
.fn-node.sized .fn-text { max-height: 100%; }
.fn-node.sized:not(.frame) .fn-title { display: block; -webkit-line-clamp: unset; }
.fn-node.sized .fn-kind { white-space: normal; }

/* Processos: modo de visualização e painel de detalhes */

.fn-editor.readonly .fn-palette,
.fn-editor.readonly .fn-handle,
.fn-editor.readonly .fn-resize,
.fn-editor.readonly [data-fn="undo"],
.fn-editor.readonly [data-fn="redo"] { display: none; }

.fn-editor.readonly .fn-canvas { cursor: grab; }
.fn-editor.readonly .fn-canvas.dragging { cursor: grabbing; }
.fn-editor.readonly .fn-node { cursor: pointer; }
.fn-editor.readonly .fn-edge-hit { pointer-events: none; }

.pr-name {
  min-width: 0;
  padding: 0 4px 0 8px;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pr-area {
  flex: none;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--hover);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.fn-bar .btn { margin-left: 4px; }

.pr-panel {
  width: 320px;
  flex: none;
  padding: 14px 16px 24px;
  border-left: 1px solid var(--border);
  background: var(--bg);
  overflow-y: auto;
}

/* Em telas médias o painel passa por cima do quadro, para não espremer o desenho. */
/* ---------- Histórico ---------- */

.hs-bar {
  display: flex;
  margin-bottom: 16px;
}

.hs-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.hs-tab {
  flex: none;
  padding: 9px 12px 7px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.hs-tab:hover { color: var(--text); }
.hs-tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--text); }

.hs-block + .hs-block { margin-top: 32px; }

.hs-block-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.hs-block-head .spacer { flex: 1; }

.hs-title {
  width: 160px;
  padding: 4px 8px;
  margin-left: -8px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 18px;
  font-weight: 600;
}

.hs-title:hover { border-color: var(--border); }
.hs-title:focus { outline: none; border-color: var(--border-strong); background: var(--bg); }

.hs-summary { color: var(--text-muted); font-size: 13px; }

.hs-currency {
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-weight: 600;
}

.hs-delete { padding: 6px 12px; }

.hs-scroll {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.hs-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.hs-table th,
.hs-table td {
  padding: 0;
  border-bottom: 1px solid var(--border);
  text-align: right;
  white-space: nowrap;
}

.hs-table tbody tr:last-child > *,
.hs-table tfoot tr > * { border-bottom: 0; }

.hs-table td + td,
.hs-table th + td,
.hs-table thead th + th { border-left: 1px solid var(--border); }

.hs-table thead th {
  padding: 9px 10px;
  background: var(--sidebar-bg);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* A primeira coluna (métrica ou país) fica parada enquanto a tabela rola para o lado. */
.hs-table tr > :first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  padding: 9px 14px;
  border-right: 1px solid var(--border);
  background: var(--bg);
  text-align: left;
  font-weight: 600;
}

.hs-table thead tr > :first-child { background: var(--sidebar-bg); }

.hs-unit { color: var(--text-muted); font-weight: 400; text-transform: none; letter-spacing: 0; }

.hs-cell {
  width: 100%;
  min-width: 76px;
  padding: 9px 10px;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: right;
}

.hs-cell:hover { background: var(--sidebar-bg); }
.hs-cell:focus { outline: 2px solid var(--focus); outline-offset: -2px; background: var(--bg); }
.hs-cell.invalid,
.hs-cell.invalid:focus { outline: 2px solid var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); }

.hs-calc {
  padding: 9px 10px !important;
  background: var(--sidebar-bg);
  color: var(--text-muted);
  font-weight: 600;
}

.hs-table tfoot td,
.hs-table tfoot th {
  padding: 10px;
  border-top: 1px solid var(--border);
  background: var(--sidebar-bg) !important;
  font-weight: 700;
}

/* Cabeçalho de país: nome editável e botão de remover. */
.hs-table thead th.hs-col { padding: 3px 4px 3px 6px; text-transform: none; letter-spacing: 0; }

.hs-col-head {
  display: flex;
  align-items: center;
  gap: 2px;
}

.hs-name {
  width: 100%;
  min-width: 90px;
  padding: 6px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
}

.hs-col .hs-name { text-align: right; }
.hs-name:hover { border-color: var(--border); }
.hs-name:focus { outline: none; border-color: var(--border-strong); background: var(--bg); }
.hs-name::placeholder { color: var(--text-muted); font-weight: 400; }

.hs-sales tbody th[scope="row"] { padding: 3px 6px 3px 8px; }

.hs-remove { width: 26px; height: 26px; opacity: 0; }
.hs-col-head:hover .hs-remove,
.hs-remove:focus-visible,
.hs-remove.confirm { opacity: 1; }
.hs-remove.confirm { background: color-mix(in srgb, #b3261e 22%, var(--bg-solid)); color: color-mix(in srgb, #b3261e 66%, var(--text)); }

.hs-table .hs-add-col {
  width: 1%;
  padding: 3px 6px;
  border-left: 1px solid var(--border);
}

.hs-table thead th.hs-add-col { text-transform: none; letter-spacing: 0; }

.hs-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.hs-add:hover { background: var(--hover); color: var(--text); }
.hs-add svg { width: 14px; height: 14px; }

.hs-table .hs-add-row th { padding: 3px 6px; }

@media (max-width: 760px) {
  .hs-remove { opacity: 1; }
  .hs-bar .segmented { width: 100%; }
  .hs-bar .segmented button { flex: 1; padding: 5px 8px; }
}

@media (max-width: 1180px) {
  .pr-panel {
    position: absolute;
    z-index: 7;
    top: 0;
    right: 0;
    bottom: 0;
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.08);
  }
}

.pr-panel-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.pr-panel-head strong { flex: 1; font-weight: 600; }

.pr-title {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.pr-due {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--text-muted);
}

.pr-due svg { width: 15px; height: 15px; }

.pr-panel > .btn { margin-bottom: 12px; }

.pr-desc {
  margin: 0 0 4px;
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.pr-section {
  margin: 18px 0 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.pr-check,
.pr-links {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 1.45;
}

.pr-check li {
  position: relative;
  padding: 3px 0 3px 24px;
  overflow-wrap: anywhere;
}

.pr-check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 13px;
  height: 13px;
  border: 1.5px solid var(--text-faint);
  border-radius: 4px;
}

.pr-links a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  color: var(--text);
  overflow-wrap: anywhere;
}

.pr-links a:hover { text-decoration: underline; }
.pr-links svg { flex: none; width: 14px; height: 14px; color: var(--text-muted); }

.pr-none {
  margin: 0;
  font-size: 13.5px;
  color: var(--text-muted);
}

.pr-row {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  margin-bottom: 6px;
}

.pr-row > input,
.pr-link { flex: 1; min-width: 0; }

.pr-link {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pr-paint {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}

.pr-paint-label {
  flex: none;
  width: 62px;
  padding-top: 3px;
  font-size: 12.5px;
  font-weight: 600;
}

.pr-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pr-swatch {
  position: relative;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 50%;
  background: var(--sw, transparent);
  cursor: pointer;
}

.pr-swatch[aria-pressed="true"],
.pr-custom.on { box-shadow: 0 0 0 2px var(--bg-solid, var(--bg)), 0 0 0 3.5px var(--c-sel, var(--ink)); }

/* "Padrão": metade clara, metade escura. "Sem contorno": círculo cortado. */
.pr-swatch.default { background: linear-gradient(135deg, #ffffff 50%, #8d8a82 50%); }
.pr-swatch.none { background: linear-gradient(135deg, transparent 45%, #b3261e 45%, #b3261e 55%, transparent 55%); }

.pr-custom { background: var(--sw, conic-gradient(#e5484d, #f5a623, #f8e71c, #46a758, #3e63dd, #8e4ec6, #e5484d)); }

.pr-custom input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.pr-size { margin-top: 14px; }

.pr-hint {
  margin: -6px 0 10px;
  font-size: 12px;
  color: var(--text-muted);
}

.pr-add {
  gap: 6px;
  font-size: 13px;
}

/* Sobreposições da tela */

.fn-marquee {
  position: absolute;
  z-index: 5;
  border: 1px solid var(--ink);
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  pointer-events: none;
}

.fn-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 24px;
  color: var(--text-muted);
  text-align: center;
  pointer-events: none;
}

.fn-help {
  position: absolute;
  left: 14px;
  bottom: 14px;
  margin: 0;
  font-size: 11.5px;
  color: var(--text-muted);
  pointer-events: none;
}

.fn-ctx,
.fn-zoom {
  position: absolute;
  z-index: 6;
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  background: var(--bg);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  cursor: default;
}

.fn-ctx {
  top: 12px;
  left: 50%;
  gap: 4px;
  max-width: calc(100% - 24px);
  padding: 5px 7px;
  border-radius: 10px;
  overflow-x: auto;
  transform: translateX(-50%);
}

.fn-ctx .icon-btn { flex: none; }

.fn-ctx .icon-btn[aria-pressed="true"] {
  background: var(--active);
  color: var(--text);
}

.fn-sep {
  flex: none;
  width: 1px;
  height: 20px;
  margin: 0 4px;
  background: var(--border);
}

.fn-swatch {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0 2px;
  padding: 0;
  border: 1.5px solid var(--fn-fg, var(--text-muted));
  border-radius: 50%;
  background: var(--fn-bg, var(--bg-solid));
  cursor: pointer;
}

.fn-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--ink); }

.fn-ctx-input {
  flex: none;
  width: 130px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
}

.fn-ctx-input:focus {
  outline: 2px solid var(--focus);
  outline-offset: -1px;
}

.fn-zoom {
  right: 12px;
  bottom: 12px;
  gap: 2px;
  padding: 3px;
  border-radius: 9px;
}

.fn-zoom-label {
  min-width: 50px;
  padding: 7px 4px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

.fn-zoom-label:hover { background: var(--hover); }

/* ---------- Reuniões ---------- */

.mt-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mt-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: border-color 0.12s;
}

.mt-card:hover,
.mt-card.open { border-color: var(--border-strong); }

.mt-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 13px 16px 13px 12px;
  border: 0;
  border-radius: 11px;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.mt-head:hover { background: var(--soft); }

.mt-head .chevron {
  width: 14px;
  height: 14px;
  color: var(--text-muted);
  transition: transform 0.15s;
}

.mt-card.open .mt-head .chevron { transform: rotate(90deg); }

.mt-card.open .mt-head {
  border-bottom: 1px solid var(--border);
  border-radius: 11px 11px 0 0;
  background: var(--sidebar-bg);
}

.mt-name {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mt-name.empty { color: var(--text-muted); font-weight: 500; }

.mt-count {
  flex: none;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--hover);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
}

.mt-date {
  flex: none;
  font-size: 12.5px;
  color: var(--text-muted);
  white-space: nowrap;
}

.mt-body {
  display: none;
  padding: 18px 16px 14px;
}

.mt-card.open .mt-body { display: block; }

.mt-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px;
  gap: 12px;
}

.mt-cols {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 20px;
  margin-top: 4px;
}

.mt-section-title {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.mt-notes {
  display: block;
  width: 100%;
  min-height: 220px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--soft);
  color: var(--text);
  font: inherit;
  line-height: 1.6;
  resize: none;
  overflow: hidden;
}

.mt-notes:focus {
  outline: 2px solid var(--focus);
  outline-offset: -1px;
  background: var(--bg);
}

.mt-actions {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mt-action,
.mt-add {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 34px;
  padding-left: 4px;
  border-radius: 7px;
}

.mt-action:hover,
.mt-action:focus-within { background: var(--sidebar-bg); }

.mt-action input[type="checkbox"] {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--ink);
  cursor: pointer;
}

.mt-action-text,
.mt-add-input,
.bf-check-text,
.bf-add-input {
  flex: 1;
  min-width: 0;
  padding: 6px 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  outline: none;
  text-overflow: ellipsis;
}

.mt-action.done .mt-action-text,
.mt-action.done .bf-check-text {
  color: var(--text-muted);
  text-decoration: line-through;
}

.mt-action .icon-btn {
  width: 28px;
  height: 28px;
  margin-right: 3px;
  opacity: 0;
}

.mt-action:hover .icon-btn,
.mt-action:focus-within .icon-btn { opacity: 1; }

.mt-add { color: var(--text-muted); }
.mt-add svg { width: 16px; height: 16px; }
.mt-add:focus-within { background: var(--sidebar-bg); color: var(--text); }

.mt-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

/* ---------- Briefing ---------- */

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

.bf-main {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

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

.bf-block-head .mt-section-title { margin: 0; }

.bf-add-date { padding: 5px 10px; font-size: 13px; }

.bf-dates {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: 12px;
}

.bf-date {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 14px;
}

.bf-date + .bf-date { border-top: 1px solid var(--border); }
.bf-date:hover,
.bf-date:focus-within { background: var(--soft); }
.bf-date:first-child { border-radius: 11px 11px 0 0; }
.bf-date:last-child { border-radius: 0 0 11px 11px; }
.bf-date:only-child { border-radius: 11px; }

.bf-date-label {
  flex: 1;
  min-width: 0;
  padding: 6px 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-weight: 600;
  outline: none;
  text-overflow: ellipsis;
}

.bf-date-label::placeholder { font-weight: 400; }

.bf-date-when {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}

.bf-date-when input {
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 13px;
}

.bf-date-when input:focus {
  outline: 2px solid var(--focus);
  outline-offset: -1px;
}

.bf-date-sep { color: var(--text-muted); }

.bf-date-mode {
  flex: none;
  padding: 3px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.bf-date-mode:hover { background: var(--hover); color: var(--text); }
.bf-date.period .bf-date-mode { border-color: var(--ink); background: var(--ink); color: var(--on-ink); }

.bf-date .icon-btn { width: 28px; height: 28px; opacity: 0; }
.bf-date:hover .icon-btn,
.bf-date:focus-within .icon-btn { opacity: 1; }

.bf-dates-empty {
  padding: 16px;
  color: var(--text-muted);
  text-align: center;
}

.bf .rt-editor { min-height: 360px; }

/* ---------- Texto formatado ---------- */

.rt {
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--soft);
}

.rt:focus-within { background: var(--bg); border-color: var(--border-strong); }

.rt-toolbar {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  border-bottom: 1px solid var(--border);
  border-radius: 9px 9px 0 0;
  background: var(--sidebar-bg);
}

.rt-group {
  display: flex;
  align-items: center;
  gap: 2px;
}

.rt-sep {
  width: 1px;
  height: 20px;
  margin: 0 4px;
  background: var(--border);
}

.rt-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.rt-btn:hover { background: var(--hover); }
.rt-btn[aria-pressed="true"] { background: var(--active); }
.rt-btn svg { width: 16px; height: 16px; }

.rt-b { font-weight: 700; }
.rt-i { font-style: italic; font-family: Georgia, serif; }
.rt-u { text-decoration: underline; }

.rt-size {
  width: 40px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  text-align: center;
}

.rt-size:focus { outline: 2px solid var(--focus); outline-offset: -1px; }

.rt-color { gap: 2px; }
.rt-a { font-weight: 600; font-size: 14px; }
.rt-color svg { width: 14px; height: 14px; }

.rt-bar {
  width: 16px;
  height: 3px;
  border-radius: 1px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.rt-pick { position: relative; }

.rt-palette {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 10;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.rt-reset {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin-bottom: 6px;
  padding: 5px 6px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.rt-reset:hover { background: var(--hover); }
.rt-reset svg { width: 14px; height: 14px; color: var(--text-muted); }

.rt-swatches {
  display: grid;
  grid-template-columns: repeat(10, 18px);
  gap: 3px;
}

.rt-swatches .rt-swatch:nth-child(-n + 10) { margin-bottom: 5px; }
.rt-swatches .rt-swatch:nth-child(n + 11):nth-child(-n + 20) { margin-bottom: 5px; }

.rt-swatch {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  cursor: pointer;
}

.rt-swatch:hover { transform: scale(1.18); box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--ink); }

.rt-editor {
  padding: 12px 14px;
  color: var(--text);
  line-height: 1.6;
  outline: none;
  overflow-wrap: anywhere;
}

.rt-editor.empty::before {
  content: attr(data-placeholder);
  color: var(--text-muted);
  pointer-events: none;
  position: absolute;
}

.rt-editor ul,
.rt-editor ol { margin: 4px 0; padding-left: 24px; }
.rt-editor ul ul { list-style-type: circle; }
.rt-editor ul ul ul { list-style-type: square; }

.bf-side {
  position: sticky;
  top: 0;
  padding: 16px 12px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
}

.bf-side .bf-block-head { padding: 0 4px; }

.bf-progress {
  height: 4px;
  margin: 0 4px 12px;
  border-radius: 999px;
  background: var(--hover);
  overflow: hidden;
}

.bf-progress span {
  display: block;
  height: 100%;
  background: var(--ink);
  transition: width 0.2s;
}

.bf-check-group + .bf-check-group { margin-top: 10px; }

.bf-check-group-title {
  margin: 0 0 2px;
  padding: 0 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
}

.bf-check-empty {
  margin: 4px;
  color: var(--text-muted);
}

.bf-side .mt-add { margin-top: 8px; }

@media (max-width: 960px) {
  .bf { grid-template-columns: minmax(0, 1fr); }
  .bf-side { position: static; }
}

@media (max-width: 760px) {
  .bf-date { flex-wrap: wrap; row-gap: 4px; }
  .bf-date-label { flex-basis: 100%; }
  .bf-date .icon-btn { opacity: 1; margin-left: auto; }
  .bf-date-when input { min-width: 0; }
}

/* ---------- Esteira de produtos ---------- */

.pd-st-construcao { --ev-bg: color-mix(in srgb, #b05708 22%, var(--bg-solid)); --ev-fg: color-mix(in srgb, #b05708 62%, var(--text)); }
.pd-st-pausado { --ev-bg: color-mix(in srgb, #5f5c55 22%, var(--bg-solid)); --ev-fg: color-mix(in srgb, #5f5c55 62%, var(--text)); }
.pd-st-descontinuado { --ev-bg: color-mix(in srgb, #b3261e 22%, var(--bg-solid)); --ev-fg: color-mix(in srgb, #b3261e 62%, var(--text)); }

.pd-summary {
  margin: -8px 0 24px;
  color: var(--text-muted);
}

.pd-shelf + .pd-shelf { margin-top: 26px; }

.pd-shelf-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

.pd-shelf-head .link-group-title {
  margin: 0;
  color: var(--text);
}

.pd-shelf-hint {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  color: var(--text-muted);
}

.pd-empty {
  margin: 0;
  padding: 6px 0;
  font-size: 12.5px;
  color: var(--text-muted);
}

.pd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 14px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.pd-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 10px 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  cursor: pointer;
  transition: border-color 0.12s;
}

.pd-card:hover { border-color: var(--border-strong); }
.pd-card.muted { background: var(--sidebar-bg); }
.pd-card.muted .pd-price strong { color: var(--text-muted); }

.pd-card-head {
  display: flex;
  align-items: flex-start;
  gap: 2px;
}

.pd-card-head .link-info { padding: 5px 8px 0 0; }

.pd-name {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.pd-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 6px;
  padding-right: 6px;
}

.pd-price strong {
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.pd-price span,
.pd-price s {
  font-size: 12.5px;
  color: var(--text-muted);
}

.pd-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-right: 6px;
}

.pd-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--hover);
  font-size: 12px;
  font-weight: 600;
}

.pd-tag svg { width: 12px; height: 12px; }

.pd-tag-link {
  background: color-mix(in srgb, #1a5fc0 22%, var(--bg-solid));
  color: color-mix(in srgb, #1a5fc0 66%, var(--text));
}

.pd-tag-link:hover { text-decoration: underline; }

.pd-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-right: 6px;
}

.pd-season-wrap {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.pd-season {
  display: flex;
  gap: 2px;
}

.pd-season i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 4px;
  background: var(--hover);
  color: var(--text-faint);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}

.pd-season i.on { background: var(--ink); color: var(--on-ink); }
.pd-season i.now { box-shadow: 0 0 0 1.5px var(--bg), 0 0 0 3px #c2620a; }

.pd-season-note {
  font-size: 12.5px;
  color: var(--text-muted);
}

.pd-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.pd-chips:empty { display: none; }

.pd-chip {
  padding: 4px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
}

.pd-chip:hover { background: var(--sidebar-bg); }

.pd-chip[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--on-ink);
}

.pd-months {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

.pd-months .pd-chip { padding: 4px 0; }

.pd-hint {
  display: block;
  margin: -2px 0 8px;
  font-size: 12px;
  color: var(--text-muted);
}

/* ---------- Acessos ---------- */

.ac-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) auto;
}

.ac-creds {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.ac-cred {
  display: flex;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;
  padding-left: 10px;
  border-radius: 7px;
  background: var(--sidebar-bg);
  font-size: 13px;
}

.ac-cred-text {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ac-secret { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.ac-via {
  --ev-bg: color-mix(in srgb, #1a5fc0 22%, var(--bg-solid));
  --ev-fg: color-mix(in srgb, #1a5fc0 62%, var(--text));
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
}

.ac-via svg { width: 13px; height: 13px; }

/* ---------- Painel central ---------- */

.back-link {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: -10px 16px 10px;
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
}

.back-link:hover { background: var(--hover); color: var(--text); }
.back-link svg { width: 14px; height: 14px; }

.cal-project + .cal-project { margin-left: 0; }

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

.stat {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
}

.stat-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.stat-value {
  margin-top: 6px;
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.stat-sub {
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.ov-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px 20px;
  align-items: start;
}

.ov-row { padding-right: 16px; }
a.ov-row:hover, .ov-row[data-event]:hover { background: var(--soft); }
.ov-row[data-event] { cursor: pointer; }
.ov-row:first-child { border-radius: 12px 12px 0 0; }
.ov-row:last-child { border-radius: 0 0 12px 12px; }
.ov-row:only-child { border-radius: 12px; }

.ov-when {
  flex: none;
  font-size: 12.5px;
  color: var(--text-muted);
  white-space: nowrap;
}

.ov-when.soon { color: color-mix(in srgb, #c2620a 66%, var(--text)); font-weight: 600; }

.ov-empty {
  margin: 0;
  padding: 14px 16px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.pn-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: -8px 0 20px;
}

.pn-toolbar .pd-chips { margin: 0; }

.pn-search {
  width: 220px;
  margin-left: auto;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
}

.pn-search:focus { outline: 2px solid var(--focus); outline-offset: -1px; }

/* Status do cliente: só a cor (anel na foto, bolinha nos filtros); o nome fica no title. */
.cl-st-ativo { --st: #22a55a; }
.cl-st-onboarding { --st: #2f7de1; }
.cl-st-pausado { --st: #e0a100; }
.cl-st-encerrado { --st: var(--text-faint); }

.cl-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--st);
  flex: none;
}

.cl-flt { display: inline-flex; align-items: center; gap: 7px; }
.cl-flt b { font-weight: 600; color: var(--text-muted); }
.cl-flt[aria-pressed="true"] b { color: color-mix(in srgb, var(--on-ink) 60%, transparent); }

.cl-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

.cl-card {
  position: relative;
  align-items: center;
  gap: 0;
  padding: 26px 18px 0;
  border-radius: 14px;
  text-align: center;
  transition: border-color 0.12s, box-shadow 0.12s;
}

.cl-card:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06); }
.cl-card.ended { background: var(--sidebar-bg); }
.cl-card.ended .cl-photo > * { filter: grayscale(1); opacity: 0.7; }

.cl-edit { position: absolute; top: 10px; right: 10px; }

.cl-photo {
  position: relative;
  width: 76px;
  height: 76px;
  flex: none;
}

.cl-photo::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 2px solid var(--st);
  border-radius: 50%;
}

.cl-photo img,
.cl-photo span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-size: 23px;
  font-weight: 800;
}

.cl-name {
  margin-top: 14px;
  font-size: 15px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.cl-niche {
  margin-top: 1px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.cl-links {
  display: flex;
  justify-content: center;
  gap: 6px;
  max-width: 100%;
  margin: 14px 0 18px;
}

.cl-links:empty { margin-top: 0; }

.cl-lnk {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  background: var(--sidebar-bg);
  font-size: 12.5px;
  font-weight: 500;
}

.cl-lnk span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-lnk svg { width: 14px; height: 14px; color: var(--text-muted); }
.cl-lnk:hover { background: var(--hover); }
.cl-lnk:hover svg { color: var(--text); }
.cl-lnk.ico { width: 28px; height: 28px; padding: 0; justify-content: center; flex: none; }
.cl-card.ended .cl-lnk { background: var(--hover); }

.cl-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  align-self: stretch;
  margin: auto -18px 0;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
}

.cl-team { display: flex; align-items: center; min-width: 0; }

.cl-team i {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 26px;
  height: 26px;
  margin-left: -7px;
  border: 2px solid var(--bg);
  border-radius: 50%;
  color: #fff;
  font-size: 9.5px;
  font-style: normal;
  font-weight: 700;
}

.cl-team i:first-child { margin-left: 0; }

.cl-team span,
.cl-team-none {
  margin-left: 8px;
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cl-team-none { margin-left: 0; }
.cl-card.ended .cl-team i { border-color: var(--sidebar-bg); }

/* Popup do cliente: foto e status */

.cl-uploader {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
  padding: 6px;
  border-radius: 12px;
}

.cl-uploader.dragging { background: var(--sidebar-bg); outline: 1.5px dashed var(--border-strong); }

.cl-drop {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 84px;
  height: 84px;
  padding: 0;
  border: 1.5px dashed var(--border-strong);
  border-radius: 50%;
  background: var(--sidebar-bg);
  color: var(--text-muted);
  cursor: pointer;
}

.cl-drop.has-photo { border-style: solid; border-color: transparent; }
.cl-drop.has-photo > svg { display: none; }
.cl-drop > svg { width: 22px; height: 22px; }

.cl-drop img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.cl-cam {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 3px solid var(--bg);
  border-radius: 50%;
  background: var(--ink);
  color: var(--on-ink);
}

.cl-cam svg { width: 13px; height: 13px; }

.cl-uploader-text { min-width: 0; }
.cl-uploader-text strong { display: block; margin-bottom: 3px; font-weight: 600; }
.cl-uploader-text p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--text-muted); }

.cl-photo-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.btn-sm { padding: 5px 11px; font-size: 12.5px; }

.cl-photo-link {
  width: 100%;
  margin-top: 8px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  font: inherit;
  font-size: 13px;
}

.cl-photo-link:focus { outline: 2px solid var(--focus); outline-offset: -1px; }

.cl-status-pick {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.cl-status-pick input { position: absolute; opacity: 0; pointer-events: none; }

.field .cl-status-pick span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 7px 4px;
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.cl-status-pick span:hover { background: var(--sidebar-bg); }
.cl-status-pick input:checked + span { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.cl-status-pick input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

.pd-card.static { cursor: default; }

.pn-lines {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-right: 6px;
  font-size: 12.5px;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.pn-note {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.cl-open {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 12.5px;
  font-weight: 600;
}

.cl-open:hover { text-decoration: underline; }
.cl-open svg { width: 14px; height: 14px; }

.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--on-ink);
  font-family: "Montserrat", sans-serif;
  font-size: 12.5px;
  font-weight: 800;
}

.tm-avatar {
  width: 44px;
  height: 44px;
  overflow: hidden;
  font-size: 14px;
  color: #fff;
}

.avatar img,
.cl-team i img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.cl-team i { overflow: hidden; }

.tm-whatsapp:hover { color: #1a9e55; }

.sw-title:hover { text-decoration: underline; }

.cal-list .num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.cal-list small {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
}

.pj-star {
  width: 13px;
  height: 13px;
  margin-left: 6px;
  vertical-align: -1px;
  fill: #e0a100;
  stroke: #e0a100;
}

/* ---------- Popups ---------- */

.modal-wide { width: min(560px, calc(100vw - 32px)); }

.modal {
  width: min(440px, calc(100vw - 32px));
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg);
  color: var(--text);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
}

.modal::backdrop { background: rgba(0, 0, 0, 0.3); }

.modal-title {
  margin: 0 0 18px;
  font-size: 18px;
  font-weight: 600;
}

.modal-desc {
  margin: -12px 0 18px;
  color: var(--text-muted);
}

.field {
  display: block;
  margin-bottom: 14px;
}

.field span {
  display: block;
  margin-bottom: 5px;
  font-size: 12.5px;
  font-weight: 600;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
}

.field textarea { display: block; resize: vertical; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 2px solid var(--focus);
  outline-offset: -1px;
}

.utm-preview {
  padding: 10px 12px;
  border-radius: 7px;
  background: var(--sidebar-bg);
  color: var(--text-muted);
  font-size: 12.5px;
  word-break: break-all;
}

.modal-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
}

.modal-actions .spacer { flex: 1; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 30;
  padding: 9px 16px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--on-ink);
  font-weight: 600;
  opacity: 0;
  transform: translate(-50%, 8px);
  pointer-events: none;
  transition: opacity 0.15s, transform 0.15s;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---------- Mobile ---------- */

.menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-left: -8px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--text);
  cursor: pointer;
}

.menu-btn:hover { background: var(--hover); }

.scrim { display: none; }

@media (max-width: 760px) {
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 20;
    transform: translateX(-100%);
    transition: transform 0.2s;
  }

  .app.menu-open .sidebar { transform: none; }

  .app.menu-open .scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 10;
    background: rgba(0, 0, 0, 0.3);
  }

  .menu-btn { display: flex; }
  .topbar { padding: 0 16px; }
  .content { padding: 24px 16px 40px; }

  .cal-week { min-height: 116px; }
  .cal-weekdays span { padding: 8px 4px; text-align: center; letter-spacing: 0; }
  .cal-chip, .cal-more { margin: 0 2px; padding: 0 4px; font-size: 11px; }
  .cal-chip-time { display: none; }
  .tg-week { min-width: 680px; }
  .cal-project { margin-left: 0; }
  .pn-search { width: 100%; margin-left: 0; }
  .cl-status-pick { grid-template-columns: repeat(2, 1fr); }

  .ac-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; }
  .ac-creds { grid-row: 2; grid-column: 1 / -1; flex-wrap: wrap; }
  .ac-cred { flex-basis: 140px; }

  .mt-fields, .mt-cols { grid-template-columns: minmax(0, 1fr); }
  .mt-fields { gap: 0; }
  .mt-action .icon-btn { opacity: 1; }

  .fn-saved, .fn-help { display: none; }
  .fn-palette-btn { display: inline-flex; }
  .fn-name { width: auto; flex: 1; }

  .fn-palette {
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 8;
    box-shadow: 8px 0 24px rgba(0, 0, 0, 0.1);
    transform: translateX(-105%);
    transition: transform 0.2s;
  }

  .fn-editor.palette-open .fn-palette { transform: none; }

  .pr-area { display: none; }

  .pr-panel {
    position: absolute;
    z-index: 7;
    inset: auto 0 0 0;
    width: auto;
    max-height: 60%;
    border-left: 0;
    border-top: 1px solid var(--border);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.1);
  }
}

/* Interrogação com explicação ao passar o mouse (ou focar com o teclado). */
.field.has-help { position: relative; }

.help-tip {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin-left: 4px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg);
  color: var(--text-muted);
  font: inherit;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  vertical-align: 1px;
  cursor: help;
}

.help-tip:hover,
.help-tip:focus-visible { color: var(--text); border-color: var(--text-muted); }

.help-tip:hover::after,
.help-tip:focus-visible::after {
  content: attr(data-tip);
  position: absolute;
  z-index: 10;
  top: 22px;
  left: 0;
  right: 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--on-ink);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

/* ---------- Planejamento ---------- */

.pl-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.pl-top .spacer { flex: 1; }

.pl-phase {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--hover);
  font-size: 12px;
  font-weight: 700;
}

/* As métricas de resumo ficam presas no topo enquanto a página rola. */
.pl-summary {
  position: sticky;
  top: -32px;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
  margin: 0 0 28px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--border);
  overflow: hidden;
  box-shadow: 0 0 0 8px var(--bg);
}

.pl-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 12px 14px;
  background: var(--bg);
}

.pl-stat.calc { background: var(--sidebar-bg); }

/* Resumo do gratuito: só três métricas. */
.pl-summary.short { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.pl-stat-label {
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pl-stat-value,
.pl-stat-input {
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pl-stat-input {
  width: 100%;
  min-width: 0;
  padding: 2px 6px;
  margin: 0 -7px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
}

.pl-stat-input:focus { outline: 2px solid var(--focus); outline-offset: -1px; }
.pl-stat-input.invalid { outline: 2px solid var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); }

.pl-stat-money {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-left: 7px;
}

.pl-stat-money > span { color: var(--text-muted); font-size: 13px; font-weight: 600; }
.pl-stat-money .pl-stat-input { margin-left: 0; }

.pl-stat-note { color: var(--text-muted); font-size: 12px; }

.pl-block + .pl-block,
.pl-block + .pl-grid,
.pl-grid + .pl-grid { margin-top: 32px; }

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

.pl-grid > .pl-block { margin-top: 0; }

.pl-table .pl-text { text-align: left; }
.pl-table tbody .pl-text,
.pl-table tbody tr > th.pl-text:first-child { padding: 3px 6px 3px 8px; }

.pl-table tbody .pl-text .hs-name { min-width: 120px; }

.pl-fixed { display: block; padding: 6px 7px; font-size: 13px; font-weight: 600; }

.pl-table .pl-remove-col { width: 1%; padding: 2px 4px; border-left: 0; }
.pl-table tbody tr:hover .hs-remove { opacity: 1; }

.pl-table tfoot td.pl-off { color: var(--danger); }

.pl-title { display: flex; align-items: center; gap: 7px; }
.pl-title svg { width: 15px; height: 15px; }

.pl-hint { margin: 8px 2px 0; color: var(--text-muted); font-size: 12.5px; }

/* Fases de teste e escala do lançamento gratuito. */
.pl-stage {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}

.pl-stage-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.pl-stage-title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 17px; font-weight: 700; }
.pl-stage-title svg { width: 18px; height: 18px; }
.pl-stage-desc { max-width: 560px; margin: 4px 0 0; color: var(--text-muted); font-size: 13px; }

.pl-stage-stats {
  display: flex;
  gap: 1px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--border);
  overflow: hidden;
}

.pl-stage-stats .pl-stat { min-width: 170px; }

.pl-cluster {
  padding: 12px 14px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--sidebar-bg);
}

.pl-cluster + .pl-cluster { margin-top: 14px; }

.pl-cluster-head { display: flex; align-items: center; gap: 6px; margin: 0 0 10px -6px; }
.pl-cluster-name { max-width: 340px; font-size: 15px; }
.pl-cluster:hover .pl-cluster-head .hs-remove { opacity: 1; }

.pl-cluster-body {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.pl-cluster .hs-scroll { background: var(--bg); }
.pl-cluster thead th { white-space: normal; vertical-align: bottom; }

.pl-add-block { margin-top: 10px; }

.pl-temp { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; vertical-align: 1px; }
.pl-temp.cold { background: #2f6fde; }
.pl-temp.hot { background: #d6402e; }

@media (max-width: 900px) {
  .pl-cluster-body { grid-template-columns: minmax(0, 1fr); }
}

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

@media (max-width: 760px) {
  .pl-summary { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl-summary.short { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Dashboard ---------- */

.db-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 6px 6px 6px 14px;
  border-radius: 10px;
  background: var(--sidebar-bg);
}

.db-filters-label {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.db-periods {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

.db-periods button {
  padding: 6px 12px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.db-periods button:hover { color: var(--text); }

.db-periods button[aria-pressed="true"] {
  background: var(--bg);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.db-dates {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
}

.db-date {
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
}

.db-date:focus { outline: 2px solid var(--focus); outline-offset: -1px; }

.db-range {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 12px 0 20px;
  color: var(--text-muted);
}

.db-range svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 640px) {
  .db-filters { padding: 10px; }
  .db-dates { width: 100%; }
  .db-date { flex: 1; min-width: 0; }
}

.db-metrics {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  gap: 12px;
}

.db-metric {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
}

.db-metric-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
}

.db-metric-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.db-metric-icon.tone-blue { background: color-mix(in srgb, #3b6fd8 22%, var(--bg-solid)); color: color-mix(in srgb, #3b6fd8 66%, var(--text)); }
.db-metric-icon.tone-green { background: color-mix(in srgb, #22a355 22%, var(--bg-solid)); color: color-mix(in srgb, #22a355 66%, var(--text)); }
.db-metric-icon.tone-violet { background: color-mix(in srgb, #8b55e0 22%, var(--bg-solid)); color: color-mix(in srgb, #8b55e0 66%, var(--text)); }
.db-metric-icon.tone-pink { background: color-mix(in srgb, #d93b78 22%, var(--bg-solid)); color: color-mix(in srgb, #d93b78 66%, var(--text)); }
.db-metric-icon.tone-navy { background: color-mix(in srgb, #24407a 22%, var(--bg-solid)); color: color-mix(in srgb, #24407a 66%, var(--text)); }

.db-metric-label {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.db-metric-value {
  margin-top: 2px;
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1100px) {
  .db-metrics { grid-template-columns: repeat(min(var(--cols, 4), 2), minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .db-metrics { grid-template-columns: 1fr; }
}

.db-section { margin-top: 28px; }

.db-section-title {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 700;
}

.db-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
}

.db-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.db-table th,
.db-table td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  text-align: right;
  white-space: nowrap;
}

.db-table th:first-child,
.db-table td:first-child { text-align: left; }

.db-table td:first-child { font-weight: 600; white-space: normal; }

.db-table thead th {
  background: var(--sidebar-bg);
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.db-table tbody tr:hover td { background: var(--sidebar-bg); }

.db-table tfoot td {
  border-bottom: 0;
  background: var(--sidebar-bg);
  font-weight: 700;
}

.db-table td.db-empty {
  padding: 28px 16px;
  color: var(--text-muted);
  font-weight: 400;
  text-align: center;
}

.db-chart-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
}

.db-legend {
  display: flex;
  gap: 16px;
  margin-bottom: 10px;
  color: var(--text-muted);
  font-size: 13px;
}

.db-legend-item { display: flex; align-items: center; gap: 6px; }

.db-legend-item i {
  width: 14px;
  height: 3px;
  border-radius: 2px;
  background: var(--src);
}

.db-chart {
  padding: 14px 12px 6px;
  border: 1px solid var(--border);
  border-radius: 12px;
}

.db-chart svg { display: block; width: auto; height: auto; stroke: none; }

.db-chart-empty {
  padding: 40px 16px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  color: var(--text-muted);
  text-align: center;
}

.src-organico { --src: #22a355; }
.src-pago { --src: #3b6fd8; }

.db-grid { stroke: var(--border); stroke-width: 1; }
.db-axis { fill: var(--text-muted); stroke: none; font-size: 11px; font-variant-numeric: tabular-nums; }

.db-line {
  fill: none;
  stroke: var(--src);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.db-dot { fill: var(--bg); stroke: var(--src); stroke-width: 2; }
.db-dot:hover { fill: var(--src); }

/* Funil: cada etapa é uma linha com a faixa do funil à esquerda e a taxa de passagem à direita. */
.db-fn {
  display: grid;
  grid-template-columns: minmax(0, 460px) 230px;
  justify-content: center;
  column-gap: 24px;
  row-gap: 4px;
  padding: 28px 20px;
  border: 1px solid var(--border);
  border-radius: 12px;
}

.db-fn-step { display: flex; justify-content: center; }

.db-fn-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 72px;
  /* Do grafite ao cinza; a última etapa (compras) ganha o verde. */
  background: hsl(40 4% calc(12% + var(--shade) * 7%));
  color: #fff;
  text-align: center;
}

.db-fn-bar.goal { background: var(--accent); color: var(--on-accent); }

.db-fn-label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  opacity: 0.8;
  text-transform: uppercase;
}

.db-fn-value {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* A taxa fica em cima da divisa com a etapa anterior, de onde as pessoas vieram. */
.db-fn-rate { position: relative; }

.db-fn-pill {
  position: absolute;
  top: -2px;
  left: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 7px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transform: translateY(-50%);
  white-space: nowrap;
}

/* Tracinho ligando o selo à divisa do funil. */
.db-fn-pill::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  width: 24px;
  border-top: 1px dashed var(--border);
}

.db-fn-pill svg {
  width: 22px;
  height: 22px;
  padding: 4px;
  border-radius: 50%;
  background: var(--sidebar-bg);
  color: var(--text-muted);
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: rotate(90deg);
}

.db-fn-rate-value {
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.db-fn-rate-label {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.db-fn-empty {
  margin: 10px 0 0;
  color: var(--text-muted);
  text-align: center;
}

@media (max-width: 640px) {
  .db-fn { grid-template-columns: minmax(0, 1fr) 110px; column-gap: 12px; padding: 16px 12px; }
  .db-fn-pill { flex-direction: column; align-items: flex-start; gap: 0; padding: 6px 10px; border-radius: 10px; white-space: normal; }
  .db-fn-pill svg, .db-fn-pill::before { display: none; }
  .db-fn-value { font-size: 18px; }
  .db-fn-label { font-size: 10px; }
}

/* ---------- Dashboard · Integração ---------- */

.db-head-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.db-updated { color: var(--text-muted); font-size: 13px; }

.db-head-actions .btn:disabled { opacity: 0.6; cursor: progress; }

/* Botão quadrado da integração; o pontinho verde indica planilha conectada. */
.db-config-btn {
  position: relative;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  color: var(--text-muted);
}

.db-config-btn:hover { color: var(--text); }

.db-config-btn.connected::after {
  content: "";
  position: absolute;
  top: 5px;
  right: 5px;
  width: 7px;
  height: 7px;
  border: 1.5px solid var(--bg);
  border-radius: 50%;
  background: #22a355;
}

.modal.db-config-modal { width: min(540px, calc(100vw - 32px)); }

.modal code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--hover);
  font-size: 12.5px;
}

.db-connect {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  color: var(--text-muted);
}

.db-connect svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.db-connect-btn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.db-errors {
  margin-bottom: 20px;
  padding: 12px 16px;
  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  color: color-mix(in srgb, var(--danger) 75%, var(--text));
}

.db-errors p { margin: 0; line-height: 1.5; }
.db-errors p + p { margin-top: 4px; }

/* ---------- Dashboard · Campanhas, Criativos, Países e Otimização ---------- */

/* Aba de otimização: só o ícone, num botão quadrado no fim da barra. */
.db-tab-icon {
  display: grid;
  flex: none;
  place-items: center;
  align-self: center;
  width: 32px;
  height: 32px;
  margin-left: 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text-muted);
  cursor: pointer;
}

.db-tab-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.db-tab-icon:hover { color: var(--text); border-color: var(--border-strong); }
.db-tab-icon[aria-selected="true"] { border-color: var(--ink); background: var(--ink); color: var(--on-ink); }

.db-section-first { margin-top: 0; }

.db-section-sub {
  margin: -4px 0 12px;
  color: var(--text-muted);
  line-height: 1.5;
}

.db-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: 12px;
}

.db-section-head .db-section-title { margin: 0; }

.db-search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.db-search input {
  width: 280px;
  max-width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}

.db-search input:focus,
.db-refs input:focus,
.db-opt-day input:focus { outline: 2px solid var(--focus); outline-offset: -1px; }

.db-empty-box {
  padding: 32px 16px;
  color: var(--text-muted);
  text-align: center;
}

/* Tabelas com nome longo na primeira coluna (campanhas e criativos). */
.db-table-names td:first-child {
  min-width: 240px;
  max-width: 380px;
  font-size: 13px;
  line-height: 1.35;
}

.db-sortable { cursor: pointer; user-select: none; }
.db-sortable:hover { color: var(--text); }

.db-table .db-groups th {
  padding-top: 9px;
  padding-bottom: 4px;
  border-bottom: 0;
  text-align: center;
}

.db-table .db-group-start { border-left: 1px solid var(--border); }

.db-check { color: var(--text-muted); font-weight: 700; }
.db-check.ok { color: #22a355; }
.db-check.bad { color: var(--danger); }

.db-creatives td,
.db-creatives th { padding-left: 12px; padding-right: 12px; }

.db-badge-cell { width: 36px; padding-left: 0 !important; padding-right: 0 !important; text-align: center !important; }

.db-dynamite {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fdc500;
  color: #fff;
  vertical-align: middle;
}

.db-dynamite svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.db-dynamite-row td { background: color-mix(in srgb, #fdc500 12%, var(--bg-solid)); }

.db-refs {
  margin-bottom: 20px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--sidebar-bg);
}

.db-refs-head p { margin: -6px 0 12px; color: var(--text-muted); }

.db-refs-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.db-refs-grid .field { margin: 0; }

.db-refs-grid input {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
}

/* Países: barras horizontais de entradas. */
.db-bars {
  display: grid;
  gap: 8px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
}

.db-bar-row {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr) 90px;
  align-items: center;
  gap: 12px;
}

.db-bar-label {
  display: flex;
  align-items: center;
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.db-bar-track { height: 18px; border-radius: 5px; background: var(--sidebar-bg); }
.db-bar { display: block; height: 100%; min-width: 4px; border-radius: 5px; background: #3b6fd8; }

.db-bar-value { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.db-bar-value small { color: var(--text-muted); font-size: 12px; font-weight: 600; }

.db-flag {
  display: inline-block;
  flex: none;
  width: 20px;
  height: 15px;
  margin-right: 8px;
  border-radius: 3px;
  background: var(--sidebar-bg);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
  object-fit: cover;
  vertical-align: -3px;
}

/* Otimização: Dia X em azul claro, Dia Y em azul mais forte. */
.db-opt-controls {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}

.db-opt-controls .db-search,
.db-opt-day {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--sidebar-bg);
}

.db-opt-controls .db-search input { width: 100%; }

.db-opt-day {
  display: flex;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.db-opt-day input {
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  letter-spacing: 0;
}

.db-opt-day.x { box-shadow: inset 0 3px 0 #9dbbe6; }
.db-opt-day.y { box-shadow: inset 0 3px 0 #3b6fd8; }

.db-opt { min-width: 1180px; }
.db-opt td:first-child { min-width: 320px; }
.db-opt .db-opt-x { background: color-mix(in srgb, #3b6fd8 6%, var(--bg-solid)); }
.db-opt .db-opt-y { background: color-mix(in srgb, #3b6fd8 12%, var(--bg-solid)); }
.db-opt thead .db-groups th.db-opt-x { box-shadow: inset 0 3px 0 #9dbbe6; color: var(--text); }
.db-opt thead .db-groups th.db-opt-y { box-shadow: inset 0 3px 0 #3b6fd8; color: var(--text); }

/* A coluna da campanha fica parada quando a tabela rola para o lado. */
.db-opt td:first-child,
.db-opt th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--bg);
  box-shadow: 1px 0 0 var(--border);
}

.db-opt thead th:first-child,
.db-opt tfoot td:first-child { background: var(--sidebar-bg); }

@media (max-width: 760px) {
  .db-refs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .db-opt-controls { grid-template-columns: 1fr 1fr; }
  .db-opt-controls .db-search { grid-column: 1 / -1; }
  .db-bar-row { grid-template-columns: 110px minmax(0, 1fr) 70px; gap: 8px; }
  .db-table-names td:first-child { min-width: 160px; }
}

/* Funil: gráfico de uma taxa por dia, escolhida nos botões acima dele. */
.db-rate-picker {
  padding: 3px;
  border-radius: 9px;
  background: var(--sidebar-bg);
}

.db-rate-picker button { padding: 5px 11px; font-size: 13px; }

.db-rate-line { --src: #3b6fd8; }

.db-point-value {
  fill: color-mix(in srgb, #3b6fd8 66%, var(--text));
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Pop-up do relatório de vendas. */
.modal.db-report-modal { width: min(520px, calc(100vw - 32px)); }

.db-report-text {
  display: block;
  width: 100%;
  min-height: min(540px, 62vh);
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--sidebar-bg);
  color: var(--text);
  font: 13.5px/1.55 ui-monospace, "SF Mono", Menlo, monospace;
  resize: vertical;
}

.db-report-text:focus { outline: 2px solid var(--focus); outline-offset: -1px; }

.db-section-head .btn:disabled { opacity: 0.5; cursor: not-allowed; }