/* Base e componentes reaproveitaveis. Depende de tokens.css. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--ink);
  font-family: var(--fb); font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-wrap: pretty;
}
a { color: var(--ink); }
a:hover { color: var(--prP); }
button, input, textarea, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* Titulos e rotulos */
.titulo { margin: 0; font-family: var(--fh); font-weight: var(--fhw); font-size: calc(32px * var(--hk)); line-height: 1.1; }
.titulo-sm { margin: 0; font-family: var(--fh); font-weight: var(--fhw); font-size: calc(22px * var(--hk)); line-height: 1.15; }
.assinatura { font-size: 12px; letter-spacing: .32em; text-transform: uppercase; color: var(--mu); }
.texto-mudo { margin: 0; color: var(--mu); }
.texto-fraco { color: var(--fa); font-size: 12.5px; }

/* Botoes: normal, hover, pressionado, desabilitado, carregando */
.btn {
  height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 16px; border: 1px solid transparent; border-radius: var(--r);
  font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none;
  transition: background-color .12s, opacity .12s;
}
.btn:disabled, .btn[aria-busy="true"] { opacity: .45; cursor: not-allowed; }
.btn-primario { background: var(--pr); color: var(--onP); justify-content: space-between; }
.btn-primario:hover:not(:disabled) { background: var(--prH); color: var(--onP); }
.btn-primario:active:not(:disabled) { background: var(--prP); }
.btn-escuro { background: var(--ink); color: var(--pn); }
.btn-escuro:hover:not(:disabled) { opacity: .88; color: var(--pn); }
.btn-contorno { background: transparent; border-color: var(--lnS); color: var(--ink); }
.btn-contorno:hover:not(:disabled) { background: var(--hv); }
.btn-texto { background: transparent; color: var(--ink); }
.btn-texto:hover:not(:disabled) { background: var(--hv); }
.btn-grande { height: 48px; font-size: 15px; padding: 0 18px; }
.btn-icone {
  width: 38px; height: 38px; display: grid; place-items: center; border: 0;
  background: transparent; color: var(--mu); border-radius: var(--r); cursor: pointer;
}
.btn-icone:hover { background: var(--hv); color: var(--ink); }
.btn [class^="icon-"] { font-size: 17px; }

/* Campos: normal, foco, erro, desabilitado */
.campo { display: flex; flex-direction: column; gap: 5px; }
.campo-rotulo { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; color: var(--mu); }
.entrada, .caixa-entrada {
  height: 46px; padding: 0 12px; width: 100%;
  background: var(--bg); border: 1px solid var(--ln); border-radius: var(--r);
  font-size: 15px; color: var(--ink); outline: none;
}
.entrada:focus, .caixa-entrada:focus-within { border-color: var(--ink); }
.caixa-entrada { display: flex; align-items: center; padding: 0 4px 0 12px; }
.caixa-entrada input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 15px; outline: none; }
.campo.com-erro .campo-rotulo { color: var(--acI); }
.campo.com-erro .entrada, .campo.com-erro .caixa-entrada { background: var(--acS); border-color: var(--ac); }
.entrada:disabled { background: var(--sk); color: var(--mu); opacity: .7; }
.campo-ajuda { font-size: 12px; color: var(--fa); }
.campo.com-erro .campo-ajuda { color: var(--acI); }

.marcar { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mu); cursor: pointer; user-select: none; }
.marcar input { width: 18px; height: 18px; margin: 0; accent-color: var(--ink); cursor: pointer; }

/* Avisos */
.alerta { display: flex; gap: 10px; padding: 10px 12px; border-radius: var(--rc); font-size: 13px; }
.alerta [class^="icon-"] { font-size: 16px; margin-top: 2px; flex: none; }
.alerta-erro { background: var(--acS); border: 1px solid var(--ac); color: var(--acI); }
.alerta-info { background: var(--sk); color: var(--ink); }

/* Modal */
.modal-fundo { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; background: rgba(45, 43, 43, .45); }
.modal {
  width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 12px; padding: 24px;
  background: var(--pn); border-radius: var(--rc); box-shadow: var(--shadow-pop);
}
.modal-icone { width: 44px; height: 44px; display: grid; place-items: center; background: var(--sk); border-radius: var(--ra); font-size: 20px; }

/* Faixa do ambiente de teste */
.faixa-teste {
  position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 60;
  display: flex; align-items: center; gap: 6px; padding: 4px 12px;
  background: var(--ink); color: var(--pn); border-radius: var(--rt);
  font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; pointer-events: none;
}

/* Carregando */
.girando { animation: girar 1s linear infinite; display: inline-block; }
@keyframes girar { to { transform: rotate(360deg); } }