/* ===== Base (cores vêm de tema.css, gerado a partir de app.config.json) ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--fonte), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--fundo);
  color: var(--texto);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--primaria-escura); }
img { max-width: 100%; }

.icone { width: 20px; height: 20px; flex: none; display: inline-block; vertical-align: middle; }

.tela { min-height: 100vh; }
.tela-centro {
  display: -webkit-box; display: flex;
  -webkit-box-align: center; align-items: center;
  -webkit-box-pack: center; justify-content: center;
  padding: 24px 16px;
  padding-top: calc(24px + env(safe-area-inset-top));
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
}
.logo-pulso { -webkit-animation: pulso 1.2s ease-in-out infinite; animation: pulso 1.2s ease-in-out infinite; border-radius: 18px; }
@-webkit-keyframes pulso { 50% { -webkit-transform: scale(.92); opacity: .7; } }
@keyframes pulso { 50% { transform: scale(.92); opacity: .7; } }

/* ===== Botões ===== */
.botao {
  display: -webkit-inline-box; display: inline-flex;
  -webkit-box-align: center; align-items: center;
  -webkit-box-pack: center; justify-content: center;
  border: 0; border-radius: 14px;
  padding: 10px 14px; min-height: 44px;
  font-weight: 700; font-size: 15px; text-decoration: none;
  -webkit-transition: background .15s, transform .1s; transition: background .15s, transform .1s;
  -webkit-user-select: none; user-select: none;
}
.botao:active { -webkit-transform: scale(.97); transform: scale(.97); }
.botao .icone + span, .botao span + .icone { margin-left: 8px; }
.botao-primario { background: var(--primaria); color: #fff; box-shadow: 0 6px 16px -6px var(--primaria); }
.botao-primario:hover { background: var(--primaria-escura); }
.botao-suave { background: var(--primaria-suave); color: var(--primaria-escura); }
.botao-suave:hover { filter: brightness(.97); }
.botao-contorno { background: var(--superficie); color: var(--texto); box-shadow: inset 0 0 0 1.5px var(--borda); }
.botao-grande { width: 100%; min-height: 54px; font-size: 17px; border-radius: 16px; }
.botao-pequeno { min-height: 40px; padding: 8px 12px; font-size: 14px; }
.botao[disabled] { opacity: .6; pointer-events: none; }

.botao-icone {
  width: 44px; height: 44px; border-radius: 14px; border: 0;
  background: transparent; color: var(--texto);
  display: -webkit-inline-box; display: inline-flex;
  -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center;
}
.botao-icone:active { background: var(--primaria-suave); }


/* ===== Campos ===== */
.campo, .busca { position: relative; margin-bottom: 14px; }
.campo-icone { position: absolute; left: 14px; top: 50%; width: 20px; height: 20px; margin-top: -10px; color: var(--texto-suave); pointer-events: none; }
.campo input, .busca input {
  width: 100%; height: 54px;
  border: 1.5px solid var(--borda); border-radius: 16px;
  background: var(--fundo);
  padding: 0 14px 0 44px;
  font-size: 16px; /* 16px evita zoom automático no iPhone */
  outline: none; -webkit-appearance: none; appearance: none;
  -webkit-transition: border-color .15s, box-shadow .15s; transition: border-color .15s, box-shadow .15s;
}
.campo input:focus, .busca input:focus { border-color: var(--primaria); box-shadow: 0 0 0 4px var(--primaria-suave); background: #fff; }


.botao-perigo { background: #E5484D; color: #fff; box-shadow: 0 6px 16px -6px #E5484D; }
.botao-perigo:hover { background: #CD2B31; }

/* ===== Pop-up com o tema (UI.confirmar) — nunca use alert/confirm do navegador ===== */
html.ui-travado { overflow: hidden; }
.ui-dialogo { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 90; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; padding: 16px; }
.ui-dialogo-fundo { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(43, 34, 53, .5); -webkit-animation: ui-sumir .2s ease-out; animation: ui-sumir .2s ease-out; }
.ui-dialogo-janela { position: relative; width: 100%; max-width: 380px; background: var(--superficie); border-radius: 26px; padding: 26px 20px 18px; text-align: center; box-shadow: 0 24px 60px -20px rgba(43, 34, 53, .55); -webkit-animation: ui-entrar .22s ease-out; animation: ui-entrar .22s ease-out; }
.ui-dialogo-icone { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 20px; background: var(--primaria-suave); color: var(--primaria); }
.ui-dialogo-icone .icone { width: 26px; height: 26px; }
.ui-dialogo.perigo .ui-dialogo-icone { background: #FFECEC; color: #E5484D; }
.ui-dialogo-titulo { font-size: 19px; font-weight: 800; margin: 12px 0 6px; }
.ui-dialogo-texto { margin: 0 0 6px; color: var(--texto-suave); font-size: 15px; }
.ui-dialogo-campo { margin: 12px 0 0; }
.ui-dialogo-campo input { width: 100%; height: 48px; border: 1.5px solid var(--borda); border-radius: 14px; padding: 0 14px; font-size: 16px; background: var(--fundo); outline: none; }
.ui-dialogo-campo input:focus { border-color: var(--primaria); box-shadow: 0 0 0 4px var(--primaria-suave); }
.ui-dialogo-botoes { display: -webkit-box; display: flex; margin-top: 18px; }
.ui-dialogo-botoes .botao { -webkit-box-flex: 1; flex: 1; min-height: 48px; }
.ui-dialogo-botoes .botao + .botao { margin-left: 10px; }
@-webkit-keyframes ui-entrar { from { opacity: 0; -webkit-transform: translateY(14px) scale(.97); } }
@keyframes ui-entrar { from { opacity: 0; transform: translateY(14px) scale(.97); } }
@-webkit-keyframes ui-sumir { from { opacity: 0; } }
@keyframes ui-sumir { from { opacity: 0; } }

/* ===== Aviso rápido (UI.avisar) ===== */
.ui-aviso { position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom)); z-index: 95; -webkit-transform: translateX(-50%); transform: translateX(-50%); background: var(--texto); color: #fff; border-radius: 14px; padding: 12px 16px; font-size: 14px; font-weight: 600; max-width: 90%; box-shadow: 0 10px 30px rgba(0,0,0,.25); -webkit-animation: ui-entrar .2s ease-out; animation: ui-entrar .2s ease-out; }
.ui-aviso.erro { background: #CD2B31; }
.ui-aviso.ok { background: #1E7A45; }