/* Área reservada (users) — sistema "Azure Workspace" (openquadro / gestor uxcriativo):
   azul + branco, contornos finos, Inter + JetBrains Mono nas etiquetas.
   ≥992px: barra de ícones azul (gestor uxcriativo). <992px: topo branco + separadores em baixo (openquadro). */
.ux-conta {
  --ux-accent: #2563eb; --ux-accent-strong: #004ac6; --ux-accent-soft: #2563eb14;
  --ux-bg: #f8fafc; --ux-surface: #fff; --ux-border: #e2e8f0; --ux-text: #0f172a; --ux-dim: #565e74; --ux-faint: #94a3b8;
  --ux-ok: #0f6b2e; --ux-ok-soft: #e9f9ee; --ux-warn: #8a6100; --ux-warn-soft: #fff8e6;
  --bs-primary: #2563eb; --bs-primary-rgb: 37, 99, 235; --bs-link-color: #2563eb; --bs-link-color-rgb: 37, 99, 235;
  --bs-body-font-family: Inter, -apple-system, "Segoe UI", system-ui, sans-serif;
  background: var(--ux-bg); color: var(--ux-text); min-height: 100vh; font-family: var(--bs-body-font-family);
}
.ux-conta .btn-primary { --bs-btn-bg: #2563eb; --bs-btn-border-color: #2563eb; --bs-btn-hover-bg: #004ac6; --bs-btn-hover-border-color: #004ac6; --bs-btn-active-bg: #004ac6; }
.ux-conta .btn-outline-primary { --bs-btn-color: #2563eb; --bs-btn-border-color: #2563eb; --bs-btn-hover-bg: #2563eb; --bs-btn-hover-border-color: #2563eb; }
.ux-mono { font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-size: .8rem; }
.ux-label { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ux-faint); }

/* topo (telemóvel e computador) */
.ux-top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 1020; height: 52px; display: flex; align-items: center; gap: .75rem;
  padding: 0 1rem; background: var(--ux-surface); border-bottom: 1px solid var(--ux-border); }
.ux-marca { display: flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--ux-text); text-decoration: none; }
.ux-marca b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: var(--ux-accent); color: #fff; font-size: .85rem; }
.ux-top-email { margin-left: auto; color: var(--ux-dim); font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ux-avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--ux-accent-soft); color: var(--ux-accent);
  font-weight: 700; font-size: .75rem; text-decoration: none; flex: none; }
.ux-main { max-width: 1120px; margin: 0 auto; padding: 1.25rem 1rem 6rem; }

/* O menu traz as suas cores (também é usado fora da moldura da área, ex.: no editor do site,
   onde o --bs-primary é a cor da marca do cliente e não pode ser tocado). */
