/* MobiliConnect · conta.css — área do cliente e rastreio. Usa os tokens e os campos de loja.css.
 * Alvo ≥ 44 px, letra ≥ 12 px, foco visível, 375 px sem rolagem lateral. */

/* ---------- moldura ---------- */
.conta-main { padding-top: 24px; padding-bottom: 48px; min-height: 62vh; outline: none; }
.conta-app { display: grid; }
.conta-caixa {
  width: 100%; max-width: 440px; margin: 0 auto; display: grid; gap: 16px; align-content: start;
  background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--raio); padding: 24px 20px;
}
.conta-caixa h1, .painel-cab h1 { font: 800 2rem/1.02 var(--f-titulo); color: var(--navy); outline: none; }
.conta-sub { color: var(--ink-2); font-size: .9375rem; overflow-wrap: anywhere; }
.conta-form { display: grid; gap: 14px; }
.btn-pri.bloco, .btn-sec.bloco { width: 100%; }
.conta-links a, .conta-caixa .nota-peq a, .conta-form .nota-peq a {
  display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-underline-offset: 3px;
}
.conta-caixa .nota-peq a, .conta-form .nota-peq a, .sec .nota-peq a { display: inline-block; min-height: 0; padding: 13px 0; margin: -13px 0; }
.conta-links { margin-top: -6px; }
.conta-sep { display: grid; gap: 8px; padding-top: 16px; border-top: 1px solid var(--line-2); text-align: center; color: var(--ink-2); font-size: .9375rem; }
.quebra { overflow-wrap: anywhere; }
.carregando { padding: 24px 0; color: var(--ink-2); }

/* senha com mostrar/ocultar */
.senha-caixa { position: relative; }
.senha-caixa input { padding-right: 96px; }
.senha-ver {
  position: absolute; top: 2px; right: 2px; bottom: 2px; min-width: 44px; padding: 0 14px;
  border: 0; border-radius: 6px; background: transparent; color: var(--accent); font-weight: 700; font-size: .9375rem;
}
.senha-ver:hover { background: var(--surface); }
.senha-ver:focus-visible { outline-offset: -3px; }

