/* ════════════════════════════════════════════════════════════════════════
   AMIRA — minha conta  (tokens em base.css)
   Modo "Operar". As abas reaproveitam o "pill" que o js/perfil.js já
   posiciona (left/width): aqui ele vira a linha dourada do horizonte
   correndo por baixo da aba ativa.
   ════════════════════════════════════════════════════════════════════════ */

.perfil-main {
  width: 100%;
  max-width: 880px;
  margin-inline: auto;
  padding: var(--s-7) var(--margem) var(--secao);
}

/* ── Cabeçalho ─────────────────────────────────────────────────────────── */
.perfil-header { display: flex; align-items: center; gap: var(--s-5); margin-bottom: var(--s-7); }
.perfil-avatar-wrap { position: relative; flex: none; width: 88px; height: 88px; }
.perfil-avatar, .perfil-avatar-iniciais {
  width: 100%; height: 100%;
  border-radius: var(--raio-pilula);
  object-fit: cover;
}
.perfil-avatar-iniciais {
  display: flex; align-items: center; justify-content: center;   /* o JS alterna display:flex/none */
  background: var(--pedestal);
  border: 1px solid var(--ouro);
  font-family: var(--f-display);
  font-size: 2rem;
  color: var(--tinta);
}
.perfil-titulo { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.perfil-titulo h1 { font-size: var(--t-2); overflow-wrap: anywhere; }
.perfil-titulo p { font-size: var(--t-p); color: var(--tinta-3); overflow-wrap: anywhere; }

/* ── Abas ──────────────────────────────────────────────────────────────── */
.perfil-tabs {
  position: relative;
  display: flex; gap: var(--s-6);
  margin-bottom: var(--s-7);
  border-bottom: 1px solid var(--linha);
  overflow-x: auto;
  scrollbar-width: none;
}
.perfil-tabs::-webkit-scrollbar { display: none; }
.perfil-tabs__pill {
  position: absolute; bottom: -1px; left: 0;
  height: 1px; width: 0;
  background: var(--ouro);
  transition: left 560ms var(--ease), width 560ms var(--ease);
}
.perfil-tab-btn {
  flex: none;
  padding: var(--s-4) 0;
  font-size: var(--t-micro); font-weight: 500;
  letter-spacing: var(--track-micro); text-transform: uppercase;
  color: var(--tinta-3);
  white-space: nowrap;
  transition: color var(--t-rapido);
}
.perfil-tab-btn.active { color: var(--tinta); }
@media (hover: hover) { .perfil-tab-btn:hover { color: var(--tinta); } }

.perfil-painel { display: none; flex-direction: column; gap: var(--s-6); }
.perfil-painel.active { display: flex; animation: painel-entra 600ms var(--ease) both; }
@keyframes painel-entra { from { opacity: 0; transform: translateY(10px); } }

/* ── Cartões e campos ──────────────────────────────────────────────────── */
.perfil-card { display: flex; flex-direction: column; gap: var(--s-5); padding: var(--s-6); border: 1px solid var(--linha); }
.perfil-card__titulo { font-size: var(--t-3); }
.perfil-card__ajuda, .perfil-card p { font-size: var(--t-p); line-height: 1.65; color: var(--tinta-2); }
.perfil-card p a { color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

.perfil-campo { display: flex; flex-direction: column; gap: var(--s-2); }
.perfil-campo > label {
  font-size: var(--t-micro); letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--tinta-3);
}
.perfil-campo small { font-size: var(--t-pp); color: var(--tinta-3); }
.perfil-campo input:disabled { background: var(--pedestal); color: var(--tinta-2); cursor: not-allowed; border-color: transparent; }
.perfil-campo p strong { font-weight: 500; color: var(--tinta); }
.perfil-check { display: flex; align-items: flex-start; gap: var(--s-3); font-size: var(--t-p) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--tinta-2) !important; cursor: pointer; line-height: 1.55; }
.perfil-check input { margin-top: 3px; flex: none; }

.perfil-acoes { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-4); }
.perfil-msg { font-size: var(--t-pp); color: var(--tinta-2); }
.perfil-msg.sucesso, .perfil-msg--sucesso { color: var(--sucesso); }
.perfil-msg.erro, .perfil-msg--erro { color: var(--perigo); }

/* Atalho para os pedidos */
.perfil-atalho {
  flex-direction: row; align-items: center; gap: var(--s-4);
  padding: var(--s-5) var(--s-6);
  background: var(--pedestal);
  border-color: transparent;
  border-top: 1px solid var(--ouro);
  color: var(--tinta);
  transition: background-color var(--t-ui);
}
.perfil-atalho__ic { color: var(--ouro); flex: none; }
.perfil-atalho__ic svg { width: 26px; height: 26px; stroke-width: 1.4; }
.perfil-atalho__txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.perfil-atalho__txt strong { font-family: var(--f-display); font-size: var(--t-4); font-weight: 400; }
.perfil-atalho__txt small { font-size: var(--t-pp); color: var(--tinta-2); }
.perfil-atalho__seta { font-size: 1.2rem; transition: transform var(--t-ui) var(--ease); }
@media (hover: hover) { .perfil-atalho:hover .perfil-atalho__seta { transform: translateX(4px); } }

.perfil-privacidade-acoes { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.btn-outline--danger { --btn-texto: var(--perigo); --btn-borda: color-mix(in srgb, var(--perigo) 45%, transparent); }
.btn-outline--danger::before { background: var(--perigo); }

.perfil-zona-perigo { border-color: var(--linha); }
.btn-sair-conta {
  align-self: flex-start;
  min-height: 48px;
  padding: 0 var(--s-5);
  border: 1px solid color-mix(in srgb, var(--perigo) 45%, transparent);
  border-radius: var(--raio);
  font-size: var(--t-micro); font-weight: 500; letter-spacing: var(--track-micro); text-transform: uppercase;
  color: var(--perigo);
  transition: background-color var(--t-ui), color var(--t-ui);
}
@media (hover: hover) { .btn-sair-conta:hover { background: var(--perigo); color: #fff; } }

/* Foto de perfil (services/imagem-upload.js → montarUploadFoto) */
.foto-upload { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.foto-upload-preview { width: 72px; height: 72px; border-radius: var(--raio-pilula); overflow: hidden; background: var(--pedestal); flex: none; }
.foto-upload-preview img { width: 100%; height: 100%; object-fit: cover; }
.foto-upload-acoes { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.foto-upload-btn {
  display: inline-flex; align-items: center; min-height: 42px; padding: 0 var(--s-4);
  border: 1px solid var(--linha-forte); border-radius: var(--raio);
  font-size: var(--t-micro); font-weight: 500; letter-spacing: var(--track-micro); text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--t-rapido);
}
@media (hover: hover) { .foto-upload-btn:hover { border-color: var(--tinta); } }
.foto-upload-btn--danger { color: var(--perigo); }
.foto-upload-escolher.processando { opacity: 0.6; pointer-events: none; }
.foto-upload-msg { width: 100%; font-size: var(--t-pp); color: var(--perigo); }

/* ── Responsivo ────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .perfil-header { gap: var(--s-4); }
  .perfil-avatar-wrap { width: 64px; height: 64px; }
  .perfil-card { padding: var(--s-5); }
  .perfil-tabs { gap: var(--s-5); margin-inline: calc(var(--margem) * -1); padding-inline: var(--margem); }
  .perfil-acoes .btn, .perfil-acoes .btn-primary { width: 100%; }
}