/* Area do dono do produto (/dono). Tema claro fixo (marca_tokens.css,
   `body.dono` -- redesenho de 08/09): e documento denso — tabela de contas
   — nao a inbox que fica aberta o dia inteiro. Nada aqui usa --vn-*
   direto; so token semantico, como manda marca_tokens.css. */

body.dono {
  min-height: 100dvh;
  margin: 0;
  background: var(--bc-bg);
  color: var(--bc-ink);
  font: 15px/1.5 var(--bc-fonte);
}

/* ── barra ──────────────────────────────────────────────────────────────
   A diferenca visual entre esta barra e qualquer tela de conta do cliente e
   a primeira defesa contra o dono achar que esta olhando dado de cliente:
   rotulo "DONO DO PRODUTO" sempre visivel, cor propria, em toda pagina desta
   area, sem excecao. */

.dono__barra {
  display: flex; align-items: center; gap: .9rem;
  padding: .85rem 1.5rem;
  background: var(--bc-surface);
  border-bottom: 1px solid var(--bc-line);
}

.dono__marca { height: 22px; width: auto; }

.dono__selo {
  padding: .2rem .6rem;
  color: var(--bc-primary-ink);
  background: var(--bc-primary);
  border-radius: var(--bc-raio);
  font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}

.dono__nav {
  display: flex; align-items: center; gap: 1rem;
  margin-left: auto;
}

.dono__nav a {
  color: var(--bc-ink-soft);
  text-decoration: none;
  font-weight: 600; font-size: .9rem;
}

.dono__nav a:hover { color: var(--bc-ink); }

.dono__sair {
  padding: 0;
  color: var(--bc-ink-mut);
  background: none;
  border: 0;
  font: inherit; font-size: .9rem; font-weight: 600;
  cursor: pointer;
}

.dono__sair:hover { color: var(--bc-danger); }

/* ── conteudo ───────────────────────────────────────────────────────────── */

.dono__conteudo {
  max-width: 880px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}

.painel__titulo {
  margin: 0 0 .35rem;
  color: var(--bc-ink);
  font-size: 1.5rem;
}

.painel__legenda {
  margin: 0 0 1.75rem;
  color: var(--bc-ink-mut);
  font-size: .92rem;
  max-width: 56ch;
}

.painel__vazio {
  padding: 1.5rem;
  color: var(--bc-ink-faint);
  background: var(--bc-surface);
  border: 1px solid var(--bc-line);
  border-radius: var(--bc-raio);
}

.painel__tabela {
  width: 100%;
  border-collapse: collapse;
  background: var(--bc-surface);
  border: 1px solid var(--bc-line);
  border-radius: var(--bc-raio);
  overflow: hidden;
}

.painel__tabela th,
.painel__tabela td {
  padding: .7rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--bc-line-soft);
}

.painel__tabela th {
  color: var(--bc-ink-mut);
  font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}

.painel__tabela tbody tr:last-child td { border-bottom: 0; }

.painel__conta-nome { color: var(--bc-ink); font-weight: 600; }

/* ── recados (index/new) ──────────────────────────────────────────────── */

.dono__flash {
  margin: 0 0 1.5rem;
  padding: .68rem .85rem;
  border-radius: var(--bc-raio);
  font-size: .88rem;
}

.dono__flash--aviso {
  color: var(--bc-ok);
  background: color-mix(in srgb, var(--bc-ok) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--bc-ok) 32%, transparent);
}

.dono__flash--alerta {
  color: var(--bc-danger);
  background: color-mix(in srgb, var(--bc-danger) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--bc-danger) 32%, transparent);
}

/* ── convites ──────────────────────────────────────────────────────────── */

.convites__novo {
  display: inline-block;
  margin: 0 0 1.5rem;
  padding: .55rem .9rem;
  color: var(--bc-primary-ink);
  background: var(--bc-primary);
  border-radius: var(--bc-raio);
  font-weight: 600; font-size: .88rem;
  text-decoration: none;
}

.convites__novo:hover { background: var(--bc-primary-hover); }

.convites__email { color: var(--bc-ink); }

.convites__estado {
  padding: .18rem .55rem;
  border-radius: 999px;
  font-size: .75rem; font-weight: 700; letter-spacing: .02em;
}

.convites__estado--pendente {
  color: var(--bc-ink-mut);
  background: color-mix(in srgb, var(--bc-pending) 16%, transparent);
}

.convites__estado--aceito {
  color: var(--bc-ok);
  background: color-mix(in srgb, var(--bc-ok) 14%, transparent);
}

.convites__estado--expirado {
  color: var(--bc-ink-faint);
  background: color-mix(in srgb, var(--bc-ink-faint) 14%, transparent);
}

.convites__form { display: grid; gap: 1rem; max-width: 380px; }

.convites__campo { display: grid; gap: .38rem; }

.convites__campo label {
  color: var(--bc-ink-soft);
  font-size: .8rem; font-weight: 600;
}

.convites__campo input {
  width: 100%;
  padding: .72rem .9rem;
  font: inherit; font-size: 1rem;
  color: var(--bc-ink);
  background: var(--bc-bg);
  border: 1px solid var(--bc-campo-borda);
  border-radius: var(--bc-raio);
}

.convites__form input[type="submit"] {
  padding: .72rem 1rem;
  font: inherit; font-weight: 600;
  color: var(--bc-primary-ink);
  background: var(--bc-primary);
  border: 0; border-radius: var(--bc-raio);
  cursor: pointer;
  width: fit-content;
}

.convites__form input[type="submit"]:hover { background: var(--bc-primary-hover); }