:root {
  --ink: #2a1f14;
  --parchment: #efe3c4;
  --parchment-2: #e4d3a8;
  --paper: #fbf6e8;
  --gold: #a07a35;
  --sea-dark: #28343c;
  --danger: #8c2a1c;
  --line: rgba(42, 31, 20, .4);
  --font-label: 'IM Fell English SC', Georgia, serif;
  --font-body: 'IM Fell English', Georgia, serif;
  --panel-left: min(300px, 86vw);
  --panel-right: min(380px, 92vw);
  /* tamanhos dos textos no mapa (ajustados pelo JS conforme o zoom) */
  --f1: 30px; --f2: 24px; --f3: 19px; --f4: 16px; --f5: 13.5px; --f6: 12px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--sea-dark); color: var(--ink); font-family: var(--font-body); overflow: hidden; }
#map { position: fixed; inset: 0; background: var(--sea-dark); }
.leaflet-container { font-family: var(--font-body); }
/* evita as linhas finas entre tiles em zoom fracionário: 1px de sobreposição */
.leaflet-tile-container img.leaflet-tile { width: 257px !important; height: 257px !important; mix-blend-mode: normal; }
#map.adding, #map.adding .leaflet-interactive { cursor: crosshair !important; }
body:not(.gm) .gm-only { display: none !important; }

/* ---------- botões ---------- */
.btn-tiny {
  font: 12px/1 var(--font-label); letter-spacing: .04em;
  padding: 5px 9px; border-radius: 4px; cursor: pointer;
  background: rgba(239, 227, 196, .85); color: var(--ink); border: 1px solid rgba(42, 31, 20, .45);
}
.btn-tiny:hover { background: var(--parchment); }
.gm-bar { position: fixed; top: 8px; right: 8px; z-index: 1300; display: flex; gap: 6px; }
.btn {
  font: 15px var(--font-body); padding: 7px 14px; border-radius: 4px; cursor: pointer; display: inline-block;
  background: var(--paper); color: var(--ink); border: 1px solid rgba(42, 31, 20, .45);
}
.btn:hover { background: #fff; }
.btn.primary { background: var(--ink); color: var(--parchment); }
.btn.danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn:disabled { opacity: .5; cursor: wait; }
.btn.small { font-size: 13px; padding: 4px 10px; }

.hint, .toast {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 1400;
  background: rgba(42, 31, 20, .9); color: var(--parchment); padding: 7px 14px; border-radius: 4px; font-size: 15px;
}
.hint { top: 12px; }
.toast { bottom: 70px; }
kbd { font: 12px monospace; background: rgba(255,255,255,.15); padding: 1px 4px; border-radius: 3px; }
.leaflet-control-zoom a { background: rgba(239, 227, 196, .9) !important; color: var(--ink) !important; }
.leaflet-bottom.leaflet-right { transition: right .25s; }
body.glossary-open .leaflet-bottom.leaflet-right { right: var(--panel-right); }

/* ---------- painéis laterais ---------- */
.panel {
  position: fixed; top: 0; bottom: 0; z-index: 1100; display: flex; flex-direction: column;
  background: rgba(239, 227, 196, .97); border: 0 solid var(--line); box-shadow: 0 0 24px rgba(0, 0, 0, .35);
  transition: transform .25s ease;
}
.panel.left { left: 0; width: var(--panel-left); border-right-width: 1px; transform: translateX(-102%); }
.panel.right { right: 0; width: var(--panel-right); border-left-width: 1px; transform: translateX(102%); }
body.places-open .panel.left, body.glossary-open .panel.right { transform: none; }
.panel-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px 6px; }
.panel.right .panel-head { padding-right: 150px; }   /* espaço para o botão do GM */
.panel-head h2 { margin: 0; font: 22px var(--font-label); flex: 1; }
.panel-close { border: none; background: none; font-size: 22px; cursor: pointer; color: var(--ink); padding: 0 4px; line-height: 1; }
.panel-tools { display: flex; gap: 6px; padding: 4px 12px 8px; }
.panel-tools input {
  flex: 1; min-width: 0; padding: 6px 9px; font: 15px var(--font-body); color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: 4px; outline: none;
}
.panel-body { flex: 1; overflow: auto; padding: 0 8px 16px; }
#glossary-index { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.panel-toggle {
  position: fixed; z-index: 1000; top: 8px; cursor: pointer;
  font: 13px/1 var(--font-label); letter-spacing: .03em; padding: 7px 11px; border-radius: 4px;
  background: rgba(239, 227, 196, .92); color: var(--ink); border: 1px solid rgba(42, 31, 20, .45);
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.panel-toggle.left { left: 8px; }
.panel-toggle.right { right: 8px; top: 40px; }
body.places-open .panel-toggle.left, body.glossary-open .panel-toggle.right { display: none; }