.ux-rail, .ux-fundo { --ux-accent: #2563eb; font-family: Inter, -apple-system, "Segoe UI", system-ui, sans-serif; }

/* menu lateral azul — estilo gestor uxcriativo.
   ≥992px: sempre visível; aberto (ícone + nome, 240px) ou recolhido (só ícones, 76px), escolha guardada (conta.js).
   <992px: fechado atrás do hambúrguer; abre por cima do conteúdo com fundo escurecido. */
.ux-rail { position: fixed; inset: 0 auto 0 0; z-index: 1040; width: 260px; max-width: 85vw; display: flex; flex-direction: column; gap: .2rem;
  background: var(--ux-accent); padding: .75rem; padding-top: calc(.75rem + env(safe-area-inset-top, 0px)); overflow-y: auto;
  transform: translateX(-105%); transition: transform .2s ease, width .2s ease; }
.menu-aberto .ux-rail { transform: none; box-shadow: 8px 0 30px #0f172a40; }
.ux-fundo { position: fixed; inset: 0; z-index: 1035; background: #0f172a66; }
.ux-rail-topo { display: flex; align-items: center; gap: .65rem; margin-bottom: .9rem; min-height: 40px; }
.ux-rail-logo { width: 40px; height: 40px; flex: none; border-radius: 10px; display: grid; place-items: center; background: #ffffff26; color: #fff;
  font-weight: 800; text-decoration: none; }
.ux-rail-nome { color: #fff; font-weight: 700; white-space: nowrap; flex: 1; }
.ux-rail-fechar { border: 0; background: transparent; color: #ffffffcc; font-size: 1.1rem; padding: .25rem; }
.ux-rail-i, .ux-rail-recolher { display: flex; align-items: center; gap: .75rem; min-height: 42px; padding: 0 .7rem; border-radius: 10px; color: #ffffffcc;
  text-decoration: none; font-size: .92rem; font-weight: 600; white-space: nowrap; border: 0; background: transparent; width: 100%; text-align: left; }
.ux-rail-i i, .ux-rail-recolher i { font-size: 1.15rem; flex: none; width: 1.3rem; text-align: center; }
.ux-rail-i:hover, .ux-rail-recolher:hover { color: #fff; background: #ffffff1a; }
.ux-rail-i.on { color: #fff; background: #ffffff2e; }
.ux-rail-i .ux-seta { margin-left: auto; font-size: .8rem; transition: transform .2s ease; }
.ux-rail-i[aria-expanded="true"] .ux-seta { transform: rotate(180deg); }
.ux-sub { list-style: none; margin: .1rem 0 .3rem; padding: 0 0 0 1.55rem; display: grid; gap: .05rem; border-left: 1px solid #ffffff33; margin-left: 1.3rem; }
.ux-sub a { display: flex; align-items: center; gap: .55rem; padding: .4rem .6rem; border-radius: 8px; color: #ffffffd9; text-decoration: none; font-size: .88rem; white-space: nowrap; }
.ux-sub a:hover { background: #ffffff1a; color: #fff; }
.ux-sub a.on { background: #ffffff2e; color: #fff; font-weight: 600; }
.ux-rail-recolher { margin-top: auto; display: none; }
.ux-hamburguer { border: 0; background: transparent; font-size: 1.5rem; color: var(--ux-text); padding: 0 .25rem 0 0; line-height: 1; }
@media (min-width: 992px) {
  .ux-conta.tem-nav, .tem-lateral { --ux-rail-w: 240px; }
  .ux-conta.tem-nav.rail-recolhido, .tem-lateral.rail-recolhido { --ux-rail-w: 76px; }
  .ux-conta.tem-nav { padding-left: var(--ux-rail-w); transition: padding-left .2s ease; }
  .ux-rail { transform: none; width: var(--ux-rail-w); max-width: none; box-shadow: none; }
  .ux-fundo, .ux-hamburguer, .ux-rail-fechar { display: none !important; }
  .ux-rail-recolher { display: flex; }
  .ux-rail-recolher i { transition: transform .2s ease; }
  .rail-recolhido .ux-rail-nome, .rail-recolhido .ux-rail-i span, .rail-recolhido .ux-rail-i .ux-seta, .rail-recolhido .ux-rail-recolher span, .rail-recolhido .ux-sub { display: none; }
  .rail-recolhido .ux-rail-i, .rail-recolhido .ux-rail-recolher { justify-content: center; padding: 0; }
  .rail-recolhido .ux-rail-recolher i { transform: rotate(180deg); }
  .ux-conta.tem-nav .ux-marca { display: none; }
  .ux-main { padding: 1.5rem 2rem 3rem; }
}
@media (prefers-reduced-motion: reduce) { .ux-rail, .ux-conta.tem-nav, .ux-rail-recolher i, .ux-seta { transition: none; } }
/* barra de atalhos em baixo (só <992px) — estilo openquadro */
/* fundo azul (pedido do Joel, 2026-10-13 — para toda a plataforma, não só o esimples) */
.ux-tabbar { position: fixed; inset: auto 0 0 0; z-index: 1030; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: #1d4ed8; border-top: 1px solid #1e40af; padding-bottom: env(safe-area-inset-bottom, 0px); font-family: Inter, -apple-system, "Segoe UI", system-ui, sans-serif; }
.ux-tabbar a, .ux-tabbar button { display: grid; justify-items: center; gap: .1rem; padding: .5rem 0 .45rem; color: rgba(255,255,255,.75); text-decoration: none;
  font-size: .68rem; font-weight: 600; border: 0; background: transparent; }
.ux-tabbar i { font-size: 1.25rem; }
.ux-tabbar .on { color: #fff; }
.ux-main { padding-bottom: 6rem; }
@media (min-width: 992px) { .ux-tabbar { display: none; } .ux-main { padding-bottom: 3rem; } }

/* peças comuns */
.ux-cartao { background: var(--ux-surface); border: 1px solid var(--ux-border); border-radius: 12px; }
.ux-chip { display: inline-flex; align-items: center; gap: .35rem; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .66rem; letter-spacing: .04em;
  text-transform: uppercase; padding: .15rem .55rem; border-radius: 999px; white-space: nowrap; }
.ux-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ux-chip-rascunho { background: var(--ux-warn-soft); color: var(--ux-warn); }
.ux-chip-publicado { background: var(--ux-ok-soft); color: var(--ux-ok); }
.ux-conta-cartao { max-width: 420px; margin: 2rem auto; background: var(--ux-surface); border: 1px solid var(--ux-border); border-radius: 16px; padding: 1.5rem; }
.ux-estreito { max-width: 560px; }