/* Telas de conta e perfil — segue o vocabulário visual de vagao.css */

.faixa{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:7px 14px;background:var(--sig);color:var(--sig-ink);
  font-family:"Archivo",system-ui,sans-serif;font-size:13px;font-weight:600;
  text-align:center;
}
.faixa[hidden]{display:none!important}
body:has(.faixa:not([hidden])) .app{height:calc(100% - 33px)}

.abas{display:flex;gap:0;border:1px solid var(--line-hard);border-radius:3px;overflow:hidden;margin-bottom:4px}
.aba{
  flex:1;padding:8px 10px;font-family:"Archivo",system-ui,sans-serif;
  font-size:13.5px;font-weight:600;color:var(--ink-soft);background:var(--surface-2);
}
.aba:hover{color:var(--ink)}
.aba.on{background:var(--sig);color:var(--sig-ink);font-weight:700}

.comarroba{display:flex;align-items:center;background:var(--surface-2);border:1px solid transparent;border-radius:3px}
.comarroba:focus-within{border-color:var(--sig)}
.comarroba span{
  padding:0 2px 0 12px;color:var(--ink-soft);
  font-family:"Archivo",system-ui,sans-serif;font-size:16px;font-weight:700;
}
.comarroba input{flex:1;min-width:0;background:none;border:0;padding:10px 12px 10px 2px;color:var(--ink);font-family:inherit;font-size:16px}
.comarroba input:focus{outline:none}

.recado{
  margin:2px 0 0;padding:9px 12px;border-radius:3px;
  font-family:"Archivo",system-ui,sans-serif;font-size:13.5px;line-height:1.45;
  background:var(--surface-2);color:var(--ink);border-left:3px solid var(--sig);
}
.recado.ruim{border-left-color:var(--stop);color:var(--stop)}
.recado[hidden]{display:none!important}

/* botão de conta no cabeçalho, quando logado */
.tbtn.eu{display:flex;align-items:center;gap:7px;padding-left:7px}
.tbtn.eu .badge{width:22px;height:22px;border-radius:2px;font-size:10.5px}

/* estado de envio */
.tbtn[aria-busy="true"]{opacity:.6;pointer-events:none}

/* barra de progresso do envio de mídia */
.subindo{height:3px;background:var(--surface-2);border-radius:2px;overflow:hidden;margin-top:6px}
.subindo[hidden]{display:none!important}
.subindo i{display:block;height:100%;width:0;background:var(--sig);transition:width .2s ease}

/* recado passageiro */
.aviso{
  position:fixed;left:50%;bottom:18px;transform:translate(-50%,14px);
  z-index:50;max-width:min(440px,92vw);
  background:var(--ink);color:var(--ground);
  font-family:"Archivo",system-ui,sans-serif;font-size:14px;font-weight:600;line-height:1.4;
  padding:11px 16px;border-radius:3px;box-shadow:var(--shadow);
  opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;
}
.aviso.on{opacity:1;transform:translate(-50%,0)}

/* apagar / denunciar: discreto, longe dos botões de uso diário */
.do.zelo{padding:7px 9px;opacity:.5}
.do.zelo:hover{opacity:1;color:var(--stop)}
.do.zelo.hot{opacity:1;color:var(--stop)}
.do.zelo svg{fill:none;stroke:currentColor}

/* ---------- entrar com Google ---------- */
.social{
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  padding:11px 14px;border:1px solid var(--line-hard);border-radius:3px;
  font-family:"Archivo",system-ui,sans-serif;font-size:15px;font-weight:600;
  background:var(--surface);
}
.social:hover{border-color:var(--ink);background:var(--surface-2)}
.social svg{width:19px;height:19px;flex:none}
.social[hidden]{display:none!important}

.ou{display:flex;align-items:center;gap:10px;color:var(--ink-soft);
  font-family:"Archivo",system-ui,sans-serif;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.ou::before,.ou::after{content:"";flex:1;height:1px;background:var(--line)}
.ou[hidden]{display:none!important}

/* ---------- selo do apelido ---------- */
.comarroba{position:relative}
.selo{
  font-family:"Archivo",system-ui,sans-serif;font-size:11.5px;font-weight:700;
  letter-spacing:.05em;text-transform:lowercase;color:var(--ink-soft);
  padding:0 12px 0 6px;white-space:nowrap;
}
.selo.bom{color:#2E8B57}
:root:not([data-theme="light"]) .selo.bom{color:#6FD79B}
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]) .selo.bom{color:#2E8B57} }
:root[data-theme="dark"] .selo.bom{color:#6FD79B}
.selo.ruim{color:var(--stop)}

/* ---------- senha ---------- */
.comolho{position:relative;display:flex;align-items:center}
.comolho input{flex:1;padding-right:44px!important}
.olho{
  position:absolute;right:6px;width:32px;height:32px;border-radius:2px;
  display:grid;place-items:center;color:var(--ink-soft);
}
.olho:hover{background:var(--surface-2);color:var(--ink)}
.olho svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
.olho[aria-pressed="true"] svg{stroke:var(--sig-text)}

.medidor{display:flex;gap:4px;margin-top:-2px}
.medidor i{flex:1;height:3px;border-radius:2px;background:var(--surface-2)}
.medidor[hidden]{display:none!important}
.medidor.n0 i:nth-child(1){background:var(--stop)}
.medidor.n1 i:nth-child(-n+1){background:#E8A33D}
.medidor.n2 i:nth-child(-n+2){background:#E8A33D}
.medidor.n3 i{background:#3FA971}

/* ---------- erros por campo ---------- */
.erro{
  margin:-2px 0 0;font-family:"Archivo",system-ui,sans-serif;
  font-size:12.5px;line-height:1.4;color:var(--stop);
}
.erro[hidden]{display:none!important}
input.errado, textarea.errado{border-color:var(--stop)!important;box-shadow:inset 0 0 0 1px var(--stop)}

.linkzinho{
  align-self:flex-start;padding:2px 0;background:none;border:0;
  font-family:"Archivo",system-ui,sans-serif;font-size:13.5px;font-weight:600;
  color:var(--sig-text);text-decoration:underline;text-underline-offset:3px;
}
.linkzinho:hover{color:var(--ink)}
.linkzinho[hidden]{display:none!important}