/* Enovadora Reservas: página do cliente final (reservar.html) e tela do dono (index.html).
   13/10/2026: visual "loja de verdade" (o azul de antes tinha cara de IA): papel creme, títulos em mincho, linhas finas,
   a cor da loja (--cor, padrão carvão) só em seleção e ações. Celular primeiro. */
:root {
  --cor: #2A2623;
  --fundo: #ffffff; --fundo-2: #F6F7F9; --ln: #E6E8EC;
  --texto: #0B0D12; --texto-2: #4B5563; --texto-3: #8A93A3;
  --verde: #15803D; --verde-claro: #E8F6EC; --vermelho: #B91C1C; --vermelho-claro: #FDECEC; --amarelo: #A16207; --amarelo-claro: #FFF6E5;
  --sans: "Inter", "Noto Sans JP", system-ui, sans-serif;
  --serif: "Shippori Mincho", "Noto Serif JP", "Cormorant Garamond", serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font: 400 15px/1.6 var(--sans); color: var(--texto); background: var(--fundo); min-height: 100vh; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: 400 16px var(--sans); color: var(--texto); }
a { color: var(--cor); }
[hidden] { display: none !important; }

/* ---------- cliente final ---------- */
.topo-loja { border-bottom: 1px solid var(--ln); background: linear-gradient(180deg, color-mix(in srgb, var(--cor) 7%, #fff), #fff); }
.topo-dentro, .conteudo { max-width: 560px; margin: 0 auto; padding: 20px 16px; }
.topo-loja h1 { font-size: 22px; font-weight: 700; letter-spacing: .01em; }
.sub { font-size: 13px; color: var(--texto-2); margin-top: 4px; white-space: pre-line; }
.aviso-loja { font-size: 13px; color: var(--texto-2); background: var(--fundo-2); border-radius: 14px; padding: 12px 14px; margin-bottom: 18px; white-space: pre-line; }
.passo { margin-bottom: 26px; }
.passo h2 { font-size: 13px; font-weight: 600; color: var(--texto-3); letter-spacing: .04em; margin-bottom: 10px; }
.passo h2 b { color: var(--cor); margin-right: 6px; }
.opcoes { display: grid; gap: 8px; }
.opcao { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 14px 16px; border: 1px solid var(--ln); border-radius: 16px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.opcao small { display: block; font-size: 12.5px; color: var(--texto-3); margin-top: 2px; }
.opcao .preco { flex: none; font-weight: 600; font-size: 14px; }
.opcao.sel { border-color: var(--cor); box-shadow: 0 0 0 2px color-mix(in srgb, var(--cor) 25%, transparent); }
.fichas { display: flex; flex-wrap: wrap; gap: 8px; }
.ficha { padding: 9px 14px; border: 1px solid var(--ln); border-radius: 999px; font-size: 14px; background: #fff; }
.ficha.sel { background: var(--cor); border-color: var(--cor); color: #fff; }

.mes-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.mes-topo b { font-size: 15px; }
.mes-topo button { width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--ln); font-size: 18px; }
.mes-topo button:disabled { opacity: .3; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.cal .sem { font-size: 11.5px; color: var(--texto-3); padding: 4px 0; }
.cal .dia { aspect-ratio: 1; border-radius: 12px; font-size: 14px; color: var(--texto-3); }
.cal .dia.livre { color: var(--texto); background: color-mix(in srgb, var(--cor) 9%, #fff); font-weight: 600; }
.cal .dia.sel { background: var(--cor); color: #fff; }
.cal .dia:disabled { cursor: default; }
.horas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }
.hora { padding: 11px 0; border: 1px solid var(--ln); border-radius: 12px; font-weight: 600; font-size: 14px; background: #fff; }
.hora.sel { background: var(--cor); border-color: var(--cor); color: #fff; }
.vazio { font-size: 14px; color: var(--texto-3); padding: 8px 0; }

.campo { display: block; margin-bottom: 12px; }
.campo span { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.campo span em { font-style: normal; font-weight: 400; color: var(--texto-3); margin-left: 4px; }
.campo input, .campo select, .campo textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--ln); border-radius: 14px; background: #fff; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 2px solid color-mix(in srgb, var(--cor) 35%, transparent); border-color: var(--cor); }
.isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.botao { display: flex; align-items: center; justify-content: center; width: 100%; height: 52px; border-radius: 16px; font-weight: 600; font-size: 16px; background: var(--fundo-2); text-decoration: none; color: var(--texto); }
.botao.pri { background: var(--cor); color: #fff; box-shadow: 0 10px 24px color-mix(in srgb, var(--cor) 30%, transparent); }
.botao:disabled { opacity: .55; }
.botao + .botao { margin-top: 10px; }
.resumo { border: 1px solid var(--ln); border-radius: 18px; padding: 16px; margin-bottom: 16px; }
.resumo div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid var(--ln); font-size: 14px; }
.resumo div:first-child { border-top: 0; }
.resumo div span { color: var(--texto-3); flex: none; }
.resumo div b { font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.selo { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; margin-bottom: 10px; }
.selo.confirmada { background: var(--verde-claro); color: var(--verde); }
.selo.pendente { background: var(--amarelo-claro); color: var(--amarelo); }
.selo.cancelada, .selo.nao_veio { background: var(--vermelho-claro); color: var(--vermelho); }
.selo.concluida { background: var(--fundo-2); color: var(--texto-2); }
.feito h2 { font-size: 20px; margin-bottom: 6px; }
.feito p { font-size: 14px; color: var(--texto-2); margin-bottom: 16px; }
.guardar { font-size: 12.5px; color: var(--texto-3); margin-top: 14px; }
.rodape-res { max-width: 560px; margin: 0 auto; padding: 24px 16px 40px; font-size: 12px; color: var(--texto-3); text-align: center; }
.rodape-res a { color: var(--texto-3); }
.carregando { color: var(--texto-3); }
.avisos { position: fixed; z-index: 90; left: 16px; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; max-width: 528px; margin: 0 auto; }
.toast { padding: 12px 16px; background: var(--texto); color: #fff; border-radius: 14px; font-size: 14px; box-shadow: 0 14px 34px rgba(11,13,18,.25); }
.toast.erro { background: var(--vermelho); }

/* ---------- dono ---------- */
.pg-dono { background: var(--fundo-2); }
.dono-topo { position: sticky; top: 0; z-index: 10; background: #fff; border-bottom: 1px solid var(--ln); }
.dono-topo .dentro { max-width: 980px; margin: 0 auto; padding: 12px 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dono-topo h1 { font-size: 18px; font-weight: 700; margin-right: auto; }
.dono-topo select { padding: 8px 10px; border: 1px solid var(--ln); border-radius: 12px; background: #fff; font-size: 14px; }
.abas { display: flex; gap: 4px; max-width: 980px; margin: 0 auto; padding: 0 16px; overflow-x: auto; }
.abas button { padding: 10px 14px; font-size: 14px; font-weight: 600; color: var(--texto-3); border-bottom: 2px solid transparent; white-space: nowrap; }
.abas button.ativo { color: var(--texto); border-color: var(--cor); }
.dono-main { max-width: 980px; margin: 0 auto; padding: 16px; }
.cartao { background: #fff; border: 1px solid var(--ln); border-radius: 18px; padding: 16px; margin-bottom: 14px; }
.cartao h2 { font-size: 15px; font-weight: 600; margin-bottom: 12px; }
.dia-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.dia-nav b { font-size: 16px; margin-right: auto; white-space: nowrap; flex: 1 0 auto; }
.dia-nav input { padding: 7px 10px; border: 1px solid var(--ln); border-radius: 12px; font-size: 14px; }
.dia-nav button, .mini { padding: 8px 12px; border-radius: 12px; border: 1px solid var(--ln); background: #fff; font-size: 13px; font-weight: 600; }
.mini.pri { background: var(--cor); border-color: var(--cor); color: #fff; }
.mini.perigo { color: var(--vermelho); }
.reserva { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--ln); }
.reserva:first-child { border-top: 0; }
.reserva .hora-r { font-weight: 700; font-size: 15px; }
.reserva .hora-r small { display: block; font-weight: 400; font-size: 12px; color: var(--texto-3); }
.reserva .quem { font-weight: 600; }
.reserva .det { font-size: 13px; color: var(--texto-2); overflow-wrap: anywhere; }
.reserva .acoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.reserva.cancelada .quem, .reserva.nao_veio .quem { text-decoration: line-through; color: var(--texto-3); }
.grade-conf { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .grade-conf { grid-template-columns: 1fr 1fr; } }
.linha-item { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--ln); font-size: 14px; }
.linha-item:first-child { border-top: 0; }
.linha-item .nome-i { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.linha-item.inativo .nome-i { color: var(--texto-3); text-decoration: line-through; }
.form-linha { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.form-linha input, .form-linha select { flex: 1 1 110px; min-width: 0; padding: 10px 12px; border: 1px solid var(--ln); border-radius: 12px; font-size: 14px; }
.hor-dia { display: flex; align-items: center; gap: 8px; padding: 6px 0; flex-wrap: wrap; }
.hor-dia b { width: 34px; }
.hor-dia input { width: 92px; padding: 8px; border: 1px solid var(--ln); border-radius: 10px; font-size: 14px; }
.dica { font-size: 12.5px; color: var(--texto-3); margin-top: 8px; }
.link-loja { font-size: 13px; overflow-wrap: anywhere; background: var(--fundo-2); border-radius: 12px; padding: 10px 12px; margin: 8px 0; }

/* ---------- visual elegante da página do cliente (13/10/2026) ---------- */
.pg-reservar { --fundo: #FBF9F5; --fundo-2: #F3EFE8; --ln: #E4DED3; --texto: #1F1B16; --texto-2: #5A5248; --texto-3: #978D80; background: var(--fundo); }
.pg-reservar .topo-loja { background: var(--fundo); border-bottom: 1px solid var(--ln); text-align: center; }
.pg-reservar .topo-dentro { padding: 34px 16px 26px; }
.pg-reservar .topo-loja h1 { font: 600 26px/1.3 var(--serif); letter-spacing: .06em; }
.pg-reservar .topo-loja h1::after { content: ""; display: block; width: 28px; height: 1px; background: var(--cor); margin: 14px auto 0; }
.pg-reservar .sub { font-size: 12.5px; letter-spacing: .04em; }
.pg-reservar .passo h2 { font: 600 15px/1.4 var(--serif); color: var(--texto); letter-spacing: .08em; padding-bottom: 8px; border-bottom: 1px solid var(--ln); margin-bottom: 14px; }
.pg-reservar .passo h2 b { font: 500 11px var(--sans); color: var(--texto-3); letter-spacing: .1em; margin-right: 10px; }
.pg-reservar .opcao { border-radius: 2px; background: #fff; padding: 16px 18px; }
.pg-reservar .opcao span:first-child { font: 600 15.5px/1.5 var(--serif); letter-spacing: .03em; }
.pg-reservar .opcao small { font-family: var(--sans); letter-spacing: 0; }
.pg-reservar .opcao .preco { font: 500 14px var(--sans); letter-spacing: .02em; }
.pg-reservar .opcao.sel { border-color: var(--cor); box-shadow: inset 0 0 0 1px var(--cor); }
.pg-reservar .ficha { border-radius: 2px; background: #fff; letter-spacing: .04em; }
.pg-reservar .ficha.sel { background: var(--cor); border-color: var(--cor); color: #fff; }
.pg-reservar .mes-topo b { font: 600 16px var(--serif); letter-spacing: .08em; }
.pg-reservar .mes-topo button { border-radius: 2px; background: #fff; }
.pg-reservar .cal .dia { border-radius: 2px; }
.pg-reservar .cal .dia.livre { background: #fff; color: var(--texto); box-shadow: inset 0 0 0 1px var(--ln); font-weight: 500; }
.pg-reservar .cal .dia.sel { background: var(--cor); color: #fff; box-shadow: none; }
.pg-reservar .hora { border-radius: 2px; font-weight: 500; letter-spacing: .04em; }
.pg-reservar .hora.sel { background: var(--cor); border-color: var(--cor); }
.pg-reservar .campo input, .pg-reservar .campo textarea, .pg-reservar .campo select { border-radius: 2px; }
.pg-reservar .botao { border-radius: 2px; letter-spacing: .1em; }
.pg-reservar .botao.pri { box-shadow: none; }
.pg-reservar .resumo { border-radius: 2px; background: #fff; }
.pg-reservar .aviso-loja { border-radius: 2px; background: var(--fundo-2); text-align: center; }
.pg-reservar .feito h2 { font: 600 22px/1.4 var(--serif); letter-spacing: .04em; }
.pg-reservar .selo { border-radius: 2px; }