/* lista de locais agrupada por tag */
.group { margin: 2px 0 6px; }
.group > summary {
  list-style: none; cursor: pointer; padding: 6px 6px 4px; font: 15px var(--font-label); letter-spacing: .04em;
  border-bottom: 1px solid rgba(42, 31, 20, .2); display: flex; align-items: center; gap: 6px;
}
.group > summary::-webkit-details-marker { display: none; }
.group > summary::before { content: '▸'; font-size: 11px; transition: transform .15s; }
.group[open] > summary::before { transform: rotate(90deg); }
.group > summary .count { margin-left: auto; font: 12px var(--font-body); opacity: .6; }
.entry-list, .group ul { list-style: none; margin: 0; padding: 0; }
.entry-list li, .group li {
  display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 4px; cursor: pointer; font-size: 15px;
}
.entry-list li:hover, .group li:hover { background: var(--parchment-2); }
.entry-list li small, .group li small { margin-left: auto; opacity: .55; font-size: 12px; white-space: nowrap; }
.mini-icon { width: 18px; height: 18px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.mini-icon svg { max-width: 18px; max-height: 18px; }
.mini-icon.text { font: 11px var(--font-label); }
.empty-note { padding: 14px 10px; opacity: .65; font-size: 14px; list-style: none; }
.entry-list .thumb { width: 34px; height: 34px; border-radius: 3px; object-fit: cover; flex-shrink: 0; border: 1px solid rgba(42,31,20,.25); }
.entry-list .thumb.none { background: var(--parchment-2); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; }

/* leitura de uma info no painel */
#info-view { padding: 0 0 20px; }
.info-back { margin: 0 12px 10px; }
#info-view .pop-img { border-top: 1px solid rgba(42, 31, 20, .3); max-height: 300px; }

/* ---------- marcadores ---------- */
.loc-icon { background: none; border: none; }
.loc { position: absolute; left: 0; top: 0; cursor: pointer; }
.loc.hide-all { display: none; }
.loc.hide-label .label { display: none; }
.loc .sym { position: absolute; transform: translate(-50%, -50%); filter: drop-shadow(0 0 1.5px rgba(239, 227, 196, .9)); }
.loc .sym svg { display: block; }
.loc .label {
  position: absolute; top: 0; transform: translateY(-50%); white-space: nowrap;
  font-family: var(--font-label); color: var(--ink); letter-spacing: .02em;
  text-shadow: 0 0 2px var(--parchment), 0 0 3px var(--parchment), 0 0 5px rgba(239, 227, 196, .8);
}
.loc:hover .label { color: #000; text-decoration: underline; text-decoration-thickness: 1px; }
.label.ls-1 { font-size: var(--f1); letter-spacing: .12em; }
.label.ls-2 { font-size: var(--f2); letter-spacing: .08em; }
.label.ls-3 { font-size: var(--f3); font-weight: bold; }
.label.ls-4 { font-size: var(--f4); }
.label.ls-5 { font-size: var(--f5); }
.label.ls-6 { font-size: var(--f6); }
/* "Apenas texto": o próprio texto é o elemento, centralizado no ponto */
.t-texto .label { left: 0; transform: translate(-50%, -50%); text-align: center; color: rgba(42, 31, 20, .92); }
#map.gm .leaflet-marker-draggable .loc { cursor: move; }
.loc.highlight .sym, .loc.highlight .label { animation: pulse 1.2s ease-out 2; }
@keyframes pulse { 0% { filter: drop-shadow(0 0 0 #fff); } 50% { filter: drop-shadow(0 0 10px #fff8d8); } 100% { filter: drop-shadow(0 0 0 #fff); } }

/* ---------- popup e conteúdo ---------- */
.leaflet-popup-content-wrapper {
  background: var(--parchment); color: var(--ink); border-radius: 6px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .45); border: 1px solid rgba(42, 31, 20, .35);
}
.leaflet-popup-tip { background: var(--parchment); }
.leaflet-popup-content { margin: 0; width: min(440px, 80vw) !important; }
.leaflet-container a.leaflet-popup-close-button { color: var(--ink); font-size: 22px; line-height: 26px; width: 28px; height: 28px; top: 6px; right: 6px; z-index: 2; border-radius: 50%; background: rgba(239, 227, 196, .85); }
.pop { max-height: min(65vh, 620px); overflow: auto; border-radius: 6px; }
.pop-img { display: block; width: 100%; max-height: 260px; object-fit: cover; cursor: zoom-in; border-bottom: 1px solid rgba(42, 31, 20, .3); }
.pop-body { padding: 14px 18px 16px; }
.pop-body h3 { margin: 0 24px 2px 0; font: 24px/1.15 var(--font-label); }
.pop-type { font-size: 13px; font-style: italic; opacity: .8; margin-bottom: 10px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.chip { font: 11px var(--font-label); letter-spacing: .04em; font-style: normal; padding: 2px 7px; border-radius: 10px; background: var(--parchment-2); border: 1px solid rgba(42,31,20,.2); }
.desc { font-size: 16px; line-height: 1.45; }
.desc p { margin: 0 0 .7em; }
.desc h2, .desc h3 { font-family: var(--font-label); margin: .9em 0 .3em; }
.desc blockquote { margin: .6em 0; padding-left: 10px; border-left: 3px solid var(--gold); font-style: italic; }
.desc .ql-align-center { text-align: center; } .desc .ql-align-right { text-align: right; } .desc .ql-align-justify { text-align: justify; }
.desc a, .ql-editor a { color: #6b3f12; }
a.ref-link { color: #7a2e10 !important; font-weight: bold; text-decoration: none; border-bottom: 1px dotted currentColor; cursor: pointer; }
a.ref-link[data-ref-type="info"] { color: #2c4f6b !important; }
a.ref-link:hover { border-bottom-style: solid; }
a.ref-link.missing { color: #777 !important; border-bottom: none; cursor: default; font-weight: normal; }
.pop-actions { display: flex; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(42, 31, 20, .2); }

/* ---------- diálogos ---------- */
.dlg {
  border: 1px solid rgba(42, 31, 20, .5); border-radius: 8px; padding: 0; color: var(--ink);
  background: var(--parchment); box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.dlg::backdrop { background: rgba(10, 14, 18, .55); }
.dlg form { padding: 18px 22px; display: flex; flex-direction: column; gap: 12px; }
.dlg h2 { margin: 0; font: 24px var(--font-label); }
.dlg-small { width: min(420px, 92vw); }
.dlg-large { width: min(980px, 96vw); max-height: 96vh; }
.dlg input[type=text], .dlg input[type=password], .dlg input[type=search], .dlg select {
  width: 100%; padding: 7px 9px; font: 16px var(--font-body); color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: 4px;
}
.dlg label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.grid { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.grid > label:not(.check) { flex: 1; min-width: 200px; }
.dlg label.check { flex-direction: row; align-items: center; gap: 6px; padding-bottom: 8px; }
.dlg.mode-info .loc-only { display: none; }
fieldset.tags { border: 1px solid rgba(42, 31, 20, .25); border-radius: 4px; padding: 6px 10px 8px; margin: 0; }
fieldset.tags legend { font-size: 13px; padding: 0 4px; opacity: .8; }
#f-tags { display: flex; flex-wrap: wrap; gap: 6px; }
#f-tags label { flex-direction: row; align-items: center; gap: 5px; cursor: pointer; padding: 3px 10px; border-radius: 14px;
  background: var(--paper); border: 1px solid rgba(42, 31, 20, .3); font: 13px var(--font-label); }
#f-tags label:has(input:checked) { background: var(--ink); color: var(--parchment); }
#f-tags input { margin: 0; }
.actions { display: flex; justify-content: flex-end; gap: 8px; }
.error { color: var(--danger); margin: 0; min-height: 1em; font-size: 14px; }
.muted { opacity: .65; font-size: 13px; }

.image-field { display: flex; gap: 14px; align-items: center; }
.image-preview { width: 160px; height: 100px; border-radius: 4px; border: 1px dashed rgba(42, 31, 20, .45);
  background: var(--paper) center/cover no-repeat; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
.image-preview:not(.empty) { border-style: solid; color: transparent; }
.image-buttons { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.dlg label.editor-label { flex-direction: row; gap: 6px; align-items: baseline; margin-bottom: -6px; flex-wrap: wrap; }
#editor { height: 40vh; min-height: 240px; background: var(--paper); font: 17px/1.5 var(--font-body); }
.ql-toolbar.ql-snow { background: var(--parchment-2); border-color: var(--line) !important; border-radius: 4px 4px 0 0; }
.ql-container.ql-snow { border-color: var(--line) !important; border-radius: 0 0 4px 4px; }
.ql-editor { font-family: var(--font-body); font-size: 17px; }
.ql-snow.ql-toolbar button.ql-ref { width: auto; padding: 2px 8px; font: 13px var(--font-body); color: var(--ink); }

.seg { display: flex; }
.seg-btn { flex: 1; padding: 5px; font: 13px var(--font-label); cursor: pointer; background: var(--paper); color: var(--ink); border: 1px solid var(--line); }
.seg-btn:first-child { border-radius: 4px 0 0 4px; } .seg-btn:last-child { border-radius: 0 4px 4px 0; }
.seg-btn + .seg-btn { border-left: none; }
.seg-btn.active { background: var(--ink); color: var(--parchment); }
.pick-list { list-style: none; margin: 0; padding: 0; max-height: 46vh; overflow: auto; border: 1px solid rgba(42, 31, 20, .25); border-radius: 4px; background: var(--paper); }
.pick-list li { padding: 6px 8px; cursor: pointer; display: flex; gap: 8px; align-items: center; }
.pick-list li:hover { background: var(--parchment-2); }
.pick-list li small { margin-left: auto; opacity: .6; font-size: 12px; }
.pick-list:empty::after { content: 'Nada encontrado.'; display: block; padding: 10px; opacity: .6; }

.lightbox { position: fixed; inset: 0; z-index: 3000; background: rgba(0, 0, 0, .85); display: flex; align-items: center; justify-content: center; cursor: zoom-out; }
.lightbox img { max-width: 95vw; max-height: 95vh; box-shadow: 0 10px 40px #000; }

@media (max-width: 600px) {
  .panel.right .panel-head { padding-right: 110px; }
  #editor { height: 36vh; }
}

/* ---------- formas desenhadas (bordas, florestas, montanhas, pintura) ---------- */
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.shape-paint { filter: url(#soft-edge); }
.draw-bar {
  position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 1050;
  display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 6px;
  background: rgba(239, 227, 196, .95); border: 1px solid var(--line); box-shadow: 0 4px 16px rgba(0,0,0,.3);
}
.draw-bar .btn.active { background: var(--ink); color: var(--parchment); }
.draw-title { font: 13px var(--font-label); letter-spacing: .04em; padding: 0 4px; }
.draw-color input { width: 32px; height: 26px; padding: 0; border: 1px solid var(--line); border-radius: 4px; background: none; cursor: pointer; }
.edit-done { position: fixed; left: 50%; top: 52px; transform: translateX(-50%); z-index: 1400; }
.shape-pop { font-size: 14px; display: flex; flex-direction: column; gap: 8px; min-width: 210px; padding: 12px 14px; }
.shape-pop h4 { margin: 0; font: 17px var(--font-label); }
.shape-pop label { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.shape-pop input[type=range] { flex: 1; }
.shape-pop .row { display: flex; gap: 6px; }
.leaflet-popup.shape-popup .leaflet-popup-content { width: auto !important; }
@media (max-width: 600px) { .draw-bar { flex-wrap: wrap; width: calc(100vw - 20px); justify-content: center; } .draw-title { display: none; } }
#map.drawing .leaflet-paint-pane path, #map.drawing .leaflet-features-pane path, #map.drawing .leaflet-borders-pane path,
#map.drawing .leaflet-marker-pane .loc { pointer-events: none !important; }