/* Tema compartido con el panel de Chat y WhatsApp de Holania.
   Los colores de las muestras de diseño siguen perteneciendo a cada web creada. */
:root {
  --ink: #142033;
  --muted: #64748b;
  --line: #dce6ed;
  --surface: #ffffff;
  --canvas: #f5fafc;
  --brand: #087d9a;
  --brand-dark: #066b84;
  --brand-light: #eaf9fc;
  --amber: #9a6a14;
  --amber-light: #fff7e7;
  --blue: #087d9a;
  --blue-light: #eaf9fc;
  --shadow: 0 10px 28px rgba(20, 32, 51, .06);
}

.sidebar {
  background: #ffffff;
  color: var(--ink);
  border-right: 1px solid var(--line);
}

.brand { color: var(--ink); }
.brand-mark { background: #e6f7fc; color: #087d9a; }
.workspace-switcher { border-color: var(--line); }
.workspace-switcher .avatar { background: #e6f7fc; color: #087d9a; }
.workspace-switcher small, .chevron { color: var(--muted); }
.nav-item, .support-link, .settings-link { color: #43536a; }
.nav-item span { color: #087d9a; }
.nav-item:hover, .support-link:hover, .settings-link:hover { background: #ecfbfe; color: #087d9a; }
.nav-item.active { background: #e6f7fc; color: #087d9a; }
.nav-item.active span { color: #087d9a; }
.sidebar-footer { border-top-color: var(--line); }

.primary-action, .toggle-choice button.active {
  background: #24b7d3;
  color: #063846;
  box-shadow: 0 5px 14px rgba(36, 183, 211, .18);
}
.primary-action:hover { background: #1aabc7; }
.attention-card, .connection-box { background: #eaf9fc; }
.attention-icon, .connection-box > span { background: #24b7d3; color: #063846; }
.attention-card p, .connection-box p { color: #466477; }
.credit-box { background: #142033; }
.credit-box span { color: #b8d9e3; }
.credit-box p { color: #e2f5fa; }

.wizard-steps .active { background: #eaf9fc; }
.choice.selected, .design-options button.active { border-color: #087d9a; background: #f5fcfe; box-shadow: 0 0 0 1px #087d9a; }
.page-count, .blog-choice { border-color: #dce6ed; background: #fbfdff; }
.tree-editor, .tree-row { border-color: #e3eaf0; }
.tree-row.child { background: #fbfdff; }
.menu-toggle { border-color: #c9d9e2; background: #f8fcfd; color: #31495a; }
.menu-toggle input { accent-color: #087d9a; }
.project-tree { border-left-color: #cceaf2; }

.topbar { background: rgba(255, 255, 255, .88); }
.icon-button, .mode-switch { color: #087d9a; }
@media (max-width: 820px) { .sidebar { border-right: 0; border-bottom: 1px solid var(--line); } }