/* =========================================================================
   Controle de conta — estilos compartilhados
   Usa as variáveis de cor da página que o inclui, com valores de reserva para
   quando a página não define nenhuma.
   ========================================================================= */

.conta-entrar {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 999px; cursor: pointer;
  background: var(--papel-2, #fff); border: 1px solid var(--linha, #E7DFD2);
  color: var(--tinta, #1F1B16); text-decoration: none;
  font: inherit; font-size: .89rem; font-weight: 600;
  box-shadow: var(--sombra-1, 0 1px 2px rgba(0,0,0,.06));
  transition: transform 180ms, border-color 180ms, box-shadow 180ms;
}
.conta-entrar:hover {
  transform: translateY(-1px);
  border-color: var(--linha-forte, #D6CABA);
  box-shadow: var(--sombra-2, 0 6px 20px rgba(0,0,0,.09));
}
.conta-entrar svg { width: 16px; height: 16px; display: block; color: var(--argila, #B44F30); }

.conta-caixa { position: relative; }

.conta-gatilho {
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  background: var(--argila-veu, #F7E8E1); color: var(--argila-forte, #963F24);
  border: 1px solid var(--linha, #E7DFD2);
  font: inherit; font-size: .95rem; font-weight: 700;
  display: grid; place-items: center;
  transition: border-color 180ms, transform 180ms;
}
.conta-gatilho:hover { border-color: var(--argila, #B44F30); transform: translateY(-1px); }

.conta-menu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 120;
  min-width: 214px; padding: 8px;
  background: var(--papel-2, #fff); border: 1px solid var(--linha, #E7DFD2);
  border-radius: 14px; box-shadow: var(--sombra-2, 0 8px 30px rgba(0,0,0,.12));
  display: flex; flex-direction: column; gap: 2px;
}
/* O atributo hidden vale display:none pela folha do navegador, mas a regra de
   classe acima ganha dela. Sem esta linha, o menu nunca fecha. */
.conta-menu[hidden] { display: none; }

.conta-email {
  margin: 0; padding: 8px 12px 10px;
  border-bottom: 1px solid var(--linha, #E7DFD2);
  font-size: .82rem; color: var(--tinta-suave, #7A7065); word-break: break-all;
}
.conta-menu a, .conta-menu button {
  text-align: left; padding: 10px 12px; border: 0; border-radius: 8px;
  background: transparent; color: var(--tinta, #1F1B16); text-decoration: none;
  font: inherit; font-size: .9rem; cursor: pointer;
}
.conta-menu a { color: var(--argila, #B44F30); font-weight: 600; }
.conta-menu a:hover, .conta-menu button:hover { background: var(--papel-3, #F3EDE3); }

/* ------------------------------- entrada -------------------------------
   Os formulários de /entrar/ (login, esqueci, senha nova). Ficam aqui, e não
   na página, porque o botão e o aviso da conta já moram neste arquivo — é a
   mesma linguagem visual, e ela vale para o site todo. */

.conta-forma label {
  display: block; margin-bottom: 6px; font-size: .9rem; font-weight: 600;
}
.conta-forma input {
  width: 100%; padding: 12px 14px; margin-bottom: 16px;
  background: var(--papel, #FBF8F3); color: var(--tinta, #1F1B16);
  border: 1.5px solid var(--linha-forte, #D6CABA); border-radius: 12px;
  font: inherit; font-size: 1rem;
}
.conta-forma input:focus {
  outline: none; border-color: var(--argila, #B44F30);
  box-shadow: 0 0 0 4px rgba(180,79,48,.14);
}

.conta-botao {
  width: 100%; padding: 13px 20px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--argila, #B44F30); color: #fff;
  font: inherit; font-size: .96rem; font-weight: 600;
}
.conta-botao:hover { background: var(--argila-forte, #963F24); }
.conta-botao[disabled] { opacity: .6; cursor: default; }
/* Quando o "botão" é na verdade um link — "Continuar" para o destino. */
a.conta-botao--link { display: block; text-align: center; text-decoration: none; }

.conta-link {
  display: block; margin: 16px auto 0; padding: 4px; border: 0; background: transparent;
  color: var(--tinta-suave, #7A7065); font: inherit; font-size: .86rem; font-weight: 600;
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.conta-link:hover { color: var(--argila, #B44F30); }

.conta-erro {
  margin: 0 0 14px; padding: 11px 14px; border-radius: 10px;
  background: var(--argila-veu, #F7E8E1); color: var(--argila-forte, #963F24);
  border: 1px solid rgba(180,79,48,.28);
  font-size: .88rem; font-weight: 500;
}

.conta-aviso {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  z-index: 400; padding: 12px 22px; border-radius: 999px;
  background: var(--tinta, #1F1B16); color: var(--papel, #FBF8F3);
  font-size: .9rem; font-weight: 600; box-shadow: 0 12px 40px rgba(0,0,0,.28);
  max-width: calc(100vw - 40px); text-align: center;
}
.conta-aviso[hidden] { display: none; }