/* ---------- Temas: Light Glass Lime (claro) e Dark Lime (escuro) ----------
   Carregado depois do styles.css. As cores-base (--c-*) são as que aparecem em
   Configurações › Cores; todo o resto deriva delas. O theme.js grava a escolha do
   usuário em <html data-theme> e as cores personalizadas como estilo inline.  */

:root {
  /* Cores-base do tema claro */
  --c-accent: #E0F53B;
  --c-bg: #E4ECF7;
  --c-surface: #FFFFFF;
  --c-ink: #262628;
  --c-sel: #6E8297;
  --c-text: #121316;
  --c-text-2: #5E6672;
  --c-danger: #E5484D;
  --c-warning: #F5A524;

  /* Texto sobre as cores-base (o theme.js recalcula pelo contraste) */
  --on-accent: #121316;
  --on-c-ink: #F5F6F8;
  --on-c-sel: #FFFFFF;

  /* Derivadas */
  --accent: var(--c-accent);
  --accent-hover: color-mix(in srgb, var(--c-accent) 82%, white);
  --accent-soft: color-mix(in srgb, var(--c-accent) 28%, transparent);
  --text: var(--c-text);
  --text-muted: var(--c-text-2);
  --text-faint: color-mix(in srgb, var(--text) 32%, transparent);
  --danger: var(--c-danger);
  --warning: var(--c-warning);
  --ink: var(--c-ink);
  --on-ink: var(--on-c-ink);
  --focus: var(--c-ink);

  --bg: color-mix(in srgb, var(--c-surface) 58%, transparent);
  --bg-solid: color-mix(in srgb, var(--c-surface) 86%, var(--c-bg));
  --sidebar-bg: color-mix(in srgb, var(--c-surface) 42%, transparent);
  --soft: color-mix(in srgb, var(--c-surface) 72%, transparent);
  --control: color-mix(in srgb, var(--c-surface) 72%, transparent);
  --border: color-mix(in srgb, var(--text) 9%, transparent);
  --border-strong: color-mix(in srgb, var(--text) 18%, transparent);
  --hover: color-mix(in srgb, var(--text) 6%, transparent);
  --active: color-mix(in srgb, var(--text) 10%, transparent);

  --glass-border: color-mix(in srgb, var(--c-surface) 80%, transparent);
  --glass-blur: blur(20px) saturate(140%);
  --glass-shadow: 0 8px 32px rgba(60, 80, 120, 0.08), inset 0 1px 0 color-mix(in srgb, var(--c-surface) 90%, transparent);
  --work-shadow: 0 24px 60px rgba(20, 24, 32, 0.25);
  --app-bg: linear-gradient(160deg,
              color-mix(in srgb, var(--c-bg) 35%, white) 0%,
              var(--c-bg) 45%,
              color-mix(in srgb, var(--c-bg) 90%, #5f84bd) 100%);

  --foot-bg: color-mix(in srgb, var(--c-surface) 90%, var(--c-bg));
  --font-ui: "Inter", system-ui, sans-serif;
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --ease: cubic-bezier(.2, .8, .2, 1);

  color-scheme: light;
}

:root[data-theme="dark"] {
  /* Cores-base do tema escuro */
  --c-accent: #A3F02A;
  --c-bg: #14181F;
  --c-surface: #1E232C;
  --c-ink: #FFFFFF;
  --c-sel: #1E232C;
  --c-text: #F5F7FA;
  --c-text-2: #A3ABB8;
  --c-danger: #FF6B6B;
  --c-warning: #FFC857;

  --on-accent: #0B0E11;
  --on-c-ink: #0F1216;
  --on-c-sel: #F5F7FA;

  --focus: var(--c-accent);
  --accent-hover: color-mix(in srgb, var(--c-accent) 85%, white);
  --bg: var(--c-surface);
  --bg-solid: var(--c-surface);
  --sidebar-bg: color-mix(in srgb, var(--c-surface) 94%, var(--c-text));
  --soft: color-mix(in srgb, var(--c-surface) 94%, var(--c-text));
  --control: color-mix(in srgb, var(--c-surface) 92%, var(--c-text));
  --border: color-mix(in srgb, var(--text) 8%, transparent);
  --border-strong: color-mix(in srgb, var(--text) 16%, transparent);
  --hover: color-mix(in srgb, var(--text) 7%, transparent);

  --glass-border: color-mix(in srgb, var(--c-text) 6%, transparent);
  --glass-blur: none;
  --glass-shadow: inset 0 1px 0 color-mix(in srgb, var(--c-text) 4%, transparent);
  --work-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  --app-bg: linear-gradient(180deg, color-mix(in srgb, var(--c-bg) 92%, white) 0%, var(--c-bg) 100%);
  --foot-bg: var(--c-surface);

  color-scheme: dark;
}

/* ---------- Base ---------- */

html { background: var(--c-bg); }

body {
  font-family: var(--font-ui);
  font-size: 13.5px;
  background: var(--app-bg) fixed, var(--c-bg);
  color: var(--text);
}

.app { gap: 16px; padding: 12px; }

/* Vidro: cards e contêineres. No escuro vira superfície sólida. */
.sidebar,
.card, .stat, .link-list, .pd-card, .mt-card, .fn-card, .hs-scroll, .db-metric,
.db-table-wrap, .db-chart, .db-fn, .db-bars, .bf-dates, .bf-side, .rt, .organic-wrap,
.pl-summary, .pl-stage-stats, .pl-cluster, .db-refs, .scope-choice, .fn-bar, .fn-palette, .pr-panel {
  background: var(--bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

.card, .stat, .link-list, .pd-card, .mt-card, .fn-card, .hs-scroll, .db-metric,
.db-table-wrap, .db-chart, .db-fn, .db-bars, .bf-dates, .bf-side, .organic-wrap,
.pl-summary, .pl-stage-stats, .pl-cluster, .db-refs { border-radius: var(--radius-lg); }

.rt, .scope-choice { border-radius: var(--radius-md); }

.placeholder, .ov-empty, .db-chart-empty { border-radius: var(--radius-lg); border-color: var(--border-strong); }

/* Hover de cards de vidro: o vidro fica mais branco. */
.card:hover, .pd-card:hover, .mt-card:hover, .mt-card.open, .fn-card:hover {
  background: var(--soft);
  border-color: var(--glass-border);
}

/* ---------- Lateral ---------- */

.sidebar { border-radius: var(--radius-lg); }

.brand { padding: 18px 16px 16px; }

.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--c-ink);
  color: var(--on-c-ink);
  font-size: 13px;
}

.back-link {
  width: fit-content;
  margin: -6px 14px 12px;
  padding: 4px 12px 4px 4px;
  border-radius: 999px;
  background: var(--control);
  border: 1px solid var(--glass-border);
  color: var(--text);
  font-weight: 500;
}

.back-link svg {
  width: 24px;
  height: 24px;
  padding: 5px;
  border-radius: 50%;
  background: var(--bg-solid);
}

/* Menu: cápsula grafite (claro) ou branca (escuro), com o item ativo em limão. */
.nav {
  margin: 0 12px;
  padding: 6px;
  gap: 2px;
  border-radius: var(--radius-lg);
  background: var(--c-ink);
  color: var(--on-c-ink);
  --text: var(--on-c-ink);
  --text-muted: color-mix(in srgb, var(--on-c-ink) 62%, var(--c-ink));
  --hover: color-mix(in srgb, var(--on-c-ink) 9%, transparent);
  --active: color-mix(in srgb, var(--on-c-ink) 12%, transparent);
  --border: color-mix(in srgb, var(--on-c-ink) 14%, transparent);
}

.nav-item {
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
}

.nav-item svg { width: 17px; height: 17px; }

.nav-item.active,
.nav-item.active:hover {
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}

.nav-item.active svg { color: var(--on-accent); }

/* Grupo aberto (ex.: o projeto): leve destaque, sem competir com o ativo. */
.nav-group.open > .nav-item:not(.active) { background: var(--active); }

.nav-sub { margin: 4px 0 4px 20px; }
.nav-sub .nav-item { min-height: 32px; font-size: 12.5px; }

.upcoming { margin: 12px 12px 16px; padding-top: 4px; border-top: 0; }
.upcoming-title { font-weight: 600; letter-spacing: 0.04em; }

.upcoming-item {
  margin-bottom: 4px;
  border-radius: var(--radius-md);
  background: var(--control);
  border: 1px solid var(--glass-border);
}

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

/* Rodapé da lateral: tema e configurações. */
.sidebar-foot {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding: 22px 12px 12px;
  /* Fundo que encobre a lista de próximos eventos quando ela rola por baixo. */
  background: linear-gradient(to bottom, transparent, var(--foot-bg) 20px);
}

.theme-switch {
  flex: none;
  display: flex;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: var(--c-ink);
}

.theme-switch button {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 38px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--on-c-ink);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.theme-switch button svg { width: 16px; height: 16px; }
.theme-switch button:hover { background: color-mix(in srgb, var(--on-c-ink) 10%, transparent); }
.theme-switch button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }

.settings-btn {
  margin-left: auto;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border-strong) !important;
  background: var(--control) !important;
  color: var(--text) !important;
}

