:root { --bhm: #8a1c1c; --bhm-dark: #5e1212; }
.bhm-brand, .bhm-navbar .navbar-brand { color: var(--bhm); }
.bhm-navbar { background: var(--bhm-dark); }
.bhm-navbar .navbar-brand { color: #fff; }
.nav-link-bhm { color: rgba(255,255,255,.85); text-decoration: none; }
.nav-link-bhm:hover { color: #fff; }
.bhm-btn { background: var(--bhm); border-color: var(--bhm); color: #fff; }
.bhm-btn:hover { background: var(--bhm-dark); border-color: var(--bhm-dark); color: #fff; }
/* Alpine: esconde elementos x-show até o Alpine inicializar (evita flash). */
[x-cloak] { display: none !important; }

/* ── Editor visual dos modelos de comunicação ───────────────────────────── */
.bhm-editor-abas { border-bottom: 0; }
.bhm-editor-abas .nav-link { padding: .25rem .75rem; font-size: .875rem; color: #6c757d; }
.bhm-editor-abas .nav-link.active { color: var(--bhm); font-weight: 600; }
/* display:flex aqui (e não via .d-flex) para que .d-none consiga esconder a barra. */
.bhm-editor-barra {
  display: flex; flex-wrap: wrap; align-items: center; gap: .25rem;
  border: 1px solid #dee2e6; border-bottom: 0; border-radius: .375rem .375rem 0 0;
  background: #f8f9fa; padding: .375rem;
}
.bhm-editor-barra .btn.active { background: var(--bhm); border-color: var(--bhm); color: #fff; }
.bhm-editor-cor {
  display: inline-flex; align-items: center; gap: .15rem; cursor: pointer;
  border: 1px solid #dee2e6; border-radius: .25rem; background: #fff;
  padding: .1rem .3rem; font-size: .9rem;
}
.bhm-editor-cor input[type="color"] {
  width: 22px; height: 22px; border: 0; padding: 0; background: none; cursor: pointer;
}
.bhm-editor {
  border: 1px solid #dee2e6; border-radius: 0 0 .375rem .375rem;
  min-height: 320px; padding: .75rem 1rem; background: #fff; overflow-y: auto;
  font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5;
}
.bhm-editor:focus { outline: 0; border-color: var(--bhm); box-shadow: 0 0 0 .2rem rgba(138,28,28,.12); }
.bhm-editor p { margin: 0 0 .75rem; }
.bhm-editor-fonte { font-family: monospace; font-size: .85rem; border-radius: 0 0 .375rem .375rem; }
.bhm-editor-preview {
  width: 100%; min-height: 320px; border: 1px solid #dee2e6;
  border-radius: 0 0 .375rem .375rem; background: #fff;
}
.bhm-chip-variavel { cursor: pointer; user-select: none; }
.bhm-chip-variavel:hover { border-color: var(--bhm) !important; color: var(--bhm); }
.bhm-chip-inserido { background: #d1e7dd !important; border-color: #0f5132 !important; color: #0f5132; }