/* Nova / editar reserva — só o específico da tela; tokens e componentes vêm de css/base.css. */
.voltar { display: inline-flex; align-items: center; min-height: var(--alvo); font-weight: 700; text-decoration: none; margin: -8px 0 2px; }
#formReserva { display: grid; gap: 16px; }
#formReserva .obrig { margin: 0; color: var(--suave); font-size: 14px; }
#extras { display: grid; gap: 16px; }
.linha { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 12px; }
@media (max-width: 560px) { .linha { grid-template-columns: 1fr; } }
.campo .erro:empty { display: none; }
.campo:has(.erro:not(:empty)) :is(input, textarea) { border-color: var(--vermelho); }
.outro-texto { margin-top: 2px; }
.acoes { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
@media (max-width: 560px) { .acoes .btn { flex: 1; } }
#aviso:empty { display: none; }
#aviso { margin: 0; padding: 10px 12px; border-radius: 8px; font-weight: 600; }
#aviso.ok { color: var(--verde); background: var(--verde-claro); }
#aviso.alerta { color: var(--ambar); background: var(--ambar-claro); }
#aviso.erro, .falha-campos { color: var(--vermelho); background: var(--vermelho-claro); padding: 10px 12px; border-radius: 8px; }
.falha-campos .btn { margin-top: 8px; }