.settings-btn svg { width: 17px; height: 17px; }

/* ---------- Topo e cabeçalho ---------- */

.topbar {
  height: 56px;
  padding: 0 4px;
  border-bottom: 0;
}

.breadcrumb {
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--control);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  font-size: 12.5px;
}

.breadcrumb .sep { color: var(--text-faint); }
.breadcrumb .current { font-weight: 500; }

.menu-btn { border-radius: 50%; }

.content { padding: 20px 8px 48px; }

.page-title {
  margin-bottom: 8px;
  font-size: 36px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.page-desc { font-size: 13.5px; }

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

.btn {
  min-height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  border-color: var(--glass-border);
  background: var(--control);
  font-size: 12.5px;
  font-weight: 500;
  transition: background 0.2s var(--ease), transform 0.12s var(--ease);
}

.btn:hover { background: var(--bg-solid); }
.btn:active { transform: scale(0.98); }

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

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

/* No tema claro o limão some no fundo claro: uma borda do mesmo tom, mais escura, dá contorno. */
:root:not([data-theme="dark"]) .btn-primary {
  border-color: color-mix(in srgb, var(--accent) 72%, #000);
}

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

.btn-sm { min-height: 30px; padding: 0 12px; }

.icon-btn,
.rt-btn,
.db-tab-icon,
.db-config-btn { border-radius: 50%; }

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

/* ---------- Campos ---------- */

.field input,
.field select,
.field textarea,
.pn-search,
.cal-project,
.hs-currency,
.db-date,
.db-search input,
.db-refs-grid input,
.db-opt-day input,
.bf-date-when input,
.fn-ctx-input,
.cl-photo-link {
  border-color: var(--glass-border);
  border-radius: var(--radius-sm);
  background: var(--control);
  color: var(--text);
}

.pn-search, .cal-project { min-height: 36px; padding: 0 14px; border-radius: 999px; }

/* No tema claro o campo quase some no fundo branco: borda discreta para marcar o contorno. */
:root:not([data-theme="dark"]) :is(
  .field input, .field select, .field textarea, .pn-search, .cal-project, .hs-currency, .db-date,
  .db-search input, .db-refs-grid input, .db-opt-day input, .bf-date-when input, .fn-ctx-input,
  .cl-photo-link, .color-hex
) {
  border-color: var(--border-strong);
}

:root:not([data-theme="dark"]) :is(.field input, .field select, .field textarea, .pn-search, .color-hex):focus {
  border-color: var(--focus);
}

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

.check input,
.scope-choice input,
.mt-action input[type="checkbox"] { accent-color: var(--ink); }

/* ---------- Filtros e navegação segmentada ---------- */

.pd-chip, .cal-filter {
  min-height: 32px;
  padding: 0 14px;
  border-color: var(--glass-border);
  background: var(--control);
}

.pd-chip:hover, .cal-filter:hover { background: var(--bg-solid); }

.pd-chip[aria-pressed="true"] {
  border-color: transparent;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}

.cl-flt[aria-pressed="true"] b { color: color-mix(in srgb, var(--on-accent) 60%, transparent); }

.segmented,
.db-rate-picker {
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: var(--c-ink);
}

.segmented button {
  height: 30px;
  padding: 0 14px;
  border-radius: 999px;
  color: color-mix(in srgb, var(--on-c-ink) 80%, transparent);
  font-size: 12.5px;
  font-weight: 500;
}

.segmented button:hover { color: var(--on-c-ink); }

.segmented button[aria-pressed="true"] {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: none;
}

.db-filters { border-radius: var(--radius-lg); background: var(--bg); border: 1px solid var(--glass-border); }
.db-periods button { border-radius: 999px; }
.db-periods button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); box-shadow: none; }

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

