/*
 * Cartões com "palco" ilustrado da página de parceiros (contabilidades.html), na linguagem da home (.passo e .cartao em
 * secoes.css): cartão branco, palco em --bg e uma mini tela dentro (conversa, portal, nota recusada, e-mail, busca...).
 * Em seção branca (.sec-branca) as cores se invertem. Tokens vêm de parceiros.css.
 */

/* Cartão com palco ilustrado (como .passo e .cartao da home). */
.cartao {
  display: flex;
  flex-direction: column;
  padding: 12px 12px 30px;
  border-radius: var(--r-xl);
  background: var(--paper);
  box-shadow: 0 1px 0 var(--line);
}
.cartao > h3,
.cartao > p {
  padding-inline: 18px;
}
.cartao h3,
.seg__lista h3,
.impl__passos h3 {
  font-family: var(--f-display);
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--tinta);
}
.cartao > p:last-child,
.seg__lista p,
.impl__passos p {
  margin-top: 10px;
  color: var(--tinta-2);
}
.cartao__num {
  justify-self: start;
  align-self: flex-start;
  margin: 24px 18px 12px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--lime);
  font-family: var(--f-display);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--green-deep);
}
.palco {
  position: relative;
  display: grid;
  place-items: center;
  height: 200px;
  margin-bottom: 24px;
  padding: 20px;
  overflow: hidden;
  border-radius: 22px;
  background: var(--bg);
}
.cartao__num + h3 {
  margin-top: 0;
}
.palco + .cartao__num {
  margin-top: 0;
}
.sec-branca .cartao {
  background: var(--bg);
  box-shadow: none;
}
.sec-branca .palco {
  background: var(--paper);
}

/* Mini telas dentro dos palcos. */
.palco--conversa {
  align-content: center;
  justify-items: stretch;
  gap: 10px;
}
.mini {
  display: inline-flex;
  flex-direction: column;
  justify-self: start;
  max-width: 92%;
  padding: 9px 13px;
  border-radius: 14px 14px 14px 4px;
  background: var(--paper);
  box-shadow: 0 1px 1px rgb(11 20 26 / 12%);
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--wa-ink);
}
.mini--saida {
  justify-self: end;
  border-radius: 14px 14px 4px 14px;
  background: var(--wa-out);
}
.sec-branca .mini--entrada {
  background: var(--bg);
}
.mini small {
  align-self: flex-end;
  font-size: 0.6875rem;
  color: var(--wa-muted);
}
.etiqueta {
  justify-self: start;
  padding: 3px 10px;
  border-radius: 999px;
  background: #fde7e4;
  font-size: 0.75rem;
  font-weight: 700;
  color: #b42318;
}
.mini-cartao,
.portal,
.recusa,
.placar,
.email,
.busca,
.servicos {
  width: min(250px, 92%);
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--paper);
  box-shadow: var(--shadow-1);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--tinta);
}
.sec-branca .portal,
.sec-branca .recusa {
  background: var(--bg);
  box-shadow: none;
}
.portal {
  display: grid;
  gap: 8px;
}
.portal__titulo,
.placar__titulo,
.servicos__titulo {
  font-weight: 700;
}
.portal__campo {
  height: 28px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--paper);
}
.portal__erro {
  font-weight: 700;
  color: #b42318;
}
.recusa {
  border-left: 4px solid #e5484d;
}
.recusa__titulo {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #b42318;
}
.recusa__titulo span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e5484d;
}
.placar {
  display: grid;
  gap: 8px;
}
.placar__linha,
.codigos p,
.servicos p {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}
.placar__linha span {
  color: var(--tinta-2);
}
.placar__linha b {
  font-family: var(--f-display);
  font-size: 1rem;
}
.placar__linha--zero {
  margin-inline: -8px;
  padding: 4px 8px;
  border-radius: 8px;
  background: var(--lime);
}
.placar__linha--zero span {
  color: var(--green-deep);
}
.codigos {
  display: grid;
  gap: 8px;
  width: min(250px, 92%);
}
.codigos p {
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--paper);
  box-shadow: 0 1px 0 var(--line);
  font-size: 0.8125rem;
}
.codigos span {
  width: 56px;
  color: var(--tinta-2);
}
.codigos b {
  flex: 1;
}
.codigos svg,
.servicos svg {
  color: var(--green-2);
}
.email__de {
  font-size: 0.75rem;
  color: var(--tinta-2);
}
.email__assunto {
  margin: 2px 0 10px;
  font-weight: 700;
}
.email__anexos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.email__anexos span {
  padding: 3px 8px;
  border-radius: 7px;
  background: var(--bg);
  font-size: 0.75rem;
  font-weight: 700;
}
.email__anexos .email__destaque {
  background: var(--lime);
  color: var(--green-deep);
}
.busca {
  display: grid;
  gap: 8px;
}
.busca__campo {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 7px 10px;
  border: 1.5px solid var(--green);
  border-radius: 9px;
  font-size: 0.875rem;
}
.busca__item {
  display: grid;
  padding: 8px 10px;
  border-radius: 9px;
  background: var(--bg);
  font-size: 0.75rem;
  color: var(--tinta-2);
}
.busca__item b {
  font-size: 0.8125rem;
  color: var(--tinta);
}
.servicos {
  display: grid;
  gap: 8px;
}
.servicos p {
  justify-content: flex-start;
}
.servicos__novo {
  margin-inline: -8px;
  padding: 4px 8px;
  border-radius: 8px;
  background: var(--green-tint);
  font-weight: 700;
}
.servicos__novo span {
  margin-left: auto;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--lime);
  font-size: 0.6875rem;
  color: var(--green-deep);
}
.contato {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: -20px -20px 4px;
  padding: 12px 16px;
  background: var(--paper);
  font-size: 0.75rem;
  color: var(--wa-muted);
}
.contato > span:last-child {
  display: grid;
  min-width: 0;
}
.contato b {
  overflow: hidden;
  font-size: 0.875rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--wa-ink);
}
.contato .iniciais {
  width: 34px;
  height: 34px;
  font-size: 12px;
}