:root { --laranja: #FF6A00; --preto: #111; --cinza: #666; --borda: #ddd; }
* { box-sizing: border-box; }
body { margin: 0; padding: 0 0 4.5rem; font: 16px/1.5 system-ui, sans-serif; color: var(--preto); }
main { padding: 1rem; }
h1 { font-size: 1.4rem; margin: .5rem 0 1rem; }
h2 { font-size: 1.05rem; margin: 1.2rem 0 .4rem; }
a { color: var(--laranja); }
input, select, textarea, button { font: inherit; width: 100%; padding: .75rem; margin: .25rem 0 .75rem;
  border: 1px solid var(--borda); border-radius: 8px; }
button { background: var(--laranja); color: #fff; border: 0; font-weight: 600; min-height: 44px; }
.erro { color: #b00020; font-weight: 600; }
.barra { position: fixed; bottom: 0; left: 0; right: 0; display: flex; background: var(--preto);
  padding-bottom: env(safe-area-inset-bottom); }
.barra a { flex: 1; text-align: center; padding: .9rem .2rem; color: #fff; text-decoration: none; font-size: .8rem; }

.alerta { background: #ffe8e6; border: 2px solid #b00020; border-radius: 8px; padding: .75rem 1rem; margin: 0 0 1rem; }
.alerta ul { margin: .25rem 0 0; padding-left: 1.1rem; }
.caixa { display: flex; align-items: center; gap: .6rem; margin: .35rem 0; }
.caixa input { width: auto; min-height: 24px; }
fieldset { border: 1px solid var(--borda); border-radius: 8px; margin: 0 0 1rem; }
legend { font-weight: 600; color: var(--laranja); }

.mapa-grade { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.mapa-quadro { margin: 0; }
.mapa-quadro figcaption { font-size: .75rem; color: var(--cinza); text-align: center; }
.mapa-area { position: relative; touch-action: manipulation; }
.mapa-area img { width: 100%; display: block; }
.pino { position: absolute; transform: translate(-50%, -50%); width: 22px; height: 22px;
  border-radius: 50%; background: var(--laranja); color: #fff; font-size: .7rem; font-weight: 700;
  display: grid; place-items: center; border: 2px solid #fff; }
.lista { list-style: none; padding: 0; }
.lista li { border-bottom: 1px solid var(--borda); padding: .7rem .2rem; }
.lista a { text-decoration: none; color: inherit; display: block; }
.vazio, .cinza { color: var(--cinza); }
.inline { display: inline; }
button.secundario { width: auto; background: #fff; color: var(--cinza); border: 1px solid var(--borda);
  padding: .3rem .7rem; min-height: 32px; font-size: .8rem; }

.navegacao-dia { display: flex; justify-content: space-between; align-items: center; margin: .5rem 0 1rem; }
.navegacao-dia a { text-decoration: none; font-size: 1.5rem; color: var(--laranja); padding: 0 1rem; }
.acoes { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .4rem; }
.status-faltou { opacity: .6; }

.cartao { border: 1px solid var(--borda); border-radius: 10px; padding: 1rem; margin: 0 0 1rem; }
.cartao h2 { font-size: .95rem; margin: 0; color: var(--cinza); text-transform: uppercase; letter-spacing: .04em; }
.valor { font-size: 2rem; font-weight: 700; margin: .3rem 0; }
.pendente { color: #b00020; font-weight: 600; }

.conta { display: flex; gap: .5rem; margin: 2rem 0 1rem; justify-content: flex-end; }

.publico { max-width: 40rem; margin: 0 auto; padding-bottom: 2rem; }
.publico .termo { background: #fafafa; border: 1px solid var(--borda); border-radius: 10px;
  padding: .75rem 1rem; margin: 1rem 0; font-size: .95rem; }
.quadro-assinatura { position: relative; border: 2px dashed var(--borda); border-radius: 10px;
  background: #fff; margin: .25rem 0 .5rem; overflow: hidden; }
.quadro-assinatura canvas { display: block; touch-action: none; cursor: crosshair; }
.linha-assinatura { position: absolute; left: 8%; right: 8%; bottom: 34px;
  border-bottom: 1px solid var(--borda); pointer-events: none; }
.qr { display: grid; place-items: center; background: #fff; padding: 1rem;
  border: 1px solid var(--borda); border-radius: 12px; margin: 1rem 0; }
.qr svg { width: 100%; max-width: 320px; height: auto; }
.centro { text-align: center; padding-top: 3rem; }
.marca-ok { width: 72px; height: 72px; margin: 0 auto 1rem; border-radius: 50%;
  background: #0a8f3c; color: #fff; font-weight: 700; display: grid; place-items: center; font-size: 1.3rem; }
details summary { cursor: pointer; color: var(--laranja); margin: .5rem 0; }

.ajuda { font-size: .78rem; color: var(--cinza); margin: -.5rem 0 .8rem; }
.dupla { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.dupla label { display: block; }

.ou { text-align: center; color: var(--cinza); margin: 1rem 0; text-transform: uppercase; font-size: .8rem; letter-spacing: .1em; }

/* Tela fixa da assinatura: cobre a pagina e trava a rolagem enquanto o paciente desenha. */
.tela-assinatura { position: fixed; inset: 0; z-index: 1000; background: #fff;
  display: flex; flex-direction: column; touch-action: none; overscroll-behavior: none; }
.tela-assinatura[hidden] { display: none; }
.tela-assinatura-topo, .tela-assinatura-rodape { display: flex; align-items: center;
  justify-content: space-between; gap: .5rem; padding: .6rem 1rem;
  padding-top: calc(.6rem + env(safe-area-inset-top)); }
.tela-assinatura-rodape { padding-bottom: calc(.6rem + env(safe-area-inset-bottom)); }
.tela-assinatura-rodape button { margin: 0; }
.tela-assinatura-rodape #confirmar-assinatura { flex: 1; }
.tela-assinatura .quadro-assinatura { flex: 1; margin: 0 1rem; min-height: 0; }
.tela-assinatura .quadro-assinatura canvas { width: 100%; height: 100%; }
body.sem-rolagem { overflow: hidden; position: fixed; width: 100%; }