/* ---------- Listas ---------- */

.link-row + .link-row { border-top-color: var(--border); }
.ov-row:first-child { border-radius: 21px 21px 0 0; }
.ov-row:last-child { border-radius: 0 0 21px 21px; }
.ov-row:only-child { border-radius: 21px; }

.link-group-title,
.mt-section-title,
.stat-label,
.fn-group-title,
.pr-section { font-weight: 600; letter-spacing: 0.04em; }

/* Números protagonistas: maiores e mais leves. */
.stat-value,
.db-metric-value,
.pl-stat-value,
.pl-stat-input {
  font-weight: 400;
  letter-spacing: -0.02em;
}

.stat { padding: 18px 20px; }
.stat-value { font-size: 28px; }
.db-metric-value { font-size: 26px; }
.pd-price strong { font-weight: 500; letter-spacing: -0.02em; }

.mt-count, .pr-area, .pl-phase { background: var(--control); border: 1px solid var(--glass-border); }

.ac-cred { border-radius: 999px; background: var(--control); }
.cl-lnk { background: var(--control); border: 1px solid var(--glass-border); }

.cl-card { border-radius: var(--radius-lg); }
.cl-card:hover { box-shadow: var(--glass-shadow), 0 10px 28px rgba(20, 30, 50, 0.08); }
.cl-team i { border-color: var(--bg-solid); }

