* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #0f172a;
background: #e2e8f0; display: flex; flex-direction: column; }
/* ---------------------------------------------------------------- topo */
#topo { display: flex; align-items: center; gap: 16px; padding: 10px 16px; background: #fff;
border-bottom: 1px solid #cbd5e1; flex-wrap: wrap; }
#topo h1 { font-size: 15px; margin: 0; flex: 1 1 240px; }
#topo .acoes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tag-estado { font-size: 11.5px; color: #64748b; background: #f1f5f9; border-radius: 999px;
padding: 3px 10px; }
.tag-estado.ok { background: #dcfce7; color: #166534; }
.tag-estado.err { background: #fee2e2; color: #991b1b; }
button { font: inherit; font-size: 12.5px; padding: 6px 11px; border-radius: 8px;
border: 1px solid #cbd5e1; background: #fff; cursor: pointer; }
button:hover:not(:disabled) { background: #f1f5f9; }
button:disabled { opacity: .45; cursor: default; }
button.primary { background: #2563eb; border-color: #2563eb; color: #fff; }
button.primary:hover:not(:disabled) { background: #1d4ed8; }
button.danger { color: #b91c1c; border-color: #fecaca; }
/* ---------------------------------------------------------------- layout */
#corpo { flex: 1; display: flex; min-height: 0; }
#painel { width: 280px; flex: none; background: #fff; border-right: 1px solid #cbd5e1;
overflow-y: auto; padding: 14px 16px 24px; }
#painel h2 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em;
color: #64748b; margin: 18px 0 8px; }
#painel h2:first-child { margin-top: 0; }
main { position: relative; flex: 1; overflow: hidden; background: #e2e8f0; }
.palette { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.chip { border: 1px solid #cbd5e1; border-radius: 10px; padding: 8px 4px; text-align: center;
cursor: pointer; font-size: 10.5px; line-height: 1.25; color: #334155; background: #fff; }
.chip:hover { border-color: #94a3b8; background: #f8fafc; }
.chip.on { border-color: #2563eb; box-shadow: 0 0 0 2px #bfdbfe; background: #eff6ff; }
.chip img { height: 36px; display: block; margin: 0 auto 5px; pointer-events: none; }
ol.list { list-style: none; margin: 0; padding: 0; font-size: 12.5px; }
ol.list li { display: flex; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 8px;
cursor: pointer; border: 1px solid transparent; }
ol.list li:hover { background: #f8fafc; }
ol.list li.sel { background: #eff6ff; border-color: #bfdbfe; }
ol.list li img { height: 24px; }
ol.list li small { color: #64748b; display: block; font-size: 10.5px; }
label.f { display: block; font-size: 11.5px; color: #64748b; margin-bottom: 3px; }
input[type=text], input[type=password] { font: inherit; font-size: 12.5px; padding: 6px 8px;
border: 1px solid #cbd5e1; border-radius: 8px; width: 100%; }
input[type=range] { width: 100%; }
.coords { font-size: 11.5px; color: #64748b; margin: 6px 0 10px; }
.hint { font-size: 11.5px; color: #64748b; background: #f8fafc; border: 1px solid #e2e8f0;
border-radius: 8px; padding: 9px 10px; margin-top: 20px; }
.hint kbd { background: #fff; border: 1px solid #cbd5e1; border-bottom-width: 2px;
border-radius: 4px; padding: 0 4px; font-size: 10.5px; }
/* ---------------------------------------------------------------- mapa */
#viewport { position: absolute; inset: 0; touch-action: none; user-select: none; }
#viewport.adding { cursor: crosshair; }
#stage { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
#stage img.plan { display: block; width: 100%; height: 100%; }
.pin { position: absolute; transform: translate(-50%, -100%);
filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
.editavel .pin { cursor: move; }
/* sem moldura em volta do marcador selecionado — a seleção aparece na lista lateral */
.pin img { display: block; width: 100%; pointer-events: none; }
.tag { position: absolute; background: rgba(255,255,255,.92); border: 1px solid #94a3b8;
border-radius: 6px; padding: 1px 6px; white-space: nowrap; transform: translate(-50%, 0);
pointer-events: none; font-weight: 600; }
#hud { position: absolute; left: 12px; bottom: 12px; background: rgba(255,255,255,.95);
border: 1px solid #cbd5e1; border-radius: 10px; padding: 6px 10px; font-size: 12px;
display: flex; gap: 10px; align-items: center; }
#hud span { font-variant-numeric: tabular-nums; color: #475569; }
#toast { position: absolute; right: 12px; bottom: 12px; background: #0f172a; color: #fff;
border-radius: 10px; padding: 9px 13px; font-size: 12.5px; opacity: 0;
transition: opacity .25s; pointer-events: none; max-width: 420px; }
#toast.on { opacity: 1; }
/* ---------------------------------------------------------------- login */
dialog { border: none; border-radius: 14px; padding: 22px; max-width: 340px;
box-shadow: 0 20px 50px rgba(0,0,0,.25); }
dialog::backdrop { background: rgba(15,23,42,.45); }
dialog h3 { margin: 0 0 6px; font-size: 15px; }
dialog p { margin: 0 0 14px; font-size: 12.5px; color: #64748b; }
dialog menu { display: flex; gap: 8px; justify-content: flex-end; margin: 16px 0 0; padding: 0; }
.erro { color: #b91c1c !important; font-size: 12px; margin-top: 8px !important; }
@media (max-width: 720px) {
#painel { position: absolute; z-index: 5; height: 100%; box-shadow: 0 0 40px rgba(0,0,0,.2); }
}
/* ------------------------------------------------- cursores e arrasto nativo */
/* nunca deixar o navegador iniciar o "drag da imagem" ao clicar */
#stage img.plan, .pin img, .chip img, ol.list li img {
-webkit-user-drag: none; user-select: none; -webkit-user-select: none;
}
#viewport { cursor: default; }
#viewport.espaco { cursor: grab; }
#viewport.panning { cursor: grabbing; }
body:not(.editavel) #viewport { cursor: grab; }
/* laço de seleção (arrastar o fundo no modo edição) */
#laco { position: absolute; border: 1.5px dashed #2563eb; background: rgba(37,99,235,.12);
pointer-events: none; z-index: 4; }
/* ------------------------------------------------- marcadores de número e texto */
.pin.numero { transform: translate(-50%, -50%); background: #fff; color: #7c2d12;
border: solid #b45309; border-radius: 999px; display: grid; place-items: center;
font-weight: 700; line-height: 1; }
.pin.texto { transform: translate(-50%, -50%); background: rgba(255,255,255,.94);
border: 1px solid #94a3b8; color: #0f172a; font-weight: 600;
white-space: nowrap; line-height: 1.3; }
/* ------------------------------------------------- selo colado no cursor */
#fantasma { position: absolute; pointer-events: none; z-index: 6; opacity: .8; }
#fantasma.f-selo { transform: translate(-50%, -50%); }
#fantasma.f-selo img { width: 100%; display: block; }
#fantasma.f-num { transform: translate(-50%, -50%); background: #fff; color: #7c2d12;
border: solid #b45309; border-radius: 999px; display: grid;
place-items: center; font-weight: 700; line-height: 1; }
#fantasma.f-txt { transform: translate(-50%, -50%); background: rgba(255,255,255,.94);
border: 1px dashed #94a3b8; color: #0f172a; font-weight: 600;
white-space: nowrap; border-radius: 6px; }
/* ------------------------------------------------- ícones da paleta/lista */
.ico { display: grid; place-items: center; margin: 0 auto 5px; font-weight: 700; }
.ico-num { width: 34px; height: 34px; border-radius: 999px; background: #fff;
border: 2.5px solid #b45309; color: #7c2d12; font-size: 17px; }
.ico-txt { width: 34px; height: 34px; border-radius: 7px; background: #fff;
border: 2px solid #94a3b8; color: #0f172a; font-size: 19px; }
ol.list li .ico { width: 24px; height: 24px; font-size: 12px; margin: 0; flex: none; }
input[type=number] { font: inherit; font-size: 12.5px; padding: 6px 8px;
border: 1px solid #cbd5e1; border-radius: 8px; width: 100%; }
/* campo de nome pisca quando chamado pelo duplo clique no marcador */
@keyframes piscar { 0%, 100% { box-shadow: 0 0 0 0 rgba(37,99,235,0); }
35% { box-shadow: 0 0 0 4px rgba(37,99,235,.35); } }
input.piscar { animation: piscar .9s ease-out 2; border-color: #2563eb; }
/* ------------------------------------------------- ferramenta borracha (tecla B) */
#viewport.borracha { cursor: crosshair; }
#fantasma.f-borracha { transform: translate(-50%, -50%); opacity: .95;
filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
#fantasma.f-borracha svg { width: 100%; height: 100%; display: block; }
.borracha .pin:hover { filter: drop-shadow(0 0 4px #ef4444) saturate(.4); opacity: .55; }
.ico-bor { width: 34px; height: 34px; }
.ico-bor svg { width: 26px; height: 26px; }
ol.list li .ico-bor svg { width: 18px; height: 18px; }
/* ------------------------------------------------- marcador de índice (tabela) */
.pin.indice { transform: none; background: rgba(255,255,255,.96); border: 1px solid #94a3b8;
color: #0f172a; padding: .5em .6em; border-radius: .35em; line-height: 1.55;
max-width: 40em; }
.pin.indice .idx-tit { font-weight: 700; margin-bottom: .35em; }
.pin.indice table { border-collapse: collapse; width: 100%; }
.pin.indice th { text-align: left; font-weight: 700; color: #475569;
border-bottom: .09em solid #cbd5e1; padding: .12em .5em .2em 0; }
.pin.indice td { padding: .1em .5em .1em 0; vertical-align: top; }
.pin.indice td.c { font-weight: 700; color: #7c2d12; white-space: nowrap; }
.pin.indice td.vazio { color: #94a3b8; }
.ico-idx { width: 34px; height: 34px; border-radius: 7px; background: #fff;
border: 2px solid #94a3b8; color: #0f172a; font-size: 20px; }
/* editor do índice no painel lateral */
.idx-editor { max-height: 320px; overflow-y: auto; border: 1px solid #e2e8f0;
border-radius: 8px; padding: 6px; background: #f8fafc; }
.idx-row { display: grid; grid-template-columns: 54px 1fr; gap: 4px 6px;
align-items: center; padding: 5px 3px; border-bottom: 1px solid #e2e8f0; }
.idx-row:last-child { border-bottom: 0; }
.idx-row b { font-size: 11.5px; color: #7c2d12; }
.idx-row input { font-size: 11.5px; padding: 4px 6px; }
.idx-row input[data-campo="setor"] { grid-column: 2; }
select#fFiltro { font: inherit; font-size: 12.5px; padding: 6px 8px; width: 100%;
border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; }