/* avisos */
.aviso.ok { background: var(--ok-bg); color: var(--ok); border-color: #A8D8BC; }
.aviso a { color: inherit; font-weight: 700; text-underline-offset: 3px; display: inline-block; padding: 13px 0; margin: -13px 0; }
.aviso-vivo:empty, .form-msg:empty { display: none; }
.erro-msg.solta { font-size: .8125rem; color: var(--erro); font-weight: 600; margin-top: -10px; }
.erro-msg.solta:empty { display: none; }
.interruptor input[aria-invalid="true"] { outline: 2px solid var(--erro); outline-offset: 2px; }

.btn-perigo {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px;
  border: 0; border-radius: 10px; background: var(--erro); color: #FFFFFF; font-weight: 700; font-size: 1rem;
}
.btn-perigo:hover { background: #8F1C13; }
.btn-perigo:disabled { background: #9AA6B8; cursor: not-allowed; }
.btn-link.perigo { color: var(--erro); }
.bt-linha { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- painel ---------- */
.painel { width: 100%; max-width: 880px; margin: 0 auto; display: grid; gap: 16px; }
.painel-cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.painel-cab > div { min-width: 0; display: grid; gap: 4px; }
.conf-email { display: grid; gap: 10px; }
.conf-email .btn-sec { justify-self: start; }

.abas ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.abas a {
  display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 10px; text-align: center;
  border: 1px solid var(--line); border-radius: 10px; background: var(--paper);
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: .9375rem;
}
.abas a:hover { border-color: var(--navy); }
.abas a[aria-current="page"] { border: 2px solid var(--navy); background: var(--accent-bg); color: var(--navy); }

.sec { display: grid; gap: 14px; align-content: start; }
.sec h2 { font: 700 1.5rem/1.05 var(--f-titulo); color: var(--navy); outline: none; }
.sec .ck-bloco h3 { font: 700 1.25rem/1.1 var(--f-titulo); }
.vazio-conta { display: grid; gap: 12px; justify-items: start; background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--raio); padding: 20px 16px; }

/* ---------- pedido ---------- */
.pedidos { display: grid; gap: 12px; }
.pedido { background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--raio); padding: 16px; display: grid; gap: 12px; min-width: 0; }
.ped-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.ped-cab h2, .ped-cab h3 { font: 700 1.375rem/1.05 var(--f-titulo); color: var(--ink); }
.ped-status { font-size: .8125rem; font-weight: 700; padding: 4px 8px; border-radius: 6px; background: var(--accent-bg); color: var(--navy); }
.ped-status.st-aguardando_pagamento { background: var(--alerta-bg); color: var(--alerta-ink); }
.ped-status.st-enviado, .ped-status.st-entregue { background: var(--ok-bg); color: var(--ok); }
.ped-status.st-cancelado { background: var(--erro-bg); color: var(--erro); }
.ped-meta { font-size: .875rem; color: var(--ink-2); }
.ped-meta b { color: var(--ink); }

.linha-tempo { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 4px 0; }
.linha-tempo li { position: relative; display: grid; justify-items: center; align-content: start; gap: 6px; text-align: center; font-size: .75rem; line-height: 1.2; color: var(--ink-2); padding: 0 2px; }
.linha-tempo li::before { content: ""; position: absolute; z-index: 0; top: 7px; right: 50%; width: 100%; height: 3px; background: var(--line-2); }
.linha-tempo li:first-child::before { display: none; }
.linha-tempo li.feito::before, .linha-tempo li.atual::before { background: var(--navy); }
.lt-ponto { position: relative; z-index: 1; width: 17px; height: 17px; border-radius: 50%; background: var(--paper); border: 3px solid var(--line); }
.linha-tempo .feito .lt-ponto { background: var(--navy); border-color: var(--navy); }
.linha-tempo .atual .lt-ponto { border-color: var(--navy); box-shadow: 0 0 0 4px var(--accent-bg); }
.linha-tempo .atual { color: var(--navy); font-weight: 700; }
.linha-tempo .feito { color: var(--ink); }

.ped-rastreio { display: grid; gap: 8px; padding: 12px; border-radius: 10px; background: var(--surface); }
.rot-peq { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.codigo { display: block; font-size: 1.0625rem; letter-spacing: .04em; overflow-wrap: anywhere; }
.ped-rastreio-bt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
/* pedido aguardando com o Mercado Pago ligado: botão "Pagar agora" (abre a loja com ?pagar=) */
.ped-pagar { display: grid; gap: 10px; padding: 12px; border-radius: 10px; background: var(--alerta-bg); }
.ped-pagar .btn-pri { justify-self: start; }
/* dica no erro de entrar: conta nova só entra depois do link do e-mail */
.dica-entrar { display: block; margin-top: 6px; font-weight: 500; }

.ped-det { border-top: 1px solid var(--line-2); }
.ped-det > summary {
  min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  cursor: pointer; list-style: none; font-weight: 600; color: var(--accent);
}
.ped-det > summary::-webkit-details-marker { display: none; }
.ped-det > summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); flex: none; }
.ped-det[open] > summary::after { transform: rotate(225deg) translateY(-2px); }
.ped-det-in { display: grid; gap: 12px; padding: 4px 0 4px; }
.ped-itens { display: grid; gap: 8px; font-size: .9375rem; }
.ped-itens li { display: flex; justify-content: space-between; gap: 12px; }
.ped-itens li > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.ped-itens small, .ped-prazo { display: block; color: var(--ink-2); font-size: .8125rem; font-weight: 400; }
.ped-end { font-size: .9375rem; overflow-wrap: anywhere; }

/* ---------- endereços ---------- */
.enderecos { display: grid; gap: 12px; }
.end-card { background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--raio); padding: 16px; display: grid; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.end-tit { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.selo-padrao { font-size: .75rem; font-weight: 700; color: var(--ok); background: var(--ok-bg); padding: 2px 8px; border-radius: 4px; }
.end-linhas { color: var(--ink-2); font-size: .9375rem; }
.end-bt { display: flex; flex-wrap: wrap; gap: 0 12px; margin: 4px -4px 0; }
.end-conf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line-2); }
.end-conf p { flex: 1 0 100%; font-weight: 600; }

/* ---------- segurança ---------- */
.excluir > summary {
  min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  cursor: pointer; list-style: none; font-weight: 700; color: var(--erro);
}
.excluir > summary::-webkit-details-marker { display: none; }
.excluir > summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); flex: none; }
.excluir[open] > summary::after { transform: rotate(225deg) translateY(-2px); }
.excluir .conta-form { margin-top: 4px; }
.excluir .btn-perigo { justify-self: start; }

/* ---------- rastrear ---------- */
.rastro { width: 100%; max-width: 640px; margin: 0 auto; display: grid; gap: 16px; }
.rastro .conta-caixa { max-width: none; }
#rastro-app { display: grid; gap: 14px; }

/* ---------- rodapé: links institucionais ---------- */
.rodape-links ul { display: flex; flex-wrap: wrap; gap: 0 18px; }
.rodape-links a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; font-size: .875rem; }
.rodape-links a[aria-current="page"] { font-weight: 700; }

@media (min-width: 560px) {
  .abas ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .conta-caixa { padding: 28px; }
}
@media (min-width: 640px) {
  .rodape-in .rodape-links { grid-column: 2; }
}
@media (min-width: 760px) {
  .enderecos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .linha-tempo li { font-size: .8125rem; }
}