.avatar { background: var(--ink); color: var(--on-ink); }

/* Tabelas: cabeçalhos em vidro mais denso. */
.hs-table thead th,
.db-table thead th,
.cal-list th,
.organic-table th { background: var(--sidebar-bg); }

.hs-table tr > :first-child,
.db-opt td:first-child,
.db-opt th:first-child,
.organic-table td.organic-actions { background: var(--bg-solid); }

.hs-table thead tr > :first-child,
.db-opt thead th:first-child { background: color-mix(in srgb, var(--bg-solid) 92%, var(--text)); }

/* Barras de progresso finas com listras diagonais. */
.bf-progress { height: 6px; background: var(--border); }
.bf-progress span {
  background: repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.14) 0 4px, transparent 4px 8px), var(--accent);
}

/* ---------- Área de trabalho (inversão) ----------
   O calendário e o quadro do funil viram a "mesa de trabalho": grafite no tema
   claro, branca no escuro. Dentro dela, a seleção usa a cor de seleção (--c-sel). */

.cal,
.fn-canvas {
  --text: var(--on-c-ink);
  --text-muted: color-mix(in srgb, var(--on-c-ink) 62%, var(--c-ink));
  --text-faint: color-mix(in srgb, var(--on-c-ink) 30%, var(--c-ink));
  --bg: color-mix(in srgb, var(--on-c-ink) 6%, var(--c-ink));
  --bg-solid: var(--c-ink);
  --sidebar-bg: color-mix(in srgb, var(--on-c-ink) 4%, var(--c-ink));
  --soft: color-mix(in srgb, var(--on-c-ink) 5%, var(--c-ink));
  --control: color-mix(in srgb, var(--on-c-ink) 8%, var(--c-ink));
  --border: color-mix(in srgb, var(--on-c-ink) 10%, transparent);
  --border-strong: color-mix(in srgb, var(--on-c-ink) 20%, transparent);
  --hover: color-mix(in srgb, var(--on-c-ink) 8%, transparent);
  --active: color-mix(in srgb, var(--on-c-ink) 12%, transparent);
  --glass-border: color-mix(in srgb, var(--on-c-ink) 10%, transparent);
  --ink: var(--c-sel);
  --on-ink: var(--on-c-sel);
  --focus: var(--c-accent);
  background-color: var(--c-ink);
  color: var(--on-c-ink);
}

.cal {
  border: 0;
  border-radius: var(--radius-xl);
  box-shadow: var(--work-shadow);
}

