/* Tudo que é cor/tema vem de variáveis; as personalizadas são aplicadas pelo app.js (aplicarVisual) */
:root {
  --primaria:#1a8cff; --azul:var(--primaria); --azul-esc:color-mix(in srgb, var(--primaria) 78%, black);
  --menu-a:#1a9bff; --menu-b:#0b6fd6;
  --st-agendado:#2563eb; --st-confirmado:#facc15; --st-concluido:#16a34a; --st-faltou:#dc2626; --st-cancelado:#111827;
  --fundo:#f5f7fb; --card:#ffffff; --borda:#e5e9f0; --texto:#1e293b; --suave:#64748b;
  --hover:#f1f5fb; --cab:#f8fafd; --realce:color-mix(in srgb, var(--primaria) 14%, var(--card));
  --hachura-a:#f4f6fa; --hachura-b:#eceff5; --toast:#1e293b;
  --raio:12px; --fonte:14px; --sombra:0 2px 10px rgba(15,40,90,.07); --hora:64px;
}
html[data-tema="escuro"] {
  --fundo:#0e1520; --card:#171f2e; --borda:#2a3547; --texto:#e6ebf4; --suave:#98a6bd;
  --hover:#1f2a3d; --cab:#1b2538; --hachura-a:#141c29; --hachura-b:#101722; --toast:#334155;
  --sombra:0 2px 10px rgba(0,0,0,.35); color-scheme:dark;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; display:flex; min-height:100vh; font:var(--fonte)/1.45 "Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif; color:var(--texto); background:var(--fundo); }
h1 { font-size:17px; margin:0; } h2 { font-size:15px; margin:18px 0 4px; }
button, input, select, textarea { font:inherit; color:inherit; }

/* Menu lateral */
aside { width:220px; flex:none; position:sticky; top:0; height:100vh; overflow:auto; padding:16px 12px; display:flex; flex-direction:column;
  background:linear-gradient(180deg,var(--menu-a) 0%,var(--menu-b) 100%); color:#fff; }
.marca { display:flex; align-items:center; gap:10px; padding:4px 10px 18px; font-size:18px; font-weight:700; word-break:break-word; }
.marca img { max-width:44px; max-height:44px; border-radius:8px; background:#fff; object-fit:contain; }
nav { display:flex; flex-direction:column; gap:4px; }
nav button { display:flex; align-items:center; gap:10px; width:100%; text-align:left; border:0; background:none; color:rgba(255,255,255,.9);
  padding:10px 12px; border-radius:calc(var(--raio) - 2px); cursor:pointer; transition:background .15s; }
nav button:hover { background:rgba(255,255,255,.16); }
nav button.ativa { background:var(--card); color:var(--azul-esc); font-weight:600; box-shadow:0 2px 8px rgba(0,0,0,.15); }
nav .ico { width:24px; text-align:center; font-size:16px; }
nav .ico-img { width:24px; height:24px; object-fit:contain; }
.usuario-box { margin-top:auto; padding:12px 10px 0; font-size:13px; border-top:1px solid rgba(255,255,255,.25); }
.usuario-box button { margin-top:8px; width:100%; background:rgba(255,255,255,.16); color:#fff; border:0; }
.usuario-box button:hover { background:rgba(255,255,255,.28); }
main { flex:1; min-width:0; padding:20px 24px; }

/* Controles */
button { padding:7px 14px; border:1px solid var(--borda); background:var(--card); border-radius:calc(var(--raio) - 4px); cursor:pointer; transition:background .12s, box-shadow .12s; }
button:hover { background:var(--hover); }
button.primario { background:var(--primaria); border-color:var(--primaria); color:#fff; font-weight:600; box-shadow:0 2px 6px color-mix(in srgb, var(--primaria) 35%, transparent); }
button.primario:hover { background:var(--azul-esc); }
button.perigo { color:#ef4444; border-color:color-mix(in srgb, #ef4444 40%, var(--borda)); }
input, select, textarea { padding:8px 10px; border:1px solid var(--borda); border-radius:calc(var(--raio) - 4px); background:var(--card); width:100%; }
input:focus, select:focus, textarea:focus { outline:2px solid color-mix(in srgb, var(--primaria) 40%, transparent); border-color:var(--primaria); }
input[type=color] { padding:2px; height:36px; cursor:pointer; }
.barra { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:14px; }
.barra input[type=search] { max-width:320px; } .barra select { width:auto; }
.espaco { flex:1; }
.seg { display:inline-flex; background:var(--card); border:1px solid var(--borda); border-radius:calc(var(--raio) - 3px); padding:2px; }
.seg button { border:0; background:none; border-radius:calc(var(--raio) - 5px); padding:5px 14px; }
.seg button.ativa { background:var(--primaria); color:#fff; font-weight:600; }
label { display:block; margin:10px 0; font-weight:600; font-size:13px; }
label input, label select, label textarea { margin-top:4px; font-weight:400; }
label.check { font-weight:400; display:flex; gap:6px; align-items:center; }
label.check input { width:auto; margin:0; }
.linha { display:flex; gap:6px; } .linha select { flex:1; }
.dica, .sub { color:var(--suave); font-size:12px; margin:4px 0; }
.acoes { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; } .acoes input { flex:1; min-width:180px; }
.cartao, .card { background:var(--card); border:1px solid var(--borda); border-radius:var(--raio); box-shadow:var(--sombra); }
.cartao { padding:8px 20px 20px; max-width:680px; }
.grade-cores { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:4px 14px; }
.logo-prev { display:flex; align-items:center; gap:12px; margin:6px 0; }
.logo-prev img { max-width:80px; max-height:80px; border:1px solid var(--borda); border-radius:8px; background:#fff; object-fit:contain; }
.subabas { margin-bottom:14px; }

/* Tabelas */
.tabela-wrap { overflow-x:auto; background:var(--card); border:1px solid var(--borda); border-radius:var(--raio); box-shadow:var(--sombra); }
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:10px 14px; border-bottom:1px solid var(--borda); vertical-align:top; }
th { background:var(--cab); font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--suave); }
tr:last-child td { border-bottom:0; }
tbody tr:hover { background:var(--hover); }
.vazio { padding:28px; text-align:center; color:var(--suave); }
.pilula { padding:2px 10px; border-radius:99px; font-size:12px; color:#fff; white-space:nowrap; }
.s-pendente { background:#f59e0b; } .s-enviada { background:#16a34a; } .s-erro { background:#dc2626; } .s-cancelada { background:#94a3b8; }
.cor-bolinha { display:inline-block; width:12px; height:12px; border-radius:50%; vertical-align:middle; margin-right:6px; }
.inativo { opacity:.5; }
td.acoes-cel { white-space:nowrap; }
pre.log { margin:0; padding:12px 14px; max-height:65vh; overflow:auto; font:12px/1.55 Consolas,monospace; white-space:pre-wrap; word-break:break-word; }

/* Início */
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px; margin-bottom:14px; }
.card { padding:16px 20px; }
.card h3 { display:flex; align-items:center; gap:8px; margin:0 0 10px; font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:var(--suave); }
.ico-card { width:28px; height:28px; object-fit:contain; }
.card .num { font-size:30px; font-weight:700; color:var(--azul-esc); }
.card ol, .card ul { margin:0; padding-left:20px; } .card li { margin:6px 0; }

/* Agenda: painel lateral + grade */
#agenda-layout { display:grid; grid-template-columns:250px 1fr; gap:16px; align-items:start; }
#agenda-lado { display:flex; flex-direction:column; gap:14px; }
.lado-card { padding:12px; }
.mini-cab { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; font-weight:600; }
.mini-cab span::first-letter { text-transform:uppercase; }
.mini-cab button { padding:0 8px; border:0; background:none; font-size:18px; }
.mini { display:grid; grid-template-columns:repeat(7,1fr); text-align:center; font-size:12px; gap:3px 2px; }
.mini .dow { color:var(--suave); font-weight:600; padding:3px 0; }
.mini button { width:28px; height:28px; padding:0; margin:0 auto; border:0; background:none; border-radius:50%; font-size:12px; }
.mini button.st-livre, .bola.st-livre { background:#bbf7d0; color:#166534; }
.mini button.st-ocupado, .bola.st-ocupado { background:#fde68a; color:#78350f; }
.mini button.st-lotado, .bola.st-lotado { background:#fecaca; color:#b91c1c; }
.mini button.semana { box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--primaria) 55%, transparent); }
.mini button.hoje { font-weight:800; text-decoration:underline; }
.mini button.sel, .bola.st-sel { background:var(--primaria); color:#fff; font-weight:700; box-shadow:none; }
.legenda-mini { display:flex; flex-wrap:wrap; gap:4px 10px; margin-top:10px; font-size:11px; color:var(--suave); }
.legenda-mini .bola { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:4px; vertical-align:-1px; }
.legenda { display:flex; flex-direction:column; gap:2px; }
.legenda h4 { margin:0 0 6px; font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:var(--suave); }
.legenda button { display:flex; align-items:center; gap:8px; border:0; text-align:left; width:100%; background:none; padding:6px 8px; }
.legenda button.ativa { background:var(--realce); font-weight:600; }
.legenda .cor-bolinha { margin:0; flex:none; }

#grade-wrap { background:var(--card); border:1px solid var(--borda); border-radius:var(--raio); box-shadow:var(--sombra); overflow:auto; max-height:calc(100vh - 130px); }
.grade { display:grid; min-width:560px; }
.cab { position:sticky; top:0; z-index:5; background:var(--card); border-bottom:1px solid var(--borda); border-left:1px solid var(--borda); padding:10px 6px; text-align:center; font-weight:600; }
.cab.hoje { color:var(--azul-esc); box-shadow:inset 0 -3px 0 var(--primaria); }
.cab-vazio { position:sticky; top:0; left:0; z-index:6; background:var(--card); border-bottom:1px solid var(--borda); }
.horas { position:sticky; left:0; z-index:4; background:var(--card); }
.horas div { height:var(--hora); font-size:11px; color:var(--suave); text-align:right; padding:2px 8px; border-top:1px solid var(--borda); }
.col { position:relative; border-left:1px solid var(--borda); cursor:pointer;
  background-image:linear-gradient(var(--borda) 1px, transparent 1px); background-size:100% var(--hora); }
.col:hover { background-color:var(--hover); }
.nao-func { background:repeating-linear-gradient(45deg,var(--hachura-a),var(--hachura-a) 6px,var(--hachura-b) 6px,var(--hachura-b) 12px); position:absolute; left:0; right:0; pointer-events:none; }
.bloco { position:absolute; border-radius:calc(var(--raio) - 4px); padding:4px 8px; color:#fff; font-size:12px; overflow:hidden; cursor:pointer;
  box-shadow:0 2px 6px rgba(15,40,90,.2); line-height:1.3; transition:transform .1s, box-shadow .1s; }
.bloco:hover { transform:translateY(-1px); box-shadow:0 5px 12px rgba(15,40,90,.28); z-index:3; }
.bloco b { display:block; }
.bloco.curto { white-space:nowrap; text-overflow:ellipsis; padding-top:1px; padding-bottom:0; line-height:1.7; }
.bloco.curto b { display:inline; }

/* Cores por status: o bloco da agenda e o seletor do popover seguem a mesma cor */
.bloco.agendado, .status-sel.st-agendado { background:var(--st-agendado); color:#fff; }
.bloco.confirmado, .status-sel.st-confirmado { background:var(--st-confirmado); color:#2b2300; }
.bloco.concluido, .status-sel.st-concluido { background:var(--st-concluido); color:#fff; }
.bloco.faltou, .status-sel.st-faltou { background:var(--st-faltou); color:#fff; }
.bloco.cancelado, .status-sel.st-cancelado { background:var(--st-cancelado); color:#fff; }
.status-sel { width:100%; font-weight:700; border:0; cursor:pointer; }
.status-sel option { background:#fff; color:#1e293b; font-weight:400; }

/* Popover do agendamento */
#popover { position:fixed; z-index:50; width:300px; background:var(--card); border:1px solid var(--borda); border-radius:var(--raio); box-shadow:0 12px 32px rgba(15,40,90,.3); }
#popover .p-topo { padding:10px 14px; border-bottom:1px solid var(--borda); display:flex; justify-content:space-between; align-items:center; font-weight:700; }
#popover .p-topo button { border:0; background:none; font-size:18px; padding:0 4px; color:var(--suave); }
#popover .p-corpo { padding:10px 14px; } #popover .p-corpo div { margin:3px 0; }
#popover .p-acoes { padding:10px 14px 14px; display:flex; flex-wrap:wrap; gap:6px; border-top:1px solid var(--borda); }

/* Empresa */
.hor-linha { display:grid; grid-template-columns:90px auto 1fr 1fr 1fr 1fr; gap:6px; align-items:center; margin:4px 0; }
.hor-linha input[type=time] { margin:0; } .hor-linha input[type=checkbox] { width:auto; }

dialog { border:0; border-radius:calc(var(--raio) + 4px); padding:18px 22px; width:min(520px,94vw); background:var(--card); color:var(--texto); box-shadow:0 20px 50px rgba(15,40,90,.35); }
dialog::backdrop { background:rgba(15,30,60,.45); }
dialog h2 { margin-top:0; }
dialog.confirmacao { width:min(420px,92vw); text-align:center; padding:24px 26px 20px; }
dialog.confirmacao h2 { margin:0 0 8px; font-size:18px; }
dialog.confirmacao p { margin:0 0 6px; color:var(--suave); font-size:15px; }
dialog.confirmacao .acoes { justify-content:center; margin-top:18px; }
dialog.confirmacao .acoes button { min-width:120px; padding:9px 16px; }
button.perigo-cheio { background:#dc2626; border-color:#dc2626; color:#fff; font-weight:600; }
button.perigo-cheio:hover { background:#b91c1c; }
#toasts { position:fixed; right:16px; bottom:16px; display:flex; flex-direction:column; gap:8px; z-index:99; }
.toast { background:var(--toast); color:#fff; padding:10px 16px; border-radius:calc(var(--raio) - 2px); max-width:360px; box-shadow:0 6px 16px rgba(0,0,0,.25); }
.toast.erro { background:#dc2626; }

/* Tela de login */
#login { position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:16px;
  background:linear-gradient(135deg,var(--menu-a),var(--menu-b)); }
#login .caixa { width:min(400px,100%); background:var(--card); border-radius:calc(var(--raio) + 6px); padding:28px 26px; box-shadow:0 24px 60px rgba(0,0,0,.35); }
#login .logo { text-align:center; margin-bottom:12px; } #login .logo img { max-width:120px; max-height:90px; object-fit:contain; }
#login h2 { text-align:center; margin:0 0 4px; font-size:20px; }
#login .dica { text-align:center; }
#login .erro-login { color:#dc2626; text-align:center; min-height:20px; margin:8px 0 0; font-size:13px; }
#login button[type=submit] { width:100%; padding:10px; margin-top:6px; }

@media (max-width:1000px) { #agenda-layout { grid-template-columns:1fr; } #agenda-lado { flex-direction:row; flex-wrap:wrap; } #agenda-lado > * { flex:1; min-width:230px; } }

/* Campo com pesquisa (combo) */
.combo { position:relative; flex:1; }
.combo-busca { margin-top:4px; }
.combo-lista { position:absolute; left:0; right:0; top:100%; z-index:70; margin:2px 0 0; padding:4px; list-style:none; max-height:220px; overflow:auto;
  background:var(--card); border:1px solid var(--borda); border-radius:calc(var(--raio) - 4px); box-shadow:0 8px 24px rgba(15,40,90,.25); font-weight:400; }
.combo-lista li { padding:7px 10px; border-radius:6px; cursor:pointer; }
.combo-lista li.ativo, .combo-lista li:hover { background:var(--realce); }
.combo-lista li.sem { color:var(--suave); cursor:default; }
.combo-lista li.sem:hover { background:none; }

/* Busca na agenda */
.busca-ag { position:relative; flex:1; min-width:220px; max-width:420px; }
.resultados { position:absolute; left:0; right:0; top:100%; z-index:60; margin-top:4px; max-height:320px; overflow:auto;
  background:var(--card); border:1px solid var(--borda); border-radius:var(--raio); box-shadow:0 10px 28px rgba(15,40,90,.28); }
.resultados button { display:block; width:100%; text-align:left; border:0; border-radius:0; border-bottom:1px solid var(--borda); padding:8px 12px; background:none; }
.resultados button:hover { background:var(--realce); }
.resultados button .sub { display:block; margin:0 0 0 18px; }
.bloco.esmaecido { opacity:.22; }
.bloco.destaque { z-index:4; outline:3px solid #fff; box-shadow:0 0 0 5px var(--primaria), 0 8px 20px rgba(0,0,0,.35); animation:pulsar 1s ease-in-out 3; }
@keyframes pulsar { 50% { transform:scale(1.04); } }
.marca .marca-icone { width:34px; height:34px; max-width:none; max-height:none; background:none; border-radius:0; }

/* Página pública de agendamento (/agendar) */
body.publico { display:block; }
.pub { max-width:640px; margin:0 auto; padding:20px 16px 60px; }
.pub-topo { text-align:center; margin-bottom:16px; }
.pub-topo img { max-width:110px; max-height:90px; object-fit:contain; margin-bottom:6px; }
.pub-topo h1 { font-size:24px; }
.pub-card { padding:16px 18px; margin-bottom:14px; }
.pub-card h2 { margin:0 0 12px; }
.opcoes { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:8px; }
.opcao { display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left; padding:10px 14px; }
.opcao.sel, .hora.sel, .dia.sel { background:var(--primaria); border-color:var(--primaria); color:#fff; }
.opcao.sel .sub { color:rgba(255,255,255,.85); }
.horas-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(80px,1fr)); gap:8px; }
.hora { padding:9px 0; font-weight:600; }
.cal-cab { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; text-transform:capitalize; }
.cal-cab button { padding:2px 14px; font-size:18px; }
.cal-grade { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; text-align:center; }
.cal-grade .dow { color:var(--suave); font-size:12px; font-weight:600; padding:4px 0; }
.dia { padding:9px 0; border-radius:50%; border-color:transparent; font-weight:600; }
.dia.off { color:var(--suave); opacity:.4; background:none; font-weight:400; }
.resumo { background:var(--hover); border-radius:calc(var(--raio) - 2px); padding:10px 14px; margin-bottom:10px; line-height:1.9; }
.isca { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.pub .erro-login { color:#dc2626; margin:8px 0; min-height:0; }
#form button[type=submit] { width:100%; padding:11px; }

/* Calendário público: amarelo = tem horário, vermelho = lotado, cinza = sem expediente */
.dia.livre { background:#fde047; color:#3b2f00; }
.dia.lotado { background:#ef4444; color:#fff; opacity:1; }
.dia.fechado { background:var(--hover); color:var(--suave); opacity:.55; font-weight:400; }
.dia:disabled { cursor:not-allowed; }
.dia.livre.sel { background:var(--primaria); color:#fff; outline:3px solid color-mix(in srgb, var(--primaria) 35%, transparent); }
.legenda-cal { display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:12px; font-size:12px; color:var(--suave); }
.legenda-cal .bola { display:inline-block; width:12px; height:12px; border-radius:50%; vertical-align:-1px; margin-right:4px; }
.bola.livre { background:#fde047; } .bola.lotado { background:#ef4444; } .bola.fechado { background:var(--borda); }

/* Calendário público: dias redondos e leves */
.cal-cab { text-transform:none; }
.cal-cab b { display:inline-block; font-size:16px; }
.cal-cab b::first-letter { text-transform:uppercase; }
.cal-cab button { border:0; background:var(--hover); border-radius:50%; width:34px; height:34px; padding:0; }
.cal-grade { gap:6px 4px; }
.cal-grade .dia { width:100%; max-width:42px; aspect-ratio:1; padding:0; margin:0 auto; border-radius:50%; border:0; font-size:14px; }
.dia.livre { background:#fde68a; color:#78350f; }
.dia.livre:hover { background:#fcd34d; }
.dia.lotado { background:#fecaca; color:#b91c1c; opacity:1; }
.dia.fechado { background:none; color:#b6bfcc; opacity:1; }
.dia.livre.sel { background:var(--primaria); color:#fff; outline:0; box-shadow:0 0 0 3px color-mix(in srgb, var(--primaria) 30%, transparent); }
.bola.livre { background:#fde68a; } .bola.lotado { background:#fecaca; } .bola.fechado { background:#e5e9f0; }

/* Formulário por etapas */
.passos { list-style:none; display:flex; justify-content:space-between; gap:6px; margin:0 0 16px; padding:0; }
.passos li { flex:1; text-align:center; font-size:12px; color:var(--suave); position:relative; }
.passos li span { display:flex; align-items:center; justify-content:center; width:28px; height:28px; margin:0 auto 4px; border-radius:50%;
  background:var(--borda); color:var(--suave); font-weight:700; position:relative; z-index:1; }
.passos li::before { content:''; position:absolute; top:13px; left:-50%; width:100%; height:2px; background:var(--borda); }
.passos li:first-child::before { display:none; }
.passos li.feito span { background:color-mix(in srgb, var(--primaria) 30%, var(--card)); color:var(--azul-esc); }
.passos li.feito::before, .passos li.ativo::before { background:var(--primaria); }
.passos li.ativo span { background:var(--primaria); color:#fff; box-shadow:0 0 0 4px color-mix(in srgb, var(--primaria) 20%, transparent); }
.passos li.ativo { color:var(--texto); font-weight:600; }
.nav-passos { display:flex; justify-content:space-between; gap:10px; margin-top:16px; }
.nav-passos button { min-width:110px; padding:10px 18px; }
.nav-passos button:disabled { opacity:.45; cursor:not-allowed; }
.combo.combo-pub .combo-busca { padding-right:30px; }
.combo.combo-pub::after { content:'▾'; position:absolute; right:12px; top:50%; transform:translateY(-35%); color:var(--suave); pointer-events:none; }
.pub-card h3 { font-size:14px; margin:16px 0 8px; }
.resumo > div { display:flex; justify-content:space-between; gap:12px; padding:5px 0; border-bottom:1px dashed var(--borda); line-height:1.4; }
.resumo > div:last-child { border-bottom:0; }
.resumo > div > span { color:var(--suave); }
.resumo > div > b { text-align:right; }
.sucesso { text-align:center; padding:28px 20px; }
.sucesso .resumo { text-align:left; margin:14px 0; }
.sucesso .ok-icone { width:64px; height:64px; margin:0 auto 10px; border-radius:50%; background:#16a34a; color:#fff; font-size:34px; line-height:64px; font-weight:700; }
.sucesso h2 { font-size:22px; margin:0 0 6px; }
.sucesso .primario { margin-top:8px; padding:11px 22px; }
.pub label { margin:12px 0; }

/* Seletores de cor redondos e compactos */
.grade-cores { grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); }
.grade-cores label { display:flex; flex-direction:row-reverse; justify-content:flex-end; align-items:center; gap:10px; margin:6px 0; font-weight:500; }
input[type=color] { -webkit-appearance:none; appearance:none; width:34px; height:34px; padding:0; margin:0 !important; border:2px solid var(--card); border-radius:50%;
  box-shadow:0 0 0 1px var(--borda), 0 1px 4px rgba(0,0,0,.18); cursor:pointer; background:none; flex:none; }
input[type=color]::-webkit-color-swatch-wrapper { padding:0; }
input[type=color]::-webkit-color-swatch { border:0; border-radius:50%; }
input[type=color]::-moz-color-swatch { border:0; border-radius:50%; }
input[type=color]:hover { box-shadow:0 0 0 2px var(--primaria); }

/* Etapa 1 do link do cliente: a lista de procedimentos abre logo abaixo do campo, sem sobrepor os botões */
.combo.combo-pub .combo-lista { position:static; margin-top:6px; box-shadow:none; max-height:240px; }
.profs-box { border:1px solid var(--borda); border-radius:calc(var(--raio) - 4px); padding:4px 14px 8px; margin:12px 0; }
.profs-box legend { font-weight:600; font-size:13px; padding:0 6px; }
.combo.combo-pub::after { top:15px; transform:none; } /* seta fica no campo, não sobre a lista aberta */

/* Barra do topo e botão de menu (barrinhas) */
#conteudo { flex:1; min-width:0; }
#topo { position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:12px; padding:8px 16px; background:var(--card); border-bottom:1px solid var(--borda); }
#topo-titulo { font-size:16px; }
.hamb { display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; width:42px; height:42px; padding:0; border-radius:12px; flex:none; }
.hamb span { display:block; width:20px; height:2px; border-radius:2px; background:var(--texto); transition:transform .2s, opacity .2s; }
body.menu-fechado aside { display:none; }
#fundo-menu { display:none; }

/* Celular e tablet: o menu vira uma gaveta que abre pelo botão de barrinhas */
@media (max-width:900px) {
  aside { position:fixed; left:0; top:0; bottom:0; height:auto; width:min(280px, 82vw); z-index:100; transform:translateX(-102%);
    transition:transform .25s ease; box-shadow:none; padding:16px 12px 20px; }
  body.menu-aberto aside { transform:none; box-shadow:8px 0 30px rgba(0,0,0,.35); }
  body.menu-aberto #fundo-menu { display:block; position:fixed; inset:0; z-index:90; background:rgba(15,30,60,.5); }
  body.menu-fechado aside { display:flex; } /* o estado "fechado" do computador não vale no celular */
  main { padding:14px 12px 28px; }
  #topo { padding:8px 12px; }
}
@media (max-width:760px) {
  body { font-size:15px; }
  input, select, textarea { font-size:16px; } /* evita o zoom automático do iPhone ao tocar num campo */
  button { min-height:40px; }
  .barra { gap:8px; } .barra > * { flex:1 1 auto; }
  .barra .espaco { display:none; }
  .busca-ag { flex-basis:100%; max-width:none; }
  .barra select, .barra button, .seg { flex:1; }
  .barra input[type=search] { max-width:none; }
  .cards { grid-template-columns:1fr; }
  .card .num { font-size:26px; }
  .cartao { max-width:none; padding:6px 14px 16px; }
  .subabas .seg { display:flex; overflow-x:auto; max-width:100%; scrollbar-width:thin; }
  .subabas .seg button { white-space:nowrap; flex:none; }
  th, td { padding:8px 10px; }
  dialog { width:94vw; max-height:92vh; overflow:auto; padding:16px; }
  dialog .acoes button { flex:1 1 40%; }
  #popover { width:min(300px, calc(100vw - 16px)); }
  #grade-wrap { max-height:none; }
  .hor-linha { grid-template-columns:1fr 1fr 1fr; gap:6px 8px; margin:10px 0 14px; padding-bottom:10px; border-bottom:1px solid var(--borda); }
  .hor-linha strong { grid-column:1 / -1; }
  .hor-linha.dica { display:none; }
  .hl small { display:block; font-size:11px; color:var(--suave); }
  .grade-cores { grid-template-columns:1fr 1fr; }
  .pub { padding:14px 12px 40px; }
  .nav-passos button { min-width:0; flex:1; }
  .passos li { font-size:10.5px; }
}
.hl small { display:none; }
@media (max-width:760px) { .hl small { display:block; } }

/* App instalado no celular: respeita o "notch" e a barra inferior do iPhone */
#topo { padding-top:calc(8px + env(safe-area-inset-top)); }
aside { padding-top:calc(16px + env(safe-area-inset-top)); padding-bottom:calc(16px + env(safe-area-inset-bottom)); }
main { padding-bottom:calc(28px + env(safe-area-inset-bottom)); }
@media (display-mode: standalone) { body { overscroll-behavior-y:none; } }

/* Área da plataforma (/admin) */
body.plataforma { display:block; }
.topo-adm { gap:10px; flex-wrap:wrap; }
.adm { max-width:1150px; margin:0 auto; padding:20px 16px 40px; }
dialog.largo { width:min(820px, 96vw); }
.mini-btn { padding:2px 8px; min-height:0; font-size:12px; margin:2px 2px 0 0; }
td.acoes-cel { white-space:normal; }
td.acoes-cel button { margin:2px 2px 2px 0; padding:5px 10px; }
@media (max-width:760px) { .topo-adm strong { flex-basis:100%; } }