/* Visão mensal: cada dia vira uma célula arredondada. */
.cal:not(.tg-scroll):not(.cal-list-wrap) { padding: 10px; }
.cal-weekdays { background: none; border-bottom: 0; }
.cal-weekdays span { font-weight: 500; letter-spacing: 0.04em; }
.cal-week + .cal-week { border-top: 0; margin-top: 6px; }
.cal-days { gap: 6px; }
.cal-events { column-gap: 6px; }
.cal-day {
  border-radius: var(--radius-md);
  background: var(--bg);
}
.cal-day + .cal-day { border-left: 0; }
.cal-day:hover { background: var(--control); }
.cal-day.other { background: transparent; box-shadow: inset 0 0 0 1px var(--border); }
.cal-day.today { background: var(--c-sel); }
.cal-day.today .cal-daynum { background: var(--on-c-sel); color: var(--c-sel); }
.cal-chip { border-radius: 999px; }
.cal-chip.cont-l, .cal-chip.cont-r { border-radius: 0; }
.cal-chip.cont-l:not(.cont-r) { border-radius: 0 999px 999px 0; }
.cal-chip.cont-r:not(.cont-l) { border-radius: 999px 0 0 999px; }
.cal-chip.timed:hover { background: var(--hover); }

.tg-dayhead.today strong,
.tg-head { background: var(--c-ink); }
.tg-dayhead { background: var(--sidebar-bg); }
.tg-head .tg-row:first-child > div:first-child { background: var(--sidebar-bg); }
.tg-dayhead.today strong { background: var(--c-sel); color: var(--on-c-sel); }
.tg-col.today { background-color: color-mix(in srgb, var(--on-c-ink) 4%, transparent); }
.tg-event { box-shadow: 0 0 0 1px var(--c-ink); }
.cal-list tbody tr:hover { background: var(--hover); }

/* Quadro do funil */
.fn-canvas {
  background-image: radial-gradient(circle, var(--border-strong) 1px, transparent 1.3px);
}

.fn-node { border-color: var(--border-strong); background: var(--bg); border-radius: var(--radius-md); }
.fn-node.selected { border-color: var(--c-sel); box-shadow: 0 0 0 2px var(--c-sel); }
.fn-node.event { border-radius: 999px; }
.fn-ctx, .fn-zoom {
  border-color: var(--glass-border);
  background: var(--bg-solid);
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.fn-ctx { border-radius: var(--radius-md); }
.fn-label { background: var(--bg-solid); }

/* ---------- Sobreposições ---------- */

.modal {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: var(--bg-solid);
  box-shadow: 0 24px 60px rgba(20, 24, 32, 0.25);
}

.modal::backdrop {
  background: color-mix(in srgb, var(--c-bg) 40%, rgba(10, 14, 20, 0.45));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.modal-title { font-weight: 500; font-size: 20px; letter-spacing: -0.01em; }

.rt-palette, .fn-ghost {
  border-color: var(--glass-border);
  border-radius: var(--radius-md);
  background: var(--bg-solid);
}

.rt-toolbar { background: var(--sidebar-bg); border-radius: var(--radius-md) var(--radius-md) 0 0; }

.toast { border-radius: 999px; background: var(--ink); color: var(--on-ink); font-weight: 500; }
.help-tip:hover::after, .help-tip:focus-visible::after { border-radius: var(--radius-sm); background: var(--ink); color: var(--on-ink); }

/* ---------- Configurações ---------- */

.modal.settings-modal {
  width: min(760px, calc(100vw - 32px));
  padding: 0;
  overflow: hidden;
}

.settings {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  height: min(680px, calc(100vh - 64px));
}

.settings-side {
  padding: 22px 12px;
  border-right: 1px solid var(--border);
  background: var(--sidebar-bg);
}

.settings-side h2 {
  margin: 0 10px 14px;
  font-size: 18px;
  font-weight: 500;
}

.settings-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.settings-tab svg { width: 16px; height: 16px; }
.settings-tab:hover { background: var(--hover); }
.settings-tab[aria-selected="true"] { background: var(--ink); color: var(--on-ink); }

.settings-soon {
  margin: 14px 12px 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-muted);
}

.settings-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.settings-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 22px 22px 14px;
}

.settings-head h3 { margin: 0; font-size: 16px; font-weight: 500; }
.settings-head p { margin: 4px 0 0; font-size: 12.5px; color: var(--text-muted); line-height: 1.45; }
.settings-head .icon-btn { margin-left: auto; flex: none; }

.settings-theme-tabs { margin: 0 22px 12px; align-self: flex-start; }

.color-list {
  flex: 1;
  margin: 0;
  padding: 0 22px 8px;
  list-style: none;
  overflow-y: auto;
}

.color-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 112px 118px;
  align-items: center;
  gap: 12px;
  padding: 8px 10px 8px 8px;
  margin-bottom: 6px;
  border-radius: var(--radius-md);
  background: var(--soft);
  border: 1px solid var(--border);
}

.color-dot {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12), 0 0 0 3px var(--bg-solid), 0 0 0 4px var(--border-strong);
  cursor: pointer;
  overflow: hidden;
}

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

.color-name { font-size: 13px; font-weight: 500; }
.color-name small { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 400; color: var(--text-muted); line-height: 1.35; }
.color-name em { font-style: normal; font-size: 10.5px; color: var(--text-muted); margin-left: 6px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--border-strong); }

.color-hex {
  width: 100%;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--control);
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
}

.color-hex:focus { outline: 0; border-color: var(--focus); box-shadow: 0 0 0 3px var(--accent-soft); }
.color-hex.invalid { border-color: var(--danger); }

.color-rgb {
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.settings-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px 18px;
  border-top: 1px solid var(--border);
}

.settings-foot .spacer { flex: 1; }
.settings-foot small { color: var(--text-muted); font-size: 12px; }

@media (max-width: 760px) {
  .app { padding: 0; gap: 0; }
  .sidebar { inset: 8px auto 8px 8px; transform: translateX(calc(-100% - 16px)); background: var(--foot-bg); }
  .app.menu-open .sidebar { transform: none; }
  .topbar { padding: 0 12px; }
  .content { padding: 16px 12px 40px; }
  .page-title { font-size: 28px; }

  .settings { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: calc(100vh - 32px); }
  .settings-side { display: flex; align-items: center; gap: 6px; padding: 14px; border-right: 0; border-bottom: 1px solid var(--border); }
  .settings-side h2 { margin: 0 8px 0 4px; }
  .settings-soon { display: none; }
  .color-row { grid-template-columns: 40px minmax(0, 1fr) 100px; }
  .color-rgb { display: none; }
}

@media (prefers-reduced-transparency: reduce) {
  :root:not([data-theme="dark"]) { --bg: color-mix(in srgb, var(--c-surface) 92%, var(--c-bg)); --glass-blur: none; }
}

/* ---------- Editor de funis e processos ---------- */

.content.bare { padding: 4px 0 0; }
.fn-editor { gap: 12px; }
.fn-bar { border-radius: 999px; padding: 6px 10px; }
.fn-name { border-radius: 999px; }
.fn-body { gap: 12px; }
.fn-palette { border-radius: var(--radius-lg); border-right: 1px solid var(--glass-border); }
.fn-block { border-radius: 999px; }
.fn-canvas { border-radius: var(--radius-xl); box-shadow: var(--work-shadow); }
.pr-panel { border-radius: var(--radius-lg); border-left: 1px solid var(--glass-border); }
.cal-weekdays { column-gap: 6px; }

/* ---------- Login ---------- */

.login {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 16px;
}

.login-card {
  width: 100%;
  max-width: 360px;
  padding: 8px 24px 24px;
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  background: var(--bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
}

.login-card .brand { padding: 18px 0 20px; }
.login-card .btn { width: 100%; justify-content: center; }

.login-error {
  min-height: 1em;
  margin: 0 0 12px;
  color: var(--danger);
  font-size: 12.5px;
}

.login-error:empty { margin: 0; }

/* Falha ao carregar os dados do banco. */
.boot-error {
  display: grid;
  justify-items: center;
  gap: 14px;
  margin: 80px auto;
  max-width: 360px;
  text-align: center;
  color: var(--text-muted);
}

.login-title { margin: 0 0 6px; font-size: 16px; }
.login-note { margin: 0 0 16px; color: var(--text-muted); }

/* Texto de apoio dentro das popups. */
.modal-note { margin: 0 0 14px; color: var(--text-muted); font-size: 12.5px; }

/* Senha provisória de um login recém-criado (painel, página Logins). */
.lg-password {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--soft);
}

.lg-password code {
  flex: 1;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.04em;
  user-select: all;
}